Show io timings in the Grid view

Fixes dalibo#706

Some css rules have been added to separate group headers. Better but
still not perfect.

Author: pgiraud

src/components/Grid.vue

@@ -64,6 +64,30 @@ const hasTime = computed((): boolean => {
   })
 })
 
+const hasIORead = computed((): boolean => {
+  return _.some(plans, (plan: Row[]) => {
+    return _.some(plan, (row: Row) => {
+      return row[1][NodeProp.IO_READ_TIME] || 0 > 1
+    })
+  })
+})
+
+const hasIOWrite = computed((): boolean => {
+  return _.some(plans, (plan: Row[]) => {
+    return _.some(plan, (row: Row) => {
+      return row[1][NodeProp.IO_WRITE_TIME] || 0 > 1
+    })
+  })
+})
+
+const hasIO = computed((): boolean => {
+  return hasIORead.value || hasIOWrite.value
+})
+
+const ioColumns = computed((): number => {
+  return _.filter([hasIORead.value, hasIOWrite.value], (v) => v).length
+})
+
 const hasRows = computed((): boolean => {
   return _.some(plans, (plan: Row[]) => {
     return _.some(plan, (row: Row) => {
@@ -290,8 +314,12 @@ const columns = computed(() => {
   <div>
     <table class="table table-sm table-hover">
       <thead class="table-secondary sticky-top" style="z-index: 2">
-        <tr v-if="columnsRight.length > 0">
-          <th :colspan="2 + columnsLeft.length"></th>
+        <tr v-if="hasIO || columnsRight.length > 0" class="table-group">
+          <th colspan="2">
+            <!-- id & time -->
+          </th>
+          <th class="text-center" :colspan="ioColumns" v-if="hasIO">io</th>
+          <th :colspan="columnsLeft.length"></th>
           <th
             class="text-center"
             :colspan="sharedBlocksColumns"
@@ -317,6 +345,8 @@ const columns = computed(() => {
         <tr>
           <th class="text-center"></th>
           <th class="text-center" v-if="hasTime">time</th>
+          <th class="text-center" v-if="hasIORead">read</th>
+          <th class="text-center" v-if="hasIOWrite">write</th>
           <th class="text-center" v-if="hasRows">rows</th>
           <th class="text-center" v-if="hasEstimation">estim</th>
           <th class="text-center" v-if="hasCost">cost</th>
@@ -371,3 +401,21 @@ const columns = computed(() => {
     </table>
   </div>
 </template>
+
+<style scoped>
+table {
+  thead tr.table-group {
+    th {
+      border-left: 1px solid #b5b6b7;
+      border-bottom: 0;
+    }
+    /*
+     * This targets the second empty cell in a pair
+     * and avoids border between 2 empty cells
+     */
+    th:empty + th:empty {
+      border-left: 0;
+    }
+  }
+}
+</style>

src/components/GridRow.vue

@@ -13,6 +13,7 @@ import {
   formatNodeProp,
   keysToString,
   sortKeys,
+  transferRate,
 } from "@/filters"
 import LevelDivider from "@/components/LevelDivider.vue"
 import GridProgressBar from "@/components/GridProgressBar.vue"
@@ -54,6 +55,7 @@ const {
   executionTimePercent,
   heapFetchesClass,
   heapFetchesTooltip,
+  ioTooltip,
   localDirtiedPercent,
   localHitPercent,
   localReadPercent,
@@ -132,6 +134,46 @@ function formattedProp(propName: keyof typeof NodeProp) {
         </template>
       </div>
     </td>
+    <td
+      class="text-end grid-progress-cell text-nowrap"
+      v-if="node[NodeProp.IO_READ_TIME]"
+      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>
+    </td>
+    <td
+      class="text-end grid-progress-cell text-nowrap"
+      v-if="node[NodeProp.IO_WRITE_TIME]"
+      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>
+    </td>
     <td
       class="text-end grid-progress-cell text-nowrap"
       v-if="columns.includes('rows')"

src/interfaces.ts

@@ -112,6 +112,8 @@ export class Node {
   [NodeProp.EXCLUSIVE_IO_WRITE_TIME]!: number;
   [NodeProp.AVERAGE_IO_READ_SPEED]!: number;
   [NodeProp.AVERAGE_IO_WRITE_SPEED]!: number;
+  [NodeProp.IO_READ_TIME]!: number;
+  [NodeProp.IO_WRITE_TIME]!: number;
   [k: string]:
     | Node[]
     | Options