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

Changed the feature flag usage

Browse source 
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);