ui: break loop dependencies (#771)

pingcap · Oct 22, 2020 · 6476205 · 6476205
1 parent c778d04
commit 6476205
Show file tree

Hide file tree

Showing 5 changed files with 188 additions and 266 deletions.
diff --git a/ui/lib/apps/SlowQuery/utils/tableColumns.tsx b/ui/lib/apps/SlowQuery/utils/tableColumns.tsx
@@ -18,6 +18,21 @@ function ResultStatusBadge({ status }: { status: 'success' | 'error' }) {
 //////////////////////////////////////////
 const TRANS_KEY_PREFIX = 'slow_query.fields'
 
+export const derivedFields = {
+  cop_proc_avg: [
+    { tooltipPrefix: 'mean', fieldName: 'cop_proc_avg' },
+    { tooltipPrefix: 'max', fieldName: 'cop_proc_max' },
+    { tooltipPrefix: 'p90', fieldName: 'cop_proc_p90' },
+  ],
+  cop_wait_avg: [
+    { tooltipPrefix: 'mean', fieldName: 'cop_wait_avg' },
+    { tooltipPrefix: 'max', fieldName: 'cop_wait_max' },
+    { tooltipPrefix: 'p90', fieldName: 'cop_wait_p90' },
+  ],
+}
+
+//////////////////////////////////////////
+
 export function slowQueryColumns(
   rows: SlowquerySlowQuery[],
   showFullSQL?: boolean
@@ -73,28 +88,8 @@ export function slowQueryColumns(
     tcf.bar.single('commit_backoff_time', 'ns', rows),
     tcf.bar.single('resolve_lock_time', 'ns', rows),
     // cop
-    tcf.bar.multiple(
-      {
-        bars: [
-          { mean: 'cop_proc_avg' },
-          { max: 'cop_proc_max' },
-          { p90: 'cop_proc_p90' },
-        ],
-      },
-      'ns',
-      rows
-    ),
-    tcf.bar.multiple(
-      {
-        bars: [
-          { mean: 'cop_wait_avg' },
-          { max: 'cop_wait_avg' },
-          { p90: 'cop_wait_avg' },
-        ],
-      },
-      'ns',
-      rows
-    ),
+    tcf.bar.multiple({ sources: derivedFields.cop_proc_avg }, 'ns', rows),
+    tcf.bar.multiple({ sources: derivedFields.cop_wait_avg }, 'ns', rows),
     // transaction
     tcf.bar.single('write_keys', 'short', rows),
     tcf.bar.single('write_size', 'bytes', rows),

diff --git a/ui/lib/apps/SlowQuery/utils/useSlowQueryTableController.ts b/ui/lib/apps/SlowQuery/utils/useSlowQueryTableController.ts
@@ -6,7 +6,7 @@ import client, { ErrorStrategy, SlowquerySlowQuery } from '@lib/client'
 import { calcTimeRange, TimeRange, IColumnKeys } from '@lib/components'
 import useOrderState, { IOrderOptions } from '@lib/utils/useOrderState'
 
-import { slowQueryColumns } from './tableColumns'
+import { derivedFields, slowQueryColumns } from './tableColumns'
 import { getSelectedFields } from '@lib/utils/tableColumnFactory'
 
 export const DEF_SLOW_QUERY_COLUMN_KEYS: IColumnKeys = {
@@ -123,18 +123,16 @@ export default function useSlowQueryTableController(
     querySchemas()
   }, [])
 
-  // Notice: slowQueries, tableColumns, selectedFields make loop dependencies
+  const selectedFields = useMemo(
+    () => getSelectedFields(visibleColumnKeys, derivedFields).join(','),
+    [visibleColumnKeys]
+  )
+
   const tableColumns = useMemo(
     () => slowQueryColumns(slowQueries, showFullSQL),
     [slowQueries, showFullSQL]
   )
-  // make selectedFields as a string instead of an array to avoid infinite loop
-  // I have verified that it will cause infinite loop if we return selectedFields as an array
-  // so it is better to use the basic type (string, number...) instead of object as the dependency
-  const selectedFields = useMemo(
-    () => getSelectedFields(visibleColumnKeys, tableColumns).join(','),
-    [visibleColumnKeys, tableColumns]
-  )
+
   useEffect(() => {
     async function getSlowQueryList() {
       setLoadingSlowQueries(true)