Update to vue 2

app/assets/javascripts/environments/components/environment.js.es6

@@ -45,6 +45,7 @@ $(() => {
         helpPagePath: environmentsListApp.dataset.helpPagePath,
         loading: true,
         visibility: 'available',
+        isLoading: this.loading,
       };
     },
 
@@ -79,7 +80,7 @@ $(() => {
      * Fetches all the environmnets and stores them.
      * Toggles loading property.
      */
-    ready() {
+    mounted() {
       window.gl.environmentsService.all().then(resp => resp.json()).then((json) => {
         this.store.storeEnvironments(json);
         this.loading = false;
@@ -120,17 +121,13 @@ $(() => {
             <li v-bind:class="{ 'active': scope === undefined}">
               <a :href="projectEnvironmentsPath">
                 Available
-                <span class="badge js-available-environments-count">
-                  {{state.availableCounter}}
-                </span>
+                <span class="badge js-available-environments-count" v-html="state.availableCounter"></span>
               </a>
             </li>
             <li v-bind:class="{ 'active': scope === 'stopped'}">
               <a :href="projectStoppedEnvironmentsPath">
                 Stopped
-                <span class="badge js-stopped-environments-count">
-                  {{state.stoppedCounter}}
-                </span>
+                <span class="badge js-stopped-environments-count" v-html="state.stoppedCounter"></span>
               </a>
             </li>
           </ul>
@@ -179,7 +176,7 @@ $(() => {
                   v-for="model in filteredEnvironments"
                   :model="model"
                   :can-create-deployment="canCreateDeploymentParsed"
-                  :can-read-environment="canReadEnvironmentParsed">
+                  :can-read-environment="canReadEnvironmentParsed"></tr>
               </tbody>
             </table>
           </div>

app/assets/javascripts/environments/components/environment_actions.js.es6

@@ -22,7 +22,7 @@
      * TODO: Remove this when webpack is merged.
      *
      */
-    ready() {
+    mounted() {
       const playIcon = document.querySelector('.play-icon-svg.hidden svg');
 
       const dropdownContainer = this.$el.querySelector('.dropdown-play-icon-container');
@@ -52,9 +52,7 @@
               <span class="action-play-icon-container">
                 <!-- svg goes here -->
               </span>
-                <span>
-                  {{action.name}}
-                </span>
+              <span v-html="action.name"></span>
               </a>
             </li>
           </ul>

app/assets/javascripts/environments/components/environment_item.js.es6

@@ -254,6 +254,20 @@
       isLastDeployment() {
         return this.model.last_deployment && this.model.last_deployment['last?'];
       },
+
+      buildName() {
+        if (this.model.last_deployment && this.model.last_deployment.deployable) {
+          return `${this.model.last_deployment.deployable.name} #${this.model.last_deployment.deployable.id}`;
+        }
+        return undefined;
+      },
+
+      deploymentInternalId() {
+        if (this.model.last_deployment) {
+          return `#${this.model.last_deployment.iid}`;
+        }
+        return '';
+      },
     },
 
     /**
@@ -282,8 +296,11 @@
     template: `
       <tr>
         <td v-bind:class="{ 'children-row': isChildren}" class="col-sm-2">
-          <a v-if="!isFolder" class="environment-name" :href="model.environment_url">
-            {{model.name}}
+          <a
+            v-if="!isFolder"
+            class="environment-name"
+            :href="model.environment_url"
+            v-html="model.name">
           </a>
           <span v-else v-on:click="toggle" class="folder-name">
             <span class="folder-icon">
@@ -291,17 +308,14 @@
               <i v-show="!open" class="fa fa-caret-right"></i>
             </span>
 
-            {{model.name}}
+            <span v-html="model.name"></span>
 
-            <span class="badge">
-              {{childrenCounter}}
-            </span>
+            <span class="badge" v-html="childrenCounter"></span>
           </span>
         </td>
 
         <td class="deployment-column col-sm-2">
-          <span v-if="!isFolder && model.last_deployment && model.last_deployment.iid">
-            #{{model.last_deployment.iid}}
+          <span v-if="!isFolder && model.last_deployment && model.last_deployment.iid" v-html="deploymentInternalId">
 
             <span v-if="model.last_deployment.user">
               by
@@ -318,8 +332,8 @@
         <td class="col-sm-2">
           <a v-if="!isFolder && model.last_deployment && model.last_deployment.deployable"
             class="build-link"
-            :href="model.last_deployment.deployable.build_url">
-            {{model.last_deployment.deployable.name}} #{{model.last_deployment.deployable.id}}
+            :href="model.last_deployment.deployable.build_url"
+            v-html="buildName">
           </a>
         </td>
 
@@ -340,8 +354,10 @@
         </td>
 
         <td class="col-sm-1">
-          <span v-if="!isFolder && model.last_deployment" class="environment-created-date-timeago">
-            {{createdDate}}
+          <span
+            v-if="!isFolder && model.last_deployment"
+            class="environment-created-date-timeago"
+            v-html="createdDate">
           </span>
         </td>
 

app/assets/javascripts/environments/vue_resource_interceptor.js.es6

@@ -3,11 +3,10 @@ Vue.http.interceptors.push((request, next) => {
   Vue.activeResources = Vue.activeResources ? Vue.activeResources + 1 : 1;
 
   next(function (response) {
-    console.log("this is the repsponse", JSON.stringify(response, null, '  '));
     if (typeof response.data === "string") {
       response.data = JSON.parse(response.data)
     }
-    
+
     Vue.activeResources--;
   });
 });

app/assets/javascripts/vue_common_component/commit.js.es6

@@ -119,7 +119,7 @@
      *
      * TODO: Find a better way to include SVG
      */
-    ready() {
+    mounted() {
       const commitIconContainer = this.$el.querySelector('.commit-icon-container');
       const commitIcon = document.querySelector('.commit-icon-svg.hidden svg');
 
@@ -136,22 +136,27 @@
           <i v-else class="fa fa-code-fork"></i>
         </div>
 
-        <a v-if="hasRef" class="monospace branch-name" :href="ref.ref_url">
-          {{ref.name}}
+        <a v-if="hasRef"
+          class="monospace branch-name"
+          :href="ref.ref_url"
+          v-html="ref.name">
         </a>
 
         <div class="icon-container commit-icon commit-icon-container">
           <!-- svg goes here -->
         </div>
 
-        <a class="commit-id monospace" :href="commit_url">
-          {{short_sha}}
+        <a class="commit-id monospace"
+          :href="commit_url"
+          v-html="short_sha">
         </a>
 
         <p class="commit-title">
           <span v-if="title">
             <!-- commit author info-->
-            <a v-if="hasAuthor" class="avatar-image-container" :href="author.web_url">
+            <a v-if="hasAuthor"
+              class="avatar-image-container"
+              :href="author.web_url">
               <img
               class="avatar has-tooltip s20"
                 :src="author.avatar_url"
@@ -159,8 +164,8 @@
                 :title="author.username" />
             </a>
 
-            <a class="commit-row-message" :href="commit_url">
-              {{title}}
+            <a class="commit-row-message"
+              :href="commit_url" v-html="title">
             </a>
           </span>
           <span v-else>