Skip to content

G
gitlab-ce
Commit 6ae76738 authored by Phil Hughes's avatar Phil Hughes
Browse files
Options

Merge branch 'environments-vue-5' into 'master' 

Use vue files for vue components.

See merge request !10882
parents ba215788 54933058
Hide whitespace changes
Inline Side-by-side
Showing with 167 additions and 141 deletions
app/assets/javascripts/environments/components/environment.js → app/assets/javascripts/environments/components/environment.vue
View file @ 6ae76738
<script>
/* eslint-disable no-new */ /* eslint-disable no-new */
/* global Flash */ /* global Flash */
import Vue from 'vue';
import EnvironmentsService from '../services/environments_service'; import EnvironmentsService from '../services/environments_service';
import EnvironmentTable from './environments_table.vue'; import EnvironmentTable from './environments_table.vue';
import EnvironmentsStore from '../stores/environments_store'; import EnvironmentsStore from '../stores/environments_store';
...@@ -8,7 +9,7 @@ import TablePaginationComponent from '../../vue_shared/components/table_paginati ...@@ -8,7 +9,7 @@ import TablePaginationComponent from '../../vue_shared/components/table_paginati
import '../../lib/utils/common_utils'; import '../../lib/utils/common_utils';
import eventHub from '../event_hub'; import eventHub from '../event_hub';
export default Vue.component('environment-component', { export default {
components: { components: {
'environment-table': EnvironmentTable, 'environment-table': EnvironmentTable,
...@@ -140,76 +141,90 @@ export default Vue.component('environment-component', { ...@@ -140,76 +141,90 @@ export default Vue.component('environment-component', {
}); });
}, },
}, },
};
template: ` </script>
<div :class="cssContainerClass"> <template>
<div class="top-area"> <div :class="cssContainerClass">
<ul v-if="!isLoading" class="nav-links"> <div class="top-area">
<li v-bind:class="{ 'active': scope === null || scope === 'available' }"> <ul
<a :href="projectEnvironmentsPath"> v-if="!isLoading"
Available class="nav-links">
<span class="badge js-available-environments-count"> <li :class="{ active: scope === null || scope === 'available' }">
{{state.availableCounter}} <a :href="projectEnvironmentsPath">
</span> Available
</a> <span class="badge js-available-environments-count">
</li> {{state.availableCounter}}
<li v-bind:class="{ 'active' : scope === 'stopped' }"> </span>
<a :href="projectStoppedEnvironmentsPath"> </a>
Stopped </li>
<span class="badge js-stopped-environments-count"> <li :class="{ active : scope === 'stopped' }">
{{state.stoppedCounter}} <a :href="projectStoppedEnvironmentsPath">
</span> Stopped
</a> <span class="badge js-stopped-environments-count">
</li> {{state.stoppedCounter}}
</ul> </span>
<div v-if="canCreateEnvironmentParsed && !isLoading" class="nav-controls">
<a :href="newEnvironmentPath" class="btn btn-create">
New environment
</a> </a>
</div> </li>
</ul>
<div
v-if="canCreateEnvironmentParsed && !isLoading"
class="nav-controls">
<a
:href="newEnvironmentPath"
class="btn btn-create">
New environment
</a>
</div> </div>
</div>
<div class="content-list environments-container">
<div
class="environments-list-loading text-center"
v-if="isLoading">
<div class="content-list environments-container"> <i
<div class="environments-list-loading text-center" v-if="isLoading"> class="fa fa-spinner fa-spin"
<i class="fa fa-spinner fa-spin" aria-hidden="true"></i> aria-hidden="true" />
</div> </div>
<div class="blank-state blank-state-no-icon" <div
v-if="!isLoading && state.environments.length === 0"> class="blank-state blank-state-no-icon"
<h2 class="blank-state-title js-blank-state-title"> v-if="!isLoading && state.environments.length === 0">
You don't have any environments right now. <h2 class="blank-state-title js-blank-state-title">
</h2> You don't have any environments right now.
<p class="blank-state-text"> </h2>
Environments are places where code gets deployed, such as staging or production. <p class="blank-state-text">
<br /> Environments are places where code gets deployed, such as staging or production.
<a :href="helpPagePath"> <br />
Read more about environments <a :href="helpPagePath">
</a> Read more about environments
</p>
<a v-if="canCreateEnvironmentParsed"
:href="newEnvironmentPath"
class="btn btn-create js-new-environment-button">
New Environment
</a> </a>
</div> </p>
<div class="table-holder" <a
v-if="!isLoading && state.environments.length > 0"> v-if="canCreateEnvironmentParsed"
:href="newEnvironmentPath"
<environment-table class="btn btn-create js-new-environment-button">
:environments="state.environments" New Environment
:can-create-deployment="canCreateDeploymentParsed" </a>
:can-read-environment="canReadEnvironmentParsed"
:service="service"
:is-loading-folder-content="isLoadingFolderContent" />
</div>
<table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
:change="changePage"
:pageInfo="state.paginationInformation">
</table-pagination>
</div> </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"
:service="service"
:is-loading-folder-content="isLoadingFolderContent" />
</div>
<table-pagination
v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
:change="changePage"
:pageInfo="state.paginationInformation" />
</div> </div>
`, </div>
}); </template>
app/assets/javascripts/environments/environments_bundle.js
View file @ 6ae76738
import EnvironmentsComponent from './components/environment'; import Vue from 'vue';
import EnvironmentsComponent from './components/environment.vue';
$(() => { document.addEventListener('DOMContentLoaded', () => new Vue({
window.gl = window.gl || {}; el: '#environments-list-view',
components: {
if (gl.EnvironmentsListApp) { 'environments-table-app': EnvironmentsComponent,
gl.EnvironmentsListApp.$destroy(true); },
} render: createElement => createElement('environments-table-app'),
}));
gl.EnvironmentsListApp = new EnvironmentsComponent({
el: document.querySelector('#environments-list-view'),
});
});
app/assets/javascripts/environments/folder/environments_folder_bundle.js
View file @ 6ae76738
import EnvironmentsFolderComponent from './environments_folder_view'; import Vue from 'vue';
import EnvironmentsFolderComponent from './environments_folder_view.vue';
$(() => { document.addEventListener('DOMContentLoaded', () => new Vue({
window.gl = window.gl || {}; el: '#environments-folder-list-view',
components: {
if (gl.EnvironmentsListFolderApp) { 'environments-folder-app': EnvironmentsFolderComponent,
gl.EnvironmentsListFolderApp.$destroy(true); },
} render: createElement => createElement('environments-folder-app'),
}));
gl.EnvironmentsListFolderApp = new EnvironmentsFolderComponent({
el: document.querySelector('#environments-folder-list-view'),
});
});
app/assets/javascripts/environments/folder/environments_folder_view.js → app/assets/javascripts/environments/folder/environments_folder_view.vue
View file @ 6ae76738
<script>
/* eslint-disable no-new */ /* eslint-disable no-new */
/* global Flash */ /* global Flash */
import Vue from 'vue';
import EnvironmentsService from '../services/environments_service'; import EnvironmentsService from '../services/environments_service';
import EnvironmentTable from '../components/environments_table.vue'; import EnvironmentTable from '../components/environments_table.vue';
import EnvironmentsStore from '../stores/environments_store'; import EnvironmentsStore from '../stores/environments_store';
...@@ -8,7 +8,7 @@ import TablePaginationComponent from '../../vue_shared/components/table_paginati ...@@ -8,7 +8,7 @@ import TablePaginationComponent from '../../vue_shared/components/table_paginati
import '../../lib/utils/common_utils'; import '../../lib/utils/common_utils';
import '../../vue_shared/vue_resource_interceptor'; import '../../vue_shared/vue_resource_interceptor';
export default Vue.component('environment-folder-view', { export default {
components: { components: {
'environment-table': EnvironmentTable, 'environment-table': EnvironmentTable,
'table-pagination': TablePaginationComponent, 'table-pagination': TablePaginationComponent,
...@@ -116,54 +116,66 @@ export default Vue.component('environment-folder-view', { ...@@ -116,54 +116,66 @@ export default Vue.component('environment-folder-view', {
return param; return param;
}, },
}, },
};
</script>
<template>
<div :class="cssContainerClass">
<div
class="top-area"
v-if="!isLoading">
<h4 class="js-folder-name environments-folder-name">
Environments / <b>{{folderName}}</b>
</h4>
<ul class="nav-links">
<li :class="{ active: scope === null || scope === 'available' }">
<a
:href="availablePath"
class="js-available-environments-folder-tab">
Available
<span class="badge js-available-environments-count">
{{state.availableCounter}}
</span>
</a>
</li>
<li :class="{ active : scope === 'stopped' }">
<a
:href="stoppedPath"
class="js-stopped-environments-folder-tab">
Stopped
<span class="badge js-stopped-environments-count">
{{state.stoppedCounter}}
</span>
</a>
</li>
</ul>
</div>
template: ` <div class="environments-container">
<div :class="cssContainerClass"> <div
<div class="top-area" v-if="!isLoading"> class="environments-list-loading text-center"
v-if="isLoading">
<h4 class="js-folder-name environments-folder-name"> <i
Environments / <b>{{folderName}}</b> class="fa fa-spinner fa-spin"
</h4> aria-hidden="true"/>
<ul class="nav-links">
<li v-bind:class="{ 'active': scope === null || scope === 'available' }">
<a :href="availablePath" class="js-available-environments-folder-tab">
Available
<span class="badge js-available-environments-count">
{{state.availableCounter}}
</span>
</a>
</li>
<li v-bind:class="{ 'active' : scope === 'stopped' }">
<a :href="stoppedPath" class="js-stopped-environments-folder-tab">
Stopped
<span class="badge js-stopped-environments-count">
{{state.stoppedCounter}}
</span>
</a>
</li>
</ul>
</div> </div>
<div class="environments-container"> <div
<div class="environments-list-loading text-center" v-if="isLoading"> class="table-holder"
<i class="fa fa-spinner fa-spin"></i> v-if="!isLoading && state.environments.length > 0">
</div>
<div class="table-holder"
v-if="!isLoading && state.environments.length > 0">
<environment-table <environment-table
:environments="state.environments" :environments="state.environments"
:can-create-deployment="canCreateDeploymentParsed" :can-create-deployment="canCreateDeploymentParsed"
:can-read-environment="canReadEnvironmentParsed" :can-read-environment="canReadEnvironmentParsed"
:service="service"/> :service="service"/>
<table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1" <table-pagination
:change="changePage" v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
:pageInfo="state.paginationInformation"/> :change="changePage"
</div> :pageInfo="state.paginationInformation"/>
</div> </div>
</div> </div>
`, </div>
}); </template>
spec/javascripts/environments/environment_spec.js
View file @ 6ae76738
import Vue from 'vue'; import Vue from 'vue';
import '~/flash'; import '~/flash';
import EnvironmentsComponent from '~/environments/components/environment'; import environmentsComponent from '~/environments/components/environment.vue';
import { environment, folder } from './mock_data'; import { environment, folder } from './mock_data';
describe('Environment', () => { describe('Environment', () => {
preloadFixtures('static/environments/environments.html.raw'); preloadFixtures('static/environments/environments.html.raw');
let EnvironmentsComponent;
let component; let component;
beforeEach(() => { beforeEach(() => {
loadFixtures('static/environments/environments.html.raw'); loadFixtures('static/environments/environments.html.raw');
EnvironmentsComponent = Vue.extend(environmentsComponent);
}); });
describe('successfull request', () => { describe('successfull request', () => {
......
spec/javascripts/environments/folder/environments_folder_view_spec.js
View file @ 6ae76738
import Vue from 'vue'; import Vue from 'vue';
import '~/flash'; import '~/flash';
import EnvironmentsFolderViewComponent from '~/environments/folder/environments_folder_view'; import environmentsFolderViewComponent from '~/environments/folder/environments_folder_view.vue';
import { environmentsList } from '../mock_data'; import { environmentsList } from '../mock_data';
describe('Environments Folder View', () => { describe('Environments Folder View', () => {
preloadFixtures('static/environments/environments_folder_view.html.raw'); preloadFixtures('static/environments/environments_folder_view.html.raw');
let EnvironmentsFolderViewComponent;
beforeEach(() => { beforeEach(() => {
loadFixtures('static/environments/environments_folder_view.html.raw'); loadFixtures('static/environments/environments_folder_view.html.raw');
EnvironmentsFolderViewComponent = Vue.extend(environmentsFolderViewComponent);
window.history.pushState({}, null, 'environments/folders/build'); window.history.pushState({}, null, 'environments/folders/build');
}); });
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7