Feat/sql index advisor (pingcap#1460)

* feat: add insight index advisor app

* chore: sync upstream master

* fix: lint

scripts/distro/write_strings.sh

@@ -7,7 +7,7 @@ set -euo pipefail
 DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
 PROJECT_DIR=$(cd "$DIR/../.."; pwd)
 
-TARGET="${PROJECT_DIR}/ui/packages/tidb-dashboard-for-op/src/uilts/distro/strings_res.json"
+TARGET="${PROJECT_DIR}/ui/packages/tidb-dashboard-for-op/src/utils/distro/strings_res.json"
 
 echo "+ Write distro strings"
 cd "$PROJECT_DIR"

ui/.prettierignore

@@ -9,7 +9,7 @@ packages/tidb-dashboard-client/dist
 packages/tidb-dashboard-lib/src/client/models.ts
 packages/tidb-dashboard-lib/dist
 
-packages/tidb-dashboard-for-op/src/uilts/distro/strings_res.json
+packages/tidb-dashboard-for-op/src/utils/distro/strings_res.json
 packages/tidb-dashboard-for-op/public/speedscope
 packages/tidb-dashboard-for-op/dist
 packages/tidb-dashboard-for-op/.nyc_output

ui/packages/tidb-dashboard-for-clinic-cloud/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingcap/tidb-dashboard-for-clinic-cloud",
-  "version": "0.0.45",
+  "version": "0.0.50",
   "main": "dist/dashboardApp.js",
   "module": "dist/dashboardApp.js",
   "files": [

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

@@ -6,7 +6,7 @@ import {
 
 import client, { ConprofNgMonitoringConfig } from '~/client'
 
-import publicPathBase from '~/uilts/publicPathPrefix'
+import publicPathBase from '~/utils/publicPathPrefix'
 
 class DataSource implements IConProfilingDataSource {
   continuousProfilingActionTokenGet(q: string, options?: ReqConfig) {

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

@@ -6,7 +6,7 @@ import {
 
 import client, { ProfilingStartRequest } from '~/client'
 
-import publicPathBase from '~/uilts/publicPathPrefix'
+import publicPathBase from '~/utils/publicPathPrefix'
 
 class DataSource implements IInstanceProfilingDataSource {
   getActionToken(id?: string, action?: string, options?: ReqConfig) {

ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/Overview/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { OverviewApp, OverviewProvider } from '@pingcap/tidb-dashboard-lib'
-import { getGlobalConfig } from '~/uilts/globalConfig'
+import { getGlobalConfig } from '~/utils/globalConfig'
 import { ctx } from './context'
 
 export default function () {

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

@@ -0,0 +1,44 @@
+import {
+  ISQLAdvisorDataSource,
+  ISQLAdvisorContext
+} from '@pingcap/tidb-dashboard-lib'
+import { getGlobalConfig } from '~/utils/globalConfig'
+
+const { clusterInfo, performanceInsightBaseUrl } = getGlobalConfig()
+const { orgId, clusterId, projectId } = clusterInfo
+
+const csrfToken = localStorage.getItem('clinic.auth.csrf_token')
+
+class DataSource implements ISQLAdvisorDataSource {
+  tuningListGet() {
+    return fetch(
+      `${performanceInsightBaseUrl}?BackMethod=GetTunedIndexLists&tenantId=${orgId}&projectId=${projectId}&clusterId=${clusterId}&token=${csrfToken}`
+    ).then((res) => res.json())
+  }
+
+  tuningTaskCreate(startTime: number, endTime: number) {
+    return fetch(
+      `${performanceInsightBaseUrl}?BackMethod=CreateAdviseTask&tenantId=${orgId}&projectId=${projectId}&clusterId=${clusterId}&startTime=${startTime}&endTime=${endTime}&token=${csrfToken}`
+    ).then((res) => res.json())
+  }
+
+  tuningTaskStatusGet() {
+    return fetch(
+      `${performanceInsightBaseUrl}?BackMethod=IsOKForTuningTask&tenantId=${orgId}&projectId=${projectId}&clusterId=${clusterId}&token=${csrfToken}`
+    ).then((res) => res.json())
+  }
+
+  tuningDetailGet(id: number) {
+    return fetch(
+      `${performanceInsightBaseUrl}?BackMethod=GetTuningResult&ID=${id}&token=${csrfToken}`
+    ).then((res) => res.json())
+  }
+}
+
+const ds = new DataSource()
+
+export const ctx: ISQLAdvisorContext = {
+  ds,
+  orgId,
+  clusterId
+}

ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/SQLAdvisor/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { SQLAdvisorAPP, SQLAdvisorProvider } from '@pingcap/tidb-dashboard-lib'
+import { ctx } from './context'
+
+export default function () {
+  return (
+    <SQLAdvisorProvider value={ctx}>
+      <SQLAdvisorAPP />
+    </SQLAdvisorProvider>
+  )
+}

ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/SQLAdvisor/meta.ts

@@ -0,0 +1,5 @@
+export default {
+  id: 'sql_advisor',
+  routerPrefix: '/sql_advisor',
+  reactRoot: () => import('.')
+}

ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/SlowQuery/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { SlowQueryApp, SlowQueryProvider } from '@pingcap/tidb-dashboard-lib'
-import { getGlobalConfig } from '~/uilts/globalConfig'
+import { getGlobalConfig } from '~/utils/globalConfig'
 import { ctx } from './context'
 
 export default function () {

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

@@ -10,7 +10,7 @@ import client, {
   DiagnoseGenerateMetricsRelationRequest
 } from '~/client'
 
-import publicPathBase from '~/uilts/publicPathPrefix'
+import publicPathBase from '~/utils/publicPathPrefix'
 
 export type DsExtra = {
   orgId: string

ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/TopSQL/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { TopSQLApp, TopSQLProvider } from '@pingcap/tidb-dashboard-lib'
-import { getGlobalConfig } from '~/uilts/globalConfig'
+import { getGlobalConfig } from '~/utils/globalConfig'
 import { ctx } from './context'
 
 export default function () {

ui/packages/tidb-dashboard-for-clinic-cloud/src/client/index.tsx

@@ -9,7 +9,7 @@ import {
   DefaultApi as DashboardApi
 } from '@pingcap/tidb-dashboard-client'
 
-import { ClientOptions, ClusterInfo } from '~/uilts/globalConfig'
+import { ClientOptions, ClusterInfo } from '~/utils/globalConfig'
 
 import translations from './translations'
 

ui/packages/tidb-dashboard-for-clinic-cloud/src/dashboardApp/layout/main/Sider/Banner.tsx

@@ -13,7 +13,7 @@ import {
   store
 } from '@pingcap/tidb-dashboard-lib'
 
-import { lightLogoSvg } from '~/uilts/distro/assetsRes'
+import { lightLogoSvg } from '~/utils/distro/assetsRes'
 
 import styles from './Banner.module.less'
 

ui/packages/tidb-dashboard-for-clinic-cloud/src/dashboardApp/main.tsx

@@ -19,20 +19,21 @@ import {
 } from '@pingcap/tidb-dashboard-lib'
 
 import { InfoInfoResponse, setupClient } from '~/client'
-import { mustLoadAppInfo, reloadWhoAmI } from '~/uilts/store'
+import { mustLoadAppInfo, reloadWhoAmI } from '~/utils/store'
 import {
   AppOptions,
   defAppOptions,
   GlobalConfig,
   setGlobalConfig
-} from '~/uilts/globalConfig'
-import AppRegistry from '~/uilts/registry'
+} from '~/utils/globalConfig'
+import AppRegistry from '~/utils/registry'
 
 import AppOverview from '~/apps/Overview/meta'
 import AppMonitoring from '~/apps/Monitoring/meta'
 import AppClusterInfo from '~/apps/ClusterInfo/meta'
 import AppTopSQL from '~/apps/TopSQL/meta'
 import AppSlowQuery from '~/apps/SlowQuery/meta'
+import AppSQLAdvisor from '~/apps/SQLAdvisor/meta'
 import AppStatement from '~/apps/Statement/meta'
 import AppKeyViz from '~/apps/KeyViz/meta'
 import AppSystemReport from '~/apps/SystemReport/meta'
@@ -52,7 +53,7 @@ import LayoutMain from './layout/main'
 import translations from './layout/translations'
 
 // for update distro strings resource
-// import '~/uilts/distro/stringsRes'
+// import '~/utils/distro/stringsRes'
 
 function removeSpinner() {
   const spinner = document.getElementById('dashboard_page_spinner')
@@ -154,6 +155,7 @@ async function webPageStart(appOptions: AppOptions) {
     .register(AppClusterInfo)
     .register(AppKeyViz)
     .register(AppTopSQL)
+    .register(AppSQLAdvisor)
     .register(AppStatement)
     .register(AppSystemReport)
     .register(AppSlowQuery)

ui/packages/tidb-dashboard-for-clinic-cloud/src/diagnoseReportApp/index.tsx

@@ -10,7 +10,7 @@ import DiagnosisReport from './components/DiagnosisReport'
 import translations from './translations'
 
 // for update distro strings resource
-// import '~/uilts/distro/stringsRes'
+// import '~/utils/distro/stringsRes'
 
 import './index.css'
 

ui/packages/tidb-dashboard-for-clinic-cloud/src/uilts/globalConfig.ts → ui/packages/tidb-dashboard-for-clinic-cloud/src/utils/globalConfig.ts

@@ -49,6 +49,9 @@ export type GlobalConfig = {
 
   appsConfig?: AppsConfig
 
+  // internal api for performance insight
+  performanceInsightBaseUrl: string
+
   // appsDisabled has a higher priority than appsEnabled
   appsDisabled?: string[]
   appsEnabled?: string[]

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

@@ -1,12 +1,13 @@
 {
   "name": "@pingcap/tidb-dashboard-for-dbaas",
-  "version": "0.0.68",
+  "version": "0.0.76",
   "main": "dist/main.js",
   "module": "dist/main.js",
   "files": [
     "dist/*.js",
     "dist/*.css",
     "dist/*.map",
+    "dist/distro-res/*.jpg",
     "package.json",
     "README.md"
   ],

ui/packages/tidb-dashboard-for-dbaas/src/App.tsx

@@ -4,6 +4,7 @@ import SlowQuery from './apps/SlowQuery'
 import KeyViz from './apps/KeyViz'
 import TopSQL from './apps/TopSQL'
 import Monitoring from './apps/Monitoring'
+import SQLAdvisor from './apps/SQLAdvisor'
 
 function getLocHashPrefix() {
   return window.location.hash.split('/')[1]
@@ -45,5 +46,9 @@ export default function () {
     return <Monitoring />
   }
 
+  if (locHashPrefix === 'sql_advisor') {
+    return <SQLAdvisor />
+  }
+
   return <p>No Matched Route!</p>
 }

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

@@ -0,0 +1,129 @@
+import {
+  ISQLAdvisorDataSource,
+  ISQLAdvisorContext
+} from '@pingcap/tidb-dashboard-lib'
+
+import { IGlobalConfig } from '~/utils/global-config'
+
+class DataSource implements ISQLAdvisorDataSource {
+  constructor(public globalConfig: IGlobalConfig) {}
+
+  clusterInfo = this.globalConfig.clusterInfo
+  orgId = this.clusterInfo.orgId
+  clusterId = this.clusterInfo.clusterId
+  projectId = this.clusterInfo.projectId
+  token = this.globalConfig.apiToken
+  performanceInsightBaseUrl = this.globalConfig.performanceInsightBaseUrl
+
+  tuningListGet(type: string) {
+    return fetch(
+      `${this.performanceInsightBaseUrl}?BackMethod=GetTunedIndexLists&orgId=${this.orgId}&projectId=${this.projectId}&clusterId=${this.clusterId}&type=${type}`,
+      {
+        headers: {
+          token: `Bearer ${this.token}`
+        }
+      }
+    ).then((res) => res.json())
+  }
+
+  tuningTaskCreate(startTime: number, endTime: number) {
+    return fetch(
+      `${this.performanceInsightBaseUrl}?BackMethod=CreateAdviseTask&orgId=${this.orgId}&projectId=${this.projectId}&clusterId=${this.clusterId}&startTime=${startTime}&endTime=${endTime}`,
+      {
+        headers: {
+          token: `Bearer ${this.token}`
+        }
+      }
+    ).then((res) => res.json())
+  }
+
+  tuningTaskStatusGet() {
+    return fetch(
+      `${this.performanceInsightBaseUrl}?BackMethod=IsOKForTuningTask&orgId=${this.orgId}&projectId=${this.projectId}&clusterId=${this.clusterId}`,
+      {
+        headers: {
+          token: `Bearer ${this.token}`
+        }
+      }
+    ).then((res) => res.json())
+  }
+
+  tuningDetailGet(id: number) {
+    return fetch(
+      `${this.performanceInsightBaseUrl}?BackMethod=GetTuningResult&ID=${id}&orgId=${this.orgId}&projectId=${this.projectId}&clusterId=${this.clusterId}`,
+      {
+        headers: {
+          token: `Bearer ${this.token}`
+        }
+      }
+    ).then((res) => res.json())
+  }
+
+  registerUserDB(params: { userName: string; password: string }) {
+    const { userName, password } = params
+    return fetch(
+      `${this.performanceInsightBaseUrl}?BackMethod=RegisterUserDB&orgId=${this.orgId}&projectId=${this.projectId}&clusterId=${this.clusterId}&userName=${userName}&password=${password}`,
+      {
+        headers: {
+          token: `Bearer ${this.token}`
+        }
+      }
+    ).then((res) => res.json())
+  }
+
+  // registerUserDB(params: { userName: string; password: string }) {
+  //   // const { userName, password } = params
+  //   return fetch(
+  //     `${this.performanceInsightBaseUrl}?BackMethod=RegisterUserDB&orgId=${this.orgId}&projectId=${this.projectId}&clusterId=${this.clusterId}`,
+  //     {
+  //       method: 'POST',
+  //       headers: {
+  //         token: `Bearer ${this.token}`
+  //       },
+  //       body: JSON.stringify(params)
+  //     }
+  //   ).then((res) => res.json())
+  // }
+
+  unRegisterUserDB() {
+    return fetch(
+      `${this.performanceInsightBaseUrl}?BackMethod=UnRegisterUserDB&clusterId=${this.clusterId}&projectId=${this.projectId}&orgId=${this.orgId}`,
+      {
+        headers: {
+          token: `Bearer ${this.token}`
+        }
+      }
+    ).then((res) => res.json())
+  }
+
+  registerUserDBStatusGet() {
+    return fetch(
+      `${this.performanceInsightBaseUrl}?BackMethod=IsTiDBOKForAdvisor&clusterId=${this.clusterId}&projectId=${this.projectId}&orgId=${this.orgId}`,
+      {
+        headers: {
+          token: `Bearer ${this.token}`
+        }
+      }
+    ).then((res) => res.json())
+  }
+
+  sqlValidationGet() {
+    return fetch(
+      `${this.performanceInsightBaseUrl}?BackMethod=CheckIfUserTiDBOK&clusterId=${this.clusterId}&projectId=${this.projectId}&orgId=${this.orgId}`,
+      {
+        headers: {
+          token: `Bearer ${this.token}`
+        }
+      }
+    ).then((res) => res.json())
+  }
+}
+
+export const ctx: (globalConfig: IGlobalConfig) => ISQLAdvisorContext = (
+  globalConfig
+) => ({
+  ds: new DataSource(globalConfig),
+  orgId: globalConfig.clusterInfo.orgId,
+  clusterId: globalConfig.clusterInfo.clusterId,
+  registerUserDB: true
+})

ui/packages/tidb-dashboard-for-dbaas/src/apps/SQLAdvisor/index.tsx

@@ -0,0 +1,14 @@
+import React, { useContext } from 'react'
+import { SQLAdvisorAPP, SQLAdvisorProvider } from '@pingcap/tidb-dashboard-lib'
+import { GlobalConfigContext } from '~/utils/global-config'
+import { ctx } from './context'
+
+export default function () {
+  const globalConfig = useContext(GlobalConfigContext)
+
+  return (
+    <SQLAdvisorProvider value={ctx(globalConfig)}>
+      <SQLAdvisorAPP />
+    </SQLAdvisorProvider>
+  )
+}