load namespace queues topic subscriptions + styling

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

@@ -2,13 +2,15 @@
 <p-splitter [panelSizes]="[25,75]" class="main-splitter">
   <ng-template pTemplate>
     <div class="sidebar">
-      <sbb-tpl-topology-tree
-        [namespaces]="namespaces()"
-        (namespaceSelected)="onNamespaceSelected($event)"
-        (queueSelected)="onQueueSelected($event)"
-        (topicSelected)="onTopicSelected($event)"
-        (subscriptionSelected)="onSubscriptionSelected($event)"
-      />
+      <p-scroll-panel>
+        <sbb-tpl-topology-tree
+          [namespaces]="namespaces()"
+          (namespaceSelected)="onNamespaceSelected($event)"
+          (queueSelected)="onQueueSelected($event)"
+          (topicSelected)="onTopicSelected($event)"
+          (subscriptionSelected)="onSubscriptionSelected($event)"
+        />
+      </p-scroll-panel>
     </div>
   </ng-template>
   <ng-template pTemplate>

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

@@ -14,6 +14,7 @@
 
   .main-splitter {
     flex: 1;
+    height: calc(100% - 32px);
 
     .p-splitter {
       border: none;
@@ -25,6 +26,10 @@
   .sidebar {
     width: 100%;
     height: 100%;
+
+    .p-scrollpanel {
+      height: 100%;
+    }
   }
 
   .main-content {

libs/connections/store/src/lib/connections.effects.ts

@@ -3,14 +3,17 @@ import { Actions, createEffect, ofType } from '@ngrx/effects';
 import * as actions from './connections.actions';
 import * as internalActions from './connections.internal-actions';
 import { ServiceBusElectronClient } from '@service-bus-browser/service-bus-electron-client';
-import { from, map, switchMap } from 'rxjs';
+import { from, map, switchMap, tap } from 'rxjs';
+import { Logger } from '@service-bus-browser/logs-services';
+import { TopologyActions } from '@service-bus-browser/topology-store';
 
 @Injectable({
   providedIn: 'root'
 })
 export class ConnectionsEffects {
   actions$ = inject(Actions);
   serviceBusClient = inject(ServiceBusElectronClient);
+  logger = inject(Logger);
 
   addConnection$ = createEffect(
     () => this.actions$.pipe(
@@ -21,11 +24,23 @@ export class ConnectionsEffects {
     ),
   )
 
+  reloadOnConnectionAdded$ = createEffect(
+    () => this.actions$.pipe(
+      ofType(internalActions.connectionAdded),
+      map(() => TopologyActions.loadNamespaces())
+    ),
+  )
+
   testConnection$ = createEffect(
     () => this.actions$.pipe(
       ofType(actions.checkConnection),
       switchMap(({ connection }) => from(this.serviceBusClient.checkConnection(connection)).pipe(
-
+        tap(result => {
+          if (result) {
+            this.logger.info('Connection test succeeded', connection);
+          } else {
+            this.logger.error('Connection test failed', connection);
+          }})
       )),
     ),
     { dispatch: false }

libs/logs/services/README.md

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

libs/logs/services/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: 'lib',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'lib',
+          style: 'kebab-case',
+        },
+      ],
+    },
+  },
+  {
+    files: ['**/*.html'],
+    // Override or add rules here
+    rules: {},
+  },
+];

libs/logs/services/jest.config.ts

@@ -0,0 +1,21 @@
+export default {
+  displayName: '@service-bus-browser/logs-services',
+  preset: '../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../../coverage/libs/logs/services',
+  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/logs/services/project.json

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

libs/logs/services/src/index.ts

@@ -0,0 +1 @@
+export { Logger } from './lib/logger';

libs/logs/services/src/lib/logger.ts

@@ -0,0 +1,39 @@
+import { inject, Injectable } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { LogLineSeverity } from '@service-bus-browser/logs-contracts';
+import { LogsActions } from '@service-bus-browser/logs-store';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class Logger {
+  store = inject(Store);
+
+  log(message: string, severity: LogLineSeverity, context?: unknown) {
+    this.store.dispatch(LogsActions.writeLog({
+      context,
+      message,
+      severity
+    }));
+  }
+
+  verbose(message: string, context?: unknown) {
+    this.log(message, 'verbose', context);
+  }
+
+  info(message: string, context?: unknown) {
+    this.log(message, 'info', context);
+  }
+
+  warn(message: string, context?: unknown) {
+    this.log(message, 'warn', context);
+  }
+
+  error(message: string, context?: unknown) {
+    this.log(message, 'error', context);
+  }
+
+  critical(message: string, context?: unknown) {
+    this.log(message, 'critical', context);
+  }
+}

libs/logs/services/src/test-setup.ts

@@ -0,0 +1,6 @@
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv({
+  errorOnUnknownElements: true,
+  errorOnUnknownProperties: true,
+});

libs/logs/services/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

libs/logs/services/tsconfig.lib.json

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/test-setup.ts",
+    "jest.config.ts",
+    "src/**/*.test.ts"
+  ],
+  "include": ["src/**/*.ts"]
+}

libs/logs/services/tsconfig.spec.json

@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "target": "es2016",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}

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

@@ -1,7 +1,11 @@
 import { createAction, props } from '@ngrx/store';
-import { LogLine } from '@service-bus-browser/logs-contracts';
+import { LogLineSeverity } from '@service-bus-browser/logs-contracts';
 
 export const writeLog = createAction(
   '[Logs] Write a log line',
-  props<{ log: LogLine }>()
+  props<{
+    severity: LogLineSeverity;
+    message: string;
+    context?: unknown;
+  }>()
 );

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

@@ -1,4 +1,4 @@
-import { LogLine, LogLineSeverity } from '@service-bus-browser/logs-contracts';
+import { LogLine } from '@service-bus-browser/logs-contracts';
 import { createFeature, createReducer, on } from '@ngrx/store';
 import { writeLog } from './logs.actions';
 
@@ -9,35 +9,19 @@ export type LogsState = {
 }
 
 export const initialState: LogsState = {
-  logs: Array.from({ length: 100000 }, (_, index) => {
-    const severity = Math.random();
-    let severityString: LogLineSeverity = 'verbose';
-    if (severity > 0.2) {
-      severityString = 'info';
-    }
-    if (severity > 0.4) {
-      severityString = 'warn';
-    }
-    if (severity > 0.6) {
-      severityString = 'error';
-    }
-    if (severity > 0.8) {
-      severityString = 'critical';
-    }
-
-    return {
-      loggedAt: new Date(),
-      message: `Log message ${index + 1}`,
-      severity: severityString
-    }
-  })
+  logs: []
 };
 
 export const logsReducer = createReducer(
   initialState,
-  on(writeLog, (state, { log }) => {
+  on(writeLog, (state, { severity, message, context }) => {
     return {
-      logs: [...state.logs, log]
+      logs: [...state.logs, {
+        severity,
+        message,
+        context,
+        loggedAt: new Date()
+      }],
     };
   })
 );

libs/service-bus/clients/src/lib/administration-client.ts

@@ -7,11 +7,16 @@ export class AdministrationClient {
   }
 
   async checkConnection(): Promise<boolean> {
-    const administrationClient = this.getAdministrationClient();
-    const queuesPages = administrationClient.listQueues();
-    const queues = await queuesPages.next();
+   try {
+     const administrationClient = this.getAdministrationClient();
+     const queuesPages = administrationClient.listQueues();
+     const queues = await queuesPages.next();
 
-    return !!queues.value;
+     return !!queues.value;
+   }
+    catch {
+      return false;
+    }
   }
 
   async getQueues(): Promise<Queue[]> {
@@ -49,13 +54,13 @@ export class AdministrationClient {
     return topics;
   }
 
-  async getSubscriptions(topicName: string): Promise<Subscription[]> {
+  async getSubscriptions(topicId: string): Promise<Subscription[]> {
     const administrationClient = this.getAdministrationClient();
-    const subscriptionsPages = administrationClient.listSubscriptions(topicName);
+    const subscriptionsPages = administrationClient.listSubscriptions(topicId);
     const subscriptions: Subscription[] = [];
 
     for await (const subscription of subscriptionsPages) {
-      const runtimeProps = await administrationClient.getSubscriptionRuntimeProperties(topicName, subscription.subscriptionName);
+      const runtimeProps = await administrationClient.getSubscriptionRuntimeProperties(topicId, subscription.subscriptionName);
 
       subscriptions.push({
         id: subscription.subscriptionName,