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

better design

pull/10/head v0.26
Hunter Long 2018-06-26 19:59:59 -07:00
parent b151a08e81
commit 3bb0b342d7
6 changed files with 86 additions and 32 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.25
- VERSION=0.26
- DB_HOST=localhost
- DB_USER=travis
- DB_PASS=

1
Dockerfile
View File

@ -5,7 +5,6 @@ ENV VERSION=v0.25
RUN apk --no-cache add ca-certificates
RUN wget https://github.com/hunterlong/statup/releases/download/$VERSION/statup-linux-alpine.tar.gz && \
tar -xvzf statup-linux-alpine.tar.gz && \
ls && \
chmod +x statup && \
mv statup /usr/local/bin/statup
WORKDIR /app

26
html/css/base.css
View File

@ -107,7 +107,7 @@ HTML,BODY {
.chart-container {
position: relative;
height: 20vh;
width: 67vh;
width: 93vh;
margin-left: -52px;
margin-bottom: -30px;
}
@ -129,6 +129,16 @@ HTML,BODY {
padding: 5px 15px;
}
.lower_canvas {
width: 100%;
height: 100%;
background-color: #48d338;
}
.card-body {
padding-bottom: 85px;
}
@media (max-width: 767px) {
.sm-container {
@ -159,10 +169,22 @@ HTML,BODY {
.card-body {
font-size: 6pt;
padding: 5px 10px;
height: 330px;
}
.lg_number {
font-size: 1.2rem;
font-size: 1.4rem;
}
.stats_area {
margin-top: 25px !important;
margin-bottom: 20px !important;
}
.stats_area .col-4 {
padding-left: 0;
padding-right: 0;
}

6
html/js/main.js Normal file
View File

@ -0,0 +1,6 @@
$(".service_li").on('click', function() {
var id = $(this).attr('data-id');
var position = $("#service_id_"+id).offset();
window.scroll(0,position.top-23);
return false;
});

81
html/tmpl/index.html
View File

@ -29,7 +29,7 @@
<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}}failing_bg text-white{{ end }}">
<a href="#" class="service_li list-group-item list-group-item-action {{if not .Online}}failing_bg text-white{{ end }}" data-id="{{.Id}}">
{{ .Name }}
{{if .Online}}
<span class="badge online_badge float-right">ONLINE</span>
@ -45,7 +45,7 @@
<div class="col-12">
{{ range .Services }}
<div class="mt-4">
<div class="mt-4" id="service_id_{{.Id}}">
<div class="card">
<div class="card-body{{if not .Online}} offline_bg{{end}}">
@ -79,24 +79,12 @@
{{ if .AvgTime }}
<div class="chart-container">
<canvas id="service_{{ .Id }}"></canvas>
<div class="lower_canvas"></div>
</div>
{{ end }}
{{ if .LimitedFailures }}
<div class="list-group mt-5">
{{ 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">
<h5 class="mb-1">{{.ParseError}}</h5>
<small>Reported {{.Ago}}</small>
</div>
<p class="mb-1">{{.Issue}}</p>
</a>
{{ end }}
<span class="mt-2 text-right">{{ .TotalFailures }} Total Failures</span>
</div>
{{ end }}
</div>
</div>
@ -133,21 +121,32 @@ var chartdata = new Chart(ctx, {
options: {
maintainAspectRatio: false,
scaleShowValues: true,
hover: {
"animationDuration": 0
layout: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: -10
}
},
hover: {
animationDuration: 0,
},
responsiveAnimationDuration: 0,
animation: {
"duration": 0,
"onComplete": function() {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
var controller = this.chart.controller;
var xAxis = controller.scales['x-axis-0'];
var yAxis = controller.scales['y-axis-0'];
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));
@ -161,20 +160,44 @@ var chartdata = new Chart(ctx, {
this.data.datasets.forEach(function(dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
var hx = 0;
var hy = 0;
var hxH = 0;
var hyH = 0;
var hxL = 0;
var hyL = 0;
var highestNum = 0;
var lowestnum = 999999999999;
meta.data.forEach(function(bar, index) {
var data = dataset.data[index];
if (data.y < lowestnum) {
lowestnum = data.y;
hxL = bar._model.x;
hyL = bar._model.y;
}
if (data.y > highestNum) {
highestNum = data.y;
highest = bar;
hx = bar._model.x;
hy = bar._model.y;
hxH = bar._model.x;
hyH = bar._model.y;
}
});
ctx.fillStyle = '#0d7809';
ctx.fillText(highestNum+"ms", hx - 40, hy + 15);
if (hxH >= 820) {
hxH = 820;
} else if (hxH <= 50) {
hxH = 50;
}
if (hxL >= 820) {
hxL = 820;
} else if (hxL <= 70) {
hxL = 70;
}
ctx.fillStyle = '#ffa7a2';
ctx.fillText(highestNum+"ms", hxH - 40, hyH + 15);
ctx.fillStyle = '#54944b';
ctx.fillText(lowestnum+"ms", hxL, hyL - 5);
});
}
},
@ -189,7 +212,8 @@ var chartdata = new Chart(ctx, {
display: false,
ticks: {
fontSize: 20,
display: false
display: false,
beginAtZero: true
},
gridLines: {
display:false
@ -203,6 +227,8 @@ var chartdata = new Chart(ctx, {
display:false
},
ticks: {
stepSize: 1,
min: 0,
fontColor: "white",
fontSize: 20,
display: false,
@ -234,6 +260,7 @@ var chartdata = new Chart(ctx, {
{{ else }}
<script src="/js/jquery-3.3.1.slim.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/main.js"></script>
{{end}}
</body>

2
services.go
View File

@ -107,7 +107,7 @@ type DateScan struct {
func (s *Service) GraphData() string {
var d []DateScan
since := time.Now().Add(time.Hour*-12 + time.Minute*0 + time.Second*0)
since := time.Now().Add(time.Hour*-24 + time.Minute*0 + time.Second*0)
sql := fmt.Sprintf("SELECT date_trunc('minute', created_at), AVG(latency)*1000 AS value FROM hits WHERE service=%v AND created_at > '%v' GROUP BY 1 ORDER BY date_trunc ASC;", s.Id, since.Format(time.RFC3339))
dated, err := dbSession.Query(db.Raw(sql))
if err != nil {