From cfc5668c4839fe0ce165f2b61ef18c9ada7db04e Mon Sep 17 00:00:00 2001 From: Tine Date: Fri, 17 May 2024 21:54:14 +0200 Subject: [PATCH] feat: sidebar design --- internal/handlers/examples.yaml | 2 +- internal/handlers/index.go | 20 +++++------ internal/handlers/settings.go | 33 +++++++++++++++---- pkg/server/routes.go | 2 +- web/static/css/main.css | 4 +-- web/static/css/tailwind.css | 21 +++++++++--- web/templates/components/settings.tmpl | 19 +++++++++-- web/templates/pages/index.tmpl | 6 ++-- ...tings_overview.tmpl => settings_home.tmpl} | 0 web/templates/{tempaltes.go => templates.go} | 2 +- 10 files changed, 77 insertions(+), 32 deletions(-) rename web/templates/pages/{settings_overview.tmpl => settings_home.tmpl} (100%) rename web/templates/{tempaltes.go => templates.go} (96%) diff --git a/internal/handlers/examples.yaml b/internal/handlers/examples.yaml index 10b3255..a10878b 100644 --- a/internal/handlers/examples.yaml +++ b/internal/handlers/examples.yaml @@ -20,7 +20,7 @@ trigger: | } # Example monitor code -monitor: | +check: | import http from 'k6/http'; export const options = { diff --git a/internal/handlers/index.go b/internal/handlers/index.go index 930456d..bd43d31 100644 --- a/internal/handlers/index.go +++ b/internal/handlers/index.go @@ -15,8 +15,8 @@ type IndexData struct { *components.Base Checks map[string]ChecksAndStatus ChecksLength int - TimeRange string - Status models.CheckStatus + TimeRange string + Status models.CheckStatus } type Check struct { @@ -33,11 +33,11 @@ type HistoryItem struct { type History struct { List []HistoryItem - Uptime int + Uptime float64 } type ChecksAndStatus struct { - Status models.CheckStatus + Status models.CheckStatus Checks []*Check } @@ -47,8 +47,8 @@ func getDateString(date time.Time) string { func getHistory(history []*models.CheckHistory, period time.Duration, buckets int) *History { historyMap := map[string]models.CheckStatus{} - numOfSuccess := 0 - numTotal := 0 + numOfSuccess := 0.0 + numTotal := 0.0 for i := 0; i < buckets; i++ { dateString := getDateString(time.Now().Add(period * time.Duration(-i)).Truncate(period)) @@ -88,9 +88,9 @@ func getHistory(history []*models.CheckHistory, period time.Duration, buckets in } } - uptime := 0 + uptime := 0.0 if numTotal > 0 { - uptime = 100 * numOfSuccess / numTotal + uptime = 100.0 * numOfSuccess / numTotal } return &History{ @@ -160,7 +160,7 @@ func (h *BaseHandler) Index(c echo.Context) error { checksByGroup := map[string]ChecksAndStatus{} for _, check := range checksWithHistory { checksByGroup[check.Group] = ChecksAndStatus{ - Status: statusByGroup[check.Group], + Status: statusByGroup[check.Group], Checks: append(checksByGroup[check.Group].Checks, check), } } @@ -172,7 +172,7 @@ func (h *BaseHandler) Index(c echo.Context) error { NavbarActive: GetPageByTitle(Pages, "Status"), Navbar: Pages, }, - Checks: checksByGroup, + Checks: checksByGroup, TimeRange: timeRange, Status: overallStatus, }) diff --git a/internal/handlers/settings.go b/internal/handlers/settings.go index e0ae624..f80e867 100644 --- a/internal/handlers/settings.go +++ b/internal/handlers/settings.go @@ -15,18 +15,37 @@ type SettingsSidebarGroup struct { type Settings struct { *components.Base + SettingsGroupName string SettingsSidebarActive *components.Page SettingsSidebar []SettingsSidebarGroup User *AuthenticatedUser SettingsBreadcrumbs []*components.Page } +func findGroupForPage(groups []SettingsSidebarGroup, page *components.Page) *SettingsSidebarGroup { + for _, group := range groups { + for _, p := range group.Pages { + if p == page { + return &group + } + } + } + return nil +} + func NewSettings(user *AuthenticatedUser, page *components.Page, breadCrumbs []*components.Page) *Settings { + groupName := "" + group := findGroupForPage(SettingsSidebar, page) + if group != nil { + groupName = group.Group + } + return &Settings{ Base: &components.Base{ NavbarActive: GetPageByTitle(Pages, "Settings"), Navbar: Pages, }, + SettingsGroupName: groupName, SettingsSidebarActive: page, SettingsSidebar: SettingsSidebar, SettingsBreadcrumbs: breadCrumbs, @@ -35,7 +54,7 @@ func NewSettings(user *AuthenticatedUser, page *components.Page, breadCrumbs []* } var SettingsPages = []*components.Page{ - {Path: "/settings", Title: "Overview", Breadcrumb: "Overview"}, + {Path: "/settings", Title: "Home", Breadcrumb: "Home"}, {Path: "/settings/incidents", Title: "Incidents", Breadcrumb: "Incidents"}, {Path: "/settings/targets", Title: "Targets", Breadcrumb: "Targets"}, {Path: "/settings/targets/create", Title: "Targets Create", Breadcrumb: "Create"}, @@ -57,7 +76,7 @@ var SettingsSidebar = []SettingsSidebarGroup{ { Group: "Overview", Pages: []*components.Page{ - GetPageByTitle(SettingsPages, "Overview"), + GetPageByTitle(SettingsPages, "Home"), }, }, { @@ -91,7 +110,7 @@ var SettingsSidebar = []SettingsSidebarGroup{ }, } -type SettingsOverview struct { +type SettingsHome struct { *Settings WorkerGroupsCount int ChecksCount int @@ -99,7 +118,7 @@ type SettingsOverview struct { History []*services.CheckHistoryWithCheck } -func (h *BaseHandler) SettingsOverviewGET(c echo.Context) error { +func (h *BaseHandler) SettingsHomeGET(c echo.Context) error { cc := c.(AuthenticatedContext) ctx := c.Request().Context() @@ -118,11 +137,11 @@ func (h *BaseHandler) SettingsOverviewGET(c echo.Context) error { return err } - return c.Render(http.StatusOK, "settings_overview.tmpl", SettingsOverview{ + return c.Render(http.StatusOK, "settings_home.tmpl", SettingsHome{ Settings: NewSettings( cc.Principal.User, - GetPageByTitle(SettingsPages, "Overview"), - []*components.Page{GetPageByTitle(SettingsPages, "Overview")}, + GetPageByTitle(SettingsPages, "Home"), + []*components.Page{GetPageByTitle(SettingsPages, "Home")}, ), WorkerGroupsCount: workerGroups, ChecksCount: checks, diff --git a/pkg/server/routes.go b/pkg/server/routes.go index 2183566..feec577 100644 --- a/pkg/server/routes.go +++ b/pkg/server/routes.go @@ -52,7 +52,7 @@ func Routes( // Settings settings := e.Group("/settings") settings.Use(h.Authenticated) - settings.GET("", h.SettingsOverviewGET) + settings.GET("", h.SettingsHomeGET) settings.GET("/triggers", h.SettingsTriggersGET) settings.GET("/triggers/:id", h.SettingsTriggersDescribeGET) diff --git a/web/static/css/main.css b/web/static/css/main.css index 3f91b24..49dc0de 100644 --- a/web/static/css/main.css +++ b/web/static/css/main.css @@ -64,11 +64,11 @@ code { @apply bg-blue-700 text-white; } -.monitors .time-range > a { +.checks .time-range > a { @apply font-medium text-sm px-2.5 py-1 rounded-lg; @apply text-black bg-gray-100 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400; } -.monitors .time-range > a.active { +.checks .time-range > a.active { @apply bg-white hover:bg-gray-300 shadow; } diff --git a/web/static/css/tailwind.css b/web/static/css/tailwind.css index b9e7b51..4962cce 100644 --- a/web/static/css/tailwind.css +++ b/web/static/css/tailwind.css @@ -1404,7 +1404,7 @@ code { color: rgb(255 255 255 / var(--tw-text-opacity)); } -.monitors .time-range > a { +.checks .time-range > a { border-radius: 0.5rem; padding-left: 0.625rem; padding-right: 0.625rem; @@ -1419,12 +1419,12 @@ code { color: rgb(0 0 0 / var(--tw-text-opacity)); } -.monitors .time-range > a:hover { +.checks .time-range > a:hover { --tw-bg-opacity: 1; background-color: rgb(209 213 219 / var(--tw-bg-opacity)); } -.monitors .time-range > a:focus { +.checks .time-range > a:focus { 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); @@ -1434,7 +1434,7 @@ code { --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity)); } -.monitors .time-range > a.active { +.checks .time-range > a.active { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); @@ -1442,7 +1442,7 @@ code { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.monitors .time-range > a.active:hover { +.checks .time-range > a.active:hover { --tw-bg-opacity: 1; background-color: rgb(209 213 219 / var(--tw-bg-opacity)); } @@ -1772,6 +1772,17 @@ code { --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity)); } +.has-\[\.active\]\:bg-white:has(.active) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.has-\[\.active\]\:shadow-md:has(.active) { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + @media (min-width: 640px) { .sm\:w-auto { width: auto; diff --git a/web/templates/components/settings.tmpl b/web/templates/components/settings.tmpl index 40dabae..c0d83b9 100644 --- a/web/templates/components/settings.tmpl +++ b/web/templates/components/settings.tmpl @@ -14,13 +14,15 @@ class="sidebar gap-2 flex flex-row flex-wrap justify-center lg:flex-col lg:w-48 h-fit text-sm font-medium text-gray-900" > {{ range .SettingsSidebar }} -
  • +

  • {{ .Group }}

    -