feat(settings): nice pills in tables

internal/handlers/settingshealthchecks.go

@@ -90,7 +90,7 @@ func (h *BaseHandler) SettingsHealthchecksCreatePOST(c echo.Context) error {
 		Name:         c.FormValue("name"),
 		Slug:         slug.Make(c.FormValue("name")),
 		Schedule:     c.FormValue("schedule"),
-		WorkerGroups: strings.Split(c.FormValue("workergroups"), ","),
+		WorkerGroups: strings.Split(c.FormValue("workergroups"), " "),
 		Script:       c.FormValue("script"),
 	}
 

web/static/css/main.css

@@ -12,6 +12,11 @@
 @tailwind components;
 @tailwind utilities;
 
+.link,
+p > a {
+  @apply font-medium text-blue-700 hover:underline;
+}
+
 .navbar {
   @apply justify-center flex flex-wrap space-x-2 gap-2 mt-10;
 }

web/static/css/tailwind.css

@@ -852,6 +852,11 @@ video {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
+.bg-blue-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
+}
+
 .bg-blue-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(29 78 216 / var(--tw-bg-opacity));
@@ -1059,9 +1064,9 @@ video {
   color: rgb(37 99 235 / var(--tw-text-opacity));
 }
 
-.text-blue-700 {
+.text-blue-800 {
   --tw-text-opacity: 1;
-  color: rgb(29 78 216 / var(--tw-text-opacity));
+  color: rgb(30 64 175 / var(--tw-text-opacity));
 }
 
 .text-gray-400 {
@@ -1140,6 +1145,18 @@ video {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.link,
+p > a {
+  font-weight: 500;
+  --tw-text-opacity: 1;
+  color: rgb(29 78 216 / var(--tw-text-opacity));
+}
+
+.link:hover,
+p > a:hover {
+  text-decoration-line: underline;
+}
+
 .navbar {
   margin-top: 2.5rem;
   display: flex;

web/templates/pages/settings_healthchecks.tmpl

@@ -59,17 +59,27 @@
                 </th>
                 <td class="px-6 py-4">
                     {{range .WorkerGroups}}
+                      <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                       {{ . }}
+                      </span>
                     {{end}}
                 </td>
                 <td class="px-6 py-4">
-                    OK
+                  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
+                    SUCCESS
+                  </span>
+                  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
+                    FAILURE
+                  </span>
+                  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
+                    UNKNOWN
+                  </span>
                 </td>
                 <td class="px-6 py-4">
                     {{.Schedule}}
                 </td>
                 <td class="px-6 py-4">
-                    <a href="/settings/healthchecks/{{.Slug}}" class="font-medium text-blue-600 hover:underline">Details</a>
+                    <a href="/settings/healthchecks/{{.Slug}}" class="link">Details</a>
                 </td>
             </tr>
         </tbody>

web/templates/pages/settings_healthchecks_create.tmpl

@@ -15,7 +15,7 @@
     <div id="editor" class="block w-full h-96 rounded-lg border border-gray-300 overflow-hidden"></div>
     <p>
     Script is what determines the status of a service.
-    You can read more about it on <a target="_blank" href="https://k6.io/docs/using-k6/http-requests/" class="text-blue-700">k6 documentation</a>.
+    You can read more about it on <a target="_blank" href="https://k6.io/docs/using-k6/http-requests/">k6 documentation</a>.
     </p>
     <button type="submit" onclick="save()">Create</button>
   </form>

web/templates/pages/settings_healthchecks_describe.tmpl

@@ -15,7 +15,7 @@
     <div id="editor" class="block w-full h-96 rounded-lg border border-gray-300 overflow-hidden"></div>
     <p>
     Script is what determines the status of a service.
-    You can read more about it on <a target="_blank" href="https://k6.io/docs/using-k6/http-requests/" class="text-blue-700">k6 documentation</a>.
+    You can read more about it on <a target="_blank" href="https://k6.io/docs/using-k6/http-requests/">k6 documentation</a>.
     </p>
     <button type="submit" onclick="save()">Save</button>
   </form>

web/templates/pages/settings_workers.tmpl

@@ -55,13 +55,23 @@
                   {{.Name}}
               </th>
               <td class="px-6 py-4">
-                  {{.Group}}
+                  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
+                    {{.Group}}
+                  </span>
               </td>
               <td class="px-6 py-4">
-                  OK
+                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
+                  SUCCESS
+                </span>
+                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
+                  FAILURE
+                </span>
+                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
+                  UNKNOWN
+                </span>
               </td>
               <td class="px-6 py-4">
-                  <a href="/settings/workers/{{.Slug}}" class="font-medium text-blue-600 hover:underline">Details</a>
+                  <a href="/settings/workers/{{.Slug}}" class="link">Details</a>
               </td>
           </tr>
       </tbody>