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', [ ...@@ -1042,7 +1042,7 @@ app.controller('GroupCtrl', [
$scope.clearSelector = function(grouping) { $location.path("/dashboard/groups/" + grouping + "/selector/"); }; $scope.clearSelector = function(grouping) { $location.path("/dashboard/groups/" + grouping + "/selector/"); };
$scope.changeGroupBy = function() { $scope.changeGroupBy = function() {
var grouping = $scope.selectedGroupBy; var grouping = encodeURIComponent($scope.selectedGroupBy);
var s = _.clone($location.search()); var s = _.clone($location.search());
if ($scope.routeParams.grouping != grouping) if ($scope.routeParams.grouping != grouping)
...@@ -1067,14 +1067,16 @@ app.controller('GroupCtrl', [ ...@@ -1067,14 +1067,16 @@ app.controller('GroupCtrl', [
$scope.groupBy = parts; $scope.groupBy = parts;
$scope.loading = true; $scope.loading = true;
$scope.selector = selector; $scope.selector = selector;
$scope.selectorName = decodeURIComponent(selector);
var args = []; var args = [];
var type = ""; var type = "";
var selectedHost = "";
if (selector && selector.length > 0) { if (selector && selector.length > 0) {
$scope.selectorPieces = selector.split(","); $scope.selectorPieces = selector.split(",");
var labels = []; var labels = [];
var fields = []; var fields = [];
for (var i = 0; i < $scope.selectorPieces.length; i++) { for (var i = 0; i < $scope.selectorPieces.length; i++) {
var piece = $scope.selectorPieces[i]; var piece = decodeURIComponent($scope.selectorPieces[i]);
if (piece[0] == '$') { if (piece[0] == '$') {
fields.push(piece.slice(2)); fields.push(piece.slice(2));
} else { } else {
...@@ -1083,13 +1085,21 @@ app.controller('GroupCtrl', [ ...@@ -1083,13 +1085,21 @@ app.controller('GroupCtrl', [
if (labelParts.length > 1) { if (labelParts.length > 1) {
type = labelParts[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); labels.push(piece);
} }
} }
} }
if (labels.length > 0) { if (labels.length > 0) {
args.push("labels=" + encodeURI(labels.join(","))); args.push("labelSelector=" + encodeURI(labels.join(",")));
} }
if (fields.length > 0) { if (fields.length > 0) {
args.push("fields=" + encodeURI(fields.join(","))); args.push("fields=" + encodeURI(fields.join(",")));
...@@ -1098,6 +1108,9 @@ app.controller('GroupCtrl', [ ...@@ -1098,6 +1108,9 @@ app.controller('GroupCtrl', [
var query = "?" + args.join("&"); var query = "?" + args.join("&");
var list = []; var list = [];
var count = type.length > 0 ? 1 : 3; var count = type.length > 0 ? 1 : 3;
$scope.selectedGroupByName = decodeURIComponent($routeParams.grouping)
var barrier = $scope.createBarrier(count, function() { var barrier = $scope.createBarrier(count, function() {
$scope.groups = $scope.groupData(list, 0); $scope.groups = $scope.groupData(list, 0);
$scope.loading = false; $scope.loading = false;
...@@ -1109,8 +1122,9 @@ app.controller('GroupCtrl', [ ...@@ -1109,8 +1122,9 @@ app.controller('GroupCtrl', [
k8sApi.getPods(query).success(function(data) { k8sApi.getPods(query).success(function(data) {
$scope.addLabel("type", "pod", data.items); $scope.addLabel("type", "pod", data.items);
for (var i = 0; data.items && i < data.items.length; ++i) { for (var i = 0; data.items && i < data.items.length; ++i) {
data.items[i].metadata.labels.host = data.items[i].spec.host; data.items[i].metadata.labels.host = data.items[i].spec.nodeName;
list.push(data.items[i]); if(selectedHost.length == 0 || selectedHost == data.items[i].metadata.labels.host)
list.push(data.items[i]);
} }
barrier(); barrier();
}).error($scope.handleError); }).error($scope.handleError);
...@@ -1141,7 +1155,7 @@ app.controller('GroupCtrl', [ ...@@ -1141,7 +1155,7 @@ app.controller('GroupCtrl', [
} }
for (var i = 0; i < items.length; i++) { for (var i = 0; i < items.length; i++) {
if (!items[i].metadata.labels) { if (!items[i].metadata.labels) {
items[i].metadata.labels = []; items[i].metadata.labels = {};
} }
items[i].metadata.labels[key] = value; items[i].metadata.labels[key] = value;
} }
...@@ -1153,7 +1167,7 @@ app.controller('GroupCtrl', [ ...@@ -1153,7 +1167,7 @@ app.controller('GroupCtrl', [
"kind": "grouping" "kind": "grouping"
}; };
for (var i = 0; i < items.length; i++) { 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) { if (!key) {
key = ""; key = "";
} }
......
www/app/components/dashboard/views/groups.html
View file @ d1893bc3
...@@ -6,14 +6,14 @@ ...@@ -6,14 +6,14 @@
<div class="header" layout="row"> <div class="header" layout="row">
<div class="">Group by: </div> <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-option ng-value="g.value" ng-repeat="g in groupByOptions">{{g.name}}</md-option>
</md-select> </md-select>
<div ng-if="selector" layout="row" class="selector-area"> <div ng-if="selector" layout="row" class="selector-area">
<div class="filter-label">Filter:</div> <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"> <div class="filter-area" ng-if="selector && selector.length > 0">
<button ng-click="clearSelector(routeParams.grouping)" class="md-button cancel-button"> <button ng-click="clearSelector(routeParams.grouping)" class="md-button cancel-button">
...@@ -27,6 +27,7 @@ ...@@ -27,6 +27,7 @@
</div> </div>
</div> </div>
<div class="group-item" ng-repeat="(groupName,group) in groups.items" ng-include="'components/dashboard/views/partials/groupBox.html'"></div> <div class="group-item" ng-repeat="(groupName,group) in groups.items" ng-include="'components/dashboard/views/partials/groupBox.html'"></div>
</md-content> </md-content>
</div> </div>
......
www/app/components/dashboard/views/partials/groupBox.html
View file @ d1893bc3
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div class="server-overview" layout="column"> <div class="server-overview" layout="column">
<!-- subheader --> <!-- subheader -->
<div class="group-heading" layout="row"> <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> </div>
<!-- render group data --> <!-- render group data -->
<div ng-include="'components/dashboard/views/partials/groupItem.html'"></div> <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 @@ ...@@ -24,12 +24,17 @@
<div ng-switch-default>{{item.metadata.name}}</div> <div ng-switch-default>{{item.metadata.name}}</div>
</div> </div>
</div> </div>
<md-select ng-model="selectedFilter" ng-change="changeFilterBy(selectedFilter)" class="selectFilter">
<md-optgroup label="FILTER"> <div class="selectFilter">
<md-option ng-value="'{{key}}={{value}}'" ng-repeat="(key, value) in item.metadata.labels">{{key}}: {{value}}</md-option> <md-select ng-model="selectedFilter" ng-change="changeFilterBy(selectedFilter)">
</md-option-group> <md-optgroup label="FILTER">
</md-optgroup> <md-option ng-value="'{{key | uriComponentEncode}}={{value | uriComponentEncode}}'" ng-repeat="(key, value) in item.metadata.labels">{{key}}: {{value}}</md-option>
</md-select> </md-option-group>
</md-optgroup>
</md-select>
</div>
<!-- This is the official button design, but requires a custom dialog. Fix up after the demo. --> <!-- 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-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> <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', [ ...@@ -38,7 +38,7 @@ app.controller('GroupCtrl', [
$scope.clearSelector = function(grouping) { $location.path("/dashboard/groups/" + grouping + "/selector/"); }; $scope.clearSelector = function(grouping) { $location.path("/dashboard/groups/" + grouping + "/selector/"); };
$scope.changeGroupBy = function() { $scope.changeGroupBy = function() {
var grouping = $scope.selectedGroupBy; var grouping = encodeURIComponent($scope.selectedGroupBy);
var s = _.clone($location.search()); var s = _.clone($location.search());
if ($scope.routeParams.grouping != grouping) if ($scope.routeParams.grouping != grouping)
...@@ -63,14 +63,16 @@ app.controller('GroupCtrl', [ ...@@ -63,14 +63,16 @@ app.controller('GroupCtrl', [
$scope.groupBy = parts; $scope.groupBy = parts;
$scope.loading = true; $scope.loading = true;
$scope.selector = selector; $scope.selector = selector;
$scope.selectorName = decodeURIComponent(selector);
var args = []; var args = [];
var type = ""; var type = "";
var selectedHost = "";
if (selector && selector.length > 0) { if (selector && selector.length > 0) {
$scope.selectorPieces = selector.split(","); $scope.selectorPieces = selector.split(",");
var labels = []; var labels = [];
var fields = []; var fields = [];
for (var i = 0; i < $scope.selectorPieces.length; i++) { for (var i = 0; i < $scope.selectorPieces.length; i++) {
var piece = $scope.selectorPieces[i]; var piece = decodeURIComponent($scope.selectorPieces[i]);
if (piece[0] == '$') { if (piece[0] == '$') {
fields.push(piece.slice(2)); fields.push(piece.slice(2));
} else { } else {
...@@ -79,13 +81,21 @@ app.controller('GroupCtrl', [ ...@@ -79,13 +81,21 @@ app.controller('GroupCtrl', [
if (labelParts.length > 1) { if (labelParts.length > 1) {
type = labelParts[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); labels.push(piece);
} }
} }
} }
if (labels.length > 0) { if (labels.length > 0) {
args.push("labels=" + encodeURI(labels.join(","))); args.push("labelSelector=" + encodeURI(labels.join(",")));
} }
if (fields.length > 0) { if (fields.length > 0) {
args.push("fields=" + encodeURI(fields.join(","))); args.push("fields=" + encodeURI(fields.join(",")));
...@@ -94,6 +104,9 @@ app.controller('GroupCtrl', [ ...@@ -94,6 +104,9 @@ app.controller('GroupCtrl', [
var query = "?" + args.join("&"); var query = "?" + args.join("&");
var list = []; var list = [];
var count = type.length > 0 ? 1 : 3; var count = type.length > 0 ? 1 : 3;
$scope.selectedGroupByName = decodeURIComponent($routeParams.grouping)
var barrier = $scope.createBarrier(count, function() { var barrier = $scope.createBarrier(count, function() {
$scope.groups = $scope.groupData(list, 0); $scope.groups = $scope.groupData(list, 0);
$scope.loading = false; $scope.loading = false;
...@@ -105,8 +118,9 @@ app.controller('GroupCtrl', [ ...@@ -105,8 +118,9 @@ app.controller('GroupCtrl', [
k8sApi.getPods(query).success(function(data) { k8sApi.getPods(query).success(function(data) {
$scope.addLabel("type", "pod", data.items); $scope.addLabel("type", "pod", data.items);
for (var i = 0; data.items && i < data.items.length; ++i) { for (var i = 0; data.items && i < data.items.length; ++i) {
data.items[i].metadata.labels.host = data.items[i].spec.host; data.items[i].metadata.labels.host = data.items[i].spec.nodeName;
list.push(data.items[i]); if(selectedHost.length == 0 || selectedHost == data.items[i].metadata.labels.host)
list.push(data.items[i]);
} }
barrier(); barrier();
}).error($scope.handleError); }).error($scope.handleError);
...@@ -137,7 +151,7 @@ app.controller('GroupCtrl', [ ...@@ -137,7 +151,7 @@ app.controller('GroupCtrl', [
} }
for (var i = 0; i < items.length; i++) { for (var i = 0; i < items.length; i++) {
if (!items[i].metadata.labels) { if (!items[i].metadata.labels) {
items[i].metadata.labels = []; items[i].metadata.labels = {};
} }
items[i].metadata.labels[key] = value; items[i].metadata.labels[key] = value;
} }
...@@ -149,7 +163,7 @@ app.controller('GroupCtrl', [ ...@@ -149,7 +163,7 @@ app.controller('GroupCtrl', [
"kind": "grouping" "kind": "grouping"
}; };
for (var i = 0; i < items.length; i++) { 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) { if (!key) {
key = ""; key = "";
} }
......
www/master/components/dashboard/less/dashboard/groups.less
View file @ d1893bc3
...@@ -104,7 +104,7 @@ ...@@ -104,7 +104,7 @@
padding-top: 10px; padding-top: 10px;
} }
.selectFilter { .selectFilter {
padding-top: 10px; padding-top: 7px;
margin-right: 30px; margin-right: 30px;
.md-select-label { .md-select-label {
......
www/master/components/dashboard/views/groups.html
View file @ d1893bc3
...@@ -6,14 +6,14 @@ ...@@ -6,14 +6,14 @@
<div class="header" layout="row"> <div class="header" layout="row">
<div class="">Group by: </div> <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-option ng-value="g.value" ng-repeat="g in groupByOptions">{{g.name}}</md-option>
</md-select> </md-select>
<div ng-if="selector" layout="row" class="selector-area"> <div ng-if="selector" layout="row" class="selector-area">
<div class="filter-label">Filter:</div> <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"> <div class="filter-area" ng-if="selector && selector.length > 0">
<button ng-click="clearSelector(routeParams.grouping)" class="md-button cancel-button"> <button ng-click="clearSelector(routeParams.grouping)" class="md-button cancel-button">
...@@ -27,6 +27,7 @@ ...@@ -27,6 +27,7 @@
</div> </div>
</div> </div>
<div class="group-item" ng-repeat="(groupName,group) in groups.items" ng-include="'components/dashboard/views/partials/groupBox.html'"></div> <div class="group-item" ng-repeat="(groupName,group) in groups.items" ng-include="'components/dashboard/views/partials/groupBox.html'"></div>
</md-content> </md-content>
</div> </div>
......
www/master/components/dashboard/views/partials/groupBox.html
View file @ d1893bc3
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div class="server-overview" layout="column"> <div class="server-overview" layout="column">
<!-- subheader --> <!-- subheader -->
<div class="group-heading" layout="row"> <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> </div>
<!-- render group data --> <!-- render group data -->
<div ng-include="'components/dashboard/views/partials/groupItem.html'"></div> <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 @@ ...@@ -24,12 +24,17 @@
<div ng-switch-default>{{item.metadata.name}}</div> <div ng-switch-default>{{item.metadata.name}}</div>
</div> </div>
</div> </div>
<md-select ng-model="selectedFilter" ng-change="changeFilterBy(selectedFilter)" class="selectFilter">
<md-optgroup label="FILTER"> <div class="selectFilter">
<md-option ng-value="'{{key}}={{value}}'" ng-repeat="(key, value) in item.metadata.labels">{{key}}: {{value}}</md-option> <md-select ng-model="selectedFilter" ng-change="changeFilterBy(selectedFilter)">
</md-option-group> <md-optgroup label="FILTER">
</md-optgroup> <md-option ng-value="'{{key | uriComponentEncode}}={{value | uriComponentEncode}}'" ng-repeat="(key, value) in item.metadata.labels">{{key}}: {{value}}</md-option>
</md-select> </md-option-group>
</md-optgroup>
</md-select>
</div>
<!-- This is the official button design, but requires a custom dialog. Fix up after the demo. --> <!-- 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-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> <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