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

feat: update overview charts layout and enhance UI components

app/[host]/overview/overview-charts.tsx

@@ -8,7 +8,7 @@ export async function OverviewCharts({ className }: { className?: string }) {
   return (
     <div
       className={cn(
-        'grid grid-cols-2 gap-4',
+        'grid grid-cols-1 gap-4',
         'md:grid-cols-3 lg:grid-cols-4',
         className
       )}

app/[host]/query/[query_id]/config.ts

@@ -10,6 +10,7 @@ export interface RowData {
   user: string
   duration_ms: string
 
+  interface_query_initial_from: string
   hostname: string
   client_hostname: string
   client_name: string
@@ -90,15 +91,16 @@ export const config: QueryConfig = {
         peak_threads_usage,
 
         -- General query info
+        interface as interface_query_initial_from,
+        hostname,
+        client_hostname,
+        client_name,
+        client_revision,
         initial_user,
         initial_query_id,
         initial_address,
         initial_port,
         initial_query_start_time,
-        hostname,
-        client_hostname,
-        client_name,
-        client_revision,
         databases,
         tables,
         columns,

app/[host]/query/[query_id]/query-detail.tsx

@@ -30,11 +30,12 @@ export async function QueryDetail({
       ...queryConfig.defaultParams,
       ...params,
     }
-    const { data, metadata } = await fetchData<RowData[]>({
+    const { data } = await fetchData<RowData[]>({
       query: queryConfig.sql,
       format: 'JSONEachRow',
       query_params: queryParams,
       clickhouse_settings: {
+        use_query_cache: 0,
         ...queryConfig.clickhouseSettings,
       },
     })
@@ -68,6 +69,7 @@ export async function QueryDetail({
       views,
       exception_code,
       exception,
+      interface_query_initial_from,
       stack_trace,
       http_method,
       http_user_agent,
@@ -137,12 +139,12 @@ export async function QueryDetail({
         <div className="grid grid-cols-1 md:grid-cols-2">
           {(
             [
-              ['Host name', hostname],
+              ['Hostname of the server executing the query', hostname],
               ['Client host name', client_hostname],
               ['Client name', client_name],
               ['Client revision', client_revision],
               [
-                'Initial user',
+                'Initial user (for distributed query execution)',
                 initial_user ? (
                   <Link
                     className="flex flex-row items-center gap-1"
@@ -160,7 +162,7 @@ export async function QueryDetail({
                 ),
               ],
               [
-                'Initial query id',
+                'Initial query id (for distributed query execution)',
                 <Link
                   className="flex flex-row items-center gap-1"
                   href={await getScopedLink(`/query/${initial_query_id}`)}
@@ -171,9 +173,18 @@ export async function QueryDetail({
                   <ExternalLinkIcon className="size-3" />
                 </Link>,
               ],
-              ['Initial address', initial_address],
-              ['Initial port', initial_port],
-              ['Initial query start time', initial_query_start_time],
+              [
+                'initial_address (IP address that the parent query was launched from)',
+                initial_address,
+              ],
+              [
+                'initial_port (The client port that was used to make the parent query)',
+                initial_port,
+              ],
+              [
+                'Initial query starting time (for distributed query execution)',
+                initial_query_start_time,
+              ],
               ['Databases', bindingDatabaseLink(databases)],
               ['Tables', bindingTableLink(tables)],
               ['Columns', JSON.stringify(columns, null, 2)],
@@ -183,7 +194,11 @@ export async function QueryDetail({
               ['Exception code', exception_code],
               ['Exception', exception],
               ['Stack trace', stack_trace],
-              ['HTTP method', http_method],
+              [
+                'Interface that the query was initiated from (1 — TCP, 2 — HTTP)',
+                interface_query_initial_from,
+              ],
+              ['HTTP method (0 = TCP, 1 = GET, 2 = POST)', http_method],
               ['HTTP user agent', http_user_agent],
               ['HTTP referer', http_referer],
               ['Forwarded for', forwarded_for],

components/overview-charts/clickhouse-info.tsx

@@ -128,7 +128,8 @@ async function InfoLine({
         className
       )}
     >
-      <div className="flex-1 truncate text-xl">{data[0].val}</div>
+      <div className="truncate text-xl">{data[0].val}</div>
+      <hr className="flex-auto grow border-dotted" />
       <div className="flex-none text-xs text-muted-foreground">{label}</div>
     </div>
   )

components/overview-charts/database-table-count.tsx

@@ -49,6 +49,13 @@ export async function DatabaseTableCount({
       )}
     >
       <CardContent className="flex flex-col content-center p-2 pt-2">
+        <Link
+          className="mb-2 mt-2 text-right text-xs text-muted-foreground"
+          href={await getScopedLink('/tables-overview')}
+        >
+          Tables Overview →
+        </Link>
+
         {metrics.map((metric) => (
           <Suspense
             key={metric.query}
@@ -87,36 +94,38 @@ async function LinkCount({
   return (
     <div
       className={cn(
-        'group inline-flex w-full items-baseline gap-2 p-1 opacity-80 hover:opacity-100',
+        'group inline-flex w-full items-center gap-2 p-1 opacity-80 hover:opacity-100',
         className
       )}
     >
-      <Link
-        className="inline-flex items-baseline justify-between gap-2"
-        href={await getScopedLink(href)}
-      >
+      <div className="inline-flex w-full items-center justify-between gap-2">
         <div className="inline-flex items-baseline gap-2 text-3xl font-bold">
           <span className="p-0">{data[0].count}</span>
         </div>
-        <div className="inline-flex gap-1 truncate text-xs text-muted-foreground">
-          {icon} {label} →
-        </div>
-      </Link>
-      <DialogSQL
-        sql={query}
-        description=""
-        button={
-          <Button
-            variant="outline"
-            className="ml-auto h-fit border-0 p-2 opacity-0 shadow-none group-hover:opacity-100"
-            aria-label="Show SQL"
-            title="SQL of this"
-          >
-            <CodeIcon className="size-3" />
-          </Button>
-        }
-        contentClassName="max-w-screen-lg"
-      />
+        <hr className="flex-auto grow border-dotted" />
+
+        <DialogSQL
+          sql={query}
+          description=""
+          button={
+            <Button
+              variant="outline"
+              className="ml-auto hidden h-fit border-0 p-2 shadow-none group-hover:inline"
+              aria-label="Show SQL"
+              title="SQL of this"
+            >
+              <CodeIcon className="size-3" />
+            </Button>
+          }
+          contentClassName="max-w-screen-lg"
+        />
+
+        <Link href={await getScopedLink(href)}>
+          <div className="inline-flex gap-1 truncate text-xs text-muted-foreground">
+            {icon} {label} →
+          </div>
+        </Link>
+      </div>
     </div>
   )
 }

components/overview-charts/running-queries.tsx

@@ -28,7 +28,7 @@ export async function RunningQueries({ className }: { className?: string }) {
         <div className="absolute bottom-0 left-0 z-50 flex flex-row items-center gap-2 p-4 pb-0">
           <div className="text-2xl font-bold">{data[0].count}</div>
           <Link
-            className="text-xs text-black text-muted-foreground"
+            className="text-xs text-black"
             href={await getScopedLink('/running-queries')}
           >
             running queries →
@@ -63,7 +63,7 @@ export async function RunningQueries({ className }: { className?: string }) {
           showLegend={false}
           chartConfig={{
             query_count: {
-              color: 'hsl(var(--chart-5))',
+              color: 'hsl(var(--chart-12))',
             },
           }}
         />