github
/
statping
mirror of https://github.com/statping/statping
1
0
Fork 0
Code Issues Releases Wiki Activity

design n everything else

pull/10/head v0.25
Hunter Long 2018-06-26 00:01:41 -07:00
parent 5d6b1a9a28
commit af3ca04c26
14 changed files with 176 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.travis.yml
View File

@ -18,7 +18,7 @@ services:
env:
global:
- VERSION=0.243
- VERSION=0.25
- DB_HOST=localhost
- DB_USER=travis
- DB_PASS=

2
README.md
View File

@ -3,7 +3,7 @@ An easy to use Status Page for your websites and applications. Statup will autom
for you to build an even better status page.
<p align="center">
<a href="https://github.com/hunterlong/statup/wiki">View Wiki</a> <br> <a href="https://github.com/hunterlong/statup/wiki/Docker">Docker</a> | <a href="https://github.com/hunterlong/statup/wiki/AWS-EC2">EC2</a> | <a href="https://github.com/hunterlong/statup/wiki/Heroku">Heroku</a> | <a href="https://github.com/hunterlong/statup/wiki/Mac">Mac</a> | <a href="https://github.com/hunterlong/statup/wiki/Linux">Linux</a> | <a href="https://github.com/hunterlong/statup/wiki/Windows">Windows</a>
<a href="https://github.com/hunterlong/statup/wiki">View Wiki</a> | <a href="https://demo.statup.io">Demo</a> <br> <a href="https://github.com/hunterlong/statup/wiki/Docker">Docker</a> | <a href="https://github.com/hunterlong/statup/wiki/AWS-EC2">EC2</a> | <a href="https://github.com/hunterlong/statup/wiki/Heroku">Heroku</a> | <a href="https://github.com/hunterlong/statup/wiki/Mac">Mac</a> | <a href="https://github.com/hunterlong/statup/wiki/Linux">Linux</a> | <a href="https://github.com/hunterlong/statup/wiki/Windows">Windows</a>
</p>
## A Future-Proof Status Page

41
html/css/base.css
View File

@ -8,10 +8,20 @@ HTML,BODY {
max-width: 860px;
}
.online_list .badge {
margin-top: 0.2rem;
}
.navbar {
margin-bottom: 30px;
}
.failing_bg {
background-color: #ff4e4e !important;
font-weight: bold;
}
.lg_number {
font-size: 26pt;
font-weight: bold;
@ -58,9 +68,13 @@ HTML,BODY {
}
.footer A {
color: #cccccc;
color: #aaaaaa;
text-decoration: none;
}
.footer A:HOVER {
color: #6d6d6d;
}
.online_badge {
color: #fff;
@ -93,7 +107,26 @@ HTML,BODY {
.chart-container {
position: relative;
height: 20vh;
width: 60vh;
width: 67vh;
margin-left: -52px;
margin-bottom: -30px;
}
.btn-primary {
background-color: white;
border: 1px solid #b9b9b9;
color: #353535;
height: 35px;
padding: 5px 15px;
}
.btn-danger {
background-color: #dd3545;
border: 1px solid #b70000;
color: #fffcfc;
height: 35px;
padding: 5px 15px;
}
@media (max-width: 767px) {
@ -109,8 +142,8 @@ HTML,BODY {
.chart-container {
position: relative;
height:17vh;
width:80vw;
height: 20vh;
width: 100vw;
}
.container {

6
html/js/setup.js
View File

@ -22,3 +22,9 @@ $('select#database_type').on('change', function(){
}
});
$("#setup_form").submit(function() {
$("#setup_button").prop("disabled", true);
$("#setup_button").text("Creating Statup...");
return true;
});

26
html/tmpl/dashboard.html
View File

@ -2,8 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/base.css">
@ -16,9 +15,9 @@
{{template "nav"}}
<div class="col-12">
<div class="col-12 mt-5">
<div class="row stats_area mb-4">
<div class="row stats_area mb-5">
<div class="col-4">
<span class="lg_number">{{ .CountServices }}</span>
@ -36,16 +35,31 @@
</div>
</div>
<div class="row">
<div class="row mt-4">
<div class="col-12">
<h3>Services</h3>
<div class="list-group mb-5 mt-3">
{{ range .Services }}
<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">{{.Name}}</h5>
<small>{{if .Online}} <span class="badge badge-success">ONLINE</span> {{else}} <span class="badge badge-danger">OFFLINE</span> {{end}}</small>
</div>
<p class="mb-1">Created {{.CreatedAt}}</p>
</a>
{{ end }}
</div>
<h3>Latest Failures</h3>
{{ range .Services }}
{{ if .LimitedFailures }}
<div class="list-group mt-5">
<div class="list-group mt-3">
{{ range .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">

84
html/tmpl/index.html
View File

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1.0, user-scalable=0">
{{if .Core.OfflineAssets}}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
@ -20,17 +20,16 @@
<div class="container col-md-7 col-sm-12 mt-2 sm-container">
<h1 class="text-center mb-4 mt-sm-3">{{.Core.Name}}</h1>
<h1 class="col-12 text-center mb-4 mt-sm-3">{{.Core.Name}}</h1>
{{ if .Core.Description }}
<h5 class="text-center mb-5 text-muted">{{ .Core.Description }}</h5>
<h5 class="col-12 text-center mb-5 text-muted">{{ .Core.Description }}</h5>
{{ end }}
<div class="col-12 mb-5">
<div class="list-group online_list">
{{ range .Services }}
<a href="#" class="list-group-item list-group-item-action {{if not .Online}}bg-danger text-white{{ end }}">
<a href="#" class="list-group-item list-group-item-action {{if not .Online}}failing_bg text-white{{ end }}">
{{ .Name }}
{{if .Online}}
<span class="badge online_badge float-right">ONLINE</span>
@ -48,13 +47,11 @@
{{ range .Services }}
<div class="mt-4">
<div class="card">
<div class="card-body{{if .Online}}{{else}} offline_bg{{end}}">
<div class="card-body{{if not .Online}} offline_bg{{end}}">
<div class="progress">
<div class="progress-bar {{if .Online24Hours}} bg-success {{else}} bg-danger {{end}}" role="progressbar" style="width: {{.Online24Hours}}%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="col-12">
<h4 class="mt-4"><a href="/service/{{.Id}}">{{ .Name }}</a>
<h4 class="mt-3"><a href="/service/{{.Id}}"{{if not .Online}} class="text-danger"{{end}}>{{ .Name }}</a>
{{if .Online}}
<span class="badge online_badge float-right">ONLINE</span>
{{ else }}
@ -79,9 +76,11 @@
</div>
</div>
{{ if .AvgTime }}
<div class="chart-container">
<canvas id="service_{{ .Id }}"></canvas>
</div>
{{ end }}
{{ if .LimitedFailures }}
<div class="list-group mt-5">
@ -95,11 +94,11 @@
</a>
{{ end }}
<span class="text-right">{{ .TotalFailures }} Total Failures</span>
<span class="mt-2 text-right">{{ .TotalFailures }} Total Failures</span>
</div>
{{ end }}
</div>
</div>
</div>
</div>
@ -113,7 +112,7 @@
<script>
{{ range .Services }}
{{if .GraphData}}
{{ if .AvgTime }}
var ctx = document.getElementById("service_{{.Id}}").getContext('2d');
var chartdata = new Chart(ctx, {
@ -133,13 +132,64 @@ var chartdata = new Chart(ctx, {
},
options: {
maintainAspectRatio: false,
scaleShowValues: true,
hover: {
"animationDuration": 0
},
animation: {
"duration": 0,
"onComplete": function() {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
var controller = this.chart.controller;
var xAxis = controller.scales['x-axis-0'];
var numTicks = xAxis.ticks.length;
var yOffsetStart = xAxis.width / numTicks;
var halfBarWidth = (xAxis.width / (numTicks * 2));
xAxis.ticks.forEach(function(value, index) {
var xOffset = 20;
var yOffset = (yOffsetStart * index) + halfBarWidth;
ctx.fillStyle = '#e2e2e2';
ctx.fillText(value, yOffset, xOffset);
});
this.data.datasets.forEach(function(dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
var hx = 0;
var hy = 0;
var highestNum = 0;
meta.data.forEach(function(bar, index) {
var data = dataset.data[index];
if (data.y > highestNum) {
highestNum = data.y;
highest = bar;
hx = bar._model.x;
hy = bar._model.y;
}
});
ctx.fillStyle = '#0d7809';
ctx.fillText(highestNum+"ms", hx - 40, hy + 15);
});
}
},
legend: {
display: false
},
tooltips: {
"enabled": false
},
scales: {
yAxes: [{
display: false,
ticks: {
beginAtZero: true
fontSize: 20,
display: false
},
gridLines: {
display:false
@ -148,8 +198,14 @@ var chartdata = new Chart(ctx, {
xAxes: [{
type: 'time',
distribution: 'series',
autoSkip: false,
gridLines: {
display:false
},
ticks: {
fontColor: "white",
fontSize: 20,
display: false,
}
}]
},

3
html/tmpl/login.html
View File

@ -2,8 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/base.css">

6
html/tmpl/plugins.html
View File

@ -2,8 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/base.css">
@ -24,8 +23,9 @@
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Settings</a>
<a class="nav-link" id="v-pills-style-tab" data-toggle="pill" href="#v-pills-style" role="tab" aria-controls="v-pills-style" aria-selected="false">Styling</a>
<a class="nav-link" id="v-pills-email-tab" data-toggle="pill" href="#v-pills-email" role="tab" aria-controls="v-pills-email" aria-selected="true">Email Settings</a>
{{ range .Communications }}
<a class="nav-link text-uppercase" id="v-pills-{{ .Method }}-tab" data-toggle="pill" href="#v-pills-{{ .Method }}" role="tab" aria-controls="v-pills-{{ .Method }}" aria-selected="false">{{ .Method }}</a>
{{ end }}
<a class="nav-link" id="v-pills-browse-tab" data-toggle="pill" href="#v-pills-browse" role="tab" aria-controls="v-pills-home" aria-selected="false">Browse Plugins</a>
{{ range .Plugins }}

38
html/tmpl/service.html
View File

@ -2,8 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/base.css">
<script src="/js/Chart.bundle.min.js"></script>
@ -57,24 +56,26 @@
</div>
<div class="col-12">
{{if Auth}}
<h3>Service Checkins</h3>
<div class="col-12mt-4">
{{ range .Checkins }}
<h3>Service Checkins</h3>
<div class="col-12 mt-3">
{{ range .Checkins }}
<h5>Check #{{.Id}} <span class="badge online_badge float-right">Checked in {{.Ago}}</span></h5>
<div class="col-12 mt-3">
<input type="text" class="form-control" value="https://domainhere.com/api/checkin/{{.Api}}">
<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}}">
</div>
</div>
{{ end }}
{{ end }}
<form action="/service/{{.Id}}/checkin" method="POST">
<form action="/service/{{.Id}}/checkin" method="POST">
<div class="form-group row">
<label for="service_name" class="col-sm-4 col-form-label">Check Interval (in seconds)</label>
<div class="col-sm-8">
@ -86,16 +87,13 @@
<button type="submit" class="btn btn-success">Save Checkin</button>
</div>
</div>
</form>
</form>
</div>
</div>
{{if Auth}}
<div class="col-12">
<div class="col-12 mt-4">
<h3>Edit Service</h3>
@ -166,15 +164,15 @@
</div>
<div class="col-12">
<div class="col-12 mt-4">
<h3>Last Response</h3>
<textarea rows="8" class="form-control" readonly>{{ .LastResponse }}</textarea>
<div class="form-group row mt-2">
<label for="last_status_code" class="col-sm-3 col-form-label">Status Code</label>
<div class="col-sm-9">
<input type="text" id="last_status_code" class="form-control" value="{{ .LastStatusCode }}">
<div class="col-sm-2">
<input type="text" id="last_status_code" class="form-control" value="{{ .LastStatusCode }}" readonly>
</div>
</div>

3
html/tmpl/services.html
View File

@ -2,8 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/base.css">

8
html/tmpl/setup.html
View File

@ -2,8 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/base.css">
<script src="/js/Chart.bundle.min.js"></script>
@ -23,7 +22,7 @@
</div>
{{ end }}
<form method="POST" action="/setup">
<form method="POST" id="setup_form" action="/setup">
<div class="row">
@ -100,8 +99,7 @@
</div>
<button type="submit" class="btn btn-primary btn-block">Save Settings</button>
<button id="setup_button" type="submit" class="btn btn-primary btn-block">Save Settings</button>
</div>

13
html/tmpl/users.html
View File

@ -2,8 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/base.css">
@ -23,7 +22,6 @@
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Username</th>
<th scope="col"></th>
</tr>
@ -31,7 +29,6 @@
<tbody>
{{range .}}
<tr>
<th scope="row">{{.Id}}</th>
<td>{{.Username}}</td>
<td class="text-right">
<div class="btn-group">
@ -51,6 +48,12 @@
<input type="text" name="username" class="form-control" id="inputEmail3" placeholder="Username">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-4 col-form-label">Email Address</label>
<div class="col-sm-8">
<input type="text" name="email" class="form-control" id="inputEmail3" placeholder="user@domain.com">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-4 col-form-label">Password</label>
<div class="col-sm-8">
@ -60,7 +63,7 @@
<div class="form-group row">
<label for="inputPassword3" class="col-sm-4 col-form-label">Confirm Password</label>
<div class="col-sm-8">
<input type="password" name="password_confirm" class="form-control" id="inputPassword3" placeholder="ConfirmPassword">
<input type="password" name="password_confirm" class="form-control" id="inputPassword3" placeholder="Confirm Password">
</div>
</div>
<div class="form-group row">

7
servers/init.service
View File

@ -1,12 +1,13 @@
[Unit]
Description=Statup Docker Startup
Description=Statup Server
After=network.target
After=systemd-user-sessions.service
After=network-online.target
[Service]
Type=oneshot
ExecStart=/home/ubuntu/init.sh
Type=simple
Restart=always
ExecStart=/usr/local/bin/statup
[Install]
WantedBy=multi-user.target

4
web.go
View File

@ -114,13 +114,15 @@ func CreateUserHandler(w http.ResponseWriter, r *http.Request) {
r.ParseForm()
username := r.PostForm.Get("username")
password := r.PostForm.Get("password")
email := r.PostForm.Get("email")
user := &User{
Username: username,
Password: password,
Email: email,
}
_, err := user.Create()
if err != nil {
panic(err)
fmt.Println(err)
}
http.Redirect(w, r, "/users", http.StatusSeeOther)
}