feat(conprof): show conprof download link for TiCDC

pkg/apiserver/conprof/service.go

@@ -144,6 +144,7 @@ type ComponentNum struct {
 	PD      int `json:"pd"`
 	TiKV    int `json:"tikv"`
 	TiFlash int `json:"tiflash"`
+	TiCDC   int `json:"ticdc"`
 }
 
 type GroupProfiles struct {

ui/packages/tidb-dashboard-client/src/client/api/models/conprof-component-num.ts

@@ -26,6 +26,12 @@ export interface ConprofComponentNum {
      * @memberof ConprofComponentNum
      */
     'pd'?: number;
+    /**
+     * 
+     * @type {number}
+     * @memberof ConprofComponentNum
+     */
+    'ticdc'?: number;
     /**
      * 
      * @type {number}

ui/packages/tidb-dashboard-client/swagger/spec.json

@@ -3923,6 +3923,9 @@
                 "pd": {
                     "type": "integer"
                 },
+                "ticdc": {
+                    "type": "integer"
+                },
                 "tidb": {
                     "type": "integer"
                 },

ui/packages/tidb-dashboard-for-clinic-cloud/src/utils/distro/strings_res.json

@@ -1 +1,7 @@
-{ "tidb": "TiDB", "tikv": "TiKV", "pd": "PD", "tiflash": "TiFlash" }
+{
+  "tidb": "TiDB",
+  "tikv": "TiKV",
+  "pd": "PD",
+  "tiflash": "TiFlash",
+  "ticdc": "TiCDC"
+}

ui/packages/tidb-dashboard-for-op/src/utils/distro/strings_res.json

@@ -1 +1,7 @@
-{"tidb":"TiDB","tikv":"TiKV","pd":"PD","tiflash":"TiFlash"}
+{
+  "tidb": "TiDB",
+  "tikv": "TiKV",
+  "pd": "PD",
+  "tiflash": "TiFlash",
+  "ticdc": "TiCDC"
+}

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

@@ -41,7 +41,8 @@ function expandDisksItems(rows: HostinfoInfo[]): IExpandedDiskItem[] {
           pd: 0,
           tidb: 0,
           tikv: 0,
-          tiflash: 0
+          tiflash: 0,
+          ticdc: 0
         }
       }
       instancesPerPartition[i.partition_path_lower!][i.type!]++
@@ -72,7 +73,8 @@ function expandDisksItems(rows: HostinfoInfo[]): IExpandedDiskItem[] {
           pd: 0,
           tidb: 0,
           tikv: 0,
-          tiflash: 0
+          tiflash: 0,
+          ticdc: 0
         }
       })
     }

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

@@ -27,7 +27,8 @@ function expandHostItems(rows: HostinfoInfo[]): IExpandedHostItem[] {
       pd: 0,
       tidb: 0,
       tikv: 0,
-      tiflash: 0
+      tiflash: 0,
+      ticdc: 0
     }
 
     Object.values(row.instances ?? {}).forEach((i) => {

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

@@ -104,16 +104,21 @@ export default function Page() {
       {
         name: t('conprof.list.table.columns.targets'),
         key: 'targets',
-        minWidth: 150,
-        maxWidth: 250,
+        minWidth: 250,
+        maxWidth: 300,
         onRender: (rec) => {
-          const { tikv, tidb, pd, tiflash } = rec.component_num
-          const s = `${tikv} ${instanceKindName(
+          const { tikv, tidb, pd, tiflash, ticdc } = rec.component_num
+          let s = `${tikv} ${instanceKindName(
             'tikv'
           )}, ${tidb} ${instanceKindName('tidb')}, ${pd} ${instanceKindName(
             'pd'
           )}, ${tiflash} ${instanceKindName('tiflash')}`
-          return <span>{s}</span>
+          // to be compatible with old version
+          // this field doesn't not exist in the old version
+          if (ticdc !== undefined) {
+            s = `${s}, ${ticdc} ${instanceKindName('ticdc')}`
+          }
+          return s
         }
       },
       {
@@ -166,8 +171,8 @@ export default function Page() {
       {
         name: t('conprof.list.table.columns.start_at'),
         key: 'ts',
-        minWidth: 160,
-        maxWidth: 220,
+        minWidth: 200,
+        maxWidth: 250,
         onRender: (rec) => {
           return <DateTime.Long unixTimestampMs={rec.ts * 1000} />
         }

ui/packages/tidb-dashboard-lib/src/client/models.ts

@@ -375,6 +375,12 @@ export interface ConprofComponentNum {
      * @memberof ConprofComponentNum
      */
     'pd'?: number;
+    /**
+     * 
+     * @type {number}
+     * @memberof ConprofComponentNum
+     */
+    'ticdc'?: number;
     /**
      * 
      * @type {number}

ui/packages/tidb-dashboard-lib/src/components/InstanceSelect/ValueDisplay.tsx

@@ -36,7 +36,8 @@ export default function ValueDisplay({
       pd: newInstanceStat(),
       tidb: newInstanceStat(),
       tikv: newInstanceStat(),
-      tiflash: newInstanceStat()
+      tiflash: newInstanceStat(),
+      ticdc: newInstanceStat()
     }
     items.forEach((item) => {
       instanceStats[item.instanceKind].all++

ui/packages/tidb-dashboard-lib/src/utils/instanceTable.ts

@@ -8,9 +8,8 @@ import {
   TopologyStoreInfo
 } from '@lib/client'
 
-export type InstanceKind = 'pd' | 'tidb' | 'tikv' | 'tiflash'
-
-export const InstanceKinds: InstanceKind[] = ['pd', 'tidb', 'tikv', 'tiflash']
+export const InstanceKinds = ['pd', 'tidb', 'tikv', 'tiflash', 'ticdc'] as const
+export type InstanceKind = typeof InstanceKinds[number]
 
 export const InstanceStatus = {
   Unreachable: 0,

util/distro/distro.go

@@ -22,6 +22,7 @@ type DistributionResource struct {
 	TiKV     string `json:"tikv,omitempty"`
 	PD       string `json:"pd,omitempty"`
 	TiFlash  string `json:"tiflash,omitempty"`
+	TiCDC    string `json:"ticdc,omitempty"`
 }
 
 var defaultDistroRes = DistributionResource{
@@ -30,6 +31,7 @@ var defaultDistroRes = DistributionResource{
 	TiKV:     "TiKV",
 	PD:       "PD",
 	TiFlash:  "TiFlash",
+	TiCDC:    "TiCDC",
 }
 
 var (