github/kubernetes
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update Web UI Bar Gauge Graphs

Browse Source 
- Changed file system abbreviation from 'FS' to Filesystem
- Made chart height dynamic and incorporated legend height change into the master code/datafile.go binary
- Updated the max colors for the graph
- Realigned graph numbers
This commit is contained in:
BC Broussard 2015-06-26 12:48:24 -07:00
parent 8ebd896351
commit 2f43fc72db
8 changed files with 143 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
pkg/ui/datafile.go
View File

File diff suppressed because one or more lines are too long

2
www/app/assets/css/app.css
View File

File diff suppressed because one or more lines are too long

15
www/app/assets/js/app.js
View File

@ -378,7 +378,7 @@ app.controller('TabCtrl', [
.service('cAdvisorService', ["$http", "$q", "ENV", function($http, $q, ENV) { .service('cAdvisorService', ["$http", "$q", "ENV", function($http, $q, ENV) {
var _baseUrl = function(minionIp) { var _baseUrl = function(minionIp) {
var minionPort = ENV['/']['cAdvisorPort'] || "8081"; var minionPort = ENV['/']['cAdvisorPort'] || "8081";
var proxy = ENV['/']['cAdvisorProxy'] || "/api/v1beta3/proxy/nodes/"; var proxy = ENV['/']['cAdvisorProxy'] || "/api/v1/proxy/nodes/";
return proxy + minionIp + ':' + minionPort + '/api/v1.0/'; return proxy + minionIp + ':' + minionPort + '/api/v1.0/';
}; };
@ -961,7 +961,7 @@ app.controller('cAdvisorController', [
var f = fsDataArray[i]; var f = fsDataArray[i];
items.push({ items.push({
label: 'FS #' + f.filesystemNumber, label: 'Filesystem #' + f.filesystemNumber,
stats: f.usageDescription + ' / ' + f.capacityDescription, stats: f.usageDescription + ' / ' + f.capacityDescription,
value: f.totalUsage, value: f.totalUsage,
classNames: getColorForIndex(2 + i, f.totalUsage), classNames: getColorForIndex(2 + i, f.totalUsage),
@ -1967,7 +1967,7 @@ app.controller('ServiceCtrl', [
var label_legend_area = legendSvg.append("svg:g") var label_legend_area = legendSvg.append("svg:g")
.attr("class", "label_legend_area") .attr("class", "label_legend_area")
.attr("transform", "translate(" + ((w - 185) / 2) + "," + 35 + ")"); .attr("transform", "translate(" + ((w - 215) / 2) + "," + 35 + ")");
var legend_group = label_legend_area.append("svg:g").attr("class", "legend_group"); var legend_group = label_legend_area.append("svg:g").attr("class", "legend_group");
@ -1977,7 +1977,7 @@ app.controller('ServiceCtrl', [
var stats_group = label_legend_area.append("svg:g") var stats_group = label_legend_area.append("svg:g")
.attr("class", "stats_group") .attr("class", "stats_group")
.attr("transform", "translate(" + 85 + "," + 11 + ")"); .attr("transform", "translate(" + 115 + "," + 11 + ")");
var path_group = chart.append("svg:g") var path_group = chart.append("svg:g")
.attr("class", "path_group") .attr("class", "path_group")
@ -2134,9 +2134,7 @@ app.controller('ServiceCtrl', [
valueLabels.enter() valueLabels.enter()
.append("svg:text") .append("svg:text")
.attr("class", "value") .attr("class", "value")
.attr( .attr("dx", function(d, i) { return 68; })
"transform", function(d) { return "translate(" + (getRadiusRing(ir, counts - 1)) + ", 0)"; })
.attr("dx", function(d, i) { return 0; })
.attr("dy", function(d, i) { return (thickness + 3) * i; }) .attr("dy", function(d, i) { return (thickness + 3) * i; })
.attr("text-anchor", function(d) { return "start"; }) .attr("text-anchor", function(d) { return "start"; })
.text(function(d) { return d.value; }); .text(function(d) { return d.value; });
@ -2219,7 +2217,8 @@ app.controller('ServiceCtrl', [
return; return;
} }
svg.selectAll("*").remove(); d3.select(element[0]).select("svg.chart").remove();
d3.select(element[0]).select("svg.legend").remove();
var graph = $(element[0]); var graph = $(element[0]);
var w = scope.graphWidth; var w = scope.graphWidth;

2
www/master/components/dashboard/js/modules/controllers/cAdvisorController.js
View File

@ -151,7 +151,7 @@ app.controller('cAdvisorController', [
var f = fsDataArray[i]; var f = fsDataArray[i];
items.push({ items.push({
label: 'FS #' + f.filesystemNumber, label: 'Filesystem #' + f.filesystemNumber,
stats: f.usageDescription + ' / ' + f.capacityDescription, stats: f.usageDescription + ' / ' + f.capacityDescription,
value: f.totalUsage, value: f.totalUsage,
classNames: getColorForIndex(2 + i, f.totalUsage), classNames: getColorForIndex(2 + i, f.totalUsage),

11
www/master/components/dashboard/js/modules/directives/d3MinionBarGauge.js vendored
View File

@ -71,7 +71,7 @@
var label_legend_area = legendSvg.append("svg:g") var label_legend_area = legendSvg.append("svg:g")
.attr("class", "label_legend_area") .attr("class", "label_legend_area")
.attr("transform", "translate(" + ((w - 185) / 2) + "," + 35 + ")"); .attr("transform", "translate(" + ((w - 215) / 2) + "," + 35 + ")");
var legend_group = label_legend_area.append("svg:g").attr("class", "legend_group"); var legend_group = label_legend_area.append("svg:g").attr("class", "legend_group");
@ -81,7 +81,7 @@
var stats_group = label_legend_area.append("svg:g") var stats_group = label_legend_area.append("svg:g")
.attr("class", "stats_group") .attr("class", "stats_group")
.attr("transform", "translate(" + 85 + "," + 11 + ")"); .attr("transform", "translate(" + 115 + "," + 11 + ")");
var path_group = chart.append("svg:g") var path_group = chart.append("svg:g")
.attr("class", "path_group") .attr("class", "path_group")
@ -238,9 +238,7 @@
valueLabels.enter() valueLabels.enter()
.append("svg:text") .append("svg:text")
.attr("class", "value") .attr("class", "value")
.attr( .attr("dx", function(d, i) { return 68; })
"transform", function(d) { return "translate(" + (getRadiusRing(ir, counts - 1)) + ", 0)"; })
.attr("dx", function(d, i) { return 0; })
.attr("dy", function(d, i) { return (thickness + 3) * i; }) .attr("dy", function(d, i) { return (thickness + 3) * i; })
.attr("text-anchor", function(d) { return "start"; }) .attr("text-anchor", function(d) { return "start"; })
.text(function(d) { return d.value; }); .text(function(d) { return d.value; });
@ -323,7 +321,8 @@
return; return;
} }
svg.selectAll("*").remove(); d3.select(element[0]).select("svg.chart").remove();
d3.select(element[0]).select("svg.legend").remove();
var graph = $(element[0]); var graph = $(element[0]);
var w = scope.graphWidth; var w = scope.graphWidth;

108
www/master/components/dashboard/less/dashboard/colors.less
View File

@ -1,48 +1,47 @@
@color-codes: @color-codes:
#2962FF, //blue-deep "#2962FF",
#AA00FF, //purple-deep "#AA00FF",
#00C853, //green-deep "#00C853",
#304FFE, //indigo-deep "#304FFE",
#0091EA, //light-blue-deep "#0091EA",
#FF6D00, //orange-deep "#FF6D00",
#00BFA5, //teal-deep "#00BFA5",
#C51162, //pink-deep "#C51162",
#64DD17, //light-green-deep "#64DD17",
#6200EA, //deep-purple-deep "#6200EA",
#FFD600, //yellow-deep "#FFD600",
#00B8D4, //cyan-deep "#00B8D4",
#FFAB00, //amber-deep "#FFAB00",
#DD2C00, //deep-orange-deep "#DD2C00",
#2979FF, //blue-med "#2979FF",
#D500F9, //purple-med "#D500F9",
#00E676, //green-med "#00E676",
#3D5AFE, //indigo-med "#3D5AFE",
#00B0FF, //light-blue-med "#00B0FF",
#FF9100, //orange-med "#FF9100",
#1DE9B6, //teal-med "#1DE9B6",
#F50057, //pink-med "#F50057",
#76FF03, //light-green-med "#76FF03",
#651FFF, //deep-purple-med "#651FFF",
#FFEA00, //yellow-med "#FFEA00",
#00E5FF, //cyan-med "#00E5FF",
#FFC400, //amber-med "#FFC400",
#FF3D00, //deep-orange-med "#FF3D00",
#448AFF, //blue-light "#448AFF",
#E040FB, //purple-light "#E040FB",
#69F0AE, //green-light "#69F0AE",
#536DFE, //indigo-light "#536DFE",
#40C4FF, //light-blue-light "#40C4FF",
#FFAB40, //orange-light "#FFAB40",
#64FFDA, //teal-light "#64FFDA",
#FF4081, //pink-light "#FF4081",
#B2FF59, //light-green-light "#B2FF59",
#7C4DFF, //deep-purple-light "#7C4DFF",
#FFFF00, //yellow-light "#FFFF00",
#18FFFF, //cyan-light "#18FFFF",
#FFD740, //amber-light "#FFD740",
#FF6E40; //deep-orange-light "#FF6E40";
.dark-overlay { .dark-overlay {
background-color: #292935; background-color: #292935;
@ -70,22 +69,25 @@
@index: @i; //mod(@i - 1, 3) * 7 + round((@i - 1) / 3 - .3); @index: @i; //mod(@i - 1, 3) * 7 + round((@i - 1) / 3 - .3);
} }
.creatcolorclasses(@i:1) when(@i <= length(@color-codes)) { .creatcolorclasses(@i:1) when(@i <= length(@color-codes)) {
@colorCodeString: extract(@color-codes, @i);
@colorCode: color(@colorCodeString);
.getColorIndex(@i); .getColorIndex(@i);
.color-@{index} { .color-@{index} {
background-color: extract(@color-codes, @i); background-color: @colorCode;
// border-color: lighten(extract(@color-codes, @i), 20%); fill: @colorCode;
// border-width: 2px; stroke: @colorCode;
// border-style: solid; }
fill: extract(@color-codes, @i);
stroke: extract(@color-codes, @i);
.color-max-@{index} {
background-color: lighten(@colorCode, 35%);
border-color: lighten(@colorCode, 35%);
fill: lighten(@colorCode, 35%);
} }
md-grid-list.list-color-@{i} md-grid-tile.colored { md-grid-list.list-color-@{i} md-grid-tile.colored {
background-color: extract(@color-codes, @i); background-color: @colorCode;
// border-color: darken(extract(@color-codes, @i), 10%);
// border-width: 1px;
// border-style: solid;
} }
.creatcolorclasses((@i + 1)); .creatcolorclasses((@i + 1));
} }

29
www/master/components/dashboard/less/dashboard/servers.less
View File

@ -23,24 +23,24 @@
} }
.color-max-1 { .color-max-1 {
background-color: lighten(#512DA8, 40%); background-color: lighten(#512DA8, 35%);
border-color: lighten(#512DA8, 40%); border-color: lighten(#512DA8, 35%);
fill: lighten(#512DA8, 40%); fill: lighten(#512DA8, 35%);
// stroke: lighten(#512DA8, 40%); // stroke: lighten(#512DA8, 35%);
} }
.color-max-2 { .color-max-2 {
background-color: lighten(#9C27B0, 40%); background-color: lighten(#9C27B0, 35%);
border-color: lighten(#9C27B0, 40%); border-color: lighten(#9C27B0, 35%);
fill: lighten(#9C27B0, 40%); fill: lighten(#9C27B0, 35%);
// stroke: lighten(#9C27B0, 40%); // stroke: lighten(#9C27B0, 35%);
} }
.color-max-3 { .color-max-3 {
background-color: lighten(#00BCD4, 40%); background-color: lighten(#00BCD4, 35%);
border-color: lighten(#00BCD4, 40%); border-color: lighten(#00BCD4, 35%);
fill: lighten(#00BCD4, 40%); fill: lighten(#00BCD4, 35%);
// stroke: lighten(#00BCD4, 40%); // stroke: lighten(#00BCD4, 35%);
} }
.color-max-warning { .color-max-warning {
@ -96,7 +96,7 @@
} }
svg.legend { svg.legend {
height: 115px; height: auto;
text { text {
font-size:12px; font-size:12px;
@ -120,6 +120,7 @@
} }
.chart_area { .chart_area {
width: 325px; width: 325px;
height: 425px; // height: 425px;
height: auto;
} }
} }

2
www/master/shared/js/modules/services/cAdvisor.js
View File

@ -5,7 +5,7 @@
.service('cAdvisorService', function($http, $q, ENV) { .service('cAdvisorService', function($http, $q, ENV) {
var _baseUrl = function(minionIp) { var _baseUrl = function(minionIp) {
var minionPort = ENV['/']['cAdvisorPort'] || "8081"; var minionPort = ENV['/']['cAdvisorPort'] || "8081";
var proxy = ENV['/']['cAdvisorProxy'] || "/api/v1beta3/proxy/nodes/"; var proxy = ENV['/']['cAdvisorProxy'] || "/api/v1/proxy/nodes/";
return proxy + minionIp + ':' + minionPort + '/api/v1.0/'; return proxy + minionIp + ':' + minionPort + '/api/v1.0/';
}; };