NAS-128451: Port WidgetSysInfoComponent to new dashboard

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

@@ -38,6 +38,7 @@ export class WidgetResourcesService {
   );
 
   readonly systemInfo$ = this.ws.call('webui.main.dashboard.sys_info').pipe(
+    toLoadingState(),
     shareReplay({ bufferSize: 1, refCount: true }),
   );
 

src/app/pages/dashboard/widgets/network/widget-hostname/widget-hostname.component.ts

@@ -1,7 +1,6 @@
 import {
   ChangeDetectionStrategy, Component, input,
 } from '@angular/core';
-import { toLoadingState } from 'app/helpers/operators/to-loading-state.helper';
 import { WidgetResourcesService } from 'app/pages/dashboard/services/widget-resources.service';
 import { WidgetComponent } from 'app/pages/dashboard/types/widget-component.interface';
 import {
@@ -19,7 +18,7 @@ export class WidgetHostnameComponent implements WidgetComponent {
   size = input.required<SlotSize>();
   readonly name = hostnameWidget.name;
 
-  systemInfo$ = this.resources.systemInfo$.pipe(toLoadingState());
+  systemInfo$ = this.resources.systemInfo$;
 
   constructor(
     private resources: WidgetResourcesService,

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

@@ -13,6 +13,7 @@ import { FakeFormatDateTimePipe } from 'app/core/testing/classes/fake-format-dat
 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 { selectUpdateJobForActiveNode } from 'app/modules/jobs/store/job.selectors';
 import { WidgetResourcesService } from 'app/pages/dashboard/services/widget-resources.service';
@@ -63,7 +64,11 @@ describe('WidgetSysInfoActiveComponent', () => {
     providers: [
       mockAuth(),
       mockProvider(WidgetResourcesService, {
-        systemInfo$: of(systemInfo),
+        systemInfo$: of({
+          isLoading: false,
+          error: null,
+          value: systemInfo,
+        } as LoadingState<SystemInfo>),
         updateAvailable$: of(true),
         refreshInteval$: of(0),
       }),

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

@@ -4,6 +4,7 @@ import {
 } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { Store } from '@ngrx/store';
+import { filter, map } from 'rxjs';
 import { selectUpdateJobForActiveNode } from 'app/modules/jobs/store/job.selectors';
 import { WidgetResourcesService } from 'app/pages/dashboard/services/widget-resources.service';
 import { SlotSize } from 'app/pages/dashboard/types/widget.interface';
@@ -30,7 +31,10 @@ export class WidgetSysInfoActiveComponent {
   isUpdateRunning = toSignal(this.store$.select(selectUpdateJobForActiveNode));
 
   updateAvailable = toSignal(this.resources.updateAvailable$);
-  systemInfo = toSignal(this.resources.systemInfo$);
+  systemInfo = toSignal(this.resources.systemInfo$.pipe(
+    filter((state) => !state.isLoading),
+    map((state) => state.value),
+  ));
   elapsedTenSecondsInterval = toSignal(this.resources.refreshInteval$);
 
   version = computed(() => getSystemVersion(this.systemInfo().version, this.systemInfo().codename));

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

@@ -14,6 +14,7 @@ import { FakeFormatDateTimePipe } from 'app/core/testing/classes/fake-format-dat
 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 { DialogService } from 'app/modules/dialog/dialog.service';
 import { selectUpdateJobForPassiveNode } from 'app/modules/jobs/store/job.selectors';
@@ -70,7 +71,11 @@ describe('WidgetSysInfoPassiveComponent', () => {
       mockProvider(DialogService),
       mockProvider(Router),
       mockProvider(WidgetResourcesService, {
-        systemInfo$: of(systemInfo),
+        systemInfo$: of({
+          isLoading: false,
+          error: null,
+          value: systemInfo,
+        } as LoadingState<SystemInfo>),
         refreshInteval$: of(0),
         updateAvailable$: of(true),
       }),

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

@@ -41,7 +41,10 @@ export class WidgetSysInfoPassiveComponent {
 
   elapsedTenSecondsInterval = toSignal(this.resources.refreshInteval$);
   updateAvailable = toSignal(this.resources.updateAvailable$);
-  systemInfo = toSignal(this.resources.systemInfo$.pipe(map((sysInfo) => sysInfo.remote_info)));
+  systemInfo = toSignal(this.resources.systemInfo$.pipe(
+    filter((state) => !state.isLoading),
+    map((state) => state.value.remote_info),
+  ));
 
   version = computed(() => getSystemVersion(this.systemInfo().version, this.systemInfo().codename));
   uptime = computed(() => this.systemInfo().uptime_seconds + (this.elapsedTenSecondsInterval() * 10));