mirror of https://github.com/statping/statping
373 lines
14 KiB
Plaintext
373 lines
14 KiB
Plaintext
{{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}}
|
|
{{$incidents := $s.Incidents}}
|
|
{{$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>
|
|
<a class="flex-sm-fill text-sm-center nav-link{{ if not $incidents }} disabled{{end}}" id="incidents-tab" data-toggle="tab" href="#incidents" role="tab" aria-controls="incidents" aria-selected="true">Incidents</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}}
|
|
<div class="tab-pane fade" id="incidents" role="serviceLists" aria-labelledby="incidents-tab">
|
|
{{ if $incidents }}
|
|
<div class="list-group mt-3 mb-4">
|
|
{{ range $incidents }}
|
|
<div class="list-group-item flex-column align-items-start">
|
|
<div class="d-flex w-100 justify-content-between">
|
|
<h5 class="mb-1">{{.Title}}</h5>
|
|
<small>{{.CreatedAt}}</small>
|
|
</div>
|
|
<p class="mb-1">{{.Description}}</p>
|
|
|
|
<ul class="list-group mt-3">
|
|
{{ range .AllUpdates }}
|
|
<li class="list-group-item">
|
|
<p>
|
|
<span class="badge badge-primary">{{.Type}}</span>
|
|
<span class="float-right">
|
|
{{.Message}}
|
|
<p class="text-muted text-right small">{{.CreatedAt}}</p>
|
|
</span>
|
|
</p>
|
|
</li>
|
|
{{end}}
|
|
</ul>
|
|
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
{{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}}
|