diff options
7 files changed, 114 insertions, 57 deletions
diff --git a/app/assets/javascripts/environments/components/environment_item.js.es6 b/app/assets/javascripts/environments/components/environment_item.js.es6 index 76c815e8b9f..0d541f5989d 100644 --- a/app/assets/javascripts/environments/components/environment_item.js.es6 +++ b/app/assets/javascripts/environments/components/environment_item.js.es6 @@ -1,5 +1,6 @@ +/* globals Vue */ +/* eslint-disable no-param-reassign, no-return-assign */ (() => { - /** * Envrionment Item Component * @@ -19,12 +20,12 @@ template: '#environment-item-template', props: { - model: Object + model: Object, }, - data () { + data() { return { - open: false + open: false, }; }, @@ -37,8 +38,8 @@ * * @returns {Boolean} */ - isFolder () { - return this.model.children && this.model.children.length ? true : false; + isFolder() { + return this.$options.hasKey(this.model, 'children') && this.model.children.length > 0; }, /** @@ -47,7 +48,7 @@ * * @returns {Boolean|undefined} */ - isChildren () { + isChildren() { return this.model['vue-isChildren']; }, @@ -57,9 +58,79 @@ * * @returns {Boolean} The number of environments for the current folder */ - childrenCounter () { - return this.model.children && this.model.children.length; - } + childrenCounter() { + return this.$options.hasKey(this.model, 'children') && this.model.children.length; + }, + + /** + * Returns the value of the `last?` key sent in the API. + * Used to know wich title to render when the environment can be re-deployed + * + * @returns {Boolean} + */ + isLast() { + return this.$options.hasKey(this.model, 'last_deployment') && this.model.last_deployment['last?']; + }, + + /** + * Verifies if `last_deployment` key exists in the current Envrionment. + * This key is required to render most of the html - this method works has + * an helper. + * + * @returns {Boolean} + */ + hasLastDeploymentKey() { + return this.$options.hasKey(this.model, 'last_deployment'); + }, + + /** + * Verifies is the given environment has manual actions. + * Used to verify if we should render them or nor. + * + * @returns {Boolean} description + */ + hasManualActions() { + return this.$options.hasKey(this.model, 'manual_actions') && this.model.manual_actions.length; + }, + + /** + * Returns the value of the `stoppable?` key provided in the response. + * + * @returns {Boolean} + */ + isStoppable() { + return this.model['stoppable?']; + }, + + /** + * Verifies if the `deployable` key is present in `last_deployment` key. + * Used to verify whether we should or not render the rollback partial. + * + * @returns {Boolean} + */ + canRetry() { + return this.hasLastDeploymentKey && this.model.last_deployment && this.$options.hasKey(this.model.last_deployment, 'deployable'); + }, + + createdDate() { + return $.timeago(this.model.created_at); + }, + + manualActions() { + this.model.manual_actions.map(action => action.name = gl.text.humanize(action.name)); + }, + }, + + /** + * Helper to verify if key is present in an object. + * Can be removed once we start using lodash. + * + * @param {Object} obj + * @param {String} key + * @returns {Boolean} + */ + hasKey(obj, key) { + return {}.hasOwnProperty.call(obj, key); }, methods: { @@ -67,11 +138,11 @@ /** * Toggles the visibility of a folders' children. */ - toggle () { + toggle() { if (this.isFolder) { this.open = !this.open; } - } - } - }) + }, + }, + }); })(); diff --git a/app/assets/javascripts/environments/environments_bundle.js.es6 b/app/assets/javascripts/environments/environments_bundle.js.es6 index 286d81bab7f..53a8353a0bf 100644 --- a/app/assets/javascripts/environments/environments_bundle.js.es6 +++ b/app/assets/javascripts/environments/environments_bundle.js.es6 @@ -5,8 +5,9 @@ //= require ./components/environment_item //= require ../boards/vue_resource_interceptor -$(() => { +/* eslint-disable */ +$(() => { const environmentsListApp = document.getElementById('environments-list-view'); const Store = gl.environmentsList.EnvironmentsStore; @@ -16,10 +17,11 @@ $(() => { gl.EnvironmentsListApp.$destroy(true); } - const filterState = (state) => (environment) => environment.state === state && environment; + const filterState = state => environment => environment.state === state && environment; // recursiveMap :: (Function, Array) -> Array const recursiveMap = (fn, arr) => { + return arr.map((item) => { if (!item.children) { return fn(item); } @@ -37,20 +39,20 @@ $(() => { el: '#environments-list-view', components: { - 'item': gl.environmentsList.EnvironmentItem + item: gl.environmentsList.EnvironmentItem }, data: { state: Store.state, endpoint: environmentsListApp.dataset.endpoint, loading: true, - visibility: 'available' + visibility: 'available', }, computed: { - filteredEnvironments () { + filteredEnvironments (){ return recursiveMap(filterState(this.visibility), this.state.environments); - } + }, }, init: Store.create.bind(Store), diff --git a/app/assets/javascripts/environments/stores/environmnets_store.js.es6 b/app/assets/javascripts/environments/stores/environmnets_store.js.es6 index 11c481c22e3..587e213a17b 100644 --- a/app/assets/javascripts/environments/stores/environmnets_store.js.es6 +++ b/app/assets/javascripts/environments/stores/environmnets_store.js.es6 @@ -5,7 +5,7 @@ gl.environmentsList.EnvironmentsStore = { state: {}, - create () { + create() { this.state.environments = []; this.state.stoppedCounter = 0; this.state.availableCounter = 0; @@ -44,39 +44,23 @@ * @returns {Array} Tree structured array with the received environments. */ storeEnvironments(environments = []) { - this.state.stoppedCounter = this.countByState(environments, 'stopped'); this.state.availableCounter = this.countByState(environments, 'available'); const environmentsTree = environments.reduce((acc, environment) => { - - if (environment.last_deployment) { - - //humanizes actions names if there are any actions - if (environment.last_deployment.manual_actions) { - environment.last_deployment.manual_actions = environment.last_deployment.manual_actions.map((action) => action.name = gl.text.humanize(action.name)); - } - - //transforms created date for deployment in a human readable format - if (environment.last_deployment.created_at) { - // TODO - how to do this without jquery - } - } - if (environment.environment_type !== null) { - const occurs = acc.filter((element, index, array) => { - return element.children && element.name === environment.environment_type; - }); + const occurs = acc.filter(element => element.children && + element.name === environment.environment_type); - environment["vue-isChildren"] = true; + environment['vue-isChildren'] = true; if (occurs.length) { acc[acc.indexOf(occurs[0])].children.push(environment); - acc[acc.indexOf(occurs[0])].children.sort(this.sortByName) + acc[acc.indexOf(occurs[0])].children.sort(this.sortByName); } else { acc.push({ name: environment.environment_type, - children: [environment] + children: [environment], }); } } else { @@ -100,7 +84,7 @@ * @returns {Number} */ countByState(environments, state) { - return environments.filter((env) => env.state === state).length; + return environments.filter(env => env.state === state).length; }, /** @@ -110,7 +94,7 @@ * @param {Object} b * @returns {Number} */ - sortByName (a, b) { + sortByName(a, b) { const nameA = a.name.toUpperCase(); const nameB = b.name.toUpperCase(); @@ -123,6 +107,6 @@ } return 0; - } - } + }, + }; })(); diff --git a/app/views/projects/environments/components/_actions.html.haml b/app/views/projects/environments/components/_actions.html.haml index 82acda0de9c..a2c229f1315 100644 --- a/app/views/projects/environments/components/_actions.html.haml +++ b/app/views/projects/environments/components/_actions.html.haml @@ -1,13 +1,13 @@ - if can?(current_user, :create_deployment, @project) - .inline{ "v-if" => "model.last_deployment && model.last_deployment.manual_actions && model.last_deployment.manual_actions.present"} + .inline{ "v-if" => "hasManualActions"} .dropdown %a.dropdown-new.btn.btn-default{type: "button", "data-toggle" => "dropdown"} = custom_icon('icon_play') = icon('caret-down') %ul.dropdown-menu.dropdown-menu-align-right - %li{ "v-for" => "action in model.last_deployment.manual_actions" } - %a{ ":ref" => "'#{namespace_project_path(@project.namespace, @project)}/' + action.id + '/play'", + %li{ "v-for" => "action in manualActions" } + %a{ ":ref" => "action.play_url", "data-method" => "post", "rel" => "nofollow" } diff --git a/app/views/projects/environments/components/_environment.html.haml b/app/views/projects/environments/components/_environment.html.haml index 122cea2c3a4..2fecfd85f61 100644 --- a/app/views/projects/environments/components/_environment.html.haml +++ b/app/views/projects/environments/components/_environment.html.haml @@ -44,8 +44,8 @@ No deployments yet %td - %span{ "v-if" => "!isFolder && model.last_deployment" } - {{model.last_deployment.created_at}} + %span.environment-created-date-timeago{ "v-if" => "!isFolder && model.last_deployment" } + {{createdDate}} %td.hidden-xs .pull-right{ "v-if" => "!isFolder" } diff --git a/app/views/projects/environments/components/_rollback.html.haml b/app/views/projects/environments/components/_rollback.html.haml index 2258f6ec32d..e3449c5515e 100644 --- a/app/views/projects/environments/components/_rollback.html.haml +++ b/app/views/projects/environments/components/_rollback.html.haml @@ -1,10 +1,10 @@ - if can?(current_user, :create_deployment, @project) - %a.btn.btn-build{ "v-if" => "model.last_deployment && model.last_deployment.deployable", - ":href" => "'#{namespace_project_builds_path(@project.namespace, @project)}/' + model.last_deployment.deployable.id + '/retry'", + %a.btn.btn-build{ "v-if" => "canRetry", + ":href" => "model.last_deployment.deployable.retry_url", "data-method" => "post", "rel" => "nofollow" } - %span{ "v-if" => "model.last_deployment.last" } + %span{ "v-if" => "isLastDeployment" } Re-deploy - %span{ "v-if" => "!model.last_deployment.last" } + %span{ "v-if" => "!isLastDeployment" } Rollback diff --git a/app/views/projects/environments/components/_stop.html.haml b/app/views/projects/environments/components/_stop.html.haml index 55cccf9e72e..a7100f15784 100644 --- a/app/views/projects/environments/components/_stop.html.haml +++ b/app/views/projects/environments/components/_stop.html.haml @@ -1,6 +1,6 @@ - if can?(current_user, :create_deployment, @project) - .inline{ "v-if" => "model.stop_action" } - %a.btn.stop-env-link{":href" => "'#{namespace_project_environments_path(@project.namespace, @project)}/' + model.id", + .inline{ "v-if" => "isStoppable" } + %a.btn.stop-env-link{":href" => "model.environment_url", "method" => ":post", "rel" => "nofollow", "confirm" => "Are you sure you want to stop this environment?"} |