feat(app): debounce on all search fields (#3058)

app/agent/components/files-datatable/files-datatable.html

@@ -7,7 +7,7 @@
     <rd-widget-body classes="no-padding">
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter"
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-model-options="{ debounce: 300 }"
           ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
       </div>
       <div class="table-responsive">

app/azure/components/datatables/containergroups-datatable/containerGroupsDatatable.html

@@ -17,7 +17,7 @@
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
       </div>
       <div class="table-responsive">
         <table class="table table-hover table-filters nowrap-cells">

app/docker/components/datatables/configs-datatable/configsDatatable.html

@@ -55,7 +55,7 @@
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">

app/docker/components/datatables/container-processes-datatable/containerProcessesDatatable.html

@@ -8,7 +8,7 @@
       </div>
       <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..." auto-focus>
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">

app/docker/components/datatables/containers-datatable/containersDatatable.html

@@ -136,7 +136,7 @@
       ></containers-datatable-actions>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
       </div>
       <div class="table-responsive">
         <table class="table table-hover table-filters nowrap-cells">

app/docker/components/datatables/events-datatable/eventsDatatable.html

@@ -8,7 +8,7 @@
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">

app/docker/components/datatables/host-jobs-datatable/jobsDatatable.html

@@ -16,7 +16,7 @@
           </div>
           <div class="searchBar">
             <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-            <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
+            <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
           </div>
           <div class="table-responsive">
             <table class="table table-hover table-filters nowrap-cells">

app/docker/components/datatables/images-datatable/imagesDatatable.html

@@ -75,7 +75,7 @@
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
       </div>
       <div class="table-responsive">
         <table class="table table-hover table-filters nowrap-cells">

app/docker/components/datatables/macvlan-nodes-datatable/macvlanNodesDatatable.html

@@ -8,7 +8,7 @@
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">

app/docker/components/datatables/networks-datatable/networksDatatable.html

@@ -55,7 +55,7 @@
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">

app/docker/components/datatables/node-tasks-datatable/nodeTasksDatatable.html

@@ -8,7 +8,7 @@
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">

app/docker/components/datatables/nodes-datatable/nodesDatatable.html

@@ -46,7 +46,7 @@
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">

app/docker/components/datatables/secrets-datatable/secretsDatatable.html

@@ -55,7 +55,7 @@
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">

app/docker/components/datatables/services-datatable/servicesDatatable.html

@@ -52,7 +52,7 @@
       ></services-datatable-actions>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">

app/docker/components/datatables/tasks-datatable/tasksDatatable.html

@@ -8,7 +8,7 @@
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search...">
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." ng-model-options="{ debounce: 300 }">
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">

app/docker/components/datatables/volumes-datatable/volumesDatatable.html

@@ -55,7 +55,7 @@
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
       </div>
       <div class="table-responsive">
         <table class="table table-hover table-filters nowrap-cells">

app/extensions/rbac/components/access-viewer/datatable/accessViewerDatatable.html

@@ -2,7 +2,7 @@
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
         <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()"
-          placeholder="Search...">
+          placeholder="Search..." ng-model-options="{ debounce: 300 }">
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">

app/extensions/rbac/components/roles-datatable/rolesDatatable.html

@@ -8,7 +8,7 @@
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus ng-disabled="!$ctrl.rbacEnabled">
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus ng-disabled="!$ctrl.rbacEnabled" ng-model-options="{ debounce: 300 }">
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">

app/extensions/registry-management/components/registries-repositories-datatable/registryRepositoriesDatatable.html

@@ -8,7 +8,7 @@
       </div>
       <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..." auto-focus>
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
       </div>
       <div class="table-responsive">
         <table class="table table-hover table-filters nowrap-cells">

app/extensions/registry-management/components/registries-repository-tags-datatable/registriesRepositoryTagsDatatable.html

@@ -14,7 +14,7 @@
       </div>
       <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..." auto-focus>
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">

app/integrations/storidge/components/cluster-events-datatable/storidgeClusterEventsDatatable.html

@@ -8,7 +8,7 @@
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
       </div>
       <div class="table-responsive">
         <table class="table table-hover">

app/integrations/storidge/components/drives-datatable/storidgeDrivesDatatable.html

@@ -13,7 +13,7 @@
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
       </div>
       <div class="table-responsive">
         <table class="table table-hover">

app/integrations/storidge/components/nodes-datatable/storidgeNodesDatatable.html

@@ -27,7 +27,7 @@
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
       </div>
       <div class="table-responsive">
         <table class="table table-hover">

app/integrations/storidge/components/profiles-datatable/storidgeProfilesDatatable.html

@@ -14,7 +14,7 @@
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
       </div>
       <div class="table-responsive">
         <table class="table table-hover">

app/integrations/storidge/components/snapshots-datatable/storidgeSnapshotsDatatable.html

@@ -14,7 +14,7 @@
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search...">
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." ng-model-options="{ debounce: 300 }">
       </div>
       <div class="table-responsive">
         <table class="table table-hover">

app/portainer/components/access-datatable/accessDatatable.html

@@ -23,7 +23,7 @@
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
         <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()"
-          placeholder="Search...">
+          placeholder="Search..." ng-model-options="{ debounce: 300 }">
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">

app/portainer/components/access-table/accessTable.html

@@ -2,7 +2,7 @@
   <table class="table table-hover">
     <div class="col-sm-12">
       <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-      <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search...">
+      <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." ng-model-options="{ debounce: 300 }">
     </div>
     <thead>
       <tr>

app/portainer/components/datatables/groups-datatable/groupsDatatable.html

@@ -17,7 +17,7 @@
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">

app/portainer/components/datatables/registries-datatable/registriesDatatable.html

@@ -17,7 +17,7 @@
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">

app/portainer/components/datatables/schedule-tasks-datatable/scheduleTasksDatatable.html

@@ -11,7 +11,7 @@
           </div>
           <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..." auto-focus>
+            <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
           </div>
           <div class="table-responsive">
             <table class="table table-hover table-filters nowrap-cells">

app/portainer/components/datatables/schedules-datatable/schedulesDatatable.html

@@ -17,7 +17,7 @@
       </div>
       <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..." auto-focus>
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">

app/portainer/components/datatables/stacks-datatable/stacksDatatable.html

@@ -55,7 +55,7 @@
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">

app/portainer/components/datatables/tags-datatable/tagsDatatable.html

@@ -14,7 +14,7 @@
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search...">
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." ng-model-options="{ debounce: 300 }">
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">

app/portainer/components/datatables/teams-datatable/teamsDatatable.html

@@ -14,7 +14,7 @@
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search...">
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." ng-model-options="{ debounce: 300 }">
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">

app/portainer/components/datatables/users-datatable/usersDatatable.html

@@ -14,7 +14,7 @@
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search...">
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." ng-model-options="{ debounce: 300 }">
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">

app/portainer/components/template-list/templateList.html

@@ -37,7 +37,7 @@
 
       <div class="searchBar" style="border-top: 2px solid #f6f6f6;">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
       </div>
 
       <div class="blocklist">