mirror of
https://github.com/netbirdio/plugins.git
synced 2026-05-22 18:44:07 -07:00
[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:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user