diff options
Diffstat (limited to 'app/assets')
| -rw-r--r-- | app/assets/javascripts/environments/components/environment.js.es6 | 190 | ||||
| -rw-r--r-- | app/assets/javascripts/environments/components/environment_item.js.es6 | 23 | ||||
| -rw-r--r-- | app/assets/javascripts/environments/components/environment_stop.js.es6 | 14 | ||||
| -rw-r--r-- | app/assets/javascripts/environments/environments_bundle.js.es6 | 197 | ||||
| -rw-r--r-- | app/assets/javascripts/environments/stores/environments_store.js.es6 (renamed from app/assets/javascripts/environments/stores/environmnets_store.js.es6) | 2 | ||||
| -rw-r--r-- | app/assets/javascripts/environments/vue_resource_interceptor.js.es6 | 13 |
6 files changed, 231 insertions, 208 deletions
diff --git a/app/assets/javascripts/environments/components/environment.js.es6 b/app/assets/javascripts/environments/components/environment.js.es6 new file mode 100644 index 00000000000..9cdc17e8589 --- /dev/null +++ b/app/assets/javascripts/environments/components/environment.js.es6 @@ -0,0 +1,190 @@ +//= require vue +//= require vue-resource +//= require_tree ../services/ +//= require ./environment_item + +/* globals Vue, EnvironmentsService */ +/* eslint-disable no-param-reassign */ + +$(() => { + window.gl = window.gl || {}; + + const filterState = state => environment => environment.state === state && environment; + + // recursiveMap :: (Function, Array) -> Array + const recursiveMap = (fn, arr) => arr.map((item) => { + if (item.children) { + const filteredChildren = recursiveMap(fn, item.children).filter(Boolean); + if (filteredChildren.length) { + item.children = filteredChildren; + return item; + } + } + return fn(item); + }).filter(Boolean); + + window.gl.environmentsList.EnvironmentsComponent = Vue.extend({ + props: ['store'], + + components: { + 'environment-item': window.gl.environmentsList.EnvironmentItem, + }, + + data() { + const environmentsListApp = document.querySelector('#environments-list-view'); + + return { + state: this.store.state, + endpoint: environmentsListApp.dataset.environmentsDataEndpoint, + canCreateDeployment: environmentsListApp.dataset.canCreateDeployment, + canReadEnvironment: environmentsListApp.dataset.canReadEnvironment, + canCreateEnvironment: environmentsListApp.dataset.canCreateEnvironment, + projectEnvironmentsPath: environmentsListApp.dataset.projectEnvironmentsPath, + projectStoppedEnvironmentsPath: environmentsListApp.dataset.projectStoppedEnvironmentsPath, + newEnvironmentPath: environmentsListApp.dataset.newEnvironmentPath, + helpPagePath: environmentsListApp.dataset.helpPagePath, + loading: true, + visibility: 'available', + }; + }, + + computed: { + filteredEnvironments() { + return recursiveMap(filterState(this.visibility), this.state.environments); + }, + + scope() { + return this.$options.getQueryParameter('scope'); + }, + + canReadEnvironmentParsed() { + return this.$options.convertPermissionToBoolean(this.canReadEnvironment); + }, + + canCreateDeploymentParsed() { + return this.$options.convertPermissionToBoolean(this.canCreateDeployment); + }, + }, + + created() { + window.gl.environmentsService = new EnvironmentsService(this.endpoint); + + const scope = this.$options.getQueryParameter('scope'); + if (scope) { + this.visibility = scope; + } + }, + + /** + * Fetches all the environmnets and stores them. + * Toggles loading property. + */ + ready() { + window.gl.environmentsService.all().then(resp => resp.json()).then((json) => { + this.store.storeEnvironments(json); + this.loading = false; + }); + }, + + /** + * Transforms the url parameter into an object and + * returns the one requested. + * + * @param {String} param + * @returns {String} The value of the requested parameter. + */ + getQueryParameter(parameter) { + return window.location.search.substring(1).split('&').reduce((acc, param) => { + const paramSplited = param.split('='); + acc[paramSplited[0]] = paramSplited[1]; + return acc; + }, {})[parameter]; + }, + + /** + * Converts permission provided as strings to booleans. + * @param {String} string + * @returns {Boolean} + */ + convertPermissionToBoolean(string) { + if (string === 'true') { + return true; + } + return false; + }, + + template: ` + <div> + <div class="top-area"> + <ul v-if="!isLoading" class="nav-links"> + <li v-bind:class="{ 'active': scope === undefined}"> + <a :href="projectEnvironmentsPath"> + Available + <span class="badge js-available-environments-count"> + {{state.availableCounter}} + </span> + </a> + </li> + <li v-bind:class="{ 'active': scope === 'stopped'}"> + <a :href="projectStoppedEnvironmentsPath"> + Stopped + <span class="badge js-stopped-environments-count"> + {{state.stoppedCounter}} + </span> + </a> + </li> + </ul> + <div v-if="canCreateEnvironment && !loading" class="nav-controls"> + <a :href="newEnvironmentPath" class="btn btn-create"> + New envrionment + </a> + </div> + </div> + + <div class="environments-container"> + <div class="environments-list-loading text-center" v-if="loading"> + <i class="fa fa-spinner spin"></i> + </div> + + <div class="blank-state blank-state-no-icon" v-if="!loading && state.environments.length === 0"> + <h2 class="blank-state-title"> + You don't have any environments right now. + </h2> + <p class="blank-state-text"> + Environments are places where code gets deployed, such as staging or production. + + <br /> + + <a :href="helpPagePath"> + Read more about environments + </a> + <a v-if="canCreateEnvironment" :href="newEnvironmentPath" class="btn btn-create"> + New Environment + </a> + </p> + </div> + + <div class="table-holder" v-if="!loading && state.environments.length > 0"> + <table class="table ci-table environments"> + <thead> + <th>Environment</th> + <th>Last deployment</th> + <th>Build</th> + <th>Commit</th> + <th></th> + <th class="hidden-xs"></th> + </thead> + <tbody> + <tr is="environment-item" + v-for="model in filteredEnvironments" + :model="model" + :can-create-deployment="canCreateDeploymentParsed" + :can-read-environment="canReadEnvironmentParsed"> + </tbody> + </table> + </div> + </div> + </div> + `, + }); +}); diff --git a/app/assets/javascripts/environments/components/environment_item.js.es6 b/app/assets/javascripts/environments/components/environment_item.js.es6 index 1451c1f2a56..ebe31cbc26b 100644 --- a/app/assets/javascripts/environments/components/environment_item.js.es6 +++ b/app/assets/javascripts/environments/components/environment_item.js.es6 @@ -31,7 +31,7 @@ 'rollback-component': window.gl.environmentsList.RollbackComponent, }, - props: ['model', 'can-create-deployment', 'can-create-deployment', 'can-read-environment'], + props: ['model', 'can-create-deployment', 'can-read-environment'], data() { return { @@ -107,7 +107,7 @@ */ hasManualActions() { return this.$options.hasKey(this.model, 'manual_actions') && - this.model.manual_actions.length; + this.model.manual_actions.length > 0; }, /** @@ -143,17 +143,6 @@ }, /** - * Verifies if the environment has any manual actions to be rendered. - * - * @returns {Boolean} - */ - hasManualActions() { - return this.model.last_deployment && - this.model.last_deployment.manual_actions && - this.model.last_deployment.manual_actions.length > 0; - }, - - /** * Returns the manual actions with the name parsed. * * @returns {Array.<Object>} @@ -359,25 +348,25 @@ <td class="hidden-xs col-sm-3"> <div v-if="!isFolder"> <div v-if="hasManualActions && canCreateDeployment" class="inline"> - <actions-component + <actions-component :actions="manualActions"> </actions-component> </div> <div v-if="model.external_url && canReadEnvironment" class="inline"> - <external-url-component + <external-url-component :external_url="model.external_url"> </external_url-component> </div> <div v-if="isStoppable && canCreateDeployment" class="inline"> - <stop-component + <stop-component :stop_url="model.environment_url"> </stop-component> </div> <div v-if="canRetry && canCreateDeployment" class="inline"> - <rollback-component + <rollback-component :is_last_deployment="isLastDeployment" :retry_url="retryUrl"> </rollback-component> diff --git a/app/assets/javascripts/environments/components/environment_stop.js.es6 b/app/assets/javascripts/environments/components/environment_stop.js.es6 index c15b669c9c1..1ae02d8080c 100644 --- a/app/assets/javascripts/environments/components/environment_stop.js.es6 +++ b/app/assets/javascripts/environments/components/environment_stop.js.es6 @@ -13,12 +13,18 @@ }, }, + methods: { + openConfirmDialog() { + return window.confirm('Are you sure you want to stop this environment?'); + }, + }, + template: ` - <a class="btn stop-env-link" - :href="stop_url" + <a v-on:click="openConfirmDialog" + class="btn stop-env-link" + :href="stop_url" method="post" - rel="nofollow", - data-confirm="Are you sure you want to stop this environment?"> + rel="nofollow"> <i class="fa fa-stop stop-env-icon"></i> </a> `, diff --git a/app/assets/javascripts/environments/environments_bundle.js.es6 b/app/assets/javascripts/environments/environments_bundle.js.es6 index 7dff4d3ac2a..20eee7976ec 100644 --- a/app/assets/javascripts/environments/environments_bundle.js.es6 +++ b/app/assets/javascripts/environments/environments_bundle.js.es6 @@ -1,198 +1,21 @@ //= require vue -//= require vue-resource -//= require_tree ./stores -//= require_tree ./services -//= require ./components/environment_item +//= require_tree ./stores/ +//= require ./components/environment //= require ./vue_resource_interceptor -/* globals Vue, EnvironmentsService */ -/* eslint-disable no-param-reassign */ -$(() => { - const environmentsListApp = document.getElementById('environments-list-view'); - const Store = gl.environmentsList.EnvironmentsStore; +$(() => { window.gl = window.gl || {}; - if (gl.EnvironmentsListApp) { - gl.EnvironmentsListApp.$destroy(true); + if (window.gl.EnvironmentsListApp) { + window.gl.EnvironmentsListApp.$destroy(true); } + const Store = window.gl.environmentsList.EnvironmentsStore; - const filterState = state => environment => environment.state === state && environment; - - // recursiveMap :: (Function, Array) -> Array - const recursiveMap = (fn, arr) => arr.map((item) => { - if (item.children) { - const filteredChildren = recursiveMap(fn, item.children).filter(Boolean); - if (filteredChildren.length) { - item.children = filteredChildren; - return item; - } - } - return fn(item); - }).filter(Boolean); - - gl.EnvironmentsListApp = new Vue({ - - el: '#environments-list-view', - - components: { - item: gl.environmentsList.EnvironmentItem, - }, - - data: { - state: Store.state, - endpoint: environmentsListApp.dataset.environmentsDataEndpoint, - canCreateDeployment: environmentsListApp.dataset.canCreateDeployment, - canReadEnvironment: environmentsListApp.dataset.canReadEnvironment, - canCreateEnvironment: environmentsListApp.dataset.canCreateEnvironment, - projectEnvironmentsPath: environmentsListApp.dataset.projectEnvironmentsPath, - projectClosedEnvironmentsPath: environmentsListApp.dataset.projectClosedEnvironmentsPath, - newEnvironmentPath: environmentsListApp.dataset.newEnvironmentPath, - helpPagePath: environmentsListApp.dataset.helpPagePath, - loading: true, - visibility: 'available', - }, - - computed: { - filteredEnvironments() { - return recursiveMap(filterState(this.visibility), this.state.environments); - }, - - scope() { - return this.$options.getQueryParameter('scope'); - }, - - canReadEnvironmentParsed() { - return this.$options.convertPermissionToBoolean(this.canReadEnvironment); - }, - - canCreateDeploymentParsed() { - return this.$options.convertPermissionToBoolean(this.canCreateDeployment); - }, + window.gl.EnvironmentsListApp = new window.gl.environmentsList.EnvironmentsComponent({ + el: document.querySelector('#environments-list-view'), + propsData: { + store: Store.create(), }, - - init: Store.create.bind(Store), - - created() { - gl.environmentsService = new EnvironmentsService(this.endpoint); - - const scope = this.$options.getQueryParameter('scope'); - if (scope) { - this.visibility = scope; - } - }, - - /** - * Fetches all the environmnets and stores them. - * Toggles loading property. - */ - ready() { - gl.environmentsService.all().then(resp => resp.json()).then((json) => { - Store.storeEnvironments(json); - this.loading = false; - }); - }, - - /** - * Transforms the url parameter into an object and - * returns the one requested. - * - * @param {String} param - * @returns {String} The value of the requested parameter. - */ - getQueryParameter(parameter) { - return window.location.search.substring(1).split('&').reduce((acc, param) => { - const paramSplited = param.split('='); - acc[paramSplited[0]] = paramSplited[1]; - return acc; - }, {})[parameter]; - }, - - /** - * Converts permission provided as strings to booleans. - * @param {String} string - * @returns {Boolean} - */ - convertPermissionToBoolean(string) { - if (string === 'true') { - return true; - } - - return false; - }, - - template: ` - <div> - <div class="top-area"> - <ul v-if="!isLoading" class="nav-links"> - <li v-bind:class="{ 'active': scope === undefined}"> - <a :href="projectEnvironmentsPath"> - Available - <span class="badge js-available-environments-count"> - {{state.availableCounter}} - </span> - </a> - </li> - <li v-bind:class="{ 'active': scope === 'stopped'}"> - <a :href="projectClosedEnvironmentsPath"> - Stopped - <span class="badge js-stopped-environments-count"> - {{state.stoppedCounter}} - </span> - </a> - </li> - </ul> - <div v-if="canCreateEnvironment && !loading" class="nav-controls"> - <a :href="newEnvironmentPath" class="btn btn-create"> - New envrionment - </a> - </div> - </div> - - <div class="environments-container"> - <div class="environments-list-loading text-center" v-if="loading"> - <i class="fa fa-spinner spin"></i> - </div> - - <div class="blank-state blank-state-no-icon" v-if="!loading && state.environments.length === 0"> - <h2 class="blank-state-title"> - You don't have any environments right now. - </h2> - <p class="blank-state-text"> - Environments are places where code gets deployed, such as staging or production. - - <br /> - - <a :href="helpPagePath"> - Read more about environments - </a> - <a v-if="canCreateEnvironment" :href="newEnvironmentPath" class="btn btn-create"> - New Environment - </a> - </p> - </div> - - <div class="table-holder" v-if="!loading && state.environments.length > 0"> - <table class="table ci-table environments"> - <thead> - <th>Environment</th> - <th>Last deployment</th> - <th>Build</th> - <th>Commit</th> - <th></th> - <th class="hidden-xs"></th> - </thead> - <tbody> - <tr is="environment-item" - v-for="model in filteredEnvironments" - :model="model" - :can-create-deployment="canCreateDeploymentParsed" - :can-read-environment="canReadEnvironmentParsed"> - </tbody> - </table> - </div> - </div> - </div> - `, }); }); diff --git a/app/assets/javascripts/environments/stores/environmnets_store.js.es6 b/app/assets/javascripts/environments/stores/environments_store.js.es6 index ef0188c15bf..b8fe25ef313 100644 --- a/app/assets/javascripts/environments/stores/environmnets_store.js.es6 +++ b/app/assets/javascripts/environments/stores/environments_store.js.es6 @@ -10,6 +10,8 @@ this.state.environments = []; this.state.stoppedCounter = 0; this.state.availableCounter = 0; + + return this; }, /** diff --git a/app/assets/javascripts/environments/vue_resource_interceptor.js.es6 b/app/assets/javascripts/environments/vue_resource_interceptor.js.es6 new file mode 100644 index 00000000000..d19a5969f96 --- /dev/null +++ b/app/assets/javascripts/environments/vue_resource_interceptor.js.es6 @@ -0,0 +1,13 @@ +/* eslint-disable */ +Vue.http.interceptors.push((request, next) => { + Vue.activeResources = Vue.activeResources ? Vue.activeResources + 1 : 1; + + next(function (response) { + console.log("this is the repsponse", JSON.stringify(response, null, ' ')); + if (typeof response.data === "string") { + response.data = JSON.parse(response.data) + } + + Vue.activeResources--; + }); +}); |