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

src/app/pages/dashboard/services/widget-resources.service.ts

@@ -4,7 +4,7 @@ import { subHours, subMinutes } from 'date-fns';
 import {
   Observable, Subject, catchError, combineLatestWith, debounceTime,
   filter,
-  forkJoin, map, of, repeat, shareReplay, switchMap, take, throttleTime, timer,
+  forkJoin, map, of, repeat, shareReplay, startWith, switchMap, take, throttleTime, timer,
 } from 'rxjs';
 import { SystemUpdateStatus } from 'app/enums/system-update.enum';
 import { LoadingState, toLoadingState } from 'app/helpers/operators/to-loading-state.helper';
@@ -36,7 +36,7 @@ import { waitForSystemInfo } from 'app/store/system-info/system-info.selectors';
 export class WidgetResourcesService {
   readonly realtimeUpdates$ = this.api.subscribe('reporting.realtime');
 
-  readonly refreshInterval$ = timer(0, 5000);
+  readonly refreshInterval$ = timer(0, 5000).pipe(startWith(0));
   private readonly triggerRefreshSystemInfo$ = new Subject<void>();
 
   readonly backups$ = forkJoin([

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

@@ -113,16 +113,26 @@ <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>
+              <mat-list-item>
+                <div class="license-info">
+                  <div class="title">{{ 'Support License' | translate }}:</div>
+                  <div class="info">
+                    <div>
+                      {{
+                        '{license} Contract,' | translate:
+                        {
+                          license: systemInfo().license.contract_type | titlecase,
+                        }
+                      }}
+                    </div>
+                    <div>
+                      {{
+                        'Expires on {date}' | translate: { date: systemInfo().license.contract_end.$value }
+                      }}
+                    </div>
+                  </div>
+                </div>
+              </mat-list-item>
             </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.ts

@@ -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: [

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: systemInfo().license.contract_type | titlecase,
+                      }
+                    }}
+                  </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.ts

@@ -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: [

src/assets/i18n/af.json

@@ -1841,6 +1841,7 @@
   "Expiration Date": "",
   "Expires": "",
   "Expires at": "",
+  "Expires on {date}": "",
   "Export": "",
   "Export All Keys": "",
   "Export As {fileType}": "",
@@ -5231,7 +5232,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

@@ -1841,6 +1841,7 @@
   "Expiration Date": "",
   "Expires": "",
   "Expires at": "",
+  "Expires on {date}": "",
   "Export": "",
   "Export All Keys": "",
   "Export As {fileType}": "",
@@ -5231,7 +5232,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

@@ -1841,6 +1841,7 @@
   "Expiration Date": "",
   "Expires": "",
   "Expires at": "",
+  "Expires on {date}": "",
   "Export": "",
   "Export All Keys": "",
   "Export As {fileType}": "",
@@ -5231,7 +5232,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

@@ -1841,6 +1841,7 @@
   "Expiration Date": "",
   "Expires": "",
   "Expires at": "",
+  "Expires on {date}": "",
   "Export": "",
   "Export All Keys": "",
   "Export As {fileType}": "",
@@ -5231,7 +5232,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

@@ -1841,6 +1841,7 @@
   "Expiration Date": "",
   "Expires": "",
   "Expires at": "",
+  "Expires on {date}": "",
   "Export": "",
   "Export All Keys": "",
   "Export As {fileType}": "",
@@ -5231,7 +5232,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/bg.json

@@ -1841,6 +1841,7 @@
   "Expiration Date": "",
   "Expires": "",
   "Expires at": "",
+  "Expires on {date}": "",
   "Export": "",
   "Export All Keys": "",
   "Export As {fileType}": "",
@@ -5231,7 +5232,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/bn.json

@@ -1841,6 +1841,7 @@
   "Expiration Date": "",
   "Expires": "",
   "Expires at": "",
+  "Expires on {date}": "",
   "Export": "",
   "Export All Keys": "",
   "Export As {fileType}": "",
@@ -5231,7 +5232,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/br.json

@@ -1841,6 +1841,7 @@
   "Expiration Date": "",
   "Expires": "",
   "Expires at": "",
+  "Expires on {date}": "",
   "Export": "",
   "Export All Keys": "",
   "Export As {fileType}": "",
@@ -5231,7 +5232,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/bs.json

@@ -1841,6 +1841,7 @@
   "Expiration Date": "",
   "Expires": "",
   "Expires at": "",
+  "Expires on {date}": "",
   "Export": "",
   "Export All Keys": "",
   "Export As {fileType}": "",
@@ -5231,7 +5232,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/ca.json

@@ -1841,6 +1841,7 @@
   "Expiration Date": "",
   "Expires": "",
   "Expires at": "",
+  "Expires on {date}": "",
   "Export": "",
   "Export All Keys": "",
   "Export As {fileType}": "",
@@ -5231,7 +5232,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/cs.json

@@ -1411,6 +1411,7 @@
   "Expiration Date": "",
   "Expires": "",
   "Expires at": "",
+  "Expires on {date}": "",
   "Export": "",
   "Export All Keys": "",
   "Export As {fileType}": "",
@@ -4271,6 +4272,7 @@
   "iSCSI Service": "",
   "iXsystems does not audit or otherwise validate the contents of third-party applications catalogs.     It is incumbent on the user to verify that the new catalog is from a trusted source and that the third-party     properly audits its chart contents. Failure to exercise due diligence may expose the user and their data to     some or all of the following:<br/>    <ul>\n      <li>Malicious software</li>\n      <li>Broken services on TrueNAS host</li>\n      <li>Service disruption on TrueNAS host</li>\n      <li>Broken filesystem permissions on Host or within application</li>\n      <li>Unexpected deletion of user data</li>\n      <li>Unsafe service configuration in application</li>\n      <li>Degradation of TrueNAS host performance and stability</li>\n    </ul>": "",
   "{crontabDescription}, from {startHour} to {endHour}": "",
+  "{license} Contract,": "",
   "{n, plural, =0 {No keys} =1 {# key} other {# keys}}": "",
   "{n, plural, one {# CPU} other {# CPUs}}": "",
   "{n, plural, one {# Environment Variable} other {# Environment Variables} }": "",
@@ -5278,7 +5280,6 @@
   "{hours, plural, =1 {# hour} other {# hours}}": "{hours, plural, =1 {# hodina} other {# hodin}}",
   "{interfaceName} must start with \"{prefix}\" followed by an unique number": "{interfaceName} musí začínat \"{prefix}\" následovaným jedinečným číslem",
   "{key} Key": "{key} Klíč",
-  "{license} contract, expires {date}": "licenční smlouva, vyprší {date}",
   "{minutes, plural, =1 {# minute} other {# minutes}}": "{minutes, plural, =1 {# minuta} other {# minut}}",
   "{n, plural, =0 {No Errors} one {# Error} other {# Errors}}": "{n, plural, =0 {Žádné chyby} one {# Chyba} other {# Chyby}}",
   "{n, plural, =0 {No Tasks} one {# Task} other {# Tasks}} Configured": "{n, plural, =0 {Žádné úkoly} one {# Úkol} other {# Úkoly}} nakonfigurovány",

src/assets/i18n/cy.json

@@ -1841,6 +1841,7 @@
   "Expiration Date": "",
   "Expires": "",
   "Expires at": "",
+  "Expires on {date}": "",
   "Export": "",
   "Export All Keys": "",
   "Export As {fileType}": "",
@@ -5231,7 +5232,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/da.json

@@ -1841,6 +1841,7 @@
   "Expiration Date": "",
   "Expires": "",
   "Expires at": "",
+  "Expires on {date}": "",
   "Export": "",
   "Export All Keys": "",
   "Export As {fileType}": "",
@@ -5231,7 +5232,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/de.json

@@ -1291,6 +1291,7 @@
   "Expiration Date": "",
   "Expires": "",
   "Expires at": "",
+  "Expires on {date}": "",
   "Export All Keys": "",
   "Export Config": "",
   "Export Key": "",
@@ -3894,7 +3895,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": "",