github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

feat(k8s): add filter for k8s application type EE-1627 (#5733) 

* add filter for k8s application type
pull/5553/head
Richard Wei 2021-09-30 15:53:03 +13:00 committed by GitHub
parent 34f6e11f1d
commit 75071dfade
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 44 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.html
View File

@ -135,12 +135,32 @@
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Image' && $ctrl.state.reverseOrder"></i>
</a>
</th>
<th>
<th uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.filters.state.open">
<a ng-click="$ctrl.changeOrderBy('ApplicationType')">
Application Type
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ApplicationType' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ApplicationType' && $ctrl.state.reverseOrder"></i>
</a>
<div>
<span uib-dropdown-toggle class="table-filter" ng-if="!$ctrl.filters.state.enabled">Filter <i class="fa fa-filter" aria-hidden="true"></i></span>
<span uib-dropdown-toggle class="table-filter filter-active" ng-if="$ctrl.filters.state.enabled">Filter <i class="fa fa-check" aria-hidden="true"></i></span>
</div>
<div class="dropdown-menu" uib-dropdown-menu>
<div class="tableMenu">
<div class="menuHeader">
Filter by application type
</div>
<div class="menuContent">
<div class="md-checkbox" ng-repeat="filter in $ctrl.filters.state.values track by $index">
<input id="filter_state_{{ $index }}" type="checkbox" ng-model="filter.display" ng-change="$ctrl.onStateFilterChange()" />
<label for="filter_state_{{ $index }}">{{ filter.type | kubernetesApplicationTypeText }}</label>
</div>
</div>
<div>
<a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.filters.state.open = false;">Close</a>
</div>
</div>
</div>
</th>
<th>
Status
@ -160,7 +180,7 @@
<tbody>
<tr
ng-click="$ctrl.expandItem(item, !$ctrl.isItemExpanded(item))"
dir-paginate-start="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | filter:$ctrl.isDisplayed | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit: $ctrl.tableKey))"
dir-paginate-start="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.applyFilters | filter:$ctrl.state.textFilter | filter:$ctrl.isDisplayed | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit: $ctrl.tableKey))"
ng-class="{ active: item.Checked, interactive: $ctrl.isExpandable(item), 'secondary-body': !$ctrl.isPrimary }"
pagination-id="$ctrl.tableKey"
>

22
app/kubernetes/components/datatables/applications-datatable/applicationsDatatableController.js
View File

@ -2,6 +2,7 @@ import { KubernetesApplicationDeploymentTypes, KubernetesApplicationTypes } from
import KubernetesApplicationHelper from 'Kubernetes/helpers/application';
import KubernetesNamespaceHelper from 'Kubernetes/helpers/namespaceHelper';
import { KubernetesConfigurationTypes } from 'Kubernetes/models/configuration/models';
import _ from 'lodash-es';
angular.module('portainer.docker').controller('KubernetesApplicationsDatatableController', [
'$scope',
@ -22,6 +23,14 @@ angular.module('portainer.docker').controller('KubernetesApplicationsDatatableCo
expandedItems: [],
});
this.filters = {
state: {
open: false,
enabled: false,
values: [],
},
};
this.expandAll = function () {
this.state.expandAll = !this.state.expandAll;
this.state.filteredDataSet.forEach((item) => this.expandItem(item, this.state.expandAll));
@ -114,6 +123,19 @@ angular.module('portainer.docker').controller('KubernetesApplicationsDatatableCo
return !this.isSystemNamespace(item);
};
this.applyFilters = function (item) {
return ctrl.filters.state.values.some((filter) => item.ApplicationType === filter.type && filter.display);
};
this.onStateFilterChange = function () {
this.filters.state.enabled = this.filters.state.values.some((filter) => !filter.display);
};
this.prepareTableFromDataset = function () {
const availableTypeFilters = this.dataset.map((item) => ({ type: item.ApplicationType, display: true }));
this.filters.state.values = _.uniqBy(availableTypeFilters, 'type');
};
this.$onInit = function () {
this.isAdmin = Authentication.isAdmin();
this.KubernetesApplicationDeploymentTypes = KubernetesApplicationDeploymentTypes;