hover info + clickk to reload + websocket reload + readme
This commit is contained in:
@ -1,60 +1,163 @@
|
||||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
<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.js"></script>
|
||||
<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>
|
||||
|
||||
<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">
|
||||
// Gen random data
|
||||
var data = {};
|
||||
axios.get("http://localhost:3100/alerts").then(res => {
|
||||
data = res.data;
|
||||
console.log(data)
|
||||
ReactDOM.render(
|
||||
<Globe
|
||||
globeImageUrl="/images/earth-night.jpg"
|
||||
backgroundImageUrl="/images/night-sky.png"
|
||||
// edges
|
||||
arcsData={data.arc}
|
||||
arcColor={(d) => [d.color[0], d.color[1]]}
|
||||
arcDashLength={(d) => d.stroke - 0.1 + 0.3}
|
||||
// arcDashLength={(d) => d.stroke - 0.1}
|
||||
arcAltitudeAutoScale={0.5}
|
||||
arcDashGap={(d) => 0.1 + (1 - (d.stroke - 0.1))}
|
||||
arcDashAnimateTime={(d) => (1.1 - d.stroke) * 5000 + 2000}
|
||||
arcStroke={0.4}
|
||||
//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))
|
||||
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>
|
||||
</body>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user