UA3F/openwrt/files/luci/statistics.htm

<%
local rewrite_stats = {}
local rewrite_stats_file = io.open("/var/log/ua3f/rewrite_stats", "r")
if rewrite_stats_file then
    for line in rewrite_stats_file:lines() do
        local host, count, origin_ua, mocked_ua = line:match("^(%S+)%s+(%d+)%s+(.-)SEQSEQ(.-)%s*$")
        if host and count then
            table.insert(rewrite_stats, {host = host, count = count, origin_ua = origin_ua, mocked_ua = mocked_ua})
        end
    end
    rewrite_stats_file:close()
end

local pass_stats = {}
local pass_stats_file = io.open("/var/log/ua3f/pass_stats", "r")
if pass_stats_file then
    for line in pass_stats_file:lines() do
        local srcAddr, destAddr, count, ua = line:match("^(%S+)%s(%S+)%s(%d+)%s(.+)$")
        if ua and count then
            table.insert(pass_stats, {ua = ua, count = count, srcAddr = srcAddr, destAddr = destAddr})
        end
    end
    pass_stats_file:close()
end

local conn_stats = {}
local conn_stats_file = io.open("/var/log/ua3f/conn_stats", "r")
if conn_stats_file then
    for line in conn_stats_file:lines() do
        local protocol, srcAddr, destAddr, duration = line:match("^(%S+)%s(%S+)%s(%S+)%s(.+)$")
        if protocol and srcAddr and destAddr and duration then
            table.insert(conn_stats, {protocol = protocol, srcAddr = srcAddr, destAddr = destAddr, duration = duration})
        end
    end
    conn_stats_file:close()
end

local function rowstyle(i)
    return (i % 2 == 0) and "cbi-rowstyle-2" or "cbi-rowstyle-1"
end
%>

<h3><%:Statistics%></h3>

<div class="cbi-section-descr" style="font-weight:bold;"><%:User-Agent Rewrite Statistics%></div>
<table id="rewrite-stats-table" class="table cbi-section-table">
    <tr class="tr table-titles">
        <th class="th" data-sortable-row="true"><%:Host%></th>
        <th class="th" data-sortable-row="true"><%:Rewrite Count%></th>
        <th class="th" data-sortable-row="true"><%:Original User-Agent%></th>
        <th class="th" data-sortable-row="true"><%:Modified User-Agent%></th>
    </tr>

    <% for i, item in ipairs(rewrite_stats) do %>
        <tr class="tr <%= rowstyle(i) %>">
            <td class="td" data-title="<%:Host%>"><span><%= item.host %></span></td>
            <td class="td" data-title="<%:Rewrite Count%>"><%= item.count %></td>
            <td class="td" data-title="<%:Original User-Agent%>"><span><%= item.origin_ua %></span></td>
            <td class="td" data-title="<%:Modified User-Agent%>"><span><%= item.mocked_ua %></span></td>
        </tr>
    <% end %>
</table>

<div class="cbi-section-descr" style="font-weight:bold;"><%:User-Agent Pass-Through Statistics%></div>
<table id="pass-stats-table" class="table cbi-section-table">
    <tr class="tr table-titles">
        <th class="th" data-sortable-row="true"><%:User-Agent%></th>
        <th class="th" data-sortable-row="true"><%:Pass-Through Count%></th>
        <th class="th" data-sortable-row="true"><%:Last Source Address%></th>
        <th class="th" data-sortable-row="true"><%:Last Destination Address%></th>
    </tr>

    <% for i, item in ipairs(pass_stats) do %>
        <tr class="tr <%= rowstyle(i) %>">
            <td class="td" data-title="<%:User-Agent%>"><span><%= item.ua %></span></td>
            <td class="td" data-title="<%:Pass-Through Count%>"><%= item.count %></td>
            <td class="td" data-title="<%:Last Source Address%>"><span><%= item.srcAddr %></span></td>
            <td class="td" data-title="<%:Last Destination Address%>"><span><%= item.destAddr %></span></td>
        </tr>
    <% end %>
</table>

<div class="cbi-section-descr" style="font-weight:bold;"><%:Connection Statistics%></div>
<table id="conn-stats-table" class="table cbi-section-table">
    <tr>
        <td colspan="4" style="padding:5px 0;">
            <%:Total Connections%>: <%= #conn_stats %>
        </td>
    </tr>
    <tr class="tr table-titles">
        <th class="th" data-sortable-row="true"><%:Protocol%></th>
        <th class="th" data-sortable-row="true"><%:Source Address%></th>
        <th class="th" data-sortable-row="true"><%:Destination Address%></th>
        <th class="th" data-sortable-row="true"><%:Duration%></th>
    </tr>

    <% for i, item in ipairs(conn_stats) do %>
        <tr class="tr <%= rowstyle(i) %>">
            <td class="td" data-title="<%:Protocol%>"><span><%= item.protocol %></span></td>
            <td class="td" data-title="<%:Source Address%>"><span><%= item.srcAddr %></span></td>
            <td class="td" data-title="<%:Destination Address%>"><span><%= item.destAddr %></span></td>
            <td class="td" data-title="<%:Duration%>"><span><%= item.duration %></span></td>
        </tr>
    <% end %>
</table>


<script type="text/javascript">
    async function updateStats() {
        try {
            const response = await fetch(window.location.href, {cache: "no-store"});
            const text = await response.text();

            const parser = new DOMParser();
            const doc = parser.parseFromString(text, "text/html");
            const newRewriteTable = doc.querySelector("#rewrite-stats-table");
            const newPassTable = doc.querySelector("#pass-stats-table");
            const newConnTable = doc.querySelector("#conn-stats-table");
            const newLog = doc.querySelector("#cbid\\.ua3f\\.main\\.log");

            if (newRewriteTable) {
                document.querySelector("#rewrite-stats-table").innerHTML = newRewriteTable.innerHTML;
            }
            if (newPassTable) {
                document.querySelector("#pass-stats-table").innerHTML = newPassTable.innerHTML;
            }
            if (newConnTable) {
                document.querySelector("#conn-stats-table").innerHTML = newConnTable.innerHTML;
            }
            if (newLog) {
                document.querySelector("#cbid\\.ua3f\\.main\\.log").value = newLog.value;
            }

        } catch (err) {
            console.error("update stats error:", err);
        }
    }
    setInterval(updateStats, 5000);
</script>

<style>
#rewrite-stats-table th:nth-child(1),
#rewrite-stats-table td:nth-child(1) {
  width: 20%;
}

#rewrite-stats-table th:nth-child(2),
#rewrite-stats-table td:nth-child(2) {
  width: 10%;
  text-align: center;
}

#rewrite-stats-table th:nth-child(3),
#rewrite-stats-table td:nth-child(3) {
  width: 35%;
}

#rewrite-stats-table th:nth-child(4),
#rewrite-stats-table td:nth-child(4) {
  width: 35%;
}

#pass-stats-table th:nth-child(1),
#pass-stats-table td:nth-child(1) {
  width: 30%;
}

#pass-stats-table th:nth-child(2),
#pass-stats-table td:nth-child(2) {
    width: 10%;
    text-align: center;
}

#pass-stats-table th:nth-child(3),
#pass-stats-table td:nth-child(3) {
    width: 30%;
}

#pass-stats-table th:nth-child(4),
#pass-stats-table td:nth-child(4) {
    width: 30%;
}

#conn-stats-table th:nth-child(1),
#conn-stats-table td:nth-child(1) {
  width: 15%;
}

#conn-stats-table th:nth-child(2),
#conn-stats-table td:nth-child(2) {
  width: 30%;
}

#conn-stats-table th:nth-child(3),
#conn-stats-table td:nth-child(3) {
  width: 40%;
}

#conn-stats-table th:nth-child(4),
#conn-stats-table td:nth-child(4) {
  width: 15%;
  text-align: center;
}
</style>