164 lines
6.8 KiB
HTML
164 lines
6.8 KiB
HTML
<head>
|
|
<style> body {
|
|
margin: 0;
|
|
} </style>
|
|
|
|
<script src="/react.production.min.js"></script>
|
|
<!-- <script src="//unpkg.com/react/umd/react.production.min.js"></script>-->
|
|
<script src="/react-dom.production.min.js"></script>
|
|
<!-- <script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>-->
|
|
<!-- <script src="//unpkg.com/babel-standalone"></script>-->
|
|
<script src="/babel.min.js"></script>
|
|
|
|
<script src="/react-globe.js"></script>
|
|
<!-- <script src="//unpkg.com/react-globe.gl"></script>-->
|
|
<!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
|
|
<script src="/axios.min.js"></script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div id="globeViz"></div>
|
|
<script type="text/jsx">
|
|
function generateHoverText(txrx) {
|
|
var text = ""
|
|
txrx.forEach(i => {
|
|
text += i.src_name + " (" + i.src + ") -> " + i.dest_name + " (" + i.dest + ")<br>"
|
|
})
|
|
return text;
|
|
}
|
|
|
|
function generateClickText(item) {
|
|
return "uid: " + item.uid + " \nfirst_seen: " +
|
|
item.first_seen + " \nsrv_city_name: " +
|
|
item.srv_city_name + " \nip_version: " +
|
|
item.ip_version + " \naction: " +
|
|
item.action + " \npool_id: " +
|
|
item.pool_id + " \nsrv_continent_name: " +
|
|
item.srv_continent_name + " \nscore: " +
|
|
item.score + " \nentity_val: " +
|
|
item.entity_val + " \nvlan_id: " +
|
|
item.vlan_id + " \ncli2srv_bytes: " +
|
|
item.cli2srv_bytes + " \ncli_country_name: " +
|
|
item.cli_country_name + " \nentity_id: " +
|
|
item.entity_id + " \nsrv_asn: " +
|
|
item.srv_asn + " \nl7_proto: " +
|
|
item.l7_proto + " \nis_cli_attacker: " +
|
|
item.is_cli_attacker + " \nsrv_name: " +
|
|
item.srv_name + " \nsrv_ip: " +
|
|
item.srv_ip + " \nproto: " +
|
|
item.proto + " \njson: " +
|
|
item.json + " \nsrv_country_name: " +
|
|
item.srv_country_name + " \ncommunity_id: " +
|
|
item.community_id + " \nalert_id: " +
|
|
item.alert_id + " \nis_srv_attacker: " +
|
|
item.is_srv_attacker + " \nsrv_blacklisted: " +
|
|
item.srv_blacklisted + " \nalerts_map: " +
|
|
item.alerts_map + " \nsrv_os: " +
|
|
item.srv_os + " \ncli_localhost: " +
|
|
item.cli_localhost + " \ncli_asn: " +
|
|
item.cli_asn + " \nsrv2cli_packets: " +
|
|
item.srv2cli_packets + " \ncli2srv_packets: " +
|
|
item.cli2srv_packets + " \ntstamp: " +
|
|
item.tstamp + " \ncli_name: " +
|
|
item.cli_name + " \ncli_continent_name: " +
|
|
item.cli_continent_name + " \nsrv2cli_bytes: " +
|
|
item.srv2cli_bytes + " \nl7_cat: " +
|
|
item.l7_cat + " \nproto: " +
|
|
item.proto + " \nifid: " +
|
|
item.ifid + " \nobservation_point_id: " +
|
|
item.observation_point_id + " \nsrv_localhost: " +
|
|
item.srv_localhost + " \ncli_port: " +
|
|
item.cli_port + " \ncli_blacklisted: " +
|
|
item.cli_blacklisted + " \nis_flow_alert: " +
|
|
item.is_flow_alert + " \nsrv_port: " +
|
|
item.srv_port + " \nl7_master_proto: " +
|
|
item.l7_master_proto + " \nis_cli_victim: " +
|
|
item.is_cli_victim + " \ncli_ip: " +
|
|
item.cli_ip + " \ncli_city_name: " +
|
|
item.cli_city_name + " \ncli_os: " +
|
|
item.cli_os + " \nis_srv_vic " + item.is_srv_vic
|
|
}
|
|
|
|
function componentDidMount() {
|
|
var data = {};
|
|
if ("WebSocket" in window) {
|
|
console.log("WebSocket is supported by your Browser!");
|
|
const ws = new WebSocket('ws://localhost:8999');
|
|
ws.onopen = function () {
|
|
// Web Socket is connected, send data using send()
|
|
console.log("Message is sent...");
|
|
};
|
|
ws.onmessage = function (evt) {
|
|
var received_msg = evt.data;
|
|
console.log("Message is received...");
|
|
componentDidMount()
|
|
};
|
|
ws.onclose = function () {
|
|
// websocket is closed.
|
|
console.log("Connection is closed...");
|
|
};
|
|
}else {
|
|
// The browser doesn't support WebSocket
|
|
alert("WebSocket NOT supported by your Browser! A left click on the globe will refresh the data");
|
|
}
|
|
|
|
axios.get("http://localhost:3100/display").then(res => {
|
|
data = res.data;
|
|
console.log(data)
|
|
ReactDOM.render(
|
|
<Globe
|
|
onGlobeClick={() => {
|
|
axios.get("http://localhost:3100/display").then(res => {
|
|
data = res.data;
|
|
componentDidMount()
|
|
});
|
|
}}
|
|
globeImageUrl="/images/earth-night.jpg"
|
|
backgroundImageUrl="/images/night-sky.png"
|
|
backgroundColor={"#000011"}
|
|
// edges
|
|
arcsData={data.arc}
|
|
arcColor={(d) => [d.color[0], d.color[1]]}
|
|
arcDashLength={data.settings.sizes.globe.arcDashLength}
|
|
arcAltitudeAutoScale={data.settings.sizes.globe.arcAltitudeAutoScale}
|
|
arcDashGap={data.settings.sizes.globe.arcDashGap}
|
|
arcDashInitialGap={data.settings.sizes.globe.arcDashInitialGap}
|
|
arcDashAnimateTime={data.settings.sizes.globe.arcDashAnimateTime}
|
|
arcStroke={data.settings.sizes.globe.arcStroke}
|
|
arcLabel={(d) => generateHoverText(d.txrx)}
|
|
onArcClick={function (d) {
|
|
axios.get("http://localhost:3100/alert/" + d.uid).then(res => {
|
|
const resdata = res.data;
|
|
alert(generateClickText(resdata))
|
|
})
|
|
}}
|
|
//arcCircularResolution={64}
|
|
// arcLabel={() => "test"}
|
|
// labels
|
|
labelsData={data.loc}
|
|
labelLat={(d) => d.lat}
|
|
labelLng={(d) => d.lng}
|
|
labelText={(d) => d.name}
|
|
// labelSize={(d) => 0.5 + d.size}
|
|
labelSize={0}
|
|
labelDotRadius={0.4}
|
|
// labelDotRadius={(d) => 0.5 + d.size}
|
|
labelColor={(d) => d.color}
|
|
labelResolution={2}
|
|
enablePointerInteraction={true}
|
|
/>,
|
|
document.getElementById('globeViz')
|
|
);
|
|
}).catch(err => alert(err))
|
|
}
|
|
|
|
componentDidMount()
|
|
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
</script>
|
|
</body>
|