Improve store setup

- Use action in components to save resorting
- Rename mutation to clarify
- Save to store using @input callback

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

 <script>
 import _ from 'underscore';
-import { mapActions, mapMutations, mapState } from 'vuex';
+import { mapActions, mapState } from 'vuex';
 import VueDraggable from 'vuedraggable';
 import {
   GlButton,
@@ -17,9 +17,6 @@ import Icon from '~/vue_shared/components/icon.vue';
 import { getParameterValues, mergeUrlParams, redirectTo } from '~/lib/utils/url_utility';
 import invalidUrl from '~/lib/utils/invalid_url';
 import PanelType from 'ee_else_ce/monitoring/components/panel_type.vue';
-
-import { SET_PANEL_GROUP_PANELS } from '../stores/mutation_types';
-
 import DateTimePicker from './date_time_picker/date_time_picker.vue';
 import MonitorTimeSeriesChart from './charts/time_series.vue';
 import MonitorSingleStatChart from './charts/single_stat.vue';
@@ -164,7 +161,7 @@ export default {
     rearrangePanelsAvailable: {
       type: Boolean,
       required: false,
-      default: true,
+      default: false,
     },
   },
   data() {
@@ -180,7 +177,6 @@ export default {
     canAddMetrics() {
       return this.customMetricsAvailable && this.customMetricsPath.length;
     },
-
     ...mapState('monitoringDashboard', [
       'dashboard',
       'emptyState',
@@ -206,7 +202,7 @@ export default {
     },
     alertWidgetAvailable() {
       return IS_EE && this.prometheusAlertsAvailable && this.alertsEndpoint;
-    }
+    },
   },
   created() {
     this.setEndpoints({
@@ -258,9 +254,8 @@ export default {
       'setGettingStartedEmptyState',
       'setEndpoints',
       'setDashboardEnabled',
+      'setPanelGroupMetrics',
     ]),
-    // TODO Switch to actions for consistency
-    ...mapMutations('monitoringDashboard', [SET_PANEL_GROUP_PANELS]),
     chartsWithData(charts) {
       if (!this.useDashboardEndpoint) {
         return charts;
@@ -335,12 +330,10 @@ export default {
     downloadCSVOptions,
     generateLinkToChartOptions,
 
-    updateMetricsOrder(key, metrics) {
-      console.log('updateMetricsOrder');
-      console.log(metrics.map(metric => metric.title));
-      this[SET_PANEL_GROUP_PANELS]({
-        key,
+    updateMetricsOrder(metrics, key) {
+      this.setPanelGroupMetrics({
         metrics,
+        key,
       });
     },
   },
@@ -492,19 +485,11 @@ export default {
         <template v-if="additionalPanelTypesEnabled">
           <vue-draggable
             :value="groupData.metrics"
-            group="metrics-dashboard"
             :component-data="{ attrs: { class: 'row mx-0 w-100' } }"
             :disabled="!isRearrangingPanels"
-            @input="updateMetricsOrder(groupData.key, groupData.metrics)"
-          >
-          <!-- TODO Original vue-draggable -->
-          <!-- <vue-draggable
-            :list="groupData.metrics"
             group="metrics-dashboard"
-            :component-data="{ attrs: { class: 'row mx-0 w-100' } }"
-            :disabled="!isRearrangingPanels"
-          > -->
-            <!-- TODO Find another key -->
+            @input="updateMetricsOrder($event, groupData.key)"
+          >
             <div
               v-for="(graphData, graphIndex) in groupData.metrics"
               :key="`panel-type-${graphData}-${graphData.title}`"

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

@@ -221,5 +221,15 @@ export const fetchEnvironmentsData = ({ state, dispatch }) => {
     });
 };
 
+/**
+ * Set a new array of metrics to a panel group
+ * @param {*} data An object containing
+ *   - `key` with a unique panel key
+ *   - `metrics` with the metrics array
+ */
+export const setPanelGroupMetrics = ({ commit }, data) => {
+  commit(types.SET_PANEL_GROUP_METRICS, data);
+};
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};

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

@@ -16,5 +16,4 @@ export const SET_ENDPOINTS = 'SET_ENDPOINTS';
 export const SET_GETTING_STARTED_EMPTY_STATE = 'SET_GETTING_STARTED_EMPTY_STATE';
 export const SET_NO_DATA_EMPTY_STATE = 'SET_NO_DATA_EMPTY_STATE';
 export const SET_SHOW_ERROR_BANNER = 'SET_SHOW_ERROR_BANNER';
-
-export const SET_PANEL_GROUP_PANELS = 'SET_PANEL_GROUP_PANELS';
+export const SET_PANEL_GROUP_METRICS = 'SET_PANEL_GROUP_METRICS';

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

 import Vue from 'vue';
+import { slugify } from '~/lib/utils/text_utility';
 import * as types from './mutation_types';
-import { slugify } from '~/lib/utils/text_utility.js';
 import { normalizeMetrics, sortMetrics, normalizeMetric, normalizeQueryResult } from './utils';
 
 const normalizePanel = panel => panel.metrics.map(normalizeMetric);
@@ -11,7 +11,7 @@ export default {
     state.showEmptyState = true;
   },
   [types.RECEIVE_METRICS_DATA_SUCCESS](state, groupData) {
-    state.dashboard.panel_groups = groupData.map(panelGroup => {
+    state.dashboard.panel_groups = groupData.map((panelGroup, i) => {
       let { metrics = [], panels = [] } = panelGroup;
 
       // each panel has metric information that needs to be normalized
@@ -34,8 +34,7 @@ export default {
       return {
         ...panelGroup,
         panels,
-        // TODO Try to find another unique factor
-        key: slugify((panelGroup.group || '').trim()),
+        key: `${slugify(panelGroup.group)}-${i}`,
         metrics: normalizeMetrics(sortMetrics(metrics)),
       };
     });
@@ -109,10 +108,8 @@ export default {
   [types.SET_SHOW_ERROR_BANNER](state, enabled) {
     state.showErrorBanner = enabled;
   },
-  [types.SET_PANEL_GROUP_PANELS](state, payload) {
+  [types.SET_PANEL_GROUP_METRICS](state, payload) {
     const panelGroup = state.dashboard.panel_groups.find(pg => payload.key === pg.key);
-    console.log(panelGroup.metrics.map(metric => metric.title));
-    console.log(payload.metrics.map(metric => metric.title));
     panelGroup.metrics = payload.metrics;
   },
 };