Release v2020.08.03.1 (#714)

* ui: Add storybook (#691)
* build(deps): bump lodash from 4.17.15 to 4.17.19 in /ui/tests (#695)
* ui: I18N for form validation (#698)
* build(deps): bump lodash from 4.17.15 to 4.17.19 in /ui (#696)
* telemetry: Report dashboard internal version (#709)
* telemetry: Update router style (#707)
*: update system report table name (#693)
* build(deps): bump elliptic from 6.5.2 to 6.5.3 in /ui (#712)

CONTRIBUTING.md

@@ -26,9 +26,9 @@ curl --proto '=https' --tlsv1.2 -sSf https://tiup-mirrors.pingcap.com/install.sh
 
 Declare the global environment variable:
 
-   > **Note:**
-   >
-   > After the installation, TiUP displays the absolute path of the corresponding `profile` file. You need to modify the following `source` command according to the path.
+> **Note:**
+>
+> After the installation, TiUP displays the absolute path of the corresponding `profile` file. You need to modify the following `source` command according to the path.
 
 ```bash
 source ~/.bash_profile
@@ -162,6 +162,17 @@ yarn
 yarn test
 ```
 
+### Step 5. Run Storybook Playground (optional)
+
+After finishing the above steps, we can run the storybook playground by following commands:
+
+```bash
+cd ui
+yarn storybook
+```
+
+You can add more stories for your components to the playground.
+
 ## Contribution flow
 
 This is a rough outline of what a contributor's workflow looks like:

pkg/apiserver/diagnose/report.go

@@ -367,6 +367,7 @@ func GetTotalTimeConsumeTable(startTime, endTime string, db *gorm.DB) (TableDef,
 		{name: "tidb_cop", tbl: "tidb_cop", labels: []string{"instance"}},
 		{name: "tidb_transaction", tbl: "tidb_transaction", labels: []string{"sql_type"}},
 		{name: "tidb_transaction_local_latch_wait", tbl: "tidb_transaction_local_latch_wait", labels: []string{"instance"}},
+		{name: "tidb_txn_cmd", tbl: "tidb_txn_cmd", labels: []string{"type"}},
 		{name: "tidb_kv_backoff", tbl: "tidb_kv_backoff", labels: []string{"type"}},
 		{name: "tidb_kv_request", tbl: "tidb_kv_request", labels: []string{"type"}},
 		{name: "tidb_slow_query", tbl: "tidb_slow_query", labels: []string{"instance"}},
@@ -386,6 +387,7 @@ func GetTotalTimeConsumeTable(startTime, endTime string, db *gorm.DB) (TableDef,
 		{name: "tidb_gc_push_task", tbl: "tidb_gc_push_task", labels: []string{"type"}},
 		{name: "tidb_batch_client_unavailable", tbl: "tidb_batch_client_unavailable", labels: []string{"instance"}},
 		{name: "tidb_batch_client_wait", tbl: "tidb_batch_client_wait", labels: []string{"instance"}},
+		{name: "tidb_batch_client_wait_conn", tbl: "tidb_batch_client_wait_conn", labels: []string{"instance"}},
 		// PD
 		{name: "pd_tso_rpc", tbl: "pd_tso_rpc", labels: []string{"instance"}},
 		{name: "pd_tso_wait", tbl: "pd_tso_wait", labels: []string{"instance"}},
@@ -399,19 +401,20 @@ func GetTotalTimeConsumeTable(startTime, endTime string, db *gorm.DB) (TableDef,
 		{name: "etcd_wal_fsync", tbl: "etcd_wal_fsync", labels: []string{"instance"}},
 		{name: "pd_peer_round_trip", tbl: "pd_peer_round_trip", labels: []string{"To"}},
 		// TiKV
-		{name: "tikv_grpc_messge", tbl: "tikv_grpc_messge", labels: []string{"type"}},
+		{name: "tikv_grpc_message", tbl: "tikv_grpc_message", labels: []string{"type"}},
 		{name: "tikv_cop_request", tbl: "tikv_cop_request", labels: []string{"req"}},
 		{name: "tikv_cop_handle", tbl: "tikv_cop_handle", labels: []string{"req"}},
 		{name: "tikv_cop_wait", tbl: "tikv_cop_wait", labels: []string{"req"}},
 		{name: "tikv_scheduler_command", tbl: "tikv_scheduler_command", labels: []string{"type"}},
 		{name: "tikv_scheduler_latch_wait", tbl: "tikv_scheduler_latch_wait", labels: []string{"type"}},
 		{name: "tikv_storage_async_request", tbl: "tikv_storage_async_request", labels: []string{"type"}},
-		{name: "tikv_raft_propose_wait", tbl: "tikv_propose_wait", labels: []string{"instance"}},
-		{name: "tikv_raft_process", tbl: "tikv_process", labels: []string{"type"}},
-		{name: "tikv_raft_append_log", tbl: "tikv_append_log", labels: []string{"instance"}},
-		{name: "tikv_raft_commit_log", tbl: "tikv_commit_log", labels: []string{"instance"}},
-		{name: "tikv_raft_apply_wait", tbl: "tikv_apply_wait", labels: []string{"instance"}},
-		{name: "tikv_raft_apply_log", tbl: "tikv_apply_log", labels: []string{"instance"}},
+		{name: "tikv_scheduler_processing_read", tbl: "tikv_scheduler_processing_read", labels: []string{"type"}},
+		{name: "tikv_raft_propose_wait", tbl: "tikv_raftstore_propose_wait", labels: []string{"instance"}},
+		{name: "tikv_raft_process", tbl: "tikv_raftstore_process", labels: []string{"type"}},
+		{name: "tikv_raft_append_log", tbl: "tikv_raftstore_append_log", labels: []string{"instance"}},
+		{name: "tikv_raft_commit_log", tbl: "tikv_raftstore_commit_log", labels: []string{"instance"}},
+		{name: "tikv_raft_apply_wait", tbl: "tikv_raftstore_apply_wait", labels: []string{"instance"}},
+		{name: "tikv_raft_apply_log", tbl: "tikv_raftstore_apply_log", labels: []string{"instance"}},
 		{name: "tikv_raft_store_events", tbl: "tikv_raft_store_events", labels: []string{"type"}},
 		{name: "tikv_handle_snapshot", tbl: "tikv_handle_snapshot", labels: []string{"type"}},
 		{name: "tikv_send_snapshot", tbl: "tikv_send_snapshot", labels: []string{"instance"}},
@@ -534,6 +537,7 @@ func GetTiDBTimeConsumeTable(startTime, endTime string, db *gorm.DB) (TableDef,
 		{name: "tidb_gc_push_task", tbl: "tidb_gc_push_task", labels: []string{"instance", "type"}},
 		{name: "tidb_batch_client_unavailable", tbl: "tidb_batch_client_unavailable", labels: []string{"instance"}},
 		{name: "tidb_batch_client_wait", tbl: "tidb_batch_client_wait", labels: []string{"instance"}},
+		{name: "tidb_batch_client_wait_conn", tbl: "tidb_batch_client_wait_conn", labels: []string{"instance"}},
 		{name: "pd_tso_rpc", tbl: "pd_tso_rpc", labels: []string{"instance"}},
 		{name: "pd_tso_wait", tbl: "pd_tso_wait", labels: []string{"instance"}},
 	}
@@ -1113,19 +1117,20 @@ func GetTiKVStoreInfo(startTime, endTime string, db *gorm.DB) (TableDef, error)
 
 func GetTiKVTotalTimeConsumeTable(startTime, endTime string, db *gorm.DB) (TableDef, error) {
 	defs1 := []totalTimeByLabelsTableDef{
-		{name: "tikv_grpc_messge", tbl: "tikv_grpc_messge", labels: []string{"instance", "type"}},
+		{name: "tikv_grpc_message", tbl: "tikv_grpc_message", labels: []string{"instance", "type"}},
 		{name: "tikv_cop_request", tbl: "tikv_cop_request", labels: []string{"instance", "req"}},
 		{name: "tikv_cop_handle", tbl: "tikv_cop_handle", labels: []string{"instance", "req"}},
 		{name: "tikv_cop_wait", tbl: "tikv_cop_wait", labels: []string{"instance", "req"}},
 		{name: "tikv_scheduler_command", tbl: "tikv_scheduler_command", labels: []string{"instance", "type"}},
 		{name: "tikv_scheduler_latch_wait", tbl: "tikv_scheduler_latch_wait", labels: []string{"instance", "type"}},
 		{name: "tikv_storage_async_request", tbl: "tikv_storage_async_request", labels: []string{"instance", "type"}},
-		{name: "tikv_raft_propose_wait", tbl: "tikv_propose_wait", labels: []string{"instance"}},
-		{name: "tikv_raft_process", tbl: "tikv_process", labels: []string{"instance", "type"}},
-		{name: "tikv_raft_append_log", tbl: "tikv_append_log", labels: []string{"instance"}},
-		{name: "tikv_raft_commit_log", tbl: "tikv_commit_log", labels: []string{"instance"}},
-		{name: "tikv_raft_apply_wait", tbl: "tikv_apply_wait", labels: []string{"instance"}},
-		{name: "tikv_raft_apply_log", tbl: "tikv_apply_log", labels: []string{"instance"}},
+		{name: "tikv_scheduler_processing_read", tbl: "tikv_scheduler_processing_read", labels: []string{"type"}},
+		{name: "tikv_raft_propose_wait", tbl: "tikv_raftstore_propose_wait", labels: []string{"instance"}},
+		{name: "tikv_raft_process", tbl: "tikv_raftstore_process", labels: []string{"instance", "type"}},
+		{name: "tikv_raft_append_log", tbl: "tikv_raftstore_append_log", labels: []string{"instance"}},
+		{name: "tikv_raft_commit_log", tbl: "tikv_raftstore_commit_log", labels: []string{"instance"}},
+		{name: "tikv_raft_apply_wait", tbl: "tikv_raftstore_apply_wait", labels: []string{"instance"}},
+		{name: "tikv_raft_apply_log", tbl: "tikv_raftstore_apply_log", labels: []string{"instance"}},
 		{name: "tikv_raft_store_events", tbl: "tikv_raft_store_events", labels: []string{"instance", "type"}},
 		{name: "tikv_handle_snapshot", tbl: "tikv_handle_snapshot", labels: []string{"instance", "type"}},
 		{name: "tikv_send_snapshot", tbl: "tikv_send_snapshot", labels: []string{"instance"}},

release-version

@@ -1,3 +1,3 @@
 # This file specifies the TiDB Dashboard internal version, which will be printed in `--version`
 # and UI. In release branch, changing this file will result in publishing a new version and tag.
-2020.07.15.1
+2020.08.03.1

ui/.storybook/main.js

@@ -0,0 +1,39 @@
+const path = require('path')
+
+function includeMorePaths(config) {
+  // find rule to handle *.tsx files
+  for (const rule of config.module.rules) {
+    for (const subRule of rule.oneOf || []) {
+      // /\.(js|mjs|jsx|ts|tsx)$/
+      if (subRule.test instanceof RegExp && subRule.test.test('.tsx')) {
+        subRule.include.push(path.resolve(__dirname, '../lib'))
+        // although we don't care about the components inside diagnoseReportApp
+        // but it can't pass compile if we don't add it to the rule.include
+        subRule.include.push(path.resolve(__dirname, '../diagnoseReportApp'))
+        break
+      }
+    }
+  }
+
+  return config
+}
+
+// ref: https://harrietryder.co.uk/blog/storybook-with-typscript-customize-cra/
+const custom = require('../config-overrides')
+
+module.exports = {
+  stories: ['../lib/components/**/*.stories.@(ts|tsx|js|jsx)'],
+  addons: [
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+  ],
+  webpackFinal: (storybookConfig) => {
+    const customConfig = custom(storybookConfig)
+    const newConfigs = {
+      ...storybookConfig,
+      module: { ...storybookConfig.module, rules: customConfig.module.rules },
+    }
+    return includeMorePaths(newConfigs)
+  },
+}

ui/.storybook/preview.js

@@ -0,0 +1,24 @@
+import React, { useEffect } from 'react'
+import { addDecorator } from '@storybook/react'
+import { Root } from '@lib/components'
+import client from '@lib/client'
+import * as apiClient from '@lib/utils/apiClient'
+import * as auth from '@lib/utils/auth'
+
+function StoryRoot({ children }) {
+  useEffect(() => {
+    apiClient.init()
+    client
+      .getInstance()
+      .userLoginPost({
+        username: 'root',
+        password: '',
+        is_tidb_auth: true,
+      })
+      .then((r) => auth.setAuthToken(r.data.token))
+  }, [])
+
+  return <Root>{children}</Root>
+}
+
+addDecorator((storyFn) => <StoryRoot>{storyFn()}</StoryRoot>)

ui/dashboardApp/index.ts

@@ -17,7 +17,6 @@ import LayoutRoot from '@dashboard/layout/root'
 import LayoutMain from '@dashboard/layout/main'
 import LayoutSignIn from '@dashboard/layout/signin'
 
-import AppDebugPlayground from '@lib/apps/DebugPlayground/index.meta'
 import AppUserProfile from '@lib/apps/UserProfile/index.meta'
 import AppOverview from '@lib/apps/Overview/index.meta'
 import AppKeyViz from '@lib/apps/KeyViz/index.meta'
@@ -92,7 +91,6 @@ async function main() {
   )
 
   registry
-    .register(AppDebugPlayground)
     .register(AppUserProfile)
     .register(AppOverview)
     .register(AppKeyViz)

ui/dashboardApp/layout/main/Sider/index.tsx

@@ -79,14 +79,7 @@ function Sider({
     </Menu.SubMenu>
   )
 
-  const debugOnlyMenuItems = [useAppMenuItem(registry, 'debug_playground')]
-
-  if (process.env.NODE_ENV !== 'development') {
-    debugOnlyMenuItems.length = 0
-  }
-
   const menuItems = [
-    ...debugOnlyMenuItems,
     useAppMenuItem(registry, 'overview'),
     useAppMenuItem(registry, 'cluster_info'),
     useAppMenuItem(registry, 'keyviz'),

ui/diagnoseReportApp/translations/en.yaml

@@ -191,7 +191,7 @@ diagnosis:
         pd_region_heartbeat: The time cost of heartbeats in each TiKV instance. The label is [address].
         etcd_wal_fsync: The time cost of etcd writing WAL into the persistent storage. The label is [instance].
         pd_peer_round_trip: The latency of the network. The label is [To].
-        tikv_grpc_messge: The time cost of TiKV handle of gRPC message. The label is [type].
+        tikv_grpc_message: The time cost of handling TiKV gRPC messages. The label is [type].
         tikv_cop_request: The time cost of Coprocessor handling read requests. The label is [req].
         tikv_cop_handle: The time cost of handling Coprocessor requests. The label is [req].
         tikv_cop_wait: The time cost of Coprocessor requests that wait for being handled. The label is [req].

ui/diagnoseReportApp/translations/zh.yaml

@@ -192,7 +192,7 @@ diagnosis:
         pd_region_heartbeat: 每个 TiKV 实例中心跳的耗时，标签是"服务地址"。
         etcd_wal_fsync: etcd 将 WAL 写入持久存储器的耗时，标签是"实例"。
         pd_peer_round_trip: 网络的延迟，标签是"实例"。
-        tikv_grpc_messge: gRPC 报文的 TiKV 句柄的耗时，标签是"类型"。
+        tikv_grpc_message: gRPC 报文的 TiKV 处理耗时，标签是"类型"。
         tikv_cop_request: Coprocessor 处理读请求的时间开销，标签是"请求"。
         tikv_cop_handle: 处理 Coprocessor 请求的时间开销，标签是"请求"。
         tikv_cop_wait: Coprocessor 请求等待处理的耗时，标签是"请求"。

ui/lib/apps/Diagnose/components/DiagnoseHistory.tsx

@@ -103,7 +103,7 @@ export default function DiagnoseHistory() {
 
   const handleRowClick = usePersistFn(
     (rec, _idx, ev: React.MouseEvent<HTMLElement>) => {
-      openLink(`/diagnose/${rec.id}`, ev, navigate)
+      openLink(`/diagnose/detail?id=${rec.id}`, ev, navigate)
     }
   )
 

ui/lib/apps/Diagnose/index.tsx

@@ -10,7 +10,7 @@ const App = () => (
       <Routes>
         <Route path="/diagnose" element={<DiagnoseGenerator />} />
         <Route
-          path="/diagnose/:id"
+          path="/diagnose/detail"
           element={
             <ParamsPageWrapper>
               <DiagnoseStatus />

ui/lib/apps/Diagnose/pages/DiagnoseStatus.tsx

@@ -1,17 +1,18 @@
 import { Button, Descriptions, Progress } from 'antd'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Link, useParams } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 import { ArrowLeftOutlined } from '@ant-design/icons'
 
 import client from '@lib/client'
 import publicPathPrefix from '@lib/utils/publicPathPrefix'
 import { AnimatedSkeleton, DateTime, Head } from '@lib/components'
 import { useClientRequestWithPolling } from '@lib/utils/useClientRequest'
+import useQueryParams from '@lib/utils/useQueryParams'
 
 function DiagnoseStatus() {
-  const { id } = useParams()
   const { t } = useTranslation()
+  const { id } = useQueryParams()
 
   const { data: report, isLoading } = useClientRequestWithPolling(
     (cancelToken) =>