Skip to content

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

Update Web UI Explore

Hide blank label dropdowns Escape characters in group descriptions and label selectors Update label selectors
parent 99711263
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 75 additions and 35 deletions
pkg/ui/datafile.go
View file @ d1893bc3
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 @ d1893bc3
......@@ -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 = "";
}
......
www/app/components/dashboard/views/groups.html
View file @ d1893bc3
......@@ -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>
......
www/app/components/dashboard/views/partials/groupBox.html
View file @ d1893bc3
......@@ -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>
......
www/app/components/dashboard/views/partials/groupItem.html
View file @ d1893bc3
......@@ -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>
......
www/master/components/dashboard/js/modules/controllers/groupController.js
View file @ d1893bc3
......@@ -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 = "";
}
......
www/master/components/dashboard/less/dashboard/groups.less
View file @ d1893bc3
......@@ -104,7 +104,7 @@
padding-top: 10px;
}
.selectFilter {
padding-top: 10px;
padding-top: 7px;
margin-right: 30px;
.md-select-label {
......
www/master/components/dashboard/views/groups.html
View file @ d1893bc3
......@@ -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>
......
www/master/components/dashboard/views/partials/groupBox.html
View file @ d1893bc3
......@@ -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>
......
www/master/components/dashboard/views/partials/groupItem.html
View file @ d1893bc3
......@@ -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>
......
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