display of sensors on map

nicolas-f · Sep 1, 2023 · a140921 · a140921
1 parent 9812b3f
commit a140921
Show file tree

Hide file tree

Showing 74 changed files with 110 additions and 106 deletions.
diff --git a/.gitignore b/.gitignore
@@ -31,3 +31,4 @@ examples/*.ogg
 .env
 # openvpn server configuration
 services/ansible_openvpn/docker/openvpn-data
+services/ansible_openvpn/docker/dashboard/config.json
diff --git a/services/ansible_openvpn/docker/dashboard/README.md b/services/ansible_openvpn/docker/dashboard/README.md
@@ -1,7 +1,20 @@
-Derived from this work
-https://github.com/docker/awesome-compose/tree/c2f8036fd353dae457eba7b9b436bf3a1c85d937/flask
+# Dashboard website
 
-To test locally
+This frontend website is displaying the state and data of the sensor network.
+
+It is linked to an elastic-search instance that store and index the files
+generated by zero_*.py services.
+
+This website and the backend is easily deployed if you are using the docker 
+services described in [ansible_openvpn](../ansible_openvpn) folder.
+
+# Build and run image to container
+
+```shell
+sudo docker build ./ -t dashboard && sudo docker run -p "8080:80" -v ./app/:/home/dashboard/app/ dashboard
+```
+
+Then open localhost:8080 in browser
+
+Without having to rebuild the image or restarting the container, all changes made in files will be automatically applied
 
-docker build -t flasktest .
-docker run --name flasktest -p 8000:8000 flasktest
diff --git a/services/ansible_openvpn/docker/dashboard/app/config.json b/services/ansible_openvpn/docker/dashboard/app/config.json
@@ -0,0 +1,8 @@
+{
+  "id": "hKUAUIoBOM9IQ1Kp18_2",
+  "name": "python2",
+  "api_key": "Qk77qq1AR3WxkwbuQw_Jcw",
+  "encoded": "aEtVQVVJb0JPTTlJUTFLcDE4XzI6UWs3N3FxMUFSM1d4a3didVF3X0pjdw==",
+  "url": "https://172.20.0.3:9200",
+  "verify_certs": false
+}
diff --git a/services/ansible_openvpn/docker/dashboard/app/fonts/fontawesome-webfont.ttf b/services/ansible_openvpn/docker/dashboard/app/fonts/fontawesome-webfont.ttf
diff --git a/services/ansible_openvpn/docker/dashboard/app/fonts/fontawesome-webfont.woff b/services/ansible_openvpn/docker/dashboard/app/fonts/fontawesome-webfont.woff
diff --git a/services/ansible_openvpn/docker/dashboard/app/fonts/fontawesome-webfont.woff2 b/services/ansible_openvpn/docker/dashboard/app/fonts/fontawesome-webfont.woff2
diff --git a/services/ansible_openvpn/docker/dashboard/app/main.py b/services/ansible_openvpn/docker/dashboard/app/main.py
@@ -27,23 +27,44 @@
 #  CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
 #  OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 #  OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-
-from fastapi import FastAPI
+from fastapi import FastAPI, Request
 from fastapi.responses import HTMLResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+import json
+import os
+from elasticsearch import Elasticsearch
+from elasticsearch.helpers import streaming_bulk
+import elasticsearch.helpers
 
 app = FastAPI()
 
+app.mount("/static", StaticFiles(directory="app/static"), name="static")
+
+app.mount("/fonts", StaticFiles(directory="app/fonts"), name="fonts")
+
+templates = Jinja2Templates(directory="app/templates")
+
+if not os.path.exists("app/config.json"):
+    raise Exception("Configuration file not found " +
+                    os.path.abspath("app/config.json"))
+configuration = json.load(open("app/config.json", "r"))
+
+client = Elasticsearch(
+    configuration.get("url", "https://es01:9200"),
+    api_key=(configuration["id"], configuration["api_key"]),
+    verify_certs=configuration.get("verify_certs", True), timeout=60
+)
+
+
+@app.get("/api/sensor_position")
+async def get_sensor_position(request: Request):
+    post_data = templates.get_template("query_sensor_list.json").render()
+    resp = client.search(index="sensor_location_*", query=post_data)
+    return resp
 
 @app.get('/', response_class=HTMLResponse)
-async def home():
-    return """
-<!doctype html>
-<html>
-  <head>
-    <title>NoiseSensor dashboard default page</title>
-  </head>
-  <body>
-    <p>Please run the Ansible playbook named deploy_elastic_web_dashboard.yml</p>
-  </body>
-</html>"""
+async def home(request: Request):
+    return templates.TemplateResponse("status.html",
+                                      context={"request": request})
 
diff --git a/...website_dashboard/app/static/d3.v5.min.js → .../docker/dashboard/app/static/d3.v5.min.js b/...website_dashboard/app/static/d3.v5.min.js → .../docker/dashboard/app/static/d3.v5.min.js
diff --git a/..._dashboard/app/static/daterangepicker.css → .../dashboard/app/static/daterangepicker.css b/..._dashboard/app/static/daterangepicker.css → .../dashboard/app/static/daterangepicker.css
diff --git a/...shboard/app/static/daterangepicker.min.js → ...shboard/app/static/daterangepicker.min.js b/...shboard/app/static/daterangepicker.min.js → ...shboard/app/static/daterangepicker.min.js
diff --git a/...dashboard/app/static/font-awesome.min.css → ...dashboard/app/static/font-awesome.min.css b/...dashboard/app/static/font-awesome.min.css → ...dashboard/app/static/font-awesome.min.css
diff --git a/...website_dashboard/app/static/forge.min.js → .../docker/dashboard/app/static/forge.min.js b/...website_dashboard/app/static/forge.min.js → .../docker/dashboard/app/static/forge.min.js
diff --git a/...ite_dashboard/app/static/forge.min.js.map → ...ker/dashboard/app/static/forge.min.js.map b/...ite_dashboard/app/static/forge.min.js.map → ...ker/dashboard/app/static/forge.min.js.map
diff --git a/...es/website_dashboard/app/static/forms.css → ...vpn/docker/dashboard/app/static/forms.css b/...es/website_dashboard/app/static/forms.css → ...vpn/docker/dashboard/app/static/forms.css
diff --git a/...ashboard/app/static/handsontable.full.css → ...ashboard/app/static/handsontable.full.css b/...ashboard/app/static/handsontable.full.css → ...ashboard/app/static/handsontable.full.css
diff --git a/...dashboard/app/static/handsontable.full.js → ...dashboard/app/static/handsontable.full.js b/...dashboard/app/static/handsontable.full.js → ...dashboard/app/static/handsontable.full.js
diff --git a/..._dashboard/app/static/handsontable.js.map → .../dashboard/app/static/handsontable.js.map b/..._dashboard/app/static/handsontable.js.map → .../dashboard/app/static/handsontable.js.map
diff --git a/...dashboard/app/static/handsontable.min.css → ...dashboard/app/static/handsontable.min.css b/...dashboard/app/static/handsontable.min.css → ...dashboard/app/static/handsontable.min.css
diff --git a/..._dashboard/app/static/handsontable.min.js → .../dashboard/app/static/handsontable.min.js b/..._dashboard/app/static/handsontable.min.js → .../dashboard/app/static/handsontable.min.js
diff --git a/...ebsite_dashboard/app/static/jquery.min.js → ...docker/dashboard/app/static/jquery.min.js b/...ebsite_dashboard/app/static/jquery.min.js → ...docker/dashboard/app/static/jquery.min.js
diff --git a/...p/static/leaflet/L.Control.Locate.min.css → ...p/static/leaflet/L.Control.Locate.min.css b/...p/static/leaflet/L.Control.Locate.min.css → ...p/static/leaflet/L.Control.Locate.min.css
diff --git a/...atic/leaflet/L.Control.Locate.min.css.map → ...atic/leaflet/L.Control.Locate.min.css.map b/...atic/leaflet/L.Control.Locate.min.css.map → ...atic/leaflet/L.Control.Locate.min.css.map
diff --git a/...pp/static/leaflet/L.Control.Locate.min.js → ...pp/static/leaflet/L.Control.Locate.min.js b/...pp/static/leaflet/L.Control.Locate.min.js → ...pp/static/leaflet/L.Control.Locate.min.js
diff --git a/...tatic/leaflet/L.Control.Locate.min.js.map → ...tatic/leaflet/L.Control.Locate.min.js.map b/...tatic/leaflet/L.Control.Locate.min.js.map → ...tatic/leaflet/L.Control.Locate.min.js.map
diff --git a/...d/app/static/leaflet/images/layers-2x.png → ...d/app/static/leaflet/images/layers-2x.png b/...d/app/static/leaflet/images/layers-2x.png → ...d/app/static/leaflet/images/layers-2x.png
diff --git a/...oard/app/static/leaflet/images/layers.png → ...oard/app/static/leaflet/images/layers.png b/...oard/app/static/leaflet/images/layers.png → ...oard/app/static/leaflet/images/layers.png
diff --git a/.../static/leaflet/images/marker-icon-2x.png → .../static/leaflet/images/marker-icon-2x.png b/.../static/leaflet/images/marker-icon-2x.png → .../static/leaflet/images/marker-icon-2x.png
diff --git a/...app/static/leaflet/images/marker-icon.png → ...app/static/leaflet/images/marker-icon.png b/...app/static/leaflet/images/marker-icon.png → ...app/static/leaflet/images/marker-icon.png
diff --git a/...p/static/leaflet/images/marker-shadow.png → ...p/static/leaflet/images/marker-shadow.png b/...p/static/leaflet/images/marker-shadow.png → ...p/static/leaflet/images/marker-shadow.png
diff --git a/...tic/leaflet/img/cabinet-icon-2x-green.png → ...tic/leaflet/img/cabinet-icon-2x-green.png b/...tic/leaflet/img/cabinet-icon-2x-green.png → ...tic/leaflet/img/cabinet-icon-2x-green.png
diff --git a/...tatic/leaflet/img/cabinet-icon-2x-red.png → ...tatic/leaflet/img/cabinet-icon-2x-red.png b/...tatic/leaflet/img/cabinet-icon-2x-red.png → ...tatic/leaflet/img/cabinet-icon-2x-red.png
diff --git a/...ic/leaflet/img/cabinet-icon-2x-yellow.png → ...ic/leaflet/img/cabinet-icon-2x-yellow.png b/...ic/leaflet/img/cabinet-icon-2x-yellow.png → ...ic/leaflet/img/cabinet-icon-2x-yellow.png
diff --git a/...hboard/app/static/leaflet/img/cabinet.svg → ...hboard/app/static/leaflet/img/cabinet.svg b/...hboard/app/static/leaflet/img/cabinet.svg → ...hboard/app/static/leaflet/img/cabinet.svg
diff --git a/...atic/leaflet/img/marker-icon-2x-black.png → ...atic/leaflet/img/marker-icon-2x-black.png b/...atic/leaflet/img/marker-icon-2x-black.png → ...atic/leaflet/img/marker-icon-2x-black.png
diff --git a/...tatic/leaflet/img/marker-icon-2x-blue.png → ...tatic/leaflet/img/marker-icon-2x-blue.png b/...tatic/leaflet/img/marker-icon-2x-blue.png → ...tatic/leaflet/img/marker-icon-2x-blue.png
diff --git a/...atic/leaflet/img/marker-icon-2x-green.png → ...atic/leaflet/img/marker-icon-2x-green.png b/...atic/leaflet/img/marker-icon-2x-green.png → ...atic/leaflet/img/marker-icon-2x-green.png
diff --git a/...tatic/leaflet/img/marker-icon-2x-grey.png → ...tatic/leaflet/img/marker-icon-2x-grey.png b/...tatic/leaflet/img/marker-icon-2x-grey.png → ...tatic/leaflet/img/marker-icon-2x-grey.png
diff --git a/...tic/leaflet/img/marker-icon-2x-orange.png → ...tic/leaflet/img/marker-icon-2x-orange.png b/...tic/leaflet/img/marker-icon-2x-orange.png → ...tic/leaflet/img/marker-icon-2x-orange.png
diff --git a/...static/leaflet/img/marker-icon-2x-red.png → ...static/leaflet/img/marker-icon-2x-red.png b/...static/leaflet/img/marker-icon-2x-red.png → ...static/leaflet/img/marker-icon-2x-red.png
diff --git a/...tic/leaflet/img/marker-icon-2x-violet.png → ...tic/leaflet/img/marker-icon-2x-violet.png b/...tic/leaflet/img/marker-icon-2x-violet.png → ...tic/leaflet/img/marker-icon-2x-violet.png
diff --git a/...tic/leaflet/img/marker-icon-2x-yellow.png → ...tic/leaflet/img/marker-icon-2x-yellow.png b/...tic/leaflet/img/marker-icon-2x-yellow.png → ...tic/leaflet/img/marker-icon-2x-yellow.png
diff --git a/.../static/leaflet/img/marker-icon-black.png → .../static/leaflet/img/marker-icon-black.png b/.../static/leaflet/img/marker-icon-black.png → .../static/leaflet/img/marker-icon-black.png
diff --git a/...p/static/leaflet/img/marker-icon-blue.png → ...p/static/leaflet/img/marker-icon-blue.png b/...p/static/leaflet/img/marker-icon-blue.png → ...p/static/leaflet/img/marker-icon-blue.png
diff --git a/.../static/leaflet/img/marker-icon-green.png → .../static/leaflet/img/marker-icon-green.png b/.../static/leaflet/img/marker-icon-green.png → .../static/leaflet/img/marker-icon-green.png
diff --git a/...p/static/leaflet/img/marker-icon-grey.png → ...p/static/leaflet/img/marker-icon-grey.png b/...p/static/leaflet/img/marker-icon-grey.png → ...p/static/leaflet/img/marker-icon-grey.png
diff --git a/...static/leaflet/img/marker-icon-orange.png → ...static/leaflet/img/marker-icon-orange.png b/...static/leaflet/img/marker-icon-orange.png → ...static/leaflet/img/marker-icon-orange.png
diff --git a/...pp/static/leaflet/img/marker-icon-red.png → ...pp/static/leaflet/img/marker-icon-red.png b/...pp/static/leaflet/img/marker-icon-red.png → ...pp/static/leaflet/img/marker-icon-red.png
diff --git a/...static/leaflet/img/marker-icon-violet.png → ...static/leaflet/img/marker-icon-violet.png b/...static/leaflet/img/marker-icon-violet.png → ...static/leaflet/img/marker-icon-violet.png
diff --git a/...static/leaflet/img/marker-icon-yellow.png → ...static/leaflet/img/marker-icon-yellow.png b/...static/leaflet/img/marker-icon-yellow.png → ...static/leaflet/img/marker-icon-yellow.png
diff --git a/.../app/static/leaflet/img/marker-shadow.png → .../app/static/leaflet/img/marker-shadow.png b/.../app/static/leaflet/img/marker-shadow.png → .../app/static/leaflet/img/marker-shadow.png
diff --git a/...p/static/leaflet/leaflet-color-markers.js → ...p/static/leaflet/leaflet-color-markers.js b/...p/static/leaflet/leaflet-color-markers.js → ...p/static/leaflet/leaflet-color-markers.js
diff --git a/...ard/app/static/leaflet/leaflet-src.esm.js → ...ard/app/static/leaflet/leaflet-src.esm.js b/...ard/app/static/leaflet/leaflet-src.esm.js → ...ard/app/static/leaflet/leaflet-src.esm.js
diff --git a/...app/static/leaflet/leaflet-src.esm.js.map → ...app/static/leaflet/leaflet-src.esm.js.map b/...app/static/leaflet/leaflet-src.esm.js.map → ...app/static/leaflet/leaflet-src.esm.js.map
diff --git a/...shboard/app/static/leaflet/leaflet-src.js → ...shboard/app/static/leaflet/leaflet-src.js b/...shboard/app/static/leaflet/leaflet-src.js → ...shboard/app/static/leaflet/leaflet-src.js
diff --git a/...ard/app/static/leaflet/leaflet-src.js.map → ...ard/app/static/leaflet/leaflet-src.js.map b/...ard/app/static/leaflet/leaflet-src.js.map → ...ard/app/static/leaflet/leaflet-src.js.map
diff --git a/..._dashboard/app/static/leaflet/leaflet.css → .../dashboard/app/static/leaflet/leaflet.css b/..._dashboard/app/static/leaflet/leaflet.css → .../dashboard/app/static/leaflet/leaflet.css
diff --git a/...e_dashboard/app/static/leaflet/leaflet.js → ...r/dashboard/app/static/leaflet/leaflet.js b/...e_dashboard/app/static/leaflet/leaflet.js → ...r/dashboard/app/static/leaflet/leaflet.js
diff --git a/...shboard/app/static/leaflet/leaflet.js.map → ...shboard/app/static/leaflet/leaflet.js.map b/...shboard/app/static/leaflet/leaflet.js.map → ...shboard/app/static/leaflet/leaflet.js.map
diff --git a/...ebsite_dashboard/app/static/moment.min.js → ...docker/dashboard/app/static/moment.min.js b/...ebsite_dashboard/app/static/moment.min.js → ...docker/dashboard/app/static/moment.min.js
diff --git a/..._dashboard/app/static/placeholders.min.js → .../dashboard/app/static/placeholders.min.js b/..._dashboard/app/static/placeholders.min.js → .../dashboard/app/static/placeholders.min.js
diff --git a/...s/website_dashboard/app/static/status.css → ...pn/docker/dashboard/app/static/status.css b/...s/website_dashboard/app/static/status.css → ...pn/docker/dashboard/app/static/status.css
diff --git a/...es/website_dashboard/app/static/status.js → ...vpn/docker/dashboard/app/static/status.js b/...es/website_dashboard/app/static/status.js → ...vpn/docker/dashboard/app/static/status.js
@@ -77,19 +77,19 @@ var lmap = L.map('mapid').setView([47.7456, -3.3687], 16);
 var sensors = L.layerGroup();
 var routers = L.layerGroup();
 
-L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
+L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1Ijoibmljb2xhcy1mIiwiYSI6ImNsbTBhMTkxMTE3ODkzZHA2ZGM0NWVhb3EifQ.XLAxFMiFQD1VomPnHjcFAA', {
     maxZoom: 18,
     attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
         '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
         'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
-    id: 'mapbox.streets'
+    id: 'streets-v11'
 }).addTo(lmap);
 
 sensors.addTo(lmap);
 routers.addTo(lmap);
 
-getStations(lmap, sensors);
-getRouters(lmap, routers);
+//getStations(lmap, sensors);
+//getRouters(lmap, routers);
 
 var legend = L.control({position: 'bottomright'});
 

diff --git a/...ebsite_dashboard/app/templates/query.json → ...docker/dashboard/app/templates/query.json b/...ebsite_dashboard/app/templates/query.json → ...docker/dashboard/app/templates/query.json
diff --git a/services/ansible_openvpn/docker/dashboard/app/templates/query_sensor_list.json b/services/ansible_openvpn/docker/dashboard/app/templates/query_sensor_list.json
@@ -0,0 +1,39 @@
+{
+  "size": 0,
+  "fields": [
+    "TPV.lat",
+    "TPV.lon",
+    "hwa",
+    "date"
+  ],
+  "aggs": {
+    "group": {
+      "terms": {
+        "field": "hwa.keyword",
+        "size": 200
+      },
+      "aggs": {
+        "results_without_mb_id": {
+          "filter": {
+            "exists": {
+              "field": "TPV.lat"
+            }
+          }
+        },
+        "group_docs": {
+          "top_hits": {
+            "size": 1,
+            "_source": false,
+            "sort": [
+              {
+                "date": {
+                  "order": "desc"
+                }
+              }
+            ]
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/.../templates/query_sensor_record_count.json → .../templates/query_sensor_record_count.json b/.../templates/query_sensor_record_count.json → .../templates/query_sensor_record_count.json
diff --git a/...bsite_dashboard/app/templates/status.html → ...ocker/dashboard/app/templates/status.html b/...bsite_dashboard/app/templates/status.html → ...ocker/dashboard/app/templates/status.html
@@ -2,6 +2,7 @@
 <meta charset="utf-8">
 <html>
 <head>
+    <title>Live sensors map</title>
     <link rel="stylesheet" type="text/css" href="static/status.css"/>
     <script type="text/javascript" src="static/jquery.min.js"></script>
     <script type="text/javascript" src="static/moment.min.js"></script>

diff --git a/services/ansible_openvpn/docker/dashboard/requirements.txt b/services/ansible_openvpn/docker/dashboard/requirements.txt
@@ -1,2 +1,4 @@
 fastapi>=0.103.0,<0.104.0
 uvicorn>=0.23.2,<0.24
+Jinja2>=3.1.2,<3.2.0
+elasticsearch>=8.9.0,<8.10.0
diff --git a/services/ansible_openvpn/playbooks/deploy_elastic_web_dashboard.yml b/services/ansible_openvpn/playbooks/deploy_elastic_web_dashboard.yml
@@ -8,10 +8,10 @@
   tasks:
   - name: Create configuration file for website
     copy:
-      content: "[ELASTIC_SEARCH]\nURL = es01\nAPI_ID = {{ api_key_id }}\nAPI_KEY =  {{ api_key }}\n"
+      content: "{\"id\":\"{{ api_key_id }}\",\"name\":\"python\",\"api_key\":\"Qk77qq1AR3WxkwbuQw_Jcw\",\"es_url\":\"https://es01\",\"verify_certs\":false}"
       dest: '{{ destination }}appconfig.ini'
   - name: Website synchronization
     ansible.posix.synchronize:
       mode: 'pull'
-      src: '{{ playbook_dir }}../../website_dashboard'
+      src: '{{ playbook_dir }}../docker/dashboard'
       dest: '{{ destination }}'
diff --git a/services/ansible_openvpn/playbooks/files/scripts_elasticsearch/requirements.txt b/services/ansible_openvpn/playbooks/files/scripts_elasticsearch/requirements.txt
@@ -1 +1 @@
-elasticsearch==8.9.0
+elasticsearch>=8.9.0,<8.10.0
diff --git a/services/website_dashboard/README.md b/services/website_dashboard/README.md
diff --git a/services/website_dashboard/app/__init__.py b/services/website_dashboard/app/__init__.py
diff --git a/services/website_dashboard/app/main.py b/services/website_dashboard/app/main.py
diff --git a/services/website_dashboard/app/templates/query_sensor_list.json b/services/website_dashboard/app/templates/query_sensor_list.json
diff --git a/services/website_dashboard/requirements.txt b/services/website_dashboard/requirements.txt