Skip to content

Commit

Permalink
Update Web UI Bar Gauge Graphs
Browse files Browse the repository at this point in the history 
- 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
  • Loading branch information
@bcbroussard
bcbroussard committed Jun 26, 2015
1 parent 8ebd896 commit 2f43fc7
Show file tree
Hide file tree
Showing 8 changed files with 143 additions and 143 deletions.
117 changes: 58 additions & 59 deletions pkg/ui/datafile.go
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion www/app/assets/css/app.css
View file

Large diffs are not rendered by default.

15 changes: 7 additions & 8 deletions www/app/assets/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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/';
};
Expand Down Expand Up @@ -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),
Expand Down Expand Up @@ -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");

Expand All @@ -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")
Expand Down Expand Up @@ -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; });
Expand Down Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion www/master/components/dashboard/js/modules/controllers/cAdvisorController.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down
11 changes: 5 additions & 6 deletions www/master/components/dashboard/js/modules/directives/d3MinionBarGauge.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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");

Expand All @@ -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")
Expand Down Expand Up @@ -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; });
Expand Down Expand Up @@ -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;
Expand Down
108 changes: 55 additions & 53 deletions www/master/components/dashboard/less/dashboard/colors.less
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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));
}
Expand Down
29 changes: 15 additions & 14 deletions www/master/components/dashboard/less/dashboard/servers.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -96,7 +96,7 @@
}

svg.legend {
height: 115px;
height: auto;

text {
font-size:12px;
Expand All @@ -120,6 +120,7 @@
}
.chart_area {
width: 325px;
height: 425px;
// height: 425px;
height: auto;
}
}
2 changes: 1 addition & 1 deletion www/master/shared/js/modules/services/cAdvisor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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/';
};
Expand Down

0 comments on commit 2f43fc7

Please sign in to comment.