From d4c15d97998917f108b37721087ca9e09be956ab Mon Sep 17 00:00:00 2001 From: Jacek Migdal Date: Sat, 4 May 2024 07:37:16 +0200 Subject: [PATCH] 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) --- docker/local-dev.yml | 1 - docker/opensearch.yml | 1 - docker/quesma/config/local-dev.yaml | 8 +++-- quesma/quesma/config/config.go | 2 ++ quesma/quesma/ui/asset/head.html | 16 ++++++---- quesma/quesma/ui/console_routes.go | 6 +--- quesma/quesma/ui/html_pages.go | 18 ++---------- quesma/quesma/ui/html_panels.go | 45 ++++++++++++++++++++++------- 8 files changed, 55 insertions(+), 42 deletions(-) diff --git a/docker/local-dev.yml b/docker/local-dev.yml index 1f04fa129..51f77bad9 100644 --- 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 index 791962d06..09ff9b8af 100644 --- 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 index f1e39b071..e9e7b4cf0 100644 --- 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 index ff4235bb4..0b5536f7a 100644 --- a/quesma/quesma/config/config.go +++ b/quesma/quesma/config/config.go @@ -55,6 +55,7 @@ type ElasticsearchConfiguration struct { User string `koanf:"user"` Password string `koanf:"password"` Call bool `koanf:"call"` + AdminUrl *Url `koanf:"adminUrl"` } type RelationalDbConfiguration struct { @@ -62,6 +63,7 @@ type RelationalDbConfiguration struct { 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 index 28a173840..a4f15924a 100644 --- 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 index 3c6e910ed..06fa6cba3 100644 --- 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 index b65a07904..93c891ffe 100644 --- 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(`` + "\n") - buffer.Html(`` + "\n") + buffer.Html(`
`) + buffer.Html(`` + "\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(``, status)) } buffer.Html(`` + "\n") - - buffer.Html(`
`) buffer.Write(qmc.generateDashboardTrafficPanel()) - buffer.Html(`
`) + buffer.Html(`
` + "\n") buffer.Html(`
` + "\n") buffer.Write(qmc.generateDashboardPanel()) buffer.Html("
\n") buffer.Html("\n\n\n") - buffer.Html(`
`) - buffer.Html("\n

Menu

") - - buffer.Html(`

Useful links

`) - buffer.Html(``) - - buffer.Html("\n
") buffer.Html("\n") buffer.Html("\n") return buffer.Bytes() diff --git a/quesma/quesma/ui/html_panels.go b/quesma/quesma/ui/html_panels.go index 15843c7b7..ba8f1ee65 100644 --- 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 := "

Kibana

" + storeName := "

Elasticsearch

" + if qmc.config.Elasticsearch.Url != nil && strings.Contains(qmc.config.Elasticsearch.Url.String(), "opensearch") { + dashboardName = "

OpenSearch

Dashboards

" + storeName = "

OpenSearch

" + } + + clickhouseName := "

ClickHouse

" + if qmc.config.Hydrolix.Url != nil { + clickhouseName = "

Hydrolix

" + } + buffer.Html(`
`) - buffer.Html(`

Kibana

`) + if qmc.config.Elasticsearch.AdminUrl != nil { + buffer.Html(fmt.Sprintf(``, qmc.config.Elasticsearch.AdminUrl.String())) + } + buffer.Html(dashboardName) + if qmc.config.Elasticsearch.AdminUrl != nil { + buffer.Html(``) + } buffer.Html(statusToDiv(qmc.checkKibana())) buffer.Html(`
`) @@ -250,12 +268,18 @@ func (qmc *QuesmaManagementConsole) generateDashboardPanel() []byte { buffer.Html(``) buffer.Html(`
`) - buffer.Html(`

Elastic

search

`) + buffer.Html(storeName) buffer.Html(statusToDiv(qmc.checkElasticsearch())) buffer.Html(`
`) buffer.Html(`
`) - buffer.Html(`

ClickHouse

`) + if qmc.config.ClickHouse.AdminUrl != nil { + buffer.Html(fmt.Sprintf(``, qmc.config.ClickHouse.AdminUrl.String())) + } + buffer.Html(clickhouseName) + if qmc.config.ClickHouse.AdminUrl != nil { + buffer.Html(``) + } buffer.Html(statusToDiv(qmc.checkClickhouseHealth())) buffer.Html(`
`) @@ -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(`%s`, y, status, text) + return fmt.Sprintf( + `
%s
`, + y, typeName, status, text) } func (qmc *QuesmaManagementConsole) generateDashboardTrafficPanel() []byte { var buffer HtmlBuffer - buffer.Html(``) - // 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(``) return buffer.Bytes() }