tailscale/prober/status.html

{{define "status"}}
<html>
    <head><title>{{.Title}}</title></head>
    <style>
        body {
            /* max-width: 60rem; */
            margin-left: auto;
            margin-right: auto;
            padding: 3rem 1rem 8rem;
            line-height: 1.4;
            font-size: 1rem;
            font-weight: 400;
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
            text-rendering: optimizeLegibility;
        }
        .small {
            font-size: 0.7rem;
        }
        h1 {
            font-weight: 500;
            letter-spacing: -.025em;
        }
        a { color: rgb(74 125 221); }
        a:hover { color: rgb(73 100 149); }
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        ul>li::before {
            position: absolute;
            top: .625rem;
            left: .125rem;
            height: .375rem;
            width: .375rem;
            border-radius: 9999px;
            background-color: currentColor;
            opacity: .4;
            content: "";
        }
        ul>li {
            position: relative;
            padding-left: 1.25rem;
        }
        th, td {
            padding: 5px;
            text-align: left;
            background: #eeeeee;
        }
        .error {
            color: red;
        }
    </style>
<body>
    <h1>{{.Title}}</h1>
    <ul>
        <li>Prober Status:
        {{if .UnhealthyProbes }}
            <span class="error">{{.UnhealthyProbes}}</span>
            out of {{.TotalProbes}} probes failed or never ran.
        {{else}}
            All {{.TotalProbes}} probes are healthy
        {{end}}
        </li>
        {{ range $text, $url := .Links }}
        <li><a href="{{$url}}">{{$text}}</a></li>
        {{end}}
    </ul>

    <h1>Probes:</h1>
    <table class="sortable">
        <thead><tr>
            <th>Name</th>
            <th>Class & Labels</th>
            <th>Interval</th>
            <th>Result</th>
            <th>Success</th>
            <th>Latency</th>
            <th>Error</th>
        </tr></thead>
        <tbody>
        {{range $name, $probeInfo := .Probes}}
        <tr>
            <td>
                {{$name}}
                {{range $text, $url := $probeInfo.Links}}
                <br/>
                <button onclick="location.href='{{$url}}';" type="button">
                    {{$text}}
                </button>
                {{end}}
            </td>
            <td>{{$probeInfo.Class}}<br/>
                <div class="small">
                {{range $label, $value := $probeInfo.Labels}}
                    {{$label}}={{$value}}<br/>
                {{end}}
                </div>
            </td>
            <td>{{$probeInfo.Interval}}</td>
            <td data-sort="{{$probeInfo.TimeSinceLast.Milliseconds}}">
                {{if $probeInfo.TimeSinceLast}}
                    {{$probeInfo.TimeSinceLast.String}}<br/>
                    <span class="small">{{$probeInfo.End}}</span>
                {{else}}
                    Never
                {{end}}
            </td>
            <td>
                {{if $probeInfo.Result}}
                    {{$probeInfo.Result}}
                {{else}}
                    <span class="error">{{$probeInfo.Result}}</span>
                {{end}}<br/>
                <div class="small">Recent: {{$probeInfo.RecentResults}}</div>
                <div class="small">Mean: {{$probeInfo.RecentSuccessRatio}}</div>
            </td>
            <td data-sort="{{$probeInfo.Latency.Milliseconds}}">
                {{$probeInfo.Latency.String}}
                <div class="small">Recent: {{$probeInfo.RecentLatencies}}</div>
                <div class="small">Median: {{$probeInfo.RecentMedianLatency}}</div>
            </td>
            <td class="small">{{$probeInfo.Error}}</td>
        </tr>
        {{end}}
        </tbody>
    </table>
    <link href="https://cdn.jsdelivr.net/gh/tofsjonas/sortable@latest/sortable-base.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/gh/tofsjonas/sortable@latest/sortable.min.js"></script>
</body>
</html>
{{end}}