Update other components affected by reordering

- Set a default group name when none is available
- Ensure embed reaches the right dashboard store values
- Update specs affected by re-ordering of data

app/assets/javascripts/monitoring/components/embed.vue

@@ -37,7 +37,7 @@ export default {
   computed: {
     ...mapState('monitoringDashboard', ['dashboard', 'metricsWithData']),
     charts() {
-      const groupWithMetrics = this.dashboard.groups.find(group =>
+      const groupWithMetrics = this.dashboard.panel_groups.find(group =>
         group.metrics.find(chart => this.chartHasData(chart)),
       ) || { metrics: [] };
 

app/assets/javascripts/monitoring/stores/mutations.js

@@ -12,7 +12,7 @@ export default {
   },
   [types.RECEIVE_METRICS_DATA_SUCCESS](state, groupData) {
     state.dashboard.panel_groups = groupData.map((group, i) => {
-      const key = `${slugify(group.group)}-${i}`;
+      const key = `${slugify(group.group || 'default')}-${i}`;
       let { metrics = [], panels = [] } = group;
 
       // each panel has metric information that needs to be normalized

spec/javascripts/monitoring/charts/time_series_spec.js

@@ -23,7 +23,7 @@ describe('Time series component', () => {
     store = createStore();
     store.commit(`monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`, MonitoringMock.data);
     store.commit(`monitoringDashboard/${types.RECEIVE_DEPLOYMENTS_DATA_SUCCESS}`, deploymentData);
-    [mockGraphData] = store.state.monitoringDashboard.groups[0].metrics;
+    [, mockGraphData] = store.state.monitoringDashboard.dashboard.panel_groups[0].metrics;
 
     makeTimeSeriesChart = (graphData, type) =>
       shallowMount(TimeSeries, {

spec/javascripts/monitoring/store/actions_spec.js

@@ -291,9 +291,9 @@ describe('Monitoring store actions', () => {
     it('dispatches fetchPrometheusMetric for each panel query', done => {
       const params = {};
       const state = storeState();
-      state.groups = metricsDashboardResponse.dashboard.panel_groups;
+      state.dashboard.panel_groups = metricsDashboardResponse.dashboard.panel_groups;
 
-      const metric = state.groups[0].panels[0].metrics[0];
+      const metric = state.dashboard.panel_groups[0].panels[0].metrics[0];
 
       fetchPrometheusMetrics({ state, commit, dispatch }, params)
         .then(() => {

spec/javascripts/monitoring/store/mutations_spec.js

@@ -20,7 +20,7 @@ describe('Monitoring mutations', () => {
     let groups;
 
     beforeEach(() => {
-      stateCopy.groups = [];
+      stateCopy.dashboard.panel_groups = [];
       groups = metricsGroupsAPIResponse.data;
     });
 
@@ -28,8 +28,11 @@ describe('Monitoring mutations', () => {
       mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, groups);
 
       const expectedTimestamp = '2017-05-25T08:22:34.925Z';
-      const expectedValue = 0.0010794445585559514;
-      const [timestamp, value] = stateCopy.groups[0].metrics[0].queries[0].result[0].values[0];
+      const expectedValue = 8.0390625;
+      const [
+        timestamp,
+        value,
+      ] = stateCopy.dashboard.panel_groups[0].metrics[0].queries[0].result[0].values[0];
 
       expect(timestamp).toEqual(expectedTimestamp);
       expect(value).toEqual(expectedValue);
@@ -38,25 +41,25 @@ describe('Monitoring mutations', () => {
     it('contains two groups that contains, one of which has two queries sorted by priority', () => {
       mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, groups);
 
-      expect(stateCopy.groups).toBeDefined();
-      expect(stateCopy.groups.length).toEqual(2);
-      expect(stateCopy.groups[0].metrics.length).toEqual(2);
+      expect(stateCopy.dashboard.panel_groups).toBeDefined();
+      expect(stateCopy.dashboard.panel_groups.length).toEqual(2);
+      expect(stateCopy.dashboard.panel_groups[0].metrics.length).toEqual(2);
     });
 
     it('assigns queries a metric id', () => {
       mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, groups);
 
-      expect(stateCopy.groups[1].metrics[0].queries[0].metricId).toEqual('100');
+      expect(stateCopy.dashboard.panel_groups[1].metrics[0].queries[0].metricId).toEqual('100');
     });
 
     it('removes the data if all the values from a query are not defined', () => {
       mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, groups);
 
-      expect(stateCopy.groups[1].metrics[0].queries[0].result.length).toEqual(0);
+      expect(stateCopy.dashboard.panel_groups[1].metrics[0].queries[0].result.length).toEqual(0);
     });
 
     it('assigns metric id of null if metric has no id', () => {
-      stateCopy.groups = [];
+      stateCopy.dashboard.panel_groups = [];
       const noId = groups.map(group => ({
         ...group,
         ...{
@@ -70,7 +73,7 @@ describe('Monitoring mutations', () => {
 
       mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, noId);
 
-      stateCopy.groups.forEach(group => {
+      stateCopy.dashboard.panel_groups.forEach(group => {
         group.metrics.forEach(metric => {
           expect(metric.queries.every(query => query.metricId === null)).toBe(true);
         });
@@ -87,13 +90,13 @@ describe('Monitoring mutations', () => {
       it('aliases group panels to metrics for backwards compatibility', () => {
         mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, dashboardGroups);
 
-        expect(stateCopy.groups[0].metrics[0]).toBeDefined();
+        expect(stateCopy.dashboard.panel_groups[0].metrics[0]).toBeDefined();
       });
 
       it('aliases panel metrics to queries for backwards compatibility', () => {
         mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, dashboardGroups);
 
-        expect(stateCopy.groups[0].metrics[0].queries).toBeDefined();
+        expect(stateCopy.dashboard.panel_groups[0].metrics[0].queries).toBeDefined();
       });
     });
   });