70 lines
3.3 KiB
HTML
70 lines
3.3 KiB
HTML
<div *ngIf="uptime$ | async as uptime; else loadingOrError">
|
|
<h2 class="m-0">{{'uptime.title' | translate}}</h2>
|
|
|
|
<div class="row m-0">
|
|
<div class="col-6 col-md-3 p-0">
|
|
<div class="my-4 px-4 border-right">
|
|
<h1 class="m-0">{{uptime.hours24?.toFixed(2)}}%</h1>
|
|
{{'uptime.last24hours' | translate}}
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-md-3 p-0">
|
|
<div class="my-4 px-4 border-md-right">
|
|
<h1 class="m-0">{{uptime.days7?.toFixed(2)}}%</h1>
|
|
{{'uptime.last7days' | translate}}
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-md-3 p-0">
|
|
<div class="my-4 px-4 border-right">
|
|
<h1 class="m-0">{{uptime.days30?.toFixed(2)}}%</h1>
|
|
{{'uptime.last30days' | translate}}
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-md-3 p-0">
|
|
<div class="my-4 px-4">
|
|
<h1 class="m-0">{{uptime.days90?.toFixed(2)}}%</h1>
|
|
{{'uptime.last90days' | translate}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex mb-4" style="height: 2rem">
|
|
<ng-container *ngFor="let day of uptime.days; index as index">
|
|
<div class="flex-grow-1" style="margin: 1px"
|
|
[class.d-none]="index < 60" [class.d-lg-block]="index < 30" [class.d-sm-block]="index >= 30 && index < 60"
|
|
[class.bg-operational]="day.uptime >= 99" [class.bg-maintenance]="day.uptime < 99 && day.uptime >= 95"
|
|
[class.bg-outage]="day.uptime < 95"
|
|
matTooltip="{{day.date | dayjs:'format':'l'}} {{day.uptime.toFixed(2)}}%" matTooltipPosition="above"
|
|
[matTooltipShowDelay]="0" [matTooltipHideDelay]="0" matTooltipClass="multiline-tooltip"></div>
|
|
</ng-container>
|
|
</div>
|
|
|
|
<div *ngIf="uptime.events.length">
|
|
<h2 class="m-0">{{'recent-events.title' | translate}}</h2>
|
|
<mat-list>
|
|
<ng-container *ngFor="let event of uptime.events; index as index; last as last">
|
|
<mat-list-item *ngIf="index < 4 || expanded">
|
|
<i mat-list-icon [class]="stateClasses[event.state]"></i>
|
|
<p matLine>
|
|
<span *ngIf="event.state === 'operational'"
|
|
class="text-truncate">{{'recent-events.operational' | translate}}</span>
|
|
<span *ngIf="event.state === 'maintenance'"
|
|
class="text-truncate">{{'recent-events.maintenance' | translate: {'time': event.date | dayjs:'to':uptime.events[index - 1]?.date} }}</span>
|
|
<span *ngIf="event.state === 'outage'"
|
|
class="text-truncate">{{'recent-events.outage' | translate:{'time': event.date | dayjs:'to':uptime.events[index - 1]?.date} }}</span>
|
|
</p>
|
|
<div matLine><small matTooltip="{{event.date | dayjs:'format':'LLL'}}" matTooltipPosition="above"
|
|
[matTooltipShowDelay]="0" [matTooltipHideDelay]="0">{{event.date | dayjs:'from'}}</small>
|
|
</div>
|
|
<mat-divider [inset]="true"
|
|
*ngIf="!(last || uptime.events.length > 4 && !expanded && index >= 3)"></mat-divider>
|
|
</mat-list-item>
|
|
</ng-container>
|
|
</mat-list>
|
|
<a href="#" class="mt-3" *ngIf="uptime.events.length > 4"
|
|
(click)="toggleExpanded(); $event.preventDefault()">{{(expanded ? 'show-less' : 'show-all') | translate}}</a>
|
|
</div>
|
|
</div>
|
|
<ng-template #loadingOrError>
|
|
<div *ngIf="error">{{error}}</div>
|
|
<div *ngIf="!error">{{'loading' | translate}}</div>
|
|
</ng-template>
|