mirror of
https://github.com/ntop/ntopng.git
synced 2026-05-06 03:45:26 +00:00
Updated networks page to vuejs (#9585)
* traffic profiles, added timeseries href in table * Updated networks page to vuejs
This commit is contained in:
GabrieleDeri
GitHub
parent
c95590ea67
commit
a77ec6ca83
8 changed files with 325 additions and 153 deletions
|
|
@ -1,26 +0,0 @@
|
|||
--
|
||||
-- (C) 2013-24 - ntop.org
|
||||
--
|
||||
|
||||
local dirs = ntop.getDirs()
|
||||
package.path = dirs.installdir .. "/scripts/lua/modules/?.lua;" .. package.path
|
||||
|
||||
require "lua_utils"
|
||||
local network_formatter = require "network_formatter"
|
||||
local json = require("dkjson")
|
||||
|
||||
sendHTTPContentTypeHeader('text/html')
|
||||
|
||||
-- sendHTTPHeader('application/json')
|
||||
|
||||
local network = tonumber(_GET["network"])
|
||||
|
||||
local network_stats = interface.getNetworkStats(network) or {}
|
||||
local res = {}
|
||||
|
||||
for _, v in pairs(network_stats) do
|
||||
res = network_formatter.network2record(interface.getId(), v)
|
||||
break
|
||||
end
|
||||
|
||||
print(json.encode(res, nil))
|
||||
|
|
@ -1,110 +0,0 @@
|
|||
--
|
||||
-- (C) 2013-24 - ntop.org
|
||||
--
|
||||
|
||||
local dirs = ntop.getDirs()
|
||||
package.path = dirs.installdir .. "/scripts/lua/modules/?.lua;" .. package.path
|
||||
require "lua_utils"
|
||||
local network_formatter = require "network_formatter"
|
||||
|
||||
local json = require("dkjson")
|
||||
|
||||
sendHTTPContentTypeHeader('text/html')
|
||||
|
||||
-- Table parameters
|
||||
local currentPage = _GET["currentPage"]
|
||||
local perPage = _GET["perPage"]
|
||||
local sortColumn = _GET["sortColumn"]
|
||||
local sortOrder = _GET["sortOrder"]
|
||||
|
||||
local sortPrefs = "local_network"
|
||||
|
||||
if((sortColumn == nil) or (sortColumn == "column_"))then
|
||||
sortColumn = getDefaultTableSort(sortPrefs)
|
||||
else
|
||||
if((sortColumn ~= "column_")
|
||||
and (sortColumn ~= "")) then
|
||||
tablePreferences("sort_"..sortPrefs,sortColumn)
|
||||
end
|
||||
end
|
||||
|
||||
if(sortOrder == nil) then
|
||||
sortOrder = getDefaultTableSortOrder(sortPrefs)
|
||||
else
|
||||
if((sortColumn ~= "column_")
|
||||
and (sortColumn ~= "")) then
|
||||
tablePreferences("sort_order_"..sortPrefs,sortOrder)
|
||||
end
|
||||
end
|
||||
|
||||
if(currentPage == nil) then
|
||||
currentPage = 1
|
||||
else
|
||||
currentPage = tonumber(currentPage)
|
||||
end
|
||||
|
||||
if(perPage == nil) then
|
||||
perPage = getDefaultTableSize()
|
||||
else
|
||||
perPage = tonumber(perPage)
|
||||
tablePreferences("rows_number", perPage)
|
||||
end
|
||||
|
||||
local to_skip = (currentPage-1) * perPage
|
||||
|
||||
if(sortOrder == "desc") then sOrder = false else sOrder = true end
|
||||
|
||||
local networks_stats = interface.getNetworksStats()
|
||||
local total_rows = 0
|
||||
|
||||
local sort_helper = {}
|
||||
for n, ns in pairs(networks_stats) do
|
||||
total_rows = total_rows + 1
|
||||
|
||||
if sortColumn == "column_hosts" then
|
||||
sort_helper[n] = ns["num_hosts"]
|
||||
elseif sortColumn == "column_thpt" then
|
||||
sort_helper[n] = ns["throughput_bps"]
|
||||
elseif sortColumn == "column_score" then
|
||||
sort_helper[n] = ns["score"]
|
||||
elseif sortColumn == "column_alerted_flows" then
|
||||
sort_helper[n] = ns["alerted_flows"]["total"]
|
||||
elseif sortColumn == "column_traffic" then
|
||||
sort_helper[n] = ns["bytes.sent"] + ns["bytes.rcvd"]
|
||||
else
|
||||
sort_helper[n] = getLocalNetworkAlias(ns["network_key"])
|
||||
end
|
||||
end
|
||||
|
||||
|
||||
local res_formatted = {}
|
||||
local cur_row = 0
|
||||
local tot_row_in_page = 0
|
||||
|
||||
for n, _ in pairsByValues(sort_helper, ternary(sOrder, asc, rev)) do
|
||||
cur_row = cur_row + 1
|
||||
|
||||
if cur_row <= to_skip then
|
||||
goto continue
|
||||
end
|
||||
|
||||
local record = network_formatter.network2record(interface.getId(), networks_stats[n])
|
||||
res_formatted[#res_formatted + 1] = record
|
||||
|
||||
tot_row_in_page = tot_row_in_page + 1
|
||||
|
||||
if tot_row_in_page >= perPage then
|
||||
break
|
||||
end
|
||||
|
||||
::continue::
|
||||
end
|
||||
|
||||
local result = {}
|
||||
result["perPage"] = perPage
|
||||
result["currentPage"] = currentPage
|
||||
result["totalRows"] = total_rows
|
||||
result["data"] = res_formatted
|
||||
result["sort"] = {{sortColumn, sortOrder}}
|
||||
|
||||
print(json.encode(result, nil))
|
||||
|
|
@ -1,179 +1,76 @@
|
|||
--
|
||||
-- (C) 2013-24 - ntop.org
|
||||
-- (C) 2013-25 - ntop.org
|
||||
--
|
||||
|
||||
local dirs = ntop.getDirs()
|
||||
package.path = dirs.installdir .. "/scripts/lua/modules/?.lua;" .. package.path
|
||||
|
||||
require "lua_utils"
|
||||
|
||||
local template_utils = require("template_utils")
|
||||
local page_utils = require("page_utils")
|
||||
local ui_utils = require("ui_utils")
|
||||
local json = require("dkjson")
|
||||
|
||||
function getPageTitle()
|
||||
local t = i18n("network_stats.networks")
|
||||
|
||||
if not isEmptyString(_GET["version"]) then
|
||||
t = i18n("network_stats.networks_traffic_with_ipver",
|
||||
{networks = t, ipver = _GET["version"]})
|
||||
end
|
||||
|
||||
return t
|
||||
end
|
||||
|
||||
local base_url = ntop.getHttpPrefix() .. "/lua/network_stats.lua"
|
||||
local page_title = getPageTitle()
|
||||
local ifid = interface.getId()
|
||||
|
||||
sendHTTPContentTypeHeader('text/html')
|
||||
|
||||
page_utils.print_header_and_set_active_menu_entry(page_utils.menu_entries.networks)
|
||||
page_utils.print_header_and_set_active_menu_entry(
|
||||
page_utils.menu_entries.networks)
|
||||
|
||||
dofile(dirs.installdir .. "/scripts/lua/inc/menu.lua")
|
||||
|
||||
local base_url = ntop.getHttpPrefix().."/lua/network_stats.lua"
|
||||
|
||||
function getPageTitle()
|
||||
local t = i18n("network_stats.networks")
|
||||
|
||||
if not isEmptyString(_GET["version"]) then
|
||||
t = i18n("network_stats.networks_traffic_with_ipver",{networks=t,ipver=_GET["version"]})
|
||||
end
|
||||
|
||||
return t
|
||||
end
|
||||
|
||||
page_utils.print_page_title(getPageTitle())
|
||||
|
||||
page_utils.print_navbar(page_title, nav_url, {
|
||||
{
|
||||
active = true,
|
||||
label = page_title
|
||||
}
|
||||
})
|
||||
-- ##############################
|
||||
|
||||
if(ntop.isPro()) then
|
||||
local networks_stats = interface.getNetworksStats()
|
||||
local numNetworks = table.len(networks_stats)
|
||||
-- render network maps tile chart
|
||||
if (ntop.isPro()) then
|
||||
local networks_stats = interface.getNetworksStats()
|
||||
local numNetworks = table.len(networks_stats)
|
||||
|
||||
if(numNetworks > 0) then
|
||||
local template_utils = require "template_utils"
|
||||
|
||||
template_utils.render("pages/networks_map.html", {
|
||||
url = ntop.getHttpPrefix()..'/lua/pro/rest/v2/get/host/top/network_hosts_score.lua',
|
||||
prefix = ntop.getHttpPrefix()
|
||||
})
|
||||
end
|
||||
if (numNetworks > 0) then
|
||||
local template_utils = require "template_utils"
|
||||
|
||||
template_utils.render("pages/networks_map.html", {
|
||||
url = ntop.getHttpPrefix() ..
|
||||
'/lua/pro/rest/v2/get/host/top/network_hosts_score.lua',
|
||||
prefix = ntop.getHttpPrefix()
|
||||
})
|
||||
end
|
||||
end
|
||||
|
||||
-- ##############################
|
||||
|
||||
print [[
|
||||
<div id="table-network"></div>
|
||||
<script>
|
||||
var url_update = "]]
|
||||
print(getPageUrl(ntop.getHttpPrefix().."/lua/get_networks_data.lua"))
|
||||
print ('";')
|
||||
ntop.dumpFile(dirs.installdir .. "/httpdocs/inc/network_stats_id.inc")
|
||||
|
||||
print [[
|
||||
$("#table-network").datatable({
|
||||
title: "Network List",
|
||||
url: url_update,]]
|
||||
|
||||
print('title: "",\n')
|
||||
print ('rowCallback: function ( row ) { return network_table_setID(row); },')
|
||||
|
||||
-- Set the preference table
|
||||
preference = tablePreferences("rows_number",_GET["perPage"])
|
||||
if (preference ~= "") then print ('perPage: '..preference.. ",\n") end
|
||||
|
||||
-- Automatic default sorted. NB: the column must exist.
|
||||
print ('sort: [ ["' .. getDefaultTableSort("local_network") ..'","' .. getDefaultTableSortOrder("local_network").. '"] ],')
|
||||
-- render vue component
|
||||
|
||||
|
||||
print [[
|
||||
showPagination: true,
|
||||
columns: [
|
||||
{
|
||||
title: "Key",
|
||||
field: "key",
|
||||
hidden: true,
|
||||
css: {
|
||||
textAlign: 'center'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "]] print(i18n("network_stats.network_name")) print[[",
|
||||
field: "column_id",
|
||||
sortable: true,
|
||||
css: {
|
||||
textAlign: 'left'
|
||||
}
|
||||
},
|
||||
]]
|
||||
local context = {
|
||||
ifid = ifid,
|
||||
csrf = ntop.getRandomCSRFValue(),
|
||||
areTsEnabled = areInterfaceTimeseriesEnabled(ifid)
|
||||
}
|
||||
|
||||
print [[
|
||||
{
|
||||
title: "]] print(i18n("chart")) print[[",
|
||||
field: "column_chart",
|
||||
sortable: false,
|
||||
hidden: ]] print(ternary(areInterfaceTimeseriesEnabled(interface.getId()), "false", "true")) print[[,
|
||||
css: {
|
||||
textAlign: 'center'
|
||||
}
|
||||
local json_context = json.encode(context)
|
||||
|
||||
},
|
||||
{
|
||||
title: "]] print(i18n("hosts_stats.hosts")) print[[",
|
||||
field: "column_hosts",
|
||||
sortable: true,
|
||||
css: {
|
||||
textAlign: 'center'
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
title: "]] print(i18n("score")) print[[",
|
||||
field: "column_score",
|
||||
sortable: true,
|
||||
css: {
|
||||
textAlign: 'center'
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "]] print(i18n("host_score_ratio")) print[[",
|
||||
field: "column_host_score_ratio",
|
||||
sortable: false,
|
||||
css: {
|
||||
textAlign: 'center'
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "]] print(i18n("flow_details.alerted_flows")) print[[",
|
||||
field: "column_alerted_flows",
|
||||
sortable: true,
|
||||
css: {
|
||||
textAlign: 'center'
|
||||
},
|
||||
},
|
||||
]]
|
||||
|
||||
print [[
|
||||
{
|
||||
title: "]] print(i18n("breakdown")) print[[",
|
||||
field: "column_breakdown",
|
||||
sortable: false,
|
||||
css: {
|
||||
textAlign: 'center'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "]] print(i18n("throughput")) print[[",
|
||||
field: "column_thpt",
|
||||
sortable: true,
|
||||
css: {
|
||||
textAlign: 'right'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "]] print(i18n("traffic")) print[[",
|
||||
field: "column_traffic",
|
||||
sortable: true,
|
||||
css: {
|
||||
textAlign: 'right'
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
]]
|
||||
|
||||
print(ui_utils.render_notes({
|
||||
{content = i18n("network_stats.note_see_both_network_entries")},
|
||||
{content = i18n("network_stats.note_broader_network")}
|
||||
}, i18n("network_stats.note_overlapping_networks"), true))
|
||||
template_utils.render("pages/vue_page.template", {
|
||||
vue_page_name = "PageNetworksList",
|
||||
page_context = json_context
|
||||
})
|
||||
|
||||
dofile(dirs.installdir .. "/scripts/lua/inc/footer.lua")
|
||||
|
|
|
|||
58
scripts/lua/rest/v2/get/network/networks_stats.lua
Normal file
58
scripts/lua/rest/v2/get/network/networks_stats.lua
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
--
|
||||
-- (C) 2013-25 - ntop.org
|
||||
--
|
||||
|
||||
local dirs = ntop.getDirs()
|
||||
package.path = dirs.installdir .. "/scripts/lua/modules/?.lua;" .. package.path
|
||||
|
||||
require "lua_utils"
|
||||
local network_formatter = require "network_formatter"
|
||||
local rest_utils = require "rest_utils"
|
||||
local json = require("dkjson")
|
||||
|
||||
local res = {}
|
||||
local networks_stats = interface.getNetworksStats()
|
||||
|
||||
|
||||
for network_name, data in pairs(networks_stats) do
|
||||
local networkId = tonumber(data["network_id"])
|
||||
|
||||
-- compute score
|
||||
local score_as_client = tonumber(data["score.as_client"]) or 0
|
||||
local score_as_server = tonumber(data["score.as_server"]) or 0
|
||||
|
||||
-- score, alerted flows and hosts
|
||||
local network_score = (score_as_client + score_as_server) or 0
|
||||
local alerted_flows = data["alerted_flows"] or 0
|
||||
local num_alerted_flows = tonumber(alerted_flows["total"]) or 0
|
||||
local num_hosts = tonumber(data.num_hosts) or 0
|
||||
local hosts_score_ratio = network_score / num_hosts
|
||||
|
||||
-- traffic breakdown
|
||||
local bytes_sent = tonumber(data["bytes.sent"]) or 0
|
||||
local bytes_rcvd = tonumber(data["bytes.rcvd"]) or 0
|
||||
local total_bytes = bytes_sent + bytes_rcvd
|
||||
|
||||
local network_data = {
|
||||
networkId = networkId,
|
||||
networkName = network_name,
|
||||
hosts = num_hosts,
|
||||
score = network_score,
|
||||
hostsScoreRatio = hosts_score_ratio,
|
||||
alertedFlows = num_alerted_flows,
|
||||
|
||||
breakdown = {
|
||||
percentage_bytes_sent = (bytes_sent * 100) / total_bytes,
|
||||
percentage_bytes_rcvd = (bytes_rcvd * 100) / total_bytes
|
||||
},
|
||||
|
||||
bytes_sent = bytes_sent,
|
||||
bytes_rcvd = bytes_rcvd,
|
||||
throughput = tonumber(data.throughput_bps),
|
||||
traffic = total_bytes
|
||||
}
|
||||
|
||||
res[#res+1] = network_data
|
||||
end
|
||||
|
||||
rest_utils.answer(rest_utils.consts.success.ok, res)
|
||||
Loading…
Add table
Add a link
Reference in a new issue