Fix monitoring dashboard custom charts

This fixes the monitoring dashboard custom
charts that were shrinking due to an extra
<div> tag

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

@@ -532,44 +532,41 @@ export default {
         :show-panels="showPanels"
         :collapse-group="collapseGroup(groupData.key)"
       >
-        <div v-if="!groupSingleEmptyState(groupData.key)">
-          <vue-draggable
-            :value="groupData.panels"
-            group="metrics-dashboard"
-            :component-data="{ attrs: { class: 'row mx-0 w-100' } }"
-            :disabled="!isRearrangingPanels"
-            @input="updatePanels(groupData.key, $event)"
+        <vue-draggable
+          v-if="!groupSingleEmptyState(groupData.key)"
+          :value="groupData.panels"
+          group="metrics-dashboard"
+          :component-data="{ attrs: { class: 'row mx-0 w-100' } }"
+          :disabled="!isRearrangingPanels"
+          @input="updatePanels(groupData.key, $event)"
+        >
+          <div
+            v-for="(graphData, graphIndex) in groupData.panels"
+            :key="`panel-type-${graphIndex}`"
+            class="col-12 col-lg-6 px-2 mb-2 draggable"
+            :class="{ 'draggable-enabled': isRearrangingPanels }"
           >
-            <div
-              v-for="(graphData, graphIndex) in groupData.panels"
-              :key="`panel-type-${graphIndex}`"
-              class="col-12 col-lg-6 px-2 mb-2 draggable"
-              :class="{ 'draggable-enabled': isRearrangingPanels }"
-            >
-              <div class="position-relative draggable-panel js-draggable-panel">
-                <div
-                  v-if="isRearrangingPanels"
-                  class="draggable-remove js-draggable-remove p-2 w-100 position-absolute d-flex justify-content-end"
-                  @click="removePanel(groupData.key, groupData.panels, graphIndex)"
-                >
-                  <a class="mx-2 p-2 draggable-remove-link" :aria-label="__('Remove')">
-                    <icon name="close" />
-                  </a>
-                </div>
-
-                <panel-type
-                  :clipboard-text="
-                    generateLink(groupData.group, graphData.title, graphData.y_label)
-                  "
-                  :graph-data="graphData"
-                  :alerts-endpoint="alertsEndpoint"
-                  :prometheus-alerts-available="prometheusAlertsAvailable"
-                  :index="`${index}-${graphIndex}`"
-                />
+            <div class="position-relative draggable-panel js-draggable-panel">
+              <div
+                v-if="isRearrangingPanels"
+                class="draggable-remove js-draggable-remove p-2 w-100 position-absolute d-flex justify-content-end"
+                @click="removePanel(groupData.key, groupData.panels, graphIndex)"
+              >
+                <a class="mx-2 p-2 draggable-remove-link" :aria-label="__('Remove')">
+                  <icon name="close" />
+                </a>
               </div>
+
+              <panel-type
+                :clipboard-text="generateLink(groupData.group, graphData.title, graphData.y_label)"
+                :graph-data="graphData"
+                :alerts-endpoint="alertsEndpoint"
+                :prometheus-alerts-available="prometheusAlertsAvailable"
+                :index="`${index}-${graphIndex}`"
+              />
             </div>
-          </vue-draggable>
-        </div>
+          </div>
+        </vue-draggable>
         <div v-else class="py-5 col col-sm-10 col-md-8 col-lg-7 col-xl-6">
           <group-empty-state
             ref="empty-group"

changelogs/unreleased/jivanvl-fix-charts-shrinkage.yml

+---
+title: Fix custom charts in monitoring dashboard shrinking
+merge_request: 23649
+author:
+type: fixed

spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dashboard template matches the default snapshot 1`] = `
+<div
+  class="prometheus-graphs"
+>
+  <div
+    class="prometheus-graphs-header gl-p-3 pb-0 border-bottom bg-gray-light"
+  >
+    <div
+      class="row"
+    >
+      <gl-form-group-stub
+        class="col-sm-12 col-md-6 col-lg-2"
+        label="Dashboard"
+        label-for="monitor-dashboards-dropdown"
+        label-size="sm"
+      >
+        <dashboards-dropdown-stub
+          class="mb-0 d-flex"
+          defaultbranch="master"
+          id="monitor-dashboards-dropdown"
+          selecteddashboard="[object Object]"
+          toggle-class="dropdown-menu-toggle"
+        />
+      </gl-form-group-stub>
+       
+      <gl-form-group-stub
+        class="col-sm-6 col-md-6 col-lg-2"
+        label="Environment"
+        label-for="monitor-environments-dropdown"
+        label-size="sm"
+      >
+        <gl-dropdown-stub
+          class="mb-0 d-flex"
+          data-qa-selector="environments_dropdown"
+          id="monitor-environments-dropdown"
+          menu-class="monitor-environment-dropdown-menu"
+          text="production"
+          toggle-class="dropdown-menu-toggle"
+        >
+          <div
+            class="d-flex flex-column overflow-hidden"
+          >
+            <gl-dropdown-header-stub
+              class="text-center"
+            >
+              Environment
+            </gl-dropdown-header-stub>
+             
+            <gl-dropdown-divider-stub />
+             
+            <!---->
+             
+            <div
+              class="flex-fill overflow-auto"
+            />
+             
+            <!---->
+          </div>
+        </gl-dropdown-stub>
+      </gl-form-group-stub>
+       
+      <gl-form-group-stub
+        class="col-sm-6 col-md-6 col-lg-4"
+        label="Show last"
+        label-for="monitor-time-window-dropdown"
+        label-size="sm"
+      >
+        <date-time-picker-stub
+          end="2020-01-01T18:57:47.000Z"
+          start="2020-01-01T18:27:47.000Z"
+          timewindows="[object Object]"
+        />
+      </gl-form-group-stub>
+       
+      <!---->
+    </div>
+  </div>
+   
+  <empty-state-stub
+    clusterspath="/path/to/clusters"
+    documentationpath="/path/to/docs"
+    emptygettingstartedsvgpath="/path/to/getting-started.svg"
+    emptyloadingsvgpath="/path/to/loading.svg"
+    emptynodatasmallsvgpath="/path/to/no-data-small.svg"
+    emptynodatasvgpath="/path/to/no-data.svg"
+    emptyunabletoconnectsvgpath="/path/to/unable-to-connect.svg"
+    selectedstate="gettingStarted"
+    settingspath="/path/to/settings"
+  />
+</div>
+`;

spec/frontend/monitoring/components/dashboard_template_spec.js

+import { shallowMount } from '@vue/test-utils';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+import Dashboard from '~/monitoring/components/dashboard.vue';
+import { createStore } from '~/monitoring/stores';
+import { propsData } from '../init_utils';
+
+jest.mock('~/lib/utils/url_utility', () => ({
+  getParameterValues: jest.fn().mockImplementation(param => {
+    if (param === 'start') return ['2020-01-01T18:27:47.000Z'];
+    if (param === 'end') return ['2020-01-01T18:57:47.000Z'];
+    return [];
+  }),
+}));
+
+describe('Dashboard template', () => {
+  let wrapper;
+  let store;
+  let mock;
+
+  beforeEach(() => {
+    store = createStore();
+    mock = new MockAdapter(axios);
+  });
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.destroy();
+      wrapper = null;
+    }
+    mock.restore();
+  });
+
+  it('matches the default snapshot', () => {
+    wrapper = shallowMount(Dashboard, {
+      propsData: { ...propsData },
+      methods: {
+        fetchData: jest.fn(),
+      },
+      store,
+    });
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});