chore: add test, add server host

app/error.cy.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+import { default as ErrorPage } from './error'
+
+describe('<Error />', () => {
+  it('renders', () => {
+    const err = new Error('Test error')
+    const reset = () => console.log('reset')
+
+    // Render
+    cy.mount(<ErrorPage error={err} reset={reset} />)
+
+    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')
+    })
+  })
+})

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() {
           <span className="hidden sm:flex">ClickHouse Monitoring</span>
           <span className="flex sm:hidden">Monitoring</span>
         </h2>
-        <p className="text-muted-foreground"></p>
+        <p className="text-muted-foreground">
+          <ServerHostname />
+        </p>
       </div>
       <div className="flex items-center space-x-2">
         <Menu />

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)
+}

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
+}