Merge branch '415399-add-status-badges-to-runner-detail-view' into 'master'

Add job status badges to runners list

See merge request !129374



Merged-by: Olena Horal-Koretska <ohoralkoretska@gitlab.com>
Approved-by: Doug Stull <dstull@gitlab.com>
Approved-by: Olena Horal-Koretska <ohoralkoretska@gitlab.com>
Approved-by: Emily Bauman <ebauman@gitlab.com>
Co-authored-by: Miguel Rincon <mrincon@gitlab.com>

app/assets/javascripts/ci/runner/components/runner_managers_table.vue

@@ -6,6 +6,7 @@ import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import { tableField } from '../utils';
 import { I18N_STATUS_NEVER_CONTACTED } from '../constants';
 import RunnerStatusBadge from './runner_status_badge.vue';
+import RunnerJobStatusBadge from './runner_job_status_badge.vue';
 
 export default {
   name: 'RunnerManagersTable',
@@ -15,6 +16,7 @@ export default {
     HelpPopover,
     GlIntersperse,
     RunnerStatusBadge,
+    RunnerJobStatusBadge,
     RunnerUpgradeStatusIcon: () =>
       import('ee_component/ci/runner/components/runner_upgrade_status_icon.vue'),
   },
@@ -52,7 +54,15 @@ export default {
       </help-popover>
     </template>
     <template #cell(status)="{ item = {} }">
-      <runner-status-badge :contacted-at="item.contactedAt" :status="item.status" />
+      <runner-status-badge
+        class="gl-vertical-align-middle"
+        :contacted-at="item.contactedAt"
+        :status="item.status"
+      />
+      <runner-job-status-badge
+        class="gl-vertical-align-middle"
+        :job-status="item.jobExecutionStatus"
+      />
     </template>
     <template #cell(version)="{ item = {} }">
       {{ item.version }}

app/assets/javascripts/ci/runner/graphql/show/runner_manager_shared.fragment.graphql

@@ -9,4 +9,5 @@ fragment CiRunnerManagerShared on CiRunnerManager {
   platformName
   ipAddress
   contactedAt
+  jobExecutionStatus
 }

spec/frontend/ci/runner/components/runner_managers_table_spec.js

@@ -60,8 +60,8 @@ describe('RunnerJobs', () => {
 
   it('shows status', () => {
     createComponent();
-    expect(findCellText({ field: 'status', i: 0 })).toBe(s__('Runners|Online'));
-    expect(findCellText({ field: 'status', i: 1 })).toBe(s__('Runners|Online'));
+    expect(findCellText({ field: 'status', i: 0 })).toContain(s__('Runners|Online'));
+    expect(findCellText({ field: 'status', i: 0 })).toContain(s__('Runners|Idle'));
   });
 
   it('shows version', () => {