kotovalexarian-likes-gitlab
/
gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Changed the feature flag usage 

In order for the dashboard component not to fail, the feature flag
is now required by default
This commit is contained in:
Jose Vargas 2019-04-02 14:02:29 -06:00
parent 217e9e4db1
commit a6f9f79b73
5 changed files with 60 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/assets/javascripts/monitoring/components/dashboard.vue
View File

@ -89,6 +89,10 @@ export default {
type: String,
required: true,
},
showTimeWindowDropdown: {
type: Boolean,
required: true,
},
},
data() {
return {
@ -99,11 +103,6 @@ export default {
selectedTimeWindow: '',
};
},
computed: {
showTimeWindowDropdown() {
return gon.features.metricsTimeWindow;
},
},
created() {
this.service = new MonitoringService({
metricsEndpoint: this.metricsEndpoint,

1
app/assets/javascripts/monitoring/monitoring_bundle.js
View File

@ -14,6 +14,7 @@ export default () => {
props: {
...el.dataset,
hasMetrics: parseBoolean(el.dataset.hasMetrics),
showTimeWindowDropdown: gon.features.metricsTimeWindow,
},
});
},

8
app/assets/javascripts/monitoring/services/monitoring_service.js
View File

@ -33,13 +33,7 @@ export default class MonitoringService {
}
getGraphsData(params = {}) {
return backOffRequest(() =>
axios.get(this.metricsEndpoint, {
params: {
params,
},
}),
)
return backOffRequest(() => axios.get(this.metricsEndpoint, { params }))
.then(resp => resp.data)
.then(response => {
if (!response || !response.data || !response.success) {

4
app/assets/javascripts/monitoring/utils.js
View File

@ -1,13 +1,11 @@
import { timeWindows, msPerMinute } from './constants';
export const getTimeDifferenceMinutes = timeWindow => {
const getTimeDifferenceMinutes = timeWindow => {
switch (timeWindow) {
case timeWindows.thirtyMinutes:
return 30;
case timeWindows.threeHours:
return 60 * 3;
case timeWindows.eightHours:
return 60 * 8;
case timeWindows.oneDay:
return 60 * 24 * 1;
case timeWindows.threeDays:

72
spec/javascripts/monitoring/dashboard_spec.js
View File

@ -39,17 +39,11 @@ describe('Dashboard', () => {
ee: false,
};
gon.features = {
metricsTimeWindow: true,
};
mock = new MockAdapter(axios);
DashboardComponent = Vue.extend(Dashboard);
});
afterEach(() => {
gon.features = {};
mock.restore();
});
@ -57,7 +51,7 @@ describe('Dashboard', () => {
it('shows a getting started empty state when no metrics are present', () => {
const component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'),
propsData,
propsData: { ...propsData, showTimeWindowDropdown: false },
});
expect(component.$el.querySelector('.prometheus-graphs')).toBe(null);
@ -73,7 +67,7 @@ describe('Dashboard', () => {
it('shows up a loading state', done => {
const component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'),
propsData: { ...propsData, hasMetrics: true },
propsData: { ...propsData, hasMetrics: true, showTimeWindowDropdown: false },
});
Vue.nextTick(() => {
@ -85,7 +79,12 @@ describe('Dashboard', () => {
it('hides the legend when showLegend is false', done => {
const component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'),
propsData: { ...propsData, hasMetrics: true, showLegend: false },
propsData: {
...propsData,
hasMetrics: true,
showLegend: false,
showTimeWindowDropdown: false,
},
});
setTimeout(() => {
@ -99,7 +98,12 @@ describe('Dashboard', () => {
it('hides the group panels when showPanels is false', done => {
const component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'),
propsData: { ...propsData, hasMetrics: true, showPanels: false },
propsData: {
...propsData,
hasMetrics: true,
showPanels: false,
showTimeWindowDropdown: false,
},
});
setTimeout(() => {
@ -113,7 +117,12 @@ describe('Dashboard', () => {
it('renders the environments dropdown with a number of environments', done => {
const component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'),
propsData: { ...propsData, hasMetrics: true, showPanels: false },
propsData: {
...propsData,
hasMetrics: true,
showPanels: false,
showTimeWindowDropdown: false,
},
});
component.store.storeEnvironmentsData(environmentData);
@ -131,7 +140,12 @@ describe('Dashboard', () => {
it('hides the environments dropdown list when there is no environments', done => {
const component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'),
propsData: { ...propsData, hasMetrics: true, showPanels: false },
propsData: {
...propsData,
hasMetrics: true,
showPanels: false,
showTimeWindowDropdown: false,
},
});
component.store.storeEnvironmentsData([]);
@ -149,7 +163,12 @@ describe('Dashboard', () => {
it('renders the environments dropdown with a single is-active element', done => {
const component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'),
propsData: { ...propsData, hasMetrics: true, showPanels: false },
propsData: {
...propsData,
hasMetrics: true,
showPanels: false,
showTimeWindowDropdown: false,
},
});
component.store.storeEnvironmentsData(environmentData);
@ -173,6 +192,7 @@ describe('Dashboard', () => {
hasMetrics: true,
showPanels: false,
environmentsEndpoint: '',
showTimeWindowDropdown: false,
},
});
@ -184,11 +204,15 @@ describe('Dashboard', () => {
});
});
it('renders the time window dropdown with a set of options', done => {
gon.features.metricsTimeWindow = false;
it('does not show the time window dropdown when the feature flag is not set', done => {
const component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'),
propsData: { ...propsData, hasMetrics: true, showPanels: false },
propsData: {
...propsData,
hasMetrics: true,
showPanels: false,
showTimeWindowDropdown: false,
},
});
setTimeout(() => {
@ -200,10 +224,15 @@ describe('Dashboard', () => {
});
});
it('does not show the time window dropdown when the feature flag is not set', done => {
it('rewnders the time window dropdown with a set of options', done => {
const component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'),
propsData: { ...propsData, hasMetrics: true, showPanels: false },
propsData: {
...propsData,
hasMetrics: true,
showPanels: false,
showTimeWindowDropdown: true,
},
});
const numberOfTimeWindows = Object.keys(timeWindows).length;
@ -234,7 +263,12 @@ describe('Dashboard', () => {
it('sets elWidth to page width when the sidebar is resized', done => {
const component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'),
propsData: { ...propsData, hasMetrics: true, showPanels: false },
propsData: {
...propsData,
hasMetrics: true,
showPanels: false,
showTimeWindowDropdown: false,
},
});
expect(component.elWidth).toEqual(0);