[WebUI] Rework cluster members table

and change status tab layout

3 files changed, 54 insertions, 124 deletions

diff --git a/interface/css/rspamd.css b/interface/css/rspamd.css
index eb5f2af1a..515270573 100644
--- a/interface/css/rspamd.css
+++ b/interface/css/rspamd.css
@@ -305,71 +305,6 @@ table#symbolsTable input[type="number"] {
     text-shadow: 0 1px 0 #ffffff;
 }
 
-.table-log {
-    table-layout: fixed;
-    border: 0 !important;
-}
-.table-log .col1 {
-    width: 130px;
-}
-.table-log .col2,
-.table-log .col6 {
-    width: 100%;
-}
-.table-log .col3,
-.table-log .col4,
-.table-log .col5 {
-    width: 100px;
-}
-.table-log th {
-    padding: 4px 10px;
-    font-size: 10px;
-    color: #666666;
-    white-space: nowrap;
-    background-color: #efefef;
-    border-bottom: 1px solid #ddd;
-    border-left: 1px solid #cdcdcd;
-}
-.table-log td,
-.table-log td .label {
-    font-family: "Trebuchet MS", Helvetica, sans-serif;
-    font-size: 11px;
-}
-.table-log thead th,
-.table-log tbody td {
-    text-align: left;
-    line-height: 16px;
-    vertical-align: top;
-}
-.table-log th:first-child,
-.table-log td:first-child {
-    border-left: 0;
-}
-.table-log .cell-overflow {
-    white-space: nowrap;
-    overflow: hidden;
-    -o-text-overflow: ellipsis;
-    text-overflow: ellipsis;
-}
-.table-log th.header {
-    cursor: pointer;
-}
-.table-log th:first-child {
-    border-left: 0;
-}
-.table-log th.headerSortUp,
-.table-log th.headerSortDown {
-    background-color: #fefefe;
-    background-position: 100% 12px;
-    background-repeat: no-repeat;
-}
-.table-log th.headerSortUp {
-    background-image: url('../img/asc.png');
-}
-.table-log th.headerSortDown {
-    background-image: url('../img/desc.png');
-}
-
 /* Symbols coloring */
 .symbol-default {
     border-radius: 2px;
@@ -529,35 +464,13 @@ input.radio {
     box-shadow: none !important;
 }
 
-.glyphicon-ok-circle {
+.glyphicon-ok {
     color: #468847;
 }
-
-.glyphicon-remove-circle {
+.glyphicon-remove {
     color: #b94a48;
 }
 
-#clusterTable .col1 {
-    width: 40px;
-}
-
-#clusterTable .col4 {
-    width: 50px;
-    text-align: center;
-}
-
-#clusterTable .col5 {
-    width: 100px;
-}
-
-#clusterTable .col2 {
-    width: 30%;
-}
-
-#clusterTable .col3 {
-    width: 50%;
-}
-
 #nprogress .bar {
     height: 1px;
 }
@@ -569,3 +482,13 @@ input.radio {
 .has-success .form-control {
     background-color: #eef9e7;
 }
+
+/* Bootstrap 4 spacing */
+.mb-0 {
+    margin-bottom: 0 !important;
+}
+
+/* Custom sizing */
+.w-1 {
+    width: 1% !important;
+}
diff --git a/interface/index.html b/interface/index.html
index 3dc35d20c..a84336a66 100644
--- a/interface/index.html
+++ b/interface/index.html
@@ -86,41 +86,46 @@
 						</div>
 					</div>
 				</div>
-
-				<div class="widget-box">
-					<div class="widget-title">
-						<span class="icon"><i class="glyphicon glyphicon-signal"></i></span>
-						<h5>Statistics</h5>
-					</div>
-					<div class="widget-content chart-content">
-						<div class="row">
-							<div class="chart" id="chart">
-								<span class="notice">Loading..</span>
-								<noscript>Please enable Javascript</noscript>
+				<div class="row">
+					<div class="col-md-6">
+						<div class="widget-box">
+							<div class="widget-title">
+								<span class="icon"><i class="glyphicon glyphicon-tasks"></i></span>
+								<h5>Servers</h5>
 							</div>
-						</div>
-					</div>
-				</div>
-				<div class="widget-box">
-						<!--iv class="widget-title">
-							<span class="icon"><i class="glyphicon glyphicon-tasks"></i></span>
-							<h5>Servers</h5>
-						</div-->
-						<div class="widget-content nopadding">
-								<table class="table table-log table-hover" id="clusterTable">
+								<div class="widget-content nopadding table-responsive">
+									<table class="table table-hover table-bordered text-nowrap mb-0" id="clusterTable">
 										<thead>
 											<tr>
-												<th class="col1" title="Radio"></th>
-												<th class="col2" title="SName">Server name</th>
-												<th class="col3" title="SHost">Host</th>
-												<th class="col4" title="SStatus">Status</th>
-												<th class="col5" title="SId">Configuration ID</th>
+												<th></th>
+												<th>Server name</th>
+												<th>Host</th>
+												<th class="w-1">Status</th>
+												<th>Configuration ID</th>
 											</tr>
 										</thead>
 										<tbody>
 										</tbody>
-								</table>
+									</table>
+								</div>
+						</div>
+					</div>
+					<div class="col-md-6">
+						<div class="widget-box">
+							<div class="widget-title">
+								<span class="icon"><i class="glyphicon glyphicon-signal"></i></span>
+								<h5>Statistics</h5>
+							</div>
+							<div class="widget-content chart-content">
+								<div class="row">
+									<div class="chart" id="chart">
+										<span class="notice">Loading..</span>
+										<noscript>Please enable Javascript</noscript>
+									</div>
+								</div>
+							</div>
 						</div>
+					</div>
 				</div>
 			</div>
 
diff --git a/interface/js/app/stats.js b/interface/js/app/stats.js
index 5cce2ecb9..7c5d7b577 100644
--- a/interface/js/app/stats.js
+++ b/interface/js/app/stats.js
@@ -106,22 +106,24 @@ define(["jquery", "d3pie"],
             $("#clusterTable tbody").empty();
             $("#selSrv").empty();
             $.each(servers, function (key, val) {
-                var glyph_status = "glyphicon glyphicon-remove-circle";
+                var row_class = "danger";
+                var glyph_status = "glyphicon glyphicon-remove";
                 var short_id = "???";
                 if (!("config_id" in val.data)) {
                     val.data.config_id = "";
                 }
                 if (val.status) {
-                    glyph_status = "glyphicon glyphicon-ok-circle";
+                    row_class = "success";
+                    glyph_status = "glyphicon glyphicon-ok";
                     short_id = val.data.config_id.substring(0, 8);
                 }
 
-                $("#clusterTable tbody").append("<tr>" +
-                "<td class=\"col1\" title=\"Radio\"><input type=\"radio\" class=\"form-control radio\" name=\"clusterName\" value=\"" + key + "\"></td>" +
-                "<td class=\"col2\" title=\"SNAme\">" + key + "</td>" +
-                "<td class=\"col3\" title=\"SHost\">" + val.host + "</td>" +
-                "<td class=\"col4\" title=\"SStatus\"><span class=\"icon\"><i class=\"" + glyph_status + "\"></i></span></td>" +
-                "<td class=\"col5\" title=\"short_id\">" + short_id + "</td></tr>");
+                $("#clusterTable tbody").append("<tr class=\"" + row_class + "\">" +
+                "<td><input type=\"radio\" class=\"form-control radio\" name=\"clusterName\" value=\"" + key + "\"></td>" +
+                "<td>" + key + "</td>" +
+                "<td>" + val.host + "</td>" +
+                "<td class=\"text-center\"><span class=\"icon\"><i class=\"" + glyph_status + "\"></i></span></td>" +
+                "<td>" + short_id + "</td></tr>");
 
                 $("#selSrv").append($("<option value=\"" + key + "\">" + key + "</option>"));