feat[frontend](federation): fixed overview charts

Author: AlexSanchez-bit

frontend/src/app/federation/components/instance-overview-card/instance-overview-card.component.html

@@ -1,9 +1,42 @@
 <div class="overview-card">
   <div class="overview-card__title">{{ entry.instanceName }}</div>
 
-  <div class="overview-card__charts" *ngIf="hasData">
-    <div class="overview-card__chart" *ngIf="statusOption" echarts [options]="statusOption"></div>
-    <div class="overview-card__chart" *ngIf="severityOption" echarts [options]="severityOption"></div>
+  <div class="overview-card__rows" *ngIf="hasData">
+    <div class="overview-card__row">
+      <div class="overview-card__row-label">Severity</div>
+      <div class="overview-card__row-meters">
+        <ngx-gauge *ngFor="let meter of severityMeters"
+                   [animate]="true"
+                   cap="round"
+                   [foregroundColor]="meter.color"
+                   [label]="meter.label"
+                   [max]="severityMax || 1"
+                   [min]="0"
+                   [thick]="6"
+                   type="full"
+                   [value]="meter.value"
+                   [size]="70"
+                   class="overview-card__gauge"></ngx-gauge>
+      </div>
+    </div>
+
+    <div class="overview-card__row">
+      <div class="overview-card__row-label">Status</div>
+      <div class="overview-card__row-meters">
+        <ngx-gauge *ngFor="let meter of statusMeters"
+                   [animate]="true"
+                   [size]="70"
+                   cap="round"
+                   [foregroundColor]="meter.color"
+                   [label]="meter.label"
+                   [max]="statusMax || 1"
+                   [min]="0"
+                   [thick]="6"
+                   type="full"
+                   [value]="meter.value"
+                   class="overview-card__gauge"></ngx-gauge>
+      </div>
+    </div>
   </div>
 
   <div class="overview-card__empty" *ngIf="!hasData">

frontend/src/app/federation/components/instance-overview-card/instance-overview-card.component.scss

@@ -19,18 +19,48 @@
     text-align: center;
   }
 
-  &__charts {
+  &__rows {
     flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  &__row {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  &__row-label {
+    font-size: 11px;
+    font-weight: 600;
+    color: #6b7280;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  &__row-meters {
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: repeat(3, 1fr);
     gap: 8px;
-    min-height: 200px;
+    min-width: 0;
+    justify-items: center;
   }
 
-  &__chart {
+  &__gauge {
+    display: block;
     min-width: 0;
-    min-height: 200px;
-    height: 200px;
+
+    ::ng-deep .reading-block {
+      font-size: 14px !important;
+      font-weight: 600;
+    }
+
+    ::ng-deep .reading-label {
+      font-size: 10px !important;
+      color: #475569;
+    }
   }
 
   &__empty {

frontend/src/app/federation/components/instance-overview-card/instance-overview-card.component.ts

@@ -1,41 +1,15 @@
 import {Component, EventEmitter, Input, OnChanges, Output, SimpleChanges} from '@angular/core';
 import {
   AlertSeveritySerie,
-  CountAlertsBySeverityBucket,
   CountAlertsBySeverityEntry
 } from '../../domain/count-alerts-by-severity.model';
 import {AlertStatusSerie, CountAlertsByStatusEntry} from '../../domain/count-alerts-by-status.model';
 import {FEDERATION_NAV_ACTIONS, NavAction} from '../../domain/federation-nav-actions';
 
-interface PieDatum {
-  name: string;
+interface MeterDatum {
+  label: string;
   value: number;
-  itemStyle: { color: string };
-}
-
-interface PieChartOption {
-  tooltip: { trigger: string; formatter: string };
-  legend: {
-    orient: 'horizontal';
-    bottom: number;
-    data: string[];
-    textStyle: { fontSize: number };
-  };
-  title: {
-    text: string;
-    left: string;
-    top: number;
-    textStyle: { fontSize: number; fontWeight: string };
-  };
-  series: Array<{
-    name: string;
-    type: 'pie';
-    radius: [string, string];
-    center: [string, string];
-    data: PieDatum[];
-    label: { show: boolean };
-    labelLine: { show: boolean };
-  }>;
+  color: string;
 }
 
 const STATUS_COLORS: Record<AlertStatusSerie, string> = {
@@ -51,6 +25,7 @@ const SEVERITY_COLORS: Record<AlertSeveritySerie, string> = {
 };
 
 const SEVERITY_ORDER: ReadonlyArray<AlertSeveritySerie> = ['High', 'Medium', 'Low'];
+const STATUS_ORDER: ReadonlyArray<AlertStatusSerie> = ['Open', 'In review', 'Completed'];
 
 @Component({
   selector: 'app-instance-overview-card',
@@ -63,23 +38,40 @@ export class InstanceOverviewCardComponent implements OnChanges {
   @Output() select = new EventEmitter<string>();
 
   readonly actions: ReadonlyArray<NavAction> = FEDERATION_NAV_ACTIONS;
-  statusOption: PieChartOption | null = null;
-  severityOption: PieChartOption | null = null;
+  severityMeters: MeterDatum[] = [];
+  statusMeters: MeterDatum[] = [];
+  severityMax = 0;
+  statusMax = 0;
   totalAlerts = 0;
   totalSeverity = 0;
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.entry && this.entry) {
-      console.log(this.entry)
-      this.totalAlerts = this.entry.data.reduce((sum, bucket) => sum + bucket.value, 0);
-      this.statusOption = this.totalAlerts > 0 ? this.buildStatusOption(this.entry) : null;
+      const buckets = this.entry.data || [];
+      this.totalAlerts = buckets.reduce((sum, bucket) => sum + bucket.value, 0);
+      this.statusMeters = STATUS_ORDER.map(serie => {
+        const bucket = buckets.find(b => b.serie === serie);
+        return {
+          label: serie,
+          value: bucket ? bucket.value : 0,
+          color: STATUS_COLORS[serie]
+        };
+      });
+      this.statusMax = this.statusMeters.reduce((m, d) => m+d.value, 0);
     }
     if (changes.severityEntry) {
-      const buckets = this.severityEntry ? this.severityEntry.data : [];
+      const buckets = this.severityEntry ? this.severityEntry.data.value : [];
       this.totalSeverity = buckets.reduce((sum, bucket) => sum + bucket.value, 0);
-      this.severityOption = this.totalSeverity > 0
-        ? this.buildSeverityOption(buckets)
-        : null;
+      this.severityMeters = SEVERITY_ORDER.map(serie => {
+        const bucket = buckets.find(b => b.name === serie);
+        console.log(bucket,name)
+        return {
+          label: serie,
+          value: bucket ? bucket.value : 0,
+          color: SEVERITY_COLORS[serie]
+        };
+      });
+      this.severityMax = this.severityMeters.reduce((m, d) => Math.max(m, d.value), 0);
     }
   }
 
@@ -90,52 +82,4 @@ export class InstanceOverviewCardComponent implements OnChanges {
   onSelect(route: string): void {
     this.select.emit(route);
   }
-
-  private buildStatusOption(entry: CountAlertsByStatusEntry): PieChartOption {
-    const data: PieDatum[] = entry.data.map(bucket => ({
-      name: bucket.serie,
-      value: bucket.value,
-      itemStyle: {color: STATUS_COLORS[bucket.serie] || '#6c757d'}
-    }));
-    return this.buildPieOption('Status', data, entry.data.map(bucket => bucket.serie));
-  }
-
-  private buildSeverityOption(buckets: CountAlertsBySeverityBucket[]): PieChartOption {
-    const ordered = SEVERITY_ORDER
-      .map(serie => buckets.find(bucket => bucket.serie === serie))
-      .filter((bucket): bucket is CountAlertsBySeverityBucket => !!bucket && bucket.value > 0);
-    const data: PieDatum[] = ordered.map(bucket => ({
-      name: bucket.serie,
-      value: bucket.value,
-      itemStyle: {color: SEVERITY_COLORS[bucket.serie] || '#6c757d'}
-    }));
-    return this.buildPieOption('Severity', data, ordered.map(bucket => bucket.serie));
-  }
-
-  private buildPieOption(title: string, data: PieDatum[], legend: string[]): PieChartOption {
-    return {
-      tooltip: {trigger: 'item', formatter: '{b}: {c} ({d}%)'},
-      legend: {
-        orient: 'horizontal',
-        bottom: 0,
-        data: legend,
-        textStyle: {fontSize: 11}
-      },
-      title: {
-        text: title,
-        left: 'center',
-        top: 4,
-        textStyle: {fontSize: 12, fontWeight: '600'}
-      },
-      series: [{
-        name: title,
-        type: 'pie',
-        radius: ['45%', '70%'],
-        center: ['50%', '55%'],
-        data,
-        label: {show: false},
-        labelLine: {show: false}
-      }]
-    };
-  }
 }

frontend/src/app/federation/domain/count-alerts-by-severity.model.ts

@@ -1,12 +1,12 @@
 export type AlertSeveritySerie = 'Low' | 'Medium' | 'High';
 
 export interface CountAlertsBySeverityBucket {
-  serie: AlertSeveritySerie;
+  name: AlertSeveritySerie;
   value: number;
 }
 
 export interface CountAlertsBySeverityEntry {
   instanceId: number;
   instanceName: string;
-  data: CountAlertsBySeverityBucket[];
+  data: {value:CountAlertsBySeverityBucket[]};
 }

frontend/src/app/federation/federation.module.ts

@@ -5,6 +5,7 @@ import {RouterModule} from '@angular/router';
 import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
 import {InlineSVGModule} from 'ng-inline-svg';
 import {NgxEchartsModule} from 'ngx-echarts';
+import {NgxGaugeModule} from 'ngx-gauge';
 import {FederationOverviewGridComponent} from './components/federation-overview-grid/federation-overview-grid.component';
 import {FederationSidebarComponent} from './components/federation-sidebar/federation-sidebar.component';
 import {
@@ -28,7 +29,8 @@ import {WelcomeComponent} from './pages/welcome/welcome.component';
     RouterModule,
     NgbModule,
     InlineSVGModule,
-    NgxEchartsModule
+    NgxEchartsModule,
+    NgxGaugeModule
   ],
   declarations: [
     FederationSidebarComponent,

frontend/src/app/federation/pages/welcome/welcome.component.html

@@ -1,15 +1,24 @@
-<div class="container-fluid py-3">
-  <div class="d-flex align-items-center justify-content-between mb-3">
-    <div>
-      <h4 class="label-header text-uppercase mb-1">Federation Overview</h4>
-      <p class="text-muted mb-0">Active instances and alert distribution.</p>
-    </div>
-    <button type="button"
-            class="btn utm-button utm-button-primary"
-            (click)="openCreateModal()">
-      <i class="icon-plus3 mr-2"></i>Connect instance
-    </button>
+<ng-container *ngIf="(hasInstances$ | async); else emptyState">
+  <div class="welcome-overview">
+    <app-federation-overview-grid></app-federation-overview-grid>
   </div>
+</ng-container>
 
-  <app-federation-overview-grid></app-federation-overview-grid>
-</div>
+<ng-template #emptyState>
+  <div class="container-fluid d-flex align-items-center justify-content-center" style="min-height: calc(100vh - 95px);">
+    <div class="text-center" style="max-width: 480px;">
+      <div class="mb-4">
+        <i class="icon-cloud-plus" style="font-size: 72px; color: #232f3e; opacity: 0.85;"></i>
+      </div>
+      <h4 class="label-header text-uppercase mb-2">Welcome to UTMStack Federation</h4>
+      <p class="text-muted mb-4">
+        No instances are connected yet. Connect your first instance to start managing it from this console.
+      </p>
+      <button type="button"
+              class="btn utm-button utm-button-primary"
+              (click)="openCreateModal()">
+        <i class="icon-plus3 mr-2"></i>Connect instance
+      </button>
+    </div>
+  </div>
+</ng-template>

frontend/src/app/federation/pages/welcome/welcome.component.scss

@@ -1 +1,5 @@
 :host { display: block; }
+
+.welcome-overview {
+  padding: 16px;
+}

frontend/src/app/federation/pages/welcome/welcome.component.ts

@@ -1,6 +1,8 @@
 import {Component} from '@angular/core';
 import {Router} from '@angular/router';
 import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
+import {Observable} from 'rxjs';
+import {map} from 'rxjs/operators';
 import {InstanceFormModalComponent} from '../../components/instance-form-modal/instance-form-modal.component';
 import {FederationInstance} from '../../domain/federation-instance.model';
 import {FederationInstanceStateService} from '../../services/federation-instance-state.service';
@@ -12,6 +14,8 @@ import {FederationInstancesService} from '../../services/federation-instances.se
   styleUrls: ['./welcome.component.scss']
 })
 export class WelcomeComponent {
+  readonly hasInstances$: Observable<boolean> = this.instanceState.instances$
+    .pipe(map(instances => instances.length > 0));
 
   constructor(
     private modalService: NgbModal,

frontend/src/app/federation/services/federation-overview.service.ts

@@ -18,7 +18,7 @@ export class FederationOverviewService {
   }
 
   countAlertsBySeverity(from: string, to: string): Observable<CountAlertsBySeverityEntry[]> {
-    const params = new HttpParams().set('from', from).set('to', to);
+    const params = new HttpParams().set('from', from).set('to', to).set('top','100000');
     return this.http.get<CountAlertsBySeverityEntry[]>(this.severityEndpoint, {params});
   }
 }