Merge pull request #423 from duyet/chore/ui-update

feat: add column Markdown format

app/[host]/[query]/more/settings.ts

@@ -15,6 +15,7 @@ export const settingsConfig: QueryConfig = {
     changed: ColumnFormat.Boolean,
     value: ColumnFormat.Code,
     default: ColumnFormat.Code,
+    description: ColumnFormat.Markdown,
   },
   defaultParams: {
     changed: '',

components/charts/backup-size.tsx

@@ -1,6 +1,6 @@
 import { type ChartProps } from '@/components/charts/chart-props'
+import { CardMetric } from '@/components/generic-charts/card-metric'
 import { ChartCard } from '@/components/generic-charts/chart-card'
-import { CardMetric } from '@/components/tremor/card-metric'
 import { fetchData } from '@/lib/clickhouse'
 
 export async function ChartBackupSize({

components/charts/disk-size.tsx

@@ -1,6 +1,6 @@
 import { type ChartProps } from '@/components/charts/chart-props'
+import { CardMetric } from '@/components/generic-charts/card-metric'
 import { ChartCard } from '@/components/generic-charts/chart-card'
-import { CardMetric } from '@/components/tremor/card-metric'
 import { fetchData } from '@/lib/clickhouse'
 
 export async function ChartDiskSize({

components/charts/query-cache.tsx

@@ -1,6 +1,6 @@
 import { type ChartProps } from '@/components/charts/chart-props'
+import { CardMetric } from '@/components/generic-charts/card-metric'
 import { ChartCard } from '@/components/generic-charts/chart-card'
-import { CardMetric } from '@/components/tremor/card-metric'
 import { fetchData } from '@/lib/clickhouse'
 
 export async function ChartQueryCache({

components/data-table/cells/markdown-format.cy.tsx

@@ -0,0 +1,41 @@
+import { MarkdownFormat } from './markdown-format'
+
+describe('<MarkdownFormat />', () => {
+  it('renders basic markdown text', () => {
+    cy.mount(<MarkdownFormat value="Hello **World**" />)
+    cy.get('strong').should('contain', 'World')
+  })
+
+  it('renders empty string when value is null or undefined', () => {
+    cy.mount(<MarkdownFormat value={null} />)
+    cy.get('span').should('have.text', '')
+
+    cy.mount(<MarkdownFormat value={undefined} />)
+    cy.get('span').should('have.text', '')
+  })
+
+  it('applies default classes', () => {
+    cy.mount(<MarkdownFormat value="Test" />)
+    cy.get('span')
+      .should('have.class', 'truncate')
+      .and('have.class', 'text-wrap')
+  })
+
+  it('applies custom className from options', () => {
+    cy.mount(
+      <MarkdownFormat value="Test" options={{ className: 'text-red-500' }} />
+    )
+    cy.get('span')
+      .should('have.class', 'text-red-500')
+      .and('have.class', 'truncate')
+      .and('have.class', 'text-wrap')
+  })
+
+  it('handles non-string values by converting to string', () => {
+    cy.mount(<MarkdownFormat value={123} />)
+    cy.get('span').should('contain', '123')
+
+    cy.mount(<MarkdownFormat value={true} />)
+    cy.get('span').should('contain', 'true')
+  })
+})

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

@@ -0,0 +1,19 @@
+import { cn } from '@/lib/utils'
+import Markdown from 'react-markdown'
+
+export interface MarkdownFormatOptions {
+  className?: string
+}
+
+interface MarkdownFormatProps {
+  value: any
+  options?: MarkdownFormatOptions
+}
+
+export function MarkdownFormat({ value, options }: MarkdownFormatProps) {
+  return (
+    <span className={cn('truncate text-wrap', options?.className)}>
+      <Markdown>{`${!!value ? value : ''}`}</Markdown>
+    </span>
+  )
+}

components/data-table/format-cell.tsx

@@ -30,6 +30,10 @@ import {
   type HoverCardOptions,
 } from './cells/hover-card-format'
 import { LinkFormat } from './cells/link-format'
+import {
+  MarkdownFormat,
+  type MarkdownFormatOptions,
+} from './cells/markdown-format'
 import { RelatedTimeFormat } from './cells/related-time-format'
 import { TextFormat, type TextFormatOptions } from './cells/text-format'
 
@@ -134,6 +138,14 @@ export const formatCell = <
         />
       )
 
+    case ColumnFormat.Markdown:
+      return (
+        <MarkdownFormat
+          value={value}
+          options={columnFormatOptions as MarkdownFormatOptions}
+        />
+      )
+
     case ColumnFormat.HoverCard:
       return (
         <HoverCardFormat

components/tremor/card-metric.cy.tsx → components/generic-charts/card-metric.cy.tsx

@@ -8,10 +8,8 @@ describe('<CardMetric />', () => {
     cy.get('div').contains('0')
     cy.get('div').contains('10')
 
-    // Tremor bar should be 0% filled
-    cy.get('.tremor-ProgressBar-progressBar')
-      .should('have.attr', 'style')
-      .and('include', '0%')
+    // should be 0% filled
+    cy.get('span').should('have.attr', 'title').and('include', '0%')
   })
 
   it('renders 10% bar', () => {
@@ -21,10 +19,8 @@ describe('<CardMetric />', () => {
     cy.get('div').contains('1')
     cy.get('div').contains('10')
 
-    // Tremor bar should be 10% filled
-    cy.get('.tremor-ProgressBar-progressBar')
-      .should('have.attr', 'style')
-      .and('include', '10%')
+    // should be 10% filled
+    cy.get('span').should('have.attr', 'title').and('include', '10%')
   })
 
   it('renders 100% bar', () => {
@@ -34,10 +30,8 @@ describe('<CardMetric />', () => {
     cy.get('div').contains('10')
     cy.get('div').contains('10')
 
-    // Tremor bar should be 100% filled
-    cy.get('.tremor-ProgressBar-progressBar')
-      .should('have.attr', 'style')
-      .and('include', '100%')
+    // should be 100% filled
+    cy.get('span').should('have.attr', 'title').and('include', '100%')
   })
 
   it('renders 1000% bar when current > target', () => {
@@ -47,10 +41,8 @@ describe('<CardMetric />', () => {
     cy.get('div').contains('100')
     cy.get('div').contains('10')
 
-    // Tremor bar should be 1000% filled
-    cy.get('.tremor-ProgressBar-progressBar')
-      .should('have.attr', 'style')
-      .and('include', '1000%')
+    // should be 1000% filled
+    cy.get('span').should('have.attr', 'title').and('include', '1000%')
   })
 
   it('renders 10% bar with currentReadable and targetReadable', () => {
@@ -67,10 +59,8 @@ describe('<CardMetric />', () => {
     cy.get('div').contains('xx 1 xx')
     cy.get('div').contains('xx 10 xx')
 
-    // Tremor bar should be 10% filled
-    cy.get('.tremor-ProgressBar-progressBar')
-      .should('have.attr', 'style')
-      .and('include', '10%')
+    // should be 10% filled
+    cy.get('span').should('have.attr', 'title').and('include', '10%')
   })
 
   it('renders with custom className', () => {
@@ -82,7 +72,6 @@ describe('<CardMetric />', () => {
       />
     )
 
-    // Tremor bar should be 10% filled
     cy.get('.bg-cyan-400.custom-classname').should('exist')
   })
 })

components/generic-charts/card-metric.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+
+export interface CardMetricProps {
+  current: number
+  target: number
+  currentReadable?: string
+  targetReadable?: string
+  className?: string
+}
+
+export function CardMetric({
+  current,
+  target,
+  currentReadable,
+  targetReadable,
+  className,
+}: CardMetricProps) {
+  const percent = (current / target) * 100
+
+  return (
+    <div className={cn('flex flex-col gap-4', className)}>
+      <div className="text-xl md:text-3xl">{currentReadable || current}</div>
+
+      <div>
+        <div className="mt-2 flex flex-row items-center justify-between gap-2">
+          <span
+            className="truncate text-muted-foreground"
+            title={`${percent}%`}
+          >
+            {currentReadable || current}
+          </span>
+          <hr className="shrink grow border-dotted" />
+          <span className="text-nowrap">{targetReadable || target}</span>
+        </div>
+      </div>
+    </div>
+  )
+}

components/generic-charts/card-multi-metrics.tsx

@@ -36,12 +36,15 @@ export function CardMultiMetrics({
         ) : null}
 
         {items.map((item, i) => {
-          const _percent = (item.current / item.target) * 100
+          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">
+                <span
+                  className="truncate text-muted-foreground"
+                  title={`${percent}%`}
+                >
                   {item.currentReadable}
                 </span>
                 <hr className="shrink grow border-dotted" />

package.json

@@ -60,6 +60,7 @@
     "react-dom": "^19.0.0-rc-0bc30748-20241028",
     "react-error-boundary": "^4.1.2",
     "react-hook-form": "^7.53.1",
+    "react-markdown": "^9.0.1",
     "react-resizable-panels": "^2.1.6",
     "recharts": "^2.13.1",
     "server-only-context": "^0.1.0",

types/column-format.ts

@@ -6,6 +6,7 @@ import { type CodeDialogOptions } from '@/components/data-table/cells/code-dialo
 import { type CodeToggleOptions } from '@/components/data-table/cells/code-toggle-format'
 import { type ColoredBadgeOptions } from '@/components/data-table/cells/colored-badge-format'
 import { type HoverCardOptions } from '@/components/data-table/cells/hover-card-format'
+import { MarkdownFormatOptions } from '@/components/data-table/cells/markdown-format'
 import { type TextFormatOptions } from '@/components/data-table/cells/text-format'
 
 export enum ColumnFormat {
@@ -17,6 +18,7 @@ export enum ColumnFormat {
   CodeDialog = 'code-dialog',
   HoverCard = 'hover-card',
   Duration = 'duration',
+  Markdown = 'markdown',
   Boolean = 'boolean',
   Action = 'action',
   Number = 'number',
@@ -31,6 +33,7 @@ export type ColumnFormatWithArgs =
   | [ColumnFormat.Action, Action[]]
   | [ColumnFormat.Link, LinkProps & { className?: string }]
   | [ColumnFormat.Text, TextFormatOptions]
+  | [ColumnFormat.Markdown, MarkdownFormatOptions]
   | [ColumnFormat.ColoredBadge, ColoredBadgeOptions]
   | [ColumnFormat.HoverCard, HoverCardOptions]
   | [ColumnFormat.CodeDialog, CodeDialogOptions]