NAS-135256 / 25.10 / Simplify Services page

src/app/enums/service-status.enum.ts

@@ -1,5 +1,11 @@
+import { marker as T } from '@biesbjerg/ngx-translate-extract-marker';
+
 export enum ServiceStatus {
   Running = 'RUNNING',
   Stopped = 'STOPPED',
-  Loading = 'LOADING', // extra state for UI
 }
+
+export const serviceStatusLabels = new Map<ServiceStatus, string>([
+  [ServiceStatus.Running, T('Running')],
+  [ServiceStatus.Stopped, T('Stopped')],
+]);

src/app/modules/ix-table/components/ix-table-body/cells/ix-cell-actions/icon-action-config.interface.ts

@@ -3,12 +3,13 @@ import { Role } from 'app/enums/role.enum';
 import { MarkedIcon } from 'app/modules/ix-icon/icon-marker.util';
 
 export interface IconActionConfig<T> {
-  iconName: MarkedIcon;
+  iconName?: MarkedIcon;
   tooltip?: string;
   requiredRoles?: Role[];
   onClick: (row: T) => void;
   hidden?: (row: T) => Observable<boolean>;
   disabled?: (row: T) => Observable<boolean>;
   dynamicTooltip?: (row: T) => Observable<string>;
+  dynamicText?: (row: T) => Observable<string>;
   dynamicRequiredRoles?: (row: T) => Observable<Role[]>;
 }

src/app/modules/ix-table/components/ix-table-body/cells/ix-cell-actions/ix-cell-actions.component.html

@@ -22,15 +22,26 @@
         [matTooltip]="action.dynamicTooltip ? (action.dynamicTooltip(row()) | async) : action.tooltip || ''"
       >
         @if (action.hidden ? !(action.hidden(row()) | async) : true) {
-          <button
-            mat-icon-button
-            [ixTest]="[uniqueRowTag(row()), action.iconName, 'row-action']"
-            [attr.aria-label]="(action.dynamicTooltip ? (action.dynamicTooltip(row()) | async) : action.tooltip || '') + ' ' + getAriaLabel(row())"
-            [disabled]="action.disabled ? (action.disabled(row()) | async) : false"
-            (click)="$event.stopPropagation(); action.onClick(row())"
-          >
-            <ix-icon [name]="action.iconName"></ix-icon>
-          </button>
+          @if (action?.dynamicText && (action.dynamicText(row()) | async); as dynamicText) {
+            <a
+              [tabIndex]="0"
+              [ixTest]="[uniqueRowTag(row()), action.iconName, 'row-action']"
+              (click)="$event.stopPropagation(); action.onClick(row())"
+              (keydown.enter)="$event.stopPropagation(); action.onClick(row())"
+            >
+              {{ dynamicText }}
+            </a>
+          } @else {
+            <button
+              mat-icon-button
+              [ixTest]="[uniqueRowTag(row()), action.iconName, 'row-action']"
+              [attr.aria-label]="(action.dynamicTooltip ? (action.dynamicTooltip(row()) | async) : action.tooltip || '') + ' ' + getAriaLabel(row())"
+              [disabled]="action.disabled ? (action.disabled(row()) | async) : false"
+              (click)="$event.stopPropagation(); action.onClick(row())"
+            >
+              <ix-icon [name]="action.iconName"></ix-icon>
+            </button>
+          }
         }
       </div>
     }

src/app/modules/ix-table/components/ix-table-body/cells/ix-cell-actions/ix-cell-actions.component.scss

@@ -1,11 +1,20 @@
 @import 'scss-imports/variables';
 
 .actions {
+  align-items: center;
   display: flex;
+  flex-wrap: wrap;
   gap: 0;
   justify-content: flex-end;
 
   @media(max-width: $breakpoint-sm) {
     flex-wrap: wrap;
   }
+
+  a {
+    color: var(--primary);
+    cursor: pointer;
+    margin: 0 8px;
+    text-decoration: underline;
+  }
 }

src/app/modules/ix-table/components/ix-table/cell.harness.ts

@@ -1,4 +1,4 @@
-import { ContentContainerComponentHarness } from '@angular/cdk/testing';
+import { ContentContainerComponentHarness, TestElement } from '@angular/cdk/testing';
 
 export class IxCellHarness extends ContentContainerComponentHarness {
   // TODO: Incorrect number of header cells when expand row icon is there.
@@ -8,4 +8,15 @@ export class IxCellHarness extends ContentContainerComponentHarness {
     const host = await this.host();
     return host.text();
   }
+
+  async getAnchorByText(text: string): Promise<TestElement | null> {
+    const anchors = await this.locatorForAll('a')();
+    for (const anchor of anchors) {
+      const anchorText = (await anchor.text()).trim();
+      if (anchorText === text) {
+        return anchor;
+      }
+    }
+    return null;
+  }
 }

src/app/pages/services/components/service-status-cell/service-status-cell.component.html

@@ -0,0 +1,3 @@
+<span>
+  {{ status() | mapValue: statusLabels | translate }}
+</span>

src/app/pages/services/components/service-status-cell/service-status-cell.component.scss

@@ -0,0 +1,23 @@
+:host {
+  box-sizing: border-box;
+  display: flex;
+
+  &.has-cell {
+    border: 2px solid transparent;
+    border-radius: 20px;
+    font-weight: bold;
+    gap: 6px;
+    max-width: max-content;
+    padding: 3px 8px;
+  }
+
+  &.running {
+    border-color: var(--green);
+    color: var(--green);
+  }
+
+  &.stopped {
+    border-color: var(--grey);
+    color: var(--grey);
+  }
+}