Add project and job count

This change adds the project and jobs count in the runner table

app/assets/javascripts/runner/components/runner_list.vue

@@ -3,6 +3,7 @@ import { GlTable, GlTooltipDirective, GlSkeletonLoader } from '@gitlab/ui';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { formatNumber, sprintf, __, s__ } from '~/locale';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
+import { RUNNER_JOB_COUNT_LIMIT } from '../constants';
 import RunnerActionsCell from './cells/runner_actions_cell.vue';
 import RunnerNameCell from './cells/runner_name_cell.vue';
 import RunnerTypeCell from './cells/runner_type_cell.vue';
@@ -64,6 +65,18 @@ export default {
     },
   },
   methods: {
+    formatProjectCount(projectCount) {
+      if (projectCount === null) {
+        return __('n/a');
+      }
+      return formatNumber(projectCount);
+    },
+    formatJobCount(jobCount) {
+      if (jobCount > RUNNER_JOB_COUNT_LIMIT) {
+        return `${formatNumber(RUNNER_JOB_COUNT_LIMIT)}+`;
+      }
+      return formatNumber(jobCount);
+    },
     runnerTrAttr(runner) {
       if (runner) {
         return {
@@ -117,12 +130,12 @@ export default {
         {{ ipAddress }}
       </template>
 
-      <template #cell(projectCount)>
-        <!-- TODO add projects count -->
+      <template #cell(projectCount)="{ item: { projectCount } }">
+        {{ formatProjectCount(projectCount) }}
       </template>
 
-      <template #cell(jobCount)>
-        <!-- TODO add jobs count -->
+      <template #cell(jobCount)="{ item: { jobCount } }">
+        {{ formatJobCount(jobCount) }}
       </template>
 
       <template #cell(tagList)="{ item: { tagList } }">

app/assets/javascripts/runner/constants.js

 import { s__ } from '~/locale';
 
 export const RUNNER_PAGE_SIZE = 20;
+export const RUNNER_JOB_COUNT_LIMIT = 1000;
 
 export const I18N_DETAILS_TITLE = s__('Runners|Runner #%{runner_id}');
 

app/assets/javascripts/runner/graphql/runner_node.fragment.graphql

@@ -10,4 +10,6 @@ fragment RunnerNode on CiRunner {
   locked
   tagList
   contactedAt
+  jobCount
+  projectCount
 }

spec/frontend/runner/components/runner_list_spec.js

 import { GlLink, GlTable, GlSkeletonLoader } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
+import { cloneDeep } from 'lodash';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import RunnerList from '~/runner/components/runner_list.vue';
@@ -85,12 +86,11 @@ describe('RunnerList', () => {
     );
     expect(findCell({ fieldKey: 'name' }).text()).toContain(description);
 
-    // Other fields: some cells are empty in the first iteration
-    // See https://gitlab.com/gitlab-org/gitlab/-/issues/329658#pending-features
+    // Other fields
     expect(findCell({ fieldKey: 'version' }).text()).toBe(version);
     expect(findCell({ fieldKey: 'ipAddress' }).text()).toBe(ipAddress);
-    expect(findCell({ fieldKey: 'projectCount' }).text()).toBe('');
-    expect(findCell({ fieldKey: 'jobCount' }).text()).toBe('');
+    expect(findCell({ fieldKey: 'projectCount' }).text()).toBe('1');
+    expect(findCell({ fieldKey: 'jobCount' }).text()).toBe('0');
     expect(findCell({ fieldKey: 'tagList' }).text()).toBe('');
     expect(findCell({ fieldKey: 'contactedAt' }).text()).toEqual(expect.any(String));
 
@@ -101,6 +101,54 @@ describe('RunnerList', () => {
     expect(actions.findByTestId('toggle-active-runner').exists()).toBe(true);
   });
 
+  describe('Table data formatting', () => {
+    let mockRunnersCopy;
+
+    beforeEach(() => {
+      mockRunnersCopy = cloneDeep(mockRunners);
+    });
+
+    it('Formats null project counts', () => {
+      mockRunnersCopy[0].projectCount = null;
+
+      createComponent({ props: { runners: mockRunnersCopy } }, mount);
+
+      expect(findCell({ fieldKey: 'projectCount' }).text()).toBe('n/a');
+    });
+
+    it('Formats 0 project counts', () => {
+      mockRunnersCopy[0].projectCount = 0;
+
+      createComponent({ props: { runners: mockRunnersCopy } }, mount);
+
+      expect(findCell({ fieldKey: 'projectCount' }).text()).toBe('0');
+    });
+
+    it('Formats big project counts', () => {
+      mockRunnersCopy[0].projectCount = 1000;
+
+      createComponent({ props: { runners: mockRunnersCopy } }, mount);
+
+      expect(findCell({ fieldKey: 'projectCount' }).text()).toBe('1,000');
+    });
+
+    it('Formats job counts', () => {
+      mockRunnersCopy[0].jobCount = 1000;
+
+      createComponent({ props: { runners: mockRunnersCopy } }, mount);
+
+      expect(findCell({ fieldKey: 'jobCount' }).text()).toBe('1,000');
+    });
+
+    it('Formats big job counts with a plus symbol', () => {
+      mockRunnersCopy[0].jobCount = 1001;
+
+      createComponent({ props: { runners: mockRunnersCopy } }, mount);
+
+      expect(findCell({ fieldKey: 'jobCount' }).text()).toBe('1,000+');
+    });
+  });
+
   it('Links to the runner page', () => {
     const { id } = mockRunners[0];