More healthchecks UI changes

css/organizr.css

@@ -1291,7 +1291,7 @@ span.fc-title {
     border-bottom-right-radius: 3px;
 }
 .left-health {
-    width: 20px;
+    width: 15px;
     height: 100%;
     position: absolute;
     left: 0;
@@ -3942,3 +3942,42 @@ html {
     border-top-right-radius: 0; }
 .accordion > .card .card-header {
     margin-bottom: 0px; }
+
+@keyframes spinner-border {
+    to {
+        transform: rotate(360deg); } }
+
+.spinner-border {
+    display: inline-block;
+    width: 2rem;
+    height: 2rem;
+    vertical-align: text-bottom;
+    border: 0.25em solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: spinner-border .75s linear infinite; }
+
+.spinner-border-sm {
+    width: 1rem;
+    height: 1rem;
+    border-width: 0.2em; }
+
+@keyframes spinner-grow {
+    0% {
+        transform: scale(0); }
+    50% {
+        opacity: 1; } }
+
+.spinner-grow {
+    display: inline-block;
+    width: 2rem;
+    height: 2rem;
+    vertical-align: text-bottom;
+    background-color: currentColor;
+    border-radius: 50%;
+    opacity: 0;
+    animation: spinner-grow .75s linear infinite; }
+
+.spinner-grow-sm {
+    width: 1rem;
+    height: 1rem; }

js/custom.js

@@ -1892,4 +1892,9 @@ $(document).on('click', ".copyDebug", function(){
 $(document).on("keyup", "#authBackendHostPrefix-input, #authBackendHostSuffix-input", function () {
     var newDN = $('#authBackendHostPrefix-input').val() + 'TestAcct' + $('#authBackendHostSuffix-input').val();
     $('#accountDN').html(newDN);
+});
+
+// homepage healthchecks
+$(document).on('click', ".good-health-checks", function(){
+    homepageHealthChecks();
 });

js/functions.js

@@ -5330,7 +5330,7 @@ function buildHealthChecks(array){
 	<div id="allHealthChecks">
 		<div class="el-element-overlay row">
 		    <div class="col-md-12">
-		        <h4 class="pull-left"><span lang="en">Health Checks</span> : </h4><h4 class="pull-left">&nbsp;<span class="label label-info m-l-20 checkbox-circle good-health-checks">`+checks+`</span></h4>
+		        <h4 class="pull-left"><span lang="en">Health Checks</span> : </h4><h4 class="pull-left">&nbsp;<span class="label label-info m-l-20 checkbox-circle good-health-checks mouse">`+checks+`</span></h4>
 		        <hr class="hidden-xs">
 		    </div>
 			<div class="clearfix"></div>
@@ -5367,23 +5367,29 @@ function buildHealthChecksItem(array){
         v.name = (v.name) ? v.name : 'New Item';
         switch(v.status){
             case 'up':
-                var statusColor = 'info';
-                var statusIcon = 'icon-check text-info';
+                var statusColor = 'success';
+                var statusIcon = 'ti-link text-success';
                 var nextPing = moment.utc(v.next_ping, "YYYY-MM-DD hh:mm[Z]").local().fromNow();
                 var lastPing = moment.utc(v.last_ping, "YYYY-MM-DD hh:mm[Z]").local().fromNow();
                 break;
             case 'down':
                 var statusColor = 'danger';
-                var statusIcon = 'icon-close taxt-danger';
-                var nextPing = moment.utc(v.next_ping, "YYYY-MM-DD hh:mm[Z]").local().fromNow();
+                var statusIcon = 'ti-unlink text-danger';
+                var nextPing = 'Service Down';
                 var lastPing = moment.utc(v.last_ping, "YYYY-MM-DD hh:mm[Z]").local().fromNow();
                 break;
             case 'new':
-                var statusColor = 'warning';
-                var statusIcon = 'ti-timer text-warning';
+                var statusColor = 'info';
+                var statusIcon = 'ti-time text-info';
                 var nextPing = 'Waiting...';
                 var lastPing = 'n/a';
                 break;
+            case 'grace':
+                var statusColor = 'warning';
+                var statusIcon = 'ti-alert text-warning';
+                var nextPing = moment.utc(v.next_ping, "YYYY-MM-DD hh:mm[Z]").local().fromNow();
+                var lastPing = 'Missed';
+                break;
             default:
                 var statusColor = 'warning';
                 var statusIcon = 'ti-timer text-warning';
@@ -5393,7 +5399,7 @@ function buildHealthChecksItem(array){
         checks += `
             <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12">
                 <div class="card bg-inverse text-white">
-                    <div class="card-body bg-org-alt">
+                    <div class="card-body bg-org-alt pt-1 pb-1">
                         <div class="d-flex no-block align-items-center">
                             <div class="left-health bg-`+statusColor+`"></div>
                             <div class="ml-4 mt-2 w-100">