phares3757/gatus
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Migrate from Bootstrap to Tailwind

Browse Source
This commit is contained in:
TwinProduction 2021-01-23 23:39:26 -05:00
parent 30801938b2
commit bc6ca2ebd0
2 changed files with 56 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
static/index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<title>Health Dashboard</title> <title>Health Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="./bootstrap.min.css" /> <link href="./tailwind.min.css" rel="stylesheet" />
<style> <style>
html, body { html, body {
background-color: #f7f9fb; background-color: #f7f9fb;
@ -11,6 +11,9 @@
html { html {
height: 100%; height: 100%;
} }
#global {
max-width: 1140px;
}
#results div.container:first-child { #results div.container:first-child {
border-top-left-radius: 3px; border-top-left-radius: 3px;
border-top-right-radius: 3px; border-top-right-radius: 3px;
@ -22,15 +25,19 @@
border-color: #dee2e6; border-color: #dee2e6;
border-style: solid; border-style: solid;
} }
#results .service-group-content > div:nth-child(1) {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.status { .status {
cursor: pointer; cursor: pointer;
transition: all 500ms ease-in-out; transition: all 500ms ease-in-out;
overflow-x: hidden; overflow-x: hidden;
padding: .25em 0;
color: white; color: white;
} width: 5%;
.title { font-size: 75%;
font-size: 2.5rem; font-weight: 700;
text-align: center;
} }
.status:hover { .status:hover {
opacity: 0.7; opacity: 0.7;
@ -51,6 +58,9 @@
.status-min-max-ms { .status-min-max-ms {
overflow-x: hidden; overflow-x: hidden;
} }
.title {
font-size: 2.5rem;
}
#tooltip { #tooltip {
position: fixed; position: fixed;
top: 0; top: 0;
@ -106,17 +116,23 @@
.service-group h5:hover { .service-group h5:hover {
color: #1b1e21 !important; color: #1b1e21 !important;
} }
.bg-success {
background-color: #28a745;
}
.text-monospace {
font-family: Consolas, monospace;
}
</style> </style>
</head> </head>
<body> <body>
<div class="container my-3 rounded p-3 border shadow"> <div class="container mx-auto rounded shadow-xl border my-3 p-5" id="global">
<div class="mb-2"> <div class="mb-2">
<div class="row"> <div class="flex flex-wrap">
<div class="col-8 text-left my-auto"> <div class="w-2/3 text-left my-auto">
<div class="title display-4">Health Status</div> <div class="title font-light">Health Status</div>
</div> </div>
<div class="col-4 text-right"> <div class="w-1/3 flex justify-end">
<img src="logo.png" alt="Gatus" style="position: relative; min-width: 50px; max-width: 200px; width: 20%;"/> <img src="logo.png" alt="Gatus" style="min-width: 50px; max-width: 200px; width: 20%;"/>
</div> </div>
</div> </div>
</div> </div>
@ -145,11 +161,11 @@
</div> </div>
<div id="settings"> <div id="settings">
<div class="input-group input-group-sm"> <div class="flex bg-gray-200 rounded border border-gray-300 shadow">
<div class="input-group-prepend"> <div class="rounded-xl py-1 px-2 text-gray-600 text-sm">
<div class="input-group-text">&#x21bb;</div> &#x21bb;
</div> </div>
<select class="form-control form-control-sm" id="refresh-rate"> <select class="text-center text-gray-500 text-sm" id="refresh-rate">
<option value="10">10s</option> <option value="10">10s</option>
<option value="30" selected>30s</option> <option value="30" selected>30s</option>
<option value="60">1m</option> <option value="60">1m</option>
@ -195,7 +211,7 @@
$("#tooltip-errors-container").hide(); $("#tooltip-errors-container").hide();
} }
// Position tooltip // Position tooltip
$("#tooltip").css({top: "0px", left: "0px"}).show(); $("#tooltip").css({top: "0", left: "0"}).show();
let targetTopPosition = element.getBoundingClientRect().y + 30; let targetTopPosition = element.getBoundingClientRect().y + 30;
let targetLeftPosition = element.getBoundingClientRect().x; let targetLeftPosition = element.getBoundingClientRect().x;
// Make adjustments if necessary // Make adjustments if necessary
@ -237,20 +253,20 @@
function createStatusBadge(serviceStatusIndex, index, success) { function createStatusBadge(serviceStatusIndex, index, success) {
if (success) { if (success) {
if (showStatusOnHover) { if (showStatusOnHover) {
return "<span class='status badge badge-success' style='width: 5%' onmouseenter='showTooltip(\"" + serviceStatusIndex + "\", " + index + ", this)' onmouseleave='fadeTooltip()' onclick='userClickedStatus = !userClickedStatus;'>&#10003;</span>"; return "<span class='status rounded bg-success' onmouseenter='showTooltip(\"" + serviceStatusIndex + "\", " + index + ", this)' onmouseleave='fadeTooltip()' onclick='userClickedStatus = !userClickedStatus;'>&#10003;</span>";
} else { } else {
return "<span class='status badge badge-success' style='width: 5%' onclick='toggleTooltip(\"" + serviceStatusIndex + "\", " + index + ", this)'>&#10003;</span>"; return "<span class='status rounded bg-success' onclick='toggleTooltip(\"" + serviceStatusIndex + "\", " + index + ", this)'>&#10003;</span>";
} }
} }
if (showStatusOnHover) { if (showStatusOnHover) {
return "<span class='status badge badge-danger' style='width: 5%' onmouseenter='showTooltip(\"" + serviceStatusIndex + "\", " + index + ", this)' onmouseleave='fadeTooltip()' onclick='userClickedStatus = !userClickedStatus;'>X</span>"; return "<span class='status rounded bg-red-600' onmouseenter='showTooltip(\"" + serviceStatusIndex + "\", " + index + ", this)' onmouseleave='fadeTooltip()' onclick='userClickedStatus = !userClickedStatus;'>X</span>";
} else { } else {
return "<span class='status badge badge-danger' style='width: 5%' onclick='toggleTooltip(\"" + serviceStatusIndex + "\", " + index + ", this)'>X</span>"; return "<span class='status rounded bg-red-600' onclick='toggleTooltip(\"" + serviceStatusIndex + "\", " + index + ", this)'>X</span>";
} }
} }
function createBlankStatusBadge() { function createBlankStatusBadge() {
return "<span class='status badge badge-light border' style='width: 5%;'> </span>"; return "<span class='status rounded border border-dashed'> </span>";
} }
function refreshStatuses() { function refreshStatuses() {
@ -295,25 +311,25 @@
serviceStatusOverTime += createBlankStatusBadge(); serviceStatusOverTime += createBlankStatusBadge();
} }
let output = "" let output = ""
+ "<div class='container py-3 border-left border-right border-top rounded-0'>" + "<div class='container px-3 py-3 border-l border-r border-t rounded-none'>"
+ " <div class='row mb-2'>" + " <div class='flex flex-wrap mb-2'>"
+ " <div class='col-md-10'>" + " <div class='w-3/4'>"
+ " <span class='font-weight-bold'>" + serviceStatus.name + "</span> <span class='text-secondary font-weight-lighter'>- " + hostname + "</span>" + " <span class='font-bold'>" + serviceStatus.name + "</span> <span class='text-gray-500 font-light'>- " + hostname + "</span>"
+ " </div>" + " </div>"
+ " <div class='col-md-2 text-right'>" + " <div class='w-1/4 text-right'>"
+ " <span class='font-weight-lighter status-min-max-ms'>" + (minResponseTime === maxResponseTime ? minResponseTime : (minResponseTime + "-" + maxResponseTime)) + "ms</span>" + " <span class='font-light status-min-max-ms'>" + (minResponseTime === maxResponseTime ? minResponseTime : (minResponseTime + "-" + maxResponseTime)) + "ms</span>"
+ " </div>" + " </div>"
+ " </div>" + " </div>"
+ " <div class='row'>" + " <div class=''>"
+ " <div class='col-12 d-flex flex-row-reverse status-over-time'>" + " <div class='status-over-time flex flex-row-reverse'>"
+ " " + serviceStatusOverTime + " " + serviceStatusOverTime
+ " </div>" + " </div>"
+ " </div>" + " </div>"
+ " <div class='row status-time-ago'>" + " <div class='flex flex-wrap status-time-ago'>"
+ " <div class='col-6'>" + " <div class='w-1/2'>"
+ " " + generatePrettyTimeAgo(oldestTimestamp) + " " + generatePrettyTimeAgo(oldestTimestamp)
+ " </div>" + " </div>"
+ " <div class='col-6 text-right'>" + " <div class='w-1/2 text-right'>"
+ " " + generatePrettyTimeAgo(newestTimestamp) + " " + generatePrettyTimeAgo(newestTimestamp)
+ " </div>" + " </div>"
+ " </div>" + " </div>"
@ -333,14 +349,14 @@
let key = group.replace(/[^a-zA-Z0-9]/g, ''); let key = group.replace(/[^a-zA-Z0-9]/g, '');
let existingGroupContentSelector = $("#service-group-" + key + "-content"); let existingGroupContentSelector = $("#service-group-" + key + "-content");
let isCurrentlyHidden = existingGroupContentSelector.length && existingGroupContentSelector[0].style.display === 'none'; let isCurrentlyHidden = existingGroupContentSelector.length && existingGroupContentSelector[0].style.display === 'none';
let groupStatus = "<span class='text-success'>&#10003;</span>"; let groupStatus = "<span class='text-green-600'>&#10003;</span>";
if (outputByGroup[group].includes("badge badge-danger")) { if (outputByGroup[group].includes("bg-red-600")) {
groupStatus = "<span class='text-warning'>~</span>"; groupStatus = "<span class='text-yellow-400'>~</span>";
} }
output += "" output += ""
+ "<div class='mt-" + (output.length ? '4' : '3') + "'>" + "<div class='" + (output.length ? 'mt-4' : 'mt-3') + "'>"
+ " <div class='container pt-2 border-left border-right border-top border-bottom service-group' id='service-group-" + key + "' data-group='" + key + "' onclick='toggleGroup(this)'>" + " <div class='container pt-2 border service-group' id='service-group-" + key + "' data-group='" + key + "' onclick='toggleGroup(this)'>"
+ " <h5 class='text-secondary text-monospace pb-0'>" + " <h5 class='text-monospace text-gray-400 text-xl font-medium pb-2 px-3'>"
+ " " + groupStatus + " " + group + " " + groupStatus + " " + group
+ " <span class='float-right service-group-arrow' id='service-group-" + key + "-arrow'>" + (isCurrentlyHidden ? "&#9660;" : "&#9650;") + "</span>" + " <span class='float-right service-group-arrow' id='service-group-" + key + "-arrow'>" + (isCurrentlyHidden ? "&#9660;" : "&#9650;") + "</span>"
+ " </h5>" + " </h5>"
@ -353,7 +369,7 @@
// Add all services that don't have a group at the end // Add all services that don't have a group at the end
if (outputByGroup['undefined']) { if (outputByGroup['undefined']) {
output += "" output += ""
+ "<div class='mt-" + (output.length ? '4' : '3') + "'>" + "<div class='" + (output.length ? 'mt-4' : 'mt-3') + "'>"
+ " " + outputByGroup['undefined'] + " " + outputByGroup['undefined']
+ "</div>" + "</div>"
} }

1
static/tailwind.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long