Merge pull request #355 from duyet/feat/overview

feat: custom logo via `NEXT_PUBLIC_LOGO`

Author: duyet

README.md

@@ -32,14 +32,16 @@ Features:
 To get the project up and running on your local machine, follow these steps:
 
 1. Clone the repository
-2. Install dependencies with `npm install` or `yarn install`
+2. Install dependencies using `npm install` or `yarn install`
 3. Create a `.env.local` file by copying the `.env.example` file and filling in the required environment variables:
-    - `CLICKHOUSE_HOST`: ClickHouse host, for example `http://localhost:8123`
+    - `CLICKHOUSE_HOST`: ClickHouse host(s), for example `http://localhost:8123` or `http://ch-1:8123,http://ch-2:8123`
+    - `CLICKHOUSE_NAME`: (Optional) Name of ClickHouse instance, must match the number of hosts in `CLICKHOUSE_HOST`, for example `localhost` or `ch-1,ch-2`.
     - `CLICKHOUSE_USER`: ClickHouse user with permission to query the `system` database.
     - `CLICKHOUSE_PASSWORD`: ClickHouse password for the specified user.
     - `CLICKHOUSE_MAX_EXECUTION_TIME`: [`max_execution_time`](https://clickhouse.com/docs/en/operations/settings/query-complexity#max-execution-time) timeout in seconds. Default is `10`.
     - `CLICKHOUSE_TZ`: ClickHouse server timezone. Default: `''`.
     - `NEXT_QUERY_CACHE_TTL`: TTL of [`unstable_cache`](https://nextjs.org/docs/app/api-reference/functions/unstable_cache) - cache the results of most charts to speed up and reuse them across multiple requests. Default: `86400`.
+    - `NEXT_PUBLIC_LOGO`: (Optional) HTTP path to logo image.
 
 4. Run the development server with `npm run dev` or `yarn dev`
 5. Open [http://localhost:3000](http://localhost:3000) in your browser to see the dashboard.

app/[host]/overview/overview-charts.tsx

@@ -1,14 +1,15 @@
+import { CircleAlert, Database } from 'lucide-react'
+import Link from 'next/link'
+import { Suspense } from 'react'
+
 import ChartQueryCount from '@/components/charts/query-count'
 import { SingleLineSkeleton } from '@/components/skeleton'
 import { Card, CardContent } from '@/components/ui/card'
 import { fetchData } from '@/lib/clickhouse'
 import { getScopedLink } from '@/lib/scoped-link'
 import { cn } from '@/lib/utils'
-import { CircleAlert, Database } from 'lucide-react'
-import Link from 'next/link'
-import { Suspense } from 'react'
 
-export async function RunningQueries({ className }: { className?: string }) {
+async function RunningQueries({ className }: { className?: string }) {
   const query = `SELECT COUNT() as count FROM system.processes`
   const { data } = await fetchData<
     {
@@ -91,11 +92,7 @@ async function LinkCount({
   )
 }
 
-export async function DatabaseTableCount({
-  className,
-}: {
-  className?: string
-}) {
+async function DatabaseTableCount({ className }: { className?: string }) {
   return (
     <Card
       className={cn(

components/header.tsx

@@ -1,29 +1,36 @@
 import Image from 'next/image'
+import Link from 'next/link'
 import { Suspense } from 'react'
 
 import { ClickHouseHost } from '@/components/clickhouse-host'
 import { Menu } from '@/components/menu/menu'
 import { ReloadButton } from '@/components/reload-button'
 import { SingleLineSkeleton } from '@/components/skeleton'
+import { getScopedLink } from '@/lib/scoped-link'
 
 const TITLE = process.env.NEXT_PUBLIC_TITLE || 'ClickHouse Monitoring'
 const TITLE_SHORT = process.env.NEXT_PUBLIC_TITLE_SHORT || 'Monitoring'
+const LOGO = process.env.NEXT_PUBLIC_LOGO || '/logo-bw.svg'
 
 export function Header() {
   return (
     <div className="flex items-center justify-between space-y-2">
       <div className="flex flex-row items-center">
-        <Image
-          src="/logo.svg"
-          width={40}
-          height={40}
-          alt="Logo"
-          className="mr-2"
-        />
+        <Link href={getScopedLink('/overview')}>
+          <Image
+            src={LOGO}
+            width={45}
+            height={45}
+            alt="Logo"
+            className="mr-2"
+          />
+        </Link>
         <div>
           <h2 className="flex min-w-32 flex-col text-2xl font-bold tracking-tight">
-            <span className="hidden sm:flex">{TITLE}</span>
-            <span className="flex sm:hidden">{TITLE_SHORT}</span>
+            <Link href={getScopedLink('/overview')}>
+              <span className="hidden sm:flex">{TITLE}</span>
+              <span className="flex sm:hidden">{TITLE_SHORT}</span>
+            </Link>
           </h2>
           <div className="text-muted-foreground">
             <Suspense>

next.config.js

@@ -10,6 +10,16 @@ const nextConfig = {
     ignoreDuringBuilds: true,
   },
 
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '*',
+        port: '',
+      },
+    ],
+  },
+
   // https://nextjs.org/docs/app/api-reference/next-config-js/webpack
   webpack: (
     config,