diff --git a/ui/.prettierignore b/ui/.prettierignore index 91c7c45c6f..0d7189906f 100644 --- a/ui/.prettierignore +++ b/ui/.prettierignore @@ -15,6 +15,4 @@ packages/tidb-dashboard-for-op/dist packages/tidb-dashboard-for-op/.nyc_output packages/tidb-dashboard-for-op/coverage -packages/tidb-dashboard-for-dbaas/dist - pnpm-lock.yaml diff --git a/ui/README.md b/ui/README.md index 4f48ae13cb..41088f9adc 100644 --- a/ui/README.md +++ b/ui/README.md @@ -19,30 +19,10 @@ > Note: > -> You can run `pnpm dev:op`, `pnpm dev:dbaas`, `pnpm dev:clinic-op`, `pnpm dev:clinic-cloud` only to start a specific dashboard variant, while `pnpm dev` starts all of them. -> -> Before starting `pnpm dev:dbaas`, you need to start dbaas ui. +> You can run `pnpm dev:op`, `pnpm dev:clinic-op`, `pnpm dev:clinic-cloud` only to start a specific dashboard variant, while `pnpm dev` starts all of them. > > Before starting `pnpm dev:clinic-op` and `pnpm dev:clinic-cloud`, you need to start clinic ui. ### Build 1. `pnpm build` - -### Publish `tidb-dashboard-for-dbaas` NPM package - -1. `pnpm build` -1. `cd packages/tidb-dashboard-for-dbaas` -1. `pnpm publish --access public` - -### Publish `tidb-dashboard-for-clinic-op` NPM package - -1. `pnpm build` -1. `cd packages/tidb-dashboard-for-clinic-op` -1. `pnpm publish --access public` - -### Publish `tidb-dashboard-for-clinic-cloud` NPM package - -1. `pnpm build` -1. `cd packages/tidb-dashboard-for-clinic-cloud` -1. `pnpm publish --access public` diff --git a/ui/package.json b/ui/package.json index 15a41717ea..787f5214f7 100644 --- a/ui/package.json +++ b/ui/package.json @@ -13,7 +13,6 @@ "build:lib": "pnpm -r --filter @pingcap/tidb-dashboard-lib build", "dev": "pnpm build:lib && pnpm -r --parallel dev", "dev:op": "pnpm build:lib && pnpm -r --parallel --filter @pingcap/tidb-dashboard-for-op... dev", - "dev:dbaas": "pnpm build:lib && pnpm -r --parallel --filter @pingcap/tidb-dashboard-for-dbaas... dev", "dev:clinic-op": "pnpm build:lib && pnpm -r --parallel --filter @pingcap/tidb-dashboard-for-clinic-op... dev", "dev:clinic-cloud": "pnpm build:lib && pnpm -r --parallel --filter @pingcap/tidb-dashboard-for-clinic-cloud... dev", "dev:watch_api": "WATCH_API=1 pnpm dev", diff --git a/ui/packages/tidb-dashboard-for-clinic-cloud/.env.development b/ui/packages/tidb-dashboard-for-clinic-cloud/.env.development index 5755aed61c..67aba7a0b7 100644 --- a/ui/packages/tidb-dashboard-for-clinic-cloud/.env.development +++ b/ui/packages/tidb-dashboard-for-clinic-cloud/.env.development @@ -2,7 +2,6 @@ REACT_APP_VERSION=$npm_package_version REACT_APP_MIXPANEL_HOST=https://telemetry.pingcap.com/api/v1/dashboard/report REACT_APP_MIXPANEL_TOKEN= ##### -# env vars for debugging with target variant (for example: clinic ui, dbaas ui) +# env vars for debugging with target variant (for example: clinic ui) # TARGET_VARIANT_DASHBOARD_PATH=/mnt/bao/codes/work/clinic-ui/packages/clinic-web/dist/dashboard/cloud -# TARGET_VARIANT_DASHBOARD_PATH=/mnt/bao/codes/work/dbaas-ui/public/dashboard # you can set this env value in the .env.local diff --git a/ui/packages/tidb-dashboard-for-clinic-cloud/public/o11y.html b/ui/packages/tidb-dashboard-for-clinic-cloud/public/o11y.html deleted file mode 100644 index e8138060dd..0000000000 --- a/ui/packages/tidb-dashboard-for-clinic-cloud/public/o11y.html +++ /dev/null @@ -1,214 +0,0 @@ - - - - - - - - - - - - - -
-
-

- It may take a bit long time to load for the first time, due to download - some js files. -

-
-
- - - - diff --git a/ui/packages/tidb-dashboard-for-dbaas/.env.development b/ui/packages/tidb-dashboard-for-dbaas/.env.development deleted file mode 100644 index ba741cf810..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/.env.development +++ /dev/null @@ -1,8 +0,0 @@ -PORT=4002 -REACT_APP_VERSION=$npm_package_version -REACT_APP_MIXPANEL_HOST=https://telemetry.pingcap.com/api/v1/dashboard/report -REACT_APP_MIXPANEL_TOKEN= -################# -# set this value before debugging with dbaas ui -# DBAAS_UI_DASHBOARD_PATH=/mnt/bao/codes/work/dbaas-ui/public/dashboard -# you can set this env value in the .env.local diff --git a/ui/packages/tidb-dashboard-for-dbaas/.env.production b/ui/packages/tidb-dashboard-for-dbaas/.env.production deleted file mode 100644 index 11cdbaed70..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/.env.production +++ /dev/null @@ -1,5 +0,0 @@ -REACT_APP_VERSION=$npm_package_version -REACT_APP_MIXPANEL_HOST=https://telemetry.pingcap.com/api/v1/dashboard/report -# TODO: Move to GitHub Secrets -# DO NOT COPY THE TOKEN TO OTHER PROJECTS -REACT_APP_MIXPANEL_TOKEN=eb52fe7ba2189cde179831aa368962ea diff --git a/ui/packages/tidb-dashboard-for-dbaas/README.md b/ui/packages/tidb-dashboard-for-dbaas/README.md deleted file mode 100644 index 32883c8ace..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/README.md +++ /dev/null @@ -1,30 +0,0 @@ -# TiDB Dashboard for DBaaS - -NPM: [@pingcap/tidb-dashboard-for-dbaas](https://www.npmjs.com/package/@pingcap/tidb-dashboard-for-dbaas) - -## How to Use - -```html - - - - - - - -
- - - -``` diff --git a/ui/packages/tidb-dashboard-for-dbaas/builder.js b/ui/packages/tidb-dashboard-for-dbaas/builder.js deleted file mode 100644 index c8f539c7db..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/builder.js +++ /dev/null @@ -1,171 +0,0 @@ -const path = require('path') -const fs = require('fs-extra') -const glob = require('glob') -const md5File = require('md5-file') -const chalk = require('chalk') -const { watch } = require('chokidar') - -const { start } = require('live-server') - -const { build } = require('esbuild') -const postCssPlugin = require('@baurine/esbuild-plugin-postcss3') -const autoprefixer = require('autoprefixer') -const { yamlPlugin } = require('esbuild-plugin-yaml') - -const { lessModifyVars, lessGlobalVars } = require('../../less-vars') - -const isDev = process.env.NODE_ENV !== 'production' - -// load env -const dotenv = require('dotenv') -const envFile = isDev ? './.env.development' : './.env.production' -dotenv.config({ path: path.resolve(process.cwd(), envFile) }) -if (isDev && fs.pathExistsSync(path.resolve(process.cwd(), '.env.local'))) { - dotenv.config({ - path: '.env.local', - override: true - }) -} - -const outDir = 'dist' -const dbaasUIDashboardPath = process.env.DBAAS_UI_DASHBOARD_PATH - -const devPort = parseInt(process.env.PORT) + 1 -const devServerParams = { - port: devPort + '', - root: outDir, - open: true -} - -function genDefine() { - const define = {} - for (const k in process.env) { - if (k.startsWith('REACT_APP_')) { - let envVal = process.env[k] - // Example: REACT_APP_VERSION=$npm_package_version - // Expect output: REACT_APP_VERSION=0.1.0 - if (envVal.startsWith('$')) { - envVal = process.env[envVal.substring(1)] - } - define[`process.env.${k}`] = JSON.stringify(envVal) - } - } - return define -} - -// customized plugin: log time -const logTime = (_options = {}) => ({ - name: 'logTime', - setup(build) { - let time - - build.onStart(() => { - time = new Date() - console.log(`Build started`) - }) - - build.onEnd(() => { - console.log(`Build ended: ${chalk.yellow(`${new Date() - time}ms`)}`) - }) - } -}) - -const esbuildParams = { - color: true, - entryPoints: { - main: 'src/index.tsx' - }, - outdir: outDir, - minify: !isDev, - format: 'esm', - bundle: true, - sourcemap: true, - logLevel: 'error', - incremental: true, - platform: 'browser', - plugins: [ - postCssPlugin.default({ - lessOptions: { - modifyVars: lessModifyVars, - globalVars: lessGlobalVars, - javascriptEnabled: true - }, - enableCache: true, - plugins: [autoprefixer] - }), - yamlPlugin(), - logTime() - ], - define: genDefine(), - inject: ['./process-shim.js'] // fix runtime crash -} - -function updateHtmlFiles(htmlFiles) { - const jsContentHash = md5File.sync(`./${outDir}/main.js`) - const cssContentHash = md5File.sync(`./${outDir}/main.css`) - const packageVersion = process.env.npm_package_version - - htmlFiles.forEach(function (htmlFile) { - let result = fs.readFileSync(htmlFile).toString() - result = result.replaceAll('%JS_CONTENT_HASH%', jsContentHash.slice(0, 7)) - result = result.replaceAll('%CSS_CONTENT_HASH%', cssContentHash.slice(0, 7)) - result = result.replaceAll('%PACKAGE_VERSION%', packageVersion) - fs.writeFileSync(htmlFile, result) - }) -} - -function handleAssets() { - fs.copySync('./public', `./${outDir}`) - - const htmlFiles = glob.sync(`./${outDir}/**/*.html`) - updateHtmlFiles(htmlFiles) -} - -function copyAssets() { - if (!fs.existsSync(dbaasUIDashboardPath)) { - throw new Error( - `dbaas ui dashboard path ${dbaasUIDashboardPath} doesn't exist, please change it by your local path` - ) - } - fs.removeSync(dbaasUIDashboardPath) - fs.copySync(`./${outDir}`, dbaasUIDashboardPath) - console.log('copy dashboard to dbaas ui') -} - -async function main() { - fs.removeSync(`./${outDir}`) - - const builder = await build(esbuildParams) - handleAssets() - - function rebuild() { - builder.rebuild().catch((err) => console.log(err)) - } - - if (isDev) { - // start(devServerParams) - - watch(`src/**/*`, { ignoreInitial: true }).on('all', () => { - rebuild() - }) - watch('public/**/*', { ignoreInitial: true }).on('all', () => { - handleAssets() - }) - - // watch "node_modules/@pingcap/tidb-dashboard-lib/dist/**/*" triggers too many rebuild - // so we just watch index.js to refine the experience - watch('node_modules/@pingcap/tidb-dashboard-lib/dist/index.js', { - ignoreInitial: true - }).on('all', () => { - rebuild() - }) - - watch(`dist/**/*`).on('all', () => { - copyAssets() - }) - } else { - process.exit(0) - } -} - -main() diff --git a/ui/packages/tidb-dashboard-for-dbaas/gulpfile.esm.js b/ui/packages/tidb-dashboard-for-dbaas/gulpfile.esm.js deleted file mode 100644 index 9873a6ba54..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/gulpfile.esm.js +++ /dev/null @@ -1,15 +0,0 @@ -import { task, series, parallel } from 'gulp' -import shell from 'gulp-shell' - -task('tsc:watch', shell.task('tsc --watch')) -task('tsc:check', shell.task('tsc')) - -// https://www.npmjs.com/package/eslint-watch -task('lint:watch', shell.task('esw --watch --cache --ext .tsx,.ts .')) -task('lint:check', shell.task('esw --cache --ext tsx,ts .')) - -task('esbuild:dev', shell.task('NODE_ENV=development node builder.js')) -task('esbuild:build', shell.task('NODE_ENV=production node builder.js')) - -task('dev', parallel('tsc:watch', 'lint:watch', 'esbuild:dev')) -task('build', parallel('tsc:check', 'lint:check', 'esbuild:build')) diff --git a/ui/packages/tidb-dashboard-for-dbaas/package.json b/ui/packages/tidb-dashboard-for-dbaas/package.json deleted file mode 100644 index a95769b4eb..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/package.json +++ /dev/null @@ -1,57 +0,0 @@ -{ - "name": "@pingcap/tidb-dashboard-for-dbaas", - "version": "0.0.92", - "main": "dist/main.js", - "module": "dist/main.js", - "files": [ - "dist/*.js", - "dist/*.css", - "dist/*.map", - "dist/distro-res/*.jpg", - "package.json", - "README.md" - ], - "scripts": { - "prepublish": "pnpm build", - "dev": "gulp dev", - "build": "gulp build" - }, - "keywords": [], - "author": "", - "license": "ISC", - "repository": { - "type": "git", - "url": "https://github.com/pingcap/tidb-dashboard.git" - }, - "dependencies": { - "@pingcap/tidb-dashboard-client": "workspace:^1.0.0", - "@pingcap/tidb-dashboard-lib": "workspace:^1.0.0", - "antd": "^4.18.7", - "axios": "^1.6.2", - "compare-versions": "^5.0.1", - "i18next": "^23.2.9", - "react": "^17.0.2", - "react-dom": "^17.0.2", - "react-router-dom": "6" - }, - "devDependencies": { - "@types/node": "^16.9.1", - "autoprefixer": "^10.4.2", - "chalk": "4.1.2", - "chokidar": "^3.5.2", - "dotenv": "^16.0.1", - "esbuild": "^0.14.23", - "esbuild-plugin-svgr": "^1.0.0", - "esbuild-plugin-yaml": "^0.0.1", - "eslint-watch": "^8.0.0", - "esm": "^3.2.25", - "fs-extra": "^10.0.0", - "glob": "^8.0.3", - "gulp": "^4.0.2", - "gulp-shell": "^0.8.0", - "live-server": "^1.2.1", - "md5-file": "^5.0.0", - "rimraf": "^3.0.2", - "typescript": "^4.7.3" - } -} diff --git a/ui/packages/tidb-dashboard-for-dbaas/process-shim.js b/ui/packages/tidb-dashboard-for-dbaas/process-shim.js deleted file mode 100644 index f440010508..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/process-shim.js +++ /dev/null @@ -1,4 +0,0 @@ -export let process = { - // cwd: () => '', - env: {} // to avoid `process.env` undefined in runtime -} diff --git a/ui/packages/tidb-dashboard-for-dbaas/public/favicon.ico b/ui/packages/tidb-dashboard-for-dbaas/public/favicon.ico deleted file mode 100755 index 9d5d2b14e1..0000000000 Binary files a/ui/packages/tidb-dashboard-for-dbaas/public/favicon.ico and /dev/null differ diff --git a/ui/packages/tidb-dashboard-for-dbaas/public/index.html b/ui/packages/tidb-dashboard-for-dbaas/public/index.html deleted file mode 100644 index f887787be2..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/public/index.html +++ /dev/null @@ -1,143 +0,0 @@ - - - - - - - - - - - -
-
- - - diff --git a/ui/packages/tidb-dashboard-for-dbaas/public/test-cdn/index.html b/ui/packages/tidb-dashboard-for-dbaas/public/test-cdn/index.html deleted file mode 100644 index 53fa2bc3a2..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/public/test-cdn/index.html +++ /dev/null @@ -1,117 +0,0 @@ - - - - - - - - - - - -
-
- - - diff --git a/ui/packages/tidb-dashboard-for-dbaas/public/test-iframe/child.html b/ui/packages/tidb-dashboard-for-dbaas/public/test-iframe/child.html deleted file mode 100644 index 966b70e913..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/public/test-iframe/child.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - - - - - -
- - - diff --git a/ui/packages/tidb-dashboard-for-dbaas/public/test-iframe/external-link.svg b/ui/packages/tidb-dashboard-for-dbaas/public/test-iframe/external-link.svg deleted file mode 100644 index 6236df3e03..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/public/test-iframe/external-link.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui/packages/tidb-dashboard-for-dbaas/public/test-iframe/maximize-2.svg b/ui/packages/tidb-dashboard-for-dbaas/public/test-iframe/maximize-2.svg deleted file mode 100644 index e41fc0b73d..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/public/test-iframe/maximize-2.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui/packages/tidb-dashboard-for-dbaas/public/test-iframe/maximize.svg b/ui/packages/tidb-dashboard-for-dbaas/public/test-iframe/maximize.svg deleted file mode 100644 index fc30518941..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/public/test-iframe/maximize.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui/packages/tidb-dashboard-for-dbaas/public/test-iframe/minimize-2.svg b/ui/packages/tidb-dashboard-for-dbaas/public/test-iframe/minimize-2.svg deleted file mode 100644 index a720fa6c37..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/public/test-iframe/minimize-2.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui/packages/tidb-dashboard-for-dbaas/public/test-iframe/minimize.svg b/ui/packages/tidb-dashboard-for-dbaas/public/test-iframe/minimize.svg deleted file mode 100644 index 46d6119695..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/public/test-iframe/minimize.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui/packages/tidb-dashboard-for-dbaas/public/test-iframe/parent.html b/ui/packages/tidb-dashboard-for-dbaas/public/test-iframe/parent.html deleted file mode 100644 index 32c1dee430..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/public/test-iframe/parent.html +++ /dev/null @@ -1,225 +0,0 @@ - - - - - - - - - -
-
-

- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit quam - eaque, error distinctio nulla necessitatibus, sapiente quibusdam ipsum - quisquam, perferendis porro rerum ad! Facere id exercitationem culpa - nobis totam cum! -

-
- -
-
- - - - - - - - - - - -
- -
- -
-
- -
- - - - - - diff --git a/ui/packages/tidb-dashboard-for-dbaas/src/App.tsx b/ui/packages/tidb-dashboard-for-dbaas/src/App.tsx deleted file mode 100644 index 1392545b53..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/src/App.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React, { useEffect, useState } from 'react' -import Statement from './apps/Statement' -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] -} - -export default function () { - const [locHashPrefix, setLocHashPrefix] = useState(() => getLocHashPrefix()) - - useEffect(() => { - function handleRouteChange() { - const curLocHashPrefix = getLocHashPrefix() - if (curLocHashPrefix !== locHashPrefix) { - setLocHashPrefix(curLocHashPrefix) - } - } - window.addEventListener('dashboard:route-change', handleRouteChange) - return () => { - window.removeEventListener('dashboard:route-change', handleRouteChange) - } - }, [locHashPrefix]) - - if (locHashPrefix.startsWith('statement')) { - return - } - - if (locHashPrefix.startsWith('slow_query')) { - return - } - - if (locHashPrefix.startsWith('keyviz')) { - return - } - - if (locHashPrefix.startsWith('topsql')) { - return - } - - if (locHashPrefix.startsWith('monitoring')) { - return - } - - if (locHashPrefix === 'sql_advisor') { - return - } - - return

No Matched Route!

-} diff --git a/ui/packages/tidb-dashboard-for-dbaas/src/apps/KeyViz/context.ts b/ui/packages/tidb-dashboard-for-dbaas/src/apps/KeyViz/context.ts deleted file mode 100644 index 76063ca77d..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/src/apps/KeyViz/context.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { - IKeyVizDataSource, - IKeyVizContext, - ReqConfig -} from '@pingcap/tidb-dashboard-lib' -import client, { ConfigKeyVisualConfig } from '~/client' - -class DataSource implements IKeyVizDataSource { - keyvisualConfigGet(options?: ReqConfig) { - return client.getInstance().keyvisualConfigGet(options) - } - - keyvisualConfigPut(request: ConfigKeyVisualConfig, options?: ReqConfig) { - return client.getInstance().keyvisualConfigPut({ request }, options) - } - - keyvisualHeatmapsGet( - startkey?: string, - endkey?: string, - starttime?: number, - endtime?: number, - type?: - | 'written_bytes' - | 'read_bytes' - | 'written_keys' - | 'read_keys' - | 'integration', - options?: ReqConfig - ) { - return client.getInstance().keyvisualHeatmapsGet( - { - startkey, - endkey, - starttime, - type - }, - options - ) - } -} - -const ds = new DataSource() - -export const ctx: () => IKeyVizContext = () => ({ - ds, - cfg: { showHelp: false } -}) diff --git a/ui/packages/tidb-dashboard-for-dbaas/src/apps/KeyViz/index.tsx b/ui/packages/tidb-dashboard-for-dbaas/src/apps/KeyViz/index.tsx deleted file mode 100644 index ec9d3099fb..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/src/apps/KeyViz/index.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react' -import { KeyVizApp, KeyVizProvider } from '@pingcap/tidb-dashboard-lib' -import { ctx } from './context' - -export default function () { - return ( - - - - ) -} diff --git a/ui/packages/tidb-dashboard-for-dbaas/src/apps/Monitoring/context.ts b/ui/packages/tidb-dashboard-for-dbaas/src/apps/Monitoring/context.ts deleted file mode 100644 index 82c06d3f8a..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/src/apps/Monitoring/context.ts +++ /dev/null @@ -1,105 +0,0 @@ -import { - IMonitoringDataSource, - IMonitoringContext, - ReqConfig -} from '@pingcap/tidb-dashboard-lib' - -import client, { MetricsQueryResponse } from '~/client' -import { IGlobalConfig } from '~/utils/global-config' - -import { getMonitoringItems } from './metricsQueries' - -class DataSource implements IMonitoringDataSource { - constructor(public globalConfig: IGlobalConfig) {} - - // use arrow function to make the `this` not undefined inside the method - metricsQueryGet = (params: { - endTimeSec?: number - query?: string - startTimeSec?: number - stepSec?: number - }) => { - if (this.globalConfig.promBaseUrl) { - return client - .getAxiosInstance() - .get( - this.globalConfig.promBaseUrl + '/api/v1/query_range', - { - params: { - query: params.query, - step: params.stepSec, - start: params.startTimeSec, - end: params.endTimeSec - } - } - ) - .then((res) => res.data) - } - return client - .getInstance() - .metricsQueryGet(params, { - handleError: 'custom' - } as ReqConfig) - .then((res) => res.data) - } -} - -export const ctx: (globalConfig: IGlobalConfig) => IMonitoringContext = ( - globalConfig -) => { - const isDedicated = globalConfig.clusterInfo.deployType === 'Dedicated' - const RECENT_SECONDS = globalConfig.expandMetricsData - ? isDedicated - ? [ - 5 * 60, - 15 * 60, - 30 * 60, - 60 * 60, - 3 * 60 * 60, - 12 * 60 * 60, - 24 * 60 * 60, - 3 * 24 * 60 * 60, - 7 * 24 * 60 * 60 - ] - : [ - 5 * 60, - 15 * 60, - 30 * 60, - 60 * 60, - 3 * 60 * 60, - 12 * 60 * 60, - 24 * 60 * 60, - 2 * 24 * 60 * 60, - 3 * 24 * 60 * 60 - ] - : [ - 5 * 60, - 15 * 60, - 30 * 60, - 60 * 60, - 3 * 60 * 60, - 6 * 60 * 60, - 12 * 60 * 60, - 24 * 60 * 60, - 2 * 24 * 60 * 60 - ] - - return { - ds: new DataSource(globalConfig), - cfg: { - getMetricsQueries: (pdVersion: string | undefined) => - getMonitoringItems( - pdVersion, - globalConfig.clusterInfo.deployType, - globalConfig.enableNodeMetrics - ), - timeRangeSelector: { - recent_seconds: RECENT_SECONDS, - customAbsoluteRangePicker: true - }, - metricsReferenceLink: isDedicated - ? 'https://docs.pingcap.com/tidbcloud/built-in-monitoring' - : '' - } - } -} diff --git a/ui/packages/tidb-dashboard-for-dbaas/src/apps/Monitoring/index.tsx b/ui/packages/tidb-dashboard-for-dbaas/src/apps/Monitoring/index.tsx deleted file mode 100644 index 874cf81a93..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/src/apps/Monitoring/index.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React, { useContext } from 'react' -import { MonitoringApp, MonitoringProvider } from '@pingcap/tidb-dashboard-lib' -import { GlobalConfigContext } from '~/utils/global-config' -import { ctx } from './context' - -export default function () { - const globalConfig = useContext(GlobalConfigContext) - - return ( - - - - ) -} diff --git a/ui/packages/tidb-dashboard-for-dbaas/src/apps/Monitoring/metricsQueries.ts b/ui/packages/tidb-dashboard-for-dbaas/src/apps/Monitoring/metricsQueries.ts deleted file mode 100644 index a1f96109f8..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/src/apps/Monitoring/metricsQueries.ts +++ /dev/null @@ -1,898 +0,0 @@ -import { - ColorType, - TransformNullValue, - MetricsQueryType -} from '@pingcap/tidb-dashboard-lib' -import { DeployType } from '../../utils/global-config' - -import { compare } from 'compare-versions' - -function transformColorBySQLType(legendLabel: string) { - switch (legendLabel) { - case 'Select': - return ColorType.BLUE_3 - case 'Commit': - return ColorType.GREEN_2 - case 'Insert': - return ColorType.GREEN_3 - case 'Update': - return ColorType.GREEN_4 - case 'general': - return ColorType.PINK - default: - return undefined - } -} - -function transformColorByExecTimeOverview(legendLabel: string) { - switch (legendLabel) { - case 'tso_wait': - return ColorType.RED_5 - case 'Commit': - return ColorType.GREEN_4 - case 'Prewrite': - return ColorType.GREEN_3 - case 'PessimisticLock': - return ColorType.RED_4 - case 'Get': - return ColorType.BLUE_3 - case 'BatchGet': - return ColorType.BLUE_4 - case 'Cop': - return ColorType.BLUE_1 - case 'ScanLock': - case 'Scan': - return ColorType.PURPLE - case 'execute time': - return ColorType.YELLOW - default: - return undefined - } -} - -const getMonitoringItems = ( - pdVersion: string | undefined, - deployType: DeployType, - enableNodeMetrics: boolean -): MetricsQueryType[] => { - function loadTiKVStoragePromql() { - const PDVersion = pdVersion?.replace('v', '') - - if (PDVersion && PDVersion !== 'N/A' && compare(PDVersion, '5.4.1', '<')) { - return 'sum(tikv_engine_size_bytes) by (instance)' - } - return 'sum(tikv_store_size_bytes{type="used"}) by (instance)' - } - - const monitoringItemsDedicated: MetricsQueryType[] = [ - { - category: 'database_time', - metrics: [ - { - title: 'Database Time by SQL Types', - queries: [ - { - promql: `sum(rate(tidb_server_handle_query_duration_seconds_sum{sql_type!="internal"}[$__rate_interval]))`, - name: 'database time', - color: ColorType.YELLOW, - type: 'line' - }, - { - promql: `sum(rate(tidb_server_handle_query_duration_seconds_sum{sql_type!="internal"}[$__rate_interval])) by (sql_type)`, - name: '{sql_type}', - color: (seriesName: string) => - transformColorBySQLType(seriesName), - type: 'bar_stacked' - } - ], - nullValue: TransformNullValue.AS_ZERO, - unit: 's' - }, - { - title: 'Database Time by SQL Phase', - queries: [ - { - promql: `sum(rate(tidb_server_handle_query_duration_seconds_sum{sql_type!="internal"}[$__rate_interval]))`, - name: 'database time', - color: ColorType.YELLOW, - type: 'line' - }, - { - promql: `sum(rate(tidb_session_parse_duration_seconds_sum{sql_type="general"}[$__rate_interval]))`, - name: 'parse', - color: ColorType.RED_2, - type: 'bar_stacked' - }, - { - promql: `sum(rate(tidb_session_compile_duration_seconds_sum{sql_type="general"}[$__rate_interval]))`, - name: 'compile', - color: ColorType.ORANGE, - type: 'bar_stacked' - }, - { - promql: `sum(rate(tidb_session_execute_duration_seconds_sum{sql_type="general"}[$__rate_interval]))`, - name: 'execute', - color: ColorType.GREEN_3, - type: 'bar_stacked' - }, - { - promql: `sum(rate(tidb_server_get_token_duration_seconds_sum[$__rate_interval]))/1000000`, - name: 'get token', - color: ColorType.RED_3, - type: 'bar_stacked' - } - ], - nullValue: TransformNullValue.AS_ZERO, - unit: 's' - }, - { - title: 'SQL Execute Time Overview', - queries: [ - { - promql: - 'sum(rate(tidb_tikvclient_request_seconds_sum{store!="0"}[$__rate_interval])) by (type)', - name: '{type}', - color: (seriesName: string) => - transformColorByExecTimeOverview(seriesName), - type: 'bar_stacked' - }, - { - promql: - 'sum(rate(pd_client_cmd_handle_cmds_duration_seconds_sum{type="wait"}[$__rate_interval]))', - name: 'tso_wait', - color: ColorType.RED_5, - type: 'bar_stacked' - } - ], - unit: 's' - } - ] - }, - { - category: 'application_connection', - metrics: [ - { - title: 'Connection Count', - queries: [ - { - promql: 'sum(tidb_server_connections)', - name: 'Total', - type: 'line' - }, - { - promql: 'sum(tidb_server_tokens)', - name: 'active connections', - type: 'line' - } - ], - unit: 'short', - nullValue: TransformNullValue.AS_ZERO - }, - { - title: 'Disconnection', - queries: [ - { - promql: - 'sum(rate(tidb_server_disconnection_total[$__rate_interval])) by (instance, result)', - name: '{instance}-{result}', - type: 'area_stack' - } - ], - unit: 'short', - nullValue: TransformNullValue.AS_ZERO - } - ] - }, - { - category: 'sql_count', - metrics: [ - { - title: 'Query Per Second', - queries: [ - { - promql: - 'sum(rate(tidb_executor_statement_total[$__rate_interval]))', - name: 'Total', - type: 'line' - }, - { - promql: - 'sum(rate(tidb_executor_statement_total[$__rate_interval])) by (type)', - name: '{type}', - type: 'line' - } - ], - nullValue: TransformNullValue.AS_ZERO, - unit: 'short' - }, - { - title: 'Failed Queries', - queries: [ - { - promql: - 'sum(rate(tidb_server_execute_error_total[$__rate_interval]))', - name: '{type} @ {instance}', - type: 'line' - } - ], - nullValue: TransformNullValue.AS_ZERO, - unit: 'short' - }, - { - title: 'Command Per Second', - queries: [ - { - promql: - 'sum(rate(tidb_server_query_total[$__rate_interval])) by (type)', - name: '{type}', - type: 'line' - } - ], - nullValue: TransformNullValue.AS_ZERO, - unit: 'short' - }, - { - title: 'Queries Using Plan Cache OPS', - queries: [ - { - promql: - 'sum(rate(tidb_server_plan_cache_total[$__rate_interval]))', - name: 'avg - hit', - type: 'line' - }, - { - promql: - 'sum(rate(tidb_server_plan_cache_miss_total[$__rate_interval]))', - name: 'avg - miss', - type: 'line' - } - ], - unit: 'short', - nullValue: TransformNullValue.AS_ZERO - } - ] - }, - { - category: 'latency_break_down', - metrics: [ - { - title: 'Query Duration', - queries: [ - { - promql: - 'sum(rate(tidb_server_handle_query_duration_seconds_sum{sql_type!="internal"}[$__rate_interval])) / sum(rate(tidb_server_handle_query_duration_seconds_count{sql_type!="internal"}[$__rate_interval]))', - name: 'avg', - type: 'line' - }, - { - promql: - 'histogram_quantile(0.99, sum(rate(tidb_server_handle_query_duration_seconds_bucket{sql_type!="internal"}[$__rate_interval])) by (le))', - name: '99', - type: 'line' - }, - { - promql: - 'sum(rate(tidb_server_handle_query_duration_seconds_sum{sql_type!="internal"}[$__rate_interval])) by (sql_type) / sum(rate(tidb_server_handle_query_duration_seconds_count{sql_type!="internal"}[$__rate_interval])) by (sql_type)', - name: 'avg-{sql_type}', - type: 'line' - }, - { - promql: - 'histogram_quantile(0.99, sum(rate(tidb_server_handle_query_duration_seconds_bucket[$__rate_interval])) by (le,sql_type))', - name: '99-{sql_type}', - type: 'line' - } - ], - nullValue: TransformNullValue.AS_ZERO, - unit: 's' - }, - { - title: 'Average Idle Connection Duration', - queries: [ - { - promql: `(sum(rate(tidb_server_conn_idle_duration_seconds_sum{in_txn='1'}[$__rate_interval])) / sum(rate(tidb_server_conn_idle_duration_seconds_count{in_txn='1'}[$__rate_interval])))`, - name: 'avg-in-txn', - type: 'line' - }, - { - promql: `(sum(rate(tidb_server_conn_idle_duration_seconds_sum{in_txn='0'}[$__rate_interval])) / sum(rate(tidb_server_conn_idle_duration_seconds_count{in_txn='0'}[$__rate_interval])))`, - name: 'avg-not-in-txn', - type: 'line' - } - ], - unit: 's', - nullValue: TransformNullValue.AS_ZERO - }, - { - title: 'Get Token Duration', - queries: [ - { - promql: - 'sum(rate(tidb_server_get_token_duration_seconds_sum[$__rate_interval])) / sum(rate(tidb_server_get_token_duration_seconds_count[$__rate_interval]))', - name: 'avg', - type: 'line' - }, - { - promql: - 'histogram_quantile(0.99, sum(rate(tidb_server_get_token_duration_seconds_bucket[$__rate_interval])) by (le))', - name: '99', - type: 'line' - } - ], - nullValue: TransformNullValue.AS_ZERO, - unit: 'µs' - }, - { - title: 'Parse Duration', - queries: [ - { - promql: - '(sum(rate(tidb_session_parse_duration_seconds_sum{sql_type="general"}[$__rate_interval])) / sum(rate(tidb_session_parse_duration_seconds_count{sql_type="general"}[$__rate_interval])))', - name: 'avg', - type: 'line' - }, - { - promql: - 'histogram_quantile(0.99, sum(rate(tidb_session_parse_duration_seconds_bucket{sql_type="general"}[$__rate_interval])) by (le))', - name: '99', - type: 'line' - } - ], - nullValue: TransformNullValue.AS_ZERO, - unit: 's' - }, - { - title: 'Compile Duration', - queries: [ - { - promql: - '(sum(rate(tidb_session_compile_duration_seconds_sum{sql_type="general"}[$__rate_interval])) / sum(rate(tidb_session_compile_duration_seconds_count{sql_type="general"}[$__rate_interval])))', - name: 'avg', - type: 'line' - }, - { - promql: - 'histogram_quantile(0.99, sum(rate(tidb_session_compile_duration_seconds_bucket{sql_type="general"}[$__rate_interval])) by (le))', - name: '99', - type: 'line' - } - ], - nullValue: TransformNullValue.AS_ZERO, - unit: 's' - }, - { - title: 'Execute Duration', - queries: [ - { - promql: - '(sum(rate(tidb_session_execute_duration_seconds_sum{sql_type="general"}[$__rate_interval])) / sum(rate(tidb_session_execute_duration_seconds_count{sql_type="general"}[$__rate_interval])))', - name: 'avg', - type: 'line' - }, - { - promql: - 'histogram_quantile(0.99, sum(rate(tidb_session_execute_duration_seconds_bucket{sql_type="general"}[$__rate_interval])) by (le))', - name: '99', - type: 'line' - } - ], - nullValue: TransformNullValue.AS_ZERO, - unit: 's' - } - ] - }, - { - category: 'transaction', - metrics: [ - { - title: 'Transaction Per Second', - queries: [ - { - promql: - 'sum(rate(tidb_session_transaction_duration_seconds_count[$__rate_interval])) by (type, txn_mode)', - name: '{type}-{txn_mode}', - type: 'line' - } - ], - nullValue: TransformNullValue.AS_ZERO, - unit: 'short' - }, - { - title: 'Transaction Duration', - queries: [ - { - promql: - 'sum(rate(tidb_session_transaction_duration_seconds_sum[$__rate_interval])) by (txn_mode)/ sum(rate(tidb_session_transaction_duration_seconds_count[$__rate_interval])) by (txn_mode)', - name: 'avg-{txn_mode}', - type: 'line' - }, - { - promql: - 'histogram_quantile(0.99, sum(rate(tidb_session_transaction_duration_seconds_bucket[$__rate_interval])) by (le, txn_mode))', - name: '99-{txn_mode}', - type: 'line' - } - ], - unit: 's' - } - ] - }, - { - category: 'core_path_duration', - metrics: [ - { - title: 'Avg TiDB KV Request Duration', - queries: [ - { - promql: - 'sum(rate(tidb_tikvclient_request_seconds_sum{store!="0"}[$__rate_interval])) by (type)/ sum(rate(tidb_tikvclient_request_seconds_count{store!="0"}[$__rate_interval])) by (type)', - name: '{type}', - type: 'line' - } - ], - nullValue: TransformNullValue.AS_ZERO, - unit: 's' - }, - { - title: 'Avg TiKV GRPC Duration', - queries: [ - { - promql: - 'sum(rate(tikv_grpc_msg_duration_seconds_sum{store!="0"}[$__rate_interval])) by (type)/ sum(rate(tikv_grpc_msg_duration_seconds_count{store!="0"}[$__rate_interval])) by (type)', - name: '{type}', - type: 'line' - } - ], - nullValue: TransformNullValue.AS_ZERO, - unit: 's' - }, - { - title: 'Average / P99 PD TSO Wait/RPC Duration', - queries: [ - { - promql: - '(sum(rate(pd_client_cmd_handle_cmds_duration_seconds_sum{type="wait"}[$__rate_interval])) / sum(rate(pd_client_cmd_handle_cmds_duration_seconds_count{type="wait"}[$__rate_interval])))', - name: 'wait - avg', - type: 'line' - }, - { - promql: - 'histogram_quantile(0.99, sum(rate(pd_client_cmd_handle_cmds_duration_seconds_bucket{type="wait"}[$__rate_interval])) by (le))', - name: 'wait - 99', - type: 'line' - }, - { - promql: - '(sum(rate(pd_client_request_handle_requests_duration_seconds_sum{type="tso"}[$__rate_interval])) / sum(rate(pd_client_request_handle_requests_duration_seconds_count{type="tso"}[$__rate_interval])))', - name: 'rpc - avg', - type: 'line' - }, - { - promql: - 'histogram_quantile(0.99, sum(rate(pd_client_request_handle_requests_duration_seconds_bucket{type="tso"}[$__rate_interval])) by (le))', - name: 'rpc - 99', - type: 'line' - } - ], - nullValue: TransformNullValue.AS_ZERO, - unit: 's' - }, - { - title: 'Average / P99 Storage Async Write Duration', - queries: [ - { - promql: - 'sum(rate(tikv_storage_engine_async_request_duration_seconds_sum{type="write"}[$__rate_interval])) / sum(rate(tikv_storage_engine_async_request_duration_seconds_count{type="write"}[$__rate_interval]))', - name: 'avg', - type: 'line' - }, - { - promql: - 'histogram_quantile(0.99, sum(rate(tikv_storage_engine_async_request_duration_seconds_bucket{type="write"}[$__rate_interval])) by (le))', - name: '99', - type: 'line' - } - ], - nullValue: TransformNullValue.AS_ZERO, - unit: 's' - }, - { - title: 'Average / P99 Store Duration', - queries: [ - { - promql: - 'sum(rate(tikv_raftstore_store_duration_secs_sum[$__rate_interval])) / sum(rate(tikv_raftstore_store_duration_secs_count[$__rate_interval]))', - name: 'avg', - type: 'line' - }, - { - promql: - 'histogram_quantile(0.99, sum(rate(tikv_raftstore_store_duration_secs_bucket[$__rate_interval])) by (le))', - name: '99', - type: 'line' - } - ], - nullValue: TransformNullValue.AS_ZERO, - unit: 's' - }, - { - title: 'Average / P99 Apply Duration', - queries: [ - { - promql: - '(sum(rate(tikv_raftstore_apply_duration_secs_sum[$__rate_interval])) / sum(rate(tikv_raftstore_apply_duration_secs_count[$__rate_interval])))', - name: 'avg', - type: 'line' - }, - { - promql: - 'histogram_quantile(0.99, sum(rate(tikv_raftstore_apply_duration_secs_bucket[$__rate_interval])) by (le))', - name: '99', - type: 'line' - } - ], - nullValue: TransformNullValue.AS_ZERO, - unit: 's' - }, - { - title: 'Average / P99 Append Log Duration', - queries: [ - { - promql: - '(sum(rate(tikv_raftstore_append_log_duration_seconds_sum[$__rate_interval])) / sum(rate(tikv_raftstore_append_log_duration_seconds_count[$__rate_interval])))', - name: 'avg', - type: 'line' - }, - { - promql: - 'histogram_quantile(0.99, sum(rate(tikv_raftstore_append_log_duration_seconds_bucket[$__rate_interval])) by (le))', - name: '99', - type: 'line' - } - ], - nullValue: TransformNullValue.AS_ZERO, - unit: 's' - }, - { - title: 'Average / P99 Commit Log Duration', - queries: [ - { - promql: - '(sum(rate(tikv_raftstore_commit_log_duration_seconds_sum[$__rate_interval])) / sum(rate(tikv_raftstore_commit_log_duration_seconds_count[$__rate_interval])))', - name: 'avg', - type: 'line' - }, - { - promql: - 'histogram_quantile(0.99, sum(rate(tikv_raftstore_commit_log_duration_seconds_bucket[$__rate_interval])) by (le))', - name: '99', - type: 'line' - } - ], - nullValue: TransformNullValue.AS_ZERO, - unit: 's' - }, - { - title: 'Average / P99 Apply Log Duration', - queries: [ - { - promql: - '(sum(rate(tikv_raftstore_apply_log_duration_seconds_sum[$__rate_interval])) / sum(rate(tikv_raftstore_apply_log_duration_seconds_count[$__rate_interval])))', - name: 'avg', - type: 'line' - }, - { - promql: - 'histogram_quantile(0.99, sum(rate(tikv_raftstore_apply_log_duration_seconds_bucket[$__rate_interval])) by (le))', - name: '99', - type: 'line' - } - ], - nullValue: TransformNullValue.AS_ZERO, - unit: 's' - } - ] - }, - { - category: 'server', - metrics: [ - { - title: 'TiDB Uptime', - queries: [ - { - promql: - 'avg by (cluster_id, instance) ((time() - process_start_time_seconds{component="tidb"}))', - name: '{instance}', - type: 'line' - } - ], - nullValue: TransformNullValue.AS_ZERO, - unit: 's' - }, - { - title: 'TiDB CPU Usage', - queries: [ - { - promql: enableNodeMetrics - ? 'sum(rate(node_cpu_seconds_total{mode!="idle",component="tidb"}[$__rate_interval])) by (instance)' - : 'avg by (cluster_id, instance) (irate(process_cpu_seconds_total{component="tidb"}[$__rate_interval]))', - name: '{instance}', - type: 'line' - } - ], - nullValue: TransformNullValue.AS_ZERO, - unit: 'percentunit' - }, - { - title: 'TiDB Memory Usage', - queries: [ - { - promql: enableNodeMetrics - ? 'avg(node_memory_MemTotal_bytes{component="tidb"} - node_memory_MemAvailable_bytes{component="tidb"}) by (instance)' - : 'avg by (cluster_id, instance) (process_resident_memory_bytes{component="tidb"})', - name: '{instance}', - type: 'line' - } - ], - nullValue: TransformNullValue.AS_ZERO, - unit: 'bytes' - }, - { - title: 'TiKV Uptime', - queries: [ - { - promql: - 'avg by (cluster_id, instance) ((time() - process_start_time_seconds{component="tikv"}))', - name: '{instance}', - type: 'line' - } - ], - unit: 's' - }, - { - title: 'TiKV CPU Usage', - queries: [ - { - promql: enableNodeMetrics - ? 'sum(rate(node_cpu_seconds_total{mode!="idle",component="tikv"}[$__rate_interval])) by (instance)' - : 'sum(rate(tikv_thread_cpu_seconds_total[$__rate_interval])) by (instance)', - name: '{instance}', - type: 'line' - } - ], - unit: 'percentunit' - }, - { - title: 'TiKV Memory Usage', - queries: [ - { - promql: enableNodeMetrics - ? 'avg(node_memory_MemTotal_bytes{component="tikv"} - node_memory_MemAvailable_bytes{component="tikv"}) by (instance)' - : 'avg(process_resident_memory_bytes{component="tikv"}) by (instance)', - name: '{instance}', - type: 'line' - } - ], - unit: 'bytes' - }, - { - title: 'TiKV IO MBps', - queries: [ - { - promql: - 'sum(rate(tikv_engine_flow_bytes{db="kv", type="wal_file_bytes"}[$__rate_interval])) by (instance) + (sum(rate(tikv_engine_flow_bytes{db="raft", type="wal_file_bytes"}[$__rate_interval])) by (instance) or (0 * sum(rate(raft_engine_write_size_sum[$__rate_interval])) by (instance))) + (sum(rate(raft_engine_write_size_sum[$__rate_interval])) by (instance) or (0 * sum(rate(tikv_engine_flow_bytes{db="raft", type="wal_file_bytes"}[$__rate_interval])) by (instance)))', - name: '{instance}-write', - type: 'line' - }, - { - promql: - 'sum(rate(tikv_engine_flow_bytes{db="kv", type=~"bytes_read|iter_bytes_read"}[$__rate_interval])) by (instance)', - name: '{instance}-read', - type: 'line' - } - ], - unit: 'Bps' - }, - { - title: 'TiKV Storage Usage', - queries: [ - { - promql: loadTiKVStoragePromql(), - name: '{instance}', - type: 'area_stack' - } - ], - unit: 'bytes' - }, - { - title: 'TiFlash Uptime', - queries: [ - { - promql: - 'avg by (cluster_id, instance) (tiflash_system_asynchronous_metric_Uptime)', - name: '{instance}', - type: 'line' - } - ], - nullValue: TransformNullValue.AS_ZERO, - unit: 's' - }, - { - title: 'TiFlash CPU Usage', - queries: [ - { - promql: enableNodeMetrics - ? 'sum(rate(node_cpu_seconds_total{mode!="idle",component="tiflash"}[$__rate_interval])) by (instance)' - : 'avg by (cluster_id, instance) (rate(tiflash_proxy_process_cpu_seconds_total{component="tiflash"}[$__rate_interval]))', - name: '{instance}', - type: 'line' - } - ], - nullValue: TransformNullValue.AS_ZERO, - unit: 'percentunit' - }, - { - title: 'TiFlash Memory', - queries: [ - { - promql: enableNodeMetrics - ? 'avg(node_memory_MemTotal_bytes{component="tiflash"} - node_memory_MemAvailable_bytes{component="tiflash"}) by (instance)' - : 'avg by (cluster_id, instance) (tiflash_proxy_process_resident_memory_bytes{component="tiflash"})', - name: '{instance}', - type: 'line' - } - ], - nullValue: TransformNullValue.AS_ZERO, - unit: 'bytes' - }, - { - title: 'TiFlash IO MBps', - queries: [ - { - promql: - 'sum(rate(tiflash_system_profile_event_WriteBufferFromFileDescriptorWriteBytes[$__rate_interval])) by (instance) + sum(rate(tiflash_system_profile_event_PSMWriteBytes[$__rate_interval])) by (instance) + sum(rate(tiflash_system_profile_event_WriteBufferAIOWriteBytes[$__rate_interval])) by (instance)', - name: '{instance}-write', - type: 'line' - }, - { - promql: - 'sum(rate(tiflash_system_profile_event_ReadBufferFromFileDescriptorReadBytes[$__rate_interval])) by (instance) + sum(rate(tiflash_system_profile_event_PSMReadBytes[$__rate_interval])) by (instance) + sum(rate(tiflash_system_profile_event_ReadBufferAIOReadBytes[$__rate_interval])) by (instance)', - name: '{instance}-read', - type: 'line' - } - ], - unit: 'Bps' - }, - { - title: 'TiFlash Storage Usage', - queries: [ - { - promql: - 'sum(tiflash_system_current_metric_StoreSizeUsed) by (instance)', - name: '{instance}', - type: 'area_stack' - } - ], - unit: 'bytes' - } - ] - } - ] - - const monitoringItemsServerless: MetricsQueryType[] = [ - { - metrics: [ - { - title: 'Query Per Second', - queries: [ - { - promql: `sum(rate(tidb_executor_statement_total[$__rate_interval]))`, - name: 'total', - type: 'line' - }, - { - promql: `sum(rate(tidb_executor_statement_total[$__rate_interval])) by (type)`, - name: '{type}', - type: 'line' - } - ], - nullValue: TransformNullValue.AS_ZERO, - unit: 'short' - }, - { - title: 'Average Query Duration', - queries: [ - { - promql: - 'sum(rate(tidb_server_handle_query_duration_seconds_sum{sql_type!="internal"}[$__rate_interval])) / sum(rate(tidb_server_handle_query_duration_seconds_count{sql_type!="internal"}[$__rate_interval]))', - name: 'avg', - type: 'line' - }, - { - promql: - 'sum(rate(tidb_server_handle_query_duration_seconds_sum{sql_type!="internal"}[$__rate_interval])) by (sql_type) / sum(rate(tidb_server_handle_query_duration_seconds_count{sql_type!="internal"}[$__rate_interval])) by (sql_type)', - name: 'avg-{sql_type}', - type: 'line' - } - ], - nullValue: TransformNullValue.AS_ZERO, - unit: 's' - }, - { - title: 'Failed Queries', - queries: [ - { - promql: - 'sum(rate(tidb_server_execute_error_total[$__rate_interval])) by (type)', - name: '{type}', - type: 'line' - } - ], - nullValue: TransformNullValue.AS_ZERO, - unit: 'short' - }, - { - title: 'Transaction Per Second', - queries: [ - { - promql: - 'sum(rate(tidb_session_transaction_duration_seconds_count[$__rate_interval]))', - name: 'total', - type: 'line' - }, - { - promql: - 'sum(rate(tidb_session_transaction_duration_seconds_count[$__rate_interval])) by (type, txn_mode)', - name: '{type}-{txn_mode}', - type: 'line' - } - ], - nullValue: TransformNullValue.AS_ZERO, - unit: 'short' - }, - { - title: 'Average Transaction Duration', - queries: [ - { - promql: - 'sum(rate(tidb_session_transaction_duration_seconds_sum[$__rate_interval]))/ sum(rate(tidb_session_transaction_duration_seconds_count[$__rate_interval]))', - name: 'avg', - type: 'line' - }, - { - promql: - 'sum(rate(tidb_session_transaction_duration_seconds_sum[$__rate_interval])) by (txn_mode)/ sum(rate(tidb_session_transaction_duration_seconds_count[$__rate_interval])) by (txn_mode)', - name: 'avg-{txn_mode}', - type: 'line' - } - ], - unit: 's', - nullValue: TransformNullValue.AS_ZERO - }, - { - title: 'Connection Count', - queries: [ - { - promql: 'sum(tidb_server_connections)', - name: 'Total', - type: 'line' - }, - { - promql: 'sum(tidb_server_tokens)', - name: 'active connections', - type: 'line' - } - ], - unit: 'short', - nullValue: TransformNullValue.AS_ZERO - } - ] - } - ] - - return deployType === DeployType.Dedicated - ? monitoringItemsDedicated - : monitoringItemsServerless -} - -export { getMonitoringItems } diff --git a/ui/packages/tidb-dashboard-for-dbaas/src/apps/SQLAdvisor/context.ts b/ui/packages/tidb-dashboard-for-dbaas/src/apps/SQLAdvisor/context.ts deleted file mode 100644 index fdc742694f..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/src/apps/SQLAdvisor/context.ts +++ /dev/null @@ -1,90 +0,0 @@ -import { - ISQLAdvisorDataSource, - ISQLAdvisorContext -} from '@pingcap/tidb-dashboard-lib' - -import { IGlobalConfig } from '~/utils/global-config' -import client from '~/client' - -class DataSource implements ISQLAdvisorDataSource { - constructor(public globalConfig: IGlobalConfig) {} - - clusterInfo = this.globalConfig.clusterInfo - orgId = this.clusterInfo.orgId - clusterId = this.clusterInfo.clusterId - projectId = this.clusterInfo.projectId - performanceInsightBaseUrl = this.globalConfig.performanceInsightBaseUrl - - client = client.getAxiosInstance() - - tuningListGet(pageNumber?: number, pageSize?: number) { - return this.client - .get( - `${this.performanceInsightBaseUrl}/performance_insight/index_advisor/results?page=${pageNumber}&limit=${pageSize}` - ) - .then((res) => res.data) - } - - tuningDetailGet(id: number) { - return this.client - .get( - `${this.performanceInsightBaseUrl}/performance_insight/index_advisor/results/${id}` - ) - .then((res) => res.data) - } - - tuningLatestGet() { - return this.client - .get(`${this.performanceInsightBaseUrl}/performance_insight/tasks/latest`) - .then((res) => res.data) - } - - tuningTaskCreate() { - return this.client - .post(`${this.performanceInsightBaseUrl}/performance_insight/tasks`, {}) - .then((res) => res.data) - } - - tuningTaskCancel(id: number) { - return this.client - .delete( - `${this.performanceInsightBaseUrl}/performance_insight/tasks/${id}` - ) - .then((res) => res.data) - } - - activateDBConnection(params: { userName: string; password: string }) { - const { userName, password } = params - return this.client - .post( - `${this.performanceInsightBaseUrl}/performance_insight/tidb_connection`, - { user: userName, password } - ) - .then((res) => res.data) - } - - deactivateDBConnection() { - return this.client - .delete( - `${this.performanceInsightBaseUrl}/performance_insight/tidb_connection` - ) - .then((res) => res.data) - } - - checkDBConnection() { - return this.client - .get( - `${this.performanceInsightBaseUrl}/performance_insight/tidb_connection` - ) - .then((res) => res.data) - } -} - -export const ctx: (globalConfig: IGlobalConfig) => ISQLAdvisorContext = ( - globalConfig -) => ({ - ds: new DataSource(globalConfig), - orgId: globalConfig.clusterInfo.orgId, - clusterId: globalConfig.clusterInfo.clusterId, - registerUserDB: true -}) diff --git a/ui/packages/tidb-dashboard-for-dbaas/src/apps/SQLAdvisor/index.tsx b/ui/packages/tidb-dashboard-for-dbaas/src/apps/SQLAdvisor/index.tsx deleted file mode 100644 index 0417189149..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/src/apps/SQLAdvisor/index.tsx +++ /dev/null @@ -1,14 +0,0 @@ -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 ( - - - - ) -} diff --git a/ui/packages/tidb-dashboard-for-dbaas/src/apps/SQLAdvisor/meta.ts b/ui/packages/tidb-dashboard-for-dbaas/src/apps/SQLAdvisor/meta.ts deleted file mode 100644 index 931a4e734e..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/src/apps/SQLAdvisor/meta.ts +++ /dev/null @@ -1,5 +0,0 @@ -export default { - id: 'sql_advisor', - routerPrefix: '/sql_advisor', - reactRoot: () => import('.') -} diff --git a/ui/packages/tidb-dashboard-for-dbaas/src/apps/SlowQuery/context.ts b/ui/packages/tidb-dashboard-for-dbaas/src/apps/SlowQuery/context.ts deleted file mode 100644 index a6579151fe..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/src/apps/SlowQuery/context.ts +++ /dev/null @@ -1,80 +0,0 @@ -import { - ISlowQueryDataSource, - ISlowQueryContext, - ReqConfig -} from '@pingcap/tidb-dashboard-lib' - -import client from '~/client' - -class DataSource implements ISlowQueryDataSource { - infoListDatabases(options?: ReqConfig) { - return client.getInstance().infoListDatabases(options) - } - - slowQueryAvailableFieldsGet(options?: ReqConfig) { - return client.getInstance().slowQueryAvailableFieldsGet(options) - } - - slowQueryListGet( - beginTime?: number, - db?: Array, - desc?: boolean, - digest?: string, - endTime?: number, - fields?: string, - limit?: number, - orderBy?: string, - plans?: Array, - text?: string, - options?: ReqConfig - ) { - return client.getInstance().slowQueryListGet( - { - beginTime, - db, - desc, - digest, - endTime, - fields, - limit, - orderBy, - plans, - text - }, - options - ) - } - - slowQueryDetailGet( - connectId?: string, - digest?: string, - timestamp?: number, - options?: ReqConfig - ) { - return client.getInstance().slowQueryDetailGet( - { - connectId, - digest, - timestamp - }, - options - ) - } - - slowQueryDownloadTokenPost(request: any, options?: ReqConfig) { - return client.getInstance().slowQueryDownloadTokenPost({ request }, options) - } -} - -const ds = new DataSource() - -export const ctx: () => ISlowQueryContext = () => ({ - ds, - cfg: { - apiPathBase: client.getBasePath(), - enableExport: false, - showDBFilter: true, - showDigestFilter: false, - showHelp: false - } -}) diff --git a/ui/packages/tidb-dashboard-for-dbaas/src/apps/SlowQuery/index.tsx b/ui/packages/tidb-dashboard-for-dbaas/src/apps/SlowQuery/index.tsx deleted file mode 100644 index c89c49b410..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/src/apps/SlowQuery/index.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react' -import { SlowQueryApp, SlowQueryProvider } from '@pingcap/tidb-dashboard-lib' -import { ctx } from './context' - -export default function () { - return ( - - - - ) -} diff --git a/ui/packages/tidb-dashboard-for-dbaas/src/apps/Statement/context.ts b/ui/packages/tidb-dashboard-for-dbaas/src/apps/Statement/context.ts deleted file mode 100644 index b2000cd5b6..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/src/apps/Statement/context.ts +++ /dev/null @@ -1,175 +0,0 @@ -import { - IStatementDataSource, - IStatementContext, - ReqConfig -} from '@pingcap/tidb-dashboard-lib' - -import client, { - StatementEditableConfig, - StatementGetStatementsRequest -} from '~/client' - -class DataSource implements IStatementDataSource { - infoListDatabases(options?: ReqConfig) { - return client.getInstance().infoListDatabases(options) - } - - statementsAvailableFieldsGet(options?: ReqConfig) { - return client.getInstance().statementsAvailableFieldsGet(options) - } - - statementsConfigGet(options?: ReqConfig) { - return client.getInstance().statementsConfigGet(options) - } - - statementsConfigPost(request: StatementEditableConfig, options?: ReqConfig) { - return client.getInstance().statementsConfigPost({ request }, options) - } - - statementsDownloadGet(token: string, options?: ReqConfig) { - return client.getInstance().statementsDownloadGet({ token }, options) - } - - statementsDownloadTokenPost( - request: StatementGetStatementsRequest, - options?: ReqConfig - ) { - return client - .getInstance() - .statementsDownloadTokenPost({ request }, options) - } - - statementsListGet( - beginTime?: number, - endTime?: number, - fields?: string, - schemas?: Array, - stmtTypes?: Array, - text?: string, - options?: ReqConfig - ) { - return client.getInstance().statementsListGet( - { - beginTime, - endTime, - fields, - schemas, - stmtTypes, - text - }, - options - ) - } - - statementsPlanDetailGet( - beginTime?: number, - digest?: string, - endTime?: number, - plans?: Array, - schemaName?: string, - options?: ReqConfig - ) { - return client.getInstance().statementsPlanDetailGet( - { - beginTime, - digest, - endTime, - plans, - schemaName - }, - options - ) - } - - statementsPlansGet( - beginTime?: number, - digest?: string, - endTime?: number, - schemaName?: string, - options?: ReqConfig - ) { - return client.getInstance().statementsPlansGet( - { - beginTime, - digest, - endTime, - schemaName - }, - options - ) - } - - statementsStmtTypesGet(options?: ReqConfig) { - return client.getInstance().statementsStmtTypesGet(options) - } - - statementsTimeRangesGet(options?: ReqConfig) { - return client.getAxiosInstance().get('/statements/time_ranges', options) - } - - // slow query - slowQueryAvailableFieldsGet(options?: ReqConfig) { - return client.getInstance().slowQueryAvailableFieldsGet(options) - } - - slowQueryListGet( - beginTime?: number, - db?: Array, - desc?: boolean, - digest?: string, - endTime?: number, - fields?: string, - limit?: number, - orderBy?: string, - plans?: Array, - text?: string, - options?: ReqConfig - ) { - return client.getInstance().slowQueryListGet( - { - beginTime, - db, - desc, - digest, - endTime, - fields, - limit, - orderBy, - plans, - text - }, - options - ) - } - - slowQueryDetailGet( - connectId?: string, - digest?: string, - timestamp?: number, - options?: ReqConfig - ) { - return client.getInstance().slowQueryDetailGet( - { - connectId, - digest, - timestamp - }, - options - ) - } - - slowQueryDownloadTokenPost(request: any, options?: ReqConfig) { - return client.getInstance().slowQueryDownloadTokenPost({ request }, options) - } -} - -const ds = new DataSource() - -export const ctx: () => IStatementContext = () => ({ - ds, - cfg: { - apiPathBase: client.getBasePath(), - enableExport: false, - showHelp: false - } -}) diff --git a/ui/packages/tidb-dashboard-for-dbaas/src/apps/Statement/index.tsx b/ui/packages/tidb-dashboard-for-dbaas/src/apps/Statement/index.tsx deleted file mode 100644 index e1d4f7b805..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/src/apps/Statement/index.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react' -import { StatementApp, StatementProvider } from '@pingcap/tidb-dashboard-lib' -import { ctx } from './context' - -export default function () { - return ( - - - - ) -} diff --git a/ui/packages/tidb-dashboard-for-dbaas/src/apps/TopSQL/context.ts b/ui/packages/tidb-dashboard-for-dbaas/src/apps/TopSQL/context.ts deleted file mode 100644 index e21d7700fe..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/src/apps/TopSQL/context.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { - ITopSQLDataSource, - ITopSQLContext, - ReqConfig -} from '@pingcap/tidb-dashboard-lib' - -import client, { TopsqlEditableConfig } from '~/client' - -class DataSource implements ITopSQLDataSource { - topsqlConfigGet(options?: ReqConfig) { - return client.getInstance().topsqlConfigGet(options) - } - - topsqlConfigPost(request: TopsqlEditableConfig, options?: ReqConfig) { - return client.getInstance().topsqlConfigPost({ request }, options) - } - - topsqlInstancesGet(end?: string, start?: string, options?: ReqConfig) { - return client.getInstance().topsqlInstancesGet({ start, end }, options) - } - - topsqlSummaryGet( - end?: string, - instance?: string, - instanceType?: string, - start?: string, - top?: string, - window?: string, - options?: ReqConfig - ) { - return client.getInstance().topsqlSummaryGet( - { - end, - instance, - instanceType, - start, - top, - window - }, - options - ) - } -} - -const ds = new DataSource() - -export const ctx: () => ITopSQLContext = () => ({ - ds, - cfg: { - checkNgm: false, - showSetting: false - } -}) diff --git a/ui/packages/tidb-dashboard-for-dbaas/src/apps/TopSQL/index.tsx b/ui/packages/tidb-dashboard-for-dbaas/src/apps/TopSQL/index.tsx deleted file mode 100644 index b77d8969e4..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/src/apps/TopSQL/index.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react' -import { TopSQLApp, TopSQLProvider } from '@pingcap/tidb-dashboard-lib' -import { ctx } from './context' - -export default function () { - return ( - - - - ) -} diff --git a/ui/packages/tidb-dashboard-for-dbaas/src/client/index.tsx b/ui/packages/tidb-dashboard-for-dbaas/src/client/index.tsx deleted file mode 100755 index ac6ea29a87..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/src/client/index.tsx +++ /dev/null @@ -1,135 +0,0 @@ -import React from 'react' -import i18next from 'i18next' -import axios, { AxiosInstance } from 'axios' -import { message, Modal, notification } from 'antd' - -import { routing, i18n } from '@pingcap/tidb-dashboard-lib' -import { - Configuration, - DefaultApi as DashboardApi -} from '@pingcap/tidb-dashboard-client' - -import translations from './translations' - -export * from '@pingcap/tidb-dashboard-client' - -////////////////////////////// - -const client = { - _init( - apiBasePath: string, - apiInstance: DashboardApi, - axiosInstance: AxiosInstance - ) { - this.apiBasePath = apiBasePath - this.apiInstance = apiInstance - this.axiosInstance = axiosInstance - }, - - getInstance(): DashboardApi { - return this.apiInstance - }, - - getBasePath(): string { - return this.apiBasePath - }, - - getAxiosInstance(): AxiosInstance { - return this.axiosInstance - } -} - -export default client - -////////////////////////////// - -type HandleError = 'default' | 'custom' - -function applyErrorHandlerInterceptor(instance: AxiosInstance) { - instance.interceptors.response.use(undefined, async function (err) { - const { response, config } = err - const handleError = config.handleError as HandleError - const method = (config.method as string).toLowerCase() - - let errCode: string - let content: string - if (err.message === 'Network Error') { - errCode = 'common.network' - } else { - errCode = response?.data?.code - } - if (i18next.exists(`error.${errCode ?? ''}`)) { - // If there is a translation for the code, use the translation. - // TODO: Better to display error details somewhere. - content = i18next.t(`error.${errCode}`) - } else { - content = String( - response?.data?.message || err.message || 'Internal error' - ) - } - err.message = content - err.errCode = errCode - - if (errCode === 'common.unauthenticated') { - // Handle unauthorized error in a unified way - if (!routing.isLocationMatch('/') && !routing.isSignInPage()) { - message.error({ content, key: errCode }) - } - err.handled = true - } else if (handleError === 'default') { - if (method === 'get') { - const fullUrl = config.url as string - const API = fullUrl.replace(client.getBasePath(), '').split('?')[0] - notification.error({ - key: API, - message: i18next.t('error.title'), - description: ( - - API: {API} -
- {content} - - ) - }) - } else if (['post', 'put', 'delete', 'patch'].includes(method)) { - Modal.error({ - title: i18next.t('error.title'), - content: content, - zIndex: 2000 // higher than popover - }) - } - err.handled = true - } - - return Promise.reject(err) - }) -} - -function initAxios(apiBasePath: string, token: string) { - const instance = axios.create({ - baseURL: apiBasePath, - headers: { - Authorization: `Bearer ${token}` - } - }) - applyErrorHandlerInterceptor(instance) - - return instance -} - -export function setupClient(apiBasePath: string, token: string) { - i18n.addTranslations(translations) - - const axiosInstance = initAxios(apiBasePath, token) - const dashboardApi = new DashboardApi( - new Configuration({ - baseOptions: { - handleError: 'default' - } - }), - '', - axiosInstance - ) - - client._init(apiBasePath, dashboardApi, axiosInstance) -} diff --git a/ui/packages/tidb-dashboard-for-dbaas/src/client/translations/en.yaml b/ui/packages/tidb-dashboard-for-dbaas/src/client/translations/en.yaml deleted file mode 100755 index d4ec77c6c1..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/src/client/translations/en.yaml +++ /dev/null @@ -1,25 +0,0 @@ -error: - title: Error - common: - network: Network connection error - unauthenticated: Please sign in again (session is expired) - forbidden: The current user is not authorized to perform this action - api: - user: - signin: - invalid_code: Authorization Code is invalid or expired - insufficient_priv: The user does not have sufficient privileges to access {{distro.tidb}} Dashboard. - slow_query: - export_no_data: No slow queires can be exported - statement: - export_no_data: No statements can be exported - continuous_profiling: - ng_monitoring_not_ready: | - To use or learn more about "Continuous Profiling" feature, please search for "Continuous Profiling" in the {{distro.tidb}} official docs for more information. - If it doesn't resove the issue, please contact the product's technical support. - feature_not_supported: The cluster of this version doesn't support or can't use this feature, please contact with technical support to get more information. - tidb: - no_alive_tidb: No alive {{distro.tidb}} instance - pd_access_failed: Failed to access {{distro.pd}} node - tidb_conn_failed: Failed to connect to {{distro.tidb}} - tidb_auth_failed: '{{distro.tidb}} authentication failed' diff --git a/ui/packages/tidb-dashboard-for-dbaas/src/client/translations/index.ts b/ui/packages/tidb-dashboard-for-dbaas/src/client/translations/index.ts deleted file mode 100644 index a8c57746f6..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/src/client/translations/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -import zh from './zh.yaml' -import en from './en.yaml' - -export default { zh, en } diff --git a/ui/packages/tidb-dashboard-for-dbaas/src/client/translations/zh.yaml b/ui/packages/tidb-dashboard-for-dbaas/src/client/translations/zh.yaml deleted file mode 100755 index 4394e66f73..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/src/client/translations/zh.yaml +++ /dev/null @@ -1,25 +0,0 @@ -error: - title: 错误 - common: - network: 网络连接失败 - unauthenticated: 会话已过期，请重新登录 - forbidden: 当前用户没有权限进行该操作 - api: - user: - signin: - invalid_code: 授权码无效或已过期 - insufficient_priv: 该用户缺少足够的权限访问 {{distro.tidb}} Dashboard。 - slow_query: - export_no_data: 没有可导出的慢查询日志 - statement: - export_no_data: 没有可导出的语句 - continuous_profiling: - ng_monitoring_not_ready: | - 想使用或深入了解“持续性能分析”功能，请在 {{distro.tidb}} 官方文档搜索“持续性能分析”查看更多内容。 - 若未能解决问题，请联系本产品技术支持。 - feature_not_supported: 当前版本的集群不支持或无法使用该功能，请联系技术支持了解详细情况。 - tidb: - no_alive_tidb: 没有正在运行的 {{distro.tidb}} 实例 - pd_access_failed: 无法访问 {{distro.pd}} 节点 - tidb_conn_failed: 无法连接到 {{distro.tidb}} - tidb_auth_failed: '{{distro.tidb}} 登录验证失败' diff --git a/ui/packages/tidb-dashboard-for-dbaas/src/index.tsx b/ui/packages/tidb-dashboard-for-dbaas/src/index.tsx deleted file mode 100644 index 5147c7b0db..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/src/index.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import i18next from 'i18next' -import React from 'react' -import ReactDOM from 'react-dom' - -import { telemetry, tz } from '@pingcap/tidb-dashboard-lib' -import { setupClient } from '~/client' -import { loadAppInfo, loadWhoAmI } from '~/utils/store' -import { GlobalConfigProvider, IGlobalConfig } from '~/utils/global-config' - -import App from './App' - -import './styles/style.less' -import '@pingcap/tidb-dashboard-lib/dist/index.css' -import './styles/override.less' - -function renderApp(globalConfig: IGlobalConfig) { - ReactDOM.render( - - - - - , - document.getElementById('root') - ) -} - -function trackRouteChange() { - let preRoute = '' - function handler(ev) { - const loc = ev.detail.location - if (loc.pathname !== preRoute) { - telemetry.trackRouteChange('#' + loc.pathname) - preRoute = loc.pathname - } - } - window.addEventListener('dashboard:route-change', handler) -} - -function start(globalConfig: IGlobalConfig) { - const { apiPathBase, apiToken, mixpanelUser, timezone } = globalConfig - - // i18n - i18next.changeLanguage('en') - // timezone - if (timezone !== null) { - tz.setTimeZone(timezone) - } - // api client - setupClient(apiPathBase, apiToken) - loadWhoAmI() - loadAppInfo() - - // telemetry - telemetry.init( - process.env.REACT_APP_MIXPANEL_HOST, - process.env.REACT_APP_MIXPANEL_TOKEN - ) - const { - clusterInfo: { orgId, tenantPlan, projectId, clusterId, deployType } - } = globalConfig - telemetry.enable( - `tidb-dashboard-for-dbaas-${process.env.REACT_APP_VERSION}`, - { - tenant_id: orgId, - tenant_plan: tenantPlan, - project_id: projectId, - cluster_id: clusterId, - deploy_type: deployType - } - ) - if (mixpanelUser) { - telemetry.identifyUser(mixpanelUser) - } - trackRouteChange() - - renderApp(globalConfig) -} - -export default start diff --git a/ui/packages/tidb-dashboard-for-dbaas/src/react-app-env.d.ts b/ui/packages/tidb-dashboard-for-dbaas/src/react-app-env.d.ts deleted file mode 100644 index df574819f3..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/src/react-app-env.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -declare module '*.yaml' { - const classes: { readonly [key: string]: string } - export default classes -} diff --git a/ui/packages/tidb-dashboard-for-dbaas/src/styles/override.less b/ui/packages/tidb-dashboard-for-dbaas/src/styles/override.less deleted file mode 100644 index e2babcb61f..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/src/styles/override.less +++ /dev/null @@ -1,9 +0,0 @@ -// reset ::selection pseudo element values -::selection { - color: currentColor; - background-color: #b3d6ff; -} - -html { - font-size: 14px; -} diff --git a/ui/packages/tidb-dashboard-for-dbaas/src/styles/style.less b/ui/packages/tidb-dashboard-for-dbaas/src/styles/style.less deleted file mode 100644 index 069c20fe55..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/src/styles/style.less +++ /dev/null @@ -1,4 +0,0 @@ -@root-entry-name: default; - -@import 'antd/lib/style/components.less'; -// it is expected to import 'antd/es/style/components.less' but it doesn't exist this file diff --git a/ui/packages/tidb-dashboard-for-dbaas/src/utils/global-config.ts b/ui/packages/tidb-dashboard-for-dbaas/src/utils/global-config.ts deleted file mode 100644 index b7f3b0a9aa..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/src/utils/global-config.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { createContext } from 'react' - -export enum DeployType { - ServerlessTier = 'Serverless Tier', - Dedicated = 'Dedicated' -} - -export interface IGlobalConfig { - apiPathBase: string - apiToken: string - - mixpanelUser: string - timezone: number | null - promBaseUrl: string - performanceInsightBaseUrl: string - - expandMetricsData: boolean - enableNodeMetrics: boolean - - clusterInfo: { - orgId: string - tenantPlan: string // FREE_TRIAL / POC / ON_DEMAND - projectId: string - clusterId: string - deployType: DeployType - } -} - -export const GlobalConfigContext = createContext(null) -export const GlobalConfigProvider = GlobalConfigContext.Provider diff --git a/ui/packages/tidb-dashboard-for-dbaas/src/utils/store.ts b/ui/packages/tidb-dashboard-for-dbaas/src/utils/store.ts deleted file mode 100644 index 888f9b7ff3..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/src/utils/store.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { store, ReqConfig } from '@pingcap/tidb-dashboard-lib' -import client, { InfoInfoResponse } from '~/client' - -export async function loadWhoAmI(): Promise { - try { - const resp = await client.getInstance().infoWhoami({ - handleError: 'custom' - } as ReqConfig) - store.update((s) => { - s.whoAmI = resp.data - }) - return true - } catch (ex) { - store.update((s) => { - s.whoAmI = undefined - }) - return false - } -} - -export async function loadAppInfo(): Promise { - const resp = await client.getInstance().infoGet({ - handleError: 'custom' - } as ReqConfig) - store.update((s) => { - s.appInfo = resp.data - }) - return resp.data -} diff --git a/ui/packages/tidb-dashboard-for-dbaas/tsconfig.json b/ui/packages/tidb-dashboard-for-dbaas/tsconfig.json deleted file mode 100644 index e3039408e7..0000000000 --- a/ui/packages/tidb-dashboard-for-dbaas/tsconfig.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "extends": "../../tsconfig.json", - "compilerOptions": { - "noEmit": true, - "noImplicitAny": false, - "noImplicitThis": false, - "baseUrl": ".", - "paths": { - "~/*": ["src/*"] - } - }, - "include": ["src"] -} diff --git a/ui/pnpm-lock.yaml b/ui/pnpm-lock.yaml index 4690b5c9c4..d079796431 100644 --- a/ui/pnpm-lock.yaml +++ b/ui/pnpm-lock.yaml @@ -328,91 +328,6 @@ importers: specifier: ^4.7.3 version: 4.7.4 - packages/tidb-dashboard-for-dbaas: - dependencies: - '@pingcap/tidb-dashboard-client': - specifier: workspace:^1.0.0 - version: link:../tidb-dashboard-client - '@pingcap/tidb-dashboard-lib': - specifier: workspace:^1.0.0 - version: link:../tidb-dashboard-lib - antd: - specifier: ^4.18.7 - version: 4.21.7(react-dom@17.0.2)(react@17.0.2) - axios: - specifier: ^1.6.2 - version: 1.6.2 - compare-versions: - specifier: ^5.0.1 - version: 5.0.1 - i18next: - specifier: ^23.2.9 - version: 23.2.9 - react: - specifier: ^17.0.2 - version: 17.0.2 - react-dom: - specifier: ^17.0.2 - version: 17.0.2(react@17.0.2) - react-router-dom: - specifier: '6' - version: 6.3.0(react-dom@17.0.2)(react@17.0.2) - devDependencies: - '@types/node': - specifier: ^16.9.1 - version: 16.11.45 - autoprefixer: - specifier: ^10.4.2 - version: 10.4.7(postcss@8.4.14) - chalk: - specifier: 4.1.2 - version: 4.1.2 - chokidar: - specifier: ^3.5.2 - version: 3.5.3 - dotenv: - specifier: ^16.0.1 - version: 16.0.1 - esbuild: - specifier: ^0.14.23 - version: 0.14.49 - esbuild-plugin-svgr: - specifier: ^1.0.0 - version: 1.0.1 - esbuild-plugin-yaml: - specifier: ^0.0.1 - version: 0.0.1 - eslint-watch: - specifier: ^8.0.0 - version: 8.0.0(eslint@8.20.0) - esm: - specifier: ^3.2.25 - version: 3.2.25 - fs-extra: - specifier: ^10.0.0 - version: 10.1.0 - glob: - specifier: ^8.0.3 - version: 8.0.3 - gulp: - specifier: ^4.0.2 - version: 4.0.2 - gulp-shell: - specifier: ^0.8.0 - version: 0.8.0 - live-server: - specifier: ^1.2.1 - version: 1.2.2 - md5-file: - specifier: ^5.0.0 - version: 5.0.0 - rimraf: - specifier: ^3.0.2 - version: 3.0.2 - typescript: - specifier: ^4.7.3 - version: 4.7.4 - packages/tidb-dashboard-for-op: dependencies: '@ant-design/icons': @@ -6576,6 +6491,7 @@ packages: /abab@2.0.6: resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==} + deprecated: Use your platform's native atob() and btoa() methods instead dev: true /abort-controller@3.0.0: