github/kubernetes
1
0
Fork 0
mirror of https://github.com/k3s-io/kubernetes.git synced 2025-09-16 22:53:22 +00:00
Code Issues Projects Releases Wiki Activity

Update the ux.

Browse Source
This commit is contained in:
Brendan Burns
2014-10-08 12:22:20 -07:00
parent 1a1b0699bc
commit 7fe71c68b7
5 changed files with 385 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
www/box.ng
View File

@@ -18,11 +18,41 @@ limitations under the License.
{{ groupName }}
<div ng-if="group.kind != 'grouping'">
<div ng-if="!display || display=='box'">
<div class="content k8s-item k8s-inline" ng-repeat="item in group">
<div class="k8s-title-font k8s-font-regular">
<a href="#/pods/{{ item.id }}">{{ item.id }}</a>
<div ng-switch on='item.labels["type"]'>
<a ng-switch-when='pod' href="#/pods/{{ item.id }}">{{ item.id }}</a>
<a ng-switch-when='service' href="#/services/{{ item.id }}">{{ item.id }}</a>
<a ng-switch-when='replicationController' href="#/replicationControllers/{{ item.id }}">{{ item.id }}</a>
<span ng-switch-default>{{item.id}}</span>
</div>
</div>
</div>
</div>
<div ng-if="display=='list'">
<table style="width: 90%; padding: 10px">
<tr ng-repeat="item in group" ng-class-odd="'k8s-odd'" ng-class-even="'k8s-even'" valign="top">
<td class="k8s-cell">
<div ng-switch on='item.labels["type"]'>
<a ng-switch-when='pod' href="#/pods/{{ item.id }}">{{ item.id }}</a>
<a ng-switch-when='service' href="#/services/{{ item.id }}">{{ item.id }}</a>
<a ng-switch-when='replicationController' href="#/replicationControllers/{{ item.id }}">{{ item.id }}</a>
<span ng-switch-default>{{item.id}}</span>
</div>
</td>
<td class="k8s-cell">
<div ng-repeat='(key, value) in item.labels'>
<a href="#/groups/{{key}}/selector/{{controller.routeParams.selector}}">{{key}}</a> :
<a href="#/groups/{{controller.routeParams.grouping}}/selector/{{key}}={{value}}">{{value}}</a> </span>
</td>
</tr>
</table>
</div>
<div>
<a ng-click="display='box'">box</a>
<a ng-click="display='list'">list</a>
</div>
</div>
<div ng-if="group.kind == 'grouping'">
<div ng-repeat="(groupName,group) in group.items" ng-include="'box.ng'">

4
www/partials/groups.html
View File

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
-->
<div class="content" style="width: 90%; margin-left: 5%" ng-if="selector && selector.length > 0">
<div class="k8s-inline">{{selector}}</div>
<div class="k8s-inline k8s-button" ng-click="controller.clearSelector()">X</div>
<div class="k8s-inline k8s-font-regular k8s-title-font">{{selector}}</div>
<div class="k8s-inline k8s-title-font k8s-button" ng-click="controller.clearSelector(controller.routeParams.grouping)">X</div>
</div>
<div ng-repeat="(groupName,group) in groups.items" ng-include="'box.ng'">

86
www/podcontroller.js
View File

@@ -50,7 +50,6 @@ GroupController.prototype.handlePath = function(path) {
var parts = path.split("/")
// split leaves an empty string at the beginning.
parts = parts.slice(1);
console.log(parts)
if (parts.length == 0) {
return;
@@ -59,8 +58,8 @@ GroupController.prototype.handlePath = function(path) {
};
GroupController.prototype.clearSelector = function() {
window.location.hash = "/groups/" + this.groupBy.join("/") + "/selector";
GroupController.prototype.clearSelector = function(grouping) {
window.location.hash = "/groups/" + grouping + "/selector/";
};
GroupController.prototype.createBarrier = function(count, callback) {
@@ -82,6 +81,7 @@ GroupController.prototype.handleGroups = function(parts, selector) {
this.scope.loading = true;
this.scope.selector = selector;
var args = [];
var type = "";
if (selector && selector.length > 0) {
this.scope.selectorPieces = selector.split(",");
var labels = [];
@@ -91,7 +91,14 @@ GroupController.prototype.handleGroups = function(parts, selector) {
if (piece[0] == '$') {
fields.push(piece.slice(2));
} else {
labels.push(piece);
if (piece.indexOf("type=") == 0) {
var labelParts = piece.split("=");
if (labelParts.length > 1) {
type = labelParts[1];
}
} else {
labels.push(piece);
}
}
}
if (labels.length > 0) {
@@ -103,38 +110,45 @@ GroupController.prototype.handleGroups = function(parts, selector) {
}
var query = "?" + args.join("&");
var list = [];
var barrier = this.createBarrier(3, angular.bind(this, function() {
var count = type.length > 0 ? 1 : 3;
var barrier = this.createBarrier(count, angular.bind(this, function() {
this.scope.groups = this.groupData(list, 0);
this.scope.loading = false;
}));
this.http.get(apiBase + "pods" + query)
.success(angular.bind(this, function(data) {
this.addLabel("type", "pod", data.items);
for (var i = 0; data.items && i < data.items.length; ++i) {
data.items[i].labels["host"] = data.items[i].currentState.host;
list.push(data.items[i]);
}
barrier();
}))
.error(angular.bind(this, this.handleError));
this.http.get(apiBase + "services" + query)
.success(angular.bind(this, function(data) {
this.addLabel("type", "service", data.items);
for (var i = 0; data.items && i < data.items.length; ++i) {
list.push(data.items[i]);
}
barrier();
}))
.error(angular.bind(this, this.handleError));
this.http.get(apiBase + "replicationControllers" + query)
.success(angular.bind(this, function(data) {
this.addLabel("type", "replicationController", data.items);
for (var i = 0; data.items && i < data.items.length; ++i) {
list.push(data.items[i]);
}
barrier();
}))
.error(angular.bind(this, this.handleError));
if (type == "" || type == "pod") {
this.http.get(apiBase + "pods" + query)
.success(angular.bind(this, function(data) {
this.addLabel("type", "pod", data.items);
for (var i = 0; data.items && i < data.items.length; ++i) {
data.items[i].labels["host"] = data.items[i].currentState.host;
list.push(data.items[i]);
}
barrier();
}))
.error(angular.bind(this, this.handleError));
}
if (type == "" || type == "service") {
this.http.get(apiBase + "services" + query)
.success(angular.bind(this, function(data) {
this.addLabel("type", "service", data.items);
for (var i = 0; data.items && i < data.items.length; ++i) {
list.push(data.items[i]);
}
barrier();
}))
.error(angular.bind(this, this.handleError));
}
if (type == "" || type == "replicationController") {
this.http.get(apiBase + "replicationControllers" + query)
.success(angular.bind(this, function(data) {
this.addLabel("type", "replicationController", data.items);
for (var i = 0; data.items && i < data.items.length; ++i) {
list.push(data.items[i]);
}
barrier();
}))
.error(angular.bind(this, this.handleError));
}
};
GroupController.prototype.addLabel = function(key, value, items) {
@@ -200,7 +214,7 @@ k8sApp.controller('GroupCtrl', function ($scope, $http, $route, $routeParams) {
k8sApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/groups/:grouping*?\/selector/:selector?', {
when('/groups/:grouping*?\/selector/:selector*?', {
templateUrl: 'partials/groups.html',
controller: 'GroupCtrl'
}).
@@ -209,6 +223,6 @@ k8sApp.config(['$routeProvider',
controller: 'PodCtrl'
}).
otherwise({
redirectTo: '/groups//selector'
redirectTo: '/groups//selector/'
});
}]);
}]);