Adds template functions

Adds commit component

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

+/*= require vue_common_component/commit
 /* globals Vue */
+
 (() => {
   /**
    * Envrionment Item Component
@@ -16,7 +18,9 @@
 
   gl.environmentsList.EnvironmentItem = Vue.component('environment-item', {
 
-    template: '#environment-item-template',
+    components: {
+      'commit-component': window.gl.commitComponent,
+    },
 
     props: {
       model: Object,
@@ -25,6 +29,9 @@
     data() {
       return {
         open: false,
+        rowClass: {
+          'children-row': this.model['vue-isChildren'],
+        },
       };
     },
 
@@ -38,7 +45,8 @@
        * @returns {Boolean}
        */
       isFolder() {
-        return this.$options.hasKey(this.model, 'children') && this.model.children.length > 0;
+        return this.$options.hasKey(this.model, 'children') &&
+          this.model.children.length > 0;
       },
 
       /**
@@ -58,7 +66,8 @@
        * @returns {Boolean}  The number of environments for the current folder
        */
       childrenCounter() {
-        return this.$options.hasKey(this.model, 'children') && this.model.children.length;
+        return this.$options.hasKey(this.model, 'children') &&
+          this.model.children.length;
       },
 
       /**
@@ -68,7 +77,8 @@
        * @returns {Boolean}
        */
       isLast() {
-        return this.$options.hasKey(this.model, 'last_deployment') && this.model.last_deployment['last?'];
+        return this.$options.hasKey(this.model, 'last_deployment') &&
+          this.model.last_deployment['last?'];
       },
 
       /**
@@ -89,7 +99,8 @@
        * @returns {Boolean}
        */
       hasManualActions() {
-        return this.$options.hasKey(this.model, 'manual_actions') && this.model.manual_actions.length;
+        return this.$options.hasKey(this.model, 'manual_actions') &&
+          this.model.manual_actions.length;
       },
 
       /**
@@ -108,7 +119,9 @@
        * @returns {Boolean}
        */
       canRetry() {
-        return this.hasLastDeploymentKey && this.model.last_deployment && this.$options.hasKey(this.model.last_deployment, 'deployable');
+        return this.hasLastDeploymentKey &&
+          this.model.last_deployment &&
+          this.$options.hasKey(this.model.last_deployment, 'deployable');
       },
 
       /**
@@ -134,6 +147,85 @@
           return parsedAction;
         });
       },
+
+      userImageAltDescription() {
+        return `${this.model.last_deployment.user.username}'s avatar'`;
+      },
+      
+      
+      /**
+       * If provided, returns the commit tag.
+       *
+       * @returns {String|Undefined}
+       */
+      commitTag() {
+        if (this.model.last_deployment && this.model.last_deployment.tag) {
+          return this.model.last_deployment.tag;
+        }
+      },
+
+      /**
+       * If provided, returns the commit ref.
+       *
+       * @returns {Object|Undefined}
+       */
+      commitRef() {
+        if (this.model.last_deployment && this.model.last_deployment.ref) {
+          return this.model.last_deployment.ref
+        }
+      },
+      
+      /**
+       * If provided, returns the commit url.
+       *
+       * @returns {String|Undefined}
+       */
+      commitUrl() {
+        if (this.model.last_deployment &&
+          this.model.last_deployment.commit &&
+          this.model.last_deployment.commit.commit_url) {
+          return this.model.last_deployment.commit.commit_url;
+        }
+      },
+
+      /**
+       * If provided, returns the commit short sha.
+       *
+       * @returns {String|Undefined}
+       */
+      commitShortSha() {
+        if (this.model.last_deployment &&
+          this.model.last_deployment.commit &&
+          this.model.last_deployment.commit.short_id) {
+          return this.model.last_deployment.commit.short_id
+        }
+      },
+
+      /**
+       * If provided, returns the commit title.
+       *
+       * @returns {String|Undefined}
+       */
+      commitTitle(){
+        if (this.model.last_deployment &&
+          this.model.last_deployment.commit &&
+          this.model.last_deployment.commit.title) {
+          return this.model.last_deployment.commit.title
+        }
+      },
+
+      /**
+       * If provided, returns the commit tag.
+       *
+       * @returns {Object|Undefined}
+       */
+      commitAuthor(){
+        if (this.model.last_deployment &&
+          this.model.last_deployment.commit &&
+          this.model.last_deployment.commit.author) {
+          return this.model.last_deployment.commit.author;
+        }
+      },
     },
 
     /**
@@ -149,7 +241,6 @@
     },
 
     methods: {
-
       /**
        * Toggles the visibility of a folders' children.
        */
@@ -159,5 +250,85 @@
         }
       },
     },
+
+    template: `
+      <tr>
+        <td v-bind:class="rowClass">
+          <a v-if="!isFolder" class="environment-name" :href="model.environment_url">
+            {{model.name}}
+          </a>
+          <span v-else v-on:click="toggle" class="folder-name">
+            <span class="folder-icon">
+              <i v-show="open" class="fa fa-caret-down"></i>
+              <i v-show="!open" class="fa fa-caret-right"></i>
+            </span>
+
+            {{model.name}}
+
+            <span class="badge">
+              {{childrenCounter}}
+            </span>
+          </span>
+        </td>
+
+        <td class="deployment-column">
+          <span v-if="!isFolder && model.last_deployment && model.last_deployment.iid">
+            #{{model.last_deployment.iid}}
+
+            <span v-if="model.last_deployment.user">
+              by
+              <a :href="model.last_deployment.user.web_url">
+                <img class="avatar has-tooltip s20"
+                  :src="model.last_deployment.user.avatar_url"
+                  :alt="userImageAltDescription"
+                  :title="model.last_deployment.user.username" />
+              </a>
+            </span>
+          </span>
+        </td>
+
+        <td>
+          <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}}
+          </a>
+        </td>
+
+        <td>
+          <div v-if="!isFolder && model.last_deployment">
+            <commit-component
+              :tag="commitTag"
+              :ref="commitRef"
+              :commit_url="commitUrl"
+              :short_sha="commitShortSha"
+              :title="commitTitle"
+              :author="commitAuthor">
+            </commit-component>
+          </div>
+          <p v-if="!isFolder && !model.last_deployment" class="commit-title">
+            No deployments yet
+          </p>
+        </td>
+
+        <td>
+          <span v-if="!isFolder && model.last_deployment" class="environment-created-date-timeago">
+            {{createdDate}}
+          </span>
+        </td>
+
+        <td class="hidden-xs">
+          <div v-if="!isFolder">
+
+          </div>
+        </td>
+      </tr>
+
+      <tr v-if="open && isFolder"
+        is="environment-item"
+        v-for="model in model.children"
+        :model="model">
+      </tr>
+    `,
   });
 })();

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

@@ -68,8 +68,8 @@ $(() => {
      * Toggles loading property.
      */
     ready() {
-      gl.environmentsService.all().then((resp) => {
-        Store.storeEnvironments(resp.json());
+      gl.environmentsService.all().then(resp => resp.json()).then((json) => {
+        Store.storeEnvironments(json);
         this.loading = false;
       });
     },

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

+/*= require vue
+/* global Vue */
+(() => {
+  window.gl = window.gl || {};
+
+  window.gl.commitComponent = Vue.component('commit-component', {
+
+    props: {
+      /**
+       * Indicates the existance of a tag.
+       * Used to render the correct icon, if true will render `fa-tag` icon,
+       * if false will render `fa-code-fork` icon.
+       */
+      tag: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+
+      /**
+       * If provided is used to render the branch name and url.
+       * Should contain the following properties:
+       * name
+       * ref_url
+       */
+      ref: {
+        type: Object,
+        required: false,
+        default: () => {},
+      },
+
+      /**
+       * Used to link to the commit sha.
+       */
+      commit_url: {
+        type: String,
+        required: false,
+        default: '',
+      },
+
+      /**
+       * Used to show the commit short_sha that links to the commit url.
+       */
+      short_sha: {
+        type: String,
+        required: false,
+        default: '',
+      },
+
+      /**
+       * If provided shows the commit tile.
+       */
+      title: {
+        type: String,
+        required: false,
+        default: '',
+      },
+
+      /**
+       * If provided renders information about the author of the commit.
+       * When provided should include:
+       * `avatar_url` to render the avatar icon
+       * `web_url` to link to user profile
+       * `username` to render alt and title tags
+       */
+      author: {
+        type: Object,
+        required: false,
+        default: () => {},
+      },
+    },
+
+    computed: {
+      /**
+       * Used to verify if all the properties needed to render the commit
+       * ref section were provided.
+       *
+       * TODO: Improve this! Use lodash _.has when we have it.
+       *
+       * @returns {Boolean}
+       */
+      hasRef() {
+        return this.ref && this.ref.name && this.ref.ref_url;
+      },
+
+      /**
+       * Used to verify if all the properties needed to render the commit
+       * author section were provided.
+       *
+       * TODO: Improve this! Use lodash _.has when we have it.
+       *
+       * @returns {Boolean}
+       */
+      hasAuthor() {
+        return this.author &&
+          this.author.avatar_url &&
+          this.author.web_url &&
+          this.author.username;
+      },
+
+      /**
+       * If information about the author is provided will return a string
+       * to be rendered as the alt attribute of the img tag.
+       *
+       * @returns {String}
+       */
+      userImageAltDescription() {
+        return this.author &&
+          this.author.username ? `${this.author.username}'s avatar` : null;
+      },
+    },
+
+    /**
+     * In order to reuse the svg instead of copy and paste in this template the html_safe
+     * we need to render it outside this component using =custom_icon partial.
+     * Make sure it has this structure:
+     * .commit-icon-svg.hidden
+     *   svg
+     *
+     * TODO: Find a better way to include SVG
+     */
+    ready() {
+      const commitIconContainer = document.querySelector('.branch-commit .commit-icon-container');
+      const commitIcon = document.querySelector('.commit-icon-svg.hidden svg');
+
+      if (commitIconContainer && commitIcon) {
+        commitIconContainer.appendChild(commitIcon);
+      }
+    },
+
+    template: `
+      <div class="branch-commit">
+
+        <div v-if="hasRef" class="icon-container">
+          <i v-if="tag" class="fa fa-tag"></i>
+          <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>
+
+        <div class="icon-container commit-icon commit-icon-container">
+          <!-- svg goes here -->
+        </div>
+
+        <a class="commit-id monospace" :href="commit_url">
+          {{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">
+              <img
+              class="avatar has-tooltip s20"
+                :src="author.avatar_url"
+                :alt="userImageAltDescription"
+                :title="author.username" />
+            </a>
+
+            <a class="commit-row-message" :href="commit_url">
+              {{title}}
+            </a>
+          </span>
+          <span v-else>
+            Cant find HEAD commit for this branch
+          </span>
+        </p>
+      </div>
+    `,
+  });
+})();

app/views/projects/environments/index.html.haml

@@ -40,7 +40,10 @@
       - 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")
+
     .table-holder{ "v-if" => "!loading && state.environments.length" }
       %table.table.ci-table.environments
         %thead
@@ -53,4 +56,3 @@
         %tbody
           %tr{"is" => "environment-item", "v-for" => "model in filteredEnvironments", ":model" => "model"}
 
-=render "projects/environments/components/environment"

spec/javascripts/environments/environments_store_spec.js.es6

@@ -47,7 +47,7 @@
         expect(environments[1].name).toBe('review');
         expect(environments[1].children[0].name).toBe('test-environment');
         expect(environments[1].children[1].name).toBe('test-environment-1');
-        expect(environments[2].name).toBe('review_app')
+        expect(environments[2].name).toBe('review_app');
       });
     });
   });