From 29da3a9889e38fe3e1a33398907f8a830db53f9b Mon Sep 17 00:00:00 2001 From: Tine Date: Tue, 13 Feb 2024 22:39:34 +0100 Subject: [PATCH] refactor: simplify reverse proxy and style --- cmd/worker/main.go | 9 ++- fly.toml | 2 +- internal/config.go | 4 +- internal/handlers/temporal.go | 53 +++++---------- web/static/css/main.css | 36 +++++----- web/static/css/tailwind.css | 103 ++++++++++++++--------------- web/templates/components/base.tmpl | 4 +- web/templates/pages/index.tmpl | 8 +-- 8 files changed, 101 insertions(+), 118 deletions(-) diff --git a/cmd/worker/main.go b/cmd/worker/main.go index 8b93381..9d3b1c9 100644 --- a/cmd/worker/main.go +++ b/cmd/worker/main.go @@ -3,14 +3,18 @@ package main import ( "log" + "code.tjo.space/mentos1386/zdravko/internal" "go.temporal.io/sdk/client" "go.temporal.io/sdk/worker" ) func main() { + config := internal.NewConfig() + // Initialize a Temporal Client // Specify the Namespace in the Client options clientOptions := client.Options{ + HostPort: config.TEMPORAL_SERVER_HOST, Namespace: "default", } temporalClient, err := client.Dial(clientOptions) @@ -18,8 +22,11 @@ func main() { log.Fatalln("Unable to create a Temporal Client", err) } defer temporalClient.Close() + // Create a new Worker - yourWorker := worker.New(temporalClient, "default-boilerplate-task-queue-local", worker.Options{}) + // TODO: Maybe identify by region or something? + yourWorker := worker.New(temporalClient, "default", worker.Options{}) + // Register Workflows //yourWorker.RegisterWorkflow(workflows.default) // Register Activities diff --git a/fly.toml b/fly.toml index 43f88cd..76f414a 100644 --- a/fly.toml +++ b/fly.toml @@ -21,7 +21,7 @@ primary_region = 'waw' [processes] server = "server" - #worker = "worker" + worker = "worker" temporal = "temporal" [http_service] diff --git a/internal/config.go b/internal/config.go index 33ee858..796ca26 100644 --- a/internal/config.go +++ b/internal/config.go @@ -60,7 +60,7 @@ func NewConfig() *Config { TEMPORAL_DATABASE_PATH: getEnv("TEMPORAL_DATABASE_PATH", "temporal.db"), TEMPORAL_LISTEN_ADDRESS: getEnv("TEMPORAL_LISTEN_ADDRESS", "0.0.0.0"), - TEMPORAL_UI_HOST: getEnv("TEMPORAL_UI_HOST", "localhost:8223"), - TEMPORAL_SERVER_HOST: getEnv("TEMPORAL_SERVER_HOST", "localhost:7233"), + TEMPORAL_UI_HOST: getEnv("TEMPORAL_UI_HOST", "127.0.0.1:8223"), + TEMPORAL_SERVER_HOST: getEnv("TEMPORAL_SERVER_HOST", "127.0.0.1:7233"), } } diff --git a/internal/handlers/temporal.go b/internal/handlers/temporal.go index 5da4938..2c5b988 100644 --- a/internal/handlers/temporal.go +++ b/internal/handlers/temporal.go @@ -1,49 +1,26 @@ package handlers import ( - "io" "net/http" + "net/http/httputil" + "net/url" ) -var customTransport = http.DefaultTransport - func (h *BaseHandler) Temporal(w http.ResponseWriter, r *http.Request, user *AuthenticatedUser) { - // Create a new HTTP request with the same method, URL, and body as the original request - targetURL := r.URL - targetURL.Host = h.config.TEMPORAL_UI_HOST - targetURL.Scheme = "http" + proxy := httputil.NewSingleHostReverseProxy(&url.URL{ + Host: h.config.TEMPORAL_UI_HOST, + Scheme: "http", + }) - proxyReq, err := http.NewRequest(r.Method, targetURL.String(), r.Body) - if err != nil { - http.Error(w, "Error creating proxy request", http.StatusInternalServerError) - return + // TODO: Maybe add a "navbar" in html to go back to Zdravko? + proxy.ModifyResponse = func(response *http.Response) error { + // Read and update the response here + + // The response here is response from server (proxy B if this is at proxy A) + // It is a pointer, so can be modified to update in place + // It will not be called if Proxy B is unreachable + return nil } - // Copy the headers from the original request to the proxy request - for name, values := range r.Header { - for _, value := range values { - proxyReq.Header.Add(name, value) - } - } - - // Send the proxy request using the custom transport - resp, err := customTransport.RoundTrip(proxyReq) - if err != nil { - http.Error(w, "Error sending proxy request", http.StatusInternalServerError) - return - } - defer resp.Body.Close() - - // Copy the headers from the proxy response to the original response - for name, values := range resp.Header { - for _, value := range values { - w.Header().Add(name, value) - } - } - - // Set the status code of the original response to the status code of the proxy response - w.WriteHeader(resp.StatusCode) - - // Copy the body of the proxy response to the original response - io.Copy(w, resp.Body) + proxy.ServeHTTP(w, r) } diff --git a/web/static/css/main.css b/web/static/css/main.css index 992ef74..8994e85 100644 --- a/web/static/css/main.css +++ b/web/static/css/main.css @@ -12,35 +12,37 @@ @tailwind components; @tailwind utilities; -.btn { - @apply font-bold py-2 px-4 rounded; +.navbar { + @apply justify-center flex space-x-2 mt-10; } -.btn:hover { +.navbar a { + @apply font-bold py-2 px-4 rounded-lg; +} +.navbar a:hover { @apply bg-gray-200 shadow-inner; } -.btn-active { +.navbar a:focus { + @apply outline-none ring-2 ring-blue-700 text-blue-700; +} +.navbar a.active { @apply bg-gray-300 text-black shadow; } -.btn-active:hover { +.navbar a.active:hover { @apply shadow; } .sidebar { - @apply w-48 h-fit text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg; + @apply w-48 grid gap-2 h-fit text-sm font-medium text-gray-900; } - -.sidebar li:first-child a { - @apply rounded-t-lg; -} - -.sidebar li:last-child a { - @apply rounded-b-lg; -} - .sidebar a { - @apply w-full block px-4 py-2 border-b border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700; + @apply w-full block rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700; +} +.sidebar a:focus { + @apply outline-none ring-2 ring-blue-700 text-blue-700; +} +.sidebar a:hover { + @apply shadow-inner bg-gray-200 text-blue-700; } - .sidebar a.active { @apply bg-blue-700 text-white; } diff --git a/web/static/css/tailwind.css b/web/static/css/tailwind.css index 7934c9d..1814501 100644 --- a/web/static/css/tailwind.css +++ b/web/static/css/tailwind.css @@ -607,10 +607,6 @@ video { margin-inline-end: 0.5rem; } -.mt-10 { - margin-top: 2.5rem; -} - .mt-20 { margin-top: 5rem; } @@ -675,10 +671,6 @@ video { align-items: center; } -.justify-center { - justify-content: center; -} - .gap-2 { gap: 0.5rem; } @@ -691,12 +683,6 @@ video { gap: 1px; } -.space-x-2 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(0.5rem * var(--tw-space-x-reverse)); - margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); -} - .justify-self-start { justify-self: start; } @@ -731,9 +717,9 @@ video { background-color: rgb(134 239 172 / var(--tw-bg-opacity)); } -.bg-green-500 { +.bg-green-400 { --tw-bg-opacity: 1; - background-color: rgb(34 197 94 / var(--tw-bg-opacity)); + background-color: rgb(74 222 128 / var(--tw-bg-opacity)); } .bg-red-300 { @@ -741,9 +727,9 @@ video { background-color: rgb(252 165 165 / var(--tw-bg-opacity)); } -.bg-red-500 { +.bg-red-400 { --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(248 113 113 / var(--tw-bg-opacity)); } .p-4 { @@ -797,8 +783,20 @@ video { text-decoration-line: underline; } -.btn { - border-radius: 0.25rem; +.navbar { + margin-top: 2.5rem; + display: flex; + justify-content: center; +} + +.navbar > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.5rem * var(--tw-space-x-reverse)); + margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); +} + +.navbar a { + border-radius: 0.5rem; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; @@ -806,7 +804,7 @@ video { font-weight: 700; } -.btn:hover { +.navbar a:hover { --tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity)); --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); @@ -814,7 +812,19 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.btn-active { +.navbar a:focus { + --tw-text-opacity: 1; + color: rgb(29 78 216 / var(--tw-text-opacity)); + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); + --tw-ring-opacity: 1; + --tw-ring-color: rgb(29 78 216 / var(--tw-ring-opacity)); +} + +.navbar a.active { --tw-bg-opacity: 1; background-color: rgb(209 213 219 / var(--tw-bg-opacity)); --tw-text-opacity: 1; @@ -824,22 +834,18 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.btn-active:hover { +.navbar a.active:hover { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .sidebar { + display: grid; height: -moz-fit-content; height: fit-content; width: 12rem; - border-radius: 0.5rem; - border-width: 1px; - --tw-border-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-border-opacity)); - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + gap: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; @@ -847,35 +853,16 @@ video { color: rgb(17 24 39 / var(--tw-text-opacity)); } -.sidebar li:first-child a { - border-top-left-radius: 0.5rem; - border-top-right-radius: 0.5rem; -} - -.sidebar li:last-child a { - border-bottom-right-radius: 0.5rem; - border-bottom-left-radius: 0.5rem; -} - .sidebar a { display: block; width: 100%; - border-bottom-width: 1px; - --tw-border-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-border-opacity)); + border-radius: 0.5rem; padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; } -.sidebar a:hover { - --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)); - --tw-text-opacity: 1; - color: rgb(29 78 216 / var(--tw-text-opacity)); -} - .sidebar a:focus { --tw-text-opacity: 1; color: rgb(29 78 216 / var(--tw-text-opacity)); @@ -888,6 +875,16 @@ video { --tw-ring-color: rgb(29 78 216 / var(--tw-ring-opacity)); } +.sidebar a:hover { + --tw-bg-opacity: 1; + background-color: rgb(229 231 235 / var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgb(29 78 216 / var(--tw-text-opacity)); + --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + .sidebar a.active { --tw-bg-opacity: 1; background-color: rgb(29 78 216 / var(--tw-bg-opacity)); @@ -914,14 +911,14 @@ video { margin-bottom: 0.75rem; } -.hover\:bg-green-700:hover { +.hover\:bg-green-500:hover { --tw-bg-opacity: 1; - background-color: rgb(21 128 61 / var(--tw-bg-opacity)); + background-color: rgb(34 197 94 / var(--tw-bg-opacity)); } -.hover\:bg-red-700:hover { +.hover\:bg-red-500:hover { --tw-bg-opacity: 1; - background-color: rgb(185 28 28 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity)); } .hover\:underline:hover { diff --git a/web/templates/components/base.tmpl b/web/templates/components/base.tmpl index 78c6834..03491cf 100644 --- a/web/templates/components/base.tmpl +++ b/web/templates/components/base.tmpl @@ -16,13 +16,13 @@ -