[www/nginx] Fixed vts style to allow theming (#2682)

Removed hard-coded colors from vts.css and added classes to allow
theming (default OPNsense theme and contributed themes).
This commit is contained in:
Manuel Faux
2022-01-03 18:13:08 +01:00
committed by GitHub
parent 54115c4304
commit be8192b82e
5 changed files with 44 additions and 56 deletions
@@ -108,6 +108,10 @@
filter:"filterZones",
upstream:"upstreamZones",
cache:"cacheZones"
},
classes: {
table: "table table-condensed table-hover table-striped",
div: "panel"
}
};
@@ -274,23 +278,21 @@
aHe('strong', it.sharedZones.name), byteFormat(it.sharedZones.maxSize), byteFormat(it.sharedZones.usedSize),
it.sharedZones.usedNode]);
body = aHe('tbody', aHe('tr', bodys[0]));
o = aHe('h2', vtsStatusVars.titles.main) + aHe('table', `${head}${body}`);
o = aHe(`div id="${vtsStatusVars.ids.main}"`, o);
o = aHe('h2', vtsStatusVars.titles.main) + aHe(`table class="${vtsStatusVars.classes.table}"`, `${head}${body}`);
o = aHe(`div id="${vtsStatusVars.ids.main}" class="${vtsStatusVars.classes.div}"`, o);
return o;
}
function templateServerZone(filter, group, id, cache) {
let n = 0, s, o = '';
let s, o = '';
for(const name in filter) {
if (filter.hasOwnProperty(name)) {
const zone = filter[name];
const uniq = `${id}.${group}.${name}`;
let clas = '';
let flag = '';
let responseCount = 0;
let responseTotal = 0;
let cacheCount = 0;
let cacheTotal = 0;
clas = (n++ % 2) ? 'odd' : '';
flag = (group.indexOf("country") !== -1 && name.length === 2)
? `<img class="flag flag-${name.toLowerCase()}" alt="flag ${name.toLowerCase()}" />`
: '';
@@ -322,7 +324,7 @@
}
s += aHe('td', cacheTotal);
}
o += aHe(`tr class="${clas}"`, s);
o += aHe('tr', s);
}
}
return o;
@@ -334,10 +336,9 @@
while (n < filter.length) {
const peer = filter[n];
const uniq = `${id}.${group}.${peer.server}`;
let clas = '';
let responseCount = 0;
let responseTotal = 0;
clas = (n++ % 2) ? 'odd' : '';
n++;
s = aHe('th', peer.server) +
aHe('td', [formatAvailability(peer.backup, peer.down), formatTime(peer.responseMsec),
peer.weight, peer.maxFails, peer.failTimeout,
@@ -358,22 +359,19 @@
byteFormat(aPs.getValue(`${uniq}.outBytes`, peer.outBytes)),
byteFormat(aPs.getValue(`${uniq}.inBytes`, peer.inBytes))
]);
o += aHe(`tr class="${clas}"`, s);
o += aHe('tr', s);
}
return o;
}
function templateCacheZone(filter, group, id) {
let n = 0;
let s;
let o = '';
for(const name in filter) {
if (filter.hasOwnProperty(name)) {
const zone = filter[name];
const uniq = `${id}.${group}.${name}`;
let clas = '';
let cacheCount = 0;
let cacheTotal = 0;
clas = (n++ % 2) ? 'odd' : '';
s = aHe('th', name) +
aHe('td', [byteFormat(zone.maxSize),
byteFormat(zone.usedSize),
@@ -390,7 +388,7 @@
}
}
s += aHe('td', cacheTotal);
o += aHe(`tr class="${clas}"`, s);
o += aHe('tr', s);
}
}
return o;
@@ -414,7 +412,7 @@
head = templateServerHeader(cache);
bodys[0] = templateServerZone(it.serverZones, 'server', vtsStatusVars.ids.server, cache);
body = aHe('tbody', bodys[0]);
out += aHe(`div id="${vtsStatusVars.ids.server}"`, aHe('h2', vtsStatusVars.titles.server) + aHe('table', head + body));
out += aHe(`div id="${vtsStatusVars.ids.server}" class="${vtsStatusVars.classes.div}"`, aHe('h2', vtsStatusVars.titles.server) + aHe(`table class="${vtsStatusVars.classes.table}"`, head + body));
/* filterZones */
if (vtsStatusVars.ids.filter in it) {
tmp = '';
@@ -424,7 +422,7 @@
head = templateServerHeader(cache);
bodys[0] = templateServerZone(filter, group, vtsStatusVars.ids.filter, cache);
body = aHe('tbody', bodys[0]);
tmp += aHe('h3', group) + aHe('table', head + body);
tmp += aHe('h3', group) + aHe(`table class="${vtsStatusVars.classes.table}"`, head + body);
}
}
out += aHe(`div id="${vtsStatusVars.ids.filter}"`, aHe('h2', vtsStatusVars.titles.filter) + tmp);
@@ -444,10 +442,10 @@
group = g2.get('description');
}
}
tmp += aHe('h3', group) + aHe('table', head + body);
tmp += aHe('h3', group) + aHe(`table class="${vtsStatusVars.classes.table}"`, head + body);
}
}
out += aHe(`div id="${vtsStatusVars.ids.upstream}"`, aHe('h2', vtsStatusVars.titles.upstream) + tmp);
out += aHe(`div id="${vtsStatusVars.ids.upstream}" class="${vtsStatusVars.classes.div}"`, aHe('h2', vtsStatusVars.titles.upstream) + tmp);
}
/* cacheZones */
if (vtsStatusVars.ids.cache in it) {
@@ -455,7 +453,7 @@
bodys[0] = templateCacheZone(it.cacheZones, 'cache', vtsStatusVars.ids.cache);
body = aHe('tbody', bodys[0]);
out += aHe(`div id="${vtsStatusVars.ids.cache}"`,
aHe('h2', vtsStatusVars.titles.cache) + aHe('table', head + body));
aHe('h2', vtsStatusVars.titles.cache) + aHe(`table class="${vtsStatusVars.classes.table}"`, head + body));
}
return out;
}
@@ -27,7 +27,6 @@
thead.sticky-top th {
position: sticky;
top: 80px;
background-color: white;
}
thead.sticky-top tr:first-child th {
@@ -37,7 +36,6 @@ thead.sticky-top tr:first-child th {
tfoot.sticky-bottom th {
position: sticky;
bottom: 50px;
background-color: white;
font-weight: normal;
font-family: inherit;
}
+3 -11
View File
@@ -24,7 +24,9 @@
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
* POSSIBILITY OF SUCH DAMAGE.
*/
#update {
margin-bottom: 1em;
}
#monitor h1 {
margin: .5em 0 0 0;
}
@@ -38,15 +40,10 @@
font-size: .8em;
margin: .5em 0;
border-collapse: collapse;
border-bottom: 1px #DED solid;
}
#monitor thead th {
font-size: 1em;
padding: .1em .3em;
border: .2em solid #FFF;
}
#monitor tbody tr.odd {
background: #F5F5F5;
}
#monitor tbody th {
text-align: left;
@@ -58,11 +55,6 @@
#monitor tbody td.key {
font-size: 1em;
padding: .1em .3em;
border: .2em solid #FFF;
}
#monitor div.update {
margin-top: 32px;
color: #696969;
}
/* from https://www.flag-sprites.com */
.flag {
File diff suppressed because one or more lines are too long
@@ -31,28 +31,28 @@
</tr>
<tr class="filter">
<% if (log_type === 'errors' || log_type === 'stream_errors') { %>
<th><input type="text" value="<%= model.escape('date') %>" name="date" /></th>
<th><input type="text" value="<%= model.escape('time') %>" name="time" /></th>
<th><input type="text" value="<%= model.escape('severity') %>" name="severity" /></th>
<th><input type="text" value="<%= model.escape('number') %>" name="number" /></th>
<th><input type="text" value="<%= model.escape('message') %>" name="message" /></th>
<th class="active"><input type="text" value="<%= model.escape('date') %>" name="date" /></th>
<th class="active"><input type="text" value="<%= model.escape('time') %>" name="time" /></th>
<th class="active"><input type="text" value="<%= model.escape('severity') %>" name="severity" /></th>
<th class="active"><input type="text" value="<%= model.escape('number') %>" name="number" /></th>
<th class="active"><input type="text" value="<%= model.escape('message') %>" name="message" /></th>
<% } else if (log_type === 'accesses') { %>
<th><input type="text" value="<%= model.escape('time') %>" name="time" /></th>
<th><input type="text" value="<%= model.escape('remote_ip') %>" name="remote_ip" /></th>
<th><input type="text" value="<%= model.escape('username') %>" name="username" /></th>
<th><input type="text" value="<%= model.escape('status') %>" name="status" /></th>
<th><input type="text" value="<%= model.escape('size') %>" name="size" /></th>
<th><input type="text" value="<%= model.escape('http_referer') %>" name="http_referer" /></th>
<th><input type="text" value="<%= model.escape('user_agent') %>" name="user_agent" /></th>
<th><input type="text" value="<%= model.escape('forwarded_for') %>" name="forwarded_for" /></th>
<th><input type="text" value="<%= model.escape('request_line') %>" name="request_line" /></th>
<th class="active"><input type="text" value="<%= model.escape('time') %>" name="time" /></th>
<th class="active"><input type="text" value="<%= model.escape('remote_ip') %>" name="remote_ip" /></th>
<th class="active"><input type="text" value="<%= model.escape('username') %>" name="username" /></th>
<th class="active"><input type="text" value="<%= model.escape('status') %>" name="status" /></th>
<th class="active"><input type="text" value="<%= model.escape('size') %>" name="size" /></th>
<th class="active"><input type="text" value="<%= model.escape('http_referer') %>" name="http_referer" /></th>
<th class="active"><input type="text" value="<%= model.escape('user_agent') %>" name="user_agent" /></th>
<th class="active"><input type="text" value="<%= model.escape('forwarded_for') %>" name="forwarded_for" /></th>
<th class="active"><input type="text" value="<%= model.escape('request_line') %>" name="request_line" /></th>
<% } else { %>
<th><input type="text" value="<%= model.escape('time') %>" name="time" /></th>
<th><input type="text" value="<%= model.escape('remote_ip') %>" name="remote_ip" /></th>
<th><input type="text" value="<%= model.escape('status') %>" name="status" /></th>
<th><input type="text" value="<%= model.escape('bytes_sent') %>" name="bytes_sent" /></th>
<th><input type="text" value="<%= model.escape('bytes_received') %>" name="bytes_received" /></th>
<th><input type="text" value="<%= model.escape('session_time') %>" name="session_time" /></th>
<th class="active"><input type="text" value="<%= model.escape('time') %>" name="time" /></th>
<th class="active"><input type="text" value="<%= model.escape('remote_ip') %>" name="remote_ip" /></th>
<th class="active"><input type="text" value="<%= model.escape('status') %>" name="status" /></th>
<th class="active"><input type="text" value="<%= model.escape('bytes_sent') %>" name="bytes_sent" /></th>
<th class="active"><input type="text" value="<%= model.escape('bytes_received') %>" name="bytes_received" /></th>
<th class="active"><input type="text" value="<%= model.escape('session_time') %>" name="session_time" /></th>
<% } %>
</tr>
</thead>
@@ -60,17 +60,17 @@
</tbody>
<tfoot class="sticky-bottom">
<tr>
<th class="text-nowrap">
<th class="text-nowrap active">
<button class="btn btn-primary" id="paging_first" title="First Page"><i class="fa fa-fast-backward" aria-hidden="true"></i></button>
<button class="btn btn-primary" id="paging_back" title="Previous Page"><i class="fa fa-step-backward" aria-hidden="true"></i></button>
<button class="btn btn-primary" id="refresh" title="Refresh"><i class="fa fa-refresh" aria-hidden="true"></i></button>
<button class="btn btn-primary" id="paging_forward" title="Next Page"><i class="fa fa-step-forward" aria-hidden="true"></i></button>
<button class="btn btn-primary" id="paging_last" title="Last Page"><i class="fa fa-fast-forward " aria-hidden="true"></i></button>
</th>
<th>
<th class="active">
Page <span id="currentpage">1</span>/<span id="pagecount">0</span>
</th>
<th colspan="2">
<th class="active" colspan="2">
<label for="entrycount"><span id="entrycountdisplay">100</span> lines per page</label>
<input type="range" list="tickmarks" min="5" max="1000" step="5" id="entrycount" value="100" />
<datalist id="tickmarks">
@@ -87,7 +87,7 @@
<option value="1000" label="1000">
</datalist>
</th>
<th colspan="<%= count - 4 %>">Found lines: <span id="resultcount">0</span>/<span id="totalcount">0</span></th>
<th class="active" colspan="<%= count - 4 %>">Found lines: <span id="resultcount">0</span>/<span id="totalcount">0</span></th>
</tr>
</tfoot>
</table>