Merge pull request #11465 from hashicorp/ui-update-deps

Update UI dependencies

.github/workflows/ember-assets.yml

@@ -15,9 +15,9 @@ jobs:
         with:
           fetch-depth: 0
       - name: Use Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
-          node-version: '10.x'
+          node-version: '12'
       - uses: backspace/ember-asset-size-action@edit-comment
         with:
           repo-token: "${{ secrets.GITHUB_TOKEN }}"

.github/workflows/ember-test-audit.yml

@@ -10,7 +10,6 @@ defaults:
 
 # There’s currently no way to share steps between jobs so there’s a lot of duplication
 # for running the audit for the base and PR.
-  
 jobs:
   time-base:
     runs-on: ubuntu-latest
@@ -20,9 +19,9 @@ jobs:
           ref: ${{ github.event.pull_request.base.sha }}
       - uses: nanasess/setup-chromedriver@master
       - name: Use Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
-          node-version: '10.x'
+          node-version: '12'
       - run: yarn --frozen-lockfile
       - run: mkdir -p /tmp/test-reports
       - run: npx ember-test-audit 3 --json --output ../base-audit.json
@@ -37,9 +36,9 @@ jobs:
       - uses: actions/checkout@v2
       - uses: nanasess/setup-chromedriver@master
       - name: Use Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
-          node-version: '10.x'
+          node-version: '12'
       - run: yarn --frozen-lockfile
       - run: mkdir -p /tmp/test-reports
       - run: npx ember-test-audit 3 --json --output ../pr-audit.json

ui/app/components/distribution-bar.js

@@ -99,7 +99,7 @@ export default class DistributionBar extends Component.extend(WindowResizable) {
 
     let slicesEnter = slices.enter()
       .append('g')
-      .on('mouseenter', d => {
+      .on('mouseenter', (ev, d) => {
         run(() => {
           const slices = this.slices;
           const slice = slices.filter(datum => datum.label === d.label);

ui/app/components/job-page/parts/job-client-status-summary.js

@@ -17,7 +17,7 @@ export default class JobClientStatusSummary extends Component {
   }
 
   @action
-  onSliceClick(slice) {
+  onSliceClick(ev, slice) {
     this.gotoClients([slice.className.camelize()]);
   }
 

ui/app/components/line-chart.js

@@ -232,15 +232,15 @@ export default class LineChart extends Component {
     const updateActiveDatum = this.updateActiveDatum.bind(this);
 
     const chart = this;
-    canvas.on('mouseenter', function() {
-      const mouseX = d3.mouse(this)[0];
+    canvas.on('mouseenter', function(ev) {
+      const mouseX = d3.pointer(ev, this)[0];
       chart.latestMouseX = mouseX;
       updateActiveDatum(mouseX);
       run.schedule('afterRender', chart, () => (chart.isActive = true));
     });
 
-    canvas.on('mousemove', function() {
-      const mouseX = d3.mouse(this)[0];
+    canvas.on('mousemove', function(ev) {
+      const mouseX = d3.pointer(ev, this)[0];
       chart.latestMouseX = mouseX;
       updateActiveDatum(mouseX);
     });

ui/app/components/primary-metric/current-value.hbs

@@ -4,7 +4,7 @@
       <progress
         data-test-current-value
         class="progress {{@chartClass}} is-small"
-        value="{{@percent}}"
+        value="{{or @percent 0}}"
         max="1">
         {{@percent}}
       </progress>

ui/app/styles/components/node-status-light.scss

+@use "sass:math";
+
 $size: 1.6rem;
 
 .node-status-light {
   display: inline-flex;
   height: $size;
   width: $size;
-  border-radius: $size / 2;
+  border-radius: math.div($size, 2);
   vertical-align: middle;
   align-items: center;
   justify-content: center;

ui/app/styles/components/toolbar.scss

+@use "sass:math";
+
 $spacing: 1.5em;
 
 .toolbar {
   display: flex;
-  margin-bottom: $spacing / 2;
+  margin-bottom: math.div($spacing, 2);
   justify-content: space-between;
   flex-wrap: wrap;
-  margin-left: -$spacing / 4;
-  margin-right: -$spacing / 4;
+  margin-left: math.div(-$spacing, 4);
+  margin-right: math.div(-$spacing, 4);
 
   &.collapse + .toolbar {
-    margin-top: -$spacing / 2;
+    margin-top: math.div(-$spacing, 2);
   }
 
   .toolbar-item {
-    margin-bottom: $spacing / 2;
-    padding-left: $spacing / 4;
-    padding-right: $spacing / 4;
+    margin-bottom: math.div($spacing, 2);
+    padding-left: math.div($spacing, 4);
+    padding-right: math.div($spacing, 4);
     align-self: center;
     flex-grow: 1;
 

ui/app/styles/core/table.scss

+@use "sass:math";
+
 .table {
   color: $text;
   border-radius: $radius;
@@ -110,8 +112,8 @@
 
     @for $i from 1 through 11 {
       &.is-#{$i} {
-        width: 100% / 12 * $i;
-        max-width: 100% / 12 * $i;
+        width: math.div(100%, 12) * $i;
+        max-width: math.div(100%, 12) * $i;
       }
     }
 

ui/app/styles/core/variables.scss

@@ -48,3 +48,12 @@ $mq-hidden-gutter: 'only screen and (max-width : 960px)';
 $timing-fast: 150ms;
 $timing-medium: 300ms;
 $timing-slow: 450ms;
+
+// Undo Bulma 0.8.0 button increase.
+$control-border-width: 1px !default;
+$button-border-width: $control-border-width !default;
+$control-height: 2.25em;
+$control-padding-vertical: calc(0.375em - #{$control-border-width});
+$control-padding-horizontal: calc(0.625em - #{$control-border-width});
+$button-padding-vertical: calc(0.375em - #{$button-border-width});
+$button-padding-horizontal: 0.75em;

ui/app/templates/clients/client/index.hbs

@@ -470,23 +470,25 @@
         @attributePairs={{this.model.attributes.structured}}
         @class="attributes-table" />
     </div>
-    <div class="boxed-section-head">
-      Meta
     </div>
-    {{#if this.model.meta.structured}}
-      <div class="boxed-section-body is-full-bleed">
-        <AttributesTable
-          data-test-meta
-          @attributePairs={{this.model.meta.structured}}
-          @class="attributes-table" />
+    <div class="boxed-section">
+      <div class="boxed-section-head">
+        Meta
       </div>
-    {{else}}
-      <div class="boxed-section-body">
-        <div data-test-empty-meta-message class="empty-message">
-          <h3 class="empty-message-headline">No Meta Attributes</h3>
-          <p class="empty-message-body">This client is configured with no meta attributes.</p>
+      {{#if this.model.meta.structured}}
+        <div class="boxed-section-body is-full-bleed">
+          <AttributesTable
+            data-test-meta
+            @attributePairs={{this.model.meta.structured}}
+            @class="attributes-table" />
         </div>
-      </div>
-    {{/if}}
+      {{else}}
+        <div class="boxed-section-body">
+          <div data-test-empty-meta-message class="empty-message">
+            <h3 class="empty-message-headline">No Meta Attributes</h3>
+            <p class="empty-message-body">This client is configured with no meta attributes.</p>
+          </div>
+        </div>
+      {{/if}}
   </div>
 </section>

ui/app/utils/units.js

@@ -66,3 +66,9 @@ export function formatScheduledHertz(hertz, startingUnitSize) {
   const [number, unit] = reduceHertz(hertz, 'MHz', startingUnitSize);
   return `${roundFormatter.format(number)} ${unit}`;
 }
+
+// Replaces the minus sign (−) with a hyphen (-).
+// https://github.com/d3/d3-format/releases/tag/v2.0.0
+export function replaceMinus(input) {
+  return input.replace('−', '-');
+}

ui/package.json

@@ -34,26 +34,26 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-object-rest-spread": "^7.4.3",
-    "@ember/optional-features": "^1.3.0",
+    "@ember/optional-features": "2.0.0",
     "@ember/test-helpers": "^2.0.0",
     "@glimmer/component": "^1.0.1",
     "@glimmer/tracking": "^1.0.0",
     "@hashicorp/structure-icons": "^1.3.0",
     "@storybook/ember-cli-storybook": "https://github.com/DingoEatingFuzz/ember-cli-storybook#c207500",
-    "anser": "^1.4.8",
+    "anser": "^2.1.0",
     "babel-eslint": "^10.1.0",
     "base64-js": "^1.3.1",
     "broccoli-asset-rev": "^3.0.0",
-    "bulma": "0.6.1",
-    "core-js": "^2.4.1",
-    "d3-array": "^2.1.0",
-    "d3-axis": "^1.0.0",
-    "d3-format": "^1.3.0",
-    "d3-scale": "^1.0.0",
-    "d3-selection": "^1.1.0",
-    "d3-shape": "^1.2.0",
-    "d3-time-format": "^2.1.0",
-    "d3-transition": "^1.1.0",
+    "bulma": "0.9.3",
+    "core-js": "3.19.1",
+    "d3-array": "^3.1.1",
+    "d3-axis": "^3.0.0",
+    "d3-format": "^3.0.1",
+    "d3-scale": "^4.0.2",
+    "d3-selection": "^3.0.0",
+    "d3-shape": "^3.0.1",
+    "d3-time-format": "^4.0.0",
+    "d3-transition": "^3.0.1",
     "duration-js": "^4.0.0",
     "ember-a11y-testing": "^4.0.0",
     "ember-auto-import": "^1.6.0",
@@ -106,28 +106,28 @@
     "eslint-plugin-ember-a11y-testing": "a11y-tool-sandbox/eslint-plugin-ember-a11y-testing#ca31c9698c7cb105f1c9761d98fcaca7d6874459",
     "eslint-plugin-node": "^11.1.0",
     "faker": "^4.1.0",
-    "flat": "^4.0.0",
+    "flat": "^5.0.2",
     "fuse.js": "^3.4.4",
-    "glob": "^4.0.5",
+    "glob": "^7.2.0",
     "http-proxy": "^1.1.6",
     "husky": "^4.2.5",
     "is-ip": "^3.1.0",
     "ivy-codemirror": "IvyApp/ivy-codemirror#c3b7f49f8e6492878619f8055695581240cce21a",
-    "lint-staged": "^10.1.3",
+    "lint-staged": "^11.2.6",
     "loader.js": "^4.7.0",
     "lodash.intersection": "^4.4.0",
     "morgan": "^1.3.2",
     "npm-run-all": "^4.1.5",
     "pretender": "^3.0.1",
     "prettier": "^1.4.4",
-    "query-string": "^5.0.0",
-    "qunit-dom": "^1.2.0",
+    "query-string": "^7.0.1",
+    "qunit-dom": "^2.0.0",
     "sass": "^1.17.3",
     "testem": "^3.0.3",
     "testem-multi-reporter": "^1.2.0",
     "text-encoder-lite": "^2.0.0",
     "xterm": "^4.6.0",
-    "xterm-addon-fit": "^0.3.0"
+    "xterm-addon-fit": "0.5.0"
   },
   "optionalDependencies": {
     "@babel/plugin-transform-member-expression-literals": "^7.2.0",
@@ -153,7 +153,8 @@
     ]
   },
   "dependencies": {
-    "lru_map": "^0.3.3",
+    "codemirror": "^5.56.0",
+    "lru_map": "^0.4.1",
     "no-case": "^3.0.4",
     "title-case": "^3.0.3"
   },

ui/tests/acceptance/optimize-test.js

@@ -5,7 +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 { formatBytes, formatHertz, replaceMinus } from 'nomad-ui/utils/units';
 
 import Optimize from 'nomad-ui/tests/pages/optimize';
 import Layout from 'nomad-ui/tests/pages/layout';
@@ -153,23 +153,23 @@ module('Acceptance | optimize', function(hooks) {
       const memDiffPercent = Math.round((100 * memDiff) / currMem);
 
       assert.equal(
-        summary.cpu,
+        replaceMinus(summary.cpu),
         cpuDiff ? `${cpuSign}${formatHertz(cpuDiff, 'MHz')} ${cpuSign}${cpuDiffPercent}%` : ''
       );
       assert.equal(
-        summary.memory,
+        replaceMinus(summary.memory),
         memDiff ? `${memSign}${formattedMemDiff(memDiff)} ${memSign}${memDiffPercent}%` : ''
       );
 
       assert.equal(
-        summary.aggregateCpu,
+        replaceMinus(summary.aggregateCpu),
         cpuDiff
           ? `${cpuSign}${formatHertz(cpuDiff * currentTaskGroupAllocations.length, 'MHz')}`
           : ''
       );
 
       assert.equal(
-        summary.aggregateMemory,
+        replaceMinus(summary.aggregateMemory),
         memDiff ? `${memSign}${formattedMemDiff(memDiff * currentTaskGroupAllocations.length)}` : ''
       );
     });

ui/tests/integration/components/das/recommendation-card-test.js

@@ -116,7 +116,8 @@ module('Integration | Component | das/recommendation-card', function(hooks) {
     assert.equal(RecommendationCard.totalsTable.unitDiff.cpu, '-75 MHz');
     assert.equal(RecommendationCard.totalsTable.unitDiff.memory, '+128 MiB');
 
-    assert.equal(RecommendationCard.totalsTable.percentDiff.cpu, '-27%');
+    // Expected signal has a minus character, not a hyphen.
+    assert.equal(RecommendationCard.totalsTable.percentDiff.cpu, '−27%');
     assert.equal(RecommendationCard.totalsTable.percentDiff.memory, '+33%');
 
     assert.equal(RecommendationCard.copyButton.text, 'job-name / group-name');

ui/tests/integration/components/das/recommendation-chart-test.js

@@ -47,7 +47,7 @@ module('Integration | Component | das/recommendation-chart', function(hooks) {
     assert.dom('.recommendation-chart.decrease').exists();
     assert.dom('.recommendation-chart .resource').hasText('Mem');
     assert.dom('.recommendation-chart .icon-is-arrow-down').exists();
-    assert.dom('text.percent').hasText('-32%');
+    assert.dom('text.percent').hasText('−32%');
     await componentA11yAudit(this.element, assert);
   });