feat(orb-ui): New filter component V1 (#2781)

* feat(orb-ui): New filter compoment V1 & fix:lint * fix context menu
orb-community · Oct 27, 2023 · a83edae · a83edae
1 parent c1511c8
commit a83edae
Show file tree

Hide file tree

Showing 13 changed files with 381 additions and 227 deletions.
diff --git a/ui/src/app/common/services/filter.service.ts b/ui/src/app/common/services/filter.service.ts
@@ -88,8 +88,12 @@ export class FilterService {
     }
   }
 
-  removeFilterByParam(param: string) {
-    this.removeFilter(this._filters.findIndex((f) => f.param === param && f.name === 'Name' && f));
+  findAndRemove(param: any, name: string) {
+    this.removeFilter(this._filters.findIndex((f) => f.param === param && f.name === name && f));
+  }
+
+  findFilter(param: any, name: string) {
+    return this._filters.findIndex((f) => f.param === param && f.name === name && f);
   }
 
   // make a decorator out of this?

diff --git a/ui/src/app/common/services/orb.service.ts b/ui/src/app/common/services/orb.service.ts
@@ -159,6 +159,16 @@ export class OrbService implements OnDestroy {
       ),
     );
   }
+  getAgentsVersions() {
+    return this.observe(this.agent.getAllAgents()).pipe(
+      map((agents) => {
+        return agents
+          .map((_agent) => _agent?.agent_metadata?.orb_agent?.version)
+          .filter(version => version !== undefined)
+          .filter(this.onlyUnique);
+      }),
+    );
+  }
 
   getGroupsTags() {
     return this.observe(this.group.getAllAgentGroups()).pipe(
@@ -287,6 +297,10 @@ export class OrbService implements OnDestroy {
       map((sinks) => this.mapTags(sinks)),
     );
   }
-
+  getPolicyTags() {
+    return this.observe(this.policy.getAllAgentPolicies()).pipe(
+      map((policies) => this.mapTags(policies)),
+    );
+  }
   onlyUnique = (value, index, self) => self.indexOf(value) === index;
 }
diff --git a/ui/src/app/pages/datasets/policies.agent/list/agent.policy.list.component.ts b/ui/src/app/pages/datasets/policies.agent/list/agent.policy.list.component.ts
@@ -93,7 +93,7 @@ export class AgentPolicyListComponent
 
   policyContextMenu = [
     {icon: 'search-outline', action: 'openview'},
-    {icon:'edit-outline', action: 'openview'},
+    {icon: 'edit-outline', action: 'openview'},
     {icon: 'copy-outline', action: 'openduplicate'},
     {icon: 'trash-outline', action: 'opendelete'},
   ];
@@ -134,6 +134,7 @@ export class AgentPolicyListComponent
       {
         name: 'Tags',
         prop: 'tags',
+        autoSuggestion: orb.getPolicyTags(),
         filter: filterTags,
         type: FilterTypes.AutoComplete,
       },
@@ -171,19 +172,19 @@ export class AgentPolicyListComponent
     if (event.type === 'body') {
       this.contextMenuRow = {
         objectType: 'policy',
-        ...event.content
-      }
+        ...event.content,
+      };
       this.menuPositionLeft = event.event.clientX;
       this.menuPositionTop = event.event.clientY;
       this.showContextMenu = true;
-    } 
+    }
   }
   handleContextClick() {
     if (this.showContextMenu) {
       this.showContextMenu = false;
     }
   }
-  
+
   onOpenDuplicatePolicy(agentPolicy: any) {
     const policy = agentPolicy.name;
     this.dialogService

diff --git a/ui/src/app/pages/fleet/agents/list/agent.list.component.ts b/ui/src/app/pages/fleet/agents/list/agent.list.component.ts
@@ -101,7 +101,7 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe
 
   agentContextMenu = [
     {icon: 'search-outline', action: 'openview'},
-    {icon:'edit-outline', action: 'openview'},
+    {icon: 'edit-outline', action: 'openview'},
     {icon: 'trash-outline', action: 'opendelete'},
   ];
   constructor(
@@ -172,6 +172,7 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe
         prop: 'version',
         filter: filterString,
         type: FilterTypes.Input,
+        autoSuggestion: orb.getAgentsVersions(),
       },
     ];
 
@@ -208,12 +209,12 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe
     if (event.type === 'body') {
       this.contextMenuRow = {
         objectType: 'agent',
-        ...event.content
-      }
+        ...event.content,
+      };
       this.menuPositionLeft = event.event.clientX;
       this.menuPositionTop = event.event.clientY;
       this.showContextMenu = true;
-    } 
+    }
   }
   handleContextClick() {
     if (this.showContextMenu) {

diff --git a/ui/src/app/pages/fleet/groups/list/agent.group.list.component.ts b/ui/src/app/pages/fleet/groups/list/agent.group.list.component.ts
@@ -17,6 +17,7 @@ import {
 
 import { AgentGroup } from 'app/common/interfaces/orb/agent.group.interface';
 import {
+  filterMultiSelect,
   FilterOption, filterString,
   filterTags,
   FilterTypes,
@@ -98,7 +99,7 @@ export class AgentGroupListComponent
 
   agentGroupContextMenu = [
     {icon: 'search-outline', action: 'openview'},
-    {icon:'edit-outline', action: 'openedit'},
+    {icon: 'edit-outline', action: 'openedit'},
     {icon: 'trash-outline', action: 'opendelete'},
   ];
 
@@ -160,19 +161,19 @@ export class AgentGroupListComponent
     if (event.type === 'body') {
       this.contextMenuRow = {
         objectType: 'group',
-        ...event.content
-      }
+        ...event.content,
+      };
       this.menuPositionLeft = event.event.clientX;
       this.menuPositionTop = event.event.clientY;
       this.showContextMenu = true;
-    } 
+    }
   }
   handleContextClick() {
     if (this.showContextMenu) {
       this.showContextMenu = false;
     }
   }
-  
+
   ngOnDestroy(): void {
     if (this.groupsSubscription) {
       this.groupsSubscription.unsubscribe();

diff --git a/ui/src/app/pages/pages.module.ts b/ui/src/app/pages/pages.module.ts
@@ -74,7 +74,7 @@ import { PagesComponent } from './pages.component';
 import { SinkViewComponent } from './sinks/view/sink.view.component';
 import { DeleteSelectedComponent } from 'app/shared/components/delete/delete.selected.component';
 import { PolicyDuplicateComponent } from './datasets/policies.agent/duplicate/agent.policy.duplicate.confirmation';
-import { TableContextMenu } from 'app/shared/components/tableContexMenu/table-context-menu-component';
+import { TableContextMenuComponent } from 'app/shared/components/tableContexMenu/table-context-menu-component';
 
 @NgModule({
   imports: [

diff --git a/ui/src/app/pages/sinks/list/sink.list.component.ts b/ui/src/app/pages/sinks/list/sink.list.component.ts
@@ -93,7 +93,7 @@ export class SinkListComponent implements AfterViewInit, AfterViewChecked, OnDes
 
   sinkContextMenu = [
     {icon: 'search-outline', action: 'openview'},
-    {icon:'edit-outline', action: 'openview'},
+    {icon: 'edit-outline', action: 'openview'},
     {icon: 'trash-outline', action: 'opendelete'},
   ];
 
@@ -254,12 +254,12 @@ export class SinkListComponent implements AfterViewInit, AfterViewChecked, OnDes
     if (event.type === 'body') {
       this.contextMenuRow = {
         objectType: 'sink',
-        ...event.content
-      }
+        ...event.content,
+      };
       this.menuPositionLeft = event.event.clientX;
       this.menuPositionTop = event.event.clientY;
       this.showContextMenu = true;
-    } 
+    }
   }
   handleContextClick() {
     if (this.showContextMenu) {