From 842c9517b1c5fdd5223c953567c0a0aa7654c6f7 Mon Sep 17 00:00:00 2001 From: Ansuman Date: Wed, 6 Aug 2025 02:20:36 +0530 Subject: [PATCH 01/13] feat: add hideUrls config option to hide service URLs from status display - Add hideUrls boolean option to Config type - Update Status component to conditionally hide URLs based on config - Pass config through StatusGroup to Status components - Add example config.json demonstrating hideUrls feature - Update README.md with documentation for new hideUrls parameter - Maintains backward compatibility (URLs shown by default) --- README.md | 1 + src/lib/components/Status.svelte | 4 +++- src/lib/components/StatusGroup.svelte | 4 +++- src/lib/types/config.ts | 1 + src/routes/+page.svelte | 1 + 5 files changed, 9 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 37cfc65..b5885ba 100644 --- a/README.md +++ b/README.md @@ -28,6 +28,7 @@ The frontend tries to retrieve a configuration file named `config.json` from the | :----------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------- | | `title` | Title of the page. Both in the tab and next to the logo. | `Infrastructure Status` | | `gatusBaseUrl` | Alternative base URL of the Gatus instance, if the API is not available relative to the frontend. | `none` | +| `hideUrls` | Boolean specifying if service URLs/hostnames should be hidden from the status display for privacy or security reasons. | `false` | | `hiddenGroups` | Array containing names of groups that should be hidden. These groups are still visible in the API response! | `[]` | | `hiddenStatuses` | Array containing names of statuses that should be hidden. These are still visible in the API response! | `[]` | | `groupOrder` | Array containing names of groups. The groups are sorted in the frontend according to the order in the array (different from alphabetical sorting by default). If groups are not included in the array, they will be added alphabetically sorted below the sorted groups. | `[]` | diff --git a/src/lib/components/Status.svelte b/src/lib/components/Status.svelte index 6f50542..a194546 100644 --- a/src/lib/components/Status.svelte +++ b/src/lib/components/Status.svelte @@ -1,8 +1,10 @@ + +
+
+
+ {getErrorIcon(props.error)} +

Connection Failed

+
+ +

+ {getErrorMessage(props.error)} +

+ +
+

Troubleshooting:

+
    +
  • Verify the Gatus base URL in your configuration
    • +
  • Ensure the Gatus API endpoint /api/v1/endpoints/statuses is accessible
    • +
  • Check if Gatus is running and healthy
    • +
  • Verify network connectivity and firewall settings
    • +
+
+ + {#if props.retry} +
+ +
+ {/if} +
+
+ + \ No newline at end of file diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 4b4dbd3..ef52c28 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -11,14 +11,19 @@ import EndpointGroup from '$lib/components/StatusGroup.svelte' import RefreshSettings from '$lib/components/RefreshSettings.svelte' import Footer from '$lib/components/Footer.svelte' + import ErrorDisplay from '$lib/components/ErrorDisplay.svelte' let loading = $state(true) + let error: Error | null = $state(null) let config: Config = $state({}) let apiData: Status[] = $state([]) async function getConfig() { try { - const response = await axios.get('config.json', { baseURL: '/' }) + const response = await axios.get('config.json', { + baseURL: '/', + timeout: 10000 // 10 second timeout + }) config = response.data // Set title if defined in config @@ -29,8 +34,10 @@ const error = err as AxiosError if (error.response && error.response.status === 404) { console.warn('No config.json file found. Using default values.') + } else { + console.warn('Error getting config:', error.message) } - console.log('Error getting config: ' + error) + // Don't set error state for config failures, just use defaults } } @@ -41,19 +48,48 @@ } try { - const response = await axios.get('/api/v1/endpoints/statuses') + error = null // Clear any previous errors + const response = await axios.get('/api/v1/endpoints/statuses', { + timeout: 15000 // 15 second timeout for API calls + }) apiData = response.data loading = false - } catch (error) { - console.log(error) + } catch (err) { + const axiosError = err as AxiosError + error = axiosError + loading = false + console.error('Failed to fetch API data:', axiosError) + + // Log detailed error information for debugging + if (axiosError.response) { + console.error('Response error:', { + status: axiosError.response.status, + statusText: axiosError.response.statusText, + data: axiosError.response.data + }) + } else if (axiosError.request) { + console.error('Request error - no response received:', { + url: axiosError.config?.url, + baseURL: axiosError.config?.baseURL, + timeout: axiosError.config?.timeout + }) + } else { + console.error('Error:', axiosError.message) + } } } async function refresh() { + loading = true + error = null await getConfig() await getApiData() } + function retryConnection() { + refresh() + } + // Group statuses by their group name // and sort them according to the config if specified let groups: { title: string; statuses: Status[] }[] = $derived.by(() => { @@ -108,6 +144,14 @@ {#if loading} +{:else if error} +
+ {#if config.notice} + + {/if} + + +