From d4021122c51d61251ec774fb449c2f15e94b04d6 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Thu, 20 Apr 2017 11:48:54 +0000
Subject: Refactor into .vue files

---
 .../environments/components/environment_item.js    |  4 +-
 .../components/environment_monitoring.js           | 30 ---------
 .../components/environment_monitoring.vue          | 33 ++++++++++
 .../components/environment_rollback.js             | 69 --------------------
 .../components/environment_rollback.vue            | 74 ++++++++++++++++++++++
 .../environments/environment_monitoring_spec.js    |  2 +-
 .../environments/environment_rollback_spec.js      |  2 +-
 7 files changed, 111 insertions(+), 103 deletions(-)
 delete mode 100644 app/assets/javascripts/environments/components/environment_monitoring.js
 create mode 100644 app/assets/javascripts/environments/components/environment_monitoring.vue
 delete mode 100644 app/assets/javascripts/environments/components/environment_rollback.js
 create mode 100644 app/assets/javascripts/environments/components/environment_rollback.vue

diff --git a/app/assets/javascripts/environments/components/environment_item.js b/app/assets/javascripts/environments/components/environment_item.js
index 915f0ca4ccb..0b174cf97da 100644
--- a/app/assets/javascripts/environments/components/environment_item.js
+++ b/app/assets/javascripts/environments/components/environment_item.js
@@ -3,9 +3,9 @@ import '../../lib/utils/text_utility';
 import ActionsComponent from './environment_actions';
 import ExternalUrlComponent from './environment_external_url.vue';
 import StopComponent from './environment_stop.vue';
-import RollbackComponent from './environment_rollback';
+import RollbackComponent from './environment_rollback.vue';
 import TerminalButtonComponent from './environment_terminal_button.vue';
-import MonitoringButtonComponent from './environment_monitoring';
+import MonitoringButtonComponent from './environment_monitoring.vue';
 import CommitComponent from '../../vue_shared/components/commit';
 import eventHub from '../event_hub';
 
diff --git a/app/assets/javascripts/environments/components/environment_monitoring.js b/app/assets/javascripts/environments/components/environment_monitoring.js
deleted file mode 100644
index 8c37dd76ae7..00000000000
--- a/app/assets/javascripts/environments/components/environment_monitoring.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Renders the Monitoring (Metrics) link in environments table.
- */
-export default {
-  props: {
-    monitoringUrl: {
-      type: String,
-      default: '',
-      required: true,
-    },
-  },
-
-  computed: {
-    title() {
-      return 'Monitoring';
-    },
-  },
-
-  template: `
-    <a
-      class="btn monitoring-url has-tooltip"
-      data-container="body"
-      :href="monitoringUrl"
-      rel="noopener noreferrer nofollow"
-      :title="title"
-      :aria-label="title">
-      <i class="fa fa-area-chart" aria-hidden="true"></i>
-    </a>
-  `,
-};
diff --git a/app/assets/javascripts/environments/components/environment_monitoring.vue b/app/assets/javascripts/environments/components/environment_monitoring.vue
new file mode 100644
index 00000000000..4b030a27900
--- /dev/null
+++ b/app/assets/javascripts/environments/components/environment_monitoring.vue
@@ -0,0 +1,33 @@
+<script>
+/**
+ * Renders the Monitoring (Metrics) link in environments table.
+ */
+export default {
+  props: {
+    monitoringUrl: {
+      type: String,
+      required: true,
+    },
+  },
+
+  computed: {
+    title() {
+      return 'Monitoring';
+    },
+  },
+};
+</script>
+<template>
+  <a
+    class="btn monitoring-url has-tooltip"
+    data-container="body"
+    target="_blank"
+    rel="noopener noreferrer nofollow"
+    :href="monitoringUrl"
+    :title="title"
+    :aria-label="title">
+    <i
+      class="fa fa-area-chart"
+      aria-hidden="true" />
+  </a>
+</template>
diff --git a/app/assets/javascripts/environments/components/environment_rollback.js b/app/assets/javascripts/environments/components/environment_rollback.js
deleted file mode 100644
index 7cbfb651525..00000000000
--- a/app/assets/javascripts/environments/components/environment_rollback.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/* global Flash */
-/* eslint-disable no-new */
-/**
- * Renders Rollback or Re deploy button in environments table depending
- * of the provided property `isLastDeployment`.
- *
- * Makes a post request when the button is clicked.
- */
-import eventHub from '../event_hub';
-
-export default {
-  props: {
-    retryUrl: {
-      type: String,
-      default: '',
-    },
-
-    isLastDeployment: {
-      type: Boolean,
-      default: true,
-    },
-
-    service: {
-      type: Object,
-      required: true,
-    },
-  },
-
-  data() {
-    return {
-      isLoading: false,
-    };
-  },
-
-  methods: {
-    onClick() {
-      this.isLoading = true;
-
-      $(this.$el).tooltip('destroy');
-
-      this.service.postAction(this.retryUrl)
-      .then(() => {
-        this.isLoading = false;
-        eventHub.$emit('refreshEnvironments');
-      })
-      .catch(() => {
-        this.isLoading = false;
-        new Flash('An error occured while making the request.');
-      });
-    },
-  },
-
-  template: `
-    <button type="button"
-      class="btn"
-      @click="onClick"
-      :disabled="isLoading">
-
-      <span v-if="isLastDeployment">
-        Re-deploy
-      </span>
-      <span v-else>
-        Rollback
-      </span>
-
-      <i v-if="isLoading" class="fa fa-spinner fa-spin" aria-hidden="true"></i>
-    </button>
-  `,
-};
diff --git a/app/assets/javascripts/environments/components/environment_rollback.vue b/app/assets/javascripts/environments/components/environment_rollback.vue
new file mode 100644
index 00000000000..f139f24036f
--- /dev/null
+++ b/app/assets/javascripts/environments/components/environment_rollback.vue
@@ -0,0 +1,74 @@
+<script>
+/* global Flash */
+/* eslint-disable no-new */
+/**
+ * Renders Rollback or Re deploy button in environments table depending
+ * of the provided property `isLastDeployment`.
+ *
+ * Makes a post request when the button is clicked.
+ */
+import eventHub from '../event_hub';
+
+export default {
+  props: {
+    retryUrl: {
+      type: String,
+      default: '',
+    },
+
+    isLastDeployment: {
+      type: Boolean,
+      default: true,
+    },
+
+    service: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      isLoading: false,
+    };
+  },
+
+  methods: {
+    onClick() {
+      this.isLoading = true;
+
+      $(this.$el).tooltip('destroy');
+
+      this.service.postAction(this.retryUrl)
+      .then(() => {
+        this.isLoading = false;
+        eventHub.$emit('refreshEnvironments');
+      })
+      .catch(() => {
+        this.isLoading = false;
+        new Flash('An error occured while making the request.');
+      });
+    },
+  },
+};
+</script>
+<template>
+  <button
+    type="button"
+    class="btn"
+    @click="onClick"
+    :disabled="isLoading">
+
+    <span v-if="isLastDeployment">
+      Re-deploy
+    </span>
+    <span v-else>
+      Rollback
+    </span>
+
+    <i
+      v-if="isLoading"
+      class="fa fa-spinner fa-spin"
+      aria-hidden="true" />
+  </button>
+</template>
diff --git a/spec/javascripts/environments/environment_monitoring_spec.js b/spec/javascripts/environments/environment_monitoring_spec.js
index fc451cce641..0f3dba66230 100644
--- a/spec/javascripts/environments/environment_monitoring_spec.js
+++ b/spec/javascripts/environments/environment_monitoring_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import monitoringComp from '~/environments/components/environment_monitoring';
+import monitoringComp from '~/environments/components/environment_monitoring.vue';
 
 describe('Monitoring Component', () => {
   let MonitoringComponent;
diff --git a/spec/javascripts/environments/environment_rollback_spec.js b/spec/javascripts/environments/environment_rollback_spec.js
index 7cb39d9df03..25397714a76 100644
--- a/spec/javascripts/environments/environment_rollback_spec.js
+++ b/spec/javascripts/environments/environment_rollback_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import rollbackComp from '~/environments/components/environment_rollback';
+import rollbackComp from '~/environments/components/environment_rollback.vue';
 
 describe('Rollback Component', () => {
   const retryURL = 'https://gitlab.com/retry';
-- 
cgit v1.2.1