Commit 902d2600 authored by Jose Ivan Vargas's avatar Jose Ivan Vargas

Added a number input to provide a way to format the number of

desired decimals for the cpu metrics
parent 8efd2301
......@@ -43,7 +43,6 @@ import GroupsList from './groups_list';
import ProjectsList from './projects_list';
import MiniPipelineGraph from './mini_pipeline_graph_dropdown';
import BlobLinePermalinkUpdater from './blob/blob_line_permalink_updater';
import PrometheusGraph from './monitoring/prometheus_graph';
import UserCallout from './user_callout';
const ShortcutsBlob = require('./shortcuts_blob');
......
......@@ -25,6 +25,7 @@ class PrometheusGraph {
this.width = parentContainerWidth - this.margin.left - this.margin.right;
this.height = this.originalHeight - this.margin.top - this.margin.bottom;
this.backOffRequestCounter = 0;
this.cpuNumberFormatInput = $('input[graph-type="cpu_values"]');
this.configureGraph();
this.init();
}
......@@ -270,8 +271,15 @@ class PrometheusGraph {
.attr('y', maxMetricValue + 15)
.text(dayFormat(currentData.time));
let currentMetricValue = currentData.value;
if (key === 'cpu_values') {
currentMetricValue = Number(currentMetricValue).toFixed(this.cpuNumberFormatInput.val());
currentMetricValue = `${currentMetricValue}%`;
} else {
currentMetricValue = currentMetricValue.substring(0, 8);
}
d3.select(`${currentPrometheusGraphContainer} .text-metric-usage`)
.text(currentData.value.substring(0, 8));
.text(currentMetricValue);
});
}
......@@ -344,10 +352,12 @@ class PrometheusGraph {
Object.keys(metricsResponse.metrics).forEach((key) => {
if (key === 'cpu_values' || key === 'memory_values') {
const metricValues = (metricsResponse.metrics[key])[0];
this.graphSpecificProperties[key].data = metricValues.values.map(metric => ({
time: new Date(metric[0] * 1000),
value: metric[1],
}));
if (typeof metricValues !== 'undefined') {
this.graphSpecificProperties[key].data = metricValues.values.map(metric => ({
time: new Date(metric[0] * 1000),
value: metric[1],
}));
}
}
});
}
......
......@@ -19,8 +19,16 @@
= render 'projects/deployments/actions', deployment: @environment.last_deployment
.row
.col-sm-12
%h4
CPU utilization
.row
.col-sm-10
%h4
CPU utilization
.col-sm-2.form-horizontal
.form-group
%label{ for: 'decimal_format', class:'control-label col-sm-6' }
Format
.col-sm-6
%input.form-control{ name: 'decimal_format', type: 'number', value: '4', 'graph-type': 'cpu_values', min: '1' }
%svg.prometheus-graph{ 'graph-type' => 'cpu_values' }
.row
.col-sm-12
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment