feat(queue table): added queue table mockup

frontend/bec_atlas/src/app/app.component.html

@@ -2,5 +2,7 @@
 
 <!-- <app-dashboard></app-dashboard> -->
 <!-- <app-gridstack-test></app-gridstack-test> -->
- <app-device-box [device]="'samx'" [signal_name]="'samx'"></app-device-box>
+<app-device-box [device]="'samx'" [signal_name]="'samx'"></app-device-box>
+<app-device-box [device]="'samy'" [signal_name]="'samy'"></app-device-box>
+<app-queue-table></app-queue-table>
 <router-outlet />

frontend/bec_atlas/src/app/app.component.ts

@@ -5,6 +5,7 @@ import { GridStackTestComponent } from './gridstack-test/gridstack-test.componen
 import { CommonModule } from '@angular/common';
 import { RedisConnectorService } from './core/redis-connector.service';
 import { DeviceBoxComponent } from './device-box/device-box.component';
+import { QueueTableComponent } from './queue-table/queue-table.component';
 
 @Component({
   selector: 'app-root',
@@ -14,6 +15,7 @@ import { DeviceBoxComponent } from './device-box/device-box.component';
     CommonModule,
     GridStackTestComponent,
     DeviceBoxComponent,
+    QueueTableComponent,
   ],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',

frontend/bec_atlas/src/app/core/redis-connector.service.ts

@@ -23,11 +23,11 @@ export class RedisConnectorService {
       transports: ['websocket'], // Use WebSocket only
       autoConnect: true, // Automatically connect
       reconnection: true, // Enable automatic reconnection
-      timeout: 5000, // Connection timeout in milliseconds
+      timeout: 500, // Connection timeout in milliseconds
       auth: {
         user: 'john_doe',
         token: '1234',
-        deployment: '67599761f44165e0ad56ce0f',
+        deployment: '674739bc344eabfbabcff8bd',
       },
     });
 
@@ -43,9 +43,9 @@ export class RedisConnectorService {
     this.socket.on('message', (data: any) => {
       console.log('Received message:', data);
       const dataObj = JSON.parse(data);
-      const signal = this.signals.get(dataObj.endpoint_request);
-      if (signal) {
-        signal.set(dataObj);
+      const endpoint_signal = this.signals.get(dataObj.endpoint_request);
+      if (endpoint_signal) {
+        endpoint_signal.set(dataObj);
       }
     });
 

frontend/bec_atlas/src/app/core/redis_endpoints.ts

@@ -28,4 +28,16 @@ export class MessageEndpoints {
     };
     return out;
   }
+
+  /**
+   *
+   * @returns Endpoint for scan queue status
+   */
+  static scan_queue_status(): EndpointInfo {
+    const out: EndpointInfo = {
+      endpoint: 'scan_queue_status',
+      args: [],
+    };
+    return out;
+  }
 }

frontend/bec_atlas/src/app/queue-table/queue-table.component.html

@@ -0,0 +1,37 @@
+<mat-card>
+    <mat-toolbar color="primary">
+      Queue Table
+    </mat-toolbar>
+
+  <table mat-table [dataSource]="tableData()" class="mat-elevation-z8">
+    <!-- Queue ID Column -->
+    <ng-container matColumnDef="queue_id">
+      <th mat-header-cell *matHeaderCellDef> Queue ID </th>
+      <td mat-cell *matCellDef="let element"> {{ element.queue_id }} </td>
+    </ng-container>
+
+    <!-- Scan ID Column -->
+    <ng-container matColumnDef="scan_id">
+      <th mat-header-cell *matHeaderCellDef> Scan ID </th>
+      <td mat-cell *matCellDef="let element"> {{ element.scan_id }} </td>
+    </ng-container>
+
+    <!-- Scan Number Column -->
+    <ng-container matColumnDef="scan_number">
+      <th mat-header-cell *matHeaderCellDef> Scan Number </th>
+      <td mat-cell *matCellDef="let element"> {{ element.scan_number }} </td>
+    </ng-container>
+
+    <!-- Status Column -->
+    <ng-container matColumnDef="status">
+      <th mat-header-cell *matHeaderCellDef> Status </th>
+      <td mat-cell *matCellDef="let element"> {{ element.status }} </td>
+    </ng-container>
+    <!-- Header Row -->
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <!-- Data Rows -->
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  </table>
+</mat-card>
+
+  

frontend/bec_atlas/src/app/queue-table/queue-table.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QueueTableComponent } from './queue-table.component';
+
+describe('QueueTableComponent', () => {
+  let component: QueueTableComponent;
+  let fixture: ComponentFixture<QueueTableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [QueueTableComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(QueueTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/bec_atlas/src/app/queue-table/queue-table.component.ts

@@ -0,0 +1,35 @@
+import { Component, computed, effect, Signal } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+import { MatTableModule } from '@angular/material/table';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { RedisConnectorService } from '../core/redis-connector.service';
+import { MessageEndpoints } from '../core/redis_endpoints';
+
+@Component({
+  selector: 'app-queue-table',
+  imports: [MatCardModule, MatTableModule, MatToolbarModule],
+  templateUrl: './queue-table.component.html',
+  styleUrl: './queue-table.component.scss',
+})
+export class QueueTableComponent {
+  tableSignal!: Signal<any>;
+  tableData!: Signal<any>;
+  displayedColumns: string[] = ['queue_id', 'scan_id', 'scan_number', 'status'];
+
+  constructor(private redisConnector: RedisConnectorService) {}
+
+  ngOnInit(): void {
+    this.tableSignal = this.redisConnector.register(
+      MessageEndpoints.scan_queue_status()
+    );
+
+    this.tableData = computed(() => {
+      let data = this.tableSignal();
+      console.log('Table data: ', data);
+      if (!data) {
+        return [];
+      }
+      return data.data.queue?.primary.info || [];
+    });
+  }
+}