added new box for rules logger poc

apps/red-ui/src/app/modules/admin/admin.routes.ts

@@ -24,6 +24,7 @@ import { AuditService } from './services/audit.service';
 import { DigitalSignatureService } from './services/digital-signature.service';
 import { RulesService } from './services/rules.service';
 import { SmtpConfigService } from './services/smtp-config.service';
+import { RulesLoggerService } from '@services/rules-logger.service';
 
 const entityRoutes: IqserRoutes = [
     {
@@ -95,6 +96,19 @@ const dossierTemplateIdRoutes: IqserRoutes = [
                             };
                         },
                     },
+                    {
+                        provide: ENVIRONMENT_INITIALIZER,
+                        multi: true,
+                        useFactory: () => {
+                            const service = inject(RulesLoggerService);
+                            return () => {
+                                setTimeout(() => {
+                                    service.connect('/api/rules-logging/rulesocket');
+                                    console.log('Rules logger ready');
+                                }, 2000);
+                            };
+                        },
+                    },
                 ],
             },
             {

apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.html

@@ -1,87 +1,127 @@
-<div class="header-container">
+<div class="rules-screen-container">
-    <div [translate]="translations[type()]['title']" class="heading-l"></div>
+    <!-- Main content area -->
-</div>
+    <div class="main-content">
-
+        <div class="header-container">
-<div class="flex" style="height: 100%">
+            <div [translate]="translations[type()]['title']" class="heading-l"></div>
-    <ngx-monaco-editor (init)="onCodeEditorInit($event)" [(ngModel)]="codeEditorText" [options]="editorOptions"></ngx-monaco-editor>
-
-    <div [class.collapsed]="collapsed()" class="right-container flex-column">
-        <div class="collapsed-wrapper">
-            <ng-container *ngTemplateOutlet="collapsible; context: { action: 'expand', tooltip: ('copilot' | translate) }"></ng-container>
-            <div class="all-caps-label" translate="dossier-details.title"></div>
         </div>
 
-        <div class="header-wrapper flex mt-8">
+        <div class="flex" style="height: 100%">
-            <div class="heading-xl flex-1" id="dossierDetailsDossierName">Copilot</div>
+            <ngx-monaco-editor (init)="onCodeEditorInit($event)" [(ngModel)]="codeEditorText" [options]="editorOptions"></ngx-monaco-editor>
-            <ng-container *ngTemplateOutlet="collapsible; context: { action: 'collapse', tooltip: ('copilot' | translate) }"></ng-container>
-        </div>
 
-        <div class="mt-24">
+            <div [class.collapsed]="collapsed()" class="right-container flex-column">
-            @for (comment of responses$ | async; track comment) {
+                <div class="collapsed-wrapper">
-                <div class="comment">
+                    <ng-container
-                    <div class="comment-details-wrapper">
+                        *ngTemplateOutlet="collapsible; context: { action: 'expand', tooltip: ('copilot' | translate) }"
-                        <div [matTooltipPosition]="'above'" [matTooltip]="comment.date | date: 'exactDate'" class="small-label">
+                    ></ng-container>
-                            {{ comment.date | date: 'sophisticatedDate' }}
+                    <div class="all-caps-label" translate="dossier-details.title"></div>
-                        </div>
-
-                        <!--                <div class="comment-actions">-->
-                        <!--                </div>-->
-                    </div>
-
-                    <div>{{ comment.text }}</div>
                 </div>
-            }
 
-            <iqser-input-with-action
+                <div class="header-wrapper flex mt-8">
-                (action)="add($event)"
+                    <div class="heading-xl flex-1" id="dossierDetailsDossierName">Copilot</div>
-                [placeholder]="'comments.add-comment' | translate"
+                    <ng-container
-                autocomplete="off"
+                        *ngTemplateOutlet="collapsible; context: { action: 'collapse', tooltip: ('copilot' | translate) }"
-                icon="iqser:collapse"
+                    ></ng-container>
-                width="full"
+                </div>
-            ></iqser-input-with-action>
+
+                <div class="mt-24">
+                    @for (comment of responses$ | async; track comment) {
+                        <div class="comment">
+                            <div class="comment-details-wrapper">
+                                <div [matTooltipPosition]="'above'" [matTooltip]="comment.date | date: 'exactDate'" class="small-label">
+                                    {{ comment.date | date: 'sophisticatedDate' }}
+                                </div>
+
+                                <!--                <div class="comment-actions">-->
+                                <!--                </div>-->
+                            </div>
+
+                            <div>{{ comment.text }}</div>
+                        </div>
+                    }
+
+                    <iqser-input-with-action
+                        (action)="add($event)"
+                        [placeholder]="'comments.add-comment' | translate"
+                        autocomplete="off"
+                        icon="iqser:collapse"
+                        width="full"
+                    ></iqser-input-with-action>
+                </div>
+            </div>
+        </div>
+
+        <ng-template #collapsible let-action="action" let-tooltip="tooltip">
+            <iqser-circle-button
+                (action)="collapsed.set(!collapsed())"
+                [icon]="'iqser:' + action"
+                [tooltipPosition]="IqserTooltipPositions.before"
+                [tooltip]="tooltip"
+            ></iqser-circle-button>
+        </ng-template>
+
+        <div *ngIf="changed && permissionsService.canEditRules() && !isLeaving" class="changes-box">
+            <div (click)="goToErrors()" *ngIf="numberOfErrors() || numberOfWarnings()" class="errors">
+                <span>
+                    <mat-icon *ngIf="numberOfErrors()" [svgIcon]="'iqser:alert-circle'" class="icon"></mat-icon>
+                    <div class="found-errors">
+                        <span
+                            *ngIf="numberOfErrors()"
+                            [translateParams]="{ errors: numberOfErrors() }"
+                            [translate]="translations[type()]['errors-found']"
+                        >
+                        </span>
+                        <span
+                            *ngIf="numberOfWarnings()"
+                            [class.only-warning]="!numberOfErrors()"
+                            [translateParams]="{ warnings: numberOfWarnings() }"
+                            [translate]="translations[type()]['warnings-found']"
+                            class="warning"
+                        ></span>
+                    </div>
+                </span>
+                <mat-icon [svgIcon]="'iqser:expand'" class="icon face-up"></mat-icon>
+            </div>
+            <div class="actions">
+                <iqser-icon-button
+                    (action)="save()"
+                    [label]="translations[type()]['save-changes'] | translate"
+                    [type]="iconButtonTypes.primary"
+                    icon="iqser:check"
+                ></iqser-icon-button>
+
+                <div (click)="revert()" [translate]="translations[type()]['revert-changes']" class="all-caps-label cancel"></div>
+            </div>
+        </div>
+    </div>
+
+    <div class="rules-logger" [class.collapsed]="isLogCollapsed">
+        <div class="logger-header" (click)="toggleLogCollapse()">
+            <h3>Rules Log</h3>
+            <button class="collapse-button">
+                <!--todo: add proper icon -->
+                <mat-icon>{{ isLogCollapsed ? 'x' : 'x' }}</mat-icon>
+            </button>
+        </div>
+
+        <div class="logger-messages" *ngIf="!isLogCollapsed">
+            <div *ngFor="let msg of messages" class="log-entry">
+                <div class="log-header">
+                    <span class="log-level">{{ msg.logLevel }}</span>
+                    <span class="log-time">{{ msg.parsedTimeStamp | date: 'short' }}</span>
+                </div>
+                <div class="log-message">
+                    {{ msg.message }}
+                </div>
+                <div class="log-details">
+                    <!--todo: add translation -->
+                    <div><strong>Tenant ID:</strong> {{ msg.tenantId }}</div>
+                    <div><strong>File ID:</strong> {{ msg.fileId }}</div>
+                    <div><strong>Dossier ID:</strong> {{ msg.dossierId }}</div>
+                    <div><strong>Rule Version:</strong> {{ msg.ruleVersion }}</div>
+                    <div><strong>Analysis Number:</strong> {{ msg.analysisNumber }}</div>
+                    <div><strong>Timestamp:</strong> {{ msg.parsedTimeStamp }}</div>
+                </div>
+            </div>
         </div>
     </div>
 </div>
-
-<ng-template #collapsible let-action="action" let-tooltip="tooltip">
-    <iqser-circle-button
-        (action)="collapsed.set(!collapsed())"
-        [icon]="'iqser:' + action"
-        [tooltipPosition]="IqserTooltipPositions.before"
-        [tooltip]="tooltip"
-    ></iqser-circle-button>
-</ng-template>
-
-<div *ngIf="changed && permissionsService.canEditRules() && !isLeaving" class="changes-box">
-    <div (click)="goToErrors()" *ngIf="numberOfErrors() || numberOfWarnings()" class="errors">
-        <span>
-            <mat-icon *ngIf="numberOfErrors()" [svgIcon]="'iqser:alert-circle'" class="icon"></mat-icon>
-            <div class="found-errors">
-                <span
-                    *ngIf="numberOfErrors()"
-                    [translateParams]="{ errors: numberOfErrors() }"
-                    [translate]="translations[type()]['errors-found']"
-                >
-                </span>
-                <span
-                    *ngIf="numberOfWarnings()"
-                    [class.only-warning]="!numberOfErrors()"
-                    [translateParams]="{ warnings: numberOfWarnings() }"
-                    [translate]="translations[type()]['warnings-found']"
-                    class="warning"
-                ></span>
-            </div>
-        </span>
-        <mat-icon [svgIcon]="'iqser:expand'" class="icon face-up"></mat-icon>
-    </div>
-    <div class="actions">
-        <iqser-icon-button
-            (action)="save()"
-            [label]="translations[type()]['save-changes'] | translate"
-            [type]="iconButtonTypes.primary"
-            icon="iqser:check"
-        ></iqser-icon-button>
-
-        <div (click)="revert()" [translate]="translations[type()]['revert-changes']" class="all-caps-label cancel"></div>
-    </div>
-</div>

apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.scss

@@ -96,3 +96,94 @@ ngx-monaco-editor {
         width: 100%;
     }
 }
+
+.rules-screen-container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh; /* Adjust based on your layout */
+
+    .main-content {
+        flex: 1;
+        overflow: auto;
+    }
+
+    .rules-logger {
+        flex-shrink: 0;
+        transition: max-height 0.3s ease;
+        overflow: hidden;
+        border-top: 1px solid #ccc;
+        background-color: #fafafa;
+
+        &.collapsed {
+            max-height: 50px; /* Height of the header when collapsed */
+        }
+
+        &:not(.collapsed) {
+            max-height: 300px; /* Maximum height when expanded */
+        }
+
+        .logger-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 10px;
+            cursor: pointer;
+
+            h3 {
+                margin: 0;
+            }
+
+            .collapse-button {
+                background: none;
+                border: none;
+                cursor: pointer;
+                outline: none;
+
+                mat-icon {
+                    font-size: 24px;
+                }
+            }
+        }
+
+        .logger-messages {
+            overflow-y: auto;
+            height: calc(100% - 50px); /* Subtract header height */
+            padding: 10px;
+
+            .log-entry {
+                padding: 10px;
+                border-bottom: 1px solid #eee;
+
+                .log-header {
+                    display: flex;
+                    justify-content: space-between;
+                    margin-bottom: 5px;
+
+                    .log-level {
+                        font-weight: bold;
+                        color: #007bff;
+                    }
+
+                    .log-time {
+                        font-size: 0.9em;
+                        color: #666;
+                    }
+                }
+
+                .log-message {
+                    margin-bottom: 5px;
+                    font-size: 1em;
+                }
+
+                .log-details {
+                    font-size: 0.9em;
+                    color: #666;
+
+                    div {
+                        margin-bottom: 2px;
+                    }
+                }
+            }
+        }
+    }
+}

apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.ts

@@ -24,6 +24,8 @@ import { rulesScreenTranslations } from '../../../translations/rules-screen-tran
 import ICodeEditor = monaco.editor.ICodeEditor;
 import IModelDeltaDecoration = monaco.editor.IModelDeltaDecoration;
 import IStandaloneEditorConstructionOptions = monaco.editor.IStandaloneEditorConstructionOptions;
+import { RulesLoggerService } from '@services/rules-logger.service';
+import { ScrollingModule } from '@angular/cdk/scrolling';
 
 interface SyntaxError {
     line: number;
@@ -38,6 +40,19 @@ interface UploadResponse {
     deprecatedWarnings: SyntaxError[];
 }
 
+interface RulesLogMessage {
+    tenantId: string;
+    fileId: string;
+    dossierId: string;
+    dossierTemplateId: string;
+    ruleVersion: number;
+    analysisNumber: number;
+    timeStamp: string;
+    logLevel: string;
+    message: string;
+    parsedTimeStamp?: Date;
+}
+
 const RULE_VALIDATION_TIMEOUT = 2000;
 
 @Component({
@@ -60,6 +75,7 @@ const RULE_VALIDATION_TIMEOUT = 2000;
         NamePipe,
         NgForOf,
         MatTooltip,
+        ScrollingModule,
     ],
 })
 export default class RulesScreenComponent implements OnInit, ComponentCanDeactivate {
@@ -69,6 +85,7 @@ export default class RulesScreenComponent implements OnInit, ComponentCanDeactiv
     readonly #errors = signal<SyntaxError[]>([]);
     #ruleValidationTimeout: number = null;
     readonly #copilotService = inject(CopilotService);
+    readonly #rulesLoggerService = inject(RulesLoggerService);
     readonly #currentUser = getCurrentUser();
     protected readonly collapsed = signal(true);
     protected readonly IqserTooltipPositions = IqserTooltipPositions;
@@ -86,10 +103,12 @@ export default class RulesScreenComponent implements OnInit, ComponentCanDeactiv
     initialLines: string[] = [];
     currentLines: string[] = [];
     isLeaving = false;
+    messages: RulesLogMessage[] = [];
     readonly type = input.required<IRules['ruleFileType']>();
     readonly numberOfErrors = computed(() => this.#errors().filter(e => !e.warning).length);
     readonly numberOfWarnings = computed(() => this.#errors().filter(e => e.warning).length);
     readonly responses$ = new BehaviorSubject<{ text: string; date: string }[]>([]);
+    isLogCollapsed = true;
 
     constructor(
         readonly permissionsService: PermissionsService,
@@ -112,6 +131,15 @@ export default class RulesScreenComponent implements OnInit, ComponentCanDeactiv
             destination: '/app/rules-copilot',
             body: JSON.stringify({ prompts: ['manageradmin'] }),
         });
+
+        this.#rulesLoggerService
+            .listen<RulesLogMessage>('/topic/' + tenant + '/rule-log-events')
+            .pipe(takeUntilDestroyed())
+            .subscribe(message => {
+                message.parsedTimeStamp = this.parseTimestamp(message.timeStamp);
+                this.messages.push(message);
+                this._changeDetectorRef.detectChanges();
+            });
     }
 
     set isLeavingPage(isLeaving: boolean) {
@@ -350,4 +378,23 @@ export default class RulesScreenComponent implements OnInit, ComponentCanDeactiv
             () => this._loadingService.stop(),
         );
     }
+
+    parseTimestamp(timestamp: string): Date {
+        let adjustedTimestamp = timestamp.replace('Z', '');
+
+        const dotIndex = adjustedTimestamp.indexOf('.');
+        if (dotIndex !== -1) {
+            adjustedTimestamp = adjustedTimestamp.substring(0, dotIndex);
+        }
+
+        return new Date(adjustedTimestamp);
+    }
+
+    trackByMessageId(index: number, msg: RulesLogMessage): string {
+        return msg.timeStamp; // Assuming timeStamp is unique
+    }
+
+    toggleLogCollapse() {
+        this.isLogCollapsed = !this.isLogCollapsed;
+    }
 }

apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts

@@ -7,13 +7,13 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { List, OnChange } from '@iqser/common-ui/lib/utils';
 import { MonacoEditorModule, MonacoStandaloneCodeEditor, MonacoStandaloneDiffEditor } from '@materia-ui/ngx-monaco-editor';
 import { FormsModule } from '@angular/forms';
-import { NgIf } from '@angular/common';
 import IStandaloneEditorConstructionOptions = monaco.editor.IStandaloneEditorConstructionOptions;
 import IDiffEditor = monaco.editor.IDiffEditor;
 import ICodeEditor = monaco.editor.ICodeEditor;
 import IModelDeltaDecoration = monaco.editor.IModelDeltaDecoration;
 import ILineChange = monaco.editor.ILineChange;
 import IEditorMouseEvent = monaco.editor.IEditorMouseEvent;
+import { NgIf } from '@angular/common';
 
 const MIN_WORD_LENGTH = 2;
 const lineChangeToDecoration = ({ originalEndLineNumber, originalStartLineNumber }: ILineChange) =>

apps/red-ui/src/app/services/rules-logger.service.ts

@@ -0,0 +1,11 @@
+import { WebSocketService } from '@services/web-socket.service';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class RulesLoggerService extends WebSocketService {
+    get topicPrefix(): string {
+        return '';
+    }
+}

apps/red-ui/src/app/services/web-socket.service.ts

@@ -19,6 +19,8 @@ export class WebSocketService extends RxStomp {
     readonly #tenantService = inject(TenantsService);
     readonly #destroyRef = inject(DestroyRef);
 
+    url: string;
+
     constructor() {
         super();
     }
@@ -46,16 +48,11 @@ export class WebSocketService extends RxStomp {
     }
 
     connect(url: string) {
-        const headers = { Authorization: 'Bearer ' + localStorage.getItem('token') };
+        this.url = url;
-        console.log(headers);
+        this.configureConnection();
-        this.configure({
-            debug: (msg: string) => this.#logger.debug(msg),
-            brokerURL: this.#config.API_URL + url,
-            connectHeaders: headers,
-        });
 
         this.connectionState$.pipe(log('[WS] Connection state')).subscribe();
-        this.webSocketErrors$.pipe(log('[WS] Errors')).subscribe();
+        this.webSocketErrors$.pipe(log('[WS] Errors')).subscribe(frame => this.configureConnection());
         this.stompErrors$
             .pipe(
                 tap(frame => {
@@ -69,4 +66,14 @@ export class WebSocketService extends RxStomp {
 
         this.activate();
     }
+
+    private configureConnection() {
+        const headers = { Authorization: 'Bearer ' + localStorage.getItem('token') };
+        console.log(headers);
+        this.configure({
+            debug: (msg: string) => this.#logger.debug(msg),
+            brokerURL: this.#config.API_URL + this.url,
+            connectHeaders: headers,
+        });
+    }
 }

apps/red-ui/src/assets/config/config.json

@@ -1,7 +1,7 @@
 {
   "ADMIN_CONTACT_NAME": null,
   "ADMIN_CONTACT_URL": null,
-  "API_URL": "https://dan1.iqser.cloud",
+  "API_URL": "https://dom1.iqser.cloud",
   "APP_NAME": "RedactManager",
   "IS_DOCUMINE": false,
   "RULE_EDITOR_DEV_ONLY": false,
@@ -13,7 +13,7 @@
   "MAX_RETRIES_ON_SERVER_ERROR": 3,
   "OAUTH_CLIENT_ID": "redaction",
   "OAUTH_IDP_HINT": null,
-  "OAUTH_URL": "https://dan1.iqser.cloud/auth",
+  "OAUTH_URL": "https://dom1.iqser.cloud/auth",
   "RECENT_PERIOD_IN_HOURS": 24,
   "SELECTION_MODE": "structural",
   "MANUAL_BASE_URL": "https://docs.redactmanager.com/preview",