truenas · denysbutenko · Aug 9, 2024 · Jul 30, 2024 · Jul 31, 2024 · Aug 1, 2024
diff --git a/src/app/pages/apps/services/applications.service.ts b/src/app/pages/apps/services/applications.service.ts
@@ -131,7 +131,7 @@ export class ApplicationsService {
           switchMap(() => this.startApplication(app.name)),
         );
       case ChartReleaseStatus.Stopped:
-        return this.startApplication(app.name).pipe();
+        return this.startApplication(app.name);
       case ChartReleaseStatus.Deploying:
       default:
         return EMPTY;

@@ -45,6 +45,11 @@ import { routing } from 'app/pages/dashboard/dashboard.routing';
 import { DashboardStore } from 'app/pages/dashboard/services/dashboard.store';
 import { WidgetResourcesService } from 'app/pages/dashboard/services/widget-resources.service';
 import { widgetComponents } from 'app/pages/dashboard/widgets/all-widgets.constant';
+import { AppCardInfoComponent } from 'app/pages/dashboard/widgets/apps/common/app-card-info/app-card-info.component';
+import { AppControlsComponent } from 'app/pages/dashboard/widgets/apps/common/app-controls/app-controls.component';
+import { AppCpuInfoComponent } from 'app/pages/dashboard/widgets/apps/common/app-cpu-info/app-cpu-info.component';
+import { AppMemoryInfoComponent } from 'app/pages/dashboard/widgets/apps/common/app-memory-info/app-memory-info.component';
+import { AppNetworkInfoComponent } from 'app/pages/dashboard/widgets/apps/common/app-network-info/app-network-info.component';
 import { BackupTaskActionsComponent } from 'app/pages/dashboard/widgets/backup/widget-backup/backup-task-actions/backup-task-actions.component';
 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';
@@ -82,6 +87,11 @@ import { PoolUsageGaugeComponent } from './widgets/storage/widget-pool/common/po
     DisksWithZfsErrorsComponent,
     PoolStatusComponent,
     LastScanErrorsComponent,
+    AppCardInfoComponent,
+    AppMemoryInfoComponent,
+    AppCpuInfoComponent,
+    AppNetworkInfoComponent,
+    AppControlsComponent,
     ...widgetComponents,
   ],
   providers: [

@@ -7,9 +7,12 @@ import {
 } from 'rxjs';
 import { SystemUpdateStatus } from 'app/enums/system-update.enum';
 import { toLoadingState } from 'app/helpers/operators/to-loading-state.helper';
+import { ApiEvent } from 'app/interfaces/api-message.interface';
+import { ChartScaleResult, ChartScaleQueryParams } from 'app/interfaces/chart-release-event.interface';
 import { ChartRelease, ChartReleaseStats } from 'app/interfaces/chart-release.interface';
 import { Dataset } from 'app/interfaces/dataset.interface';
 import { Disk } from 'app/interfaces/disk.interface';
+import { Job } from 'app/interfaces/job.interface';
 import { Pool } from 'app/interfaces/pool.interface';
 import { ReportingData } from 'app/interfaces/reporting.interface';
 import { VolumesData, VolumeData } from 'app/interfaces/volume-data.interface';
@@ -167,6 +170,16 @@ export class WidgetResourcesService {
     );
   }
 
+  getAppStatusUpdates(appName: string): Observable<Job<ChartScaleResult, ChartScaleQueryParams>> {
+    return this.ws.subscribe('core.get_jobs').pipe(
+      filter((event: ApiEvent<Job<ChartScaleResult, ChartScaleQueryParams>>) => {
+        return event.fields.method === 'chart.release.scale';
+      }),
+      filter((event) => event?.fields?.arguments[0] === appName),
+      map((event) => event.fields),
+    );
+  }
+
   constructor(
     private ws: WebSocketService,
     private store$: Store<AppState>,

@@ -7,6 +7,10 @@
  */
 export enum WidgetType {
   App = 'app',
+  AppInfo = 'app-info',
+  AppMemory = 'app-memory',
+  AppCpu = 'app-cpu',
+  AppNetwork = 'app-network',
   Ipv4Address = 'ipv4-address',
   Ipv6Address = 'ipv6-address',
   Help = 'help',

@@ -1,5 +1,9 @@
 import { WidgetType } from 'app/pages/dashboard/types/widget.interface';
 import { appWidget } from 'app/pages/dashboard/widgets/apps/widget-app/widget-app.definition';
+import { appCpuWidget } from 'app/pages/dashboard/widgets/apps/widget-app-cpu/widget-app-cpu.definition';
+import { appInfoWidget } from 'app/pages/dashboard/widgets/apps/widget-app-info/widget-app-info.definition';
+import { appMemoryWidget } from 'app/pages/dashboard/widgets/apps/widget-app-memory/widget-app-memory.definition';
+import { appNetworkWidget } from 'app/pages/dashboard/widgets/apps/widget-app-network/widget-app-network.definition';
 import { backupTasksWidget } from 'app/pages/dashboard/widgets/backup/widget-backup/widget-backup.definition';
 import { cpuWidget } from 'app/pages/dashboard/widgets/cpu/widget-cpu/widget-cpu.definition';
 import { cpuTemperatureBarWidget } from 'app/pages/dashboard/widgets/cpu/widget-cpu-temperature-bar/widget-cpu-temperature-bar.definition';
@@ -36,6 +40,10 @@ import { systemUptimeWidget } from 'app/pages/dashboard/widgets/system/widget-sy
 export const widgetComponents = [
   appWidget.component,
   appWidget.settingsComponent,
+  appInfoWidget.component,
+  appMemoryWidget.component,
+  appCpuWidget.component,
+  appNetworkWidget.component,
   ipv4AddressWidget.component,
   ipv4AddressWidget.settingsComponent,
   helpWidget.component,
@@ -69,6 +77,10 @@ export const widgetComponents = [
 
 export const widgetRegistry = {
   [WidgetType.App]: appWidget,
+  [WidgetType.AppInfo]: appInfoWidget,
+  [WidgetType.AppMemory]: appMemoryWidget,
+  [WidgetType.AppCpu]: appCpuWidget,
+  [WidgetType.AppNetwork]: appNetworkWidget,
   [WidgetType.Pool]: poolWidget,
   [WidgetType.PoolUsageGauge]: poolUsageGaugeWidget,
   [WidgetType.PoolStatus]: poolStatusWidget,

@@ -0,0 +1,17 @@
+<div class="app-header">
+  <h3 *ixWithLoadingState="app() as app" class="name">{{ app.name }}</h3>
+  <div *ixWithLoadingState="app() as app" class="version">v{{ app.chart_metadata?.appVersion }}</div>
+</div>
+<div class="app-status">
+  <ix-app-status-cell
+    *ixWithLoadingState="app() as app"
+    [app]="app"
+    [job]="job()"
+    [showIcon]="true"
+  ></ix-app-status-cell>
+  <ix-app-update-cell
+    *ixWithLoadingState="app() as app"
+    [app]="app"
+    [showIcon]="true"
+  ></ix-app-update-cell>
+</div>
@@ -0,0 +1,49 @@
+:host {
+  background: var(--bg1);
+  display: inline-flex;
+  flex: 1 1 70%;
+  flex-direction: column;
+  max-width: 70%;
+
+  .app-header {
+    align-items: baseline;
+    border-bottom: 1px solid var(--lines);
+    display: flex;
+    justify-content: space-between;
+    min-height: 48px;
+    padding: 8px;
+  }
+
+  .app-status {
+    display: flex;
+    flex-direction: column;
+    font-size: 16px;
+    font-weight: bold;
+    padding: 8px 12px;
+
+    ix-app-update-cell {
+      gap: 8px;
+    }
+
+    ::ng-deep ix-with-loading-state-loader {
+      height: 24px;
+      margin-bottom: 4px;
+      margin-top: 4px;
+    }
+  }
+
+  .ix-icon {
+    &.mdi-check-circle {
+      color: var(--green);
+    }
+
+    &.mdi-progress-wrench,
+    &.mdi-alert-circle {
+      color: var(--yellow);
+    }
+
+    &.mdi-stop-circle {
+      color: var(--red);
+    }
+  }
+}
@@ -0,0 +1,46 @@
+import { Spectator } from '@ngneat/spectator';
+import { createComponentFactory } from '@ngneat/spectator/jest';
+import { MockComponents } from 'ng-mocks';
+import { LoadingState } from 'app/helpers/operators/to-loading-state.helper';
+import { ChartScaleResult, ChartScaleQueryParams } from 'app/interfaces/chart-release-event.interface';
+import { ChartRelease } from 'app/interfaces/chart-release.interface';
+import { Job } from 'app/interfaces/job.interface';
+import { AppStatusCellComponent } from 'app/pages/apps/components/installed-apps/app-status-cell/app-status-cell.component';
+import { AppUpdateCellComponent } from 'app/pages/apps/components/installed-apps/app-update-cell/app-update-cell.component';
+import { AppCardInfoComponent } from './app-card-info.component';
+
+describe('AppCardInfoComponent', () => {
+  let spectator: Spectator<AppCardInfoComponent>;
+  const createComponent = createComponentFactory({
+    component: AppCardInfoComponent,
+    declarations: [MockComponents(AppStatusCellComponent, AppUpdateCellComponent)],
+  });
+
+  beforeEach(() => {
+    spectator = createComponent({
+      props: {
+        app: {
+          isLoading: false,
+          error: null,
+          value: {
+            name: 'TestApp',
+            chart_metadata: {
+              appVersion: '1.0.0',
+            },
+          },
+        } as LoadingState<ChartRelease>,
+        job: {} as Job<ChartScaleResult, ChartScaleQueryParams>,
+      },
+    });
+  });
+
+  it('checks app name', () => {
+    const appName = spectator.query('.name');
+    expect(appName).toHaveText('TestApp');
+  });
+
+  it('checks app version', () => {
+    const appVersion = spectator.query('.version');
+    expect(appVersion).toHaveText('v1.0.0');
+  });
+});
@@ -0,0 +1,16 @@
+import { Component, ChangeDetectionStrategy, input } from '@angular/core';
+import { LoadingState } from 'app/helpers/operators/to-loading-state.helper';
+import { ChartScaleResult, ChartScaleQueryParams } from 'app/interfaces/chart-release-event.interface';
+import { ChartRelease } from 'app/interfaces/chart-release.interface';
+import { Job } from 'app/interfaces/job.interface';
+
+@Component({
+  selector: 'ix-app-card-info',
+  templateUrl: './app-card-info.component.html',
+  styleUrls: ['./app-card-info.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AppCardInfoComponent {
+  app = input.required<LoadingState<ChartRelease>>();
+  job = input.required<Job<ChartScaleResult, ChartScaleQueryParams>>();
+}
@@ -0,0 +1,37 @@
+<ng-container *ixWithLoadingState="app() as app">
+  @if ((app.portals | keyvalue).length > 0) {
+    <button
+      mat-icon-button
+      ixTest="apps-web-portal"
+      matTooltipPosition="above"
+      [attr.aria-label]="'Web Portal' | translate"
+      [matTooltip]="'Web Portal' | translate"
+      (click)="openWebPortal(app)"
+    >
+      <ix-icon name="mdi-web"></ix-icon>
+    </button>
+  }
+
+  <button
+    mat-icon-button
+    ixTest="apps-restart"
+    matTooltipPosition="above"
+    [attr.aria-label]="'Restart App' | translate"
+    [matTooltip]="'Restart App' | translate"
+    [disabled]="isRestarting()"
+    (click)="onRestartApp(app)"
+  >
+    <ix-icon name="mdi-restart"></ix-icon>
+  </button>
+
+  <button
+    mat-icon-button
+    ixTest="apps-details"
+    matTooltipPosition="above"
+    [attr.aria-label]="'Check App Details' | translate"
+    [matTooltip]="'Check App Details' | translate"
+    [routerLink]="['/apps', 'installed', app.catalog, app.catalog_train, app.id]"
+  >
+    <ix-icon name="mdi-cog"></ix-icon>
+  </button>
+</ng-container>
@@ -0,0 +1,6 @@
+:host {
+  align-items: center;
+  color: var(--fg2);
+  display: flex;
+  flex-direction: row;
+}
@@ -0,0 +1,89 @@
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { Spectator, createComponentFactory, mockProvider } from '@ngneat/spectator/jest';
+import { of, Observable } from 'rxjs';
+import { ChartReleaseStatus } from 'app/enums/chart-release-status.enum';
+import { LoadingState } from 'app/helpers/operators/to-loading-state.helper';
+import { ApiEvent } from 'app/interfaces/api-message.interface';
+import { ChartScaleResult, ChartScaleQueryParams } from 'app/interfaces/chart-release-event.interface';
+import { ChartRelease } from 'app/interfaces/chart-release.interface';
+import { Job } from 'app/interfaces/job.interface';
+import { IxIconHarness } from 'app/modules/ix-icon/ix-icon.harness';
+import { SnackbarService } from 'app/modules/snackbar/services/snackbar.service';
+import { ApplicationsService } from 'app/pages/apps/services/applications.service';
+import { RedirectService } from 'app/services/redirect.service';
+import { AppControlsComponent } from './app-controls.component';
+
+describe('AppControlsComponent', () => {
+  let spectator: Spectator<AppControlsComponent>;
+  let loader: HarnessLoader;
+
+  const app = {
+    id: 'testapp',
+    name: 'TestApp',
+    portals: {
+      web_portal: ['http://test.com'],
+    } as Record<string, string[]>,
+    status: ChartReleaseStatus.Active,
+    update_available: true,
+    container_images_update_available: false,
+    chart_metadata: {
+      icon: 'http://localhost/test-app.png',
+      appVersion: '1.0',
+    },
+    catalog: 'truenas',
+    catalog_train: 'charts',
+  } as ChartRelease;
+
+  const createComponent = createComponentFactory({
+    component: AppControlsComponent,
+    declarations: [],
+    providers: [
+      mockProvider(RedirectService, {
+        openWindow: jest.fn(),
+      }),
+      mockProvider(ApplicationsService, {
+        restartApplication: jest.fn(() => of(true)),
+        getInstalledAppsStatusUpdates: jest.fn(() => {
+          return of() as Observable<ApiEvent<Job<ChartScaleResult, ChartScaleQueryParams>>>;
+        }),
+      }),
+      mockProvider(SnackbarService, {
+        success: jest.fn(),
+      }),
+    ],
+  });
+
+  beforeEach(() => {
+    spectator = createComponent({
+      props: {
+        app: {
+          isLoading: false,
+          error: null,
+          value: app,
+        } as LoadingState<ChartRelease>,
+      },
+    });
+    loader = TestbedHarnessEnvironment.loader(spectator.fixture);
+  });
+
+  it('checks open web portal', async () => {
+    const redirectSpy = jest.spyOn(spectator.inject(RedirectService), 'openWindow');
+
+    const portalButton = await loader.getHarness(IxIconHarness.with({ name: 'mdi-web' }));
+    await portalButton.click();
+
+    expect(redirectSpy).toHaveBeenCalledWith('http://test.com');
+  });
+
+  it('checks restart app', async () => {
+    const restartSpy = jest.spyOn(spectator.inject(ApplicationsService), 'restartApplication');
+    const snackbarSpy = jest.spyOn(spectator.inject(SnackbarService), 'success');
+
+    const restartButton = await loader.getHarness(IxIconHarness.with({ name: 'mdi-restart' }));
+    await restartButton.click();
+
+    expect(snackbarSpy).toHaveBeenCalledWith('App is restarting');
+    expect(restartSpy).toHaveBeenCalledWith(app);
+  });
+});