Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
NAS-130213 / 24.10 / Add smaller apps widgets (#10378)
* NAS-130213: Slice Widget App into chunks * NAS-130213: Revert temp changes * NAS-130213: Move files around * NAS-130213: Add widget-app-info and widget-app-stats * NAS-130213: Add widget-app-cpu and widget-app-memory * NAS-130213: Add widget-app-network * NAS-130213: Adapt more changes * NAS-130213: Adapt more changes * NAS-130213: Adapt tests * NAS-130213: Adapt more changes * NAS-130213: Adapt tests * NAS-130213: Do not show apps widgets * NAS-130213: Cleanup
- Loading branch information
1 parent
dd49e61
commit 3c6657c
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -25,7 +25,7 @@ | |
| padding: 3px 18px; | ||
| } | ||
|
|
||
| &.running { | ||
| border-color: var(--green); | ||
| color: var(--green); | ||
| } | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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.metadata?.app_version }}</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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| 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 { App, AppStartQueryParams } from 'app/interfaces/app.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', | ||
| metadata: { | ||
| app_version: '1.0.0', | ||
| }, | ||
| }, | ||
| } as LoadingState<App>, | ||
| job: {} as Job<void, AppStartQueryParams>, | ||
| }, | ||
| }); | ||
| }); | ||
|
|
||
| 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'); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import { Component, ChangeDetectionStrategy, input } from '@angular/core'; | ||
| import { LoadingState } from 'app/helpers/operators/to-loading-state.helper'; | ||
| import { App, AppStartQueryParams } from 'app/interfaces/app.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<App>>(); | ||
| job = input.required<Job<void, AppStartQueryParams>>(); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" | ||
| (click)="openAppDetails(app)" | ||
| > | ||
| <ix-icon name="mdi-cog"></ix-icon> | ||
| </button> | ||
| </ng-container> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| :host { | ||
| align-items: center; | ||
| color: var(--fg2); | ||
| display: flex; | ||
| flex-direction: row; | ||
| } |
Oops, something went wrong.