github
/
k3s
mirror of https://github.com/k3s-io/k3s
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #8614 from bcbroussard/v1beta3-nodes 

Update node pages to v1beta3 in web ui
pull/6/head
Tim Hockin 2015-05-27 15:55:44 -07:00
parent d88444cace 69160f3464
commit 0bea034edb
7 changed files with 1086 additions and 993 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1047
pkg/ui/datafile.go
View File

File diff suppressed because it is too large Load Diff

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

@ -641,7 +641,9 @@ app.provider('k8sv1Beta3Api',
api.getPods = function(query) { return _get($http, api.getUrlBase() + '/pods', query); };
api.getMinions = function(query) { return _get($http, urlBase + '/nodes', query); };
api.getNodes = function(query) { return _get($http, urlBase + '/nodes', query); };
api.getMinions = api.getNodes;
api.getServices = function(query) { return _get($http, api.getUrlBase() + '/services', query); };
@ -853,453 +855,6 @@ app.provider('k8sv1Beta3Api',
* Module: toggle-state.js
* Services to share toggle state functionality
=========================================================*/
(function() {
'use strict';
angular.module('kubernetesApp.components.dashboard')
.directive('d3MinionBarGauge', [
'd3DashboardService',
function(d3DashboardService) {
return {
restrict: 'E',
scope: {
data: '=',
thickness: '@',
graphWidth: '@',
graphHeight: '@'
},
link: function(scope, element, attrs) {
var draw = function(d3) {
var svg = d3.select("svg.chart");
var legendSvg = d3.select("svg.legend");
window.onresize = function() { return scope.$apply(); };
scope.$watch(function() { return angular.element(window)[0].innerWidth; },
function() { return scope.render(scope.data); });
scope.$watch('data', function(newVals, oldVals) {
return initOrUpdate(newVals, oldVals);
}, true);
function initOrUpdate(newVals, oldVals) {
if (oldVals === null || oldVals === undefined) {
return scope.render(newVals);
} else {
return update(oldVals, newVals);
}
}
var textOffset = 10;
var el = null;
var radius = 100;
var oldData = [];
function init(options) {
var clone = options.data;
var preparedData = setData(clone);
setup(preparedData, options.width, options.height);
}
function setup(data, w, h) {
svg = d3.select(element[0]).append("svg").attr("width", "100%");
legendSvg = d3.select(element[0]).append("svg").attr("width", "100%");
var chart = svg.attr("class", "chart")
.attr("width", w)
.attr("height", h - 25)
.append("svg:g")
.attr("class", "concentricchart")
.attr("transform", "translate(" + ((w / 2)) + "," + h / 4 + ")");
var legend = legendSvg.attr("class", "legend").attr("width", w);
radius = Math.min(w, h) / 2;
var hostName = legendSvg.append("text")
.attr("class", "hostName")
.attr("transform", "translate(" + ((w - 120) / 2) + "," + 15 + ")");
var label_legend_area = legendSvg.append("svg:g")
.attr("class", "label_legend_area")
.attr("transform", "translate(" + ((w - 185) / 2) + "," + 35 + ")");
var legend_group = label_legend_area.append("svg:g").attr("class", "legend_group");
var label_group = label_legend_area.append("svg:g")
.attr("class", "label_group")
.attr("transform", "translate(" + 25 + "," + 11 + ")");
var stats_group = label_legend_area.append("svg:g")
.attr("class", "stats_group")
.attr("transform", "translate(" + 85 + "," + 11 + ")");
var path_group = chart.append("svg:g")
.attr("class", "path_group")
.attr("transform", "translate(0," + (h / 4) + ")");
var value_group = chart.append("svg:g")
.attr("class", "value_group")
.attr("transform", "translate(" + -(w * 0.205) + "," + -(h * 0.10) + ")");
generateArcs(chart, data);
}
function update(_oldData, _newData) {
if (_newData === undefined || _newData === null) {
return;
}
var clone = jQuery.extend(true, {}, _newData);
var cloneOld = jQuery.extend(true, {}, _oldData);
var preparedData = setData(clone);
oldData = setData(cloneOld);
animate(preparedData);
}
function animate(data) { generateArcs(null, data); }
function setData(data) {
var diameter = 2 * Math.PI * radius;
var localData = [];
$.each(data[0].segments, function(ri, value) {
function calcAngles(v) {
var segmentValueSum = 200;
if (v > segmentValueSum) {
v = segmentValueSum;
}
var segmentValue = v;
var fraction = segmentValue / segmentValueSum;
var arcBatchLength = fraction * 4 * Math.PI;
var arcPartition = arcBatchLength;
var startAngle = Math.PI * 2;
var endAngle = startAngle + arcPartition;
return {
startAngle: startAngle,
endAngle: endAngle
};
}
var valueData = calcAngles(value.value);
data[0].segments[ri].startAngle = valueData.startAngle;
data[0].segments[ri].endAngle = valueData.endAngle;
var maxData = value.maxData;
var maxTickData = calcAngles(maxData.maxValue + 0.2);
data[0].segments[ri].maxTickStartAngle = maxTickData.startAngle;
data[0].segments[ri].maxTickEndAngle = maxTickData.endAngle;
var maxArcData = calcAngles(maxData.maxValue);
data[0].segments[ri].maxArcStartAngle = maxArcData.startAngle;
data[0].segments[ri].maxArcEndAngle = maxArcData.endAngle;
data[0].segments[ri].index = ri;
});
localData.push(data[0].segments);
return localData[0];
}
function generateArcs(_svg, data) {
var chart = svg;
var transitionTime = 750;
$.each(data, function(index, value) {
if (oldData[index] !== undefined) {
data[index].previousEndAngle = oldData[index].endAngle;
} else {
data[index].previousEndAngle = 0;
}
});
var thickness = parseInt(scope.thickness, 10);
var ir = (parseInt(scope.graphWidth, 10) / 3);
var path_group = svg.select('.path_group');
var arc_group = path_group.selectAll(".arc_group").data(data);
var arcEnter = arc_group.enter().append("g").attr("class", "arc_group");
arcEnter.append("path").attr("class", "bg-circle").attr("d", getBackgroundArc(thickness, ir));
arcEnter.append("path")
.attr("class", function(d, i) { return 'max_tick_arc ' + d.maxData.maxTickClassNames; });
arcEnter.append("path")
.attr("class", function(d, i) { return 'max_bg_arc ' + d.maxData.maxClassNames; });
arcEnter.append("path").attr("class", function(d, i) { return 'value_arc ' + d.classNames; });
var max_tick_arc = arc_group.select(".max_tick_arc");
max_tick_arc.transition()
.attr("class", function(d, i) { return 'max_tick_arc ' + d.maxData.maxTickClassNames; })
.attr("d", function(d) {
var arc = maxArc(thickness, ir);
arc.startAngle(d.maxTickStartAngle);
arc.endAngle(d.maxTickEndAngle);
return arc(d);
});
var max_bg_arc = arc_group.select(".max_bg_arc");
max_bg_arc.transition()
.attr("class", function(d, i) { return 'max_bg_arc ' + d.maxData.maxClassNames; })
.attr("d", function(d) {
var arc = maxArc(thickness, ir);
arc.startAngle(d.maxArcStartAngle);
arc.endAngle(d.maxArcEndAngle);
return arc(d);
});
var value_arc = arc_group.select(".value_arc");
value_arc.transition().ease("exp").attr("class", function(d, i) {
return 'value_arc ' + d.classNames;
}).duration(transitionTime).attrTween("d", function(d) { return arcTween(d, thickness, ir); });
arc_group.exit()
.select(".value_arc")
.transition()
.ease("exp")
.duration(transitionTime)
.attrTween("d", function(d) { return arcTween(d, thickness, ir); })
.remove();
drawLabels(chart, data, ir, thickness);
buildLegend(chart, data);
}
function arcTween(b, thickness, ir) {
var prev = JSON.parse(JSON.stringify(b));
prev.endAngle = b.previousEndAngle;
var i = d3.interpolate(prev, b);
return function(t) { return getArc(thickness, ir)(i(t)); };
}
function maxArc(thickness, ir) {
var arc = d3.svg.arc().innerRadius(function(d) {
return getRadiusRing(ir, d.index);
}).outerRadius(function(d) { return getRadiusRing(ir + thickness, d.index); });
return arc;
}
function drawLabels(chart, data, ir, thickness) {
svg.select('.value_group').selectAll("*").remove();
var counts = data.length;
var value_group = chart.select('.value_group');
var valueLabels = value_group.selectAll("text.value").data(data);
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("dy", function(d, i) { return (thickness + 3) * i; })
.attr("text-anchor", function(d) { return "start"; })
.text(function(d) { return d.value; });
valueLabels.transition().duration(300).attrTween(
"d", function(d) { return arcTween(d, thickness, ir); });
valueLabels.exit().remove();
}
function buildLegend(chart, data) {
var svg = legendSvg;
svg.select('.label_group').selectAll("*").remove();
svg.select('.legend_group').selectAll("*").remove();
svg.select('.stats_group').selectAll("*").remove();
var host_name = svg.select('.hostName');
var label_group = svg.select('.label_group');
var stats_group = svg.select('.stats_group');
host_name.text(data[0].hostName);
host_name = svg.selectAll("text.hostName").data(data);
host_name.attr("text-anchor", function(d) { return "start"; })
.text(function(d) { return d.hostName; });
host_name.exit().remove();
var labels = label_group.selectAll("text.labels").data(data);
labels.enter()
.append("svg:text")
.attr("class", "labels")
.attr("dy", function(d, i) { return 19 * i; })
.attr("text-anchor", function(d) { return "start"; })
.text(function(d) { return d.label; });
labels.exit().remove();
var stats = stats_group.selectAll("text.stats").data(data);
stats.enter()
.append("svg:text")
.attr("class", "stats")
.attr("dy", function(d, i) { return 19 * i; })
.attr("text-anchor", function(d) { return "start"; })
.text(function(d) { return d.stats; });
stats.exit().remove();
var legend_group = svg.select('.legend_group');
var legend = legend_group.selectAll("rect").data(data);
legend.enter()
.append("svg:rect")
.attr("x", 2)
.attr("y", function(d, i) { return 19 * i; })
.attr("width", 13)
.attr("height", 13)
.attr("class", function(d, i) { return "rect " + d.classNames; });
legend.exit().remove();
}
function getRadiusRing(ir, i) { return ir - (i * 20); }
function getArc(thickness, ir) {
var arc = d3.svg.arc()
.innerRadius(function(d) { return getRadiusRing(ir, d.index); })
.outerRadius(function(d) { return getRadiusRing(ir + thickness, d.index); })
.startAngle(function(d, i) { return d.startAngle; })
.endAngle(function(d, i) { return d.endAngle; });
return arc;
}
function getBackgroundArc(thickness, ir) {
var arc = d3.svg.arc()
.innerRadius(function(d) { return getRadiusRing(ir, d.index); })
.outerRadius(function(d) { return getRadiusRing(ir + thickness, d.index); })
.startAngle(0)
.endAngle(function() { return 2 * Math.PI; });
return arc;
}
scope.render = function(data) {
if (data === undefined || data === null) {
return;
}
svg.selectAll("*").remove();
var graph = $(element[0]);
var w = scope.graphWidth;
var h = scope.graphHeight;
var options = {
data: data,
width: w,
height: h
};
init(options);
};
};
d3DashboardService.d3().then(draw);
}
};
}
]);
}());
(function() {
'use strict';
angular.module('kubernetesApp.components.dashboard')
.directive(
'dashboardHeader',
function() {
'use strict';
return {
restrict: 'A',
replace: true,
scope: {user: '='},
templateUrl: "components/dashboard/pages/header.html",
controller: [
'$scope',
'$filter',
'$location',
'menu',
'$rootScope',
function($scope, $filter, $location, menu, $rootScope) {
$scope.menu = menu;
$scope.$watch('page', function(newValue, oldValue) {
if (typeof newValue !== 'undefined') {
$location.path(newValue);
}
});
$scope.subpages = [
{
category: 'dashboard',
name: 'Explore',
value: '/dashboard/groups/type/selector/',
id: 'groupsView'
},
{category: 'dashboard', name: 'Pods', value: '/dashboard/pods', id: 'podsView'},
{category: 'dashboard', name: 'Nodes', value: '/dashboard/nodes', id: 'minionsView'},
{
category: 'dashboard',
name: 'Replication Controllers',
value: '/dashboard/replicationcontrollers',
id: 'rcView'
},
{category: 'dashboard', name: 'Services', value: '/dashboard/services', id: 'servicesView'},
{category: 'dashboard', name: 'Events', value: '/dashboard/events', id: 'eventsView'},
];
}
]
};
})
.directive('dashboardFooter',
function() {
'use strict';
return {
restrict: 'A',
replace: true,
templateUrl: "components/dashboard/pages/footer.html",
controller: ['$scope', '$filter', function($scope, $filter) {}]
};
})
.directive('mdTable', function() {
'use strict';
return {
restrict: 'E',
scope: {
headers: '=',
content: '=',
sortable: '=',
filters: '=',
customClass: '=customClass',
thumbs: '=',
count: '=',
doSelect: '&onSelect'
},
transclude: true,
controller: ["$scope", "$filter", "$window", "$location", function($scope, $filter, $window, $location) {
var orderBy = $filter('orderBy');
$scope.currentPage = 0;
$scope.nbOfPages = function() { return Math.ceil($scope.content.length / $scope.count); };
$scope.handleSort = function(field) {
if ($scope.sortable.indexOf(field) > -1) {
return true;
} else {
return false;
}
};
$scope.order = function(predicate, reverse) {
$scope.content = orderBy($scope.content, predicate, reverse);
$scope.predicate = predicate;
};
$scope.order($scope.sortable[0], false);
$scope.getNumber = function(num) { return new Array(num); };
$scope.goToPage = function(page) { $scope.currentPage = page; };
$scope.showMore = function() { return angular.isDefined($scope.moreClick);}
}],
templateUrl: 'views/partials/md-table.tmpl.html'
};
});
}());
app.controller('cAdvisorController', [
@ -1837,7 +1392,7 @@ app.controller('ListEventsCtrl', [
app.controller('ListMinionsCtrl', [
'$scope',
'$routeParams',
'k8sApi',
'k8sv1Beta3Api',
'$location',
function($scope, $routeParams, k8sApi, $location) {
'use strict';
@ -1848,7 +1403,7 @@ app.controller('ListMinionsCtrl', [
$scope.groupedPods = null;
$scope.serverView = false;
$scope.headers = [{name: 'Name', field: 'name'}, {name: 'IP', field: 'ip'}, {name: 'Status', field: 'status'}];
$scope.headers = [{name: 'Name', field: 'name'}, {name: 'Addresses', field: 'addresses'}, {name: 'Status', field: 'status'}];
$scope.custom = {
name: '',
@ -1859,7 +1414,8 @@ app.controller('ListMinionsCtrl', [
$scope.thumbs = 'thumb';
$scope.count = 10;
$scope.go = function(data) { $location.path('/dashboard/nodes/' + data.name); };
$scope.go = function(d) { $location.path('/dashboard/nodes/' + d.name); };
function handleError(data, status, headers, config) {
console.log("Error (" + status + "): " + data);
@ -1882,15 +1438,15 @@ app.controller('ListMinionsCtrl', [
};
data.items.forEach(function(minion) {
var _kind = '';
var _statusType = '';
if (minion.status.conditions) {
Object.keys(minion.status.conditions)
.forEach(function(key) { _kind += minion.status.conditions[key].kind; });
.forEach(function(key) { _statusType += minion.status.conditions[key].type; });
}
$scope.content.push({name: minion.id, ip: minion.hostIP, status: _kind});
$scope.content.push({name: minion.metadata.name, addresses: _.map(minion.status.addresses, function(a) { return a.address }).join(', '), status: _statusType});
});
}).error($scope.handleError);
@ -2253,7 +1809,7 @@ app.controller('NodeCtrl', [
'$scope',
'$interval',
'$routeParams',
'k8sApi',
'k8sv1Beta3Api',
'$rootScope',
function($scope, $interval, $routeParams, k8sApi, $rootScope) {
'use strict';
@ -2385,6 +1941,453 @@ app.controller('ServiceCtrl', [
}
]);
(function() {
'use strict';
angular.module('kubernetesApp.components.dashboard')
.directive('d3MinionBarGauge', [
'd3DashboardService',
function(d3DashboardService) {
return {
restrict: 'E',
scope: {
data: '=',
thickness: '@',
graphWidth: '@',
graphHeight: '@'
},
link: function(scope, element, attrs) {
var draw = function(d3) {
var svg = d3.select("svg.chart");
var legendSvg = d3.select("svg.legend");
window.onresize = function() { return scope.$apply(); };
scope.$watch(function() { return angular.element(window)[0].innerWidth; },
function() { return scope.render(scope.data); });
scope.$watch('data', function(newVals, oldVals) {
return initOrUpdate(newVals, oldVals);
}, true);
function initOrUpdate(newVals, oldVals) {
if (oldVals === null || oldVals === undefined) {
return scope.render(newVals);
} else {
return update(oldVals, newVals);
}
}
var textOffset = 10;
var el = null;
var radius = 100;
var oldData = [];
function init(options) {
var clone = options.data;
var preparedData = setData(clone);
setup(preparedData, options.width, options.height);
}
function setup(data, w, h) {
svg = d3.select(element[0]).append("svg").attr("width", "100%");
legendSvg = d3.select(element[0]).append("svg").attr("width", "100%");
var chart = svg.attr("class", "chart")
.attr("width", w)
.attr("height", h - 25)
.append("svg:g")
.attr("class", "concentricchart")
.attr("transform", "translate(" + ((w / 2)) + "," + h / 4 + ")");
var legend = legendSvg.attr("class", "legend").attr("width", w);
radius = Math.min(w, h) / 2;
var hostName = legendSvg.append("text")
.attr("class", "hostName")
.attr("transform", "translate(" + ((w - 120) / 2) + "," + 15 + ")");
var label_legend_area = legendSvg.append("svg:g")
.attr("class", "label_legend_area")
.attr("transform", "translate(" + ((w - 185) / 2) + "," + 35 + ")");
var legend_group = label_legend_area.append("svg:g").attr("class", "legend_group");
var label_group = label_legend_area.append("svg:g")
.attr("class", "label_group")
.attr("transform", "translate(" + 25 + "," + 11 + ")");
var stats_group = label_legend_area.append("svg:g")
.attr("class", "stats_group")
.attr("transform", "translate(" + 85 + "," + 11 + ")");
var path_group = chart.append("svg:g")
.attr("class", "path_group")
.attr("transform", "translate(0," + (h / 4) + ")");
var value_group = chart.append("svg:g")
.attr("class", "value_group")
.attr("transform", "translate(" + -(w * 0.205) + "," + -(h * 0.10) + ")");
generateArcs(chart, data);
}
function update(_oldData, _newData) {
if (_newData === undefined || _newData === null) {
return;
}
var clone = jQuery.extend(true, {}, _newData);
var cloneOld = jQuery.extend(true, {}, _oldData);
var preparedData = setData(clone);
oldData = setData(cloneOld);
animate(preparedData);
}
function animate(data) { generateArcs(null, data); }
function setData(data) {
var diameter = 2 * Math.PI * radius;
var localData = [];
$.each(data[0].segments, function(ri, value) {
function calcAngles(v) {
var segmentValueSum = 200;
if (v > segmentValueSum) {
v = segmentValueSum;
}
var segmentValue = v;
var fraction = segmentValue / segmentValueSum;
var arcBatchLength = fraction * 4 * Math.PI;
var arcPartition = arcBatchLength;
var startAngle = Math.PI * 2;
var endAngle = startAngle + arcPartition;
return {
startAngle: startAngle,
endAngle: endAngle
};
}
var valueData = calcAngles(value.value);
data[0].segments[ri].startAngle = valueData.startAngle;
data[0].segments[ri].endAngle = valueData.endAngle;
var maxData = value.maxData;
var maxTickData = calcAngles(maxData.maxValue + 0.2);
data[0].segments[ri].maxTickStartAngle = maxTickData.startAngle;
data[0].segments[ri].maxTickEndAngle = maxTickData.endAngle;
var maxArcData = calcAngles(maxData.maxValue);
data[0].segments[ri].maxArcStartAngle = maxArcData.startAngle;
data[0].segments[ri].maxArcEndAngle = maxArcData.endAngle;
data[0].segments[ri].index = ri;
});
localData.push(data[0].segments);
return localData[0];
}
function generateArcs(_svg, data) {
var chart = svg;
var transitionTime = 750;
$.each(data, function(index, value) {
if (oldData[index] !== undefined) {
data[index].previousEndAngle = oldData[index].endAngle;
} else {
data[index].previousEndAngle = 0;
}
});
var thickness = parseInt(scope.thickness, 10);
var ir = (parseInt(scope.graphWidth, 10) / 3);
var path_group = svg.select('.path_group');
var arc_group = path_group.selectAll(".arc_group").data(data);
var arcEnter = arc_group.enter().append("g").attr("class", "arc_group");
arcEnter.append("path").attr("class", "bg-circle").attr("d", getBackgroundArc(thickness, ir));
arcEnter.append("path")
.attr("class", function(d, i) { return 'max_tick_arc ' + d.maxData.maxTickClassNames; });
arcEnter.append("path")
.attr("class", function(d, i) { return 'max_bg_arc ' + d.maxData.maxClassNames; });
arcEnter.append("path").attr("class", function(d, i) { return 'value_arc ' + d.classNames; });
var max_tick_arc = arc_group.select(".max_tick_arc");
max_tick_arc.transition()
.attr("class", function(d, i) { return 'max_tick_arc ' + d.maxData.maxTickClassNames; })
.attr("d", function(d) {
var arc = maxArc(thickness, ir);
arc.startAngle(d.maxTickStartAngle);
arc.endAngle(d.maxTickEndAngle);
return arc(d);
});
var max_bg_arc = arc_group.select(".max_bg_arc");
max_bg_arc.transition()
.attr("class", function(d, i) { return 'max_bg_arc ' + d.maxData.maxClassNames; })
.attr("d", function(d) {
var arc = maxArc(thickness, ir);
arc.startAngle(d.maxArcStartAngle);
arc.endAngle(d.maxArcEndAngle);
return arc(d);
});
var value_arc = arc_group.select(".value_arc");
value_arc.transition().ease("exp").attr("class", function(d, i) {
return 'value_arc ' + d.classNames;
}).duration(transitionTime).attrTween("d", function(d) { return arcTween(d, thickness, ir); });
arc_group.exit()
.select(".value_arc")
.transition()
.ease("exp")
.duration(transitionTime)
.attrTween("d", function(d) { return arcTween(d, thickness, ir); })
.remove();
drawLabels(chart, data, ir, thickness);
buildLegend(chart, data);
}
function arcTween(b, thickness, ir) {
var prev = JSON.parse(JSON.stringify(b));
prev.endAngle = b.previousEndAngle;
var i = d3.interpolate(prev, b);
return function(t) { return getArc(thickness, ir)(i(t)); };
}
function maxArc(thickness, ir) {
var arc = d3.svg.arc().innerRadius(function(d) {
return getRadiusRing(ir, d.index);
}).outerRadius(function(d) { return getRadiusRing(ir + thickness, d.index); });
return arc;
}
function drawLabels(chart, data, ir, thickness) {
svg.select('.value_group').selectAll("*").remove();
var counts = data.length;
var value_group = chart.select('.value_group');
var valueLabels = value_group.selectAll("text.value").data(data);
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("dy", function(d, i) { return (thickness + 3) * i; })
.attr("text-anchor", function(d) { return "start"; })
.text(function(d) { return d.value; });
valueLabels.transition().duration(300).attrTween(
"d", function(d) { return arcTween(d, thickness, ir); });
valueLabels.exit().remove();
}
function buildLegend(chart, data) {
var svg = legendSvg;
svg.select('.label_group').selectAll("*").remove();
svg.select('.legend_group').selectAll("*").remove();
svg.select('.stats_group').selectAll("*").remove();
var host_name = svg.select('.hostName');
var label_group = svg.select('.label_group');
var stats_group = svg.select('.stats_group');
host_name.text(data[0].hostName);
host_name = svg.selectAll("text.hostName").data(data);
host_name.attr("text-anchor", function(d) { return "start"; })
.text(function(d) { return d.hostName; });
host_name.exit().remove();
var labels = label_group.selectAll("text.labels").data(data);
labels.enter()
.append("svg:text")
.attr("class", "labels")
.attr("dy", function(d, i) { return 19 * i; })
.attr("text-anchor", function(d) { return "start"; })
.text(function(d) { return d.label; });
labels.exit().remove();
var stats = stats_group.selectAll("text.stats").data(data);
stats.enter()
.append("svg:text")
.attr("class", "stats")
.attr("dy", function(d, i) { return 19 * i; })
.attr("text-anchor", function(d) { return "start"; })
.text(function(d) { return d.stats; });
stats.exit().remove();
var legend_group = svg.select('.legend_group');
var legend = legend_group.selectAll("rect").data(data);
legend.enter()
.append("svg:rect")
.attr("x", 2)
.attr("y", function(d, i) { return 19 * i; })
.attr("width", 13)
.attr("height", 13)
.attr("class", function(d, i) { return "rect " + d.classNames; });
legend.exit().remove();
}
function getRadiusRing(ir, i) { return ir - (i * 20); }
function getArc(thickness, ir) {
var arc = d3.svg.arc()
.innerRadius(function(d) { return getRadiusRing(ir, d.index); })
.outerRadius(function(d) { return getRadiusRing(ir + thickness, d.index); })
.startAngle(function(d, i) { return d.startAngle; })
.endAngle(function(d, i) { return d.endAngle; });
return arc;
}
function getBackgroundArc(thickness, ir) {
var arc = d3.svg.arc()
.innerRadius(function(d) { return getRadiusRing(ir, d.index); })
.outerRadius(function(d) { return getRadiusRing(ir + thickness, d.index); })
.startAngle(0)
.endAngle(function() { return 2 * Math.PI; });
return arc;
}
scope.render = function(data) {
if (data === undefined || data === null) {
return;
}
svg.selectAll("*").remove();
var graph = $(element[0]);
var w = scope.graphWidth;
var h = scope.graphHeight;
var options = {
data: data,
width: w,
height: h
};
init(options);
};
};
d3DashboardService.d3().then(draw);
}
};
}
]);
}());
(function() {
'use strict';
angular.module('kubernetesApp.components.dashboard')
.directive(
'dashboardHeader',
function() {
'use strict';
return {
restrict: 'A',
replace: true,
scope: {user: '='},
templateUrl: "components/dashboard/pages/header.html",
controller: [
'$scope',
'$filter',
'$location',
'menu',
'$rootScope',
function($scope, $filter, $location, menu, $rootScope) {
$scope.menu = menu;
$scope.$watch('page', function(newValue, oldValue) {
if (typeof newValue !== 'undefined') {
$location.path(newValue);
}
});
$scope.subpages = [
{
category: 'dashboard',
name: 'Explore',
value: '/dashboard/groups/type/selector/',
id: 'groupsView'
},
{category: 'dashboard', name: 'Pods', value: '/dashboard/pods', id: 'podsView'},
{category: 'dashboard', name: 'Nodes', value: '/dashboard/nodes', id: 'minionsView'},
{
category: 'dashboard',
name: 'Replication Controllers',
value: '/dashboard/replicationcontrollers',
id: 'rcView'
},
{category: 'dashboard', name: 'Services', value: '/dashboard/services', id: 'servicesView'},
{category: 'dashboard', name: 'Events', value: '/dashboard/events', id: 'eventsView'},
];
}
]
};
})
.directive('dashboardFooter',
function() {
'use strict';
return {
restrict: 'A',
replace: true,
templateUrl: "components/dashboard/pages/footer.html",
controller: ['$scope', '$filter', function($scope, $filter) {}]
};
})
.directive('mdTable', function() {
'use strict';
return {
restrict: 'E',
scope: {
headers: '=',
content: '=',
sortable: '=',
filters: '=',
customClass: '=customClass',
thumbs: '=',
count: '=',
doSelect: '&onSelect'
},
transclude: true,
controller: ["$scope", "$filter", "$window", "$location", function($scope, $filter, $window, $location) {
var orderBy = $filter('orderBy');
$scope.currentPage = 0;
$scope.nbOfPages = function() { return Math.ceil($scope.content.length / $scope.count); };
$scope.handleSort = function(field) {
if ($scope.sortable.indexOf(field) > -1) {
return true;
} else {
return false;
}
};
$scope.order = function(predicate, reverse) {
$scope.content = orderBy($scope.content, predicate, reverse);
$scope.predicate = predicate;
};
$scope.order($scope.sortable[0], false);
$scope.getNumber = function(num) { return new Array(num); };
$scope.goToPage = function(page) { $scope.currentPage = page; };
$scope.showMore = function() { return angular.isDefined($scope.moreClick);}
}],
templateUrl: 'views/partials/md-table.tmpl.html'
};
});
}());
angular.module('kubernetesApp.components.dashboard')
.factory('d3DashboardService', [
'$document',

50
www/app/components/dashboard/views/node.html
View File

@ -10,16 +10,16 @@
<div class="heading">
<span class="label">Name:</span>
<span>{{node.id}}</span>
<span>{{node.metadata.name}}</span>
</div>
<table>
<table class="align-top">
<tbody>
<tr>
<tr ng-show="node.metadata.labels">
<td class="name">Labels</td>
<td class="value">
<div ng-repeat="(label, value) in node.labels">
<div ng-repeat="(label, value) in node.metadata.labels">
{{label}}: {{value}}
</div>
</td>
@ -28,23 +28,52 @@
<tr>
<td class="name">Created</td>
<td class="value">
{{node.creationTimestamp | date:'medium'}}
{{node.metadata.creationTimestamp | date:'medium'}}
</td>
</tr>
<tr>
<td class="name">Host IP</td>
<td class="name">Addresses</td>
<td class="value">
{{node.hostIP}}
<div ng-repeat="a in node.status.addresses">
{{a.address}}
</div>
</td>
</tr>
<tr ng-show="node.status.capacity">
<td class="name">Capacity</td>
<td class="value">
<table>
<tr ng-repeat="(label, value) in node.status.capacity">
<td>{{label}}:</td> <td>{{value}}</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="name">System Info</td>
<td class="value">
<div ng-repeat="(label, value) in node.status.nodeInfo">
{{label}}: {{value}}
</div>
<table>
<tr ng-repeat="(label, value) in node.status.nodeInfo">
<td>{{label}}:</td> <td>{{value}}</td>
</tr>
</table>
</td>
</tr>
<tr ng-show="node.spec.podCIDR">
<td class="name">PodCIDR</td>
<td class="value">
{{node.spec.podCIDR}}
</td>
</tr>
<tr ng-show="node.spec.externalID">
<td class="name">ExternalID</td>
<td class="value">
{{node.spec.externalID}}
</td>
</tr>
@ -58,4 +87,3 @@
</div>
</div>
<div dashboard-footer></div>

13
www/master/components/dashboard/js/modules/controllers/listMinionsController.js
View File

@ -6,7 +6,7 @@
app.controller('ListMinionsCtrl', [
'$scope',
'$routeParams',
'k8sApi',
'k8sv1Beta3Api',
'$location',
function($scope, $routeParams, k8sApi, $location) {
'use strict';
@ -17,7 +17,7 @@ app.controller('ListMinionsCtrl', [
$scope.groupedPods = null;
$scope.serverView = false;
$scope.headers = [{name: 'Name', field: 'name'}, {name: 'IP', field: 'ip'}, {name: 'Status', field: 'status'}];
$scope.headers = [{name: 'Name', field: 'name'}, {name: 'Addresses', field: 'addresses'}, {name: 'Status', field: 'status'}];
$scope.custom = {
name: '',
@ -28,7 +28,8 @@ app.controller('ListMinionsCtrl', [
$scope.thumbs = 'thumb';
$scope.count = 10;
$scope.go = function(data) { $location.path('/dashboard/nodes/' + data.name); };
$scope.go = function(d) { $location.path('/dashboard/nodes/' + d.name); };
function handleError(data, status, headers, config) {
console.log("Error (" + status + "): " + data);
@ -51,15 +52,15 @@ app.controller('ListMinionsCtrl', [
};
data.items.forEach(function(minion) {
var _kind = '';
var _statusType = '';
if (minion.status.conditions) {
Object.keys(minion.status.conditions)
.forEach(function(key) { _kind += minion.status.conditions[key].kind; });
.forEach(function(key) { _statusType += minion.status.conditions[key].type; });
}
$scope.content.push({name: minion.id, ip: minion.hostIP, status: _kind});
$scope.content.push({name: minion.metadata.name, addresses: _.map(minion.status.addresses, function(a) { return a.address }).join(', '), status: _statusType});
});
}).error($scope.handleError);

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

@ -7,7 +7,7 @@ app.controller('NodeCtrl', [
'$scope',
'$interval',
'$routeParams',
'k8sApi',
'k8sv1Beta3Api',
'$rootScope',
function($scope, $interval, $routeParams, k8sApi, $rootScope) {
'use strict';

50
www/master/components/dashboard/views/node.html
View File

@ -10,16 +10,16 @@
<div class="heading">
<span class="label">Name:</span>
<span>{{node.id}}</span>
<span>{{node.metadata.name}}</span>
</div>
<table>
<table class="align-top">
<tbody>
<tr>
<tr ng-show="node.metadata.labels">
<td class="name">Labels</td>
<td class="value">
<div ng-repeat="(label, value) in node.labels">
<div ng-repeat="(label, value) in node.metadata.labels">
{{label}}: {{value}}
</div>
</td>
@ -28,23 +28,52 @@
<tr>
<td class="name">Created</td>
<td class="value">
{{node.creationTimestamp | date:'medium'}}
{{node.metadata.creationTimestamp | date:'medium'}}
</td>
</tr>
<tr>
<td class="name">Host IP</td>
<td class="name">Addresses</td>
<td class="value">
{{node.hostIP}}
<div ng-repeat="a in node.status.addresses">
{{a.address}}
</div>
</td>
</tr>
<tr ng-show="node.status.capacity">
<td class="name">Capacity</td>
<td class="value">
<table>
<tr ng-repeat="(label, value) in node.status.capacity">
<td>{{label}}:</td> <td>{{value}}</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="name">System Info</td>
<td class="value">
<div ng-repeat="(label, value) in node.status.nodeInfo">
{{label}}: {{value}}
</div>
<table>
<tr ng-repeat="(label, value) in node.status.nodeInfo">
<td>{{label}}:</td> <td>{{value}}</td>
</tr>
</table>
</td>
</tr>
<tr ng-show="node.spec.podCIDR">
<td class="name">PodCIDR</td>
<td class="value">
{{node.spec.podCIDR}}
</td>
</tr>
<tr ng-show="node.spec.externalID">
<td class="name">ExternalID</td>
<td class="value">
{{node.spec.externalID}}
</td>
</tr>
@ -58,4 +87,3 @@
</div>
</div>
<div dashboard-footer></div>

4
www/master/shared/js/modules/services/k8sApiService.js
View File

@ -71,7 +71,9 @@ app.provider('k8sv1Beta3Api',
api.getPods = function(query) { return _get($http, api.getUrlBase() + '/pods', query); };
api.getMinions = function(query) { return _get($http, urlBase + '/nodes', query); };
api.getNodes = function(query) { return _get($http, urlBase + '/nodes', query); };
api.getMinions = api.getNodes;
api.getServices = function(query) { return _get($http, api.getUrlBase() + '/services', query); };