NAS-131390: Optimize apps widgets on dashboard (#10748)

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

@@ -2,12 +2,13 @@ import {
   createServiceFactory,
   SpectatorService,
 } from '@ngneat/spectator/jest';
+import { firstValueFrom } from 'rxjs';
 import { mockGlobalStore } from 'app/core/testing/classes/mock-global-store.service';
 import { mockCall, mockWebSocket } from 'app/core/testing/utils/mock-websocket.utils';
 import { App } from 'app/interfaces/app.interface';
 import { Pool } from 'app/interfaces/pool.interface';
 import { WidgetResourcesService } from 'app/pages/dashboard/services/widget-resources.service';
-import { appStore, poolStore } from 'app/services/global-store/stores.constant';
+import { poolStore } from 'app/services/global-store/stores.constant';
 
 const pools = [
   { id: 1, name: 'pool_1' },
@@ -25,6 +26,7 @@ describe('WidgetResourcesService', () => {
     service: WidgetResourcesService,
     providers: [
       mockWebSocket([
+        mockCall('app.query', apps),
         mockCall('replication.query'),
         mockCall('rsynctask.query'),
         mockCall('cloudsync.query'),
@@ -34,7 +36,6 @@ describe('WidgetResourcesService', () => {
       ]),
       mockGlobalStore([
         [poolStore, { callAndSubscribe: pools }],
-        [appStore, { call: apps }],
       ]),
     ],
   });
@@ -43,15 +44,11 @@ describe('WidgetResourcesService', () => {
     spectator = createService();
   });
 
-  it('returns pools', () => {
-    let poolsResponse: Pool[];
-    spectator.service.pools$.subscribe((response) => poolsResponse = response);
-    expect(poolsResponse).toEqual(pools);
+  it('returns pools', async () => {
+    expect(await firstValueFrom(spectator.service.pools$)).toEqual(pools);
   });
 
-  it('returns apps', () => {
-    let appsResponse: App[];
-    spectator.service.installedApps$.subscribe((response) => appsResponse = response.value);
-    expect(appsResponse).toEqual(apps);
+  it('returns apps', async () => {
+    expect(await firstValueFrom(spectator.service.installedApps$)).toEqual(apps);
   });
 });

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

@@ -17,7 +17,7 @@ import { Pool } from 'app/interfaces/pool.interface';
 import { ReportingData } from 'app/interfaces/reporting.interface';
 import { VolumesData, VolumeData } from 'app/interfaces/volume-data.interface';
 import { processNetworkInterfaces } from 'app/pages/dashboard/widgets/network/widget-interface/widget-interface.utils';
-import { appStore, poolStore } from 'app/services/global-store/stores.constant';
+import { poolStore } from 'app/services/global-store/stores.constant';
 import { WebSocketService } from 'app/services/ws.service';
 import { AppsState } from 'app/store';
 import { waitForSystemInfo } from 'app/store/system-info/system-info.selectors';
@@ -68,7 +68,9 @@ export class WidgetResourcesService {
     shareReplay({ bufferSize: 1, refCount: true }),
   );
 
-  readonly installedApps$ = inject(appStore).call.pipe(toLoadingState());
+  readonly installedApps$ = this.ws.callAndSubscribe('app.query').pipe(
+    shareReplay({ bufferSize: 1, refCount: true }),
+  );
 
   readonly pools$ = inject(poolStore).callAndSubscribe.pipe(
     shareReplay({ bufferSize: 1, refCount: true }),
@@ -145,12 +147,13 @@ export class WidgetResourcesService {
   }
 
   getApp(appName: string): Observable<LoadingState<App>> {
-    return this.ws.callAndSubscribe('app.query', [[['name', '=', appName]]]).pipe(
+    return this.installedApps$.pipe(
       map((apps) => {
-        if (apps.length === 0) {
+        const app = apps.find((installedApp) => installedApp.name === appName);
+        if (!app) {
           throw new Error(`App «${appName}» not found. Configure widget to choose another app.`);
         }
-        return apps[0];
+        return app;
       }),
       toLoadingState(),
       shareReplay({ bufferSize: 1, refCount: true }),

src/app/pages/dashboard/widgets/apps/widget-app-cpu/widget-app-cpu.component.scss

@@ -1,3 +1,17 @@
+:host ::ng-deep ix-with-loading-state-error {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  flex: 1;
+  font-size: 20px;
+  font-weight: bold;
+  height: 100%;
+  padding: 16px;
+  place-content: center center;
+  text-align: center;
+  width: 100%;
+}
+
 .card {
   height: 100%;
 

src/app/pages/dashboard/widgets/apps/widget-app-info/widget-app-info.component.scss

@@ -1,3 +1,17 @@
+:host ::ng-deep ix-with-loading-state-error {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  flex: 1;
+  font-size: 24px;
+  font-weight: bold;
+  height: 100%;
+  padding: 16px;
+  place-content: center center;
+  text-align: center;
+  width: 100%;
+}
+
 .card {
   height: 100%;
 

src/app/pages/dashboard/widgets/apps/widget-app-memory/widget-app-memory.component.scss

@@ -1,3 +1,17 @@
+:host ::ng-deep ix-with-loading-state-error {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  flex: 1;
+  font-size: 20px;
+  font-weight: bold;
+  height: 100%;
+  padding: 16px;
+  place-content: center center;
+  text-align: center;
+  width: 100%;
+}
+
 .card {
   height: 100%;
 

src/app/pages/dashboard/widgets/apps/widget-app-settings/widget-app-settings.component.spec.ts

@@ -24,20 +24,16 @@ describe('WidgetAppSettingsComponent', () => {
         updateSettings: jest.fn(),
       }),
       mockProvider(WidgetResourcesService, {
-        installedApps$: of({
-          isLoading: false,
-          error: null,
-          value: [{
-            id: 1,
-            name: 'App 1',
-          }, {
-            id: 2,
-            name: 'App 2',
-          }, {
-            id: 3,
-            name: 'App 3',
-          }],
-        }),
+        installedApps$: of([{
+          id: 1,
+          name: 'App 1',
+        }, {
+          id: 2,
+          name: 'App 2',
+        }, {
+          id: 3,
+          name: 'App 3',
+        }]),
       }),
     ],
   });

src/app/pages/dashboard/widgets/apps/widget-app-settings/widget-app-settings.component.ts

@@ -5,7 +5,7 @@ import { toSignal } from '@angular/core/rxjs-interop';
 import { Validators } from '@angular/forms';
 import { FormBuilder } from '@ngneat/reactive-forms';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
-import { filter, map, startWith } from 'rxjs';
+import { map, startWith } from 'rxjs';
 import { idNameArrayToOptions } from 'app/helpers/operators/options.operators';
 import { getAllFormErrors } from 'app/modules/forms/ix-forms/utils/get-form-errors.utils';
 import { WidgetResourcesService } from 'app/pages/dashboard/services/widget-resources.service';
@@ -26,8 +26,6 @@ export class WidgetAppSettingsComponent implements WidgetSettingsComponent<Widge
   });
 
   protected installedApps$ = this.resources.installedApps$.pipe(
-    filter((state) => !!state.value && !state.isLoading),
-    map((state) => state.value),
     startWith([]),
     idNameArrayToOptions(),
   );