Add template to environment vue instance

3 files changed, 122 insertions, 85 deletions

diff --git a/app/assets/javascripts/environments/components/environment_item.js.es6 b/app/assets/javascripts/environments/components/environment_item.js.es6
index 07ed282a16d..1451c1f2a56 100644
--- a/app/assets/javascripts/environments/components/environment_item.js.es6
+++ b/app/assets/javascripts/environments/components/environment_item.js.es6
@@ -265,16 +265,6 @@
       isLastDeployment() {
         return this.model.last_deployment && this.model.last_deployment['last?'];
       },
-
-      canReadEnvironmentParsed() {
-        return true;
-        return this.$options.convertPermissionToBoolean(this.canReadEnvironment);
-      },
-
-      canCreateDeploymentParsed() {
-        return true;
-        return this.$options.convertPermissionToBoolean(this.canCreateDeployment);
-      },
     },
 
     /**
@@ -289,19 +279,6 @@
       return {}.hasOwnProperty.call(obj, key);
     },
 
-    /**
-     * Converts permission provided as strings to booleans.
-     * @param  {String} string
-     * @returns {Boolean}
-     */
-    convertPermissionToBoolean(string) {
-      if (string === 'true') {
-        return true;
-      }
-
-      return false;
-    },
-
     methods: {
       /**
        * Toggles the visibility of a folders' children.
@@ -381,25 +358,25 @@
 
         <td class="hidden-xs col-sm-3">
           <div v-if="!isFolder">
-            <div v-if="hasManualActions && canCreateDeploymentParsed" class="inline">
+            <div v-if="hasManualActions && canCreateDeployment" class="inline">
               <actions-component 
                 :actions="manualActions">
               </actions-component>
             </div>
 
-            <div v-if="model.external_url && canReadEnvironmentParsed" class="inline">
+            <div v-if="model.external_url && canReadEnvironment" class="inline">
               <external-url-component 
                 :external_url="model.external_url">
               </external_url-component>
             </div>
 
-            <div v-if="isStoppable && canCreateDeploymentParsed" class="inline">
+            <div v-if="isStoppable && canCreateDeployment" class="inline">
               <stop-component 
                 :stop_url="model.environment_url">
               </stop-component>
             </div>
 
-            <div v-if="canRetry && canCreateDeploymentParsed" class="inline">
+            <div v-if="canRetry && canCreateDeployment" class="inline">
               <rollback-component 
                 :is_last_deployment="isLastDeployment"
                 :retry_url="retryUrl">
diff --git a/app/assets/javascripts/environments/environments_bundle.js.es6 b/app/assets/javascripts/environments/environments_bundle.js.es6
index 9766bd1da27..7dff4d3ac2a 100644
--- a/app/assets/javascripts/environments/environments_bundle.js.es6
+++ b/app/assets/javascripts/environments/environments_bundle.js.es6
@@ -3,7 +3,7 @@
 //= require_tree ./stores
 //= require_tree ./services
 //= require ./components/environment_item
-//= require ../boards/vue_resource_interceptor
+//= require ./vue_resource_interceptor
 /* globals Vue, EnvironmentsService */
 /* eslint-disable no-param-reassign */
 
@@ -44,6 +44,11 @@ $(() => {
       endpoint: environmentsListApp.dataset.environmentsDataEndpoint,
       canCreateDeployment: environmentsListApp.dataset.canCreateDeployment,
       canReadEnvironment: environmentsListApp.dataset.canReadEnvironment,
+      canCreateEnvironment: environmentsListApp.dataset.canCreateEnvironment,
+      projectEnvironmentsPath: environmentsListApp.dataset.projectEnvironmentsPath,
+      projectClosedEnvironmentsPath: environmentsListApp.dataset.projectClosedEnvironmentsPath,
+      newEnvironmentPath: environmentsListApp.dataset.newEnvironmentPath,
+      helpPagePath: environmentsListApp.dataset.helpPagePath,
       loading: true,
       visibility: 'available',
     },
@@ -52,6 +57,18 @@ $(() => {
       filteredEnvironments() {
         return recursiveMap(filterState(this.visibility), this.state.environments);
       },
+
+      scope() {
+        return this.$options.getQueryParameter('scope');
+      },
+
+      canReadEnvironmentParsed() {
+        return this.$options.convertPermissionToBoolean(this.canReadEnvironment);
+      },
+
+      canCreateDeploymentParsed() {
+        return this.$options.convertPermissionToBoolean(this.canCreateDeployment);
+      },
     },
 
     init: Store.create.bind(Store),
@@ -90,5 +107,92 @@ $(() => {
         return acc;
       }, {})[parameter];
     },
+
+    /**
+     * Converts permission provided as strings to booleans.
+     * @param  {String} string
+     * @returns {Boolean}
+     */
+    convertPermissionToBoolean(string) {
+      if (string === 'true') {
+        return true;
+      }
+
+      return false;
+    },
+
+    template: `
+      <div>
+        <div class="top-area">
+          <ul v-if="!isLoading" class="nav-links">
+            <li v-bind:class="{ 'active': scope === undefined}">
+              <a :href="projectEnvironmentsPath">
+                Available
+                <span class="badge js-available-environments-count">
+                  {{state.availableCounter}}
+                </span>
+              </a>
+            </li>
+            <li v-bind:class="{ 'active': scope === 'stopped'}">
+              <a :href="projectClosedEnvironmentsPath">
+                Stopped
+                <span class="badge js-stopped-environments-count">
+                  {{state.stoppedCounter}}
+                </span>
+              </a>
+            </li>
+          </ul>
+          <div v-if="canCreateEnvironment && !loading" class="nav-controls">
+            <a :href="newEnvironmentPath" class="btn btn-create">
+              New envrionment
+            </a>
+          </div>
+        </div>
+        
+        <div class="environments-container">
+          <div class="environments-list-loading text-center" v-if="loading">
+            <i class="fa fa-spinner spin"></i>
+          </div>
+        
+          <div class="blank-state blank-state-no-icon" v-if="!loading && state.environments.length === 0">
+            <h2 class="blank-state-title">
+              You don't have any environments right now.
+            </h2>
+            <p class="blank-state-text">
+              Environments are places where code gets deployed, such as staging or production.
+              
+              <br />
+              
+              <a :href="helpPagePath">
+                Read more about environments
+              </a>
+              <a v-if="canCreateEnvironment" :href="newEnvironmentPath" class="btn btn-create">
+                New Environment
+              </a>
+            </p>
+          </div>
+          
+          <div class="table-holder" v-if="!loading && state.environments.length > 0">
+            <table class="table ci-table environments">
+              <thead>
+                <th>Environment</th>
+                <th>Last deployment</th>
+                <th>Build</th>
+                <th>Commit</th>
+                <th></th>
+                <th class="hidden-xs"></th>
+              </thead>
+              <tbody>
+                <tr is="environment-item"
+                  v-for="model in filteredEnvironments"
+                  :model="model"
+                  :can-create-deployment="canCreateDeploymentParsed"
+                  :can-read-environment="canReadEnvironmentParsed">
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>  
+    `,
   });
 });
diff --git a/app/views/projects/environments/index.html.haml b/app/views/projects/environments/index.html.haml
index 391dc8cdce2..be4fc4dcb1b 100644
--- a/app/views/projects/environments/index.html.haml
+++ b/app/views/projects/environments/index.html.haml
@@ -5,60 +5,16 @@
 - content_for :page_specific_javascripts do
   = page_specific_javascript_tag("environments/environments_bundle.js")
   
-#environments-list-view{ data: { environments_data: environments_list_data, "can-create-deployment" => can?(current_user, :create_deployment, @environment), "can-read-environment" => can?(current_user, :read_environment, @project)}, class: container_class }
-  .top-area
-    %ul.nav-links{ "v-if" => "!loading" }
-      %li{class: ('active' if @scope.nil?)}
-        = link_to project_environments_path(@project) do
-          Available
-          %span.badge.js-available-environments-count
-            {{state.availableCounter}}
-
-      %li{class: ('active' if @scope == 'stopped')}
-        = link_to project_environments_path(@project, scope: :stopped) do
-          Stopped
-          %span.badge.js-stopped-environments-count
-            {{state.stoppedCounter}}
-
-    - if can?(current_user, :create_environment, @project)
-      .nav-controls{ "v-if" => "!loading" }
-        = link_to new_namespace_project_environment_path(@project.namespace, @project), class: "btn btn-create" do
-          New environment
-
-  .environments-container
-    .environments-list-loading.text-center{ "v-if" => "loading" }
-      = icon("spinner spin")
-
-    .blank-state.blank-state-no-icon{ "v-if" => "!loading && !state.environments.length" }
-      %h2.blank-state-title
-        You don't have any environments right now.
-      %p.blank-state-text
-        Environments are places where code gets deployed, such as staging or production.
-        %br
-        = succeed "." do
-          = link_to "Read more about environments", help_page_path("ci/environments")
-      - if can?(current_user, :create_environment, @project)
-        = link_to new_namespace_project_environment_path(@project.namespace, @project), class: 'btn btn-create' do
-          New environment
-
-    .commit-icon-svg.hidden
-      = custom_icon("icon_commit")
-    .play-icon-svg.hidden
-      = custom_icon("icon_play")
-
-    .table-holder{ "v-if" => "!loading && state.environments.length" }
-      %table.table.ci-table.environments
-        %thead
-          %th Environment
-          %th Last Deployment
-          %th Build
-          %th Commit
-          %th
-          %th.hidden-xs
-        %tbody
-          %tr{"is" => "environment-item",
-            "v-for" => "model in filteredEnvironments",
-            ":model" => "model",
-            "can-create-deployment" => can?(current_user, :create_deployment, @environment),
-            "can-read-environment" => can?(current_user, :read_environment, @project)}
-
+.commit-icon-svg.hidden
+  = custom_icon("icon_commit")
+.play-icon-svg.hidden
+  = custom_icon("icon_play")
+
+#environments-list-view{ data: { environments_data: environments_list_data, 
+  "can-create-deployment" => can?(current_user, :create_deployment, @environment), 
+  "can-read-environment" => can?(current_user, :read_environment, @project),
+  "can-create-environmnet" => can?(current_user, :create_environment, @project),
+  "project-environments-path" => project_environments_path(@project),
+  "project-closed-environments-path" => project_environments_path(@project, scope: :stopped),
+  "new-environment-path" => new_namespace_project_environment_path(@project.namespace, @project),
+  "help-page-path" => help_page_path("ci/environments")}, class: container_class }