diff options
Diffstat (limited to 'app/assets/javascripts/monitoring')
5 files changed, 30 insertions, 64 deletions
diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue index 9bf32d8a2da..d9f2b9ba7cb 100644 --- a/app/assets/javascripts/monitoring/components/graph.vue +++ b/app/assets/javascripts/monitoring/components/graph.vue @@ -255,6 +255,7 @@ export default { :margin="margin" :measurements="measurements" :y-axis-label="yAxisLabel" + :unit-of-display="unitOfDisplay" /> <svg class="graph-data" @@ -304,7 +305,6 @@ export default { :legend-title="legendTitle" :time-series="timeSeries" :current-data-index="currentDataIndex" - :unit-of-display="unitOfDisplay" /> </div> </template> diff --git a/app/assets/javascripts/monitoring/components/graph/axis.vue b/app/assets/javascripts/monitoring/components/graph/axis.vue index ae397fc39e2..6e15f938ab7 100644 --- a/app/assets/javascripts/monitoring/components/graph/axis.vue +++ b/app/assets/javascripts/monitoring/components/graph/axis.vue @@ -1,4 +1,6 @@ <script> +import { convertToSentenceCase } from '~/lib/utils/text_utility'; + export default { props: { graphWidth: { @@ -21,6 +23,10 @@ export default { type: String, required: true, }, + unitOfDisplay: { + type: String, + required: true, + }, }, data() { return { @@ -64,6 +70,10 @@ export default { this.measurements.axisLabelLineOffset || 0 ); }, + + yAxisLabelSentenceCase() { + return `${convertToSentenceCase(this.yAxisLabel)} (${this.unitOfDisplay})`; + }, }, mounted() { this.$nextTick(() => { @@ -106,7 +116,7 @@ export default { :transform="textTransform" ref="ylabel" > - {{ yAxisLabel }} + {{ yAxisLabelSentenceCase }} </text> <rect class="rect-axis-text" diff --git a/app/assets/javascripts/monitoring/components/graph/flag.vue b/app/assets/javascripts/monitoring/components/graph/flag.vue index 8e6a830f08c..02f62ca2c40 100644 --- a/app/assets/javascripts/monitoring/components/graph/flag.vue +++ b/app/assets/javascripts/monitoring/components/graph/flag.vue @@ -181,7 +181,7 @@ export default { /> </svg> </td> - <td>{{ seriesMetricLabel(index, series) }}</td> + <td>{{ series.track }} {{ seriesMetricLabel(index, series) }}</td> <td> <strong>{{ seriesMetricValue(series) }}</strong> </td> diff --git a/app/assets/javascripts/monitoring/components/graph/legend.vue b/app/assets/javascripts/monitoring/components/graph/legend.vue index ca3081a6306..140190d34a9 100644 --- a/app/assets/javascripts/monitoring/components/graph/legend.vue +++ b/app/assets/javascripts/monitoring/components/graph/legend.vue @@ -15,21 +15,8 @@ export default { type: Number, required: true, }, - unitOfDisplay: { - type: String, - required: true, - }, }, methods: { - formatMetricUsage(series) { - const value = - series.values[this.currentDataIndex] && series.values[this.currentDataIndex].value; - if (isNaN(value)) { - return '-'; - } - return `${formatRelevantDigits(value)} ${this.unitOfDisplay}`; - }, - summaryMetrics(series) { return `Avg: ${formatRelevantDigits(series.average)} ยท Max: ${formatRelevantDigits(series.max)}`; }, @@ -50,6 +37,9 @@ export default { :key="index" > <td> + <strong>{{ series.track }}</strong> + </td> + <td> <svg width="15" height="6" @@ -70,17 +60,15 @@ export default { v-if="timeSeries.length > 1" > <template v-if="series.metricTag"> - <strong>{{ series.metricTag }}</strong> - {{ formatMetricUsage(series) }} {{ summaryMetrics(series) }} + <strong>{{ series.metricTag }}</strong> {{ summaryMetrics(series) }} </template> <template v-else> <strong>{{ legendTitle }}</strong> - series {{ index + 1 }} {{ formatMetricUsage(series) }} {{ summaryMetrics(series) }} + series {{ index + 1 }} {{ summaryMetrics(series) }} </template> </td> <td v-else> - <strong>{{ legendTitle }}</strong> - {{ formatMetricUsage(series) }} {{ summaryMetrics(series) }} + <strong>{{ legendTitle }}</strong> {{ summaryMetrics(series) }} </td> </tr> </table> diff --git a/app/assets/javascripts/monitoring/utils/multiple_time_series.js b/app/assets/javascripts/monitoring/utils/multiple_time_series.js index 95db31c7a2a..633f3509f3c 100644 --- a/app/assets/javascripts/monitoring/utils/multiple_time_series.js +++ b/app/assets/javascripts/monitoring/utils/multiple_time_series.js @@ -3,6 +3,7 @@ import { scaleLinear, scaleTime } from 'd3-scale'; import { line, area, curveLinear } from 'd3-shape'; import { extent, max, sum } from 'd3-array'; import { timeMinute } from 'd3-time'; +import { capitalizeFirstCharacter } from '~/lib/utils/text_utility'; const d3 = { scaleLinear, @@ -28,15 +29,7 @@ const defaultColorOrder = ['blue', 'orange', 'red', 'green', 'purple']; const defaultStyleOrder = ['solid', 'dashed', 'dotted']; -function queryTimeSeries( - query, - graphWidth, - graphHeight, - graphHeightOffset, - xDom, - yDom, - lineStyle, -) { +function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom, yDom, lineStyle) { let usedColors = []; function pickColor(name) { @@ -63,12 +56,11 @@ function queryTimeSeries( const timeSeriesValues = timeSeries.values.map(d => d.value); const maximumValue = d3.max(timeSeriesValues); const accum = d3.sum(timeSeriesValues); + const track = capitalizeFirstCharacter(query.track ? query.track : 'Stable'); const timeSeriesScaleX = d3.scaleTime().range([0, graphWidth - 70]); - const timeSeriesScaleY = d3 - .scaleLinear() - .range([graphHeight - graphHeightOffset, 0]); + const timeSeriesScaleY = d3.scaleLinear().range([graphHeight - graphHeightOffset, 0]); timeSeriesScaleX.domain(xDom); timeSeriesScaleX.ticks(d3.timeMinute, 60); @@ -91,27 +83,18 @@ function queryTimeSeries( .y0(graphHeight - graphHeightOffset) .y1(d => timeSeriesScaleY(d.value)); - const timeSeriesMetricLabel = - timeSeries.metric[Object.keys(timeSeries.metric)[0]]; + const timeSeriesMetricLabel = timeSeries.metric[Object.keys(timeSeries.metric)[0]]; const seriesCustomizationData = - query.series != null && - _.findWhere(query.series[0].when, { value: timeSeriesMetricLabel }); + query.series != null && _.findWhere(query.series[0].when, { value: timeSeriesMetricLabel }); if (seriesCustomizationData) { metricTag = seriesCustomizationData.value || timeSeriesMetricLabel; [lineColor, areaColor] = pickColor(seriesCustomizationData.color); } else { - metricTag = - timeSeriesMetricLabel || - query.label || - `series ${timeSeriesNumber + 1}`; + metricTag = timeSeriesMetricLabel || query.label || `series ${timeSeriesNumber + 1}`; [lineColor, areaColor] = pickColor(); } - if (query.track) { - metricTag += ` - ${query.track}`; - } - return { linePath: lineFunction(timeSeries.values), areaPath: areaFunction(timeSeries.values), @@ -123,23 +106,16 @@ function queryTimeSeries( lineColor, areaColor, metricTag, + track, }; }); } -export default function createTimeSeries( - queries, - graphWidth, - graphHeight, - graphHeightOffset, -) { +export default function createTimeSeries(queries, graphWidth, graphHeight, graphHeightOffset) { const allValues = queries.reduce( (allQueryResults, query) => allQueryResults.concat( - query.result.reduce( - (allResults, result) => allResults.concat(result.values), - [], - ), + query.result.reduce((allResults, result) => allResults.concat(result.values), []), ), [], ); @@ -150,15 +126,7 @@ export default function createTimeSeries( return queries.reduce((series, query, index) => { const lineStyle = defaultStyleOrder[index % defaultStyleOrder.length]; return series.concat( - queryTimeSeries( - query, - graphWidth, - graphHeight, - graphHeightOffset, - xDom, - yDom, - lineStyle, - ), + queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom, yDom, lineStyle), ); }, []); } |