wip context menus

mligtenberg · Dec 28, 2024 · 553d369 · 553d369
1 parent 09ba3ed
commit 553d369
Show file tree

Hide file tree

Showing 23 changed files with 212 additions and 28 deletions.
diff --git a/apps/servicebus-browser-frontend/src/app/app.component.html b/apps/servicebus-browser-frontend/src/app/app.component.html
@@ -5,6 +5,7 @@
       <p-scroll-panel>
         <sbb-tpl-topology-tree
           [namespaces]="namespaces()"
+          [namespaceContextMenuItems]="namespaceContextMenuItems"
           (namespaceSelected)="onNamespaceSelected($event)"
           (queueSelected)="onQueueSelected($event)"
           (topicSelected)="onTopicSelected($event)"

diff --git a/apps/servicebus-browser-frontend/src/app/app.component.ts b/apps/servicebus-browser-frontend/src/app/app.component.ts
@@ -1,7 +1,7 @@
 import { Component, inject, signal } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { Splitter } from 'primeng/splitter';
-import { PrimeTemplate } from 'primeng/api';
+import { MenuItem, MenuItemCommandEvent, PrimeTemplate } from 'primeng/api';
 import { Menubar } from 'primeng/menubar';
 import { ScrollPanel } from 'primeng/scrollpanel';
 import { Tab, TabList, Tabs } from 'primeng/tabs';
@@ -11,6 +11,7 @@ import { LogsSelectors } from '@service-bus-browser/logs-store';
 import { TopologySelectors } from '@service-bus-browser/topology-store';
 import { TopologyTreeComponent } from '@service-bus-browser/topology-components';
 import { Namespace, Queue, Topic, Subscription } from '@service-bus-browser/topology-contracts';
+import { SbbMenuItem } from '@service-bus-browser/shared-contracts';
 
 @Component({
   imports: [
@@ -34,14 +35,23 @@ export class AppComponent {
   items = [
     {
       label: 'Connections',
-    }
+    },
   ];
   store = inject(Store);
 
   logsOpened = signal(false);
   logs = this.store.selectSignal(LogsSelectors.selectLogs);
   namespaces = this.store.selectSignal(TopologySelectors.selectNamespaces);
 
+  namespaceContextMenuItems: SbbMenuItem<Namespace>[] = [
+    {
+      label: 'Remove Namespace',
+      onSelect(data: Namespace, event: MenuItemCommandEvent) {
+        console.log(data, event);
+      },
+    },
+  ];
+
   toggleLogs() {
     this.logsOpened.update((value) => !value);
   }
@@ -58,7 +68,11 @@ export class AppComponent {
     console.log($event);
   }
 
-  onSubscriptionSelected($event: { namespaceId: string; topicId: string, subscription: Subscription }) {
+  onSubscriptionSelected($event: {
+    namespaceId: string;
+    topicId: string;
+    subscription: Subscription;
+  }) {
     console.log($event);
   }
 }
diff --git a/libs/service-bus/clients/src/lib/administration-client.ts b/libs/service-bus/clients/src/lib/administration-client.ts
@@ -28,6 +28,7 @@ export class AdministrationClient {
       const runtimeProps = await administrationClient.getQueueRuntimeProperties(queue.name);
 
       queues.push({
+        namespaceId: this.connection.id,
         id: queue.name,
         name: queue.name,
         messageCount: runtimeProps.activeMessageCount,
@@ -46,6 +47,7 @@ export class AdministrationClient {
 
     for await (const topic of topicsPages) {
       topics.push({
+        namespaceId: this.connection.id,
         id: topic.name,
         name: topic.name,
       });
@@ -63,6 +65,8 @@ export class AdministrationClient {
       const runtimeProps = await administrationClient.getSubscriptionRuntimeProperties(topicId, subscription.subscriptionName);
 
       subscriptions.push({
+        namespaceId: this.connection.id,
+        topicId: topicId,
         id: subscription.subscriptionName,
         name: subscription.subscriptionName,
         messageCount: runtimeProps.activeMessageCount,

diff --git a/libs/shared/contracts/src/index.ts b/libs/shared/contracts/src/index.ts
@@ -1,2 +1,3 @@
 export * from './lib/uuid';
 export * from './lib/problem';
+export * from './lib/sbb-menu-item';
diff --git a/libs/shared/contracts/src/lib/sbb-menu-item.ts b/libs/shared/contracts/src/lib/sbb-menu-item.ts
@@ -0,0 +1,6 @@
+import { MenuItem } from 'primeng/api';
+import { MenuItemCommandEvent } from 'primeng/api/menuitem';
+
+export interface SbbMenuItem<T> extends MenuItem {
+  onSelect?(data: T, event: MenuItemCommandEvent): void
+}
diff --git a/libs/topology/components/src/lib/namespace-tree-node/namespace-tree-node.component.html b/libs/topology/components/src/lib/namespace-tree-node/namespace-tree-node.component.html
@@ -1 +1,11 @@
-<span class="name" [pTooltip]="namespace().name"><fa-icon [icon]="icon"></fa-icon> {{ namespace().name }}</span>
+<div class="line-container" #ns>
+  <span class="name" [pTooltip]="namespace().name"><fa-icon [icon]="icon"></fa-icon> {{ namespace().name }}</span>
+</div>
+@if (contextMenuItems()) {
+  <p-contextmenu
+    [target]="ns"
+    [model]="modifiedContextMenuItems() ?? []"
+    appendTo="body"
+  >
+  </p-contextmenu>
+}
diff --git a/libs/topology/components/src/lib/namespace-tree-node/namespace-tree-node.component.scss b/libs/topology/components/src/lib/namespace-tree-node/namespace-tree-node.component.scss
@@ -1,4 +1,9 @@
 :host {
+  display: block;
+  width: 100%;
+}
+
+.line-container {
   display: flex;
   width: 100%;
   flex-direction: row;

diff --git a/libs/topology/components/src/lib/namespace-tree-node/namespace-tree-node.component.ts b/libs/topology/components/src/lib/namespace-tree-node/namespace-tree-node.component.ts
@@ -1,17 +1,34 @@
-import { Component, input } from '@angular/core';
+import { Component, computed, input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Namespace } from '@service-bus-browser/topology-contracts';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { faServer } from '@fortawesome/free-solid-svg-icons';
 import { Tooltip } from 'primeng/tooltip';
+import { ContextMenu } from 'primeng/contextmenu';
+import { SbbMenuItem } from '@service-bus-browser/shared-contracts';
+import { MenuItemCommandEvent } from 'primeng/api/menuitem';
 
 @Component({
   selector: 'sbb-tpl-namespace-tree-node',
-  imports: [CommonModule, FaIconComponent, Tooltip],
+  imports: [CommonModule, FaIconComponent, Tooltip, ContextMenu],
   templateUrl: './namespace-tree-node.component.html',
   styleUrl: './namespace-tree-node.component.scss',
 })
 export class NamespaceTreeNodeComponent {
   namespace = input.required<Namespace>();
   icon = faServer;
+  contextMenuItems = input<SbbMenuItem<Namespace>[]>();
+  modifiedContextMenuItems = computed(() => {
+    return this.contextMenuItems()?.map((item) => {
+      return {
+        ...item,
+        command: (event: MenuItemCommandEvent) => this.onSelect(event, item),
+      };
+    });
+  })
+
+
+  onSelect(event: MenuItemCommandEvent, menuItem: SbbMenuItem<Namespace>) {
+    menuItem.onSelect?.(this.namespace(), event);
+  }
 }
diff --git a/libs/topology/components/src/lib/queue-tree-node/queue-tree-node.component.html b/libs/topology/components/src/lib/queue-tree-node/queue-tree-node.component.html
@@ -1,2 +1,11 @@
+<div class="line-container" #q>
 <span class="name" [pTooltip]="queue().name"><fa-icon [icon]="icon"></fa-icon> {{ queue().name }}</span>
 <span class="counters">({{queue().messageCount}},{{queue().deadLetterMessageCount}},{{queue().transferDeadLetterMessageCount}})</span>
+</div>
+@if (contextMenuItems()) {
+  <p-contextmenu
+    [target]="q"
+    [model]="contextMenuItems() ?? []"
+    appendTo="body"
+  ></p-contextmenu>
+}
diff --git a/libs/topology/components/src/lib/queue-tree-node/queue-tree-node.component.scss b/libs/topology/components/src/lib/queue-tree-node/queue-tree-node.component.scss
@@ -1,4 +1,9 @@
 :host {
+  display: block;
+  width: 100%;
+}
+
+.line-container {
   display: flex;
   width: 100%;
   flex-direction: row;

diff --git a/libs/topology/components/src/lib/queue-tree-node/queue-tree-node.component.ts b/libs/topology/components/src/lib/queue-tree-node/queue-tree-node.component.ts
@@ -4,14 +4,17 @@ import { Queue } from '@service-bus-browser/topology-contracts';
 import { faFolder } from '@fortawesome/free-solid-svg-icons';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { Tooltip } from 'primeng/tooltip';
+import { ContextMenu } from 'primeng/contextmenu';
+import { MenuItem } from 'primeng/api';
 
 @Component({
   selector: 'sbb-tpl-queue-tree-node',
-  imports: [CommonModule, FaIconComponent, Tooltip],
+  imports: [CommonModule, FaIconComponent, Tooltip, ContextMenu],
   templateUrl: './queue-tree-node.component.html',
   styleUrl: './queue-tree-node.component.scss',
 })
 export class QueueTreeNodeComponent {
   queue = input.required<Queue>();
   icon = faFolder;
+  contextMenuItems = input<MenuItem[]>();
 }
diff --git a/.../topology/components/src/lib/subscription-tree-node/subscription-tree-node.component.html b/.../topology/components/src/lib/subscription-tree-node/subscription-tree-node.component.html
@@ -1,2 +1,12 @@
-<span class="name" [pTooltip]="subscription().name"><fa-icon [icon]="icon"></fa-icon> {{ subscription().name }}</span>
-<span>({{subscription().messageCount}},{{subscription().deadLetterMessageCount}},{{subscription().transferDeadLetterMessageCount}})</span>
+<div class="line-container" #sub>
+  <span class="name" [pTooltip]="subscription().name"><fa-icon [icon]="icon"></fa-icon> {{ subscription().name }}</span>
+  <span>({{subscription().messageCount}},{{subscription().deadLetterMessageCount}},{{subscription().transferDeadLetterMessageCount}})</span>
+</div>
+
+@if (contextMenuItems()) {
+  <p-contextmenu
+    [target]="sub"
+    [model]="contextMenuItems() ?? []"
+    appendTo="body"
+  ></p-contextmenu>
+}
diff --git a/.../topology/components/src/lib/subscription-tree-node/subscription-tree-node.component.scss b/.../topology/components/src/lib/subscription-tree-node/subscription-tree-node.component.scss
@@ -1,4 +1,9 @@
 :host {
+  display: block;
+  width: 100%;
+}
+
+.line-container {
   display: flex;
   width: 100%;
   flex-direction: row;

diff --git a/libs/topology/components/src/lib/subscription-tree-node/subscription-tree-node.component.ts b/libs/topology/components/src/lib/subscription-tree-node/subscription-tree-node.component.ts
@@ -4,14 +4,17 @@ import { Subscription } from '@service-bus-browser/topology-contracts';
 import { faFolder } from '@fortawesome/free-regular-svg-icons';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { Tooltip } from 'primeng/tooltip';
+import { MenuItem } from 'primeng/api';
+import { ContextMenu } from 'primeng/contextmenu';
 
 @Component({
   selector: 'sbb-tpl-subscription-tree-node',
-  imports: [CommonModule, FaIconComponent, Tooltip],
+  imports: [CommonModule, FaIconComponent, Tooltip, ContextMenu],
   templateUrl: './subscription-tree-node.component.html',
   styleUrl: './subscription-tree-node.component.scss',
 })
 export class SubscriptionTreeNodeComponent {
   subscription = input.required<Subscription>();
   icon = faFolder;
+  contextMenuItems = input<MenuItem[]>();
 }
diff --git a/libs/topology/components/src/lib/topic-tree-node/topic-tree-node.component.html b/libs/topology/components/src/lib/topic-tree-node/topic-tree-node.component.html
@@ -1 +1,12 @@
-<span class="name" [pTooltip]="topic().name"><fa-icon [icon]="icon"></fa-icon> {{ topic().name }}</span>
+<div class="line-container" #t>
+  <span class="name" [pTooltip]="topic().name"><fa-icon [icon]="icon"></fa-icon> {{ topic().name }}</span>
+  <p-button icon="pi pi-refresh" [rounded]="true" [text]="true" (click)="refresh($event)"/>
+</div>
+
+@if (contextMenuItems()) {
+  <p-contextmenu
+    [target]="t"
+    [model]="contextMenuItems() ?? []"
+    appendTo="body"
+  ></p-contextmenu>
+}
diff --git a/libs/topology/components/src/lib/topic-tree-node/topic-tree-node.component.scss b/libs/topology/components/src/lib/topic-tree-node/topic-tree-node.component.scss
@@ -1,9 +1,15 @@
 :host {
+  display: block;
+  width: 100%;
+}
+
+.line-container {
   display: flex;
   width: 100%;
   flex-direction: row;
   justify-content: space-between;
   overflow: hidden;
+  --p-button-icon-only-width: 1.5rem;
 }
 
 span {

diff --git a/libs/topology/components/src/lib/topic-tree-node/topic-tree-node.component.ts b/libs/topology/components/src/lib/topic-tree-node/topic-tree-node.component.ts
@@ -1,17 +1,28 @@
-import { Component, input } from '@angular/core';
+import { Component, input, output } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Topic } from '@service-bus-browser/topology-contracts';
 import { faFolderTree } from '@fortawesome/free-solid-svg-icons';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { Tooltip } from 'primeng/tooltip';
+import { Button } from 'primeng/button';
+import { ContextMenu } from 'primeng/contextmenu';
+import { MenuItem } from 'primeng/api';
 
 @Component({
   selector: 'sbb-tpl-topic-tree-node',
-  imports: [CommonModule, FaIconComponent, Tooltip],
+  imports: [CommonModule, FaIconComponent, Tooltip, Button, ContextMenu],
   templateUrl: './topic-tree-node.component.html',
   styleUrl: './topic-tree-node.component.scss',
 })
 export class TopicTreeNodeComponent {
   topic = input.required<Topic>();
   icon = faFolderTree;
+
+  refreshTopic = output<Topic>();
+  contextMenuItems = input<MenuItem[]>();
+
+  refresh($event: MouseEvent) {
+    this.refreshTopic.emit(this.topic());
+    $event.stopPropagation();
+  }
 }
diff --git a/libs/topology/components/src/lib/topology-tree/topology-tree.component.html b/libs/topology/components/src/lib/topology-tree/topology-tree.component.html
@@ -8,15 +8,27 @@
     <b>{{ node.label }}</b>
   </ng-template>
   <ng-template let-node pTemplate="namespace">
-    <sbb-tpl-namespace-tree-node [namespace]="node.data" />
+    <sbb-tpl-namespace-tree-node [namespace]="node.data" [contextMenuItems]="namespaceContextMenuItems()" />
+  </ng-template>
+  <ng-template let-node pTemplate="queues">
+    <div class="category-divider">
+      <span class="name">{{ node.label }}</span>
+      <p-button icon="pi pi-refresh" [rounded]="true" [text]="true" (click)="refreshQueues($event, node.data)"/>
+    </div>
+  </ng-template>
+  <ng-template let-node pTemplate="topics">
+    <div class="category-divider">
+      <span class="name">{{ node.label }}</span>
+      <p-button icon="pi pi-refresh" [rounded]="true" [text]="true" (click)="refreshTopics($event, node.data)"/>
+    </div>
   </ng-template>
   <ng-template let-node pTemplate="queue">
-    <sbb-tpl-queue-tree-node [queue]="node.data.queue" />
+    <sbb-tpl-queue-tree-node [contextMenuItems]="queueContextMenu()" [queue]="node.data.queue" />
   </ng-template>
   <ng-template let-node pTemplate="topic">
-    <sbb-tpl-topic-tree-node [topic]="node.data.topic" />
+    <sbb-tpl-topic-tree-node [contextMenuItems]="topicContextMenu()" [topic]="node.data.topic" (refreshTopic)="refreshSubscriptions($event.namespaceId, $event.id)" />
   </ng-template>
   <ng-template let-node pTemplate="subscription">
-    <sbb-tpl-subscription-tree-node [subscription]="node.data.subscription" />
+    <sbb-tpl-subscription-tree-node [contextMenuItems]="subscriptionContextMenu()" [subscription]="node.data.subscription" />
   </ng-template>
 </p-tree>
diff --git a/libs/topology/components/src/lib/topology-tree/topology-tree.component.scss b/libs/topology/components/src/lib/topology-tree/topology-tree.component.scss
@@ -24,3 +24,12 @@ p-tree {
   --p-tree-node-padding: 0;
   --p-tree-indent: 28px;
 }
+
+.category-divider {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  --p-button-icon-only-width: 1.5rem;
+}