feat: add memory-usage, update things

app/overview/page.tsx

@@ -1,8 +1,9 @@
 import { unstable_noStore as noStore } from 'next/cache'
 
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import { ChartAvgMemory } from '@/components/charts/avg-memory'
+import { ChartCPUUsage } from '@/components/charts/cpu-usage'
 import { ChartDisksUsage } from '@/components/charts/disks-usage'
+import { ChartMemoryUsage } from '@/components/charts/memory-usage'
 import { ChartMergeCount } from '@/components/charts/merge-count'
 import { ChartNewPartCreated } from '@/components/charts/new-parts-created'
 import { ChartQueryCountByUser } from '@/components/charts/query-count-by-user'
@@ -29,7 +30,7 @@ export default async function Overview() {
       <TabsContent value="overview" className="space-y-4">
         <div className="grid grid-cols-1 items-stretch gap-5 md:grid-cols-2">
           <ServerComponentLazy>
-            <ChartAvgMemory
+            <ChartMemoryUsage
               title="Memory Usage last 24h (avg / 10 minutes)"
               className="w-full"
               chartClassName="h-72"
@@ -38,6 +39,16 @@ export default async function Overview() {
             />
           </ServerComponentLazy>
 
+          <ServerComponentLazy>
+            <ChartCPUUsage
+              title="CPU Usage last 24h (avg / 10 minutes)"
+              className="w-full"
+              chartClassName="h-72"
+              interval="toStartOfTenMinutes"
+              lastHours={24}
+            />
+          </ServerComponentLazy>
+
           <ServerComponentLazy>
             <ChartQueryCountByUser title="Query Count" className="w-full p-5" />
           </ServerComponentLazy>

components/chart-card.tsx

@@ -1,5 +1,6 @@
 import { CodeIcon } from '@radix-ui/react-icons'
 
+import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
 import {
   Card,
@@ -18,7 +19,7 @@ interface ChartCardProps {
 
 export function ChartCard({ title, className, sql, children }: ChartCardProps) {
   return (
-    <Card className={className}>
+    <Card className={cn('rounded-md', className)}>
       {title ? (
         <CardHeader className="p-2">
           <CardDescription className="group flex flex-row items-center justify-between">

components/charts/cpu-usage.tsx

@@ -0,0 +1,34 @@
+import { fetchData } from '@/lib/clickhouse'
+import type { ChartProps } from '@/components/charts/chart-props'
+import { AreaChart } from '@/components/tremor'
+
+import { ChartCard } from '../chart-card'
+
+export async function ChartCPUUsage({
+  title,
+  interval = 'toStartOfTenMinutes',
+  lastHours = 24,
+  className,
+}: ChartProps) {
+  const sql = `
+    SELECT ${interval}(event_time)::INT AS event_time,
+           avg(ProfileEvent_OSCPUVirtualTimeMicroseconds) / 1000000 as avg_cpu
+    FROM system.metric_log
+    WHERE event_time >= (now() - INTERVAL ${lastHours} HOUR)
+    GROUP BY 1
+    ORDER BY 1 WITH FILL STEP 60`
+  const data = await fetchData(sql)
+
+  return (
+    <ChartCard title={title} className={className} sql={sql}>
+      <AreaChart
+        data={data}
+        index="event_time"
+        categories={['avg_cpu']}
+        className={className}
+      />
+    </ChartCard>
+  )
+}
+
+export default ChartCPUUsage

components/charts/avg-memory.tsx → components/charts/memory-usage.tsx

@@ -4,7 +4,7 @@ import { AreaChart } from '@/components/tremor'
 
 import { ChartCard } from '../chart-card'
 
-export async function ChartAvgMemory({
+export async function ChartMemoryUsage({
   title,
   interval = 'toStartOfTenMinutes',
   lastHours = 24,
@@ -34,4 +34,4 @@ export async function ChartAvgMemory({
   )
 }
 
-export default ChartAvgMemory
+export default ChartMemoryUsage

components/data-table/cells/link-format.tsx

@@ -20,7 +20,6 @@ export function LinkFormat({ row, value, options }: LinkFormatProps) {
     if (matches) {
       matches.forEach((match) => {
         const key = match.replace('[', '').replace(']', '').trim()
-        console.debug(href, 'Found match', match, key, row.getValue(key))
         href = href.replace(match, row.getValue(key))
       })
     }

components/related-charts.tsx

@@ -8,11 +8,13 @@ import { ServerComponentLazy } from './server-component-lazy'
 
 interface RelatedChartsProps {
   relatedCharts: QueryConfig['relatedCharts']
+  maxChartsPerRow?: number
   className?: string
 }
 
 export async function RelatedCharts({
   relatedCharts,
+  maxChartsPerRow = 2,
   className,
 }: RelatedChartsProps) {
   // Related charts
@@ -35,8 +37,8 @@ export async function RelatedCharts({
     charts.push([chartsModule.default, props])
   }
 
-  const chartWidth =
-    charts.length > 1 ? `w-full md:w-1/${charts.length}` : 'w-full'
+  const w = charts.length > maxChartsPerRow ? maxChartsPerRow : charts.length
+  const chartWidth = charts.length > 1 ? `w-full md:w-1/${w}` : 'w-full'
 
   return (
     <div className={cn('mb-5 flex flex-col gap-5 md:flex-row', className)}>

package.json

@@ -37,7 +37,7 @@
     "cmdk": "^0.2.0",
     "dayjs": "^1.11.10",
     "lucide-react": "^0.294.0",
-    "next": "^14.0.3",
+    "next": "^14.0.4",
     "react": "^18",
     "react-dom": "^18",
     "react-error-boundary": "^4.0.11",

yarn.lock

@@ -3976,7 +3976,7 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
-next@^14.0.3:
+next@^14.0.4:
   version "14.0.4"
   resolved "https://registry.yarnpkg.com/next/-/next-14.0.4.tgz#bf00b6f835b20d10a5057838fa2dfced1d0d84dc"
   integrity sha512-qbwypnM7327SadwFtxXnQdGiKpkuhaRLE2uq62/nRul9cj9KhQ5LhHmlziTNqUidZotw/Q1I9OjirBROdUJNgA==