Remove the additional panel types feature flagjivanvl-remove-feature-flag-additional-panel-type-support

This removes the feature flag for supporting additional panel
types, allowing to utilize the currently supported chart types
single stat and area chart types

9 files changed, 78 insertions, 190 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index c414c26ca61..e5688558280 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -8,9 +8,9 @@ import {
   GlModalDirective,
   GlTooltipDirective,
 } from '@gitlab/ui';
-import _ from 'underscore';
 import { mapActions, mapState } from 'vuex';
-import { __, s__ } from '~/locale';
+import _ from 'underscore';
+import { s__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import { getParameterValues, mergeUrlParams } from '~/lib/utils/url_utility';
 import invalidUrl from '~/lib/utils/invalid_url';
@@ -166,7 +166,6 @@ export default {
       'useDashboardEndpoint',
       'allDashboards',
       'multipleDashboardsEnabled',
-      'additionalPanelTypesEnabled',
     ]),
     firstDashboard() {
       return this.allDashboards[0] || {};
@@ -177,9 +176,6 @@ export default {
     addingMetricsAvailable() {
       return IS_EE && this.canAddMetrics && !this.showEmptyState;
     },
-    alertWidgetAvailable() {
-      return IS_EE && this.prometheusAlertsAvailable && this.alertsEndpoint;
-    },
   },
   created() {
     this.setEndpoints({
@@ -238,33 +234,6 @@ export default {
         chart.metrics.some(metric => this.metricsWithData.includes(metric.metric_id)),
       );
     },
-    csvText(graphData) {
-      const chartData = graphData.queries[0].result[0].values;
-      const yLabel = graphData.y_label;
-      const header = `timestamp,${yLabel}\r\n`; // eslint-disable-line @gitlab/i18n/no-non-i18n-strings
-      return chartData.reduce((csv, data) => {
-        const row = data.join(',');
-        return `${csv}${row}\r\n`;
-      }, header);
-    },
-    downloadCsv(graphData) {
-      const data = new Blob([this.csvText(graphData)], { type: 'text/plain' });
-      return window.URL.createObjectURL(data);
-    },
-    // TODO: BEGIN, Duplicated code with panel_type until feature flag is removed
-    // Issue number: https://gitlab.com/gitlab-org/gitlab-ce/issues/63845
-    getGraphAlerts(queries) {
-      if (!this.allAlerts) return {};
-      const metricIdsForChart = queries.map(q => q.metricId);
-      return _.pick(this.allAlerts, alert => metricIdsForChart.includes(alert.metricId));
-    },
-    getGraphAlertValues(queries) {
-      return Object.values(this.getGraphAlerts(queries));
-    },
-    showToast() {
-      this.$toast.show(__('Link copied to clipboard'));
-    },
-    // TODO: END
     generateLink(group, title, yLabel) {
       const dashboard = this.currentDashboard || this.firstDashboard.path;
       const params = _.pick({ dashboard, group, title, y_label: yLabel }, value => value != null);
@@ -442,69 +411,14 @@ export default {
         :show-panels="showPanels"
         :collapse-group="groupHasData(groupData)"
       >
-        <template v-if="additionalPanelTypesEnabled">
-          <panel-type
-            v-for="(graphData, graphIndex) in groupData.metrics"
-            :key="`panel-type-${graphIndex}`"
-            :clipboard-text="generateLink(groupData.group, graphData.title, graphData.y_label)"
-            :graph-data="graphData"
-            :dashboard-width="elWidth"
-            :index="`${index}-${graphIndex}`"
-          />
-        </template>
-        <template v-else>
-          <monitor-area-chart
-            v-for="(graphData, graphIndex) in chartsWithData(groupData.metrics)"
-            :key="graphIndex"
-            :graph-data="graphData"
-            :deployment-data="deploymentData"
-            :thresholds="getGraphAlertValues(graphData.queries)"
-            :container-width="elWidth"
-            :project-path="projectPath"
-            group-id="monitor-area-chart"
-          >
-            <div class="d-flex align-items-center">
-              <alert-widget
-                v-if="alertWidgetAvailable && graphData"
-                :modal-id="`alert-modal-${index}-${graphIndex}`"
-                :alerts-endpoint="alertsEndpoint"
-                :relevant-queries="graphData.queries"
-                :alerts-to-manage="getGraphAlerts(graphData.queries)"
-                @setAlerts="setAlerts"
-              />
-              <gl-dropdown
-                v-gl-tooltip
-                class="mx-2"
-                toggle-class="btn btn-transparent border-0"
-                :right="true"
-                :no-caret="true"
-                :title="__('More actions')"
-              >
-                <template slot="button-content">
-                  <icon name="ellipsis_v" class="text-secondary" />
-                </template>
-                <gl-dropdown-item :href="downloadCsv(graphData)" download="chart_metrics.csv">
-                  {{ __('Download CSV') }}
-                </gl-dropdown-item>
-                <gl-dropdown-item
-                  class="js-chart-link"
-                  :data-clipboard-text="
-                    generateLink(groupData.group, graphData.title, graphData.y_label)
-                  "
-                  @click="showToast"
-                >
-                  {{ __('Generate link to chart') }}
-                </gl-dropdown-item>
-                <gl-dropdown-item
-                  v-if="alertWidgetAvailable"
-                  v-gl-modal="`alert-modal-${index}-${graphIndex}`"
-                >
-                  {{ __('Alerts') }}
-                </gl-dropdown-item>
-              </gl-dropdown>
-            </div>
-          </monitor-area-chart>
-        </template>
+        <panel-type
+          v-for="(graphData, graphIndex) in groupData.metrics"
+          :key="`panel-type-${graphIndex}`"
+          :clipboard-text="generateLink(groupData.group, graphData.title, graphData.y_label)"
+          :graph-data="graphData"
+          :dashboard-width="elWidth"
+          :index="`${index}-${graphIndex}`"
+        />
       </graph-group>
     </div>
     <empty-state
diff --git a/app/assets/javascripts/monitoring/monitoring_bundle.js b/app/assets/javascripts/monitoring/monitoring_bundle.js
index 51cef20455c..49b3daf7400 100644
--- a/app/assets/javascripts/monitoring/monitoring_bundle.js
+++ b/app/assets/javascripts/monitoring/monitoring_bundle.js
@@ -15,7 +15,6 @@ export default (props = {}) => {
       store.dispatch('monitoringDashboard/setFeatureFlags', {
         prometheusEndpointEnabled: gon.features.environmentMetricsUsePrometheusEndpoint,
         multipleDashboardsEnabled: gon.features.environmentMetricsShowMultipleDashboards,
-        additionalPanelTypesEnabled: gon.features.environmentMetricsAdditionalPanelTypes,
       });
     }
 
diff --git a/app/assets/javascripts/monitoring/stores/actions.js b/app/assets/javascripts/monitoring/stores/actions.js
index 0cbad179f17..b69431ef6be 100644
--- a/app/assets/javascripts/monitoring/stores/actions.js
+++ b/app/assets/javascripts/monitoring/stores/actions.js
@@ -37,11 +37,10 @@ export const setEndpoints = ({ commit }, endpoints) => {
 
 export const setFeatureFlags = (
   { commit },
-  { prometheusEndpointEnabled, multipleDashboardsEnabled, additionalPanelTypesEnabled },
+  { prometheusEndpointEnabled, multipleDashboardsEnabled },
 ) => {
   commit(types.SET_DASHBOARD_ENABLED, prometheusEndpointEnabled);
   commit(types.SET_MULTIPLE_DASHBOARDS_ENABLED, multipleDashboardsEnabled);
-  commit(types.SET_ADDITIONAL_PANEL_TYPES_ENABLED, additionalPanelTypesEnabled);
 };
 
 export const setShowErrorBanner = ({ commit }, enabled) => {
diff --git a/app/assets/javascripts/monitoring/stores/mutation_types.js b/app/assets/javascripts/monitoring/stores/mutation_types.js
index 4b1aadbcf05..68d2ef9ff8a 100644
--- a/app/assets/javascripts/monitoring/stores/mutation_types.js
+++ b/app/assets/javascripts/monitoring/stores/mutation_types.js
@@ -11,7 +11,6 @@ export const SET_QUERY_RESULT = 'SET_QUERY_RESULT';
 export const SET_TIME_WINDOW = 'SET_TIME_WINDOW';
 export const SET_DASHBOARD_ENABLED = 'SET_DASHBOARD_ENABLED';
 export const SET_MULTIPLE_DASHBOARDS_ENABLED = 'SET_MULTIPLE_DASHBOARDS_ENABLED';
-export const SET_ADDITIONAL_PANEL_TYPES_ENABLED = 'SET_ADDITIONAL_PANEL_TYPES_ENABLED';
 export const SET_ALL_DASHBOARDS = 'SET_ALL_DASHBOARDS';
 export const SET_ENDPOINTS = 'SET_ENDPOINTS';
 export const SET_GETTING_STARTED_EMPTY_STATE = 'SET_GETTING_STARTED_EMPTY_STATE';
diff --git a/app/assets/javascripts/monitoring/stores/mutations.js b/app/assets/javascripts/monitoring/stores/mutations.js
index b19520d6638..eb3e24f83bb 100644
--- a/app/assets/javascripts/monitoring/stores/mutations.js
+++ b/app/assets/javascripts/monitoring/stores/mutations.js
@@ -93,9 +93,6 @@ export default {
   [types.SET_ALL_DASHBOARDS](state, dashboards) {
     state.allDashboards = dashboards;
   },
-  [types.SET_ADDITIONAL_PANEL_TYPES_ENABLED](state, enabled) {
-    state.additionalPanelTypesEnabled = enabled;
-  },
   [types.SET_SHOW_ERROR_BANNER](state, enabled) {
     state.showErrorBanner = enabled;
   },
diff --git a/app/assets/javascripts/monitoring/stores/state.js b/app/assets/javascripts/monitoring/stores/state.js
index 440bdc951e0..2a8cfff0205 100644
--- a/app/assets/javascripts/monitoring/stores/state.js
+++ b/app/assets/javascripts/monitoring/stores/state.js
@@ -9,7 +9,6 @@ export default () => ({
   dashboardEndpoint: invalidUrl,
   useDashboardEndpoint: false,
   multipleDashboardsEnabled: false,
-  additionalPanelTypesEnabled: false,
   emptyState: 'gettingStarted',
   showEmptyState: true,
   showErrorBanner: true,
diff --git a/app/controllers/projects/environments_controller.rb b/app/controllers/projects/environments_controller.rb
index 5a1f93dc609..661f669d8db 100644
--- a/app/controllers/projects/environments_controller.rb
+++ b/app/controllers/projects/environments_controller.rb
@@ -13,7 +13,6 @@ class Projects::EnvironmentsController < Projects::ApplicationController
   before_action only: [:metrics, :additional_metrics, :metrics_dashboard] do
     push_frontend_feature_flag(:environment_metrics_use_prometheus_endpoint, default_enabled: true)
     push_frontend_feature_flag(:environment_metrics_show_multiple_dashboards)
-    push_frontend_feature_flag(:environment_metrics_additional_panel_types)
     push_frontend_feature_flag(:prometheus_computed_alerts)
   end
 
diff --git a/spec/javascripts/monitoring/dashboard_spec.js b/spec/javascripts/monitoring/dashboard_spec.js
index 02c3f303912..0a60cca939c 100644
--- a/spec/javascripts/monitoring/dashboard_spec.js
+++ b/spec/javascripts/monitoring/dashboard_spec.js
@@ -1,13 +1,12 @@
 import Vue from 'vue';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import { GlToast } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import Dashboard from '~/monitoring/components/dashboard.vue';
 import { timeWindows, timeWindowsKeyNames } from '~/monitoring/constants';
 import * as types from '~/monitoring/stores/mutation_types';
 import { createStore } from '~/monitoring/stores';
 import axios from '~/lib/utils/axios_utils';
-import MonitoringMock, {
+import {
   metricsGroupsAPIResponse,
   mockApiEndpoint,
   environmentData,
@@ -15,7 +14,6 @@ import MonitoringMock, {
   dashboardGitResponse,
 } from './mock_data';
 
-const localVue = createLocalVue();
 const propsData = {
   hasMetrics: false,
   documentationPath: '/path/to/docs',
@@ -43,7 +41,6 @@ describe('Dashboard', () => {
   let mock;
   let store;
   let component;
-  let mockGraphData;
 
   beforeEach(() => {
     setFixtures(`
@@ -381,15 +378,9 @@ describe('Dashboard', () => {
   describe('link to chart', () => {
     let wrapper;
     const currentDashboard = 'TEST_DASHBOARD';
-    localVue.use(GlToast);
-    const link = () => wrapper.find('.js-chart-link');
-    const clipboardText = () => link().element.dataset.clipboardText;
 
     beforeEach(done => {
-      mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse);
-
       wrapper = shallowMount(DashboardComponent, {
-        localVue,
         sync: false,
         attachToDocument: true,
         propsData: { ...propsData, hasMetrics: true, currentDashboard },
@@ -403,43 +394,13 @@ describe('Dashboard', () => {
       wrapper.destroy();
     });
 
-    it('adds a copy button to the dropdown', () => {
-      expect(link().text()).toContain('Generate link to chart');
-    });
-
-    it('contains a link to the dashboard', () => {
-      expect(clipboardText()).toContain(`dashboard=${currentDashboard}`);
-      expect(clipboardText()).toContain(`group=`);
-      expect(clipboardText()).toContain(`title=`);
-      expect(clipboardText()).toContain(`y_label=`);
-    });
-
-    it('undefined parameter is stripped', done => {
-      wrapper.setProps({ currentDashboard: undefined });
-
-      wrapper.vm.$nextTick(() => {
-        expect(clipboardText()).not.toContain(`dashboard=`);
-        expect(clipboardText()).toContain(`y_label=`);
-        done();
-      });
-    });
-
-    it('null parameter is stripped', done => {
-      wrapper.setProps({ currentDashboard: null });
+    it('generates a link to a chart', () => {
+      const generatedLink = wrapper.vm.generateLink('kubernetes', 'core usage', '%');
 
-      wrapper.vm.$nextTick(() => {
-        expect(clipboardText()).not.toContain(`dashboard=`);
-        expect(clipboardText()).toContain(`y_label=`);
-        done();
-      });
-    });
-
-    it('creates a toast when clicked', () => {
-      spyOn(wrapper.vm.$toast, 'show').and.stub();
-
-      link().vm.$emit('click');
-
-      expect(wrapper.vm.$toast.show).toHaveBeenCalled();
+      expect(generatedLink).toContain(`dashboard=${currentDashboard}`);
+      expect(generatedLink).toContain(`group=`);
+      expect(generatedLink).toContain(`title=`);
+      expect(generatedLink).toContain(`y_label=`);
     });
   });
 
@@ -553,36 +514,4 @@ describe('Dashboard', () => {
       });
     });
   });
-
-  describe('when downloading metrics data as CSV', () => {
-    beforeEach(() => {
-      component = new DashboardComponent({
-        propsData: {
-          ...propsData,
-        },
-        store,
-      });
-      store.commit(
-        `monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`,
-        MonitoringMock.data,
-      );
-      [mockGraphData] = component.$store.state.monitoringDashboard.groups[0].metrics;
-    });
-
-    describe('csvText', () => {
-      it('converts metrics data from json to csv', () => {
-        const header = `timestamp,${mockGraphData.y_label}`;
-        const data = mockGraphData.queries[0].result[0].values;
-        const firstRow = `${data[0][0]},${data[0][1]}`;
-
-        expect(component.csvText(mockGraphData)).toMatch(`^${header}\r\n${firstRow}`);
-      });
-    });
-
-    describe('downloadCsv', () => {
-      it('produces a link with a Blob', () => {
-        expect(component.downloadCsv(mockGraphData)).toContain(`blob:`);
-      });
-    });
-  });
 });
diff --git a/spec/javascripts/monitoring/panel_type_spec.js b/spec/javascripts/monitoring/panel_type_spec.js
index 086be628093..0bb40629e6e 100644
--- a/spec/javascripts/monitoring/panel_type_spec.js
+++ b/spec/javascripts/monitoring/panel_type_spec.js
@@ -1,14 +1,16 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { GlToast } from '@gitlab/ui';
 import PanelType from '~/monitoring/components/panel_type.vue';
 import EmptyChart from '~/monitoring/components/charts/empty_chart.vue';
 import AreaChart from '~/monitoring/components/charts/area.vue';
-import { graphDataPrometheusQueryRange } from './mock_data';
 import { createStore } from '~/monitoring/stores';
+import { graphDataPrometheusQueryRange } from './mock_data';
 
 describe('Panel Type component', () => {
   let store;
   let panelType;
   const dashboardWidth = 100;
+  const exampleText = 'example_text';
 
   describe('When no graphData is available', () => {
     let glEmptyChart;
@@ -48,11 +50,15 @@ describe('Panel Type component', () => {
   });
 
   describe('when Graph data is available', () => {
-    const exampleText = 'example_text';
+    let clipboardText;
+    let link;
+    const localVue = createLocalVue();
+    localVue.use(GlToast);
 
     beforeEach(() => {
       store = createStore();
       panelType = shallowMount(PanelType, {
+        localVue,
         propsData: {
           clipboardText: exampleText,
           dashboardWidth,
@@ -60,6 +66,13 @@ describe('Panel Type component', () => {
         },
         store,
       });
+
+      link = () => panelType.find('.js-chart-link');
+      clipboardText = () => link().element.dataset.clipboardText;
+    });
+
+    afterEach(() => {
+      panelType.destroy();
     });
 
     describe('Area Chart panel type', () => {
@@ -68,11 +81,51 @@ describe('Panel Type component', () => {
       });
 
       it('sets clipboard text on the dropdown', () => {
-        const link = () => panelType.find('.js-chart-link');
-        const clipboardText = () => link().element.dataset.clipboardText;
-
         expect(clipboardText()).toBe(exampleText);
       });
+
+      it('creates a toast when clicking on the "Generate link to chart" link', () => {
+        spyOn(panelType.vm.$toast, 'show').and.stub();
+
+        link().vm.$emit('click');
+
+        expect(panelType.vm.$toast.show).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('when downloading metrics data as CSV', () => {
+    beforeEach(() => {
+      graphDataPrometheusQueryRange.y_label = 'metric';
+      store = createStore();
+      panelType = shallowMount(PanelType, {
+        propsData: {
+          clipboardText: exampleText,
+          dashboardWidth,
+          graphData: graphDataPrometheusQueryRange,
+        },
+        store,
+      });
+    });
+
+    afterEach(() => {
+      panelType.destroy();
+    });
+
+    describe('csvText', () => {
+      it('converts metrics data from json to csv', () => {
+        const header = `timestamp,${graphDataPrometheusQueryRange.y_label}`;
+        const data = graphDataPrometheusQueryRange.queries[0].result[0].values;
+        const firstRow = `${data[0][0]},${data[0][1]}`;
+
+        expect(panelType.vm.csvText).toMatch(`^${header}\r\n${firstRow}`);
+      });
+    });
+
+    describe('downloadCsv', () => {
+      it('produces a link with a Blob', () => {
+        expect(panelType.vm.downloadCsv).toContain(`blob:`);
+      });
     });
   });
 });