1 files changed, 80 insertions, 0 deletions
diff --git a/app/assets/javascripts/runner/components/runner_status_badge.vue b/app/assets/javascripts/runner/components/runner_status_badge.vue
new file mode 100644
index 00000000000..0823876a187
--- /dev/null
+++ b/app/assets/javascripts/runner/components/runner_status_badge.vue
@@ -0,0 +1,80 @@
+<script>
+import { GlBadge, GlTooltipDirective } from '@gitlab/ui';
+import { __, s__, sprintf } from '~/locale';
+import { getTimeago } from '~/lib/utils/datetime_utility';
+import {
+  I18N_ONLINE_RUNNER_TIMEAGO_DESCRIPTION,
+  I18N_NOT_CONNECTED_RUNNER_DESCRIPTION,
+  I18N_OFFLINE_RUNNER_TIMEAGO_DESCRIPTION,
+  I18N_STALE_RUNNER_DESCRIPTION,
+  STATUS_ONLINE,
+  STATUS_NOT_CONNECTED,
+  STATUS_NEVER_CONTACTED,
+  STATUS_OFFLINE,
+  STATUS_STALE,
+} from '../constants';
+
+export default {
+  components: {
+    GlBadge,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    runner: {
+      required: true,
+      type: Object,
+    },
+  },
+  computed: {
+    contactedAtTimeAgo() {
+      if (this.runner.contactedAt) {
+        return getTimeago().format(this.runner.contactedAt);
+      }
+      // Prevent "just now" from being rendered, in case data is missing.
+      return __('n/a');
+    },
+    badge() {
+      switch (this.runner?.status) {
+        case STATUS_ONLINE:
+          return {
+            variant: 'success',
+            label: s__('Runners|online'),
+            tooltip: sprintf(I18N_ONLINE_RUNNER_TIMEAGO_DESCRIPTION, {
+              timeAgo: this.contactedAtTimeAgo,
+            }),
+          };
+        case STATUS_NOT_CONNECTED:
+        case STATUS_NEVER_CONTACTED:
+          return {
+            variant: 'muted',
+            label: s__('Runners|not connected'),
+            tooltip: I18N_NOT_CONNECTED_RUNNER_DESCRIPTION,
+          };
+        case STATUS_OFFLINE:
+          return {
+            variant: 'muted',
+            label: s__('Runners|offline'),
+            tooltip: sprintf(I18N_OFFLINE_RUNNER_TIMEAGO_DESCRIPTION, {
+              timeAgo: this.contactedAtTimeAgo,
+            }),
+          };
+        case STATUS_STALE:
+          return {
+            variant: 'warning',
+            label: s__('Runners|stale'),
+            tooltip: I18N_STALE_RUNNER_DESCRIPTION,
+          };
+        default:
+          return null;
+      }
+    },
+  },
+};
+</script>
+<template>
+  <gl-badge v-if="badge" v-gl-tooltip="badge.tooltip" :variant="badge.variant" v-bind="$attrs">
+    {{ badge.label }}
+  </gl-badge>
+</template>