statping/source/tmpl/service.gohtml

{{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}}
{{$failures := $s.LimitedFailures 16}}
{{$checkinFailures := $s.LimitedCheckinFailures 16}}
{{$isAdmin := Auth}}
<div class="container col-md-7 col-sm-12 mt-md-5 bg-light">

{{if IsUser}}
    {{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"><a href="/">{{CoreApp.Name}}</a> - {{ $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.OnlineDaysPercent 1}}%</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>

        {{if $s.ActiveMessages}}
        <div class="col-12 mb-5">
            {{range $s.ActiveMessages}}
                <div class="alert alert-warning" role="alert">
                    <h3>{{.Title}}</h3>
                    <span class="mb-3">{{safe .Description}}</span>
                    <div class="d-block mt-2 mb-4">
                        <span class="float-left small">Starts at {{.StartOn}}</span>
                        <span class="float-right small">Ends on {{.EndOn}}</span>
                    </div>
                </div>
            {{end}}
        </div>
        {{end}}

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

        <div class="service-chart-heatmap">
            <div id="service_heatmap"></div>
        </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 IsUser}}
    <nav class="nav nav-pills flex-column flex-sm-row mt-3" id="service_tabs" role="serviceLists">
        {{if $isAdmin}}<a class="flex-sm-fill text-sm-center nav-link active" id="edit-tab" data-toggle="tab" href="#edit" role="tab" aria-controls="edit" aria-selected="false">Edit Service</a>{{end}}
        <a class="flex-sm-fill text-sm-center nav-link{{ if not $failures }} disabled{{end}}" id="failures-tab" data-toggle="tab" href="#failures" role="tab" aria-controls="failures" aria-selected="true">Failures</a>
        {{if $isAdmin}}<a class="flex-sm-fill text-sm-center nav-link" id="checkins-tab" data-toggle="tab" href="#checkins" role="tab" aria-controls="checkins" aria-selected="false">Checkins</a>{{end}}
        <a class="flex-sm-fill text-sm-center nav-link{{if not $isAdmin}} active{{end}}" id="response-tab" data-toggle="tab" href="#response" role="tab" aria-controls="response" aria-selected="false">Response</a>
    </nav>
    <div class="tab-content" id="myTabContent">
        {{if $isAdmin}}
        <div class="tab-pane fade" id="failures" role="serviceLists" aria-labelledby="failures-tab">
        {{ if $failures }}
            <div class="list-group mt-3 mb-4">
            {{ range $failures }}
                <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>
        {{end}}
        {{if $isAdmin}}
        <div class="tab-pane fade" id="checkins" role="serviceLists" aria-labelledby="checkins-tab">
            {{if $s.AllCheckins}}
                <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 style="font-size: 10pt;">
                    {{range $s.AllCheckins}}
                    {{ $ch := . }}
                    <tr id="checkin_{{$ch.Id}}" 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="/api/checkin/{{$ch.ApiKey}}" data-method="DELETE" data-obj="checkin_{{$ch.Id}}" data-id="{{$ch.Id}}" class="ajax_delete btn btn-sm btn-danger">Delete</a></td>
                    </tr>
                    {{end}}
                    </tbody>
                </table>
            {{end}}
            {{if $isAdmin}}
                {{template "form_checkin" $s}}
            {{end}}
            {{ if $checkinFailures }}
                <div class="list-group mt-3 mb-4">
                {{ range $checkinFailures }}
                    <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>
        {{ end }}
        <div class="tab-pane fade{{if not $isAdmin}} show active{{end}}" id="response" role="serviceLists" aria-labelledby="response-tab">
            <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>
        {{if $isAdmin}}
        <div class="tab-pane fade show active" id="edit" role="serviceLists" aria-labelledby="edit-tab">
            {{template "form_service" $s}}
        </div>
        {{end}}
    </div>
{{else}}
    {{if $s.Public.Bool }}
        {{ if $failures }}
            <div class="list-group mt-3 mb-4">
                {{ range $failures }}
                    <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 }}
    {{end}}
{{end}}
</div>
</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>

let options = {
    chart: {
        height: "100%",
        width: "100%",
        type: "area",
        animations: {
            enabled: false,
            initialAnimation: {
                enabled: false
            }
        },
    },
    fill: {
        colors: ["#48d338"],
        opacity: 1,
        type: 'solid'
    },
    stroke: {
        show: true,
        curve: 'smooth',
        lineCap: 'butt',
        colors: ["#3aa82d"],
    },
	series: [{data: [{}]}],
    xaxis: {
        type: "datetime",
        tickAmount: 8,
    },
    yaxis: {
        labels: {
            formatter: (value) => {
                return (value).toFixed(0) + "ms"
            },
        },
    },
    dataLabels: {
        enabled: false
    },
};



var heat_options = {
    chart: {
        height: "100%",
        width: "100%",
        type: 'heatmap',
        toolbar: {
            show: false
        }
    },
    dataLabels: {
        enabled: false,
    },
    enableShades: true,
    shadeIntensity: 0.5,
    colors: ["#d53a3b"],
    series: [{data: [{}]}],
    yaxis: {
        labels: {
            formatter: (value) => {
                return value
            },
        },
    },
    tooltip: {
        enabled: true,
        x: {
            show: false,
        },
        y: {
            formatter: function(val, opts) { return val+" Failures" },
            title: {
                formatter: (seriesName) => seriesName,
            },
        },
    }
};


async function RenderHeatmap() {
    let heatChart = new ApexCharts(
        document.querySelector("#service_heatmap"),
        heat_options
    );
    let dataArr = [];
    let heatmapData = await ChartHeatmap({{$s.Id}});
    heatmapData.forEach(function(d) {
        var date = new Date(d.date);
        dataArr.push({name: date.toLocaleString('en-us', { month: 'long' }), data: d.data});
    });
    heatChart.render();
    heatChart.updateSeries(dataArr);
}

async function RenderChartLatency() {
	options.fill.colors = {{if $s.Online}}["#48d338"]{{else}}["#dd3545"]{{end}};
	options.stroke.colors = {{if $s.Online}}["#3aa82d"]{{else}}["#c23342"]{{end}};
    let chart = new ApexCharts(document.querySelector("#service"), options);
    await RenderChart(chart,{{$s.Id}},{{.StartUnix}},{{.EndUnix}},"hour");
}

$(document).ready(async function() {
    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()
    });

    await RenderChartLatency();
    await RenderHeatmap();

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