1 files changed, 26 insertions, 3 deletions
diff --git a/app/assets/javascripts/runner/runner_details/runner_details_app.vue b/app/assets/javascripts/runner/runner_details/runner_details_app.vue
index 1b1485bfe72..4736e547cb9 100644
--- a/app/assets/javascripts/runner/runner_details/runner_details_app.vue
+++ b/app/assets/javascripts/runner/runner_details/runner_details_app.vue
@@ -1,9 +1,15 @@
 <script>
-import { I18N_TITLE } from './constants';
+import { convertToGraphQLId } from '~/graphql_shared/utils';
+import RunnerTypeBadge from '../components/runner_type_badge.vue';
+import { I18N_DETAILS_TITLE, RUNNER_ENTITY_TYPE } from '../constants';
+import getRunnerQuery from '../graphql/get_runner.query.graphql';
 
 export default {
+  components: {
+    RunnerTypeBadge,
+  },
   i18n: {
-    I18N_TITLE,
+    I18N_DETAILS_TITLE,
   },
   props: {
     runnerId: {
@@ -11,10 +17,27 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      runner: {},
+    };
+  },
+  apollo: {
+    runner: {
+      query: getRunnerQuery,
+      variables() {
+        return {
+          id: convertToGraphQLId(RUNNER_ENTITY_TYPE, this.runnerId),
+        };
+      },
+    },
+  },
 };
 </script>
 <template>
   <h2 class="page-title">
-    {{ sprintf($options.i18n.I18N_TITLE, { runner_id: runnerId }) }}
+    {{ sprintf($options.i18n.I18N_DETAILS_TITLE, { runner_id: runnerId }) }}
+
+    <runner-type-badge v-if="runner.runnerType" :type="runner.runnerType" />
   </h2>
 </template>