feat(orb-ui): Rows actions context menu (#2765)

orb-community · Oct 18, 2023 · d2d6f76 · d2d6f76
1 parent 9b08f98
commit d2d6f76
Show file tree

Hide file tree

Showing 13 changed files with 384 additions and 5 deletions.
diff --git a/ui/src/app/pages/datasets/policies.agent/list/agent.policy.list.component.html b/ui/src/app/pages/datasets/policies.agent/list/agent.policy.list.component.html
@@ -1,4 +1,4 @@
-<div>
+<div (click)="handleContextClick()">
   <header>
     <xng-breadcrumb class="orb-breadcrumb"> </xng-breadcrumb>
     <div
@@ -53,8 +53,16 @@ <h4>All Policies</h4>
       class="orb orb-table"
       [selected]="selected"
       [selectionType]="'checkbox'"
+      (tableContextmenu)="onTableContextMenu($event)"
     >
     </ngx-datatable>
+    <ngx-table-context-menu 
+      *ngIf="showContextMenu" 
+      [items]="policyContextMenu" 
+      [left]="menuPositionLeft" 
+      [top]="menuPositionTop" 
+      [rowObject]="contextMenuRow">
+    </ngx-table-context-menu>
   </div>
 </div>
 

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
@@ -85,6 +85,19 @@ export class AgentPolicyListComponent
   filters$!: Observable<FilterOption[]>;
   filteredPolicies$: Observable<AgentPolicy[]>;
 
+  contextMenuRow: any;
+
+  showContextMenu = false;
+  menuPositionLeft: number;
+  menuPositionTop: number;
+
+  policyContextMenu = [
+    {icon: 'search-outline', action: 'openview'},
+    {icon:'edit-outline', action: 'openview'},
+    {icon: 'copy-outline', action: 'openduplicate'},
+    {icon: 'trash-outline', action: 'opendelete'},
+  ];
+
   constructor(
     private cdr: ChangeDetectorRef,
     private dialogService: NbDialogService,
@@ -152,6 +165,25 @@ export class AgentPolicyListComponent
     );
   }
 
+  onTableContextMenu(event) {
+    event.event.preventDefault();
+    event.event.stopPropagation();
+    if (event.type === 'body') {
+      this.contextMenuRow = {
+        objectType: 'policy',
+        ...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.html b/ui/src/app/pages/fleet/agents/list/agent.list.component.html
@@ -1,4 +1,4 @@
-<header>
+<header (click)="handleContextClick()">
   <xng-breadcrumb class="orb-breadcrumb"> </xng-breadcrumb>
   <div
     style="
@@ -14,7 +14,7 @@ <h4>All Agents</h4>
     <ngx-poll-control></ngx-poll-control>
   </div>
 </header>
-<div #tableWrapper class="tableWrapper">
+<div #tableWrapper class="tableWrapper" (click)="handleContextClick()">
   <div class="options">
     <ngx-filter [availableFilters]="filterOptions"></ngx-filter>
     <button (click)="onOpenDeleteSelected()"
@@ -63,8 +63,17 @@ <h4>All Agents</h4>
     class="orb orb-table"
     [selected]="selected"
     [selectionType]="'checkbox'"
+    (tableContextmenu)="onTableContextMenu($event)"
   >
   </ngx-datatable>
+
+  <ngx-table-context-menu 
+    *ngIf="showContextMenu" 
+    [items]="agentContextMenu" 
+    [left]="menuPositionLeft" 
+    [top]="menuPositionTop" 
+    [rowObject]="contextMenuRow">
+  </ngx-table-context-menu>
 </div>
 
 <ng-template

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
@@ -93,6 +93,17 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe
   filteredAgents$: Observable<Agent[]>;
   private currentComponentWidth;
 
+  contextMenuRow: any;
+
+  showContextMenu = false;
+  menuPositionLeft: number;
+  menuPositionTop: number;
+
+  agentContextMenu = [
+    {icon: 'search-outline', action: 'openview'},
+    {icon:'edit-outline', action: 'openview'},
+    {icon: 'trash-outline', action: 'opendelete'},
+  ];
   constructor(
     private cdr: ChangeDetectorRef,
     private dialogService: NbDialogService,
@@ -191,6 +202,25 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe
     }
   }
 
+  onTableContextMenu(event) {
+    event.event.preventDefault();
+    event.event.stopPropagation();
+    if (event.type === 'body') {
+      this.contextMenuRow = {
+        objectType: 'agent',
+        ...event.content
+      }
+      this.menuPositionLeft = event.event.clientX;
+      this.menuPositionTop = event.event.clientY;
+      this.showContextMenu = true;
+    } 
+  }
+  handleContextClick() {
+    if (this.showContextMenu) {
+      this.showContextMenu = false;
+    }
+  }
+
   ngAfterViewInit() {
     this.columns = [
       {

diff --git a/ui/src/app/pages/fleet/groups/list/agent.group.list.component.html b/ui/src/app/pages/fleet/groups/list/agent.group.list.component.html
@@ -1,4 +1,4 @@
-<div>
+<div (click)="handleContextClick()">
   <header>
     <xng-breadcrumb class="orb-breadcrumb"> </xng-breadcrumb>
     <div
@@ -53,8 +53,16 @@ <h4>{{ strings.list.header }}</h4>
       class="orb orb-table"
       [selected]="selected"
       [selectionType]="'checkbox'"
+      (tableContextmenu)="onTableContextMenu($event)"
     >
     </ngx-datatable>
+    <ngx-table-context-menu 
+      *ngIf="showContextMenu" 
+      [items]="agentGroupContextMenu" 
+      [left]="menuPositionLeft" 
+      [top]="menuPositionTop" 
+      [rowObject]="contextMenuRow">
+    </ngx-table-context-menu>
   </div>
 </div>
 

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
@@ -90,6 +90,18 @@ export class AgentGroupListComponent
   filters$!: Observable<FilterOption[]>;
   filteredGroups$: Observable<AgentGroup[]>;
 
+  contextMenuRow: any;
+
+  showContextMenu = false;
+  menuPositionLeft: number;
+  menuPositionTop: number;
+
+  agentGroupContextMenu = [
+    {icon: 'search-outline', action: 'openview'},
+    {icon:'edit-outline', action: 'openedit'},
+    {icon: 'trash-outline', action: 'opendelete'},
+  ];
+
   constructor(
     private cdr: ChangeDetectorRef,
     private dialogService: NbDialogService,
@@ -142,6 +154,25 @@ export class AgentGroupListComponent
     );
   }
 
+  onTableContextMenu(event) {
+    event.event.preventDefault();
+    event.event.stopPropagation();
+    if (event.type === 'body') {
+      this.contextMenuRow = {
+        objectType: 'group',
+        ...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
@@ -14,6 +14,7 @@ import {
   NbButtonModule,
   NbCardModule,
   NbCheckboxModule,
+  NbContextMenuModule,
   NbDialogService,
   NbFormFieldModule,
   NbInputModule,
@@ -73,6 +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';
 
 @NgModule({
   imports: [
@@ -108,6 +110,7 @@ import { PolicyDuplicateComponent } from './datasets/policies.agent/duplicate/ag
     A11yModule,
     NbAutocompleteModule,
     SharedModule,
+    NbContextMenuModule,
   ],
   exports: [
     SharedModule,

diff --git a/ui/src/app/pages/sinks/list/sink.list.component.html b/ui/src/app/pages/sinks/list/sink.list.component.html
@@ -1,4 +1,4 @@
-<div>
+<div (click)="handleContextClick()">
   <header>
     <xng-breadcrumb class="orb-breadcrumb"> </xng-breadcrumb>
     <div
@@ -53,8 +53,16 @@ <h4>{{ strings.list.header }}</h4>
       class="orb orb-table"
       [selected]="selected"
       [selectionType]="'checkbox'"
+      (tableContextmenu)="onTableContextMenu($event)"
     >
     </ngx-datatable>
+    <ngx-table-context-menu 
+      *ngIf="showContextMenu" 
+      [items]="sinkContextMenu" 
+      [left]="menuPositionLeft" 
+      [top]="menuPositionTop" 
+      [rowObject]="contextMenuRow">
+    </ngx-table-context-menu>
   </div>
 </div>
 

diff --git a/ui/src/app/pages/sinks/list/sink.list.component.ts b/ui/src/app/pages/sinks/list/sink.list.component.ts
@@ -85,6 +85,18 @@ export class SinkListComponent implements AfterViewInit, AfterViewChecked, OnDes
   filters$!: Observable<FilterOption[]>;
   filteredSinks$: Observable<Sink[]>;
 
+  contextMenuRow: any;
+
+  showContextMenu: boolean;
+  menuPositionLeft: number;
+  menuPositionTop: number;
+
+  sinkContextMenu = [
+    {icon: 'search-outline', action: 'openview'},
+    {icon:'edit-outline', action: 'openview'},
+    {icon: 'trash-outline', action: 'opendelete'},
+  ];
+
   constructor(
     private cdr: ChangeDetectorRef,
     private dialogService: NbDialogService,
@@ -140,6 +152,7 @@ export class SinkListComponent implements AfterViewInit, AfterViewChecked, OnDes
       this.filters$,
       this.filterOptions,
     );
+    this.showContextMenu = false;
   }
 
   ngOnDestroy(): void {
@@ -234,6 +247,25 @@ export class SinkListComponent implements AfterViewInit, AfterViewChecked, OnDes
     ];
   }
 
+  onTableContextMenu(event) {
+    event.event.preventDefault();
+    event.event.stopPropagation();
+    if (event.type === 'body') {
+      this.contextMenuRow = {
+        objectType: 'sink',
+        ...event.content
+      }
+      this.menuPositionLeft = event.event.clientX;
+      this.menuPositionTop = event.event.clientY;
+      this.showContextMenu = true;
+    } 
+  }
+  handleContextClick() {
+    if (this.showContextMenu) {
+      this.showContextMenu = false;
+    }
+  }
+
   onOpenAdd() {
     this.router.navigate(['add'], { relativeTo: this.route });
   }

diff --git a/ui/src/app/shared/components/tableContexMenu/table-context-menu-component.html b/ui/src/app/shared/components/tableContexMenu/table-context-menu-component.html
@@ -0,0 +1,6 @@
+<div class="floating-div" [style.left.px]="left" [style.top.px]="top">
+    <button *ngFor="let item of items" class="button-action {{item.action}}" (click)="handleClick(item)">
+        <nb-icon icon="{{item.icon}}">
+        </nb-icon>
+    </button>
+</div>
diff --git a/ui/src/app/shared/components/tableContexMenu/table-context-menu-component.scss b/ui/src/app/shared/components/tableContexMenu/table-context-menu-component.scss
@@ -0,0 +1,28 @@
+.floating-div {
+  position: absolute;
+  transform: translate(3%, -90%);
+  background-color: #171c30; 
+  padding: 7px 10px;
+  border-radius: 30px;
+  border-bottom-left-radius: 0;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+}
+.button-action {
+  border: none;
+  background-color: transparent;
+  color: #969fb9;
+  outline: none;
+}
+.openview, .openedit, .openduplicate {
+  transition: color 0.3s ease;
+  &:hover {
+    color: #3089fc;
+  }
+}
+.opendelete {
+  transition: color 0.3s ease;
+  &:hover {
+    color: #df316f;
+  }
+}