NAS-128451 / 24.10 / Port WidgetSysInfoComponent to new dashboard (#1…

…0047) * NAS-128451: Port WidgetSysInfoComponent to new dashboard * NAS-128451: Port WidgetSysInfoComponent to new dashboard * NAS-128451: Port WidgetSysInfoComponent to new dashboard * NAS-128451: Port WidgetSysInfoComponent to new dashboard * NAS-128451: Port WidgetSysInfoComponent to new dashboard * NAS-128451: Port WidgetSysInfoComponent to new dashboard * NAS-128451: Port WidgetSysInfoComponent to new dashboard * NAS-128451: Port WidgetSysInfoComponent to new dashboard * NAS-128451: Port WidgetSysInfoComponent to new dashboard * NAS-128451: Port WidgetSysInfoComponent to new dashboard * NAS-128451: Port WidgetSysInfoComponent to new dashboard * NAS-128451: Port WidgetSysInfoComponent to new dashboard * NAS-128451: Port WidgetSysInfoComponent to new dashboard * NAS-128451: Port WidgetSysInfoComponent to new dashboard * NAS-128451: Port WidgetSysInfoComponent to new dashboard * NAS-128451: Port WidgetSysInfoComponent to new dashboard * NAS-128451: Port WidgetSysInfoComponent to new dashboard * NAS-128451: Port WidgetSysInfoComponent to new dashboard * NAS-128451: Port WidgetSysInfoComponent to new dashboard
truenas · May 20, 2024 · 59ccfd0 · 59ccfd0
1 parent 930a6a8
commit 59ccfd0
Show file tree

Hide file tree

Showing 132 changed files with 1,952 additions and 141 deletions.
diff --git a/src/app/constants/server-series.constant.ts b/src/app/constants/server-series.constant.ts
@@ -0,0 +1,67 @@
+interface MiniSeries {
+  pathImg: string;
+  images: string[];
+  isRackmount: boolean;
+}
+
+export const serverSeries = [
+  'H10',
+  'M30',
+  'M40',
+  'M50',
+  'M60',
+  'X10',
+  'X20',
+  'Z20',
+  'Z30',
+  'Z35',
+  'Z50',
+  'R10',
+  'R20',
+  'R30',
+  'R40',
+  'R50',
+  'F60',
+  'F100',
+  'F130',
+];
+
+export const miniSeries: Record<string, MiniSeries> = {
+  mini: {
+    pathImg: 'freenas_mini_cropped.png',
+    images: [
+      'FREENAS-MINI-2.0',
+      'FREENAS-MINI-3.0-E',
+      'FREENAS-MINI-3.0-E+',
+      'TRUENAS-MINI-3.0-E',
+      'TRUENAS-MINI-3.0-E+',
+    ],
+    isRackmount: false,
+  },
+  miniX: {
+    pathImg: 'freenas_mini_x_cropped.png',
+    images: [
+      'FREENAS-MINI-3.0-X',
+      'FREENAS-MINI-3.0-X+',
+      'TRUENAS-MINI-3.0-X',
+      'TRUENAS-MINI-3.0-X+',
+    ],
+    isRackmount: false,
+  },
+  miniXL: {
+    pathImg: 'freenas_mini_xl_cropped.png',
+    images: [
+      'FREENAS-MINI-XL',
+      'FREENAS-MINI-3.0-XL+',
+      'TRUENAS-MINI-3.0-XL+',
+    ],
+    isRackmount: false,
+  },
+  miniR: {
+    pathImg: 'servers/MINI-R.png',
+    images: [
+      'TRUENAS-MINI-R',
+    ],
+    isRackmount: true,
+  },
+};
diff --git a/src/app/constants/time.constant.ts b/src/app/constants/time.constant.ts
@@ -0,0 +1,2 @@
+export const oneHourMillis = 60 * 60 * 1000;
+export const oneDayMillis = 24 * oneHourMillis;
diff --git a/src/app/core/core-components.module.ts b/src/app/core/core-components.module.ts
@@ -17,7 +17,6 @@ import { TextLimiterDirective } from 'app/core/components/directives/text-limite
 import { FormatDateTimePipe } from 'app/core/pipes/format-datetime.pipe';
 import { MapValuePipe } from 'app/core/pipes/map-value.pipe';
 import { ScheduleToCrontabPipe } from 'app/core/pipes/schedule-to-crontab.pipe';
-import { UptimePipe } from 'app/core/pipes/uptime.pipe';
 import { YesNoPipe } from 'app/core/pipes/yes-no.pipe';
 import { CommonDirectivesModule } from 'app/directives/common/common-directives.module';
 import { IxIconModule } from 'app/modules/ix-icon/ix-icon.module';
@@ -54,7 +53,6 @@ import { CleanLinkPipe } from './pipes/clean-link.pipe';
     CleanLinkPipe,
     ScheduleToCrontabPipe,
     DragHandleComponent,
-    UptimePipe,
   ],
   exports: [
     TextLimiterTooltipComponent,
@@ -72,7 +70,6 @@ import { CleanLinkPipe } from './pipes/clean-link.pipe';
     YesNoPipe,
     CleanLinkPipe,
     ScheduleToCrontabPipe,
-    UptimePipe,
   ],
   providers: [
     StorageService,

diff --git a/src/app/core/pipes/format-datetime.pipe.spec.ts b/src/app/core/pipes/format-datetime.pipe.spec.ts
@@ -52,4 +52,13 @@ describe('FormatDateTimePipe', () => {
     });
     expect(spectator.element).toHaveExactText('2023-06-20 06:55:04');
   });
+
+  it('omits date format if empty string is passed', () => {
+    spectator = createPipe('{{ inputValue | formatDateTime:" ":"HH:mm" }}', {
+      hostProps: {
+        inputValue,
+      },
+    });
+    expect(spectator.element).toHaveExactText('15:03');
+  });
 });
diff --git a/src/app/core/pipes/format-datetime.pipe.ts b/src/app/core/pipes/format-datetime.pipe.ts
@@ -83,6 +83,9 @@ export class FormatDateTimePipe implements PipeTransform {
       if (this.timeFormat) {
         this.timeFormat = this.timeFormat.replace(' A', ' aa');
       }
+      if (this.dateFormat === ' ') {
+        return format(localDate, this.timeFormat);
+      }
       return format(localDate, `${this.dateFormat} ${this.timeFormat}`);
     } catch {
       return 'Invalid date';

diff --git a/src/app/interfaces/system-info.interface.ts b/src/app/interfaces/system-info.interface.ts
@@ -2,6 +2,7 @@ import { Codename } from 'app/enums/codename.enum';
 import { LicenseFeature } from 'app/enums/license-feature.enum';
 import { ApiDate, ApiTimestamp } from 'app/interfaces/api-date.interface';
 
+// TODO: Split mixed interface for system.info and webui.main.dashboard.sys_info
 export interface SystemInfo {
   platform: string;
   boottime: ApiTimestamp;

diff --git a/...ponents/ix-table-body/cells/ix-cell-relative-date/ix-cell-relative-date.component.spec.ts b/...ponents/ix-table-body/cells/ix-cell-relative-date/ix-cell-relative-date.component.spec.ts
@@ -2,6 +2,7 @@ import { Spectator } from '@ngneat/spectator';
 import { createComponentFactory, mockProvider } from '@ngneat/spectator/jest';
 import { Store } from '@ngrx/store';
 import { of } from 'rxjs';
+import { oneDayMillis } from 'app/constants/time.constant';
 import { FakeFormatDateTimePipe } from 'app/core/testing/classes/fake-format-datetime.pipe';
 import { IxCellRelativeDateComponent } from 'app/modules/ix-table/components/ix-table-body/cells/ix-cell-relative-date/ix-cell-relative-date.component';
 import { IxTableModule } from 'app/modules/ix-table/ix-table.module';
@@ -26,7 +27,7 @@ describe('IxCellRelativeDateComponent', () => {
   beforeEach(() => {
     spectator = createComponent();
     spectator.component.propertyName = 'dateField';
-    spectator.component.setRow({ dateField: new Date(new Date().getTime() - (24 * 60 * 60 * 10000)) });
+    spectator.component.setRow({ dateField: new Date(new Date().getTime() - (oneDayMillis * 10)) });
     spectator.component.rowTestId = () => '';
     spectator.detectChanges();
   });

diff --git a/src/app/modules/jobs/store/job.selectors.ts b/src/app/modules/jobs/store/job.selectors.ts
@@ -77,5 +77,15 @@ export const selectJobsPanelSlice = createSelector(
 
 export const selectUpdateJob = createSelector(
   selectRunningJobs,
-  (jobs) => jobs.filter((job) => job.method === 'update.update' || job.method === 'failover.upgrade'),
+  (jobs: Job[]) => jobs.filter((job) => job.method === 'update.update' || job.method === 'failover.upgrade'),
+);
+
+export const selectUpdateJobForActiveNode = createSelector(
+  selectRunningJobs,
+  (jobs: Job[]) => jobs.find((job) => job.method === 'update.update'),
+);
+
+export const selectUpdateJobForPassiveNode = createSelector(
+  selectRunningJobs,
+  (jobs: Job[]) => jobs.find((job) => job.method === 'failover.upgrade'),
 );
diff --git a/src/app/pages/dashboard-old/components/widget-sys-info/widget-sys-info.component.spec.ts b/src/app/pages/dashboard-old/components/widget-sys-info/widget-sys-info.component.spec.ts
@@ -19,6 +19,7 @@ import { SystemUpdateStatus } from 'app/enums/system-update.enum';
 import { SystemInfo, SystemLicense } from 'app/interfaces/system-info.interface';
 import { SystemUpdate } from 'app/interfaces/system-update.interface';
 import { IxIconComponent } from 'app/modules/ix-icon/ix-icon.component';
+import { UptimePipe } from 'app/pages/dashboard/widgets/system/common/uptime.pipe';
 import { SimpleFailoverBtnComponent } from 'app/pages/dashboard-old/components/widget-sys-info/simple-failover-btn.component';
 import { WidgetSysInfoComponent } from 'app/pages/dashboard-old/components/widget-sys-info/widget-sys-info.component';
 import { SystemGeneralService } from 'app/services/system-general.service';
@@ -75,6 +76,7 @@ describe('WidgetSysInfoComponent', () => {
     imports: [
       MatGridListModule,
       ImgFallbackModule,
+      UptimePipe,
     ],
     declarations: [
       MockComponent(DragHandleComponent),

diff --git a/src/app/pages/dashboard-old/components/widget-sys-info/widget-sys-info.component.ts b/src/app/pages/dashboard-old/components/widget-sys-info/widget-sys-info.component.ts
@@ -9,6 +9,7 @@ import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { Store } from '@ngrx/store';
 import { TranslateService } from '@ngx-translate/core';
 import { filter, map, take } from 'rxjs/operators';
+import { oneDayMillis } from 'app/constants/time.constant';
 import { JobState } from 'app/enums/job-state.enum';
 import { ProductEnclosure } from 'app/enums/product-enclosure.enum';
 import { SystemUpdateStatus } from 'app/enums/system-update.enum';
@@ -20,8 +21,8 @@ import {
   DialogService,
 } from 'app/modules/dialog/dialog.service';
 import { AppLoaderService } from 'app/modules/loader/app-loader.service';
+import { getMiniImagePath, getServerProduct } from 'app/pages/dashboard/widgets/system/common/widget-sys-info.utils';
 import { WidgetComponent } from 'app/pages/dashboard-old/components/widget/widget.component';
-import { ProductImageService } from 'app/services/product-image.service';
 import { SystemGeneralService } from 'app/services/system-general.service';
 import { ThemeService } from 'app/services/theme/theme.service';
 import { WebSocketService } from 'app/services/ws.service';
@@ -97,7 +98,6 @@ export class WidgetSysInfoComponent extends WidgetComponent implements OnInit, O
     public loader: AppLoaderService,
     public dialogService: DialogService,
     private store$: Store<AppState>,
-    private productImgServ: ProductImageService,
     private ws: WebSocketService,
     private cdr: ChangeDetectorRef,
     private breakpointObserver: BreakpointObserver,
@@ -224,9 +224,9 @@ export class WidgetSysInfoComponent extends WidgetComponent implements OnInit, O
     } else if (this.systemInfo.platform.includes('CERTIFIED')) {
       this.certified = true;
     } else {
-      const product = this.productImgServ.getServerProduct(this.systemInfo.platform);
+      const product = getServerProduct(this.systemInfo.platform);
       this.productImage = product ? `/servers/${product}.png` : 'ix-original.svg';
-      this.productModel = product || '';
+      this.productModel = product;
       this.productEnclosure = ProductEnclosure.Rackmount;
     }
 
@@ -241,7 +241,7 @@ export class WidgetSysInfoComponent extends WidgetComponent implements OnInit, O
       this.certified = true;
       return;
     }
-    this.productImage = this.productImgServ.getMiniImagePath(sysProduct) || '';
+    this.productImage = getMiniImagePath(sysProduct);
   }
 
   goToEnclosure(): void {
@@ -255,10 +255,9 @@ export class WidgetSysInfoComponent extends WidgetComponent implements OnInit, O
    * limit the check to once a day
    */
   private checkForUpdate(): void {
-    const oneDay = 24 * 60 * 60 * 1000;
     if (
       sessionStorage.updateLastChecked
-      && Number(sessionStorage.updateLastChecked) + oneDay > Date.now()
+      && Number(sessionStorage.updateLastChecked) + oneDayMillis > Date.now()
     ) {
       this.updateAvailable = sessionStorage.updateAvailable === 'true';
       return;

diff --git a/src/app/pages/dashboard-old/dashboard-old.module.ts b/src/app/pages/dashboard-old/dashboard-old.module.ts
@@ -28,6 +28,7 @@ import { IxIconModule } from 'app/modules/ix-icon/ix-icon.module';
 import { IxTableModule } from 'app/modules/ix-table/ix-table.module';
 import { LayoutModule } from 'app/modules/layout/layout.module';
 import { TestIdModule } from 'app/modules/test-id/test-id.module';
+import { UptimePipe } from 'app/pages/dashboard/widgets/system/common/uptime.pipe';
 import { DashboardComponent } from 'app/pages/dashboard-old/components/dashboard/dashboard.component';
 import { DashboardFormComponent } from 'app/pages/dashboard-old/components/dashboard-form/dashboard-form.component';
 import { WidgetBackupComponent } from 'app/pages/dashboard-old/components/widget-backup/widget-backup.component';
@@ -40,9 +41,7 @@ import { WidgetNicComponent } from 'app/pages/dashboard-old/components/widget-ni
 import { WidgetPoolComponent } from 'app/pages/dashboard-old/components/widget-pool/widget-pool.component';
 import { WidgetPoolWrapperComponent } from 'app/pages/dashboard-old/components/widget-pool-wrapper/widget-pool-wrapper.component';
 import { WidgetStorageComponent } from 'app/pages/dashboard-old/components/widget-storage/widget-storage.component';
-import {
-  SimpleFailoverBtnComponent,
-} from 'app/pages/dashboard-old/components/widget-sys-info/simple-failover-btn.component';
+import { SimpleFailoverBtnComponent } from 'app/pages/dashboard-old/components/widget-sys-info/simple-failover-btn.component';
 import { WidgetSysInfoComponent } from 'app/pages/dashboard-old/components/widget-sys-info/widget-sys-info.component';
 import { routing } from 'app/pages/dashboard-old/dashboard-old.routing';
 import { DashboardStorageStore } from 'app/pages/dashboard-old/store/dashboard-storage-store.service';
@@ -80,6 +79,7 @@ import { ResourcesUsageStore } from 'app/pages/dashboard-old/store/resources-usa
     IxTableModule,
     EmptyComponent,
     InterfaceStatusIconComponent,
+    UptimePipe,
   ],
   declarations: [
     DashboardComponent,

diff --git a/src/app/pages/dashboard/dashboard.module.ts b/src/app/pages/dashboard/dashboard.module.ts
@@ -10,6 +10,7 @@ import { MatListModule } from '@angular/material/list';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { BaseChartDirective } from 'ng2-charts';
+import { ImgFallbackModule } from 'ngx-img-fallback';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { CoreComponents } from 'app/core/core-components.module';
 import { CommonDirectivesModule } from 'app/directives/common/common-directives.module';
@@ -43,10 +44,13 @@ import { BackupTaskActionsComponent } from 'app/pages/dashboard/widgets/backup/w
 import { BackupTaskEmptyComponent } from 'app/pages/dashboard/widgets/backup/widget-backup/backup-task-empty/backup-task-empty.component';
 import { BackupTaskTileComponent } from 'app/pages/dashboard/widgets/backup/widget-backup/backup-task-tile/backup-task-tile.component';
 import { WidgetDatapointComponent } from 'app/pages/dashboard/widgets/common/widget-datapoint/widget-datapoint.component';
+import { ProductImageComponent } from 'app/pages/dashboard/widgets/system/common/product-image/product-image.component';
+import { UptimePipe } from 'app/pages/dashboard/widgets/system/common/uptime.pipe';
 
 @NgModule({
   declarations: [
     DashboardComponent,
+    ProductImageComponent,
     WidgetGroupComponent,
     WidgetErrorComponent,
     WidgetGroupFormComponent,
@@ -64,6 +68,7 @@ import { WidgetDatapointComponent } from 'app/pages/dashboard/widgets/common/wid
     WidgetResourcesService,
   ],
   imports: [
+    CoreComponents,
     IxFormsModule,
     ReactiveFormsModule,
     TranslateModule,
@@ -98,9 +103,11 @@ import { WidgetDatapointComponent } from 'app/pages/dashboard/widgets/common/wid
     ChartsModule,
     MatListModule,
     EmptyComponent,
+    ImgFallbackModule,
     ChartsModule,
     InterfaceStatusIconComponent,
     IxFileSizeModule,
+    UptimePipe,
   ],
 })
 export class DashboardModule {

diff --git a/src/app/pages/dashboard/services/dashboard.store.ts b/src/app/pages/dashboard/services/dashboard.store.ts
@@ -113,16 +113,16 @@ export class DashboardStore extends ComponentStore<DashboardState> {
 
   private getWidgetTypeFromOldDashboard(name: WidgetName): WidgetType {
     const unknownWidgetType = name as unknown as WidgetType;
-
     // TODO: we have some widgets that are not yet implemented for the new dashboard
     switch (name) {
       case WidgetName.Help: return WidgetType.Help;
       case WidgetName.Memory: return WidgetType.Memory;
       case WidgetName.Interface: return WidgetType.InterfaceIp;
+      case WidgetName.SystemInformation: return WidgetType.SystemInfoActive;
+      case WidgetName.SystemInformationStandby: return WidgetType.SystemInfoPassive;
       case WidgetName.Network: return WidgetType.Network;
       case WidgetName.Backup: return WidgetType.BackupTasks;
       case WidgetName.Cpu: return WidgetType.Cpu;
-      case WidgetName.SystemInformation: return unknownWidgetType;
       case WidgetName.Storage: return unknownWidgetType;
       case WidgetName.Pool: return unknownWidgetType;
       default: return unknownWidgetType;

diff --git a/src/app/pages/dashboard/services/demo-widgets.constant.ts b/src/app/pages/dashboard/services/demo-widgets.constant.ts
@@ -2,6 +2,18 @@ import { WidgetGroup, WidgetGroupLayout } from 'app/pages/dashboard/types/widget
 import { Widget, WidgetType } from 'app/pages/dashboard/types/widget.interface';
 
 export const demoWidgets: WidgetGroup[] = [
+  {
+    layout: WidgetGroupLayout.Full,
+    slots: [
+      { type: WidgetType.SystemInfoActive },
+    ],
+  },
+  {
+    layout: WidgetGroupLayout.Full,
+    slots: [
+      { type: WidgetType.SystemInfoPassive },
+    ],
+  },
   {
     layout: WidgetGroupLayout.Full,
     slots: [
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const oneHourMillis = 60 * 60 * 1000;
		export const oneDayMillis = 24 * oneHourMillis;