mgr/dashboard: Improve column spacing in alerts tab

This PR intends to fix the column spacing in the alert list in the alerts tab

Fixes:https://tracker.ceph.com/issues/56165
Signed-off-by: Aashish Sharma <aasharma@redhat.com>

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/active-alert-list/active-alert-list.component.ts

@@ -7,7 +7,6 @@ import { CdTableAction } from '~/app/shared/models/cd-table-action';
 import { CdTableColumn } from '~/app/shared/models/cd-table-column';
 import { CdTableSelection } from '~/app/shared/models/cd-table-selection';
 import { Permission } from '~/app/shared/models/permissions';
-import { CdDatePipe } from '~/app/shared/pipes/cd-date.pipe';
 import { AuthStorageService } from '~/app/shared/services/auth-storage.service';
 import { PrometheusAlertService } from '~/app/shared/services/prometheus-alert.service';
 import { URLBuilderService } from '~/app/shared/services/url-builder.service';
@@ -29,18 +28,12 @@ export class ActiveAlertListComponent extends PrometheusListHelper implements On
   permission: Permission;
   selection = new CdTableSelection();
   icons = Icons;
-  customCss = {
-    'badge badge-danger': 'active',
-    'badge badge-warning': 'unprocessed',
-    'badge badge-info': 'suppressed'
-  };
 
   constructor(
     // NotificationsComponent will refresh all alerts every 5s (No need to do it here as well)
     private authStorageService: AuthStorageService,
     public prometheusAlertService: PrometheusAlertService,
     private urlBuilder: URLBuilderService,
-    private cdDatePipe: CdDatePipe,
     @Inject(PrometheusService) prometheusService: PrometheusService
   ) {
     super(prometheusService);
@@ -65,30 +58,49 @@ export class ActiveAlertListComponent extends PrometheusListHelper implements On
       {
         name: $localize`Name`,
         prop: 'labels.alertname',
+        cellClass: 'font-weight-bold',
         flexGrow: 2
       },
       {
-        name: $localize`Job`,
-        prop: 'labels.job',
-        flexGrow: 2
+        name: $localize`Summary`,
+        prop: 'annotations.summary',
+        flexGrow: 3
       },
       {
         name: $localize`Severity`,
-        prop: 'labels.severity'
+        prop: 'labels.severity',
+        flexGrow: 1,
+        cellTransformation: CellTemplate.badge,
+        customTemplateConfig: {
+          map: {
+            critical: { class: 'badge-danger' },
+            warning: { class: 'badge-warning' }
+          }
+        }
       },
       {
         name: $localize`State`,
         prop: 'status.state',
-        cellTransformation: CellTemplate.classAdding
+        flexGrow: 1,
+        cellTransformation: CellTemplate.badge,
+        customTemplateConfig: {
+          map: {
+            active: { class: 'badge-info' },
+            unprocessed: { class: 'badge-warning' },
+            suppressed: { class: 'badge-dark' }
+          }
+        }
       },
       {
         name: $localize`Started`,
         prop: 'startsAt',
-        pipe: this.cdDatePipe
+        cellTransformation: CellTemplate.timeAgo,
+        flexGrow: 1
       },
       {
         name: $localize`URL`,
         prop: 'generatorURL',
+        flexGrow: 1,
         sortable: false,
         cellTemplate: this.externalLinkTpl
       }

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/rules-list/rules-list.component.ts

@@ -1,6 +1,9 @@
 import { Component, Inject, OnInit } from '@angular/core';
 
+import _ from 'lodash';
+
 import { PrometheusService } from '~/app/shared/api/prometheus.service';
+import { CellTemplate } from '~/app/shared/enum/cell-template.enum';
 import { CdTableColumn } from '~/app/shared/models/cd-table-column';
 import { PrometheusRule } from '~/app/shared/models/prometheus-alerts';
 import { DurationPipe } from '~/app/shared/pipes/duration.pipe';
@@ -33,12 +36,28 @@ export class RulesListComponent extends PrometheusListHelper implements OnInit {
   ngOnInit() {
     super.ngOnInit();
     this.columns = [
-      { prop: 'name', name: $localize`Name` },
-      { prop: 'labels.severity', name: $localize`Severity` },
-      { prop: 'group', name: $localize`Group` },
-      { prop: 'duration', name: $localize`Duration`, pipe: new DurationPipe() },
-      { prop: 'query', name: $localize`Query`, isHidden: true },
-      { prop: 'annotations.description', name: $localize`Description` }
+      { prop: 'name', name: $localize`Name`, cellClass: 'font-weight-bold', flexGrow: 2 },
+      {
+        prop: 'labels.severity',
+        name: $localize`Severity`,
+        flexGrow: 1,
+        cellTransformation: CellTemplate.badge,
+        customTemplateConfig: {
+          map: {
+            critical: { class: 'badge-danger' },
+            warning: { class: 'badge-warning' }
+          }
+        }
+      },
+      {
+        prop: 'group',
+        name: $localize`Group`,
+        flexGrow: 1,
+        cellTransformation: CellTemplate.badge
+      },
+      { prop: 'duration', name: $localize`Duration`, pipe: new DurationPipe(), flexGrow: 1 },
+      { prop: 'query', name: $localize`Query`, isHidden: true, flexGrow: 1 },
+      { prop: 'annotations.summary', name: $localize`Summary`, flexGrow: 3 }
     ];
   }
 }

src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html

@@ -311,3 +311,9 @@
      (click)="toggleExpandRow(row, isExpanded, $event)">
   </a>
 </ng-template>
+
+<ng-template #timeAgoTpl
+             let-value="value">
+  <span data-toggle="tooltip"
+        [title]="value | cdDate">{{ value | relativeDate }}</span>
+</ng-template>

src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts

@@ -65,6 +65,8 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges, O
   mapTpl: TemplateRef<any>;
   @ViewChild('truncateTpl', { static: true })
   truncateTpl: TemplateRef<any>;
+  @ViewChild('timeAgoTpl', { static: true })
+  timeAgoTpl: TemplateRef<any>;
   @ViewChild('rowDetailsTpl', { static: true })
   rowDetailsTpl: TemplateRef<any>;
 
@@ -581,6 +583,7 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges, O
     this.cellTemplates.badge = this.badgeTpl;
     this.cellTemplates.map = this.mapTpl;
     this.cellTemplates.truncate = this.truncateTpl;
+    this.cellTemplates.timeAgo = this.timeAgoTpl;
   }
 
   useCustomClass(value: any): string {

src/pybind/mgr/dashboard/frontend/src/app/shared/enum/cell-template.enum.ts

@@ -50,5 +50,10 @@ export enum CellTemplate {
   //     omission?: string; // Defaults to empty string.
   //   }
   // }
-  truncate = 'truncate'
+  truncate = 'truncate',
+  /*
+  This templace replaces a time, datetime or timestamp with a user-friendly "X {seconds,minutes,hours,days,...} ago",
+  but the tooltip still displays the absolute timestamp
+  */
+  timeAgo = 'timeAgo'
 }