ui code refines (#1336)

* fix broken css for tidb-dashboard-for-dbaas * fix react-hooks/exhaustive-deps warning * remove un-used comments * fix tidb-dashboard-for-dbaas root font-size
pingcap · Jul 18, 2022 · 36c211f · 36c211f
1 parent b44dda6
commit 36c211f
Show file tree

Hide file tree

Showing 49 changed files with 166 additions and 418 deletions.
diff --git a/ui/packages/tidb-dashboard-for-dbaas/src/index.tsx b/ui/packages/tidb-dashboard-for-dbaas/src/index.tsx
@@ -8,8 +8,8 @@ import { loadAppInfo, loadWhoAmI } from '~/utils/store'
 
 import App from './App'
 
-import '@pingcap/tidb-dashboard-lib/dist/index.css'
 import './styles/style.less'
+import '@pingcap/tidb-dashboard-lib/dist/index.css'
 import './styles/override.less'
 
 function renderApp() {

diff --git a/ui/packages/tidb-dashboard-for-dbaas/src/styles/override.less b/ui/packages/tidb-dashboard-for-dbaas/src/styles/override.less
@@ -3,3 +3,7 @@
   color: currentColor;
   background-color: #b3d6ff;
 }
+
+html {
+  font-size: 14px;
+}
diff --git a/ui/packages/tidb-dashboard-lib/src/apps/ClusterInfo/components/DiskTable.tsx b/ui/packages/tidb-dashboard-lib/src/apps/ClusterInfo/components/DiskTable.tsx
@@ -1,18 +1,19 @@
 import { Tooltip, Typography } from 'antd'
 import React, { useContext, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
+import { IColumn } from 'office-ui-fabric-react/lib/DetailsList'
 import { getValueFormat } from '@baurine/grafana-value-formats'
-// import client, { HostinfoInfo, HostinfoPartitionInfo } from '@lib/client'
+import { WarningOutlined } from '@ant-design/icons'
+
 import { HostinfoInfo, HostinfoPartitionInfo } from '@lib/client'
 import { Bar, CardTable } from '@lib/components'
 import { useClientRequest } from '@lib/utils/useClientRequest'
-import { IColumn } from 'office-ui-fabric-react/lib/DetailsList'
 import {
   InstanceKind,
   InstanceKinds,
   instanceKindName
 } from '@lib/utils/instanceTable'
-import { WarningOutlined } from '@ant-design/icons'
+
 import { ClusterInfoContext } from '../context'
 
 interface IExpandedDiskItem extends HostinfoPartitionInfo {
@@ -85,8 +86,6 @@ export default function HostTable() {
   const ctx = useContext(ClusterInfoContext)
 
   const { data, isLoading, error } = useClientRequest(
-    // (reqConfig) =>
-    // client.getInstance().clusterInfoGetHostsInfo(reqConfig)
     ctx!.ds.clusterInfoGetHostsInfo
   )
 

diff --git a/ui/packages/tidb-dashboard-lib/src/apps/ClusterInfo/components/HostTable.tsx b/ui/packages/tidb-dashboard-lib/src/apps/ClusterInfo/components/HostTable.tsx
@@ -3,7 +3,6 @@ import React, { useContext, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { red } from '@ant-design/colors'
 import { getValueFormat } from '@baurine/grafana-value-formats'
-//import client, { HostinfoInfo } from '@lib/client'
 import { HostinfoInfo } from '@lib/client'
 import { Bar, CardTable, Pre } from '@lib/components'
 import { useClientRequest } from '@lib/utils/useClientRequest'
@@ -53,8 +52,6 @@ export default function HostTable() {
   const ctx = useContext(ClusterInfoContext)
 
   const { data, isLoading, error } = useClientRequest(
-    // (reqConfig) =>
-    // client.getInstance().clusterInfoGetHostsInfo(reqConfig)
     ctx!.ds.clusterInfoGetHostsInfo
   )
 

diff --git a/ui/packages/tidb-dashboard-lib/src/apps/ClusterInfo/components/InstanceTable.tsx b/ui/packages/tidb-dashboard-lib/src/apps/ClusterInfo/components/InstanceTable.tsx
@@ -4,7 +4,6 @@ import { Divider, Popconfirm, Tooltip } from 'antd'
 import React, { useCallback, useContext, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
-// import client from '@lib/client'
 import { CardTable, InstanceStatusBadge } from '@lib/components'
 import DateTime from '@lib/components/DateTime'
 import {
@@ -66,31 +65,19 @@ export default function ListPage() {
     isLoading: loadingTiDB,
     error: errTiDB,
     sendRequest
-  } = useClientRequest(
-    // (reqConfig) =>
-    // client.getInstance().getTiDBTopology(reqConfig)
-    ctx!.ds.getTiDBTopology
-  )
+  } = useClientRequest(ctx!.ds.getTiDBTopology)
 
   const {
     data: dataStores,
     isLoading: loadingStores,
     error: errStores
-  } = useClientRequest(
-    // (reqConfig) =>
-    // client.getInstance().getStoreTopology(reqConfig)
-    ctx!.ds.getStoreTopology
-  )
+  } = useClientRequest(ctx!.ds.getStoreTopology)
 
   const {
     data: dataPD,
     isLoading: loadingPD,
     error: errPD
-  } = useClientRequest(
-    // (reqConfig) =>
-    // client.getInstance().getPDTopology(reqConfig)
-    ctx!.ds.getPDTopology
-  )
+  } = useClientRequest(ctx!.ds.getPDTopology)
 
   const [tableData, groupData] = useMemo(
     () =>
@@ -106,9 +93,6 @@ export default function ListPage() {
 
   const handleHideTiDB = useCallback(
     async (node) => {
-      // await client
-      //   .getInstance()
-      //   .topologyTidbAddressDelete(`${node.ip}:${node.port}`)
       await ctx!.ds.topologyTidbAddressDelete(`${node.ip}:${node.port}`)
       sendRequest()
     },

diff --git a/ui/packages/tidb-dashboard-lib/src/apps/ClusterInfo/components/Statistics.tsx b/ui/packages/tidb-dashboard-lib/src/apps/ClusterInfo/components/Statistics.tsx
@@ -1,6 +1,5 @@
 import React, { useContext } from 'react'
 import { useClientRequest } from '@lib/utils/useClientRequest'
-// import client, { ClusterinfoClusterStatisticsPartial } from '@lib/client'
 import { ClusterinfoClusterStatisticsPartial } from '@lib/client'
 import { AnimatedSkeleton, ErrorBar, Descriptions, Card } from '@lib/components'
 import { useTranslation } from 'react-i18next'
@@ -53,8 +52,6 @@ export default function Statistics() {
   const ctx = useContext(ClusterInfoContext)
 
   const { data, isLoading, error } = useClientRequest(
-    // (reqConfig) =>
-    // client.getInstance().clusterInfoGetStatistics(reqConfig)
     ctx!.ds.clusterInfoGetStatistics
   )
   const { t } = useTranslation()

diff --git a/ui/packages/tidb-dashboard-lib/src/apps/ClusterInfo/components/StoreLocation.tsx b/ui/packages/tidb-dashboard-lib/src/apps/ClusterInfo/components/StoreLocation.tsx
@@ -1,6 +1,5 @@
 import React, { useContext, useMemo } from 'react'
 import { useClientRequest } from '@lib/utils/useClientRequest'
-// import client from '@lib/client'
 import { AnimatedSkeleton, ErrorBar } from '@lib/components'
 import StoreLocationTree, {
   buildTreeData,
@@ -12,7 +11,6 @@ export default function StoreLocation() {
   const ctx = useContext(ClusterInfoContext)
 
   const { data, isLoading, error, sendRequest } = useClientRequest(
-    // (reqConfig) => client.getInstance().getStoreLocationTopology(reqConfig)
     ctx!.ds.getStoreLocationTopology
   )
   const treeData = useMemo(() => buildTreeData(data), [data])

diff --git a/ui/packages/tidb-dashboard-lib/src/apps/Configuration/index.tsx b/ui/packages/tidb-dashboard-lib/src/apps/Configuration/index.tsx
@@ -43,13 +43,11 @@ function Value({ item, onSaved }: IValueProps) {
 
   const handleSave = useMemoizedFn(async (newValue) => {
     try {
-      const resp =
-        // await client.getInstance().configurationEdit
-        await ctx!.ds.configurationEdit({
-          id: item.id,
-          kind: item.kind,
-          new_value: newValue
-        })
+      const resp = await ctx!.ds.configurationEdit({
+        id: item.id,
+        kind: item.kind,
+        new_value: newValue
+      })
       if ((resp?.data?.warnings?.length ?? 0) > 0) {
         Modal.warning({
           title: 'Edit configuration is partially done',
@@ -105,7 +103,6 @@ function Configuration() {
   }
 
   const { data, isLoading, error, sendRequest } = useClientRequest(
-    // (reqConfig) => client.getInstance().configurationGetAll(reqConfig)
     ctx!.ds.configurationGetAll
   )
 

diff --git a/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/pages/ConProfSettingForm.tsx b/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/pages/ConProfSettingForm.tsx
@@ -14,10 +14,7 @@ import { useTranslation } from 'react-i18next'
 import { TFunction } from 'i18next'
 import { getValueFormat } from '@baurine/grafana-value-formats'
 
-import {
-  // ErrorStrategy,
-  ConprofContinuousProfilingConfig
-} from '@lib/client'
+import { ConprofContinuousProfilingConfig } from '@lib/client'
 import { useClientRequest } from '@lib/utils/useClientRequest'
 import { DrawerFooter, ErrorBar, InstanceSelect } from '@lib/components'
 import { useIsWriteable } from '@lib/utils/store'
@@ -58,18 +55,11 @@ function ConProfSettingForm({ onClose, onConfigUpdated }: Props) {
     data: initialConfig,
     isLoading: loading,
     error
-  } = useClientRequest(
-    // () =>
-    // client.getInstance().continuousProfilingConfigGet({
-    //   errorStrategy: ErrorStrategy.Custom
-    // })
-    () => ctx!.ds.continuousProfilingConfigGet({ handleError: 'custom' })
+  } = useClientRequest(() =>
+    ctx!.ds.continuousProfilingConfigGet({ handleError: 'custom' })
   )
 
   const { data: estimateSize } = useClientRequest(() =>
-    // client.getInstance().continuousProfilingEstimateSizeGet({
-    //   errorStrategy: ErrorStrategy.Custom
-    // })
     ctx!.ds.continuousProfilingEstimateSizeGet({ handleError: 'custom' })
   )
 
@@ -96,9 +86,6 @@ function ConProfSettingForm({ onClose, onConfigUpdated }: Props) {
         }
         try {
           setSubmitting(true)
-          // await client.getInstance().continuousProfilingConfigPost({
-          //   continuous_profiling: newConfig
-          // })
           await ctx!.ds.continuousProfilingConfigPost({
             continuous_profiling: newConfig
           })
@@ -125,7 +112,7 @@ function ConProfSettingForm({ onClose, onConfigUpdated }: Props) {
         updateConfig(values)
       }
     },
-    [t, onClose, onConfigUpdated]
+    [t, onClose, onConfigUpdated, ctx]
   )
 
   return (

diff --git a/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/pages/Detail.tsx b/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/pages/Detail.tsx
@@ -8,14 +8,7 @@ import { upperFirst } from 'lodash'
 import { IGroup } from 'office-ui-fabric-react/lib/DetailsList'
 
 import { ConprofProfileDetail } from '@lib/client'
-import {
-  Card,
-  CardTable,
-  DateTime,
-  Descriptions,
-  Head
-  // ActionsButton,
-} from '@lib/components'
+import { Card, CardTable, DateTime, Descriptions, Head } from '@lib/components'
 import { useClientRequest } from '@lib/utils/useClientRequest'
 import { instanceKindName, InstanceKinds } from '@lib/utils/instanceTable'
 import useQueryParams from '@lib/utils/useQueryParams'
@@ -43,11 +36,8 @@ export default function Page() {
     data: groupProfileDetail,
     isLoading: groupDetailLoading,
     error: groupDetailError
-  } = useClientRequest(
-    // () => {
-    // return client.getInstance().continuousProfilingGroupProfileDetailGet(ts)
-    (reqConfig) =>
-      ctx!.ds.continuousProfilingGroupProfileDetailGet(ts, reqConfig)
+  } = useClientRequest((reqConfig) =>
+    ctx!.ds.continuousProfilingGroupProfileDetailGet(ts, reqConfig)
   )
 
   const profileDuration = groupProfileDetail?.profile_duration_secs || 0
@@ -97,12 +87,9 @@ export default function Page() {
       if (action === 'view_flamegraph' || action === 'download') {
         dataFormat = 'protobuf'
       }
-      const res =
-        // await client
-        //   .getInstance()
-        await ctx!.ds.continuousProfilingActionTokenGet(
-          `ts=${ts}&profile_type=${profile_type}&component=${component}&address=${address}&data_format=${dataFormat}`
-        )
+      const res = await ctx!.ds.continuousProfilingActionTokenGet(
+        `ts=${ts}&profile_type=${profile_type}&component=${component}&address=${address}&data_format=${dataFormat}`
+      )
       const token = res.data
       if (!token) {
         return
@@ -147,12 +134,9 @@ export default function Page() {
   )
 
   const handleDownloadGroup = useCallback(async () => {
-    const res =
-      // await client
-      //   .getInstance()
-      await ctx!.ds.continuousProfilingActionTokenGet(
-        `ts=${ts}&data_format=protobuf`
-      )
+    const res = await ctx!.ds.continuousProfilingActionTokenGet(
+      `ts=${ts}&data_format=protobuf`
+    )
     const token = res.data
     if (!token) {
       return
@@ -161,7 +145,7 @@ export default function Page() {
     window.location.href = `${
       ctx!.cfg.apiPathBase
     }/continuous_profiling/download?token=${token}`
-  }, [ts])
+  }, [ts, ctx])
 
   const columns = useMemo(
     () => [

diff --git a/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/pages/List.tsx b/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/pages/List.tsx
@@ -21,7 +21,6 @@ import {
 } from '@ant-design/icons'
 import dayjs, { Dayjs } from 'dayjs'
 
-// import { ErrorStrategy } from '@lib/client'
 import { Card, CardTable, Toolbar, DatePicker } from '@lib/components'
 import DateTime from '@lib/components/DateTime'
 import openLink from '@lib/utils/openLink'
@@ -77,16 +76,6 @@ export default function Page() {
         handleError: 'custom'
       }
     )
-
-    // return client
-    //   .getInstance()
-    //   .continuousProfilingGroupProfilesGet(
-    //     _rangeStartTime.unix(),
-    //     _rangeEndTime.unix(),
-    //     {
-    //       errorStrategy: ErrorStrategy.Custom
-    //     }
-    //   )
   })
 
   const { t } = useTranslation()
@@ -186,11 +175,7 @@ export default function Page() {
   const [showSettings, setShowSettings] = useState(false)
 
   const { data: ngMonitoringConfig, sendRequest: reloadConfig } =
-    useClientRequest(
-      // (reqConfig) =>
-      // client.getInstance().continuousProfilingConfigGet(reqConfig)
-      ctx!.ds.continuousProfilingConfigGet
-    )
+    useClientRequest(ctx!.ds.continuousProfilingConfigGet)
   const conprofIsDisabled = useMemo(
     () => ngMonitoringConfig?.continuous_profiling?.enable === false,
     [ngMonitoringConfig]

diff --git a/ui/packages/tidb-dashboard-lib/src/apps/DebugAPI/apilist/ApiForm.tsx b/ui/packages/tidb-dashboard-lib/src/apps/DebugAPI/apilist/ApiForm.tsx
@@ -58,14 +58,12 @@ export default function ApiForm({
           }
           return prev
         }, {})
-        const resp =
-          // await client.getInstance().debugAPIRequestEndpoint
-          await ctx!.ds.debugAPIRequestEndpoint({
-            api_id: id,
-            host: hostname,
-            port: Number(port),
-            param_values
-          })
+        const resp = await ctx!.ds.debugAPIRequestEndpoint({
+          api_id: id,
+          host: hostname,
+          port: Number(port),
+          param_values
+        })
         const token = resp.data
         window.location.href = `${
           ctx!.cfg.apiPathBase
@@ -76,7 +74,7 @@ export default function ApiForm({
         setLoading(false)
       }
     },
-    [id, endpointHostParamKey]
+    [id, endpointHostParamKey, ctx]
   )
 
   const endpointParam = useMemo<EndpointAPIParamDefinition>(

diff --git a/ui/packages/tidb-dashboard-lib/src/apps/DebugAPI/apilist/ApiList.tsx b/ui/packages/tidb-dashboard-lib/src/apps/DebugAPI/apilist/ApiList.tsx
@@ -55,24 +55,17 @@ export default function Page() {
 
   const { t, i18n } = useTranslation()
   const { data: endpointData, isLoading: isEndpointLoading } = useClientRequest(
-    // (reqConfig) => client.getInstance().debugAPIGetEndpoints(reqConfig)
     ctx!.ds.debugAPIGetEndpoints
   )
   const { endpoints, filterBy } = useFilterEndpoints(endpointData)
 
   // TODO: refine with components/InstanceSelect
   const { data: tidbTopology = [], isLoading: isTiDBTopology } =
-    useClientRequest(
-      // (reqConfig) =>
-      // client.getInstance().getTiDBTopology(reqConfig)
-      ctx!.ds.getTiDBTopology
-    )
+    useClientRequest(ctx!.ds.getTiDBTopology)
   const { data: pdTopology = [], isLoading: isPDLoading } = useClientRequest(
-    // (reqConfig) => client.getInstance().getPDTopology(reqConfig)
     ctx!.ds.getPDTopology
   )
   const { data: storeTopology, isLoading: isStoreLoading } = useClientRequest(
-    // (reqConfig) => client.getInstance().getStoreTopology(reqConfig)
     ctx!.ds.getStoreTopology
   )
   const topology: Topology = {