github/kubernetes
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update Web UI Explore

Browse Source 
Hide blank label dropdowns
Escape characters in group descriptions and label selectors
Update label selectors
This commit is contained in:
BC Broussard 2015-06-29 15:08:14 -07:00
parent 99711263a1
commit d1893bc366
11 changed files with 165 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
pkg/ui/datafile.go
View File

File diff suppressed because one or more lines are too long

2
www/app/assets/css/app.css
View File

File diff suppressed because one or more lines are too long

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

@ -1042,7 +1042,7 @@ app.controller('GroupCtrl', [
$scope.clearSelector = function(grouping) { $location.path("/dashboard/groups/" + grouping + "/selector/"); };
$scope.changeGroupBy = function() {
var grouping = $scope.selectedGroupBy;
var grouping = encodeURIComponent($scope.selectedGroupBy);
var s = _.clone($location.search());
if ($scope.routeParams.grouping != grouping)
@ -1067,14 +1067,16 @@ app.controller('GroupCtrl', [
$scope.groupBy = parts;
$scope.loading = true;
$scope.selector = selector;
$scope.selectorName = decodeURIComponent(selector);
var args = [];
var type = "";
var selectedHost = "";
if (selector && selector.length > 0) {
$scope.selectorPieces = selector.split(",");
var labels = [];
var fields = [];
for (var i = 0; i < $scope.selectorPieces.length; i++) {
var piece = $scope.selectorPieces[i];
var piece = decodeURIComponent($scope.selectorPieces[i]);
if (piece[0] == '$') {
fields.push(piece.slice(2));
} else {
@ -1083,13 +1085,21 @@ app.controller('GroupCtrl', [
if (labelParts.length > 1) {
type = labelParts[1];
}
} else {
}
else if (piece.indexOf("host=") === 0){
var labelParts = piece.split("=");
if (labelParts.length > 1) {
selectedHost = labelParts[1];
}
}
else {
labels.push(piece);
}
}
}
if (labels.length > 0) {
args.push("labels=" + encodeURI(labels.join(",")));
args.push("labelSelector=" + encodeURI(labels.join(",")));
}
if (fields.length > 0) {
args.push("fields=" + encodeURI(fields.join(",")));
@ -1098,6 +1108,9 @@ app.controller('GroupCtrl', [
var query = "?" + args.join("&");
var list = [];
var count = type.length > 0 ? 1 : 3;
$scope.selectedGroupByName = decodeURIComponent($routeParams.grouping)
var barrier = $scope.createBarrier(count, function() {
$scope.groups = $scope.groupData(list, 0);
$scope.loading = false;
@ -1109,8 +1122,9 @@ app.controller('GroupCtrl', [
k8sApi.getPods(query).success(function(data) {
$scope.addLabel("type", "pod", data.items);
for (var i = 0; data.items && i < data.items.length; ++i) {
data.items[i].metadata.labels.host = data.items[i].spec.host;
list.push(data.items[i]);
data.items[i].metadata.labels.host = data.items[i].spec.nodeName;
if(selectedHost.length == 0 || selectedHost == data.items[i].metadata.labels.host)
list.push(data.items[i]);
}
barrier();
}).error($scope.handleError);
@ -1141,7 +1155,7 @@ app.controller('GroupCtrl', [
}
for (var i = 0; i < items.length; i++) {
if (!items[i].metadata.labels) {
items[i].metadata.labels = [];
items[i].metadata.labels = {};
}
items[i].metadata.labels[key] = value;
}
@ -1153,7 +1167,7 @@ app.controller('GroupCtrl', [
"kind": "grouping"
};
for (var i = 0; i < items.length; i++) {
key = items[i].metadata.labels[$scope.groupBy[index]];
key = items[i].metadata.labels[decodeURIComponent($scope.groupBy[index])];
if (!key) {
key = "";
}

5
www/app/components/dashboard/views/groups.html
View File

@ -6,14 +6,14 @@
<div class="header" layout="row">
<div class="">Group by: </div>
<md-select placeholder="{{routeParams.grouping}}" class="select-group-by" ng-model="selectedGroupBy" ng-change="changeGroupBy()">
<md-select placeholder="{{selectedGroupByName}}" class="select-group-by" ng-model="selectedGroupBy" ng-change="changeGroupBy()">
<md-option ng-value="g.value" ng-repeat="g in groupByOptions">{{g.name}}</md-option>
</md-select>
<div ng-if="selector" layout="row" class="selector-area">
<div class="filter-label">Filter:</div>
<div class="filter-text">{{selector}}</div>
<div class="filter-text">{{selectorName}}</div>
<div class="filter-area" ng-if="selector && selector.length > 0">
<button ng-click="clearSelector(routeParams.grouping)" class="md-button cancel-button">
@ -27,6 +27,7 @@
</div>
</div>
<div class="group-item" ng-repeat="(groupName,group) in groups.items" ng-include="'components/dashboard/views/partials/groupBox.html'"></div>
</md-content>
</div>

2
www/app/components/dashboard/views/partials/groupBox.html
View File

@ -3,7 +3,7 @@
<div class="server-overview" layout="column">
<!-- subheader -->
<div class="group-heading" layout="row">
<div class="label">{{routeParams.grouping | ucfirst}}: <span class="bold">{{ (groupName) || "blank" }}</span></div>
<div class="label">{{selectedGroupByName | ucfirst}}: <span class="bold">{{ (groupName) || "blank" }}</span></div>
</div>
<!-- render group data -->
<div ng-include="'components/dashboard/views/partials/groupItem.html'"></div>

17
www/app/components/dashboard/views/partials/groupItem.html
View File

@ -24,12 +24,17 @@
<div ng-switch-default>{{item.metadata.name}}</div>
</div>
</div>
<md-select ng-model="selectedFilter" ng-change="changeFilterBy(selectedFilter)" class="selectFilter">
<md-optgroup label="FILTER">
<md-option ng-value="'{{key}}={{value}}'" ng-repeat="(key, value) in item.metadata.labels">{{key}}: {{value}}</md-option>
</md-option-group>
</md-optgroup>
</md-select>
<div class="selectFilter">
<md-select ng-model="selectedFilter" ng-change="changeFilterBy(selectedFilter)">
<md-optgroup label="FILTER">
<md-option ng-value="'{{key | uriComponentEncode}}={{value | uriComponentEncode}}'" ng-repeat="(key, value) in item.metadata.labels">{{key}}: {{value}}</md-option>
</md-option-group>
</md-optgroup>
</md-select>
</div>
<!-- This is the official button design, but requires a custom dialog. Fix up after the demo. -->
<!-- <md-button ng-click="" class="filter-button" style="padding:0">
<md-icon md-svg-src="components/dashboard/img/icons/ic_arrow_drop_down_18px.svg" class="filter-icon" aria-label="" alt="Filter"></md-icon>

30
www/master/components/dashboard/js/modules/controllers/groupController.js
View File

@ -38,7 +38,7 @@ app.controller('GroupCtrl', [
$scope.clearSelector = function(grouping) { $location.path("/dashboard/groups/" + grouping + "/selector/"); };
$scope.changeGroupBy = function() {
var grouping = $scope.selectedGroupBy;
var grouping = encodeURIComponent($scope.selectedGroupBy);
var s = _.clone($location.search());
if ($scope.routeParams.grouping != grouping)
@ -63,14 +63,16 @@ app.controller('GroupCtrl', [
$scope.groupBy = parts;
$scope.loading = true;
$scope.selector = selector;
$scope.selectorName = decodeURIComponent(selector);
var args = [];
var type = "";
var selectedHost = "";
if (selector && selector.length > 0) {
$scope.selectorPieces = selector.split(",");
var labels = [];
var fields = [];
for (var i = 0; i < $scope.selectorPieces.length; i++) {
var piece = $scope.selectorPieces[i];
var piece = decodeURIComponent($scope.selectorPieces[i]);
if (piece[0] == '$') {
fields.push(piece.slice(2));
} else {
@ -79,13 +81,21 @@ app.controller('GroupCtrl', [
if (labelParts.length > 1) {
type = labelParts[1];
}
} else {
}
else if (piece.indexOf("host=") === 0){
var labelParts = piece.split("=");
if (labelParts.length > 1) {
selectedHost = labelParts[1];
}
}
else {
labels.push(piece);
}
}
}
if (labels.length > 0) {
args.push("labels=" + encodeURI(labels.join(",")));
args.push("labelSelector=" + encodeURI(labels.join(",")));
}
if (fields.length > 0) {
args.push("fields=" + encodeURI(fields.join(",")));
@ -94,6 +104,9 @@ app.controller('GroupCtrl', [
var query = "?" + args.join("&");
var list = [];
var count = type.length > 0 ? 1 : 3;
$scope.selectedGroupByName = decodeURIComponent($routeParams.grouping)
var barrier = $scope.createBarrier(count, function() {
$scope.groups = $scope.groupData(list, 0);
$scope.loading = false;
@ -105,8 +118,9 @@ app.controller('GroupCtrl', [
k8sApi.getPods(query).success(function(data) {
$scope.addLabel("type", "pod", data.items);
for (var i = 0; data.items && i < data.items.length; ++i) {
data.items[i].metadata.labels.host = data.items[i].spec.host;
list.push(data.items[i]);
data.items[i].metadata.labels.host = data.items[i].spec.nodeName;
if(selectedHost.length == 0 || selectedHost == data.items[i].metadata.labels.host)
list.push(data.items[i]);
}
barrier();
}).error($scope.handleError);
@ -137,7 +151,7 @@ app.controller('GroupCtrl', [
}
for (var i = 0; i < items.length; i++) {
if (!items[i].metadata.labels) {
items[i].metadata.labels = [];
items[i].metadata.labels = {};
}
items[i].metadata.labels[key] = value;
}
@ -149,7 +163,7 @@ app.controller('GroupCtrl', [
"kind": "grouping"
};
for (var i = 0; i < items.length; i++) {
key = items[i].metadata.labels[$scope.groupBy[index]];
key = items[i].metadata.labels[decodeURIComponent($scope.groupBy[index])];
if (!key) {
key = "";
}

2
www/master/components/dashboard/less/dashboard/groups.less
View File

@ -104,7 +104,7 @@
padding-top: 10px;
}
.selectFilter {
padding-top: 10px;
padding-top: 7px;
margin-right: 30px;
.md-select-label {

5
www/master/components/dashboard/views/groups.html
View File

@ -6,14 +6,14 @@
<div class="header" layout="row">
<div class="">Group by: </div>
<md-select placeholder="{{routeParams.grouping}}" class="select-group-by" ng-model="selectedGroupBy" ng-change="changeGroupBy()">
<md-select placeholder="{{selectedGroupByName}}" class="select-group-by" ng-model="selectedGroupBy" ng-change="changeGroupBy()">
<md-option ng-value="g.value" ng-repeat="g in groupByOptions">{{g.name}}</md-option>
</md-select>
<div ng-if="selector" layout="row" class="selector-area">
<div class="filter-label">Filter:</div>
<div class="filter-text">{{selector}}</div>
<div class="filter-text">{{selectorName}}</div>
<div class="filter-area" ng-if="selector && selector.length > 0">
<button ng-click="clearSelector(routeParams.grouping)" class="md-button cancel-button">
@ -27,6 +27,7 @@
</div>
</div>
<div class="group-item" ng-repeat="(groupName,group) in groups.items" ng-include="'components/dashboard/views/partials/groupBox.html'"></div>
</md-content>
</div>

2
www/master/components/dashboard/views/partials/groupBox.html
View File

@ -3,7 +3,7 @@
<div class="server-overview" layout="column">
<!-- subheader -->
<div class="group-heading" layout="row">
<div class="label">{{routeParams.grouping | ucfirst}}: <span class="bold">{{ (groupName) || "blank" }}</span></div>
<div class="label">{{selectedGroupByName | ucfirst}}: <span class="bold">{{ (groupName) || "blank" }}</span></div>
</div>
<!-- render group data -->
<div ng-include="'components/dashboard/views/partials/groupItem.html'"></div>

17
www/master/components/dashboard/views/partials/groupItem.html
View File

@ -24,12 +24,17 @@
<div ng-switch-default>{{item.metadata.name}}</div>
</div>
</div>
<md-select ng-model="selectedFilter" ng-change="changeFilterBy(selectedFilter)" class="selectFilter">
<md-optgroup label="FILTER">
<md-option ng-value="'{{key}}={{value}}'" ng-repeat="(key, value) in item.metadata.labels">{{key}}: {{value}}</md-option>
</md-option-group>
</md-optgroup>
</md-select>
<div class="selectFilter">
<md-select ng-model="selectedFilter" ng-change="changeFilterBy(selectedFilter)">
<md-optgroup label="FILTER">
<md-option ng-value="'{{key | uriComponentEncode}}={{value | uriComponentEncode}}'" ng-repeat="(key, value) in item.metadata.labels">{{key}}: {{value}}</md-option>
</md-option-group>
</md-optgroup>
</md-select>
</div>
<!-- This is the official button design, but requires a custom dialog. Fix up after the demo. -->
<!-- <md-button ng-click="" class="filter-button" style="padding:0">
<md-icon md-svg-src="components/dashboard/img/icons/ic_arrow_drop_down_18px.svg" class="filter-icon" aria-label="" alt="Filter"></md-icon>