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

View File

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

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. for you to build an even better status page.
<p align="center"> <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> </p>
## A Future-Proof Status Page ## A Future-Proof Status Page

View File

@ -8,10 +8,20 @@ HTML,BODY {
max-width: 860px; max-width: 860px;
} }
.online_list .badge {
margin-top: 0.2rem;
}
.navbar { .navbar {
margin-bottom: 30px; margin-bottom: 30px;
} }
.failing_bg {
background-color: #ff4e4e !important;
font-weight: bold;
}
.lg_number { .lg_number {
font-size: 26pt; font-size: 26pt;
font-weight: bold; font-weight: bold;
@ -58,9 +68,13 @@ HTML,BODY {
} }
.footer A { .footer A {
color: #cccccc; color: #aaaaaa;
text-decoration: none;
} }
.footer A:HOVER {
color: #6d6d6d;
}
.online_badge { .online_badge {
color: #fff; color: #fff;
@ -93,7 +107,26 @@ HTML,BODY {
.chart-container { .chart-container {
position: relative; position: relative;
height: 20vh; 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) { @media (max-width: 767px) {
@ -109,8 +142,8 @@ HTML,BODY {
.chart-container { .chart-container {
position: relative; position: relative;
height:17vh; height: 20vh;
width:80vw; width: 100vw;
} }
.container { .container {

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;
});

View File

@ -2,8 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <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/bootstrap.min.css">
<link rel="stylesheet" href="/css/base.css"> <link rel="stylesheet" href="/css/base.css">
@ -16,9 +15,9 @@
{{template "nav"}} {{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"> <div class="col-4">
<span class="lg_number">{{ .CountServices }}</span> <span class="lg_number">{{ .CountServices }}</span>
@ -36,16 +35,31 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row mt-4">
<div class="col-12"> <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> <h3>Latest Failures</h3>
{{ range .Services }} {{ range .Services }}
{{ if .LimitedFailures }} {{ if .LimitedFailures }}
<div class="list-group mt-5"> <div class="list-group mt-3">
{{ range .LimitedFailures }} {{ range .LimitedFailures }}
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between"> <div class="d-flex w-100 justify-content-between">

View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <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}} {{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"> <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"> <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 }} {{ 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 }} {{ end }}
<div class="col-12 mb-5"> <div class="col-12 mb-5">
<div class="list-group online_list"> <div class="list-group online_list">
{{ range .Services }} {{ 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 }} {{ .Name }}
{{if .Online}} {{if .Online}}
<span class="badge online_badge float-right">ONLINE</span> <span class="badge online_badge float-right">ONLINE</span>
@ -48,13 +47,11 @@
{{ range .Services }} {{ range .Services }}
<div class="mt-4"> <div class="mt-4">
<div class="card"> <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="col-12">
<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>
<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}} {{if .Online}}
<span class="badge online_badge float-right">ONLINE</span> <span class="badge online_badge float-right">ONLINE</span>
{{ else }} {{ else }}
@ -79,9 +76,11 @@
</div> </div>
</div> </div>
{{ if .AvgTime }}
<div class="chart-container"> <div class="chart-container">
<canvas id="service_{{ .Id }}"></canvas> <canvas id="service_{{ .Id }}"></canvas>
</div> </div>
{{ end }}
{{ if .LimitedFailures }} {{ if .LimitedFailures }}
<div class="list-group mt-5"> <div class="list-group mt-5">
@ -95,11 +94,11 @@
</a> </a>
{{ end }} {{ end }}
<span class="text-right">{{ .TotalFailures }} Total Failures</span> <span class="mt-2 text-right">{{ .TotalFailures }} Total Failures</span>
</div> </div>
{{ end }} {{ end }}
</div>
</div> </div>
</div> </div>
</div> </div>
@ -113,7 +112,7 @@
<script> <script>
{{ range .Services }} {{ range .Services }}
{{if .GraphData}} {{ if .AvgTime }}
var ctx = document.getElementById("service_{{.Id}}").getContext('2d'); var ctx = document.getElementById("service_{{.Id}}").getContext('2d');
var chartdata = new Chart(ctx, { var chartdata = new Chart(ctx, {
@ -133,13 +132,64 @@ var chartdata = new Chart(ctx, {
}, },
options: { options: {
maintainAspectRatio: false, 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: { legend: {
display: false display: false
}, },
tooltips: {
"enabled": false
},
scales: { scales: {
yAxes: [{ yAxes: [{
display: false,
ticks: { ticks: {
beginAtZero: true fontSize: 20,
display: false
}, },
gridLines: { gridLines: {
display:false display:false
@ -148,8 +198,14 @@ var chartdata = new Chart(ctx, {
xAxes: [{ xAxes: [{
type: 'time', type: 'time',
distribution: 'series', distribution: 'series',
autoSkip: false,
gridLines: { gridLines: {
display:false display:false
},
ticks: {
fontColor: "white",
fontSize: 20,
display: false,
} }
}] }]
}, },

View File

@ -2,8 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <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/bootstrap.min.css">
<link rel="stylesheet" href="/css/base.css"> <link rel="stylesheet" href="/css/base.css">

View File

@ -2,8 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <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/bootstrap.min.css">
<link rel="stylesheet" href="/css/base.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"> <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 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-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 }} {{ 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 }} {{ 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> <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 }} {{ range .Plugins }}

View File

@ -2,8 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <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/bootstrap.min.css">
<link rel="stylesheet" href="/css/base.css"> <link rel="stylesheet" href="/css/base.css">
<script src="/js/Chart.bundle.min.js"></script> <script src="/js/Chart.bundle.min.js"></script>
@ -57,7 +56,9 @@
</div> </div>
<div class="col-12"> {{if Auth}}
<div class="col-12mt-4">
<h3>Service Checkins</h3> <h3>Service Checkins</h3>
@ -92,10 +93,7 @@
</div> </div>
<div class="col-12 mt-4">
{{if Auth}}
<div class="col-12">
<h3>Edit Service</h3> <h3>Edit Service</h3>
@ -166,15 +164,15 @@
</div> </div>
<div class="col-12"> <div class="col-12 mt-4">
<h3>Last Response</h3> <h3>Last Response</h3>
<textarea rows="8" class="form-control" readonly>{{ .LastResponse }}</textarea> <textarea rows="8" class="form-control" readonly>{{ .LastResponse }}</textarea>
<div class="form-group row mt-2"> <div class="form-group row mt-2">
<label for="last_status_code" class="col-sm-3 col-form-label">Status Code</label> <label for="last_status_code" class="col-sm-3 col-form-label">Status Code</label>
<div class="col-sm-9"> <div class="col-sm-2">
<input type="text" id="last_status_code" class="form-control" value="{{ .LastStatusCode }}"> <input type="text" id="last_status_code" class="form-control" value="{{ .LastStatusCode }}" readonly>
</div> </div>
</div> </div>

View File

@ -2,8 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <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/bootstrap.min.css">
<link rel="stylesheet" href="/css/base.css"> <link rel="stylesheet" href="/css/base.css">

View File

@ -2,8 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <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/bootstrap.min.css">
<link rel="stylesheet" href="/css/base.css"> <link rel="stylesheet" href="/css/base.css">
<script src="/js/Chart.bundle.min.js"></script> <script src="/js/Chart.bundle.min.js"></script>
@ -23,7 +22,7 @@
</div> </div>
{{ end }} {{ end }}
<form method="POST" action="/setup"> <form method="POST" id="setup_form" action="/setup">
<div class="row"> <div class="row">
@ -100,8 +99,7 @@
</div> </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> </div>

View File

@ -2,8 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <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/bootstrap.min.css">
<link rel="stylesheet" href="/css/base.css"> <link rel="stylesheet" href="/css/base.css">
@ -23,7 +22,6 @@
<table class="table table-striped"> <table class="table table-striped">
<thead> <thead>
<tr> <tr>
<th scope="col">#</th>
<th scope="col">Username</th> <th scope="col">Username</th>
<th scope="col"></th> <th scope="col"></th>
</tr> </tr>
@ -31,7 +29,6 @@
<tbody> <tbody>
{{range .}} {{range .}}
<tr> <tr>
<th scope="row">{{.Id}}</th>
<td>{{.Username}}</td> <td>{{.Username}}</td>
<td class="text-right"> <td class="text-right">
<div class="btn-group"> <div class="btn-group">
@ -51,6 +48,12 @@
<input type="text" name="username" class="form-control" id="inputEmail3" placeholder="Username"> <input type="text" name="username" class="form-control" id="inputEmail3" placeholder="Username">
</div> </div>
</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"> <div class="form-group row">
<label for="inputPassword3" class="col-sm-4 col-form-label">Password</label> <label for="inputPassword3" class="col-sm-4 col-form-label">Password</label>
<div class="col-sm-8"> <div class="col-sm-8">

View File

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

4
web.go
View File

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