Jacek dashboard (#33)

Several improvements: - dashboards scale better to any screen resolution - change the name for OpenSearch if it is used - add links to easy onboarding demo, be able to specify them as `adminUrl` for OpenSearch Dashboards/Clickhouse - consolidate HTTP refresh to one ![Screenshot 2024-05-03 at 20 10 42](https://github.com/QuesmaOrg/quesma/assets/972989/9921329d-a570-477e-b31d-3d0d9ecad0a8)
QuesmaOrg · May 4, 2024 · d4c15d9 · d4c15d9
1 parent 1f02b37
commit d4c15d9
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 42 deletions.
diff --git a/docker/local-dev.yml b/docker/local-dev.yml
@@ -11,7 +11,6 @@ services:
       - QUESMA_elasticsearch_url=http://elasticsearch:9200
       - QUESMA_port=8080
       - QUESMA_logging_path=/var/quesma/logs
-      - QUESMA_clickhouse_url=clickhouse://clickhouse:9000
       - QUESMA_mode=dual-write-query-clickhouse
       - QUESMA_CONFIG_FILE=/config/local-dev.yaml
     depends_on:

diff --git a/docker/opensearch.yml b/docker/opensearch.yml
@@ -11,7 +11,6 @@ services:
       - QUESMA_elasticsearch_url=http://opensearch:9200
       - QUESMA_port=8080
       - QUESMA_logging_path=/var/quesma/logs
-      - QUESMA_clickhouse_url=clickhouse://clickhouse:9000
       - QUESMA_CONFIG_FILE=/config/local-dev.yaml
     depends_on:
       clickhouse:

diff --git a/docker/quesma/config/local-dev.yaml b/docker/quesma/config/local-dev.yaml
@@ -2,10 +2,12 @@
 mode: "dual-write-query-clickhouse"
 port: 8080  # public tcp port to listen for incoming traffic
 elasticsearch:
-  url: "http://localhost:9200"
+  #url: "http://localhost:9200"
   call: false
-#clickhouse:   # this config is going to be removed, but for now let's just comment out
-#  url: "clickhouse://localhost:9000"
+  adminUrl: "http://localhost:5601"
+clickhouse:
+  url: "clickhouse://clickhouse:9000"
+  adminUrl: "http://localhost:8123/play"
 ingestStatistics: true
 internalTelemetryUrl: "https://api.quesma.com/phone-home"
 logging:

diff --git a/quesma/quesma/config/config.go b/quesma/quesma/config/config.go
@@ -55,13 +55,15 @@ type ElasticsearchConfiguration struct {
 	User     string `koanf:"user"`
 	Password string `koanf:"password"`
 	Call     bool   `koanf:"call"`
+	AdminUrl *Url   `koanf:"adminUrl"`
 }
 
 type RelationalDbConfiguration struct {
 	Url      *Url   `koanf:"url"`
 	User     string `koanf:"user"`
 	Password string `koanf:"password"`
 	Database string `koanf:"database"`
+	AdminUrl *Url   `koanf:"adminUrl"`
 }
 
 func (c *RelationalDbConfiguration) IsEmpty() bool {

diff --git a/quesma/quesma/ui/asset/head.html b/quesma/quesma/ui/asset/head.html
@@ -340,13 +340,17 @@
             position: absolute;
         }
 
-        #dashboard-main svg {
+        #dashboard-main {
+            width: 100%;
+        }
+
+        #dashboard-main #svg-container {
             z-index: -1;
             position: absolute;
             width: 60%;
             left: 20%;
-            height: 100%;
-            top: 0;
+            height: 60%;
+            top: 20%;
         }
 
         #dashboard-main svg path {
@@ -366,9 +370,9 @@
             }
         }
 
-        #dashboard-main svg text {
-            padding: 5px;
-            font-size: 1.5em;
+        #dashboard-main .traffic-element {
+            font-size: 1.3vw;
+            position: absolute;
         }
 
         #dashboard-main .red {

diff --git a/quesma/quesma/ui/console_routes.go b/quesma/quesma/ui/console_routes.go
@@ -103,11 +103,7 @@ func (qmc *QuesmaManagementConsole) createRouting() *mux.Router {
 
 	router.HandleFunc("/panel/dashboard", func(writer http.ResponseWriter, req *http.Request) {
 		buf := qmc.generateDashboardPanel()
-		_, _ = writer.Write(buf)
-	})
-
-	router.HandleFunc("/panel/dashboard-traffic", func(writer http.ResponseWriter, req *http.Request) {
-		buf := qmc.generateDashboardTrafficPanel()
+		buf = append(buf, qmc.generateDashboardTrafficPanel()...)
 		_, _ = writer.Write(buf)
 	})
 

diff --git a/quesma/quesma/ui/html_pages.go b/quesma/quesma/ui/html_pages.go
@@ -601,7 +601,8 @@ func (qmc *QuesmaManagementConsole) generateDashboard() []byte {
 	buffer.Html(`});`)
 	buffer.Html(`</script>` + "\n")
 
-	buffer.Html(`<svg width="100%" height="100%" viewBox="0 0 1000 1000">` + "\n")
+	buffer.Html(`<div id="svg-container">`)
+	buffer.Html(`<svg width="100%" height="100%" viewBox="0 0 1000 1000" preserveAspectRatio="none">` + "\n")
 	// One limitation is that, we don't update color of paths after initial draw.
 	// They rarely change, so it's not a big deal for now.
 	// Clickhouse -> Kibana
@@ -626,27 +627,14 @@ func (qmc *QuesmaManagementConsole) generateDashboard() []byte {
 		buffer.Html(fmt.Sprintf(`<path d="M 1000 800 L 0 800" fill="none" stroke="%s" />`, status))
 	}
 	buffer.Html(`</svg>` + "\n")
-
-	buffer.Html(`<div hx-get="/panel/dashboard-traffic" hx-trigger="every 1s [htmx.find('#autorefresh').checked]">`)
 	buffer.Write(qmc.generateDashboardTrafficPanel())
-	buffer.Html(`</div>`)
+	buffer.Html(`</div>` + "\n")
 
 	buffer.Html(`<div id="dashboard">` + "\n")
 	buffer.Write(qmc.generateDashboardPanel())
 	buffer.Html("</div>\n")
 	buffer.Html("\n</main>\n\n")
 
-	buffer.Html(`<div class="menu">`)
-	buffer.Html("\n<h2>Menu</h2>")
-
-	buffer.Html(`<h3>Useful links</h3>`)
-	buffer.Html(`<ul>`)
-	buffer.Html(`<li><a href="http://localhost:5601/app/observability-log-explorer/">Kibana Log Explorer</a></li>`)
-	buffer.Html(`<li><a href="http://localhost:8081">mitmproxy</a></li>`)
-	buffer.Html(`<li><a href="http://localhost:8123/play">Clickhouse</a></li>`)
-	buffer.Html(`</ul>`)
-
-	buffer.Html("\n</div>")
 	buffer.Html("\n</body>")
 	buffer.Html("\n</html>")
 	return buffer.Bytes()

diff --git a/quesma/quesma/ui/html_panels.go b/quesma/quesma/ui/html_panels.go
@@ -239,8 +239,26 @@ func statusToDiv(s healthCheckStatus) string {
 func (qmc *QuesmaManagementConsole) generateDashboardPanel() []byte {
 	var buffer HtmlBuffer
 
+	dashboardName := "<h3>Kibana</h3>"
+	storeName := "<h3>Elasticsearch</h3>"
+	if qmc.config.Elasticsearch.Url != nil && strings.Contains(qmc.config.Elasticsearch.Url.String(), "opensearch") {
+		dashboardName = "<h3>OpenSearch</h3><h3>Dashboards</h3>"
+		storeName = "<h3>OpenSearch</h3>"
+	}
+
+	clickhouseName := "<h3>ClickHouse</h3>"
+	if qmc.config.Hydrolix.Url != nil {
+		clickhouseName = "<h3>Hydrolix</h3>"
+	}
+
 	buffer.Html(`<div id="dashboard-kibana" class="component">`)
-	buffer.Html(`<h3>Kibana</h3>`)
+	if qmc.config.Elasticsearch.AdminUrl != nil {
+		buffer.Html(fmt.Sprintf(`<a href="%s">`, qmc.config.Elasticsearch.AdminUrl.String()))
+	}
+	buffer.Html(dashboardName)
+	if qmc.config.Elasticsearch.AdminUrl != nil {
+		buffer.Html(`</a>`)
+	}
 	buffer.Html(statusToDiv(qmc.checkKibana()))
 	buffer.Html(`</div>`)
 
@@ -250,12 +268,18 @@ func (qmc *QuesmaManagementConsole) generateDashboardPanel() []byte {
 	buffer.Html(`</div>`)
 
 	buffer.Html(`<div id="dashboard-elasticsearch" class="component">`)
-	buffer.Html(`<h3>Elastic</h3><h3>search</h3>`)
+	buffer.Html(storeName)
 	buffer.Html(statusToDiv(qmc.checkElasticsearch()))
 	buffer.Html(`</div>`)
 
 	buffer.Html(`<div id="dashboard-clickhouse" class="component">`)
-	buffer.Html(`<h3>ClickHouse</h3>`)
+	if qmc.config.ClickHouse.AdminUrl != nil {
+		buffer.Html(fmt.Sprintf(`<a href="%s">`, qmc.config.ClickHouse.AdminUrl.String()))
+	}
+	buffer.Html(clickhouseName)
+	if qmc.config.ClickHouse.AdminUrl != nil {
+		buffer.Html(`</a>`)
+	}
 	buffer.Html(statusToDiv(qmc.checkClickhouseHealth()))
 	buffer.Html(`</div>`)
 
@@ -328,34 +352,33 @@ func (qmc *QuesmaManagementConsole) generateDashboardTrafficText(typeName string
 
 func (qmc *QuesmaManagementConsole) generateDashboardTrafficElement(typeName string, y int) string {
 	status, text := qmc.generateDashboardTrafficText(typeName)
-	return fmt.Sprintf(`<text x="400" y="%d" class="%s" xml:space="preserve">%s</text>`, y, status, text)
+	return fmt.Sprintf(
+		`<div style="left: 40%%; top: %d%%" id="traffic-%s" hx-swap-oob="true" class="traffic-element %s">%s</div>`,
+		y, typeName, status, text)
 }
 
 func (qmc *QuesmaManagementConsole) generateDashboardTrafficPanel() []byte {
 	var buffer HtmlBuffer
 
-	buffer.Html(`<svg width="100%" height="100%" viewBox="0 0 1000 1000">`)
-
 	// Clickhouse -> Kibana
 	if qmc.config.ReadsFromClickhouse() {
-		buffer.Html(qmc.generateDashboardTrafficElement(RequestStatisticKibana2Clickhouse, 240))
+		buffer.Html(qmc.generateDashboardTrafficElement(RequestStatisticKibana2Clickhouse, 21))
 	}
 
 	// Elasticsearch -> Kibana
 	if qmc.config.ReadsFromElasticsearch() {
-		buffer.Html(qmc.generateDashboardTrafficElement(RequestStatisticKibana2Elasticsearch, 690))
+		buffer.Html(qmc.generateDashboardTrafficElement(RequestStatisticKibana2Elasticsearch, 66))
 	}
 
 	// Ingest -> Clickhouse
 	if qmc.config.WritesToClickhouse() {
-		buffer.Html(qmc.generateDashboardTrafficElement(RequestStatisticIngest2Clickhouse, 340))
+		buffer.Html(qmc.generateDashboardTrafficElement(RequestStatisticIngest2Clickhouse, 31))
 	}
 
 	// Ingest -> Elasticsearch
 	if qmc.config.WritesToElasticsearch() {
-		buffer.Html(qmc.generateDashboardTrafficElement(RequestStatisticIngest2Elasticsearch, 790))
+		buffer.Html(qmc.generateDashboardTrafficElement(RequestStatisticIngest2Elasticsearch, 76))
 	}
-	buffer.Html(`</svg>`)
 
 	return buffer.Bytes()
 }