chore: introduce plan bind to cloud

ui/packages/tidb-dashboard-for-dbaas/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingcap/tidb-dashboard-for-dbaas",
-  "version": "0.0.68",
+  "version": "0.0.80",
   "main": "dist/main.js",
   "module": "dist/main.js",
   "files": [

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

@@ -107,6 +107,41 @@ class DataSource implements IStatementDataSource {
     return client.getAxiosInstance().get('/statements/time_ranges', options)
   }
 
+  // quick plan bind api
+  statementsPlanBindStatusGet(
+    sqlDigest: string,
+    beginTime: number,
+    endTime: number,
+    options?: ReqConfig
+  ) {
+    return client.getInstance().statementsPlanBindingGet(
+      {
+        sqlDigest,
+        beginTime,
+        endTime
+      },
+      options
+    )
+  }
+
+  statementsPlanBindCreate(planDigest: string, options?: ReqConfig) {
+    return client.getInstance().statementsPlanBindingPost(
+      {
+        planDigest
+      },
+      options
+    )
+  }
+
+  statementsPlanBindDelete(sqlDigest: string, options?: ReqConfig) {
+    return client.getInstance().statementsPlanBindingDelete(
+      {
+        sqlDigest
+      },
+      options
+    )
+  }
+
   // slow query
   slowQueryAvailableFieldsGet(options?: ReqConfig) {
     return client.getInstance().slowQueryAvailableFieldsGet(options)
@@ -170,6 +205,7 @@ export const ctx: () => IStatementContext = () => ({
   cfg: {
     apiPathBase: client.getBasePath(),
     enableExport: false,
-    showHelp: false
+    showHelp: false,
+    enablePlanBinding: true
   }
 })

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

@@ -114,6 +114,7 @@ class DataSource implements IStatementDataSource {
     })
   }
 
+  // quick plan bind api
   statementsPlanBindStatusGet(
     sqlDigest: string,
     beginTime: number,

ui/packages/tidb-dashboard-lib/src/apps/Statement/pages/Detail/PlanBind.tsx

@@ -270,6 +270,7 @@ const PlanTable = ({
       onRenderCheckbox={(props) => (
         <Radio checked={props?.checked} disabled={!!boundPlanDigest} />
       )}
+      style={{ overflow: 'scroll' }}
     />
   )
 }