diff options
author | Adriel Santiago <asantiago@gitlab.com> | 2019-02-01 11:37:48 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2019-02-01 11:37:48 +0300 |
commit | e7bb9b95e8b7dc29d6cf8417d74f249fc89d23b3 (patch) | |
tree | bac7b3e285eb91081501f4057711e7ce5becda18 /spec/javascripts/monitoring | |
parent | c12863322595e77b03a5a089ff079bf13574a57b (diff) |
Remove d3 metrics graph
Diffstat (limited to 'spec/javascripts/monitoring')
-rw-r--r-- | spec/javascripts/monitoring/graph/axis_spec.js | 65 | ||||
-rw-r--r-- | spec/javascripts/monitoring/graph/deployment_spec.js | 53 | ||||
-rw-r--r-- | spec/javascripts/monitoring/graph/flag_spec.js | 133 | ||||
-rw-r--r-- | spec/javascripts/monitoring/graph/legend_spec.js | 44 | ||||
-rw-r--r-- | spec/javascripts/monitoring/graph/track_info_spec.js | 44 | ||||
-rw-r--r-- | spec/javascripts/monitoring/graph/track_line_spec.js | 52 | ||||
-rw-r--r-- | spec/javascripts/monitoring/graph_path_spec.js | 56 | ||||
-rw-r--r-- | spec/javascripts/monitoring/graph_spec.js | 127 | ||||
-rw-r--r-- | spec/javascripts/monitoring/utils/multiple_time_series_spec.js | 22 |
9 files changed, 0 insertions, 596 deletions
diff --git a/spec/javascripts/monitoring/graph/axis_spec.js b/spec/javascripts/monitoring/graph/axis_spec.js deleted file mode 100644 index c7adba00637..00000000000 --- a/spec/javascripts/monitoring/graph/axis_spec.js +++ /dev/null @@ -1,65 +0,0 @@ -import Vue from 'vue'; -import GraphAxis from '~/monitoring/components/graph/axis.vue'; -import measurements from '~/monitoring/utils/measurements'; - -const createComponent = propsData => { - const Component = Vue.extend(GraphAxis); - - return new Component({ - propsData, - }).$mount(); -}; - -const defaultValuesComponent = { - graphWidth: 500, - graphHeight: 300, - graphHeightOffset: 120, - margin: measurements.large.margin, - measurements: measurements.large, - yAxisLabel: 'Values', - unitOfDisplay: 'MB', -}; - -function getTextFromNode(component, selector) { - return component.$el.querySelector(selector).firstChild.nodeValue.trim(); -} - -describe('Axis', () => { - describe('Computed props', () => { - it('textTransform', () => { - const component = createComponent(defaultValuesComponent); - - expect(component.textTransform).toContain('translate(15, 120) rotate(-90)'); - }); - - it('xPosition', () => { - const component = createComponent(defaultValuesComponent); - - expect(component.xPosition).toEqual(180); - }); - - it('yPosition', () => { - const component = createComponent(defaultValuesComponent); - - expect(component.yPosition).toEqual(240); - }); - - it('rectTransform', () => { - const component = createComponent(defaultValuesComponent); - - expect(component.rectTransform).toContain('translate(0, 120) rotate(-90)'); - }); - }); - - it('has 2 rect-axis-text rect svg elements', () => { - const component = createComponent(defaultValuesComponent); - - expect(component.$el.querySelectorAll('.rect-axis-text').length).toEqual(2); - }); - - it('contains text to signal the usage, title and time with multiple time series', () => { - const component = createComponent(defaultValuesComponent); - - expect(getTextFromNode(component, '.y-label-text')).toEqual('Values (MB)'); - }); -}); diff --git a/spec/javascripts/monitoring/graph/deployment_spec.js b/spec/javascripts/monitoring/graph/deployment_spec.js deleted file mode 100644 index 7d39c4345d2..00000000000 --- a/spec/javascripts/monitoring/graph/deployment_spec.js +++ /dev/null @@ -1,53 +0,0 @@ -import Vue from 'vue'; -import GraphDeployment from '~/monitoring/components/graph/deployment.vue'; -import { deploymentData } from '../mock_data'; - -const createComponent = propsData => { - const Component = Vue.extend(GraphDeployment); - - return new Component({ - propsData, - }).$mount(); -}; - -describe('MonitoringDeployment', () => { - describe('Methods', () => { - it('should contain a hidden gradient', () => { - const component = createComponent({ - showDeployInfo: true, - deploymentData, - graphHeight: 300, - graphWidth: 440, - graphHeightOffset: 120, - }); - - expect(component.$el.querySelector('#shadow-gradient')).not.toBeNull(); - }); - - it('transformDeploymentGroup translates an available deployment', () => { - const component = createComponent({ - showDeployInfo: false, - deploymentData, - graphHeight: 300, - graphWidth: 440, - graphHeightOffset: 120, - }); - - expect(component.transformDeploymentGroup({ xPos: 16 })).toContain('translate(11, 20)'); - }); - - describe('Computed props', () => { - it('calculatedHeight', () => { - const component = createComponent({ - showDeployInfo: true, - deploymentData, - graphHeight: 300, - graphWidth: 440, - graphHeightOffset: 120, - }); - - expect(component.calculatedHeight).toEqual(180); - }); - }); - }); -}); diff --git a/spec/javascripts/monitoring/graph/flag_spec.js b/spec/javascripts/monitoring/graph/flag_spec.js deleted file mode 100644 index 038bfffd44f..00000000000 --- a/spec/javascripts/monitoring/graph/flag_spec.js +++ /dev/null @@ -1,133 +0,0 @@ -import Vue from 'vue'; -import GraphFlag from '~/monitoring/components/graph/flag.vue'; -import { deploymentData } from '../mock_data'; - -const createComponent = propsData => { - const Component = Vue.extend(GraphFlag); - - return new Component({ - propsData, - }).$mount(); -}; - -const defaultValuesComponent = { - currentXCoordinate: 200, - currentYCoordinate: 100, - currentFlagPosition: 100, - currentData: { - time: new Date('2017-06-04T18:17:33.501Z'), - value: '1.49609375', - }, - graphHeight: 300, - graphHeightOffset: 120, - showFlagContent: true, - realPixelRatio: 1, - timeSeries: [ - { - values: [ - { - time: new Date('2017-06-04T18:17:33.501Z'), - value: '1.49609375', - }, - ], - }, - ], - unitOfDisplay: 'ms', - currentDataIndex: 0, - legendTitle: 'Average', - currentCoordinates: {}, -}; - -const deploymentFlagData = { - ...deploymentData[0], - ref: deploymentData[0].ref.name, - xPos: 10, - time: new Date(deploymentData[0].created_at), -}; - -describe('GraphFlag', () => { - let component; - - it('has a line at the currentXCoordinate', () => { - component = createComponent(defaultValuesComponent); - - expect(component.$el.style.left).toEqual(`${70 + component.currentXCoordinate}px`); - }); - - describe('Deployment flag', () => { - it('shows a deployment flag when deployment data provided', () => { - const deploymentFlagComponent = createComponent({ - ...defaultValuesComponent, - deploymentFlagData, - }); - - expect(deploymentFlagComponent.$el.querySelector('.popover-title')).toContainText('Deployed'); - }); - - it('contains the ref when a tag is available', () => { - const deploymentFlagComponent = createComponent({ - ...defaultValuesComponent, - deploymentFlagData: { - ...deploymentFlagData, - sha: 'f5bcd1d9dac6fa4137e2510b9ccd134ef2e84187', - tag: true, - ref: '1.0', - }, - }); - - expect(deploymentFlagComponent.$el.querySelector('.deploy-meta-content')).toContainText( - 'f5bcd1d9', - ); - - expect(deploymentFlagComponent.$el.querySelector('.deploy-meta-content')).toContainText( - '1.0', - ); - }); - - it('does not contain the ref when a tag is unavailable', () => { - const deploymentFlagComponent = createComponent({ - ...defaultValuesComponent, - deploymentFlagData: { - ...deploymentFlagData, - sha: 'f5bcd1d9dac6fa4137e2510b9ccd134ef2e84187', - tag: false, - ref: '1.0', - }, - }); - - expect(deploymentFlagComponent.$el.querySelector('.deploy-meta-content')).toContainText( - 'f5bcd1d9', - ); - - expect(deploymentFlagComponent.$el.querySelector('.deploy-meta-content')).not.toContainText( - '1.0', - ); - }); - }); - - describe('Computed props', () => { - beforeEach(() => { - component = createComponent(defaultValuesComponent); - }); - - it('formatTime', () => { - expect(component.formatTime).toMatch(/\d:17PM/); - }); - - it('formatDate', () => { - expect(component.formatDate).toEqual('04 Jun 2017, '); - }); - - it('cursorStyle', () => { - expect(component.cursorStyle).toEqual({ - top: '20px', - left: '270px', - height: '180px', - }); - }); - - it('flagOrientation', () => { - expect(component.flagOrientation).toEqual('left'); - }); - }); -}); diff --git a/spec/javascripts/monitoring/graph/legend_spec.js b/spec/javascripts/monitoring/graph/legend_spec.js deleted file mode 100644 index 9209e77dcf4..00000000000 --- a/spec/javascripts/monitoring/graph/legend_spec.js +++ /dev/null @@ -1,44 +0,0 @@ -import Vue from 'vue'; -import GraphLegend from '~/monitoring/components/graph/legend.vue'; -import createTimeSeries from '~/monitoring/utils/multiple_time_series'; -import mountComponent from 'spec/helpers/vue_mount_component_helper'; -import { singleRowMetricsMultipleSeries, convertDatesMultipleSeries } from '../mock_data'; - -const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeries); - -const defaultValuesComponent = {}; - -const { timeSeries } = createTimeSeries(convertedMetrics[0].queries, 500, 300, 120); - -defaultValuesComponent.timeSeries = timeSeries; - -describe('Legend Component', () => { - let vm; - let Legend; - - beforeEach(() => { - Legend = Vue.extend(GraphLegend); - }); - - describe('View', () => { - beforeEach(() => { - vm = mountComponent(Legend, { - legendTitle: 'legend', - timeSeries, - currentDataIndex: 0, - unitOfDisplay: 'Req/Sec', - }); - }); - - it('should render the usage, title and time with multiple time series', () => { - const titles = vm.$el.querySelectorAll('.legend-metric-title'); - - expect(titles[0].textContent.indexOf('1xx')).not.toEqual(-1); - expect(titles[1].textContent.indexOf('2xx')).not.toEqual(-1); - }); - - it('should container the same number of rows in the table as time series', () => { - expect(vm.$el.querySelectorAll('.prometheus-table tr').length).toEqual(vm.timeSeries.length); - }); - }); -}); diff --git a/spec/javascripts/monitoring/graph/track_info_spec.js b/spec/javascripts/monitoring/graph/track_info_spec.js deleted file mode 100644 index ce93ae28842..00000000000 --- a/spec/javascripts/monitoring/graph/track_info_spec.js +++ /dev/null @@ -1,44 +0,0 @@ -import Vue from 'vue'; -import TrackInfo from '~/monitoring/components/graph/track_info.vue'; -import mountComponent from 'spec/helpers/vue_mount_component_helper'; -import createTimeSeries from '~/monitoring/utils/multiple_time_series'; -import { singleRowMetricsMultipleSeries, convertDatesMultipleSeries } from '../mock_data'; - -const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeries); -const { timeSeries } = createTimeSeries(convertedMetrics[0].queries, 500, 300, 120); - -describe('TrackInfo component', () => { - let vm; - let Component; - - beforeEach(() => { - Component = Vue.extend(TrackInfo); - }); - - afterEach(() => { - vm.$destroy(); - }); - - describe('Computed props', () => { - beforeEach(() => { - vm = mountComponent(Component, { track: timeSeries[0] }); - }); - - it('summaryMetrics', () => { - expect(vm.summaryMetrics).toEqual('Avg: 0.000 · Max: 0.000'); - }); - }); - - describe('Rendered output', () => { - beforeEach(() => { - vm = mountComponent(Component, { track: timeSeries[0] }); - }); - - it('contains metric tag and the summary metrics', () => { - const metricTag = vm.$el.querySelector('strong'); - - expect(metricTag.textContent.trim()).toEqual(vm.track.metricTag); - expect(vm.$el.textContent).toContain('Avg: 0.000 · Max: 0.000'); - }); - }); -}); diff --git a/spec/javascripts/monitoring/graph/track_line_spec.js b/spec/javascripts/monitoring/graph/track_line_spec.js deleted file mode 100644 index 2a4f89ddf6e..00000000000 --- a/spec/javascripts/monitoring/graph/track_line_spec.js +++ /dev/null @@ -1,52 +0,0 @@ -import Vue from 'vue'; -import TrackLine from '~/monitoring/components/graph/track_line.vue'; -import mountComponent from 'spec/helpers/vue_mount_component_helper'; -import createTimeSeries from '~/monitoring/utils/multiple_time_series'; -import { singleRowMetricsMultipleSeries, convertDatesMultipleSeries } from '../mock_data'; - -const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeries); -const { timeSeries } = createTimeSeries(convertedMetrics[0].queries, 500, 300, 120); - -describe('TrackLine component', () => { - let vm; - let Component; - - beforeEach(() => { - Component = Vue.extend(TrackLine); - }); - - afterEach(() => { - vm.$destroy(); - }); - - describe('Computed props', () => { - it('stylizedLine for dashed lineStyles', () => { - vm = mountComponent(Component, { track: { ...timeSeries[0], lineStyle: 'dashed' } }); - - expect(vm.stylizedLine).toEqual('6, 3'); - }); - - it('stylizedLine for dotted lineStyles', () => { - vm = mountComponent(Component, { track: { ...timeSeries[0], lineStyle: 'dotted' } }); - - expect(vm.stylizedLine).toEqual('3, 3'); - }); - }); - - describe('Rendered output', () => { - it('has an svg with a line', () => { - vm = mountComponent(Component, { track: { ...timeSeries[0] } }); - const svgEl = vm.$el.querySelector('svg'); - const lineEl = vm.$el.querySelector('svg line'); - - expect(svgEl.getAttribute('width')).toEqual('16'); - expect(svgEl.getAttribute('height')).toEqual('8'); - - expect(lineEl.getAttribute('stroke-width')).toEqual('4'); - expect(lineEl.getAttribute('x1')).toEqual('0'); - expect(lineEl.getAttribute('x2')).toEqual('16'); - expect(lineEl.getAttribute('y1')).toEqual('4'); - expect(lineEl.getAttribute('y2')).toEqual('4'); - }); - }); -}); diff --git a/spec/javascripts/monitoring/graph_path_spec.js b/spec/javascripts/monitoring/graph_path_spec.js deleted file mode 100644 index fd167b83d51..00000000000 --- a/spec/javascripts/monitoring/graph_path_spec.js +++ /dev/null @@ -1,56 +0,0 @@ -import Vue from 'vue'; -import GraphPath from '~/monitoring/components/graph/path.vue'; -import createTimeSeries from '~/monitoring/utils/multiple_time_series'; -import { singleRowMetricsMultipleSeries, convertDatesMultipleSeries } from './mock_data'; - -const createComponent = propsData => { - const Component = Vue.extend(GraphPath); - - return new Component({ - propsData, - }).$mount(); -}; - -const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeries); - -const { timeSeries } = createTimeSeries(convertedMetrics[0].queries, 428, 272, 120); -const firstTimeSeries = timeSeries[0]; - -describe('Monitoring Paths', () => { - it('renders two paths to represent a line and the area underneath it', () => { - const component = createComponent({ - generatedLinePath: firstTimeSeries.linePath, - generatedAreaPath: firstTimeSeries.areaPath, - lineColor: firstTimeSeries.lineColor, - areaColor: firstTimeSeries.areaColor, - showDot: false, - }); - const metricArea = component.$el.querySelector('.metric-area'); - const metricLine = component.$el.querySelector('.metric-line'); - - expect(metricArea.getAttribute('fill')).toBe('#8fbce8'); - expect(metricArea.getAttribute('d')).toBe(firstTimeSeries.areaPath); - expect(metricLine.getAttribute('stroke')).toBe('#1f78d1'); - expect(metricLine.getAttribute('d')).toBe(firstTimeSeries.linePath); - }); - - describe('Computed properties', () => { - it('strokeDashArray', () => { - const component = createComponent({ - generatedLinePath: firstTimeSeries.linePath, - generatedAreaPath: firstTimeSeries.areaPath, - lineColor: firstTimeSeries.lineColor, - areaColor: firstTimeSeries.areaColor, - showDot: false, - }); - - component.lineStyle = 'dashed'; - - expect(component.strokeDashArray).toBe('3, 1'); - - component.lineStyle = 'dotted'; - - expect(component.strokeDashArray).toBe('1, 1'); - }); - }); -}); diff --git a/spec/javascripts/monitoring/graph_spec.js b/spec/javascripts/monitoring/graph_spec.js deleted file mode 100644 index 59d6d4f3a7f..00000000000 --- a/spec/javascripts/monitoring/graph_spec.js +++ /dev/null @@ -1,127 +0,0 @@ -import Vue from 'vue'; -import Graph from '~/monitoring/components/graph.vue'; -import MonitoringMixins from '~/monitoring/mixins/monitoring_mixins'; -import { - deploymentData, - convertDatesMultipleSeries, - singleRowMetricsMultipleSeries, - queryWithoutData, -} from './mock_data'; - -const tagsPath = 'http://test.host/frontend-fixtures/environments-project/tags'; -const projectPath = 'http://test.host/frontend-fixtures/environments-project'; -const createComponent = propsData => { - const Component = Vue.extend(Graph); - - return new Component({ - propsData, - }).$mount(); -}; - -const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeries); - -describe('Graph', () => { - beforeEach(() => { - spyOn(MonitoringMixins.methods, 'formatDeployments').and.returnValue({}); - }); - - it('has a title', () => { - const component = createComponent({ - graphData: convertedMetrics[1], - updateAspectRatio: false, - deploymentData, - tagsPath, - projectPath, - }); - - expect(component.$el.querySelector('.prometheus-graph-title').innerText.trim()).toBe( - component.graphData.title, - ); - }); - - describe('Computed props', () => { - it('axisTransform translates an element Y position depending of its height', () => { - const component = createComponent({ - graphData: convertedMetrics[1], - updateAspectRatio: false, - deploymentData, - tagsPath, - projectPath, - }); - - const transformedHeight = `${component.graphHeight - 100}`; - - expect(component.axisTransform.indexOf(transformedHeight)).not.toEqual(-1); - }); - - it('outerViewBox gets a width and height property based on the DOM size of the element', () => { - const component = createComponent({ - graphData: convertedMetrics[1], - updateAspectRatio: false, - deploymentData, - tagsPath, - projectPath, - }); - - const viewBoxArray = component.outerViewBox.split(' '); - - expect(typeof component.outerViewBox).toEqual('string'); - expect(viewBoxArray[2]).toEqual(component.graphWidth.toString()); - expect(viewBoxArray[3]).toEqual((component.graphHeight - 50).toString()); - }); - }); - - it('has a title for the y-axis and the chart legend that comes from the backend', () => { - const component = createComponent({ - graphData: convertedMetrics[1], - updateAspectRatio: false, - deploymentData, - tagsPath, - projectPath, - }); - - expect(component.yAxisLabel).toEqual(component.graphData.y_label); - expect(component.legendTitle).toEqual(component.graphData.queries[0].label); - }); - - it('sets the currentData object based on the hovered data index', () => { - const component = createComponent({ - graphData: convertedMetrics[1], - updateAspectRatio: false, - deploymentData, - graphIdentifier: 0, - hoverData: { - hoveredDate: new Date('Sun Aug 27 2017 06:11:51 GMT-0500 (CDT)'), - currentDeployXPos: null, - }, - tagsPath, - projectPath, - }); - - // simulate moving mouse over data series - component.seriesUnderMouse = component.timeSeries; - - component.positionFlag(); - - expect(component.currentData).toBe(component.timeSeries[0].values[10]); - }); - - describe('Without data to display', () => { - it('shows a "no data to display" empty state on a graph', done => { - const component = createComponent({ - graphData: queryWithoutData, - deploymentData, - tagsPath, - projectPath, - }); - - Vue.nextTick(() => { - expect( - component.$el.querySelector('.js-no-data-to-display text').textContent.trim(), - ).toEqual('No data to display'); - - done(); - }); - }); - }); -}); diff --git a/spec/javascripts/monitoring/utils/multiple_time_series_spec.js b/spec/javascripts/monitoring/utils/multiple_time_series_spec.js deleted file mode 100644 index 8937b7d9680..00000000000 --- a/spec/javascripts/monitoring/utils/multiple_time_series_spec.js +++ /dev/null @@ -1,22 +0,0 @@ -import createTimeSeries from '~/monitoring/utils/multiple_time_series'; -import { convertDatesMultipleSeries, singleRowMetricsMultipleSeries } from '../mock_data'; - -const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeries); -const { timeSeries } = createTimeSeries(convertedMetrics[0].queries, 428, 272, 120); -const firstTimeSeries = timeSeries[0]; - -describe('Multiple time series', () => { - it('createTimeSeries returned array contains an object for each element', () => { - expect(typeof firstTimeSeries.linePath).toEqual('string'); - expect(typeof firstTimeSeries.areaPath).toEqual('string'); - expect(typeof firstTimeSeries.timeSeriesScaleX).toEqual('function'); - expect(typeof firstTimeSeries.areaColor).toEqual('string'); - expect(typeof firstTimeSeries.lineColor).toEqual('string'); - expect(firstTimeSeries.values instanceof Array).toEqual(true); - }); - - it('createTimeSeries returns an array', () => { - expect(timeSeries instanceof Array).toEqual(true); - expect(timeSeries.length).toEqual(2); - }); -}); |