1 files changed, 34 insertions, 18 deletions
diff --git a/app/assets/javascripts/runner/components/runner_header.vue b/app/assets/javascripts/runner/components/runner_header.vue
index 09f58df7bd0..abc07cec1ad 100644
--- a/app/assets/javascripts/runner/components/runner_header.vue
+++ b/app/assets/javascripts/runner/components/runner_header.vue
@@ -1,19 +1,23 @@
 <script>
-import { GlSprintf } from '@gitlab/ui';
+import { GlIcon, GlSprintf, GlTooltipDirective } from '@gitlab/ui';
 import { sprintf } from '~/locale';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
-import { I18N_DETAILS_TITLE } from '../constants';
+import { I18N_DETAILS_TITLE, I18N_LOCKED_RUNNER_DESCRIPTION } from '../constants';
 import RunnerTypeBadge from './runner_type_badge.vue';
 import RunnerStatusBadge from './runner_status_badge.vue';
 
 export default {
   components: {
+    GlIcon,
     GlSprintf,
     TimeAgo,
     RunnerTypeBadge,
     RunnerStatusBadge,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     runner: {
       type: Object,
@@ -29,24 +33,36 @@ export default {
       return sprintf(I18N_DETAILS_TITLE, { runner_id: id });
     },
   },
+  I18N_LOCKED_RUNNER_DESCRIPTION,
 };
 </script>
 <template>
-  <div class="gl-py-5 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100">
-    <runner-status-badge :runner="runner" />
-    <runner-type-badge v-if="runner" :type="runner.runnerType" />
-    <template v-if="runner.createdAt">
-      <gl-sprintf :message="__('%{runner} created %{timeago}')">
-        <template #runner>
-          <strong>{{ heading }}</strong>
-        </template>
-        <template #timeago>
-          <time-ago :time="runner.createdAt" />
-        </template>
-      </gl-sprintf>
-    </template>
-    <template v-else>
-      <strong>{{ heading }}</strong>
-    </template>
+  <div
+    class="gl-display-flex gl-align-items-center gl-py-5 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100"
+  >
+    <div>
+      <runner-status-badge :runner="runner" />
+      <runner-type-badge v-if="runner" :type="runner.runnerType" />
+      <template v-if="runner.createdAt">
+        <gl-sprintf :message="__('%{runner} created %{timeago}')">
+          <template #runner>
+            <strong>{{ heading }}</strong>
+            <gl-icon
+              v-if="runner.locked"
+              v-gl-tooltip="$options.I18N_LOCKED_RUNNER_DESCRIPTION"
+              name="lock"
+              :aria-label="$options.I18N_LOCKED_RUNNER_DESCRIPTION"
+            />
+          </template>
+          <template #timeago>
+            <time-ago :time="runner.createdAt" />
+          </template>
+        </gl-sprintf>
+      </template>
+      <template v-else>
+        <strong>{{ heading }}</strong>
+      </template>
+    </div>
+    <div class="gl-ml-auto gl-flex-shrink-0"><slot name="actions"></slot></div>
   </div>
 </template>