make it run

This commit is contained in:
Matt Hill
2023-11-09 16:04:18 -07:00
parent df1ac8e1e2
commit 09303ab2fb
4 changed files with 130 additions and 100 deletions

View File

@@ -14,6 +14,7 @@ import { InstallProgressPipeModule } from 'src/app/common/install-progress/insta
template: ` template: `
<strong *ngIf="!installProgress; else installing"> <strong *ngIf="!installProgress; else installing">
{{ connected ? rendering.display : 'Unknown' }} {{ connected ? rendering.display : 'Unknown' }}
<!-- @TODO should show 'this may take a while' if sigterm-timeout is > 30s -->
<span *ngIf="rendering.showDots" class="loading-dots"></span> <span *ngIf="rendering.showDots" class="loading-dots"></span>
</strong> </strong>
<ng-template #installing> <ng-template #installing>

View File

@@ -38,8 +38,8 @@ import { SkeletonListComponent } from '../../../components/skeleton-list.compone
else: loading; else: loading;
empty: blank empty: blank
" "
[pkg]="pkg" [marketplacePkg]="pkg"
[local]="data.local[pkg.manifest.id]" [localPkg]="data.local[pkg.manifest.id]"
[url]="host.url" [url]="host.url"
></updates-item> ></updates-item>
</section> </section>

View File

@@ -21,6 +21,7 @@ export class StatusComponent {
@Input() style?: string = 'regular' @Input() style?: string = 'regular'
@Input() weight?: string = 'normal' @Input() weight?: string = 'normal'
@Input() installProgress?: InstallProgress @Input() installProgress?: InstallProgress
@Input() sigtermTimeout?: string | null = null
readonly connected$ = this.connectionService.connected$ readonly connected$ = this.connectionService.connected$

View File

@@ -13,24 +13,24 @@
<ion-text color="warning">Websocket Failed. Reconnecting</ion-text> <ion-text color="warning">Websocket Failed. Reconnecting</ion-text>
</p> </p>
<ng-container *ngIf="serverData[0] as timeInfo"> <ion-item>
<ion-item-divider>System Time</ion-item-divider> <ion-label>
<ion-item> <h2>Current Time (UTC)</h2>
<ion-label>Current Time (UTC)</ion-label> <h2>
<h6 slot="end"> {{ serverData[0].value | date : 'MMMM d, y, h:mm:ss a' : 'UTC' }}
{{ timeInfo.systemCurrentTime | date : 'MMMM d, y, h:mm:ss a' : 'UTC' </h2>
}} <p *ngIf="!serverData[0].synced">
</h6> <ion-text color="warning">
</ion-item> NTP not synced, time could be wrong
<ion-item> </ion-text>
<ion-label>Start Time (UTC)</ion-label> </p>
<h6 slot="end"> </ion-label>
{{ timeInfo.systemStartTime | date : 'MMMM d, y, h:mm:ss a' : 'UTC' }} </ion-item>
</h6>
</ion-item> <ion-item>
<ion-item> <ion-label>
<ion-label>Uptime</ion-label> <h1>Uptime</h1>
<h6 *ngIf="timeInfo.systemUptime as uptime" slot="end"> <h2 *ngIf="serverData[1] as uptime">
<b>{{ uptime.days }}</b> <b>{{ uptime.days }}</b>
Days, Days,
<b>{{ uptime.hours }}</b> <b>{{ uptime.hours }}</b>
@@ -39,87 +39,115 @@
Minutes, Minutes,
<b>{{ uptime.seconds }}</b> <b>{{ uptime.seconds }}</b>
Seconds Seconds
</h6> </h2>
</ion-item> </ion-label>
</ng-container> </ion-item>
<ng-container *ngIf="serverData[1] as metrics"> <ng-container *ngIf="serverData[2] as metrics">
<!-- General --> <ng-container *ngIf="metrics.general as general">
<ion-item-divider>General</ion-item-divider> <ion-item-divider>General</ion-item-divider>
<ion-item> <ion-item>
<ion-label>Temperature</ion-label> <ion-label>Temperature</ion-label>
<h6 slot="end">{{ metrics.general.temperature }} °C</h6> <ion-note slot="end">
</ion-item> <ng-container *ngIf="general.temperature; else noTemp">
<!-- Memory --> {{ general.temperature.value }} &deg;C
<ion-item-divider>Memory</ion-item-divider> </ng-container>
<ion-item> <ng-template #noTemp>N/A</ng-template>
<ion-label>Percentage Used</ion-label> </ion-note>
<h6 slot="end">{{ metrics.memory['percentage-used'] }} %</h6> </ion-item>
</ion-item> </ng-container>
<ion-item>
<ion-label>Total</ion-label> <ng-container *ngIf="metrics.memory as memory">
<h6 slot="end">{{ metrics.memory.total }} MiB</h6> <ion-item-divider>Memory</ion-item-divider>
</ion-item> <ion-item>
<ion-item> <ion-label>Percentage Used</ion-label>
<ion-label>Available</ion-label> <ion-note slot="end">
<h6 slot="end">{{ metrics.memory.available }} MiB</h6> {{ memory['percentage-used'].value }} %
</ion-item> </ion-note>
<ion-item> </ion-item>
<ion-label>Used</ion-label> <ion-item>
<h6 slot="end">{{ metrics.memory.used }} MiB</h6> <ion-label>Total</ion-label>
</ion-item> <ion-note slot="end">
<ion-item> <ion-text>{{ memory.total.value }} MiB</ion-text>
<ion-label>Swap Total</ion-label> </ion-note>
<h6 slot="end">{{ metrics.memory['swap-total'] }} MiB</h6> </ion-item>
</ion-item> <ion-item>
<ion-item> <ion-label>Used</ion-label>
<ion-label>Swap Free</ion-label> <ion-note slot="end">
<h6 slot="end">{{ metrics.memory['swap-free'] }} MiB</h6> <ion-text>{{ memory.used.value }} MiB</ion-text>
</ion-item> </ion-note>
<ion-item> </ion-item>
<ion-label>Swap Used</ion-label> <ion-item>
<h6 slot="end">{{ metrics.memory['swap-used'] }} MiB</h6> <ion-label>Available</ion-label>
</ion-item> <ion-note slot="end">{{ memory.available.value }} MiB</ion-note>
<!-- CPU --> </ion-item>
<ion-item-divider>CPU</ion-item-divider> <ion-item>
<ion-item> <ion-label>zram Used</ion-label>
<ion-label>User Space</ion-label> <ion-note slot="end">{{ memory['zram-used'].value }} MiB</ion-note>
<h6 slot="end">{{ metrics.cpu['user-space'] }} %</h6> </ion-item>
</ion-item> <ion-item>
<ion-item> <ion-label>zram Total</ion-label>
<ion-label>Kernel Space</ion-label> <ion-note slot="end">{{ memory['zram-total'].value }} MiB</ion-note>
<h6 slot="end">{{ metrics.cpu['kernel-space'] }} %</h6> </ion-item>
</ion-item> <ion-item>
<ion-item> <ion-label>zram Available</ion-label>
<ion-label>I/O Wait</ion-label> <ion-note slot="end">
<h6 slot="end">{{ metrics.cpu['io-wait'] }} %</h6> {{ memory['zram-available'].value }} MiB
</ion-item> </ion-note>
<ion-item> </ion-item>
<ion-label>Idle</ion-label> </ng-container>
<h6 slot="end">{{ metrics.cpu.idle }} %</h6>
</ion-item> <ng-container *ngIf="metrics.cpu as cpu">
<ion-item> <ion-item-divider>CPU</ion-item-divider>
<ion-label>Usage</ion-label> <ion-item>
<h6 slot="end">{{ metrics.cpu.usage }} %</h6> <ion-label>Percentage Used</ion-label>
</ion-item> <ion-note slot="end">{{ cpu['percentage-used'].value }} %</ion-note>
<!-- Disk --> </ion-item>
<ion-item-divider>Disk</ion-item-divider> <ion-item>
<ion-item> <ion-label>User Space</ion-label>
<ion-label>Size</ion-label> <ion-note slot="end">
<h6 slot="end">{{ metrics.disk.size }} GB</h6> <ion-text>{{ cpu['user-space'].value }} %</ion-text>
</ion-item> </ion-note>
<ion-item> </ion-item>
<ion-label>Used</ion-label> <ion-item>
<h6 slot="end">{{ metrics.disk.used }} GB</h6> <ion-label>Kernel Space</ion-label>
</ion-item> <ion-note slot="end">
<ion-item> <ion-text>{{ cpu['kernel-space'].value }} %</ion-text>
<ion-label>Percentage Used</ion-label> </ion-note>
<h6 slot="end">{{ metrics.disk['percentage-used'] }} %</h6> </ion-item>
</ion-item> <ion-item>
<ion-item> <ion-label>Idle</ion-label>
<ion-label>Available</ion-label> <ion-note slot="end">{{ cpu.idle.value }} %</ion-note>
<h6 slot="end">{{ metrics.disk.available }} GB</h6> </ion-item>
</ion-item> <ion-item>
<ion-label>I/O Wait</ion-label>
<ion-note slot="end">{{ cpu.wait.value }} %</ion-note>
</ion-item>
</ng-container>
<ng-container *ngIf="metrics.disk as disk">
<ion-item-divider>Disk</ion-item-divider>
<ion-item>
<ion-label>Percentage Used</ion-label>
<ion-note slot="end">{{ disk['percentage-used'].value }} %</ion-note>
</ion-item>
<ion-item>
<ion-label>Capacity</ion-label>
<ion-note slot="end">
<ion-text>{{ disk.capacity.value }} GB</ion-text>
</ion-note>
</ion-item>
<ion-item>
<ion-label>Used</ion-label>
<ion-note slot="end">
<ion-text>{{ disk.used.value }} GB</ion-text>
</ion-note>
</ion-item>
<ion-item>
<ion-label>Available</ion-label>
<ion-note slot="end">{{ disk.available.value }} GB</ion-note>
</ion-item>
</ng-container>
</ng-container> </ng-container>
</ion-item-group> </ion-item-group>