[WebUI] Show message size in IEC (base 1024) unitstags/3.8.0
@@ -10,6 +10,9 @@ | |||
"globals": { | |||
"define": false | |||
}, | |||
"parserOptions": { | |||
"ecmaVersion": 2016 | |||
}, | |||
"plugins": [ | |||
"@stylistic" | |||
], |
@@ -24,8 +24,8 @@ | |||
/* global FooTable */ | |||
define(["jquery", "app/common", "app/libft", "d3", "footable"], | |||
($, common, libft, d3) => { | |||
define(["jquery", "app/common", "app/libft", "footable"], | |||
($, common, libft) => { | |||
"use strict"; | |||
const ui = {}; | |||
let prevVersion = null; | |||
@@ -58,118 +58,6 @@ define(["jquery", "app/common", "app/libft", "d3", "footable"], | |||
return {items: items}; | |||
} | |||
function columns_v2() { | |||
return [{ | |||
name: "id", | |||
title: "ID", | |||
style: { | |||
minWidth: 130, | |||
overflow: "hidden", | |||
textOverflow: "ellipsis", | |||
wordBreak: "break-all", | |||
whiteSpace: "normal" | |||
} | |||
}, { | |||
name: "ip", | |||
title: "IP address", | |||
breakpoints: "xs sm md", | |||
style: { | |||
"minWidth": "calc(7.6em + 8px)", | |||
"word-break": "break-all" | |||
} | |||
}, { | |||
name: "sender_mime", | |||
title: "[Envelope From] From", | |||
breakpoints: "xs sm md", | |||
style: { | |||
"minWidth": 100, | |||
"maxWidth": 200, | |||
"word-wrap": "break-word" | |||
} | |||
}, { | |||
name: "rcpt_mime_short", | |||
title: "[Envelope To] To/Cc/Bcc", | |||
breakpoints: "xs sm md", | |||
filterable: false, | |||
classes: "d-none d-xl-table-cell", | |||
style: { | |||
"minWidth": 100, | |||
"maxWidth": 200, | |||
"word-wrap": "break-word" | |||
} | |||
}, { | |||
name: "rcpt_mime", | |||
title: "[Envelope To] To/Cc/Bcc", | |||
breakpoints: "all", | |||
style: {"word-wrap": "break-word"} | |||
}, { | |||
name: "subject", | |||
title: "Subject", | |||
breakpoints: "xs sm md", | |||
style: { | |||
"word-break": "break-all", | |||
"minWidth": 150 | |||
} | |||
}, { | |||
name: "action", | |||
title: "Action", | |||
style: {minwidth: 82} | |||
}, { | |||
name: "score", | |||
title: "Score", | |||
style: { | |||
"maxWidth": 110, | |||
"text-align": "right", | |||
"white-space": "nowrap" | |||
}, | |||
sortValue: function (val) { return Number(val.options.sortValue); } | |||
}, { | |||
name: "symbols", | |||
title: "Symbols" + | |||
'<div class="sym-order-toggle">' + | |||
'<br><span style="font-weight:normal;">Sort by:</span><br>' + | |||
'<div class="btn-group btn-group-xs btn-sym-order-history">' + | |||
'<label type="button" class="btn btn-outline-secondary btn-sym-history-magnitude">' + | |||
'<input type="radio" class="btn-check" value="magnitude">Magnitude</label>' + | |||
'<label type="button" class="btn btn-outline-secondary btn-sym-history-score">' + | |||
'<input type="radio" class="btn-check" value="score">Value</label>' + | |||
'<label type="button" class="btn btn-outline-secondary btn-sym-history-name">' + | |||
'<input type="radio" class="btn-check" value="name">Name</label>' + | |||
"</div>" + | |||
"</div>", | |||
breakpoints: "all", | |||
style: {width: 550, maxWidth: 550} | |||
}, { | |||
name: "size", | |||
title: "Msg size", | |||
breakpoints: "xs sm md", | |||
style: {minwidth: 50}, | |||
formatter: d3.format(".3~s") | |||
}, { | |||
name: "time_real", | |||
title: "Scan time", | |||
breakpoints: "xs sm md", | |||
style: {maxWidth: 72}, | |||
sortValue: function (val) { return Number(val); } | |||
}, { | |||
classes: "history-col-time", | |||
sorted: true, | |||
direction: "DESC", | |||
name: "time", | |||
title: "Time", | |||
sortValue: function (val) { return Number(val.options.sortValue); } | |||
}, { | |||
name: "user", | |||
title: "Authenticated user", | |||
breakpoints: "xs sm md", | |||
style: { | |||
"minWidth": 100, | |||
"maxWidth": 130, | |||
"word-wrap": "break-word" | |||
} | |||
}]; | |||
} | |||
function columns_legacy() { | |||
return [{ | |||
name: "id", | |||
@@ -206,7 +94,7 @@ define(["jquery", "app/common", "app/libft", "d3", "footable"], | |||
title: "Message size", | |||
breakpoints: "xs sm", | |||
style: {width: 120, maxWidth: 120}, | |||
formatter: d3.format(".3~s") | |||
formatter: libft.formatBytesIEC | |||
}, { | |||
name: "scan_time", | |||
title: "Scan time", | |||
@@ -228,8 +116,8 @@ define(["jquery", "app/common", "app/libft", "d3", "footable"], | |||
} | |||
const columns = { | |||
2: columns_v2, | |||
legacy: columns_legacy | |||
2: libft.columns_v2("history"), | |||
legacy: columns_legacy() | |||
}; | |||
function process_history_data(data) { | |||
@@ -259,7 +147,7 @@ define(["jquery", "app/common", "app/libft", "d3", "footable"], | |||
} | |||
} | |||
return func(); | |||
return func; | |||
} | |||
ui.getHistory = function () { |
@@ -35,6 +35,148 @@ define(["jquery", "app/common", "footable"], | |||
// Public functions | |||
ui.formatBytesIEC = function (bytes) { | |||
// FooTable represents data as text even column type is "number". | |||
if (!Number.isInteger(Number(bytes)) || bytes < 0) return "NaN"; | |||
const base = 1024; | |||
const exponent = Math.floor(Math.log(bytes) / Math.log(base)); | |||
if (exponent > 8) return "∞"; | |||
const value = parseFloat((bytes / (base ** exponent)).toPrecision(3)); | |||
let unit = "BKMGTPEZY"[exponent]; | |||
if (exponent) unit += "iB"; | |||
return value + " " + unit; | |||
}; | |||
ui.columns_v2 = function (table) { | |||
return [{ | |||
name: "id", | |||
title: "ID", | |||
style: { | |||
minWidth: 130, | |||
overflow: "hidden", | |||
textOverflow: "ellipsis", | |||
wordBreak: "break-all", | |||
whiteSpace: "normal" | |||
} | |||
}, { | |||
name: "ip", | |||
title: "IP address", | |||
breakpoints: "xs sm md", | |||
style: { | |||
"minWidth": "calc(7.6em + 8px)", | |||
"word-break": "break-all" | |||
} | |||
}, { | |||
name: "sender_mime", | |||
title: "[Envelope From] From", | |||
breakpoints: "xs sm md", | |||
style: { | |||
"minWidth": 100, | |||
"maxWidth": 200, | |||
"word-wrap": "break-word" | |||
} | |||
}, { | |||
name: "rcpt_mime_short", | |||
title: "[Envelope To] To/Cc/Bcc", | |||
breakpoints: "xs sm md", | |||
filterable: false, | |||
classes: "d-none d-xl-table-cell", | |||
style: { | |||
"minWidth": 100, | |||
"maxWidth": 200, | |||
"word-wrap": "break-word" | |||
} | |||
}, { | |||
name: "rcpt_mime", | |||
title: "[Envelope To] To/Cc/Bcc", | |||
breakpoints: "all", | |||
style: {"word-wrap": "break-word"} | |||
}, { | |||
name: "subject", | |||
title: "Subject", | |||
breakpoints: "xs sm md", | |||
style: { | |||
"word-break": "break-all", | |||
"minWidth": 150 | |||
} | |||
}, { | |||
name: "action", | |||
title: "Action", | |||
style: {minwidth: 82} | |||
}, { | |||
name: "passthrough_module", | |||
title: '<div title="The module that has set the pre-result">Pass-through module</div>', | |||
breakpoints: "xs sm md" | |||
}, { | |||
name: "score", | |||
title: "Score", | |||
style: { | |||
"maxWidth": 110, | |||
"text-align": "right", | |||
"white-space": "nowrap" | |||
}, | |||
sortValue: function (val) { return Number(val.options.sortValue); } | |||
}, { | |||
name: "symbols", | |||
title: "Symbols" + | |||
'<div class="sym-order-toggle">' + | |||
'<br><span style="font-weight:normal;">Sort by:</span><br>' + | |||
'<div class="btn-group btn-group-xs btn-sym-order-' + table + '">' + | |||
'<label type="button" class="btn btn-outline-secondary btn-sym-' + table + '-magnitude">' + | |||
'<input type="radio" class="btn-check" value="magnitude">Magnitude</label>' + | |||
'<label type="button" class="btn btn-outline-secondary btn-sym-' + table + '-score">' + | |||
'<input type="radio" class="btn-check" value="score">Value</label>' + | |||
'<label type="button" class="btn btn-outline-secondary btn-sym-' + table + '-name">' + | |||
'<input type="radio" class="btn-check" value="name">Name</label>' + | |||
"</div>" + | |||
"</div>", | |||
breakpoints: "all", | |||
style: {width: 550, maxWidth: 550} | |||
}, { | |||
name: "size", | |||
title: "Msg size", | |||
breakpoints: "xs sm md", | |||
style: {minwidth: 50}, | |||
formatter: ui.formatBytesIEC | |||
}, { | |||
name: "time_real", | |||
title: "Scan time", | |||
breakpoints: "xs sm md", | |||
style: {maxWidth: 72}, | |||
sortValue: function (val) { return Number(val); } | |||
}, { | |||
classes: "history-col-time", | |||
sorted: true, | |||
direction: "DESC", | |||
name: "time", | |||
title: "Time", | |||
sortValue: function (val) { return Number(val.options.sortValue); } | |||
}, { | |||
name: "user", | |||
title: "Authenticated user", | |||
breakpoints: "xs sm md", | |||
style: { | |||
"minWidth": 100, | |||
"maxWidth": 130, | |||
"word-wrap": "break-word" | |||
} | |||
}].filter((col) => { | |||
switch (table) { | |||
case "history": | |||
return (col.name !== "passthrough_module"); | |||
case "scan": | |||
return ["ip", "sender_mime", "rcpt_mime_short", "rcpt_mime", "subject", "size", "user"] | |||
.every((name) => col.name !== name); | |||
default: | |||
return null; | |||
} | |||
}); | |||
}; | |||
ui.set_page_size = function (table, page_size, changeTablePageSize) { | |||
const n = parseInt(page_size, 10); // HTML Input elements return string representing a number | |||
if (n > 0) { |
@@ -73,62 +73,6 @@ define(["jquery", "app/common", "app/libft"], | |||
}); | |||
} | |||
function columns_v2() { | |||
return [{ | |||
name: "id", | |||
title: "ID", | |||
style: { | |||
minWidth: 130, | |||
overflow: "hidden", | |||
textOverflow: "ellipsis", | |||
wordBreak: "break-all", | |||
whiteSpace: "normal" | |||
} | |||
}, { | |||
name: "action", | |||
title: "Action", | |||
style: {minwidth: 82} | |||
}, { | |||
name: "passthrough_module", | |||
title: '<div title="The module that has set the pre-result">Pass-through module</div>', | |||
breakpoints: "xs sm md" | |||
}, { | |||
name: "score", | |||
title: "Score", | |||
style: {maxWidth: 110}, | |||
sortValue: function (val) { return Number(val.options.sortValue); } | |||
}, { | |||
name: "symbols", | |||
title: "Symbols" + | |||
'<div class="sym-order-toggle">' + | |||
'<br><span style="font-weight:normal;">Sort by:</span><br>' + | |||
'<div class="btn-group btn-group-xs btn-sym-order-scan">' + | |||
'<label type="button" class="btn btn-outline-secondary btn-sym-scan-magnitude">' + | |||
'<input type="radio" class="btn-check" value="magnitude">Magnitude</label>' + | |||
'<label type="button" class="btn btn-outline-secondary btn-sym-scan-score">' + | |||
'<input type="radio" class="btn-check" value="score">Value</label>' + | |||
'<label type="button" class="btn btn-outline-secondary btn-sym-scan-name">' + | |||
'<input type="radio" class="btn-check" value="name">Name</label>' + | |||
"</div>" + | |||
"</div>", | |||
breakpoints: "all", | |||
style: {width: 550, maxWidth: 550} | |||
}, { | |||
name: "time_real", | |||
title: "Scan time", | |||
breakpoints: "xs sm md", | |||
style: {maxWidth: 72}, | |||
sortValue: function (val) { return Number(val); } | |||
}, { | |||
classes: "history-col-time", | |||
sorted: true, | |||
direction: "DESC", | |||
name: "time", | |||
title: "Time", | |||
sortValue: function (val) { return Number(val.options.sortValue); } | |||
}]; | |||
} | |||
function get_server() { | |||
const checked_server = common.getSelector("selSrv"); | |||
return (checked_server === "All SERVERS") ? "local" : checked_server; | |||
@@ -171,7 +115,7 @@ define(["jquery", "app/common", "app/libft"], | |||
require(["footable"], () => { | |||
// Is there a way to get an event when the table is destroyed? | |||
setTimeout(() => { | |||
libft.initHistoryTable(data, items, "scan", columns_v2(), true); | |||
libft.initHistoryTable(data, items, "scan", libft.columns_v2("scan"), true); | |||
scrollTop(rows_total); | |||
}, 200); | |||
}); |