1 files changed, 116 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js
new file mode 100644
index 00000000000..e8e22ad93a5
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js
@@ -0,0 +1,116 @@
+/* global Flash */
+
+import '~/lib/utils/datetime_utility';
+import { statusIconEntityMap } from '../../vue_shared/ci_status_icons';
+import MemoryUsage from './mr_widget_memory_usage';
+import MRWidgetService from '../services/mr_widget_service';
+
+export default {
+  name: 'MRWidgetDeployment',
+  props: {
+    mr: { type: Object, required: true },
+    service: { type: Object, required: true },
+  },
+  components: {
+    'mr-widget-memory-usage': MemoryUsage,
+  },
+  computed: {
+    svg() {
+      return statusIconEntityMap.icon_status_success;
+    },
+  },
+  methods: {
+    formatDate(date) {
+      return gl.utils.getTimeago().format(date);
+    },
+    hasExternalUrls(deployment = {}) {
+      return deployment.external_url && deployment.external_url_formatted;
+    },
+    hasDeploymentTime(deployment = {}) {
+      return deployment.deployed_at && deployment.deployed_at_formatted;
+    },
+    hasDeploymentMeta(deployment = {}) {
+      return deployment.url && deployment.name;
+    },
+    stopEnvironment(deployment) {
+      const msg = 'Are you sure you want to stop this environment?';
+      const isConfirmed = confirm(msg); // eslint-disable-line
+
+      if (isConfirmed) {
+        MRWidgetService.stopEnvironment(deployment.stop_url)
+          .then(res => res.json())
+          .then((res) => {
+            if (res.redirect_url) {
+              gl.utils.visitUrl(res.redirect_url);
+            }
+          })
+          .catch(() => {
+            new Flash('Something went wrong while stopping this environment. Please try again.'); // eslint-disable-line
+          });
+      }
+    },
+  },
+  template: `
+    <div class="mr-widget-heading">
+      <div v-for="deployment in mr.deployments">
+        <div class="ci-widget">
+          <div class="ci-status-icon ci-status-icon-success">
+            <span class="js-icon-link icon-link">
+              <span class="ci-status-icon"
+                v-html="svg"
+                aria-hidden="true"></span>
+            </span>
+          </div>
+          <span>
+            <span
+              v-if="hasDeploymentMeta(deployment)">
+              Deployed to
+            </span>
+            <a
+              v-if="hasDeploymentMeta(deployment)"
+              :href="deployment.url"
+              target="_blank"
+              rel="noopener noreferrer nofollow"
+              class="js-deploy-meta">
+              {{deployment.name}}
+            </a>
+            <span
+              v-if="hasExternalUrls(deployment)">
+              on
+            </span>
+            <a
+              v-if="hasExternalUrls(deployment)"
+              :href="deployment.external_url"
+              target="_blank"
+              rel="noopener noreferrer nofollow"
+              class="js-deploy-url">
+              <i
+                class="fa fa-external-link"
+                aria-hidden="true" />
+              {{deployment.external_url_formatted}}
+            </a>
+            <span
+              v-if="hasDeploymentTime(deployment)"
+              :data-title="deployment.deployed_at_formatted"
+              class="js-deploy-time"
+              data-toggle="tooltip"
+              data-placement="top">
+              {{formatDate(deployment.deployed_at)}}
+            </span>
+            <button
+              type="button"
+              v-if="deployment.stop_url"
+              @click="stopEnvironment(deployment)"
+              class="btn btn-default btn-xs">
+              Stop environment
+            </button>
+          </span>
+        </div>
+        <mr-widget-memory-usage
+          v-if="deployment.metrics_url"
+          :metricsUrl="deployment.metrics_url"
+        />
+      </div>
+    </div>
+  `,
+};