feat: remove tremor for card-multi-metrics

duyet · Nov 4, 2024 · 5c70d99 · 5c70d99
1 parent e4d4e46
commit 5c70d99
Show file tree

Hide file tree

Showing 11 changed files with 108 additions and 76 deletions.
diff --git a/app/[host]/[query]/queries/running-queries.ts b/app/[host]/[query]/queries/running-queries.ts
@@ -5,7 +5,7 @@ export const runningQueriesConfig: QueryConfig = {
   name: 'running-queries',
   sql: `
       SELECT *,
-        multiIf (elapsed < 30, 'a few seconds',
+        multiIf (elapsed < 30, format('{} seconds', round(elapsed, 1)),
                  elapsed < 90, 'a minute',
                  formatReadableTimeDelta(elapsed, 'days', 'minutes')) as readable_elapsed,
         round(100 * elapsed / max(elapsed) OVER ()) AS pct_elapsed,

diff --git a/components/charts/merge-count.tsx b/components/charts/merge-count.tsx
@@ -39,6 +39,7 @@ export async function ChartMergeCount({
     <ChartCard
       title={title}
       className={cn('justify-between', className)}
+      contentClassName="flex flex-col justify-between"
       sql={query}
       data={data}
     >

diff --git a/components/charts/replication-queue-count.tsx b/components/charts/replication-queue-count.tsx
@@ -1,6 +1,6 @@
 import { type ChartProps } from '@/components/charts/chart-props'
+import { CardMultiMetrics } from '@/components/generic-charts/card-multi-metrics'
 import { ChartCard } from '@/components/generic-charts/chart-card'
-import { CardMultiMetrics } from '@/components/tremor/card-multi-metrics'
 import { fetchData } from '@/lib/clickhouse'
 import { cn } from '@/lib/utils'
 

diff --git a/components/charts/summary-used-by-merges.tsx b/components/charts/summary-used-by-merges.tsx
@@ -2,11 +2,11 @@ import { ArrowRightIcon } from '@radix-ui/react-icons'
 import Link from 'next/link'
 
 import { type ChartProps } from '@/components/charts/chart-props'
-import { ChartCard } from '@/components/generic-charts/chart-card'
 import {
   CardMultiMetrics,
   type CardMultiMetricsProps,
-} from '@/components/tremor/card-multi-metrics'
+} from '@/components/generic-charts/card-multi-metrics'
+import { ChartCard } from '@/components/generic-charts/chart-card'
 import { fetchData } from '@/lib/clickhouse'
 import { getScopedLink } from '@/lib/scoped-link'
 
@@ -181,13 +181,15 @@ export async function ChartSummaryUsedByMerges({
       <div className="flex flex-col justify-between p-0">
         <CardMultiMetrics
           primary={
-            <span className="flex flex-row items-center gap-2">
-              {rowsReadWritten.readable_rows_read} rows read,{' '}
-              {used.readable_memory_usage} memory used for merges
-              <Link href={await getScopedLink('/merges')} className="inline">
-                <ArrowRightIcon className="size-5" />
-              </Link>
-            </span>
+            <div className="flex flex-col">
+              <div>{rowsReadWritten.readable_rows_read} rows read</div>
+              <div className="flex flex-row items-center gap-2">
+                {used.readable_memory_usage} memory used for merges
+                <Link href={await getScopedLink('/merges')} className="inline">
+                  <ArrowRightIcon className="size-5" />
+                </Link>
+              </div>
+            </div>
           }
           items={items}
           className="p-2"

diff --git a/components/charts/summary-used-by-mutations.tsx b/components/charts/summary-used-by-mutations.tsx
@@ -1,9 +1,6 @@
 import { type ChartProps } from '@/components/charts/chart-props'
+import { CardMultiMetrics } from '@/components/generic-charts/card-multi-metrics'
 import { ChartCard } from '@/components/generic-charts/chart-card'
-import {
-  CardMultiMetrics,
-  type CardMultiMetricsProps,
-} from '@/components/tremor/card-multi-metrics'
 import { fetchData } from '@/lib/clickhouse'
 
 export async function ChartSummaryUsedByMutations({
@@ -22,8 +19,6 @@ export async function ChartSummaryUsedByMutations({
   >({ query })
   const count = data?.[0] || { running_count: 0 }
 
-  const items: CardMultiMetricsProps['items'] = []
-
   return (
     <ChartCard title={title} className={className} sql={query} data={data}>
       <div className="flex flex-col content-stretch items-center p-0">
@@ -33,7 +28,6 @@ export async function ChartSummaryUsedByMutations({
               {count.running_count} running mutations
             </span>
           }
-          items={items}
           className="p-2"
         />
       </div>

diff --git a/components/charts/summary-used-by-running-queries.tsx b/components/charts/summary-used-by-running-queries.tsx
@@ -2,11 +2,11 @@ import { ArrowRightIcon } from '@radix-ui/react-icons'
 import Link from 'next/link'
 
 import { type ChartProps } from '@/components/charts/chart-props'
-import { ChartCard } from '@/components/generic-charts/chart-card'
 import {
   CardMultiMetrics,
   type CardMultiMetricsProps,
-} from '@/components/tremor/card-multi-metrics'
+} from '@/components/generic-charts/card-multi-metrics'
+import { ChartCard } from '@/components/generic-charts/chart-card'
 import { fetchData } from '@/lib/clickhouse'
 import { formatReadableQuantity } from '@/lib/format-readable'
 import { getScopedLink } from '@/lib/scoped-link'
@@ -158,16 +158,18 @@ export async function ChartSummaryUsedByRunningQueries({
       <div className="flex flex-col justify-between p-0">
         <CardMultiMetrics
           primary={
-            <span className="flex flex-row items-center gap-2">
-              {first.query_count} queries, {first.readable_memory_usage} memory
-              used for running queries
-              <Link
-                href={await getScopedLink('/running-queries')}
-                className="inline"
-              >
-                <ArrowRightIcon className="size-5" />
-              </Link>
-            </span>
+            <div className="flex flex-col">
+              <div>{first.query_count} queries</div>
+              <div className="flex flex-row items-center gap-2">
+                {first.readable_memory_usage} memory used for running queries
+                <Link
+                  href={await getScopedLink('/running-queries')}
+                  className="inline"
+                >
+                  <ArrowRightIcon className="size-5" />
+                </Link>
+              </div>
+            </div>
           }
           items={items}
           className="p-2"

diff --git a/components/charts/zookeeper-uptime.tsx b/components/charts/zookeeper-uptime.tsx
@@ -4,7 +4,7 @@ import { fetchData } from '@/lib/clickhouse'
 import { cn } from '@/lib/utils'
 
 import { ArrowUpIcon } from '@radix-ui/react-icons'
-import { CardMultiMetrics } from '../tremor/card-multi-metrics'
+import { CardMultiMetrics } from '../generic-charts/card-multi-metrics'
 
 export async function ChartZookeeperUptime({
   title = 'Zookeeper Uptime',

diff --git a/components/data-table/column-defs.tsx b/components/data-table/column-defs.tsx
@@ -8,16 +8,24 @@ import type { ColumnDef, Row, RowData, Table } from '@tanstack/react-table'
 import { formatCell } from '@/components/data-table/format-cell'
 import { Button } from '@/components/ui/button'
 import { ColumnFormat, ColumnFormatOptions } from '@/types/column-format'
+import { type Icon } from '@/types/icon'
 import { type QueryConfig } from '@/types/query-config'
 
 export type ColumnType = { [key: string]: string }
 
-const formatHeader = (name: string, format: ColumnFormat) => {
+const formatHeader = (name: string, format: ColumnFormat, icon?: Icon) => {
+  const CustomIcon = icon
+
   switch (format) {
     case ColumnFormat.Action:
       return <div className="text-muted-foreground">action</div>
     default:
-      return <div className="text-muted-foreground">{name}</div>
+      return (
+        <div className="text-muted-foreground">
+          {CustomIcon ? <CustomIcon /> : null}
+          {name}
+        </div>
+      )
   }
 }
 
@@ -65,7 +73,7 @@ export const getColumnDefs = <
           variant="ghost"
           onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
         >
-          {formatHeader(name, columnFormat)}
+          {formatHeader(name, columnFormat, config.columnIcons?.[name])}
 
           {column.getIsSorted() === false ? (
             <CaretSortIcon className="ml-2 size-4" />

diff --git a/components/generic-charts/card-multi-metrics.tsx b/components/generic-charts/card-multi-metrics.tsx
@@ -0,0 +1,51 @@
+import { cn } from '@/lib/utils'
+
+export interface CardMultiMetricsProps {
+  primary?: string | number | React.ReactNode
+  items?: {
+    current: number
+    target: number
+    currentReadable?: string
+    targetReadable?: string
+  }[]
+  currentLabel?: string
+  targetLabel?: string
+  className?: string
+}
+
+export function CardMultiMetrics({
+  primary,
+  items = [],
+  currentLabel = 'Current',
+  targetLabel = 'Total',
+  className,
+}: CardMultiMetricsProps) {
+  return (
+    <div className={cn('flex flex-col gap-4', className)}>
+      <div className="text-xl md:text-3xl">{primary}</div>
+
+      <div className="flex flex-col justify-between text-sm">
+        <div className="mt-2 flex flex-row justify-between font-bold">
+          <span className="truncate">{currentLabel}</span>
+          <span className="truncate">{targetLabel}</span>
+        </div>
+
+        {items.map((item, i) => {
+          const _percent = (item.current / item.target) * 100
+
+          return (
+            <div key={i}>
+              <div className="mt-2 flex flex-row items-center justify-between gap-2">
+                <span className="truncate text-muted-foreground">
+                  {item.currentReadable}
+                </span>
+                <hr className="shrink grow border-dotted" />
+                <span className="text-nowrap">{item.targetReadable}</span>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
diff --git a/components/tremor/card-multi-metrics.tsx b/components/tremor/card-multi-metrics.tsx
diff --git a/types/query-config.ts b/types/query-config.ts
@@ -27,6 +27,22 @@ export interface QueryConfig {
   columnFormats?: {
     [key: string]: ColumnFormat | ColumnFormatWithArgs
   }
+  /**
+   * Column icons can be specified as React Component name.
+   *
+   * Example:
+   * ```ts
+   * import { CalendarIcon } from 'lucide-react'
+   * import { GlobeIcon } from '@radix-ui/react-icons'
+   * columnIcons: {
+   *  date: CalendarIcon,
+   *  language: GlobeIcon
+   * }
+   * ```
+   */
+  columnIcons?: {
+    [key: string]: Icon
+  }
   relatedCharts?:
     | string[]
     | [string, ChartProps][]