Show blocks as size in bytes as well

We assume that the block size is 8kB Fixes #210
dalibo · Jul 10, 2020 · 19e2f32 · 19e2f32
1 parent 0cf47a6
commit 19e2f32
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 18 deletions.
diff --git a/src/components/Diagram.vue b/src/components/Diagram.vue
@@ -136,7 +136,7 @@
 <script lang="ts">
 import * as _ from 'lodash';
 import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
-import { duration, durationClass, rows, factor } from '@/filters';
+import { blocks, duration, durationClass, rows, factor } from '@/filters';
 import { EstimateDirection, CenterMode, BuffersMetric, HighlightMode, NodeProp, Metric } from '../enums';
 import Node from '@/inode';
 import { IPlan } from '../iplan';
@@ -278,10 +278,10 @@ export default class Diagram extends Vue {
         written = node[NodeProp.EXCLUSIVE_LOCAL_WRITTEN_BLOCKS];
         break;
     }
-    text += hit ? '<br>Hit: ' + rows(hit) : '';
-    text += read ? '<br>Read: ' + rows(read) : '';
-    text += dirtied ? '<br>Dirtied: ' + rows(dirtied) : '';
-    text += written ? '<br>Written: ' + rows(written) : '';
+    text += hit ? '<br>Hit: ' + blocks(hit) : '';
+    text += read ? '<br>Read: ' + blocks(read) : '';
+    text += dirtied ? '<br>Dirtied: ' + blocks(dirtied) : '';
+    text += written ? '<br>Written: ' + blocks(written) : '';
     text = text ? text : ' N/A';
     switch (this.viewOptions.buffersMetric) {
       case BuffersMetric.shared:

diff --git a/src/components/PlanNode.vue b/src/components/PlanNode.vue
@@ -172,24 +172,24 @@
               </tr>
               <tr>
                 <th>Shared</th>
-                <td class="text-right">{{ formattedProp('EXCLUSIVE_SHARED_HIT_BLOCKS') || '-' }}</td>
-                <td class="text-right">{{ formattedProp('EXCLUSIVE_SHARED_READ_BLOCKS') || '-' }}</td>
-                <td class="text-right">{{ formattedProp('EXCLUSIVE_SHARED_DIRTIED_BLOCKS') || '-' }}</td>
-                <td class="text-right">{{ formattedProp('EXCLUSIVE_SHARED_WRITTEN_BLOCKS') || '-' }}</td>
+                <td class="text-right" v-html="formattedProp('EXCLUSIVE_SHARED_HIT_BLOCKS') || '-'"></td>
+                <td class="text-right" v-html="formattedProp('EXCLUSIVE_SHARED_READ_BLOCKS') || '-'"></td>
+                <td class="text-right" v-html="formattedProp('EXCLUSIVE_SHARED_DIRTIED_BLOCKS') || '-'"></td>
+                <td class="text-right" v-html="formattedProp('EXCLUSIVE_SHARED_WRITTEN_BLOCKS') || '-'"></td>
               </tr>
               <tr>
                 <th>Temp</th>
-                <td class="text-right">{{ formattedProp('EXCLUSIVE_TEMP_HIT_BLOCKS') || '-' }}</td>
-                <td class="text-right">{{ formattedProp('EXCLUSIVE_TEMP_READ_BLOCKS') || '-' }}</td>
-                <td class="text-right">{{ formattedProp('EXCLUSIVE_TEMP_DIRTIED_BLOCKS') || '-' }}</td>
-                <td class="text-right">{{ formattedProp('EXCLUSIVE_TEMP_WRITTEN_BLOCKS') || '-' }}</td>
+                <td class="text-right" v-html="formattedProp('EXCLUSIVE_TEMP_HIT_BLOCKS') || '-'"></td>
+                <td class="text-right" v-html="formattedProp('EXCLUSIVE_TEMP_READ_BLOCKS') || '-'"></td>
+                <td class="text-right" v-html="formattedProp('EXCLUSIVE_TEMP_DIRTIED_BLOCKS') || '-'"></td>
+                <td class="text-right" v-html="formattedProp('EXCLUSIVE_TEMP_WRITTEN_BLOCKS') || '-'"></td>
               </tr>
               <tr>
                 <th>Local</th>
-                <td class="text-right">{{ formattedProp('EXCLUSIVE_LOCAL_HIT_BLOCKS') || '-' }}</td>
-                <td class="text-right">{{ formattedProp('EXCLUSIVE_LOCAL_READ_BLOCKS') || '-' }}</td>
-                <td class="text-right">{{ formattedProp('EXCLUSIVE_LOCAL_DIRTIED_BLOCKS') || '-' }}</td>
-                <td class="text-right">{{ formattedProp('EXCLUSIVE_LOCAL_WRITTEN_BLOCKS') || '-' }}</td>
+                <td class="text-right" v-html="formattedProp('EXCLUSIVE_LOCAL_HIT_BLOCKS') || '-'"></td>
+                <td class="text-right" v-html="formattedProp('EXCLUSIVE_LOCAL_READ_BLOCKS') || '-'"></td>
+                <td class="text-right" v-html="formattedProp('EXCLUSIVE_LOCAL_DIRTIED_BLOCKS') || '-'"></td>
+                <td class="text-right" v-html="formattedProp('EXCLUSIVE_LOCAL_WRITTEN_BLOCKS') || '-'"></td>
               </tr>
             </table>
             <!-- iobuffer tab -->

diff --git a/src/enums.ts b/src/enums.ts
@@ -148,6 +148,7 @@ export enum PropType {
   json,
   space,
   increment,
+  blocks,
 }
 
 export const nodePropTypes: any = {};
@@ -176,6 +177,19 @@ nodePropTypes[NodeProp.IO_WRITE_TIME] = PropType.duration;
 nodePropTypes[NodeProp.EXCLUSIVE_IO_READ_TIME] = PropType.duration;
 nodePropTypes[NodeProp.EXCLUSIVE_IO_WRITE_TIME] = PropType.duration;
 
+nodePropTypes[NodeProp.EXCLUSIVE_SHARED_HIT_BLOCKS] = PropType.blocks;
+nodePropTypes[NodeProp.EXCLUSIVE_SHARED_READ_BLOCKS] = PropType.blocks;
+nodePropTypes[NodeProp.EXCLUSIVE_SHARED_DIRTIED_BLOCKS] = PropType.blocks;
+nodePropTypes[NodeProp.EXCLUSIVE_SHARED_WRITTEN_BLOCKS] = PropType.blocks;
+nodePropTypes[NodeProp.EXCLUSIVE_TEMP_HIT_BLOCKS] = PropType.blocks;
+nodePropTypes[NodeProp.EXCLUSIVE_TEMP_READ_BLOCKS] = PropType.blocks;
+nodePropTypes[NodeProp.EXCLUSIVE_TEMP_DIRTIED_BLOCKS] = PropType.blocks;
+nodePropTypes[NodeProp.EXCLUSIVE_TEMP_WRITTEN_BLOCKS] = PropType.blocks;
+nodePropTypes[NodeProp.EXCLUSIVE_LOCAL_HIT_BLOCKS] = PropType.blocks;
+nodePropTypes[NodeProp.EXCLUSIVE_LOCAL_READ_BLOCKS] = PropType.blocks;
+nodePropTypes[NodeProp.EXCLUSIVE_LOCAL_DIRTIED_BLOCKS] = PropType.blocks;
+nodePropTypes[NodeProp.EXCLUSIVE_LOCAL_WRITTEN_BLOCKS] = PropType.blocks;
+
 export class WorkerProp {
   // plan property keys
   public static WORKER_NUMBER: string = 'Worker Number';

diff --git a/src/filters.ts b/src/filters.ts
@@ -62,11 +62,19 @@ export function formatBytes(bytes: number, decimals = 2) {
   const dm = decimals < 0 ? 0 : decimals;
   const units = ['Bytes', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
   const i = Math.floor(Math.log(bytes) / Math.log(k));
-  const compiled = _.template('${value}&nbsp;<span class="text-muted">${unit}</span>');
+  const compiled = _.template('${value}&nbsp;${unit}');
   const value = parseFloat((bytes / Math.pow(k, i)).toFixed(dm)).toLocaleString();
   return compiled({value, unit: units[i]});
 }
 
+export function blocks(value: number): string {
+  if (!value) {
+    return '';
+  }
+  return value.toLocaleString() + '&nbsp;<span class="text-muted">|</span>&nbsp;<small>' +
+    formatBytes(value * 8 * 1024) + '</small>';
+}
+
 export function formatNodeProp(key: string, value: any, detail: boolean): string {
   if (_.has(nodePropTypes, key)) {
     if (nodePropTypes[key] === PropType.duration) {
@@ -92,6 +100,8 @@ export function formatNodeProp(key: string, value: any, detail: boolean): string
       return JSON.stringify(value, null, 2);
     } else if (nodePropTypes[key] === PropType.space) {
       return space(value);
+    } else if (nodePropTypes[key] === PropType.blocks) {
+      return blocks(value);
     }
   }
   return value;