74 lines
1.8 KiB
Vue
74 lines
1.8 KiB
Vue
|
<script>
|
||
|
|
import { GlHeatmap } from '@gitlab/ui/dist/charts';
|
||
|
|
import dateformat from 'dateformat';
|
||
|
|
import PrometheusHeader from '../shared/prometheus_header.vue';
|
||
|
|
import ResizableChartContainer from '~/vue_shared/components/resizable_chart/resizable_chart_container.vue';
|
||
|
|
import { graphDataValidatorForValues } from '../../utils';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
GlHeatmap,
|
||
|
|
ResizableChartContainer,
|
||
|
|
PrometheusHeader,
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
graphData: {
|
||
|
|
type: Object,
|
||
|
|
required: true,
|
||
|
|
validator: graphDataValidatorForValues.bind(null, false),
|
||
|
|
},
|
||
|
|
containerWidth: {
|
||
|
|
type: Number,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
chartData() {
|
||
|
|
return this.queries.result.reduce(
|
||
|
|
(acc, result, i) => [...acc, ...result.values.map((value, j) => [i, j, value[1]])],
|
||
|
|
[],
|
||
|
|
);
|
||
|
|
},
|
||
|
|
xAxisName() {
|
||
|
|
return this.graphData.x_label || '';
|
||
|
|
},
|
||
|
|
yAxisName() {
|
||
|
|
return this.graphData.y_label || '';
|
||
|
|
},
|
||
|
|
xAxisLabels() {
|
||
|
|
return this.queries.result.map(res => Object.values(res.metric)[0]);
|
||
|
|
},
|
||
|
|
yAxisLabels() {
|
||
|
|
return this.result.values.map(val => {
|
||
|
|
const [yLabel] = val;
|
||
|
|
|
||
|
|
return dateformat(new Date(yLabel), 'HH:MM:ss');
|
||
|
|
});
|
||
|
|
},
|
||
|
|
result() {
|
||
|
|
return this.queries.result[0];
|
||
|
|
},
|
||
|
|
queries() {
|
||
|
|
return this.graphData.queries[0];
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<div class="prometheus-graph col-12 col-lg-6">
|
||
|
|
<prometheus-header :graph-title="graphData.title" />
|
||
|
|
<resizable-chart-container>
|
||
|
|
<gl-heatmap
|
||
|
|
ref="heatmapChart"
|
||
|
|
v-bind="$attrs"
|
||
|
|
:data-series="chartData"
|
||
|
|
:x-axis-name="xAxisName"
|
||
|
|
:y-axis-name="yAxisName"
|
||
|
|
:x-axis-labels="xAxisLabels"
|
||
|
|
:y-axis-labels="yAxisLabels"
|
||
|
|
:width="containerWidth"
|
||
|
|
/>
|
||
|
|
</resizable-chart-container>
|
||
|
|
</div>
|
||
|
|
</template>
|