mirror of
https://github.com/Start9Labs/start-os.git
synced 2026-03-30 20:14:49 +00:00
af2b2f33c2
* rework ntp faiure handling and display to user * uptime in seconds * change how we handle ntp --------- Co-authored-by: Aiden McClelland <me@drbonez.dev>
85 lines
2.6 KiB
HTML
85 lines
2.6 KiB
HTML
<ion-header>
|
|
<ion-toolbar>
|
|
<ion-buttons slot="start">
|
|
<ion-back-button defaultHref="system"></ion-back-button>
|
|
</ion-buttons>
|
|
<ion-title>Monitor</ion-title>
|
|
<ion-title slot="end">
|
|
<ion-spinner name="dots" class="fader"></ion-spinner>
|
|
</ion-title>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
|
|
<ion-content class="ion-padding with-widgets">
|
|
<skeleton-list *ngIf="loading" [groups]="2"></skeleton-list>
|
|
|
|
<div id="metricSection">
|
|
<ng-container *ngIf="!loading">
|
|
<ion-item-group>
|
|
<!-- <ion-item-divider>Time</ion-item-divider> -->
|
|
<ion-item *ngIf="now$ | async as now; else timeLoading">
|
|
<ion-label>
|
|
<h1>System Time</h1>
|
|
<h2>
|
|
<ion-text style="color: white">
|
|
<b>{{ now.value | date:'MMMM d, y, h:mm a z':'UTC' }}</b>
|
|
</ion-text>
|
|
</h2>
|
|
<p *ngIf="!now.synced">
|
|
<ion-text color="warning">
|
|
NTP not synced, time could be wrong
|
|
</ion-text>
|
|
</p>
|
|
</ion-label>
|
|
<ion-note slot="end" class="metric-note"></ion-note>
|
|
</ion-item>
|
|
<ng-template #timeLoading>
|
|
<ion-item>
|
|
<ion-label>
|
|
<h1>System Time</h1>
|
|
<p>Loading...</p>
|
|
</ion-label>
|
|
<ion-note slot="end" class="metric-note"></ion-note>
|
|
</ion-item>
|
|
</ng-template>
|
|
|
|
<ion-item>
|
|
<ion-label>
|
|
<h1>System Uptime</h1>
|
|
<h2>
|
|
<ion-text style="color: white">
|
|
<ng-container *ngIf="uptime$ | async as uptime">
|
|
<b>{{ uptime.days }}</b>
|
|
Days,
|
|
<b>{{ uptime.hours }}</b>
|
|
Hours,
|
|
<b>{{ uptime.minutes }}</b>
|
|
Minutes,
|
|
<b>{{ uptime.seconds }}</b>
|
|
Seconds
|
|
</ng-container>
|
|
</ion-text>
|
|
</h2>
|
|
</ion-label>
|
|
</ion-item>
|
|
</ion-item-group>
|
|
|
|
<ion-item-group
|
|
*ngFor="let metricGroup of metrics | keyvalue : asIsOrder"
|
|
>
|
|
<ion-item-divider>{{ metricGroup.key }}</ion-item-divider>
|
|
<ion-item
|
|
*ngFor="let metric of metricGroup.value | keyvalue : asIsOrder"
|
|
>
|
|
<ion-label>{{ metric.key }}</ion-label>
|
|
<ion-note *ngIf="metric.value" slot="end" class="metric-note">
|
|
<ion-text style="color: white">
|
|
{{ metric.value.value }} {{ metric.value.unit }}
|
|
</ion-text>
|
|
</ion-note>
|
|
</ion-item>
|
|
</ion-item-group>
|
|
</ng-container>
|
|
</div>
|
|
</ion-content>
|