From cd2bcd9028d191de2a184a346a43b04ceea89c55 Mon Sep 17 00:00:00 2001
From: RehanY147 <rehanyousaf147@gmail.com>
Date: Thu, 12 Dec 2024 08:22:04 +0500
Subject: [PATCH 1/2] NAS-131558: Change observable subscription

---
 .../apps/widget-app/widget-app.component.html | 41 ++++++++++---------
 .../apps/widget-app/widget-app.component.ts   | 10 ++++-
 2 files changed, 31 insertions(+), 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
index 08b75095c60..2bb3ece19fa 100644
--- 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
index 62c5217d54d..b79105c5bf9 100644
--- 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) {}
 }

From 3aa9e5f62dd891057de96a314554326d32dacc6d Mon Sep 17 00:00:00 2001
From: RehanY147 <rehanyousaf147@gmail.com>
Date: Thu, 12 Dec 2024 08:49:41 +0500
Subject: [PATCH 2/2] NAS-131558: Fixed test

---
 .../apps/widget-app/widget-app.component.spec.ts  |  8 +++++---
 .../apps/widget-app/widget-app.component.ts       | 15 ++++++++++-----
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/app/pages/dashboard/widgets/apps/widget-app/widget-app.component.spec.ts b/src/app/pages/dashboard/widgets/apps/widget-app/widget-app.component.spec.ts
index 28f3832e271..197c91bc752 100644
--- a/src/app/pages/dashboard/widgets/apps/widget-app/widget-app.component.spec.ts
+++ b/src/app/pages/dashboard/widgets/apps/widget-app/widget-app.component.spec.ts
@@ -1,3 +1,4 @@
+import { fakeAsync } from '@angular/core/testing';
 import { createComponentFactory, mockProvider, Spectator } from '@ngneat/spectator/jest';
 import { MockComponents } from 'ng-mocks';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
@@ -67,7 +68,7 @@ describe('WidgetAppComponent', () => {
       mockProvider(WidgetResourcesService, {
         serverTime$: of(new Date()),
         getApp: () => of(app),
-        getAppStats: () => of(),
+        getAppStats: () => of({}),
         getAppStatusUpdates: () => of(),
       }),
       mockProvider(RedirectService, {
@@ -99,7 +100,8 @@ describe('WidgetAppComponent', () => {
     });
   });
 
-  it('checks components', () => {
+  it('checks components', fakeAsync(() => {
+    spectator.detectChanges();
     expect(spectator.query(AppControlsComponent)).toBeTruthy();
     expect(spectator.query(AppCardLogoComponent)).toBeTruthy();
     expect(spectator.query(AppCardInfoComponent)).toBeTruthy();
@@ -107,5 +109,5 @@ describe('WidgetAppComponent', () => {
     expect(spectator.query(AppMemoryInfoComponent)).toBeTruthy();
     expect(spectator.query(AppNetworkInfoComponent)).toBeTruthy();
     expect(spectator.query(AppDiskInfoComponent)).toBeTruthy();
-  });
+  }));
 });
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
index b79105c5bf9..da7fe4a616c 100644
--- 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
@@ -3,6 +3,7 @@ import {
   Component, ChangeDetectionStrategy, input,
   computed,
   effect,
+  ChangeDetectorRef,
 } from '@angular/core';
 import { MatCard, MatCardContent } from '@angular/material/card';
 import { TranslateModule } from '@ngx-translate/core';
@@ -47,14 +48,18 @@ export class WidgetAppComponent implements WidgetComponent<WidgetAppSettings> {
   size = input.required<SlotSize>();
   settings = input.required<WidgetAppSettings>();
 
-  appName = computed(() => this.settings().appName);
-  app = computed(() => this.resources.getApp(this.appName()));
-  job = computed(() => this.resources.getAppStatusUpdates(this.appName()));
-  stats$: Observable<LoadingState<AppStats>>;
+  protected appName = computed(() => this.settings().appName);
+  protected app = computed(() => this.resources.getApp(this.appName()));
+  protected job = computed(() => this.resources.getAppStatusUpdates(this.appName()));
+  protected stats$: Observable<LoadingState<AppStats>>;
 
   effect = effect(() => {
     this.stats$ = this.resources.getAppStats(this.appName());
+    this.cdr.markForCheck();
   });
 
-  constructor(private resources: WidgetResourcesService) {}
+  constructor(
+    private resources: WidgetResourcesService,
+    private cdr: ChangeDetectorRef,
+  ) {}
 }