Use common helpers and utils for formatting hertz

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 { formatScheduledBytes, formatBytes } from 'nomad-ui/utils/units';
+import { formatBytes, formatHertz } from 'nomad-ui/utils/units';
 import { tagName } from '@ember-decorators/component';
 import classic from 'ember-classic-decorator';
 
@@ -36,13 +36,14 @@ export default class AllocationStat extends Component {
   get formattedStat() {
     if (!this.stat) return undefined;
     if (this.metric === 'memory') return formatBytes(this.stat.used);
-    return 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 formatBytes(this.statsTracker.reservedMemory, 'MiB');
-    if (this.metric === 'cpu') return `${this.statsTracker.reservedCPU} MHz`;
+    if (this.metric === 'cpu') return formatHertz(this.statsTracker.reservedCPU, 'MHz');
     return undefined;
   }
 }

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

@@ -18,7 +18,7 @@
           <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-scheduled-bytes datum.datum.used}}</span>
             {{else}}
@@ -32,7 +32,7 @@
   <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-scheduled-bytes this.data.lastObject.used}}</strong> / {{format-scheduled-bytes this.reservedAmount start="MiB"}} Total
     {{else}}

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

@@ -18,7 +18,7 @@
   <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-scheduled-bytes this.data.lastObject.used}}</strong> / {{format-scheduled-bytes this.reservedAmount start="MiB"}} Total
     {{else}}

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,7 +12,7 @@
   <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-scheduled-bytes this.data.lastObject.used}}</strong> / {{format-scheduled-bytes this.reservedAmount start="MiB"}} Total
     {{else}}

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-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-scheduled-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

@@ -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}}
@@ -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 { reduceBytes } from 'nomad-ui/utils/units';
+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] = reduceBytes(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}`;
     }

ui/app/utils/units.js

@@ -16,12 +16,22 @@ const unitReducer = (number = 0, interval, units, maxUnit, startingUnit) => {
   if (maxUnit && units.indexOf(maxUnit) !== -1) {
     units = units.slice(0, units.indexOf(maxUnit) + 1);
   }
+
+  // Reduce negative numbers by temporarily flipping them positive.
+  const negative = number < 0;
+  if (negative) {
+    number *= -1;
+  }
+
   let unitIndex = 0;
   while (number >= interval && unitIndex < units.length - 1) {
     number /= interval;
     unitIndex++;
   }
 
+  if (negative) {
+    number *= -1;
+  }
   return [number, units[unitIndex]];
 };
 

ui/tests/acceptance/client-detail-test.js

@@ -4,7 +4,7 @@ import { module, test } from 'qunit';
 import { setupApplicationTest } from 'ember-qunit';
 import { setupMirage } from 'ember-cli-mirage/test-support';
 import a11yAudit from 'nomad-ui/tests/helpers/a11y-audit';
-import { formatBytes } from 'nomad-ui/utils/units';
+import { formatBytes, formatHertz } from 'nomad-ui/utils/units';
 import moment from 'moment';
 import ClientDetail from 'nomad-ui/tests/pages/clients/detail';
 import Clients from 'nomad-ui/tests/pages/clients/list';
@@ -163,9 +163,10 @@ module('Acceptance | client detail', function(hooks) {
       Math.floor(allocStats.resourceUsage.CpuStats.TotalTicks) / cpuUsed,
       'CPU %'
     );
+    const roundedTicks = Math.floor(allocStats.resourceUsage.CpuStats.TotalTicks);
     assert.equal(
       allocationRow.cpuTooltip,
-      `${Math.floor(allocStats.resourceUsage.CpuStats.TotalTicks)} / ${cpuUsed} MHz`,
+      `${formatHertz(roundedTicks, 'MHz')} / ${formatHertz(cpuUsed, 'MHz')}`,
       'Detailed CPU information is in a tooltip'
     );
     assert.equal(

ui/tests/acceptance/optimize-test.js

@@ -5,6 +5,7 @@ import { setupMirage } from 'ember-cli-mirage/test-support';
 import a11yAudit from 'nomad-ui/tests/helpers/a11y-audit';
 import Response from 'ember-cli-mirage/response';
 import moment from 'moment';
+import { formatBytes, formatHertz } from 'nomad-ui/utils/units';
 
 import Optimize from 'nomad-ui/tests/pages/optimize';
 import Layout from 'nomad-ui/tests/pages/layout';
@@ -153,16 +154,24 @@ module('Acceptance | optimize', function(hooks) {
 
       assert.equal(
         summary.cpu,
-        cpuDiff ? `${cpuSign}${cpuDiff} MHz ${cpuSign}${cpuDiffPercent}%` : ''
+        cpuDiff ? `${cpuSign}${formatHertz(cpuDiff, 'MHz')} ${cpuSign}${cpuDiffPercent}%` : ''
       );
       assert.equal(
         summary.memory,
         memDiff ? `${memSign}${formattedMemDiff(memDiff)} ${memSign}${memDiffPercent}%` : ''
       );
 
+      console.log(
+        summary.aggregateCpu,
+        cpuDiff,
+        cpuDiff * currentTaskGroupAllocations.length,
+        formatHertz(cpuDiff * currentTaskGroupAllocations.length, 'MHz')
+      );
       assert.equal(
         summary.aggregateCpu,
-        cpuDiff ? `${cpuSign}${cpuDiff * currentTaskGroupAllocations.length} MHz` : ''
+        cpuDiff
+          ? `${cpuSign}${formatHertz(cpuDiff * currentTaskGroupAllocations.length, 'MHz')}`
+          : ''
       );
 
       assert.equal(
@@ -773,15 +782,5 @@ function formattedMemDiff(memDiff) {
   const absMemDiff = Math.abs(memDiff);
   const negativeSign = memDiff < 0 ? '-' : '';
 
-  if (absMemDiff >= 1024) {
-    const gibDiff = absMemDiff / 1024;
-
-    if (Number.isInteger(gibDiff)) {
-      return `${negativeSign}${gibDiff} GiB`;
-    } else {
-      return `${negativeSign}${gibDiff.toFixed(2)} GiB`;
-    }
-  } else {
-    return `${negativeSign}${absMemDiff} MiB`;
-  }
+  return negativeSign + formatBytes(absMemDiff, 'MiB');
 }

ui/tests/acceptance/plugin-detail-test.js

@@ -4,7 +4,7 @@ import { setupApplicationTest } from 'ember-qunit';
 import { setupMirage } from 'ember-cli-mirage/test-support';
 import a11yAudit from 'nomad-ui/tests/helpers/a11y-audit';
 import moment from 'moment';
-import { formatBytes } from 'nomad-ui/utils/units';
+import { formatBytes, formatHertz } from 'nomad-ui/utils/units';
 import PluginDetail from 'nomad-ui/tests/pages/storage/plugins/detail';
 import Layout from 'nomad-ui/tests/pages/layout';
 
@@ -125,9 +125,10 @@ module('Acceptance | plugin detail', function(hooks) {
         Math.floor(allocStats.resourceUsage.CpuStats.TotalTicks) / cpuUsed,
         'CPU %'
       );
+      const roundedTicks = Math.floor(allocStats.resourceUsage.CpuStats.TotalTicks);
       assert.equal(
         allocationRow.cpuTooltip,
-        `${Math.floor(allocStats.resourceUsage.CpuStats.TotalTicks)} / ${cpuUsed} MHz`,
+        `${formatHertz(roundedTicks, 'MHz')} / ${formatHertz(cpuUsed, 'MHz')}`,
         'Detailed CPU information is in a tooltip'
       );
       assert.equal(