diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-02-13 03:08:46 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-02-13 03:08:46 +0300 |
commit | 47d1f417f03aca055b2ba49c32bb6fb01c459831 (patch) | |
tree | 200f05f28369cbf3a34abcb4a3c388558268b86f /app/assets/javascripts/monitoring | |
parent | 006e89697dd5165f355afc20fc6bb0cdfa7b381a (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/monitoring')
-rw-r--r-- | app/assets/javascripts/monitoring/components/charts/single_stat.vue | 19 |
1 files changed, 16 insertions, 3 deletions
diff --git a/app/assets/javascripts/monitoring/components/charts/single_stat.vue b/app/assets/javascripts/monitoring/components/charts/single_stat.vue index e75ddb05808..3368be4df75 100644 --- a/app/assets/javascripts/monitoring/components/charts/single_stat.vue +++ b/app/assets/javascripts/monitoring/components/charts/single_stat.vue @@ -19,8 +19,21 @@ export default { queryInfo() { return this.graphData.metrics[0]; }, - engineeringNotation() { - return `${roundOffFloat(this.queryInfo.result[0].value[1], 1)}${this.queryInfo.unit}`; + queryResult() { + return this.queryInfo.result[0]?.value[1]; + }, + /** + * This method formats the query result from a promQL expression + * allowing a user to format the data in percentile values + * by using the `max_value` inner property from the graphData prop + * @returns {(String)} + */ + statValue() { + const chartValue = this.graphData?.max_value + ? (this.queryResult / Number(this.graphData.max_value)) * 100 + : this.queryResult; + + return `${roundOffFloat(chartValue, 1)}${this.queryInfo.unit}`; }, graphTitle() { return this.queryInfo.label; @@ -33,6 +46,6 @@ export default { <div class="prometheus-graph-header"> <h5 ref="graphTitle" class="prometheus-graph-title">{{ graphTitle }}</h5> </div> - <gl-single-stat :value="engineeringNotation" :title="graphTitle" variant="success" /> + <gl-single-stat :value="statValue" :title="graphTitle" variant="success" /> </div> </template> |