Merge pull request #10257 from hashicorp/f-ui/bigger-units

UI: Refactor all displayed units to use common utils (featuring bigger suffixes)

ui/app/components/allocation-stat.js

@@ -1,7 +1,7 @@
 import Component from '@ember/component';
 import { computed } from '@ember/object';
 import { alias } from '@ember/object/computed';
-import { formatBytes } from 'nomad-ui/helpers/format-bytes';
+import { formatBytes, formatHertz } from 'nomad-ui/utils/units';
 import { tagName } from '@ember-decorators/component';
 import classic from 'ember-classic-decorator';
 
@@ -35,14 +35,15 @@ export default class AllocationStat extends Component {
   @computed('metric', 'stat.used')
   get formattedStat() {
     if (!this.stat) return undefined;
-    if (this.metric === 'memory') return formatBytes([this.stat.used]);
-    return this.stat.used;
+    if (this.metric === 'memory') return formatBytes(this.stat.used);
+    if (this.metric === 'cpu') return formatHertz(this.stat.used, 'MHz');
+    return undefined;
   }
 
   @computed('metric', 'statsTracker.{reservedMemory,reservedCPU}')
   get formattedReserved() {
-    if (this.metric === 'memory') return `${this.statsTracker.reservedMemory} MiB`;
-    if (this.metric === 'cpu') return `${this.statsTracker.reservedCPU} MHz`;
+    if (this.metric === 'memory') return formatBytes(this.statsTracker.reservedMemory, 'MiB');
+    if (this.metric === 'cpu') return formatHertz(this.statsTracker.reservedCPU, 'MHz');
     return undefined;
   }
 }

ui/app/components/primary-metric/allocation.hbs

@@ -18,9 +18,9 @@
           <li>
             <span class="label"><span class="color-swatch swatch-{{this.colorScale}} swatch-{{this.colorScale}}-{{idx}}" />{{series.name}}</span>
             {{#if (eq this.metric "cpu")}}
-              <span class="value">{{datum.datum.used}} MHz</span>
+              <span class="value">{{format-scheduled-hertz datum.datum.used}}</span>
             {{else if (eq this.metric "memory")}}
-              <span class="value">{{format-bytes datum.datum.used}}</span>
+              <span class="value">{{format-scheduled-bytes datum.datum.used}}</span>
             {{else}}
               <span class="value">{{datum.formatttedY}}</span>
             {{/if}}
@@ -32,9 +32,9 @@
   <PrimaryMetric::CurrentValue @chartClass={{this.chartClass}} @percent={{this.data.lastObject.percent}} />
   <div class="annotation" data-test-absolute-value>
     {{#if (eq this.metric "cpu")}}
-      <strong>{{this.data.lastObject.used}} MHz</strong> / {{this.reservedAmount}} MHz Total
+      <strong>{{format-scheduled-hertz this.data.lastObject.used}}</strong> / {{format-scheduled-hertz this.reservedAmount}} Total
     {{else if (eq this.metric "memory")}}
-      <strong>{{format-bytes this.data.lastObject.used}}</strong> / {{this.reservedAmount}} MiB Total
+      <strong>{{format-scheduled-bytes this.data.lastObject.used}}</strong> / {{format-scheduled-bytes this.reservedAmount start="MiB"}} Total
     {{else}}
       <strong>{{this.data.lastObject.used}}</strong> / {{this.reservedAmount}} Total
     {{/if}}

ui/app/components/primary-metric/node.hbs

@@ -18,9 +18,9 @@
   <PrimaryMetric::CurrentValue @chartClass={{this.chartClass}} @percent={{this.data.lastObject.percent}} />
   <div class="annotation" data-test-absolute-value>
     {{#if (eq this.metric "cpu")}}
-      <strong>{{this.data.lastObject.used}} MHz</strong> / {{this.reservedAmount}} MHz Total
+      <strong>{{format-scheduled-hertz this.data.lastObject.used}}</strong> / {{format-scheduled-hertz this.reservedAmount}} Total
     {{else if (eq this.metric "memory")}}
-      <strong>{{format-bytes this.data.lastObject.used}}</strong> / {{this.reservedAmount}} MiB Total
+      <strong>{{format-scheduled-bytes this.data.lastObject.used}}</strong> / {{format-scheduled-bytes this.reservedAmount start="MiB"}} Total
     {{else}}
       <strong>{{this.data.lastObject.used}}</strong> / {{this.reservedAmount}} Total
     {{/if}}

ui/app/components/primary-metric/node.js

@@ -4,6 +4,7 @@ import { task, timeout } from 'ember-concurrency';
 import { assert } from '@ember/debug';
 import { inject as service } from '@ember/service';
 import { action, get } from '@ember/object';
+import { formatScheduledBytes, formatScheduledHertz } from 'nomad-ui/utils/units';
 
 export default class NodePrimaryMetric extends Component {
   @service('stats-trackers-registry') statsTrackersRegistry;
@@ -42,12 +43,22 @@ export default class NodePrimaryMetric extends Component {
   get reservedAnnotations() {
     if (this.metric === 'cpu' && get(this.args.node, 'reserved.cpu')) {
       const cpu = this.args.node.reserved.cpu;
-      return [{ label: `${cpu} MHz reserved`, percent: cpu / this.reservedAmount }];
+      return [
+        {
+          label: `${formatScheduledHertz(cpu, 'MHz')} reserved`,
+          percent: cpu / this.reservedAmount,
+        },
+      ];
     }
 
     if (this.metric === 'memory' && get(this.args.node, 'reserved.memory')) {
       const memory = this.args.node.reserved.memory;
-      return [{ label: `${memory} MiB reserved`, percent: memory / this.reservedAmount }];
+      return [
+        {
+          label: `${formatScheduledBytes(memory, 'MiB')} reserved`,
+          percent: memory / this.reservedAmount,
+        },
+      ];
     }
 
     return [];

ui/app/components/primary-metric/task.hbs

@@ -12,9 +12,9 @@
   <PrimaryMetric::CurrentValue @chartClass={{this.chartClass}} @percent={{this.data.lastObject.percent}} />
   <div class="annotation" data-test-absolute-value>
     {{#if (eq this.metric "cpu")}}
-      <strong>{{this.data.lastObject.used}} MHz</strong> / {{this.reservedAmount}} MHz Total
+      <strong>{{format-scheduled-hertz this.data.lastObject.used}}</strong> / {{format-scheduled-hertz this.reservedAmount}} Total
     {{else if (eq this.metric "memory")}}
-      <strong>{{format-bytes this.data.lastObject.used}}</strong> / {{this.reservedAmount}} MiB Total
+      <strong>{{format-scheduled-bytes this.data.lastObject.used}}</strong> / {{format-scheduled-bytes this.reservedAmount start="MiB"}} Total
     {{else}}
       <strong>{{this.data.lastObject.used}}</strong> / {{this.reservedAmount}} Total
     {{/if}}

ui/app/controllers/topology.js

@@ -4,9 +4,12 @@ import { alias } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import classic from 'ember-classic-decorator';
-import { reduceToLargestUnit } from 'nomad-ui/helpers/format-bytes';
+import { reduceBytes, reduceHertz } from 'nomad-ui/utils/units';
 
 const sumAggregator = (sum, value) => sum + (value || 0);
+const formatter = new Intl.NumberFormat(window.navigator.locale || 'en', {
+  maximumFractionDigits: 2,
+});
 
 @classic
 export default class TopologyControllers extends Controller {
@@ -39,12 +42,22 @@ export default class TopologyControllers extends Controller {
 
   @computed('totalMemory')
   get totalMemoryFormatted() {
-    return reduceToLargestUnit(this.totalMemory)[0].toFixed(2);
+    return formatter.format(reduceBytes(this.totalMemory)[0]);
   }
 
   @computed('totalMemory')
   get totalMemoryUnits() {
-    return reduceToLargestUnit(this.totalMemory)[1];
+    return reduceBytes(this.totalMemory)[1];
+  }
+
+  @computed('totalCPU')
+  get totalCPUFormatted() {
+    return formatter.format(reduceHertz(this.totalCPU, null, 'MHz')[0]);
+  }
+
+  @computed('totalCPU')
+  get totalCPUUnits() {
+    return reduceHertz(this.totalCPU, null, 'MHz')[1];
   }
 
   @computed('scheduledAllocations.@each.allocatedResources')
@@ -86,7 +99,7 @@ export default class TopologyControllers extends Controller {
   @computed('activeNode')
   get nodeUtilization() {
     const node = this.activeNode;
-    const [formattedMemory, memoryUnits] = reduceToLargestUnit(node.memory * 1024 * 1024);
+    const [formattedMemory, memoryUnits] = reduceBytes(node.memory * 1024 * 1024);
     const totalReservedMemory = node.allocations.mapBy('memory').reduce(sumAggregator, 0);
     const totalReservedCPU = node.allocations.mapBy('cpu').reduce(sumAggregator, 0);
 

ui/app/helpers/format-bytes.js

@@ -1,29 +1,16 @@
 import Helper from '@ember/component/helper';
-
-const UNITS = ['Bytes', 'KiB', 'MiB', 'GiB'];
+import { formatBytes } from 'nomad-ui/utils/units';
 
 /**
  * Bytes Formatter
  *
- * Usage: {{format-bytes bytes}}
+ * Usage: {{format-bytes bytes start="KiB"}}
  *
  * Outputs the bytes reduced to the largest supported unit size for which
  * bytes is larger than one.
  */
-export function reduceToLargestUnit(bytes) {
-  bytes || (bytes = 0);
-  let unitIndex = 0;
-  while (bytes >= 1024 && unitIndex < UNITS.length - 1) {
-    bytes /= 1024;
-    unitIndex++;
-  }
-
-  return [bytes, UNITS[unitIndex]];
-}
-
-export function formatBytes([bytes]) {
-  const [number, unit] = reduceToLargestUnit(bytes);
-  return `${Math.floor(number)} ${unit}`;
+function formatBytesHelper([bytes], { start }) {
+  return formatBytes(bytes, start);
 }
 
-export default Helper.helper(formatBytes);
+export default Helper.helper(formatBytesHelper);

ui/app/helpers/format-hertz.js

@@ -0,0 +1,16 @@
+import Helper from '@ember/component/helper';
+import { formatHertz } from 'nomad-ui/utils/units';
+
+/**
+ * Hertz Formatter
+ *
+ * Usage: {{format-hertz hertz}}
+ *
+ * Outputs the frequency reduced to the largest supported unit size for which
+ * the resulting number is larger than one.
+ */
+function formatHertzHelper([hertz], { start }) {
+  return formatHertz(hertz, start || 'MHz');
+}
+
+export default Helper.helper(formatHertzHelper);

ui/app/helpers/format-scheduled-bytes.js

@@ -0,0 +1,16 @@
+import Helper from '@ember/component/helper';
+import { formatScheduledBytes } from 'nomad-ui/utils/units';
+
+/**
+ * Scheduled Bytes Formatter
+ *
+ * Usage: {{format-scheduled-bytes bytes start="KiB"}}
+ *
+ * Outputs the bytes reduced to the resolution the scheduler
+ * and job spec operate at.
+ */
+function formatScheduledBytesHelper([bytes], { start }) {
+  return formatScheduledBytes(bytes, start);
+}
+
+export default Helper.helper(formatScheduledBytesHelper);

ui/app/helpers/format-scheduled-hertz.js

@@ -0,0 +1,16 @@
+import Helper from '@ember/component/helper';
+import { formatScheduledHertz } from 'nomad-ui/utils/units';
+
+/**
+ * Scheduled Hertz Formatter
+ *
+ * Usage: {{format-scheduled-hertz hertz}}
+ *
+ * Outputs the frequency reduced to the resolution the scheduler
+ * and job spec operate at.
+ */
+function formatScheduledHertzHelper([hertz], { start }) {
+  return formatScheduledHertz(hertz, start || 'MHz');
+}
+
+export default Helper.helper(formatScheduledHertzHelper);

ui/app/templates/allocations/allocation/index.hbs

@@ -225,10 +225,10 @@
                 <LinkTo @route="clients.client" @model={{this.preempter.node}} data-test-client-link>{{this.preempter.node.shortId}}</LinkTo>
               </span>
               <span class="pair"><span class="term">Reserved CPU</span>
-                <span data-test-allocation-cpu>{{this.preempter.resources.cpu}} MHz</span>
+                <span data-test-allocation-cpu>{{format-scheduled-hertz this.preempter.resources.cpu}}</span>
               </span>
               <span class="pair"><span class="term">Reserved Memory</span>
-                <span data-test-allocation-memory>{{this.preempter.resources.memory}} MiB</span>
+                <span data-test-allocation-memory>{{format-scheduled-bytes this.preempter.resources.memory start="MiB"}}</span>
               </span>
             </div>
           </div>

ui/app/templates/components/task-group-row.hbs

@@ -37,6 +37,6 @@
   <div class="inline-chart"><AllocationStatusBar @allocationContainer={{this.taskGroup.summary}} @isNarrow={{true}} /></div>
 </td>
 <td data-test-task-group-volume>{{if this.taskGroup.volumes.length "Yes"}}</td>
-<td data-test-task-group-cpu>{{this.taskGroup.reservedCPU}} MHz</td>
-<td data-test-task-group-mem>{{this.taskGroup.reservedMemory}} MiB</td>
-<td data-test-task-group-disk>{{this.taskGroup.reservedEphemeralDisk}} MiB</td>
+<td data-test-task-group-cpu>{{format-scheduled-hertz this.taskGroup.reservedCPU}}</td>
+<td data-test-task-group-mem>{{format-scheduled-bytes this.taskGroup.reservedMemory start="MiB"}}</td>
+<td data-test-task-group-disk>{{format-scheduled-bytes this.taskGroup.reservedEphemeralDisk start="MiB"}}</td>

ui/app/templates/components/task-row.hbs

@@ -47,7 +47,7 @@
         {{x-icon "alert-triangle" class="is-warning"}}
       </span>
     {{else}}
-      <div class="inline-chart is-small tooltip" role="tooltip" aria-label="{{this.cpu.used}} / {{this.taskStats.reservedCPU}} MHz">
+      <div class="inline-chart is-small tooltip" role="tooltip" aria-label="{{format-hertz this.cpu.used}} / {{format-hertz this.taskStats.reservedCPU}}">
         <progress
           class="progress is-info is-small"
           value="{{this.cpu.percent}}"
@@ -67,7 +67,7 @@
         {{x-icon "alert-triangle" class="is-warning"}}
       </span>
     {{else}}
-      <div class="inline-chart tooltip" role="tooltip" aria-label="{{format-bytes this.memory.used}} / {{this.taskStats.reservedMemory}} MiB">
+      <div class="inline-chart tooltip" role="tooltip" aria-label="{{format-scheduled-bytes this.memory.used}} / {{format-scheduled-bytes this.taskStats.reservedMemory}}">
         <progress
           class="progress is-danger is-small"
           value="{{this.memory.percent}}"

ui/app/templates/components/topo-viz.hbs

@@ -34,11 +34,11 @@
         {{/if}}
         <li>
           <span class="label">Memory</span>
-          <span class="value">{{allocation.memory}} MiB</span>
+          <span class="value">{{format-scheduled-bytes allocation.memory start="MiB"}}</span>
         </li>
         <li>
           <span class="label">CPU</span>
-          <span class="value">{{allocation.cpu}} MHz</span>
+          <span class="value">{{format-scheduled-hertz allocation.cpu}}</span>
         </li>
       </ol>
     {{/let}}

ui/app/templates/components/topo-viz/datacenter.hbs

@@ -3,8 +3,8 @@
     <strong>{{@datacenter.name}}</strong>
     <span class="bumper-left">{{this.scheduledAllocations.length}} Allocs</span>
     <span class="bumper-left">{{@datacenter.nodes.length}} Nodes</span>
-    <span class="bumper-left is-faded">{{this.aggregatedAllocationResources.memory}}/{{this.aggregatedNodeResources.memory}} MiB,
-      {{this.aggregatedAllocationResources.cpu}}/{{this.aggregatedNodeResources.cpu}} MHz</span>
+    <span class="bumper-left is-faded">{{format-bytes this.aggregatedAllocationResources.memory start="MiB"}}/{{format-bytes this.aggregatedNodeResources.memory start="MiB"}},
+      {{format-hertz this.aggregatedAllocationResources.cpu}}/{{format-hertz this.aggregatedNodeResources.cpu}}</span>
   </div>
   <div class="boxed-section-body">
     <FlexMasonry @columns={{if @isSingleColumn 1 2}} @items={{@datacenter.nodes}} as |node|>

ui/app/templates/components/topo-viz/node.hbs

@@ -8,7 +8,7 @@
       {{/if}}
       <strong>{{@node.node.name}}</strong>
       <span class="bumper-left">{{this.count}} Allocs</span>
-      <span class="bumper-left is-faded">{{@node.memory}} MiB, {{@node.cpu}} MHz</span>
+      <span class="bumper-left is-faded">{{format-scheduled-bytes @node.memory start="MiB"}}, {{format-scheduled-hertz @node.cpu}}</span>
     </p>
   {{/unless}}
   <svg

ui/app/templates/jobs/job/task-group.hbs

@@ -30,9 +30,9 @@
       <span class="label">Task Group Details</span>
 
       <span class="pair" data-test-task-group-tasks><span class="term"># Tasks</span> {{this.model.tasks.length}}</span>
-      <span class="pair" data-test-task-group-cpu><span class="term">Reserved CPU</span> {{this.model.reservedCPU}} MHz</span>
-      <span class="pair" data-test-task-group-mem><span class="term">Reserved Memory</span> {{this.model.reservedMemory}} MiB</span>
-      <span class="pair" data-test-task-group-disk><span class="term">Reserved Disk</span> {{this.model.reservedEphemeralDisk}} MiB</span>
+      <span class="pair" data-test-task-group-cpu><span class="term">Reserved CPU</span> {{format-scheduled-hertz this.model.reservedCPU}}</span>
+      <span class="pair" data-test-task-group-mem><span class="term">Reserved Memory</span> {{format-scheduled-bytes this.model.reservedMemory start="MiB"}}</span>
+      <span class="pair" data-test-task-group-disk><span class="term">Reserved Disk</span> {{format-scheduled-bytes this.model.reservedEphemeralDisk start="MiB"}}</span>
       {{#if this.model.scaling}}
         <span class="pair" data-test-task-group-min><span class="term">Count Range</span>
           {{this.model.scaling.min}} to {{this.model.scaling.max}}

ui/app/templates/topology.hbs

@@ -108,7 +108,7 @@
                     </div>
                   </div>
                   <div class="annotation" data-test-memory-absolute-value>
-                    <strong>{{format-bytes this.nodeUtilization.totalReservedMemory}}</strong> / {{format-bytes this.nodeUtilization.totalMemory}} reserved
+                    <strong>{{format-scheduled-bytes this.nodeUtilization.totalReservedMemory}}</strong> / {{format-scheduled-bytes this.nodeUtilization.totalMemory}} reserved
                   </div>
                 </div>
                 <div class="dashboard-metric">
@@ -130,7 +130,7 @@
                     </div>
                   </div>
                   <div class="annotation" data-test-cpu-absolute-value>
-                    <strong>{{this.nodeUtilization.totalReservedCPU}} MHz</strong> / {{this.nodeUtilization.totalCPU}} MHz reserved
+                    <strong>{{format-scheduled-hertz this.nodeUtilization.totalReservedCPU}}</strong> / {{format-scheduled-hertz this.nodeUtilization.totalCPU}} reserved
                   </div>
                 </div>
                 {{/let}}
@@ -205,7 +205,7 @@
                   </div>
                 </div>
                 <div class="dashboard-metric">
-                  <p class="metric">{{this.totalCPU}} <span class="metric-units">MHz</span> <span class="metric-label">of CPU</span></p>
+                  <p class="metric">{{this.totalCPUFormatted}} <span class="metric-units">{{this.totalCPUUnits}}</span> <span class="metric-label">of CPU</span></p>
                   <div class="columns graphic">
                     <div class="column">
                       <div class="inline-chart" data-test-percentage-bar>
@@ -223,7 +223,7 @@
                     </div>
                   </div>
                   <div class="annotation" data-test-cpu-absolute-value>
-                    <strong>{{this.totalReservedCPU}} MHz</strong> / {{this.totalCPU}} MHz reserved
+                    <strong>{{format-hertz this.totalReservedCPU}}</strong> / {{format-hertz this.totalCPU}} reserved
                   </div>
                 </div>
               {{/if}}

ui/app/utils/resources-diffs.js

@@ -1,6 +1,6 @@
 import d3Format from 'd3-format';
 
-import { reduceToLargestUnit } from 'nomad-ui/helpers/format-bytes';
+import { formatBytes, formatHertz } from 'nomad-ui/utils/units';
 
 const formatPercent = d3Format.format('+.0%');
 const sumAggregate = (total, val) => total + val;
@@ -86,14 +86,9 @@ class ResourceDiffs {
     const delta = Math.abs(this.aggregateDiff);
 
     if (this.units === 'MiB') {
-      if (delta === 0) {
-        return '0 MiB';
-      }
-
-      const [memory, units] = reduceToLargestUnit(delta * 1024 * 1024);
-      const formattedMemory = Number.isInteger(memory) ? memory : memory.toFixed(2);
-
-      return `${formattedMemory} ${units}`;
+      return formatBytes(delta, 'MiB');
+    } else if (this.units === 'MHz') {
+      return formatHertz(delta, 'MHz');
     } else {
       return `${delta} ${this.units}`;
     }