refactor: simplify reverse proxy and style

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

fly.toml

@@ -21,7 +21,7 @@ primary_region = 'waw'
 
 [processes]
   server = "server"
-  #worker = "worker"
+  worker = "worker"
   temporal = "temporal"
 
 [http_service]

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_UI_HOST:        getEnv("TEMPORAL_UI_HOST", "127.0.0.1:8223"),
-		TEMPORAL_SERVER_HOST:    getEnv("TEMPORAL_SERVER_HOST", "localhost:7233"),
+		TEMPORAL_SERVER_HOST:    getEnv("TEMPORAL_SERVER_HOST", "127.0.0.1:7233"),
 	}
 }

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
+	proxy := httputil.NewSingleHostReverseProxy(&url.URL{
-	targetURL := r.URL
+		Host:   h.config.TEMPORAL_UI_HOST,
-	targetURL.Host = h.config.TEMPORAL_UI_HOST
+		Scheme: "http",
-	targetURL.Scheme = "http"
+	})
 
-	proxyReq, err := http.NewRequest(r.Method, targetURL.String(), r.Body)
+	// TODO: Maybe add a "navbar" in html to go back to Zdravko?
-	if err != nil {
+	proxy.ModifyResponse = func(response *http.Response) error {
-		http.Error(w, "Error creating proxy request", http.StatusInternalServerError)
+		// Read and update the response here
-		return
+
+		// 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
+	proxy.ServeHTTP(w, r)
-	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)
 }

web/static/css/main.css

@@ -12,35 +12,37 @@
 @tailwind components;
 @tailwind utilities;
 
-.btn {
+.navbar {
-  @apply font-bold py-2 px-4 rounded;
+  @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;
 }

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 {
+.navbar {
-  border-radius: 0.25rem;
+  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;
+  gap: 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));
   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;
+  border-radius: 0.5rem;
-  --tw-border-opacity: 1;
-  border-color: rgb(229 231 235 / var(--tw-border-opacity));
   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 {

web/templates/components/base.tmpl

@@ -16,13 +16,13 @@
     <link rel="stylesheet" href="/static/css/tailwind.css">
   </head>
   <body class="bg-gray-100">
-    <nav class="justify-center flex space-x-2 mt-10">
+    <nav class="navbar">
       {{range .Pages}}
       <a
         {{$active := eq .Path $path }}
         {{if $active}}aria-current="true"{{end}}
         href="{{.Path}}"
-        class="btn {{if $active}}btn-active{{end}}">
+        class="{{if $active}}active{{end}}">
           {{.Title}}
       </a>
       {{end}}

web/templates/pages/index.tmpl

@@ -14,9 +14,9 @@
     <div class="grid grid-cols-2 gap-2">
       <div class="flex items-center">
         {{ if .Healthy }}
-        <span class="flex w-3 h-3 me-2 bg-green-500 rounded-full"></span>
+        <span class="flex w-3 h-3 me-2 bg-green-400 rounded-full"></span>
         {{ else }}
-        <span class="flex w-3 h-3 me-2 bg-red-500 rounded-full"></span>
+        <span class="flex w-3 h-3 me-2 bg-red-400 rounded-full"></span>
         {{ end }}
         <p>{{ .Domain }}</p>
       </div>
@@ -24,9 +24,9 @@
       <div class="grid gap-px col-span-2 grid-flow-col h-8 rounded overflow-hidden">
         {{ range .History }}
         {{ if . }}
-        <div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
+        <div class="bg-green-400 hover:bg-green-500 flex-auto"></div>
         {{ else }}
-        <div class="bg-red-500 hover:bg-red-700 flex-auto"></div>
+        <div class="bg-red-400 hover:bg-red-500 flex-auto"></div>
         {{ end }}
         {{ end }}
      </div>