Skip to content

Commit

Permalink
Update Web UI Explore
Browse files Browse the repository at this point in the history 
Hide blank label dropdowns
Escape characters in group descriptions and label selectors
Update label selectors
  • Loading branch information
@bcbroussard
bcbroussard committed Jun 29, 2015
1 parent 9971126 commit d1893bc
Show file tree
Hide file tree
Showing 11 changed files with 165 additions and 105 deletions.
158 changes: 89 additions & 69 deletions pkg/ui/datafile.go
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion www/app/assets/css/app.css
View file

Large diffs are not rendered by default.

30 changes: 22 additions & 8 deletions www/app/assets/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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 {
Expand All @@ -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(",")));
Expand All @@ -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;
Expand All @@ -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);
Expand Down Expand Up @@ -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;
}
Expand All @@ -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 = "";
}
Expand Down
5 changes: 3 additions & 2 deletions www/app/components/dashboard/views/groups.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion www/app/components/dashboard/views/partials/groupBox.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
17 changes: 11 additions & 6 deletions www/app/components/dashboard/views/partials/groupItem.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
30 changes: 22 additions & 8 deletions www/master/components/dashboard/js/modules/controllers/groupController.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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 {
Expand All @@ -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(",")));
Expand All @@ -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;
Expand All @@ -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);
Expand Down Expand Up @@ -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;
}
Expand All @@ -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 = "";
}
Expand Down
2 changes: 1 addition & 1 deletion www/master/components/dashboard/less/dashboard/groups.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@
padding-top: 10px;
}
.selectFilter {
padding-top: 10px;
padding-top: 7px;
margin-right: 30px;

.md-select-label {
Expand Down
5 changes: 3 additions & 2 deletions www/master/components/dashboard/views/groups.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion www/master/components/dashboard/views/partials/groupBox.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
17 changes: 11 additions & 6 deletions www/master/components/dashboard/views/partials/groupItem.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit d1893bc

Please sign in to comment.