Refactor deploy boards into vue files

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

+<script>
 /* eslint-disable no-new, no-undef */
 /* global Flash */
 /**
@@ -22,7 +23,7 @@ import statusCodes from '~/lib/utils/http_status';
 import '~/flash';
 import '~/lib/utils/common_utils';
 import deployBoardSvg from 'empty_states/icons/_deploy_board.svg';
-import instanceComponent from './deploy_board_instance_component';
+import instanceComponent from './deploy_board_instance_component.vue';
 
 export default {
 
@@ -160,72 +161,81 @@ export default {
       return '<projectname>';
     },
   },
+};
+</script>
+<template>
+  <div class="js-deploy-board deploy-board">
+
+    <div v-if="isLoading">
+      <i
+        class="fa fa-spinner fa-spin"
+        aria-hidden="true" />
+    </div>
 
-  template: `
-    <div class="js-deploy-board deploy-board">
-
-      <div v-if="isLoading">
-        <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
-      </div>
-
-      <div v-if="canRenderDeployBoard">
-
-        <section class="deploy-board-information">
-          <span>
-            <span class="percentage">{{deployBoardData.completion}}%</span>
-            <span class="text">Complete</span>
-          </span>
-        </section>
-
-        <section class="deploy-board-instances">
-          <p class="text">{{instanceTitle}}</p>
-
-          <div class="deploy-board-instances-container">
-            <template v-for="instance in deployBoardData.instances">
-              <instance-component
-                :status="instance.status"
-                :tooltip-text="instance.tooltip"
-                :stable="instance.stable" />
-            </template>
-          </div>
-        </section>
-
-        <section class="deploy-board-actions" v-if="deployBoardData.rollback_url || deployBoardData.abort_url">
-          <a class="btn"
-            data-method="post"
-            rel="nofollow"
-            v-if="deployBoardData.rollback_url"
-            :href="deployBoardData.rollback_url">
-            Rollback
-          </a>
-
-          <a class="btn btn-red btn-inverted"
-            data-method="post"
-            rel="nofollow"
-            v-if="deployBoardData.abort_url"
-            :href="deployBoardData.abort_url">
-            Abort
-          </a>
-        </section>
-      </div>
-
-      <div v-if="canRenderEmptyState">
-        <section class="deploy-board-empty-state-svg">
-          ${deployBoardSvg}
-        </section>
-
-        <section class="deploy-board-empty-state-text">
-          <span class="title">Kubernetes deployment not found</span>
-          <span>
-            To see deployment progress for your environments, make sure your deployments are in Kubernetes namespace
-            <code>{{projectName}}</code> and labeled with <code>app=$CI_ENVIRONMENT_SLUG</code>.
-          </span>
-        </section>
-      </div>
-
-      <div v-if="canRenderErrorState" class="deploy-board-error-message">
-        We can't fetch the data right now. Please try again later.
-      </div>
+    <div v-if="canRenderDeployBoard">
+
+      <section class="deploy-board-information">
+        <span>
+          <span class="percentage">{{deployBoardData.completion}}%</span>
+          <span class="text">Complete</span>
+        </span>
+      </section>
+
+      <section class="deploy-board-instances">
+        <p class="text">{{instanceTitle}}</p>
+
+        <div class="deploy-board-instances-container">
+          <template v-for="instance in deployBoardData.instances">
+            <instance-component
+              :status="instance.status"
+              :tooltip-text="instance.tooltip"
+              :stable="instance.stable" />
+          </template>
+        </div>
+      </section>
+
+      <section
+        class="deploy-board-actions"
+        v-if="deployBoardData.rollback_url || deployBoardData.abort_url">
+        <a
+          class="btn"
+          data-method="post"
+          rel="nofollow"
+          v-if="deployBoardData.rollback_url"
+          :href="deployBoardData.rollback_url">
+          Rollback
+        </a>
+
+        <a
+          class="btn btn-red btn-inverted"
+          data-method="post"
+          rel="nofollow"
+          v-if="deployBoardData.abort_url"
+          :href="deployBoardData.abort_url">
+          Abort
+        </a>
+      </section>
     </div>
-  `,
-};
+
+    <div v-if="canRenderEmptyState">
+      <section
+        class="deploy-board-empty-state-svg"
+        v-html="deployBoardSvg">
+      </section>
+
+      <section class="deploy-board-empty-state-text">
+        <span class="title">Kubernetes deployment not found</span>
+        <span>
+          To see deployment progress for your environments, make sure your deployments are in Kubernetes namespace
+          <code>{{projectName}}</code> and labeled with <code>app=$CI_ENVIRONMENT_SLUG</code>.
+        </span>
+      </section>
+    </div>
+
+    <div
+      v-if="canRenderErrorState"
+      class="deploy-board-error-message">
+      We can't fetch the data right now. Please try again later.
+    </div>
+  </div>
+</script>

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

+<script>
 /**
  * An instance in deploy board is represented by a square in this mockup:
  * https://gitlab.com/gitlab-org/gitlab-ce/uploads/2f655655c0eadf655d0ae7467b53002a/environments__deploy-graphic.png
@@ -50,14 +51,14 @@ export default {
       return cssClassName;
     },
   },
-
-  template: `
-    <div
-      class="deploy-board-instance has-tooltip"
-      :class="cssClass"
-      :data-title="tooltipText"
-      data-toggle="tooltip"
-      data-placement="top">
-    </div>
-  `,
 };
+</script>
+<template>
+  <div
+    class="deploy-board-instance has-tooltip"
+    :class="cssClass"
+    :data-title="tooltipText"
+    data-toggle="tooltip"
+    data-placement="top">
+  </div>
+</template>

app/assets/javascripts/environments/components/environments_table.vue

@@ -3,7 +3,7 @@
  * Render environments table.
  */
 import EnvironmentTableRowComponent from './environment_item.vue';
-import DeployBoard from './deploy_board_component';
+import DeployBoard from './deploy_board_component.vue';
 
 export default {
   components: {

spec/javascripts/environments/deploy_board_component_spec.js

 import Vue from 'vue';
-import DeployBoard from '~/environments/components/deploy_board_component';
+import DeployBoard from '~/environments/components/deploy_board_component.vue';
 import Service from '~/environments/services/environments_service';
 
 const { deployBoardMockData, invalidDeployBoardMockData } = require('./mock_data');

spec/javascripts/environments/deploy_board_instance_component_spec.js

 import Vue from 'vue';
-import DeployBoardInstance from '~/environments/components/deploy_board_instance_component';
+import DeployBoardInstance from '~/environments/components/deploy_board_instance_component.vue';
 
 describe('Deploy Board Instance', () => {
   let DeployBoardInstanceComponent;