Commit 08234849 authored by Filipa Lacerda's avatar Filipa Lacerda

Adds url for folder;

Creates new subview to show envirnoments that belong to a folder
parent 26d18387
...@@ -407,6 +407,16 @@ module.exports = Vue.component('environment-item', { ...@@ -407,6 +407,16 @@ module.exports = Vue.component('environment-item', {
return ''; 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', { ...@@ -432,7 +442,7 @@ module.exports = Vue.component('environment-item', {
:href="environmentPath"> :href="environmentPath">
{{model.name}} {{model.name}}
</a> </a>
<a v-else class="folder-name"> <a v-else class="folder-name" :href="folderUrl">
<span class="folder-icon"> <span class="folder-icon">
<i class="fa fa-caret-right" aria-hidden="true"></i> <i class="fa fa-caret-right" aria-hidden="true"></i>
<i class="fa fa-folder" aria-hidden="true"></i> <i class="fa fa-folder" aria-hidden="true"></i>
......
const EnvironmentsFolderComponent = require('./environments_folder_view'); const EnvironmentsFolderComponent = require('./environments_folder_view');
require('../vue_shared/vue_resource_interceptor');
$(() => { $(() => {
window.gl = window.gl || {}; window.gl = window.gl || {};
......
...@@ -4,9 +4,8 @@ ...@@ -4,9 +4,8 @@
const Vue = require('vue'); const Vue = require('vue');
Vue.use(require('vue-resource')); Vue.use(require('vue-resource'));
const EnvironmentsService = require('../services/environments_service'); const EnvironmentsService = require('../services/environments_service');
const EnvironmentTable = require('./environments_table'); const EnvironmentTable = require('../components/environments_table');
const Store = require('../stores/environments_folder_store'); const Store = require('../stores/environments_store');
require('../../vue_shared/components/table_pagination');
module.exports = Vue.component('environment-folder-view', { module.exports = Vue.component('environment-folder-view', {
...@@ -15,27 +14,25 @@ module.exports = Vue.component('environment-folder-view', { ...@@ -15,27 +14,25 @@ module.exports = Vue.component('environment-folder-view', {
'table-pagination': gl.VueGlPagination, 'table-pagination': gl.VueGlPagination,
}, },
props: {
endpoint: {
type: String,
required: true,
default: '',
},
folderName: {
type: String,
required: true,
default: '',
},
},
data() { data() {
const environmentsData = document.querySelector('#environments-folder-list-view').dataset;
const store = new Store(); const store = new Store();
const endpoint = `${window.location.pathname}.json`;
return { return {
store, store,
endpoint,
state: store.state, state: store.state,
visibility: 'available',
isLoading: false, isLoading: false,
cssContainerClass: environmentsData.cssClass,
canCreateDeployment: environmentsData.canCreateDeployment,
canReadEnvironment: environmentsData.canReadEnvironment,
// svgs
commitIconSvg: environmentsData.commitIconSvg,
playIconSvg: environmentsData.playIconSvg,
terminalIconSvg: environmentsData.terminalIconSvg,
// Pagination Properties, // Pagination Properties,
paginationInformation: {}, paginationInformation: {},
...@@ -43,6 +40,29 @@ module.exports = Vue.component('environment-folder-view', { ...@@ -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. * Fetches all the environments and stores them.
* Toggles loading property. * Toggles loading property.
...@@ -123,9 +143,12 @@ module.exports = Vue.component('environment-folder-view', { ...@@ -123,9 +143,12 @@ module.exports = Vue.component('environment-folder-view', {
template: ` template: `
<div :class="cssContainerClass"> <div :class="cssContainerClass">
<div class="top-area"> <div class="top-area">
<h3>FOLDER NAME</h3>
<ul v-if="!isLoading" class="nav-links"> <ul v-if="!isLoading" class="nav-links">
<li v-bind:class="{ 'active': scope === undefined || scope === 'available' }"> <li v-bind:class="{ 'active': scope === undefined || scope === 'available' }">
<a :href="projectEnvironmentsPath"> <a :href="availablePath">
Available Available
<span class="badge js-available-environments-count"> <span class="badge js-available-environments-count">
{{state.availableCounter}} {{state.availableCounter}}
...@@ -133,7 +156,7 @@ module.exports = Vue.component('environment-folder-view', { ...@@ -133,7 +156,7 @@ module.exports = Vue.component('environment-folder-view', {
</a> </a>
</li> </li>
<li v-bind:class="{ 'active' : scope === 'stopped' }"> <li v-bind:class="{ 'active' : scope === 'stopped' }">
<a :href="projectStoppedEnvironmentsPath"> <a :href="stoppedPath">
Stopped Stopped
<span class="badge js-stopped-environments-count"> <span class="badge js-stopped-environments-count">
{{state.stoppedCounter}} {{state.stoppedCounter}}
...@@ -141,11 +164,6 @@ module.exports = Vue.component('environment-folder-view', { ...@@ -141,11 +164,6 @@ module.exports = Vue.component('environment-folder-view', {
</a> </a>
</li> </li>
</ul> </ul>
<div v-if="canCreateEnvironmentParsed && !isLoading" class="nav-controls">
<a :href="newEnvironmentPath" class="btn btn-create">
New environment
</a>
</div>
</div> </div>
<div class="environments-container"> <div class="environments-container">
...@@ -153,26 +171,6 @@ module.exports = Vue.component('environment-folder-view', { ...@@ -153,26 +171,6 @@ module.exports = Vue.component('environment-folder-view', {
<i class="fa fa-spinner fa-spin"></i> <i class="fa fa-spinner fa-spin"></i>
</div> </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" <div class="table-holder"
v-if="!isLoading && state.environments.length > 0"> v-if="!isLoading && state.environments.length > 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;
...@@ -5,4 +5,9 @@ ...@@ -5,4 +5,9 @@
- content_for :page_specific_javascripts do - content_for :page_specific_javascripts do
= page_specific_javascript_bundle_tag("environments_folder") = 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") } }
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment