39 lines
2.0 KiB
HTML
39 lines
2.0 KiB
HTML
<div class="py-3" *ngFor="let group of groups">
|
|
<h2>
|
|
<i [class]="stateClasses[group.state]"></i>
|
|
<a *ngIf="group.url" [href]="group.url" target="_blank"
|
|
(click)="$event.stopPropagation()">{{group.name}}</a>
|
|
<span *ngIf="!group.url">{{group.name}}</span>
|
|
</h2>
|
|
<mat-accordion [multi]="true">
|
|
<mat-expansion-panel *ngFor="let service of group.services" [hideToggle]="true"
|
|
[(expanded)]="expandedCache[group.id + '-' + service.id]"
|
|
(afterExpand)="saveExpandedCache()" (afterCollapse)="saveExpandedCache()">
|
|
<mat-expansion-panel-header>
|
|
<mat-panel-title>
|
|
<div matLine class="w-100 d-flex">
|
|
<i [class]="stateClasses[service.state]"></i>
|
|
<a *ngIf="service.url" class="text-truncate" [href]="service.url" target="_blank"
|
|
(click)="$event.stopPropagation()">{{service.name}}</a>
|
|
<span *ngIf="!service.url" class="text-truncate">{{service.name}}</span>
|
|
<span class="ml-2 font-weight-normal d-none d-sm-block" [class.operational]="service.uptime >= 99"
|
|
[class.maintenance]="service.uptime < 99 && service.uptime >= 95"
|
|
[class.outage]="service.uptime < 95">{{service.uptime?.toFixed(2)}}%</span>
|
|
<span class="flex-grow-1"></span>
|
|
<span class="{{service.state}}">{{'state.' + service.state | translate}}</span>
|
|
</div>
|
|
</mat-panel-title>
|
|
</mat-expansion-panel-header>
|
|
|
|
<ng-template matExpansionPanelContent>
|
|
<app-uptime [id]="service.id"></app-uptime>
|
|
</ng-template>
|
|
</mat-expansion-panel>
|
|
</mat-accordion>
|
|
</div>
|
|
|
|
<div class="text-right pb-3"><small matTooltip="{{lastUpdated | dayjs:'format':'LTS'}}" matTooltipPosition="above"
|
|
[matTooltipShowDelay]="0"
|
|
[matTooltipHideDelay]="0">{{'last-updated' | translate:{'time': lastUpdated | dayjs:'from'} }}</small>
|
|
</div>
|