Added basic queue tree

apps/servicebus-browser-frontend/src/app/app.component.html

@@ -1,7 +1,15 @@
 <p-menubar class="main-menu" [model]="items" breakpoint="100px" />
 <p-splitter [panelSizes]="[25,75]" class="main-splitter">
   <ng-template pTemplate>
-    <div class="flex items-center justify-center h-full">Menu</div>
+    <div class="sidebar">
+      <sbb-tpl-topology-tree
+        [namespaces]="namespaces()"
+        (namespaceSelected)="onNamespaceSelected($event)"
+        (queueSelected)="onQueueSelected($event)"
+        (topicSelected)="onTopicSelected($event)"
+        (subscriptionSelected)="onSubscriptionSelected($event)"
+      />
+    </div>
   </ng-template>
   <ng-template pTemplate>
     <div class="main-content">

apps/servicebus-browser-frontend/src/app/app.component.scss

@@ -22,6 +22,11 @@
     }
   }
 
+  .sidebar {
+    width: 100%;
+    height: 100%;
+  }
+
   .main-content {
     width: 100%;
     height: 100%;

apps/servicebus-browser-frontend/src/app/app.component.ts

@@ -8,6 +8,9 @@ import { Tab, TabList, Tabs } from 'primeng/tabs';
 import { LogsListComponent } from '@service-bus-browser/logs-components';
 import { Store } from '@ngrx/store';
 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';
 
 @Component({
   imports: [
@@ -20,6 +23,7 @@ import { LogsSelectors } from '@service-bus-browser/logs-store';
     Tabs,
     TabList,
     Tab,
+    TopologyTreeComponent,
   ],
   selector: 'app-root',
   templateUrl: './app.component.html',
@@ -29,40 +33,32 @@ export class AppComponent {
   title = 'servicebus-browser-frontend';
   items = [
     {
-      label: 'Home',
-      icon: 'pi pi-home',
-    },
-    {
-      label: 'Projects',
-      icon: 'pi pi-search',
-      items: [
-        {
-          label: 'Core',
-          icon: 'pi pi-bolt',
-          shortcut: '⌘+S',
-        },
-        {
-          label: 'Blocks',
-          icon: 'pi pi-server',
-          shortcut: '⌘+B',
-        },
-        {
-          separator: true,
-        },
-        {
-          label: 'UI Kit',
-          icon: 'pi pi-pencil',
-          shortcut: '⌘+U',
-        },
-      ],
-    },
+      label: 'Connections',
+    }
   ];
   store = inject(Store);
 
   logsOpened = signal(false);
   logs = this.store.selectSignal(LogsSelectors.selectLogs);
+  namespaces = this.store.selectSignal(TopologySelectors.selectNamespaces);
 
   toggleLogs() {
     this.logsOpened.update((value) => !value);
   }
+
+  onNamespaceSelected($event: { namespace: Namespace }) {
+    console.log($event);
+  }
+
+  onQueueSelected($event: { namespaceId: string; queue: Queue }) {
+    console.log($event);
+  }
+
+  onTopicSelected($event: { namespaceId: string; topic: Topic }) {
+    console.log($event);
+  }
+
+  onSubscriptionSelected($event: { namespaceId: string; topicId: string, subscription: Subscription }) {
+    console.log($event);
+  }
 }

apps/servicebus-browser-frontend/src/app/app.config.ts

@@ -7,6 +7,7 @@ import { theme } from './theme';
 import { provideLogsState } from '@service-bus-browser/logs-store';
 import { provideStore } from '@ngrx/store';
 import { provideStoreDevtools } from '@ngrx/store-devtools';
+import { provideTopologyState } from '@service-bus-browser/topology-store';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -25,6 +26,7 @@ export const appConfig: ApplicationConfig = {
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideRouter(appRoutes, withHashLocation()),
     provideLogsState(),
+    provideTopologyState(),
 
     // ngrx
     provideStore(),

libs/logs/components/src/lib/log-line/log-line.component.scss

@@ -1,7 +1,8 @@
 pre {
   --color: 'inherit';
   margin: 0;
-  font-size: 12px;
+  font-size: 14px;
+  line-height: 16px;
   padding: 4px 1rem;
   color: var(--color);
 }

libs/logs/components/src/lib/logs-list/logs-list.component.html

@@ -1,6 +1,6 @@
 <p-virtual-scroller
   [items]="logs()"
-  [itemSize]="20"
+  [itemSize]="24"
   scrollHeight="20rem"
 >
   <ng-template #item let-item let-options="options">

libs/logs/components/src/lib/logs-list/logs-list.component.scss

@@ -1,6 +1,5 @@
 sbb-logs-log-line {
   display: block;
-  height: 20px;
 
   &.odd {
     background: var(--p-surface-100);

libs/logs/store/src/lib/logs.store.ts

@@ -9,7 +9,7 @@ export type LogsState = {
 }
 
 export const initialState: LogsState = {
-  logs: Array.from({ length: 1000 }, (_, index) => {
+  logs: Array.from({ length: 100000 }, (_, index) => {
     const severity = Math.random();
     let severityString: LogLineSeverity = 'verbose';
     if (severity > 0.2) {

libs/topology/components/README.md

@@ -0,0 +1,7 @@
+# @service-bus-browser/topology-components
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test @service-bus-browser/topology-components` to execute the unit tests.

libs/topology/components/eslint.config.js

@@ -0,0 +1,34 @@
+const nx = require('@nx/eslint-plugin');
+const baseConfig = require('../../../eslint.config.js');
+
+module.exports = [
+  ...baseConfig,
+  ...nx.configs['flat/angular'],
+  ...nx.configs['flat/angular-template'],
+  {
+    files: ['**/*.ts'],
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'sbb-tpl',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'sbb-tpl',
+          style: 'kebab-case',
+        },
+      ],
+    },
+  },
+  {
+    files: ['**/*.html'],
+    // Override or add rules here
+    rules: {},
+  },
+];

libs/topology/components/jest.config.ts

@@ -0,0 +1,21 @@
+export default {
+  displayName: '@service-bus-browser/topology-components',
+  preset: '../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../../coverage/libs/topology/components',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

libs/topology/components/project.json

@@ -0,0 +1,20 @@
+{
+  "name": "@service-bus-browser/topology-components",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/topology/components/src",
+  "prefix": "sbb-tpl",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/topology/components/jest.config.ts"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    }
+  }
+}

libs/topology/components/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/topology-tree/topology-tree.component';

libs/topology/components/src/lib/namespace-tree-node/namespace-tree-node.component.html

@@ -0,0 +1 @@
+<span><fa-icon [icon]="icon"></fa-icon> {{ namespace().name }}</span>

libs/topology/components/src/lib/namespace-tree-node/namespace-tree-node.component.ts

@@ -0,0 +1,16 @@
+import { Component, 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';
+
+@Component({
+  selector: 'sbb-tpl-namespace-tree-node',
+  imports: [CommonModule, FaIconComponent],
+  templateUrl: './namespace-tree-node.component.html',
+  styleUrl: './namespace-tree-node.component.scss',
+})
+export class NamespaceTreeNodeComponent {
+  namespace = input.required<Namespace>();
+  icon = faServer;
+}

libs/topology/components/src/lib/queue-tree-node/queue-tree-node.component.html

@@ -0,0 +1,2 @@
+<span><fa-icon [icon]="icon"></fa-icon> {{ queue().name }}</span>
+<span>({{queue().messageCount}},{{queue().deadLetterMessageCount}},{{queue().transferDeadLetterMessageCount}})</span>

libs/topology/components/src/lib/queue-tree-node/queue-tree-node.component.scss

@@ -0,0 +1,6 @@
+:host {
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  justify-content: space-between;
+}

libs/topology/components/src/lib/queue-tree-node/queue-tree-node.component.ts

@@ -0,0 +1,16 @@
+import { Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Queue } from '@service-bus-browser/topology-contracts';
+import { faFolder } from '@fortawesome/free-solid-svg-icons';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+
+@Component({
+  selector: 'sbb-tpl-queue-tree-node',
+  imports: [CommonModule, FaIconComponent],
+  templateUrl: './queue-tree-node.component.html',
+  styleUrl: './queue-tree-node.component.scss',
+})
+export class QueueTreeNodeComponent {
+  queue = input.required<Queue>();
+  icon = faFolder;
+}

libs/topology/components/src/lib/subscription-tree-node/subscription-tree-node.component.html

@@ -0,0 +1,2 @@
+<span><fa-icon [icon]="icon"></fa-icon> {{ subscription().name }}</span>
+<span>({{subscription().messageCount}},{{subscription().deadLetterMessageCount}},{{subscription().transferDeadLetterMessageCount}})</span>

libs/topology/components/src/lib/subscription-tree-node/subscription-tree-node.component.scss

@@ -0,0 +1,6 @@
+:host {
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  justify-content: space-between;
+}

libs/topology/components/src/lib/subscription-tree-node/subscription-tree-node.component.ts

@@ -0,0 +1,16 @@
+import { Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Subscription } from '@service-bus-browser/topology-contracts';
+import { faFolder } from '@fortawesome/free-regular-svg-icons';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+
+@Component({
+  selector: 'sbb-tpl-subscription-tree-node',
+  imports: [CommonModule, FaIconComponent],
+  templateUrl: './subscription-tree-node.component.html',
+  styleUrl: './subscription-tree-node.component.scss',
+})
+export class SubscriptionTreeNodeComponent {
+  subscription = input.required<Subscription>();
+  icon = faFolder;
+}

libs/topology/components/src/lib/topic-tree-node/topic-tree-node.component.html

@@ -0,0 +1 @@
+<span><fa-icon [icon]="icon"></fa-icon> {{ topic().name }}</span>

libs/topology/components/src/lib/topic-tree-node/topic-tree-node.component.ts

@@ -0,0 +1,16 @@
+import { Component, input } 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';
+
+@Component({
+  selector: 'sbb-tpl-topic-tree-node',
+  imports: [CommonModule, FaIconComponent],
+  templateUrl: './topic-tree-node.component.html',
+  styleUrl: './topic-tree-node.component.scss',
+})
+export class TopicTreeNodeComponent {
+  topic = input.required<Topic>();
+  icon = faFolderTree;
+}

libs/topology/components/src/lib/topology-tree/topology-tree.component.html

@@ -0,0 +1,17 @@
+<p-tree [value]="nodes()" selectionMode="single" (selectionChange)="onSelectionChange($event)">
+  <ng-template let-node pTemplate="default">
+    <b>{{ node.label }}</b>
+  </ng-template>
+  <ng-template let-node pTemplate="namespace">
+    <sbb-tpl-namespace-tree-node [namespace]="node.data" />
+  </ng-template>
+  <ng-template let-node pTemplate="queue">
+    <sbb-tpl-queue-tree-node [queue]="node.data.queue" />
+  </ng-template>
+  <ng-template let-node pTemplate="topic">
+    <sbb-tpl-topic-tree-node [topic]="node.data.topic" />
+  </ng-template>
+  <ng-template let-node pTemplate="subscription">
+    <sbb-tpl-subscription-tree-node [subscription]="node.data.subscription" />
+  </ng-template>
+</p-tree>

libs/topology/components/src/lib/topology-tree/topology-tree.component.scss

@@ -0,0 +1,22 @@
+:host {
+  ::ng-deep .p-tree-node-label {
+    width: 100%;
+  }
+
+  ::ng-deep .p-tree-node-leaf .p-tree-node-toggle-button {
+    display: none;
+  }
+
+  ::ng-deep .p-tree-node-leaf {
+    line-height: 28px;
+    .p-tree-node-content {
+      padding: 0 0.4rem;
+    }
+  }
+}
+
+p-tree {
+  --p-tree-padding: 0rem;
+  --p-tree-node-padding: 0;
+  --p-tree-indent: 28px;
+}