diff --git a/Dockerfile b/Dockerfile index 18fe353..20a19ae 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,6 +1,7 @@ FROM node:16 # Create app directory WORKDIR /usr/src/app +ENV WEB_IP "$WEB_ADDRESS_INT" # Install app dependencies # A wildcard is used to ensure both package.json AND package-lock.json are copied # where available (npm@5+) diff --git a/README.md b/README.md index eb8f4b9..4a58478 100644 --- a/README.md +++ b/README.md @@ -49,11 +49,11 @@ docker run -p 3100:3100 -p 8999:8999 --name ntopngglobe -d dergeorg/ntopngglobe ```json { "location": { - "home": { - "lat": 48.1, - "lng": 16.3 + "home": { + "lat": 48.1, // must be set to lat of home wan ip --> https://www.maxmind.com/en/locate-my-ip-address + "lng": 16.3 // must be set to lng of home wan ip --> https://www.maxmind.com/en/locate-my-ip-address }, - "precision": 0 + "precision": 0 // how to round the decimal. 0 is no decimal }, "colors": { "loc": { @@ -91,8 +91,14 @@ docker run -p 3100:3100 -p 8999:8999 --name ntopngglobe -d dergeorg/ntopngglobe } }, "timer": { - "del": 30, - "refreshTimer": 1 + "del": 30, // deletes alerts older than 30 minutes + "refreshTimer": 1 // 1 --> refresh globe every 1 minute; 0 --> refresh globe on every new Data set + }, + "ips": { + "home": "192.168.1.", //Private home adress + "loopback": "127.0.0.1", + "server": "localhost:3100", //Server adress + "serverws": "localhost:8999" //websocket adress } } ``` diff --git a/app.js b/app.js index 5fd7daa..a5691fe 100644 --- a/app.js +++ b/app.js @@ -18,7 +18,9 @@ var usersRouter = require('./routes/users'); // view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'jade'); -app.use(cors()) +app.use(cors({ + origin: 'globe.dergeorg.at' +})) app.use(logger('dev')); app.use(express.json()); app.use(express.urlencoded({ extended: false })); diff --git a/model/globedata.js b/model/globedata.js index 7f2e677..8696488 100644 --- a/model/globedata.js +++ b/model/globedata.js @@ -16,7 +16,7 @@ async function addArc(src, dest, uid, src_name, dest_name){ var endLat = undefined; var endLng = undefined; if(!data.arc.some(x => x.src === src && x.dest === dest)) { - if (src.includes("192.168.1.") || src.includes("127.0.0.1")) { + if (src.includes(settings.ips.home) || src.includes("127.0.0.1")) { startLat = round(settings.location.home.lat, settings.location.precision) startLng = round(settings.location.home.lng, settings.location.precision) } else { diff --git a/public/conf/settings.json b/public/conf/settings.json index 1dca7d9..312f62c 100644 --- a/public/conf/settings.json +++ b/public/conf/settings.json @@ -44,5 +44,11 @@ "timer": { "del": 30, "refreshTimer": 1 + }, + "ips": { + "home": "192.168.1.", + "loopback": "127.0.0.1", + "server": "localhost:3100", + "serverws": "localhost:8999" } } \ No newline at end of file diff --git a/public/globe.html b/public/globe.html index d6e56db..9ca6e2e 100644 --- a/public/globe.html +++ b/public/globe.html @@ -80,77 +80,72 @@ 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( - { - 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)) + function componentDidMount() { + axios.get('/conf/settings.json').then(res => { + const settings = res.data; + var data = {}; + if ("WebSocket" in window) { + console.log("WebSocket is supported by your Browser!"); + const ws = new WebSocket('ws://'+settings.ips.server); + ws.onmessage = function (evt) { + var received_msg = evt.data; + componentDidMount() + }; + }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://"+settings.ips.server+"/display").then(res => { + data = res.data; + console.log(data) + ReactDOM.render( + { + axios.get("http://"+settings.ips.server+"/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://"+settings.ips.server+"/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()