2018-09-18 22:02:27 +00:00
{{$s := .Service}}
2018-08-20 07:20:05 +00:00
<!doctype html>
2018-06-11 03:41:02 +00:00
< html lang = "en" >
< head >
< meta charset = "utf-8" >
2018-06-26 07:01:41 +00:00
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1.0, user-scalable=0" >
2018-07-07 05:02:47 +00:00
{{if USE_CDN}}
< link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity = "sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin = "anonymous" >
< link rel = "stylesheet" href = "https://assets.statup.io/base.css" >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js" > < / script >
{{ else }}
2018-06-11 03:41:02 +00:00
< link rel = "stylesheet" href = "/css/bootstrap.min.css" >
< link rel = "stylesheet" href = "/css/base.css" >
< script src = "/js/Chart.bundle.min.js" > < / script >
2018-07-07 05:02:47 +00:00
{{end}}
2018-06-11 03:41:02 +00:00
2018-09-18 22:02:27 +00:00
< title > Statup | {{$s.Name}} Service< / title >
2018-06-11 03:41:02 +00:00
< / head >
< body >
2018-06-24 11:51:07 +00:00
< div class = "container col-md-7 col-sm-12 mt-md-5 bg-light" >
2018-06-11 03:41:02 +00:00
2018-06-19 04:48:25 +00:00
{{if Auth}}
2018-06-11 03:41:02 +00:00
{{template "nav"}}
{{end}}
< div class = "col-12 mb-4" >
2018-09-18 22:02:27 +00:00
{{if $s.Online }}
2018-06-30 22:22:56 +00:00
< span class = "mt-3 mb-3 text-white d-md-none btn bg-success d-block d-md-none" > ONLINE< / span >
2018-06-27 07:31:00 +00:00
{{ else }}
2018-06-30 22:22:56 +00:00
< span class = "mt-3 mb-3 text-white d-md-none btn bg-danger d-block d-md-none" > OFFLINE< / span >
2018-06-27 07:31:00 +00:00
{{end}}
2018-09-18 22:02:27 +00:00
< h4 class = "mt-2" > {{ $s.Name }}
{{if $s.Online }}
2018-06-30 22:22:56 +00:00
< span class = "badge bg-success float-right d-none d-md-block" > ONLINE< / span >
2018-06-11 03:41:02 +00:00
{{ else }}
2018-06-30 22:22:56 +00:00
< span class = "badge bg-danger float-right d-none d-md-block" > OFFLINE< / span >
2018-06-22 06:56:44 +00:00
{{end}}< / h4 >
2018-06-11 03:41:02 +00:00
< div class = "row stats_area mt-5 mb-5" >
< div class = "col-4" >
2018-09-18 22:02:27 +00:00
< span class = "lg_number" > {{$s.Online24}}%< / span >
2018-06-11 03:41:02 +00:00
Online last 24 Hours
< / div >
< div class = "col-4" >
2018-09-18 22:02:27 +00:00
< span class = "lg_number" > {{$s.AvgTime}}ms< / span >
2018-06-11 03:41:02 +00:00
Average Response
< / div >
< div class = "col-4" >
2018-09-18 22:02:27 +00:00
< span class = "lg_number" > {{$s.TotalUptime}}%< / span >
2018-06-11 03:41:02 +00:00
Total Uptime
< / div >
< / div >
2018-09-27 01:49:21 +00:00
< div class = "service-chart-container" >
2018-09-21 04:17:24 +00:00
< canvas id = "service" > < / canvas >
2018-09-10 09:01:04 +00:00
< / div >
2018-06-11 03:41:02 +00:00
2018-09-27 01:49:21 +00:00
< form id = "service_date_form" class = "col-12 mt-2 mb-3" >
2018-09-18 22:02:27 +00:00
< span id = "start_date" class = "text-muted small float-left pointer" > {{FromUnix .Start}}< / span >
< span id = "end_date" class = "text-muted small float-right pointer" style = "position: absolute;right: 0;" > {{FromUnix .End}}< / span >
< input type = "hidden" name = "start" class = "form-control" id = "service_start" spellcheck = "false" >
< input type = "hidden" name = "end" class = "form-control" id = "service_end" spellcheck = "false" >
< button type = "submit" class = "btn btn-light btn-block btn-sm mt-2" > Set Timeframe< / button >
< 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.LimitedFailures }}
2018-07-17 09:18:20 +00:00
< div class = "list-group mt-3 mb-4" >
2018-09-18 22:02:27 +00:00
{{ range $s.LimitedFailures }}
2018-06-30 03:40:00 +00:00
< 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 >
2018-08-23 07:28:48 +00:00
< small > {{.Ago}}< / small >
2018-06-30 03:40:00 +00:00
< / div >
2018-08-20 07:20:05 +00:00
< p class = "mb-1" > {{.Issue}}< / p >
2018-06-30 03:40:00 +00:00
< / a >
{{ end }}
< / div >
{{ end }}
2018-06-11 03:41:02 +00:00
2018-06-22 04:02:57 +00:00
< / div >
2018-06-11 03:41:02 +00:00
2018-06-26 07:01:41 +00:00
{{if Auth}}
2018-06-22 06:56:44 +00:00
2018-06-26 07:01:41 +00:00
< div class = "col-12 mt-4" >
2018-06-11 03:41:02 +00:00
< h3 > Edit Service< / h3 >
2018-09-18 22:02:27 +00:00
< form action = "/service/{{$s.Id}}" method = "POST" >
2018-06-11 03:41:02 +00:00
< div class = "form-group row" >
2018-06-22 04:02:57 +00:00
< label for = "service_name" class = "col-sm-4 col-form-label" > Service Name< / label >
< div class = "col-sm-8" >
2018-09-18 22:02:27 +00:00
< input type = "text" name = "name" class = "form-control" id = "service_name" value = "{{$s.Name}}" placeholder = "Name" required spellcheck = "false" >
2018-06-22 04:02:57 +00:00
< / div >
< / div >
< div class = "form-group row" >
< label for = "service_type" class = "col-sm-4 col-form-label" > Service Check Type< / label >
2018-06-11 03:41:02 +00:00
< div class = "col-sm-8" >
2018-09-18 22:02:27 +00:00
< select name = "check_type" class = "form-control" id = "service_type" value = "{{$s.Type}}" >
< option value = "http" { { if eq $ s . Type " http " } } selected { { end } } > HTTP Service< / option >
< option value = "tcp" { { if eq $ s . Type " tcp " } } selected { { end } } > TCP Service< / option >
2018-06-22 04:02:57 +00:00
< / select >
< / div >
< / div >
< div class = "form-group row" >
2018-06-23 00:10:37 +00:00
< label for = "service_url" class = "col-sm-4 col-form-label" > Application Endpoint (URL)< / label >
< div class = "col-sm-8" >
2018-09-18 22:02:27 +00:00
< input type = "text" name = "domain" class = "form-control" id = "service_url" value = "{{$s.Domain}}" placeholder = "https://google.com" required autocapitalize = "false" spellcheck = "false" >
2018-06-11 03:41:02 +00:00
< / div >
< / div >
2018-09-18 22:02:27 +00:00
< div class = "form-group row{{if eq $s.Type " tcp " } } d-none { { end } } " >
2018-06-22 04:02:57 +00:00
< label for = "service_check_type" class = "col-sm-4 col-form-label" > Service Check Type< / label >
2018-06-11 03:41:02 +00:00
< div class = "col-sm-8" >
2018-09-18 22:02:27 +00:00
< select name = "method" class = "form-control" id = "service_check_type" value = "{{$s.Method}}" >
< option value = "GET" { { if eq $ s . Method " GET " } } selected { { end } } > GET< / option >
< option value = "POST" { { if eq $ s . Method " POST " } } selected { { end } } > POST< / option >
< option value = "DELETE" { { if eq $ s . Method " DELETE " } } selected { { end } } > DELETE< / option >
< option value = "PATCH" { { if eq $ s . Method " PATCH " } } selected { { end } } > PATCH< / option >
< option value = "PUT" { { if eq $ s . Method " PUT " } } selected { { end } } > PUT< / option >
2018-06-22 04:02:57 +00:00
< / select >
2018-06-11 03:41:02 +00:00
< / div >
< / div >
2018-09-18 22:02:27 +00:00
< div class = "form-group row{{if ne $s.Method " POST " } } d-none { { end } } " >
2018-07-18 23:01:24 +00:00
< label for = "post_data" class = "col-sm-4 col-form-label" > Optional Post Data (JSON)< / label >
2018-07-01 10:24:35 +00:00
< div class = "col-sm-8" >
2018-09-18 22:02:27 +00:00
< textarea name = "post_data" class = "form-control" id = "post_data" rows = "3" autocapitalize = "false" spellcheck = "false" > {{$s.PostData}}< / textarea >
2018-08-21 06:54:39 +00:00
< small id = "emailHelp" class = "form-text text-muted" > You can insert < a target = "_blank" href = "https://regex101.com/r/I5bbj9/1" > Regex< / a > to validate the response< / small >
2018-07-01 10:24:35 +00:00
< / div >
< / div >
2018-09-18 22:02:27 +00:00
< div class = "form-group row{{if eq $s.Type " tcp " } } d-none { { end } } " >
2018-06-22 04:02:57 +00:00
< label for = "service_response" class = "col-sm-4 col-form-label" > Expected Response (Regex)< / label >
2018-06-11 03:41:02 +00:00
< div class = "col-sm-8" >
2018-09-18 22:02:27 +00:00
< textarea name = "expected" class = "form-control" id = "service_response" rows = "3" autocapitalize = "false" spellcheck = "false" > {{$s.Expected}}< / textarea >
2018-06-11 03:41:02 +00:00
< / div >
< / div >
2018-09-18 22:02:27 +00:00
< div class = "form-group row{{if eq $s.Type " tcp " } } d-none { { end } } " >
2018-06-22 04:02:57 +00:00
< label for = "service_response_code" class = "col-sm-4 col-form-label" > Expected Status Code< / label >
2018-06-11 03:41:02 +00:00
< div class = "col-sm-8" >
2018-09-18 22:02:27 +00:00
< input type = "number" name = "expected_status" class = "form-control" value = "{{$s.ExpectedStatus}}" id = "service_response_code" >
2018-06-11 03:41:02 +00:00
< / div >
< / div >
2018-09-18 22:02:27 +00:00
< div class = "form-group row{{if eq $s.Type " http " } } d-none { { end } } " >
2018-06-22 04:02:57 +00:00
< label for = "service_port" class = "col-sm-4 col-form-label" > TCP Port< / label >
2018-06-11 03:41:02 +00:00
< div class = "col-sm-8" >
2018-09-18 22:02:27 +00:00
< input type = "number" name = "port" class = "form-control" value = "{{$s.Port}}" id = "service_port" placeholder = "8080" >
2018-06-11 03:41:02 +00:00
< / div >
< / div >
< div class = "form-group row" >
2018-06-22 04:02:57 +00:00
< label for = "service_interval" class = "col-sm-4 col-form-label" > Check Interval (Seconds)< / label >
2018-06-11 03:41:02 +00:00
< div class = "col-sm-8" >
2018-09-18 22:02:27 +00:00
< input type = "number" name = "interval" class = "form-control" value = "{{$s.Interval}}" min = "1" id = "service_interval" required >
2018-08-21 06:54:39 +00:00
< small id = "emailHelp" class = "form-text text-muted" > 10,000+ will be checked in Microseconds (1 millisecond = 1000 microseconds).< / small >
2018-06-11 03:41:02 +00:00
< / div >
< / div >
2018-07-18 23:01:24 +00:00
< div class = "form-group row" >
< label for = "service_timeout" class = "col-sm-4 col-form-label" > Timeout in Seconds< / label >
< div class = "col-sm-8" >
2018-09-18 22:02:27 +00:00
< input type = "number" name = "timeout" class = "form-control" value = "{{$s.Timeout}}" id = "service_timeout" min = "1" >
2018-07-18 23:01:24 +00:00
< / div >
< / div >
2018-08-21 06:54:39 +00:00
< div class = "form-group row" >
< label for = "order" class = "col-sm-4 col-form-label" > List Order< / label >
< div class = "col-sm-8" >
2018-09-18 22:02:27 +00:00
< input type = "number" name = "order" class = "form-control" min = "0" value = "{{$s.Order}}" id = "order" >
2018-08-21 06:54:39 +00:00
< / div >
< / div >
2018-06-11 03:41:02 +00:00
< div class = "form-group row" >
2018-06-30 19:30:58 +00:00
< div class = "col-6" >
2018-06-24 11:51:07 +00:00
< button type = "submit" class = "btn btn-success btn-block" > Update Service< / button >
< / div >
2018-06-30 19:30:58 +00:00
< div class = "col-6" >
2018-09-18 22:02:27 +00:00
< a href = "/service/{{ $s.Id }}/delete_failures" class = "btn btn-danger btn-block confirm-btn" > Delete All Failures< / a >
2018-06-11 03:41:02 +00:00
< / div >
< / div >
< / form >
< / div >
2018-06-23 08:42:50 +00:00
2018-09-18 22:02:27 +00:00
< div class = "col-12 mt-4{{if eq $s.Type " tcp " } } d-none { { end } } " >
2018-06-23 08:42:50 +00:00
< h3 > Last Response< / h3 >
2018-09-18 22:02:27 +00:00
< textarea rows = "8" class = "form-control" readonly > {{ $s.LastResponse }}< / textarea >
2018-06-23 08:42:50 +00:00
< div class = "form-group row mt-2" >
2018-07-22 22:17:38 +00:00
< label for = "last_status_code" class = "col-sm-3 col-form-label" > HTTP Status Code< / label >
2018-06-26 07:01:41 +00:00
< div class = "col-sm-2" >
2018-09-18 22:02:27 +00:00
< input type = "text" id = "last_status_code" class = "form-control" value = "{{ $s.LastStatusCode }}" readonly >
2018-06-23 08:42:50 +00:00
< / div >
< / div >
< / div >
2018-06-11 03:41:02 +00:00
2018-09-18 22:02:27 +00:00
< div class = "col-12 mt-4{{if eq $s.Type " tcp " } } d-none { { end } } " >
2018-06-30 03:40:00 +00:00
< h3 > Service Checkins< / h3 >
2018-09-18 22:02:27 +00:00
{{ range $s.Checkins }}
2018-06-30 19:30:58 +00:00
< h5 > Check #{{.Id}} < span class = "badge online_badge float-right" > Checked in {{.Ago}}< / span > < / h5 >
< input type = "text" class = "form-control" value = "https://domainhere.com/api/checkin/{{.Api}}" >
2018-06-30 03:40:00 +00:00
{{ end }}
2018-09-18 22:02:27 +00:00
< form action = "/service/{{$s.Id}}/checkin" method = "POST" >
2018-06-30 03:40:00 +00:00
< div class = "form-group row" >
< label for = "service_name" class = "col-sm-4 col-form-label" > Check Interval (in seconds)< / label >
2018-06-30 22:22:56 +00:00
< div class = "col-md-6 col-sm-12" >
2018-06-30 03:40:00 +00:00
< input type = "number" name = "name" class = "form-control" id = "checkin_interval" value = "30" placeholder = "Name" >
< / div >
2018-06-30 22:22:56 +00:00
< div class = "col-md-2" >
< button type = "submit" class = "btn btn-success d-none d-md-block float-right" > Save Checkin< / button >
< / div >
2018-06-22 06:56:44 +00:00
< / div >
2018-06-30 03:40:00 +00:00
< div class = "form-group row" >
< div class = "col-sm-10" >
2018-06-30 22:22:56 +00:00
< button type = "submit" class = "btn btn-success d-block d-md-none btn-block" > Save Checkin< / button >
2018-06-30 03:40:00 +00:00
< / div >
< / div >
< / form >
2018-06-30 22:22:56 +00:00
< / div >
2018-06-30 03:40:00 +00:00
2018-06-30 19:30:58 +00:00
{{end}}
2018-06-30 03:40:00 +00:00
< / div >
2018-06-19 04:48:25 +00:00
2018-06-22 04:02:57 +00:00
{{template "footer"}}
2018-06-11 03:41:02 +00:00
2018-07-07 05:02:47 +00:00
{{if USE_CDN}}
2018-08-22 05:41:15 +00:00
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > < / script >
2018-07-07 05:02:47 +00:00
< script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity = "sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin = "anonymous" > < / script >
2018-09-10 09:01:04 +00:00
< script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js" > < / script >
2018-09-18 22:02:27 +00:00
< script src = "https://assets.statup.io/pikaday.js" > < / script >
2018-07-07 05:02:47 +00:00
< script src = "https://assets.statup.io/main.js" > < / script >
{{ else }}
2018-08-22 05:41:15 +00:00
< script src = "/js/jquery-3.3.1.min.js" > < / script >
2018-07-07 05:02:47 +00:00
< script src = "/js/bootstrap.min.js" > < / script >
2018-09-10 09:01:04 +00:00
< script src = "/js/Chart.bundle.min.js" > < / script >
2018-09-18 22:02:27 +00:00
< script src = "/js/pikaday.js" > < / script >
2018-07-07 05:02:47 +00:00
< script src = "/js/main.js" > < / script >
{{end}}
2018-09-18 22:02:27 +00:00
< script >
2018-09-21 04:17:24 +00:00
var ctx = document.getElementById("service").getContext('2d');
var chartdata = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Response Time (Milliseconds)',
2018-09-25 04:19:59 +00:00
data: {{js .Data}},
2018-09-21 04:17:24 +00:00
backgroundColor: [
'rgba(47, 206, 30, 0.92)'
],
borderColor: [
'rgb(47, 171, 34)'
],
borderWidth: 1
}]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
gridLines: {
2018-09-25 04:19:59 +00:00
display: true
2018-09-21 04:17:24 +00:00
}
}],
xAxes: [{
type: 'time',
gridLines: {
2018-09-25 04:19:59 +00:00
display:true
2018-09-21 04:17:24 +00:00
}
}]
},
elements: {
point: {
radius: 0
}
}
}
});
2018-09-18 22:02:27 +00:00
var startPick = new Pikaday({
field: $('#service_start')[0],
bound: false,
trigger: $("#start_date"),
container: $("#start_container")[0],
maxDate: new Date(),
onSelect: function(date) {
$('#service_start')[0].value = Math.round(date.getTime() / 1000);
this.hide();
}
});
var endPick = new Pikaday({
field: $('#service_end')[0],
bound: false,
trigger: $("#end_date"),
container: $("#end_container")[0],
maxDate: new Date(),
onSelect: function(date) {
$('#service_end')[0].value = Math.round(date.getTime() / 1000);
this.hide();
}
});
startPick.setDate(new Date({{.Start}}*1000));
endPick.setDate(new Date({{.End}}*1000));
startPick.hide()
endPick.hide()
$("#start_date").click(function(e) {
startPick.show()
})
$("#end_date").click(function(e) {
endPick.show()
})
< / script >
2018-06-11 03:41:02 +00:00
< / body >
2018-09-05 10:54:57 +00:00
< / html >
