Fix broken path

1 files changed, 83 insertions, 25 deletions

diff --git a/app/assets/javascripts/environments/components/environment_item.js.es6 b/app/assets/javascripts/environments/components/environment_item.js.es6
index 399473bec65..391539232b1 100644
--- a/app/assets/javascripts/environments/components/environment_item.js.es6
+++ b/app/assets/javascripts/environments/components/environment_item.js.es6
@@ -1,5 +1,5 @@
 const Vue = require('vue');
-const Timeago = require('timeago.j');
+const Timeago = require('timeago.js');
 
 require('../../lib/utils/text_utility');
 require('../../vue_shared/components/commit');
@@ -72,7 +72,7 @@ module.exports = Vue.component('environment-item', {
      * @returns {Boolean}
      */
     hasLastDeploymentKey() {
-      if (this.model.latest.last_deployment &&
+      if (this.model.lastest && this.model.latest.last_deployment &&
         !this.$options.isObjectEmpty(this.model.latest.last_deployment)) {
         return true;
       }
@@ -86,7 +86,7 @@ module.exports = Vue.component('environment-item', {
      * @returns {Boolean|Undefined}
      */
     hasManualActions() {
-      return this.model.latest.last_deployment &&
+      return this.model.lastest && this.model.latest.last_deployment &&
         this.model.latest.last_deployment.manual_actions &&
         this.model.latest.last_deployment.manual_actions.length > 0;
     },
@@ -107,7 +107,8 @@ module.exports = Vue.component('environment-item', {
      * @returns {Boolean|Undefined}
      */
     canRetry() {
-      return this.hasLastDeploymentKey &&
+      return this.model.lastest &&
+        this.hasLastDeploymentKey &&
         this.model.latest.last_deployment &&
         this.model.latest.last_deployment.deployable;
     },
@@ -118,7 +119,8 @@ module.exports = Vue.component('environment-item', {
      * @returns {Boolean|Undefined}
      */
     canShowDate() {
-      return this.model.latest.last_deployment &&
+      return this.model.lastest &&
+        this.model.latest.last_deployment &&
         this.model.latest.last_deployment.deployable &&
         this.model.latest.last_deployment.deployable !== undefined;
     },
@@ -129,7 +131,13 @@ module.exports = Vue.component('environment-item', {
      * @returns {String}
      */
     createdDate() {
-      return timeagoInstance.format(this.model.latest.last_deployment.deployable.created_at);
+      if (this.model.lastest &&
+        this.model.latest.last_deployment &&
+        this.model.lastest.last_deployment.deployable &&
+        this.model.latest.last_deployment.deployable.created_at) {
+        return timeagoInstance.format(this.model.latest.last_deployment.deployable.created_at);
+      }
+      return '';
     },
 
     /**
@@ -156,7 +164,8 @@ module.exports = Vue.component('environment-item', {
      * @returns {String}
      */
     userImageAltDescription() {
-      if (this.model.latest.last_deployment &&
+      if (this.model.latest &&
+        this.model.latest.last_deployment &&
         this.model.latest.last_deployment.user &&
         this.model.latest.last_deployment.user.username) {
         return `${this.model.latest.last_deployment.user.username}'s avatar'`;
@@ -170,7 +179,8 @@ module.exports = Vue.component('environment-item', {
      * @returns {String|Undefined}
      */
     commitTag() {
-      if (this.model.latest.last_deployment &&
+      if (this.model.latest &&
+        this.model.latest.last_deployment &&
         this.model.latest.last_deployment.tag) {
         return this.model.latest.last_deployment.tag;
       }
@@ -183,7 +193,8 @@ module.exports = Vue.component('environment-item', {
      * @returns {Object|Undefined}
      */
     commitRef() {
-      if (this.model.latest.last_deployment &&
+      if (this.model.latest &&
+        this.model.latest.last_deployment &&
         this.model.latest.last_deployment.ref) {
         return this.model.latest.last_deployment.ref;
       }
@@ -196,7 +207,8 @@ module.exports = Vue.component('environment-item', {
      * @returns {String|Undefined}
      */
     commitUrl() {
-      if (this.model.latest.last_deployment &&
+      if (this.model.latest &&
+        this.model.latest.last_deployment &&
         this.model.latest.last_deployment.commit &&
         this.model.latest.last_deployment.commit.commit_path) {
         return this.model.latest.last_deployment.commit.commit_path;
@@ -210,7 +222,8 @@ module.exports = Vue.component('environment-item', {
      * @returns {String|Undefined}
      */
     commitShortSha() {
-      if (this.model.latest.last_deployment &&
+      if (this.model.latest &&
+        this.model.latest.last_deployment &&
         this.model.latest.last_deployment.commit &&
         this.model.latest.last_deployment.commit.short_id) {
         return this.model.latest.last_deployment.commit.short_id;
@@ -224,7 +237,8 @@ module.exports = Vue.component('environment-item', {
      * @returns {String|Undefined}
      */
     commitTitle() {
-      if (this.model.latest.last_deployment &&
+      if (this.model.latest &&
+        this.model.latest.last_deployment &&
         this.model.latest.last_deployment.commit &&
         this.model.latest.last_deployment.commit.title) {
         return this.model.latest.last_deployment.commit.title;
@@ -238,7 +252,8 @@ module.exports = Vue.component('environment-item', {
      * @returns {Object|Undefined}
      */
     commitAuthor() {
-      if (this.model.latest.last_deployment &&
+      if (this.model.latest &&
+        this.model.latest.last_deployment &&
         this.model.latest.last_deployment.commit &&
         this.model.latest.last_deployment.commit.author) {
         return this.model.latest.last_deployment.commit.author;
@@ -253,7 +268,8 @@ module.exports = Vue.component('environment-item', {
      * @returns {String|Undefined}
      */
     retryUrl() {
-      if (this.model.latest.last_deployment &&
+      if (this.model.latest &&
+        this.model.latest.last_deployment &&
         this.model.latest.last_deployment.deployable &&
         this.model.latest.last_deployment.deployable.retry_path) {
         return this.model.latest.last_deployment.deployable.retry_path;
@@ -267,7 +283,7 @@ module.exports = Vue.component('environment-item', {
      * @returns {Boolean|Undefined}
      */
     isLastDeployment() {
-      return this.model.latest.last_deployment &&
+      return this.model.latest && this.model.latest.last_deployment &&
         this.model.latest.last_deployment['last?'];
     },
 
@@ -277,7 +293,8 @@ module.exports = Vue.component('environment-item', {
      * @returns {String}
      */
     buildName() {
-      if (this.model.latest.last_deployment &&
+      if (this.model.latest &&
+        this.model.latest.last_deployment &&
         this.model.latest.last_deployment.deployable) {
         return `${this.model.latest.last_deployment.deployable.name} #${this.model.latest.last_deployment.deployable.id}`;
       }
@@ -290,7 +307,8 @@ module.exports = Vue.component('environment-item', {
      * @returns {String}
      */
     deploymentInternalId() {
-      if (this.model.latest.last_deployment &&
+      if (this.model.latest &&
+        this.model.latest.last_deployment &&
         this.model.latest.last_deployment.iid) {
         return `#${this.model.latest.last_deployment.iid}`;
       }
@@ -303,7 +321,8 @@ module.exports = Vue.component('environment-item', {
      * @returns {Boolean}
      */
     deploymentHasUser() {
-      return !this.$options.isObjectEmpty(this.model.latest.last_deployment) &&
+      return this.model.latest &&
+        !this.$options.isObjectEmpty(this.model.latest.last_deployment) &&
         !this.$options.isObjectEmpty(this.model.latest.last_deployment.user);
     },
 
@@ -314,7 +333,8 @@ module.exports = Vue.component('environment-item', {
      * @returns {Object}
      */
     deploymentUser() {
-      if (!this.$options.isObjectEmpty(this.model.latest.last_deployment) &&
+      if (this.model.latest &&
+        !this.$options.isObjectEmpty(this.model.latest.last_deployment) &&
         !this.$options.isObjectEmpty(this.model.latest.last_deployment.user)) {
         return this.model.latest.last_deployment.user;
       }
@@ -330,11 +350,40 @@ module.exports = Vue.component('environment-item', {
      */
     shouldRenderBuildName() {
       return !this.model.isFolder &&
+        this.model.lastest &&
         !this.$options.isObjectEmpty(this.model.latest.last_deployment) &&
         !this.$options.isObjectEmpty(this.model.latest.last_deployment.deployable);
     },
 
     /**
+     * Verifies the presence of all the keys needed to render the buil_path.
+     *
+     * @return {String}
+     */
+    buildPath() {
+      if (this.model.latest &&
+        this.model.lastest.last_deployment &&
+        this.model.latest.last_deployment.deployable &&
+        this.model.lastest.last_deployment.deployable.build_path) {
+        return this.model.lastest.last_deployment.deployable.build_path;
+      }
+
+      return '';
+    },
+    /**
+     * Verifies the presence of all the keys needed to render the external_url.
+     *
+     * @return {String}
+     */
+    externalURL() {
+      if (this.model.latest && this.model.latest.external_url) {
+        return this.model.latest.external_url;
+      }
+
+      return '';
+    },
+
+    /**
      * Verifies if deplyment internal ID should be rendered by verifing
      * if all the information needed is present
      * and if the environment is not a folder.
@@ -343,9 +392,18 @@ module.exports = Vue.component('environment-item', {
      */
     shouldRenderDeploymentID() {
       return !this.model.isFolder &&
+        this.model.lastest &&
         !this.$options.isObjectEmpty(this.model.latest.last_deployment) &&
         this.model.latest.last_deployment.iid !== undefined;
     },
+
+    environmentPath() {
+      if (this.model && this.model.lastest && this.model.latest.environment_path) {
+        return this.model.latest.environment_path;
+      }
+
+      return '';
+    },
   },
 
   /**
@@ -368,7 +426,7 @@ module.exports = Vue.component('environment-item', {
       <td>
         <a v-if="!model.isFolder"
           class="environment-name"
-          :href="model.latest.environment_path">
+          :href="environmentPath">
           {{model.name}}
         </a>
         <a v-else class="folder-name">
@@ -406,7 +464,7 @@ module.exports = Vue.component('environment-item', {
       <td class="environments-build-cell">
         <a v-if="shouldRenderBuildName"
           class="build-link"
-          :href="model.latest.last_deployment.deployable.build_path">
+          :href="buildPath">
           {{buildName}}
         </a>
       </td>
@@ -445,21 +503,21 @@ module.exports = Vue.component('environment-item', {
             </actions-component>
           </div>
 
-          <div v-if="model.latest.external_url && canReadEnvironment"
+          <div v-if="externalURL && canReadEnvironment"
             class="inline js-external-url-container">
             <external-url-component
-              :external-url="model.latest.external_url">
+              :external-url="externalURL">
             </external-url-component>
           </div>
 
-          <div v-if="hasStopAction && canCreateDeployment"
+          <div v-if="hasStopAction && canCreateDeployment && model.latest"
             class="inline js-stop-component-container">
             <stop-component
               :stop-url="model.latest.stop_path">
             </stop-component>
           </div>
 
-          <div v-if="model.latest.terminal_path"
+          <div v-if="model.latest && model.latest.terminal_path"
             class="inline js-terminal-button-container">
             <terminal-button-component
               :terminal-icon-svg="terminalIconSvg"