diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-02-12 16:58:53 +0000 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2017-02-15 19:57:46 +0000 |
commit | 082348491360d51ffaa737e3f266c4d1d6bdd946 (patch) | |
tree | 164c6cbe730ee6812148a4e61292e85f281a5cad | |
parent | 26d18387dea786ded85df3a429542c5d1e4f1ac1 (diff) | |
download | gitlab-ce-082348491360d51ffaa737e3f266c4d1d6bdd946.tar.gz |
Adds url for folder;
Creates new subview to show envirnoments that belong to a folder
5 files changed, 59 insertions, 96 deletions
diff --git a/app/assets/javascripts/environments/components/environment_item.js.es6 b/app/assets/javascripts/environments/components/environment_item.js.es6 index fc45c3c5f53..e40c97130ad 100644 --- a/app/assets/javascripts/environments/components/environment_item.js.es6 +++ b/app/assets/javascripts/environments/components/environment_item.js.es6 @@ -407,6 +407,16 @@ module.exports = Vue.component('environment-item', { return ''; }, + + /** + * Constructs folder URL based on the current location and the folder id. + * + * @return {String} + */ + folderUrl() { + return `${window.location.pathname}/folders/${this.model.latest.id}`; + }, + }, /** @@ -432,7 +442,7 @@ module.exports = Vue.component('environment-item', { :href="environmentPath"> {{model.name}} </a> - <a v-else class="folder-name"> + <a v-else class="folder-name" :href="folderUrl"> <span class="folder-icon"> <i class="fa fa-caret-right" aria-hidden="true"></i> <i class="fa fa-folder" aria-hidden="true"></i> diff --git a/app/assets/javascripts/environments/folder/environments_folder_bundle.js.es6 b/app/assets/javascripts/environments/folder/environments_folder_bundle.js.es6 index 9cc1c2f4f18..d2ca465351a 100644 --- a/app/assets/javascripts/environments/folder/environments_folder_bundle.js.es6 +++ b/app/assets/javascripts/environments/folder/environments_folder_bundle.js.es6 @@ -1,5 +1,4 @@ const EnvironmentsFolderComponent = require('./environments_folder_view'); -require('../vue_shared/vue_resource_interceptor'); $(() => { window.gl = window.gl || {}; diff --git a/app/assets/javascripts/environments/folder/environments_folder_view.js.es6 b/app/assets/javascripts/environments/folder/environments_folder_view.js.es6 index 070bc84bbe3..83643161056 100644 --- a/app/assets/javascripts/environments/folder/environments_folder_view.js.es6 +++ b/app/assets/javascripts/environments/folder/environments_folder_view.js.es6 @@ -4,9 +4,8 @@ const Vue = require('vue'); Vue.use(require('vue-resource')); const EnvironmentsService = require('../services/environments_service'); -const EnvironmentTable = require('./environments_table'); -const Store = require('../stores/environments_folder_store'); -require('../../vue_shared/components/table_pagination'); +const EnvironmentTable = require('../components/environments_table'); +const Store = require('../stores/environments_store'); module.exports = Vue.component('environment-folder-view', { @@ -15,27 +14,25 @@ module.exports = Vue.component('environment-folder-view', { 'table-pagination': gl.VueGlPagination, }, - props: { - endpoint: { - type: String, - required: true, - default: '', - }, - - folderName: { - type: String, - required: true, - default: '', - }, - }, - data() { + const environmentsData = document.querySelector('#environments-folder-list-view').dataset; const store = new Store(); + const endpoint = `${window.location.pathname}.json`; return { store, + endpoint, state: store.state, + visibility: 'available', isLoading: false, + cssContainerClass: environmentsData.cssClass, + canCreateDeployment: environmentsData.canCreateDeployment, + canReadEnvironment: environmentsData.canReadEnvironment, + + // svgs + commitIconSvg: environmentsData.commitIconSvg, + playIconSvg: environmentsData.playIconSvg, + terminalIconSvg: environmentsData.terminalIconSvg, // Pagination Properties, paginationInformation: {}, @@ -43,6 +40,29 @@ module.exports = Vue.component('environment-folder-view', { }; }, + computed: { + scope() { + return this.$options.getQueryParameter('scope'); + }, + + canReadEnvironmentParsed() { + return this.$options.convertPermissionToBoolean(this.canReadEnvironment); + }, + + canCreateDeploymentParsed() { + return this.$options.convertPermissionToBoolean(this.canCreateDeployment); + }, + + stoppedPath() { + return `${window.location.pathname}?scope=stopped`; + }, + + availablePath() { + return window.location.pathname; + }, + + }, + /** * Fetches all the environments and stores them. * Toggles loading property. @@ -123,9 +143,12 @@ module.exports = Vue.component('environment-folder-view', { template: ` <div :class="cssContainerClass"> <div class="top-area"> + + <h3>FOLDER NAME</h3> + <ul v-if="!isLoading" class="nav-links"> <li v-bind:class="{ 'active': scope === undefined || scope === 'available' }"> - <a :href="projectEnvironmentsPath"> + <a :href="availablePath"> Available <span class="badge js-available-environments-count"> {{state.availableCounter}} @@ -133,7 +156,7 @@ module.exports = Vue.component('environment-folder-view', { </a> </li> <li v-bind:class="{ 'active' : scope === 'stopped' }"> - <a :href="projectStoppedEnvironmentsPath"> + <a :href="stoppedPath"> Stopped <span class="badge js-stopped-environments-count"> {{state.stoppedCounter}} @@ -141,11 +164,6 @@ module.exports = Vue.component('environment-folder-view', { </a> </li> </ul> - <div v-if="canCreateEnvironmentParsed && !isLoading" class="nav-controls"> - <a :href="newEnvironmentPath" class="btn btn-create"> - New environment - </a> - </div> </div> <div class="environments-container"> @@ -153,26 +171,6 @@ module.exports = Vue.component('environment-folder-view', { <i class="fa fa-spinner fa-spin"></i> </div> - <div class="blank-state blank-state-no-icon" - v-if="!isLoading && state.environments.length === 0"> - <h2 class="blank-state-title js-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> - </p> - - <a v-if="canCreateEnvironmentParsed" - :href="newEnvironmentPath" - class="btn btn-create js-new-environment-button"> - New Environment - </a> - </div> - <div class="table-holder" v-if="!isLoading && state.environments.length > 0"> diff --git a/app/assets/javascripts/environments/stores/environments_folder_store.js.es6 b/app/assets/javascripts/environments/stores/environments_folder_store.js.es6 deleted file mode 100644 index 005ed52d9a1..00000000000 --- a/app/assets/javascripts/environments/stores/environments_folder_store.js.es6 +++ /dev/null @@ -1,49 +0,0 @@ -require('~/lib/utils/common_utils'); -/** - * Environments Folder Store. - * - * Stores received environments that belong to a parent store. - */ -class EnvironmentsFolderStore { - constructor() { - this.state = {}; - this.state.environments = []; - this.state.paginationInformation = {}; - - return this; - } - - /** - * - * Stores the received environments. - * - * Each environment has the following schema - * { name: String, size: Number, latest: Object } - * - * - * @param {Array} environments - * @returns {Array} - */ - storeEnvironments(environments = []) { - this.state.environments = environments; - - return environments; - } - - storePagination(pagination = {}) { - const normalizedHeaders = gl.utils.normalizeHeaders(pagination); - const paginationInformation = { - perPage: parseInt(normalizedHeaders['X-PER-PAGE'], 10), - page: parseInt(normalizedHeaders['X-PAGE'], 10), - total: parseInt(normalizedHeaders['X-TOTAL'], 10), - totalPages: parseInt(normalizedHeaders['X-TOTAL-PAGES'], 10), - nextPage: parseInt(normalizedHeaders['X-NEXT-PAGE'], 10), - previousPage: parseInt(normalizedHeaders['X-PREV-PAGE'], 10), - }; - - this.state.paginationInformation = paginationInformation; - return paginationInformation; - } -} - -module.exports = EnvironmentsFolderStore; diff --git a/app/views/projects/environments/folder.html.haml b/app/views/projects/environments/folder.html.haml index 452d32fc8b6..d9cb7bc0331 100644 --- a/app/views/projects/environments/folder.html.haml +++ b/app/views/projects/environments/folder.html.haml @@ -5,4 +5,9 @@ - content_for :page_specific_javascripts do = page_specific_javascript_bundle_tag("environments_folder") -#environments-folder-list-view +#environments-folder-list-view{ data: { "can-create-deployment" => can?(current_user, :create_deployment, @project).to_s, + "can-read-environment" => can?(current_user, :read_environment, @project).to_s, + "css-class" => container_class, + "commit-icon-svg" => custom_icon("icon_commit"), + "terminal-icon-svg" => custom_icon("icon_terminal"), + "play-icon-svg" => custom_icon("icon_play") } } |