Added specs for rendered output, changed the background for stable tracks
This commit is contained in:
parent
89c8bd4eca
commit
d303b5ba1f
|
@ -1,5 +1,6 @@
|
|||
<script>
|
||||
import { convertToSentenceCase } from '~/lib/utils/text_utility';
|
||||
import { s__ } from '~/locale';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
|
@ -74,6 +75,10 @@ export default {
|
|||
yAxisLabelSentenceCase() {
|
||||
return `${convertToSentenceCase(this.yAxisLabel)} (${this.unitOfDisplay})`;
|
||||
},
|
||||
|
||||
timeString() {
|
||||
return s__('PrometheusDashboard|Time');
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
|
@ -131,7 +136,7 @@ export default {
|
|||
:y="yPosition"
|
||||
dy=".35em"
|
||||
>
|
||||
Time
|
||||
{{ timeString }}
|
||||
</text>
|
||||
</g>
|
||||
</template>
|
||||
|
|
|
@ -17,6 +17,13 @@ export default {
|
|||
required: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
isStable(track) {
|
||||
return {
|
||||
'prometheus-table-row-highlight': track.trackName !== 'Canary' && track.renderCanary,
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
|
@ -26,6 +33,7 @@ export default {
|
|||
v-for="(series, index) in timeSeries"
|
||||
:key="index"
|
||||
v-if="series.shouldRenderLegend"
|
||||
:class="isStable(series)"
|
||||
>
|
||||
<td>
|
||||
<strong v-if="series.renderCanary">{{ series.trackName }}</strong>
|
||||
|
@ -53,7 +61,9 @@ export default {
|
|||
:track="track"
|
||||
:key="`track-line-${trackIndex}`"/>
|
||||
<td :key="`track-info-${trackIndex}`">
|
||||
<track-info :track="track" />
|
||||
<track-info
|
||||
class="legend-metric-title"
|
||||
:track="track" />
|
||||
</td>
|
||||
</template>
|
||||
</tr>
|
||||
|
|
|
@ -7,10 +7,10 @@ export default {
|
|||
required: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
strokeDashArray(type) {
|
||||
if (type === 'dashed') return '6, 3';
|
||||
if (type === 'dotted') return '3, 3';
|
||||
computed: {
|
||||
stylizedLine() {
|
||||
if (this.track.lineStyle === 'dashed') return '6, 3';
|
||||
if (this.track.lineStyle === 'dotted') return '3, 3';
|
||||
return null;
|
||||
},
|
||||
},
|
||||
|
@ -22,7 +22,7 @@ export default {
|
|||
width="15"
|
||||
height="6">
|
||||
<line
|
||||
:stroke-dasharray="strokeDashArray(track.lineStyle)"
|
||||
:stroke-dasharray="stylizedLine"
|
||||
:stroke="track.lineColor"
|
||||
stroke-width="4"
|
||||
:x1="0"
|
||||
|
|
|
@ -767,3 +767,8 @@ $border-color-settings: #e1e1e1;
|
|||
Modals
|
||||
*/
|
||||
$modal-body-height: 134px;
|
||||
|
||||
/*
|
||||
Prometheus
|
||||
*/
|
||||
$prometheus-table-row-highlight-color: $theme-gray-100;
|
||||
|
|
|
@ -321,6 +321,11 @@
|
|||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.legend-metric-title {
|
||||
font-size: 12px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.prometheus-svg-container {
|
||||
|
@ -409,3 +414,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.prometheus-table-row-highlight {
|
||||
background-color: $prometheus-table-row-highlight-color;
|
||||
}
|
||||
|
|
|
@ -28,4 +28,17 @@ describe('TrackInfo component', () => {
|
|||
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');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
@ -20,16 +20,33 @@ describe('TrackLine component', () => {
|
|||
});
|
||||
|
||||
describe('Computed props', () => {
|
||||
beforeEach(() => {
|
||||
vm = mountComponent(Component, { track: timeSeries[0] });
|
||||
it('stylizedLine for dashed lineStyles', () => {
|
||||
vm = mountComponent(Component, { track: { ...timeSeries[0], lineStyle: 'dashed' } });
|
||||
|
||||
expect(vm.stylizedLine).toEqual('6, 3');
|
||||
});
|
||||
|
||||
it('strokeDashArray', () => {
|
||||
const dashedArray = vm.strokeDashArray('dashed');
|
||||
const dottedArray = vm.strokeDashArray('dotted');
|
||||
it('stylizedLine for dotted lineStyles', () => {
|
||||
vm = mountComponent(Component, { track: { ...timeSeries[0], lineStyle: 'dotted' } });
|
||||
|
||||
expect(dashedArray).toEqual('6, 3');
|
||||
expect(dottedArray).toEqual('3, 3');
|
||||
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('15');
|
||||
expect(svgEl.getAttribute('height')).toEqual('6');
|
||||
|
||||
expect(lineEl.getAttribute('stroke-width')).toEqual('4');
|
||||
expect(lineEl.getAttribute('x1')).toEqual('0');
|
||||
expect(lineEl.getAttribute('x2')).toEqual('15');
|
||||
expect(lineEl.getAttribute('y1')).toEqual('2');
|
||||
expect(lineEl.getAttribute('y2')).toEqual('2');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue