Commit c83daaeb authored by Kushal Pandya's avatar Kushal Pandya

Merge branch '217758-refactor-mock-graph-single-stat' into 'master'

Use graph data generation for single stat tests

Closes #217758

See merge request gitlab-org/gitlab!36273
parents 9f0b64d3 2b9b692e
import { shallowMount } from '@vue/test-utils';
import SingleStatChart from '~/monitoring/components/charts/single_stat.vue';
import { singleStatMetricsResult, singleStatMetricsWithFieldResult } from '../../mock_data';
import { singleStatGraphData } from '../../graph_data';
describe('Single Stat Chart component', () => {
let singleStatChart;
......@@ -8,7 +8,7 @@ describe('Single Stat Chart component', () => {
beforeEach(() => {
singleStatChart = shallowMount(SingleStatChart, {
propsData: {
graphData: singleStatMetricsResult,
graphData: singleStatGraphData({}, { unit: 'MB' }),
},
});
});
......@@ -20,15 +20,12 @@ describe('Single Stat Chart component', () => {
describe('computed', () => {
describe('statValue', () => {
it('should interpolate the value and unit props', () => {
expect(singleStatChart.vm.statValue).toBe('91.00MB');
expect(singleStatChart.vm.statValue).toBe('1.00MB');
});
it('should change the value representation to a percentile one', () => {
singleStatChart.setProps({
graphData: {
...singleStatMetricsResult,
maxValue: 120,
},
graphData: singleStatGraphData({ max_value: 120 }, { value: 91 }),
});
expect(singleStatChart.vm.statValue).toContain('75.83%');
......@@ -36,10 +33,7 @@ describe('Single Stat Chart component', () => {
it('should display NaN for non numeric maxValue values', () => {
singleStatChart.setProps({
graphData: {
...singleStatMetricsResult,
maxValue: 'not a number',
},
graphData: singleStatGraphData({ max_value: 'not a number' }),
});
expect(singleStatChart.vm.statValue).toContain('NaN');
......@@ -47,21 +41,7 @@ describe('Single Stat Chart component', () => {
it('should display NaN for missing query values', () => {
singleStatChart.setProps({
graphData: {
...singleStatMetricsResult,
metrics: [
{
...singleStatMetricsResult.metrics[0],
result: [
{
...singleStatMetricsResult.metrics[0].result[0],
value: [''],
},
],
},
],
maxValue: 120,
},
graphData: singleStatGraphData({ max_value: 120 }, { value: 'NaN' }),
});
expect(singleStatChart.vm.statValue).toContain('NaN');
......@@ -70,7 +50,7 @@ describe('Single Stat Chart component', () => {
describe('field attribute', () => {
it('displays a label value instead of metric value when field attribute is used', () => {
singleStatChart.setProps({
graphData: singleStatMetricsWithFieldResult,
graphData: singleStatGraphData({ field: 'job' }, { isVector: true }),
});
return singleStatChart.vm.$nextTick(() => {
......@@ -80,10 +60,7 @@ describe('Single Stat Chart component', () => {
it('displays No data to display if field attribute is not present', () => {
singleStatChart.setProps({
graphData: {
...singleStatMetricsWithFieldResult,
field: 'this-does-not-exist',
},
graphData: singleStatGraphData({ field: 'this-does-not-exist' }),
});
return singleStatChart.vm.$nextTick(() => {
......
......@@ -15,11 +15,11 @@ import {
mockNamespace,
mockNamespacedData,
mockTimeRange,
singleStatMetricsResult,
graphDataPrometheusQueryRangeMultiTrack,
barMockData,
} from '../mock_data';
import { dashboardProps, graphData, graphDataEmpty } from '../fixture_data';
import { singleStatGraphData } from '../graph_data';
import { panelTypes } from '~/monitoring/constants';
......@@ -232,7 +232,7 @@ describe('Dashboard Panel', () => {
data | component | hasCtxMenu
${dataWithType(panelTypes.AREA_CHART)} | ${MonitorTimeSeriesChart} | ${true}
${dataWithType(panelTypes.LINE_CHART)} | ${MonitorTimeSeriesChart} | ${true}
${singleStatMetricsResult} | ${MonitorSingleStatChart} | ${true}
${singleStatGraphData()} | ${MonitorSingleStatChart} | ${true}
${anomalyMockGraphData} | ${MonitorAnomalyChart} | ${false}
${dataWithType(panelTypes.COLUMN)} | ${MonitorColumnChart} | ${false}
${dataWithType(panelTypes.STACKED_COLUMN)} | ${MonitorStackedColumnChart} | ${false}
......
......@@ -3,10 +3,40 @@ import { panelTypes, metricStates } from '~/monitoring/constants';
const initTime = 1435781451.781;
const makeValue = val => [initTime, val];
const makeValues = vals => vals.map((val, i) => [initTime + 15 * i, val]);
// Normalized Prometheus Responses
const scalarResult = ({ value = '1' } = {}) =>
normalizeQueryResponseData({
resultType: 'scalar',
result: makeValue(value),
});
const vectorResult = ({ value1 = '1', value2 = '2' } = {}) =>
normalizeQueryResponseData({
resultType: 'vector',
result: [
{
metric: {
__name__: 'up',
job: 'prometheus',
instance: 'localhost:9090',
},
value: makeValue(value1),
},
{
metric: {
__name__: 'up',
job: 'node',
instance: 'localhost:9100',
},
value: makeValue(value2),
},
],
});
const matrixSingleResult = ({ values = ['1', '2', '3'] } = {}) =>
normalizeQueryResponseData({
resultType: 'matrix',
......@@ -51,7 +81,6 @@ const matrixMultiResult = ({ values1 = ['1', '2', '3'], values2 = ['4', '5', '6'
* @param {Object} dataOptions.metricCount
* @param {Object} dataOptions.isMultiSeries
*/
// eslint-disable-next-line import/prefer-default-export
export const timeSeriesGraphData = (panelOptions = {}, dataOptions = {}) => {
const { metricCount = 1, isMultiSeries = false } = dataOptions;
......@@ -68,3 +97,30 @@ export const timeSeriesGraphData = (panelOptions = {}, dataOptions = {}) => {
...panelOptions,
});
};
/**
* Generate mock graph data according to options
*
* @param {Object} panelOptions - Panel options as in YML.
* @param {Object} dataOptions
* @param {Object} dataOptions.unit
* @param {Object} dataOptions.value
* @param {Object} dataOptions.isVector
*/
export const singleStatGraphData = (panelOptions = {}, dataOptions = {}) => {
const { unit, value = '1', isVector = false } = dataOptions;
return mapPanelToViewModel({
title: 'Single Stat Panel',
type: panelTypes.SINGLE_STAT,
metrics: [
{
label: 'Metric Label',
state: metricStates.OK,
result: isVector ? vectorResult({ value }) : scalarResult({ value }),
unit,
},
],
...panelOptions,
});
};
......@@ -334,36 +334,6 @@ export const metricsResult = [
},
];
export const singleStatMetricsResult = {
title: 'Super Chart A2',
type: 'single-stat',
weight: 2,
metrics: [
{
id: 'metric_a1',
metricId: '2',
query: 'max(go_memstats_alloc_bytes{job="prometheus"}) by (job) /1024/1024',
unit: 'MB',
label: 'Total Consumption',
metric_id: 2,
prometheus_endpoint_path:
'/root/kubernetes-gke-project/environments/35/prometheus/api/v1/query?query=max%28go_memstats_alloc_bytes%7Bjob%3D%22prometheus%22%7D%29+by+%28job%29+%2F1024%2F1024',
result: [
{
metric: { job: 'prometheus' },
value: ['2019-06-26T21:03:20.881Z', 91],
values: [['2019-06-26T21:03:20.881Z', 91]],
},
],
},
],
};
export const singleStatMetricsWithFieldResult = {
...singleStatMetricsResult,
field: 'job',
};
export const graphDataPrometheusQueryRangeMultiTrack = {
title: 'Super Chart A3',
type: 'heatmap',
......
import * as monitoringUtils from '~/monitoring/utils';
import * as urlUtils from '~/lib/utils/url_utility';
import { TEST_HOST } from 'jest/helpers/test_constants';
import {
mockProjectDir,
singleStatMetricsResult,
anomalyMockGraphData,
barMockData,
} from './mock_data';
import { mockProjectDir, anomalyMockGraphData, barMockData } from './mock_data';
import { metricsDashboardViewModel, graphData } from './fixture_data';
import { singleStatGraphData } from './graph_data';
const mockPath = `${TEST_HOST}${mockProjectDir}/-/environments/29/metrics`;
......@@ -82,7 +78,7 @@ describe('monitoring/utils', () => {
it('validates data with the query format', () => {
const validGraphData = monitoringUtils.graphDataValidatorForValues(
true,
singleStatMetricsResult,
singleStatGraphData(),
);
expect(validGraphData).toBe(true);
......@@ -105,7 +101,7 @@ describe('monitoring/utils', () => {
let threeMetrics;
let fourMetrics;
beforeEach(() => {
oneMetric = singleStatMetricsResult;
oneMetric = singleStatGraphData();
threeMetrics = anomalyMockGraphData;
const metrics = [...threeMetrics.metrics];
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment