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
This commit is contained in:
BC Broussard
2015-06-30 17:34:48 -07:00
parent ef41ceb3e4
commit 288c1df4e4
18 changed files with 541 additions and 593 deletions

View File

@@ -19,8 +19,8 @@ app.controller('ListEventsCtrl', [
$scope.serverView = false;
$scope.headers = [
{name: 'First Seen', field: 'firstSeen'},
{name: 'Last Seen', field: 'lastSeen'},
{name: 'First Seen', field: 'firstSeen'},
{name: 'Count', field: 'count'},
{name: 'Name', field: 'name'},
{name: 'Kind', field: 'kind'},
@@ -31,8 +31,8 @@ app.controller('ListEventsCtrl', [
];
$scope.sortable = ['firstSeen', 'lastSeen', 'count', 'name', 'kind', 'subObject', 'reason', 'source'];
$scope.count = 10;
$scope.sortable = ['lastSeen', 'firstSeen', 'count', 'name', 'kind', 'subObject', 'reason', 'source', 'message'];
$scope.count = 50;
function handleError(data, status, headers, config) {
console.log("Error (" + status + "): " + data);
$scope.loading = false;
@@ -76,6 +76,11 @@ app.controller('ListEventsCtrl', [
});
$scope.content = _.sortBy($scope.content, function(e){
return e.lastSeen;
}).reverse();
}).error($scope.handleError);
}

View File

@@ -24,9 +24,9 @@ app.controller('ListMinionsCtrl', [
status: 'grey',
ip: 'grey'
};
$scope.sortable = ['name', 'status', 'ip'];
$scope.sortable = ['name', 'status', 'addresses'];
$scope.thumbs = 'thumb';
$scope.count = 10;
$scope.count = 50;
$scope.go = function(d) { $location.path('/dashboard/nodes/' + d.name); };

View File

@@ -34,8 +34,8 @@ app.controller('ListPodsCtrl', [
labels: 'grey',
status: 'grey'
};
$scope.sortable = ['pod', 'ip', 'status'];
$scope.count = 10;
$scope.sortable = ['pod', 'ip', 'status','containers','images','host','labels'];
$scope.count = 50;
$scope.go = function(data) { $location.path('/dashboard/pods/' + data.pod); };
@@ -75,24 +75,16 @@ app.controller('ListPodsCtrl', [
}
if (pod.metadata.labels) {
Object.keys(pod.metadata.labels)
.forEach(function(key) {
if (key == 'name') {
_labels += ', ' + pod.metadata.labels[key];
}
if (key == 'uses') {
_uses += ', ' + pod.metadata.labels[key];
}
});
}
_labels = _.map(pod.metadata.labels, function(v, k) { return k + ': ' + v }).join(', ');
}
$scope.content.push({
pod: pod.metadata.name,
ip: pod.status.podIP,
containers: _fixComma(_containers),
images: _fixComma(_images),
host: pod.spec.host,
labels: _fixComma(_labels) + ':' + _fixComma(_uses),
host: pod.spec.nodeName,
labels: _labels,
status: pod.status.phase
});

View File

@@ -32,9 +32,9 @@ app.controller('ListReplicationControllersCtrl', [
selector: 'grey',
replicas: 'grey'
};
$scope.sortable = ['controller', 'containers', 'images'];
$scope.sortable = ['controller', 'containers', 'images', 'selector', 'replicas'];
$scope.thumbs = 'thumb';
$scope.count = 10;
$scope.count = 50;
$scope.go = function(data) { $location.path('/dashboard/replicationcontrollers/' + data.controller); };

View File

@@ -29,8 +29,8 @@ app.controller('ListServicesCtrl', [
port: 'grey',
labels: 'grey'
};
$scope.sortable = ['name', 'ip', 'port'];
$scope.count = 10;
$scope.sortable = ['name', 'ip', 'port', 'labels', 'selector'];
$scope.count = 50;
$scope.go = function(data) { $location.path('/dashboard/services/' + data.name); };
@@ -70,7 +70,7 @@ app.controller('ListServicesCtrl', [
var _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 = '';
@@ -93,7 +93,7 @@ app.controller('ListServicesCtrl', [
$scope.content.push({
name: service.metadata.name,
ip: service.spec.portalIP,
ip: service.spec.clusterIP,
port: _ports,
selector: _selectors,
labels: _labels

View File

@@ -24,7 +24,6 @@
$location.path(newValue);
}
});
$scope.subpages = [
{
category: 'dashboard',
@@ -69,6 +68,7 @@
customClass: '=customClass',
thumbs: '=',
count: '=',
reverse: '=',
doSelect: '&onSelect'
},
transclude: true,
@@ -87,7 +87,11 @@
$scope.content = orderBy($scope.content, predicate, reverse);
$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.goToPage = function(page) { $scope.currentPage = page; };
$scope.showMore = function() { return angular.isDefined($scope.moreClick);}

View File

@@ -1,7 +1,7 @@
<div dashboard-header></div>
<div class="dashboard">
<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 dashboard-footer></div>

View File

@@ -18,7 +18,7 @@
<tr>
<td class="name">Status</td>
<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>
</tr>
@@ -32,7 +32,7 @@
<tr>
<td class="name">Host Networking</td>
<td class="value">
{{pod.spec.host}}/{{pod.status.hostIP}}
{{pod.spec.nodeName}}/{{pod.status.hostIP}}
</td>
</tr>

View File

@@ -44,7 +44,7 @@
<tr>
<td class="name">IP</td>
<td class="value">
{{service.spec.portalIP}}
{{service.spec.clusterIP}}
</td>
</tr>