feat(ui): customizable dashboard heading and subheading (#1235)

* Made the Dashboard Text customizable * Aligned with spaces, changed feature name to DashboardHeading and DashboardSubheading * rebuild frontend --------- Co-authored-by: macmoritz <tratarmoritz@gmail.com>
2026-02-04 09:31:45 +00:00 · 2025-11-16 21:33:26 +01:00
parent fe7b74f555
commit 75c1b290f6
7 changed files with 64 additions and 29 deletions
--- a/README.md
+++ b/README.md
@@ -263,6 +263,8 @@ If you want to test it locally, see [Docker](#docker).
 | `ui`                         | UI configuration.                                                                                                                        | `{}`                       |
 | `ui.title`                   | [Title of the document](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title).                                                | `Health Dashboard ǀ Gatus` |
 | `ui.description`             | Meta description for the page.                                                                                                           | `Gatus is an advanced...`. |
+| `ui.dashboard-heading`       | Dashboard title between header and endpoints                                                                                             | `Health Dashboard` |
+| `ui.dashboard-subheading`    | Dashboard description between header and endpoints                                                                                       | `Monitor the health of your endpoints in real-time` |
 | `ui.header`                  | Header at the top of the dashboard.                                                                                                      | `Gatus`                    |
 | `ui.logo`                    | URL to the logo to display.                                                                                                              | `""`                       |
 | `ui.link`                    | Link to open when the logo is clicked.                                                                                                   | `""`                       |
--- a/config/ui/ui.go
+++ b/config/ui/ui.go
@@ -10,14 +10,16 @@ import (
 )

 const (
-	defaultTitle       = "Health Dashboard | Gatus"
-	defaultDescription = "Gatus is an advanced automated status page that lets you monitor your applications and configure alerts to notify you if there's an issue"
-	defaultHeader      = "Gatus"
-	defaultLogo        = ""
-	defaultLink        = ""
-	defaultCustomCSS   = ""
-	defaultSortBy      = "name"
-	defaultFilterBy    = "none"
+	defaultTitle                = "Health Dashboard | Gatus"
+	defaultDescription          = "Gatus is an advanced automated status page that lets you monitor your applications and configure alerts to notify you if there's an issue"
+	defaultHeader               = "Gatus"
+	defaultDashboardHeading     = "Health Dashboard"
+	defaultDashboardSubheading  = "Monitor the health of your endpoints in real-time"
+	defaultLogo                 = ""
+	defaultLink                 = ""
+	defaultCustomCSS            = ""
+	defaultSortBy               = "name"
+	defaultFilterBy             = "none"
 )

 var (
@@ -30,17 +32,18 @@ var (

 // Config is the configuration for the UI of Gatus
 type Config struct {
-	Title           string   `yaml:"title,omitempty"`             // Title of the page
-	Description     string   `yaml:"description,omitempty"`       // Meta description of the page
-	Header          string   `yaml:"header,omitempty"`            // Header is the text at the top of the page
-	Logo            string   `yaml:"logo,omitempty"`              // Logo to display on the page
-	Link            string   `yaml:"link,omitempty"`              // Link to open when clicking on the logo
-	Buttons         []Button `yaml:"buttons,omitempty"`           // Buttons to display below the header
-	CustomCSS       string   `yaml:"custom-css,omitempty"`        // Custom CSS to include in the page
-	DarkMode        *bool    `yaml:"dark-mode,omitempty"`         // DarkMode is a flag to enable dark mode by default
-	DefaultSortBy   string   `yaml:"default-sort-by,omitempty"`   // DefaultSortBy is the default sort option ('name', 'group', 'health')
-	DefaultFilterBy string   `yaml:"default-filter-by,omitempty"` // DefaultFilterBy is the default filter option ('none', 'failing', 'unstable')
-
+	Title                   string   `yaml:"title,omitempty"`                  // Title of the page
+	Description             string   `yaml:"description,omitempty"`            // Meta description of the page
+	DashboardHeading        string   `yaml:"dashboard-heading,omitempty"`      // Dashboard Title between header and endpoints
+	DashboardSubheading     string   `yaml:"dashboard-subheading,omitempty"`   // Dashboard Description between header and endpoints
+	Header                  string   `yaml:"header,omitempty"`                 // Header is the text at the top of the page
+	Logo                    string   `yaml:"logo,omitempty"`                   // Logo to display on the page
+	Link                    string   `yaml:"link,omitempty"`                   // Link to open when clicking on the logo
+	Buttons                 []Button `yaml:"buttons,omitempty"`                // Buttons to display below the header
+	CustomCSS               string   `yaml:"custom-css,omitempty"`             // Custom CSS to include in the page
+	DarkMode                *bool    `yaml:"dark-mode,omitempty"`              // DarkMode is a flag to enable dark mode by default
+	DefaultSortBy           string   `yaml:"default-sort-by,omitempty"`        // DefaultSortBy is the default sort option ('name', 'group', 'health')
+	DefaultFilterBy         string   `yaml:"default-filter-by,omitempty"`      // DefaultFilterBy is the default filter option ('none', 'failing', 'unstable')
 	//////////////////////////////////////////////
 	// Non-configurable - used for UI rendering //
 	//////////////////////////////////////////////
@@ -73,6 +76,8 @@ func GetDefaultConfig() *Config {
 	return &Config{
 		Title:                  defaultTitle,
 		Description:            defaultDescription,
+		DashboardHeading:       defaultDashboardHeading,
+		DashboardSubheading:    defaultDashboardSubheading,
 		Header:                 defaultHeader,
 		Logo:                   defaultLogo,
 		Link:                   defaultLink,
@@ -92,6 +97,12 @@ func (cfg *Config) ValidateAndSetDefaults() error {
 	if len(cfg.Description) == 0 {
 		cfg.Description = defaultDescription
 	}
+	if len(cfg.DashboardHeading) == 0 {
+		cfg.DashboardHeading = defaultDashboardHeading
+	}
+	if len(cfg.DashboardSubheading) == 0 {
+		cfg.DashboardSubheading = defaultDashboardSubheading
+	}
 	if len(cfg.Header) == 0 {
 		cfg.Header = defaultHeader
 	}
--- a/config/ui/ui_test.go
+++ b/config/ui/ui_test.go
@@ -8,11 +8,13 @@ import (

 func TestConfig_ValidateAndSetDefaults(t *testing.T) {
 	cfg := &Config{
-		Title:       "",
-		Description: "",
-		Header:      "",
-		Logo:        "",
-		Link:        "",
+		Title:                "",
+		Description:          "",
+		DashboardHeading:     "",
+		DashboardSubheading:  "",
+		Header:               "",
+		Logo:                 "",
+		Link:                 "",
 	}
 	if err := cfg.ValidateAndSetDefaults(); err != nil {
 		t.Error("expected no error, got", err.Error())
@@ -23,6 +25,12 @@ func TestConfig_ValidateAndSetDefaults(t *testing.T) {
 	if cfg.Description != defaultDescription {
 		t.Errorf("expected description to be %s, got %s", defaultDescription, cfg.Description)
 	}
+	if cfg.DashboardHeading != defaultDashboardHeading {
+		t.Errorf("expected DashboardHeading to be %s, got %s", defaultDashboardHeading, cfg.DashboardHeading)
+	}
+	if cfg.DashboardSubheading != defaultDashboardSubheading {
+		t.Errorf("expected DashboardSubheading to be %s, got %s", defaultDashboardSubheading, cfg.DashboardSubheading)
+	}
 	if cfg.Header != defaultHeader {
 		t.Errorf("expected header to be %s, got %s", defaultHeader, cfg.Header)
 	}
@@ -78,6 +86,12 @@ func TestGetDefaultConfig(t *testing.T) {
 	if defaultConfig.Title != defaultTitle {
 		t.Error("expected GetDefaultConfig() to return defaultTitle, got", defaultConfig.Title)
 	}
+	if defaultConfig.DashboardHeading != defaultDashboardHeading {
+		t.Error("expected GetDefaultConfig() to return defaultDashboardHeading, got", defaultConfig.DashboardHeading)
+	}
+	if defaultConfig.DashboardSubheading != defaultDashboardSubheading {
+		t.Error("expected GetDefaultConfig() to return defaultDashboardSubheading, got", defaultConfig.DashboardSubheading)
+	}
 	if defaultConfig.Logo != defaultLogo {
 		t.Error("expected GetDefaultConfig() to return defaultLogo, got", defaultConfig.Logo)
 	}
--- a/web/app/public/index.html
+++ b/web/app/public/index.html
@@ -3,7 +3,7 @@
  <head>
    <meta charset="utf-8" />
    <script type="text/javascript">
-      window.config = {logo: "{{ .UI.Logo }}", header: "{{ .UI.Header }}", link: "{{ .UI.Link }}", buttons: [], maximumNumberOfResults: "{{ .UI.MaximumNumberOfResults }}", defaultSortBy: "{{ .UI.DefaultSortBy }}", defaultFilterBy: "{{ .UI.DefaultFilterBy }}"};{{- range .UI.Buttons}}window.config.buttons.push({name:"{{ .Name }}",link:"{{ .Link }}"});{{end}}
+      window.config = {logo: "{{ .UI.Logo }}", header: "{{ .UI.Header }}", dashboardHeading: "{{ .UI.DashboardHeading }}", dashboardSubheading: "{{ .UI.DashboardSubheading }}", link: "{{ .UI.Link }}", buttons: [], maximumNumberOfResults: "{{ .UI.MaximumNumberOfResults }}", defaultSortBy: "{{ .UI.DefaultSortBy }}", defaultFilterBy: "{{ .UI.DefaultFilterBy }}"};{{- range .UI.Buttons}}window.config.buttons.push({name:"{{ .Name }}",link:"{{ .Link }}"});{{end}}
      // Initialize theme immediately to prevent flash
      (function() {
        const themeFromCookie = document.cookie.match(/theme=(dark|light);?/)?.[1];
--- a/web/app/src/views/Home.vue
+++ b/web/app/src/views/Home.vue
@@ -4,8 +4,8 @@
      <div class="mb-6">
        <div class="flex items-center justify-between mb-6">
          <div>
-            <h1 class="text-4xl font-bold tracking-tight">Health Dashboard</h1>
-            <p class="text-muted-foreground mt-2">Monitor the health of your endpoints in real-time</p>
+            <h1 class="text-4xl font-bold tracking-tight">{{ dashboardHeading }}</h1>
+            <p class="text-muted-foreground mt-2">{{ dashboardSubheading }}</p>
          </div>
          <div class="flex items-center gap-4">
            <Button 
@@ -532,6 +532,14 @@ const initializeCollapsedGroups = () => {
  }
 }

+const dashboardHeading = computed(() => {
+  return window.config && window.config.dashboardHeading && window.config.dashboardHeading !== '{{ .UI.DashboardHeading }}' ? window.config.dashboardHeading : "Health Dashboard"
+})
+
+const dashboardSubheading = computed(() => {
+  return window.config && window.config.dashboardSubheading && window.config.dashboardSubheading !== '{{ .UI.dashboardSubheading }}' ? window.config.dashboardSubheading : "Monitor the health of your endpoints in real-time"
+})
+
 onMounted(() => {
  fetchData()
 })
--- a/web/static/index.html
+++ b/web/static/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="en" class="{{ .Theme }}"><head><meta charset="utf-8"/><script>window.config = {logo: "{{ .UI.Logo }}", header: "{{ .UI.Header }}", link: "{{ .UI.Link }}", buttons: [], maximumNumberOfResults: "{{ .UI.MaximumNumberOfResults }}", defaultSortBy: "{{ .UI.DefaultSortBy }}", defaultFilterBy: "{{ .UI.DefaultFilterBy }}"};{{- range .UI.Buttons}}window.config.buttons.push({name:"{{ .Name }}",link:"{{ .Link }}"});{{end}}
+<!doctype html><html lang="en" class="{{ .Theme }}"><head><meta charset="utf-8"/><script>window.config = {logo: "{{ .UI.Logo }}", header: "{{ .UI.Header }}", dashboardHeading: "{{ .UI.DashboardHeading }}", dashboardSubheading: "{{ .UI.DashboardSubheading }}", link: "{{ .UI.Link }}", buttons: [], maximumNumberOfResults: "{{ .UI.MaximumNumberOfResults }}", defaultSortBy: "{{ .UI.DefaultSortBy }}", defaultFilterBy: "{{ .UI.DefaultFilterBy }}"};{{- range .UI.Buttons}}window.config.buttons.push({name:"{{ .Name }}",link:"{{ .Link }}"});{{end}}
      // Initialize theme immediately to prevent flash
      (function() {
        const themeFromCookie = document.cookie.match(/theme=(dark|light);?/)?.[1];
--- a/web/static/js/app.js
+++ b/web/static/js/app.js