diff --git a/app/error.cy.tsx b/app/error.cy.tsx
new file mode 100644
index 00000000..030355d3
--- /dev/null
+++ b/app/error.cy.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+
+import { default as ErrorPage } from './error'
+
+describe('', () => {
+ it('renders', () => {
+ const err = new Error('Test error')
+ const reset = () => console.log('reset')
+
+ // Render
+ cy.mount()
+
+ cy.get('h2').contains('Something went wrong').should('be.visible')
+
+ // Check console.log was called
+ cy.window().then((win) => {
+ cy.spy(win.console, 'log').as('consoleLog')
+ cy.get('button').contains('button', 'Try again').click()
+ cy.get('@consoleLog')
+ .should('have.been.called')
+ .and('have.been.calledWith', 'reset')
+ })
+ })
+})
diff --git a/components/header.tsx b/components/header.tsx
index 557ff160..4e35b12c 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -2,6 +2,7 @@ import Image from 'next/image'
import { Menu } from '@/components/menu'
import { ReloadButton } from '@/components/reload-button'
+import { ServerHostname } from '@/components/server-hostname'
export function Header() {
return (
@@ -18,7 +19,9 @@ export function Header() {
ClickHouse Monitoring
Monitoring
-
+
+
+
diff --git a/components/server-hostname.tsx b/components/server-hostname.tsx
new file mode 100644
index 00000000..d5f437a6
--- /dev/null
+++ b/components/server-hostname.tsx
@@ -0,0 +1,7 @@
+import { getHost } from '@/lib/utils'
+
+export function ServerHostname() {
+ const host = process.env.CLICKHOUSE_HOST
+
+ return getHost(host)
+}
diff --git a/lib/utils.ts b/lib/utils.ts
index 218890ee..fe267346 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -30,3 +30,10 @@ export function dedent(str: string) {
return indent > 0 ? str.replace(re, '') : str
}
+
+export function getHost(url?: string) {
+ if (!url) return ''
+
+ const { host } = new URL(url)
+ return host
+}