From 3d6a6ea6fbbab73d53fb7d6a28cb8a36fc4b6acf Mon Sep 17 00:00:00 2001
From: Jens Reimann <jreimann@redhat.com>
Date: Fri, 19 Aug 2022 18:35:57 +0200
Subject: [PATCH] feat: add the debugger as container

---
 Dockerfile                              |  17 +++
 Makefile                                |   1 +
 debugger/nginx.conf                     |  53 +++++++
 debugger/nginx.sh                       |  39 +++++
 examples/30_notifications/debugger.html | 182 +++++++++++++-----------
 5 files changed, 212 insertions(+), 80 deletions(-)
 create mode 100644 debugger/nginx.conf
 create mode 100644 debugger/nginx.sh

diff --git a/Dockerfile b/Dockerfile
index 2afce7d..73cfa9e 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -69,3 +69,20 @@ LABEL org.opencontainers.image.source="https://github.com/drogue-iot/drogue-dopp
 COPY --from=builder /output/drogue-doppelgaenger-waker /
 ENTRYPOINT [ "/drogue-doppelgaenger-waker" ]
 
+FROM ghcr.io/drogue-iot/frontend-base:0.2.0 as debugger
+
+LABEL org.opencontainers.image.source="https://github.com/drogue-iot/drogue-doppelgaenger"
+
+RUN true \
+    && mkdir /public \
+    && mkdir /endpoints
+
+COPY debugger/nginx.conf /etc/nginx/nginx.conf
+COPY debugger/nginx.sh /nginx.sh
+
+RUN chmod a+x /nginx.sh
+CMD ["/nginx.sh"]
+
+# copy debugger files
+COPY examples/30_notifications/debugger.html /public/index.html
+COPY examples/30_notifications/thing.js /public/thing.js
diff --git a/Makefile b/Makefile
index 15f88d7..b3ec30a 100644
--- a/Makefile
+++ b/Makefile
@@ -32,6 +32,7 @@ MODULES= \
 	server \
 	database-migration \
 	waker \
+	debugger \
 
 
 #
diff --git a/debugger/nginx.conf b/debugger/nginx.conf
new file mode 100644
index 0000000..06db46f
--- /dev/null
+++ b/debugger/nginx.conf
@@ -0,0 +1,53 @@
+# For more information on configuration, see:
+#   * Official English Documentation: http://nginx.org/en/docs/
+#   * Official Russian Documentation: http://nginx.org/ru/docs/
+
+worker_processes auto;
+error_log /dev/stdout info;
+
+# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
+include /usr/share/nginx/modules/*.conf;
+
+events {
+    worker_connections 1024;
+}
+
+http {
+    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                      '$status $body_bytes_sent "$http_referer" '
+                      '"$http_user_agent" "$http_x_forwarded_for"';
+
+    access_log  /dev/stdout  main;
+
+    sendfile            on;
+    tcp_nopush          on;
+    tcp_nodelay         on;
+    keepalive_timeout   65;
+    types_hash_max_size 2048;
+
+    include             /etc/nginx/mime.types;
+    default_type        application/octet-stream;
+
+    # Load modular configuration files from the /etc/nginx/conf.d directory.
+    # See http://nginx.org/en/docs/ngx_core_module.html#include
+    # for more information.
+    include /etc/nginx/conf.d/*.conf;
+
+    server {
+        listen       8080;
+        server_name  _;
+        root   /public;
+        absolute_redirect off;
+
+        error_page 404 =200 /index.html;
+
+        location /endpoints/ {
+            alias /endpoints/;
+        }
+
+        location / {
+            index index.html;
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/debugger/nginx.sh b/debugger/nginx.sh
new file mode 100644
index 0000000..5d52b0f
--- /dev/null
+++ b/debugger/nginx.sh
@@ -0,0 +1,39 @@
+#!/usr/bin/env bash
+
+set -e
+set -x
+set -o pipefail
+
+: "${API_URL:=http://localhost:8011}"
+
+: "${KEYCLOAK_URL:=http://localhost:8012}"
+: "${REALM:=doppelgaenger}"
+: "${CLIENT_ID:=api}"
+
+: "${BACKEND_JSON:="{}"}"
+: "${BACKEND_JSON_FILE:=/etc/config/login/backend.json}"
+
+echo "Setting backend information:"
+
+if [ -f "$BACKEND_JSON_FILE" ]; then
+    echo "Using base config from file: $BACKEND_JSON_FILE"
+    BACKEND_JSON="$(cat "$BACKEND_JSON_FILE")"
+fi
+
+# inject backend URL
+echo "$BACKEND_JSON" | jq --arg value "$API_URL" '. + {api: $value}' | tee /endpoints/backend.json
+
+# inject oauth2 information
+jq --arg value "$CLIENT_ID" '.keycloak += {clientId: $value}' < /endpoints/backend.json | tee /endpoints/backend.json.tmp
+mv /endpoints/backend.json.tmp /endpoints/backend.json
+jq --arg value "$KEYCLOAK_URL" '.keycloak += {url: $value}' < /endpoints/backend.json | tee /endpoints/backend.json.tmp
+mv /endpoints/backend.json.tmp /endpoints/backend.json
+jq --arg value "$REALM" '.keycloak += {realm: $value}' < /endpoints/backend.json | tee /endpoints/backend.json.tmp
+mv /endpoints/backend.json.tmp /endpoints/backend.json
+
+echo "Final backend information:"
+echo "---"
+cat /endpoints/backend.json
+echo "---"
+
+exec /usr/sbin/nginx -g "daemon off;"
diff --git a/examples/30_notifications/debugger.html b/examples/30_notifications/debugger.html
index 3492995..aad3d44 100644
--- a/examples/30_notifications/debugger.html
+++ b/examples/30_notifications/debugger.html
@@ -87,103 +87,125 @@
 
 <script src="thing.js"></script>
 
-<script defer>
+<script>
+    function init(backend) {
+        const keycloak = new Keycloak(backend.keycloak);
+
+        const api = new Api(backend.api, "default", {
+            tokenProvider: () => keycloak
+                .updateToken(30)
+                .then(() => keycloak.token)
+        });
+        let selectedThing = null;
+        let showDesired = false;
+
+        $('#showDesiredCheck').change(function () {
+            console.log(this.checked);
+            setDesired(this.checked);
+        });
 
-    const keycloak = new Keycloak({
-        url: 'http://localhost:8081',
-        realm: 'doppelgaenger',
-        clientId: 'api',
-    });
-
-    const api = new Api("http://localhost:8080", "default", {
-        tokenProvider: () => keycloak
-            .updateToken(30)
-            .then(() => keycloak.token)
-    });
-    let selectedThing = null;
-    let showDesired = false;
-
-    $('#showDesiredCheck').change(function () {
-        console.log(this.checked);
-        setDesired(this.checked);
-    });
-
-    function setDesired(flag) {
-        showDesired = flag;
-        if (selectedThing) {
-            selectedThing.options.showDesired = showDesired;
-            selectedThing.render();
+        function setDesired(flag) {
+            showDesired = flag;
+            if (selectedThing) {
+                selectedThing.options.showDesired = showDesired;
+                selectedThing.render();
+            }
         }
-    }
 
-    function showThing(thing) {
+        function showThing(thing) {
 
-        if (thing === "") {
-            return;
-        }
+            if (thing === "") {
+                return;
+            }
+
+            let card = $('#selected-thing');
+            card.find('.card-header .drogue-device-name').html($(`<code>${thing}</code>`));
 
-        let card = $('#selected-thing');
-        card.find('.card-header .drogue-device-name').html($(`<code>${thing}</code>`));
+            if (selectedThing) {
+                selectedThing.dispose();
+                selectedThing.thing.dispose();
+                selectedThing = null;
+            }
 
-        if (selectedThing) {
-            selectedThing.dispose();
-            selectedThing.thing.dispose();
-            selectedThing = null;
+            selectedThing = new ThingCard(new Thing(api, thing), card, {
+                showTimestamps: true,
+                showDesired,
+                controlDesired: true,
+                refClicked: (ref) => {
+                    showThing(ref);
+                }
+            });
         }
 
-        selectedThing = new ThingCard(new Thing(api, thing), card, {
-            showTimestamps: true,
-            showDesired,
-            controlDesired: true,
-            refClicked: (ref) => {
-                showThing(ref);
+        $('#btn-lookup').on('click', e => {
+            showThing($('#lookup-thing-name').val());
+            $(e).blur();
+        });
+        $('#form-lookup').on('submit', e => {
+            e.preventDefault();
+            const ele = $('#lookup-thing-name');
+            showThing(ele.val());
+            ele.blur();
+        });
+        $('#lookup-thing-name').on('keydown', e => {
+            e.stopPropagation();
+        });
+        $('body').on('keydown', e => {
+            if (e.key === '/') {
+                e.preventDefault();
+                $('#lookup-thing-name').focus().val("");
             }
         });
-    }
 
-    $('#btn-lookup').on('click', e => {
-        showThing($('#lookup-thing-name').val());
-        $(e).blur();
-    });
-    $('#form-lookup').on('submit', e => {
-        e.preventDefault();
-        const ele = $('#lookup-thing-name');
-        showThing(ele.val());
-        ele.blur();
-    });
-    $('#lookup-thing-name').on('keydown', e => {
-        e.stopPropagation();
-    });
-    $('body').on('keydown', e => {
-        if (e.key === '/') {
-            e.preventDefault();
-            $('#lookup-thing-name').focus().val("");
+        function initUi() {
+            const selected = window.location.hash;
+            console.log("Pre-selected: ", selected);
+            if (selected !== undefined && selected !== "") {
+                showThing(selected.substring(1));
+            } else {
+                showThing("/");
+            }
         }
-    });
-
-    function initUi() {
-        const selected = window.location.hash;
-        console.log("Pre-selected: ", selected);
-        if (selected !== undefined && selected !== "") {
-            showThing(selected.substring(1));
-        } else {
-            showThing("/");
+
+        function initKeycloak() {
+            keycloak.init({onLoad: 'login-required'})
+                .then((authenticated) => {
+                    if (authenticated) {
+                        initUi(keycloak);
+                    }
+                })
+                .catch(() => {
+                    console.error("Failed to initialize")
+                });
         }
+
+        initKeycloak();
     }
+</script>
+
+<script defer>
 
-    function initKeycloak() {
-        keycloak.init({onLoad: 'login-required'})
-            .then((authenticated) => {
-                if (authenticated) {
-                    initUi(keycloak);
+    fetch('/endpoints/backend.json')
+        .then((response) => {
+            if (!response.ok) {
+                throw new Error("Failed to load backend information");
+            }
+            return response.json();
+        })
+        .then((backend)=> {
+            init(backend);
+        })
+        .catch((error) => {
+            console.error("Failed to load backend information: ", error);
+            init({
+                api: "http://localhost:8080",
+                keycloak: {
+                    url: 'http://localhost:8081',
+                    realm: 'doppelgaenger',
+                    clientId: 'api',
                 }
-            })
-            .catch(() => {
-                console.error("Failed to initialize")
             });
-    }
-
-    initKeycloak();
+        });
 
 </script>