mirror of
https://github.com/ntop/ntopng.git
synced 2026-05-03 01:10:10 +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,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")
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue