1 files changed, 20 insertions, 6 deletions
diff --git a/app/assets/javascripts/runner/components/runner_status_badge.vue b/app/assets/javascripts/runner/components/runner_status_badge.vue
index 073d0a49f59..d084408781e 100644
--- a/app/assets/javascripts/runner/components/runner_status_badge.vue
+++ b/app/assets/javascripts/runner/components/runner_status_badge.vue
@@ -1,8 +1,12 @@
 <script>
 import { GlBadge, GlTooltipDirective } from '@gitlab/ui';
-import { __, s__, sprintf } from '~/locale';
+import { __, sprintf } from '~/locale';
 import { getTimeago } from '~/lib/utils/datetime_utility';
 import {
+  I18N_STATUS_ONLINE,
+  I18N_STATUS_NEVER_CONTACTED,
+  I18N_STATUS_OFFLINE,
+  I18N_STATUS_STALE,
   I18N_ONLINE_TIMEAGO_TOOLTIP,
   I18N_NEVER_CONTACTED_TOOLTIP,
   I18N_OFFLINE_TIMEAGO_TOOLTIP,
@@ -39,26 +43,30 @@ export default {
       switch (this.runner?.status) {
         case STATUS_ONLINE:
           return {
+            icon: 'status-active',
             variant: 'success',
-            label: s__('Runners|online'),
+            label: I18N_STATUS_ONLINE,
             tooltip: this.timeAgoTooltip(I18N_ONLINE_TIMEAGO_TOOLTIP),
           };
         case STATUS_NEVER_CONTACTED:
           return {
+            icon: 'time-out',
             variant: 'muted',
-            label: s__('Runners|never contacted'),
+            label: I18N_STATUS_NEVER_CONTACTED,
             tooltip: I18N_NEVER_CONTACTED_TOOLTIP,
           };
         case STATUS_OFFLINE:
           return {
+            icon: 'time-out',
             variant: 'muted',
-            label: s__('Runners|offline'),
+            label: I18N_STATUS_OFFLINE,
             tooltip: this.timeAgoTooltip(I18N_OFFLINE_TIMEAGO_TOOLTIP),
           };
         case STATUS_STALE:
           return {
+            icon: 'time-out',
             variant: 'warning',
-            label: s__('Runners|stale'),
+            label: I18N_STATUS_STALE,
             // runner may have contacted (or not) and be stale: consider both cases.
             tooltip: this.runner.contactedAt
               ? this.timeAgoTooltip(I18N_STALE_TIMEAGO_TOOLTIP)
@@ -77,7 +85,13 @@ export default {
 };
 </script>
 <template>
-  <gl-badge v-if="badge" v-gl-tooltip="badge.tooltip" :variant="badge.variant" v-bind="$attrs">
+  <gl-badge
+    v-if="badge"
+    v-gl-tooltip="badge.tooltip"
+    :variant="badge.variant"
+    :icon="badge.icon"
+    v-bind="$attrs"
+  >
     {{ badge.label }}
   </gl-badge>
 </template>