forked from Ivasoft/traefik
105 lines
3.7 KiB
HTML
105 lines
3.7 KiB
HTML
<div class="container">
|
|
<div class="content">
|
|
<div class="columns is-multiline">
|
|
|
|
<div class="column is-12">
|
|
<div class="content-item">
|
|
<div class="content-item-data">
|
|
<div class="columns">
|
|
<div class="column is-4">
|
|
<div class="item-data border-right">
|
|
<span class="data-grey">Total Response Time</span>
|
|
<span class="data-blue" [title]="exactTotalResponseTime">{{ totalResponseTime }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="column is-4">
|
|
<div class="item-data border-right">
|
|
<span class="data-grey">Total Code Count</span>
|
|
<span class="data-blue">{{ totalCodeCount }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="column is-4">
|
|
<div class="item-data">
|
|
<span class="data-grey">Uptime Since <br/>{{ uptimeSince }}</span>
|
|
<span class="data-blue">{{ uptime }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content-item">
|
|
<div class="content-item-data">
|
|
<div class="columns">
|
|
<div class="column is-4">
|
|
<div class="item-data border-right">
|
|
<span class="data-grey">Average Response Time</span>
|
|
<span class="data-blue" [title]="exactAverageResponseTime">{{ averageResponseTime }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="column is-4">
|
|
<div class="item-data border-right">
|
|
<span class="data-grey">Code Count</span>
|
|
<span class="data-blue">{{ codeCount }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="column is-4">
|
|
<div class="item-data">
|
|
<span class="data-grey">PID</span>
|
|
<span class="data-blue">{{ pid }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-12">
|
|
<div class="columns">
|
|
<div class="column is-6">
|
|
<div class="content-item">
|
|
<h2>Average Response Time (µs)</h2>
|
|
<app-line-chart [value]="chartValue"></app-line-chart>
|
|
</div>
|
|
</div>
|
|
<div class="column is-6">
|
|
<div class="content-item">
|
|
<h2>Total Status Code Count</h2>
|
|
<app-bar-chart [value]="statusCodeValue"></app-bar-chart>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content" *ngIf="recentErrors">
|
|
<div class="content-item">
|
|
<h2>Recent HTTP Errors</h2>
|
|
<table class="table is-fullwidth">
|
|
<tr>
|
|
<td>Status</td>
|
|
<td>Request</td>
|
|
<td>Time</td>
|
|
</tr>
|
|
<tr *ngFor="let entry of recentErrors; trackBy: trackRecentErrors;">
|
|
<td>
|
|
<span class="tag is-info" [title]="entry.status">{{ entry.status_code }}</span> <span class="is-hidden-mobile is-hidden-desktop-only">{{ entry.status }}</span>
|
|
</td>
|
|
<td>
|
|
<span class="tag">{{ entry.method }}</span> <span>{{ entry.host }}{{ entry.path }}</span>
|
|
</td>
|
|
<td>
|
|
<span [title]="entry.time | date:'yyyy-MM-dd HH:mm:ss:SSS a z'">{{ entry.time | date:'yyyy-MM-dd HH:mm:ss a z' }}</span>
|
|
</td>
|
|
</tr>
|
|
<tr *ngIf="!recentErrors?.length">
|
|
<td colspan="3">
|
|
<p class="text-muted text-center">No entries</p>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|