statping/source/tmpl/service.html

{{define "title"}}{{.Service.Name}} Status{{end}}
{{define "description"}}{{$s := .Service}}{{if $s.Online }}{{.Service.Name}} is currently online and responding within {{$s.AvgTime}} milliseconds with {{$s.TotalUptime}}% total uptime on {{$s.Domain}}.{{else}}{{.Service.Name}} is currently offline on {{$s.Domain}}. Notify the admin to let them know their service is offline.{{end}}{{end}}
{{ define "content" }}
{{$s := .Service}}
<div class="container col-md-7 col-sm-12 mt-md-5 bg-light">

{{if Auth}}
    {{template "nav"}}
{{end}}

    <div class="col-12 mb-4">

        {{if $s.Online }}
            <span class="mt-3 mb-3 text-white d-md-none btn bg-success d-block d-md-none">ONLINE</span>
        {{ else }}
            <span class="mt-3 mb-3 text-white d-md-none btn bg-danger d-block d-md-none">OFFLINE</span>
        {{end}}

        <h4 class="mt-2">{{ $s.Name }}
        {{if $s.Online }}
            <span class="badge bg-success float-right d-none d-md-block">ONLINE</span>
        {{ else }}
            <span class="badge bg-danger float-right d-none d-md-block">OFFLINE</span>
        {{end}}</h4>

        <div class="row stats_area mt-5 mb-5">

            <div class="col-4">
                <span class="lg_number">{{$s.Online24}}%</span>
                Online last 24 Hours
            </div>

            <div class="col-4">
                <span class="lg_number">{{$s.AvgTime}}ms</span>
                Average Response
            </div>

            <div class="col-4">
                <span class="lg_number">{{$s.TotalUptime}}%</span>
                Total Uptime
            </div>
        </div>

        <div class="service-chart-container">
            <canvas id="service"></canvas>
        </div>

        <form id="service_date_form" class="col-12 mt-2 mb-3">
            <input type="text" class="d-none" name="start" id="service_start" data-input>
            <span data-toggle title="toggle" id="start_date" class="text-muted small float-left pointer mt-2">{{.Start}} to {{.End}}</span>
            <button type="submit" class="btn btn-light btn-sm mt-2">Set Timeframe</button>
            <input type="text" class="d-none" name="end" id="service_end" data-input>

            <div id="start_container"></div>
            <div id="end_container"></div>
        </form>

    {{if not $s.Online}}
        <div class="col-12 small text-center mt-3 text-muted">{{$s.DowntimeText}}</div>
    {{end}}

    {{if $s.Messages}}
        {{range $s.Messages}}
            <div class="alert alert-warning" role="alert">
                <h3>{{.Title}}</h3>
                <span>{{safe .Description}}</span>
            </div>
        {{end}}
    {{end}}

    {{ if $s.LimitedFailures }}
        <div class="list-group mt-3 mb-4">
        {{ range $s.LimitedFailures }}
            <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
                <div class="d-flex w-100 justify-content-between">
                    <h5 class="mb-1">{{.ParseError}}</h5>
                    <small>{{.Ago}}</small>
                </div>
                <p class="mb-1">{{.Issue}}</p>
            </a>
        {{ end }}
        </div>
    {{ end }}

    </div>

{{if Auth}}

    <div class="col-12 mt-4{{if ne $s.Type "http"}} d-none{{end}}">
        <h3>Last Response</h3>
        <textarea rows="8" class="form-control" readonly>{{ $s.LastResponse }}</textarea>
        <div class="form-group row mt-2">
            <label for="last_status_code" class="col-sm-3 col-form-label">HTTP Status Code</label>
            <div class="col-sm-2">
                <input type="text" id="last_status_code" class="form-control" value="{{ $s.LastStatusCode }}" readonly>
            </div>
        </div>
    </div>

    <div class="col-12 mt-4">
        <h3>Edit Service</h3>
        {{template "form_service" $s}}
    </div>

    <div class="col-12 mt-4">
        <h3>Service Checkin</h3>
        {{if $s.LimitedCheckins}}
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">Checkin</th>
                    <th scope="col">Report Period<br>Grace Period</th>
                    <th scope="col">Last Seen</th>
                    <th scope="col">Expected</th>
                    <th scope="col"></th>
                </tr>
            </thead>
            <tbody>
            {{range $s.LimitedCheckins}}
            {{ $ch := . }}
            <tr class="{{ if lt $ch.Expected 0}}bg-warning text-black{{else}}bg-light{{end}}">
                <td>{{$ch.Name}}<br><a href="{{$ch.Link}}" target="_blank">{{$ch.Link}}</a></td>
                <td>every {{Duration $ch.Period}}<br>after {{Duration $ch.Grace}}</td>
                <td>{{ if $ch.Last.CreatedAt.IsZero}}
                        Never
                    {{else}}
                        {{Ago $ch.Last.CreatedAt}}
                    {{end}}
                </td>
                <td>
                    {{ if $ch.Last.CreatedAt.IsZero}}
                        -
                    {{else}}
                        {{ if lt $ch.Expected 0}}{{Duration $ch.Expected}} ago{{else}}in {{Duration $ch.Expected}}{{end}}
                    {{end}}
                </td>
                <td><a href="/checkin/{{$ch.Id}}/delete" class="btn btn-sm btn-danger">Delete</a></td>
            </tr>
            {{end}}
            </tbody>
        </table>
        {{end}}
        {{template "form_checkin" $s}}
    </div>

{{end}}
</div>
{{end}}
{{define "extra_css"}}
<link rel="stylesheet" href="/css/flatpickr.min.css">
{{end}}
{{define "extra_scripts"}}
{{$s := .Service}}
<script src="/js/flatpickr.js"></script>
<script src="/js/rangePlugin.js"></script>
<script>
$(document).ready(function() {

    var ctx = document.getElementById("service").getContext('2d');

    var chartdata = new Chart(ctx, {
        type: 'line',
        data: {
            datasets: [{
                label: 'Response Time (Milliseconds)',
                data: [],
                backgroundColor: [
                    'rgba(47, 206, 30, 0.92)'
                ],
                borderColor: [
                    'rgb(47, 171, 34)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            legend: {
                display: false
            },
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    },
                    gridLines: {
                        display: true
                    }
                }],
                xAxes: [{
                    type: 'time',
                    distribution: 'series',
                    time: {
                        displayFormats: {
                            'millisecond': 'MMM DD',
                            'second': 'MMM DD',
                            'minute': 'MMM DD',
                            'hour': 'MMM DD hA',
                            'day': 'MMM DD',
                            'week': 'MMM DD',
                            'month': 'MMM DD',
                            'quarter': 'MMM DD',
                            'year': 'MMM DD',
                        }
                    },
                    gridLines: {
                        display: true
                    },
                    ticks: {
                        source: 'auto'
                    }
                }],
            },
            elements: {
                point: {
                    radius: 0
                }
            }
        }
    });

    AjaxChart(chartdata,{{$s.Id}},{{.Start}},{{.End}},"hour");

    let startDate = $("#service_start").flatpickr({
        enableTime: false,
        static: true,
        altInput: true,
        altFormat: "U",
        maxDate: "today",
        dateFormat: "F j, Y",
        onChange: function(selectedDates, dateStr, instance) {
            var one = Math.round((new Date(selectedDates[0])).getTime() / 1000);
            var two = Math.round((new Date(selectedDates[1])).getTime() / 1000);
        	$("#service_start").val(one);
            $("#service_end").val(two);
            $("#start_date").html(dateStr);
        },
        "plugins": [new rangePlugin({ input: "#service_end"})]
    });

    $("#start_date").click(function(e) {
        startDate.open()
    });

});
</script>
{{end}}