Remove ECharts metrics dashboard feature flag

app/assets/javascripts/monitoring/components/charts/area.vue

@@ -189,8 +189,8 @@ export default {
 <template>
   <div class="prometheus-graph col-12 col-lg-6">
     <div class="prometheus-graph-header">
-      <h5 class="prometheus-graph-title">{{ graphData.title }}</h5>
-      <div class="prometheus-graph-widgets"><slot></slot></div>
+      <h5 ref="graphTitle" class="prometheus-graph-title">{{ graphData.title }}</h5>
+      <div ref="graphWidgets" class="prometheus-graph-widgets"><slot></slot></div>
     </div>
     <gl-area-chart
       ref="areaChart"

app/controllers/projects/environments_controller.rb

@@ -11,11 +11,6 @@ class Projects::EnvironmentsController < Projects::ApplicationController
   before_action :verify_api_request!, only: :terminal_websocket_authorize
   before_action :expire_etag_cache, only: [:index]
 
-  before_action do
-    push_frontend_feature_flag(:area_chart, project)
-  end
-
-  # Returns all environments or all folders based on the :nested param
   def index
     @environments = project.environments
       .with_state(params[:scope] || :available)

changelogs/unreleased/adriel-remove-feature-flag.yml

+---
+title: Update metrics dashboard graph design
+merge_request: 24653
+author:
+type: changed

spec/javascripts/helpers/vue_test_utils_helper.js

+/* eslint-disable import/prefer-default-export */
+
+const vNodeContainsText = (vnode, text) =>
+  (vnode.text && vnode.text.includes(text)) ||
+  (vnode.children && vnode.children.filter(child => vNodeContainsText(child, text)).length);
+
+/**
+ * Determines whether a `shallowMount` Wrapper contains text
+ * within one of it's slots. This will also work on Wrappers
+ * acquired with `find()`, but only if it's parent Wrapper
+ * was shallowMounted.
+ * NOTE: Prefer checking the rendered output of a component
+ * wherever possible using something like `text()` instead.
+ * @param {Wrapper} shallowWrapper - Vue test utils wrapper (shallowMounted)
+ * @param {String} slotName
+ * @param {String} text
+ */
+export const shallowWrapperContainsSlotText = (shallowWrapper, slotName, text) =>
+  !!shallowWrapper.vm.$slots[slotName].filter(vnode => vNodeContainsText(vnode, text)).length;

spec/javascripts/helpers/vue_test_utils_helper_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { shallowWrapperContainsSlotText } from './vue_test_utils_helper';
+
+describe('Vue test utils helpers', () => {
+  describe('shallowWrapperContainsSlotText', () => {
+    const mockText = 'text';
+    const mockSlot = `<div>${mockText}</div>`;
+    let mockComponent;
+
+    beforeEach(() => {
+      mockComponent = shallowMount(
+        {
+          render(h) {
+            h(`<div>mockedComponent</div>`);
+          },
+        },
+        {
+          slots: {
+            default: mockText,
+            namedSlot: mockSlot,
+          },
+        },
+      );
+    });
+
+    it('finds text within shallowWrapper default slot', () => {
+      expect(shallowWrapperContainsSlotText(mockComponent, 'default', mockText)).toBe(true);
+    });
+
+    it('finds text within shallowWrapper named slot', () => {
+      expect(shallowWrapperContainsSlotText(mockComponent, 'namedSlot', mockText)).toBe(true);
+    });
+
+    it('returns false when text is not present', () => {
+      const searchText = 'absent';
+
+      expect(shallowWrapperContainsSlotText(mockComponent, 'default', searchText)).toBe(false);
+      expect(shallowWrapperContainsSlotText(mockComponent, 'namedSlot', searchText)).toBe(false);
+    });
+
+    it('searches with case-sensitivity', () => {
+      const searchText = mockText.toUpperCase();
+
+      expect(shallowWrapperContainsSlotText(mockComponent, 'default', searchText)).toBe(false);
+      expect(shallowWrapperContainsSlotText(mockComponent, 'namedSlot', searchText)).toBe(false);
+    });
+  });
+});

spec/javascripts/monitoring/charts/area_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { GlAreaChart } from '@gitlab/ui/dist/charts';
+import { shallowWrapperContainsSlotText } from 'spec/helpers/vue_test_utils_helper';
+import Area from '~/monitoring/components/charts/area.vue';
+import MonitoringStore from '~/monitoring/stores/monitoring_store';
+import MonitoringMock, { deploymentData } from '../mock_data';
+
+describe('Area component', () => {
+  const mockWidgets = 'mockWidgets';
+  let mockGraphData;
+  let areaChart;
+  let spriteSpy;
+
+  beforeEach(() => {
+    const store = new MonitoringStore();
+    store.storeMetrics(MonitoringMock.data);
+    store.storeDeploymentData(deploymentData);
+
+    [mockGraphData] = store.groups[0].metrics;
+
+    areaChart = shallowMount(Area, {
+      propsData: {
+        graphData: mockGraphData,
+        containerWidth: 0,
+        deploymentData: store.deploymentData,
+      },
+      slots: {
+        default: mockWidgets,
+      },
+    });
+
+    spriteSpy = spyOnDependency(Area, 'getSvgIconPathContent').and.callFake(
+      () => new Promise(resolve => resolve()),
+    );
+  });
+
+  afterEach(() => {
+    areaChart.destroy();
+  });
+
+  it('renders chart title', () => {
+    expect(areaChart.find({ ref: 'graphTitle' }).text()).toBe(mockGraphData.title);
+  });
+
+  it('contains graph widgets from slot', () => {
+    expect(areaChart.find({ ref: 'graphWidgets' }).text()).toBe(mockWidgets);
+  });
+
+  describe('wrapped components', () => {
+    describe('GitLab UI area chart', () => {
+      let glAreaChart;
+
+      beforeEach(() => {
+        glAreaChart = areaChart.find(GlAreaChart);
+      });
+
+      it('is a Vue instance', () => {
+        expect(glAreaChart.isVueInstance()).toBe(true);
+      });
+
+      it('receives data properties needed for proper chart render', () => {
+        const props = glAreaChart.props();
+
+        expect(props.data).toBe(areaChart.vm.chartData);
+        expect(props.option).toBe(areaChart.vm.chartOptions);
+        expect(props.formatTooltipText).toBe(areaChart.vm.formatTooltipText);
+        expect(props.thresholds).toBe(areaChart.props('alertData'));
+      });
+
+      it('recieves a tooltip title', () => {
+        const mockTitle = 'mockTitle';
+        areaChart.vm.tooltip.title = mockTitle;
+
+        expect(shallowWrapperContainsSlotText(glAreaChart, 'tooltipTitle', mockTitle)).toBe(true);
+      });
+
+      it('recieves tooltip content', () => {
+        const mockContent = 'mockContent';
+        areaChart.vm.tooltip.content = mockContent;
+
+        expect(shallowWrapperContainsSlotText(glAreaChart, 'tooltipContent', mockContent)).toBe(
+          true,
+        );
+      });
+
+      describe('when tooltip is showing deployment data', () => {
+        beforeEach(() => {
+          areaChart.vm.tooltip.isDeployment = true;
+        });
+
+        it('uses deployment title', () => {
+          expect(shallowWrapperContainsSlotText(glAreaChart, 'tooltipTitle', 'Deployed')).toBe(
+            true,
+          );
+        });
+
+        it('renders commit sha in tooltip content', () => {
+          const mockSha = 'mockSha';
+          areaChart.vm.tooltip.sha = mockSha;
+
+          expect(shallowWrapperContainsSlotText(glAreaChart, 'tooltipContent', mockSha)).toBe(true);
+        });
+      });
+    });
+  });
+
+  describe('methods', () => {
+    describe('formatTooltipText', () => {
+      const mockDate = deploymentData[0].created_at;
+      const generateSeriesData = type => ({
+        seriesData: [
+          {
+            componentSubType: type,
+            value: [mockDate, 5.55555],
+          },
+        ],
+        value: mockDate,
+      });
+
+      describe('series is of line type', () => {
+        beforeEach(() => {
+          areaChart.vm.formatTooltipText(generateSeriesData('line'));
+        });
+
+        it('formats tooltip title', () => {
+          expect(areaChart.vm.tooltip.title).toBe('31 May 2017, 9:23PM');
+        });
+
+        it('formats tooltip content', () => {
+          expect(areaChart.vm.tooltip.content).toBe('CPU (Cores) 5.556');
+        });
+      });
+
+      describe('series is of scatter type', () => {
+        beforeEach(() => {
+          areaChart.vm.formatTooltipText(generateSeriesData('scatter'));
+        });
+
+        it('formats tooltip title', () => {
+          expect(areaChart.vm.tooltip.title).toBe('31 May 2017, 9:23PM');
+        });
+
+        it('formats tooltip sha', () => {
+          expect(areaChart.vm.tooltip.sha).toBe('f5bcd1d9');
+        });
+      });
+    });
+
+    describe('getScatterSymbol', () => {
+      beforeEach(() => {
+        areaChart.vm.getScatterSymbol();
+      });
+
+      it('gets rocket svg path content for use as deployment data symbol', () => {
+        expect(spriteSpy).toHaveBeenCalledWith('rocket');
+      });
+    });
+
+    describe('onResize', () => {
+      const mockWidth = 233;
+      const mockHeight = 144;
+
+      beforeEach(() => {
+        spyOn(Element.prototype, 'getBoundingClientRect').and.callFake(() => ({
+          width: mockWidth,
+          height: mockHeight,
+        }));
+        areaChart.vm.onResize();
+      });
+
+      it('sets area chart width', () => {
+        expect(areaChart.vm.width).toBe(mockWidth);
+      });
+
+      it('sets area chart height', () => {
+        expect(areaChart.vm.height).toBe(mockHeight);
+      });
+    });
+  });
+
+  describe('computed', () => {
+    describe('chartData', () => {
+      it('utilizes all data points', () => {
+        expect(Object.keys(areaChart.vm.chartData)).toEqual(['Cores']);
+        expect(areaChart.vm.chartData.Cores.length).toBe(297);
+      });
+
+      it('creates valid data', () => {
+        const data = areaChart.vm.chartData.Cores;
+
+        expect(
+          data.filter(([time, value]) => new Date(time).getTime() > 0 && typeof value === 'number')
+            .length,
+        ).toBe(data.length);
+      });
+    });
+
+    describe('scatterSeries', () => {
+      it('utilizes deployment data', () => {
+        expect(areaChart.vm.scatterSeries.data).toEqual([
+          ['2017-05-31T21:23:37.881Z', 0],
+          ['2017-05-30T20:08:04.629Z', 0],
+          ['2017-05-30T17:42:38.409Z', 0],
+        ]);
+      });
+    });
+
+    describe('xAxisLabel', () => {
+      it('constructs a label for the chart x-axis', () => {
+        expect(areaChart.vm.xAxisLabel).toBe('Core Usage');
+      });
+    });
+
+    describe('yAxisLabel', () => {
+      it('constructs a label for the chart y-axis', () => {
+        expect(areaChart.vm.yAxisLabel).toBe('CPU (Cores)');
+      });
+    });
+  });
+});

spec/javascripts/monitoring/mock_data.js

@@ -326,6 +326,7 @@ export const metricsGroupsAPIResponse = {
         {
           id: 6,
           title: 'CPU usage',
+          y_label: 'CPU',
           weight: 1,
           queries: [
             {