feat(slow-query): support slow query search by digest

ui/packages/tidb-dashboard-for-clinic-cloud/public/ngm.html

@@ -167,6 +167,7 @@
           slowQuery: {
             enableExport: false,
             showDBFilter: false,
+            showDigestFilter: true,
             listApiReturnDetail: false, // so we can use the result returned by list api in the detail page, avoid request detail api
 
             orgName,

ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/SlowQuery/context.ts

@@ -131,6 +131,7 @@ export const ctx: (cfg: Partial<ISlowQueryConfig>) => ISlowQueryContext = (
       apiPathBase: client.getBasePath(),
       enableExport: true,
       showDBFilter: true,
+      showDigestFilter: false,
       ...cfg
     }
   }

ui/packages/tidb-dashboard-for-clinic-op/src/apps/SlowQuery/context.ts

@@ -118,6 +118,7 @@ export const ctx: (extra: DsExtra) => ISlowQueryContext = (extra) => ({
   cfg: {
     apiPathBase: client.getBasePath(),
     enableExport: false,
-    showDBFilter: false
+    showDBFilter: false,
+    showDigestFilter: false
   }
 })

ui/packages/tidb-dashboard-for-dbaas/src/apps/SlowQuery/context.ts

@@ -74,6 +74,7 @@ export const ctx: () => ISlowQueryContext = () => ({
     apiPathBase: client.getBasePath(),
     enableExport: false,
     showDBFilter: true,
+    showDigestFilter: false,
     showHelp: false
   }
 })

ui/packages/tidb-dashboard-for-op/src/apps/SlowQuery/context.ts

@@ -73,7 +73,8 @@ export const ctx: ISlowQueryContext = {
   cfg: {
     apiPathBase: client.getBasePath(),
     enableExport: true,
-    showDBFilter: true
+    showDBFilter: true,
+    showDigestFilter: false
     // instantQuery: false,
     // timeRangeSelector: {
     //   recentSeconds: [3 * 24 * 60 * 60],

ui/packages/tidb-dashboard-lib/src/apps/ClusterInfo/components/InstanceTable.tsx

@@ -91,6 +91,12 @@ export default function ListPage() {
     error: errTiProxy
   } = useClientRequest(ctx!.ds.getTiProxyTopology)
 
+  // query TiCDC and TiProxy components returns 404 under TiDB 7.6.0
+  // filter out the 404 error
+  const errors = [errTiDB, errStores, errPD, errTiCDC, errTiProxy].filter(
+    (e) => e?.response?.status !== 404
+  )
+
   const [tableData, groupData] = useMemo(
     () =>
       buildInstanceTable({
@@ -203,7 +209,7 @@ export default function ListPage() {
       columns={columns}
       items={tableData}
       groups={groupData}
-      errors={[errTiDB, errStores, errPD, errTiCDC, errTiProxy]}
+      errors={errors}
     />
   )
 }

ui/packages/tidb-dashboard-lib/src/apps/Overview/components/Instances.tsx

@@ -38,6 +38,8 @@ function ComponentItem(props: {
     }
     return [up, all]
   }, [resp])
+  // query TiCDC and TiProxy components returns 404 under TiDB 7.6.0
+  const notFoundError = resp.error?.response?.status === 404
 
   return (
     <AnimatedSkeleton showSkeleton={resp.isLoading} paragraph={{ rows: 1 }}>
@@ -51,7 +53,7 @@ function ComponentItem(props: {
           </Descriptions.Item>
         </Descriptions>
       )}
-      {resp.error && (
+      {resp.error && !notFoundError && (
         <Typography.Text type="danger">
           <Space>
             <WarningOutlined /> Error

ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/context/index.ts

@@ -61,6 +61,7 @@ export interface ISlowQueryEvent {
 export interface ISlowQueryConfig extends IContextConfig {
   enableExport: boolean
   showDBFilter: boolean
+  showDigestFilter: boolean
   showHelp?: boolean
 
   // true means the list api will return all fields value of an item, not just the selected fields

ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/List/index.tsx

@@ -121,6 +121,9 @@ function List() {
   const [filterLimit, setFilterLimit] = useState<number>(
     controller.queryOptions.limit
   )
+  const [filterDigest, setFilterDigest] = useState<string>(
+    controller.queryOptions.digest
+  )
   const [filterText, setFilterText] = useState<string>(
     controller.queryOptions.searchText
   )
@@ -133,7 +136,7 @@ function List() {
       limit: filterLimit,
       searchText: filterText,
       visibleColumnKeys,
-      digest: '',
+      digest: filterDigest,
       plans: []
     })
   })
@@ -168,7 +171,7 @@ function List() {
         orderBy: controller.orderOptions.orderBy,
         desc: controller.orderOptions.desc,
         limit: 10000,
-        digest: '',
+        digest: filterDigest,
         plans: []
       })
       const token = res.data
@@ -244,6 +247,14 @@ function List() {
                 </Option>
               ))}
             </Select>
+            {ctx!.cfg.showDigestFilter && (
+              <Input
+                value={filterDigest}
+                onChange={(e) => setFilterDigest(e.target.value)}
+                placeholder={t('slow_query.toolbar.digest.placeholder')}
+                data-e2e="slow_query_digest"
+              />
+            )}
             <Input.Search
               value={filterText}
               onChange={(e) => setFilterText(e.target.value)}

ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/translations/en.yaml

@@ -151,6 +151,8 @@ slow_query:
     select_columns:
       show_full_sql: Show Full Query Text
     refresh: Refresh
+    digest:
+      placeholder: Digest
     keyword:
       placeholder: Filter keyword
     query: Query

ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/translations/zh.yaml

@@ -153,6 +153,8 @@ slow_query:
     select_columns:
       show_full_sql: 显示完整 SQL 文本
     refresh: 刷新
+    digest:
+      placeholder: Digest
     keyword:
       placeholder: 关键字过滤
     query: 查询

ui/packages/tidb-dashboard-lib/src/apps/TopSQL/components/Filter/InstanceSelect.tsx

@@ -59,7 +59,7 @@ export function InstanceSelect({
 
   return (
     <Select
-      style={{ width: 200 }}
+      style={{ minWidth: 200 }}
       placeholder="Select Instance"
       value={combineSelectValue(value)}
       onChange={(value) => {