github/kubernetes
1
0
Fork 0
mirror of https://github.com/k3s-io/kubernetes.git synced 2025-07-30 15:05:27 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #10504 from bcbroussard/explore-updates

Browse Source 
Update Web UI Explore page
This commit is contained in:
Zach Loafman 2015-07-01 11:09:49 -07:00
commit 7689391c68
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>