feat: trying to setup building blocks

internal/handlers/settings.go

@@ -8,10 +8,15 @@ import (
 	"github.com/labstack/echo/v4"
 )
 
+type SettingsSidebarGroup struct {
+	Group string
+	Pages []*components.Page
+}
+
 type Settings struct {
 	*components.Base
 	SettingsSidebarActive *components.Page
-	SettingsSidebar       []*components.Page
+	SettingsSidebar       []SettingsSidebarGroup
 	User                  *AuthenticatedUser
 	SettingsBreadcrumbs   []*components.Page
 }
@@ -23,7 +28,7 @@ func NewSettings(user *AuthenticatedUser, page *components.Page, breadCrumbs []*
 			Navbar:       Pages,
 		},
 		SettingsSidebarActive: page,
-		SettingsSidebar:       SettingsNavbar,
+		SettingsSidebar:       SettingsSidebar,
 		SettingsBreadcrumbs:   breadCrumbs,
 		User:                  user,
 	}
@@ -31,10 +36,11 @@ func NewSettings(user *AuthenticatedUser, page *components.Page, breadCrumbs []*
 
 var SettingsPages = []*components.Page{
 	{Path: "/settings", Title: "Overview", Breadcrumb: "Overview"},
-	{Path: "/settings/targets", Title: "Targets", Breadcrumb: "Monitors"},
+	{Path: "/settings/targets", Title: "Incidents", Breadcrumb: "Incidents"},
+	{Path: "/settings/targets", Title: "Targets", Breadcrumb: "Targets"},
 	{Path: "/settings/targets/create", Title: "Targets Create", Breadcrumb: "Create"},
-	{Path: "/settings/monitors", Title: "Monitors", Breadcrumb: "Monitors"},
+	{Path: "/settings/monitors", Title: "Checks", Breadcrumb: "Checks"},
-	{Path: "/settings/monitors/create", Title: "Monitors Create", Breadcrumb: "Create"},
+	{Path: "/settings/monitors/create", Title: "Checks Create", Breadcrumb: "Create"},
 	{Path: "/settings/worker-groups", Title: "Worker Groups", Breadcrumb: "Worker Groups"},
 	{Path: "/settings/worker-groups/create", Title: "Worker Groups Create", Breadcrumb: "Create"},
 	{Path: "/settings/notifications", Title: "Notifications", Breadcrumb: "Notifications"},
@@ -45,15 +51,41 @@ var SettingsPages = []*components.Page{
 	{Path: "/oauth2/logout", Title: "Logout", Breadcrumb: "Logout"},
 }
 
-var SettingsNavbar = []*components.Page{
+var SettingsSidebar = []SettingsSidebarGroup{
-	GetPageByTitle(SettingsPages, "Overview"),
+	{
-	GetPageByTitle(SettingsPages, "Targets"),
+		Group: "Overview",
-	GetPageByTitle(SettingsPages, "Monitors"),
+		Pages: []*components.Page{
-	GetPageByTitle(SettingsPages, "Triggers"),
+			GetPageByTitle(SettingsPages, "Overview"),
-	GetPageByTitle(SettingsPages, "Notifications"),
+		},
-	GetPageByTitle(SettingsPages, "Worker Groups"),
+	},
-	GetPageByTitle(SettingsPages, "Temporal"),
+	{
-	GetPageByTitle(SettingsPages, "Logout"),
+		Group: "Monitor",
+		Pages: []*components.Page{
+			GetPageByTitle(SettingsPages, "Targets"),
+			GetPageByTitle(SettingsPages, "Checks"),
+		},
+	},
+	{
+		Group: "Decide",
+		Pages: []*components.Page{
+			GetPageByTitle(SettingsPages, "Triggers"),
+		},
+	},
+	{
+		Group: "Notify",
+		Pages: []*components.Page{
+			GetPageByTitle(SettingsPages, "Incidents"),
+			GetPageByTitle(SettingsPages, "Notifications"),
+		},
+	},
+	{
+		Group: "Manage",
+		Pages: []*components.Page{
+			GetPageByTitle(SettingsPages, "Worker Groups"),
+			GetPageByTitle(SettingsPages, "Temporal"),
+			GetPageByTitle(SettingsPages, "Logout"),
+		},
+	},
 }
 
 type SettingsOverview struct {

internal/handlers/settingsmonitors.go

@@ -86,8 +86,8 @@ func (h *BaseHandler) SettingsMonitorsGET(c echo.Context) error {
 	return c.Render(http.StatusOK, "settings_monitors.tmpl", &SettingsMonitors{
 		Settings: NewSettings(
 			cc.Principal.User,
-			GetPageByTitle(SettingsPages, "Monitors"),
+			GetPageByTitle(SettingsPages, "Checks"),
-			[]*components.Page{GetPageByTitle(SettingsPages, "Monitors")},
+			[]*components.Page{GetPageByTitle(SettingsPages, "Checks")},
 		),
 		Monitors:      monitorsByGroup,
 		MonitorGroups: monitorGroups,
@@ -127,9 +127,9 @@ func (h *BaseHandler) SettingsMonitorsDescribeGET(c echo.Context) error {
 	return c.Render(http.StatusOK, "settings_monitors_describe.tmpl", &SettingsMonitor{
 		Settings: NewSettings(
 			cc.Principal.User,
-			GetPageByTitle(SettingsPages, "Monitors"),
+			GetPageByTitle(SettingsPages, "Checks"),
 			[]*components.Page{
-				GetPageByTitle(SettingsPages, "Monitors"),
+				GetPageByTitle(SettingsPages, "Checks"),
 				{
 					Path:       fmt.Sprintf("/settings/monitors/%s", slug),
 					Title:      "Describe",
@@ -260,10 +260,10 @@ func (h *BaseHandler) SettingsMonitorsCreateGET(c echo.Context) error {
 	return c.Render(http.StatusOK, "settings_monitors_create.tmpl", &SettingsMonitorCreate{
 		Settings: NewSettings(
 			cc.Principal.User,
-			GetPageByTitle(SettingsPages, "Monitors"),
+			GetPageByTitle(SettingsPages, "Checks"),
 			[]*components.Page{
-				GetPageByTitle(SettingsPages, "Monitors"),
+				GetPageByTitle(SettingsPages, "Checks"),
-				GetPageByTitle(SettingsPages, "Monitors Create"),
+				GetPageByTitle(SettingsPages, "Checks Create"),
 			},
 		),
 		Example: h.examples.Monitor,

web/static/css/tailwind.css

@@ -974,6 +974,11 @@ video {
   background-color: rgb(74 222 128 / var(--tw-bg-opacity));
 }
 
+.bg-orange-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(253 186 116 / var(--tw-bg-opacity));
+}
+
 .bg-red-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 226 226 / var(--tw-bg-opacity));
@@ -1183,6 +1188,11 @@ video {
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
+.text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+
 .text-gray-700 {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));

web/templates/components/settings.tmpl

@@ -10,35 +10,49 @@
   <div
     class="md:px-4 lg:px-8 mx-auto mt-8 w-full max-w-screen-xl lg:mt-20 grid grid-cols-1 lg:grid-cols-[min-content_minmax(0,1fr)] gap-8"
   >
-    <ul class="sidebar">
+    <ul class="sidebar gap-4">
       {{ range .SettingsSidebar }}
         <li>
-          <a
+          <p
-            {{ $active := eq .Path $path }}
+            class="mb-2 text-xs font-semibold text-gray-600 uppercase tracking-wider"
-            {{ if $active }}aria-current="true"{{ end }}
-            href="{{ .Path }}"
-            class="{{ if $active }}active{{ end }}"
-            {{ if eq .Title "Temporal" }}
-              target="_blank" rel="noreferrer noopener"
-            {{ end }}
           >
-            {{ .Title }}
+            {{ .Group }}
-            {{ if eq .Title "Targets" }}
+          </p>
-              <span class="text-slate-400">(3)</span>
+          <ul>
+            {{ range .Pages }}
+              <li>
+                <a
+                  {{ $active := eq .Path $path }}
+                  {{ if $active }}aria-current="true"{{ end }}
+                  href="{{ .Path }}"
+                  class="{{ if $active }}active{{ end }}"
+                  {{ if eq .Title "Temporal" }}
+                    target="_blank" rel="noreferrer noopener"
+                  {{ end }}
+                >
+                  {{ .Title }}
+                  {{ if eq .Title "Incidents" }}
+                    <span class="text-slate-400">(3)</span>
+                  {{ end }}
+                  {{ if eq .Title "Targets" }}
+                    <span class="text-slate-400">(3)</span>
+                  {{ end }}
+                  {{ if eq .Title "Checks" }}
+                    <span class="text-slate-400">(3)</span>
+                  {{ end }}
+                  {{ if eq .Title "Triggers" }}
+                    <span class="text-slate-400">(3)</span>
+                  {{ end }}
+                  {{ if eq .Title "Notifications" }}
+                    <span class="text-slate-400">(3)</span>
+                  {{ end }}
+                  {{ if eq .Title "Worker Groups" }}
+                    <span class="text-slate-400">(3)</span>
+                  {{ end }}
+                </a>
+              </li>
             {{ end }}
-            {{ if eq .Title "Monitors" }}
+          </ul>
-              <span class="text-slate-400">(3)</span>
-            {{ end }}
-            {{ if eq .Title "Triggers" }}
-              <span class="text-slate-400">(3)</span>
-            {{ end }}
-            {{ if eq .Title "Notifications" }}
-              <span class="text-slate-400">(3)</span>
-            {{ end }}
-            {{ if eq .Title "Worker Groups" }}
-              <span class="text-slate-400">(3)</span>
-            {{ end }}
-          </a>
         </li>
       {{ end }}
     </ul>

web/templates/pages/index.tmpl

@@ -42,13 +42,26 @@
             {{ Now.UTC.Format "Jan 02 at 15:04 MST" }}
           </p>
         </div>
-      {{ else }}
+      {{ else if eq .Status "INCIDENT" }}
         <div class="flex flex-col items-center">
           <svg
             class="feather h-20 w-20 rounded-full bg-red-300 p-4 overflow-visible"
           >
             <use href="/static/icons/feather-sprite.svg#alert-triangle" />
           </svg>
+          <h1 class="text-gray-700 mt-4">Incident in progress</h1>
+          <p class="text-gray-700 text-sm">
+            Last updated on
+            {{ Now.UTC.Format "Jan 02 at 15:04 MST" }}
+          </p>
+        </div>
+      {{ else }}
+        <div class="flex flex-col items-center">
+          <svg
+            class="feather h-20 w-20 rounded-full bg-orange-300 p-4 overflow-visible"
+          >
+            <use href="/static/icons/feather-sprite.svg#alert-triangle" />
+          </svg>
           <h1 class="text-gray-700 mt-4">Degraded performance</h1>
           <p class="text-gray-700 text-sm">
             Last updated on