Fix missing cells for nodes with no IO/timing in Grid

In plans with I/O Timings, some nodes may not have I/O Timings but the
cells for the corresponding still need to be displayed even if empty.

This change has been forgotten in cbda727.

Author: pgiraud

src/components/Grid.vue

@@ -249,6 +249,12 @@ const columnsLeft = computed<string[]>(() => {
   if (hasTime.value) {
     cols.push("time")
   }
+  if (hasIORead.value) {
+    cols.push("ioread")
+  }
+  if (hasIOWrite.value) {
+    cols.push("iowrite")
+  }
   if (hasRows.value) {
     cols.push("rows")
   }

src/components/GridRow.vue

@@ -136,43 +136,49 @@ function formattedProp(propName: keyof typeof NodeProp) {
     </td>
     <td
       class="text-end grid-progress-cell text-nowrap"
-      v-if="node[NodeProp.IO_READ_TIME]"
+      v-if="columns.includes('ioread')"
       v-tippy="{ content: ioTooltip, allowHTML: true }"
     >
-      <GridProgressBar
-        :percentage="
-          (node[NodeProp.EXCLUSIVE_IO_READ_TIME] /
-            (plan.content.Plan[NodeProp.IO_READ_TIME] +
-              plan.content.Plan[NodeProp.IO_WRITE_TIME])) *
-          100
-        "
-      ></GridProgressBar>
-      {{ Math.round(node[NodeProp.EXCLUSIVE_IO_READ_TIME]).toLocaleString() }}
-      <div v-if="showDetails" class="small text-body-secondary">
-        {{ duration(node[NodeProp.EXCLUSIVE_IO_READ_TIME]) }}
-        <br />
-        {{ transferRate(node[NodeProp.AVERAGE_IO_READ_SPEED]) }}
-      </div>
+      <template v-if="node[NodeProp.IO_READ_TIME]">
+        <GridProgressBar
+          :percentage="
+            (node[NodeProp.EXCLUSIVE_IO_READ_TIME] /
+              (plan.content.Plan[NodeProp.IO_READ_TIME] +
+                plan.content.Plan[NodeProp.IO_WRITE_TIME])) *
+            100
+          "
+        ></GridProgressBar>
+        {{ Math.round(node[NodeProp.EXCLUSIVE_IO_READ_TIME]).toLocaleString() }}
+        <div v-if="showDetails" class="small text-body-secondary">
+          {{ duration(node[NodeProp.EXCLUSIVE_IO_READ_TIME]) }}
+          <br />
+          {{ transferRate(node[NodeProp.AVERAGE_IO_READ_SPEED]) }}
+        </div>
+      </template>
     </td>
     <td
       class="text-end grid-progress-cell text-nowrap"
-      v-if="node[NodeProp.IO_WRITE_TIME]"
+      v-if="columns.includes('iowrite')"
       v-tippy="{ content: ioTooltip, allowHTML: true }"
     >
-      <GridProgressBar
-        :percentage="
-          (node[NodeProp.EXCLUSIVE_IO_WRITE_TIME] /
-            (plan.content.Plan[NodeProp.IO_READ_TIME] +
-              plan.content.Plan[NodeProp.IO_WRITE_TIME])) *
-          100
-        "
-      ></GridProgressBar>
-      {{ Math.round(node[NodeProp.EXCLUSIVE_IO_WRITE_TIME]).toLocaleString() }}
-      <div v-if="showDetails" class="small text-body-secondary">
-        {{ duration(node[NodeProp.EXCLUSIVE_IO_WRITE_TIME]) }}
-        <br />
-        {{ transferRate(node[NodeProp.AVERAGE_IO_WRITE_SPEED]) }}
-      </div>
+      <template v-if="node[NodeProp.IO_WRITE_TIME]">
+        <GridProgressBar
+          :percentage="
+            (node[NodeProp.EXCLUSIVE_IO_WRITE_TIME] /
+              (plan.content.Plan[NodeProp.IO_READ_TIME] +
+                plan.content.Plan[NodeProp.IO_WRITE_TIME])) *
+            100
+          "
+        ></GridProgressBar>
+        {{
+          Math.round(node[NodeProp.EXCLUSIVE_IO_WRITE_TIME]).toLocaleString()
+        }}
+        <div v-if="showDetails" class="small text-body-secondary">
+          {{ duration(node[NodeProp.EXCLUSIVE_IO_WRITE_TIME]) }}
+          <br />
+          {{ transferRate(node[NodeProp.AVERAGE_IO_WRITE_SPEED]) }}
+        </div>
+      </template>
     </td>
     <td
       class="text-end grid-progress-cell text-nowrap"