Implement Kratos UI for all flows

Makefile

@@ -26,6 +26,9 @@ logs:
 watch-dashboard:
 	@make -C services/dashboard watch
 
+watch-tenants:
+	@make -C services/tenants watch
+
 api:
 	@echo "Starting live openapi docs"
 	-@docker run --rm -p 8080:8080 --init -v $(CURDIR):/project redocly/cli -h 0.0.0.0 preview-docs /project/tools/openapi/api.yaml

docker-compose.yaml

@@ -3,6 +3,7 @@ name: sensorbucket
 services:
   caddy:
     image: caddy:alpine
+    command: ["caddy", "run", "--watch", "--config", "/etc/caddy/Caddyfile"]
     ports:
       - 3000:80
     volumes:
@@ -55,14 +56,15 @@ services:
   tenants:
     build:
       context: .
-      dockerfile: Dockerfile
+      dockerfile: services/tenants/Dockerfile
       target: dev
     volumes:
       - .:/workspace:cached
     environment:
-      - APP_NAME=tenants
-      - APP_TYPE=service
       - DB_DSN=postgresql://sensorbucket:sensorbucket@db:5432/tenants?sslmode=disable
+      - STATIC_PATH=services/tenants/static
+      - HTTP_WEBUI_BASE=/tenants
+      - SB_API=http://caddy
 
   userworkers:
     build: 
@@ -123,23 +125,21 @@ services:
     environment:
       - LOG_LEAK_SENSITIVE_VALUES=true
   kratos-migrate:
-    image: oryd/kratos:v0.13.0
+    image: oryd/kratos:latest
     environment:
       - DSN=postgres://sensorbucket:sensorbucket@db:5432/kratos?sslmode=disable
     volumes:
       - type: bind
         source: ./tools/docker-compose/kratos_config
         target: /etc/config/kratos
     command: -c /etc/config/kratos/kratos.yml migrate sql -e --yes
-    restart: on-failure
   kratos:
     depends_on:
       - kratos-migrate
-    image: oryd/kratos:v0.13.0
+    image: oryd/kratos:latest
     ports:
       - '4433:4433' # public
       - '4434:4434' # admin
-    restart: unless-stopped
     environment:
       - DSN=postgres://sensorbucket:sensorbucket@db:5432/kratos?sslmode=disable
       - LOG_LEVEL=trace

go.mod

@@ -17,6 +17,7 @@ require (
 	github.com/gorilla/websocket v1.5.0
 	github.com/jackc/pgx/v5 v5.3.1
 	github.com/jmoiron/sqlx v1.3.5
+	github.com/ory/client-go v1.5.1
 	github.com/prometheus/client_golang v1.15.1
 	github.com/rabbitmq/amqp091-go v1.3.4
 	github.com/rs/cors v1.8.2
@@ -25,8 +26,8 @@ require (
 	github.com/stretchr/testify v1.8.4
 	github.com/testcontainers/testcontainers-go v0.21.0
 	github.com/valyala/quicktemplate v1.7.0
-	golang.org/x/crypto v0.13.0
-	golang.org/x/oauth2 v0.8.0
+	golang.org/x/crypto v0.18.0
+	golang.org/x/oauth2 v0.16.0
 	k8s.io/api v0.25.4
 	k8s.io/apimachinery v0.26.2
 	k8s.io/client-go v0.25.4
@@ -118,10 +119,10 @@ require (
 	go.uber.org/zap v1.24.0 // indirect
 	golang.org/x/exp v0.0.0-20230510235704-dd950f8aeaea // indirect
 	golang.org/x/mod v0.10.0 // indirect
-	golang.org/x/net v0.15.0 // indirect
-	golang.org/x/sys v0.12.0 // indirect
-	golang.org/x/term v0.12.0 // indirect
-	golang.org/x/text v0.13.0 // indirect
+	golang.org/x/net v0.20.0 // indirect
+	golang.org/x/sys v0.16.0 // indirect
+	golang.org/x/term v0.16.0 // indirect
+	golang.org/x/text v0.14.0 // indirect
 	golang.org/x/time v0.0.0-20220609170525-579cf78fd858 // indirect
 	golang.org/x/tools v0.9.1 // indirect
 	gomodules.xyz/jsonpatch/v2 v2.2.0 // indirect

go.sum

@@ -264,6 +264,8 @@ github.com/opencontainers/runc v1.1.5 h1:L44KXEpKmfWDcS02aeGm8QNTFXTo2D+8MYGDIJ/
 github.com/opencontainers/runc v1.1.5/go.mod h1:1J5XiS+vdZ3wCyZybsuxXZWGrgSr8fFJHLXuG2PsnNg=
 github.com/opencontainers/runtime-spec v1.0.3-0.20210326190908-1c3f411f0417/go.mod h1:jwyrGlmzljRJv/Fgzds9SsS/C5hL+LL3ko9hs6T5lQ0=
 github.com/opencontainers/selinux v1.10.0/go.mod h1:2i0OySw99QjzBBQByd1Gr9gSjvuho1lHsJxIJ3gGbJI=
+github.com/ory/client-go v1.5.1 h1:lVi1f8j994uXMbi2+YahdtJw4+WZEalDXiRJbSQBYhU=
+github.com/ory/client-go v1.5.1/go.mod h1:6dx0Ir6q8O9mUvl3sqrlyR+0LalXLwwKedVDDmSPNQs=
 github.com/pierrec/lz4/v4 v4.1.2/go.mod h1:gZWDp/Ze/IJXGXf23ltt2EXimqmTUXEy0GFuRQyBid4=
 github.com/pierrec/lz4/v4 v4.1.17 h1:kV4Ip+/hUBC+8T6+2EgburRtkE9ef4nbY3f4dFhGjMc=
 github.com/pierrec/lz4/v4 v4.1.17/go.mod h1:gZWDp/Ze/IJXGXf23ltt2EXimqmTUXEy0GFuRQyBid4=
@@ -359,8 +361,8 @@ golang.org/x/crypto v0.0.0-20200622213623-75b288015ac9/go.mod h1:LzIPMQfyMNhhGPh
 golang.org/x/crypto v0.0.0-20210513164829-c07d793c2f9a/go.mod h1:P+XmwS30IXTQdn5tA2iutPOUgjI07+tq3H3K9MVA1s8=
 golang.org/x/crypto v0.0.0-20210921155107-089bfa567519/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc=
 golang.org/x/crypto v0.0.0-20211215153901-e495a2d5b3d3/go.mod h1:IxCIyHEi3zRg3s0A5j5BB6A9Jmi73HwBIUl50j+osU4=
-golang.org/x/crypto v0.13.0 h1:mvySKfSWJ+UKUii46M40LOvyWfN0s2U+46/jDd0e6Ck=
-golang.org/x/crypto v0.13.0/go.mod h1:y6Z2r+Rw4iayiXXAIxJIDAJ1zMW4yaTpebo8fPOliYc=
+golang.org/x/crypto v0.18.0 h1:PGVlW0xEltQnzFZ55hkuX5+KLyrMYhHld1YHO4AKcdc=
+golang.org/x/crypto v0.18.0/go.mod h1:R0j02AL6hcrfOiy9T4ZYp/rcWeMxM3L6QYxlOuEG1mg=
 golang.org/x/exp v0.0.0-20190121172915-509febef88a4/go.mod h1:CJ0aWSM057203Lf6IL+f9T1iT9GByDxfZKAQTCR3kQA=
 golang.org/x/exp v0.0.0-20230510235704-dd950f8aeaea h1:vLCWI/yYrdEHyN2JzIzPO3aaQJHQdp89IZBA/+azVC4=
 golang.org/x/exp v0.0.0-20230510235704-dd950f8aeaea/go.mod h1:V1LtkGg67GoY2N1AnLN78QLrzxkLyJw7RJb1gzOOz9w=
@@ -385,11 +387,11 @@ golang.org/x/net v0.0.0-20201224014010-6772e930b67b/go.mod h1:m0MpNAwzfU5UDzcl9v
 golang.org/x/net v0.0.0-20210226172049-e18ecbb05110/go.mod h1:m0MpNAwzfU5UDzcl9v0D8zg8gWTRqZa9RBIspLL5mdg=
 golang.org/x/net v0.0.0-20210510120150-4163338589ed/go.mod h1:9nx3DQGgdP8bBQD5qxJ1jj9UTztislL4KSBs9R2vV5Y=
 golang.org/x/net v0.0.0-20211112202133-69e39bad7dc2/go.mod h1:9nx3DQGgdP8bBQD5qxJ1jj9UTztislL4KSBs9R2vV5Y=
-golang.org/x/net v0.15.0 h1:ugBLEUaxABaB5AJqW9enI0ACdci2RUd4eP51NTBvuJ8=
-golang.org/x/net v0.15.0/go.mod h1:idbUs1IY1+zTqbi8yxTbhexhEEk5ur9LInksu6HrEpk=
+golang.org/x/net v0.20.0 h1:aCL9BSgETF1k+blQaYUBx9hJ9LOGP3gAVemcZlf1Kpo=
+golang.org/x/net v0.20.0/go.mod h1:z8BVo6PvndSri0LbOE3hAn0apkU+1YvI6E70E9jsnvY=
 golang.org/x/oauth2 v0.0.0-20180821212333-d2e6202438be/go.mod h1:N/0e6XlmueqKjAGxoOufVs8QHGRruUQn6yWY3a++T0U=
-golang.org/x/oauth2 v0.8.0 h1:6dkIjl3j3LtZ/O3sTgZTMsLKSftL/B8Zgq4huOIIUu8=
-golang.org/x/oauth2 v0.8.0/go.mod h1:yr7u4HXZRm1R1kBWqr/xKNqewf0plRYoB7sla+BCIXE=
+golang.org/x/oauth2 v0.16.0 h1:aDkGMBSYxElaoP81NpoUoz2oo2R2wHdZpGToUxfyQrQ=
+golang.org/x/oauth2 v0.16.0/go.mod h1:hqZ+0LWXsiVoZpeld6jVt06P3adbS2Uu911W1SsJv2o=
 golang.org/x/sync v0.0.0-20180314180146-1d60e4601c6f/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20181108010431-42b317875d0f/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20181221193216-37e7f081c4d4/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
@@ -416,17 +418,17 @@ golang.org/x/sys v0.0.0-20211025201205-69cdffdb9359/go.mod h1:oPkhp1MJrh7nUepCBc
 golang.org/x/sys v0.0.0-20211116061358-0a5406a5449c/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220715151400-c0bba94af5f8/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220908164124-27713097b956/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.12.0 h1:CM0HF96J0hcLAwsHPJZjfdNzs0gftsLfgKt57wWHJ0o=
-golang.org/x/sys v0.12.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.16.0 h1:xWw16ngr6ZMtmxDyKyIgsE93KNKz5HKmMa3b8ALHidU=
+golang.org/x/sys v0.16.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
-golang.org/x/term v0.12.0 h1:/ZfYdc3zq+q02Rv9vGqTeSItdzZTSNDmfTi0mBAuidU=
-golang.org/x/term v0.12.0/go.mod h1:owVbMEjm3cBLCHdkQu9b1opXd4ETQWc3BhuQGKgXgvU=
+golang.org/x/term v0.16.0 h1:m+B6fahuftsE9qjo0VWp2FW0mB3MTJvR0BaMQrq0pmE=
+golang.org/x/term v0.16.0/go.mod h1:yn7UURbUtPyrVJPGPq404EukNFxcm/foM+bV/bfcDsY=
 golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/text v0.3.2/go.mod h1:bEr9sfX3Q8Zfm5fL9x+3itogRgK3+ptLWKqgva+5dAk=
 golang.org/x/text v0.3.3/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
 golang.org/x/text v0.3.6/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
-golang.org/x/text v0.13.0 h1:ablQoSUd0tRdKxZewP80B+BaqeKJuVhuRxj/dkrun3k=
-golang.org/x/text v0.13.0/go.mod h1:TvPlkZtksWOMsz7fbANvkp4WM8x/WCo/om8BMLbz+aE=
+golang.org/x/text v0.14.0 h1:ScX5w1eTa3QqT8oi6+ziP7dTV1S2+ALU0bI+0zXKWiQ=
+golang.org/x/text v0.14.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU=
 golang.org/x/time v0.0.0-20220609170525-579cf78fd858 h1:Dpdu/EMxGMFgq0CeYMh4fazTD2vtlZRYE7wyynxJb9U=
 golang.org/x/time v0.0.0-20220609170525-579cf78fd858/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
 golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=

pkg/layout/layout.qtpl

@@ -0,0 +1,186 @@
+{% code
+type NavItem struct {
+    Label string
+    URL string
+    Icon string
+}
+
+var navItems = []NavItem{
+    {Label: "Overview", URL: "/", Icon: "material-symbols:home-outline-rounded" },
+    {Label: "Ingress", URL: "/ingress", Icon: "mdi:latest" },
+    {Label: "Workers", URL: "/workers", Icon: "uil:box" },
+    {Label: "Pipelines", URL: "/pipelines", Icon:"mdi:pipe"},
+}
+%}
+
+{%
+interface Page {
+    Title()
+    Header()
+    Body()
+    Footer()
+}
+%}
+
+{% code
+type BasePage struct {
+}
+%}
+{% func (p *BasePage) Title() %}This is a base title{% endfunc %}
+{% func (p *BasePage) Header() %}{% endfunc %}
+{% func (p *BasePage) Body() %}Page has no body{% endfunc %}
+{% func (p *BasePage) Footer() %}{% endfunc %}
+
+{% func Index(page Page) %}
+<!DOCTYPE html>
+<html lang="en" class="h-full bg-slate-50">
+
+<head>
+    <title>SensorBucket</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="{%s U("static/style.css") %}" />
+    {%= debugHeaders() %}
+    <!-- TODO: only load these on the required pages -->
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
+        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
+    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
+        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css"/>
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css"/>
+    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/uPlot.min.css" />
+    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/uPlot.iife.min.js"></script>
+    <script type="text/javascript" src="{%s U("static/uplot.htmx.js") %}"></script>
+    <script type="text/javascript" src="{%s U("static/leaflet.htmx.js") %}"></script>
+    <script src="http://SortableJS.github.io/Sortable/Sortable.js"></script>
+    <script type="text/javascript">
+        window.addEventListener("DOMContentLoaded", function(){
+            document.body.addEventListener("showSnackbar", function(evt) {
+                showSnackbar(evt.detail.message, evt.detail.type);
+            });
+        });
+
+        const snackbarSuccess = 1;
+        const snackbarError = 2;
+
+        let currentHideSnackbarTimer = null;
+        function showSnackbar(message, type) {
+            // If called again before disapearing, immediately hide
+            hideSnackbar();
+
+            const snackbar = document.getElementById('snackbar');
+            const snackbarMessage = document.getElementById('snackbarMessage');
+
+            snackbarMessage.innerText = message;
+
+            snackbar.classList.add('translate-y-0');
+            snackbar.classList.add('opacity-100');
+            snackbar.classList.remove('pointer-events-none');
+
+            const successIcon = document.getElementById('successIcon');
+            const errorIcon = document.getElementById('errorIcon');
+
+            if (!successIcon.classList.contains('hidden')) {
+                successIcon.classList.add('hidden');
+            }
+
+            if (!errorIcon.classList.contains('hidden')) {
+                errorIcon.classList.add('hidden');
+            }
+
+            if (type == snackbarSuccess) {
+                const successIcon = document.getElementById('successIcon');
+                successIcon.classList.remove('hidden');
+            } else if (type == snackbarError) {
+                const errorIcon = document.getElementById('errorIcon');
+                errorIcon.classList.remove('hidden');
+            }
+
+            currentHideSnackbarTimer = setTimeout(() => {
+              hideSnackbar();
+            }, 3000);
+        }
+
+        function hideSnackbar() {
+            if (currentHideSnackbarTimer != null) {
+                clearTimeout(currentHideSnackbarTimer);
+                currentHideSnackbarTimer = null;
+            }
+            const snackbar = document.getElementById('snackbar');
+            snackbar.classList.remove('translate-y-0');
+            snackbar.classList.remove('opacity-100');
+            snackbar.classList.add('pointer-events-none');
+        }
+    </script>
+    {%= page.Header() %}
+</head>
+
+<body class="min-h-full" hx-boost="true">
+    <div id="snackbar" class="fixed bottom-3 right-3 w-96 h-24 select-none transition ease-in duration-100 drop-shadow-2xl -translate-y-5 opacity-0 pointer-events-none"> 
+        <div class="flex justify-between w-full h-full p-4 mb-4 text-gray-500 bg-secondary-600" role="alert">
+            <div class="flex items-center justify-start w-full">
+                <div class="w-1/6 h-full border-solid border border-white">
+                    <iconify-icon id="successIcon" icon="ph:check-bold" width="100%" height="100%" class="text-green-500 hidden"></iconify-icon>
+                    <iconify-icon id="errorIcon" icon="tdesign:error" width="100%" height="100%" class="text-rose-800 hidden"></iconify-icon>
+                </div>
+                <span id="snackbarMessage" class="ml-3 text-lg font-normal text-white">hello there</span>
+            </div>
+            <div class="cursor-pointer" onclick="hideSnackbar()">
+                <iconify-icon icon="ooui:close" class="text-white"></iconify-icon>
+            </div>
+        </div>
+    </div>
+    <sidebar class="w-screen lg:w-sidebar fixed lg:h-screen top-0 left-0 flex flex-col bg-secondary-600 z-[5000]">
+        <header class="h-12 lg:h-header flex justify-between lg:flex-col lg:justify-end">
+            <a hx-target="main" class="h-full block p-3 lg:p-0 lg:pl-8 lg:pr-12 lg:h-auto" href="{%s U("/overview") %}"><img src="{%s U("static/logo-white.png") %}" alt="SensorBucket" class="h-full" /></a>
+            <button 
+                class="h-8 w-8 self-center lg:hidden"
+                _="on click toggle .h-auto on <nav/>
+                    then toggle .hidden on <nav/>
+                    then toggle .rotate-180 on #toggle-sidebar-icon"
+            >
+                <iconify-icon id="toggle-sidebar-icon" icon="ic:round-keyboard-arrow-down" width="24" class="text-white transition duration-150"></iconify-icon>
+            </button>
+        </header>
+        <nav class="mt-4 px-8 pb-4 hidden lg:block">
+            <ul hx-target="main">
+                <li class="pb-2 text-xs font-bold text-secondary-300 uppercase">Navigation</li>
+                {% for _, item := range navItems %}
+                <li>
+                    <a href="{%s U(item.URL) %}"
+                        class="flex items-center py-1.5 text-sm text-secondary-300 hover:text-white transition-colors duration-150">
+                        <iconify-icon icon="{%s item.Icon %}" width="24" class="pr-4 w-8"></iconify-icon>
+                        <span>
+                            {%s item.Label %}
+                        </span>
+                    </a>
+                </li>
+                {% endfor %}
+            </ul>
+        </nav>
+    </sidebar>
+    <section class="flex-1 mt-12 lg:mt-0 lg:ml-sidebar" id="main-wrapper">
+        <header class="h-8 bg-white border-b" id="mustache">
+
+        </header>
+        <main class="p-4 pt-0 mt-4" id="main">
+            {%= page.Body() %}
+        </main>
+    </section>
+
+    {%= page.Footer() %}
+</body>
+
+</html>
+{% endfunc %}
+
+
+// These are for debugging only. In production the tailwind and icons should be bundled with the dashboard
+{% func debugHeaders() %}
+<script type="text/javascript" src="https://unpkg.com/[email protected]"></script>
+<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/ext/ws.js"></script>
+<script type="text/javascript" src="https://unpkg.com/[email protected]"></script>
+<script type="text/javascript" src="https://code.iconify.design/iconify-icon/1.0.8/iconify-icon.min.js"></script>
+<!--<script type="text/javascript" src="https://livejs.com/live.js"></script>-->
+{% endfunc %}