1 files changed, 28 insertions, 2 deletions
diff --git a/app/assets/javascripts/runner/admin_runner_show/admin_runner_show_app.vue b/app/assets/javascripts/runner/admin_runner_show/admin_runner_show_app.vue
index c3f317b40b0..06a8eb790fc 100644
--- a/app/assets/javascripts/runner/admin_runner_show/admin_runner_show_app.vue
+++ b/app/assets/javascripts/runner/admin_runner_show/admin_runner_show_app.vue
@@ -1,14 +1,16 @@
 <script>
-import { GlTooltipDirective } from '@gitlab/ui';
+import { GlBadge, GlTab, GlTooltipDirective } from '@gitlab/ui';
 import { createAlert, VARIANT_SUCCESS } from '~/flash';
 import { TYPE_CI_RUNNER } from '~/graphql_shared/constants';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { redirectTo } from '~/lib/utils/url_utility';
+import { formatJobCount } from '../utils';
 import RunnerDeleteButton from '../components/runner_delete_button.vue';
 import RunnerEditButton from '../components/runner_edit_button.vue';
 import RunnerPauseButton from '../components/runner_pause_button.vue';
 import RunnerHeader from '../components/runner_header.vue';
 import RunnerDetails from '../components/runner_details.vue';
+import RunnerJobs from '../components/runner_jobs.vue';
 import { I18N_FETCH_ERROR } from '../constants';
 import runnerQuery from '../graphql/show/runner.query.graphql';
 import { captureException } from '../sentry_utils';
@@ -17,11 +19,14 @@ import { saveAlertToLocalStorage } from '../local_storage_alert/save_alert_to_lo
 export default {
   name: 'AdminRunnerShowApp',
   components: {
+    GlBadge,
+    GlTab,
     RunnerDeleteButton,
     RunnerEditButton,
     RunnerPauseButton,
     RunnerHeader,
     RunnerDetails,
+    RunnerJobs,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -63,6 +68,9 @@ export default {
     canDelete() {
       return this.runner.userPermissions?.deleteRunner;
     },
+    jobCount() {
+      return formatJobCount(this.runner?.jobCount);
+    },
   },
   errorCaptured(error) {
     this.reportToSentry(error);
@@ -88,6 +96,24 @@ export default {
       </template>
     </runner-header>
 
-    <runner-details :runner="runner" />
+    <runner-details :runner="runner">
+      <template #jobs-tab>
+        <gl-tab>
+          <template #title>
+            {{ s__('Runners|Jobs') }}
+            <gl-badge
+              v-if="jobCount"
+              data-testid="job-count-badge"
+              class="gl-tab-counter-badge"
+              size="sm"
+            >
+              {{ jobCount }}
+            </gl-badge>
+          </template>
+
+          <runner-jobs v-if="runner" :runner="runner" />
+        </gl-tab>
+      </template>
+    </runner-details>
   </div>
 </template>