adding version display to UI

This commit also contains an update on the intensity of the orange color for the 'in progress' status.
datarootsio · Oct 8, 2024 · d775552 · d775552
1 parent abdddf7
commit d775552
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 48 deletions.
diff --git a/main.go b/main.go
@@ -4,7 +4,8 @@ import (
 	"github.com/datarootsio/cheek/cmd"
 )
 
-//go:generate npm run build
 func main() {
+
+	// Execute any command line commands (if applicable)
 	cmd.Execute()
 }
diff --git a/pkg/http.go b/pkg/http.go
@@ -23,6 +23,12 @@ type Response struct {
 	Type   string `json:"type,omitempty"`
 }
 
+var version string // This will be injected at build time
+
+type VersionResponse struct {
+	Version string `json:"version"`
+}
+
 type ScheduleStatusResponse struct {
 	Status         map[string]int `json:"status,omitempty"`
 	FailedRunCount int            `json:"failed_run_count,omitempty"`
@@ -57,6 +63,7 @@ func setupRouter(s *Schedule) *httprouter.Router {
 	router.POST("/api/jobs/:jobId/trigger", postTrigger(s))
 	router.GET("/api/core/logs", getCoreLogs(s))
 	router.GET("/api/schedule/status", getScheduleStatus(s))
+	router.GET("/api/version", getVersion) // Add version endpoint
 
 	fileServer := http.FileServer(http.FS(fsys()))
 	router.GET("/static/*filepath", func(w http.ResponseWriter, r *http.Request, _ httprouter.Params) {
@@ -287,3 +294,11 @@ func postTrigger(s *Schedule) httprouter.Handle {
 		}
 	}
 }
+
+func getVersion(w http.ResponseWriter, r *http.Request, _ httprouter.Params) {
+	versionResponse := VersionResponse{Version: version}
+	w.Header().Set("Content-Type", "application/json")
+	if err := json.NewEncoder(w).Encode(versionResponse); err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+	}
+}
diff --git a/pkg/web_assets/static/script.js b/pkg/web_assets/static/script.js
@@ -137,4 +137,23 @@ function truncateDateTime(dateTimeStr) {
   // Extract the matched part
   const match = dateTimeStr.match(regex);
   return match ? match[1] : null;
-}
+}
+
+// Function to fetch version from the server
+async function fetchVersion() {
+  try {
+    const response = await fetch('/api/version');
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+    const data = await response.json();
+    document.getElementById('version').textContent = `Version: ${data.version}`;
+  } catch (error) {
+    console.error('Fetch error:', error);
+  }
+}
+
+// Fetch version when the DOM is fully loaded
+document.addEventListener('DOMContentLoaded', () => {
+  fetchVersion(); // Call the function when the DOM is fully loaded
+});
diff --git a/pkg/web_assets/static/styles.css b/pkg/web_assets/static/styles.css
@@ -3,4 +3,14 @@
   src: url('/static/GeistMonoVariableVF.woff2') format('woff2');
   font-weight: 100 900;
   font-style: normal;
+}
+#version {
+  margin-top: 1rem;
+  padding: 0.5rem;
+  background-color: #1e293b; /* slate-800 color */
+  color: #94a3b8; /* slate-300 color */
+  text-align: center;
+  border-radius: 0.375rem; /* rounded-md */
+  font-size: 0.875rem; /* text-sm */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* subtle shadow */
 }
diff --git a/pkg/web_assets/templates/base.html b/pkg/web_assets/templates/base.html
@@ -1,51 +1,62 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>cheek</title>
+    <link rel="icon" type="image/x-icon" href="https://storage.googleapis.com/cheek-scheduler/cheek-64.png" />
+    <link rel="stylesheet" href="/static/styles.css" />
+    <link rel="stylesheet" href="/static/tailwind.css" />
+    <script src="//unpkg.com/alpinejs" defer></script>
+    <script type="text/javascript" src="/static/script.js"></script>
+  </head>
+  <body class="bg-slate-800">
+    <div class="max-w-4xl mx-auto">
+      <!-- Header Section -->
+      <div class="flex pt-6 items-end">
+        <a
+          class="drop-shadow-md text-3xl font-extrabold bg-gradient-to-r from-lime-200 to-blue-400 bg-clip-text text-transparent hover:from-red-400 hover:via-yellow-300 hover:via-green-500 hover:to-lime-200 hover:bg-gradient-to-l hover:animate-pulse"
+          href="/"
+          >cheek</a
+        >
+
+        <div class="grow"></div>
+
+        <!-- GitHub Icon and Version Information -->
+        <div class="col is-vertical-align is-right flex items-center space-x-4">
+          <!-- Version Information -->
+          <div id="version" class="text-gray-400 text-sm">Version 1.0.0</div>
+
+          <!-- GitHub Icon -->
+          <a class="icon-ahref fill-lime-200 hover:fill-slate-200" href="https://github.com/datarootsio/cheek">
+            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+              <title>logo-github</title>
+              <g>
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M16,0.4c-8.8,0-16,7.2-16,16c0,7.1,4.6,13.1,10.9,15.2 c0.8,0.1,1.1-0.3,1.1-0.8c0-0.4,0-1.4,0-2.7c-4.5,1-5.4-2.1-5.4-2.1c-0.7-1.8-1.8-2.3-1.8-2.3c-1.5-1,0.1-1,0.1-1 c1.6,0.1,2.5,1.6,2.5,1.6c1.4,2.4,3.7,1.7,4.7,1.3c0.1-1,0.6-1.7,1-2.1c-3.6-0.4-7.3-1.8-7.3-7.9c0-1.7,0.6-3.2,1.6-4.3 c-0.2-0.4-0.7-2,0.2-4.2c0,0,1.3-0.4,4.4,1.6c1.3-0.4,2.6-0.5,4-0.5c1.4,0,2.7,0.2,4,0.5C23.1,6.6,24.4,7,24.4,7 c0.9,2.2,0.3,3.8,0.2,4.2c1,1.1,1.6,2.5,1.6,4.3c0,6.1-3.7,7.5-7.3,7.9c0.6,0.5,1.1,1.5,1.1,3c0,2.1,0,3.9,0,4.4 c0,0.4,0.3,0.9,1.1,0.8C27.4,29.5,32,23.5,32,16.4C32,7.6,24.8,0.4,16,0.4z"
+                ></path>
+              </g>
+            </svg>
+          </a>
+        </div>
+      </div>
 
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>cheek</title>
-  <link rel="icon" type="image/x-icon" href="https://storage.googleapis.com/cheek-scheduler/cheek-64.png">
-  <link rel="stylesheet" href="/static/styles.css" />
-  <link rel="stylesheet" href="/static/tailwind.css" />
-  <script src="//unpkg.com/alpinejs" defer></script>
-  <script type="text/javascript" src="/static/script.js"></script>
-</head>
-
-<body class="bg-slate-800">
-  <div class="max-w-4xl mx-auto">
-    <div class="flex pt-6 items-end">
-      <a class="drop-shadow-md text-3xl font-extrabold text-center bg-gradient-to-r from-lime-200 to-blue-400 bg-clip-text text-transparent hover:from-red-400 hover:via-yellow-300 hover:via-green-500 hover:to-lime-200 hover:bg-gradient-to-l hover:animate-pulse"
-        href="/">cheek</a>
-      <div class="grow"></div>
-      <div class="col is-vertical-align is-right">
-        <a class="icon-ahref fill-lime-200 hover:fill-slate-200" href="https://github.com/datarootsio/cheek">
-          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-            <title>logo-github</title>
-            <g>
-              <path fill-rule="evenodd" clip-rule="evenodd"
-                d="M16,0.4c-8.8,0-16,7.2-16,16c0,7.1,4.6,13.1,10.9,15.2 c0.8,0.1,1.1-0.3,1.1-0.8c0-0.4,0-1.4,0-2.7c-4.5,1-5.4-2.1-5.4-2.1c-0.7-1.8-1.8-2.3-1.8-2.3c-1.5-1,0.1-1,0.1-1 c1.6,0.1,2.5,1.6,2.5,1.6c1.4,2.4,3.7,1.7,4.7,1.3c0.1-1,0.6-1.7,1-2.1c-3.6-0.4-7.3-1.8-7.3-7.9c0-1.7,0.6-3.2,1.6-4.3 c-0.2-0.4-0.7-2,0.2-4.2c0,0,1.3-0.4,4.4,1.6c1.3-0.4,2.6-0.5,4-0.5c1.4,0,2.7,0.2,4,0.5C23.1,6.6,24.4,7,24.4,7 c0.9,2.2,0.3,3.8,0.2,4.2c1,1.1,1.6,2.5,1.6,4.3c0,6.1-3.7,7.5-7.3,7.9c0.6,0.5,1.1,1.5,1.1,3c0,2.1,0,3.9,0,4.4 c0,0.4,0.3,0.9,1.1,0.8C27.4,29.5,32,23.5,32,16.4C32,7.6,24.8,0.4,16,0.4z">
-              </path>
-            </g>
-          </svg>
-        </a>
-
+      <!-- Navigation Links Section -->
+      <div class="flex flex-wrap gap-x-2 gap-y-2 mt-4" x-data>
+        <a class="text-gray-400 hover:text-lime-200" href="/core/logs">_</a>
+        <template x-for="job in $store.jobs.jobs">
+          <a
+            :class="job.name === $store.job.jobName ? 'text-lime-200' : 'text-gray-200 hover:text-lime-200'"
+            :href="`/jobs/${job.name}/latest`"
+            x-text="job.name"
+          ></a>
+        </template>
       </div>
-    </div>
-    <div class="flex flex-wrap gap-x-2 gap-y-2" x-data>
-      <a class="text-gray-400 hover:text-lime-200'"
-          href="/core/logs">_</a>
-      <template x-for="job in $store.jobs.jobs">
-        <a :class="job.name === $store.job.jobName ? 'text-lime-200' : 'text-gray-200 hover:text-lime-200'"
-          :href="`/jobs/${job.name}/latest`" x-text="job.name"></a>
 
-      </template>
+      <!-- Content Section -->
+      <div>{{block "content" .}}{{end}}</div>
     </div>
-
-    {{block "content" .}}{{end}}
-
-  </div>
-</body>
-
-
-</html>
+  </body>
+</html>
diff --git a/pkg/web_assets/templates/overview.html b/pkg/web_assets/templates/overview.html
@@ -9,7 +9,7 @@
               :title="`${truncateDateTime(run.triggered_at)}`">
 
               <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"
-                :class="run.status === 0 ? 'fill-emerald-500' : run.status === undefined ? 'fill-orange-500' : 'fill-red-500'">
+                :class="run.status === 0 ? 'fill-emerald-600' : run.status === undefined ? 'fill-orange-300' : 'fill-red-600'">
                 <g>
                   <path
                     d="M6.03 1.01c-2.78 0-5.03 2.24-5.03 5.02s2.24 5.03 5.03 5.03 5.03-2.24 5.02-5.03-2.24-5.03-5.02-5.02z">