NAS-131558: Change observable subscription

truenas · Dec 12, 2024 · cd2bcd9 · cd2bcd9
1 parent ecba8b5
commit cd2bcd9
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 20 deletions.
diff --git a/src/app/pages/dashboard/widgets/apps/widget-app/widget-app.component.html b/src/app/pages/dashboard/widgets/apps/widget-app/widget-app.component.html
@@ -15,25 +15,28 @@ <h3>{{ 'App' | translate }}</h3>
         [job]="job() | async"
       ></ix-app-card-info>
 
-      <ix-app-cpu-info
-        class="square"
-        [stats]="stats() | async"
-      ></ix-app-cpu-info>
-
-      <ix-app-network-info
-        class="rectangle"
-        [stats]="stats() | async"
-      ></ix-app-network-info>
-
-      <ix-app-memory-info
-        class="square"
-        [stats]="stats() | async"
-      ></ix-app-memory-info>
-
-      <ix-app-disk-info
-        class="rectangle"
-        [stats]="stats() | async"
-      ></ix-app-disk-info>
+      @if (stats$) {
+        <ix-app-cpu-info
+          class="square"
+          [stats]="stats$ | async"
+        ></ix-app-cpu-info>
+
+        <ix-app-network-info
+          class="rectangle"
+          [stats]="stats$ | async"
+        ></ix-app-network-info>
+
+        <ix-app-memory-info
+          class="square"
+          [stats]="stats$ | async"
+        ></ix-app-memory-info>
+
+        <ix-app-disk-info
+          class="rectangle"
+          [stats]="stats$ | async"
+        ></ix-app-disk-info>
+      }
+
     </div>
   </mat-card-content>
 </mat-card>

diff --git a/src/app/pages/dashboard/widgets/apps/widget-app/widget-app.component.ts b/src/app/pages/dashboard/widgets/apps/widget-app/widget-app.component.ts
@@ -2,9 +2,13 @@ import { AsyncPipe } from '@angular/common';
 import {
   Component, ChangeDetectionStrategy, input,
   computed,
+  effect,
 } from '@angular/core';
 import { MatCard, MatCardContent } from '@angular/material/card';
 import { TranslateModule } from '@ngx-translate/core';
+import { Observable } from 'rxjs';
+import { LoadingState } from 'app/helpers/operators/to-loading-state.helper';
+import { AppStats } from 'app/interfaces/app.interface';
 import { WithLoadingStateDirective } from 'app/modules/loader/directives/with-loading-state/with-loading-state.directive';
 import { AppCardLogoComponent } from 'app/pages/apps/components/app-card-logo/app-card-logo.component';
 import { WidgetResourcesService } from 'app/pages/dashboard/services/widget-resources.service';
@@ -46,7 +50,11 @@ export class WidgetAppComponent implements WidgetComponent<WidgetAppSettings> {
   appName = computed(() => this.settings().appName);
   app = computed(() => this.resources.getApp(this.appName()));
   job = computed(() => this.resources.getAppStatusUpdates(this.appName()));
-  stats = computed(() => this.resources.getAppStats(this.appName()));
+  stats$: Observable<LoadingState<AppStats>>;
+
+  effect = effect(() => {
+    this.stats$ = this.resources.getAppStats(this.appName());
+  });
 
   constructor(private resources: WidgetResourcesService) {}
 }