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 host, count, ua = line:match("^(%S+)%s(%d+)%s(.+)$")
        if ua and count then
            table.insert(pass_stats, {ua = ua, count = count, host = host})
        end
    end
    pass_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"><%:User-Agent Rewrite Statistics%></div>
<table id="rewrite-stats-table" class="table cbi-section-table">
    <tr class="tr table-titles">
        <th class="th"><%:Host%></th>
        <th class="th"><%:Rewrite Count%></th>
        <th class="th"><%:Original User-Agent%></th>
        <th class="th"><%: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"><%:User-Agent Pass-Through Statistics%></div>
<table id="pass-stats-table" class="table cbi-section-table">
    <tr class="tr table-titles">
        <th class="th"><%:User-Agent%></th>
        <th class="th"><%:Pass-Through Count%></th>
        <th class="th"><%:Last Host%></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 Host%>"><span><%= item.host %></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");

            if (newRewriteTable) {
                document.querySelector("#rewrite-stats-table").innerHTML = newRewriteTable.innerHTML;
            }
            if (newPassTable) {
                document.querySelector("#pass-stats-table").innerHTML = newPassTable.innerHTML;
            }
        } 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: 50%;
}

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

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