UI refactor (#40)

1. Data sources were causing bugs, due to not implemented panel endpoint. 2. Fix collision.
QuesmaOrg · May 6, 2024 · 9931a0c · 9931a0c
1 parent d54389f
commit 9931a0c
Show file tree

Hide file tree

Showing 11 changed files with 51 additions and 39 deletions.
diff --git a/quesma/quesma/ui/console_routes.go b/quesma/quesma/ui/console_routes.go
@@ -61,7 +61,7 @@ func (qmc *QuesmaManagementConsole) createRouting() *mux.Router {
 	})
 
 	router.HandleFunc("/data-sources", func(writer http.ResponseWriter, req *http.Request) {
-		buf := qmc.generateDatasources()
+		buf := qmc.generateDatasourcesPage()
 		_, _ = writer.Write(buf)
 	})
 
@@ -107,6 +107,11 @@ func (qmc *QuesmaManagementConsole) createRouting() *mux.Router {
 		_, _ = writer.Write(buf)
 	})
 
+	router.HandleFunc("/panel/data-sources", func(writer http.ResponseWriter, req *http.Request) {
+		buf := qmc.generateDatasources()
+		_, _ = writer.Write(buf)
+	})
+
 	router.PathPrefix("/request-Id/{requestId}").HandlerFunc(func(writer http.ResponseWriter, r *http.Request) {
 		vars := mux.Vars(r)
 		buf := qmc.generateReportForRequestId(vars["requestId"])

diff --git a/quesma/quesma/ui/dashboard.go b/quesma/quesma/ui/dashboard.go
@@ -6,7 +6,7 @@ import (
 	"github.com/shirou/gopsutil/v3/host"
 	"github.com/shirou/gopsutil/v3/mem"
 	"mitmproxy/quesma/buildinfo"
-	"mitmproxy/quesma/quesma/ui/internal/buffer"
+	"mitmproxy/quesma/quesma/ui/internal/builder"
 	"mitmproxy/quesma/stats/errorstats"
 	"net/url"
 	"runtime"
@@ -90,7 +90,7 @@ func (qmc *QuesmaManagementConsole) generateDashboardTrafficElement(typeName str
 }
 
 func (qmc *QuesmaManagementConsole) generateDashboardTrafficPanel() []byte {
-	var buffer buffer.HtmlBuffer
+	var buffer builder.HtmlBuffer
 
 	// Clickhouse -> Kibana
 	if qmc.config.ReadsFromClickhouse() {
@@ -124,7 +124,7 @@ func statusToDiv(s healthCheckStatus) string {
 }
 
 func (qmc *QuesmaManagementConsole) generateDashboardPanel() []byte {
-	var buffer buffer.HtmlBuffer
+	var buffer builder.HtmlBuffer
 
 	dashboardName := "<h3>Kibana</h3>"
 	storeName := "<h3>Elasticsearch</h3>"

diff --git a/quesma/quesma/ui/data_sources.go b/quesma/quesma/ui/data_sources.go
@@ -2,15 +2,34 @@ package ui
 
 import (
 	"fmt"
+	"mitmproxy/quesma/quesma/ui/internal/builder"
 	"slices"
 	"strings"
 )
 
-func (qmc *QuesmaManagementConsole) generateDatasources() []byte {
+func (qmc *QuesmaManagementConsole) generateDatasourcesPage() []byte {
 	buffer := newBufferWithHead()
-	buffer.Write(generateTopNavigation("datasources"))
+	buffer.Write(generateTopNavigation("data-sources"))
+
+	buffer.Html(`<main id="data-sources">`)
+	buffer.Write(qmc.generateDatasources())
+
+	buffer.Html("\n</main>\n\n")
 
-	buffer.Html(`<main id="datasources">`)
+	buffer.Html(`<div class="menu">`)
+	buffer.Html("\n<h2>Menu</h2>")
+
+	buffer.Html(`<form action="/live">&nbsp;<input class="btn" type="submit" value="Back to live tail" /></form>`)
+
+	buffer.Html("\n</div>")
+
+	buffer.Html("\n</body>")
+	buffer.Html("\n</html>")
+	return buffer.Bytes()
+}
+
+func (qmc *QuesmaManagementConsole) generateDatasources() []byte {
+	var buffer builder.HtmlBuffer
 	buffer.Html(`<h2>Data sources</h2>`)
 
 	buffer.Html(`<h3>Clickhouse</h3>`)
@@ -64,17 +83,5 @@ func (qmc *QuesmaManagementConsole) generateDatasources() []byte {
 	}
 
 	buffer.Html(`</ul>`)
-
-	buffer.Html("\n</main>\n\n")
-
-	buffer.Html(`<div class="menu">`)
-	buffer.Html("\n<h2>Menu</h2>")
-
-	buffer.Html(`<form action="/live">&nbsp;<input class="btn" type="submit" value="Back to live tail" /></form>`)
-
-	buffer.Html("\n</div>")
-
-	buffer.Html("\n</body>")
-	buffer.Html("\n</html>")
 	return buffer.Bytes()
 }
diff --git a/quesma/quesma/ui/html_utils.go b/quesma/quesma/ui/html_utils.go
@@ -2,12 +2,12 @@ package ui
 
 import (
 	"fmt"
-	"mitmproxy/quesma/quesma/ui/internal/buffer"
+	"mitmproxy/quesma/quesma/ui/internal/builder"
 	"net/url"
 )
 
 func generateSimpleTop(title string) []byte {
-	var buffer buffer.HtmlBuffer
+	var buffer builder.HtmlBuffer
 	buffer.Html(`<div class="topnav">` + "\n")
 	buffer.Html(`<div class="topnav-menu">` + "\n")
 	buffer.Html(`<img src="/static/asset/quesma-logo-white-full.svg" alt="Quesma logo" class="quesma-logo" />` + "\n")
@@ -17,7 +17,7 @@ func generateSimpleTop(title string) []byte {
 }
 
 func generateTopNavigation(target string) []byte {
-	var buffer buffer.HtmlBuffer
+	var buffer builder.HtmlBuffer
 	buffer.Html(`<div class="topnav">` + "\n")
 	buffer.Html(`<div class="topnav-menu">` + "\n")
 	buffer.Html(`<img src="/static/asset/quesma-logo-white-full.svg" alt="Quesma logo" class="quesma-logo" />` + "\n")
@@ -58,7 +58,7 @@ func generateTopNavigation(target string) []byte {
 	buffer.Html(`><a href="/telemetry">Telemetry</a></li>`)
 
 	buffer.Html("<li")
-	if target == "datasources" {
+	if target == "data-sources" {
 		buffer.Html(` class="active"`)
 	}
 	buffer.Html(`><a href="/data-sources">Data sources</a></li>`)
@@ -81,9 +81,9 @@ func generateTopNavigation(target string) []byte {
 	return buffer.Bytes()
 }
 
-func newBufferWithHead() buffer.HtmlBuffer {
+func newBufferWithHead() builder.HtmlBuffer {
 	const bufferSize = 4 * 1024 // size of ui/head.html
-	var buffer buffer.HtmlBuffer
+	var buffer builder.HtmlBuffer
 	buffer.Grow(bufferSize)
 	head, err := uiFs.ReadFile("asset/head.html")
 	buffer.Write(head)

diff --git a/quesma/quesma/ui/ingest.go b/quesma/quesma/ui/ingest.go
@@ -2,7 +2,7 @@ package ui
 
 import (
 	"fmt"
-	"mitmproxy/quesma/quesma/ui/internal/buffer"
+	"mitmproxy/quesma/quesma/ui/internal/builder"
 	"mitmproxy/quesma/stats"
 	"strings"
 )
@@ -28,7 +28,7 @@ func (qmc *QuesmaManagementConsole) generateIngestStatistics() []byte {
 }
 
 func (qmc *QuesmaManagementConsole) generateStatistics() []byte {
-	var buffer buffer.HtmlBuffer
+	var buffer builder.HtmlBuffer
 	const maxTopValues = 5
 
 	if !qmc.config.IngestStatistics {

diff --git a/.../quesma/ui/internal/buffer/html_buffer.go → ...quesma/ui/internal/builder/html_buffer.go b/.../quesma/ui/internal/buffer/html_buffer.go → ...quesma/ui/internal/builder/html_buffer.go
@@ -1,4 +1,4 @@
-package buffer
+package builder
 
 import (
 	"bytes"

diff --git a/...ma/ui/internal/buffer/html_buffer_test.go → ...a/ui/internal/builder/html_buffer_test.go b/...ma/ui/internal/buffer/html_buffer_test.go → ...a/ui/internal/builder/html_buffer_test.go
@@ -1,4 +1,4 @@
-package buffer
+package builder
 
 import (
 	"github.com/stretchr/testify/assert"

diff --git a/quesma/quesma/ui/live_tail.go b/quesma/quesma/ui/live_tail.go
@@ -3,7 +3,7 @@ package ui
 import (
 	"fmt"
 	"mitmproxy/quesma/buildinfo"
-	"mitmproxy/quesma/quesma/ui/internal/buffer"
+	"mitmproxy/quesma/quesma/ui/internal/builder"
 	"mitmproxy/quesma/quesma/ui/internal/sqlfmt"
 )
 
@@ -126,7 +126,7 @@ func (qmc *QuesmaManagementConsole) generateUnsupportedQuerySidePanel() []byte {
 		unknownTypeCount = value
 	}
 
-	var buffer buffer.HtmlBuffer
+	var buffer builder.HtmlBuffer
 	linkToMainView := `<li><a href="/unsupported-requests"`
 	buffer.Html(`<ul id="unsupported-queries-stats" hx-swap-oob="true">`)
 	if totalErrorsCount > 0 {
@@ -162,7 +162,7 @@ func (qmc *QuesmaManagementConsole) generateQueriesStatsPanel() []byte {
 	}
 	qmc.mutex.Unlock()
 
-	var buffer buffer.HtmlBuffer
+	var buffer builder.HtmlBuffer
 
 	buffer.Html(`<ul id="queries-stats" hx-swap-oob="true">`)
 	buffer.Html(`<li><a href="/requests-with-error/"`)
@@ -183,7 +183,7 @@ func (qmc *QuesmaManagementConsole) generateQueriesStatsPanel() []byte {
 }
 
 func generateQueries(debugKeyValueSlice []queryDebugInfoWithId, withLinks bool) []byte {
-	var buffer buffer.HtmlBuffer
+	var buffer builder.HtmlBuffer
 
 	buffer.Html("\n" + `<div class="left" id="query-left">` + "\n")
 	buffer.Html(`<div class="title-bar">Query`)

diff --git a/quesma/quesma/ui/live_tail_drilldown.go b/quesma/quesma/ui/live_tail_drilldown.go
@@ -4,7 +4,7 @@ import (
 	"encoding/json"
 	"fmt"
 	"gopkg.in/yaml.v3"
-	"mitmproxy/quesma/quesma/ui/internal/buffer"
+	"mitmproxy/quesma/quesma/ui/internal/builder"
 	"strings"
 )
 
@@ -117,7 +117,7 @@ func generateLogMessages(logMessages []string, links []string) ([]byte, *string)
 		return ""
 	}
 
-	var buffer buffer.HtmlBuffer
+	var buffer builder.HtmlBuffer
 	buffer.Html("<table>\n")
 	buffer.Html("<thead>\n")
 	buffer.Html("<tr>\n")

diff --git a/quesma/quesma/ui/routing.go b/quesma/quesma/ui/routing.go
@@ -2,7 +2,7 @@ package ui
 
 import (
 	"mitmproxy/quesma/quesma/mux"
-	"mitmproxy/quesma/quesma/ui/internal/buffer"
+	"mitmproxy/quesma/quesma/ui/internal/builder"
 	"strings"
 )
 
@@ -35,7 +35,7 @@ func dropFirstSegment(path string) string {
 }
 
 func (qmc *QuesmaManagementConsole) generateRouterStatistics() []byte {
-	var buffer buffer.HtmlBuffer
+	var buffer builder.HtmlBuffer
 
 	matchedKeys, matched, unmatchedKeys, unmatched := mux.MatchStatistics().GroupByFirstSegment()
 

diff --git a/quesma/quesma/ui/unsupported_queries.go b/quesma/quesma/ui/unsupported_queries.go
@@ -5,7 +5,7 @@ import (
 	"github.com/rs/zerolog"
 	"mitmproxy/quesma/logger"
 	"mitmproxy/quesma/model"
-	"mitmproxy/quesma/quesma/ui/internal/buffer"
+	"mitmproxy/quesma/quesma/ui/internal/builder"
 	"mitmproxy/quesma/tracing"
 	"regexp"
 	"sort"
@@ -69,7 +69,7 @@ func (qmc *QuesmaManagementConsole) generateReportForUnsupportedRequests() []byt
 		return slice[i].count > slice[j].count
 	})
 
-	var buffer buffer.HtmlBuffer
+	var buffer builder.HtmlBuffer
 	buffer.Html("<br />")
 	buffer.Html(`<h3>Unsupported queries by type</h3>`)
 	buffer.Html(`<ul id="unsupported-queries-stats">`)