feat: add http-connections and interserver-connections charts

app/api/timezone/route.ts

@@ -2,6 +2,8 @@ import { NextResponse } from 'next/server'
 
 import { fetchData } from '@/lib/clickhouse'
 
+export const revalidate = false
+
 export async function GET() {
   try {
     const resp = await fetchData<{ tz: string }[]>({

app/charts/[charts]/page.tsx

@@ -0,0 +1,44 @@
+import { ChartSkeleton } from '@/components/skeleton'
+import { notFound } from 'next/navigation'
+import { Suspense } from 'react'
+
+interface PageProps {
+  params: {
+    charts: string
+  }
+}
+
+export const dynamic = 'force-dynamic'
+export const revalidate = 30
+
+export default async function Page({ params: { charts } }: PageProps) {
+  let chartComponents = []
+  let props = {}
+
+  for (const chart of decodeURIComponent(charts).split(',')) {
+    console.log(`Rendering chart: ${chart}`)
+    try {
+      chartComponents.push(
+        (await import(`@/components/charts/${chart}`)).default
+      )
+    } catch (e) {
+      console.error(`Error rendering chart: ${chart}`, e)
+      notFound()
+    }
+  }
+
+  return (
+    <div>
+      {chartComponents.map((Chart, i) => (
+        <Suspense key={i} fallback={<ChartSkeleton />}>
+          <Chart
+            key={i}
+            className="mb-4 w-full p-0 shadow-none"
+            chartClassName="h-64"
+            {...props}
+          />
+        </Suspense>
+      ))}
+    </div>
+  )
+}

components/charts/connections-http.tsx

@@ -0,0 +1,50 @@
+import { ChartCard } from '@/components/chart-card'
+import { fetchData } from '@/lib/clickhouse'
+import { cn } from '@/lib/utils'
+import { BarChart } from '../tremor/bar'
+import { type ChartProps } from './chart-props'
+
+export async function ChartConnectionsHttp({
+  title = 'HTTP Connections Last 7 days (Total Requests / Hour)',
+  interval = 'toStartOfHour',
+  lastHours = 24 * 7,
+  className,
+  chartClassName,
+}: ChartProps) {
+  const query = `
+    SELECT
+      ${interval}(event_time) AS event_time,
+      SUM(CurrentMetric_HTTPConnection) AS CurrentMetric_HTTPConnection,
+      formatReadableQuantity(CurrentMetric_HTTPConnection) AS readable_CurrentMetric_HTTPConnection
+    FROM system.metric_log
+    WHERE event_time >= now() - INTERVAL ${lastHours} HOUR
+    GROUP BY event_time
+    ORDER BY event_time
+  `
+
+  const data = await fetchData<
+    {
+      event_time: string
+      CurrentMetric_HTTPConnection: number
+      readable_CurrentMetric_HTTPConnection: string
+    }[]
+  >({
+    query,
+    format: 'JSONEachRow',
+  })
+
+  return (
+    <ChartCard title={title} sql={query} className={className}>
+      <BarChart
+        data={data}
+        index="event_time"
+        categories={['CurrentMetric_HTTPConnection']}
+        readableColumn="readable_CurrentMetric_HTTPConnection"
+        className={cn('h-52', chartClassName)}
+        stack
+      />
+    </ChartCard>
+  )
+}
+
+export default ChartConnectionsHttp

components/charts/connections-interserver.tsx

@@ -0,0 +1,50 @@
+import { ChartCard } from '@/components/chart-card'
+import { fetchData } from '@/lib/clickhouse'
+import { cn } from '@/lib/utils'
+import { BarChart } from '../tremor/bar'
+import { type ChartProps } from './chart-props'
+
+export async function ChartConnectionsInterserver({
+  title = 'Interserver Connections Last 7 days (Total Requests / Hour)',
+  interval = 'toStartOfHour',
+  lastHours = 24 * 7,
+  className,
+  chartClassName,
+}: ChartProps) {
+  const query = `
+    SELECT
+      ${interval}(event_time) AS event_time,
+      SUM(CurrentMetric_InterserverConnection) AS CurrentMetric_InterserverConnection,
+      formatReadableQuantity(CurrentMetric_InterserverConnection) AS readable_CurrentMetric_InterserverConnection
+    FROM system.metric_log
+    WHERE event_time >= now() - INTERVAL ${lastHours} HOUR
+    GROUP BY event_time
+    ORDER BY event_time
+  `
+
+  const data = await fetchData<
+    {
+      event_time: string
+      CurrentMetric_InterserverConnection: number
+      readable_CurrentMetric_InterserverConnection: string
+    }[]
+  >({
+    query,
+    format: 'JSONEachRow',
+  })
+
+  return (
+    <ChartCard title={title} sql={query} className={className}>
+      <BarChart
+        data={data}
+        index="event_time"
+        categories={['CurrentMetric_InterserverConnection']}
+        readableColumn="readable_CurrentMetric_InterserverConnection"
+        className={cn('h-52', chartClassName)}
+        stack
+      />
+    </ChartCard>
+  )
+}
+
+export default ChartConnectionsInterserver

menu.ts

@@ -27,6 +27,7 @@ import {
   HardDriveIcon,
   RollerCoasterIcon,
   UngroupIcon,
+  UnplugIcon,
 } from 'lucide-react'
 import { type MenuItem } from './components/menu/types'
 
@@ -247,6 +248,12 @@ export const menuItemsConfig: MenuItem[] = [
           'Exposes data from the Keeper cluster defined in the config',
         icon: RollerCoasterIcon,
       },
+      {
+        title: 'Connections',
+        href: '/charts/connections-http,connections-interserver',
+        description: 'Number of connections over time',
+        icon: UnplugIcon,
+      },
     ],
   },
 ]