diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-02-15 22:45:19 +0300 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2017-02-15 23:00:10 +0300 |
commit | 9414fc5c93d83a560da96b52ac062f8574726827 (patch) | |
tree | e4ea90482628f909279402be578489372ac2f8fc /app/assets/javascripts/environments | |
parent | 1285d629064abce3aee8faafaa57492da6f8f163 (diff) |
Moves check for latest key to store instead of poluting the view making it reusable between endpoints.
Diffstat (limited to 'app/assets/javascripts/environments')
-rw-r--r-- | app/assets/javascripts/environments/components/environment_item.js.es6 | 192 | ||||
-rw-r--r-- | app/assets/javascripts/environments/stores/environments_store.js.es6 | 19 |
2 files changed, 111 insertions, 100 deletions
diff --git a/app/assets/javascripts/environments/components/environment_item.js.es6 b/app/assets/javascripts/environments/components/environment_item.js.es6 index 8401459977b..2187969c2ae 100644 --- a/app/assets/javascripts/environments/components/environment_item.js.es6 +++ b/app/assets/javascripts/environments/components/environment_item.js.es6 @@ -72,9 +72,9 @@ module.exports = Vue.component('environment-item', { * @returns {Boolean} */ hasLastDeploymentKey() { - if (this.model.latest && - this.model.latest.last_deployment && - !this.$options.isObjectEmpty(this.model.latest.last_deployment)) { + if (this.model && + this.model.last_deployment && + !this.$options.isObjectEmpty(this.model.last_deployment)) { return true; } return false; @@ -87,10 +87,10 @@ module.exports = Vue.component('environment-item', { * @returns {Boolean|Undefined} */ hasManualActions() { - return this.model.latest && - this.model.latest.last_deployment && - this.model.latest.last_deployment.manual_actions && - this.model.latest.last_deployment.manual_actions.length > 0; + return this.model && + this.model.last_deployment && + this.model.last_deployment.manual_actions && + this.model.last_deployment.manual_actions.length > 0; }, /** @@ -99,7 +99,7 @@ module.exports = Vue.component('environment-item', { * @returns {Boolean} */ hasStopAction() { - return this.model.latest && this.model.latest['stop_action?']; + return this.model && this.model['stop_action?']; }, /** @@ -109,10 +109,10 @@ module.exports = Vue.component('environment-item', { * @returns {Boolean|Undefined} */ canRetry() { - return this.model.latest && + return this.model && this.hasLastDeploymentKey && - this.model.latest.last_deployment && - this.model.latest.last_deployment.deployable; + this.model.last_deployment && + this.model.last_deployment.deployable; }, /** @@ -121,10 +121,10 @@ module.exports = Vue.component('environment-item', { * @returns {Boolean|Undefined} */ canShowDate() { - return this.model.latest && - this.model.latest.last_deployment && - this.model.latest.last_deployment.deployable && - this.model.latest.last_deployment.deployable !== undefined; + return this.model && + this.model.last_deployment && + this.model.last_deployment.deployable && + this.model.last_deployment.deployable !== undefined; }, /** @@ -133,11 +133,11 @@ module.exports = Vue.component('environment-item', { * @returns {String} */ createdDate() { - if (this.model.latest && - this.model.latest.last_deployment && - this.model.latest.last_deployment.deployable && - this.model.latest.last_deployment.deployable.created_at) { - return timeagoInstance.format(this.model.latest.last_deployment.deployable.created_at); + if (this.model && + this.model.last_deployment && + this.model.last_deployment.deployable && + this.model.last_deployment.deployable.created_at) { + return timeagoInstance.format(this.model.last_deployment.deployable.created_at); } return ''; }, @@ -149,7 +149,7 @@ module.exports = Vue.component('environment-item', { */ manualActions() { if (this.hasManualActions) { - return this.model.latest.last_deployment.manual_actions.map((action) => { + return this.model.last_deployment.manual_actions.map((action) => { const parsedAction = { name: gl.text.humanize(action.name), play_path: action.play_path, @@ -166,11 +166,11 @@ module.exports = Vue.component('environment-item', { * @returns {String} */ userImageAltDescription() { - 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'`; + if (this.model && + this.model.last_deployment && + this.model.last_deployment.user && + this.model.last_deployment.user.username) { + return `${this.model.last_deployment.user.username}'s avatar'`; } return ''; }, @@ -181,10 +181,10 @@ module.exports = Vue.component('environment-item', { * @returns {String|Undefined} */ commitTag() { - if (this.model.latest && - this.model.latest.last_deployment && - this.model.latest.last_deployment.tag) { - return this.model.latest.last_deployment.tag; + if (this.model && + this.model.last_deployment && + this.model.last_deployment.tag) { + return this.model.last_deployment.tag; } return undefined; }, @@ -195,10 +195,10 @@ module.exports = Vue.component('environment-item', { * @returns {Object|Undefined} */ commitRef() { - if (this.model.latest && - this.model.latest.last_deployment && - this.model.latest.last_deployment.ref) { - return this.model.latest.last_deployment.ref; + if (this.model && + this.model.last_deployment && + this.model.last_deployment.ref) { + return this.model.last_deployment.ref; } return undefined; }, @@ -209,11 +209,11 @@ module.exports = Vue.component('environment-item', { * @returns {String|Undefined} */ commitUrl() { - 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; + if (this.model && + this.model.last_deployment && + this.model.last_deployment.commit && + this.model.last_deployment.commit.commit_path) { + return this.model.last_deployment.commit.commit_path; } return undefined; }, @@ -224,11 +224,11 @@ module.exports = Vue.component('environment-item', { * @returns {String|Undefined} */ commitShortSha() { - 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; + if (this.model && + this.model.last_deployment && + this.model.last_deployment.commit && + this.model.last_deployment.commit.short_id) { + return this.model.last_deployment.commit.short_id; } return undefined; }, @@ -239,11 +239,11 @@ module.exports = Vue.component('environment-item', { * @returns {String|Undefined} */ commitTitle() { - 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; + if (this.model && + this.model.last_deployment && + this.model.last_deployment.commit && + this.model.last_deployment.commit.title) { + return this.model.last_deployment.commit.title; } return undefined; }, @@ -254,11 +254,11 @@ module.exports = Vue.component('environment-item', { * @returns {Object|Undefined} */ commitAuthor() { - 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; + if (this.model && + this.model.last_deployment && + this.model.last_deployment.commit && + this.model.last_deployment.commit.author) { + return this.model.last_deployment.commit.author; } return undefined; @@ -270,11 +270,11 @@ module.exports = Vue.component('environment-item', { * @returns {String|Undefined} */ retryUrl() { - 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; + if (this.model && + this.model.last_deployment && + this.model.last_deployment.deployable && + this.model.last_deployment.deployable.retry_path) { + return this.model.last_deployment.deployable.retry_path; } return undefined; }, @@ -285,8 +285,8 @@ module.exports = Vue.component('environment-item', { * @returns {Boolean|Undefined} */ isLastDeployment() { - return this.model.latest && this.model.latest.last_deployment && - this.model.latest.last_deployment['last?']; + return this.model && this.model.last_deployment && + this.model.last_deployment['last?']; }, /** @@ -295,10 +295,10 @@ module.exports = Vue.component('environment-item', { * @returns {String} */ buildName() { - 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}`; + if (this.model && + this.model.last_deployment && + this.model.last_deployment.deployable) { + return `${this.model.last_deployment.deployable.name} #${this.model.last_deployment.deployable.id}`; } return ''; }, @@ -309,10 +309,10 @@ module.exports = Vue.component('environment-item', { * @returns {String} */ deploymentInternalId() { - if (this.model.latest && - this.model.latest.last_deployment && - this.model.latest.last_deployment.iid) { - return `#${this.model.latest.last_deployment.iid}`; + if (this.model && + this.model.last_deployment && + this.model.last_deployment.iid) { + return `#${this.model.last_deployment.iid}`; } return ''; }, @@ -323,9 +323,9 @@ module.exports = Vue.component('environment-item', { * @returns {Boolean} */ deploymentHasUser() { - return this.model.latest && - !this.$options.isObjectEmpty(this.model.latest.last_deployment) && - !this.$options.isObjectEmpty(this.model.latest.last_deployment.user); + return this.model && + !this.$options.isObjectEmpty(this.model.last_deployment) && + !this.$options.isObjectEmpty(this.model.last_deployment.user); }, /** @@ -335,10 +335,10 @@ module.exports = Vue.component('environment-item', { * @returns {Object} */ deploymentUser() { - 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; + if (this.model && + !this.$options.isObjectEmpty(this.model.last_deployment) && + !this.$options.isObjectEmpty(this.model.last_deployment.user)) { + return this.model.last_deployment.user; } return {}; }, @@ -352,9 +352,8 @@ module.exports = Vue.component('environment-item', { */ shouldRenderBuildName() { return !this.model.isFolder && - this.model.latest && - !this.$options.isObjectEmpty(this.model.latest.last_deployment) && - !this.$options.isObjectEmpty(this.model.latest.last_deployment.deployable); + !this.$options.isObjectEmpty(this.model.last_deployment) && + !this.$options.isObjectEmpty(this.model.last_deployment.deployable); }, /** @@ -363,11 +362,11 @@ module.exports = Vue.component('environment-item', { * @return {String} */ buildPath() { - if (this.model.latest && - this.model.latest.last_deployment && - this.model.latest.last_deployment.deployable && - this.model.latest.last_deployment.deployable.build_path) { - return this.model.latest.last_deployment.deployable.build_path; + if (this.model && + this.model.last_deployment && + this.model.last_deployment.deployable && + this.model.last_deployment.deployable.build_path) { + return this.model.last_deployment.deployable.build_path; } return ''; @@ -379,8 +378,8 @@ module.exports = Vue.component('environment-item', { * @return {String} */ externalURL() { - if (this.model.latest && this.model.latest.external_url) { - return this.model.latest.external_url; + if (this.model && this.model.external_url) { + return this.model.external_url; } return ''; @@ -395,14 +394,13 @@ module.exports = Vue.component('environment-item', { */ shouldRenderDeploymentID() { return !this.model.isFolder && - this.model.latest && - !this.$options.isObjectEmpty(this.model.latest.last_deployment) && - this.model.latest.last_deployment.iid !== undefined; + !this.$options.isObjectEmpty(this.model.last_deployment) && + this.model.last_deployment.iid !== undefined; }, environmentPath() { - if (this.model && this.model.latest && this.model.latest.environment_path) { - return this.model.latest.environment_path; + if (this.model && this.model.environment_path) { + return this.model.environment_path; } return ''; @@ -414,7 +412,7 @@ module.exports = Vue.component('environment-item', { * @return {String} */ folderUrl() { - return `${window.location.pathname}/folders/${this.model.name}`; + return `${window.location.pathname}/folders/${this.model.folderName}`; }, }, @@ -449,7 +447,7 @@ module.exports = Vue.component('environment-item', { </span> <span> - {{model.name}} + {{model.folderName}} </span> <span class="badge"> @@ -523,18 +521,18 @@ module.exports = Vue.component('environment-item', { </external-url-component> </div> - <div v-if="hasStopAction && canCreateDeployment && model.latest" + <div v-if="hasStopAction && canCreateDeployment" class="inline js-stop-component-container"> <stop-component - :stop-url="model.latest.stop_path"> + :stop-url="model.stop_path"> </stop-component> </div> - <div v-if="model.latest && model.latest.terminal_path" + <div v-if="model && model.terminal_path" class="inline js-terminal-button-container"> <terminal-button-component :terminal-icon-svg="terminalIconSvg" - :terminal-path="model.latest.terminal_path"> + :terminal-path="model.terminal_path"> </terminal-button-component> </div> diff --git a/app/assets/javascripts/environments/stores/environments_store.js.es6 b/app/assets/javascripts/environments/stores/environments_store.js.es6 index 252e349962e..560d2702c6b 100644 --- a/app/assets/javascripts/environments/stores/environments_store.js.es6 +++ b/app/assets/javascripts/environments/stores/environments_store.js.es6 @@ -20,8 +20,12 @@ class EnvironmentsStore { * * Stores the received environments. * - * Each environment has the following schema + * In the main environments endpoint, each environment has the following schema * { name: String, size: Number, latest: Object } + * In the endpoint to retrieve environments from each folder, the environment does + * not have the `latest` key and the data is all in the root level. + * To avoid doing this check in the view, we store both cases the same by extracting + * what is inside the `latest` key. * * If the `size` is bigger than 1, it means it should be rendered as a folder. * In those cases we add `isFolder` key in order to render it properly. @@ -31,11 +35,20 @@ class EnvironmentsStore { */ storeEnvironments(environments = []) { const filteredEnvironments = environments.map((env) => { + let filtered = {}; + if (env.size > 1) { - return Object.assign({}, env, { isFolder: true }); + filtered = Object.assign({}, env, { isFolder: true }); + } + + if (env.latest) { + filtered = Object.assign(filtered, env, env.latest, { folderName: env.name }); + delete filtered.latest; + } else { + filtered = Object.assign(filtered, env); } - return env; + return filtered; }); this.state.environments = filteredEnvironments; |