NAS-131544 / 25.04 / Make widget app mobile friendly (#10865)

* NAS-131544: Make widget app mobile friendly

* NAS-131544: Make widget app mobile friendly

src/app/enums/app-state.enum.ts

@@ -1,4 +1,5 @@
 import { marker as T } from '@biesbjerg/ngx-translate-extract-marker';
+import { iconMarker } from 'app/modules/ix-icon/icon-marker.util';
 
 export enum AppState {
   Running = 'RUNNING',
@@ -9,11 +10,11 @@ export enum AppState {
 }
 
 export const appStateIcons = new Map<AppState, string>([
-  [AppState.Running, 'mdi-check-circle'],
-  [AppState.Deploying, 'mdi-progress-wrench'],
-  [AppState.Stopped, 'mdi-stop-circle'],
-  [AppState.Stopping, 'mdi-progress-wrench'],
-  [AppState.Crashed, 'mdi-alert-circle'],
+  [AppState.Running, iconMarker('mdi-check-circle')],
+  [AppState.Deploying, iconMarker('mdi-progress-wrench')],
+  [AppState.Stopped, iconMarker('mdi-stop-circle')],
+  [AppState.Stopping, iconMarker('mdi-progress-wrench')],
+  [AppState.Crashed, iconMarker('mdi-alert-circle')],
 ]);
 
 export const appStateLabels = new Map<AppState, string>([

src/app/modules/layout/topbar/topbar.component.scss

@@ -78,24 +78,19 @@
   }
 
   .mobile-logo-container {
+    align-items: center;
+    display: flex;
+    gap: 10px;
     height: 48px;
     position: relative;
     width: 200px;
   }
 
   .logomark {
-    bottom: 10px;
-    left: 10px;
-    position: absolute;
-    top: 10px;
     width: 40px;
   }
 
   .logotype {
-    bottom: 9px;
-    left: 58px;
-    position: absolute;
-    top: 10px;
     width: 96px;
   }
 }

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

@@ -1,9 +1,7 @@
 :host {
   background: var(--bg1);
   display: inline-flex;
-  flex: 1 1 70%;
   flex-direction: column;
-  max-width: 70%;
 
   .app-header {
     align-items: baseline;
@@ -22,15 +20,8 @@
     padding: 8px 12px;
 
     ix-app-update-cell {
-      flex-direction: row-reverse;
       gap: 8px;
       margin-right: auto;
-
-      // TODO: Does not belong here. Do not reuse component.
-      ::ng-deep ix-icon {
-        height: 24px;
-        width: 24px;
-      }
     }
 
     ::ng-deep ix-with-loading-state-loader {

src/app/pages/dashboard/widgets/apps/common/app-controls/app-controls.component.html

@@ -18,7 +18,7 @@
     matTooltipPosition="above"
     [attr.aria-label]="'Restart App' | translate"
     [matTooltip]="'Restart App' | translate"
-    [disabled]="isRestarting()"
+    [disabled]="app.state === appState.Deploying"
     (click)="onRestartApp(app)"
   >
     <ix-icon name="mdi-restart"></ix-icon>

src/app/pages/dashboard/widgets/apps/common/app-controls/app-controls.component.ts

@@ -1,6 +1,5 @@
 import {
   Component, ChangeDetectionStrategy, input,
-  computed,
 } from '@angular/core';
 import { Router } from '@angular/router';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
@@ -9,7 +8,6 @@ import { AppState } from 'app/enums/app-state.enum';
 import { tapOnce } from 'app/helpers/operators/tap-once.operator';
 import { LoadingState } from 'app/helpers/operators/to-loading-state.helper';
 import { App } from 'app/interfaces/app.interface';
-import { mapLoadedValue } from 'app/modules/loader/directives/with-loading-state/map-loaded-value.utils';
 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';
@@ -23,10 +21,7 @@ import { RedirectService } from 'app/services/redirect.service';
 })
 export class AppControlsComponent {
   app = input.required<LoadingState<App>>();
-
-  protected isRestarting = computed(() => {
-    return mapLoadedValue(this.app(), (app) => app.state === AppState.Deploying);
-  });
+  appState = AppState;
 
   constructor(
     private translate: TranslateService,

src/app/pages/dashboard/widgets/apps/common/app-disk-info/app-disk-info.component.html

@@ -17,7 +17,7 @@ <h4>{{ 'Block I/O' | translate }}</h4>
   <small>{{ '1m Average' | translate }}</small>
 </div>
 <div class="chart-graph">
-  @if (stats().isLoading) {
+  @if (isLoading()) {
     <ngx-skeleton-loader
       class="skeleton"
       [theme]="{
@@ -32,7 +32,7 @@ <h4>{{ 'Block I/O' | translate }}</h4>
     <ix-network-chart
       [showLegend]="false"
       [data]="diskChartData()"
-      [aspectRatio]="3"
+      [aspectRatio]="aspectRatio()"
     ></ix-network-chart>
   }
 </div>

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

@@ -1,13 +1,39 @@
+@import 'scss-imports/cssvars';
+
 :host {
+  flex-direction: column;
+  justify-content: space-between;
+
+  @media (min-width: $breakpoint-xs) {
+    flex-direction: row;
+  }
+
   .chart-info {
     display: flex;
-    flex: 1;
-    flex-direction: column;
-    height: 100%;
-    justify-content: space-around;
-    padding: 6px 0 6px 8px;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 6px 8px 0;
     width: 100%;
 
+    small {
+      display: none;
+    }
+
+    @media (min-width: $breakpoint-xs) {
+      flex: 1;
+      flex-direction: column;
+      height: 100%;
+      padding: 6px 0 6px 8px;
+
+      small {
+        display: inline;
+      }
+    }
+
+    h4 {
+      font-size: 14px;
+    }
+
     h4,
     small {
       color: var(--fg2);
@@ -20,6 +46,12 @@
 
     .in-out {
       font-size: 12px;
+
+      @media (max-width: $breakpoint-xs) {
+        display: flex;
+        flex-flow: row;
+        gap: 8px;
+      }
     }
 
     .in-out-row {
@@ -31,6 +63,12 @@
   }
 
   .chart-graph {
+    max-width: 100%;
+
+    @media (min-width: $breakpoint-xs) {
+      max-width: auto;
+    }
+
     .skeleton {
       display: flex;
       padding: 4px;

src/app/pages/dashboard/widgets/apps/common/app-disk-info/app-disk-info.component.ts

@@ -17,7 +17,9 @@ import { ThemeService } from 'app/services/theme/theme.service';
 })
 export class AppDiskInfoComponent {
   stats = input.required<LoadingState<AppStats>>();
+  aspectRatio = input<number>(3);
 
+  isLoading = computed(() => this.stats().isLoading);
   protected readonly initialDiskStats = Array.from({ length: 60 }, () => ([0, 0]));
   protected readonly cachedDiskStats = signal<number[][]>([]);
   readonly diskStats = computed(() => {

src/app/pages/dashboard/widgets/apps/common/app-network-info/app-network-info.component.html

@@ -17,7 +17,7 @@ <h4>{{ 'Network I/O' | translate }}</h4>
   <small>{{ '1m Average' | translate }}</small>
 </div>
 <div class="chart-graph">
-  @if (stats().isLoading) {
+  @if (isLoading()) {
     <ngx-skeleton-loader
       class="skeleton"
       [theme]="{
@@ -32,7 +32,7 @@ <h4>{{ 'Network I/O' | translate }}</h4>
     <ix-network-chart
       [showLegend]="false"
       [data]="networkChartData()"
-      [aspectRatio]="3"
+      [aspectRatio]="aspectRatio()"
     ></ix-network-chart>
   }
 </div>

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

@@ -1,13 +1,39 @@
+@import 'scss-imports/cssvars';
+
 :host {
+  flex-direction: column;
+  justify-content: space-between;
+
+  @media (min-width: $breakpoint-xs) {
+    flex-direction: row;
+  }
+
   .chart-info {
     display: flex;
-    flex: 1;
-    flex-direction: column;
-    height: 100%;
-    justify-content: space-around;
-    padding: 6px 0 6px 8px;
+    justify-content: space-between;
+    padding: 6px 8px 0;
     width: 100%;
 
+    small {
+      display: none;
+    }
+
+    @media (min-width: $breakpoint-xs) {
+      flex: 1;
+      flex-direction: column;
+      height: 100%;
+      padding: 6px 0 6px 8px;
+
+      small {
+        display: inline;
+      }
+    }
+
+    h4 {
+      font-size: 14px;
+      white-space: nowrap;
+    }
+
     h4,
     small {
       color: var(--fg2);
@@ -20,6 +46,12 @@
 
     .in-out {
       font-size: 12px;
+
+      @media (max-width: $breakpoint-xs) {
+        display: flex;
+        flex-flow: row;
+        gap: 8px;
+      }
     }
 
     .in-out-row {
@@ -31,6 +63,12 @@
   }
 
   .chart-graph {
+    max-width: 100%;
+
+    @media (min-width: $breakpoint-xs) {
+      max-width: auto;
+    }
+
     .skeleton {
       display: flex;
       padding: 4px;

src/app/pages/dashboard/widgets/apps/common/app-network-info/app-network-info.component.ts

@@ -18,6 +18,9 @@ import { ThemeService } from 'app/services/theme/theme.service';
 })
 export class AppNetworkInfoComponent {
   stats = input.required<LoadingState<AppStats>>();
+  aspectRatio = input<number>(3);
+
+  isLoading = computed(() => this.stats().isLoading);
 
   protected readonly initialNetworkStats = Array.from({ length: 60 }, () => ([0, 0]));
   cachedNetworkStats = signal<number[][]>([]);

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

@@ -1,47 +1,7 @@
-:host ::ng-deep ix-with-loading-state-error {
-  align-items: center;
-  box-sizing: border-box;
+:host .container {
   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%;
-
-  ::ng-deep > ix-with-loading-state-loader {
-    align-items: center;
-    box-sizing: border-box;
-    display: flex;
-    height: 100%;
-    justify-content: center;
-    width: 100%;
-  }
-
-  .header {
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
-    min-height: 54px;
-    padding: 16px 8px 16px 16px;
-  }
-
-  .card-content {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
-
-  .container {
-    height: 100%;
-    padding-top: 0;
-  }
+  flex-direction: column;
 }
 
 ix-app-cpu-info {

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

@@ -9,7 +9,10 @@ import { WidgetAppSettings } from 'app/pages/dashboard/widgets/apps/widget-app/w
 @Component({
   selector: 'ix-widget-app-cpu',
   templateUrl: './widget-app-cpu.component.html',
-  styleUrls: ['./widget-app-cpu.component.scss'],
+  styleUrls: [
+    '../widget-app/widget-app.component.scss',
+    './widget-app-cpu.component.scss',
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class WidgetAppCpuComponent implements WidgetComponent<WidgetAppSettings> {

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

@@ -5,11 +5,9 @@ <h3>{{ 'App Info' | translate }}</h3>
       <ix-app-controls [app]="app() | async"></ix-app-controls>
     </div>
 
-    <div [class]="['container', size()]">
-      <div class="app-header-row">
-        <ix-app-card-logo [url]="application?.metadata?.icon"></ix-app-card-logo>
-        <ix-app-card-info [app]="app() | async" [job]="job() | async"></ix-app-card-info>
-      </div>
+    <div [class]="['container', 'grid', size()]">
+      <ix-app-card-logo [url]="application?.metadata?.icon"></ix-app-card-logo>
+      <ix-app-card-info [app]="app() | async" [job]="job() | async"></ix-app-card-info>
     </div>
   </mat-card-content>
 </mat-card>