Display runner identifiers consistently

This MR updates the runner identifiers in the job and in the
admin view so they match. This way users of the runner and admins see
the same information.

app/assets/javascripts/jobs/components/sidebar_job_details_container.vue

@@ -51,7 +51,9 @@ export default {
       });
     },
     runnerId() {
-      return `${this.job.runner.description} (#${this.job.runner.id})`;
+      const { id, short_sha: token, description } = this.job?.runner;
+
+      return `#${id} (${token}) ${description}`;
     },
     shouldRenderBlock() {
       return Boolean(this.hasAnyDetail || this.hasTimeout || this.hasTags);

app/serializers/runner_entity.rb

@@ -3,7 +3,7 @@
 class RunnerEntity < Grape::Entity
   include RequestAwareEntity
 
-  expose :id, :description
+  expose :id, :description, :short_sha
 
   expose :edit_path, if: -> (*) { can_edit_runner? } do |runner|
     edit_project_runner_path(project, runner)

app/views/admin/runners/_runner.html.haml

+-# Note: This file should stay aligned with:
+-# `app/views/groups/runners/_runner.html.haml`
+
 .gl-responsive-table-row{ id: dom_id(runner) }
   .table-section.section-10.section-wrap
     .table-mobile-header{ role: 'rowheader' }= _('Type')
@@ -13,15 +16,13 @@
       - unless runner.active?
         %span.badge.badge-pill.gl-badge.sm.badge-danger= _("paused")
 
-  .table-section.section-10
-    .table-mobile-header{ role: 'rowheader' }= _('Runner token')
+  .table-section.section-30
+    .table-mobile-header{ role: 'rowheader' }= s_('Runners|Runner')
     .table-mobile-content
-      = link_to runner.short_sha, admin_runner_path(runner)
-
-  .table-section.section-20
-    .table-mobile-header{ role: 'rowheader' }= _('Description')
-    .table-mobile-content.str-truncated.has-tooltip{ title: runner.description }
-      = runner.description
+      = link_to("##{runner.id} (#{runner.short_sha})", admin_runner_path(runner))
+      .gl-text-truncate
+        %span{ title: runner.description, data: { toggle: 'tooltip', container: 'body' } }
+          = runner.description
 
   .table-section.section-10
     .table-mobile-header{ role: 'rowheader' }= _('Version')

app/views/admin/runners/index.html.haml

@@ -122,8 +122,7 @@
     .table-holder
       .gl-responsive-table-row.table-row-header{ role: 'row' }
         .table-section.section-10{ role: 'rowheader' }= _('Type/State')
-        .table-section.section-10{ role: 'rowheader' }= _('Runner token')
-        .table-section.section-20{ role: 'rowheader' }= _('Description')
+        .table-section.section-30{ role: 'rowheader' }= s_('Runners|Runner')
         .table-section.section-10{ role: 'rowheader' }= _('Version')
         .table-section.section-10{ role: 'rowheader' }= _('IP Address')
         .table-section.section-5{ role: 'rowheader' }= _('Projects')

app/views/groups/runners/_index.html.haml

@@ -86,8 +86,7 @@
     .table-holder
       .gl-responsive-table-row.table-row-header{ role: 'row' }
         .table-section.section-10{ role: 'rowheader' }= _('Type/State')
-        .table-section.section-10{ role: 'rowheader' }= _('Runner token')
-        .table-section.section-20{ role: 'rowheader' }= _('Description')
+        .table-section.section-30{ role: 'rowheader' }= s_('Runners|Runner')
         .table-section.section-10{ role: 'rowheader' }= _('Version')
         .table-section.section-10{ role: 'rowheader' }= _('IP Address')
         .table-section.section-5{ role: 'rowheader' }= _('Projects')

app/views/groups/runners/_runner.html.haml

+-# Note: This file should stay aligned with:
+-# `app/views/admin/runners/_runner.html.haml`
+
 .gl-responsive-table-row{ id: dom_id(runner) }
   .table-section.section-10.section-wrap
     .table-mobile-header{ role: 'rowheader' }= _('Type')
@@ -15,15 +18,13 @@
         %span.badge.badge-pill.gl-badge.sm.badge-danger
           = _('paused')
 
-  .table-section.section-10
-    .table-mobile-header{ role: 'rowheader' }= _('Runner token')
+  .table-section.section-30
+    .table-mobile-header{ role: 'rowheader' }= s_('Runners|Runner')
     .table-mobile-content
-      = link_to runner.short_sha, group_runner_path(@group, runner)
-
-  .table-section.section-20
-    .table-mobile-header{ role: 'rowheader' }= _('Description')
-    .table-mobile-content.str-truncated.has-tooltip{ title: runner.description }
-      = runner.description
+      = link_to("##{runner.id} (#{runner.short_sha})", group_runner_path(@group, runner))
+      .gl-text-truncate
+        %span{ title: runner.description, data: { toggle: 'tooltip', container: 'body' } }
+          = runner.description
 
   .table-section.section-10
     .table-mobile-header{ role: 'rowheader' }= _('Version')

changelogs/unreleased/326197-change-runner-identifiers-job-sidebar-admin-list.yml

+---
+title: Display runner token and description consistently in the job sidebar and admin
+  list
+merge_request: 58904
+author:
+type: changed

locale/gitlab.pot

@@ -27163,9 +27163,6 @@ msgstr ""
 msgid "Runner API"
 msgstr ""
 
-msgid "Runner token"
-msgstr ""
-
 msgid "Runner tokens"
 msgstr ""
 
@@ -27256,6 +27253,9 @@ msgstr ""
 msgid "Runners|Revision"
 msgstr ""
 
+msgid "Runners|Runner"
+msgstr ""
+
 msgid "Runners|Runner #%{runner_id}"
 msgstr ""
 

spec/frontend/jobs/components/job_sidebar_details_container_spec.js

@@ -34,11 +34,22 @@ describe('Job Sidebar Details Container', () => {
   });
 
   describe('when no details are available', () => {
-    it('should render an empty container', () => {
+    beforeEach(() => {
       createWrapper();
+    });
 
+    it('should render an empty container', () => {
       expect(wrapper.html()).toBe('');
     });
+
+    it.each(['duration', 'erased_at', 'finished_at', 'queued', 'runner', 'coverage'])(
+      'should not render %s details when missing',
+      async (detail) => {
+        await store.dispatch('receiveJobSuccess', { [detail]: undefined });
+
+        expect(findAllDetailsRow()).toHaveLength(0);
+      },
+    );
   });
 
   describe('when some of the details are available', () => {
@@ -49,7 +60,7 @@ describe('Job Sidebar Details Container', () => {
       ['erased_at', 'Erased: 3 weeks ago'],
       ['finished_at', 'Finished: 3 weeks ago'],
       ['queued', 'Queued: 9 seconds'],
-      ['runner', 'Runner: local ci runner (#1)'],
+      ['runner', 'Runner: #1 (ABCDEFGH) local ci runner'],
       ['coverage', 'Coverage: 20%'],
     ])('uses %s to render job-%s', async (detail, value) => {
       await store.dispatch('receiveJobSuccess', { [detail]: job[detail] });

spec/frontend/jobs/mock_data.js

@@ -958,6 +958,7 @@ export default {
   artifacts: [null],
   runner: {
     id: 1,
+    short_sha: 'ABCDEFGH',
     description: 'local ci runner',
     edit_path: '/root/ci-mock/runners/1/edit',
   },

spec/serializers/runner_entity_spec.rb

@@ -20,6 +20,7 @@ RSpec.describe RunnerEntity do
     it 'contains required fields' do
       expect(subject).to include(:id, :description)
       expect(subject).to include(:edit_path)
+      expect(subject).to include(:short_sha)
     end
   end
 end