Added logging system

apps/servicebus-browser-app/src/app/constants.ts

@@ -1,4 +1,4 @@
 export const rendererAppPort = 4200;
-export const rendererAppName = 'servicebus-browser'; // options.name.split('-')[0] + '-web'
-export const electronAppName = 'servicebus-browser';
+export const rendererAppName = 'Servicebus Browser'; // options.name.split('-')[0] + '-web'
+export const electronAppName = 'Servicebus Browser';
 export const updateServerUrl = 'https://deployment-server-url.com'; // TODO: insert your update server url here

apps/servicebus-browser-app/src/main.ts

@@ -1,8 +1,10 @@
 import SquirrelEvents from './app/events/squirrel.events';
 import ElectronEvents from './app/events/electron.events';
-import UpdateEvents from './app/events/update.events';
 import { app, BrowserWindow } from 'electron';
 import App from './app/app';
+import { installExtension, REDUX_DEVTOOLS } from 'electron-devtools-installer';
+
+
 
 export default class Main {
   static initialize() {
@@ -32,3 +34,13 @@ Main.initialize();
 // bootstrap app
 Main.bootstrapApp();
 Main.bootstrapAppEvents();
+
+if (App.isDevelopmentMode()) {
+  App.application.whenReady().then(() => {
+    installExtension(REDUX_DEVTOOLS)
+      .then((name) => console.log(`Added Extension:  ${name}`))
+      .catch((err) => console.log('An error occurred: ', err));
+
+    App.mainWindow.webContents.openDevTools();
+  });
+}

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

@@ -30,9 +30,7 @@
 
         @if (logsOpened()) {
           <div class="logs-content">
-            <p-scrollPanel>
-              <pre>tempt text this will be replaced by actual logs in a logs component</pre>
-            </p-scrollPanel>
+            <sbb-logs-list [logs]="logs()"></sbb-logs-list>
           </div>
         }
       </div>

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

@@ -1,16 +1,18 @@
-import { Component, signal } from '@angular/core';
+import { Component, inject, signal } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { Button } from 'primeng/button';
 import { Splitter } from 'primeng/splitter';
 import { PrimeTemplate } from 'primeng/api';
 import { Menubar } from 'primeng/menubar';
 import { ScrollPanel } from 'primeng/scrollpanel';
 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';
 
 @Component({
   imports: [
     RouterModule,
-    Button,
+    LogsListComponent,
     Splitter,
     PrimeTemplate,
     Menubar,
@@ -55,8 +57,10 @@ export class AppComponent {
       ],
     },
   ];
+  store = inject(Store);
 
   logsOpened = signal(false);
+  logs = this.store.selectSignal(LogsSelectors.selectLogs);
 
   toggleLogs() {
     this.logsOpened.update((value) => !value);

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

@@ -1,9 +1,12 @@
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { ApplicationConfig, isDevMode, provideZoneChangeDetection } from '@angular/core';
 import { provideRouter, withHashLocation } from '@angular/router';
 import { appRoutes } from './app.routes';
 import { providePrimeNG } from 'primeng/config';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { theme } from './theme';
+import { provideLogsState } from '@service-bus-browser/logs-store';
+import { provideStore } from '@ngrx/store';
+import { provideStoreDevtools } from '@ngrx/store-devtools';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -21,5 +24,14 @@ export const appConfig: ApplicationConfig = {
     // config
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideRouter(appRoutes, withHashLocation()),
+    provideLogsState(),
+
+    // ngrx
+    provideStore(),
+    provideStoreDevtools({
+      maxAge: 25,
+      logOnly: !
+        isDevMode(),
+    }),
   ],
 };

apps/servicebus-browser-frontend/src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>servicebus-browser-frontend</title>
+    <title>Servicebus Browser</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />

libs/logs/components/README.md

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

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

libs/logs/components/jest.config.ts

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

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

libs/logs/components/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/logs-list/logs-list.component'

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

@@ -0,0 +1,3 @@
+<pre
+  [style.--color]="logLineColor()"
+>{{logLine().loggedAt | date:'YYYY-MM-dd HH:mm:ss' }} - {{logLine().severity}}: {{logLine().message}}</pre>

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

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

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

@@ -0,0 +1,28 @@
+import { Component, input, computed } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LogLine } from '@service-bus-browser/logs-contracts';
+
+@Component({
+  selector: 'sbb-logs-log-line',
+  imports: [CommonModule],
+  templateUrl: './log-line.component.html',
+  styleUrl: './log-line.component.scss',
+})
+export class LogLineComponent {
+  logLine = input.required<LogLine>();
+  logLineColor = computed<string>(() => {
+    const logLevel = this.logLine().severity;
+    switch (logLevel) {
+      case 'info':
+        return 'var(--p-blue-400)';
+      case 'warn':
+        return 'var(--p-amber-500)';
+      case 'error':
+        return 'var(--p-red-400)';
+      case 'critical':
+        return 'var(--p-red-900)';
+      default:
+        return 'var(--p-slate-400)';
+    }
+  });
+}

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

@@ -0,0 +1,9 @@
+<p-virtual-scroller
+  [items]="logs()"
+  [itemSize]="20"
+  scrollHeight="20rem"
+>
+  <ng-template #item let-item let-options="options">
+    <sbb-logs-log-line [logLine]="item" [ngClass]="{'odd': options.index % 2 === 1}"></sbb-logs-log-line>
+  </ng-template>
+</p-virtual-scroller>

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

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

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

@@ -0,0 +1,15 @@
+import { Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LogLine } from '@service-bus-browser/logs-contracts';
+import { Scroller } from 'primeng/scroller';
+import { LogLineComponent } from '../log-line/log-line.component';
+
+@Component({
+  selector: 'sbb-logs-list',
+  imports: [CommonModule, Scroller, LogLineComponent],
+  templateUrl: './logs-list.component.html',
+  styleUrl: './logs-list.component.scss',
+})
+export class LogsListComponent {
+  logs = input.required<LogLine[]>();
+}

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

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

libs/logs/components/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/components/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/components/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/contract/src/lib/log-line.ts

@@ -1,5 +1,6 @@
+export type LogLineSeverity = 'verbose' | 'info' | 'warn' | 'error' | 'critical';
 export interface LogLine {
-  severity: 'verbose' | 'info' | 'warn' | 'error' | 'critical';
+  severity: LogLineSeverity;
   message: string;
   loggedAt: Date;
   context?: any;

libs/logs/store/src/index.ts

@@ -1 +1,15 @@
+import { EnvironmentProviders, Provider } from '@angular/core';
+import { provideState } from '@ngrx/store';
+import { logsFeature } from './lib/logs.store';
 
+export * as LogsActions from './lib/logs.actions';
+export * as LogsSelectors from './lib/logs.selectors';
+
+export function provideLogsState(): (
+  | Provider
+  | EnvironmentProviders
+  )[] {
+  return [
+    provideState(logsFeature),
+  ];
+}

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

@@ -1,6 +1,9 @@
-import { createFeatureSelector } from '@ngrx/store';
+import { createFeatureSelector, createSelector } from '@ngrx/store';
 import { featureKey, LogsState } from './logs.store';
 
 const featureSelector = createFeatureSelector<LogsState>(featureKey);
 
-export const selectLogs = featureSelector;
+export const selectLogs = createSelector(
+  featureSelector,
+  (state) => state.logs
+)