Start9/start-os
2
0
Fork 0
mirror of https://github.com/Start9Labs/start-os.git synced 2026-03-31 04:23:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

health spinner fix (#1033)

Browse Source 
Co-authored-by: Drew Ansbacher <drew.ansbacher@spiredigital.com>
This commit is contained in:
Drew Ansbacher
2022-01-05 15:09:59 -07:00
committed by Aiden McClelland
parent 5db2985f56
commit cc73b86f6e
2 changed files with 79 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
ui/src/app/pages/apps-routes/app-show/components/app-show-health-checks/app-show-health-checks.component.html
View File

@@ -1,78 +1,80 @@
<ng-container <ng-container
*ngIf="pkg | toHealthChecks | async | keyvalue: asIsOrder as checks" *ngIf="pkg | toHealthChecks | async | keyvalue: asIsOrder as checks"
> >
<ion-item-divider>Health Checks</ion-item-divider> <ng-container *ngIf="checks.length">
<ng-container *ngIf="connectionFailure; else connected"> <ion-item-divider>Health Checks</ion-item-divider>
<ion-item *ngFor="let health of checks"> <ng-container *ngIf="connectionFailure; else connected">
<ion-avatar slot="start"> <ion-item *ngFor="let health of checks">
<ion-skeleton-text class="avatar"></ion-skeleton-text> <ion-avatar slot="start">
</ion-avatar> <ion-skeleton-text class="avatar"></ion-skeleton-text>
<ion-label> </ion-avatar>
<ion-skeleton-text class="label"></ion-skeleton-text> <ion-label>
<ion-skeleton-text class="description"></ion-skeleton-text> <ion-skeleton-text class="label"></ion-skeleton-text>
</ion-label> <ion-skeleton-text class="description"></ion-skeleton-text>
</ion-item> </ion-label>
</ion-item>
</ng-container>
<ng-template #connected>
<ion-item
*ngFor="let health of checks"
button
(click)="presentAlertDescription(health.key)"
>
<ng-container *ngIf="health.value?.result as result; else noResult">
<ion-spinner
*ngIf="isLoading(result)"
class="icon-spinner"
color="primary"
slot="start"
></ion-spinner>
<ion-icon
*ngIf="result === HealthResult.Success"
slot="start"
name="checkmark"
color="success"
></ion-icon>
<ion-icon
*ngIf="result === HealthResult.Failure"
slot="start"
name="warning-outline"
color="warning"
></ion-icon>
<ion-icon
*ngIf="result === HealthResult.Disabled"
slot="start"
name="remove"
color="dark"
></ion-icon>
<ion-label>
<h2 class="bold">
{{ pkg.manifest['health-checks'][health.key].name }}
</h2>
<ion-text [color]="result | healthColor">
<p>
<span *ngIf="isReady(result)">{{ result | titlecase }}</span>
<span *ngIf="result === HealthResult.Starting">...</span>
<span *ngIf="result === HealthResult.Failure">
{{ $any(health.value).error }}
</span>
<span *ngIf="result === HealthResult.Loading">
{{ $any(health.value).message }}
</span>
</p>
</ion-text>
</ion-label>
</ng-container>
<ng-template #noResult>
<ion-spinner
class="icon-spinner"
color="dark"
slot="start"
></ion-spinner>
<ion-label>
<h2 class="bold">{{ health.key }}</h2>
<p>Awaiting result...</p>
</ion-label>
</ng-template>
</ion-item>
</ng-template>
</ng-container> </ng-container>
<ng-template #connected>
<ion-item
*ngFor="let health of checks"
button
(click)="presentAlertDescription(health.key)"
>
<ng-container *ngIf="health.value?.result as result; else noResult">
<ion-spinner
*ngIf="isLoading(result)"
class="icon-spinner"
color="primary"
slot="start"
></ion-spinner>
<ion-icon
*ngIf="result === HealthResult.Success"
slot="start"
name="checkmark"
color="success"
></ion-icon>
<ion-icon
*ngIf="result === HealthResult.Failure"
slot="start"
name="warning-outline"
color="warning"
></ion-icon>
<ion-icon
*ngIf="result === HealthResult.Disabled"
slot="start"
name="remove"
color="dark"
></ion-icon>
<ion-label>
<h2 class="bold">
{{ pkg.manifest['health-checks'][health.key].name }}
</h2>
<ion-text [color]="result | healthColor">
<p>
<span *ngIf="isReady(result)">{{ result | titlecase }}</span>
<span *ngIf="result === HealthResult.Starting">...</span>
<span *ngIf="result === HealthResult.Failure">
{{ $any(health.value).error }}
</span>
<span *ngIf="result === HealthResult.Loading">
{{ $any(health.value).message }}
</span>
</p>
</ion-text>
</ion-label>
</ng-container>
<ng-template #noResult>
<ion-spinner
class="icon-spinner"
color="dark"
slot="start"
></ion-spinner>
<ion-label>
<h2 class="bold">{{ health.key }}</h2>
<p>Awaiting result...</p>
</ion-label>
</ng-template>
</ion-item>
</ng-template>
</ng-container> </ng-container>

8
ui/src/app/pages/apps-routes/app-show/pipes/to-health-checks.pipe.ts
View File

@@ -27,13 +27,13 @@ export class ToHealthChecksPipe implements PipeTransform {
.watch$('package-data', pkg.manifest.id, 'installed', 'status', 'main') .watch$('package-data', pkg.manifest.id, 'installed', 'status', 'main')
.pipe( .pipe(
filter(obj => exists(obj)), filter(obj => exists(obj)),
map(main => map(main => {
// Question: is this ok or do we have to use Object.keys // Question: is this ok or do we have to use Object.keys
// to maintain order and the keys initially present in pkg? // to maintain order and the keys initially present in pkg?
main.status === PackageMainStatus.Running return main.status === PackageMainStatus.Running && !isEmptyObject(main.health)
? main.health ? main.health
: healthChecks, : healthChecks
), }),
startWith(healthChecks), startWith(healthChecks),
) )