209 frontend module alert overview page with alert table

apps/frontend/src/app/alert-page/component/alert-page/alert-page.component.css

@@ -0,0 +1,145 @@
+.header {
+  background-color: white;
+  justify-content: space-around;
+  position: relative;
+}
+
+.alert-summary {
+  display: flex;
+  gap: 2rem;
+  align-items: center;
+}
+
+.summary-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.summary-item cds-icon.critical {
+  color: #c92100;
+}
+
+.summary-item cds-icon.warning {
+  color: #f57600;
+}
+
+.summary-item cds-icon.info {
+  color: #0072a3;
+}
+
+.card {
+  margin-bottom: 1rem;
+}
+
+.repeated-alerts {
+  margin-top: 1rem;
+  font-size: 0.875rem;
+}
+
+.repeated-alerts ul {
+  margin-top: 0.5rem;
+}
+
+.label {
+  font-size: 0.65rem;
+  padding: 0.2rem 0.4rem;
+}
+
+.alert-danger {
+  background-color: #c92100;
+  color: white;
+}
+
+.alert-warning {
+  background-color: #f57600;
+  color: white;
+}
+
+.alert-info {
+  background-color: #0072a3;
+  color: white;
+}
+
+clr-datagrid {
+  margin-top: 1rem;
+}
+
+clr-tooltip {
+  cursor: help;
+}
+
+clr-datagrid {
+  margin-top: 1rem;
+  /* height: calc(100vh - 250px); */
+}
+
+/* Severity Badge Styles */
+.severity-badge {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0.75rem;
+  border-radius: 0.2rem;
+  font-size: 0.65rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  white-space: nowrap;
+  width: 180px;
+}
+
+.severity-badge cds-icon {
+  width: 16px;
+  height: 16px;
+}
+
+/* Critical Severity */
+.severity-critical {
+  background-color: #fee8e8;
+  color: #c92100;
+  border: 1px solid #fac5c5;
+}
+
+.severity-critical cds-icon {
+  color: #c92100;
+}
+
+/* Warning Severity */
+.severity-warning {
+  background-color: #fef3e3;
+  color: #f57600;
+  border: 1px solid #fcdba2;
+}
+
+.severity-warning cds-icon {
+  color: #f57600;
+}
+
+/* Info Severity */
+.severity-info {
+  background-color: #e8f5ff;
+  color: #0072a3;
+  border: 1px solid #b3dcff;
+}
+
+.severity-info cds-icon {
+  color: #0072a3;
+}
+
+/* Row highlighting based on severity */
+.row-critical {
+  background-color: rgba(201, 33, 0, 0.05);
+}
+
+.row-warning {
+  background-color: rgba(245, 118, 0, 0.05);
+}
+
+.row-info {
+  background-color: rgba(0, 114, 163, 0.05);
+}
+
+
+#alert-summary-card {
+  padding-bottom: 24px;
+}

apps/frontend/src/app/alert-page/component/alert-page/alert-page.component.html

@@ -0,0 +1,149 @@
+<h1 class="header">Analysis and Warnings</h1>
+
+<ng-container *ngIf="alertSummary$ | async as summary">
+  <!-- Summary Cards -->
+  <div class="clr-row">
+    <!-- Alert Statistics Card -->
+    <div class="clr-col-12 clr-col-md-6">
+      <div class="card">
+        <div class="card-block" id="alert-summary-card">
+          <div class="card-title">Alert Statistics</div>
+          <div class="card-text">
+            <div class="alert-summary">
+              <div class="summary-item">
+                <cds-icon
+                  shape="error-standard"
+                  class="is-solid critical"
+                ></cds-icon>
+                <span>{{ summary.criticalCount }} Critical</span>
+              </div>
+              <div class="summary-item">
+                <cds-icon
+                  shape="warning-standard"
+                  class="is-solid warning"
+                ></cds-icon>
+                <span>{{ summary.warningCount }} Warnings</span>
+              </div>
+              <div class="summary-item">
+                <cds-icon
+                  shape="info-standard"
+                  class="is-solid info"
+                ></cds-icon>
+                <span>{{ summary.infoCount }} Information</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Frequent Alerts Card -->
+    <div class="clr-col-12 clr-col-md-6">
+      <div class="card" *ngIf="summary.mostFrequentAlert">
+        <div class="card-block">
+          <div class="card-title">Most Frequent Alert</div>
+          <div class="card-text">
+            <p>
+              <strong>"{{ summary.mostFrequentAlert.type }}"</strong> occurred
+              <strong>{{ summary.mostFrequentAlert.count }} times</strong> in
+              the last {{ DAYS }} days.
+            </p>
+            <div
+              *ngIf="summary.repeatedAlerts.length > 1"
+              class="repeated-alerts"
+            >
+              <small>Other repeated alerts:</small>
+              <ul class="list-unstyled">
+                <li *ngFor="let alert of summary.repeatedAlerts.slice(1, 4)">
+                  {{ alert.type }}: {{ alert.count }} times
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Error Message -->
+  <clr-alert *ngIf="error" class="alert-danger">
+    <clr-alert-item>
+      <span class="alert-text">{{ error }}</span>
+    </clr-alert-item>
+  </clr-alert>
+
+  <!-- Alert Grid -->
+  <clr-datagrid [clrDgLoading]="loading" (clrDgRefresh)="refresh($event)">
+    <clr-dg-column>Severity</clr-dg-column>
+    <clr-dg-column>Date</clr-dg-column>
+    <clr-dg-column>Type</clr-dg-column>
+    <clr-dg-column>Details</clr-dg-column>
+
+    <clr-dg-row *ngFor="let alert of alerts$ | async" [clrDgItem]="alert">
+      <clr-dg-cell>
+        <div
+          class="severity-badge"
+          [ngClass]="{
+            'severity-critical':
+              alert.alertType.severity === SeverityType.CRITICAL,
+            'severity-warning':
+              alert.alertType.severity === SeverityType.WARNING,
+            'severity-info': alert.alertType.severity === SeverityType.INFO
+          }"
+        >
+          <cds-icon
+            [attr.shape]="
+              alert.alertType.severity === SeverityType.CRITICAL
+                ? 'error-standard'
+                : alert.alertType.severity === SeverityType.WARNING
+                ? 'warning-standard'
+                : 'info-standard'
+            "
+            class="is-solid"
+          >
+          </cds-icon>
+          {{ alert.alertType.severity }}
+        </div>
+      </clr-dg-cell>
+      <clr-dg-cell>{{ formatDate(alert.creationDate) }}</clr-dg-cell>
+      <clr-dg-cell>{{ alert.alertType.name }}</clr-dg-cell>
+      <clr-dg-cell>
+        <span style="font-weight: bold">{{ getAlertReason(alert) }}</span>
+        <ng-container [ngSwitch]="alert.alertType.name">
+          <div *ngSwitchCase="'SIZE_ALERT'">
+            <div *ngIf="hasBackup(alert)">
+              <strong>Backup Saveset:</strong> {{ alert.backup.saveset }}<br />
+              <strong>Creation Date:</strong>
+              {{ formatDate(alert.backup.creationDate) }}
+            </div>
+            {{ getAlertDetails(alert) }}
+          </div>
+
+          <div *ngSwitchCase="'STORAGE_FILL_ALERT'">
+            <ng-container *ngIf="isStorageFillAlert(alert)">
+              <strong>Storage Fill:</strong>
+              {{ shortenBytes(alert.filled * 1024 * 1024 * 1024) }} /
+              {{ shortenBytes(alert.capacity * 1024 * 1024 * 1024) }}<br />
+              <strong>High Water Mark:</strong>
+              {{ shortenBytes(alert.highWaterMark * 1024 * 1024 * 1024) }}
+            </ng-container>
+          </div>
+
+          <div *ngSwitchDefault>
+            {{ getAlertDetails(alert) }}
+          </div>
+        </ng-container>
+      </clr-dg-cell>
+    </clr-dg-row>
+
+    <clr-dg-footer>
+      <clr-dg-pagination #pagination [clrDgTotalItems]="summary.totalCount">
+        <clr-dg-page-size [clrPageSizeOptions]="PAGE_SIZES"
+          >Alerts per page</clr-dg-page-size
+        >
+        {{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }} of
+        {{ summary.totalCount }} alerts
+      </clr-dg-pagination>
+    </clr-dg-footer>
+  </clr-datagrid>
+</ng-container>