[WebUI] Rework cluster members table

and change status tab layout

diff --git a/interface/css/rspamd.css b/interface/css/rspamd.css
index eb5f2af1a240c32f1e4c058b7cb2383213be7422..515270573ba586b340bb12ded25b4787bf14ec92 100644 (file)
--- 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 3dc35d20c48c90e645785661570505a84c25770e..a84336a66fe1764eb3ed920b9f6a0dfb05329d18 100644 (file)
--- 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 5cce2ecb9260530bc1c306e335dedb1317daeb16..7c5d7b57721ad87baf36a5e23fbb68f9c0b906d3 100644 (file)
--- 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>"));