Skip to content

K
k3s
Commit 7689391c authored by Zach Loafman's avatar Zach Loafman
Browse files
Options

Merge pull request #10504 from bcbroussard/explore-updates

Update Web UI Explore page
parents 3094c162 d1893bc3
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 75 additions and 35 deletions
pkg/ui/datafile.go
View file @ 7689391c
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 @ 7689391c
...@@ -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 @ 7689391c
...@@ -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 @ 7689391c
...@@ -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 @ 7689391c
...@@ -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 @ 7689391c
...@@ -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 @ 7689391c
...@@ -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 @ 7689391c
...@@ -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 @ 7689391c
...@@ -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 @ 7689391c
...@@ -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