Bunch more icons and a note for jobrow

hashicorp · Mar 12, 2025 · d580a0f · d580a0f
1 parent 36665f6
commit d580a0f
Show file tree

Hide file tree

Showing 30 changed files with 65 additions and 62 deletions.
diff --git a/ui/app/components/allocation-service-sidebar.hbs b/ui/app/components/allocation-service-sidebar.hbs
@@ -38,7 +38,7 @@
         type="button"
         {{on "click" @fns.closeSidebar}}
       >
-        {{x-icon "cancel"}}
+        <Hds::Icon @name="x" />
       </button>
     </header>
 

diff --git a/ui/app/components/chart-primitives/v-annotations.hbs b/ui/app/components/chart-primitives/v-annotations.hbs
@@ -11,7 +11,7 @@
         title={{annotation.label}}
         class="indicator {{if annotation.isActive "is-active"}}"
         {{on "click" (fn this.selectAnnotation annotation.annotation)}}>
-        {{x-icon annotation.icon}}
+        <Hds::Icon @name={{annotation.icon}} @isInline={{true}} />
       </button>
       <div class="line" />
     </div>

diff --git a/ui/app/components/chart-primitives/v-annotations.js b/ui/app/components/chart-primitives/v-annotations.js
@@ -9,8 +9,8 @@ import { action, get } from '@ember/object';
 import styleString from 'nomad-ui/utils/properties/glimmer-style-string';
 
 const iconFor = {
-  error: 'cancel-circle-fill',
-  info: 'info-circle-fill',
+  error: 'x-circle-fill',
+  info: 'info-fill',
 };
 
 const iconClassFor = {

diff --git a/ui/app/components/child-job-row.hbs b/ui/app/components/child-job-row.hbs
@@ -19,7 +19,7 @@
 
       {{#if @job.isPack}}
         <span data-test-pack-tag class="tag is-pack">
-          {{x-icon "box" class= "test"}}
+          <Hds::Icon @name="box" @color="faint" />
           <span>Pack</span>
         </span>
       {{/if}}

diff --git a/ui/app/components/das/accepted.hbs b/ui/app/components/das/accepted.hbs
@@ -8,5 +8,5 @@
     <h3>Recommendation accepted</h3>
     <p>A new version of this job will now be deployed.</p>
   </main>
-  {{x-icon "check-circle-fill"}}
-</section>
+  <Hds::Icon @name="check-circle-fill" />
+</section>
diff --git a/ui/app/components/das/error.hbs b/ui/app/components/das/error.hbs
@@ -14,7 +14,7 @@
     <pre data-test-errors>{{@error}}</pre>
   </section>
 
-  {{x-icon "alert-circle-fill"}}
+  <Hds::Icon @name="alert-circle-fill" />
 
   <section class="actions">
     <button
@@ -24,4 +24,4 @@
       {{on 'click' this.dismissClicked}}
     >Okay</button>
   </section>
-</section>
+</section>
diff --git a/ui/app/components/das/recommendation-accordion.hbs b/ui/app/components/das/recommendation-accordion.hbs
@@ -24,7 +24,7 @@
     {{else}}
       <a.head @buttonLabel={{unless a.isOpen "Show"}}>
         <section class="left">
-          {{x-icon "info-circle-fill"}}
+          <Hds::Icon @name="info-fill" />
           <span>Resource Recommendation</span>
           <span data-test-group class="group">{{@summary.taskGroup.name}}</span>
         </section>
@@ -49,4 +49,4 @@
       </a.head>
     {{/if}}
   </ListAccordion>
-{{/if}}
+{{/if}}
diff --git a/ui/app/components/das/recommendation-chart.hbs b/ui/app/components/das/recommendation-chart.hbs
@@ -24,7 +24,7 @@
       width={{this.icon.width}}
       height={{this.icon.height}}
     >
-      {{x-icon this.icon.name}}
+      <Hds::Icon @name={{this.icon.name}} @isInline={{true}} />
     </svg>
 
     <text
@@ -174,4 +174,4 @@
     </ol>
   </div>
 
-</div>
+</div>
diff --git a/ui/app/components/keyboard-shortcuts-modal.hbs b/ui/app/components/keyboard-shortcuts-modal.hbs
@@ -18,7 +18,7 @@
         {{on "click" (toggle "keyboard.shortcutsVisible" this)}}
         aria-label="Dismiss"
       >
-        {{x-icon "cancel"}}
+        <Hds::Icon @name="x" />
       </button>
       <h2>Keyboard Shortcuts</h2>
       <p>Click a key pattern to re-bind it to a shortcut of your choosing.</p>

diff --git a/ui/app/components/task-context-sidebar.hbs b/ui/app/components/task-context-sidebar.hbs
@@ -33,7 +33,7 @@
 				type="button"
 				{{on "click" @fns.closeSidebar}}
 			>
-				{{x-icon "cancel"}}
+        <Hds::Icon @name="x" />
 			</button>
 		</header>
 		{{#if @task.events.length}}
@@ -99,7 +99,7 @@
 			{{else}}
 				{{keyboard-commands (array this.widenCommand)}}
 			{{/if}}
-			{{x-icon (if this.wide "arrow-right" "arrow-left")}}
+			<Hds::Icon @name={{if this.wide "arrow-right" "arrow-left"}} />
 		</button>
 	</div>
-</Portal>
+</Portal>
diff --git a/ui/app/components/task-sub-row.hbs b/ui/app/components/task-sub-row.hbs
@@ -27,7 +27,7 @@
 					role="tooltip"
 					aria-label="Couldn't collect stats"
 				>
-					{{x-icon "alert-triangle" class="is-warning"}}
+					<Hds::Icon @name="alert-triangle" @color="warning" />
 				</span>
 			{{else}}
 				<div
@@ -58,7 +58,7 @@
 					role="tooltip"
 					aria-label="Couldn't collect stats"
 				>
-					{{x-icon "alert-triangle" class="is-warning"}}
+					<Hds::Icon @name="alert-triangle" @color="warning" />
 				</span>
 			{{else}}
 				<div

diff --git a/ui/app/styles/components/exec-window.scss b/ui/app/styles/components/exec-window.scss
@@ -128,13 +128,13 @@
           width: 100%;
         }
 
-        .icon {
+        .hds-icon {
           visibility: hidden;
           width: 16px;
           flex-shrink: 0;
         }
 
-        &:hover .icon.show-on-hover {
+        &:hover .hds-icon.show-on-hover {
           visibility: visible;
         }
       }

diff --git a/ui/app/templates/components/allocation-stat.hbs b/ui/app/templates/components/allocation-stat.hbs
@@ -8,7 +8,7 @@
     &hellip;
   {{else if this.error}}
     <span class="tooltip is-small text-center" role="tooltip" aria-label="Couldn't collect stats">
-      {{x-icon "alert-triangle" class="is-warning"}}
+      <Hds::Icon @name="alert-triangle-fill" @color="warning" />
     </span>
   {{else}}
     <div class="inline-chart tooltip" role="tooltip" aria-label="{{this.formattedStat}} / {{this.formattedReserved}}">

diff --git a/ui/app/templates/components/exec/task-contents.hbs b/ui/app/templates/components/exec/task-contents.hbs
@@ -14,8 +14,6 @@
 </div>
 {{#if this.shouldOpenInNewWindow}}
   <span class="tooltip" aria-label="Open in a new window">
-    {{x-icon "exit" class="show-on-hover"}}
+    <Hds::Icon @name="external-link" @color="faint" @isInline={{true}} class="show-on-hover" />
   </span>
-{{else}}
-  {{x-icon "exit"}}
-{{/if}}
+{{/if}}
diff --git a/ui/app/templates/components/exec/task-group-parent.hbs b/ui/app/templates/components/exec/task-group-parent.hbs
@@ -4,7 +4,7 @@
 ~}}
 
 <button {{action "toggleOpen"}} class="toggle-button {{if this.hasPendingAllocations "is-loading"}}" data-test-task-group-name type="button">
-  {{x-icon (if this.isOpen "chevron-down" "chevron-right")}}
+  <Hds::Icon @name={{if this.isOpen "chevron-down" "chevron-right"}} @isInline={{true}} />
   {{this.taskGroup.name}}
 </button>
 {{#if this.isOpen}}
@@ -27,4 +27,4 @@
       {{/if}}
     {{/each}}
   </ul>
-{{/if}}
+{{/if}}
diff --git a/ui/app/templates/components/job-page/parts/children.hbs b/ui/app/templates/components/job-page/parts/children.hbs
@@ -73,10 +73,10 @@
             {{this.sortedChildren.length}}
           </div>
           <p.prev @class="pagination-previous">
-            {{x-icon "chevron-left"}}
+            <Hds::Icon @name="chevron-left" />
           </p.prev>
           <p.next @class="pagination-next">
-            {{x-icon "chevron-right"}}
+            <Hds::Icon @name="chevron-right" />
           </p.next>
           <ul class="pagination-list"></ul>
         </nav>
@@ -92,4 +92,4 @@
       </p>
     </div>
   {{/if}}
-</div>
+</div>
diff --git a/ui/app/templates/components/job-page/parts/title.hbs b/ui/app/templates/components/job-page/parts/title.hbs
@@ -8,7 +8,7 @@
     {{or this.title this.job.name}}
     {{#if @job.meta.structured.root.children.pack}}
       <span data-test-pack-tag class="tag is-hollow">
-        {{x-icon "box" class= "test"}}
+        <Hds::Icon @name="box" @color="faint" />
         <span>Pack</span>
       </span>
     {{/if}}

diff --git a/ui/app/templates/components/job-row.hbs b/ui/app/templates/components/job-row.hbs
@@ -2,7 +2,7 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: BUSL-1.1
 ~}}
-
+{{!-- TODO: <JobRow> is not currently used in the UI. It should be re-implemented in jobs/index.hbs --}}
 <td data-test-job-name
   {{keyboard-shortcut
     enumerated=true
@@ -18,7 +18,6 @@
 
     {{#if this.job.meta.structured.pack}}
       <span data-test-pack-tag class="tag is-pack">
-        {{x-icon "box" class= "test"}}
         <span>Pack</span>
       </span>
     {{/if}}
@@ -70,4 +69,4 @@
       />
     {{/if}}
   </div>
-</td>
+</td>
diff --git a/ui/app/templates/components/plugin-allocation-row.hbs b/ui/app/templates/components/plugin-allocation-row.hbs
@@ -7,17 +7,17 @@
   <td data-test-indicators class="is-narrow">
     {{#if this.allocation.unhealthyDrivers.length}}
       <span data-test-icon="unhealthy-driver" class="tooltip text-center" role="tooltip" aria-label="Allocation depends on unhealthy drivers">
-        {{x-icon "alert-triangle" class="is-warning"}}
+        <Hds::Icon @name="alert-triangle-fill" @color="warning" />
       </span>
     {{/if}}
     {{#if this.allocation.nextAllocation}}
       <span data-test-icon="reschedule" class="tooltip text-center" role="tooltip" aria-label="Allocation was rescheduled">
-        {{x-icon "history" class="is-faded"}}
+        <Hds::Icon @name="history" @color="faint" />
       </span>
     {{/if}}
     {{#if this.allocation.wasPreempted}}
       <span data-test-icon="preemption" class="tooltip text-center" role="tooltip" aria-label="Allocation was preempted">
-        {{x-icon "boot" class="is-faded"}}
+        <Hds::Icon @name="cloud-lightning" @color="faint" />
       </span>
     {{/if}}
   </td>
@@ -42,9 +42,7 @@
 
   <td data-test-health>
     <span class="nowrap">
-      {{x-icon
-        (if this.pluginAllocation.healthy "check-circle-outline" "minus-circle-outline")
-        class=(if this.pluginAllocation.healthy "is-success" "is-danger")}}
+      <Hds::Icon @name={{if this.pluginAllocation.healthy "check-circle" "minus-circle"}} @color={{if this.pluginAllocation.healthy "success" "critical"}} @isInline={{true}} />
       {{if this.pluginAllocation.healthy "Healthy" "Unhealthy"}}
     </span>
   </td>

diff --git a/ui/app/templates/components/reschedule-event-timeline.hbs b/ui/app/templates/components/reschedule-event-timeline.hbs
@@ -12,12 +12,12 @@
   {{/if}}
   {{#if @allocation.hasStoppedRescheduling}}
     <li class="timeline-note" data-test-stop-warning>
-      {{x-icon "alert-triangle" class="is-warning is-text"}} Nomad has stopped attempting to reschedule this allocation.
+      <Hds::Icon @name="alert-triangle-fill" @color="warning" @isInline={{true}} /> Nomad has stopped attempting to reschedule this allocation.
     </li>
   {{/if}}
   {{#if (and @allocation.followUpEvaluation.waitUntil (not @allocation.nextAllocation))}}
     <li class="timeline-note" data-test-attempt-notice>
-      {{x-icon "clock" class="is-info is-text"}} Nomad will attempt to reschedule
+      <Hds::Icon @name="clock" @color="info" @isInline={{true}} /> Nomad will attempt to reschedule
       <span class="tooltip" aria-label="{{format-ts @allocation.followUpEvaluation.waitUntil}}">
         {{moment-from-now @allocation.followUpEvaluation.waitUntil interval=1000}}
       </span>

diff --git a/ui/app/templates/components/scale-events-accordion.hbs b/ui/app/templates/components/scale-events-accordion.hbs
@@ -18,7 +18,7 @@
             data-test-error={{a.item.error}}
           >
             {{#if a.item.error}}
-              {{x-icon "cancel-circle-fill" class="is-danger"}}
+              <Hds::Icon @name="x-circle-fill" @isInline={{true}} @color="critical" />
             {{/if}}
           </span>
           <span data-test-time title="{{format-ts a.item.time}}">
@@ -51,4 +51,4 @@
   <a.body @fullBleed={{true}}>
     <JsonViewer @json={{a.item.meta}} @fluidHeight={{true}} />
   </a.body>
-</ListAccordion>
+</ListAccordion>
diff --git a/ui/app/templates/components/scale-events-chart.hbs b/ui/app/templates/components/scale-events-chart.hbs
@@ -32,9 +32,9 @@
     <div class="event">
       <div data-test-type class="type">
         {{#if this.activeEvent.event.error}}
-          {{x-icon "cancel-circle-fill" class="is-danger"}}
+          <Hds::Icon @name="x-circle-fill" @color="critical" />
         {{else}}
-          {{x-icon "info-circle-fill" class="is-grey"}}
+          <Hds::Icon @name="info-fill" @color="faint" />
         {{/if}}
       </div>
       <div>

diff --git a/ui/app/templates/components/task-log.hbs b/ui/app/templates/components/task-log.hbs
@@ -48,7 +48,7 @@
     <button data-test-log-action="head" class="button is-white" onclick={{action "gotoHead"}} type="button">Head</button>
     <button data-test-log-action="tail" class="button is-white" onclick={{action "gotoTail"}} type="button">Tail</button>
     <button data-test-log-action="toggle-stream" class="button is-white" onclick={{action "toggleStream"}} type="button" title="{{if this.logger.isStreaming "Stop" "Start"}} log streaming">
-      {{x-icon (if this.logger.isStreaming "media-pause" "media-play") class="is-text"}}
+      <Hds::Icon @name={{if this.logger.isStreaming "pause" "play"}} />
     </button>
   </span>
 </div>

diff --git a/ui/app/templates/components/task-row.hbs b/ui/app/templates/components/task-row.hbs
@@ -6,7 +6,7 @@
 <td class="is-narrow">
   {{#unless this.task.driverStatus.healthy}}
     <Hds::TooltipButton data-test-icon="unhealthy-driver" @text="{{this.task.driver}} is unhealthy" aria-label="More information">
-      <Hds::Icon @name="alert-triangle" @isInline={{true}} />
+      <Hds::Icon @name="alert-triangle" @color="warning" />
     </Hds::TooltipButton>
   {{/unless}}
 </td>
@@ -79,7 +79,7 @@
         role="tooltip"
         aria-label="Couldn't collect stats"
       >
-        {{x-icon "alert-triangle" class="is-warning"}}
+        <Hds::Icon @name="alert-triangle-fill" @color="warning" />
       </span>
     {{else}}
       <div
@@ -110,7 +110,7 @@
         role="tooltip"
         aria-label="Couldn't collect stats"
       >
-        {{x-icon "alert-triangle" class="is-warning"}}
+        <Hds::Icon @name="alert-triangle-fill" @color="warning" />
       </span>
     {{else}}
       <div

diff --git a/ui/app/templates/exec-loading.hbs b/ui/app/templates/exec-loading.hbs
@@ -13,10 +13,10 @@
 
   <div class="navbar-end">
     <a href="https://developer.hashicorp.com/nomad/docs" target="_blank" rel="noopener noreferrer" class="navbar-item">Documentation</a>
-    {{x-icon "lock-closed"}}
+    <Hds::Icon @name="lock" />
   </div>
 </nav>
 
 <div class="exec-window loading">
   <LoadingSpinner />
-</div>
+</div>
diff --git a/ui/app/templates/exec.hbs b/ui/app/templates/exec.hbs
@@ -30,7 +30,7 @@
     </div>
   <div class="navbar-end">
     <a href="https://developer.hashicorp.com/nomad/docs" target="_blank" rel="noopener noreferrer" class="navbar-item">Documentation</a>
-    {{x-icon "lock-closed"}}
+    <Hds::Icon @name="lock" />
   </div>
 </nav>
 
@@ -60,4 +60,4 @@
     </div>
     <ExecTerminal @terminal={{this.terminal}} @socketOpen={{this.socketOpen}} />
   </div>
-{{/if}}
+{{/if}}
diff --git a/ui/app/templates/jobs/index.hbs b/ui/app/templates/jobs/index.hbs
@@ -159,7 +159,7 @@
               {{B.data.name}}
               {{#if B.data.isPack}}
                 <span data-test-pack-tag class="tag is-pack">
-                  {{x-icon "box" class= "test"}}
+                  <Hds::Icon @name="box" @color="faint" />
                   <span>Pack</span>
                 </span>
               {{/if}}