mirror of
https://github.com/ntop/ntopng.git
synced 2026-04-30 07:59:35 +00:00
116 lines
3.2 KiB
Lua
116 lines
3.2 KiB
Lua
--
|
|
-- (C) 2013-20 - ntop.org
|
|
--
|
|
|
|
dirs = ntop.getDirs()
|
|
package.path = dirs.installdir .. "/scripts/lua/modules/?.lua;" .. package.path
|
|
|
|
require "lua_utils"
|
|
|
|
local page_utils = require("page_utils")
|
|
|
|
sendHTTPContentTypeHeader('text/html')
|
|
|
|
page_utils.set_active_menu_entry(page_utils.menu_entries.hosts_treemap)
|
|
|
|
dofile(dirs.installdir .. "/scripts/lua/inc/menu.lua")
|
|
|
|
interface.select(ifname)
|
|
local hosts_stats = interface.getHostsInfo()
|
|
local num = hosts_stats["numHosts"]
|
|
hosts_stats = hosts_stats["hosts"]
|
|
|
|
if(num > 0) then
|
|
print [[
|
|
|
|
<style>
|
|
|
|
|
|
.node {
|
|
border: solid 1px white;
|
|
font: 10px sans-serif;
|
|
line-height: 12px;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
text-indent: 2px;
|
|
}
|
|
|
|
</style>
|
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
|
|
|
<h2>]] print(i18n("tree_map.hosts_treemap")) print[[</H2>
|
|
<div id='chart'></div>
|
|
|
|
<span class="row-fluid marketing">
|
|
<div class="span11"> </div><div><small><A HREF="http://bl.ocks.org/mbostock/4063582"><i class="fas fa-question-sign fa-lg"></i></A></small></div>
|
|
</span>
|
|
<script>
|
|
|
|
var margin = {top: 0, right: 0, bottom: 0, left: 0},
|
|
width = 960 - margin.left - margin.right,
|
|
height = 500 - margin.top - margin.bottom;
|
|
|
|
var color = d3.scale.category20c();
|
|
|
|
var treemap = d3.layout.treemap()
|
|
.size([width, height])
|
|
.sticky(true)
|
|
.value(function(d) { return d.size; });
|
|
|
|
var div = d3.select("#chart").append("div")
|
|
.style("position", "relative")
|
|
.style("width", (width + margin.left + margin.right) + "px")
|
|
.style("height", (height + margin.top + margin.bottom) + "px")
|
|
.style("left", margin.left + "px")
|
|
.style("top", margin.top + "px");
|
|
|
|
d3.json("]]
|
|
print (ntop.getHttpPrefix())
|
|
print [[/lua/get_treemap.lua", function(error, root) {
|
|
var node = div.datum(root).selectAll(".node")
|
|
.data(treemap.nodes)
|
|
.enter().append("div")
|
|
.attr("class", "node")
|
|
.call(position)
|
|
.style("background", function(d) { return d.children ? color(d.name) : null; })
|
|
.html(function(d) {
|
|
if(d.children) return(null);
|
|
else {
|
|
if(d.name != "Other Hosts") {
|
|
return("<A HREF=\"]]
|
|
print (ntop.getHttpPrefix())
|
|
print [[/lua/host_details.lua?host="+d.name+"\">"+d.name+"</A>");
|
|
} else
|
|
return(d.name);
|
|
}
|
|
});
|
|
|
|
d3.selectAll("input").on("change", function change() {
|
|
var value = this.value === "count"
|
|
? function() { return 1; }
|
|
: function(d) { return d.size; };
|
|
|
|
node
|
|
.data(treemap.value(value).nodes)
|
|
.transition()
|
|
.duration(1500)
|
|
.call(position);
|
|
});
|
|
});
|
|
|
|
function position() {
|
|
this.style("left", function(d) { return d.x + "px"; })
|
|
.style("top", function(d) { return d.y + "px"; })
|
|
.style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; })
|
|
.style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; });
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
]]
|
|
else
|
|
print("<div class=\"alert alert-danger\"><img src=".. ntop.getHttpPrefix() .. "/img/warning.png> " .. i18n("no_results_found") .. "</div>")
|
|
end
|
|
|
|
dofile(dirs.installdir .. "/scripts/lua/inc/footer.lua")
|