Started work on logs

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

@@ -1,4 +1,4 @@
 export const rendererAppPort = 4200;
-export const rendererAppName = 'servicebus-browser-frontend'; // options.name.split('-')[0] + '-web'
-export const electronAppName = 'servicebus-browser-app';
+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-frontend/src/app/app.component.html

@@ -5,9 +5,37 @@
   </ng-template>
   <ng-template pTemplate>
     <div class="main-content">
+      <p-tabs value="/dashboard" class="open-data-tabs" scrollable="">
+        <p-tablist>
+          <p-tab value="/dashboard">
+            tab 1
+          </p-tab>
+          <p-tab value="/dashboard2">
+            tab2
+          </p-tab>
+        </p-tablist>
+      </p-tabs>
       <p-scroll-panel>
         <router-outlet></router-outlet>
       </p-scroll-panel>
+      <div class="logs">
+        <button class="logs-header" (click)="toggleLogs()">
+          <span class="text">Logs</span>
+          @if (logsOpened()) {
+            <span class="icon pi pi-chevron-down"></span>
+          } @else {
+            <span class="icon pi pi-chevron-left"></span>
+          }
+        </button>
+
+        @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>
+          </div>
+        }
+      </div>
     </div>
   </ng-template>
 </p-splitter>

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

@@ -26,6 +26,7 @@
     width: 100%;
     height: 100%;
     display: flex;
+    flex-direction: column;
     align-items: stretch;
     justify-items: stretch;
 
@@ -35,3 +36,30 @@
     }
   }
 }
+
+.open-data-tabs {
+  --p-tabs-tab-padding: 0.4rem 0.8rem;
+}
+
+.logs {
+  width: 100%;
+}
+
+.logs-header {
+  width: 100%;
+  border: none;
+  border-radius: 0;
+  cursor: pointer;
+  background-color: var(--p-primary-600);
+  color: white;
+  font-size: 1rem;
+  text-align: left;
+  padding: 6px;
+  display: block flex;
+  justify-content: space-between;
+  align-items: center;
+
+  &:hover {
+    background-color: var(--p-primary-700);
+  }
+}

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

@@ -1,10 +1,11 @@
-import { Component } from '@angular/core';
+import { Component, 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';
 
 @Component({
   imports: [
@@ -14,6 +15,9 @@ import { ScrollPanel } from 'primeng/scrollpanel';
     PrimeTemplate,
     Menubar,
     ScrollPanel,
+    Tabs,
+    TabList,
+    Tab,
   ],
   selector: 'app-root',
   templateUrl: './app.component.html',
@@ -51,4 +55,10 @@ export class AppComponent {
       ],
     },
   ];
+
+  logsOpened = signal(false);
+
+  toggleLogs() {
+    this.logsOpened.update((value) => !value);
+  }
 }

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

@@ -3,15 +3,18 @@ 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 Aura from '@primeng/themes/aura';
+import { theme } from './theme';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     // primeng
     provideAnimationsAsync(),
     providePrimeNG({
       theme: {
-        preset: Aura
+        preset: theme,
+        options: {
+          darkModeSelector: false,
+        }
       }
     }),
 

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

@@ -0,0 +1,20 @@
+import { definePreset } from '@primeng/themes';
+import Aura from '@primeng/themes/aura';
+
+export const theme = definePreset(Aura, {
+  semantic: {
+    primary: {
+      50:  '{sky.50}',
+      100: '{sky.100}',
+      200: '{sky.200}',
+      300: '{sky.300}',
+      400: '{sky.400}',
+      500: '{sky.500}',
+      600: '{sky.600}',
+      700: '{sky.700}',
+      800: '{sky.800}',
+      900: '{sky.900}',
+      950: '{sky.950}'
+    }
+  }
+});

apps/servicebus-browser-frontend/src/styles.scss

@@ -1,3 +1,5 @@
+@use "primeicons/primeicons.css" as *;
+
 head, body {
   font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
   margin: 0;

libs/logs/contract/README.md

@@ -0,0 +1,7 @@
+# contract
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test contract` to execute the unit tests via [Jest](https://jestjs.io).

libs/logs/contract/eslint.config.js

@@ -0,0 +1,3 @@
+const baseConfig = require('../../../eslint.config.js');
+
+module.exports = [...baseConfig];

libs/logs/contract/jest.config.ts

@@ -0,0 +1,10 @@
+export default {
+  displayName: 'contract',
+  preset: '../../../jest.preset.js',
+  testEnvironment: 'node',
+  transform: {
+    '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
+  },
+  moduleFileExtensions: ['ts', 'js', 'html'],
+  coverageDirectory: '../../../coverage/libs/logs/contract',
+};

libs/logs/contract/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@service-bus-browser/logs-contracts",
+  "version": "0.0.1",
+  "dependencies": {},
+  "private": true
+}

libs/logs/contract/project.json

@@ -0,0 +1,16 @@
+{
+  "name": "contract",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/logs/contract/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/logs/contract/jest.config.ts"
+      }
+    }
+  }
+}

libs/logs/contract/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/log-line';

libs/logs/contract/src/lib/log-line.ts

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

libs/logs/contract/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noPropertyAccessFromIndexSignature": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

libs/logs/contract/tsconfig.lib.json

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

libs/logs/contract/tsconfig.spec.json

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

libs/logs/store/README.md

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

libs/logs/store/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/store/jest.config.ts

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

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

libs/logs/store/src/index.ts

@@ -0,0 +1 @@
+

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

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

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

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