Skip to content

G
gitlab-ce
Commit 7bc15ee8 authored by Phil Hughes's avatar Phil Hughes
Browse files
Options

Merge branch 'ee-5845-extract-ee-environments-files' into 'master' 

Replaces vue resource with axios for environments code

See merge request gitlab-org/gitlab-ee!5746
parents 0c38239c 33a2ce0b
Hide whitespace changes
Inline Side-by-side
Showing with 164 additions and 308 deletions
app/assets/javascripts/environments/components/environments_app.vue
View file @ 7bc15ee8
......@@ -78,8 +78,7 @@
this.store.updateEnvironmentProp(folder, 'isLoadingFolderContent', showLoader);
this.service.getFolderContent(folder.folder_path)
.then(resp => resp.json())
.then(response => this.store.setfolderContent(folder, response.environments))
.then(response => this.store.setfolderContent(folder, response.data.environments))
.then(() => this.store.updateEnvironmentProp(folder, 'isLoadingFolderContent', false))
.catch(() => {
Flash(s__('Environments|An error occurred while fetching the environments.'));
......
app/assets/javascripts/environments/mixins/environments_mixin.js
View file @ 7bc15ee8
......@@ -6,7 +6,6 @@ import Visibility from 'visibilityjs';
import Poll from '../../lib/utils/poll';
import {
getParameterByName,
parseQueryStringIntoObject,
} from '../../lib/utils/common_utils';
import { s__ } from '../../locale';
import Flash from '../../flash';
......@@ -46,17 +45,14 @@ export default {
methods: {
saveData(resp) {
const headers = resp.headers;
return resp.json().then((response) => {
this.isLoading = false;
if (_.isEqual(parseQueryStringIntoObject(resp.url.split('?')[1]), this.requestData)) {
this.store.storeAvailableCount(response.available_count);
this.store.storeStoppedCount(response.stopped_count);
this.store.storeEnvironments(response.environments);
this.store.setPagination(headers);
}
});
this.isLoading = false;
if (_.isEqual(resp.config.params, this.requestData)) {
this.store.storeAvailableCount(resp.data.available_count);
this.store.storeStoppedCount(resp.data.stopped_count);
this.store.storeEnvironments(resp.data.environments);
this.store.setPagination(resp.headers);
}
},
/**
......@@ -70,7 +66,7 @@ export default {
updateContent(parameters) {
this.updateInternalState(parameters);
// fetch new data
return this.service.get(this.requestData)
return this.service.fetchEnvironments(this.requestData)
.then(response => this.successCallback(response))
.then(() => {
// restart polling
......@@ -105,7 +101,7 @@ export default {
fetchEnvironments() {
this.isLoading = true;
return this.service.get(this.requestData)
return this.service.fetchEnvironments(this.requestData)
.then(this.successCallback)
.catch(this.errorCallback);
},
......@@ -141,7 +137,7 @@ export default {
this.poll = new Poll({
resource: this.service,
method: 'get',
method: 'fetchEnvironments',
data: this.requestData,
successCallback: this.successCallback,
errorCallback: this.errorCallback,
......
app/assets/javascripts/environments/services/environments_service.js
View file @ 7bc15ee8
/* eslint-disable class-methods-use-this */
import Vue from 'vue';
import VueResource from 'vue-resource';
Vue.use(VueResource);
import axios from '~/lib/utils/axios_utils';
export default class EnvironmentsService {
constructor(endpoint) {
this.environments = Vue.resource(endpoint);
this.environmentsEndpoint = endpoint;
this.folderResults = 3;
}
get(options = {}) {
fetchEnvironments(options = {}) {
const { scope, page } = options;
return this.environments.get({ scope, page });
}
getDeployBoard(endpoint) {
return Vue.http.get(endpoint);
return axios.get(this.environmentsEndpoint, { params: { scope, page } });
}
// eslint-disable-next-line class-methods-use-this
postAction(endpoint) {
return Vue.http.post(endpoint, {}, { emulateJSON: true });
return axios.post(endpoint, {}, { emulateJSON: true });
}
getFolderContent(folderUrl) {
return Vue.http.get(`${folderUrl}.json?per_page=${this.folderResults}`);
return axios.get(`${folderUrl}.json?per_page=${this.folderResults}`);
}
}
app/assets/javascripts/environments/stores/environments_store.js
View file @ 7bc15ee8
......@@ -133,48 +133,6 @@ export default class EnvironmentsStore {
return count;
}
/**
* Toggles deploy board visibility for the provided environment ID.
*
* @param {Object} environment
* @return {Array}
*/
toggleDeployBoard(environmentID) {
const environments = this.state.environments.slice();
this.state.environments = environments.map((env) => {
let updated = Object.assign({}, env);
if (env.id === environmentID) {
updated = Object.assign({}, updated, { isDeployBoardVisible: !env.isDeployBoardVisible });
}
return updated;
});
return this.state.environments;
}
/**
* Store deploy board data for given environment.
*
* @param {Number} environmentID
* @param {Object} deployBoard
* @return {Array}
*/
storeDeployBoard(environmentID, deployBoard) {
const environments = Object.assign([], this.state.environments);
this.state.environments = environments.map((env) => {
let updated = Object.assign({}, env);
if (env.id === environmentID) {
updated = Object.assign({}, updated, { deployBoardData: deployBoard });
}
return updated;
});
return this.state.environments;
}
/*
* Toggles folder open property for the given folder.
*
......@@ -241,7 +199,24 @@ export default class EnvironmentsStore {
return environments.filter(env => env.isFolder && env.isOpen);
}
getOpenDeployBoards() {
return this.state.environments.filter(env => env.isDeployBoardVisible);
/**
* Toggles deploy board visibility for the provided environment ID.
*
* @param {Object} environment
* @return {Array}
*/
toggleDeployBoard(environmentID) {
const environments = this.state.environments.slice();
this.state.environments = environments.map((env) => {
let updated = Object.assign({}, env);
if (env.id === environmentID) {
updated = Object.assign({}, updated, { isDeployBoardVisible: !env.isDeployBoardVisible });
}
return updated;
});
return this.state.environments;
}
}
spec/javascripts/environments/environments_app_spec.js
View file @ 7bc15ee8
import _ from 'underscore';
import Vue from 'vue';
import MockAdapter from 'axios-mock-adapter';
import axios from '~/lib/utils/axios_utils';
import environmentsComponent from '~/environments/components/environments_app.vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
import { headersInterceptor } from 'spec/helpers/vue_resource_helper';
import { environment, folder } from './mock_data';
describe('Environment', () => {
......@@ -18,103 +18,76 @@ describe('Environment', () => {
let EnvironmentsComponent;
let component;
let mock;
beforeEach(() => {
mock = new MockAdapter(axios);
EnvironmentsComponent = Vue.extend(environmentsComponent);
});
afterEach(() => {
component.$destroy();
mock.restore();
});
describe('successfull request', () => {
describe('without environments', () => {
const environmentsEmptyResponseInterceptor = (request, next) => {
next(request.respondWith(JSON.stringify([]), {
status: 200,
}));
};
beforeEach(() => {
Vue.http.interceptors.push(environmentsEmptyResponseInterceptor);
Vue.http.interceptors.push(headersInterceptor);
});
afterEach(() => {
Vue.http.interceptors = _.without(
Vue.http.interceptors, environmentsEmptyResponseInterceptor,
);
Vue.http.interceptors = _.without(Vue.http.interceptors, headersInterceptor);
});
beforeEach((done) => {
mock.onGet(mockData.endpoint).reply(200, { environments: [] });
it('should render the empty state', (done) => {
component = mountComponent(EnvironmentsComponent, mockData);
setTimeout(() => {
expect(
component.$el.querySelector('.js-new-environment-button').textContent,
).toContain('New environment');
expect(
component.$el.querySelector('.js-blank-state-title').textContent,
).toContain('You don\'t have any environments right now.');
done();
}, 0);
});
it('should render the empty state', () => {
expect(
component.$el.querySelector('.js-new-environment-button').textContent,
).toContain('New environment');
expect(
component.$el.querySelector('.js-blank-state-title').textContent,
).toContain('You don\'t have any environments right now.');
});
});
describe('with paginated environments', () => {
let backupInterceptors;
const environmentsResponseInterceptor = (request, next) => {
next((response) => {
response.headers.set('X-nExt-pAge', '2');
});
next(request.respondWith(JSON.stringify({
beforeEach((done) => {
mock.onGet(mockData.endpoint).reply(200, {
environments: [environment],
stopped_count: 1,
available_count: 0,
}), {
status: 200,
headers: {
'X-nExt-pAge': '2',
'x-page': '1',
'X-Per-Page': '1',
'X-Prev-Page': '',
'X-TOTAL': '37',
'X-Total-Pages': '2',
},
}));
};
beforeEach(() => {
backupInterceptors = Vue.http.interceptors;
Vue.http.interceptors = [
environmentsResponseInterceptor,
headersInterceptor,
];
component = mountComponent(EnvironmentsComponent, mockData);
});
}, {
'X-nExt-pAge': '2',
'x-page': '1',
'X-Per-Page': '1',
'X-Prev-Page': '',
'X-TOTAL': '37',
'X-Total-Pages': '2',
});
afterEach(() => {
Vue.http.interceptors = backupInterceptors;
});
component = mountComponent(EnvironmentsComponent, mockData);
it('should render a table with environments', (done) => {
setTimeout(() => {
expect(component.$el.querySelectorAll('table')).not.toBeNull();
expect(
component.$el.querySelector('.environment-name').textContent.trim(),
).toEqual(environment.name);
done();
}, 0);
});
it('should render a table with environments', () => {
expect(component.$el.querySelectorAll('table')).not.toBeNull();
expect(
component.$el.querySelector('.environment-name').textContent.trim(),
).toEqual(environment.name);
});
describe('pagination', () => {
it('should render pagination', (done) => {
setTimeout(() => {
expect(
component.$el.querySelectorAll('.gl-pagination li').length,
).toEqual(5);
done();
}, 0);
it('should render pagination', () => {
expect(
component.$el.querySelectorAll('.gl-pagination li').length,
).toEqual(5);
});
it('should make an API request when page is clicked', (done) => {
......@@ -133,7 +106,7 @@ describe('Environment', () => {
expect(component.updateContent).toHaveBeenCalledWith({ scope: 'stopped', page: '1' });
done();
});
}, 0);
});
});
......@@ -151,43 +124,32 @@ describe('Environment', () => {
});
describe('unsuccessfull request', () => {
const environmentsErrorResponseInterceptor = (request, next) => {
next(request.respondWith(JSON.stringify([]), {
status: 500,
}));
};
beforeEach(() => {
Vue.http.interceptors.push(environmentsErrorResponseInterceptor);
});
beforeEach((done) => {
mock.onGet(mockData.endpoint).reply(500, {});
afterEach(() => {
Vue.http.interceptors = _.without(
Vue.http.interceptors, environmentsErrorResponseInterceptor,
);
});
it('should render empty state', (done) => {
component = mountComponent(EnvironmentsComponent, mockData);
setTimeout(() => {
expect(
component.$el.querySelector('.js-blank-state-title').textContent,
).toContain('You don\'t have any environments right now.');
done();
}, 0);
});
it('should render empty state', () => {
expect(
component.$el.querySelector('.js-blank-state-title').textContent,
).toContain('You don\'t have any environments right now.');
});
});
describe('expandable folders', () => {
const environmentsResponseInterceptor = (request, next) => {
next(request.respondWith(JSON.stringify({
environments: [folder],
stopped_count: 0,
available_count: 1,
}), {
status: 200,
headers: {
beforeEach(() => {
mock.onGet(mockData.endpoint).reply(200,
{
environments: [folder],
stopped_count: 0,
available_count: 1,
},
{
'X-nExt-pAge': '2',
'x-page': '1',
'X-Per-Page': '1',
......@@ -195,18 +157,11 @@ describe('Environment', () => {
'X-TOTAL': '37',
'X-Total-Pages': '2',
},
}));
};
);
beforeEach(() => {
Vue.http.interceptors.push(environmentsResponseInterceptor);
component = mountComponent(EnvironmentsComponent, mockData);
});
mock.onGet(environment.folder_path).reply(200, { environments: [environment] });
afterEach(() => {
Vue.http.interceptors = _.without(
Vue.http.interceptors, environmentsResponseInterceptor,
);
component = mountComponent(EnvironmentsComponent, mockData);
});
it('should open a closed folder', (done) => {
......@@ -222,7 +177,7 @@ describe('Environment', () => {
).not.toContain('display: none');
done();
});
});
}, 0);
});
it('should close an opened folder', (done) => {
......@@ -244,7 +199,7 @@ describe('Environment', () => {
done();
});
});
});
}, 0);
});
it('should show children environments and a button to show all environments', (done) => {
......@@ -253,49 +208,32 @@ describe('Environment', () => {
component.$el.querySelector('.folder-name').click();
Vue.nextTick(() => {
const folderInterceptor = (request, next) => {
next(request.respondWith(JSON.stringify({
environments: [environment],
}), { status: 200 }));
};
Vue.http.interceptors.push(folderInterceptor);
// wait for next async request
setTimeout(() => {
expect(component.$el.querySelectorAll('.js-child-row').length).toEqual(1);
expect(component.$el.querySelector('.text-center > a.btn').textContent).toContain('Show all');
Vue.http.interceptors = _.without(Vue.http.interceptors, folderInterceptor);
done();
});
});
});
}, 0);
});
});
describe('methods', () => {
const environmentsEmptyResponseInterceptor = (request, next) => {
next(request.respondWith(JSON.stringify([]), {
status: 200,
}));
};
beforeEach(() => {
Vue.http.interceptors.push(environmentsEmptyResponseInterceptor);
Vue.http.interceptors.push(headersInterceptor);
mock.onGet(mockData.endpoint).reply(200,
{
environments: [],
stopped_count: 0,
available_count: 1,
},
{},
);
component = mountComponent(EnvironmentsComponent, mockData);
spyOn(history, 'pushState').and.stub();
});
afterEach(() => {
Vue.http.interceptors = _.without(
Vue.http.interceptors, environmentsEmptyResponseInterceptor,
);
Vue.http.interceptors = _.without(Vue.http.interceptors, headersInterceptor);
});
describe('updateContent', () => {
it('should set given parameters', (done) => {
component.updateContent({ scope: 'stopped', page: '3' })
......
spec/javascripts/environments/environments_store_spec.js
View file @ 7bc15ee8
......@@ -228,21 +228,4 @@ describe('Store', () => {
expect(store.getOpenFolders()[0]).toEqual(store.state.environments[1]);
});
});
describe('getOpenDeployBoards', () => {
it('should return open deploy boards', () => {
const environment = {
name: 'foo',
size: 1,
latest: {
id: 1,
},
rollout_status: deployBoardMockData,
};
store.storeEnvironments([environment]);
expect(store.getOpenDeployBoards().length).toEqual(1);
});
});
});
spec/javascripts/environments/folder/environments_folder_view_spec.js
View file @ 7bc15ee8
import _ from 'underscore';
import Vue from 'vue';
import MockAdapter from 'axios-mock-adapter';
import axios from '~/lib/utils/axios_utils';
import environmentsFolderViewComponent from '~/environments/folder/environments_folder_view.vue';
import { headersInterceptor } from 'spec/helpers/vue_resource_helper';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
import { environmentsList } from '../mock_data';
describe('Environments Folder View', () => {
let Component;
let component;
let mock;
const mockData = {
endpoint: 'environments.json',
folderName: 'review',
......@@ -17,46 +19,35 @@ describe('Environments Folder View', () => {
};
beforeEach(() => {
mock = new MockAdapter(axios);
Component = Vue.extend(environmentsFolderViewComponent);
});
afterEach(() => {
mock.restore();
component.$destroy();
});
describe('successfull request', () => {
const environmentsResponseInterceptor = (request, next) => {
next(request.respondWith(JSON.stringify({
beforeEach(() => {
mock.onGet(mockData.endpoint).reply(200, {
environments: environmentsList,
stopped_count: 1,
available_count: 0,
}), {
status: 200,
headers: {
'X-nExt-pAge': '2',
'x-page': '1',
'X-Per-Page': '2',
'X-Prev-Page': '',
'X-TOTAL': '20',
'X-Total-Pages': '10',
},
}));
};
beforeEach(() => {
Vue.http.interceptors.push(environmentsResponseInterceptor);
Vue.http.interceptors.push(headersInterceptor);
}, {
'X-nExt-pAge': '2',
'x-page': '1',
'X-Per-Page': '2',
'X-Prev-Page': '',
'X-TOTAL': '20',
'X-Total-Pages': '10',
});
component = mountComponent(Component, mockData);
});
afterEach(() => {
Vue.http.interceptors = _.without(
Vue.http.interceptors, environmentsResponseInterceptor,
);
Vue.http.interceptors = _.without(Vue.http.interceptors, headersInterceptor);
});
it('should render a table with environments', (done) => {
setTimeout(() => {
expect(component.$el.querySelectorAll('table')).not.toBeNull();
......@@ -144,25 +135,15 @@ describe('Environments Folder View', () => {
});
describe('unsuccessfull request', () => {
const environmentsErrorResponseInterceptor = (request, next) => {
next(request.respondWith(JSON.stringify([]), {
status: 500,
}));
};
beforeEach(() => {
Vue.http.interceptors.push(environmentsErrorResponseInterceptor);
});
mock.onGet(mockData.endpoint).reply(500, {
environments: [],
});
afterEach(() => {
Vue.http.interceptors = _.without(
Vue.http.interceptors, environmentsErrorResponseInterceptor,
);
component = mountComponent(Component, mockData);
});
it('should not render a table', (done) => {
component = mountComponent(Component, mockData);
setTimeout(() => {
expect(
component.$el.querySelector('table'),
......@@ -199,27 +180,15 @@ describe('Environments Folder View', () => {
});
describe('methods', () => {
const environmentsEmptyResponseInterceptor = (request, next) => {
next(request.respondWith(JSON.stringify([]), {
status: 200,
}));
};
beforeEach(() => {
Vue.http.interceptors.push(environmentsEmptyResponseInterceptor);
Vue.http.interceptors.push(headersInterceptor);
mock.onGet(mockData.endpoint).reply(200, {
environments: [],
});
component = mountComponent(Component, mockData);
spyOn(history, 'pushState').and.stub();
});
afterEach(() => {
Vue.http.interceptors = _.without(
Vue.http.interceptors, environmentsEmptyResponseInterceptor,
);
Vue.http.interceptors = _.without(Vue.http.interceptors, headersInterceptor);
});
describe('updateContent', () => {
it('should set given parameters', (done) => {
component.updateContent({ scope: 'stopped', page: '4' })
......
spec/javascripts/environments/mock_data.js
View file @ 7bc15ee8
......@@ -90,17 +90,36 @@ export const serverData = [
export const environment = {
name: 'DEV',
size: 1,
id: 7,
latest: {
id: 7,
name: 'DEV',
state: 'available',
external_url: null,
environment_type: null,
last_deployment: null,
'stop_action?': false,
environment_path: '/root/review-app/environments/7',
stop_path: '/root/review-app/environments/7/stop',
created_at: '2017-01-31T10:53:46.894Z',
updated_at: '2017-01-31T10:53:46.894Z',
folder_path: '/root/review-app/environments/7',
},
};
export const folder = {
folderName: 'build',
size: 5,
id: 12,
name: 'build/update-README',
state: 'available',
external_url: null,
environment_type: null,
environment_type: 'build',
last_deployment: null,
'stop_action?': false,
environment_path: '/root/review-app/environments/7',
stop_path: '/root/review-app/environments/7/stop',
created_at: '2017-01-31T10:53:46.894Z',
updated_at: '2017-01-31T10:53:46.894Z',
rollout_status: {},
environment_path: '/root/review-app/environments/12',
stop_path: '/root/review-app/environments/12/stop',
created_at: '2017-02-01T19:42:18.400Z',
updated_at: '2017-02-01T19:42:18.400Z',
};
export const deployBoardMockData = {
......@@ -138,19 +157,3 @@ export const deployBoardMockData = {
completion: 100,
status: 'found',
};
export const folder = {
folderName: 'build',
size: 5,
id: 12,
name: 'build/update-README',
state: 'available',
external_url: null,
environment_type: 'build',
last_deployment: null,
'stop_action?': false,
environment_path: '/root/review-app/environments/12',
stop_path: '/root/review-app/environments/12/stop',
created_at: '2017-02-01T19:42:18.400Z',
updated_at: '2017-02-01T19:42:18.400Z',
};
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