Refactor into .vue files

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';
 

app/assets/javascripts/environments/components/environment_monitoring.js → app/assets/javascripts/environments/components/environment_monitoring.vue

+<script>
 /**
  * Renders the Monitoring (Metrics) link in environments table.
  */
@@ -5,7 +6,6 @@ export default {
   props: {
     monitoringUrl: {
       type: String,
-      default: '',
       required: true,
     },
   },
@@ -15,16 +15,19 @@ export default {
       return 'Monitoring';
     },
   },
-
-  template: `
+};
+</script>
+<template>
   <a
     class="btn monitoring-url has-tooltip"
     data-container="body"
-      :href="monitoringUrl"
+    target="_blank"
     rel="noopener noreferrer nofollow"
+    :href="monitoringUrl"
     :title="title"
     :aria-label="title">
-      <i class="fa fa-area-chart" aria-hidden="true"></i>
+    <i
+      class="fa fa-area-chart"
+      aria-hidden="true" />
   </a>
-  `,
-};
+</template>

app/assets/javascripts/environments/components/environment_rollback.js → app/assets/javascripts/environments/components/environment_rollback.vue

+<script>
 /* global Flash */
 /* eslint-disable no-new */
 /**
@@ -49,9 +50,11 @@ export default {
       });
     },
   },
-
-  template: `
-    <button type="button"
+};
+</script>
+<template>
+  <button
+    type="button"
     class="btn"
     @click="onClick"
     :disabled="isLoading">
@@ -63,7 +66,9 @@ export default {
       Rollback
     </span>
 
-      <i v-if="isLoading" class="fa fa-spinner fa-spin" aria-hidden="true"></i>
+    <i
+      v-if="isLoading"
+      class="fa fa-spinner fa-spin"
+      aria-hidden="true" />
   </button>
-  `,
-};
+</template>

spec/javascripts/environments/environment_monitoring_spec.js

 import Vue from 'vue';
-import monitoringComp from '~/environments/components/environment_monitoring';
+import monitoringComp from '~/environments/components/environment_monitoring.vue';
 
 describe('Monitoring Component', () => {
   let MonitoringComponent;

spec/javascripts/environments/environment_rollback_spec.js

 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';