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) {
var _baseUrl = function(minionIp) {
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/';
};
@ -961,7 +961,7 @@ app.controller('cAdvisorController', [
var f = fsDataArray[i];
items.push({
label: 'FS #' + f.filesystemNumber,
label: 'Filesystem #' + f.filesystemNumber,
stats: f.usageDescription + ' / ' + f.capacityDescription,
value: f.totalUsage,
classNames: getColorForIndex(2 + i, f.totalUsage),
@ -1967,7 +1967,7 @@ app.controller('ServiceCtrl', [
var label_legend_area = legendSvg.append("svg:g")
.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");
@ -1977,7 +1977,7 @@ app.controller('ServiceCtrl', [
var stats_group = label_legend_area.append("svg:g")
.attr("class", "stats_group")
.attr("transform", "translate(" + 85 + "," + 11 + ")");
.attr("transform", "translate(" + 115 + "," + 11 + ")");
var path_group = chart.append("svg:g")
.attr("class", "path_group")
@ -2134,9 +2134,7 @@ app.controller('ServiceCtrl', [
valueLabels.enter()
.append("svg:text")
.attr("class", "value")
.attr(
"transform", function(d) { return "translate(" + (getRadiusRing(ir, counts - 1)) + ", 0)"; })
.attr("dx", function(d, i) { return 0; })
.attr("dx", function(d, i) { return 68; })
.attr("dy", function(d, i) { return (thickness + 3) * i; })
.attr("text-anchor", function(d) { return "start"; })
.text(function(d) { return d.value; });
@ -2219,7 +2217,8 @@ app.controller('ServiceCtrl', [
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 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];
items.push({
label: 'FS #' + f.filesystemNumber,
label: 'Filesystem #' + f.filesystemNumber,
stats: f.usageDescription + ' / ' + f.capacityDescription,
value: 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")
.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");
@ -81,7 +81,7 @@
var stats_group = label_legend_area.append("svg:g")
.attr("class", "stats_group")
.attr("transform", "translate(" + 85 + "," + 11 + ")");
.attr("transform", "translate(" + 115 + "," + 11 + ")");
var path_group = chart.append("svg:g")
.attr("class", "path_group")
@ -238,9 +238,7 @@
valueLabels.enter()
.append("svg:text")
.attr("class", "value")
.attr(
"transform", function(d) { return "translate(" + (getRadiusRing(ir, counts - 1)) + ", 0)"; })
.attr("dx", function(d, i) { return 0; })
.attr("dx", function(d, i) { return 68; })
.attr("dy", function(d, i) { return (thickness + 3) * i; })
.attr("text-anchor", function(d) { return "start"; })
.text(function(d) { return d.value; });
@ -323,7 +321,8 @@
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 w = scope.graphWidth;

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

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

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

@ -23,24 +23,24 @@
}
.color-max-1 {
background-color: lighten(#512DA8, 40%);
border-color: lighten(#512DA8, 40%);
fill: lighten(#512DA8, 40%);
// stroke: lighten(#512DA8, 40%);
background-color: lighten(#512DA8, 35%);
border-color: lighten(#512DA8, 35%);
fill: lighten(#512DA8, 35%);
// stroke: lighten(#512DA8, 35%);
}
.color-max-2 {
background-color: lighten(#9C27B0, 40%);
border-color: lighten(#9C27B0, 40%);
fill: lighten(#9C27B0, 40%);
// stroke: lighten(#9C27B0, 40%);
background-color: lighten(#9C27B0, 35%);
border-color: lighten(#9C27B0, 35%);
fill: lighten(#9C27B0, 35%);
// stroke: lighten(#9C27B0, 35%);
}
.color-max-3 {
background-color: lighten(#00BCD4, 40%);
border-color: lighten(#00BCD4, 40%);
fill: lighten(#00BCD4, 40%);
// stroke: lighten(#00BCD4, 40%);
background-color: lighten(#00BCD4, 35%);
border-color: lighten(#00BCD4, 35%);
fill: lighten(#00BCD4, 35%);
// stroke: lighten(#00BCD4, 35%);
}
.color-max-warning {
@ -96,7 +96,7 @@
}
svg.legend {
height: 115px;
height: auto;
text {
font-size:12px;
@ -120,6 +120,7 @@
}
.chart_area {
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) {
var _baseUrl = function(minionIp) {
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/';
};