Show link to cluster used on job page

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.

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) {

changelogs/unreleased/55095-show-cluster-on-job.yml

+---
+title: Show link to cluster used on job page
+merge_request: 32446
+author:
+type: added

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 ""
 

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

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();
+    });
+  });
 });