Skip to content

K
k3s
Commit 288c1df4 authored by BC Broussard's avatar BC Broussard
Browse files
Options

Update Web UI tables

- Condense table styling - Default table size to 50 - Make all columns sortable - Rename service portalIP to clusterIP - Allow default descending table ordering
parent ef41ceb3
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 67 additions and 65 deletions
pkg/ui/data/dashboard/datafile.go
View file @ 288c1df4
This source diff could not be displayed because it is too large. You can view the blob instead.
www/app/assets/js/app.js
View file @ 288c1df4
...@@ -1289,8 +1289,8 @@ app.controller('ListEventsCtrl', [ ...@@ -1289,8 +1289,8 @@ app.controller('ListEventsCtrl', [
$scope.serverView = false; $scope.serverView = false;
$scope.headers = [ $scope.headers = [
{name: 'First Seen', field: 'firstSeen'},
{name: 'Last Seen', field: 'lastSeen'}, {name: 'Last Seen', field: 'lastSeen'},
{name: 'First Seen', field: 'firstSeen'},
{name: 'Count', field: 'count'}, {name: 'Count', field: 'count'},
{name: 'Name', field: 'name'}, {name: 'Name', field: 'name'},
{name: 'Kind', field: 'kind'}, {name: 'Kind', field: 'kind'},
...@@ -1301,8 +1301,8 @@ app.controller('ListEventsCtrl', [ ...@@ -1301,8 +1301,8 @@ app.controller('ListEventsCtrl', [
]; ];
$scope.sortable = ['firstSeen', 'lastSeen', 'count', 'name', 'kind', 'subObject', 'reason', 'source']; $scope.sortable = ['lastSeen', 'firstSeen', 'count', 'name', 'kind', 'subObject', 'reason', 'source', 'message'];
$scope.count = 10; $scope.count = 50;
function handleError(data, status, headers, config) { function handleError(data, status, headers, config) {
console.log("Error (" + status + "): " + data); console.log("Error (" + status + "): " + data);
$scope.loading = false; $scope.loading = false;
...@@ -1346,6 +1346,11 @@ app.controller('ListEventsCtrl', [ ...@@ -1346,6 +1346,11 @@ app.controller('ListEventsCtrl', [
}); });
$scope.content = _.sortBy($scope.content, function(e){
return e.lastSeen;
}).reverse();
}).error($scope.handleError); }).error($scope.handleError);
} }
...@@ -1380,9 +1385,9 @@ app.controller('ListMinionsCtrl', [ ...@@ -1380,9 +1385,9 @@ app.controller('ListMinionsCtrl', [
status: 'grey', status: 'grey',
ip: 'grey' ip: 'grey'
}; };
$scope.sortable = ['name', 'status', 'ip']; $scope.sortable = ['name', 'status', 'addresses'];
$scope.thumbs = 'thumb'; $scope.thumbs = 'thumb';
$scope.count = 10; $scope.count = 50;
$scope.go = function(d) { $location.path('/dashboard/nodes/' + d.name); }; $scope.go = function(d) { $location.path('/dashboard/nodes/' + d.name); };
...@@ -1463,8 +1468,8 @@ app.controller('ListPodsCtrl', [ ...@@ -1463,8 +1468,8 @@ app.controller('ListPodsCtrl', [
labels: 'grey', labels: 'grey',
status: 'grey' status: 'grey'
}; };
$scope.sortable = ['pod', 'ip', 'status']; $scope.sortable = ['pod', 'ip', 'status','containers','images','host','labels'];
$scope.count = 10; $scope.count = 50;
$scope.go = function(data) { $location.path('/dashboard/pods/' + data.pod); }; $scope.go = function(data) { $location.path('/dashboard/pods/' + data.pod); };
...@@ -1504,24 +1509,16 @@ app.controller('ListPodsCtrl', [ ...@@ -1504,24 +1509,16 @@ app.controller('ListPodsCtrl', [
} }
if (pod.metadata.labels) { if (pod.metadata.labels) {
Object.keys(pod.metadata.labels) _labels = _.map(pod.metadata.labels, function(v, k) { return k + ': ' + v }).join(', ');
.forEach(function(key) { }
if (key == 'name') {
_labels += ', ' + pod.metadata.labels[key];
}
if (key == 'uses') {
_uses += ', ' + pod.metadata.labels[key];
}
});
}
$scope.content.push({ $scope.content.push({
pod: pod.metadata.name, pod: pod.metadata.name,
ip: pod.status.podIP, ip: pod.status.podIP,
containers: _fixComma(_containers), containers: _fixComma(_containers),
images: _fixComma(_images), images: _fixComma(_images),
host: pod.spec.host, host: pod.spec.nodeName,
labels: _fixComma(_labels) + ':' + _fixComma(_uses), labels: _labels,
status: pod.status.phase status: pod.status.phase
}); });
...@@ -1593,9 +1590,9 @@ app.controller('ListReplicationControllersCtrl', [ ...@@ -1593,9 +1590,9 @@ app.controller('ListReplicationControllersCtrl', [
selector: 'grey', selector: 'grey',
replicas: 'grey' replicas: 'grey'
}; };
$scope.sortable = ['controller', 'containers', 'images']; $scope.sortable = ['controller', 'containers', 'images', 'selector', 'replicas'];
$scope.thumbs = 'thumb'; $scope.thumbs = 'thumb';
$scope.count = 10; $scope.count = 50;
$scope.go = function(data) { $location.path('/dashboard/replicationcontrollers/' + data.controller); }; $scope.go = function(data) { $location.path('/dashboard/replicationcontrollers/' + data.controller); };
...@@ -1686,8 +1683,8 @@ app.controller('ListServicesCtrl', [ ...@@ -1686,8 +1683,8 @@ app.controller('ListServicesCtrl', [
port: 'grey', port: 'grey',
labels: 'grey' labels: 'grey'
}; };
$scope.sortable = ['name', 'ip', 'port']; $scope.sortable = ['name', 'ip', 'port', 'labels', 'selector'];
$scope.count = 10; $scope.count = 50;
$scope.go = function(data) { $location.path('/dashboard/services/' + data.name); }; $scope.go = function(data) { $location.path('/dashboard/services/' + data.name); };
...@@ -1727,7 +1724,7 @@ app.controller('ListServicesCtrl', [ ...@@ -1727,7 +1724,7 @@ app.controller('ListServicesCtrl', [
var _labels = ''; var _labels = '';
if (service.metadata.labels) { if (service.metadata.labels) {
_labels = _.map(service.metadata.labels, function(v, k) { return k + '=' + v }).join(', '); _labels = _.map(service.metadata.labels, function(v, k) { return k + ': ' + v }).join(', ');
} }
var _selectors = ''; var _selectors = '';
...@@ -1750,7 +1747,7 @@ app.controller('ListServicesCtrl', [ ...@@ -1750,7 +1747,7 @@ app.controller('ListServicesCtrl', [
$scope.content.push({ $scope.content.push({
name: service.metadata.name, name: service.metadata.name,
ip: service.spec.portalIP, ip: service.spec.clusterIP,
port: _ports, port: _ports,
selector: _selectors, selector: _selectors,
labels: _labels labels: _labels
...@@ -2280,7 +2277,6 @@ app.controller('ServiceCtrl', [ ...@@ -2280,7 +2277,6 @@ app.controller('ServiceCtrl', [
$location.path(newValue); $location.path(newValue);
} }
}); });
$scope.subpages = [ $scope.subpages = [
{ {
category: 'dashboard', category: 'dashboard',
...@@ -2325,6 +2321,7 @@ app.controller('ServiceCtrl', [ ...@@ -2325,6 +2321,7 @@ app.controller('ServiceCtrl', [
customClass: '=customClass', customClass: '=customClass',
thumbs: '=', thumbs: '=',
count: '=', count: '=',
reverse: '=',
doSelect: '&onSelect' doSelect: '&onSelect'
}, },
transclude: true, transclude: true,
...@@ -2343,7 +2340,11 @@ app.controller('ServiceCtrl', [ ...@@ -2343,7 +2340,11 @@ app.controller('ServiceCtrl', [
$scope.content = orderBy($scope.content, predicate, reverse); $scope.content = orderBy($scope.content, predicate, reverse);
$scope.predicate = predicate; $scope.predicate = predicate;
}; };
$scope.order($scope.sortable[0], false); var reverse = false;
if($scope.reverse)
reverse = $scope.reverse;
$scope.order($scope.sortable[0], reverse);
$scope.getNumber = function(num) { return new Array(num); }; $scope.getNumber = function(num) { return new Array(num); };
$scope.goToPage = function(page) { $scope.currentPage = page; }; $scope.goToPage = function(page) { $scope.currentPage = page; };
$scope.showMore = function() { return angular.isDefined($scope.moreClick);} $scope.showMore = function() { return angular.isDefined($scope.moreClick);}
......
www/app/components/dashboard/views/listEvents.html
View file @ 288c1df4
<div dashboard-header></div> <div dashboard-header></div>
<div class="dashboard"> <div class="dashboard">
<div ng-controller="ListEventsCtrl" style="padding:25px;" class="list-pods"> <div ng-controller="ListEventsCtrl" style="padding:25px;" class="list-pods">
<md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count"></md-table> <md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count" reverse="true"></md-table>
</div> </div>
</div> </div>
<div dashboard-footer></div> <div dashboard-footer></div>
www/app/components/dashboard/views/pod.html
View file @ 288c1df4
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<tr> <tr>
<td class="name">Status</td> <td class="name">Status</td>
<td class="value"> <td class="value">
{{pod.status.phase}} on <a ng-href="#/dashboard/groups/host/selector/host={{pod.spec.host}}">{{pod.spec.host}}</a> {{pod.status.phase}} on <a ng-href="#/dashboard/groups/host/selector/host={{pod.spec.nodeName}}">{{pod.spec.nodeName}}</a>
</td> </td>
</tr> </tr>
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
<tr> <tr>
<td class="name">Host Networking</td> <td class="name">Host Networking</td>
<td class="value"> <td class="value">
{{pod.spec.host}}/{{pod.status.hostIP}} {{pod.spec.nodeName}}/{{pod.status.hostIP}}
</td> </td>
</tr> </tr>
......
www/app/components/dashboard/views/service.html
View file @ 288c1df4
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
<tr> <tr>
<td class="name">IP</td> <td class="name">IP</td>
<td class="value"> <td class="value">
{{service.spec.portalIP}} {{service.spec.clusterIP}}
</td> </td>
</tr> </tr>
......
www/app/views/partials/md-table.tmpl.html
View file @ 288c1df4
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<thead> <thead>
<tr class="md-table-headers-row"> <tr class="md-table-headers-row">
<th class="md-table-header" ng-repeat="h in headers"> <th class="md-table-header" ng-repeat="h in headers">
<a href ng-if="handleSort(h.field)" ng-click="reverse=!reverse;order(h.field,reverse)">{{h.name}} <span class="md-table-caret" ng-show="reverse && h.field == predicate"><img src="assets/img/ic_arrow_drop_up_24px.svg"></span><span class="md-table-caret" ng-show="!reverse && h.field == predicate"><img src="assets/img/ic_arrow_drop_down_24px.svg"></span></a> <a href ng-if="handleSort(h.field)" ng-click="reverse=!reverse;order(h.field,reverse)">{{h.name}} <span class="md-table-caret" ng-show="reverse && h.field == predicate"><img src="assets/img/ic_arrow_drop_down_24px.svg"></span><span class="md-table-caret" ng-show="!reverse && h.field == predicate"><img src="assets/img/ic_arrow_drop_up_24px.svg"></span></a>
<span ng-if="!handleSort(h.field)">{{h.name}}</span> <span ng-if="!handleSort(h.field)">{{h.name}}</span>
</th> </th>
<th class="md-table-header" ng-show="showMore()"></th> <th class="md-table-header" ng-show="showMore()"></th>
......
www/master/components/dashboard/js/modules/controllers/listEventsController.js
View file @ 288c1df4
...@@ -19,8 +19,8 @@ app.controller('ListEventsCtrl', [ ...@@ -19,8 +19,8 @@ app.controller('ListEventsCtrl', [
$scope.serverView = false; $scope.serverView = false;
$scope.headers = [ $scope.headers = [
{name: 'First Seen', field: 'firstSeen'},
{name: 'Last Seen', field: 'lastSeen'}, {name: 'Last Seen', field: 'lastSeen'},
{name: 'First Seen', field: 'firstSeen'},
{name: 'Count', field: 'count'}, {name: 'Count', field: 'count'},
{name: 'Name', field: 'name'}, {name: 'Name', field: 'name'},
{name: 'Kind', field: 'kind'}, {name: 'Kind', field: 'kind'},
...@@ -31,8 +31,8 @@ app.controller('ListEventsCtrl', [ ...@@ -31,8 +31,8 @@ app.controller('ListEventsCtrl', [
]; ];
$scope.sortable = ['firstSeen', 'lastSeen', 'count', 'name', 'kind', 'subObject', 'reason', 'source']; $scope.sortable = ['lastSeen', 'firstSeen', 'count', 'name', 'kind', 'subObject', 'reason', 'source', 'message'];
$scope.count = 10; $scope.count = 50;
function handleError(data, status, headers, config) { function handleError(data, status, headers, config) {
console.log("Error (" + status + "): " + data); console.log("Error (" + status + "): " + data);
$scope.loading = false; $scope.loading = false;
...@@ -76,6 +76,11 @@ app.controller('ListEventsCtrl', [ ...@@ -76,6 +76,11 @@ app.controller('ListEventsCtrl', [
}); });
$scope.content = _.sortBy($scope.content, function(e){
return e.lastSeen;
}).reverse();
}).error($scope.handleError); }).error($scope.handleError);
} }
......
www/master/components/dashboard/js/modules/controllers/listMinionsController.js
View file @ 288c1df4
...@@ -24,9 +24,9 @@ app.controller('ListMinionsCtrl', [ ...@@ -24,9 +24,9 @@ app.controller('ListMinionsCtrl', [
status: 'grey', status: 'grey',
ip: 'grey' ip: 'grey'
}; };
$scope.sortable = ['name', 'status', 'ip']; $scope.sortable = ['name', 'status', 'addresses'];
$scope.thumbs = 'thumb'; $scope.thumbs = 'thumb';
$scope.count = 10; $scope.count = 50;
$scope.go = function(d) { $location.path('/dashboard/nodes/' + d.name); }; $scope.go = function(d) { $location.path('/dashboard/nodes/' + d.name); };
......
www/master/components/dashboard/js/modules/controllers/listPodsController.js
View file @ 288c1df4
...@@ -34,8 +34,8 @@ app.controller('ListPodsCtrl', [ ...@@ -34,8 +34,8 @@ app.controller('ListPodsCtrl', [
labels: 'grey', labels: 'grey',
status: 'grey' status: 'grey'
}; };
$scope.sortable = ['pod', 'ip', 'status']; $scope.sortable = ['pod', 'ip', 'status','containers','images','host','labels'];
$scope.count = 10; $scope.count = 50;
$scope.go = function(data) { $location.path('/dashboard/pods/' + data.pod); }; $scope.go = function(data) { $location.path('/dashboard/pods/' + data.pod); };
...@@ -75,24 +75,16 @@ app.controller('ListPodsCtrl', [ ...@@ -75,24 +75,16 @@ app.controller('ListPodsCtrl', [
} }
if (pod.metadata.labels) { if (pod.metadata.labels) {
Object.keys(pod.metadata.labels) _labels = _.map(pod.metadata.labels, function(v, k) { return k + ': ' + v }).join(', ');
.forEach(function(key) { }
if (key == 'name') {
_labels += ', ' + pod.metadata.labels[key];
}
if (key == 'uses') {
_uses += ', ' + pod.metadata.labels[key];
}
});
}
$scope.content.push({ $scope.content.push({
pod: pod.metadata.name, pod: pod.metadata.name,
ip: pod.status.podIP, ip: pod.status.podIP,
containers: _fixComma(_containers), containers: _fixComma(_containers),
images: _fixComma(_images), images: _fixComma(_images),
host: pod.spec.host, host: pod.spec.nodeName,
labels: _fixComma(_labels) + ':' + _fixComma(_uses), labels: _labels,
status: pod.status.phase status: pod.status.phase
}); });
......
www/master/components/dashboard/js/modules/controllers/listReplicationControllersController.js
View file @ 288c1df4
...@@ -32,9 +32,9 @@ app.controller('ListReplicationControllersCtrl', [ ...@@ -32,9 +32,9 @@ app.controller('ListReplicationControllersCtrl', [
selector: 'grey', selector: 'grey',
replicas: 'grey' replicas: 'grey'
}; };
$scope.sortable = ['controller', 'containers', 'images']; $scope.sortable = ['controller', 'containers', 'images', 'selector', 'replicas'];
$scope.thumbs = 'thumb'; $scope.thumbs = 'thumb';
$scope.count = 10; $scope.count = 50;
$scope.go = function(data) { $location.path('/dashboard/replicationcontrollers/' + data.controller); }; $scope.go = function(data) { $location.path('/dashboard/replicationcontrollers/' + data.controller); };
......
www/master/components/dashboard/js/modules/controllers/listServicesController.js
View file @ 288c1df4
...@@ -29,8 +29,8 @@ app.controller('ListServicesCtrl', [ ...@@ -29,8 +29,8 @@ app.controller('ListServicesCtrl', [
port: 'grey', port: 'grey',
labels: 'grey' labels: 'grey'
}; };
$scope.sortable = ['name', 'ip', 'port']; $scope.sortable = ['name', 'ip', 'port', 'labels', 'selector'];
$scope.count = 10; $scope.count = 50;
$scope.go = function(data) { $location.path('/dashboard/services/' + data.name); }; $scope.go = function(data) { $location.path('/dashboard/services/' + data.name); };
...@@ -70,7 +70,7 @@ app.controller('ListServicesCtrl', [ ...@@ -70,7 +70,7 @@ app.controller('ListServicesCtrl', [
var _labels = ''; var _labels = '';
if (service.metadata.labels) { if (service.metadata.labels) {
_labels = _.map(service.metadata.labels, function(v, k) { return k + '=' + v }).join(', '); _labels = _.map(service.metadata.labels, function(v, k) { return k + ': ' + v }).join(', ');
} }
var _selectors = ''; var _selectors = '';
...@@ -93,7 +93,7 @@ app.controller('ListServicesCtrl', [ ...@@ -93,7 +93,7 @@ app.controller('ListServicesCtrl', [
$scope.content.push({ $scope.content.push({
name: service.metadata.name, name: service.metadata.name,
ip: service.spec.portalIP, ip: service.spec.clusterIP,
port: _ports, port: _ports,
selector: _selectors, selector: _selectors,
labels: _labels labels: _labels
......
www/master/components/dashboard/js/modules/directives/dashboard.js
View file @ 288c1df4
...@@ -24,7 +24,6 @@ ...@@ -24,7 +24,6 @@
$location.path(newValue); $location.path(newValue);
} }
}); });
$scope.subpages = [ $scope.subpages = [
{ {
category: 'dashboard', category: 'dashboard',
...@@ -69,6 +68,7 @@ ...@@ -69,6 +68,7 @@
customClass: '=customClass', customClass: '=customClass',
thumbs: '=', thumbs: '=',
count: '=', count: '=',
reverse: '=',
doSelect: '&onSelect' doSelect: '&onSelect'
}, },
transclude: true, transclude: true,
...@@ -87,7 +87,11 @@ ...@@ -87,7 +87,11 @@
$scope.content = orderBy($scope.content, predicate, reverse); $scope.content = orderBy($scope.content, predicate, reverse);
$scope.predicate = predicate; $scope.predicate = predicate;
}; };
$scope.order($scope.sortable[0], false); var reverse = false;
if($scope.reverse)
reverse = $scope.reverse;
$scope.order($scope.sortable[0], reverse);
$scope.getNumber = function(num) { return new Array(num); }; $scope.getNumber = function(num) { return new Array(num); };
$scope.goToPage = function(page) { $scope.currentPage = page; }; $scope.goToPage = function(page) { $scope.currentPage = page; };
$scope.showMore = function() { return angular.isDefined($scope.moreClick);} $scope.showMore = function() { return angular.isDefined($scope.moreClick);}
......
www/master/components/dashboard/views/listEvents.html
View file @ 288c1df4
<div dashboard-header></div> <div dashboard-header></div>
<div class="dashboard"> <div class="dashboard">
<div ng-controller="ListEventsCtrl" style="padding:25px;" class="list-pods"> <div ng-controller="ListEventsCtrl" style="padding:25px;" class="list-pods">
<md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count"></md-table> <md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count" reverse="true"></md-table>
</div> </div>
</div> </div>
<div dashboard-footer></div> <div dashboard-footer></div>
www/master/components/dashboard/views/pod.html
View file @ 288c1df4
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<tr> <tr>
<td class="name">Status</td> <td class="name">Status</td>
<td class="value"> <td class="value">
{{pod.status.phase}} on <a ng-href="#/dashboard/groups/host/selector/host={{pod.spec.host}}">{{pod.spec.host}}</a> {{pod.status.phase}} on <a ng-href="#/dashboard/groups/host/selector/host={{pod.spec.nodeName}}">{{pod.spec.nodeName}}</a>
</td> </td>
</tr> </tr>
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
<tr> <tr>
<td class="name">Host Networking</td> <td class="name">Host Networking</td>
<td class="value"> <td class="value">
{{pod.spec.host}}/{{pod.status.hostIP}} {{pod.spec.nodeName}}/{{pod.status.hostIP}}
</td> </td>
</tr> </tr>
......
www/master/components/dashboard/views/service.html
View file @ 288c1df4
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
<tr> <tr>
<td class="name">IP</td> <td class="name">IP</td>
<td class="value"> <td class="value">
{{service.spec.portalIP}} {{service.spec.clusterIP}}
</td> </td>
</tr> </tr>
......
www/master/less/app/base.less
View file @ 288c1df4
...@@ -63,7 +63,7 @@ a { ...@@ -63,7 +63,7 @@ a {
.md-table-content { .md-table-content {
font-size: 0.8em; font-size: 0.8em;
padding: 16px 16px 16px 0; padding: 16px 16px 16px 0;
height: 72px; // height: 72px;
} }
.md-table-td-more { .md-table-td-more {
......
www/master/shared/views/partials/md-table.tmpl.html
View file @ 288c1df4
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<thead> <thead>
<tr class="md-table-headers-row"> <tr class="md-table-headers-row">
<th class="md-table-header" ng-repeat="h in headers"> <th class="md-table-header" ng-repeat="h in headers">
<a href ng-if="handleSort(h.field)" ng-click="reverse=!reverse;order(h.field,reverse)">{{h.name}} <span class="md-table-caret" ng-show="reverse && h.field == predicate"><img src="assets/img/ic_arrow_drop_up_24px.svg"></span><span class="md-table-caret" ng-show="!reverse && h.field == predicate"><img src="assets/img/ic_arrow_drop_down_24px.svg"></span></a> <a href ng-if="handleSort(h.field)" ng-click="reverse=!reverse;order(h.field,reverse)">{{h.name}} <span class="md-table-caret" ng-show="reverse && h.field == predicate"><img src="assets/img/ic_arrow_drop_down_24px.svg"></span><span class="md-table-caret" ng-show="!reverse && h.field == predicate"><img src="assets/img/ic_arrow_drop_up_24px.svg"></span></a>
<span ng-if="!handleSort(h.field)">{{h.name}}</span> <span ng-if="!handleSort(h.field)">{{h.name}}</span>
</th> </th>
<th class="md-table-header" ng-show="showMore()"></th> <th class="md-table-header" ng-show="showMore()"></th>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment