feat(ui): rocksdb fields in stmt/slowquery copr tab

ui/lib/apps/SlowQuery/pages/Detail/DetailTabBasic.tsx

@@ -1,45 +1,30 @@
 import React from 'react'
 import { SlowqueryModel } from '@lib/client'
-import { CardTable, DateTime } from '@lib/components'
+import { DateTime } from '@lib/components'
 import { getValueFormat } from '@baurine/grafana-value-formats'
-import { valueColumns } from '@lib/utils/tableColumns'
 
-export interface ITabBasicProps {
-  data: SlowqueryModel
-}
-
-export default function TabBasic({ data }: ITabBasicProps) {
-  // Here it is fine to not use useMemo() to cache data,
-  // because the detail data won't be refreshed after loaded
-  const items = [
-    {
-      key: 'timestamp',
-      value: (
-        <DateTime.Calendar unixTimestampMs={(data.timestamp ?? 0) * 1000} />
-      ),
-    },
-    { key: 'digest', value: data.digest },
-    { key: 'is_internal', value: data.is_internal },
-    { key: 'is_success', value: data.success },
-    { key: 'db', value: data.db },
-    { key: 'index_names', value: data.index_names },
-    { key: 'stats', value: data.stats },
-    { key: 'backoff_types', value: data.backoff_types },
-    {
-      key: 'memory_max',
-      value: getValueFormat('bytes')(data.memory_max || 0, 1),
-    },
-    {
-      key: 'disk_max',
-      value: getValueFormat('bytes')(data.disk_max || 0, 1),
-    },
-    { key: 'instance', value: data.instance },
-    { key: 'connection_id', value: data.connection_id },
-    { key: 'user', value: data.user },
-    { key: 'host', value: data.host },
-  ]
-  const columns = valueColumns('slow_query.fields.')
-  return (
-    <CardTable cardNoMargin columns={columns} items={items} extendLastColumn />
-  )
-}
+export const tabBasicItems = (data: SlowqueryModel) => [
+  {
+    key: 'timestamp',
+    value: <DateTime.Calendar unixTimestampMs={(data.timestamp ?? 0) * 1000} />,
+  },
+  { key: 'digest', value: data.digest },
+  { key: 'is_internal', value: data.is_internal },
+  { key: 'is_success', value: data.success },
+  { key: 'db', value: data.db },
+  { key: 'index_names', value: data.index_names },
+  { key: 'stats', value: data.stats },
+  { key: 'backoff_types', value: data.backoff_types },
+  {
+    key: 'memory_max',
+    value: getValueFormat('bytes')(data.memory_max || 0, 1),
+  },
+  {
+    key: 'disk_max',
+    value: getValueFormat('bytes')(data.disk_max || 0, 1),
+  },
+  { key: 'instance', value: data.instance },
+  { key: 'connection_id', value: data.connection_id },
+  { key: 'user', value: data.user },
+  { key: 'host', value: data.host },
+]

ui/lib/apps/SlowQuery/pages/Detail/DetailTabCopr.tsx

@@ -1,38 +1,51 @@
 import React from 'react'
 
 import { SlowqueryModel } from '@lib/client'
-import { CardTable, ShortValueWithTooltip } from '@lib/components'
-import { valueColumns } from '@lib/utils/tableColumns'
+import { ValueWithTooltip } from '@lib/components'
 
-export interface ITabCoprProps {
-  data: SlowqueryModel
-}
-
-export default function TabCopr({ data }: ITabCoprProps) {
-  const items = [
-    {
-      key: 'request_count',
-      value: <ShortValueWithTooltip value={data.request_count} />,
-    },
-    {
-      key: 'process_keys',
-      value: <ShortValueWithTooltip value={data.process_keys} />,
-    },
-    {
-      key: 'total_keys',
-      value: <ShortValueWithTooltip value={data.total_keys} />,
-    },
-    {
-      key: 'cop_proc_addr',
-      value: data.cop_proc_addr,
-    },
-    {
-      key: 'cop_wait_addr',
-      value: data.cop_wait_addr,
-    },
-  ]
-  const columns = valueColumns('slow_query.fields.')
-  return (
-    <CardTable cardNoMargin columns={columns} items={items} extendLastColumn />
-  )
-}
+export const tabCoprItems = (data: SlowqueryModel) => [
+  {
+    key: 'request_count',
+    value: <ValueWithTooltip.Short value={data.request_count} />,
+  },
+  {
+    key: 'process_keys',
+    value: <ValueWithTooltip.Short value={data.process_keys} />,
+  },
+  {
+    key: 'total_keys',
+    value: <ValueWithTooltip.Short value={data.total_keys} />,
+  },
+  {
+    key: 'cop_proc_addr',
+    value: data.cop_proc_addr,
+  },
+  {
+    key: 'cop_wait_addr',
+    value: data.cop_wait_addr,
+  },
+  {
+    key: 'rocksdb_block_cache_hit_count',
+    value: (
+      <ValueWithTooltip.Short value={data.rocksdb_block_cache_hit_count} />
+    ),
+  },
+  {
+    key: 'rocksdb_block_read_byte',
+    value: (
+      <ValueWithTooltip.ScaledBytes value={data.rocksdb_block_read_byte} />
+    ),
+  },
+  {
+    key: 'rocksdb_block_read_count',
+    value: <ValueWithTooltip.Short value={data.rocksdb_block_read_count} />,
+  },
+  {
+    key: 'rocksdb_delete_skipped_count',
+    value: <ValueWithTooltip.Short value={data.rocksdb_delete_skipped_count} />,
+  },
+  {
+    key: 'rocksdb_key_skipped_count',
+    value: <ValueWithTooltip.Short value={data.rocksdb_key_skipped_count} />,
+  },
+]

ui/lib/apps/SlowQuery/pages/Detail/DetailTabTime.tsx

@@ -1,17 +1,10 @@
 import React from 'react'
 import { SlowqueryModel } from '@lib/client'
-import { CardTable } from '@lib/components'
-import { timeValueColumns } from '@lib/utils/tableColumns'
-import { useTranslation } from 'react-i18next'
 import { Typography } from 'antd'
+import { TFunction } from 'i18next'
 
-export interface ITabTimeProps {
-  data: SlowqueryModel
-}
-
-export default function TabBasic({ data }: ITabTimeProps) {
-  const { t } = useTranslation()
-  const items = [
+export const tabTimeItems = (data: SlowqueryModel, t: TFunction) => {
+  return [
     {
       key: 'query_time2',
       keyDisplay: (
@@ -123,8 +116,4 @@ export default function TabBasic({ data }: ITabTimeProps) {
       indentLevel: 1,
     },
   ]
-  const columns = timeValueColumns('slow_query.fields.', items)
-  return (
-    <CardTable cardNoMargin columns={columns} items={items} extendLastColumn />
-  )
 }

ui/lib/apps/SlowQuery/pages/Detail/DetailTabTxn.tsx

@@ -2,38 +2,27 @@ import React from 'react'
 import { getValueFormat } from '@baurine/grafana-value-formats'
 
 import { SlowqueryModel } from '@lib/client'
-import { CardTable, ShortValueWithTooltip } from '@lib/components'
-import { valueColumns } from '@lib/utils/tableColumns'
+import { ValueWithTooltip } from '@lib/components'
 
-export interface ITabTxnProps {
-  data: SlowqueryModel
-}
-
-export default function TabCopr({ data }: ITabTxnProps) {
-  const items = [
-    {
-      key: 'txn_start_ts',
-      value: data.txn_start_ts,
-    },
-    {
-      key: 'write_keys',
-      value: <ShortValueWithTooltip value={data.write_keys} />,
-    },
-    {
-      key: 'write_size',
-      value: getValueFormat('bytes')(data.write_size || 0, 1),
-    },
-    {
-      key: 'prewrite_region',
-      value: <ShortValueWithTooltip value={data.prewrite_region} />,
-    },
-    {
-      key: 'txn_retry',
-      value: <ShortValueWithTooltip value={data.txn_retry} />,
-    },
-  ]
-  const columns = valueColumns('slow_query.fields.')
-  return (
-    <CardTable cardNoMargin columns={columns} items={items} extendLastColumn />
-  )
-}
+export const tabTxnItems = (data: SlowqueryModel) => [
+  {
+    key: 'txn_start_ts',
+    value: data.txn_start_ts,
+  },
+  {
+    key: 'write_keys',
+    value: <ValueWithTooltip.Short value={data.write_keys} />,
+  },
+  {
+    key: 'write_size',
+    value: getValueFormat('bytes')(data.write_size || 0, 1),
+  },
+  {
+    key: 'prewrite_region',
+    value: <ValueWithTooltip.Short value={data.prewrite_region} />,
+  },
+  {
+    key: 'txn_retry',
+    value: <ValueWithTooltip.Short value={data.txn_retry} />,
+  },
+]

ui/lib/apps/SlowQuery/pages/Detail/DetailTabs.tsx

@@ -0,0 +1,88 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { SlowqueryModel } from '@lib/client'
+import { valueColumns, timeValueColumns } from '@lib/utils/tableColumns'
+import { CardTabs, CardTable } from '@lib/components'
+
+import { tabBasicItems } from './DetailTabBasic'
+import { tabTimeItems } from './DetailTabTime'
+import { tabCoprItems } from './DetailTabCopr'
+import { tabTxnItems } from './DetailTabTxn'
+import { useSchemaColumns } from '../../utils/useSchemaColumns'
+
+export default function DetailTabs({ data }: { data: SlowqueryModel }) {
+  const { t } = useTranslation()
+  const { schemaColumns } = useSchemaColumns()
+  const columnsSet = new Set(schemaColumns)
+
+  const tabs = [
+    {
+      key: 'basic',
+      title: t('slow_query.detail.tabs.basic'),
+      content: () => {
+        const items = tabBasicItems(data)
+        const columns = valueColumns('slow_query.fields.')
+        return (
+          <CardTable
+            cardNoMargin
+            columns={columns}
+            items={items}
+            extendLastColumn
+          />
+        )
+      },
+    },
+    {
+      key: 'time',
+      title: t('slow_query.detail.tabs.time'),
+      content: () => {
+        const items = tabTimeItems(data, t)
+        const columns = timeValueColumns('slow_query.fields.', items)
+        return (
+          <CardTable
+            cardNoMargin
+            columns={columns}
+            items={items}
+            extendLastColumn
+          />
+        )
+      },
+    },
+    {
+      key: 'copr',
+      title: t('slow_query.detail.tabs.copr'),
+      content: () => {
+        const items = tabCoprItems(data).filter((item) =>
+          columnsSet.has(item.key)
+        )
+        const columns = valueColumns('slow_query.fields.')
+        return (
+          <CardTable
+            cardNoMargin
+            columns={columns}
+            items={items}
+            extendLastColumn
+          />
+        )
+      },
+    },
+    {
+      key: 'txn',
+      title: t('slow_query.detail.tabs.txn'),
+      content: () => {
+        const items = tabTxnItems(data)
+        const columns = valueColumns('slow_query.fields.')
+        return (
+          <CardTable
+            cardNoMargin
+            columns={columns}
+            items={items}
+            extendLastColumn
+          />
+        )
+      },
+    },
+  ]
+  return <CardTabs animated={false} tabs={tabs} />
+}

ui/lib/apps/SlowQuery/pages/Detail/index.tsx

@@ -11,7 +11,6 @@ import { buildQueryFn, parseQueryFn } from '@lib/utils/query'
 import formatSql from '@lib/utils/sqlFormatter'
 import {
   AnimatedSkeleton,
-  CardTabs,
   CopyLink,
   Descriptions,
   ErrorBar,
@@ -21,10 +20,8 @@ import {
   Pre,
   TextWithInfo,
 } from '@lib/components'
-import TabBasic from './DetailTabBasic'
-import TabTime from './DetailTabTime'
-import TabCopr from './DetailTabCopr'
-import TabTxn from './DetailTabTxn'
+
+import DetailTabs from './DetailTabs'
 
 export interface IPageQuery {
   connectId?: string
@@ -66,29 +63,6 @@ function DetailPage() {
   const togglePlan = () =>
     setDetailExpand((prev) => ({ ...prev, plan: !prev.plan }))
 
-  const tabs = [
-    {
-      key: 'basic',
-      title: t('slow_query.detail.tabs.basic'),
-      content: () => <TabBasic data={data!} />,
-    },
-    {
-      key: 'time',
-      title: t('slow_query.detail.tabs.time'),
-      content: () => <TabTime data={data!} />,
-    },
-    {
-      key: 'copr',
-      title: t('slow_query.detail.tabs.copr'),
-      content: () => <TabCopr data={data!} />,
-    },
-    {
-      key: 'txn',
-      title: t('slow_query.detail.tabs.txn'),
-      content: () => <TabTxn data={data!} />,
-    },
-  ]
-
   return (
     <div>
       <Head
@@ -189,7 +163,7 @@ function DetailPage() {
                 </Descriptions.Item>
               </Descriptions>
 
-              <CardTabs animated={false} tabs={tabs} />
+              <DetailTabs data={data} />
             </>
           )}
         </AnimatedSkeleton>