Fix various display issues in metrics view

dashboard/src/components/DiskUsageItem.vue

@@ -15,15 +15,6 @@ const props = defineProps({
   filesystem: Object
 });
 
-// https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array
-function shuffle(a) {
-  for (let i = a.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1));
-    [a[i], a[j]] = [a[j], a[i]];
-  }
-  return a;
-}
-
 function hue(numOfSteps, step) {
   const deg = 360/numOfSteps;
   return `hsl(${deg*step} 70% 50%)`;
@@ -137,11 +128,13 @@ onUnmounted(() => {
 
 <template>
   <div class="disk-item">
-    <div class="disk-item-title">{{ filesystem.mountpoint }} <Button v-if="isExpanded" small tool plain icon="fa-solid fa-rotate" :disabled="percent < 100" :loading="percent < 100" @click="refresh()"/></div>
-    <div class="disk-item-type-and-speed">{{ filesystem.type }} <span v-if="speed !== -1">{{ prettyDecimalSize(speed * 1000 * 1000) }}/sec</span></div>
-    <div class="usage-label">
-      <div>{{ prettyDecimalSize(filesystem.size) }} total</div>
-      <div>{{ prettyDecimalSize(filesystem.available) }} available</div>
+    <div class="disk-item-title">
+      <div>{{ filesystem.mountpoint }} <small class="text-muted">{{ filesystem.type }}</small></div>
+      <Button v-if="isExpanded" small tool plain icon="fa-solid fa-rotate" :disabled="percent < 100" :loading="percent < 100" @click="refresh()"/>
+    </div>
+    <div class="disk-item-size-and-speed">
+      <div>{{ prettyDecimalSize(filesystem.available) }} free of {{ prettyDecimalSize(filesystem.size) }} total</div>
+      <div v-if="speed !== -1">I/O Rate: {{ prettyDecimalSize(speed * 1000 * 1000) }}/sec</div>
     </div>
     <div v-if="isExpanded" @mouseout="highlight = null">
       <div class="disk-size" v-if="percent < 100">
@@ -206,12 +199,7 @@ onUnmounted(() => {
   font-size: 18px;
 }
 
-.disk-item-type-and-speed {
-  display: flex;
-  justify-content: space-between;
-}
-
-.usage-label {
+.disk-item-size-and-speed {
   display: flex;
   justify-content: space-between;
 }