Added Queue information

mligtenberg · Jan 10, 2025 · 92eae14 · 92eae14
1 parent 462f482
commit 92eae14
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 69 deletions.
diff --git a/libs/messages/flow/src/lib/messages-page/messages-page.component.scss b/libs/messages/flow/src/lib/messages-page/messages-page.component.scss
@@ -25,11 +25,11 @@
   padding: 1rem;
   width: 100cqw;
 
-  @container mainContent (min-width: 1px) {
+  @container mainContent (width > 1px) {
     width: 100cqw;
   }
 
-  @container mainContent (max-width: 900px) {
+  @container mainContent (width < 900px) {
     grid-template-areas:
     'messages'
     'body'

diff --git a/libs/topology/manage-flow/src/lib/queue-management/queue-management.component.html b/libs/topology/manage-flow/src/lib/queue-management/queue-management.component.html
@@ -92,6 +92,25 @@
       <label for="requiresSession">Requires session</label>
     </div>
   </p-card>
+
+  @if (action() === 'modify') {
+    <p-card class="information" header="Queue Information">
+      <p-table [columns]="informationCols" [value]="currentQueueInformation()" [scrollable]="true">
+        <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex" let-columns="columns">
+          <tr style="height:30px">
+            <td *ngFor="let col of columns">
+              @if (isDate(rowData[col.field])) {
+                {{ rowData[col.field] | date: 'medium' }}
+              } @else {
+                {{ rowData[col.field] }}
+              }
+            </td>
+          </tr>
+        </ng-template>
+      </p-table>
+    </p-card>
+  }
+
   <div class="actions">
     <button pButton type="button" (click)="save()" [disabled]="form.invalid">Save</button>
   </div>

diff --git a/libs/topology/manage-flow/src/lib/queue-management/queue-management.component.scss b/libs/topology/manage-flow/src/lib/queue-management/queue-management.component.scss
@@ -24,19 +24,10 @@ form {
   grid-template-areas:
     'name settings'
     'properties settings'
-    'properties .'
+    'properties information'
     'actions actions';
   grid-template-columns: 3fr 2fr;
 
-  @media (max-width: 1024px) {
-    grid-template-areas:
-    'name'
-    'settings'
-    'properties'
-    'actions';
-    grid-template-columns: 1fr;
-  }
-
   .name {
     grid-area: name;
   }
@@ -49,12 +40,25 @@ form {
     grid-area: settings;
   }
 
+  .information {
+    grid-area: information;
+  }
+
   .actions {
     grid-area: actions;
     display: flex;
     justify-content: flex-end;
     gap: 0.5rem;
   }
+
+  @container mainContent (width < 900px) {
+    grid-template-areas:
+    'name actions'
+    'settings settings'
+    'properties properties'
+    'information information';
+    grid-template-columns: 1fr;
+  }
 }
 
 .checkbox {

diff --git a/libs/topology/manage-flow/src/lib/queue-management/queue-management.component.ts b/libs/topology/manage-flow/src/lib/queue-management/queue-management.component.ts
@@ -1,4 +1,4 @@
-import { Component, inject, OnDestroy } from '@angular/core';
+import { Component, computed, inject, OnDestroy, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ActivatedRoute } from '@angular/router';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
@@ -8,7 +8,7 @@ import {
   TopologyActions,
   TopologySelectors,
 } from '@service-bus-browser/topology-store';
-import { combineLatest, Subject, takeUntil } from 'rxjs';
+import { combineLatest, map, of, Subject, switchMap } from 'rxjs';
 import { UUID } from '@service-bus-browser/shared-contracts';
 import { DurationInputComponent } from '@service-bus-browser/shared-components';
 import { Card } from 'primeng/card';
@@ -19,7 +19,9 @@ import { Textarea } from 'primeng/textarea';
 import { EndpointSelectorInputComponent } from '@service-bus-browser/topology-components';
 import { Checkbox } from 'primeng/checkbox';
 import { ButtonDirective } from 'primeng/button';
-import { Queue } from '@service-bus-browser/topology-contracts';
+import { Queue, QueueWithMetaData } from '@service-bus-browser/topology-contracts';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { TableModule } from 'primeng/table';
 
 @Component({
   selector: 'lib-queue-management',
@@ -35,64 +37,95 @@ import { Queue } from '@service-bus-browser/topology-contracts';
     EndpointSelectorInputComponent,
     Checkbox,
     ButtonDirective,
+    TableModule,
   ],
   templateUrl: './queue-management.component.html',
   styleUrl: './queue-management.component.scss',
 })
-export class QueueManagementComponent implements OnDestroy {
-  destroy$ = new Subject<void>();
+export class QueueManagementComponent {
   newParams$ = new Subject<void>();
   activeRoute = inject(ActivatedRoute);
   store = inject(Store);
   form = this.createForm();
-  action: 'create' | 'modify' = 'create';
+  action = signal<'create' | 'modify'>('create');
+  currentQueue = signal<QueueWithMetaData | undefined>(undefined);
+  currentQueueInformation = computed(() => {
+    const queue = this.currentQueue();
+    if (!queue) {
+      return [];
+    }
+
+    return Object.entries(queue.metadata).map(([key, value]) => ({
+      key,
+      value,
+    }));
+  });
+  informationCols = [
+    { field: 'key', header: 'Key' },
+    { field: 'value', header: 'Value' },
+  ]
 
   constructor() {
     combineLatest([this.activeRoute.params, this.activeRoute.data])
-      .pipe(takeUntil(this.destroy$))
-      .subscribe(([ params, data ]) => {
-        this.action = data['action'] as 'create' | 'modify';
+      .pipe(
+        takeUntilDestroyed(),
+        switchMap(([params, data]) => {
+          const action = data['action'] as 'create' | 'modify';
+
+          const namespaceId = params['namespaceId'] as UUID | undefined;
+          const queueId = params['queueId'] as string | undefined;
+
+          if (namespaceId === undefined) {
+            throw new Error('Namespace ID is required');
+          }
+
+          if (action === 'create') {
+            return of({ action: 'create', queue: undefined });
+          }
+
+          this.newParams$.next();
+          this.newParams$.complete();
+          this.newParams$ = new Subject<void>();
+
+          // new queue form
+          if (!queueId) {
+            throw new Error('Queue ID is required for modify action');
+          }
+          this.configureFormAsEdit();
+
+          return this.store
+            .select(TopologySelectors.selectQueueById(namespaceId, queueId))
+            .pipe(
+              map((queue) => ({
+                action: 'modify',
+                queue,
+              }))
+            );
+        })
+      )
+      .subscribe(({ action, queue }) => {
         this.form = this.createForm();
+        this.action.set(action as 'create' | 'modify');
+        this.currentQueue.set(queue);
 
-        const namespaceId = params['namespaceId'] as UUID | undefined;
-        const queueId = params['queueId'] as string | undefined;
-
-        if (namespaceId === undefined) {
-          throw new Error('Namespace ID is required');
-        }
-
-        if (this.action === 'create') {
+        if (action === 'create') {
           this.configureFormAsCreate();
           return;
         }
 
-        this.newParams$.next();
-        this.newParams$.complete();
-        this.newParams$ = new Subject<void>();
-
-        // new queue form
-        if (!queueId) {
-          throw new Error('Queue ID is required for modify action');
-        }
         this.configureFormAsEdit();
+        if (!queue) {
+          return;
+        }
 
-        this.store
-          .select(TopologySelectors.selectQueueById(namespaceId, queueId))
-          .pipe(takeUntil(this.newParams$), takeUntil(this.destroy$))
-          .subscribe((queue) => {
-            if (!queue) {
-              return;
-            }
-
-            this.form.setValue(
-              {
-                name: queue.name,
-                properties: queue.properties,
-                settings: queue.settings,
-              },
-              { emitEvent: false }
-            );
-          });
+        this.form.setValue(
+          {
+            name: queue.name,
+            properties: queue.properties,
+            settings: queue.settings,
+          },
+          { emitEvent: false }
+        );
       });
   }
 
@@ -113,11 +146,6 @@ export class QueueManagementComponent implements OnDestroy {
     this.form.controls.properties.controls.autoDeleteOnIdle.enable();
   }
 
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
   save(): void {
     if (this.form.invalid) {
       return;
@@ -132,30 +160,36 @@ export class QueueManagementComponent implements OnDestroy {
       properties: {
         lockDuration: formValue.properties.lockDuration ?? '',
         maxSizeInMegabytes: formValue.properties.maxSizeInMegabytes ?? 0,
-        defaultMessageTimeToLive: formValue.properties.defaultMessageTimeToLive ?? '',
-        duplicateDetectionHistoryTimeWindow: formValue.properties.duplicateDetectionHistoryTimeWindow ?? '',
+        defaultMessageTimeToLive:
+          formValue.properties.defaultMessageTimeToLive ?? '',
+        duplicateDetectionHistoryTimeWindow:
+          formValue.properties.duplicateDetectionHistoryTimeWindow ?? '',
         maxDeliveryCount: formValue.properties.maxDeliveryCount ?? 0,
         userMetadata: formValue.properties.userMetadata ?? null,
         autoDeleteOnIdle: formValue.properties.autoDeleteOnIdle ?? '',
         forwardMessagesTo: formValue.properties.forwardMessagesTo ?? null,
-        forwardDeadLetteredMessagesTo: formValue.properties.forwardDeadLetteredMessagesTo ?? null,
+        forwardDeadLetteredMessagesTo:
+          formValue.properties.forwardDeadLetteredMessagesTo ?? null,
       },
       settings: {
-        requiresDuplicateDetection: formValue.settings.requiresDuplicateDetection ?? false,
+        requiresDuplicateDetection:
+          formValue.settings.requiresDuplicateDetection ?? false,
         requiresSession: formValue.settings.requiresSession ?? false,
-        deadLetteringOnMessageExpiration: formValue.settings.deadLetteringOnMessageExpiration ?? false,
-        enableBatchedOperations: formValue.settings.enableBatchedOperations ?? false,
+        deadLetteringOnMessageExpiration:
+          formValue.settings.deadLetteringOnMessageExpiration ?? false,
+        enableBatchedOperations:
+          formValue.settings.enableBatchedOperations ?? false,
         enableExpress: formValue.settings.enableExpress ?? false,
         enablePartitioning: formValue.settings.enablePartitioning ?? false,
       },
-    }
+    };
 
     // save queue
-    if (this.action === 'create') {
+    if (this.action() === 'create') {
       this.store.dispatch(
         TopologyActions.addQueue({
           namespaceId: this.activeRoute.snapshot.params['namespaceId'],
-          queue: queue
+          queue: queue,
         })
       );
       return;
@@ -165,11 +199,15 @@ export class QueueManagementComponent implements OnDestroy {
     this.store.dispatch(
       TopologyActions.editQueue({
         namespaceId: this.activeRoute.snapshot.params['namespaceId'],
-        queue: queue
+        queue: queue,
       })
     );
   }
 
+  isDate(value: unknown): boolean {
+    return value instanceof Date;
+  }
+
   private createForm() {
     return new FormGroup<QueueForm>({
       name: new FormControl<string>('', {
@@ -211,4 +249,6 @@ export class QueueManagementComponent implements OnDestroy {
       }),
     });
   }
+
+  protected readonly Date = Date;
 }