First iteration
This commit is contained in:
parent
7af6982e5f
commit
26d18387de
|
@ -0,0 +1,14 @@
|
|||
const EnvironmentsFolderComponent = require('./environments_folder_view');
|
||||
require('../vue_shared/vue_resource_interceptor');
|
||||
|
||||
$(() => {
|
||||
window.gl = window.gl || {};
|
||||
|
||||
if (gl.EnvironmentsListFolderApp) {
|
||||
gl.EnvironmentsListFolderApp.$destroy(true);
|
||||
}
|
||||
|
||||
gl.EnvironmentsListFolderApp = new EnvironmentsFolderComponent({
|
||||
el: document.querySelector('#environments-folder-list-view'),
|
||||
});
|
||||
});
|
|
@ -0,0 +1,196 @@
|
|||
/* eslint-disable no-param-reassign, no-new */
|
||||
/* global Flash */
|
||||
|
||||
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');
|
||||
|
||||
module.exports = Vue.component('environment-folder-view', {
|
||||
|
||||
components: {
|
||||
'environment-table': EnvironmentTable,
|
||||
'table-pagination': gl.VueGlPagination,
|
||||
},
|
||||
|
||||
props: {
|
||||
endpoint: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: '',
|
||||
},
|
||||
|
||||
folderName: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
const store = new Store();
|
||||
|
||||
return {
|
||||
store,
|
||||
state: store.state,
|
||||
isLoading: false,
|
||||
|
||||
// Pagination Properties,
|
||||
paginationInformation: {},
|
||||
pageNumber: 1,
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* Fetches all the environments and stores them.
|
||||
* Toggles loading property.
|
||||
*/
|
||||
created() {
|
||||
const scope = this.$options.getQueryParameter('scope') || this.visibility;
|
||||
const pageNumber = this.$options.getQueryParameter('page') || this.pageNumber;
|
||||
|
||||
const endpoint = `${this.endpoint}?scope=${scope}&page=${pageNumber}`;
|
||||
|
||||
const service = new EnvironmentsService(endpoint);
|
||||
|
||||
this.isLoading = true;
|
||||
|
||||
return service.all()
|
||||
.then(resp => ({
|
||||
headers: resp.headers,
|
||||
body: resp.json(),
|
||||
}))
|
||||
.then((response) => {
|
||||
this.store.storeEnvironments(response.body.environments);
|
||||
this.store.storePagination(response.headers);
|
||||
})
|
||||
.then(() => {
|
||||
this.isLoading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.isLoading = false;
|
||||
new Flash('An error occurred while fetching the environments.', 'alert');
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 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];
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* Will change the page number and update the URL.
|
||||
*
|
||||
* If no search params are present, we'll add param for page
|
||||
* If param for page is already present, we'll update it
|
||||
* If there are params but none for page, we'll add it at the end.
|
||||
*
|
||||
* @param {Number} pageNumber desired page to go to.
|
||||
*/
|
||||
changePage(pageNumber) {
|
||||
let param;
|
||||
if (window.location.search.length === 0) {
|
||||
param = `?page=${pageNumber}`;
|
||||
}
|
||||
|
||||
if (window.location.search.indexOf('page') !== -1) {
|
||||
param = window.location.search.replace(/page=\d/g, `page=${pageNumber}`);
|
||||
}
|
||||
|
||||
if (window.location.search.length &&
|
||||
window.location.search.indexOf('page') === -1) {
|
||||
param = `${window.location.search}&page=${pageNumber}`;
|
||||
}
|
||||
|
||||
gl.utils.visitUrl(param);
|
||||
return param;
|
||||
},
|
||||
},
|
||||
|
||||
template: `
|
||||
<div :class="cssContainerClass">
|
||||
<div class="top-area">
|
||||
<ul v-if="!isLoading" class="nav-links">
|
||||
<li v-bind:class="{ 'active': scope === undefined || scope === 'available' }">
|
||||
<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="canCreateEnvironmentParsed && !isLoading" class="nav-controls">
|
||||
<a :href="newEnvironmentPath" class="btn btn-create">
|
||||
New environment
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="environments-container">
|
||||
<div class="environments-list-loading text-center" v-if="isLoading">
|
||||
<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">
|
||||
|
||||
<environment-table
|
||||
:environments="state.environments"
|
||||
:can-create-deployment="canCreateDeploymentParsed"
|
||||
:can-read-environment="canReadEnvironmentParsed"
|
||||
:play-icon-svg="playIconSvg"
|
||||
:terminal-icon-svg="terminalIconSvg"
|
||||
:commit-icon-svg="commitIconSvg">
|
||||
</environment-table>
|
||||
|
||||
<table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
|
||||
:change="changePage"
|
||||
:pageInfo="state.paginationInformation">
|
||||
</table-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
});
|
|
@ -0,0 +1,49 @@
|
|||
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;
|
|
@ -0,0 +1,8 @@
|
|||
- @no_container = true
|
||||
- page_title "Environments"
|
||||
= render "projects/pipelines/head"
|
||||
|
||||
- content_for :page_specific_javascripts do
|
||||
= page_specific_javascript_bundle_tag("environments_folder")
|
||||
|
||||
#environments-folder-list-view
|
|
@ -22,6 +22,7 @@ var config = {
|
|||
commit_pipelines: './commit/pipelines/pipelines_bundle.js',
|
||||
diff_notes: './diff_notes/diff_notes_bundle.js',
|
||||
environments: './environments/environments_bundle.js',
|
||||
environments_folder: './environments/folder/environments_folder_bundle.js',
|
||||
filtered_search: './filtered_search/filtered_search_bundle.js',
|
||||
graphs: './graphs/graphs_bundle.js',
|
||||
issuable: './issuable/issuable_bundle.js',
|
||||
|
|
Loading…
Reference in New Issue