Skip to content

refactor(ui): Cleanup template option handling #1430

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
PythonGermany wants to merge 6 commits into
base: master
Choose a base branch
from
Open

refactor(ui): Cleanup template option handling #1430

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4ed5b47
refactor(ui): Cleanup template option handling
PythonGermany Dec 10, 2025
19352e3
chore(ui): Regenerate static assets
PythonGermany Dec 10, 2025
4590544
Merge remote-tracking branch 'origin/master' into improve-ui-config-h…
PythonGermany Dec 11, 2025
aa1d0be
refactor(ui): Use globalThis property instead of window
PythonGermany Dec 21, 2025
338bf58
refactor(ui): Remove unnecessary checks
PythonGermany Dec 21, 2025
3a384d6
Merge remote-tracking branch 'TwiN/master' into improve-ui-config-han…
PythonGermany Dec 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 20 additions & 3 deletions web/app/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,28 @@
<html lang="en" class="{{ .Theme }}">
<head>
<meta charset="utf-8" />
<title>{{ .UI.Title }}</title>
<script type="text/javascript">
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() {
// String is percent-encoded to prevent it from being replaced when ui config is injected
if (document.title !== decodeURIComponent("%7B%7B%20.UI.Title%20%7D%7D")) {
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}}
} else {
console.warn('Running in development mode; UI configuration is not injected.');
document.title= 'Gatus (Development)';
}
// Initialize theme immediately to prevent flash
const themeFromCookie = document.cookie.match(/theme=(dark|light);?/)?.[1];
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (themeFromCookie === 'dark' || (!themeFromCookie && prefersDark)) {
Expand All @@ -15,7 +33,6 @@
}
})();
</script>
<title>{{ .UI.Title }}</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
Expand Down
16 changes: 4 additions & 12 deletions web/app/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,21 +177,13 @@ const tooltipIsPersistent = ref(false)
let configInterval = null

// Computed properties
const logo = computed(() => {
return window.config && window.config.logo && window.config.logo !== '{{ .UI.Logo }}' ? window.config.logo : ""
})
const logo = computed(() => window.config?.logo ?? "")

const header = computed(() => {
return window.config && window.config.header && window.config.header !== '{{ .UI.Header }}' ? window.config.header : "Gatus"
})
const header = computed(() => window.config?.header ?? "Gatus")

const link = computed(() => {
return window.config && window.config.link && window.config.link !== '{{ .UI.Link }}' ? window.config.link : null
})
const link = computed(() => window.config?.link ?? null)

const buttons = computed(() => {
return window.config && window.config.buttons ? window.config.buttons : []
})
const buttons = computed(() => window.config?.buttons ?? [])

// Methods
const fetchConfig = async () => {
Expand Down
8 changes: 2 additions & 6 deletions web/app/src/views/Home.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -533,13 +533,9 @@ const initializeCollapsedGroups = () => {
}
}

const dashboardHeading = computed(() => {
return window.config && window.config.dashboardHeading && window.config.dashboardHeading !== '{{ .UI.DashboardHeading }}' ? window.config.dashboardHeading : "Health Dashboard"
})
const dashboardHeading = computed(() => 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"
})
const dashboardSubheading = computed(() => window.config?.dashboardSubheading ?? "Monitor the health of your endpoints in real-time")

onMounted(() => {
fetchData()
Expand Down
25 changes: 21 additions & 4 deletions web/static/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,28 @@
<!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() {
<!doctype html><html lang="en" class="{{ .Theme }}"><head><meta charset="utf-8"/><title>{{ .UI.Title }}</title><script>(function() {
// String is percent-encoded to prevent it from being replaced when ui config is injected
if (document.title !== decodeURIComponent("%7B%7B%20.UI.Title%20%7D%7D")) {
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}}
} else {
console.warn('Running in development mode; UI configuration is not injected.');
document.title= 'Gatus (Development)';
}
// Initialize theme immediately to prevent flash
const themeFromCookie = document.cookie.match(/theme=(dark|light);?/)?.[1];
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (themeFromCookie === 'dark' || (!themeFromCookie && prefersDark)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
})();</script><title>{{ .UI.Title }}</title><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/><link rel="manifest" href="/manifest.json" crossorigin="use-credentials"/><link rel="shortcut icon" href="/favicon.ico"/><link rel="stylesheet" href="/css/custom.css"/><meta name="description" content="{{ .UI.Description }}"/><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/><meta name="apple-mobile-web-app-title" content="{{ .UI.Title }}"/><meta name="application-name" content="{{ .UI.Title }}"/><meta name="theme-color" content="#f7f9fb"/><script defer="defer" src="/js/chunk-vendors.js"></script><script defer="defer" src="/js/app.js"></script><link href="/css/app.css" rel="stylesheet"></head><body><noscript><strong>Enable JavaScript to view this page.</strong></noscript><div id="app"></div></body></html>
})();</script><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/><link rel="manifest" href="/manifest.json" crossorigin="use-credentials"/><link rel="shortcut icon" href="/favicon.ico"/><link rel="stylesheet" href="/css/custom.css"/><meta name="description" content="{{ .UI.Description }}"/><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/><meta name="apple-mobile-web-app-title" content="{{ .UI.Title }}"/><meta name="application-name" content="{{ .UI.Title }}"/><meta name="theme-color" content="#f7f9fb"/><script defer="defer" src="/js/chunk-vendors.js"></script><script defer="defer" src="/js/app.js"></script><link href="/css/app.css" rel="stylesheet"></head><body><noscript><strong>Enable JavaScript to view this page.</strong></noscript><div id="app"></div></body></html>
2 changes: 1 addition & 1 deletion web/static/js/app.js
View file
Open in desktop

Large diffs are not rendered by default.