Merge pull request #241 from duyet/chore/ui

feat: add zookeeper current metrics

Author: duyet

app/[query]/more/zookeeper.ts

@@ -54,5 +54,8 @@ export const zookeeperConfig: QueryConfig = {
         lastHours: 24 * 7,
       },
     ],
+    'break',
+    'zookeeper-uptime',
+    'zookeeper-summary-table',
   ],
 }

app/[query]/tables/replication-queue.ts

@@ -9,7 +9,7 @@ export const replicationQueueConfig: QueryConfig = {
              database || '.' || table as table
       FROM system.replication_queue
       ORDER BY is_currently_executing DESC, create_time DESC
-      LIMIT 5000
+      LIMIT 1000
     `,
   columns: [
     'table',

components/charts/replication-summary-table.tsx

@@ -22,6 +22,7 @@ export async function ChartReplicationSummaryTable({
            COUNT() as total
     FROM system.replication_queue
     GROUP BY 1, 2
+    ORDER BY total DESC
   `
   const data = await fetchData<
     {

components/charts/zookeeper-summary-table.tsx

@@ -0,0 +1,63 @@
+import { ChartCard } from '@/components/chart-card'
+import { type ChartProps } from '@/components/charts/chart-props'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { fetchData } from '@/lib/clickhouse'
+import { cn } from '@/lib/utils'
+
+export async function ChartZookeeperSummaryTable({
+  title = 'ZooKeeper Current Metrics',
+  className,
+}: ChartProps) {
+  const query = `
+    SELECT metric, value, description
+    FROM system.metrics
+    WHERE metric LIKE 'ZooKeeper%'
+  `
+  const data = await fetchData<
+    {
+      metric: string
+      value: string
+      desc: string
+    }[]
+  >({ query })
+
+  const headers = Object.keys(data?.[0] || {})
+
+  return (
+    <ChartCard
+      title={title}
+      className={cn('justify-between', className)}
+      sql={query}
+    >
+      <div className="flex flex-col justify-between p-0">
+        <Table className={className}>
+          <TableHeader>
+            <TableRow>
+              {headers.map((header) => (
+                <TableHead key={header}>{header}</TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {data.map((row, idx) => (
+              <TableRow key={idx}>
+                {Object.values(row).map((value, i) => {
+                  return <TableCell key={i}>{value || ''} </TableCell>
+                })}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </ChartCard>
+  )
+}
+
+export default ChartZookeeperSummaryTable

components/charts/zookeeper-uptime.tsx

@@ -0,0 +1,45 @@
+import { ChartCard } from '@/components/chart-card'
+import { type ChartProps } from '@/components/charts/chart-props'
+import { fetchData } from '@/lib/clickhouse'
+import { cn } from '@/lib/utils'
+
+import { CardMultiMetrics } from '../tremor/card-multi-metrics'
+
+export async function ChartZookeeperUptime({
+  title = 'Zookeeper Uptime',
+  className,
+}: ChartProps) {
+  const query =
+    'SELECT formatReadableTimeDelta(zookeeperSessionUptime()) AS uptime'
+
+  const rows = await fetchData<
+    {
+      uptime: string
+    }[]
+  >({ query })
+
+  const uptime = rows[0] || { uptime: 'N/A' }
+
+  return (
+    <ChartCard
+      title={title}
+      className={cn('justify-between', className)}
+      sql={query}
+    >
+      <div className="flex flex-col justify-between p-0">
+        <CardMultiMetrics
+          primary={
+            <span className="flex flex-row items-center gap-2">
+              {uptime.uptime}
+            </span>
+          }
+          items={[]}
+          className="p-2"
+        />
+        <div className="pl-2 text-sm text-muted-foreground"></div>
+      </div>
+    </ChartCard>
+  )
+}
+
+export default ChartZookeeperUptime

components/related-charts.tsx

@@ -50,7 +50,7 @@ export async function RelatedCharts({
 
   return (
     <div className={cn('mb-5 grid gap-5', gridCols, className)}>
-      {charts.map(([_name, Chart, props], i) => {
+      {charts.map(([name, Chart, props], i) => {
         let className = ''
 
         // If next chart is a break, add a 'col-span-2' class to the current chart
@@ -61,6 +61,9 @@ export async function RelatedCharts({
         // | chart2   |  chart3  |
         // -----------------------
         if (charts[i + 1] && charts[i + 1][0] === 'break') {
+          console.debug(
+            `${name} add col-span-2 due to next chart being a break`
+          )
           className = 'col-span-2'
         }
 
@@ -73,7 +76,10 @@ export async function RelatedCharts({
         // |       chart3        |
         // -----------------------
         if (charts.length > 2 && i === charts.length - 1 && col === 2) {
-          className = 'col-span-2'
+          className = 'auto-cols-max'
+          console.debug(
+            `${name} add classname ${className} due to this chart is at the end of the row`
+          )
         }
 
         return (