commit dab8443: [WebUI] Rework cluster members table
moisseev
moiseev at mezonplus.ru
Sat Jun 13 19:21:06 UTC 2020
Author: moisseev
Date: 2020-06-13 10:54:02 +0300
URL: https://github.com/rspamd/rspamd/commit/dab8443f0c728a44f6f182820744ab313f1c2253 (refs/pull/3402/head)
[WebUI] Rework cluster members table
and change status tab layout
---
interface/css/rspamd.css | 101 ++++++----------------------------------------
interface/index.html | 59 ++++++++++++++-------------
interface/js/app/stats.js | 18 +++++----
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>"));
More information about the Commits
mailing list