Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-05 13:55:21 +02:00
Code Issues Releases Activity

feat(home): support search in multiple fields (name, group, tag, status) (#2285)

Browse source 
* feat(home): search multiple fields (group/tag)

* feat(home): change search from "OR" to "AND"

* feat(home): search only for a tag or a group

* feat(home): search by keywords in name,group,tag

* feat(home): support case insensitive search

* style(home): remove unused $filter

* feat(home): search state

* style(home): update search input placeholder
This commit is contained in:
Chaim Lev-Ari 2018-09-30 23:06:58 +03:00 • committed by Anthony Lapenna
parent 5be2684442
commit 6e262e6e89
3 changed files with 69 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

60
app/portainer/components/endpoint-list/endpoint-list-controller.js Normal file
View file

@ -0,0 +1,60 @@
angular.module('portainer.app').controller('EndpointListController', [
function EndpointListController() {
var ctrl = this;
ctrl.state = {
textFilter: '',
filteredEndpoints: []
};
ctrl.$onChanges = $onChanges;
ctrl.onFilterChanged = onFilterChanged;
function $onChanges(changesObj) {
handleEndpointsChange(changesObj.endpoints);
}
function handleEndpointsChange(endpoints) {
if (!endpoints) {
return;
}
if (!endpoints.currentValue) {
return;
}
onFilterChanged();
}
function onFilterChanged() {
var filterValue = ctrl.state.textFilter;
ctrl.state.filteredEndpoints = filterEndpoints(
ctrl.endpoints,
filterValue
);
}
function filterEndpoints(endpoints, filterValue) {
if (!endpoints || !endpoints.length || !filterValue) {
return endpoints;
}
var keywords = filterValue.split(' ');
return _.filter(endpoints, function(endpoint) {
var statusString = convertStatusToString(endpoint.Status);
return _.every(keywords, function(keyword) {
var lowerCaseKeyword = keyword.toLowerCase();
return (
_.includes(endpoint.Name.toLowerCase(), lowerCaseKeyword) ||
_.includes(endpoint.GroupName.toLowerCase(), lowerCaseKeyword) ||
_.some(endpoint.Tags, function(tag) {
return _.includes(tag.toLowerCase(), lowerCaseKeyword);
}) ||
_.includes(statusString, keyword)
);
});
});
}
function convertStatusToString(status) {
return status === 1 ? 'up' : 'down';
}
}
]);

6
app/portainer/components/endpoint-list/endpoint-list.js
View file

@ -1,10 +1,6 @@
angular.module('portainer.app').component('endpointList', {
templateUrl: 'app/portainer/components/endpoint-list/endpointList.html',
controller: function() {
this.state = {
textFilter: ''
};
},
controller: 'EndpointListController',
bindings: {
titleText: '@',
titleIcon: '@',

11
app/portainer/components/endpoint-list/endpointList.html
View file

@ -16,12 +16,17 @@
<div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search by name, group, tag..." auto-focus>
<input
type="text"
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onFilterChanged()"
placeholder="Search by name, group, tag, status..." auto-focus>
</div>
<div class="blocklist">
<endpoint-item
ng-repeat="endpoint in $ctrl.endpoints | filter:$ctrl.state.textFilter"
ng-repeat="endpoint in $ctrl.state.filteredEndpoints"
model="endpoint"
on-select="$ctrl.dashboardAction"
on-edit="$ctrl.editAction"
@ -30,7 +35,7 @@
<div ng-if="!$ctrl.endpoints" class="text-center text-muted">
Loading...
</div>
<div ng-if="($ctrl.endpoints | filter:$ctrl.state.textFilter).length === 0" class="text-center text-muted">
<div ng-if="!$ctrl.state.filteredEndpoints.length" class="text-center text-muted">
No endpoint available.
</div>
</div>