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

* add filter for k8s application type

app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.html

@@ -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"
             >

app/kubernetes/components/datatables/applications-datatable/applicationsDatatableController.js

@@ -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;