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;
 }

dashboard/src/components/SystemInfo.vue

@@ -77,8 +77,8 @@ onMounted(async () => {
     <InputDialog ref="inputDialog"/>
 
     <template #header-buttons>
-      <Button plain href="/logs.html?id=box" target="_blank">{{ $t('main.action.logs') }}</Button>
-      <Button plain @click="onReboot()">{{ $t('main.action.reboot') }}</Button>
+      <Button href="/logs.html?id=box" target="_blank">{{ $t('main.action.logs') }}</Button>
+      <Button @click="onReboot()">{{ $t('main.action.reboot') }}</Button>
     </template>
 
     <div class="info-row">

dashboard/src/components/SystemMetrics.vue

@@ -38,7 +38,7 @@ const networkWriteTotal = ref(0);
 const blockReadTotal = ref(0);
 const blockWriteTotal = ref(0);
 
-const containers = ref([]);
+const selectedContainers = ref([]);
 const allContainers = ref([]);
 
 // TODO: add redis containers here
@@ -58,7 +58,7 @@ let metricStream = null;
 async function liveRefresh() {
   const options = {
     system: true,
-    appIds: containers.value.map(c => c.id),
+    appIds: selectedContainers.value.map(c => c.id),
     serviceIds: []
   };
   metricStream = await systemModel.getMetricStream(options);
@@ -67,7 +67,7 @@ async function liveRefresh() {
     const data = JSON.parse(message.data);
 
     for (const [id, metric] of Object.entries(data)) {
-      const idx = id !== 'system' ? containers.value.findIndex(c => c.id === id) : containers.value.length;
+      const idx = id !== 'system' ? selectedContainers.value.findIndex(c => c.id === id) : selectedContainers.value.length;
 
       if (cpuGraphItem.value) cpuGraphItem.value.pushData(idx, metric.cpu);
       if (memoryGraphItem.value) memoryGraphItem.value.pushData(idx*2, metric.memory, metric.swap || []); // apps have no swap
@@ -98,7 +98,7 @@ function generateConsistentColors(n, saturation = 90, lightness = 90) {
 }
 
 function createDatasets() {
-    const colors = generateConsistentColors((containers.value.length+1)*2); // 1 for the 'system'
+    const colors = generateConsistentColors((selectedContainers.value.length+1)*2); // 1 for the 'system'
 
     const datasets = {
       cpu: [],
@@ -106,9 +106,9 @@ function createDatasets() {
       disk: [],
       network: [],
     };
-    const appIds = containers.value.map(c => c.id);
+    const appIds = selectedContainers.value.map(c => c.id);
     for (const [idx, id] of appIds.concat(['system']).entries()) { // live stream code depends on this concat order!
-      const prefix = id === 'system' ? 'System' : containers.value[idx].label;
+      const prefix = id === 'system' ? 'System' : selectedContainers.value[idx].label;
 
       datasets.cpu.push({ label: `${prefix} CPU`, color: colors[idx*2], stack: `${prefix}-cpu`, data: [] });
       datasets.memory.push({ label: `${prefix} Memory`, color: colors[idx*2], stack: `${prefix}-memswap`, data: [] });
@@ -137,13 +137,13 @@ async function rebuild() {
       fromSecs: period.value.hours * 60 * 60,
       intervalSecs: period.value.intervalSecs,
       system: true,
-      appIds: containers.value.map(c => c.id),
+      appIds: selectedContainers.value.map(c => c.id),
       serviceIds: []
     };
     const [error, metrics] = await systemModel.getMetrics(options);
     if (error) return console.error(error);
 
-    const appIds = containers.value.map(c => c.id);
+    const appIds = selectedContainers.value.map(c => c.id);
     for (const [idx, id] of appIds.concat(['system']).entries()) {
       if (!metrics[id]) continue;
       datasets.cpu[idx].data = metrics[id].cpu;
@@ -183,9 +183,9 @@ onMounted(async () => {
   [error, result] = await appsModel.list();
   if (error) return console.error(error);
   allContainers.value = result.map(a => { return { label: a.label || a.fqdn, id: a.id }; });
-  allContainers.value.push({ separator: true });
+  if (result.length) allContainers.value.push({ separator: true });
   allContainers.value.push(...serviceContainers);
-  containers.value = [];
+  selectedContainers.value = [];
 
   busy.value = false;
   await nextTick();
@@ -202,7 +202,7 @@ onUnmounted(async () => {
 <template>
   <Section :title="$t('system.graphs.title')">
     <template #header-buttons>
-      <MultiSelect @select="rebuild()" v-model="containers" :options="allContainers" option-label="label" :search-threshold="20" select-all-label="Select All"/>
+      <MultiSelect @select="rebuild()" v-model="selectedContainers" :options="allContainers" option-label="label" :search-threshold="20" select-all-label="Select All"/>
       <SingleSelect @select="rebuild()" v-model="period" :options="periods" option-label="label"/>
     </template>