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',
|
commit_pipelines: './commit/pipelines/pipelines_bundle.js',
|
||||||
diff_notes: './diff_notes/diff_notes_bundle.js',
|
diff_notes: './diff_notes/diff_notes_bundle.js',
|
||||||
environments: './environments/environments_bundle.js',
|
environments: './environments/environments_bundle.js',
|
||||||
|
environments_folder: './environments/folder/environments_folder_bundle.js',
|
||||||
filtered_search: './filtered_search/filtered_search_bundle.js',
|
filtered_search: './filtered_search/filtered_search_bundle.js',
|
||||||
graphs: './graphs/graphs_bundle.js',
|
graphs: './graphs/graphs_bundle.js',
|
||||||
issuable: './issuable/issuable_bundle.js',
|
issuable: './issuable/issuable_bundle.js',
|
||||||
|
|
Loading…
Reference in New Issue