Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 113db3e

Browse files
rmarsrmars
committed
Dashboard: convert latency graph to success rate graph, metric tweaks
Readd horizontal color line under each client header Convert latency graph to success rate graph Make Successes the top left metric Color Success Rate more smarter
1 parent 6b3e915 commit 113db3e

File tree

10 files changed

+152
-106
lines changed

10 files changed

+152
-106
lines changed

‎admin/src/main/resources/io/buoyant/admin/css/dashboard-shared.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,22 @@
3636
.failure-metric {
3737
color: #D84A4A;
3838
}
39+
40+
/*
41+
* Success rates
42+
*/
43+
.sr-good {
44+
color: #4AD8AC;
45+
}
46+
47+
.sr-poor {
48+
color: #F28E1D;
49+
}
50+
51+
.sr-bad {
52+
color: #D84A4A;
53+
}
54+
55+
.sr-undefined {
56+
color: #FFFFFF;
57+
}

‎admin/src/main/resources/io/buoyant/admin/css/dashboard.css‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -169,12 +169,20 @@ nav ul.navbar-nav {
169169
margin-bottom: 10px;
170170
}
171171

172+
.client-container .router-header-large {
173+
padding: 8px 0;
174+
}
175+
172176
.chart-container {
173177
padding-top: 40px;
174178
}
175179

176-
.router-latencies > div{
177-
font-size:12px;
180+
.router-latencies-container {
181+
padding-top: 18px;
182+
}
183+
184+
.router-latencies > div {
185+
font-size: 12px;
178186
line-height: 32px;
179187
font-weight: 300;
180188
}

‎admin/src/main/resources/io/buoyant/admin/js/client_latency_graph.js‎

Lines changed: 0 additions & 76 deletions
This file was deleted.

‎admin/src/main/resources/io/buoyant/admin/js/client_success_graph.js‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
/* globals UpdateableChart */
2+
/* exported ClientSuccessRateGraph */
3+
var ClientSuccessRateGraph = (function() {
4+
var neutralLineColor = "#878787"; // greys.neutral
5+
6+
function createChartLegend(successLineColor) {
7+
return {
8+
referenceLine: neutralLineColor,
9+
successRate: successLineColor
10+
}
11+
}
12+
13+
function initializeChart($chartEl, dataKeys, timeseriesParamsFn) {
14+
var $canvas = $("<canvas id='client-success-canvas' height='141'></canvas>");
15+
$chartEl.append($canvas);
16+
17+
var chart = new UpdateableChart(
18+
{
19+
maxValue: 100.000001, // the 0.000001 is a SmoothieCharts hack
20+
grid: {
21+
strokeStyle: '#878787',
22+
verticalSections: 2,
23+
millisPerLine: 10000,
24+
borderVisible: false
25+
},
26+
labels: {
27+
fillStyle: '#878787',
28+
fontSize: 12,
29+
precision: 2
30+
},
31+
millisPerPixel: 60
32+
},
33+
$canvas[0],
34+
function() {
35+
return $chartEl.width();
36+
},
37+
timeseriesParamsFn
38+
);
39+
var desiredMetrics = _.map(dataKeys, function(metric) {
40+
return {
41+
name: metric,
42+
color: ""
43+
}
44+
});
45+
chart.setMetrics(desiredMetrics, true);
46+
47+
return chart;
48+
}
49+
50+
return function($chartEl, clientColor) {
51+
var chartLegend = createChartLegend(clientColor);
52+
var successRateKeys = ["successRate", "referenceLine"];
53+
var chart = initializeChart($chartEl, successRateKeys, timeseriesParams);
54+
55+
function timeseriesParams(name) {
56+
return {
57+
strokeStyle: chartLegend[name],
58+
lineWidth: name === "referenceLine" ? 1 : 2
59+
};
60+
}
61+
62+
return {
63+
updateColors: function(clientColor) {
64+
chartLegend = createChartLegend(clientColor);
65+
},
66+
updateMetrics: function(data) {
67+
chart.updateMetrics(data)
68+
}
69+
}
70+
}
71+
})();

‎admin/src/main/resources/io/buoyant/admin/js/router_client.js‎

Lines changed: 42 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,20 @@
1-
/* globals ClientLatencyGraph, Query, SuccessRate */
1+
/* globals ClientSuccessRateGraph, Query, SuccessRate */
22
/* exported RouterClient */
33
var RouterClient = (function() {
44
var template;
5+
var metricToColorShade = {
6+
"max": "light",
7+
"p9990": "tint",
8+
"p99": "neutral",
9+
"p95": "shade",
10+
"p50": "dark"
11+
}
12+
var latencyKeys = _.map(metricToColorShade, function(val, key) { return "request_latency_ms." + key });
13+
function createLatencyLegend(colorLookup) {
14+
return _.mapValues(metricToColorShade, function(shade) {
15+
return colorLookup[shade];
16+
});
17+
}
518

619
function getMetricDefinitions(routerName, clientName) {
720
return _.map([
@@ -32,23 +45,28 @@ var RouterClient = (function() {
3245

3346
function getLatencyData(client, latencyKeys, chartLegend) {
3447
var latencyData = _.pick(client.metrics, latencyKeys);
35-
var tableData = [];
36-
var chartData = [];
3748

38-
_.each(latencyData, function(latencyValue, metricName) {
49+
return _.map(latencyData, function(latencyValue, metricName) {
3950
var key = metricName.split(".")[1];
40-
tableData.push({
51+
return {
4152
latencyLabel: key,
4253
latencyValue: latencyValue,
4354
latencyColor: chartLegend[key]
44-
});
45-
chartData.push({
46-
name: metricName,
47-
delta: latencyValue
48-
});
55+
};
4956
});
57+
}
58+
59+
function getSuccessRate(summaryData) {
60+
var successRate = summaryData.successRateRaw === -1 ? 1 : summaryData.successRateRaw;
5061

51-
return { tableData: tableData, chartData: chartData };
62+
// draw a 100 % Success Rate reference line. Hack it so that SmoothieCharts plots 100%
63+
// at the top rather than at the bottom
64+
var referenceLine = successRate === 1 ? 99.999 : 100;
65+
66+
return [
67+
{ name: "successRate", delta: successRate * 100 },
68+
{ name: "referenceLine", delta: referenceLine }
69+
];
5270
}
5371

5472
function getSummaryData(data, metricDefinitions) {
@@ -62,8 +80,13 @@ var RouterClient = (function() {
6280
return mem;
6381
}, {});
6482

65-
var successRate = new SuccessRate(summary.success || 0, summary.failures || 0);
66-
summary.successRate = successRate.prettyRate();
83+
var successRate = new SuccessRate(summary.success.value || 0, summary.failures.value || 0);
84+
summary.successRate = {
85+
description: "Success Rate",
86+
value: successRate.prettyRate(),
87+
style: successRate.rateStyle()
88+
};
89+
summary.successRateRaw = successRate.successRate;
6790

6891
return summary;
6992
}
@@ -72,18 +95,19 @@ var RouterClient = (function() {
7295
template = clientTemplate;
7396
Handlebars.registerPartial('metricPartial', metricPartial);
7497
var clientColor = colors.color;
98+
var latencyLegend = createLatencyLegend(colors.colorFamily);
7599
var metricDefinitions = getMetricDefinitions(routerName, client.label);
76100

77101
renderMetrics($metricsEl, client, [], [], clientColor);
78-
var chart = ClientLatencyGraph($chartEl, colors.colorFamily);
102+
var chart = ClientSuccessRateGraph($chartEl, colors.color);
79103

80104
var metricsHandler = function(data) {
81105
var filteredData = _.filter(data.specific, function (d) { return d.name.indexOf(routerName) !== -1 });
82106
var summaryData = getSummaryData(filteredData, metricDefinitions);
83-
var latencies = getLatencyData(client, chart.getLatencyKeys(), chart.getChartLegend());
107+
var latencies = getLatencyData(client, latencyKeys, latencyLegend); // this legend is no longer used in any charts: consider removing
84108

85-
chart.updateMetrics(latencies.chartData);
86-
renderMetrics($metricsEl, client, summaryData, latencies.tableData, clientColor);
109+
chart.updateMetrics(getSuccessRate(summaryData));
110+
renderMetrics($metricsEl, client, summaryData, latencies, clientColor);
87111
}
88112

89113
var getDesiredMetrics = function(metrics) {
@@ -96,7 +120,7 @@ var RouterClient = (function() {
96120

97121
return {
98122
updateColors: function(clientToColor) {
99-
chart.updateColors(clientToColor[client.label].colorFamily);
123+
chart.updateColors(clientToColor[client.label].color);
100124
}
101125
};
102126
};

‎admin/src/main/resources/io/buoyant/admin/js/router_clients.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@ var RouterClients = (function() {
2626
$clientEl.show();
2727
var colorsForClient = clientToColor[client.label];
2828
var $container = $(clientContainerTemplate({
29-
clientColor: colorsForClient.color
29+
clientColor: colorsForClient.color,
30+
client: client.label
3031
})).appendTo($clientEl);
3132
var $metrics = $container.find(".metrics-container");
3233
var $chart = $container.find(".chart-container");

‎admin/src/main/resources/io/buoyant/admin/template/metric.partial.template‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
metric
77
{{/if}}
88
</div>
9-
<div class="{{metricClass}}">
9+
<div class="{{metricClass}} {{style}}">
1010
{{#if value}}
1111
{{value}}
1212
{{else}}

‎admin/src/main/resources/io/buoyant/admin/template/router_client.template‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,15 @@
1-
<div class="router-header-large">
2-
/{{client}}
3-
</div>
4-
51
<div class="client-metrics row">
62
<div class="col-md-2">
3+
{{> metricPartial data.successRate containerClass="metric-container" metricClass="success-metric metric-large" borderColor=clientColor}}
74
{{> metricPartial data.requests containerClass="metric-container" metricClass="metric-large" borderColor=clientColor}}
8-
{{> metricPartial data.success containerClass="success-metric-container metric-container" metricClass="success-metric metric-large"}}
95
</div>
106

117
<div class="col-md-2">
128
{{> metricPartial data.connections containerClass="metric-container" metricClass="metric-large" borderColor=clientColor}}
13-
{{> metricPartial data.failures containerClass="failure-metric-container metric-container" metricClass="failure-metric metric-large"}}
9+
{{> metricPartial data.failures containerClass="metric-container" metricClass="failure-metric metric-large" borderColor=clientColor}}
1410
</div>
1511

16-
<div class="col-md-2">
12+
<div class="col-md-2 router-latencies-container">
1713
<div class="metric-header">Latencies</div>
1814
<div class="router-latencies">
1915
{{#each latencies}}

‎admin/src/main/resources/io/buoyant/admin/template/router_client_container.template‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
<div class="client-container clearfix">
2+
<div class="router-header-large"style="border-bottom: 2px solid {{clientColor}};">
3+
/{{client}}
4+
</div>
25
<div class="metrics-container col-md-6"></div>
36
<div class="chart-container col-md-6"></div>
47
</div>

‎linkerd/admin/src/main/scala/io/buoyant/linkerd/admin/DashboardHandler.scala‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ private[admin] class DashboardHandler extends Service[Request, Response] {
3333
"router_summary.js",
3434
"combined_client_graph.js",
3535
"router_server.js",
36-
"client_latency_graph.js",
36+
"client_success_graph.js",
3737
"router_client.js",
3838
"router_clients.js",
3939
"router_controller.js",

0 commit comments

Comments
 (0)