diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-02-03 22:47:56 +0300 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2017-02-09 14:10:46 +0300 |
commit | b3309bb2fad36372b1e4821410691fa9f720bbe4 (patch) | |
tree | bff8ed9347d2fe9a136522f2f8847d6a4407453b /app/assets/javascripts/environments | |
parent | efa0502386a1868f7120ffd4291175291f0094ed (diff) |
Adjustments to receive new data schema
Diffstat (limited to 'app/assets/javascripts/environments')
3 files changed, 104 insertions, 310 deletions
diff --git a/app/assets/javascripts/environments/components/environment.js.es6 b/app/assets/javascripts/environments/components/environment.js.es6 index 91553bda4dc..93f65ba0ea8 100644 --- a/app/assets/javascripts/environments/components/environment.js.es6 +++ b/app/assets/javascripts/environments/components/environment.js.es6 @@ -69,12 +69,10 @@ require('./environment_item'); * Toggles loading property. */ created() { - gl.environmentsService = new EnvironmentsService(this.endpoint); + const scope = this.$options.getQueryParameter('scope') || this.visibility; + const endpoint = `${this.endpoint}?scope=${scope}`; - const scope = this.$options.getQueryParameter('scope'); - if (scope) { - this.store.storeVisibility(scope); - } + gl.environmentsService = new EnvironmentsService(endpoint); this.isLoading = true; @@ -82,6 +80,8 @@ require('./environment_item'); .then(resp => resp.json()) .then((json) => { this.store.storeEnvironments(json); + }) + .then(() => { this.isLoading = false; }) .catch(() => { @@ -165,8 +165,7 @@ require('./environment_item'); </a> </p> - <a - v-if="canCreateEnvironmentParsed" + <a v-if="canCreateEnvironmentParsed" :href="newEnvironmentPath" class="btn btn-create js-new-environment-button"> New Environment @@ -174,7 +173,7 @@ require('./environment_item'); </div> <div class="table-holder" - v-if="!isLoading && state.filteredEnvironments.length > 0"> + v-if="!isLoading && state.environments.length > 0"> <table class="table ci-table environments"> <thead> <tr> @@ -187,31 +186,15 @@ require('./environment_item'); </tr> </thead> <tbody> - <template v-for="model in state.filteredEnvironments" + <template v-for="model in state.environments" v-bind:model="model"> - - <tr - is="environment-item" + <tr is="environment-item" :model="model" - :toggleRow="toggleRow.bind(model)" :can-create-deployment="canCreateDeploymentParsed" :can-read-environment="canReadEnvironmentParsed" :play-icon-svg="playIconSvg" :terminal-icon-svg="terminalIconSvg" :commit-icon-svg="commitIconSvg"></tr> - - <tr v-if="model.isOpen && model.children && model.children.length > 0" - is="environment-item" - v-for="children in model.children" - :model="children" - :toggleRow="toggleRow.bind(children)" - :can-create-deployment="canCreateDeploymentParsed" - :can-read-environment="canReadEnvironmentParsed" - :play-icon-svg="playIconSvg" - :terminal-icon-svg="terminalIconSvg" - :commit-icon-svg="commitIconSvg"> - </tr> - </template> </tbody> </table> diff --git a/app/assets/javascripts/environments/components/environment_item.js.es6 b/app/assets/javascripts/environments/components/environment_item.js.es6 index 33a99231315..ae37bc24396 100644 --- a/app/assets/javascripts/environments/components/environment_item.js.es6 +++ b/app/assets/javascripts/environments/components/environment_item.js.es6 @@ -15,12 +15,7 @@ require('./environment_terminal_button'); /** * Envrionment Item Component * - * Used in a hierarchical structure to show folders with children - * in a table. - * Recursive component based on [Tree View](https://vuejs.org/examples/tree-view.html) - * - * See this [issue](https://gitlab.com/gitlab-org/gitlab-ce/issues/22539) - * for more information.15 + * Renders a table row for each environment. */ window.gl = window.gl || {}; @@ -45,11 +40,6 @@ require('./environment_terminal_button'); default: () => ({}), }, - toggleRow: { - type: Function, - required: false, - }, - canCreateDeployment: { type: Boolean, required: false, @@ -76,50 +66,9 @@ require('./environment_terminal_button'); type: String, required: false, }, - - }, - - data() { - return { - rowClass: { - 'children-row': this.model['vue-isChildren'], - }, - }; }, computed: { - - /** - * If an item has a `children` entry it means it is a folder. - * Folder items have different behaviours - it is possible to toggle - * them and show their children. - * - * @returns {Boolean|Undefined} - */ - isFolder() { - return this.model.children && this.model.children.length > 0; - }, - - /** - * If an item is inside a folder structure will return true. - * Used for css purposes. - * - * @returns {Boolean|undefined} - */ - isChildren() { - return this.model['vue-isChildren']; - }, - - /** - * Counts the number of environments in each folder. - * Used to show a badge with the counter. - * - * @returns {Number|Undefined} The number of environments for the current folder. - */ - childrenCounter() { - return this.model.children && this.model.children.length; - }, - /** * Verifies if `last_deployment` key exists in the current Envrionment. * This key is required to render most of the html - this method works has @@ -128,8 +77,8 @@ require('./environment_terminal_button'); * @returns {Boolean} */ hasLastDeploymentKey() { - if (this.model.last_deployment && - !this.$options.isObjectEmpty(this.model.last_deployment)) { + if (this.model.latest.last_deployment && + !this.$options.isObjectEmpty(this.model.latest.last_deployment)) { return true; } return false; @@ -142,8 +91,9 @@ require('./environment_terminal_button'); * @returns {Boolean|Undefined} */ hasManualActions() { - return this.model.last_deployment && this.model.last_deployment.manual_actions && - this.model.last_deployment.manual_actions.length > 0; + return this.model.latest.last_deployment && + this.model.latest.last_deployment.manual_actions && + this.model.latest.last_deployment.manual_actions.length > 0; }, /** @@ -163,8 +113,8 @@ require('./environment_terminal_button'); */ canRetry() { return this.hasLastDeploymentKey && - this.model.last_deployment && - this.model.last_deployment.deployable; + this.model.latest.last_deployment && + this.model.latest.last_deployment.deployable; }, /** @@ -173,9 +123,9 @@ require('./environment_terminal_button'); * @returns {Boolean|Undefined} */ canShowDate() { - return this.model.last_deployment && - this.model.last_deployment.deployable && - this.model.last_deployment.deployable !== undefined; + return this.model.latest.last_deployment && + this.model.latest.last_deployment.deployable && + this.model.latest.last_deployment.deployable !== undefined; }, /** @@ -185,7 +135,7 @@ require('./environment_terminal_button'); */ createdDate() { return gl.environmentsList.timeagoInstance.format( - this.model.last_deployment.deployable.created_at, + this.model.latest.last_deployment.deployable.created_at, ); }, @@ -196,7 +146,7 @@ require('./environment_terminal_button'); */ manualActions() { if (this.hasManualActions) { - return this.model.last_deployment.manual_actions.map((action) => { + return this.model.latest.last_deployment.manual_actions.map((action) => { const parsedAction = { name: gl.text.humanize(action.name), play_path: action.play_path, @@ -213,10 +163,10 @@ require('./environment_terminal_button'); * @returns {String} */ userImageAltDescription() { - if (this.model.last_deployment && - this.model.last_deployment.user && - this.model.last_deployment.user.username) { - return `${this.model.last_deployment.user.username}'s avatar'`; + if (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'`; } return ''; }, @@ -227,9 +177,9 @@ require('./environment_terminal_button'); * @returns {String|Undefined} */ commitTag() { - if (this.model.last_deployment && - this.model.last_deployment.tag) { - return this.model.last_deployment.tag; + if (this.model.latest.last_deployment && + this.model.latest.last_deployment.tag) { + return this.model.latest.last_deployment.tag; } return undefined; }, @@ -240,8 +190,9 @@ require('./environment_terminal_button'); * @returns {Object|Undefined} */ commitRef() { - if (this.model.last_deployment && this.model.last_deployment.ref) { - return this.model.last_deployment.ref; + if (this.model.latest.last_deployment && + this.model.latest.last_deployment.ref) { + return this.model.latest.last_deployment.ref; } return undefined; }, @@ -252,10 +203,10 @@ require('./environment_terminal_button'); * @returns {String|Undefined} */ commitUrl() { - if (this.model.last_deployment && - this.model.last_deployment.commit && - this.model.last_deployment.commit.commit_path) { - return this.model.last_deployment.commit.commit_path; + if (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; } return undefined; }, @@ -266,10 +217,10 @@ require('./environment_terminal_button'); * @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 (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; } return undefined; }, @@ -280,10 +231,10 @@ require('./environment_terminal_button'); * @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 (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; } return undefined; }, @@ -294,10 +245,10 @@ require('./environment_terminal_button'); * @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; + if (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; } return undefined; @@ -309,10 +260,10 @@ require('./environment_terminal_button'); * @returns {String|Undefined} */ retryUrl() { - if (this.model.last_deployment && - this.model.last_deployment.deployable && - this.model.last_deployment.deployable.retry_path) { - return this.model.last_deployment.deployable.retry_path; + if (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; } return undefined; }, @@ -323,7 +274,8 @@ require('./environment_terminal_button'); * @returns {Boolean|Undefined} */ isLastDeployment() { - return this.model.last_deployment && this.model.last_deployment['last?']; + return this.model.latest.last_deployment && + this.model.latest.last_deployment['last?']; }, /** @@ -332,9 +284,9 @@ require('./environment_terminal_button'); * @returns {String} */ buildName() { - if (this.model.last_deployment && - this.model.last_deployment.deployable) { - return `${this.model.last_deployment.deployable.name} #${this.model.last_deployment.deployable.id}`; + if (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}`; } return ''; }, @@ -345,9 +297,9 @@ require('./environment_terminal_button'); * @returns {String} */ deploymentInternalId() { - if (this.model.last_deployment && - this.model.last_deployment.iid) { - return `#${this.model.last_deployment.iid}`; + if (this.model.latest.last_deployment && + this.model.latest.last_deployment.iid) { + return `#${this.model.latest.last_deployment.iid}`; } return ''; }, @@ -358,8 +310,8 @@ require('./environment_terminal_button'); * @returns {Boolean} */ deploymentHasUser() { - return !this.$options.isObjectEmpty(this.model.last_deployment) && - !this.$options.isObjectEmpty(this.model.last_deployment.user); + return !this.$options.isObjectEmpty(this.model.latest.last_deployment) && + !this.$options.isObjectEmpty(this.model.latest.last_deployment.user); }, /** @@ -369,9 +321,9 @@ require('./environment_terminal_button'); * @returns {Object} */ deploymentUser() { - if (!this.$options.isObjectEmpty(this.model.last_deployment) && - !this.$options.isObjectEmpty(this.model.last_deployment.user)) { - return this.model.last_deployment.user; + if (!this.$options.isObjectEmpty(this.model.latest.last_deployment) && + !this.$options.isObjectEmpty(this.model.latest.last_deployment.user)) { + return this.model.latest.last_deployment.user; } return {}; }, @@ -384,9 +336,9 @@ require('./environment_terminal_button'); * @returns {Boolean} */ shouldRenderBuildName() { - return !this.isFolder && - !this.$options.isObjectEmpty(this.model.last_deployment) && - !this.$options.isObjectEmpty(this.model.last_deployment.deployable); + return !this.model.isFolder && + !this.$options.isObjectEmpty(this.model.latest.last_deployment) && + !this.$options.isObjectEmpty(this.model.latest.last_deployment.deployable); }, /** @@ -397,9 +349,9 @@ require('./environment_terminal_button'); * @returns {Boolean} */ shouldRenderDeploymentID() { - return !this.isFolder && - !this.$options.isObjectEmpty(this.model.last_deployment) && - this.model.last_deployment.iid !== undefined; + return !this.model.isFolder && + !this.$options.isObjectEmpty(this.model.latest.last_deployment) && + this.model.latest.last_deployment.iid !== undefined; }, }, @@ -420,16 +372,16 @@ require('./environment_terminal_button'); template: ` <tr> - <td v-bind:class="{ 'children-row': isChildren}"> - <a v-if="!isFolder" + <td> + <a v-if="!model.isFolder" class="environment-name" - :href="model.environment_path"> + :href="model.latest.environment_path"> {{model.name}} </a> - <span v-else v-on:click="toggleRow(model)" class="folder-name"> + <a v-else class="folder-name"> <span class="folder-icon"> - <i v-show="model.isOpen" class="fa fa-caret-down"></i> - <i v-show="!model.isOpen" class="fa fa-caret-right"></i> + <i class="fa fa-caret-right" aria-hidden="true"></i> + <i class="fa fa-folder" aria-hidden="true"></i> </span> <span> @@ -437,9 +389,9 @@ require('./environment_terminal_button'); </span> <span class="badge"> - {{childrenCounter}} + {{model.size}} </span> - </span> + </a> </td> <td class="deployment-column"> @@ -447,7 +399,7 @@ require('./environment_terminal_button'); {{deploymentInternalId}} </span> - <span v-if="!isFolder && deploymentHasUser"> + <span v-if="!model.isFolder && deploymentHasUser"> by <a :href="deploymentUser.web_url" class="js-deploy-user-container"> <img class="avatar has-tooltip s20" @@ -461,13 +413,13 @@ require('./environment_terminal_button'); <td class="environments-build-cell"> <a v-if="shouldRenderBuildName" class="build-link" - :href="model.last_deployment.deployable.build_path"> + :href="model.latest.last_deployment.deployable.build_path"> {{buildName}} </a> </td> <td> - <div v-if="!isFolder && hasLastDeploymentKey" class="js-commit-component"> + <div v-if="!model.isFolder && hasLastDeploymentKey" class="js-commit-component"> <commit-component :tag="commitTag" :commit-ref="commitRef" @@ -478,21 +430,20 @@ require('./environment_terminal_button'); :commit-icon-svg="commitIconSvg"> </commit-component> </div> - <p v-if="!isFolder && !hasLastDeploymentKey" class="commit-title"> + <p v-if="!model.isFolder && !hasLastDeploymentKey" class="commit-title"> No deployments yet </p> </td> <td> - <span - v-if="!isFolder && canShowDate" + <span v-if="!model.isFolder && canShowDate" class="environment-created-date-timeago"> {{createdDate}} </span> </td> <td class="hidden-xs"> - <div v-if="!isFolder"> + <div v-if="!model.isFolder"> <div v-if="hasManualActions && canCreateDeployment" class="inline js-manual-actions-container"> <actions-component @@ -501,25 +452,25 @@ require('./environment_terminal_button'); </actions-component> </div> - <div v-if="model.external_url && canReadEnvironment" + <div v-if="model.latest.external_url && canReadEnvironment" class="inline js-external-url-container"> <external-url-component - :external-url="model.external_url"> + :external-url="model.latest.external_url"> </external-url-component> </div> <div v-if="hasStopAction && canCreateDeployment" class="inline js-stop-component-container"> <stop-component - :stop-url="model.stop_path"> + :stop-url="model.latest.stop_path"> </stop-component> </div> - <div v-if="model.terminal_path" + <div v-if="model.latest.terminal_path" class="inline js-terminal-button-container"> <terminal-button-component :terminal-icon-svg="terminalIconSvg" - :terminal-path="model.terminal_path"> + :terminal-path="model.latest.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 9b4090100da..a533b8b61d6 100644 --- a/app/assets/javascripts/environments/stores/environments_store.js.es6 +++ b/app/assets/javascripts/environments/stores/environments_store.js.es6 @@ -10,181 +10,41 @@ this.state.environments = []; this.state.stoppedCounter = 0; this.state.availableCounter = 0; - this.state.visibility = 'available'; this.state.filteredEnvironments = []; return this; }, /** - * In order to display a tree view we need to modify the received - * data in to a tree structure based on `environment_type` - * sorted alphabetically. - * In each children a `vue-` property will be added. This property will be - * used to know if an item is a children mostly for css purposes. This is - * needed because the children row is a fragment instance and therfore does - * not accept non-prop attributes. * + * Stores the received environments. * - * @example - * it will transform this: - * [ - * { name: "environment", environment_type: "review" }, - * { name: "environment_1", environment_type: null } - * { name: "environment_2, environment_type: "review" } - * ] - * into this: - * [ - * { name: "review", children: - * [ - * { name: "environment", environment_type: "review", vue-isChildren: true}, - * { name: "environment_2", environment_type: "review", vue-isChildren: true} - * ] - * }, - * {name: "environment_1", environment_type: null} - * ] + * Each environment has the following schema + * { name: String, size: Number, latest: Object } * + * 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. * - * @param {Array} environments List of environments. - * @returns {Array} Tree structured array with the received environments. + * @param {Array} environments + * @returns {Array} */ storeEnvironments(environments = []) { - this.state.stoppedCounter = this.countByState(environments, 'stopped'); - this.state.availableCounter = this.countByState(environments, 'available'); - - const environmentsTree = environments.reduce((acc, environment) => { - if (environment.environment_type !== null) { - const occurs = acc.filter(element => element.children && - element.name === environment.environment_type); - - environment['vue-isChildren'] = true; - - if (occurs.length) { - acc[acc.indexOf(occurs[0])].children.push(environment); - acc[acc.indexOf(occurs[0])].children.slice().sort(this.sortByName); - } else { - acc.push({ - name: environment.environment_type, - children: [environment], - isOpen: false, - 'vue-isChildren': environment['vue-isChildren'], - }); - } - } else { - acc.push(environment); - } - - return acc; - }, []).slice().sort(this.sortByName); - - this.state.environments = environmentsTree; - - this.filterEnvironmentsByVisibility(this.state.environments); - - return environmentsTree; - }, - - storeVisibility(visibility) { - this.state.visibility = visibility; - }, - /** - * Given the visibility prop provided by the url query parameter and which - * changes according to the active tab we need to filter which environments - * should be visible. - * - * The environments array is a recursive tree structure and we need to filter - * both root level environments and children environments. - * - * In order to acomplish that, both `filterState` and `filterEnvironmentsByVisibility` - * functions work together. - * The first one works as the filter that verifies if the given environment matches - * the given state. - * The second guarantees both root level and children elements are filtered as well. - * - * Given array of environments will return only - * the environments that match the state stored. - * - * @param {Array} array - * @return {Array} - */ - filterEnvironmentsByVisibility(arr) { - const filteredEnvironments = arr.map((item) => { - if (item.children) { - const filteredChildren = this.filterEnvironmentsByVisibility( - item.children, - ).filter(Boolean); - - if (filteredChildren.length) { - item.children = filteredChildren; - return item; - } - } - - return this.filterState(this.state.visibility, item); - }).filter(Boolean); - - this.state.filteredEnvironments = filteredEnvironments; - return filteredEnvironments; - }, - - /** - * Given the state and the environment, - * returns only if the environment state matches the one provided. - * - * @param {String} state - * @param {Object} environment - * @return {Object} - */ - filterState(state, environment) { - return environment.state === state && environment; - }, - - /** - * Toggles folder open property given the environment type. - * - * @param {String} envType - * @return {Array} - */ - toggleFolder(envType) { - const environments = this.state.environments; - - const environmentsCopy = environments.map((env) => { - if (env['vue-isChildren'] && env.name === envType) { - env.isOpen = !env.isOpen; + const filteredEnvironments = environments.map((env) => { + if (env.size > 1) { + return Object.assign({}, env, { isFolder: true }); } return env; }); - this.state.environments = environmentsCopy; + this.state.environments = filteredEnvironments; - return environmentsCopy; + return filteredEnvironments; }, - /** - * Given an array of environments, returns the number of environments - * that have the given state. - * - * @param {Array} environments - * @param {String} state - * @returns {Number} - */ - countByState(environments, state) { - return environments.filter(env => env.state === state).length; + storeCounts() { + //TODO }, - /** - * Sorts the two objects provided by their name. - * - * @param {Object} a - * @param {Object} b - * @returns {Number} - */ - sortByName(a, b) { - const nameA = a.name.toUpperCase(); - const nameB = b.name.toUpperCase(); - - return nameA < nameB ? -1 : nameA > nameB ? 1 : 0; // eslint-disable-line - }, }; })(); |