1 files changed, 43 insertions, 7 deletions

diff --git a/app/assets/javascripts/environments/components/environment_item.js b/app/assets/javascripts/environments/components/environment_item.js
index 66ed10e19d1..d9b49287dec 100644
--- a/app/assets/javascripts/environments/components/environment_item.js
+++ b/app/assets/javascripts/environments/components/environment_item.js
@@ -5,7 +5,9 @@ import ExternalUrlComponent from './environment_external_url';
 import StopComponent from './environment_stop';
 import RollbackComponent from './environment_rollback';
 import TerminalButtonComponent from './environment_terminal_button';
+import MonitoringButtonComponent from './environment_monitoring';
 import CommitComponent from '../../vue_shared/components/commit';
+import eventHub from '../event_hub';
 
 /**
  * Envrionment Item Component
@@ -22,6 +24,7 @@ export default {
     'stop-component': StopComponent,
     'rollback-component': RollbackComponent,
     'terminal-button-component': TerminalButtonComponent,
+    'monitoring-button-component': MonitoringButtonComponent,
   },
 
   props: {
@@ -139,6 +142,7 @@ export default {
           const parsedAction = {
             name: gl.text.humanize(action.name),
             play_path: action.play_path,
+            playable: action.playable,
           };
           return parsedAction;
         });
@@ -392,6 +396,14 @@ export default {
       return '';
     },
 
+    monitoringUrl() {
+      if (this.model && this.model.metrics_path) {
+        return this.model.metrics_path;
+      }
+
+      return '';
+    },
+
     /**
      * Constructs folder URL based on the current location and the folder id.
      *
@@ -400,7 +412,6 @@ export default {
     folderUrl() {
       return `${window.location.pathname}/folders/${this.model.folderName}`;
     },
-
   },
 
   /**
@@ -418,15 +429,37 @@ export default {
     return true;
   },
 
+  methods: {
+    onClickFolder() {
+      eventHub.$emit('toggleFolder', this.model, this.folderUrl);
+    },
+  },
+
   template: `
-    <tr>
+    <tr :class="{ 'js-child-row': model.isChildren }">
       <td>
         <a v-if="!model.isFolder"
           class="environment-name"
+          :class="{ 'prepend-left-default': model.isChildren }"
           :href="environmentPath">
           {{model.name}}
         </a>
-        <a v-else class="folder-name" :href="folderUrl">
+        <span v-else
+          class="folder-name"
+          @click="onClickFolder"
+          role="button">
+
+          <span class="folder-icon">
+            <i
+              v-show="model.isOpen"
+              class="fa fa-caret-down"
+              aria-hidden="true" />
+            <i
+              v-show="!model.isOpen"
+              class="fa fa-caret-right"
+              aria-hidden="true"/>
+          </span>
+
           <span class="folder-icon">
             <i class="fa fa-folder" aria-hidden="true"></i>
           </span>
@@ -438,7 +471,7 @@ export default {
           <span class="badge">
             {{model.size}}
           </span>
-        </a>
+        </span>
       </td>
 
       <td class="deployment-column">
@@ -496,13 +529,16 @@ export default {
           <external-url-component v-if="externalURL && canReadEnvironment"
             :external-url="externalURL"/>
 
-          <stop-component v-if="hasStopAction && canCreateDeployment"
-            :stop-url="model.stop_path"
-            :service="service"/>
+          <monitoring-button-component v-if="monitoringUrl && canReadEnvironment"
+            :monitoring-url="monitoringUrl"/>
 
           <terminal-button-component v-if="model && model.terminal_path"
             :terminal-path="model.terminal_path"/>
 
+          <stop-component v-if="hasStopAction && canCreateDeployment"
+            :stop-url="model.stop_path"
+            :service="service"/>
+
           <rollback-component v-if="canRetry && canCreateDeployment"
             :is-last-deployment="isLastDeployment"
             :retry-url="retryUrl"