From a88ee95e276d17f009e7fba627c055c627918b17 Mon Sep 17 00:00:00 2001
From: Duyet Le <me@duyet.net>
Date: Wed, 22 Nov 2023 20:31:22 +0700
Subject: [PATCH] chore: add test, add server host

---
 app/error.cy.tsx               | 24 ++++++++++++++++++++++++
 components/header.tsx          |  5 ++++-
 components/server-hostname.tsx |  7 +++++++
 lib/utils.ts                   |  7 +++++++
 4 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 app/error.cy.tsx
 create mode 100644 components/server-hostname.tsx

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('<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')
+    })
+  })
+})
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() {
           <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 />
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
+}