Skip to content

Commit d738f78

Browse files
RezeOWRezeOW
committed
Made the Dashboard Text customizable
1 parent 10cabb9 commit d738f78

File tree

7 files changed

+59
-24
lines changed

7 files changed

+59
-24
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -258,6 +258,8 @@ If you want to test it locally, see [Docker](#docker).
258258
| `ui` | UI configuration. | `{}` |
259259
| `ui.title` | [Title of the document](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title). | `Health Dashboard ǀ Gatus` |
260260
| `ui.description` | Meta description for the page. | `Gatus is an advanced...`. |
261+
| `ui.dashboard-title` | Dashboard title between header and endpoints | `Health Dashboard` |
262+
| `ui.dashboard-description` | Dashboard description between header and endpoints | `Monitor the health of your endpoints in real-time` |
261263
| `ui.header` | Header at the top of the dashboard. | `Gatus` |
262264
| `ui.logo` | URL to the logo to display. | `""` |
263265
| `ui.link` | Link to open when the logo is clicked. | `""` |

‎config/ui/ui.go‎

Lines changed: 30 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,16 @@ import (
1010
)
1111

1212
const (
13-
defaultTitle = "Health Dashboard | Gatus"
14-
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"
15-
defaultHeader = "Gatus"
16-
defaultLogo = ""
17-
defaultLink = ""
18-
defaultCustomCSS = ""
19-
defaultSortBy = "name"
20-
defaultFilterBy = "none"
13+
defaultTitle = "Health Dashboard | Gatus"
14+
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"
15+
defaultHeader = "Gatus"
16+
defaultDashboardTitle = "Health Dashboard"
17+
defaultDashboardDescription = "Monitor the health of your endpoints in real-time"
18+
defaultLogo = ""
19+
defaultLink = ""
20+
defaultCustomCSS = ""
21+
defaultSortBy = "name"
22+
defaultFilterBy = "none"
2123
)
2224

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

3133
// Config is the configuration for the UI of Gatus
3234
type Config struct {
33-
Title string `yaml:"title,omitempty"` // Title of the page
34-
Description string `yaml:"description,omitempty"` // Meta description of the page
35-
Header string `yaml:"header,omitempty"` // Header is the text at the top of the page
36-
Logo string `yaml:"logo,omitempty"` // Logo to display on the page
37-
Link string `yaml:"link,omitempty"` // Link to open when clicking on the logo
38-
Buttons []Button `yaml:"buttons,omitempty"` // Buttons to display below the header
39-
CustomCSS string `yaml:"custom-css,omitempty"` // Custom CSS to include in the page
40-
DarkMode *bool `yaml:"dark-mode,omitempty"` // DarkMode is a flag to enable dark mode by default
41-
DefaultSortBy string `yaml:"default-sort-by,omitempty"` // DefaultSortBy is the default sort option ('name', 'group', 'health')
42-
DefaultFilterBy string `yaml:"default-filter-by,omitempty"` // DefaultFilterBy is the default filter option ('none', 'failing', 'unstable')
43-
35+
Title string `yaml:"title,omitempty"` // Title of the page
36+
Description string `yaml:"description,omitempty"` // Meta description of the page
37+
DashboardTitle string `yaml:"dashboard-title,omitempty"` // Dashboard Title between header and endpoints
38+
DashboardDescription string `yaml:"dashboard-description,omitempty"` // Dashboard Description between header and endpoints
39+
Header string `yaml:"header,omitempty"` // Header is the text at the top of the page
40+
Logo string `yaml:"logo,omitempty"` // Logo to display on the page
41+
Link string `yaml:"link,omitempty"` // Link to open when clicking on the logo
42+
Buttons []Button `yaml:"buttons,omitempty"` // Buttons to display below the header
43+
CustomCSS string `yaml:"custom-css,omitempty"` // Custom CSS to include in the page
44+
DarkMode *bool `yaml:"dark-mode,omitempty"` // DarkMode is a flag to enable dark mode by default
45+
DefaultSortBy string `yaml:"default-sort-by,omitempty"` // DefaultSortBy is the default sort option ('name', 'group', 'health')
46+
DefaultFilterBy string `yaml:"default-filter-by,omitempty"` // DefaultFilterBy is the default filter option ('none', 'failing', 'unstable')
4447
//////////////////////////////////////////////
4548
// Non-configurable - used for UI rendering //
4649
//////////////////////////////////////////////
@@ -73,6 +76,8 @@ func GetDefaultConfig() *Config {
7376
return &Config{
7477
Title: defaultTitle,
7578
Description: defaultDescription,
79+
DashboardTitle: defaultDashboardTitle,
80+
DashboardDescription: defaultDashboardDescription,
7681
Header: defaultHeader,
7782
Logo: defaultLogo,
7883
Link: defaultLink,
@@ -92,6 +97,12 @@ func (cfg *Config) ValidateAndSetDefaults() error {
9297
if len(cfg.Description) == 0 {
9398
cfg.Description = defaultDescription
9499
}
100+
if len(cfg.DashboardTitle) == 0 {
101+
cfg.DashboardTitle = defaultDashboardTitle
102+
}
103+
if len(cfg.DashboardDescription) == 0 {
104+
cfg.DashboardDescription = defaultDashboardDescription
105+
}
95106
if len(cfg.Header) == 0 {
96107
cfg.Header = defaultHeader
97108
}

‎config/ui/ui_test.go‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ func TestConfig_ValidateAndSetDefaults(t *testing.T) {
1010
cfg := &Config{
1111
Title: "",
1212
Description: "",
13+
DashboardTitle: "",
14+
DashboardDescription: "",
1315
Header: "",
1416
Logo: "",
1517
Link: "",
@@ -23,6 +25,12 @@ func TestConfig_ValidateAndSetDefaults(t *testing.T) {
2325
if cfg.Description != defaultDescription {
2426
t.Errorf("expected description to be %s, got %s", defaultDescription, cfg.Description)
2527
}
28+
if cfg.DashboardTitle != defaultDashboardTitle {
29+
t.Errorf("expected DashboardTitle to be %s, got %s", defaultDashboardTitle, cfg.DashboardTitle)
30+
}
31+
if cfg.DashboardDescription != defaultDashboardDescription {
32+
t.Errorf("expected DashboardDescription to be %s, got %s", defaultDashboardDescription, cfg.DashboardDescription)
33+
}
2634
if cfg.Header != defaultHeader {
2735
t.Errorf("expected header to be %s, got %s", defaultHeader, cfg.Header)
2836
}
@@ -78,6 +86,12 @@ func TestGetDefaultConfig(t *testing.T) {
7886
if defaultConfig.Title != defaultTitle {
7987
t.Error("expected GetDefaultConfig() to return defaultTitle, got", defaultConfig.Title)
8088
}
89+
if defaultConfig.DashboardTitle != defaultDashboardTitle {
90+
t.Error("expected GetDefaultConfig() to return defaultDashboardTitle, got", defaultConfig.DashboardTitle)
91+
}
92+
if defaultConfig.DashboardDescription != defaultDashboardDescription {
93+
t.Error("expected GetDefaultConfig() to return defaultDashboardDescription, got", defaultConfig.DashboardDescription)
94+
}
8195
if defaultConfig.Logo != defaultLogo {
8296
t.Error("expected GetDefaultConfig() to return defaultLogo, got", defaultConfig.Logo)
8397
}

‎web/app/public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="utf-8" />
55
<script type="text/javascript">
6-
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}}
6+
window.config = {logo: "{{ .UI.Logo }}", header: "{{ .UI.Header }}", dashboardTitle: "{{ .UI.DashboardTitle }}", dashboardDescription: "{{ .UI.DashboardDescription }}", 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}}
77
// Initialize theme immediately to prevent flash
88
(function() {
99
const themeFromCookie = document.cookie.match(/theme=(dark|light);?/)?.[1];

‎web/app/src/views/Home.vue‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
<div class="mb-6">
55
<div class="flex items-center justify-between mb-6">
66
<div>
7-
<h1 class="text-4xl font-bold tracking-tight">Health Dashboard</h1>
8-
<p class="text-muted-foreground mt-2">Monitor the health of your endpoints in real-time</p>
7+
<h1 class="text-4xl font-bold tracking-tight">{{ dashboardTitle }}</h1>
8+
<p class="text-muted-foreground mt-2">{{ dashboardDescription }}</p>
99
</div>
1010
<div class="flex items-center gap-4">
1111
<Button
@@ -382,6 +382,14 @@ const initializeCollapsedGroups = () => {
382382
}
383383
}
384384
385+
const dashboardTitle = computed(() => {
386+
return window.config && window.config.dashboardTitle && window.config.dashboardTitle !== '{{ .UI.DashboardTitle }}' ? window.config.dashboardTitle : "Health Dashboard"
387+
})
388+
389+
const dashboardDescription = computed(() => {
390+
return window.config && window.config.dashboardDescription && window.config.dashboardDescription !== '{{ .UI.dashboardDescription }}' ? window.config.dashboardDescription : "Monitor the health of your endpoints in real-time"
391+
})
392+
385393
onMounted(() => {
386394
fetchData()
387395
})

‎web/static/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!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}}
1+
<!doctype html><html lang="en" class="{{ .Theme }}"><head><meta charset="utf-8"/><script>window.config = {logo: "{{ .UI.Logo }}", header: "{{ .UI.Header }}", dashboardTitle: "{{ .UI.DashboardTitle }}", dashboardDescription: "{{ .UI.DashboardDescription }}", 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}}
22
// Initialize theme immediately to prevent flash
33
(function() {
44
const themeFromCookie = document.cookie.match(/theme=(dark|light);?/)?.[1];

‎web/static/js/app.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)