Show link to cluster used on job page55095-show-cluster-on-job

When the user has permissions (ie. maintainer) they can follow this link
to the cluster page. Otherwise they can always view this cluster name.
This is to implement
https://gitlab.com/gitlab-org/gitlab-ce/issues/55095 and helps users
debug cluster deployments.

5 files changed, 138 insertions, 8 deletions

diff --git a/app/assets/javascripts/jobs/components/environments_block.vue b/app/assets/javascripts/jobs/components/environments_block.vue
index 132e50e5715..8cda7dac51f 100644
--- a/app/assets/javascripts/jobs/components/environments_block.vue
+++ b/app/assets/javascripts/jobs/components/environments_block.vue
@@ -79,7 +79,9 @@ export default {
         default:
           break;
       }
-      return environmentText;
+      return environmentText && this.hasCluster
+        ? `${environmentText} ${this.clusterText}`
+        : environmentText;
     },
     environmentLink() {
       if (this.hasEnvironment) {
@@ -109,6 +111,37 @@ export default {
         ? this.lastDeployment.deployable.build_path
         : '';
     },
+    hasCluster() {
+      return this.hasLastDeployment && this.lastDeployment.cluster;
+    },
+    clusterNameOrLink() {
+      if (!this.hasCluster) {
+        return '';
+      }
+
+      const { name, path } = this.lastDeployment.cluster;
+      const escapedName = _.escape(name);
+      const escapedPath = _.escape(path);
+
+      if (!escapedPath) {
+        return escapedName;
+      }
+
+      return sprintf(
+        '%{startLink}%{name}%{endLink}',
+        {
+          startLink: `<a href="${escapedPath}" class="js-job-cluster-link">`,
+          name: escapedName,
+          endLink: '</a>',
+        },
+        false,
+      );
+    },
+    clusterText() {
+      return this.hasCluster
+        ? sprintf(__('Cluster %{cluster} was used.'), { cluster: this.clusterNameOrLink }, false)
+        : '';
+    },
   },
   methods: {
     deploymentLink(name) {
diff --git a/changelogs/unreleased/55095-show-cluster-on-job.yml b/changelogs/unreleased/55095-show-cluster-on-job.yml
new file mode 100644
index 00000000000..818213e2519
--- /dev/null
+++ b/changelogs/unreleased/55095-show-cluster-on-job.yml
@@ -0,0 +1,5 @@
+---
+title: Show link to cluster used on job page
+merge_request: 32446
+author:
+type: added
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 81ff65a0c5e..a34a3364a62 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -2488,6 +2488,9 @@ msgstr ""
 msgid "Closes this %{quick_action_target}."
 msgstr ""
 
+msgid "Cluster %{cluster} was used."
+msgstr ""
+
 msgid "ClusterIntegration| %{custom_domain_start}More information%{custom_domain_end}."
 msgstr ""
 
diff --git a/spec/features/projects/jobs_spec.rb b/spec/features/projects/jobs_spec.rb
index d1783de0330..cebca338f33 100644
--- a/spec/features/projects/jobs_spec.rb
+++ b/spec/features/projects/jobs_spec.rb
@@ -534,9 +534,32 @@ describe 'Jobs', :clean_gitlab_redis_shared_state do
         end
 
         it 'shows deployment message' do
-          expect(page).to have_content 'This job is the most recent deployment'
+          expect(page).to have_content 'This job is the most recent deployment to production'
           expect(find('.js-environment-link')['href']).to match("environments/#{environment.id}")
         end
+
+        context 'when there is a cluster used for the deployment' do
+          let(:cluster) { create(:cluster, name: 'the-cluster') }
+          let(:deployment) { create(:deployment, :success, cluster: cluster, environment: environment, project: environment.project) }
+          let(:user_access_level) { :maintainer }
+
+          it 'shows a link to the cluster' do
+            expect(page).to have_link 'the-cluster'
+          end
+
+          it 'shows the name of the cluster' do
+            expect(page).to have_content 'Cluster the-cluster was used'
+          end
+
+          context 'when the user is not able to view the cluster' do
+            let(:user_access_level) { :developer }
+
+            it 'includes only the name of the cluster without a link' do
+              expect(page).to have_content 'Cluster the-cluster was used'
+              expect(page).not_to have_link 'the-cluster'
+            end
+          end
+        end
       end
 
       context 'job is complete and not successful' do
diff --git a/spec/javascripts/jobs/components/environments_block_spec.js b/spec/javascripts/jobs/components/environments_block_spec.js
index 0866ddd21d8..4bbc5f5a348 100644
--- a/spec/javascripts/jobs/components/environments_block_spec.js
+++ b/spec/javascripts/jobs/components/environments_block_spec.js
@@ -18,6 +18,8 @@ describe('Environments block', () => {
     name: 'environment',
   };
 
+  const lastDeployment = { iid: 'deployment', deployable: { build_path: 'bar' } };
+
   afterEach(() => {
     vm.$destroy();
   });
@@ -45,7 +47,7 @@ describe('Environments block', () => {
           deploymentStatus: {
             status: 'out_of_date',
             environment: Object.assign({}, environment, {
-              last_deployment: { iid: 'deployment', deployable: { build_path: 'bar' } },
+              last_deployment: lastDeployment,
             }),
           },
           iconStatus: status,
@@ -99,10 +101,7 @@ describe('Environments block', () => {
           deploymentStatus: {
             status: 'creating',
             environment: Object.assign({}, environment, {
-              last_deployment: {
-                iid: 'deployment',
-                deployable: { build_path: 'foo' },
-              },
+              last_deployment: lastDeployment,
             }),
           },
           iconStatus: status,
@@ -112,7 +111,7 @@ describe('Environments block', () => {
           'This job is creating a deployment to environment and will overwrite the latest deployment.',
         );
 
-        expect(vm.$el.querySelector('.js-job-deployment-link').getAttribute('href')).toEqual('foo');
+        expect(vm.$el.querySelector('.js-job-deployment-link').getAttribute('href')).toEqual('bar');
       });
     });
 
@@ -146,4 +145,71 @@ describe('Environments block', () => {
       });
     });
   });
+
+  describe('with a cluster', () => {
+    it('renders the cluster link', () => {
+      const cluster = {
+        name: 'the-cluster',
+        path: '/the-cluster-path',
+      };
+      vm = mountComponent(Component, {
+        deploymentStatus: {
+          status: 'last',
+          environment: Object.assign({}, environment, {
+            last_deployment: {
+              ...lastDeployment,
+              cluster,
+            },
+          }),
+        },
+        iconStatus: status,
+      });
+
+      expect(vm.$el.textContent.trim()).toContain('Cluster the-cluster was used.');
+
+      expect(vm.$el.querySelector('.js-job-cluster-link').getAttribute('href')).toEqual(
+        '/the-cluster-path',
+      );
+    });
+
+    describe('when the cluster is missing the path', () => {
+      it('renders the name without a link', () => {
+        const cluster = {
+          name: 'the-cluster',
+        };
+        vm = mountComponent(Component, {
+          deploymentStatus: {
+            status: 'last',
+            environment: Object.assign({}, environment, {
+              last_deployment: {
+                ...lastDeployment,
+                cluster,
+              },
+            }),
+          },
+          iconStatus: status,
+        });
+
+        expect(vm.$el.textContent.trim()).toContain('Cluster the-cluster was used.');
+
+        expect(vm.$el.querySelector('.js-job-cluster-link')).toBeNull();
+      });
+    });
+  });
+
+  describe('without a cluster', () => {
+    it('does not render a cluster link', () => {
+      vm = mountComponent(Component, {
+        deploymentStatus: {
+          status: 'last',
+          environment: Object.assign({}, environment, {
+            last_deployment: lastDeployment,
+          }),
+        },
+        iconStatus: status,
+      });
+
+      expect(vm.$el.querySelector('.js-job-cluster-link')).toBeNull();
+    });
+  });
 });