diff options
Diffstat (limited to 'app/assets/javascripts/monitoring/components/graph/flag.vue')
-rw-r--r-- | app/assets/javascripts/monitoring/components/graph/flag.vue | 151 |
1 files changed, 0 insertions, 151 deletions
diff --git a/app/assets/javascripts/monitoring/components/graph/flag.vue b/app/assets/javascripts/monitoring/components/graph/flag.vue deleted file mode 100644 index 9d6d1caef80..00000000000 --- a/app/assets/javascripts/monitoring/components/graph/flag.vue +++ /dev/null @@ -1,151 +0,0 @@ -<script> -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'; - -export default { - components: { - Icon, - TrackLine, - }, - props: { - currentXCoordinate: { - type: Number, - required: true, - }, - currentData: { - type: Object, - required: true, - }, - 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, - }, - currentCoordinates: { - type: Object, - required: true, - }, - }, - 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; - - const offsetTop = 20 * this.realPixelRatio; - const offsetLeft = (70 + xCoordinate) * this.realPixelRatio; - const height = (this.graphHeight - this.graphHeightOffset) * this.realPixelRatio; - - return { - top: `${offsetTop}px`, - left: `${offsetLeft}px`, - height: `${height}px`, - }; - }, - flagOrientation() { - if (this.currentXCoordinate * this.realPixelRatio > 120) { - return 'left'; - } - return 'right'; - }, - }, - methods: { - seriesMetricValue(seriesIndex, series) { - const indexFromCoordinates = this.currentCoordinates[series.metricTag] - ? this.currentCoordinates[series.metricTag].currentDataIndex - : 0; - const index = this.deploymentFlagData - ? this.deploymentFlagData.seriesIndex - : indexFromCoordinates; - const value = series.values[index] && series.values[index].value; - if (Number.isNaN(value)) { - 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}`; - }, - }, -}; -</script> - -<template> - <div :style="cursorStyle" class="prometheus-graph-cursor"> - <div v-if="showFlagContent" :class="flagOrientation" class="prometheus-graph-flag popover"> - <div class="arrow-shadow"></div> - <div class="arrow"></div> - <div class="popover-title"> - <h5 v-if="deploymentFlagData">Deployed</h5> - {{ formatDate }} <strong>{{ formatTime }}</strong> - </div> - <div v-if="deploymentFlagData" class="popover-content deploy-meta-content"> - <div> - <icon :size="12" name="commit" /> - <a :href="deploymentFlagData.commitUrl"> {{ deploymentFlagData.sha.slice(0, 8) }} </a> - </div> - <div v-if="deploymentFlagData.tag"> - <icon :size="12" name="label" /> - <a :href="deploymentFlagData.tagUrl"> {{ deploymentFlagData.ref }} </a> - </div> - </div> - <div class="popover-content"> - <table class="prometheus-table"> - <tr v-for="(series, index) in timeSeries" :key="index"> - <track-line :track="series" /> - <td>{{ series.track }} {{ seriesMetricLabel(index, series) }}</td> - <td> - <strong>{{ seriesMetricValue(index, series) }}</strong> - </td> - </tr> - </table> - </div> - </div> - </div> -</template> |