NAS-132626 / 25.04 / Fix styles for contract mentions on sys-info widgets on the dashboard

src/app/interfaces/system-info.interface.ts

@@ -33,7 +33,7 @@ export interface SystemLicense {
   addhw_detail: unknown[];
   contract_end: ApiDate;
   contract_start: ApiDate;
-  contract_type: string;
+  contract_type: ContractType;
   customer_name: string;
   expired: boolean;
   features: LicenseFeature[];
@@ -43,3 +43,28 @@ export interface SystemLicense {
   system_serial: string;
   system_serial_ha: string;
 }
+
+export enum ContractType {
+  Gold = 'GOLD',
+  SilverInternational = 'SILVERINTERNATIONAL',
+  Legacy = 'LEGACY',
+  Standard = 'STANDARD',
+  Bronze = 'BRONZE',
+  Silver = 'SILVER',
+  FreeNasCertified = 'FREENASCERTIFIED',
+  FreeNasMini = 'FREENASMINI',
+}
+
+export function getLabelForContractType(contractType: ContractType): string {
+  const contractTypeToLabelsMap: Record<ContractType, string> = {
+    [ContractType.Gold]: 'Gold',
+    [ContractType.Legacy]: 'Legacy',
+    [ContractType.Standard]: 'Standard',
+    [ContractType.Bronze]: 'Bronze',
+    [ContractType.Silver]: 'Silver',
+    [ContractType.FreeNasCertified]: 'Free NAS Certified',
+    [ContractType.FreeNasMini]: 'Free NAS Mini',
+    [ContractType.SilverInternational]: 'Silver International',
+  };
+  return contractTypeToLabelsMap[contractType] || contractType;
+}

src/app/pages/dashboard/widgets/system/widget-sys-info-active/widget-sys-info-active.component.html

@@ -113,16 +113,24 @@ <h3>{{ 'System Information' | translate }}</h3>
 
           @if (systemInfo()?.license) {
             <mat-list-item>
-              <strong>{{ 'Support License' | translate }}:</strong>
-                <span>
-                  {{
-                    '{license} contract, expires {date}' | translate:
-                    {
-                      license: systemInfo().license.contract_type | titlecase,
-                      date: systemInfo().license.contract_end.$value,
-                    }
-                  }}
-                </span>
+              <div class="license-info">
+                <div class="title">{{ 'Support License' | translate }}:</div>
+                <div class="info">
+                  <div>
+                    {{
+                      '{license} Contract,' | translate:
+                      {
+                        license: getLabelForContractType(systemInfo().license.contract_type),
+                      }
+                    }}
+                  </div>
+                  <div>
+                    {{
+                      'Expires on {date}' | translate: { date: systemInfo().license.contract_end.$value }
+                    }}
+                  </div>
+                </div>
+              </div>
             </mat-list-item>
           }
 

src/app/pages/dashboard/widgets/system/widget-sys-info-active/widget-sys-info-active.component.scss

@@ -0,0 +1,20 @@
+.license-info {
+  display: flex;
+  gap: 10px;
+  width: 100%;
+
+  .title {
+    font-weight: bold;
+    height: 100%;
+  }
+
+  .info {
+    width: 100%;
+  }
+
+  div {
+    span {
+      display: inline-block;
+    }
+  }
+}

src/app/pages/dashboard/widgets/system/widget-sys-info-active/widget-sys-info-active.component.spec.ts

@@ -10,7 +10,7 @@ import { mockAuth } from 'app/core/testing/utils/mock-auth.utils';
 import { Codename } from 'app/enums/codename.enum';
 import { ProductType } from 'app/enums/product-type.enum';
 import { LoadingState } from 'app/helpers/operators/to-loading-state.helper';
-import { SystemLicense, SystemInfo } from 'app/interfaces/system-info.interface';
+import { SystemLicense, SystemInfo, ContractType } from 'app/interfaces/system-info.interface';
 import { selectUpdateJobForActiveNode } from 'app/modules/jobs/store/job.selectors';
 import { LocaleService } from 'app/modules/language/locale.service';
 import { WidgetResourcesService } from 'app/pages/dashboard/services/widget-resources.service';
@@ -33,7 +33,7 @@ describe('WidgetSysInfoActiveComponent', () => {
     version: 'TrueNAS-SCALE-24.10.0-MASTER-20240301-233006',
     codename: Codename.ElectricEel,
     license: {
-      contract_type: 'BEST',
+      contract_type: ContractType.Gold,
       contract_end: {
         $type: 'date',
         $value: '2025-01-01',
@@ -122,7 +122,7 @@ describe('WidgetSysInfoActiveComponent', () => {
     expect(items).toEqual([
       'Platform: TRUENAS-M40-HA',
       'Version: ElectricEel-24.10.0-MASTER-20240301-233006',
-      'Support License: Best contract, expires 2025-01-01',
+      'Support License: Gold Contract,  Expires on 2025-01-01',
       'System Serial: AA-00001',
       'Hostname: test-hostname-a',
       'Uptime: 23 hours 12 minutes as of 10:34',

src/app/pages/dashboard/widgets/system/widget-sys-info-active/widget-sys-info-active.component.ts

@@ -1,4 +1,3 @@
-import { TitleCasePipe } from '@angular/common';
 import {
   Component, ChangeDetectionStrategy, input,
   computed,
@@ -13,6 +12,7 @@ import { Store } from '@ngrx/store';
 import { TranslateModule } from '@ngx-translate/core';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { filter, map } from 'rxjs';
+import { getLabelForContractType } from 'app/interfaces/system-info.interface';
 import { CopyButtonComponent } from 'app/modules/buttons/copy-button/copy-button.component';
 import { iconMarker } from 'app/modules/ix-icon/icon-marker.util';
 import { IxIconComponent } from 'app/modules/ix-icon/ix-icon.component';
@@ -33,7 +33,7 @@ import {
 @Component({
   selector: 'ix-widget-sys-info-active',
   templateUrl: './widget-sys-info-active.component.html',
-  styleUrls: ['../common/widget-sys-info.scss'],
+  styleUrls: ['../common/widget-sys-info.scss', './widget-sys-info-active.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
@@ -52,7 +52,6 @@ import {
     CopyButtonComponent,
     TranslateModule,
     UptimePipe,
-    TitleCasePipe,
   ],
 })
 export class WidgetSysInfoActiveComponent {
@@ -63,6 +62,7 @@ export class WidgetSysInfoActiveComponent {
   isHaLicensed = toSignal(this.store$.select(selectIsHaLicensed));
   hasEnclosureSupport = toSignal(this.store$.select(selectHasEnclosureSupport));
   isUpdateRunning = toSignal(this.store$.select(selectUpdateJobForActiveNode));
+  protected readonly getLabelForContractType = getLabelForContractType;
 
   updateAvailable = toSignal(this.resources.updateAvailable$);
   systemInfo = toSignal(this.resources.systemInfo$.pipe(

src/app/pages/dashboard/widgets/system/widget-sys-info-passive/widget-sys-info-passive.component.html

@@ -107,16 +107,24 @@ <h3>{{ 'System Information' | translate }} <small>{{ 'standby' | translate }}</s
 
           @if (systemInfo()?.license) {
             <mat-list-item>
-              <strong>{{ 'Support License' | translate }}:</strong>
-              <span>
-                {{
-                  '{license} contract, expires {date}' | translate:
-                  {
-                    license: systemInfo().license.contract_type | titlecase,
-                    date: systemInfo().license.contract_end.$value,
-                  }
-                }}
-              </span>
+              <div class="license-info">
+                <div class="title">{{ 'Support License' | translate }}:</div>
+                <div class="info">
+                  <div>
+                    {{
+                      '{license} Contract,' | translate:
+                      {
+                        license: getLabelForContractType(systemInfo().license.contract_type),
+                      }
+                    }}
+                  </div>
+                  <div>
+                    {{
+                      'Expires on {date}' | translate: { date: systemInfo().license.contract_end.$value }
+                    }}
+                  </div>
+                </div>
+              </div>
             </mat-list-item>
           }
 

src/app/pages/dashboard/widgets/system/widget-sys-info-passive/widget-sys-info-passive.component.scss

@@ -0,0 +1,20 @@
+.license-info {
+  display: flex;
+  gap: 10px;
+  width: 100%;
+
+  .title {
+    font-weight: bold;
+    height: 100%;
+  }
+
+  .info {
+    width: 100%;
+  }
+
+  div {
+    span {
+      display: inline-block;
+    }
+  }
+}

src/app/pages/dashboard/widgets/system/widget-sys-info-passive/widget-sys-info-passive.component.spec.ts

@@ -10,7 +10,7 @@ import { mockAuth } from 'app/core/testing/utils/mock-auth.utils';
 import { Codename } from 'app/enums/codename.enum';
 import { ProductType } from 'app/enums/product-type.enum';
 import { LoadingState } from 'app/helpers/operators/to-loading-state.helper';
-import { SystemLicense, SystemInfo } from 'app/interfaces/system-info.interface';
+import { SystemLicense, SystemInfo, ContractType } from 'app/interfaces/system-info.interface';
 import { DialogService } from 'app/modules/dialog/dialog.service';
 import { selectUpdateJobForPassiveNode } from 'app/modules/jobs/store/job.selectors';
 import { LocaleService } from 'app/modules/language/locale.service';
@@ -37,7 +37,7 @@ describe('WidgetSysInfoPassiveComponent', () => {
       version: 'TrueNAS-SCALE-24.10.0-MASTER-20240301-233006',
       codename: Codename.ElectricEel,
       license: {
-        contract_type: 'BEST',
+        contract_type: ContractType.Gold,
         contract_end: {
           $type: 'date',
           $value: '2025-01-01',
@@ -133,7 +133,7 @@ describe('WidgetSysInfoPassiveComponent', () => {
       expect(items).toEqual([
         'Platform: TRUENAS-M40-HA',
         'Version: ElectricEel-24.10.0-MASTER-20240301-233006',
-        'Support License: Best contract, expires 2025-01-01',
+        'Support License: Gold Contract,  Expires on 2025-01-01',
         'System Serial: AA-00002',
         'Hostname: test-hostname-b',
         'Uptime: 1 minute 17 seconds as of 10:34',

src/app/pages/dashboard/widgets/system/widget-sys-info-passive/widget-sys-info-passive.component.ts

@@ -1,4 +1,3 @@
-import { TitleCasePipe } from '@angular/common';
 import {
   ChangeDetectionStrategy, Component, computed, effect, input,
 } from '@angular/core';
@@ -18,6 +17,7 @@ import {
 import { RequiresRolesDirective } from 'app/directives/requires-roles/requires-roles.directive';
 import { Role } from 'app/enums/role.enum';
 import { helptextSystemFailover } from 'app/helptext/system/failover';
+import { getLabelForContractType } from 'app/interfaces/system-info.interface';
 import { CopyButtonComponent } from 'app/modules/buttons/copy-button/copy-button.component';
 import { DialogService } from 'app/modules/dialog/dialog.service';
 import { iconMarker } from 'app/modules/ix-icon/icon-marker.util';
@@ -40,7 +40,7 @@ import {
 @Component({
   selector: 'ix-widget-sys-info-passive',
   templateUrl: './widget-sys-info-passive.component.html',
-  styleUrls: ['../common/widget-sys-info.scss'],
+  styleUrls: ['../common/widget-sys-info.scss', './widget-sys-info-passive.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
@@ -58,7 +58,6 @@ import {
     CopyButtonComponent,
     TranslateModule,
     UptimePipe,
-    TitleCasePipe,
   ],
 })
 export class WidgetSysInfoPassiveComponent {
@@ -73,6 +72,7 @@ export class WidgetSysInfoPassiveComponent {
   isHaEnabled = toSignal(this.store$.select(selectIsHaEnabled));
   hasEnclosureSupport = toSignal(this.store$.select(selectHasEnclosureSupport));
   isUpdateRunning = toSignal(this.store$.select(selectUpdateJobForPassiveNode));
+  protected readonly getLabelForContractType = getLabelForContractType;
 
   updateAvailable = toSignal(this.resources.updateAvailable$);
   systemInfo = toSignal(this.resources.systemInfo$.pipe(

src/app/pages/system/general-settings/support/sys-info/sys-info.component.html

@@ -13,7 +13,7 @@
     </div>
     <div class="sys-info-row">
       <span class="label">{{ 'Contract Type' | translate }}:</span>
-      <span class="value">{{ license.contract_type }}</span>
+      <span class="value">{{ getLabelForContractType(license.contract_type) }}</span>
     </div>
     <div class="sys-info-row">
       <span class="label">{{ 'Expiration Date' | translate }}:</span>

src/app/pages/system/general-settings/support/sys-info/sys-info.component.spec.ts

@@ -72,7 +72,7 @@ describe('SysInfoComponent', () => {
       'Licensed Serials:': licenseInfo.system_serial,
       'System Serial:': systemInfo.system_serial,
       'Features:': licenseInfo.features.join(', '),
-      'Contract Type:': licenseInfo.contract_type,
+      'Contract Type:': 'Gold',
       'Expiration Date:': `${licenseInfo.expiration_date} ( EXPIRED )`,
       'Additional Hardware:': licenseInfo.add_hardware,
     });

src/app/pages/system/general-settings/support/sys-info/sys-info.component.ts

@@ -2,6 +2,7 @@ import {
   ChangeDetectionStrategy, Component, input,
 } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
+import { getLabelForContractType } from 'app/interfaces/system-info.interface';
 import { LicenseInfoInSupport } from 'app/pages/system/general-settings/support/license-info-in-support.interface';
 import { SystemInfoInSupport } from 'app/pages/system/general-settings/support/system-info-in-support.interface';
 
@@ -16,4 +17,6 @@ export class SysInfoComponent {
   readonly hasLicense = input<boolean>();
   readonly licenseInfo = input<LicenseInfoInSupport>();
   readonly systemInfo = input.required<SystemInfoInSupport>();
+
+  protected readonly getLabelForContractType = getLabelForContractType;
 }

src/assets/i18n/af.json

@@ -1842,6 +1842,7 @@
   "Experimental": "",
   "Expiration Date": "",
   "Expires On": "",
+  "Expires on {date}": "",
   "Export": "",
   "Export All Keys": "",
   "Export As {fileType}": "",
@@ -5262,7 +5263,7 @@
   "{hours, plural, =1 {# hour} other {# hours}}": "",
   "{interfaceName} must start with \"{prefix}\" followed by an unique number": "",
   "{key} Key": "",
-  "{license} contract, expires {date}": "",
+  "{license} Contract,": "",
   "{minutes, plural, =1 {# minute} other {# minutes}}": "",
   "{n, plural, =0 {No Errors} one {# Error} other {# Errors}}": "",
   "{n, plural, =0 {No Tasks} one {# Task} other {# Tasks}} Configured": "",

src/assets/i18n/ar.json

@@ -1842,6 +1842,7 @@
   "Experimental": "",
   "Expiration Date": "",
   "Expires On": "",
+  "Expires on {date}": "",
   "Export": "",
   "Export All Keys": "",
   "Export As {fileType}": "",
@@ -5262,7 +5263,7 @@
   "{hours, plural, =1 {# hour} other {# hours}}": "",
   "{interfaceName} must start with \"{prefix}\" followed by an unique number": "",
   "{key} Key": "",
-  "{license} contract, expires {date}": "",
+  "{license} Contract,": "",
   "{minutes, plural, =1 {# minute} other {# minutes}}": "",
   "{n, plural, =0 {No Errors} one {# Error} other {# Errors}}": "",
   "{n, plural, =0 {No Tasks} one {# Task} other {# Tasks}} Configured": "",

src/assets/i18n/ast.json

@@ -1842,6 +1842,7 @@
   "Experimental": "",
   "Expiration Date": "",
   "Expires On": "",
+  "Expires on {date}": "",
   "Export": "",
   "Export All Keys": "",
   "Export As {fileType}": "",
@@ -5262,7 +5263,7 @@
   "{hours, plural, =1 {# hour} other {# hours}}": "",
   "{interfaceName} must start with \"{prefix}\" followed by an unique number": "",
   "{key} Key": "",
-  "{license} contract, expires {date}": "",
+  "{license} Contract,": "",
   "{minutes, plural, =1 {# minute} other {# minutes}}": "",
   "{n, plural, =0 {No Errors} one {# Error} other {# Errors}}": "",
   "{n, plural, =0 {No Tasks} one {# Task} other {# Tasks}} Configured": "",

src/assets/i18n/az.json

@@ -1842,6 +1842,7 @@
   "Experimental": "",
   "Expiration Date": "",
   "Expires On": "",
+  "Expires on {date}": "",
   "Export": "",
   "Export All Keys": "",
   "Export As {fileType}": "",
@@ -5262,7 +5263,7 @@
   "{hours, plural, =1 {# hour} other {# hours}}": "",
   "{interfaceName} must start with \"{prefix}\" followed by an unique number": "",
   "{key} Key": "",
-  "{license} contract, expires {date}": "",
+  "{license} Contract,": "",
   "{minutes, plural, =1 {# minute} other {# minutes}}": "",
   "{n, plural, =0 {No Errors} one {# Error} other {# Errors}}": "",
   "{n, plural, =0 {No Tasks} one {# Task} other {# Tasks}} Configured": "",

src/assets/i18n/be.json

@@ -1842,6 +1842,7 @@
   "Experimental": "",
   "Expiration Date": "",
   "Expires On": "",
+  "Expires on {date}": "",
   "Export": "",
   "Export All Keys": "",
   "Export As {fileType}": "",
@@ -5262,7 +5263,7 @@
   "{hours, plural, =1 {# hour} other {# hours}}": "",
   "{interfaceName} must start with \"{prefix}\" followed by an unique number": "",
   "{key} Key": "",
-  "{license} contract, expires {date}": "",
+  "{license} Contract,": "",
   "{minutes, plural, =1 {# minute} other {# minutes}}": "",
   "{n, plural, =0 {No Errors} one {# Error} other {# Errors}}": "",
   "{n, plural, =0 {No Tasks} one {# Task} other {# Tasks}} Configured": "",