feat(tiproxy): support conprof and debug api for tiproxy

pkg/apiserver/debugapi/apis.go

@@ -10,7 +10,7 @@ import (
 	"github.com/pingcap/tidb-dashboard/util/topo"
 )
 
-var commomParamPprofKinds = endpoint.APIParamEnum("kind", true, []endpoint.EnumItemDefinition{
+var commonParamPprofKinds = endpoint.APIParamEnum("kind", true, []endpoint.EnumItemDefinition{
 	{Value: "allocs"},
 	{Value: "block"},
 	{Value: "cmdline"},
@@ -159,7 +159,7 @@ var apiEndpoints = []endpoint.APIDefinition{
 		Path:      "/debug/pprof/{kind}",
 		Method:    resty.MethodGet,
 		PathParams: []endpoint.APIParamDefinition{
-			commomParamPprofKinds,
+			commonParamPprofKinds,
 		},
 		QueryParams: []endpoint.APIParamDefinition{
 			commonParamPprofSeconds,
@@ -394,7 +394,7 @@ var apiEndpoints = []endpoint.APIDefinition{
 		Path:      "/debug/pprof/{kind}",
 		Method:    resty.MethodGet,
 		PathParams: []endpoint.APIParamDefinition{
-			commomParamPprofKinds,
+			commonParamPprofKinds,
 		},
 		QueryParams: []endpoint.APIParamDefinition{
 			commonParamPprofSeconds,
@@ -439,4 +439,24 @@ var apiEndpoints = []endpoint.APIDefinition{
 			req.SetHeader("Content-Type", "application/protobuf")
 		},
 	},
+	// TiProxy Endpoints
+	{
+		ID:        "tiproxy_config",
+		Component: topo.KindTiProxy,
+		Path:      "/api/admin/config",
+		Method:    resty.MethodGet,
+	},
+	{
+		ID:        "tiproxy_pprof",
+		Component: topo.KindTiProxy,
+		Path:      "/debug/pprof/{kind}",
+		Method:    resty.MethodGet,
+		PathParams: []endpoint.APIParamDefinition{
+			commonParamPprofKinds,
+		},
+		QueryParams: []endpoint.APIParamDefinition{
+			commonParamPprofSeconds,
+			commonParamPprofDebug,
+		},
+	},
 }

pkg/apiserver/debugapi/endpoint/payload.go

@@ -302,7 +302,7 @@
 		}
 		matched := false
 		for _, info := range infos {
-			if info.IP == p.host && info.Port == uint(p.port) {
+			if info.IP == p.host && info.StatusPort == uint(p.port) {
 				matched = true
 				break
 			}

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

@@ -46,6 +46,10 @@ class DataSource implements IDebugAPIDataSource {
   getPDTopology(options?: ReqConfig) {
     return client.getInstance().getPDTopology(options)
   }
+
+  getTiProxyTopology(options?: ReqConfig) {
+    return client.getInstance().getTiProxyTopology(options)
+  }
 }
 
 const ds = new DataSource()

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

@@ -46,6 +46,10 @@ class DataSource implements IDebugAPIDataSource {
   getPDTopology(options?: ReqConfig) {
     return client.getInstance().getPDTopology(options)
   }
+
+  getTiProxyTopology(options?: ReqConfig) {
+    return client.getInstance().getTiProxyTopology(options)
+  }
 }
 
 const ds = new DataSource()

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

@@ -109,7 +109,7 @@ export default function Page() {
         minWidth: 250,
         maxWidth: 300,
         onRender: (rec) => {
-          const { tikv, tidb, pd, tiflash, ticdc } = rec.component_num
+          const { tikv, tidb, pd, tiflash, ticdc, tiproxy } = rec.component_num
           let s = `${tikv} ${instanceKindName(
             'tikv'
           )}, ${tidb} ${instanceKindName('tidb')}, ${pd} ${instanceKindName(
@@ -120,6 +120,9 @@ export default function Page() {
           if (ticdc !== undefined) {
             s = `${s}, ${ticdc} ${instanceKindName('ticdc')}`
           }
+          if (tiproxy !== undefined) {
+            s = `${s}, ${tiproxy} ${instanceKindName('tiproxy')}`
+          }
           return s
         }
       },

ui/packages/tidb-dashboard-lib/src/apps/DebugAPI/apilist/ApiForm.tsx

@@ -19,6 +19,7 @@ export interface Topology {
   tikv: TopologyStoreInfo[]
   tiflash: TopologyStoreInfo[]
   pd: TopologyPDInfo[]
+  tiproxy: TopologyPDInfo[]
 }
 
 export default function ApiForm({

ui/packages/tidb-dashboard-lib/src/apps/DebugAPI/apilist/ApiList.tsx

@@ -59,21 +59,25 @@ export default function Page() {
   const { endpoints, filterBy } = useFilterEndpoints(endpointData)
 
   // TODO: refine with components/InstanceSelect
-  const { data: tidbTopology = [], isLoading: isTiDBTopology } =
+  const { data: tidbTopology = [], isLoading: isTiDBLoading } =
     useClientRequest(ctx!.ds.getTiDBTopology)
   const { data: pdTopology = [], isLoading: isPDLoading } = useClientRequest(
     ctx!.ds.getPDTopology
   )
   const { data: storeTopology, isLoading: isStoreLoading } = useClientRequest(
     ctx!.ds.getStoreTopology
   )
+  const { data: tiproxyTopology = [], isLoading: isTiProxyLoading } =
+    useClientRequest(ctx!.ds.getTiProxyTopology)
   const topology: Topology = {
     tidb: tidbTopology!,
     tikv: storeTopology?.tikv || [],
     tiflash: storeTopology?.tiflash || [],
-    pd: pdTopology!
+    pd: pdTopology!,
+    tiproxy: tiproxyTopology!
   }
-  const isTopologyLoading = isTiDBTopology || isPDLoading || isStoreLoading
+  const isTopologyLoading =
+    isTiDBLoading || isPDLoading || isStoreLoading || isTiProxyLoading
 
   const groups = useMemo(
     () =>
@@ -89,7 +93,7 @@ export default function Page() {
   )
   const sortedGroups = useMemo(
     () =>
-      ['tidb', 'tikv', 'tiflash', 'pd']
+      ['tidb', 'tikv', 'tiflash', 'pd', 'tiproxy']
         .filter((sortKey) => groups[sortKey])
         .map((sortKey) => groups[sortKey]),
     [groups]

ui/packages/tidb-dashboard-lib/src/apps/DebugAPI/apilist/widgets/Host.tsx

@@ -9,7 +9,8 @@ const portKeys: { [k: string]: string } = {
   tidb: 'status_port',
   tikv: 'status_port',
   tiflash: 'status_port',
-  pd: 'port'
+  pd: 'port',
+  tiproxy: 'status_port'
 }
 
 export const HostSelectWidget: ApiFormWidget = ({ endpoint, topology }) => {

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

@@ -8,7 +8,8 @@ import {
   InfoTableSchema,
   TopologyTiDBInfo,
   ClusterinfoStoreTopologyResponse,
-  TopologyPDInfo
+  TopologyPDInfo,
+  TopologyTiProxyInfo
 } from '@lib/client'
 
 import { IContextConfig, ReqConfig } from '@lib/types'
@@ -37,6 +38,10 @@ export interface IDebugAPIDataSource {
   ): AxiosPromise<ClusterinfoStoreTopologyResponse>
 
   getPDTopology(options?: ReqConfig): AxiosPromise<Array<TopologyPDInfo>>
+
+  getTiProxyTopology(
+    options?: ReqConfig
+  ): AxiosPromise<Array<TopologyTiProxyInfo>>
 }
 
 export interface IDebugAPIContext {

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

@@ -133,3 +133,9 @@ debug_api:
       pd_store_id: Store - by StoreID (pd-ctl store [id])
       # pd_pprof: pprof
       # pd_pprof_desc: The `seconds` parameter is only effective to `kind=profile` and `kind=trace`.
+  tiproxy:
+    name: '{{distro.tiproxy}}'
+    endpoints:
+      tiproxy_config: Current Config
+      tiproxy_pprof: pprof
+      tiproxy_pprof_desc: The `seconds` parameter is only effective to `kind=profile` and `kind=trace`.