add color to severiyt value on incident detail page

Signed-off-by: Sebastian Kaupe <[email protected]>
SovereignCloudStack · Dec 3, 2024 · a4a8496 · a4a8496
1 parent a428775
commit a4a8496
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/src/app/pages/incident-details-view/incident-details-view.component.html b/src/app/pages/incident-details-view/incident-details-view.component.html
@@ -34,11 +34,11 @@ <h2>Description</h2>
         <p *ngIf="edit.view">
             {{ incident.description }}
         </p>
-        <textarea 
+        <textarea
             *ngIf="edit.editing"
-            rows="6" 
-            #incidentDescription 
-            id="incidentDescription" 
+            rows="6"
+            #incidentDescription
+            id="incidentDescription"
             name="incidentDescription"
             (keydown.enter)="$event.stopPropagation()"
             [(ngModel)]="incident.description"
@@ -51,7 +51,8 @@ <h2 style="display:inline-block">Affected components</h2>
         <ul>
             <li *ngFor="let impact of incident.affects!.concat(impactsToAdd)">
                 <span [class.struck]="impactsToDelete.has(impact.reference ?? '')">{{ componentName(impact) }}</span>
-                <span class="faint"> | Severity: {{ impactSeverity(impact) }}</span>
+                <span class="faint"> | Severity: </span>
+                <span class="faint" [style]="util.severityColorStyle(impact.severity ?? -1)">{{ impactSeverity(impact) }}</span>
                 <span class="faint"> | Category: {{ impactType(impact) }}</span>
                 <span *ngIf="edit.editing">
                     <button class="inline-button dangerous" type="button" (click)="markImpactForDeletion(impact.reference)" *ngIf="!impactsToDelete.has(impact.reference ?? '')" title="Delete this impact">

diff --git a/src/app/services/util.service.ts b/src/app/services/util.service.ts
@@ -53,6 +53,10 @@ export class UtilService {
     return this.config.unknownColor;
   }
 
+  severityColorStyle(severity: Severity): string {
+    return `color: ${this.severityColor(severity)}`;
+  }
+
   currentDaySeverity(componentId: ComponentId): Severity {
     return this.severityForDay(componentId, this.dataService.currentDay);
   }