Creates vue component for environments block

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

+<script>
+  import _ from 'underscore';
+  import CiIcon from '~/vue_shared/components/ci_icon.vue';
+  import { sprintf, __ } from '../../locale';
+
+  export default {
+    components: {
+      CiIcon,
+    },
+    props: {
+      deploymentStatus: {
+        type: Object,
+        required: true,
+      },
+    },
+    computed: {
+      environment() {
+        let environmentText;
+        switch (this.deploymentStatus.status) {
+          case 'latest':
+            environmentText = sprintf(
+              __('This job is the most recent deployment to %{link}.'),
+              { link: this.environmentLink },
+              false,
+            );
+            break;
+          case 'out_of_date':
+            if (this.hasLastDeployment) {
+              environmentText = sprintf(
+                __(
+                  'This job is an out-of-date deployment to %{environmentLink}. View the most recent deployment %{deploymentLink}.',
+                ),
+                {
+                  environmentLink: this.environmentLink,
+                  deploymentLink: this.deploymentLink,
+                },
+                false,
+              );
+            } else {
+              environmentText = sprintf(
+                __('This job is an out-of-date deployment to %{environmentLink}.'),
+                { environmentLink: this.environmentLink },
+                false,
+              );
+            }
+
+            break;
+          case 'failed':
+            environmentText = sprintf(
+              __('The deployment of this job to %{environmentLink} did not succeed.'),
+              { environmentLink: this.environmentLink },
+              false,
+            );
+            break;
+          case 'creating':
+            if (this.hasLastDeployment) {
+              environmentText = sprintf(
+                __(
+                  'This job is creating a deployment to %{environmentLink} and will overwrite the last %{deploymentLink}.',
+                ),
+                {
+                  environmentLink: this.environmentLink,
+                  deploymentLink: this.deploymentLink,
+                },
+                false,
+              );
+            } else {
+              environmentText = sprintf(
+                __('This job is creating a deployment to %{environmentLink}.'),
+                { environmentLink: this.environmentLink },
+                false,
+              );
+            }
+            break;
+          default:
+            break;
+        }
+        return environmentText;
+      },
+      environmentLink() {
+        return sprintf(
+          '%{startLink}%{name}%{endLink}',
+          {
+            startLink: `<a href="${this.deploymentStatus.environment.path}">`,
+            name: _.escape(this.deploymentStatus.environment.name),
+            endLink: '</a>',
+          },
+          false,
+        );
+      },
+      deploymentLink() {
+        return sprintf(
+          '%{startLink}%{name}%{endLink}',
+          {
+            startLink: `<a href="${this.lastDeployment.path}">`,
+            name: _.escape(this.lastDeployment.name),
+            endLink: '</a>',
+          },
+          false,
+        );
+      },
+      hasLastDeployment() {
+        return this.deploymentStatus.environment.last_deployment;
+      },
+      lastDeployment() {
+        return this.deploymentStatus.environment.last_deployment;
+      },
+    },
+  };
+</script>
+<template>
+  <div class="prepend-top-default js-environment-container">
+    <div class="environment-information">
+      <ci-icon :status="deploymentStatus.icon" />
+      <p v-html="environment"></p>
+    </div>
+  </div>
+</template>

changelogs/unreleased/50101-env-block.yml

+---
+title: Creates vue component for environments information in job log view
+merge_request:
+author:
+type: other

locale/gitlab.pot

@@ -5492,6 +5492,9 @@ msgstr ""
 msgid "The collection of events added to the data gathered for that stage."
 msgstr ""
+msgid "The deployment of this job to %{environmentLink} did not succeed."
+msgstr ""
+
 msgid "The fork relationship has been removed."
 msgstr ""
@@ -5675,6 +5678,18 @@ msgstr ""
 msgid "This job has not started yet"
 msgstr ""
+msgid "This job is an out-of-date deployment to %{environmentLink}."
+msgstr ""
+
+msgid "This job is an out-of-date deployment to %{environmentLink}. View the most recent deployment %{deploymentLink}."
+msgstr ""
+
+msgid "This job is creating a deployment to %{environmentLink} and will overwrite the last %{deploymentLink}."
+msgstr ""
+
+msgid "This job is creating a deployment to %{environmentLink}."
+msgstr ""
+
 msgid "This job is in pending state and is waiting to be picked by a runner"
 msgstr ""
@@ -5684,6 +5699,9 @@ msgstr ""
 msgid "This job is stuck, because you don't have any active runners that can run this job."
 msgstr ""
+msgid "This job is the most recent deployment to %{link}."
+msgstr ""
+
 msgid "This job requires a manual action"
 msgstr ""

spec/javascripts/jobs/components/environments_block_spec.js

+import Vue from 'vue';
+import component from '~/jobs/components/environments_block.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+describe('Environments block', () => {
+  const Component = Vue.extend(component);
+  let vm;
+  const icon = {
+    group: 'success',
+    icon: 'status_success',
+    label: 'passed',
+    text: 'passed',
+    tooltip: 'passed',
+  };
+  const deployment = {
+    path: 'deployment',
+    name: 'deployment name',
+  };
+  const environment = {
+    path: '/environment',
+    name: 'environment',
+  };
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('with latest deployment', () => {
+    it('renders info for most recent deployment', () => {
+      vm = mountComponent(Component, {
+        deploymentStatus: {
+          status: 'latest',
+          icon,
+          deployment,
+          environment,
+        },
+      });
+
+      expect(vm.$el.textContent.trim()).toEqual(
+        'This job is the most recent deployment to environment.',
+      );
+    });
+  });
+
+  describe('with out of date deployment', () => {
+    describe('with last deployment', () => {
+      it('renders info for out date and most recent', () => {
+        vm = mountComponent(Component, {
+          deploymentStatus: {
+            status: 'out_of_date',
+            icon,
+            deployment,
+            environment: Object.assign({}, environment, {
+              last_deployment: { name: 'deployment', path: 'last_deployment' },
+            }),
+          },
+        });
+
+        expect(vm.$el.textContent.trim()).toEqual(
+          'This job is an out-of-date deployment to environment. View the most recent deployment deployment.',
+        );
+      });
+    });
+
+    describe('without last deployment', () => {
+      it('renders info about out of date deployment', () => {
+        vm = mountComponent(Component, {
+          deploymentStatus: {
+            status: 'out_of_date',
+            icon,
+            deployment: null,
+            environment,
+          },
+        });
+
+        expect(vm.$el.textContent.trim()).toEqual(
+          'This job is an out-of-date deployment to environment.',
+        );
+      });
+    });
+  });
+
+  describe('with failed deployment', () => {
+    it('renders info about failed deployment', () => {
+      vm = mountComponent(Component, {
+        deploymentStatus: {
+          status: 'failed',
+          icon,
+          deployment: null,
+          environment,
+        },
+      });
+
+      expect(vm.$el.textContent.trim()).toEqual(
+        'The deployment of this job to environment did not succeed.',
+      );
+    });
+  });
+
+  describe('creating deployment', () => {
+    describe('with last deployment', () => {
+      it('renders info about creating deployment and overriding lastest deployment', () => {
+        vm = mountComponent(Component, {
+          deploymentStatus: {
+            status: 'creating',
+            icon,
+            deployment,
+            environment: Object.assign({}, environment, {
+              last_deployment: { name: 'deployment', path: 'last_deployment' },
+            }),
+          },
+        });
+
+        expect(vm.$el.textContent.trim()).toEqual(
+          'This job is creating a deployment to environment and will overwrite the last deployment.',
+        );
+      });
+    });
+
+    describe('without last deployment', () => {
+      it('renders info about failed deployment', () => {
+        vm = mountComponent(Component, {
+          deploymentStatus: {
+            status: 'creating',
+            icon,
+            deployment: null,
+            environment,
+          },
+        });
+
+        expect(vm.$el.textContent.trim()).toEqual(
+          'This job is creating a deployment to environment.',
+        );
+      });
+    });
+  });
+});