debian-mirror-gitlab/app/assets/javascripts/monitoring/components/graph/flag.vue

182 lines
4.4 KiB
Vue
Raw Normal View History

2018-03-17 18:26:18 +05:30
<script>
2018-05-09 12:01:36 +05:30
import { dateFormat, timeFormat } from '../../utils/date_time_formatters';
import { formatRelevantDigits } from '../../../lib/utils/number_utils';
import Icon from '../../../vue_shared/components/icon.vue';
import TrackLine from './track_line.vue';
2018-03-17 18:26:18 +05:30
2018-05-09 12:01:36 +05:30
export default {
components: {
Icon,
TrackLine,
},
props: {
currentXCoordinate: {
type: Number,
required: true,
2018-03-17 18:26:18 +05:30
},
2018-05-09 12:01:36 +05:30
currentData: {
type: Object,
required: true,
2018-03-17 18:26:18 +05:30
},
2018-05-09 12:01:36 +05:30
deploymentFlagData: {
type: Object,
required: false,
default: null,
},
graphHeight: {
type: Number,
required: true,
},
graphHeightOffset: {
type: Number,
required: true,
},
realPixelRatio: {
type: Number,
required: true,
},
showFlagContent: {
type: Boolean,
required: true,
},
timeSeries: {
type: Array,
required: true,
},
unitOfDisplay: {
type: String,
required: true,
},
legendTitle: {
type: String,
required: true,
},
2018-10-15 14:42:47 +05:30
currentCoordinates: {
2018-11-20 20:47:30 +05:30
type: Object,
2018-10-15 14:42:47 +05:30
required: true,
},
2018-05-09 12:01:36 +05:30
},
computed: {
formatTime() {
return this.deploymentFlagData
? timeFormat(this.deploymentFlagData.time)
: timeFormat(this.currentData.time);
},
formatDate() {
return this.deploymentFlagData
? dateFormat(this.deploymentFlagData.time)
: dateFormat(this.currentData.time);
},
cursorStyle() {
const xCoordinate = this.deploymentFlagData
? this.deploymentFlagData.xPos
: this.currentXCoordinate;
2018-03-17 18:26:18 +05:30
2018-05-09 12:01:36 +05:30
const offsetTop = 20 * this.realPixelRatio;
const offsetLeft = (70 + xCoordinate) * this.realPixelRatio;
const height = (this.graphHeight - this.graphHeightOffset) * this.realPixelRatio;
2018-03-17 18:26:18 +05:30
2018-05-09 12:01:36 +05:30
return {
top: `${offsetTop}px`,
left: `${offsetLeft}px`,
height: `${height}px`,
};
2018-03-17 18:26:18 +05:30
},
2018-05-09 12:01:36 +05:30
flagOrientation() {
if (this.currentXCoordinate * this.realPixelRatio > 120) {
return 'left';
}
return 'right';
},
},
methods: {
2018-10-15 14:42:47 +05:30
seriesMetricValue(seriesIndex, series) {
2018-11-20 20:47:30 +05:30
const indexFromCoordinates = this.currentCoordinates[series.metricTag]
2018-12-13 13:39:08 +05:30
? this.currentCoordinates[series.metricTag].currentDataIndex
: 0;
2018-05-09 12:01:36 +05:30
const index = this.deploymentFlagData
? this.deploymentFlagData.seriesIndex
2018-10-15 14:42:47 +05:30
: indexFromCoordinates;
2018-05-09 12:01:36 +05:30
const value = series.values[index] && series.values[index].value;
2018-11-08 19:23:39 +05:30
if (Number.isNaN(value)) {
2018-05-09 12:01:36 +05:30
return '-';
}
return `${formatRelevantDigits(value)}${this.unitOfDisplay}`;
},
seriesMetricLabel(index, series) {
if (this.timeSeries.length < 2) {
return this.legendTitle;
}
if (series.metricTag) {
return series.metricTag;
}
return `series ${index + 1}`;
},
},
};
2018-03-17 18:26:18 +05:30
</script>
<template>
2019-01-03 12:48:30 +05:30
<div
:style="cursorStyle"
class="prometheus-graph-cursor"
>
<div
v-if="showFlagContent"
:class="flagOrientation"
class="prometheus-graph-flag popover"
>
2018-11-18 11:00:15 +05:30
<div class="arrow-shadow"></div>
2018-03-17 18:26:18 +05:30
<div class="arrow"></div>
<div class="popover-title">
2019-01-03 12:48:30 +05:30
<h5 v-if="deploymentFlagData">
Deployed
</h5>
{{ formatDate }}
<strong>{{ formatTime }}</strong>
2018-03-17 18:26:18 +05:30
</div>
2019-01-03 12:48:30 +05:30
<div
v-if="deploymentFlagData"
class="popover-content deploy-meta-content"
>
2018-03-17 18:26:18 +05:30
<div>
2019-01-03 12:48:30 +05:30
<icon
:size="12"
name="commit"
/>
<a :href="deploymentFlagData.commitUrl">
{{ deploymentFlagData.sha.slice(0, 8) }}
</a>
2018-03-17 18:26:18 +05:30
</div>
2019-01-03 12:48:30 +05:30
<div
v-if="deploymentFlagData.tag"
>
<icon
:size="12"
name="label"
/>
<a :href="deploymentFlagData.tagUrl">
{{ deploymentFlagData.ref }}
</a>
2018-03-17 18:26:18 +05:30
</div>
</div>
<div class="popover-content">
2018-05-09 12:01:36 +05:30
<table class="prometheus-table">
2019-01-03 12:48:30 +05:30
<tr
v-for="(series, index) in timeSeries"
:key="index"
>
<track-line :track="series"/>
<td>
{{ series.track }} {{ seriesMetricLabel(index, series) }}
</td>
2018-10-15 14:42:47 +05:30
<td>
<strong>{{ seriesMetricValue(index, series) }}</strong>
2018-03-17 18:26:18 +05:30
</td>
</tr>
</table>
</div>
</div>
</div>
</template>