mirror of https://github.com/statping/statping
scss
Hunter Long
parent
cf8ec576f6
commit
8e2d131839
|
|
@ -6,3 +6,4 @@ plugins/*.so
|
|||
data
|
||||
build
|
||||
vendor
|
||||
html/scss/.sass-cache
|
||||
|
|
@ -1,99 +1,75 @@
|
|||
HTML,BODY {
|
||||
background-color: #efefef;
|
||||
}
|
||||
HTML, BODY {
|
||||
background-color: #fcfcfc; }
|
||||
|
||||
.container {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
max-width: 860px;
|
||||
}
|
||||
max-width: 860px; }
|
||||
|
||||
.online_list .badge {
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
margin-top: 0.2rem; }
|
||||
|
||||
.navbar {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
margin-bottom: 30px; }
|
||||
|
||||
.btn-sm {
|
||||
line-height: 1.3;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
font-size: 0.75rem; }
|
||||
|
||||
.view_service_btn {
|
||||
position: absolute;
|
||||
bottom: -40px;
|
||||
right: 40px;
|
||||
}
|
||||
right: 40px; }
|
||||
|
||||
.service_lower_info {
|
||||
position: absolute;
|
||||
bottom: -40px;
|
||||
left: 40px;
|
||||
color: #d1ffca;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
font-size: 0.85rem; }
|
||||
|
||||
.failing_bg {
|
||||
background-color: #ff4e4e !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
font-weight: bold; }
|
||||
|
||||
.lg_number {
|
||||
font-size: 26pt;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
color: #3e3e3e;
|
||||
}
|
||||
color: #3e3e3e; }
|
||||
|
||||
.text_perfect {
|
||||
color: #33b418;
|
||||
text-shadow: 0px 1px 0 #0e6702;
|
||||
}
|
||||
text-shadow: 0px 1px 0 #0e6702; }
|
||||
|
||||
.text_good {
|
||||
color: #33b418;
|
||||
text-shadow: 0px 1px 0 #0e6702;
|
||||
}
|
||||
text-shadow: 0px 1px 0 #0e6702; }
|
||||
|
||||
.text_ok {
|
||||
color: #33b418;
|
||||
text-shadow: 0px 1px 0 #0e6702;
|
||||
}
|
||||
text-shadow: 0px 1px 0 #0e6702; }
|
||||
|
||||
.text_bad {
|
||||
color: #33b418;
|
||||
text-shadow: 0px 1px 0 #0e6702;
|
||||
}
|
||||
text-shadow: 0px 1px 0 #0e6702; }
|
||||
|
||||
.stats_area {
|
||||
text-align: center;
|
||||
color: #a5a5a5;
|
||||
}
|
||||
color: #a5a5a5; }
|
||||
|
||||
.offline_bg {
|
||||
background-color: white !important;
|
||||
padding-bottom: 70px !important;
|
||||
}
|
||||
|
||||
.online_list {
|
||||
|
||||
}
|
||||
padding-bottom: 70px !important; }
|
||||
|
||||
.lower_canvas {
|
||||
position: absolute;
|
||||
bottom: -60px;
|
||||
height: 60px;
|
||||
left: 15px;
|
||||
width: 800px;
|
||||
height: 55px;
|
||||
width: 100%;
|
||||
background-color: #48d338;
|
||||
padding: 17px 10px;
|
||||
}
|
||||
padding: 17px 10px; }
|
||||
|
||||
.lower_canvas SPAN {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
font-size: 1rem; }
|
||||
|
||||
.offline_lower_canvas {
|
||||
position: absolute;
|
||||
|
|
@ -101,42 +77,34 @@ HTML,BODY {
|
|||
height: 60px;
|
||||
left: -25px;
|
||||
width: 805px;
|
||||
padding: 17px 10px;
|
||||
}
|
||||
padding: 17px 10px; }
|
||||
|
||||
.offline_lower_canvas SPAN {
|
||||
font-weight: bold;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
font-size: 0.85rem; }
|
||||
|
||||
.offline_lower_canvas A {
|
||||
background-color: #c51b1a;
|
||||
border: 1px solid #bb1727;
|
||||
}
|
||||
border: 1px solid #bb1727; }
|
||||
|
||||
.footer {
|
||||
text-decoration: none;
|
||||
margin-top: 20px;
|
||||
}
|
||||
margin-top: 20px; }
|
||||
|
||||
.footer A {
|
||||
color: #aaaaaa;
|
||||
text-decoration: none;
|
||||
}
|
||||
text-decoration: none; }
|
||||
|
||||
.footer A:HOVER {
|
||||
color: #6d6d6d;
|
||||
}
|
||||
color: #6d6d6d; }
|
||||
|
||||
.online_badge {
|
||||
color: #fff;
|
||||
background-color: #35b317;
|
||||
}
|
||||
background-color: #35b317; }
|
||||
|
||||
.offline_badge {
|
||||
color: #fff;
|
||||
background-color: #c51919;
|
||||
}
|
||||
background-color: #c51919; }
|
||||
|
||||
.progress {
|
||||
margin-top: -20px;
|
||||
|
|
@ -144,112 +112,85 @@ HTML,BODY {
|
|||
margin-bottom: 15px;
|
||||
width: calc(100% + 40px);
|
||||
height: 3px;
|
||||
border-radius: 0;
|
||||
}
|
||||
border-radius: 0; }
|
||||
|
||||
.card-body {
|
||||
overflow: hidden;
|
||||
}
|
||||
overflow: hidden; }
|
||||
|
||||
.card-body H4 A {
|
||||
color: #239e07;
|
||||
text-decoration: none;
|
||||
}
|
||||
text-decoration: none; }
|
||||
|
||||
.chart-container {
|
||||
position: relative;
|
||||
height: 20vh;
|
||||
width: 93vh;
|
||||
margin-left: -52px;
|
||||
margin-bottom: -30px;
|
||||
}
|
||||
|
||||
height: 170px;
|
||||
width: 100%; }
|
||||
|
||||
.btn-primary {
|
||||
background-color: white;
|
||||
border: 1px solid #b9b9b9;
|
||||
color: #353535;
|
||||
height: 35px;
|
||||
padding: 5px 15px;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding-bottom: 85px;
|
||||
}
|
||||
padding: 5px 15px; }
|
||||
|
||||
@media (max-width: 767px) {
|
||||
|
||||
.sm-container {
|
||||
margin-top: 40px !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
padding: 0 !important; }
|
||||
|
||||
.list-group-item H5 {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
position: relative;
|
||||
height: 20vh;
|
||||
width: 100vw;
|
||||
}
|
||||
font-size: 0.9rem; }
|
||||
|
||||
.container {
|
||||
padding: 0 !important;
|
||||
}
|
||||
padding: 0 !important; }
|
||||
|
||||
.navbar {
|
||||
margin-left: 0px;
|
||||
margin-top: 0px;
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
margin-bottom: 0; }
|
||||
|
||||
.card-body {
|
||||
font-size: 6pt;
|
||||
padding: 5px 10px;
|
||||
height: 350px;
|
||||
}
|
||||
padding: 5px 5px; }
|
||||
|
||||
.lg_number {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
font-size: 1.5rem; }
|
||||
|
||||
.stats_area {
|
||||
margin-top: 25px !important;
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
margin-top: 35px !important;
|
||||
margin-bottom: 35px !important; }
|
||||
|
||||
.stats_area .col-4 {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.lower_canvas {
|
||||
bottom: -3.65rem;
|
||||
width: 98vw;
|
||||
}
|
||||
padding-right: 0; }
|
||||
|
||||
.lower_canvas SPAN {
|
||||
font-size: 0.75rem;
|
||||
float: left;
|
||||
}
|
||||
font-size: 0.9rem;
|
||||
float: left; }
|
||||
|
||||
.btn-sm {
|
||||
line-height: 0.75rem;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
line-height: 0.9rem;
|
||||
font-size: 0.65rem; }
|
||||
|
||||
.offline_bg {
|
||||
padding-bottom: 0 !important;
|
||||
height: 240px !important;
|
||||
}
|
||||
.full-col-12 {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px; }
|
||||
|
||||
.offline_lower_canvas {
|
||||
width: 100vw;
|
||||
}
|
||||
.col-12 {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
.card {
|
||||
border: 0;
|
||||
border-radius: 0; }
|
||||
|
||||
.list-group-item {
|
||||
border-top: 1px solid #e4e4e4;
|
||||
border: 0px; }
|
||||
|
||||
.list-group-item:first-child {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0; }
|
||||
|
||||
.list-group-item:last-child {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0; } }
|
||||
|
||||
/*# sourceMappingURL=base.css.map */
|
||||
|
|
|
|||
|
|
@ -0,0 +1,255 @@
|
|||
$background-color: #262626;
|
||||
$max-width: 860px;
|
||||
$card-background: #121212;
|
||||
$card-stats-color: #dfdfdf;
|
||||
|
||||
|
||||
HTML,BODY {
|
||||
background-color: $background-color;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
max-width: $max-width;
|
||||
}
|
||||
|
||||
.online_list .badge {
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
line-height: 1.3;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.view_service_btn {
|
||||
position: absolute;
|
||||
bottom: -40px;
|
||||
right: 40px;
|
||||
}
|
||||
|
||||
.service_lower_info {
|
||||
position: absolute;
|
||||
bottom: -40px;
|
||||
left: 40px;
|
||||
color: #d1ffca;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.failing_bg {
|
||||
background-color: #ff4e4e !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.lg_number {
|
||||
font-size: 26pt;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
color: $card-stats-color;
|
||||
}
|
||||
|
||||
.text_perfect {
|
||||
color: #33b418;
|
||||
text-shadow: 0px 1px 0 #0e6702;
|
||||
}
|
||||
|
||||
.text_good {
|
||||
color: #33b418;
|
||||
text-shadow: 0px 1px 0 #0e6702;
|
||||
}
|
||||
|
||||
.text_ok {
|
||||
color: #33b418;
|
||||
text-shadow: 0px 1px 0 #0e6702;
|
||||
}
|
||||
|
||||
.text_bad {
|
||||
color: #33b418;
|
||||
text-shadow: 0px 1px 0 #0e6702;
|
||||
}
|
||||
|
||||
.stats_area {
|
||||
text-align: center;
|
||||
color: #a5a5a5;
|
||||
}
|
||||
|
||||
.offline_bg {
|
||||
background-color: white !important;
|
||||
padding-bottom: 70px !important;
|
||||
}
|
||||
|
||||
.online_list {
|
||||
|
||||
}
|
||||
|
||||
.lower_canvas {
|
||||
height: 55px;
|
||||
width: 100%;
|
||||
background-color: #48d338;
|
||||
padding: 17px 10px;
|
||||
}
|
||||
|
||||
.lower_canvas SPAN {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.offline_lower_canvas {
|
||||
position: absolute;
|
||||
bottom: -120px;
|
||||
height: 60px;
|
||||
left: -25px;
|
||||
width: 805px;
|
||||
padding: 17px 10px;
|
||||
}
|
||||
|
||||
.offline_lower_canvas SPAN {
|
||||
font-weight: bold;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.offline_lower_canvas A {
|
||||
background-color: #c51b1a;
|
||||
border: 1px solid #bb1727;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-decoration: none;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.footer A {
|
||||
color: #aaaaaa;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer A:HOVER {
|
||||
color: #6d6d6d;
|
||||
}
|
||||
|
||||
.online_badge {
|
||||
color: #fff;
|
||||
background-color: #35b317;
|
||||
}
|
||||
|
||||
.offline_badge {
|
||||
color: #fff;
|
||||
background-color: #c51919;
|
||||
}
|
||||
|
||||
.progress {
|
||||
margin-top: -20px;
|
||||
margin-left: -20px;
|
||||
margin-bottom: 15px;
|
||||
width: calc(100% + 40px);
|
||||
height: 3px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: $card-background;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-body H4 A {
|
||||
color: #239e07;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
position: relative;
|
||||
height: 170px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: white;
|
||||
border: 1px solid #b9b9b9;
|
||||
color: #353535;
|
||||
height: 35px;
|
||||
padding: 5px 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
|
||||
.sm-container {
|
||||
margin-top: 40px !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.list-group-item H5 {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
margin-left: 0px;
|
||||
margin-top: 0px;
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
font-size: 6pt;
|
||||
padding: 5px 5px;
|
||||
}
|
||||
|
||||
.lg_number {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.stats_area {
|
||||
margin-top: 35px !important;
|
||||
margin-bottom: 35px !important;
|
||||
}
|
||||
|
||||
.stats_area .col-4 {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.lower_canvas SPAN {
|
||||
font-size: 0.9rem;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
line-height: 0.9rem;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.full-col-12 {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
border-top: 1px solid #e4e4e4;
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
.list-group-item:first-child {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.list-group-item:last-child {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,251 @@
|
|||
$background-color: #fcfcfc;
|
||||
$max-width: 860px;
|
||||
$primary-color: #333;
|
||||
$card-background: #fff;
|
||||
|
||||
|
||||
HTML,BODY {
|
||||
background-color: $background-color;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
max-width: $max-width;
|
||||
}
|
||||
|
||||
.online_list .badge {
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
line-height: 1.3;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.view_service_btn {
|
||||
position: absolute;
|
||||
bottom: -40px;
|
||||
right: 40px;
|
||||
}
|
||||
|
||||
.service_lower_info {
|
||||
position: absolute;
|
||||
bottom: -40px;
|
||||
left: 40px;
|
||||
color: #d1ffca;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.failing_bg {
|
||||
background-color: #ff4e4e !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.lg_number {
|
||||
font-size: 26pt;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
color: #3e3e3e;
|
||||
}
|
||||
|
||||
.text_perfect {
|
||||
color: #33b418;
|
||||
text-shadow: 0px 1px 0 #0e6702;
|
||||
}
|
||||
|
||||
.text_good {
|
||||
color: #33b418;
|
||||
text-shadow: 0px 1px 0 #0e6702;
|
||||
}
|
||||
|
||||
.text_ok {
|
||||
color: #33b418;
|
||||
text-shadow: 0px 1px 0 #0e6702;
|
||||
}
|
||||
|
||||
.text_bad {
|
||||
color: #33b418;
|
||||
text-shadow: 0px 1px 0 #0e6702;
|
||||
}
|
||||
|
||||
.stats_area {
|
||||
text-align: center;
|
||||
color: #a5a5a5;
|
||||
}
|
||||
|
||||
.offline_bg {
|
||||
background-color: white !important;
|
||||
padding-bottom: 70px !important;
|
||||
}
|
||||
|
||||
.online_list {
|
||||
|
||||
}
|
||||
|
||||
.lower_canvas {
|
||||
height: 55px;
|
||||
width: 100%;
|
||||
background-color: #48d338;
|
||||
padding: 17px 10px;
|
||||
}
|
||||
|
||||
.lower_canvas SPAN {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.offline_lower_canvas {
|
||||
position: absolute;
|
||||
bottom: -120px;
|
||||
height: 60px;
|
||||
left: -25px;
|
||||
width: 805px;
|
||||
padding: 17px 10px;
|
||||
}
|
||||
|
||||
.offline_lower_canvas SPAN {
|
||||
font-weight: bold;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.offline_lower_canvas A {
|
||||
background-color: #c51b1a;
|
||||
border: 1px solid #bb1727;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-decoration: none;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.footer A {
|
||||
color: #aaaaaa;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer A:HOVER {
|
||||
color: #6d6d6d;
|
||||
}
|
||||
|
||||
.online_badge {
|
||||
color: #fff;
|
||||
background-color: #35b317;
|
||||
}
|
||||
|
||||
.offline_badge {
|
||||
color: #fff;
|
||||
background-color: #c51919;
|
||||
}
|
||||
|
||||
.progress {
|
||||
margin-top: -20px;
|
||||
margin-left: -20px;
|
||||
margin-bottom: 15px;
|
||||
width: calc(100% + 40px);
|
||||
height: 3px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-body H4 A {
|
||||
color: #239e07;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
position: relative;
|
||||
height: 170px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: white;
|
||||
border: 1px solid #b9b9b9;
|
||||
color: #353535;
|
||||
height: 35px;
|
||||
padding: 5px 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
|
||||
.sm-container {
|
||||
margin-top: 40px !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.list-group-item H5 {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
margin-left: 0px;
|
||||
margin-top: 0px;
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
font-size: 6pt;
|
||||
padding: 5px 5px;
|
||||
}
|
||||
|
||||
.lg_number {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.stats_area {
|
||||
margin-top: 35px !important;
|
||||
margin-bottom: 35px !important;
|
||||
}
|
||||
|
||||
.stats_area .col-4 {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.lower_canvas SPAN {
|
||||
font-size: 0.9rem;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
line-height: 0.9rem;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.full-col-12 {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
border-top: 1px solid #e4e4e4;
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
.list-group-item:first-child {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.list-group-item:last-child {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -26,10 +26,10 @@
|
|||
<h5 class="col-12 text-center mb-5 text-muted">{{ .Core.Description }}</h5>
|
||||
{{ end }}
|
||||
|
||||
<div class="col-12 mb-5">
|
||||
<div class="col-12 full-col-12 mb-5">
|
||||
<div class="list-group online_list">
|
||||
{{ range .Services }}
|
||||
<a href="#" class="service_li list-group-item list-group-item-action {{if not .Online}}failing_bg text-white{{ end }}" data-id="{{.Id}}">
|
||||
<a href="#" class="service_li list-group-item list-group-item-action {{if not .Online}}bg-danger text-white{{ end }}" data-id="{{.Id}}">
|
||||
{{ .Name }}
|
||||
{{if .Online}}
|
||||
<span class="badge online_badge float-right">ONLINE</span>
|
||||
|
|
@ -42,12 +42,11 @@
|
|||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
|
||||
<div class="col-12 full-col-12">
|
||||
{{ range .Services }}
|
||||
<div class="mt-4" id="service_id_{{.Id}}">
|
||||
<div class="card">
|
||||
<div class="card-body{{if not .Online}} offline_bg{{end}}">
|
||||
<div class="card-body">
|
||||
|
||||
<div class="col-12">
|
||||
|
||||
|
|
@ -59,53 +58,41 @@
|
|||
{{end}}</h4>
|
||||
|
||||
<div class="row stats_area mt-5 mb-5">
|
||||
|
||||
<div class="col-4">
|
||||
<span class="lg_number">{{.Online24}}%</span>
|
||||
Online last 24 Hours
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<span class="lg_number">{{.AvgTime}}ms</span>
|
||||
Average Response
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<span class="lg_number">{{.AvgUptime}}%</span>
|
||||
Total Uptime
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ if .AvgTime }}
|
||||
<div class="chart-container">
|
||||
<canvas id="service_{{ .Id }}"></canvas>
|
||||
<div class="lower_canvas text-white">
|
||||
<div class="col-12">
|
||||
<span>No failures within the last 25 days</span>
|
||||
<a href="/service/{{ .Id }}" class="btn btn-success btn-sm float-right">View Service</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ else }}
|
||||
<div class="offline_lower_canvas bg-danger">
|
||||
<div class="col-12">
|
||||
<span class="text-white">383 failures in the last 24 hours</span>
|
||||
<a href="/service/{{ .Id }}" class="btn btn-danger btn-sm float-right">View Failures</a>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ if .LimitedFailures }}
|
||||
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ if .AvgTime }}
|
||||
<div class="chart-container">
|
||||
<canvas id="service_{{ .Id }}"></canvas>
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class="lower_canvas full-col-12 text-white{{if not .Online}} bg-danger{{end}}">
|
||||
<div class="col-12">
|
||||
<span>No failures within the last 25 days</span>
|
||||
<a href="/service/{{ .Id }}" class="btn {{if .Online}}btn-success{{else}}btn-danger{{end}} btn-sm float-right">View Service</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{{template "footer"}}
|
||||
|
|
@ -146,8 +133,8 @@ var chartdata = new Chart(ctx, {
|
|||
},
|
||||
responsiveAnimationDuration: 0,
|
||||
animation: {
|
||||
"duration": 0,
|
||||
"onComplete": function() {
|
||||
duration: 3500,
|
||||
onComplete: function() {
|
||||
var chartInstance = this.chart,
|
||||
ctx = chartInstance.ctx;
|
||||
|
||||
|
|
@ -208,8 +195,11 @@ var chartdata = new Chart(ctx, {
|
|||
|
||||
ctx.fillStyle = '#ffa7a2';
|
||||
ctx.fillText(highestNum+"ms", hxH - 40, hyH + 15);
|
||||
ctx.fillStyle = '#54944b';
|
||||
ctx.fillText(lowestnum+"ms", hxL, hyL - 5);
|
||||
ctx.fillStyle = '#45d642';
|
||||
ctx.fillText(lowestnum+"ms", hxL, hyL + 10);
|
||||
|
||||
console.log("done service_id_{{.Id}}")
|
||||
|
||||
});
|
||||
}
|
||||
},
|
||||
|
|
@ -225,7 +215,7 @@ var chartdata = new Chart(ctx, {
|
|||
ticks: {
|
||||
fontSize: 20,
|
||||
display: false,
|
||||
beginAtZero: true
|
||||
beginAtZero: false
|
||||
},
|
||||
gridLines: {
|
||||
display:false
|
||||
|
|
|
|||
|
|
@ -107,8 +107,9 @@ type DateScan struct {
|
|||
|
||||
func (s *Service) GraphData() string {
|
||||
var d []DateScan
|
||||
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))
|
||||
increment := "minute"
|
||||
since := time.Now().Add(time.Hour*-12 + time.Minute*0 + time.Second*0)
|
||||
sql := fmt.Sprintf("SELECT date_trunc('%v', created_at), AVG(latency)*1000 AS value FROM hits WHERE service=%v AND created_at > '%v' GROUP BY 1 ORDER BY date_trunc ASC;", increment, s.Id, since.Format(time.RFC3339))
|
||||
dated, err := dbSession.Query(db.Raw(sql))
|
||||
if err != nil {
|
||||
fmt.Println(err)
|
||||
|
|
|
|||
Loading…
Reference in New Issue