NAS-132239: Make it clearer what ports mean in app workloads (#10969)

src/app/enums/boot-environment-active.enum.ts

@@ -1,7 +1,7 @@
 export enum BootEnvironmentActive {
   Now = 'N',
   Restart = 'R',
-  NowReboot = 'NR',
+  NowRestart = 'NR',
   Dash = '-',
   Empty = '',
 }

src/app/helptext/apps/apps.ts

@@ -258,4 +258,8 @@ export const helptextApps = {
      process may stall as images cannot be pulled. The current limit will be renewed in {seconds}. The application\
       can still be staged for installation.'),
   },
+
+  ports: T('Host ports are listed on the left and associated container ports are on the right.\
+  \
+  0.0.0.0 on the host side represents binding to any IP address on the host.'),
 };

src/app/modules/tooltip/tooltip.component.html

@@ -33,5 +33,6 @@ <h5 class="tooltip-title">
     [popperTrigger]="'click' | cast"
     [popper]="popperTooltip"
     [popperShowOnStart]="false"
+    [popperPlacement]="placement()"
   ></ix-icon>
 </div>

src/app/modules/tooltip/tooltip.component.ts

@@ -2,7 +2,7 @@ import {
   ChangeDetectionStrategy, Component, input,
 } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
-import { NgxPopperjsModule } from 'ngx-popperjs';
+import { NgxPopperjsModule, NgxPopperjsPlacements } from 'ngx-popperjs';
 import { IxIconComponent } from 'app/modules/ix-icon/ix-icon.component';
 import { CastPipe } from 'app/modules/pipes/cast/cast.pipe';
 import { TestDirective } from 'app/modules/test-id/test.directive';
@@ -24,4 +24,11 @@ import { TestDirective } from 'app/modules/test-id/test.directive';
 export class TooltipComponent {
   readonly message = input<string>();
   readonly header = input<string>();
+
+  // Conversion here just allows us to use enum values as string without having to import the enum
+  readonly placement = input<NgxPopperjsPlacements, `${NgxPopperjsPlacements}`>(NgxPopperjsPlacements.AUTO, {
+    transform: (value) => {
+      return value as NgxPopperjsPlacements;
+    },
+  });
 }

src/app/pages/apps/components/installed-apps/app-workloads-card/app-workloads-card.component.html

@@ -6,7 +6,14 @@ <h3 mat-card-title>
   </mat-card-header>
   <mat-card-content>
     <div class="details-item">
-      <div class="label">{{ 'Ports' | translate }}:</div>
+      <div class="label">
+        {{ 'Ports' | translate }}
+        <ix-tooltip
+          class="ports-tooltip"
+          placement="left"
+          [message]="helptext.ports"
+        ></ix-tooltip>
+      </div>
       <div class="value">
         @for (port of hostPorts(); track port.hostPort) {
           <div>

src/app/pages/apps/components/installed-apps/app-workloads-card/app-workloads-card.component.scss

@@ -6,6 +6,7 @@
 
   .details-item .label {
     align-self: flex-start;
+    margin-right: 10px;
   }
 
   .details-item .value {
@@ -17,10 +18,11 @@
 
 .with-tooltip {
   cursor: help;
-  text-decoration: underline;
-  text-decoration-color: var(--alt-fg1);
-  text-decoration-style: dotted;
-  text-underline-offset: 2px;
+}
+
+.ports-tooltip {
+  margin-left: -2px;
+  vertical-align: -3px;
 }
 
 .separator {

src/app/pages/apps/components/installed-apps/app-workloads-card/app-workloads-card.component.spec.ts

@@ -101,7 +101,7 @@ describe('AppContainersCardComponent', () => {
     const details = spectator.queryAll('.details-item');
     expect(details).toHaveLength(1);
 
-    expect(details[0].querySelector('.label')).toHaveText('Ports:');
+    expect(details[0].querySelector('.label')).toHaveText('Ports');
     expect(details[0].querySelector('.value')).toHaveText('tcp://0.0.0.0:20489:20489');
     expect(details[0].querySelector('.value')).toHaveText('tcp://0.0.0.0:8080:80');
   });

src/app/pages/apps/components/installed-apps/app-workloads-card/app-workloads-card.component.ts

@@ -14,13 +14,15 @@ import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { RequiresRolesDirective } from 'app/directives/requires-roles/requires-roles.directive';
 import { AppState } from 'app/enums/app-state.enum';
 import { Role } from 'app/enums/role.enum';
+import { helptextApps } from 'app/helptext/apps/apps';
 import {
   App, AppContainerDetails, appContainerStateLabels,
 } from 'app/interfaces/app.interface';
 import { ShellDetailsDialogFormValue } from 'app/interfaces/shell-details-dialog.interface';
 import { IxIconComponent } from 'app/modules/ix-icon/ix-icon.component';
 import { MapValuePipe } from 'app/modules/pipes/map-value/map-value.pipe';
 import { TestDirective } from 'app/modules/test-id/test.directive';
+import { TooltipComponent } from 'app/modules/tooltip/tooltip.component';
 import {
   VolumeMountsDialogComponent,
 } from 'app/pages/apps/components/installed-apps/app-workloads-card/volume-mounts-dialog/volume-mounts-dialog.component';
@@ -47,6 +49,7 @@ import { ShellDetailsType } from 'app/pages/apps/enum/shell-details-type.enum';
     MatIconButton,
     MatCardContent,
     DecimalPipe,
+    TooltipComponent,
   ],
 })
 export class AppWorkloadsCardComponent {
@@ -56,6 +59,7 @@ export class AppWorkloadsCardComponent {
 
   protected readonly requiredRoles = [Role.AppsWrite];
   protected readonly appContainerStateLabels = appContainerStateLabels;
+  protected readonly helptext = helptextApps;
 
   constructor(
     private matDialog: MatDialog,

src/app/pages/system/bootenv/bootenv-list/bootenv-list.component.ts

@@ -122,7 +122,7 @@ export class BootEnvironmentListComponent implements OnInit {
             return this.translate.instant('Now');
           case BootEnvironmentActive.Restart:
             return this.translate.instant('Restart');
-          case BootEnvironmentActive.NowReboot:
+          case BootEnvironmentActive.NowRestart:
             return this.translate.instant('Now/Restart');
           default:
             return row.active;
@@ -149,7 +149,9 @@ export class BootEnvironmentListComponent implements OnInit {
           iconName: iconMarker('mdi-check-decagram'),
           requiredRoles: this.requiredRoles,
           tooltip: this.translate.instant('Activate'),
-          hidden: (row) => of(row.active.includes('R')),
+          hidden: (row) => {
+            return of([BootEnvironmentActive.NowRestart, BootEnvironmentActive.Restart].includes(row.active));
+          },
           onClick: (row) => this.doActivate(row),
         },
         {

src/assets/i18n/af.json

@@ -2083,6 +2083,7 @@
   "Host Sync": "",
   "Host name of second TrueNAS controller.": "",
   "Host name or IP address of the central key server.": "",
+  "Host ports are listed on the left and associated container ports are on the right.    0.0.0.0 on the host side represents binding to any IP address on the host.": "",
   "Host: {host}": "",
   "Hostname": "",
   "Hostname (TrueNAS Controller 2)": "",

src/assets/i18n/ar.json

@@ -2083,6 +2083,7 @@
   "Host Sync": "",
   "Host name of second TrueNAS controller.": "",
   "Host name or IP address of the central key server.": "",
+  "Host ports are listed on the left and associated container ports are on the right.    0.0.0.0 on the host side represents binding to any IP address on the host.": "",
   "Host: {host}": "",
   "Hostname": "",
   "Hostname (TrueNAS Controller 2)": "",

src/assets/i18n/ast.json

@@ -2083,6 +2083,7 @@
   "Host Sync": "",
   "Host name of second TrueNAS controller.": "",
   "Host name or IP address of the central key server.": "",
+  "Host ports are listed on the left and associated container ports are on the right.    0.0.0.0 on the host side represents binding to any IP address on the host.": "",
   "Host: {host}": "",
   "Hostname": "",
   "Hostname (TrueNAS Controller 2)": "",

src/assets/i18n/az.json

@@ -2083,6 +2083,7 @@
   "Host Sync": "",
   "Host name of second TrueNAS controller.": "",
   "Host name or IP address of the central key server.": "",
+  "Host ports are listed on the left and associated container ports are on the right.    0.0.0.0 on the host side represents binding to any IP address on the host.": "",
   "Host: {host}": "",
   "Hostname": "",
   "Hostname (TrueNAS Controller 2)": "",

src/assets/i18n/be.json

@@ -2083,6 +2083,7 @@
   "Host Sync": "",
   "Host name of second TrueNAS controller.": "",
   "Host name or IP address of the central key server.": "",
+  "Host ports are listed on the left and associated container ports are on the right.    0.0.0.0 on the host side represents binding to any IP address on the host.": "",
   "Host: {host}": "",
   "Hostname": "",
   "Hostname (TrueNAS Controller 2)": "",

src/assets/i18n/bg.json

@@ -2083,6 +2083,7 @@
   "Host Sync": "",
   "Host name of second TrueNAS controller.": "",
   "Host name or IP address of the central key server.": "",
+  "Host ports are listed on the left and associated container ports are on the right.    0.0.0.0 on the host side represents binding to any IP address on the host.": "",
   "Host: {host}": "",
   "Hostname": "",
   "Hostname (TrueNAS Controller 2)": "",

src/assets/i18n/bn.json

@@ -2083,6 +2083,7 @@
   "Host Sync": "",
   "Host name of second TrueNAS controller.": "",
   "Host name or IP address of the central key server.": "",
+  "Host ports are listed on the left and associated container ports are on the right.    0.0.0.0 on the host side represents binding to any IP address on the host.": "",
   "Host: {host}": "",
   "Hostname": "",
   "Hostname (TrueNAS Controller 2)": "",

src/assets/i18n/br.json

@@ -2083,6 +2083,7 @@
   "Host Sync": "",
   "Host name of second TrueNAS controller.": "",
   "Host name or IP address of the central key server.": "",
+  "Host ports are listed on the left and associated container ports are on the right.    0.0.0.0 on the host side represents binding to any IP address on the host.": "",
   "Host: {host}": "",
   "Hostname": "",
   "Hostname (TrueNAS Controller 2)": "",

src/assets/i18n/bs.json

@@ -2083,6 +2083,7 @@
   "Host Sync": "",
   "Host name of second TrueNAS controller.": "",
   "Host name or IP address of the central key server.": "",
+  "Host ports are listed on the left and associated container ports are on the right.    0.0.0.0 on the host side represents binding to any IP address on the host.": "",
   "Host: {host}": "",
   "Hostname": "",
   "Hostname (TrueNAS Controller 2)": "",

src/assets/i18n/ca.json

@@ -2083,6 +2083,7 @@
   "Host Sync": "",
   "Host name of second TrueNAS controller.": "",
   "Host name or IP address of the central key server.": "",
+  "Host ports are listed on the left and associated container ports are on the right.    0.0.0.0 on the host side represents binding to any IP address on the host.": "",
   "Host: {host}": "",
   "Hostname": "",
   "Hostname (TrueNAS Controller 2)": "",

src/assets/i18n/cs.json

@@ -1610,6 +1610,7 @@
   "Host Sync": "",
   "Host name of second TrueNAS controller.": "",
   "Host name or IP address of the central key server.": "",
+  "Host ports are listed on the left and associated container ports are on the right.    0.0.0.0 on the host side represents binding to any IP address on the host.": "",
   "Host: {host}": "",
   "Hostname (TrueNAS Controller 2)": "",
   "Hostname Database": "",

src/assets/i18n/cy.json

@@ -2083,6 +2083,7 @@
   "Host Sync": "",
   "Host name of second TrueNAS controller.": "",
   "Host name or IP address of the central key server.": "",
+  "Host ports are listed on the left and associated container ports are on the right.    0.0.0.0 on the host side represents binding to any IP address on the host.": "",
   "Host: {host}": "",
   "Hostname": "",
   "Hostname (TrueNAS Controller 2)": "",

src/assets/i18n/da.json

@@ -2083,6 +2083,7 @@
   "Host Sync": "",
   "Host name of second TrueNAS controller.": "",
   "Host name or IP address of the central key server.": "",
+  "Host ports are listed on the left and associated container ports are on the right.    0.0.0.0 on the host side represents binding to any IP address on the host.": "",
   "Host: {host}": "",
   "Hostname": "",
   "Hostname (TrueNAS Controller 2)": "",

src/assets/i18n/de.json

@@ -1460,6 +1460,7 @@
   "Host Sync": "",
   "Host name of second TrueNAS controller.": "",
   "Host name or IP address of the central key server.": "",
+  "Host ports are listed on the left and associated container ports are on the right.    0.0.0.0 on the host side represents binding to any IP address on the host.": "",
   "Hostname (TrueNAS Controller 2)": "",
   "Hostname Database": "",
   "Hostname Database:": "",

src/assets/i18n/dsb.json

@@ -2083,6 +2083,7 @@
   "Host Sync": "",
   "Host name of second TrueNAS controller.": "",
   "Host name or IP address of the central key server.": "",
+  "Host ports are listed on the left and associated container ports are on the right.    0.0.0.0 on the host side represents binding to any IP address on the host.": "",
   "Host: {host}": "",
   "Hostname": "",
   "Hostname (TrueNAS Controller 2)": "",

src/assets/i18n/el.json

@@ -2083,6 +2083,7 @@
   "Host Sync": "",
   "Host name of second TrueNAS controller.": "",
   "Host name or IP address of the central key server.": "",
+  "Host ports are listed on the left and associated container ports are on the right.    0.0.0.0 on the host side represents binding to any IP address on the host.": "",
   "Host: {host}": "",
   "Hostname": "",
   "Hostname (TrueNAS Controller 2)": "",

src/assets/i18n/en-au.json

@@ -2083,6 +2083,7 @@
   "Host Sync": "",
   "Host name of second TrueNAS controller.": "",
   "Host name or IP address of the central key server.": "",
+  "Host ports are listed on the left and associated container ports are on the right.    0.0.0.0 on the host side represents binding to any IP address on the host.": "",
   "Host: {host}": "",
   "Hostname": "",
   "Hostname (TrueNAS Controller 2)": "",

src/assets/i18n/en-gb.json

@@ -2083,6 +2083,7 @@
   "Host Sync": "",
   "Host name of second TrueNAS controller.": "",
   "Host name or IP address of the central key server.": "",
+  "Host ports are listed on the left and associated container ports are on the right.    0.0.0.0 on the host side represents binding to any IP address on the host.": "",
   "Host: {host}": "",
   "Hostname": "",
   "Hostname (TrueNAS Controller 2)": "",

src/assets/i18n/en.json

@@ -2083,6 +2083,7 @@
   "Host Sync": "",
   "Host name of second TrueNAS controller.": "",
   "Host name or IP address of the central key server.": "",
+  "Host ports are listed on the left and associated container ports are on the right.    0.0.0.0 on the host side represents binding to any IP address on the host.": "",
   "Host: {host}": "",
   "Hostname": "",
   "Hostname (TrueNAS Controller 2)": "",

src/assets/i18n/eo.json

@@ -2083,6 +2083,7 @@
   "Host Sync": "",
   "Host name of second TrueNAS controller.": "",
   "Host name or IP address of the central key server.": "",
+  "Host ports are listed on the left and associated container ports are on the right.    0.0.0.0 on the host side represents binding to any IP address on the host.": "",
   "Host: {host}": "",
   "Hostname": "",
   "Hostname (TrueNAS Controller 2)": "",