From b880717724b4e70242d88bfca6abf04a4fcc0849 Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Tue, 18 Jan 2022 19:45:13 +0800
Subject: [PATCH 01/41] test: add use database filter and search function

---
 .../integration/slow_query/list.spec.js       | 118 ++++++++++++++++--
 ui/lib/apps/SlowQuery/pages/List/index.tsx    |   8 +-
 2 files changed, 114 insertions(+), 12 deletions(-)

diff --git a/ui/cypress/integration/slow_query/list.spec.js b/ui/cypress/integration/slow_query/list.spec.js
index 4674e5c414..2545ce58b2 100644
--- a/ui/cypress/integration/slow_query/list.spec.js
+++ b/ui/cypress/integration/slow_query/list.spec.js
@@ -1,6 +1,7 @@
 // Copyright 2021 PingCAP, Inc. Licensed under Apache-2.0.
 
 import dayjs from 'dayjs'
+import { describe } from 'mocha'
 
 describe('SlowQuery list page', () => {
   before(() => {
@@ -225,18 +226,113 @@ describe('SlowQuery list page', () => {
 
       it('Show all databases', () => {
         cy.request(options).as('databases')
+        let databaseList
 
-        cy.get('@databases').then((response) => {
-          const databaseList = response.body
-          cy.get('[data-e2e=base_select_input]')
-            .click()
-            .then(() => {
-              cy.get('[data-e2e=multi_select_options_label]').should(
-                'have.length',
-                databaseList.length
-              )
-            })
-        })
+        cy.get('@databases')
+          .then((response) => {
+            databaseList = response.body
+            cy.get('[data-e2e=base_select_input]')
+              .click()
+              .then(() => {
+                cy.get('[data-e2e=multi_select_options_label]').should(
+                  'have.length',
+                  databaseList.length
+                )
+              })
+          })
+          .then(() => {
+            // check configs after reload
+            cy.get('[data-e2e=multi_select_options_label]').should(
+              'have.length',
+              databaseList.length
+            )
+            console.log('databaseList', databaseList)
+          })
+      })
+
+      it('Run workload without use database', () => {
+        let queryData = {
+          query: 'SELECT sleep(0.5);',
+          database: '',
+        }
+        cy.task('queryDB', { ...queryData })
+
+        cy.reload()
+        // global and use database queries will be listed
+        cy.get('[data-automation-key=query]').should('has.length', 3)
+
+        cy.get('[data-e2e=base_select_input]')
+          .click()
+          .then(() => {
+            cy.get('.ms-DetailsHeader-checkTooltip')
+              .click()
+              .then(() => {
+                // global query will not be listed
+                cy.get('[data-automation-key=query]').should('has.length', 2)
+              })
+          })
+      })
+    })
+
+    describe('Search function', () => {
+      it('Default search text', () => {
+        cy.get('[data-e2e=slow_query_search]').should('be.empty')
+      })
+
+      it('Search item with space', () => {
+        cy.get('[data-e2e=slow_query_search]')
+          .type(' select sleep\\(1\\) {enter}')
+          .then(() => {
+            cy.get('[data-automation-key=query]').should('has.length', 1)
+          })
+
+        // clear search text
+        cy.get('[data-e2e=slow_query_search]')
+          .clear()
+          .type('{enter}')
+          .then(() => {
+            cy.get('[data-automation-key=query]').should('has.length', 3)
+          })
+      })
+
+      it('Type search without pressing enter then reload', () => {
+        cy.get('[data-e2e=slow_query_search]').type(' select sleep\\(1\\)')
+
+        cy.reload()
+        cy.get('[data-automation-key=query]').should('has.length', 3)
+      })
+    })
+
+    describe('Slow query list limitation', () => {
+      it('Default limit', () => {
+        cy.get('[data-e2e=slow_query_limit_select]').contains('100')
+      })
+
+      const limitOptions = ['100', '200', '500', '1000']
+
+      it('Check limit options', () => {
+        cy.get('[data-e2e=slow_query_limit_select]')
+          .click()
+          .then(() => {
+            cy.get('[data-e2e=slow_query_limit_option]')
+              .should('have.length', 4)
+              .each(($option, $idx) => {
+                cy.wrap($option).contains(limitOptions[$idx])
+              })
+          })
+      })
+
+      it('Check config remembered', () => {
+        cy.get('[data-e2e=slow_query_limit_select]')
+          .click()
+          .then(() => {
+            cy.get('[data-e2e=slow_query_limit_option]')
+              .eq(1)
+              .click()
+              .then(() => {
+                cy.get('[data-automation-key=query]').should('has.length', 3)
+              })
+          })
       })
     })
   })
diff --git a/ui/lib/apps/SlowQuery/pages/List/index.tsx b/ui/lib/apps/SlowQuery/pages/List/index.tsx
index 44c40c22e8..af7e6817c4 100644
--- a/ui/lib/apps/SlowQuery/pages/List/index.tsx
+++ b/ui/lib/apps/SlowQuery/pages/List/index.tsx
@@ -129,14 +129,20 @@ function List() {
               onSearch={(searchText) =>
                 setQueryOptions({ ...queryOptions, searchText })
               }
+              data-e2e="slow_query_search"
             />
             <Select
               value={queryOptions.limit}
               style={{ width: 150 }}
               onChange={(limit) => setQueryOptions({ ...queryOptions, limit })}
+              data-e2e="slow_query_limit_select"
             >
               {LIMITS.map((item) => (
-                <Option value={item} key={item}>
+                <Option
+                  value={item}
+                  key={item}
+                  data-e2e="slow_query_limit_option"
+                >
                   Limit {item}
                 </Option>
               ))}

From 24a17c5e9d9f9453b67b908555d216ca1fddc20d Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Tue, 18 Jan 2022 20:04:02 +0800
Subject: [PATCH 02/41] test: add select columns test

---
 ui/cypress/integration/slow_query/list.spec.js | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/ui/cypress/integration/slow_query/list.spec.js b/ui/cypress/integration/slow_query/list.spec.js
index 2545ce58b2..3a61a216e4 100644
--- a/ui/cypress/integration/slow_query/list.spec.js
+++ b/ui/cypress/integration/slow_query/list.spec.js
@@ -1,7 +1,6 @@
 // Copyright 2021 PingCAP, Inc. Licensed under Apache-2.0.
 
 import dayjs from 'dayjs'
-import { describe } from 'mocha'
 
 describe('SlowQuery list page', () => {
   before(() => {
@@ -335,5 +334,17 @@ describe('SlowQuery list page', () => {
           })
       })
     })
+
+    describe('Selected Columns', () => {
+      const defaultColumns = ['Query', 'Finish Time', 'Latency']
+      it('Default selected columns', () => {
+        cy.get('[role=columnheader]')
+          .should('have.length', 4)
+          .each(($column, $idx) => {
+            console.log('de', defaultColumns[$idx])
+            cy.wrap($column).contains(defaultColumns[$idx])
+          })
+      })
+    })
   })
 })

From af0f0f01effaf41a9b1d87d722d31b2db5e1ecfe Mon Sep 17 00:00:00 2001
From: Suhaha <jklopsdfw@gmail.com>
Date: Thu, 20 Jan 2022 16:29:58 +0800
Subject: [PATCH 03/41] fix: missing fields in slowquery

---
 pkg/apiserver/slowquery/model.go              | 25 +++++++++++-------
 pkg/apiserver/slowquery/queries.go            | 12 ++++++---
 pkg/apiserver/slowquery/service.go            | 15 ++++++-----
 pkg/apiserver/statement/models.go             | 26 ++++++++++++-------
 pkg/apiserver/statement/service.go            | 20 +++++++++-----
 .../slowquery/compatibility_test.go           |  4 +--
 .../apps/SlowQuery/utils/useSchemaColumns.ts  |  2 +-
 .../apps/Statement/utils/useSchemaColumns.ts  |  2 +-
 8 files changed, 67 insertions(+), 39 deletions(-)

diff --git a/pkg/apiserver/slowquery/model.go b/pkg/apiserver/slowquery/model.go
index e98980c222..dff9cea9b3 100644
--- a/pkg/apiserver/slowquery/model.go
+++ b/pkg/apiserver/slowquery/model.go
@@ -3,7 +3,7 @@
 package slowquery
 
 import (
-	"github.com/thoas/go-funk"
+	"strings"
 
 	"github.com/pingcap/tidb-dashboard/pkg/apiserver/utils"
 	"github.com/pingcap/tidb-dashboard/util/reflectutil"
@@ -112,12 +112,19 @@ func getFieldsAndTags() (slowQueryFields []Field) {
 	return
 }
 
-func getVirtualFields() []string {
-	fields := getFieldsAndTags()
-	vFields := funk.Filter(fields, func(f Field) bool {
-		return f.Projection != ""
-	}).([]Field)
-	return funk.Map(vFields, func(f Field) string {
-		return f.ColumnName
-	}).([]string)
+func filterFieldsByColumns(fields []Field, columns []string) []Field {
+	colMap := map[string]struct{}{}
+	for _, c := range columns {
+		colMap[strings.ToLower(c)] = struct{}{}
+	}
+
+	filteredFields := []Field{}
+	for _, f := range fields {
+		_, ok := colMap[strings.ToLower(f.ColumnName)]
+		if ok || (f.Projection != "") {
+			filteredFields = append(filteredFields, f)
+		}
+	}
+
+	return filteredFields
 }
diff --git a/pkg/apiserver/slowquery/queries.go b/pkg/apiserver/slowquery/queries.go
index 8958233d93..8b7149573d 100644
--- a/pkg/apiserver/slowquery/queries.go
+++ b/pkg/apiserver/slowquery/queries.go
@@ -5,7 +5,6 @@ package slowquery
 import (
 	"strings"
 
-	"github.com/thoas/go-funk"
 	"gorm.io/gorm"
 
 	"github.com/pingcap/tidb-dashboard/pkg/utils"
@@ -121,10 +120,17 @@ func QuerySlowLogDetail(req *GetDetailRequest, db *gorm.DB) (*Model, error) {
 	return &result, nil
 }
 
-func QueryTableColumns(sysSchema *utils.SysSchema, db *gorm.DB) ([]string, error) {
+func GetAvailableFields(sysSchema *utils.SysSchema, db *gorm.DB) ([]string, error) {
 	cs, err := sysSchema.GetTableColumnNames(db, SlowQueryTable)
 	if err != nil {
 		return nil, err
 	}
-	return funk.UniqString(append(cs, getVirtualFields()...)), nil
+
+	fields := filterFieldsByColumns(getFieldsAndTags(), cs)
+	jsonNames := []string{}
+	for _, f := range fields {
+		jsonNames = append(jsonNames, f.JSONName)
+	}
+
+	return jsonNames, nil
 }
diff --git a/pkg/apiserver/slowquery/service.go b/pkg/apiserver/slowquery/service.go
index fc868c23cf..3403078bb5 100644
--- a/pkg/apiserver/slowquery/service.go
+++ b/pkg/apiserver/slowquery/service.go
@@ -51,7 +51,7 @@ func registerRouter(r *gin.RouterGroup, auth *user.AuthService, s *Service) {
 
 			endpoint.POST("/download/token", s.downloadTokenHandler)
 
-			endpoint.GET("/table_columns", s.queryTableColumns)
+			endpoint.GET("/available_fields", s.getAvailableFields)
 		}
 	}
 }
@@ -165,19 +165,20 @@ func (s *Service) downloadHandler(c *gin.Context) {
 	utils.DownloadByToken(token, "slowquery/download", c)
 }
 
-// @Summary Query table columns
-// @Description Query slowquery table columns
+// @Summary Get available field names
+// @Description Get available field names by slowquery table columns
 // @Success 200 {array} string
 // @Failure 400 {object} rest.ErrorResponse
 // @Failure 401 {object} rest.ErrorResponse
 // @Security JwtAuth
-// @Router /slow_query/table_columns [get]
-func (s *Service) queryTableColumns(c *gin.Context) {
+// @Router /slow_query/available_fields [get]
+func (s *Service) getAvailableFields(c *gin.Context) {
 	db := utils.GetTiDBConnection(c)
-	cs, err := QueryTableColumns(s.params.SysSchema, db)
+	jsonNames, err := GetAvailableFields(s.params.SysSchema, db)
 	if err != nil {
 		_ = c.Error(err)
 		return
 	}
-	c.JSON(http.StatusOK, cs)
+
+	c.JSON(http.StatusOK, jsonNames)
 }
diff --git a/pkg/apiserver/statement/models.go b/pkg/apiserver/statement/models.go
index 5b71416695..48778fd7a6 100644
--- a/pkg/apiserver/statement/models.go
+++ b/pkg/apiserver/statement/models.go
@@ -5,7 +5,6 @@ package statement
 import (
 	"strings"
 
-	"github.com/thoas/go-funk"
 	"gorm.io/gorm"
 	"gorm.io/gorm/schema"
 
@@ -156,12 +155,21 @@ func getFieldsAndTags() (stmtFields []Field) {
 	return
 }
 
-func getVirtualFields(tableFields []string) []string {
-	fields := getFieldsAndTags()
-	vFields := funk.Filter(fields, func(f Field) bool {
-		return len(f.Related) != 0 && utils.IsSubsets(tableFields, f.Related)
-	}).([]Field)
-	return funk.Map(vFields, func(f Field) string {
-		return f.JSONName
-	}).([]string)
+func filterFieldsByColumns(fields []Field, columns []string) []Field {
+	colMap := map[string]struct{}{}
+	for _, c := range columns {
+		colMap[strings.ToLower(c)] = struct{}{}
+	}
+
+	filteredFields := []Field{}
+	for _, f := range fields {
+		// The json name of Statement is currently exactly the same as the table column name
+		// TODO: use util.VirtualView instead of the convention in the comment
+		_, ok := colMap[strings.ToLower(f.JSONName)]
+		if ok || (len(f.Related) != 0 && utils.IsSubsets(columns, f.Related)) {
+			filteredFields = append(filteredFields, f)
+		}
+	}
+
+	return filteredFields
 }
diff --git a/pkg/apiserver/statement/service.go b/pkg/apiserver/statement/service.go
index d939d3b8f6..dba9ee9066 100644
--- a/pkg/apiserver/statement/service.go
+++ b/pkg/apiserver/statement/service.go
@@ -10,7 +10,6 @@ import (
 
 	"github.com/gin-gonic/gin"
 	"github.com/joomcode/errorx"
-	"github.com/thoas/go-funk"
 	"go.uber.org/fx"
 
 	"github.com/pingcap/tidb-dashboard/pkg/apiserver/user"
@@ -57,7 +56,7 @@ func registerRouter(r *gin.RouterGroup, auth *user.AuthService, s *Service) {
 
 			endpoint.POST("/download/token", s.downloadTokenHandler)
 
-			endpoint.GET("/table_columns", s.queryTableColumns)
+			endpoint.GET("/available_fields", s.getAvailableFields)
 		}
 	}
 }
@@ -309,18 +308,25 @@ func (s *Service) downloadHandler(c *gin.Context) {
 	utils.DownloadByToken(token, "statements/download", c)
 }
 
-// @Summary Query table columns
-// @Description Query statements table columns
+// @Summary Get available field names
+// @Description Get available field names by statements table columns
 // @Success 200 {array} string
 // @Failure 401 {object} rest.ErrorResponse
 // @Security JwtAuth
-// @Router /statements/table_columns [get]
-func (s *Service) queryTableColumns(c *gin.Context) {
+// @Router /statements/available_fields [get]
+func (s *Service) getAvailableFields(c *gin.Context) {
 	db := utils.GetTiDBConnection(c)
 	cs, err := s.params.SysSchema.GetTableColumnNames(db, statementsTable)
 	if err != nil {
 		_ = c.Error(err)
 		return
 	}
-	c.JSON(http.StatusOK, funk.UniqString(append(cs, getVirtualFields(cs)...)))
+
+	fields := filterFieldsByColumns(getFieldsAndTags(), cs)
+	jsonNames := []string{}
+	for _, f := range fields {
+		jsonNames = append(jsonNames, f.JSONName)
+	}
+
+	c.JSON(http.StatusOK, jsonNames)
 }
diff --git a/tests/integration/slowquery/compatibility_test.go b/tests/integration/slowquery/compatibility_test.go
index 9dad95dc82..3b46df5a07 100644
--- a/tests/integration/slowquery/compatibility_test.go
+++ b/tests/integration/slowquery/compatibility_test.go
@@ -107,7 +107,7 @@ func (s *testCompatibilitySuite) TestFieldsCompatibility() {
 
 func (s *testCompatibilitySuite) TestQueryTableColumns() {
 	if util.CheckTiDBVersion(s.Require(), "< 5.0.0") {
-		cls, err := slowquery.QueryTableColumns(s.sysSchema, s.dbSession())
+		cls, err := slowquery.GetAvailableFields(s.sysSchema, s.dbSession())
 		s.Require().NoError(err)
 		s.Require().NotContains(cls, "Rocksdb_delete_skipped_count")
 		s.Require().NotContains(cls, "Rocksdb_key_skipped_count")
@@ -117,7 +117,7 @@ func (s *testCompatibilitySuite) TestQueryTableColumns() {
 	}
 
 	if util.CheckTiDBVersion(s.Require(), ">= 5.0.0") {
-		cls, err := slowquery.QueryTableColumns(s.sysSchema, s.dbSession())
+		cls, err := slowquery.GetAvailableFields(s.sysSchema, s.dbSession())
 		s.Require().NoError(err)
 		s.Require().Contains(cls, "Rocksdb_delete_skipped_count")
 		s.Require().Contains(cls, "Rocksdb_key_skipped_count")
diff --git a/ui/lib/apps/SlowQuery/utils/useSchemaColumns.ts b/ui/lib/apps/SlowQuery/utils/useSchemaColumns.ts
index ab61e0296f..abbf44343d 100644
--- a/ui/lib/apps/SlowQuery/utils/useSchemaColumns.ts
+++ b/ui/lib/apps/SlowQuery/utils/useSchemaColumns.ts
@@ -6,7 +6,7 @@ import { useClientRequest } from '@lib/utils/useClientRequest'
 export const useSchemaColumns = () => {
   const [schemaColumns, setSchemaColumns] = useState<string[]>([])
   const { data, isLoading } = useClientRequest((options) => {
-    return client.getInstance().slowQueryTableColumnsGet(options)
+    return client.getInstance().slowQueryAvailableFieldsGet(options)
   })
 
   useEffect(() => {
diff --git a/ui/lib/apps/Statement/utils/useSchemaColumns.ts b/ui/lib/apps/Statement/utils/useSchemaColumns.ts
index 67a0317f4b..142f2e38d4 100644
--- a/ui/lib/apps/Statement/utils/useSchemaColumns.ts
+++ b/ui/lib/apps/Statement/utils/useSchemaColumns.ts
@@ -6,7 +6,7 @@ import { useClientRequest } from '@lib/utils/useClientRequest'
 export const useSchemaColumns = () => {
   const [schemaColumns, setSchemaColumns] = useState<string[]>([])
   const { data, isLoading } = useClientRequest((options) => {
-    return client.getInstance().statementsTableColumnsGet(options)
+    return client.getInstance().statementsAvailableFieldsGet(options)
   })
 
   useEffect(() => {

From bc2667432930d15a5295d3e7de9cc4c058089b44 Mon Sep 17 00:00:00 2001
From: Suhaha <jklopsdfw@gmail.com>
Date: Thu, 20 Jan 2022 17:52:37 +0800
Subject: [PATCH 04/41] fix: lower case field names in tests

---
 .../slowquery/compatibility_test.go           | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/tests/integration/slowquery/compatibility_test.go b/tests/integration/slowquery/compatibility_test.go
index 3b46df5a07..832190a3e5 100644
--- a/tests/integration/slowquery/compatibility_test.go
+++ b/tests/integration/slowquery/compatibility_test.go
@@ -109,20 +109,20 @@ func (s *testCompatibilitySuite) TestQueryTableColumns() {
 	if util.CheckTiDBVersion(s.Require(), "< 5.0.0") {
 		cls, err := slowquery.GetAvailableFields(s.sysSchema, s.dbSession())
 		s.Require().NoError(err)
-		s.Require().NotContains(cls, "Rocksdb_delete_skipped_count")
-		s.Require().NotContains(cls, "Rocksdb_key_skipped_count")
-		s.Require().NotContains(cls, "Rocksdb_block_cache_hit_count")
-		s.Require().NotContains(cls, "Rocksdb_block_read_count")
-		s.Require().NotContains(cls, "Rocksdb_block_read_byte")
+		s.Require().NotContains(cls, "rocksdb_delete_skipped_count")
+		s.Require().NotContains(cls, "rocksdb_key_skipped_count")
+		s.Require().NotContains(cls, "rocksdb_block_cache_hit_count")
+		s.Require().NotContains(cls, "rocksdb_block_read_count")
+		s.Require().NotContains(cls, "rocksdb_block_read_byte")
 	}
 
 	if util.CheckTiDBVersion(s.Require(), ">= 5.0.0") {
 		cls, err := slowquery.GetAvailableFields(s.sysSchema, s.dbSession())
 		s.Require().NoError(err)
-		s.Require().Contains(cls, "Rocksdb_delete_skipped_count")
-		s.Require().Contains(cls, "Rocksdb_key_skipped_count")
-		s.Require().Contains(cls, "Rocksdb_block_cache_hit_count")
-		s.Require().Contains(cls, "Rocksdb_block_read_count")
-		s.Require().Contains(cls, "Rocksdb_block_read_byte")
+		s.Require().Contains(cls, "rocksdb_delete_skipped_count")
+		s.Require().Contains(cls, "rocksdb_key_skipped_count")
+		s.Require().Contains(cls, "rocksdb_block_cache_hit_count")
+		s.Require().Contains(cls, "rocksdb_block_read_count")
+		s.Require().Contains(cls, "rocksdb_block_read_byte")
 	}
 }

From 8d6475439618247e1ca309502701dfa8dbfe3894 Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Thu, 20 Jan 2022 19:10:29 +0800
Subject: [PATCH 05/41] update

---
 ui/cypress.json                               |  2 +-
 .../integration/slow_query/list.spec.js       | 92 ++++++++++++++++++-
 ui/lib/apps/SlowQuery/pages/List/index.tsx    |  1 +
 ui/lib/components/ColumnsSelector/index.tsx   |  6 +-
 4 files changed, 98 insertions(+), 3 deletions(-)

diff --git a/ui/cypress.json b/ui/cypress.json
index 51ae7b579e..f97652900d 100644
--- a/ui/cypress.json
+++ b/ui/cypress.json
@@ -1,5 +1,5 @@
 {
-  "defaultCommandTimeout": 120000,
+  "defaultCommandTimeout": 5000,
   "responseTimeout": 60000,
   "requestTimeout": 60000,
   "screenshotOnRunFailure": false,
diff --git a/ui/cypress/integration/slow_query/list.spec.js b/ui/cypress/integration/slow_query/list.spec.js
index 3a61a216e4..0c77852e79 100644
--- a/ui/cypress/integration/slow_query/list.spec.js
+++ b/ui/cypress/integration/slow_query/list.spec.js
@@ -256,6 +256,7 @@ describe('SlowQuery list page', () => {
         }
         cy.task('queryDB', { ...queryData })
 
+        cy.wait(2000)
         cy.reload()
         // global and use database queries will be listed
         cy.get('[data-automation-key=query]').should('has.length', 3)
@@ -339,12 +340,101 @@ describe('SlowQuery list page', () => {
       const defaultColumns = ['Query', 'Finish Time', 'Latency']
       it('Default selected columns', () => {
         cy.get('[role=columnheader]')
+          .not('.is-empty')
           .should('have.length', 4)
           .each(($column, $idx) => {
-            console.log('de', defaultColumns[$idx])
             cy.wrap($column).contains(defaultColumns[$idx])
           })
       })
+
+      it('Hover selected columns', () => {
+        cy.get('[data-e2e=slow_query_popover]')
+          .trigger('mouseover')
+          .then(() => {
+            cy.get('[data-e2e=slow_query_popover_content]')
+              .should('be.visible')
+              .within(() => {
+                // check default selectedColumns checked
+                defaultColumns.forEach((c) => {
+                  cy.contains(c)
+                    .parent()
+                    .within(() => {
+                      cy.get(
+                        '[data-e2e=slow_query_schema_table_columns]'
+                      ).should('be.checked')
+                    })
+                })
+              })
+          })
+      })
+
+      it('Check all columns', () => {
+        cy.get('[data-e2e=slow_query_popover]')
+          .trigger('mouseover')
+          .then(() => {
+            cy.get('[data-e2e=slow_query_schema_table_column_tile]')
+              .check()
+              .then(() => {
+                cy.get('[role=columnheader')
+                  .not('is-empty')
+                  .should('have.length', 42)
+              })
+          })
+      })
+
+      it('Reset selected columns', () => {
+        cy.get('[data-e2e=slow_query_popover]')
+          .trigger('mouseover')
+          .then(() => {
+            cy.get('[data-e2e=slow_query_schema_table_column_reset]')
+              .click()
+              .then(() => {
+                cy.get('[role=columnheader')
+                  .not('is-empty')
+                  .should('have.length', 4)
+              })
+          })
+      })
+
+      it('Check orbitary column', () => {
+        cy.get('[data-e2e=slow_query_popover]')
+          .trigger('mouseover')
+          .then(() => {
+            cy.contains('TiDB Instance')
+              .within(() => {
+                cy.get('[data-e2e=slow_query_schema_table_columns]').check()
+              })
+              .then(() => {
+                cy.get('[role=columnheader]')
+                  .eq(1)
+                  .should('have.text', 'TiDB Instance ')
+              })
+          })
+      })
+
+      it('Uncheck last select orbitary column', () => {
+        cy.get('[data-e2e=slow_query_popover]')
+          .trigger('mouseover')
+          .then(() => {
+            cy.contains('TiDB Instance')
+              .within(() => {
+                cy.get('[data-e2e=slow_query_schema_table_columns]').uncheck()
+              })
+              .then(() => {
+                cy.get('[role=columnheader]')
+                  .eq(1)
+                  .should('have.text', 'Finish Time ')
+              })
+          })
+      })
+
+      it('Check SLOW_QUERY_SHOW_FULL_SQL', () => {
+        cy.get('[data-e2e=slow_query_popover]')
+          .trigger('mouseover')
+          .then(() => {
+            cy.get('[data-automation-key=query]').eq(0)
+          })
+      })
     })
   })
 })
diff --git a/ui/lib/apps/SlowQuery/pages/List/index.tsx b/ui/lib/apps/SlowQuery/pages/List/index.tsx
index af7e6817c4..16d35e5572 100644
--- a/ui/lib/apps/SlowQuery/pages/List/index.tsx
+++ b/ui/lib/apps/SlowQuery/pages/List/index.tsx
@@ -160,6 +160,7 @@ function List() {
                   <Checkbox
                     checked={showFullSQL}
                     onChange={(e) => setShowFullSQL(e.target.checked)}
+                    data-e2e="slow_query_show_full_sql"
                   >
                     {t('slow_query.toolbar.select_columns.show_full_sql')}
                   </Checkbox>
diff --git a/ui/lib/components/ColumnsSelector/index.tsx b/ui/lib/components/ColumnsSelector/index.tsx
index fa243f85e3..d76ee2dff5 100644
--- a/ui/lib/components/ColumnsSelector/index.tsx
+++ b/ui/lib/components/ColumnsSelector/index.tsx
@@ -104,6 +104,7 @@ export default function ColumnsSelector({
         indeterminate={indeterminate}
         checked={checkedAll}
         onChange={handleCheckAllChange}
+        data-e2e="slow_query_schema_table_column_tile"
       >
         {t('component.columnsSelector.select')}
       </Checkbox>
@@ -111,6 +112,7 @@ export default function ColumnsSelector({
         <Button
           type="link"
           onClick={() => onChange && onChange(defaultVisibleColumnKeys)}
+          data-e2e="slow_query_schema_table_column_reset"
         >
           {t('component.columnsSelector.reset')}
         </Button>
@@ -128,12 +130,14 @@ export default function ColumnsSelector({
           paddingTop: 8,
           paddingBottom: 8,
         }}
+        data-e2e="slow_query_popover_content"
       >
         {filteredColumns.map((column) => (
           <Checkbox
             key={column.key}
             checked={visibleKeys[column.key]}
             onChange={(e) => handleCheckChange(e, column)}
+            data-e2e="slow_query_schema_table_columns"
           >
             {column.name}
           </Checkbox>
@@ -145,7 +149,7 @@ export default function ColumnsSelector({
 
   return (
     <Popover content={content} title={title} placement="bottomLeft">
-      <span style={{ cursor: 'pointer' }}>
+      <span style={{ cursor: 'pointer' }} data-e2e="slow_query_popover">
         {t('component.columnsSelector.trigger_text')} <DownOutlined />
       </span>
     </Popover>

From ff49c3a6728a813e7e36ff975042636516325694 Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Fri, 21 Jan 2022 12:01:36 +0800
Subject: [PATCH 06/41] update tiup reboot

---
 scripts/start_tiup.sh                         | 10 +++-
 scripts/tiup.config.toml                      |  2 +
 ui/cypress.json                               |  2 +-
 .../integration/slow_query/list.spec.js       | 57 +++++++++++++++----
 ui/lib/apps/SlowQuery/pages/List/index.tsx    |  5 +-
 .../utils/useSlowQueryTableController.ts      |  9 +--
 ui/lib/utils/tableColumnFactory.tsx           |  5 +-
 7 files changed, 67 insertions(+), 23 deletions(-)
 create mode 100644 scripts/tiup.config.toml

diff --git a/scripts/start_tiup.sh b/scripts/start_tiup.sh
index 9e6b52a399..e5096a074a 100755
--- a/scripts/start_tiup.sh
+++ b/scripts/start_tiup.sh
@@ -4,6 +4,7 @@ tidb_version=$1
 mode=$2
 
 TIUP_BIN_DIR=$HOME/.tiup/bin/tiup
+DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
 
 if [ $mode = "restart" ]; then
     # get process id
@@ -15,12 +16,15 @@ if [ $mode = "restart" ]; then
         echo "killing $id"
         kill -9 $id;
     done
+
+    # Run Tiup
+    $TIUP_BIN_DIR playground ${tidb_version} --db.config=$DIR/tiup.config.toml --tiflash=0 &> start_tiup.log &
 else
     echo "install tiup"
     # Install TiUP
     curl --proto '=https' --tlsv1.2 -sSf https://tiup-mirrors.pingcap.com/install.sh | sh
     $TIUP_BIN_DIR update playground
-fi
 
-# Run Tiup
-$TIUP_BIN_DIR playground ${tidb_version} --tiflash=0 &> start_tiup.log &
+    # Run Tiup
+    $TIUP_BIN_DIR playground ${tidb_version} --tiflash=0 &> start_tiup.log &
+fi
\ No newline at end of file
diff --git a/scripts/tiup.config.toml b/scripts/tiup.config.toml
new file mode 100644
index 0000000000..853103663e
--- /dev/null
+++ b/scripts/tiup.config.toml
@@ -0,0 +1,2 @@
+[log]
+slow-threshold = 500
\ No newline at end of file
diff --git a/ui/cypress.json b/ui/cypress.json
index f97652900d..0fa29919d1 100644
--- a/ui/cypress.json
+++ b/ui/cypress.json
@@ -1,5 +1,5 @@
 {
-  "defaultCommandTimeout": 5000,
+  "defaultCommandTimeout": 10000,
   "responseTimeout": 60000,
   "requestTimeout": 60000,
   "screenshotOnRunFailure": false,
diff --git a/ui/cypress/integration/slow_query/list.spec.js b/ui/cypress/integration/slow_query/list.spec.js
index 0c77852e79..238076f690 100644
--- a/ui/cypress/integration/slow_query/list.spec.js
+++ b/ui/cypress/integration/slow_query/list.spec.js
@@ -7,6 +7,13 @@ describe('SlowQuery list page', () => {
     cy.fixture('uri.json').then(function (uri) {
       this.uri = uri
     })
+
+    cy.exec(
+      `bash ../scripts/start_tiup.sh ${Cypress.env('TIDB_VERSION')} restart`,
+      { log: true }
+    )
+
+    cy.exec('bash ../scripts/wait_tiup_playground.sh 1 300 &> wait_tiup.log')
   })
 
   beforeEach(function () {
@@ -16,17 +23,6 @@ describe('SlowQuery list page', () => {
   })
 
   describe('Initialize slow query page', () => {
-    it('Restart tiup', () => {
-      cy.exec(
-        `bash ../scripts/start_tiup.sh ${Cypress.env('TIDB_VERSION')} restart`,
-        { log: true }
-      )
-    })
-
-    it('Wait TiUP Playground', () => {
-      cy.exec('bash ../scripts/wait_tiup_playground.sh 1 300 &> wait_tiup.log')
-    })
-
     it('Slow query side bar highlighted', () => {
       cy.get('[data-e2e=menu_item_slow_query]').should(
         'has.class',
@@ -432,8 +428,45 @@ describe('SlowQuery list page', () => {
         cy.get('[data-e2e=slow_query_popover]')
           .trigger('mouseover')
           .then(() => {
-            cy.get('[data-automation-key=query]').eq(0)
+            cy.get('[data-e2e=slow_query_show_full_sql]')
+              .check()
+              .then(() => {
+                cy.get('[data-automation-key=query]')
+                  .eq(0)
+                  .find('[data-e2e=text_wrap_multiline]')
+              })
+
+            cy.get('[data-e2e=slow_query_show_full_sql]')
+              .uncheck()
+              .then(() => {
+                cy.get('[data-automation-key=query]')
+                  .eq(0)
+                  .find('[data-e2e=text_wrap_singleline_with_tooltip]')
+              })
+          })
+      })
+    })
+
+    describe('Table list order', () => {
+      it('Default order', () => {
+        cy.get('[data-automation-key=timestamp]')
+          .each(($query, $idx, $queries) => {
+            cy.wrap($query).invoke('text').as(`time${$idx}`)
           })
+          .then(() => {
+            const time1 = dayjs(cy.get('@time1'))
+            const time2 = dayjs(cy.get('@time2'))
+            cy.get('@time0').should('be.gt', time1)
+            cy.get('@time1').should('be.gt', time2)
+          })
+      })
+    })
+
+    describe('Refresh table list', () => {
+      it('Click refresh will fetch new list', () => {
+        cy.get('[data-e2e=slow_query_refresh]')
+          .click()
+          .then(() => {})
       })
     })
   })
diff --git a/ui/lib/apps/SlowQuery/pages/List/index.tsx b/ui/lib/apps/SlowQuery/pages/List/index.tsx
index 16d35e5572..344c960959 100644
--- a/ui/lib/apps/SlowQuery/pages/List/index.tsx
+++ b/ui/lib/apps/SlowQuery/pages/List/index.tsx
@@ -171,7 +171,10 @@ function List() {
               {loadingSlowQueries ? (
                 <LoadingOutlined />
               ) : (
-                <ReloadOutlined onClick={refresh} />
+                <ReloadOutlined
+                  onClick={refresh}
+                  data-e2e="slow_query_refresh"
+                />
               )}
             </Tooltip>
             <Dropdown overlay={dropdownMenu} placement="bottomRight">
diff --git a/ui/lib/apps/SlowQuery/utils/useSlowQueryTableController.ts b/ui/lib/apps/SlowQuery/utils/useSlowQueryTableController.ts
index cf688ed4c4..0b3e3a9f57 100644
--- a/ui/lib/apps/SlowQuery/utils/useSlowQueryTableController.ts
+++ b/ui/lib/apps/SlowQuery/utils/useSlowQueryTableController.ts
@@ -100,16 +100,17 @@ export default function useSlowQueryTableController(
     () => (needSave ? sessionQueryOptions : memoryQueryOptions),
     [needSave, memoryQueryOptions, sessionQueryOptions]
   )
-  const queryTimeRange = useMemo(() => {
-    const [beginTime, endTime] = calcTimeRange(queryOptions.timeRange)
-    return { beginTime, endTime }
-  }, [queryOptions])
 
   const [allSchemas, setAllSchemas] = useState<string[]>([])
   const [loadingSlowQueries, setLoadingSlowQueries] = useState(false)
   const [slowQueries, setSlowQueries] = useState<SlowqueryModel[]>([])
   const [refreshTimes, setRefreshTimes] = useState(0)
 
+  const queryTimeRange = useMemo(() => {
+    const [beginTime, endTime] = calcTimeRange(queryOptions.timeRange)
+    return { beginTime, endTime }
+  }, [queryOptions, refreshTimes])
+
   function setQueryOptions(newOptions: ISlowQueryOptions) {
     if (needSave) {
       setSessionQueryOptions(newOptions)
diff --git a/ui/lib/utils/tableColumnFactory.tsx b/ui/lib/utils/tableColumnFactory.tsx
index bb2e7e0dba..d482c01bb9 100644
--- a/ui/lib/utils/tableColumnFactory.tsx
+++ b/ui/lib/utils/tableColumnFactory.tsx
@@ -124,7 +124,7 @@ export class TableColumnFactory {
       ...this.getDefaultColumnConfig(fieldName),
       maxWidth: 150,
       onRender: (rec: U) => (
-        <Tooltip title={rec[fieldName]}>
+        <Tooltip title={rec[fieldName]} data-e2e="text_with_tooltip">
           <TextWrap>{rec[fieldName]}</TextWrap>
         </Tooltip>
       ),
@@ -235,13 +235,14 @@ export class TableColumnFactory {
       isMultiline: showFullSQL,
       onRender: (rec: U) =>
         showFullSQL ? (
-          <TextWrap multiline>
+          <TextWrap multiline data-e2e="text_wrap_multiline">
             <HighlightSQL sql={rec[fieldName]!} />
           </TextWrap>
         ) : (
           <Tooltip
             title={<HighlightSQL sql={rec[fieldName]!} theme="dark" />}
             placement="right"
+            data-e2e="text_wrap_singleline_with_tooltip"
           >
             <TextWrap>
               <HighlightSQL sql={rec[fieldName]!} compact />

From 4aa1de81aef61666b3484186344dcc8a80c3bccb Mon Sep 17 00:00:00 2001
From: Suhaha <jklopsdfw@gmail.com>
Date: Fri, 21 Jan 2022 12:33:49 +0800
Subject: [PATCH 07/41] test: slow query available fields

---
 .../slowquery/compatibility_test.go           | 67 +++++++++++++++
 .../integration/slow_query/list.spec.js       | 82 +++++++++++++++++++
 ui/lib/components/ColumnsSelector/index.tsx   |  3 +-
 3 files changed, 151 insertions(+), 1 deletion(-)

diff --git a/tests/integration/slowquery/compatibility_test.go b/tests/integration/slowquery/compatibility_test.go
index 832190a3e5..2b48512e2c 100644
--- a/tests/integration/slowquery/compatibility_test.go
+++ b/tests/integration/slowquery/compatibility_test.go
@@ -126,3 +126,70 @@ func (s *testCompatibilitySuite) TestQueryTableColumns() {
 		s.Require().Contains(cls, "rocksdb_block_read_byte")
 	}
 }
+
+func (s *testCompatibilitySuite) TestAllAvailableFields() {
+	// TODO: use latest instead of specific versions
+	if util.CheckTiDBVersion(s.Require(), ">= 5.0.0") {
+		cls, err := slowquery.GetAvailableFields(s.sysSchema, s.dbSession())
+		s.Require().NoError(err)
+		s.Require().Contains(cls, "digest")
+		s.Require().Contains(cls, "query")
+		s.Require().Contains(cls, "instance")
+		s.Require().Contains(cls, "db")
+		s.Require().Contains(cls, "connection_id")
+		s.Require().Contains(cls, "success")
+		s.Require().Contains(cls, "timestamp")
+		s.Require().Contains(cls, "query_time")
+		s.Require().Contains(cls, "parse_time")
+		s.Require().Contains(cls, "compile_time")
+		s.Require().Contains(cls, "rewrite_time")
+		s.Require().Contains(cls, "preproc_subqueries_time")
+		s.Require().Contains(cls, "optimize_time")
+		s.Require().Contains(cls, "wait_ts")
+		s.Require().Contains(cls, "cop_time")
+		s.Require().Contains(cls, "lock_keys_time")
+		s.Require().Contains(cls, "write_sql_response_total")
+		s.Require().Contains(cls, "exec_retry_time")
+		s.Require().Contains(cls, "memory_max")
+		s.Require().Contains(cls, "disk_max")
+		s.Require().Contains(cls, "txn_start_ts")
+		s.Require().Contains(cls, "prev_stmt")
+		s.Require().Contains(cls, "plan")
+		s.Require().Contains(cls, "is_internal")
+		s.Require().Contains(cls, "index_names")
+		s.Require().Contains(cls, "stats")
+		s.Require().Contains(cls, "backoff_types")
+		s.Require().Contains(cls, "user")
+		s.Require().Contains(cls, "host")
+		s.Require().Contains(cls, "process_time")
+		s.Require().Contains(cls, "wait_time")
+		s.Require().Contains(cls, "backoff_time")
+		s.Require().Contains(cls, "get_commit_ts_time")
+		s.Require().Contains(cls, "local_latch_wait_time")
+		s.Require().Contains(cls, "resolve_lock_time")
+		s.Require().Contains(cls, "prewrite_time")
+		s.Require().Contains(cls, "wait_prewrite_binlog_time")
+		s.Require().Contains(cls, "commit_time")
+		s.Require().Contains(cls, "commit_backoff_time")
+		s.Require().Contains(cls, "cop_proc_avg")
+		s.Require().Contains(cls, "cop_proc_p90")
+		s.Require().Contains(cls, "cop_proc_max")
+		s.Require().Contains(cls, "cop_wait_avg")
+		s.Require().Contains(cls, "cop_wait_p90")
+		s.Require().Contains(cls, "cop_wait_max")
+		s.Require().Contains(cls, "write_keys")
+		s.Require().Contains(cls, "write_size")
+		s.Require().Contains(cls, "prewrite_region")
+		s.Require().Contains(cls, "txn_retry")
+		s.Require().Contains(cls, "request_count")
+		s.Require().Contains(cls, "process_keys")
+		s.Require().Contains(cls, "total_keys")
+		s.Require().Contains(cls, "cop_proc_addr")
+		s.Require().Contains(cls, "cop_wait_addr")
+		s.Require().Contains(cls, "rocksdb_delete_skipped_count")
+		s.Require().Contains(cls, "rocksdb_key_skipped_count")
+		s.Require().Contains(cls, "rocksdb_block_cache_hit_count")
+		s.Require().Contains(cls, "rocksdb_block_read_count")
+		s.Require().Contains(cls, "rocksdb_block_read_byte")
+	}
+}
diff --git a/ui/cypress/integration/slow_query/list.spec.js b/ui/cypress/integration/slow_query/list.spec.js
index 4674e5c414..6f1e014e8e 100644
--- a/ui/cypress/integration/slow_query/list.spec.js
+++ b/ui/cypress/integration/slow_query/list.spec.js
@@ -240,4 +240,86 @@ describe('SlowQuery list page', () => {
       })
     })
   })
+
+  describe('Available fields', () => {
+    it('Show all available fields', () => {
+      cy.intercept('/dashboard/api/slow_query/available_fields').as(
+        'getAvailableFields'
+      )
+      cy.wait('@getAvailableFields')
+
+      const availableFields = [
+        'query',
+        'digest',
+        'instance',
+        'db',
+        'connection_id',
+        'timestamp',
+
+        'query_time',
+        'parse_time',
+        'compile_time',
+        // 'rewrite_time',
+        // 'preproc_subqueries_time',
+        // 'optimize_time',
+        'process_time',
+        'memory_max',
+        'disk_max',
+
+        'txn_start_ts',
+        'success',
+        'is_internal',
+        'index_names',
+        'stats',
+        'backoff_types',
+
+        // 'wait_ts',
+        // 'cop_time',
+        // 'lock_keys_time',
+        // 'write_sql_response_total',
+        // 'exec_retry_time',
+        // 'prev_stmt',
+        // 'plan',
+        'user',
+        'host',
+
+        'wait_time',
+        'backoff_time',
+        'get_commit_ts_time',
+        'local_latch_wait_time',
+        'prewrite_time',
+        // 'wait_prewrite_binlog_time',
+        'commit_time',
+        'commit_backoff_time',
+        'resolve_lock_time',
+
+        'cop_proc_avg',
+        // 'cop_proc_p90',
+        // 'cop_proc_max',
+        'cop_wait_avg',
+        // 'cop_wait_p90',
+        // 'cop_wait_max',
+        'write_keys',
+        'write_size',
+        'prewrite_region',
+        'txn_retry',
+        'request_count',
+        'process_keys',
+        'total_keys',
+        'cop_proc_addr',
+        'cop_wait_addr',
+        'rocksdb_delete_skipped_count',
+        'rocksdb_key_skipped_count',
+        'rocksdb_block_cache_hit_count',
+        'rocksdb_block_read_count',
+        'rocksdb_block_read_byte',
+      ]
+
+      cy.get('[data-e2e="columns_selector_popover"]').trigger('mouseover')
+      availableFields.forEach((f) => {
+        cy.log(f)
+        cy.get(`[data-e2e="columns_selector_field_${f}"]`).should('exist')
+      })
+    })
+  })
 })
diff --git a/ui/lib/components/ColumnsSelector/index.tsx b/ui/lib/components/ColumnsSelector/index.tsx
index fa243f85e3..83b4a912c6 100644
--- a/ui/lib/components/ColumnsSelector/index.tsx
+++ b/ui/lib/components/ColumnsSelector/index.tsx
@@ -131,6 +131,7 @@ export default function ColumnsSelector({
       >
         {filteredColumns.map((column) => (
           <Checkbox
+            data-e2e={`columns_selector_field_${column.key}`}
             key={column.key}
             checked={visibleKeys[column.key]}
             onChange={(e) => handleCheckChange(e, column)}
@@ -145,7 +146,7 @@ export default function ColumnsSelector({
 
   return (
     <Popover content={content} title={title} placement="bottomLeft">
-      <span style={{ cursor: 'pointer' }}>
+      <span data-e2e="columns_selector_popover" style={{ cursor: 'pointer' }}>
         {t('component.columnsSelector.trigger_text')} <DownOutlined />
       </span>
     </Popover>

From 092261b9e70b8ed1770f55fa76006fa7a6415ff8 Mon Sep 17 00:00:00 2001
From: Suhaha <jklopsdfw@gmail.com>
Date: Fri, 21 Jan 2022 12:44:09 +0800
Subject: [PATCH 08/41] test: move available fields tests to compatibility test

---
 .../slow_query/list.compat_spec.js            | 100 ++++++++++++++++++
 .../integration/slow_query/list.spec.js       |  82 --------------
 ui/package.json                               |   1 +
 ui/yarn.lock                                  |   5 +
 4 files changed, 106 insertions(+), 82 deletions(-)
 create mode 100644 ui/cypress/integration/slow_query/list.compat_spec.js

diff --git a/ui/cypress/integration/slow_query/list.compat_spec.js b/ui/cypress/integration/slow_query/list.compat_spec.js
new file mode 100644
index 0000000000..2cc65b423b
--- /dev/null
+++ b/ui/cypress/integration/slow_query/list.compat_spec.js
@@ -0,0 +1,100 @@
+// Copyright 2022 PingCAP, Inc. Licensed under Apache-2.0.
+import { skipOn } from '@cypress/skip-test'
+
+describe('SlowQuery list compatibility test', () => {
+  before(() => {
+    cy.fixture('uri.json').then(function (uri) {
+      this.uri = uri
+    })
+  })
+
+  beforeEach(function () {
+    cy.login('root')
+    cy.visit(this.uri.slow_query)
+    cy.url().should('include', this.uri.slow_query)
+  })
+
+  describe('Available fields', () => {
+    skipOn(Cypress.env('FEATURE_VERSION') !== '6.0.0', () => {
+      it('Show all available fields', () => {
+        cy.intercept('/dashboard/api/slow_query/available_fields').as(
+          'getAvailableFields'
+        )
+        cy.wait('@getAvailableFields')
+
+        const availableFields = [
+          'query',
+          'digest',
+          'instance',
+          'db',
+          'connection_id',
+          'timestamp',
+
+          'query_time',
+          'parse_time',
+          'compile_time',
+          // 'rewrite_time',
+          // 'preproc_subqueries_time',
+          // 'optimize_time',
+          'process_time',
+          'memory_max',
+          'disk_max',
+
+          'txn_start_ts',
+          'success',
+          'is_internal',
+          'index_names',
+          'stats',
+          'backoff_types',
+
+          // 'wait_ts',
+          // 'cop_time',
+          // 'lock_keys_time',
+          // 'write_sql_response_total',
+          // 'exec_retry_time',
+          // 'prev_stmt',
+          // 'plan',
+          'user',
+          'host',
+
+          'wait_time',
+          'backoff_time',
+          'get_commit_ts_time',
+          'local_latch_wait_time',
+          'prewrite_time',
+          // 'wait_prewrite_binlog_time',
+          'commit_time',
+          'commit_backoff_time',
+          'resolve_lock_time',
+
+          'cop_proc_avg',
+          // 'cop_proc_p90',
+          // 'cop_proc_max',
+          'cop_wait_avg',
+          // 'cop_wait_p90',
+          // 'cop_wait_max',
+          'write_keys',
+          'write_size',
+          'prewrite_region',
+          'txn_retry',
+          'request_count',
+          'process_keys',
+          'total_keys',
+          'cop_proc_addr',
+          'cop_wait_addr',
+          'rocksdb_delete_skipped_count',
+          'rocksdb_key_skipped_count',
+          'rocksdb_block_cache_hit_count',
+          'rocksdb_block_read_count',
+          'rocksdb_block_read_byte',
+        ]
+
+        cy.get('[data-e2e="columns_selector_popover"]').trigger('mouseover')
+        availableFields.forEach((f) => {
+          cy.log(f)
+          cy.get(`[data-e2e="columns_selector_field_${f}"]`).should('exist')
+        })
+      })
+    })
+  })
+})
diff --git a/ui/cypress/integration/slow_query/list.spec.js b/ui/cypress/integration/slow_query/list.spec.js
index 6f1e014e8e..4674e5c414 100644
--- a/ui/cypress/integration/slow_query/list.spec.js
+++ b/ui/cypress/integration/slow_query/list.spec.js
@@ -240,86 +240,4 @@ describe('SlowQuery list page', () => {
       })
     })
   })
-
-  describe('Available fields', () => {
-    it('Show all available fields', () => {
-      cy.intercept('/dashboard/api/slow_query/available_fields').as(
-        'getAvailableFields'
-      )
-      cy.wait('@getAvailableFields')
-
-      const availableFields = [
-        'query',
-        'digest',
-        'instance',
-        'db',
-        'connection_id',
-        'timestamp',
-
-        'query_time',
-        'parse_time',
-        'compile_time',
-        // 'rewrite_time',
-        // 'preproc_subqueries_time',
-        // 'optimize_time',
-        'process_time',
-        'memory_max',
-        'disk_max',
-
-        'txn_start_ts',
-        'success',
-        'is_internal',
-        'index_names',
-        'stats',
-        'backoff_types',
-
-        // 'wait_ts',
-        // 'cop_time',
-        // 'lock_keys_time',
-        // 'write_sql_response_total',
-        // 'exec_retry_time',
-        // 'prev_stmt',
-        // 'plan',
-        'user',
-        'host',
-
-        'wait_time',
-        'backoff_time',
-        'get_commit_ts_time',
-        'local_latch_wait_time',
-        'prewrite_time',
-        // 'wait_prewrite_binlog_time',
-        'commit_time',
-        'commit_backoff_time',
-        'resolve_lock_time',
-
-        'cop_proc_avg',
-        // 'cop_proc_p90',
-        // 'cop_proc_max',
-        'cop_wait_avg',
-        // 'cop_wait_p90',
-        // 'cop_wait_max',
-        'write_keys',
-        'write_size',
-        'prewrite_region',
-        'txn_retry',
-        'request_count',
-        'process_keys',
-        'total_keys',
-        'cop_proc_addr',
-        'cop_wait_addr',
-        'rocksdb_delete_skipped_count',
-        'rocksdb_key_skipped_count',
-        'rocksdb_block_cache_hit_count',
-        'rocksdb_block_read_count',
-        'rocksdb_block_read_byte',
-      ]
-
-      cy.get('[data-e2e="columns_selector_popover"]').trigger('mouseover')
-      availableFields.forEach((f) => {
-        cy.log(f)
-        cy.get(`[data-e2e="columns_selector_field_${f}"]`).should('exist')
-      })
-    })
-  })
 })
diff --git a/ui/package.json b/ui/package.json
index dc189d7fe0..50e1cb2ccd 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -8,6 +8,7 @@
   "dependencies": {
     "@ant-design/icons": "^4.2.1",
     "@baurine/grafana-value-formats": "^1.0.0",
+    "@cypress/skip-test": "^2.6.1",
     "@duorou_xu/speedscope": "1.14.1",
     "@elastic/charts": "^20.0.0",
     "@fortawesome/fontawesome-free": "^5.14.0",
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 90348d1d56..456a370214 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -2152,6 +2152,11 @@
     tunnel-agent "^0.6.0"
     uuid "^8.3.2"
 
+"@cypress/skip-test@^2.6.1":
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/@cypress/skip-test/-/skip-test-2.6.1.tgz#44a4bc4c2b2e369a7661177c9b38e50d417a36ea"
+  integrity sha512-X+ibefBiuOmC5gKG91wRIT0/OqXeETYvu7zXktjZ3yLeO186Y8ia0K7/gQUpAwuUi28DuqMd1+7tBQVtPkzbPA==
+
 "@cypress/xvfb@^1.2.4":
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/@cypress/xvfb/-/xvfb-1.2.4.tgz#2daf42e8275b39f4aa53c14214e557bd14e7748a"

From 1d597a2db1ad23f1cdbdbba393426fa53e847ed2 Mon Sep 17 00:00:00 2001
From: Suhaha <jklopsdfw@gmail.com>
Date: Fri, 21 Jan 2022 14:21:02 +0800
Subject: [PATCH 09/41] chore: remove test log

---
 ui/cypress/integration/slow_query/list.compat_spec.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/cypress/integration/slow_query/list.compat_spec.js b/ui/cypress/integration/slow_query/list.compat_spec.js
index 2cc65b423b..118406ce59 100644
--- a/ui/cypress/integration/slow_query/list.compat_spec.js
+++ b/ui/cypress/integration/slow_query/list.compat_spec.js
@@ -91,7 +91,6 @@ describe('SlowQuery list compatibility test', () => {
 
         cy.get('[data-e2e="columns_selector_popover"]').trigger('mouseover')
         availableFields.forEach((f) => {
-          cy.log(f)
           cy.get(`[data-e2e="columns_selector_field_${f}"]`).should('exist')
         })
       })

From 1d53d88928c7736a4dcee5e4d45bbc2a352669b6 Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Fri, 21 Jan 2022 19:32:25 +0800
Subject: [PATCH 10/41] update slowquery

---
 .../integration/slow_query/list.spec.js       | 72 ++++++++++++-------
 .../SlowQuery/pages/Detail/DetailTabs.tsx     |  1 +
 ui/lib/apps/SlowQuery/pages/Detail/index.tsx  |  5 +-
 ui/lib/utils/tableColumnFactory.tsx           |  3 +-
 4 files changed, 52 insertions(+), 29 deletions(-)

diff --git a/ui/cypress/integration/slow_query/list.spec.js b/ui/cypress/integration/slow_query/list.spec.js
index e4dcbd0c89..bfac730d04 100644
--- a/ui/cypress/integration/slow_query/list.spec.js
+++ b/ui/cypress/integration/slow_query/list.spec.js
@@ -60,11 +60,6 @@ describe('SlowQuery list page', () => {
 
   describe('Filter slow query list', () => {
     it('Run workload', () => {
-      let queryData = {
-        query: 'SET tidb_slow_log_threshold = 500',
-      }
-      cy.task('queryDB', { ...queryData })
-
       const workloads = [
         'SELECT SLEEP(0.8);',
         'SELECT SLEEP(0.4);',
@@ -333,8 +328,13 @@ describe('SlowQuery list page', () => {
     })
 
     describe('Selected Columns', () => {
-      const defaultColumns = ['Query', 'Finish Time', 'Latency']
-      const defaultColumnsKeys = ['query', 'timestamp', 'query_time']
+      const defaultColumns = ['Query', 'Finish Time', 'Latency', 'Max Memory']
+      const defaultColumnsKeys = [
+        'query',
+        'timestamp',
+        'query_time',
+        'memory_max',
+      ]
       it('Default selected columns', () => {
         cy.get('[role=columnheader]')
           .not('.is-empty')
@@ -357,7 +357,7 @@ describe('SlowQuery list page', () => {
                     .parent()
                     .within(() => {
                       cy.get(
-                        `[data-e2e=columns_selector_field_${defaultColumnsKeys[idx]}`
+                        `[data-e2e=columns_selector_field_${defaultColumnsKeys[idx]}]`
                       ).should('be.checked')
                     })
                 })
@@ -372,9 +372,9 @@ describe('SlowQuery list page', () => {
             cy.get('[data-e2e=slow_query_schema_table_column_tile]')
               .check()
               .then(() => {
-                cy.get('[role=columnheader')
-                  .not('is-empty')
-                  .should('have.length', 42)
+                cy.get('[role=columnheader]')
+                  .not('.is-empty')
+                  .should('have.length', 44)
               })
           })
       })
@@ -386,8 +386,8 @@ describe('SlowQuery list page', () => {
             cy.get('[data-e2e=slow_query_schema_table_column_reset]')
               .click()
               .then(() => {
-                cy.get('[role=columnheader')
-                  .not('is-empty')
+                cy.get('[role=columnheader]')
+                  .not('.is-empty')
                   .should('have.length', 4)
               })
           })
@@ -397,16 +397,15 @@ describe('SlowQuery list page', () => {
         cy.get('[data-e2e=columns_selector_popover]')
           .trigger('mouseover')
           .then(() => {
-            cy.contains('TiDB Instance')
+            cy.contains('Max Disk')
               .within(() => {
-                cy.get(
-                  `[data-e2e=columns_selector_field_${defaultColumnsKeys[idx]}`
-                ).check()
+                cy.get('[data-e2e=columns_selector_field_disk_max]').check()
               })
               .then(() => {
                 cy.get('[role=columnheader]')
-                  .eq(1)
-                  .should('have.text', 'TiDB Instance ')
+                  .not('.is-empty')
+                  .last()
+                  .should('have.text', 'Max Disk ')
               })
           })
       })
@@ -415,11 +414,9 @@ describe('SlowQuery list page', () => {
         cy.get('[data-e2e=columns_selector_popover]')
           .trigger('mouseover')
           .then(() => {
-            cy.contains('TiDB Instance')
+            cy.contains('Max Disk')
               .within(() => {
-                cy.get(
-                  `[data-e2e=columns_selector_field_${defaultColumnsKeys[idx]}`
-                ).uncheck()
+                cy.get('[data-e2e=columns_selector_field_disk_max]').uncheck()
               })
               .then(() => {
                 cy.get('[role=columnheader]')
@@ -446,6 +443,7 @@ describe('SlowQuery list page', () => {
               .then(() => {
                 cy.get('[data-automation-key=query]')
                   .eq(0)
+                  .trigger('mouseover')
                   .find('[data-e2e=text_wrap_singleline_with_tooltip]')
               })
           })
@@ -467,9 +465,31 @@ describe('SlowQuery list page', () => {
       })
     })
 
-    describe('Refresh table list', () => {
-      it('Click refresh will fetch new list', () => {
-        cy.get('[data-e2e=slow_query_refresh]')
+    it('Click refresh will update table list', () => {
+      cy.get('[data-automation-key=query]').should('have.length', 3)
+
+      const queryData = {
+        query: 'SELECT sleep(0.6)',
+      }
+
+      cy.task('queryDB', { ...queryData })
+      cy.wait(500)
+
+      cy.get('[data-e2e=slow_query_refresh]')
+        .click()
+        .then(() => {
+          cy.get('[data-automation-key=query]').should('have.length', 4)
+        })
+    })
+
+    describe('Go to detail page', () => {
+      it('', () => {
+        cy.get('[data-automation-key=query]').eq(0).as('firstSlowQuery')
+        cy.get('[data-automation-key=timestamp]')
+          .eq(0)
+          .as('firstSlowQueryTimeStamp')
+        cy.get('[data-automationid=ListCell]')
+          .eq(0)
           .click()
           .then(() => {})
       })
diff --git a/ui/lib/apps/SlowQuery/pages/Detail/DetailTabs.tsx b/ui/lib/apps/SlowQuery/pages/Detail/DetailTabs.tsx
index 3634d9bb39..0137862d95 100644
--- a/ui/lib/apps/SlowQuery/pages/Detail/DetailTabs.tsx
+++ b/ui/lib/apps/SlowQuery/pages/Detail/DetailTabs.tsx
@@ -29,6 +29,7 @@ export default function DetailTabs({ data }: { data: SlowqueryModel }) {
             columns={columns}
             items={items}
             extendLastColumn
+            data-e2e="details_list"
           />
         )
       },
diff --git a/ui/lib/apps/SlowQuery/pages/Detail/index.tsx b/ui/lib/apps/SlowQuery/pages/Detail/index.tsx
index d10193e713..56db7060a0 100644
--- a/ui/lib/apps/SlowQuery/pages/Detail/index.tsx
+++ b/ui/lib/apps/SlowQuery/pages/Detail/index.tsx
@@ -105,7 +105,10 @@ function DetailPage() {
                       <HighlightSQL sql={data.query!} compact />
                     }
                   >
-                    <HighlightSQL sql={data.query!} />
+                    <HighlightSQL
+                      sql={data.query!}
+                      data-e2e="detail_expand_query"
+                    />
                   </Expand>
                 </Descriptions.Item>
                 {(() => {
diff --git a/ui/lib/utils/tableColumnFactory.tsx b/ui/lib/utils/tableColumnFactory.tsx
index d482c01bb9..81486003f9 100644
--- a/ui/lib/utils/tableColumnFactory.tsx
+++ b/ui/lib/utils/tableColumnFactory.tsx
@@ -242,9 +242,8 @@ export class TableColumnFactory {
           <Tooltip
             title={<HighlightSQL sql={rec[fieldName]!} theme="dark" />}
             placement="right"
-            data-e2e="text_wrap_singleline_with_tooltip"
           >
-            <TextWrap>
+            <TextWrap data-e2e="text_wrap_singleline_with_tooltip">
               <HighlightSQL sql={rec[fieldName]!} compact />
             </TextWrap>
           </Tooltip>

From 653bea65c24b56c87fea8a02e28269a4159b69cb Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Tue, 25 Jan 2022 17:21:11 +0800
Subject: [PATCH 11/41] update slow query e2e test

---
 ui/cypress.json                               |   2 +-
 .../integration/slow_query/list.spec.js       | 185 +++++++++++++-----
 ui/cypress/integration/utils.js               |  34 ++++
 ui/cypress/plugins/index.js                   |  20 ++
 ui/lib/apps/SlowQuery/pages/Detail/index.tsx  |   5 +-
 ui/lib/apps/SlowQuery/pages/List/index.tsx    |  12 +-
 .../utils/useSlowQueryTableController.ts      |   1 +
 ui/lib/components/HighlightSQL/index.tsx      |   1 +
 ui/package.json                               |   1 +
 ui/yarn.lock                                  |  17 +-
 10 files changed, 226 insertions(+), 52 deletions(-)
 create mode 100644 ui/cypress/integration/utils.js

diff --git a/ui/cypress.json b/ui/cypress.json
index 0fa29919d1..401c84b3ea 100644
--- a/ui/cypress.json
+++ b/ui/cypress.json
@@ -1,5 +1,5 @@
 {
-  "defaultCommandTimeout": 10000,
+  "defaultCommandTimeout": 60000,
   "responseTimeout": 60000,
   "requestTimeout": 60000,
   "screenshotOnRunFailure": false,
diff --git a/ui/cypress/integration/slow_query/list.spec.js b/ui/cypress/integration/slow_query/list.spec.js
index 250f1d0a13..16bb9868ea 100644
--- a/ui/cypress/integration/slow_query/list.spec.js
+++ b/ui/cypress/integration/slow_query/list.spec.js
@@ -1,6 +1,9 @@
 // Copyright 2022 PingCAP, Inc. Licensed under Apache-2.0.
 
 import dayjs from 'dayjs'
+import { validateCsvList, validateCsvFile } from '../utils'
+
+const path = require('path')
 
 describe('SlowQuery list page', () => {
   before(() => {
@@ -26,10 +29,9 @@ describe('SlowQuery list page', () => {
 
   describe('Initialize slow query page', () => {
     it('Slow query side bar highlighted', () => {
-      cy.get('[data-e2e=menu_item_slow_query]').should(
-        'has.class',
-        'ant-menu-item-selected'
-      )
+      cy.get('[data-e2e=menu_item_slow_query]')
+        .should('be.visible')
+        .and('has.class', 'ant-menu-item-selected')
     })
 
     it('Has Toolbar', function () {
@@ -63,9 +65,9 @@ describe('SlowQuery list page', () => {
   describe('Filter slow query list', () => {
     it('Run workload', () => {
       const workloads = [
-        'SELECT SLEEP(1);',
-        'SELECT SLEEP(0.4);',
-        'SELECT SLEEP(2);',
+        'SELECT sleep(1);',
+        'SELECT sleep(0.4);',
+        'SELECT sleep(2);',
       ]
 
       const waitTwoSecond = (query, idx) =>
@@ -153,7 +155,7 @@ describe('SlowQuery list page', () => {
             .then(() => {
               cy.get('[data-automation-key=query]')
                 .should('has.length', 1)
-                .and('has.text', 'SELECT SLEEP(1);')
+                .and('has.text', 'SELECT sleep(1);')
             })
         })
 
@@ -189,7 +191,7 @@ describe('SlowQuery list page', () => {
             .then(() => {
               cy.get('[data-automation-key=query]')
                 .should('has.length', 1)
-                .and('has.text', 'SELECT SLEEP(2);')
+                .and('has.text', 'SELECT sleep(2);')
             })
         })
 
@@ -239,7 +241,7 @@ describe('SlowQuery list page', () => {
 
       it('Run workload without use database', () => {
         let queryData = {
-          query: 'SELECT sleep(0.5);',
+          query: 'SELECT sleep(1.5);',
           database: '',
         }
         cy.task('queryDB', { ...queryData })
@@ -269,7 +271,7 @@ describe('SlowQuery list page', () => {
 
       it('Search item with space', () => {
         cy.get('[data-e2e=slow_query_search]')
-          .type(' select sleep\\(1\\) {enter}')
+          .type(' SELECT sleep\\(1\\) {enter}')
           .then(() => {
             cy.get('[data-automation-key=query]').should('has.length', 1)
           })
@@ -284,7 +286,7 @@ describe('SlowQuery list page', () => {
       })
 
       it('Type search without pressing enter then reload', () => {
-        cy.get('[data-e2e=slow_query_search]').type(' select sleep\\(1\\)')
+        cy.get('[data-e2e=slow_query_search]').type(' SELECT sleep\\(1\\)')
 
         cy.reload()
         cy.get('[data-automation-key=query]').should('has.length', 3)
@@ -341,7 +343,7 @@ describe('SlowQuery list page', () => {
           })
       })
 
-      it('Hover selected columns', () => {
+      it('Hover on columns selector and check selected fileds ', () => {
         cy.get('[data-e2e=columns_selector_popover]')
           .trigger('mouseover')
           .then(() => {
@@ -362,7 +364,7 @@ describe('SlowQuery list page', () => {
           })
       })
 
-      it('Check all columns', () => {
+      it('Select all column fileds', () => {
         cy.get('[data-e2e=columns_selector_popover]')
           .trigger('mouseover')
           .then(() => {
@@ -376,7 +378,7 @@ describe('SlowQuery list page', () => {
           })
       })
 
-      it('Reset selected columns', () => {
+      it('Reset selected column fields', () => {
         cy.get('[data-e2e=columns_selector_popover]')
           .trigger('mouseover')
           .then(() => {
@@ -390,7 +392,7 @@ describe('SlowQuery list page', () => {
           })
       })
 
-      it('Check orbitary column', () => {
+      it('Select an orbitary column field', () => {
         cy.get('[data-e2e=columns_selector_popover]')
           .trigger('mouseover')
           .then(() => {
@@ -407,7 +409,7 @@ describe('SlowQuery list page', () => {
           })
       })
 
-      it('Uncheck last select orbitary column', () => {
+      it('UnCheck last selected orbitary column field', () => {
         cy.get('[data-e2e=columns_selector_popover]')
           .trigger('mouseover')
           .then(() => {
@@ -446,27 +448,14 @@ describe('SlowQuery list page', () => {
           })
       })
     })
+  })
 
-    describe('Table list order', () => {
-      it('Default order', () => {
-        cy.get('[data-automation-key=timestamp]')
-          .each(($query, $idx, $queries) => {
-            cy.wrap($query).invoke('text').as(`time${$idx}`)
-          })
-          .then(() => {
-            const time1 = dayjs(cy.get('@time1'))
-            const time2 = dayjs(cy.get('@time2'))
-            cy.get('@time0').should('be.gt', time1)
-            cy.get('@time1').should('be.gt', time2)
-          })
-      })
-    })
-
+  describe('Refresh table list', () => {
     it('Click refresh will update table list', () => {
       cy.get('[data-automation-key=query]').should('have.length', 3)
 
       const queryData = {
-        query: 'SELECT sleep(0.6)',
+        query: 'SELECT sleep(1.2)',
       }
 
       cy.task('queryDB', { ...queryData })
@@ -478,18 +467,126 @@ describe('SlowQuery list page', () => {
           cy.get('[data-automation-key=query]').should('have.length', 4)
         })
     })
+  })
 
-    describe('Go to detail page', () => {
-      it('', () => {
-        cy.get('[data-automation-key=query]').eq(0).as('firstSlowQuery')
-        cy.get('[data-automation-key=timestamp]')
-          .eq(0)
-          .as('firstSlowQueryTimeStamp')
-        cy.get('[data-automationid=ListCell]')
-          .eq(0)
-          .click()
-          .then(() => {})
-      })
+  describe('Table list order', () => {
+    it('Default order(desc) by Timestamp', () => {
+      cy.get('[data-automation-key=query]')
+        .eq(0)
+        .should('have.text', 'SELECT sleep(1.2);')
+      cy.get('[data-automation-key=query]')
+        .eq(1)
+        .should('have.text', 'SELECT sleep(1.5);')
+      cy.get('[data-automation-key=query]')
+        .eq(2)
+        .should('have.text', 'SELECT sleep(2);')
+      cy.get('[data-automation-key=query]')
+        .eq(3)
+        .should('have.text', 'SELECT sleep(1);')
+    })
+
+    it('Asc order by Timestamp', () => {
+      cy.get('[data-item-key=timestamp]')
+        .should('be.visible')
+        .click()
+        .then(() => {
+          cy.get('[data-automation-key=query]')
+            .eq(0)
+            .should('have.text', 'SELECT sleep(1);')
+          cy.get('[data-automation-key=query]')
+            .eq(1)
+            .should('have.text', 'SELECT sleep(2);')
+          cy.get('[data-automation-key=query]')
+            .eq(2)
+            .should('have.text', 'SELECT sleep(1.5);')
+          cy.get('[data-automation-key=query]')
+            .eq(3)
+            .should('have.text', 'SELECT sleep(1.2);')
+        })
+    })
+
+    it('Desc/Asc order by Latency', () => {
+      cy.get('[data-item-key=query_time]')
+        .should('be.visible')
+        .click()
+        .then(() => {
+          // Desc order by Latency
+          cy.get('[data-automation-key=query]')
+            .eq(0)
+            .should('have.text', 'SELECT sleep(2);')
+          cy.get('[data-automation-key=query]')
+            .eq(1)
+            .should('have.text', 'SELECT sleep(1.5);')
+          cy.get('[data-automation-key=query]')
+            .eq(2)
+            .should('have.text', 'SELECT sleep(1.2);')
+          cy.get('[data-automation-key=query]')
+            .eq(3)
+            .should('have.text', 'SELECT sleep(1);')
+        })
+        .then(() => {
+          // Asc order by Latency
+          cy.get('[data-item-key=query_time]')
+            .should('be.visible')
+            .click()
+            .then(() => {
+              cy.get('[data-automation-key=query]')
+                .eq(0)
+                .should('have.text', 'SELECT sleep(1);')
+              cy.get('[data-automation-key=query]')
+                .eq(1)
+                .should('have.text', 'SELECT sleep(1.2);')
+              cy.get('[data-automation-key=query]')
+                .eq(2)
+                .should('have.text', 'SELECT sleep(1.5);')
+              cy.get('[data-automation-key=query]')
+                .eq(3)
+                .should('have.text', 'SELECT sleep(2);')
+            })
+        })
     })
   })
+
+  describe('Go to slow query detail page', () => {
+    it('Click first slow query and go to detail page', () => {
+      cy.get('[data-automationid=ListCell]')
+        .eq(0)
+        .click()
+        .then(() => {
+          cy.url().should('include', 'slow_query/detail')
+          cy.get('[data-e2e=syntax_highlighter]').should(
+            'have.text',
+            'SELECT sleep(1.2);'
+          )
+        })
+    })
+  })
+
+  // describe('Export slow query CSV ', () => {
+  //   it('validate Csv File', () => {
+  //     const downloadsFolder = Cypress.config('downloadsFolder')
+  //     const downloadedFilename = path.join(downloadsFolder, '*.csv')
+
+  //     console.log('downloadedFilename', downloadedFilename)
+  //     cy.get('[data-e2e=slow_query_export_menu]')
+  //       .trigger('mouseover')
+  //       .then(() => {
+  //         cy.get('[data-e2e=slow_query_export_btn]').click().then(() => {
+  //           cy.reload()
+  //         })
+  //         cy.log('**read downloaded file**')
+
+  //         // file path is relative to the working folder
+  //         console.log('inside, ownloadedFilename', downloadedFilename)
+
+  //         // browser might take a while to download the file,
+  //         // so use "cy.readFile" to retry until the file exists
+  //         // and has length - and we assume that it has finished downloading then
+  //         cy.readFile(downloadedFilename, { timeout: 15000 })
+  //           .should('have.length.gt', 1)
+  //           // parse CSV text into objects
+  //           .then(validateCsvList)
+  //       })
+  //   })
+  // })
 })
diff --git a/ui/cypress/integration/utils.js b/ui/cypress/integration/utils.js
new file mode 100644
index 0000000000..184a55202d
--- /dev/null
+++ b/ui/cypress/integration/utils.js
@@ -0,0 +1,34 @@
+// @ts-check
+const path = require('path')
+// const neatCSV = require('neat-csv')
+
+/**
+ * Delete the downloads folder to make sure the test has "clean"
+ * slate before starting.
+ */
+export const deleteDownloadsFolder = () => {
+  const downloadsFolder = Cypress.config('downloadsFolder')
+
+  cy.task('deleteFolder', downloadsFolder)
+}
+
+/**
+ * @param {string} csv
+ */
+export const validateCsv = (csv) => {
+  cy.wrap(csv).then(validateCsvList)
+}
+
+export const validateCsvList = (list) => {
+  console.log('list is', list)
+}
+
+/**
+ * @param {string} name File name in the downloads folder
+ */
+export const validateCsvFile = (name) => {
+  const downloadsFolder = Cypress.config('downloadsFolder')
+  const filename = path.join(downloadsFolder, name)
+
+  cy.readFile(filename, 'utf8').then(validateCsv)
+}
diff --git a/ui/cypress/plugins/index.js b/ui/cypress/plugins/index.js
index ba720a5a65..fe4f71341b 100644
--- a/ui/cypress/plugins/index.js
+++ b/ui/cypress/plugins/index.js
@@ -38,6 +38,22 @@ function queryTestDB(query, password, database) {
   })
 }
 
+function deleteTestFolder(folderName) {
+  console.log('deleting folder %s', folderName)
+
+  return new Promise((resolve, reject) => {
+    rmdir(folderName, { maxRetries: 10, recursive: true }, (err) => {
+      if (err && err.code !== 'ENOENT') {
+        console.error(err)
+
+        return reject(err)
+      }
+
+      resolve(null)
+    })
+  })
+}
+
 /**
  * @type {Cypress.PluginConfig}
  */
@@ -58,6 +74,10 @@ module.exports = (on, config) => {
     queryDB: ({ query, password = '', database = 'mysql' }) => {
       return queryTestDB(query, password, database)
     },
+
+    deleteFolder: (folderName) => {
+      return deleteTestFolder(folderName)
+    },
   })
 
   return config
diff --git a/ui/lib/apps/SlowQuery/pages/Detail/index.tsx b/ui/lib/apps/SlowQuery/pages/Detail/index.tsx
index 56db7060a0..d10193e713 100644
--- a/ui/lib/apps/SlowQuery/pages/Detail/index.tsx
+++ b/ui/lib/apps/SlowQuery/pages/Detail/index.tsx
@@ -105,10 +105,7 @@ function DetailPage() {
                       <HighlightSQL sql={data.query!} compact />
                     }
                   >
-                    <HighlightSQL
-                      sql={data.query!}
-                      data-e2e="detail_expand_query"
-                    />
+                    <HighlightSQL sql={data.query!} />
                   </Expand>
                 </Descriptions.Item>
                 {(() => {
diff --git a/ui/lib/apps/SlowQuery/pages/List/index.tsx b/ui/lib/apps/SlowQuery/pages/List/index.tsx
index 344c960959..f696eac7c5 100644
--- a/ui/lib/apps/SlowQuery/pages/List/index.tsx
+++ b/ui/lib/apps/SlowQuery/pages/List/index.tsx
@@ -88,7 +88,12 @@ function List() {
 
   const dropdownMenu = (
     <Menu onClick={menuItemClick}>
-      <Menu.Item key="export" disabled={downloading} icon={<ExportOutlined />}>
+      <Menu.Item
+        key="export"
+        disabled={downloading}
+        icon={<ExportOutlined />}
+        data-e2e="slow_query_export_btn"
+      >
         {downloading
           ? t('slow_query.toolbar.exporting')
           : t('slow_query.toolbar.export')}
@@ -178,7 +183,10 @@ function List() {
               )}
             </Tooltip>
             <Dropdown overlay={dropdownMenu} placement="bottomRight">
-              <div style={{ cursor: 'pointer' }}>
+              <div
+                style={{ cursor: 'pointer' }}
+                data-e2e="slow_query_export_menu"
+              >
                 <MenuOutlined />
               </div>
             </Dropdown>
diff --git a/ui/lib/apps/SlowQuery/utils/useSlowQueryTableController.ts b/ui/lib/apps/SlowQuery/utils/useSlowQueryTableController.ts
index 0b3e3a9f57..c468cba068 100644
--- a/ui/lib/apps/SlowQuery/utils/useSlowQueryTableController.ts
+++ b/ui/lib/apps/SlowQuery/utils/useSlowQueryTableController.ts
@@ -109,6 +109,7 @@ export default function useSlowQueryTableController(
   const queryTimeRange = useMemo(() => {
     const [beginTime, endTime] = calcTimeRange(queryOptions.timeRange)
     return { beginTime, endTime }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [queryOptions, refreshTimes])
 
   function setQueryOptions(newOptions: ISlowQueryOptions) {
diff --git a/ui/lib/components/HighlightSQL/index.tsx b/ui/lib/components/HighlightSQL/index.tsx
index f14ef3adea..e089256915 100644
--- a/ui/lib/components/HighlightSQL/index.tsx
+++ b/ui/lib/components/HighlightSQL/index.tsx
@@ -48,6 +48,7 @@ function HighlightSQL({ sql, compact, theme = 'light' }: Props) {
         overflowX: 'hidden',
       }}
       PreTag={Pre}
+      data-e2e="syntax_highlighter"
     >
       {formattedSql}
     </SyntaxHighlighter>
diff --git a/ui/package.json b/ui/package.json
index 7425072546..5efb1e48e8 100755
--- a/ui/package.json
+++ b/ui/package.json
@@ -129,6 +129,7 @@
     "less-loader": "^5.0.0",
     "live-server": "^1.2.1",
     "mysql2": "^2.3.3",
+    "neat-csv": "^7.0.0",
     "path-browserify": "^1.0.1",
     "prettier": "2.4.1",
     "pretty-quick": "^2.0.1",
diff --git a/ui/yarn.lock b/ui/yarn.lock
index fc43d998c6..0cb8adedac 100755
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -8740,6 +8740,13 @@ csstype@^2.5.7:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.11.tgz#452f4d024149ecf260a852b025e36562a253ffc5"
   integrity sha512-l8YyEC9NBkSm783PFTvh0FmJy7s5pFKrDp49ZL7zBGX3fWkO+N4EEyan1qqp8cwPLDcD0OSdyY6hAMoxp34JFw==
 
+csv-parser@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/csv-parser/-/csv-parser-3.0.0.tgz#b88a6256d79e090a97a1b56451f9327b01d710e7"
+  integrity sha512-s6OYSXAK3IdKqYO33y09jhypG/bSDHPuyCme/IdEHfWpLf/jKcpitVFyOC6UemgGk8v7Q5u2XE0vvwmanxhGlQ==
+  dependencies:
+    minimist "^1.2.0"
+
 cuint@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/cuint/-/cuint-0.2.2.tgz#408086d409550c2631155619e9fa7bcadc3b991b"
@@ -11582,7 +11589,7 @@ get-stream@^5.1.0:
   dependencies:
     pump "^3.0.0"
 
-get-stream@^6.0.0:
+get-stream@^6.0.0, get-stream@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
   integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
@@ -15577,6 +15584,14 @@ nconf@^0.10.0:
     secure-keys "^1.0.0"
     yargs "^3.19.0"
 
+neat-csv@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/neat-csv/-/neat-csv-7.0.0.tgz#3edfd4fde087ebbeb2136b87c10a81a1ea70a524"
+  integrity sha512-ZmiKZNkdqb6hrBU3lDHm52vWXs6CuFPfw6ZoJZNnY7IIpfA1fxM0UPPi+iQpqQo82qcLbsZPwLkQ1cdrMDtwwA==
+  dependencies:
+    csv-parser "^3.0.0"
+    get-stream "^6.0.1"
+
 needle@^2.5.2:
   version "2.9.1"
   resolved "https://registry.yarnpkg.com/needle/-/needle-2.9.1.tgz#22d1dffbe3490c2b83e301f7709b6736cd8f2684"

From 3294031e94d161de1ae6f14e3fa0af92861ffa2f Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Thu, 27 Jan 2022 21:55:00 +0800
Subject: [PATCH 12/41] update export slow query csv

---
 .../integration/slow_query/list.spec.js       | 77 ++++++++++++-------
 ui/cypress/integration/utils.js               | 27 ++-----
 ui/cypress/plugins/index.js                   | 14 ++--
 ui/package.json                               |  2 +-
 ui/yarn.lock                                  | 29 ++++---
 5 files changed, 81 insertions(+), 68 deletions(-)

diff --git a/ui/cypress/integration/slow_query/list.spec.js b/ui/cypress/integration/slow_query/list.spec.js
index 16bb9868ea..10cb180fdd 100644
--- a/ui/cypress/integration/slow_query/list.spec.js
+++ b/ui/cypress/integration/slow_query/list.spec.js
@@ -1,8 +1,9 @@
 // Copyright 2022 PingCAP, Inc. Licensed under Apache-2.0.
 
 import dayjs from 'dayjs'
-import { validateCsvList, validateCsvFile } from '../utils'
+import { validateCSVList, deleteDownloadsFolder } from '../utils'
 
+const neatCSV = require('neat-csv')
 const path = require('path')
 
 describe('SlowQuery list page', () => {
@@ -19,6 +20,8 @@ describe('SlowQuery list page', () => {
 
     // Wait TiUP Playground
     cy.exec('bash ../scripts/wait_tiup_playground.sh 1 300 &> wait_tiup.log')
+
+    deleteDownloadsFolder()
   })
 
   beforeEach(function () {
@@ -459,7 +462,7 @@ describe('SlowQuery list page', () => {
       }
 
       cy.task('queryDB', { ...queryData })
-      cy.wait(500)
+      cy.wait(1000)
 
       cy.get('[data-e2e=slow_query_refresh]')
         .click()
@@ -562,31 +565,47 @@ describe('SlowQuery list page', () => {
     })
   })
 
-  // describe('Export slow query CSV ', () => {
-  //   it('validate Csv File', () => {
-  //     const downloadsFolder = Cypress.config('downloadsFolder')
-  //     const downloadedFilename = path.join(downloadsFolder, '*.csv')
-
-  //     console.log('downloadedFilename', downloadedFilename)
-  //     cy.get('[data-e2e=slow_query_export_menu]')
-  //       .trigger('mouseover')
-  //       .then(() => {
-  //         cy.get('[data-e2e=slow_query_export_btn]').click().then(() => {
-  //           cy.reload()
-  //         })
-  //         cy.log('**read downloaded file**')
-
-  //         // file path is relative to the working folder
-  //         console.log('inside, ownloadedFilename', downloadedFilename)
-
-  //         // browser might take a while to download the file,
-  //         // so use "cy.readFile" to retry until the file exists
-  //         // and has length - and we assume that it has finished downloading then
-  //         cy.readFile(downloadedFilename, { timeout: 15000 })
-  //           .should('have.length.gt', 1)
-  //           // parse CSV text into objects
-  //           .then(validateCsvList)
-  //       })
-  //   })
-  // })
+  describe('Export slow query CSV ', () => {
+    it('validate CSV File', () => {
+      const downloadsFolder = Cypress.config('downloadsFolder')
+      let downloadedFilename
+
+      cy.get('[data-e2e=slow_query_export_menu]')
+        .trigger('mouseover')
+        .then(() => {
+          cy.window()
+            .document()
+            .then(function (doc) {
+              // Clicking link to download file causes page load timeout
+              // it's a workround that fires a new page load event to skip this issue
+              doc.addEventListener('click', () => {
+                setTimeout(function () {
+                  doc.location.reload()
+                }, 5000)
+              })
+
+              // Make sure the file exists
+              cy.intercept(
+                `${Cypress.env('apiUrl')}slow_query/download?token=*`
+              ).as('download_slow_query')
+
+              cy.get('[data-e2e=slow_query_export_btn]').click()
+            })
+        })
+        .then(() => {
+          cy.wait('@download_slow_query').then((res) => {
+            // join downloadFolder with CSV filename
+            downloadedFilename = path.join(
+              downloadsFolder,
+              res.response.headers['content-disposition'].match(filenameRegx)[1]
+            )
+
+            cy.readFile(downloadedFilename, { timeout: 15000 })
+              // parse CSV text into objects
+              .then(neatCSV)
+              .then(validateCSVList)
+          })
+        })
+    })
+  })
 })
diff --git a/ui/cypress/integration/utils.js b/ui/cypress/integration/utils.js
index 184a55202d..cbf0fadf6f 100644
--- a/ui/cypress/integration/utils.js
+++ b/ui/cypress/integration/utils.js
@@ -1,7 +1,3 @@
-// @ts-check
-const path = require('path')
-// const neatCSV = require('neat-csv')
-
 /**
  * Delete the downloads folder to make sure the test has "clean"
  * slate before starting.
@@ -13,22 +9,13 @@ export const deleteDownloadsFolder = () => {
 }
 
 /**
- * @param {string} csv
- */
-export const validateCsv = (csv) => {
-  cy.wrap(csv).then(validateCsvList)
-}
-
-export const validateCsvList = (list) => {
-  console.log('list is', list)
-}
-
-/**
- * @param {string} name File name in the downloads folder
+ * @param {string[]} list List parsed from CSV file
  */
-export const validateCsvFile = (name) => {
-  const downloadsFolder = Cypress.config('downloadsFolder')
-  const filename = path.join(downloadsFolder, name)
+export const validateCSVList = (list) => {
+  expect(list).to.have.length(4)
 
-  cy.readFile(filename, 'utf8').then(validateCsv)
+  expect(list[0].query).to.equal('SELECT sleep(1.2);')
+  expect(list[1].query).to.equal('SELECT sleep(1.5);')
+  expect(list[2].query).to.equal('SELECT sleep(2);')
+  expect(list[3].query).to.equal('SELECT sleep(1);')
 }
diff --git a/ui/cypress/plugins/index.js b/ui/cypress/plugins/index.js
index fe4f71341b..5b46f92821 100644
--- a/ui/cypress/plugins/index.js
+++ b/ui/cypress/plugins/index.js
@@ -13,6 +13,7 @@
 // the project's config changing)
 
 const mysql = require('mysql2')
+const { rmdir } = require('fs')
 
 function queryTestDB(query, password, database) {
   const dbConfig = {
@@ -38,11 +39,9 @@ function queryTestDB(query, password, database) {
   })
 }
 
-function deleteTestFolder(folderName) {
-  console.log('deleting folder %s', folderName)
-
+function deleteTestFolder(folderPath) {
   return new Promise((resolve, reject) => {
-    rmdir(folderName, { maxRetries: 10, recursive: true }, (err) => {
+    rmdir(folderPath, { maxRetries: 10, recursive: true }, (err) => {
       if (err && err.code !== 'ENOENT') {
         console.error(err)
 
@@ -69,14 +68,15 @@ module.exports = (on, config) => {
 
   config.env.apiUrl = 'http://127.0.0.1:12333/dashboard/api/'
 
-  // Usage: cy.task('queryDB', { ...queryData })
   on('task', {
+    // Usage: cy.task('queryDB', { ...queryData })
     queryDB: ({ query, password = '', database = 'mysql' }) => {
       return queryTestDB(query, password, database)
     },
 
-    deleteFolder: (folderName) => {
-      return deleteTestFolder(folderName)
+    // Usage: cy.task('deleteFolder', deleteFolderPath)
+    deleteFolder: (folderPath) => {
+      return deleteTestFolder(folderPath)
     },
   })
 
diff --git a/ui/package.json b/ui/package.json
index 5efb1e48e8..3ff48bb7e3 100755
--- a/ui/package.json
+++ b/ui/package.json
@@ -129,7 +129,7 @@
     "less-loader": "^5.0.0",
     "live-server": "^1.2.1",
     "mysql2": "^2.3.3",
-    "neat-csv": "^7.0.0",
+    "neat-csv": "5.1.0",
     "path-browserify": "^1.0.1",
     "prettier": "2.4.1",
     "pretty-quick": "^2.0.1",
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 0cb8adedac..d201da0680 100755
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -8740,12 +8740,13 @@ csstype@^2.5.7:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.11.tgz#452f4d024149ecf260a852b025e36562a253ffc5"
   integrity sha512-l8YyEC9NBkSm783PFTvh0FmJy7s5pFKrDp49ZL7zBGX3fWkO+N4EEyan1qqp8cwPLDcD0OSdyY6hAMoxp34JFw==
 
-csv-parser@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/csv-parser/-/csv-parser-3.0.0.tgz#b88a6256d79e090a97a1b56451f9327b01d710e7"
-  integrity sha512-s6OYSXAK3IdKqYO33y09jhypG/bSDHPuyCme/IdEHfWpLf/jKcpitVFyOC6UemgGk8v7Q5u2XE0vvwmanxhGlQ==
+csv-parser@^2.3.0:
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/csv-parser/-/csv-parser-2.3.5.tgz#6b3bf0907684914ff2c5abfbadab111a69eae5db"
+  integrity sha512-LCHolC4AlNwL+5EuD5LH2VVNKpD8QixZW2zzK1XmrVYUaslFY4c5BooERHOCIubG9iv/DAyFjs4x0HvWNZuyWg==
   dependencies:
     minimist "^1.2.0"
+    through2 "^3.0.1"
 
 cuint@^0.2.2:
   version "0.2.2"
@@ -11589,7 +11590,7 @@ get-stream@^5.1.0:
   dependencies:
     pump "^3.0.0"
 
-get-stream@^6.0.0, get-stream@^6.0.1:
+get-stream@^6.0.0:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
   integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
@@ -15584,13 +15585,14 @@ nconf@^0.10.0:
     secure-keys "^1.0.0"
     yargs "^3.19.0"
 
-neat-csv@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/neat-csv/-/neat-csv-7.0.0.tgz#3edfd4fde087ebbeb2136b87c10a81a1ea70a524"
-  integrity sha512-ZmiKZNkdqb6hrBU3lDHm52vWXs6CuFPfw6ZoJZNnY7IIpfA1fxM0UPPi+iQpqQo82qcLbsZPwLkQ1cdrMDtwwA==
+neat-csv@5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/neat-csv/-/neat-csv-5.1.0.tgz#521492a49dfed1577b3fc3cf7397c81e802659bb"
+  integrity sha512-P5rOGmHN6P/h0ZxEnVUhSuOMcyv2X95Q+dQxMEvqg+Qb0tw8VmHuhQmNFNv1xjD4+OCD1oWKN5rC022gGULXcA==
   dependencies:
-    csv-parser "^3.0.0"
-    get-stream "^6.0.1"
+    csv-parser "^2.3.0"
+    get-stream "^5.1.0"
+    to-readable-stream "^2.1.0"
 
 needle@^2.5.2:
   version "2.9.1"
@@ -21091,6 +21093,11 @@ to-object-path@^0.3.0:
   dependencies:
     kind-of "^3.0.2"
 
+to-readable-stream@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/to-readable-stream/-/to-readable-stream-2.1.0.tgz#82880316121bea662cdc226adb30addb50cb06e8"
+  integrity sha512-o3Qa6DGg1CEXshSdvWNX2sN4QHqg03SPq7U6jPXRahlQdl5dK8oXjkU/2/sGrnOZKeGV1zLSO8qPwyKklPPE7w==
+
 to-regex-range@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-2.1.1.tgz#7c80c17b9dfebe599e27367e0d4dd5590141db38"

From b2ae7c30925ea816e97e3197bd9e9656f5f8f272 Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Thu, 27 Jan 2022 22:27:22 +0800
Subject: [PATCH 13/41] add missing regex

---
 ui/cypress/integration/slow_query/list.spec.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/cypress/integration/slow_query/list.spec.js b/ui/cypress/integration/slow_query/list.spec.js
index 10cb180fdd..7cde3c050a 100644
--- a/ui/cypress/integration/slow_query/list.spec.js
+++ b/ui/cypress/integration/slow_query/list.spec.js
@@ -595,6 +595,7 @@ describe('SlowQuery list page', () => {
         .then(() => {
           cy.wait('@download_slow_query').then((res) => {
             // join downloadFolder with CSV filename
+            const filenameRegx = /"(.*)"/
             downloadedFilename = path.join(
               downloadsFolder,
               res.response.headers['content-disposition'].match(filenameRegx)[1]

From f70a41716813a82f347a1cf7b329af4c621967d6 Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Thu, 27 Jan 2022 23:00:00 +0800
Subject: [PATCH 14/41] update slow query table order

---
 .../integration/slow_query/list.spec.js       | 91 +++++++++----------
 1 file changed, 41 insertions(+), 50 deletions(-)

diff --git a/ui/cypress/integration/slow_query/list.spec.js b/ui/cypress/integration/slow_query/list.spec.js
index 7cde3c050a..f291496ec8 100644
--- a/ui/cypress/integration/slow_query/list.spec.js
+++ b/ui/cypress/integration/slow_query/list.spec.js
@@ -474,89 +474,80 @@ describe('SlowQuery list page', () => {
 
   describe('Table list order', () => {
     it('Default order(desc) by Timestamp', () => {
-      cy.get('[data-automation-key=query]')
-        .eq(0)
-        .should('have.text', 'SELECT sleep(1.2);')
-      cy.get('[data-automation-key=query]')
-        .eq(1)
-        .should('have.text', 'SELECT sleep(1.5);')
-      cy.get('[data-automation-key=query]')
-        .eq(2)
-        .should('have.text', 'SELECT sleep(2);')
-      cy.get('[data-automation-key=query]')
-        .eq(3)
-        .should('have.text', 'SELECT sleep(1);')
+      const defaultOrderByTimestamp = [
+        'SELECT sleep(1.2);',
+        'SELECT sleep(1.5);',
+        'SELECT sleep(2);',
+        'SELECT sleep(1);',
+      ]
+      cy.get('[data-automation-key=query]').each(($query, $idx) => {
+        cy.wrap($query).should('have.text', defaultOrderByTimestamp[$idx])
+      })
     })
 
     it('Asc order by Timestamp', () => {
+      const AscOrderByTimestamp = [
+        'SELECT sleep(1);',
+        'SELECT sleep(2);',
+        'SELECT sleep(1.5);',
+        'SELECT sleep(1.2);',
+      ]
+
       cy.get('[data-item-key=timestamp]')
         .should('be.visible')
         .click()
         .then(() => {
-          cy.get('[data-automation-key=query]')
-            .eq(0)
-            .should('have.text', 'SELECT sleep(1);')
-          cy.get('[data-automation-key=query]')
-            .eq(1)
-            .should('have.text', 'SELECT sleep(2);')
-          cy.get('[data-automation-key=query]')
-            .eq(2)
-            .should('have.text', 'SELECT sleep(1.5);')
-          cy.get('[data-automation-key=query]')
-            .eq(3)
-            .should('have.text', 'SELECT sleep(1.2);')
+          cy.get('[data-automation-key=query]').each(($query, $idx) => {
+            cy.wrap($query).should('have.text', AscOrderByTimestamp[$idx])
+          })
         })
     })
 
     it('Desc/Asc order by Latency', () => {
+      const DescOrderByLatency = [
+        'SELECT sleep(2);',
+        'SELECT sleep(1.5);',
+        'SELECT sleep(1.2);',
+        'SELECT sleep(1);',
+      ]
+
       cy.get('[data-item-key=query_time]')
         .should('be.visible')
         .click()
         .then(() => {
           // Desc order by Latency
-          cy.get('[data-automation-key=query]')
-            .eq(0)
-            .should('have.text', 'SELECT sleep(2);')
-          cy.get('[data-automation-key=query]')
-            .eq(1)
-            .should('have.text', 'SELECT sleep(1.5);')
-          cy.get('[data-automation-key=query]')
-            .eq(2)
-            .should('have.text', 'SELECT sleep(1.2);')
-          cy.get('[data-automation-key=query]')
-            .eq(3)
-            .should('have.text', 'SELECT sleep(1);')
+          cy.get('[data-automation-key=query]').each(($query, $idx) => {
+            cy.wrap($query).should('have.text', DescOrderByLatency[$idx])
+          })
         })
         .then(() => {
+          const AscOrderByLatency = [
+            'SELECT sleep(1);',
+            'SELECT sleep(1.2);',
+            'SELECT sleep(1.5);',
+            'SELECT sleep(2);',
+          ]
+
           // Asc order by Latency
           cy.get('[data-item-key=query_time]')
             .should('be.visible')
             .click()
             .then(() => {
-              cy.get('[data-automation-key=query]')
-                .eq(0)
-                .should('have.text', 'SELECT sleep(1);')
-              cy.get('[data-automation-key=query]')
-                .eq(1)
-                .should('have.text', 'SELECT sleep(1.2);')
-              cy.get('[data-automation-key=query]')
-                .eq(2)
-                .should('have.text', 'SELECT sleep(1.5);')
-              cy.get('[data-automation-key=query]')
-                .eq(3)
-                .should('have.text', 'SELECT sleep(2);')
+              cy.get('[data-automation-key=query]').each(($query, $idx) => {
+                cy.wrap($query).should('have.text', AscOrderByLatency[$idx])
+              })
             })
         })
     })
   })
 
   describe('Go to slow query detail page', () => {
-    it('Click first slow query and go to detail page', () => {
+    it('Click first slow query and go to detail page', function () {
       cy.get('[data-automationid=ListCell]')
         .eq(0)
         .click()
         .then(() => {
-          cy.url().should('include', 'slow_query/detail')
+          cy.url().should('include', `${this.uri.slow_query}/detail`)
           cy.get('[data-e2e=syntax_highlighter]').should(
             'have.text',
             'SELECT sleep(1.2);'

From 38b983b98b833cf1cd66750c9dad800535b423fe Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Thu, 17 Feb 2022 11:52:05 +0800
Subject: [PATCH 15/41] update apiURL

---
 ui/cypress/integration/login/user_login.spec.js       | 2 +-
 ui/cypress/integration/slow_query/list.compat_spec.js | 6 +++---
 ui/cypress/integration/slow_query/list.spec.js        | 8 ++++----
 ui/cypress/plugins/index.js                           | 2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/ui/cypress/integration/login/user_login.spec.js b/ui/cypress/integration/login/user_login.spec.js
index 3587d3639c..023499c5aa 100644
--- a/ui/cypress/integration/login/user_login.spec.js
+++ b/ui/cypress/integration/login/user_login.spec.js
@@ -26,7 +26,7 @@ describe('Root User Login', () => {
   })
 
   it('root login with incorrect pwd', () => {
-    cy.intercept('POST', `${Cypress.env('apiUrl')}/user/login`).as('login')
+    cy.intercept('POST', `${Cypress.env('apiBasePath')}user/login`).as('login')
 
     // {enter} causes the form to submit
     cy.get('[data-e2e="signin_password_input"]').type(
diff --git a/ui/cypress/integration/slow_query/list.compat_spec.js b/ui/cypress/integration/slow_query/list.compat_spec.js
index 1000530f84..763658043f 100644
--- a/ui/cypress/integration/slow_query/list.compat_spec.js
+++ b/ui/cypress/integration/slow_query/list.compat_spec.js
@@ -17,9 +17,9 @@ describe('SlowQuery list compatibility test', () => {
   describe('Available fields', () => {
     skipOn(Cypress.env('FEATURE_VERSION') !== '6.0.0', () => {
       it('Show all available fields', () => {
-        cy.intercept(`${Cypress.env('apiUrl')}slow_query/available_fields`).as(
-          'getAvailableFields'
-        )
+        cy.intercept(
+          `${Cypress.env('apiBasePath')}slow_query/available_fields`
+        ).as('getAvailableFields')
         cy.wait('@getAvailableFields')
 
         const availableFields = [
diff --git a/ui/cypress/integration/slow_query/list.spec.js b/ui/cypress/integration/slow_query/list.spec.js
index f291496ec8..2aef3cc907 100644
--- a/ui/cypress/integration/slow_query/list.spec.js
+++ b/ui/cypress/integration/slow_query/list.spec.js
@@ -53,7 +53,7 @@ describe('SlowQuery list page', () => {
 
       // stub out a response body
       cy.intercept(
-        `${Cypress.env('apiUrl')}slow_query/list*`,
+        `${Cypress.env('apiBasePath')}slow_query/list*`,
         staticResponse
       ).as('slow_query_list')
       cy.wait('@slow_query_list').then(() => {
@@ -108,7 +108,7 @@ describe('SlowQuery list page', () => {
 
       it('Show all slow_query', () => {
         const options = {
-          url: `${Cypress.env('apiUrl')}slow_query/list`,
+          url: `${Cypress.env('apiBasePath')}slow_query/list`,
           qs: {
             begin_time: now - 1800,
             desc: true,
@@ -223,7 +223,7 @@ describe('SlowQuery list page', () => {
       })
 
       const options = {
-        url: `${Cypress.env('apiUrl')}info/databases/`,
+        url: `${Cypress.env('apiBasePath')}info/databases/`,
       }
 
       it('Show all databases', () => {
@@ -577,7 +577,7 @@ describe('SlowQuery list page', () => {
 
               // Make sure the file exists
               cy.intercept(
-                `${Cypress.env('apiUrl')}slow_query/download?token=*`
+                `${Cypress.env('apiBasePath')}slow_query/download?token=*`
               ).as('download_slow_query')
 
               cy.get('[data-e2e=slow_query_export_btn]').click()
diff --git a/ui/cypress/plugins/index.js b/ui/cypress/plugins/index.js
index 979485e9d5..5353057870 100644
--- a/ui/cypress/plugins/index.js
+++ b/ui/cypress/plugins/index.js
@@ -66,7 +66,7 @@ module.exports = (on, config) => {
   config.baseUrl =
     (process.env.SERVER_URL || 'http://localhost:3001/dashboard') + '#'
 
-  config.env.apiUrl = 'http://localhost:12333/dashboard/api/'
+  config.env.apiBasePath = '/dashboard/api/'
 
   on('task', {
     // Usage: cy.task('queryDB', { ...queryData })

From c7adf6c5bfb21b6a96da3c477bf7d62e2b4a0047 Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Thu, 17 Feb 2022 15:02:24 +0800
Subject: [PATCH 16/41] fix time-range selector

---
 .../integration/slow_query/list.spec.js       | 53 +++++++------------
 1 file changed, 19 insertions(+), 34 deletions(-)

diff --git a/ui/cypress/integration/slow_query/list.spec.js b/ui/cypress/integration/slow_query/list.spec.js
index 2aef3cc907..2d05c2dc96 100644
--- a/ui/cypress/integration/slow_query/list.spec.js
+++ b/ui/cypress/integration/slow_query/list.spec.js
@@ -91,7 +91,6 @@ describe('SlowQuery list page', () => {
     })
 
     describe('Filter slow query by changing time range', () => {
-      const now = dayjs().unix()
       let defaultSlowQueryList
       let lastSlowQueryTimeStamp
       let firstQueryTimeRangeStart,
@@ -107,37 +106,25 @@ describe('SlowQuery list page', () => {
       })
 
       it('Show all slow_query', () => {
-        const options = {
-          url: `${Cypress.env('apiBasePath')}slow_query/list`,
-          qs: {
-            begin_time: now - 1800,
-            desc: true,
-            end_time: now + 100,
-            fields: 'query,timestamp,query_time,memory_max',
-            limit: 100,
-            orderBy: 'timestamp',
-          },
-        }
+        cy.intercept(`${Cypress.env('apiBasePath')}slow_query/list*`).as(
+          'slow_query'
+        )
 
-        cy.request(options).as('slow_query')
+        cy.wait('@slow_query').then((res) => {
+          defaultSlowQueryList = res.response.body
 
-        cy.get('@slow_query').then((response) => {
-          defaultSlowQueryList = response.body
           if (defaultSlowQueryList.length > 0) {
             lastSlowQueryTimeStamp = defaultSlowQueryList[0].timestamp
 
-            firstQueryTimeRangeStart = dayjs
-              .unix(lastSlowQueryTimeStamp - 12)
-              .format('YYYY-MM-DD HH:mm:ss')
-            secondQueryTimeRangeStart = dayjs
-              .unix(lastSlowQueryTimeStamp - 7)
-              .format('YYYY-MM-DD HH:mm:ss')
-            thirdQueryTimeRangeStart = dayjs
-              .unix(lastSlowQueryTimeStamp - 2)
-              .format('YYYY-MM-DD HH:mm:ss')
-            thirdQueryTimeRangeEnd = dayjs
-              .unix(lastSlowQueryTimeStamp + (5 - 2))
-              .format('YYYY-MM-DD HH:mm:ss')
+            const calTimestamp = (timestampDiff) => {
+              return dayjs
+                .unix(lastSlowQueryTimeStamp - timestampDiff)
+                .format('YYYY-MM-DD HH:mm:ss')
+            }
+            firstQueryTimeRangeStart = calTimestamp(12)
+            secondQueryTimeRangeStart = calTimestamp(7)
+            thirdQueryTimeRangeStart = calTimestamp(2)
+            thirdQueryTimeRangeEnd = calTimestamp(-3)
           }
         })
       })
@@ -222,15 +209,13 @@ describe('SlowQuery list page', () => {
         cy.get('[data-e2e=base_select_input]').should('has.text', '')
       })
 
-      const options = {
-        url: `${Cypress.env('apiBasePath')}info/databases/`,
-      }
-
       it('Show all databases', () => {
-        cy.request(options).as('databases')
+        cy.intercept(`${Cypress.env('apiBasePath')}info/databases`).as(
+          'databases'
+        )
 
-        cy.get('@databases').then((response) => {
-          const databaseList = response.body
+        cy.wait('@databases').then((res) => {
+          const databaseList = res.response.body
           cy.get('[data-e2e=base_selector]')
             .click()
             .then(() => {

From fce5ddadd19c7ddabfc7207d4ddf17033656344d Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Thu, 17 Feb 2022 15:21:11 +0800
Subject: [PATCH 17/41] update comment

---
 ui/cypress/integration/slow_query/list.spec.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/cypress/integration/slow_query/list.spec.js b/ui/cypress/integration/slow_query/list.spec.js
index 2d05c2dc96..93b7fd6c28 100644
--- a/ui/cypress/integration/slow_query/list.spec.js
+++ b/ui/cypress/integration/slow_query/list.spec.js
@@ -554,6 +554,7 @@ describe('SlowQuery list page', () => {
             .then(function (doc) {
               // Clicking link to download file causes page load timeout
               // it's a workround that fires a new page load event to skip this issue
+              // Related issue: https://github.com/cypress-io/cypress/issues/14857
               doc.addEventListener('click', () => {
                 setTimeout(function () {
                   doc.location.reload()

From a3e6ae6302a36cf320dfe18a0f43b0fd71c50204 Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Fri, 18 Feb 2022 18:05:51 +0800
Subject: [PATCH 18/41] slow query detail

---
 .../{list.spec.js => 01-list.spec.js}         |  2 +-
 .../integration/slow_query/02-detail.spec.js  | 43 +++++++++++++++++++
 ui/cypress/plugins/index.js                   |  6 +++
 ui/lib/components/CopyLink/index.tsx          |  2 +-
 ui/lib/components/Expand/index.tsx            |  8 +++-
 ui/lib/components/HighlightSQL/index.tsx      |  2 +-
 ui/package.json                               |  2 +
 ui/yarn.lock                                  | 16 ++++++-
 8 files changed, 75 insertions(+), 6 deletions(-)
 rename ui/cypress/integration/slow_query/{list.spec.js => 01-list.spec.js} (99%)
 create mode 100644 ui/cypress/integration/slow_query/02-detail.spec.js

diff --git a/ui/cypress/integration/slow_query/list.spec.js b/ui/cypress/integration/slow_query/01-list.spec.js
similarity index 99%
rename from ui/cypress/integration/slow_query/list.spec.js
rename to ui/cypress/integration/slow_query/01-list.spec.js
index 93b7fd6c28..7c9e246836 100644
--- a/ui/cypress/integration/slow_query/list.spec.js
+++ b/ui/cypress/integration/slow_query/01-list.spec.js
@@ -533,7 +533,7 @@ describe('SlowQuery list page', () => {
         .click()
         .then(() => {
           cy.url().should('include', `${this.uri.slow_query}/detail`)
-          cy.get('[data-e2e=syntax_highlighter]').should(
+          cy.get('[data-e2e=syntax_highlighter_compact]').should(
             'have.text',
             'SELECT sleep(1.2);'
           )
diff --git a/ui/cypress/integration/slow_query/02-detail.spec.js b/ui/cypress/integration/slow_query/02-detail.spec.js
new file mode 100644
index 0000000000..b614086f0b
--- /dev/null
+++ b/ui/cypress/integration/slow_query/02-detail.spec.js
@@ -0,0 +1,43 @@
+describe('Slow query detail page E2E test', () => {
+  before(() => {
+    cy.fixture('uri.json').then(function (uri) {
+      this.uri = uri
+    })
+  })
+
+  beforeEach(function () {
+    cy.login('root')
+    cy.visit(this.uri.slow_query)
+    cy.url().should('include', this.uri.slow_query)
+    cy.get('[data-automation-key=query]').eq(0).click()
+  })
+
+  describe('Query descriptions', () => {
+    it('Check sql and default format', () => {
+      // sql is collapsed by default
+      cy.get('[data-e2e=expandText]').eq(0).should('have.text', 'Expand')
+      cy.get('[data-e2e=slow_query_detail_page_query]')
+        .eq(0)
+        .find('[data-e2e=syntax_highlighter_compact]')
+        .and('have.text', 'SELECT sleep(1.2);')
+    })
+
+    it('Copy formatted sql to clipboard', () => {
+      cy.window().then((win) => {
+        cy.stub(win, 'prompt').returns(win.prompt).as('copyToClipboardPrompt')
+      })
+
+      cy.get('[data-e2e=copy_formatted_sql_to_clipboard]')
+        .realClick()
+        .then(() => {
+          cy.task('getClipboard').should('eq', 'SELECT\n  sleep(1.2);')
+        })
+
+      cy.get('[data-e2e=copy_original_sql_to_clipboard]')
+        .realClick()
+        .then(() => {
+          cy.task('getClipboard').should('eq', 'SELECT sleep(1.2);')
+        })
+    })
+  })
+})
diff --git a/ui/cypress/plugins/index.js b/ui/cypress/plugins/index.js
index 5353057870..ea4a6547a3 100644
--- a/ui/cypress/plugins/index.js
+++ b/ui/cypress/plugins/index.js
@@ -14,6 +14,7 @@
 
 const mysql = require('mysql2')
 const { rmdir } = require('fs')
+const clipboardy = require('clipboardy')
 
 function queryTestDB(query, password, database) {
   const dbConfig = {
@@ -78,6 +79,11 @@ module.exports = (on, config) => {
     deleteFolder: (folderPath) => {
       return deleteTestFolder(folderPath)
     },
+
+    // Usage: cy.task('getClipboard')
+    getClipboard: () => {
+      return clipboardy.readSync()
+    },
   })
 
   return config
diff --git a/ui/lib/components/CopyLink/index.tsx b/ui/lib/components/CopyLink/index.tsx
index c17fb4d21e..1a62550167 100644
--- a/ui/lib/components/CopyLink/index.tsx
+++ b/ui/lib/components/CopyLink/index.tsx
@@ -59,7 +59,7 @@ function CopyLink({ data, displayVariant = 'default' }: ICopyLinkProps) {
     <span>
       {!showCopied && (
         <CopyToClipboard text={data ?? ''} onCopy={handleCopy}>
-          <a>
+          <a data-e2e={`copy_${displayVariant}_to_clipboard`}>
             {t(`component.copyLink.${transKeys[displayVariant]}`)}{' '}
             <CopyOutlined />
           </a>
diff --git a/ui/lib/components/Expand/index.tsx b/ui/lib/components/Expand/index.tsx
index 53c2564a87..853af5ce85 100644
--- a/ui/lib/components/Expand/index.tsx
+++ b/ui/lib/components/Expand/index.tsx
@@ -10,7 +10,11 @@ export interface IExpandProps {
 
 function Expand({ collapsedContent, children, expanded }: IExpandProps) {
   // FIXME: Animations
-  return <div>{expanded ? children : collapsedContent ?? children}</div>
+  return (
+    <div data-e2e="slow_query_detail_page_query">
+      {expanded ? children : collapsedContent ?? children}
+    </div>
+  )
 }
 
 const translations = {
@@ -40,7 +44,7 @@ export interface IExpandLinkProps
 function Link({ expanded, ...restProps }: IExpandLinkProps) {
   const { t } = useTranslation()
   return (
-    <a {...restProps}>
+    <a {...restProps} data-e2e={`${expanded ? 'collapseText' : 'expandText'}`}>
       {expanded
         ? t('component.expandLink.collapseText')
         : t('component.expandLink.expandText')}
diff --git a/ui/lib/components/HighlightSQL/index.tsx b/ui/lib/components/HighlightSQL/index.tsx
index e089256915..97b897a839 100644
--- a/ui/lib/components/HighlightSQL/index.tsx
+++ b/ui/lib/components/HighlightSQL/index.tsx
@@ -48,7 +48,7 @@ function HighlightSQL({ sql, compact, theme = 'light' }: Props) {
         overflowX: 'hidden',
       }}
       PreTag={Pre}
-      data-e2e="syntax_highlighter"
+      data-e2e={`syntax_highlighter_${compact ? 'compact' : 'original'}`}
     >
       {formattedSql}
     </SyntaxHighlighter>
diff --git a/ui/package.json b/ui/package.json
index 613d873fe6..133da57caf 100755
--- a/ui/package.json
+++ b/ui/package.json
@@ -25,6 +25,7 @@
     "axios": "^0.21.4",
     "bulma": "^0.9.0",
     "classnames": "^2.2.6",
+    "cypress-real-events": "^1.7.0",
     "d3": "^5.16.0",
     "dayjs": "^1.10.7",
     "echarts": "^4.8.0",
@@ -111,6 +112,7 @@
     "babel-plugin-istanbul": "^6.1.1",
     "browserslist-useragent-regexp": "^2.1.0",
     "chokidar": "^3.5.2",
+    "clipboardy": "2.3.0",
     "customize-cra": "^1.0.0",
     "cypress": "8.5.0",
     "esbuild": "^0.13.14",
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 25a3e1976f..a55697334f 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -6060,7 +6060,7 @@ aproba@^1.1.1:
   resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
   integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==
 
-arch@^2.2.0:
+arch@^2.1.1, arch@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/arch/-/arch-2.2.0.tgz#1bc47818f305764f23ab3306b0bfc086c5a29d11"
   integrity sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==
@@ -7819,6 +7819,15 @@ cli-truncate@^2.1.0:
     slice-ansi "^3.0.0"
     string-width "^4.2.0"
 
+clipboardy@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/clipboardy/-/clipboardy-2.3.0.tgz#3c2903650c68e46a91b388985bc2774287dba290"
+  integrity sha512-mKhiIL2DrQIsuXMgBgnfEHOZOryC7kY7YO//TN6c63wlEm3NG5tz+YgY5rVi29KCmq/QQjKYvM7a19+MDOTHOQ==
+  dependencies:
+    arch "^2.1.1"
+    execa "^1.0.0"
+    is-wsl "^2.1.1"
+
 cliui@^3.0.3, cliui@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
@@ -8762,6 +8771,11 @@ cyclist@^1.0.1:
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
   integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
 
+cypress-real-events@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/cypress-real-events/-/cypress-real-events-1.7.0.tgz#ad6a78de33af3af0e6437f5c713e30691c44472c"
+  integrity sha512-iyXp07j0V9sG3YClVDcvHN2DAQDgr+EjTID82uWDw6OZBlU3pXEBqTMNYqroz3bxlb0k+F74U81aZwzMNaKyew==
+
 cypress@8.5.0:
   version "8.5.0"
   resolved "https://registry.yarnpkg.com/cypress/-/cypress-8.5.0.tgz#5712ca170913f8344bf167301205c4217c1eb9bd"

From ebdbc6b96f56220fc14f4f11343b3cbc878ae9c0 Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Mon, 21 Feb 2022 13:54:49 +0800
Subject: [PATCH 19/41] update slow query detail page e2e

---
 .../integration/slow_query/02-detail.spec.js  | 24 +++++++++++++++++++
 ui/cypress/support/index.js                   |  1 +
 ui/lib/components/CardTabs/index.tsx          |  1 +
 3 files changed, 26 insertions(+)

diff --git a/ui/cypress/integration/slow_query/02-detail.spec.js b/ui/cypress/integration/slow_query/02-detail.spec.js
index b614086f0b..80f18e95a7 100644
--- a/ui/cypress/integration/slow_query/02-detail.spec.js
+++ b/ui/cypress/integration/slow_query/02-detail.spec.js
@@ -23,10 +23,15 @@ describe('Slow query detail page E2E test', () => {
     })
 
     it('Copy formatted sql to clipboard', () => {
+      // Prompt alert when testing copy to clipboard on chromium-based browser
+      // https://github.com/cypress-io/cypress/issues/2739
       cy.window().then((win) => {
         cy.stub(win, 'prompt').returns(win.prompt).as('copyToClipboardPrompt')
       })
 
+      // cypress cannot simulate  copy to the clipboard event,
+      // we need to use realClick to fire copy event.
+      // Related desc: https://github.com/dmtrKovalenko/cypress-real-events#why
       cy.get('[data-e2e=copy_formatted_sql_to_clipboard]')
         .realClick()
         .then(() => {
@@ -40,4 +45,23 @@ describe('Slow query detail page E2E test', () => {
         })
     })
   })
+
+  describe('Plan descriptions', () => {
+    it('Check sql and default format', () => {
+      // sql is collapsed by default
+      cy.get('[data-e2e=expandText]').eq(1).should('have.text', 'Expand')
+    })
+  })
+
+  describe('Detail tabs', () => {
+    it('Check tabs list', () => {
+      const tabList = ['Basic', 'Time', 'Coprocessor', 'Transaction']
+      cy.get('[data-e2e=tabs]')
+        .find('.ant-tabs-tab')
+        .should('have.length', 4)
+        .each(($tab, index) => {
+          cy.wrap($tab).should('have.text', tabList[index])
+        })
+    })
+  })
 })
diff --git a/ui/cypress/support/index.js b/ui/cypress/support/index.js
index 813f9f0e28..997221d2bd 100644
--- a/ui/cypress/support/index.js
+++ b/ui/cypress/support/index.js
@@ -16,6 +16,7 @@
 // Import commands.js using ES2015 syntax:
 import './commands'
 import '@cypress/code-coverage/support'
+import 'cypress-real-events/support'
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
diff --git a/ui/lib/components/CardTabs/index.tsx b/ui/lib/components/CardTabs/index.tsx
index 82cc871826..496acb056e 100644
--- a/ui/lib/components/CardTabs/index.tsx
+++ b/ui/lib/components/CardTabs/index.tsx
@@ -44,6 +44,7 @@ function CardTabs({
         onChange={changeTab}
         renderTabBar={renderTabBar || renderCardTabBar}
         {...restProps}
+        data-e2e="tabs"
       >
         {tabs.map((tab) => (
           <Tabs.TabPane tab={tab.title} key={tab.key} />

From 147e32a0f4f45554604ce5f4500d97b12d10a73a Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Tue, 22 Feb 2022 15:39:19 +0800
Subject: [PATCH 20/41] update slow query detail page

---
 ui/cypress.json                               | 13 +++--
 .../integration/slow_query/02-detail.spec.js  | 54 +++++++++++++++++++
 ui/lib/components/CopyLink/index.tsx          |  2 +-
 3 files changed, 63 insertions(+), 6 deletions(-)

diff --git a/ui/cypress.json b/ui/cypress.json
index 401c84b3ea..c5863ab049 100644
--- a/ui/cypress.json
+++ b/ui/cypress.json
@@ -1,14 +1,17 @@
 {
-  "defaultCommandTimeout": 60000,
+  "defaultCommandTimeout": 10000,
   "responseTimeout": 60000,
   "requestTimeout": 60000,
-  "screenshotOnRunFailure": false,
-  "video": false,
+  "screenshotOnRunFailure": true,
+  "video": true,
   "env": {
     "FEATURE_VERSION": "6.0.0",
-    "TIDB_VERSION": "nightly"
+    "TIDB_VERSION": "nightly",
+    "ALLOW_SCREENSHOT": false
   },
   "experimentalSessionSupport": true,
   "viewportWidth": 1500,
-  "viewportHeight": 1000
+  "viewportHeight": 1000,
+  "ignoreTestFiles": ["**/__snapshots__/*", "**/__image_snapshots__/*"],
+  "projectId": "tckdax"
 }
diff --git a/ui/cypress/integration/slow_query/02-detail.spec.js b/ui/cypress/integration/slow_query/02-detail.spec.js
index 80f18e95a7..5e4370d067 100644
--- a/ui/cypress/integration/slow_query/02-detail.spec.js
+++ b/ui/cypress/integration/slow_query/02-detail.spec.js
@@ -9,6 +9,10 @@ describe('Slow query detail page E2E test', () => {
     cy.login('root')
     cy.visit(this.uri.slow_query)
     cy.url().should('include', this.uri.slow_query)
+    cy.intercept(`${Cypress.env('apiBasePath')}slow_query/detail?*`).as(
+      'slow_query_detail'
+    )
+
     cy.get('[data-automation-key=query]').eq(0).click()
   })
 
@@ -22,6 +26,18 @@ describe('Slow query detail page E2E test', () => {
         .and('have.text', 'SELECT sleep(1.2);')
     })
 
+    it('Expand sql', () => {
+      // expand sql
+      cy.get('[data-e2e=expandText]').eq(0).click()
+
+      // sql is collapsed by default
+      cy.get('[data-e2e=collapseText]').eq(0).should('have.text', 'Collapse')
+      cy.get('[data-e2e=slow_query_detail_page_query]')
+        .eq(0)
+        .find('[data-e2e=syntax_highlighter_original]')
+        .and('have.text', 'SELECT\n  sleep(1.2);')
+    })
+
     it('Copy formatted sql to clipboard', () => {
       // Prompt alert when testing copy to clipboard on chromium-based browser
       // https://github.com/cypress-io/cypress/issues/2739
@@ -38,11 +54,21 @@ describe('Slow query detail page E2E test', () => {
           cy.task('getClipboard').should('eq', 'SELECT\n  sleep(1.2);')
         })
 
+      cy.get('[data-e2e=copied_success]').should('exist')
+    })
+
+    it('Copy original sql to clipboard', () => {
+      cy.window().then((win) => {
+        cy.stub(win, 'prompt').returns(win.prompt).as('copyToClipboardPrompt')
+      })
+
       cy.get('[data-e2e=copy_original_sql_to_clipboard]')
         .realClick()
         .then(() => {
           cy.task('getClipboard').should('eq', 'SELECT sleep(1.2);')
         })
+
+      cy.get('[data-e2e=copied_success]').should('exist')
     })
   })
 
@@ -50,6 +76,13 @@ describe('Slow query detail page E2E test', () => {
     it('Check sql and default format', () => {
       // sql is collapsed by default
       cy.get('[data-e2e=expandText]').eq(1).should('have.text', 'Expand')
+
+      cy.wait('@slow_query_detail').then((res) => {
+        const responseBody = res.response.body
+        cy.get('[data-e2e=slow_query_detail_page_query]')
+          .eq(1)
+          .and('have.text', responseBody.plan)
+      })
     })
   })
 
@@ -64,4 +97,25 @@ describe('Slow query detail page E2E test', () => {
         })
     })
   })
+
+  describe('Detail table tabs', () => {
+    it('Basic table rows count', () => {
+      cy.get('.ms-List-cell').should('have.length', 14)
+    })
+
+    it('Time table rows count', () => {
+      cy.get('.ant-tabs-tab').eq(1).click()
+      cy.get('.ms-List-cell').should('have.length', 21)
+    })
+
+    it('Coprocessor table rows count', () => {
+      cy.get('.ant-tabs-tab').eq(2).click()
+      cy.get('.ms-List-cell').should('have.length', 10)
+    })
+
+    it('Transaction table rows count', () => {
+      cy.get('.ant-tabs-tab').eq(3).click()
+      cy.get('.ms-List-cell').should('have.length', 5)
+    })
+  })
 })
diff --git a/ui/lib/components/CopyLink/index.tsx b/ui/lib/components/CopyLink/index.tsx
index 1a62550167..0685b27fd0 100644
--- a/ui/lib/components/CopyLink/index.tsx
+++ b/ui/lib/components/CopyLink/index.tsx
@@ -66,7 +66,7 @@ function CopyLink({ data, displayVariant = 'default' }: ICopyLinkProps) {
         </CopyToClipboard>
       )}
       {showCopied && (
-        <span className={styles.copiedText}>
+        <span className={styles.copiedText} data-e2e="copied_success">
           <CheckOutlined /> {t('component.copyLink.success')}
         </span>
       )}

From a1cd6876f06845b78c81b2a3b969a5730ab23425 Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Tue, 22 Feb 2022 22:05:41 +0800
Subject: [PATCH 21/41] add statement e2e test

---
 ui/cypress/fixtures/uri.json                  |  3 +-
 ui/cypress/integration/components.js          | 12 +++
 .../integration/slow_query/01-list.spec.js    | 27 ++----
 .../integration/statement/01-list.spec.js     | 87 +++++++++++++++++++
 ui/cypress/integration/utils.js               | 11 +++
 ui/lib/apps/Statement/pages/List/index.tsx    |  7 +-
 6 files changed, 125 insertions(+), 22 deletions(-)
 create mode 100644 ui/cypress/integration/components.js
 create mode 100644 ui/cypress/integration/statement/01-list.spec.js

diff --git a/ui/cypress/fixtures/uri.json b/ui/cypress/fixtures/uri.json
index bfb6063b0b..961987822b 100644
--- a/ui/cypress/fixtures/uri.json
+++ b/ui/cypress/fixtures/uri.json
@@ -2,5 +2,6 @@
   "root": "/",
   "login": "/signin",
   "overview": "/overview",
-  "slow_query": "/slow_query"
+  "slow_query": "/slow_query",
+  "statement": "/statement"
 }
diff --git a/ui/cypress/integration/components.js b/ui/cypress/integration/components.js
new file mode 100644
index 0000000000..72f0f3835a
--- /dev/null
+++ b/ui/cypress/integration/components.js
@@ -0,0 +1,12 @@
+export const checkBaseSelector = (optionsList, index) => {
+  cy.get('[data-e2e=base_selector]')
+    .eq(index)
+    .click()
+    .then(() => {
+      cy.get('[data-e2e=multi_select_options]')
+        .should('have.length', optionsList.length)
+        .each(($option, $idx) => {
+          cy.wrap($option).should('have.text', optionsList[$idx])
+        })
+    })
+}
diff --git a/ui/cypress/integration/slow_query/01-list.spec.js b/ui/cypress/integration/slow_query/01-list.spec.js
index 7c9e246836..61d7acd3cc 100644
--- a/ui/cypress/integration/slow_query/01-list.spec.js
+++ b/ui/cypress/integration/slow_query/01-list.spec.js
@@ -1,7 +1,8 @@
 // Copyright 2022 PingCAP, Inc. Licensed under Apache-2.0.
 
 import dayjs from 'dayjs'
-import { validateCSVList, deleteDownloadsFolder } from '../utils'
+import { restartTiUP, validateCSVList, deleteDownloadsFolder } from '../utils'
+import { checkBaseSelector } from '../components'
 
 const neatCSV = require('neat-csv')
 const path = require('path')
@@ -13,13 +14,7 @@ describe('SlowQuery list page', () => {
     })
 
     // Restart tiup
-    cy.exec(
-      `bash ../scripts/start_tiup.sh ${Cypress.env('TIDB_VERSION')} restart`,
-      { log: true }
-    )
-
-    // Wait TiUP Playground
-    cy.exec('bash ../scripts/wait_tiup_playground.sh 1 300 &> wait_tiup.log')
+    restartTiUP()
 
     deleteDownloadsFolder()
   })
@@ -216,14 +211,7 @@ describe('SlowQuery list page', () => {
 
         cy.wait('@databases').then((res) => {
           const databaseList = res.response.body
-          cy.get('[data-e2e=base_selector]')
-            .click()
-            .then(() => {
-              cy.get('[data-e2e=multi_select_options]').should(
-                'have.length',
-                databaseList.length
-              )
-            })
+          checkBaseSelector(databaseList, 0)
         })
       })
 
@@ -308,7 +296,8 @@ describe('SlowQuery list page', () => {
               .eq(1)
               .click()
               .then(() => {
-                cy.get('[data-automation-key=query]').should('has.length', 3)
+                cy.reload()
+                cy.get('[data-e2e=slow_query_limit_select]').contains('200')
               })
           })
       })
@@ -422,7 +411,7 @@ describe('SlowQuery list page', () => {
               .then(() => {
                 cy.get('[data-automation-key=query]')
                   .eq(0)
-                  .find('[data-e2e=text_wrap_multiline]')
+                  .find('[data-e2e=syntax_highlighter_original]')
               })
 
             cy.get('[data-e2e=slow_query_show_full_sql]')
@@ -431,7 +420,7 @@ describe('SlowQuery list page', () => {
                 cy.get('[data-automation-key=query]')
                   .eq(0)
                   .trigger('mouseover')
-                  .find('[data-e2e=text_wrap_singleline_with_tooltip]')
+                  .find('[data-e2e=syntax_highlighter_compact]')
               })
           })
       })
diff --git a/ui/cypress/integration/statement/01-list.spec.js b/ui/cypress/integration/statement/01-list.spec.js
new file mode 100644
index 0000000000..2c3c28541d
--- /dev/null
+++ b/ui/cypress/integration/statement/01-list.spec.js
@@ -0,0 +1,87 @@
+// Copyright 2022 PingCAP, Inc. Licensed under Apache-2.0.
+
+import { restartTiUP, deleteDownloadsFolder } from '../utils'
+import { checkBaseSelector } from '../components'
+
+describe('SlowQuery list page', () => {
+  before(() => {
+    cy.fixture('uri.json').then(function (uri) {
+      this.uri = uri
+    })
+
+    // restartTiUP()
+
+    deleteDownloadsFolder()
+  })
+
+  beforeEach(function () {
+    cy.login('root')
+    cy.visit(this.uri.statement)
+    cy.url().should('include', this.uri.statement)
+  })
+
+  describe('Initialize statemen list page', () => {
+    it('Statement side bar highlighted', () => {
+      cy.get('[data-e2e=menu_item_statement]')
+        .should('be.visible')
+        .and('has.class', 'ant-menu-item-selected')
+    })
+
+    it('Has Toolbar', function () {
+      cy.get('[data-e2e=statement_toolbar]').should('be.visible')
+    })
+
+    it('Statements is enabled by default', () => {
+      cy.get('[data-e2e=statements_table]').should('be.visible')
+    })
+
+    it('Get statement list bad request', () => {
+      const staticResponse = {
+        statusCode: 400,
+        body: {
+          code: 'common.bad_request',
+          error: true,
+          message: 'common.bad_request',
+        },
+      }
+
+      // stub out a response body
+      cy.intercept(
+        `${Cypress.env('apiBasePath')}statements/list*`,
+        staticResponse
+      ).as('statements_list')
+      cy.wait('@statements_list').then(() => {
+        cy.get('[data-e2e=alert_error_bar]').should(
+          'has.text',
+          staticResponse.body.message
+        )
+      })
+    })
+  })
+
+  describe('', () => {
+    it('Show all databases', () => {
+      cy.intercept(`${Cypress.env('apiBasePath')}info/databases`).as(
+        'databases'
+      )
+
+      cy.wait('@databases').then((res) => {
+        const databaseList = res.response.body
+        checkBaseSelector(databaseList, 0)
+      })
+    })
+  })
+
+  describe('', () => {
+    it('Show all kind of statements', () => {
+      cy.intercept(`${Cypress.env('apiBasePath')}statements/stmt_types`).as(
+        'stmt_types'
+      )
+
+      cy.wait('@stmt_types').then((res) => {
+        const stmtTypesList = res.response.body
+        checkBaseSelector(stmtTypesList, 1)
+      })
+    })
+  })
+})
diff --git a/ui/cypress/integration/utils.js b/ui/cypress/integration/utils.js
index cbf0fadf6f..cc2e466848 100644
--- a/ui/cypress/integration/utils.js
+++ b/ui/cypress/integration/utils.js
@@ -19,3 +19,14 @@ export const validateCSVList = (list) => {
   expect(list[2].query).to.equal('SELECT sleep(2);')
   expect(list[3].query).to.equal('SELECT sleep(1);')
 }
+
+export const restartTiUP = () => {
+  // Restart tiup
+  cy.exec(
+    `bash ../scripts/start_tiup.sh ${Cypress.env('TIDB_VERSION')} restart`,
+    { log: true }
+  )
+
+  // Wait TiUP Playground
+  cy.exec('bash ../scripts/wait_tiup_playground.sh 1 300 &> wait_tiup.log')
+}
diff --git a/ui/lib/apps/Statement/pages/List/index.tsx b/ui/lib/apps/Statement/pages/List/index.tsx
index 517693a5b8..d695ed4c2f 100644
--- a/ui/lib/apps/Statement/pages/List/index.tsx
+++ b/ui/lib/apps/Statement/pages/List/index.tsx
@@ -105,7 +105,7 @@ export default function StatementsOverview() {
   return (
     <div className={styles.list_container}>
       <Card>
-        <Toolbar className={styles.list_toolbar}>
+        <Toolbar className={styles.list_toolbar} data-e2e="statement_toolbar">
           <Space>
             <TimeRangeSelector
               value={queryOptions.timeRange}
@@ -202,7 +202,10 @@ export default function StatementsOverview() {
       </Card>
 
       {enable ? (
-        <div style={{ height: '100%', position: 'relative' }}>
+        <div
+          style={{ height: '100%', position: 'relative' }}
+          data-e2e="statements_table"
+        >
           <ScrollablePane>
             <StatementsTable cardNoMarginTop controller={controller} />
           </ScrollablePane>

From a379b11b5efed662149838beac373be2b66f64cf Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Wed, 23 Feb 2022 14:33:01 +0800
Subject: [PATCH 22/41] update yarn.lock

---
 ui/yarn.lock | 98 ++++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 84 insertions(+), 14 deletions(-)

diff --git a/ui/yarn.lock b/ui/yarn.lock
index 60ea387cf6..9e9b6574e7 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -2958,7 +2958,7 @@ append-transform@^2.0.0:
   dependencies:
     default-require-extensions "^3.0.0"
 
-arch@^2.2.0:
+arch@^2.1.1, arch@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/arch/-/arch-2.2.0.tgz#1bc47818f305764f23ab3306b0bfc086c5a29d11"
   integrity sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==
@@ -4361,6 +4361,17 @@ cross-env@^6.0.3:
   dependencies:
     cross-spawn "^7.0.0"
 
+cross-spawn@^6.0.0:
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
+  integrity sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==
+  dependencies:
+    nice-try "^1.0.4"
+    path-key "^2.0.1"
+    semver "^5.5.0"
+    shebang-command "^1.2.0"
+    which "^1.2.9"
+
 cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
@@ -4444,11 +4455,6 @@ csv-parser@^2.3.0:
     minimist "^1.2.0"
     through2 "^3.0.1"
 
-cuint@^0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/cuint/-/cuint-0.2.2.tgz#408086d409550c2631155619e9fa7bcadc3b991b"
-  integrity sha1-QICG1AlVDCYxFVYZ6fp7ytw7mRs=
-
 customize-cra@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/customize-cra/-/customize-cra-1.0.0.tgz#73286563631aa08127ad4d30a2e3c89cf4e93c8d"
@@ -4456,11 +4462,6 @@ customize-cra@^1.0.0:
   dependencies:
     lodash.flow "^3.5.0"
 
-cyclist@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
-  integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
-
 cypress-real-events@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/cypress-real-events/-/cypress-real-events-1.7.0.tgz#ad6a78de33af3af0e6437f5c713e30691c44472c"
@@ -5742,6 +5743,19 @@ execa@4.1.0:
     signal-exit "^3.0.2"
     strip-final-newline "^2.0.0"
 
+execa@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-1.0.0.tgz#c6236a5bb4df6d6f15e88e7f017798216749ddd8"
+  integrity sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==
+  dependencies:
+    cross-spawn "^6.0.0"
+    get-stream "^4.0.0"
+    is-stream "^1.1.0"
+    npm-run-path "^2.0.0"
+    p-finally "^1.0.0"
+    signal-exit "^3.0.0"
+    strip-eof "^1.0.0"
+
 execa@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/execa/-/execa-2.1.0.tgz#e5d3ecd837d2a60ec50f3da78fd39767747bbe99"
@@ -6328,6 +6342,13 @@ get-package-type@^0.1.0:
   resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a"
   integrity sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==
 
+get-stream@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-4.1.0.tgz#c1b255575f3dc21d59bfc79cd3d2b46b1c3a54b5"
+  integrity sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==
+  dependencies:
+    pump "^3.0.0"
+
 get-stream@^5.0.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-5.1.0.tgz#01203cdc92597f9b909067c3e656cc1f4d3c4dc9"
@@ -7421,7 +7442,7 @@ is-shared-array-buffer@^1.0.1:
   resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.1.tgz#97b0c85fbdacb59c9c446fe653b82cf2b5b7cfe6"
   integrity sha512-IU0NmyknYZN0rChcKhRO1X8LYz5Isj/Fsqh8NJOSf+N/hCOTwy29F32Ik7a+QszE63IdvmwdTPDd6cZ5pg4cwA==
 
-is-stream@^1.0.1:
+is-stream@^1.0.1, is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
   integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
@@ -7997,6 +8018,11 @@ lodash.flattendeep@^4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2"
   integrity sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=
 
+lodash.flow@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.flow/-/lodash.flow-3.5.0.tgz#87bf40292b8cf83e4e8ce1a3ae4209e20071675a"
+  integrity sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o=
+
 lodash.get@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
@@ -8764,6 +8790,11 @@ next-tick@~1.0.0:
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
   integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
 
+nice-try@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
+  integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
+
 node-fetch@^1.0.1:
   version "1.7.3"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
@@ -8818,6 +8849,13 @@ now-and-later@^2.0.0:
   dependencies:
     once "^1.3.2"
 
+npm-run-path@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
+  integrity sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=
+  dependencies:
+    path-key "^2.0.0"
+
 npm-run-path@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-3.1.0.tgz#7f91be317f6a466efed3c9f2980ad8a4ee8b0fa5"
@@ -9114,6 +9152,11 @@ outpipe@^1.1.0:
   dependencies:
     shell-quote "^1.4.2"
 
+p-finally@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
+  integrity sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=
+
 p-finally@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-2.0.1.tgz#bd6fcaa9c559a096b680806f4d657b3f0f240561"
@@ -9307,6 +9350,11 @@ path-is-absolute@^1.0.0, path-is-absolute@^1.0.1:
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
   integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
 
+path-key@^2.0.0, path-key@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
+  integrity sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=
+
 path-key@^3.0.0, path-key@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
@@ -10787,7 +10835,7 @@ semver-regex@^2.0.0:
   resolved "https://registry.yarnpkg.com/semver-regex/-/semver-regex-2.0.0.tgz#a93c2c5844539a770233379107b38c7b4ac9d338"
   integrity sha512-mUdIBBvdn0PLOeP3TEkMH7HHeUP3GjsXCwKarjv/kGmUFOYg1VqEemKhoQpWMu6X2I8kHeuVdGibLGkVK+/5Qw==
 
-"semver@2 || 3 || 4 || 5", semver@^5.4.1, semver@^5.6.0:
+"semver@2 || 3 || 4 || 5", semver@^5.4.1, semver@^5.5.0, semver@^5.6.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
@@ -10909,6 +10957,13 @@ shasum@^1.0.0:
     json-stable-stringify "~0.0.0"
     sha.js "~2.4.4"
 
+shebang-command@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
+  integrity sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=
+  dependencies:
+    shebang-regex "^1.0.0"
+
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
@@ -10916,6 +10971,11 @@ shebang-command@^2.0.0:
   dependencies:
     shebang-regex "^3.0.0"
 
+shebang-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
+  integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=
+
 shebang-regex@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
@@ -10935,6 +10995,11 @@ side-channel@^1.0.4:
     get-intrinsic "^1.0.2"
     object-inspect "^1.9.0"
 
+signal-exit@^3.0.0:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
+  integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
+
 signal-exit@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@@ -11411,6 +11476,11 @@ strip-bom@^4.0.0:
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-4.0.0.tgz#9c3505c1db45bcedca3d9cf7a16f5c5aa3901878"
   integrity sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==
 
+strip-eof@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
+  integrity sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=
+
 strip-final-newline@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
@@ -12349,7 +12419,7 @@ which-typed-array@^1.1.2:
     has-tostringtag "^1.0.0"
     is-typed-array "^1.1.7"
 
-which@^1.2.14:
+which@^1.2.14, which@^1.2.9:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
   integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==

From 853151af2661f10bd12c44fff317745b43b9ac87 Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Thu, 24 Feb 2022 18:47:21 +0800
Subject: [PATCH 23/41] update statement list

---
 ui/cypress/integration/components.js          | 20 ++++++-
 .../integration/slow_query/01-list.spec.js    |  8 +--
 .../integration/statement/01-list.spec.js     | 60 ++++++++++++++++++-
 ui/lib/components/ColumnsSelector/index.tsx   |  4 +-
 ui/lib/utils/tableColumnFactory.tsx           |  4 +-
 5 files changed, 84 insertions(+), 12 deletions(-)

diff --git a/ui/cypress/integration/components.js b/ui/cypress/integration/components.js
index 72f0f3835a..c6ae6931b1 100644
--- a/ui/cypress/integration/components.js
+++ b/ui/cypress/integration/components.js
@@ -1,4 +1,4 @@
-export const checkBaseSelector = (optionsList, index) => {
+export const testBaseSelectorOptions = (optionsList, index) => {
   cy.get('[data-e2e=base_selector]')
     .eq(index)
     .click()
@@ -10,3 +10,21 @@ export const checkBaseSelector = (optionsList, index) => {
         })
     })
 }
+
+export const checkAllOptionsInBaseSelector = (index) => {
+  cy.get('[data-e2e=base_selector]')
+    .eq(index)
+    .click()
+    .then(($selector) => {
+      console.log('selector', $selector)
+      cy.wrap($selector).within(() => {
+        cy.get('[role=columnheader]')
+          .click()
+          .then(() => {
+            cy.get('[data-e2e=multi_select_options]').each(($option) => {
+              cy.wrap($option).should('be.checked')
+            })
+          })
+      })
+    })
+}
diff --git a/ui/cypress/integration/slow_query/01-list.spec.js b/ui/cypress/integration/slow_query/01-list.spec.js
index 61d7acd3cc..db3dab286b 100644
--- a/ui/cypress/integration/slow_query/01-list.spec.js
+++ b/ui/cypress/integration/slow_query/01-list.spec.js
@@ -2,7 +2,7 @@
 
 import dayjs from 'dayjs'
 import { restartTiUP, validateCSVList, deleteDownloadsFolder } from '../utils'
-import { checkBaseSelector } from '../components'
+import { testBaseSelectorOptions } from '../components'
 
 const neatCSV = require('neat-csv')
 const path = require('path')
@@ -211,7 +211,7 @@ describe('SlowQuery list page', () => {
 
         cy.wait('@databases').then((res) => {
           const databaseList = res.response.body
-          checkBaseSelector(databaseList, 0)
+          testBaseSelectorOptions(databaseList, 0)
         })
       })
 
@@ -345,7 +345,7 @@ describe('SlowQuery list page', () => {
         cy.get('[data-e2e=columns_selector_popover]')
           .trigger('mouseover')
           .then(() => {
-            cy.get('[data-e2e=slow_query_schema_table_column_tile]')
+            cy.get('[data-e2e=column_selector_title]')
               .check()
               .then(() => {
                 cy.get('[role=columnheader]')
@@ -359,7 +359,7 @@ describe('SlowQuery list page', () => {
         cy.get('[data-e2e=columns_selector_popover]')
           .trigger('mouseover')
           .then(() => {
-            cy.get('[data-e2e=slow_query_schema_table_column_reset]')
+            cy.get('[data-e2e=column_selector_reset]')
               .click()
               .then(() => {
                 cy.get('[role=columnheader]')
diff --git a/ui/cypress/integration/statement/01-list.spec.js b/ui/cypress/integration/statement/01-list.spec.js
index 2c3c28541d..a0fd892169 100644
--- a/ui/cypress/integration/statement/01-list.spec.js
+++ b/ui/cypress/integration/statement/01-list.spec.js
@@ -1,7 +1,10 @@
 // Copyright 2022 PingCAP, Inc. Licensed under Apache-2.0.
 
 import { restartTiUP, deleteDownloadsFolder } from '../utils'
-import { checkBaseSelector } from '../components'
+import {
+  testBaseSelectorOptions,
+  checkAllOptionsInBaseSelector,
+} from '../components'
 
 describe('SlowQuery list page', () => {
   before(() => {
@@ -57,6 +60,57 @@ describe('SlowQuery list page', () => {
         )
       })
     })
+
+    it('Statements which executed by default when starting TiDB', () => {
+      const defaultExecStmtList = [
+        'SHOW DATABASES',
+        'SELECT DISTINCT `stmt_type` FROM `information_schema`.`cluster_statements_summary_history` ORDER BY `stmt_type` ASC',
+        'SELECT `version` ()',
+      ]
+
+      cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
+        'statements_list'
+      )
+
+      cy.wait('@statements_list').then((res) => {
+        const response = res.response.body
+
+        cy.get('[data-e2e=syntax_highlighter_compact]')
+          .should('have.length', response.length)
+          .then(($stmts) => {
+            // we get a list of jQuery elements
+            // let's convert the jQuery object into a plain array
+            return (
+              Cypress.$.makeArray($stmts)
+                // and extract inner text from each
+                .map((stmt) => stmt.innerText)
+            )
+          })
+          // make sure there exists the default executed statements
+          .should('to.include.members', defaultExecStmtList)
+      })
+    })
+  })
+
+  describe('Filter slow query by changing database', () => {
+    it('No database selected by default', () => {
+      cy.get('[data-e2e=base_select_input]').should('has.text', '')
+    })
+
+    it('Show all databases', () => {
+      cy.intercept(`${Cypress.env('apiBasePath')}info/databases`).as(
+        'databases'
+      )
+
+      cy.wait('@databases').then((res) => {
+        const databases = res.response.body
+        testBaseSelectorOptions(databases, 0)
+      })
+    })
+
+    it('Filter statements without use database', () => {
+      checkAllOptionsInBaseSelector(0)
+    })
   })
 
   describe('', () => {
@@ -67,7 +121,7 @@ describe('SlowQuery list page', () => {
 
       cy.wait('@databases').then((res) => {
         const databaseList = res.response.body
-        checkBaseSelector(databaseList, 0)
+        testBaseSelectorOptions(databaseList, 0)
       })
     })
   })
@@ -80,7 +134,7 @@ describe('SlowQuery list page', () => {
 
       cy.wait('@stmt_types').then((res) => {
         const stmtTypesList = res.response.body
-        checkBaseSelector(stmtTypesList, 1)
+        testBaseSelectorOptions(stmtTypesList, 1)
       })
     })
   })
diff --git a/ui/lib/components/ColumnsSelector/index.tsx b/ui/lib/components/ColumnsSelector/index.tsx
index 395440a032..c1c824e61b 100644
--- a/ui/lib/components/ColumnsSelector/index.tsx
+++ b/ui/lib/components/ColumnsSelector/index.tsx
@@ -104,7 +104,7 @@ export default function ColumnsSelector({
         indeterminate={indeterminate}
         checked={checkedAll}
         onChange={handleCheckAllChange}
-        data-e2e="slow_query_schema_table_column_tile"
+        data-e2e="column_selector_title"
       >
         {t('component.columnsSelector.select')}
       </Checkbox>
@@ -112,7 +112,7 @@ export default function ColumnsSelector({
         <Button
           type="link"
           onClick={() => onChange && onChange(defaultVisibleColumnKeys)}
-          data-e2e="slow_query_schema_table_column_reset"
+          data-e2e="column_selector_reset"
         >
           {t('component.columnsSelector.reset')}
         </Button>
diff --git a/ui/lib/utils/tableColumnFactory.tsx b/ui/lib/utils/tableColumnFactory.tsx
index 81486003f9..803fd73cc0 100644
--- a/ui/lib/utils/tableColumnFactory.tsx
+++ b/ui/lib/utils/tableColumnFactory.tsx
@@ -235,7 +235,7 @@ export class TableColumnFactory {
       isMultiline: showFullSQL,
       onRender: (rec: U) =>
         showFullSQL ? (
-          <TextWrap multiline data-e2e="text_wrap_multiline">
+          <TextWrap multiline>
             <HighlightSQL sql={rec[fieldName]!} />
           </TextWrap>
         ) : (
@@ -243,7 +243,7 @@ export class TableColumnFactory {
             title={<HighlightSQL sql={rec[fieldName]!} theme="dark" />}
             placement="right"
           >
-            <TextWrap data-e2e="text_wrap_singleline_with_tooltip">
+            <TextWrap>
               <HighlightSQL sql={rec[fieldName]!} compact />
             </TextWrap>
           </Tooltip>

From a42cabd3a895e6d9e90067c478b29289805aaebe Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Fri, 25 Feb 2022 19:25:57 +0800
Subject: [PATCH 24/41] update statement list

---
 ui/cypress/integration/components.js          |  30 ++-
 .../integration/statement/01-list.spec.js     | 210 +++++++++---------
 2 files changed, 129 insertions(+), 111 deletions(-)

diff --git a/ui/cypress/integration/components.js b/ui/cypress/integration/components.js
index c6ae6931b1..8413734d6a 100644
--- a/ui/cypress/integration/components.js
+++ b/ui/cypress/integration/components.js
@@ -15,16 +15,34 @@ export const checkAllOptionsInBaseSelector = (index) => {
   cy.get('[data-e2e=base_selector]')
     .eq(index)
     .click()
-    .then(($selector) => {
-      console.log('selector', $selector)
-      cy.wrap($selector).within(() => {
+    .then(() => {
+      cy.get('.ant-dropdown').within(() => {
         cy.get('[role=columnheader]')
-          .click()
+          .eq(0)
+          .within(() => {
+            cy.get('.ant-checkbox-input').check()
+          })
           .then(() => {
-            cy.get('[data-e2e=multi_select_options]').each(($option) => {
-              cy.wrap($option).should('be.checked')
+            cy.get('[data-automationid=ListCell]').each(($option) => {
+              cy.wrap($option).within(() => {
+                cy.get('.ant-checkbox-input').should('be.checked')
+              })
             })
           })
       })
     })
+
+  // .click()
+  // .then(($selector) => {
+  //   console.log('selector', $selector)
+  //   cy.wrap($selector).within(() => {
+  //     cy.get('[role=columnheader]')
+  //       .click()
+  //       .then(() => {
+  //         cy.get('[data-e2e=multi_select_options]').each(($option) => {
+  //           cy.wrap($option).should('be.checked')
+  //         })
+  //       })
+  //   })
+  // })
 }
diff --git a/ui/cypress/integration/statement/01-list.spec.js b/ui/cypress/integration/statement/01-list.spec.js
index a0fd892169..036d2cd7a2 100644
--- a/ui/cypress/integration/statement/01-list.spec.js
+++ b/ui/cypress/integration/statement/01-list.spec.js
@@ -23,119 +23,119 @@ describe('SlowQuery list page', () => {
     cy.url().should('include', this.uri.statement)
   })
 
-  describe('Initialize statemen list page', () => {
-    it('Statement side bar highlighted', () => {
-      cy.get('[data-e2e=menu_item_statement]')
-        .should('be.visible')
-        .and('has.class', 'ant-menu-item-selected')
-    })
-
-    it('Has Toolbar', function () {
-      cy.get('[data-e2e=statement_toolbar]').should('be.visible')
-    })
-
-    it('Statements is enabled by default', () => {
-      cy.get('[data-e2e=statements_table]').should('be.visible')
-    })
-
-    it('Get statement list bad request', () => {
-      const staticResponse = {
-        statusCode: 400,
-        body: {
-          code: 'common.bad_request',
-          error: true,
-          message: 'common.bad_request',
-        },
-      }
-
-      // stub out a response body
-      cy.intercept(
-        `${Cypress.env('apiBasePath')}statements/list*`,
-        staticResponse
-      ).as('statements_list')
-      cy.wait('@statements_list').then(() => {
-        cy.get('[data-e2e=alert_error_bar]').should(
-          'has.text',
-          staticResponse.body.message
-        )
-      })
-    })
-
-    it('Statements which executed by default when starting TiDB', () => {
-      const defaultExecStmtList = [
-        'SHOW DATABASES',
-        'SELECT DISTINCT `stmt_type` FROM `information_schema`.`cluster_statements_summary_history` ORDER BY `stmt_type` ASC',
-        'SELECT `version` ()',
-      ]
-
-      cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
-        'statements_list'
-      )
-
-      cy.wait('@statements_list').then((res) => {
-        const response = res.response.body
-
-        cy.get('[data-e2e=syntax_highlighter_compact]')
-          .should('have.length', response.length)
-          .then(($stmts) => {
-            // we get a list of jQuery elements
-            // let's convert the jQuery object into a plain array
-            return (
-              Cypress.$.makeArray($stmts)
-                // and extract inner text from each
-                .map((stmt) => stmt.innerText)
-            )
-          })
-          // make sure there exists the default executed statements
-          .should('to.include.members', defaultExecStmtList)
-      })
-    })
-  })
+  // describe('Initialize statemen list page', () => {
+  //   it('Statement side bar highlighted', () => {
+  //     cy.get('[data-e2e=menu_item_statement]')
+  //       .should('be.visible')
+  //       .and('has.class', 'ant-menu-item-selected')
+  //   })
+
+  //   it('Has Toolbar', function () {
+  //     cy.get('[data-e2e=statement_toolbar]').should('be.visible')
+  //   })
+
+  //   it('Statements is enabled by default', () => {
+  //     cy.get('[data-e2e=statements_table]').should('be.visible')
+  //   })
+
+  //   it('Get statement list bad request', () => {
+  //     const staticResponse = {
+  //       statusCode: 400,
+  //       body: {
+  //         code: 'common.bad_request',
+  //         error: true,
+  //         message: 'common.bad_request',
+  //       },
+  //     }
+
+  //     // stub out a response body
+  //     cy.intercept(
+  //       `${Cypress.env('apiBasePath')}statements/list*`,
+  //       staticResponse
+  //     ).as('statements_list')
+  //     cy.wait('@statements_list').then(() => {
+  //       cy.get('[data-e2e=alert_error_bar]').should(
+  //         'has.text',
+  //         staticResponse.body.message
+  //       )
+  //     })
+  //   })
+
+  //   it('Statements which executed by default when starting TiDB', () => {
+  //     const defaultExecStmtList = [
+  //       'SHOW DATABASES',
+  //       'SELECT DISTINCT `stmt_type` FROM `information_schema`.`cluster_statements_summary_history` ORDER BY `stmt_type` ASC',
+  //       'SELECT `version` ()',
+  //     ]
+
+  //     cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
+  //       'statements_list'
+  //     )
+
+  //     cy.wait('@statements_list').then((res) => {
+  //       const response = res.response.body
+
+  //       cy.get('[data-e2e=syntax_highlighter_compact]')
+  //         .should('have.length', response.length)
+  //         .then(($stmts) => {
+  //           // we get a list of jQuery elements
+  //           // let's convert the jQuery object into a plain array
+  //           return (
+  //             Cypress.$.makeArray($stmts)
+  //               // and extract inner text from each
+  //               .map((stmt) => stmt.innerText)
+  //           )
+  //         })
+  //         // make sure there exists the default executed statements
+  //         .should('to.include.members', defaultExecStmtList)
+  //     })
+  //   })
+  // })
 
   describe('Filter slow query by changing database', () => {
-    it('No database selected by default', () => {
-      cy.get('[data-e2e=base_select_input]').should('has.text', '')
-    })
+    // it('No database selected by default', () => {
+    //   cy.get('[data-e2e=base_select_input]').should('has.text', '')
+    // })
 
-    it('Show all databases', () => {
-      cy.intercept(`${Cypress.env('apiBasePath')}info/databases`).as(
-        'databases'
-      )
+    // it('Show all databases', () => {
+    //   cy.intercept(`${Cypress.env('apiBasePath')}info/databases`).as(
+    //     'databases'
+    //   )
 
-      cy.wait('@databases').then((res) => {
-        const databases = res.response.body
-        testBaseSelectorOptions(databases, 0)
-      })
-    })
+    //   cy.wait('@databases').then((res) => {
+    //     const databases = res.response.body
+    //     testBaseSelectorOptions(databases, 0)
+    //   })
+    // })
 
     it('Filter statements without use database', () => {
       checkAllOptionsInBaseSelector(0)
     })
   })
 
-  describe('', () => {
-    it('Show all databases', () => {
-      cy.intercept(`${Cypress.env('apiBasePath')}info/databases`).as(
-        'databases'
-      )
-
-      cy.wait('@databases').then((res) => {
-        const databaseList = res.response.body
-        testBaseSelectorOptions(databaseList, 0)
-      })
-    })
-  })
-
-  describe('', () => {
-    it('Show all kind of statements', () => {
-      cy.intercept(`${Cypress.env('apiBasePath')}statements/stmt_types`).as(
-        'stmt_types'
-      )
-
-      cy.wait('@stmt_types').then((res) => {
-        const stmtTypesList = res.response.body
-        testBaseSelectorOptions(stmtTypesList, 1)
-      })
-    })
-  })
+  // describe('', () => {
+  //   it('Show all databases', () => {
+  //     cy.intercept(`${Cypress.env('apiBasePath')}info/databases`).as(
+  //       'databases'
+  //     )
+
+  //     cy.wait('@databases').then((res) => {
+  //       const databaseList = res.response.body
+  //       testBaseSelectorOptions(databaseList, 0)
+  //     })
+  //   })
+  // })
+
+  // describe('', () => {
+  //   it('Show all kind of statements', () => {
+  //     cy.intercept(`${Cypress.env('apiBasePath')}statements/stmt_types`).as(
+  //       'stmt_types'
+  //     )
+
+  //     cy.wait('@stmt_types').then((res) => {
+  //       const stmtTypesList = res.response.body
+  //       testBaseSelectorOptions(stmtTypesList, 1)
+  //     })
+  //   })
+  // })
 })

From 2fd5d224d8740710e08d765410a3f5cfdb2d6553 Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Mon, 28 Feb 2022 10:42:54 +0800
Subject: [PATCH 25/41] update statement

---
 ui/cypress/fixtures/statement_plan.json       | 236 ++++++++++++++
 ui/cypress/integration/components.js          |  35 +--
 .../integration/slow_query/01-list.spec.js    |   7 +-
 .../integration/statement/01-list.spec.js     | 290 ++++++++++++++++--
 ui/lib/apps/Statement/pages/List/index.tsx    |   1 +
 ui/lib/components/BaseSelect/index.tsx        |   3 +-
 6 files changed, 511 insertions(+), 61 deletions(-)
 create mode 100644 ui/cypress/fixtures/statement_plan.json

diff --git a/ui/cypress/fixtures/statement_plan.json b/ui/cypress/fixtures/statement_plan.json
new file mode 100644
index 0000000000..f1cc46ed62
--- /dev/null
+++ b/ui/cypress/fixtures/statement_plan.json
@@ -0,0 +1,236 @@
+[
+  {
+    "digest_text": "select `a` . * , `b` . * from ( select `id` , `name` , `xs_apis_id` , `state` , `pay_url` from `g86_pay_xs_items_v2` where `state` = ? and `xs_apis_id` in ( ... ) and `id` in ( ... ) ) as `a` inner join ( select `remarks` , `items_id` , `xs_products_id` , `qt_show_money` , `ismore_money` , `paymax` , `paymin` , `qt_show_type` from `g86_pay_xs_items_infos_v2` where `state` = ? and `xs_products_id` in ( ... ) and `xs_apis_id` in ( ... ) ) as `b` on `a` . `id` = `b` . `items_id`",
+    "digest": "da07d22de3d0d0c66404871c1d70df65c43404a6fa9446414dab8627ddd5989f",
+    "exec_count": 6,
+    "sum_errors": 0,
+    "sum_warnings": 0,
+    "sum_latency": 42684153,
+    "max_latency": 9764098,
+    "min_latency": 5538661,
+    "avg_latency": 7114026,
+    "avg_parse_latency": 0,
+    "max_parse_latency": 0,
+    "avg_compile_latency": 0,
+    "max_compile_latency": 0,
+    "sum_cop_task_num": 0,
+    "avg_cop_process_time": 0,
+    "max_cop_process_time": 0,
+    "avg_cop_wait_time": 0,
+    "max_cop_wait_time": 0,
+    "avg_process_time": 0,
+    "max_process_time": 0,
+    "avg_wait_time": 0,
+    "max_wait_time": 0,
+    "avg_backoff_time": 0,
+    "max_backoff_time": 0,
+    "avg_total_keys": 0,
+    "max_total_keys": 0,
+    "avg_processed_keys": 0,
+    "max_processed_keys": 0,
+    "avg_prewrite_time": 0,
+    "max_prewrite_time": 0,
+    "avg_commit_time": 0,
+    "max_commit_time": 0,
+    "avg_get_commit_ts_time": 0,
+    "max_get_commit_ts_time": 0,
+    "avg_commit_backoff_time": 0,
+    "max_commit_backoff_time": 0,
+    "avg_resolve_lock_time": 0,
+    "max_resolve_lock_time": 0,
+    "avg_local_latch_wait_time": 0,
+    "max_local_latch_wait_time": 0,
+    "avg_write_keys": 0,
+    "max_write_keys": 0,
+    "avg_write_size": 0,
+    "max_write_size": 0,
+    "avg_prewrite_regions": 0,
+    "max_prewrite_regions": 0,
+    "avg_txn_retry": 0,
+    "max_txn_retry": 0,
+    "sum_backoff_times": 0,
+    "avg_mem": 236416,
+    "max_mem": 236416,
+    "avg_disk": 0,
+    "max_disk": 0,
+    "avg_affected_rows": 0,
+    "first_seen": 0,
+    "last_seen": 0,
+    "sample_user": "",
+    "query_sample_text": "",
+    "prev_sample_text": "",
+    "schema_name": "gcb3",
+    "table_names": "",
+    "index_names": "",
+    "plan_count": 0,
+    "plan": "",
+    "plan_digest": "7ed5ddc5a935eab21c4b3a75c6b752e924d625854094dc3ab07140702485d26b",
+    "max_rocksdb_delete_skipped_count": 0,
+    "avg_rocksdb_delete_skipped_count": 0,
+    "max_rocksdb_key_skipped_count": 0,
+    "avg_rocksdb_key_skipped_count": 0,
+    "max_rocksdb_block_cache_hit_count": 0,
+    "avg_rocksdb_block_cache_hit_count": 0,
+    "max_rocksdb_block_read_count": 0,
+    "avg_rocksdb_block_read_count": 0,
+    "max_rocksdb_block_read_byte": 0,
+    "avg_rocksdb_block_read_byte": 0,
+    "related_schemas": ""
+  },
+  {
+    "digest_text": "select `a` . * , `b` . * from ( select `id` , `name` , `xs_apis_id` , `state` , `pay_url` from `g86_pay_xs_items_v2` where `state` = ? and `xs_apis_id` in ( ... ) and `id` in ( ... ) ) as `a` inner join ( select `remarks` , `items_id` , `xs_products_id` , `qt_show_money` , `ismore_money` , `paymax` , `paymin` , `qt_show_type` from `g86_pay_xs_items_infos_v2` where `state` = ? and `xs_products_id` in ( ... ) and `xs_apis_id` in ( ... ) ) as `b` on `a` . `id` = `b` . `items_id`",
+    "digest": "da07d22de3d0d0c66404871c1d70df65c43404a6fa9446414dab8627ddd5989f",
+    "exec_count": 4,
+    "sum_errors": 0,
+    "sum_warnings": 0,
+    "sum_latency": 24578694,
+    "max_latency": 6865353,
+    "min_latency": 5403643,
+    "avg_latency": 6144674,
+    "avg_parse_latency": 0,
+    "max_parse_latency": 0,
+    "avg_compile_latency": 0,
+    "max_compile_latency": 0,
+    "sum_cop_task_num": 0,
+    "avg_cop_process_time": 0,
+    "max_cop_process_time": 0,
+    "avg_cop_wait_time": 0,
+    "max_cop_wait_time": 0,
+    "avg_process_time": 0,
+    "max_process_time": 0,
+    "avg_wait_time": 0,
+    "max_wait_time": 0,
+    "avg_backoff_time": 0,
+    "max_backoff_time": 0,
+    "avg_total_keys": 0,
+    "max_total_keys": 0,
+    "avg_processed_keys": 0,
+    "max_processed_keys": 0,
+    "avg_prewrite_time": 0,
+    "max_prewrite_time": 0,
+    "avg_commit_time": 0,
+    "max_commit_time": 0,
+    "avg_get_commit_ts_time": 0,
+    "max_get_commit_ts_time": 0,
+    "avg_commit_backoff_time": 0,
+    "max_commit_backoff_time": 0,
+    "avg_resolve_lock_time": 0,
+    "max_resolve_lock_time": 0,
+    "avg_local_latch_wait_time": 0,
+    "max_local_latch_wait_time": 0,
+    "avg_write_keys": 0,
+    "max_write_keys": 0,
+    "avg_write_size": 0,
+    "max_write_size": 0,
+    "avg_prewrite_regions": 0,
+    "max_prewrite_regions": 0,
+    "avg_txn_retry": 0,
+    "max_txn_retry": 0,
+    "sum_backoff_times": 0,
+    "avg_mem": 234942,
+    "max_mem": 234942,
+    "avg_disk": 0,
+    "max_disk": 0,
+    "avg_affected_rows": 0,
+    "first_seen": 0,
+    "last_seen": 0,
+    "sample_user": "",
+    "query_sample_text": "",
+    "prev_sample_text": "",
+    "schema_name": "gcb3",
+    "table_names": "",
+    "index_names": "",
+    "plan_count": 0,
+    "plan": "",
+    "plan_digest": "9b1d90654f7af9f1e2dcb2a178c8b0f4d84bd46ea6d571dae988ddf4b37744c0",
+    "max_rocksdb_delete_skipped_count": 0,
+    "avg_rocksdb_delete_skipped_count": 0,
+    "max_rocksdb_key_skipped_count": 0,
+    "avg_rocksdb_key_skipped_count": 0,
+    "max_rocksdb_block_cache_hit_count": 0,
+    "avg_rocksdb_block_cache_hit_count": 0,
+    "max_rocksdb_block_read_count": 0,
+    "avg_rocksdb_block_read_count": 0,
+    "max_rocksdb_block_read_byte": 0,
+    "avg_rocksdb_block_read_byte": 0,
+    "related_schemas": ""
+  },
+  {
+    "digest_text": "select `a` . * , `b` . * from ( select `id` , `name` , `xs_apis_id` , `state` , `pay_url` from `g86_pay_xs_items_v2` where `state` = ? and `xs_apis_id` in ( ... ) and `id` in ( ... ) ) as `a` inner join ( select `remarks` , `items_id` , `xs_products_id` , `qt_show_money` , `ismore_money` , `paymax` , `paymin` , `qt_show_type` from `g86_pay_xs_items_infos_v2` where `state` = ? and `xs_products_id` in ( ... ) and `xs_apis_id` in ( ... ) ) as `b` on `a` . `id` = `b` . `items_id`",
+    "digest": "da07d22de3d0d0c66404871c1d70df65c43404a6fa9446414dab8627ddd5989f",
+    "exec_count": 2,
+    "sum_errors": 0,
+    "sum_warnings": 0,
+    "sum_latency": 11774984,
+    "max_latency": 6464246,
+    "min_latency": 5310738,
+    "avg_latency": 5887492,
+    "avg_parse_latency": 0,
+    "max_parse_latency": 0,
+    "avg_compile_latency": 0,
+    "max_compile_latency": 0,
+    "sum_cop_task_num": 0,
+    "avg_cop_process_time": 0,
+    "max_cop_process_time": 0,
+    "avg_cop_wait_time": 0,
+    "max_cop_wait_time": 0,
+    "avg_process_time": 0,
+    "max_process_time": 0,
+    "avg_wait_time": 0,
+    "max_wait_time": 0,
+    "avg_backoff_time": 0,
+    "max_backoff_time": 0,
+    "avg_total_keys": 0,
+    "max_total_keys": 0,
+    "avg_processed_keys": 0,
+    "max_processed_keys": 0,
+    "avg_prewrite_time": 0,
+    "max_prewrite_time": 0,
+    "avg_commit_time": 0,
+    "max_commit_time": 0,
+    "avg_get_commit_ts_time": 0,
+    "max_get_commit_ts_time": 0,
+    "avg_commit_backoff_time": 0,
+    "max_commit_backoff_time": 0,
+    "avg_resolve_lock_time": 0,
+    "max_resolve_lock_time": 0,
+    "avg_local_latch_wait_time": 0,
+    "max_local_latch_wait_time": 0,
+    "avg_write_keys": 0,
+    "max_write_keys": 0,
+    "avg_write_size": 0,
+    "max_write_size": 0,
+    "avg_prewrite_regions": 0,
+    "max_prewrite_regions": 0,
+    "avg_txn_retry": 0,
+    "max_txn_retry": 0,
+    "sum_backoff_times": 0,
+    "avg_mem": 234966,
+    "max_mem": 234966,
+    "avg_disk": 0,
+    "max_disk": 0,
+    "avg_affected_rows": 0,
+    "first_seen": 0,
+    "last_seen": 0,
+    "sample_user": "",
+    "query_sample_text": "",
+    "prev_sample_text": "",
+    "schema_name": "gcb3",
+    "table_names": "",
+    "index_names": "",
+    "plan_count": 0,
+    "plan": "",
+    "plan_digest": "378e9efc46fa8af54b80b7ce59adf841e05ed7b40def723b0138deb47be0e13f",
+    "max_rocksdb_delete_skipped_count": 0,
+    "avg_rocksdb_delete_skipped_count": 0,
+    "max_rocksdb_key_skipped_count": 0,
+    "avg_rocksdb_key_skipped_count": 0,
+    "max_rocksdb_block_cache_hit_count": 0,
+    "avg_rocksdb_block_cache_hit_count": 0,
+    "max_rocksdb_block_read_count": 0,
+    "avg_rocksdb_block_read_count": 0,
+    "max_rocksdb_block_read_byte": 0,
+    "avg_rocksdb_block_read_byte": 0,
+    "related_schemas": ""
+  }
+]
diff --git a/ui/cypress/integration/components.js b/ui/cypress/integration/components.js
index 8413734d6a..4a07f5dd59 100644
--- a/ui/cypress/integration/components.js
+++ b/ui/cypress/integration/components.js
@@ -16,33 +16,14 @@ export const checkAllOptionsInBaseSelector = (index) => {
     .eq(index)
     .click()
     .then(() => {
-      cy.get('.ant-dropdown').within(() => {
-        cy.get('[role=columnheader]')
-          .eq(0)
-          .within(() => {
-            cy.get('.ant-checkbox-input').check()
-          })
-          .then(() => {
-            cy.get('[data-automationid=ListCell]').each(($option) => {
-              cy.wrap($option).within(() => {
-                cy.get('.ant-checkbox-input').should('be.checked')
-              })
+      if (cy.get('.ant-dropdown').should('exist')) {
+        cy.get('.ant-dropdown').within(() => {
+          cy.get('[role=columnheader]')
+            .eq(0)
+            .within(() => {
+              cy.get('.ant-checkbox').click()
             })
-          })
-      })
+        })
+      }
     })
-
-  // .click()
-  // .then(($selector) => {
-  //   console.log('selector', $selector)
-  //   cy.wrap($selector).within(() => {
-  //     cy.get('[role=columnheader]')
-  //       .click()
-  //       .then(() => {
-  //         cy.get('[data-e2e=multi_select_options]').each(($option) => {
-  //           cy.wrap($option).should('be.checked')
-  //         })
-  //       })
-  //   })
-  // })
 }
diff --git a/ui/cypress/integration/slow_query/01-list.spec.js b/ui/cypress/integration/slow_query/01-list.spec.js
index db3dab286b..01c9b10da1 100644
--- a/ui/cypress/integration/slow_query/01-list.spec.js
+++ b/ui/cypress/integration/slow_query/01-list.spec.js
@@ -201,7 +201,10 @@ describe('SlowQuery list page', () => {
 
     describe('Filter slow query by changing database', () => {
       it('No database selected by default', () => {
-        cy.get('[data-e2e=base_select_input]').should('has.text', '')
+        cy.get('[data-e2e=base_select_input_text]').should(
+          'has.text',
+          'All Databases'
+        )
       })
 
       it('Show all databases', () => {
@@ -227,7 +230,7 @@ describe('SlowQuery list page', () => {
         // global and use database queries will be listed
         cy.get('[data-automation-key=query]').should('has.length', 3)
 
-        cy.get('[data-e2e=base_select_input]')
+        cy.get('[data-e2e=base_select_input_text]')
           .click()
           .then(() => {
             cy.get('.ms-DetailsHeader-checkTooltip')
diff --git a/ui/cypress/integration/statement/01-list.spec.js b/ui/cypress/integration/statement/01-list.spec.js
index 036d2cd7a2..627ecb9e02 100644
--- a/ui/cypress/integration/statement/01-list.spec.js
+++ b/ui/cypress/integration/statement/01-list.spec.js
@@ -6,7 +6,7 @@ import {
   checkAllOptionsInBaseSelector,
 } from '../components'
 
-describe('SlowQuery list page', () => {
+describe('SQL statements list page', () => {
   before(() => {
     cy.fixture('uri.json').then(function (uri) {
       this.uri = uri
@@ -23,6 +23,12 @@ describe('SlowQuery list page', () => {
     cy.url().should('include', this.uri.statement)
   })
 
+  const defaultExecStmtList = [
+    'SHOW DATABASES',
+    'SELECT DISTINCT `stmt_type` FROM `information_schema`.`cluster_statements_summary_history` ORDER BY `stmt_type` ASC',
+    'SELECT `version` ()',
+  ]
+
   // describe('Initialize statemen list page', () => {
   //   it('Statement side bar highlighted', () => {
   //     cy.get('[data-e2e=menu_item_statement]')
@@ -62,12 +68,6 @@ describe('SlowQuery list page', () => {
   //   })
 
   //   it('Statements which executed by default when starting TiDB', () => {
-  //     const defaultExecStmtList = [
-  //       'SHOW DATABASES',
-  //       'SELECT DISTINCT `stmt_type` FROM `information_schema`.`cluster_statements_summary_history` ORDER BY `stmt_type` ASC',
-  //       'SELECT `version` ()',
-  //     ]
-
   //     cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
   //       'statements_list'
   //     )
@@ -92,41 +92,72 @@ describe('SlowQuery list page', () => {
   //   })
   // })
 
-  describe('Filter slow query by changing database', () => {
-    // it('No database selected by default', () => {
-    //   cy.get('[data-e2e=base_select_input]').should('has.text', '')
-    // })
+  // describe('Filter statements by changing database', () => {
+  //   it('No database selected by default', () => {
+  //     cy.get('[data-e2e=base_select_input_text]').eq(0).should('has.text', 'All Databases')
+  //   })
 
-    // it('Show all databases', () => {
-    //   cy.intercept(`${Cypress.env('apiBasePath')}info/databases`).as(
-    //     'databases'
-    //   )
+  //   it('Show all databases', () => {
+  //     cy.intercept(`${Cypress.env('apiBasePath')}info/databases`).as(
+  //       'databases'
+  //     )
 
-    //   cy.wait('@databases').then((res) => {
-    //     const databases = res.response.body
-    //     testBaseSelectorOptions(databases, 0)
-    //   })
-    // })
+  //     cy.wait('@databases').then((res) => {
+  //       const databases = res.response.body
+  //       testBaseSelectorOptions(databases, 0)
+  //     })
+  //   })
 
-    it('Filter statements without use database', () => {
-      checkAllOptionsInBaseSelector(0)
-    })
-  })
+  //   it('Filter statements without use database', () => {
+  //     cy.intercept(`${Cypress.env('apiBasePath')}info/databases`).as(
+  //       'databases'
+  //     )
+
+  //     cy.wait('@databases').then(() => {
+  //       // check all options in databases selector
+  //       checkAllOptionsInBaseSelector(0)
+  //     })
+
+  //     // check the existence of statements without use database
+  //     cy.contains(defaultExecStmtList[0]).should('not.exist')
+  //     cy.contains(defaultExecStmtList[2]).should('not.exist')
+  //   })
+
+  //   it('Filter statements with use database (mysql)', () => {
+  //     let queryData = {
+  //       query: 'SELECT count(*) from user;',
+  //       database: 'mysql',
+  //     }
+  //     cy.task('queryDB', { ...queryData })
 
-  // describe('', () => {
-  //   it('Show all databases', () => {
   //     cy.intercept(`${Cypress.env('apiBasePath')}info/databases`).as(
   //       'databases'
   //     )
 
-  //     cy.wait('@databases').then((res) => {
-  //       const databaseList = res.response.body
-  //       testBaseSelectorOptions(databaseList, 0)
+  //     cy.wait('@databases').then(() => {
+  //       cy.get('[data-e2e=base_selector]')
+  //         .eq(0)
+  //         .click()
+  //         .then(() => {
+  //           cy.get('.ant-dropdown').within(() => {
+  //             cy.get('.ant-checkbox-input').eq(3).click()
+  //           })
+  //         }).then(() => {
+  //           cy.contains('SELECT count (?) FROM user;').should('exist')
+  //         })
   //     })
+
+  //     // Use databases config remembered
+  //     cy.reload()
+  //     cy.get('[data-e2e=base_select_input_text]').eq(0).should('has.text', '1 Databases')
   //   })
   // })
 
-  // describe('', () => {
+  // describe('Filter statements by changing kind', () => {
+  //   it('No kind selected by default', () => {
+  //     cy.get('[data-e2e=base_select_input_text]').eq(1).should('has.text', 'All Kinds')
+  //   })
+
   //   it('Show all kind of statements', () => {
   //     cy.intercept(`${Cypress.env('apiBasePath')}statements/stmt_types`).as(
   //       'stmt_types'
@@ -137,5 +168,204 @@ describe('SlowQuery list page', () => {
   //       testBaseSelectorOptions(stmtTypesList, 1)
   //     })
   //   })
+
+  //   it('Filter statements with all kind checked', () => {
+  //     cy.intercept(`${Cypress.env('apiBasePath')}statements/stmt_types`).as(
+  //       'stmt_types'
+  //     )
+
+  //     cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
+  //       'statements_list'
+  //     )
+
+  //     cy.wait(['@stmt_types', '@statements_list']).then((interceptions) => {
+  //       // check all options in kind selector
+  //       checkAllOptionsInBaseSelector(1)
+  //       const statementsList = interceptions[1].response.body
+  //       cy.get('[data-e2e=syntax_highlighter_compact]')
+  //         .should('have.length', statementsList.length)
+  //     })
+
+  //   })
+
+  //   it('Filter statements with one kind checked', () => {
+  //     cy.intercept(`${Cypress.env('apiBasePath')}statements/stmt_types`).as(
+  //       'stmt_types'
+  //     )
+
+  //     cy.wait('@stmt_types').then(() => {
+  //       cy.get('[data-e2e=base_selector]')
+  //         .eq(1)
+  //         .click()
+  //         .then(() => {
+  //           cy.get('.ant-dropdown').within(() => {
+  //             cy.get('.ant-checkbox-input').eq(2).click()
+  //           })
+  //         }).then(() => {
+  //           cy.get('[data-e2e=syntax_highlighter_compact]').each(($sql) => {
+  //             cy.wrap($sql).contains('SELECT')
+  //           })
+  //         })
+  //     })
+  //   })
+  // })
+
+  // describe('Search function', () => {
+  //   it('Default search text', () => {
+  //     cy.get('[data-e2e=sql_statements_search]').should('be.empty')
+  //   })
+
+  //   it('Search item with space', () => {
+  //     cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
+  //       'statements_list'
+  //     )
+
+  //     cy.get('[data-e2e=sql_statements_search]')
+  //       .type(' SELECT version{enter}')
+
+  //     cy.wait('@statements_list').then(() => {
+  //       cy.get('[data-e2e=syntax_highlighter_compact]').should('has.length', 1)
+  //     })
+  //   })
+
+  //   it('Type search without pressing enter then reload', () => {
+  //     cy.get('[data-e2e=sql_statements_search]').type('SELECT version')
+
+  //     cy.reload()
+  //     cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
+  //       'statements_list'
+  //     )
+
+  //     cy.get('[data-e2e=sql_statements_search]').clear().type('{enter}')
+
+  //     cy.wait('@statements_list').then((res) => {
+  //       const statementsList = res.response.body
+  //       cy.get('[data-e2e=syntax_highlighter_compact]').should('has.length', statementsList.length)
+  //     })
+  //   })
   // })
+
+  describe('Selected Columns', () => {
+    const defaultColumns = {
+      'Statement Template': 'digest_text',
+      'Total Latency': 'sum_latency',
+      'Mean Latency': 'avg_latency',
+      Exec: 'exec_count',
+      Plans: 'plan_count',
+    }
+
+    it('Default selected columns', () => {
+      cy.get('[role=columnheader]').not('.is-empty')
+      // .should('have.length', 5)
+      // .each(($column) => {
+      //   console.log('defaultColumns[$column]', defaultColumns[$column])
+      //   cy.wrap($column).contains(defaultColumns[$column])
+      // })
+    })
+
+    // it('Hover on columns selector and check selected fileds ', () => {
+    //   cy.get('[data-e2e=columns_selector_popover]')
+    //     .trigger('mouseover')
+    //     .then(() => {
+    //       cy.get('[data-e2e=columns_selector_popover_content]')
+    //         .should('be.visible')
+    //         .within(() => {
+    //           // check default selectedColumns checked
+    //           defaultColumns.forEach((c, idx) => {
+    //             cy.contains(c)
+    //               .parent()
+    //               .within(() => {
+    //                 cy.get(
+    //                   `[data-e2e=columns_selector_field_${defaultColumnsKeys[idx]}]`
+    //                 ).should('be.checked')
+    //               })
+    //           })
+    //         })
+    //     })
+    // })
+
+    // it('Select all column fileds', () => {
+    //   cy.get('[data-e2e=columns_selector_popover]')
+    //     .trigger('mouseover')
+    //     .then(() => {
+    //       cy.get('[data-e2e=column_selector_title]')
+    //         .check()
+    //         .then(() => {
+    //           cy.get('[role=columnheader]')
+    //             .not('.is-empty')
+    //             .should('have.length', 44)
+    //         })
+    //     })
+    // })
+
+    // it('Reset selected column fields', () => {
+    //   cy.get('[data-e2e=columns_selector_popover]')
+    //     .trigger('mouseover')
+    //     .then(() => {
+    //       cy.get('[data-e2e=column_selector_reset]')
+    //         .click()
+    //         .then(() => {
+    //           cy.get('[role=columnheader]')
+    //             .not('.is-empty')
+    //             .should('have.length', 4)
+    //         })
+    //     })
+    // })
+
+    // it('Select an orbitary column field', () => {
+    //   cy.get('[data-e2e=columns_selector_popover]')
+    //     .trigger('mouseover')
+    //     .then(() => {
+    //       cy.contains('Max Disk')
+    //         .within(() => {
+    //           cy.get('[data-e2e=columns_selector_field_disk_max]').check()
+    //         })
+    //         .then(() => {
+    //           cy.get('[role=columnheader]')
+    //             .not('.is-empty')
+    //             .last()
+    //             .should('have.text', 'Max Disk ')
+    //         })
+    //     })
+    // })
+
+    // it('UnCheck last selected orbitary column field', () => {
+    //   cy.get('[data-e2e=columns_selector_popover]')
+    //     .trigger('mouseover')
+    //     .then(() => {
+    //       cy.contains('Max Disk')
+    //         .within(() => {
+    //           cy.get('[data-e2e=columns_selector_field_disk_max]').uncheck()
+    //         })
+    //         .then(() => {
+    //           cy.get('[role=columnheader]')
+    //             .eq(1)
+    //             .should('have.text', 'Finish Time ')
+    //         })
+    //     })
+    // })
+
+    // it('Check SLOW_QUERY_SHOW_FULL_SQL', () => {
+    //   cy.get('[data-e2e=columns_selector_popover]')
+    //     .trigger('mouseover')
+    //     .then(() => {
+    //       cy.get('[data-e2e=slow_query_show_full_sql]')
+    //         .check()
+    //         .then(() => {
+    //           cy.get('[data-automation-key=query]')
+    //             .eq(0)
+    //             .find('[data-e2e=syntax_highlighter_original]')
+    //         })
+
+    //       cy.get('[data-e2e=slow_query_show_full_sql]')
+    //         .uncheck()
+    //         .then(() => {
+    //           cy.get('[data-automation-key=query]')
+    //             .eq(0)
+    //             .trigger('mouseover')
+    //             .find('[data-e2e=syntax_highlighter_compact]')
+    //         })
+    //     })
+    // })
+  })
 })
diff --git a/ui/lib/apps/Statement/pages/List/index.tsx b/ui/lib/apps/Statement/pages/List/index.tsx
index d695ed4c2f..dabb15b317 100644
--- a/ui/lib/apps/Statement/pages/List/index.tsx
+++ b/ui/lib/apps/Statement/pages/List/index.tsx
@@ -158,6 +158,7 @@ export default function StatementsOverview() {
               onSearch={(searchText) =>
                 setQueryOptions({ ...queryOptions, searchText })
               }
+              data-e2e="sql_statements_search"
             />
           </Space>
 
diff --git a/ui/lib/components/BaseSelect/index.tsx b/ui/lib/components/BaseSelect/index.tsx
index cc64fc3b5a..21a096fab0 100644
--- a/ui/lib/components/BaseSelect/index.tsx
+++ b/ui/lib/components/BaseSelect/index.tsx
@@ -242,14 +242,13 @@ function BaseSelect<T>({
               tabIndex={tabIndex}
               autoFocus={autoFocus}
               readOnly
-              data-e2e="base_select_input"
             />
             <div
               className={cx(styles.baseSelectValueDisplay, {
                 [styles.isPlaceholder]: displayAsPlaceholder,
               })}
             >
-              <TextWrap>
+              <TextWrap data-e2e="base_select_input_text">
                 {displayAsPlaceholder ? placeholder : renderedValue}
               </TextWrap>
             </div>

From 7a1854319800c536956dde43e2b934862628d6e8 Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Tue, 1 Mar 2022 22:49:07 +0800
Subject: [PATCH 26/41] update statement list

---
 .../integration/statement/01-list.spec.js     | 342 +++++++++++++-----
 .../pages/List/StatementSettingForm.tsx       |  13 +-
 ui/lib/apps/Statement/pages/List/index.tsx    |  13 +-
 3 files changed, 266 insertions(+), 102 deletions(-)

diff --git a/ui/cypress/integration/statement/01-list.spec.js b/ui/cypress/integration/statement/01-list.spec.js
index 627ecb9e02..7f2ec2de80 100644
--- a/ui/cypress/integration/statement/01-list.spec.js
+++ b/ui/cypress/integration/statement/01-list.spec.js
@@ -245,127 +245,275 @@ describe('SQL statements list page', () => {
   //   })
   // })
 
-  describe('Selected Columns', () => {
-    const defaultColumns = {
-      'Statement Template': 'digest_text',
-      'Total Latency': 'sum_latency',
-      'Mean Latency': 'avg_latency',
-      Exec: 'exec_count',
-      Plans: 'plan_count',
-    }
+  // describe('Selected Columns', () => {
+  //   const defaultColumns = {
+  //     digest_text: 'Statement Template ',
+  //     sum_latency: 'Total Latency ',
+  //     avg_latency: 'Mean Latency ',
+  //     exec_count: '# Exec ',
+  //     plan_count: '# Plans ',
+  //     // related_schema: 'Database',
+  //   }
+
+  //   // it('Default selected columns', () => {
+  //   //   cy.get('[role=columnheader]')
+  //   //     .not('.is-empty')
+  //   //     .should('have.length', 6)
+  //   //     .each(($column, idx) => {
+  //   //       cy.wrap($column).contains(
+  //   //         defaultColumns[Object.keys(defaultColumns)[idx]]
+  //   //       )
+  //   //     })
+  //   // })
+
+  //   it('Hover on columns selector and check selected fileds ', () => {
+  //     cy.get('[data-e2e=columns_selector_popover]')
+  //       .trigger('mouseover')
+  //       .then(() => {
+  //         cy.get('[data-e2e=columns_selector_popover_content]')
+  //           .should('be.visible')
+  //           .within(() => {
+  //             cy.get('.ant-checkbox-wrapper-checked')
+  //               // .should('have.length', 5)
+  //               .then(($options) => {
+  //                 return (
+  //                   Cypress.$.makeArray($options)
+  //                     .map((option) => option.innerText)
+  //                 )
+  //               })
+  //               // make sure there exists the default executed statements
+  //               .should('to.deep.eq', Object.values(defaultColumns))
+  //           })
+  //       })
+  //   })
 
-    it('Default selected columns', () => {
-      cy.get('[role=columnheader]').not('.is-empty')
-      // .should('have.length', 5)
-      // .each(($column) => {
-      //   console.log('defaultColumns[$column]', defaultColumns[$column])
-      //   cy.wrap($column).contains(defaultColumns[$column])
-      // })
-    })
+  //   it('Select all column fileds', () => {
+  //     cy.get('[data-e2e=columns_selector_popover]')
+  //       .trigger('mouseover')
+  //       .then(() => {
+  //         cy.get('[data-e2e=column_selector_title]')
+  //           .check()
+  //           .then(() => {
+  //             cy.get('[role=columnheader]')
+  //               .not('.is-empty')
+  //               .should('have.length', 43)
+  //           })
+  //       })
+  //   })
 
-    // it('Hover on columns selector and check selected fileds ', () => {
-    //   cy.get('[data-e2e=columns_selector_popover]')
-    //     .trigger('mouseover')
-    //     .then(() => {
-    //       cy.get('[data-e2e=columns_selector_popover_content]')
-    //         .should('be.visible')
-    //         .within(() => {
-    //           // check default selectedColumns checked
-    //           defaultColumns.forEach((c, idx) => {
-    //             cy.contains(c)
-    //               .parent()
-    //               .within(() => {
-    //                 cy.get(
-    //                   `[data-e2e=columns_selector_field_${defaultColumnsKeys[idx]}]`
-    //                 ).should('be.checked')
-    //               })
-    //           })
-    //         })
-    //     })
-    // })
+  //   it('Reset selected column fields', () => {
+  //     cy.get('[data-e2e=columns_selector_popover]')
+  //       .trigger('mouseover')
+  //       .then(() => {
+  //         cy.get('[data-e2e=column_selector_reset]')
+  //           .click()
+  //           .then(() => {
+  //             cy.get('[role=columnheader]')
+  //               .not('.is-empty')
+  //               .should('have.length', 5)
+  //           })
+  //       })
+  //   })
+
+  //   it('Select an orbitary column field', () => {
+  //     cy.get('[data-e2e=columns_selector_popover]')
+  //       .trigger('mouseover')
+  //       .then(() => {
+  //         cy.contains('Total Coprocessor Tasks')
+  //           .within(() => {
+  //             cy.get('[data-e2e=columns_selector_field_sum_cop_task_num]').check()
+  //           })
+  //           .then(() => {
+  //             cy.get('[data-item-key=sum_cop_task_num]')
+  //               .should('have.text', 'Total Coprocessor Tasks')
+  //           })
+  //       })
+  //   })
+
+  //   it('UnCheck last selected orbitary column field', () => {
+  //     cy.get('[data-e2e=columns_selector_popover]')
+  //       .trigger('mouseover')
+  //       .then(() => {
+  //         cy.contains('Total Coprocessor Tasks')
+  //           .within(() => {
+  //             cy.get('[data-e2e=columns_selector_field_sum_cop_task_num]').uncheck()
+  //           })
+  //           .then(() => {
+  //             cy.get('[data-item-key=sum_cop_task_num]').should('not.exist')
+  //           })
+  //       })
+  //   })
+
+  // it('Check SHOW_FULL_QUERY_TEXT', () => {
+  //   cy.get('[data-e2e=columns_selector_popover]')
+  //     .trigger('mouseover')
+  //     .then(() => {
+  //       cy.get('[data-e2e=statement_show_full_sql]')
+  //         .check()
+  //         .then(() => {
+  //           cy.get('[data-automation-key=digest_text]')
+  //             .eq(0)
+  //             .find('[data-e2e=syntax_highlighter_original]')
+  //         })
+
+  //       cy.get('[data-e2e=statement_show_full_sql]')
+  //         .uncheck()
+  //         .then(() => {
+  //           cy.get('[data-automation-key=digest_text]')
+  //             .eq(0)
+  //             .trigger('mouseover')
+  //             .find('[data-e2e=syntax_highlighter_compact]')
+  //         })
+  //     })
+  // })
+  // })
+
+  // describe('Reload statement', () => {
+  //   it('Reload statement table after execute a query', () => {
+  //     let queryData = {
+  //       query: 'select count(*) from tidb;',
+  //       database: 'mysql',
+  //     }
+  //     cy.task('queryDB', { ...queryData })
 
-    // it('Select all column fileds', () => {
-    //   cy.get('[data-e2e=columns_selector_popover]')
-    //     .trigger('mouseover')
+  //     cy.intercept(
+  //       `${Cypress.env('apiBasePath')}statements/list*`,
+  //     ).as('statements_list')
+  //     cy.wait('@statements_list').then(() => {
+  //       cy.get('[data-e2e=statement_refresh]')
+  //       .click()
+  //       .then(() => {
+  //         cy.get('[data-automation-key=digest_text]').contains(
+  //           'SELECT count (?) FROM tidb;'
+  //         )
+  //       })
+  //     })
+
+  //   })
+  // })
+
+  describe('Statement Setting', () => {
+    // it('Close setting panel', () => {
+    //   cy.get('[data-e2e=statement_setting]')
+    //     .click()
     //     .then(() => {
-    //       cy.get('[data-e2e=column_selector_title]')
-    //         .check()
+    //       cy.get('.ant-drawer-mask')
+    //         .click()
     //         .then(() => {
-    //           cy.get('[role=columnheader]')
-    //             .not('.is-empty')
-    //             .should('have.length', 44)
+    //           cy.get('.ant-drawer-content').should('not.be.visible')
     //         })
     //     })
-    // })
 
-    // it('Reset selected column fields', () => {
-    //   cy.get('[data-e2e=columns_selector_popover]')
-    //     .trigger('mouseover')
+    //   cy.get('[data-e2e=statement_setting]')
+    //     .click()
     //     .then(() => {
-    //       cy.get('[data-e2e=column_selector_reset]')
+    //       cy.get('.ant-drawer-close')
     //         .click()
     //         .then(() => {
-    //           cy.get('[role=columnheader]')
-    //             .not('.is-empty')
-    //             .should('have.length', 4)
+    //           cy.get('.ant-drawer-content').should('not.be.visible')
     //         })
     //     })
     // })
 
-    // it('Select an orbitary column field', () => {
-    //   cy.get('[data-e2e=columns_selector_popover]')
-    //     .trigger('mouseover')
+    // const siwtchStatement = (isEnabled) => {
+    //   cy.get('[data-e2e=statement_setting]')
+    //     .click()
     //     .then(() => {
-    //       cy.contains('Max Disk')
-    //         .within(() => {
-    //           cy.get('[data-e2e=columns_selector_field_disk_max]').check()
-    //         })
-    //         .then(() => {
-    //           cy.get('[role=columnheader]')
-    //             .not('.is-empty')
-    //             .last()
-    //             .should('have.text', 'Max Disk ')
-    //         })
+    //       cy.get('.ant-drawer-content').should('exist')
+    //       cy.get('[data-e2e=statemen_enbale_switcher]')
+    //         // the current of switcher is isEnabled
+    //         .should('have.attr', 'aria-checked', isEnabled)
+    //         .click()
+    //       cy.get('[data-e2e=submit_btn]').click()
     //     })
+    // }
+    // it('Disable statement feature', () => {
+    //   siwtchStatement('true')
+    //   cy.get('.ant-modal-confirm-btns').find('.ant-btn-dangerous').click()
+    //   cy.get('[data-e2e=statements_table]').should('not.exist')
+    // })
+
+    // it('Enable statement feature', () => {
+    //   siwtchStatement('false')
+    //   cy.get('[data-e2e=statements_table]').should('exist')
     // })
 
-    // it('UnCheck last selected orbitary column field', () => {
-    //   cy.get('[data-e2e=columns_selector_popover]')
-    //     .trigger('mouseover')
+    // const checkSilder = (sizeList, defaultValueNow, dataE2EValue) => {
+    //   cy.get('[data-e2e=statement_setting]')
+    //     .click()
     //     .then(() => {
-    //       cy.contains('Max Disk')
-    //         .within(() => {
-    //           cy.get('[data-e2e=columns_selector_field_disk_max]').uncheck()
-    //         })
-    //         .then(() => {
-    //           cy.get('[role=columnheader]')
-    //             .eq(1)
-    //             .should('have.text', 'Finish Time ')
-    //         })
+    //       cy.get(``).within(() => {
+    //         cy.get('.ant-slider-handle').should(
+    //           'have.attr',
+    //           'aria-valuenow',
+    //           defaultValueNow
+    //         )
+
+    //         cy.get('.ant-slider-mark-text')
+    //           .then(($marks) => {
+    //             return Cypress.$.makeArray($marks).map((mark) => mark.innerText)
+    //           })
+    //           // make sure there exists the default executed statements
+    //           .should('to.deep.eq', sizeList)
+    //       })
     //     })
+    // }
+
+    // it('Statement setting max size', () => {
+    //   const sizeList = ['200', '1000', '2000', '5000']
+    //   checkSilder(sizeList, '3000', 'statement_setting_max_size')
     // })
 
-    // it('Check SLOW_QUERY_SHOW_FULL_SQL', () => {
-    //   cy.get('[data-e2e=columns_selector_popover]')
-    //     .trigger('mouseover')
-    //     .then(() => {
-    //       cy.get('[data-e2e=slow_query_show_full_sql]')
-    //         .check()
-    //         .then(() => {
-    //           cy.get('[data-automation-key=query]')
-    //             .eq(0)
-    //             .find('[data-e2e=syntax_highlighter_original]')
-    //         })
+    // it('Statement setting window size', () => {
+    //   const sizeList = ['1', '5', '15', '30', '60']
+    //   checkSilder(sizeList, '30', 'statement_setting_refresh_interval')
+    // })
 
-    //       cy.get('[data-e2e=slow_query_show_full_sql]')
-    //         .uncheck()
-    //         .then(() => {
-    //           cy.get('[data-automation-key=query]')
-    //             .eq(0)
-    //             .trigger('mouseover')
-    //             .find('[data-e2e=syntax_highlighter_compact]')
-    //         })
-    //     })
+    // it('Statement setting number of windows', () => {
+    //   const sizeList = ['1', '255']
+    //   checkSilder(sizeList, '24', 'statement_setting_history_size')
     // })
+
+    const getAriaValueNow = (dataE2EValue) => {
+      cy.get(`[data-e2e=${dataE2EValue}]`).within(() => {
+        cy.get('.ant-slider-handle').then(($el) => {
+          console.log('value', $el[0].ariaValueNow)
+          return $el[0].ariaValueNow
+        })
+      })
+    }
+
+    const calcStmtHistorySize = (refreshInterval, historySize) => {
+      const totalMins = refreshInterval * historySize
+      const day = Math.floor(totalMins / (24 * 60))
+      const hour = Math.floor((totalMins - day * 24 * 60) / 60)
+      const min = totalMins - day * 24 * 60 - hour * 60
+      return `${day} day ${hour} hour ${min} min`
+    }
+
+    it('SQL Statement History Size', () => {
+      cy.get('[data-e2e=statement_setting]')
+        .click()
+        .then(() => {
+          const refreshInterval = getAriaValueNow(
+            'statement_setting_refresh_interval'
+          )
+          const historySize = getAriaValueNow('statement_setting_history_size')
+          console.log('refreshInterval', refreshInterval, historySize)
+          const StmtHistorySize = calcStmtHistorySize(
+            refreshInterval,
+            historySize
+          )
+
+          console.log('StmtHistorySize======', StmtHistorySize)
+
+          cy.get('[data-e2e=statement_setting_keep_duration]').within(() => {
+            cy.get('.ant-form-item-control-input-content').should(
+              'eq',
+              StmtHistorySize
+            )
+          })
+        })
+    })
   })
 })
diff --git a/ui/lib/apps/Statement/pages/List/StatementSettingForm.tsx b/ui/lib/apps/Statement/pages/List/StatementSettingForm.tsx
index 4229be08cd..9ac04a6521 100755
--- a/ui/lib/apps/Statement/pages/List/StatementSettingForm.tsx
+++ b/ui/lib/apps/Statement/pages/List/StatementSettingForm.tsx
@@ -99,7 +99,10 @@ function StatementSettingForm({ onClose, onConfigUpdated }: Props) {
             extra={t('statement.settings.switch_tooltip')}
           >
             <Form.Item noStyle name="enable" valuePropName="checked">
-              <Switch disabled={!isWriteable} />
+              <Switch
+                disabled={!isWriteable}
+                data-e2e="statemen_enbale_switcher"
+              />
             </Form.Item>
           </Form.Item>
           <Form.Item
@@ -112,6 +115,7 @@ function StatementSettingForm({ onClose, onConfigUpdated }: Props) {
                   <Form.Item
                     label={t('statement.settings.max_size')}
                     extra={t('statement.settings.max_size_tooltip')}
+                    data-e2e="statement_setting_max_size"
                   >
                     <Input.Group>
                       <Form.Item noStyle name="max_size">
@@ -128,6 +132,7 @@ function StatementSettingForm({ onClose, onConfigUpdated }: Props) {
                   <Form.Item
                     label={t('statement.settings.refresh_interval')}
                     extra={t('statement.settings.refresh_interval_tooltip')}
+                    data-e2e="statement_setting_refresh_interval"
                   >
                     <Input.Group>
                       <Form.Item noStyle name="refresh_interval">
@@ -144,6 +149,7 @@ function StatementSettingForm({ onClose, onConfigUpdated }: Props) {
                   <Form.Item
                     label={t('statement.settings.history_size')}
                     extra={t('statement.settings.history_size_tooltip')}
+                    data-e2e="statement_setting_history_size"
                   >
                     <Input.Group>
                       <Form.Item noStyle name="history_size">
@@ -163,6 +169,7 @@ function StatementSettingForm({ onClose, onConfigUpdated }: Props) {
                       prev.refresh_interval !== cur.refresh_interval ||
                       prev.history_size !== cur.history_size
                     }
+                    data-e2e="statement_setting_keep_duration"
                   >
                     {({ getFieldValue }) => {
                       const refreshInterval =
@@ -180,6 +187,7 @@ function StatementSettingForm({ onClose, onConfigUpdated }: Props) {
                     extra={t('statement.settings.internal_query_tooltip')}
                     name="internal_query"
                     valuePropName="checked"
+                    data-e2e="statement_setting_internal_query"
                   >
                     <Switch disabled={!isWriteable} />
                   </Form.Item>
@@ -194,10 +202,11 @@ function StatementSettingForm({ onClose, onConfigUpdated }: Props) {
                 htmlType="submit"
                 loading={submitting}
                 disabled={!isWriteable}
+                data-e2e="submit_btn"
               >
                 {t('statement.settings.actions.save')}
               </Button>
-              <Button onClick={onClose}>
+              <Button onClick={onClose} data-e2e="cancel_btn">
                 {t('statement.settings.actions.cancel')}
               </Button>
             </Space>
diff --git a/ui/lib/apps/Statement/pages/List/index.tsx b/ui/lib/apps/Statement/pages/List/index.tsx
index dabb15b317..66a940d33e 100644
--- a/ui/lib/apps/Statement/pages/List/index.tsx
+++ b/ui/lib/apps/Statement/pages/List/index.tsx
@@ -173,6 +173,7 @@ export default function StatementsOverview() {
                   <Checkbox
                     checked={showFullSQL}
                     onChange={(e) => setShowFullSQL(e.target.checked)}
+                    data-e2e="statement_show_full_sql"
                   >
                     {t(
                       'statement.pages.overview.toolbar.select_columns.show_full_sql'
@@ -184,14 +185,20 @@ export default function StatementsOverview() {
             {enable && (
               <RefreshTooltip isOutdated={isTimeRangeOutdated}>
                 {loadingStatements ? (
-                  <LoadingOutlined />
+                  <LoadingOutlined data-e2e="statement_refresh" />
                 ) : (
-                  <ReloadOutlined onClick={refresh} />
+                  <ReloadOutlined
+                    onClick={refresh}
+                    data-e2e="statement_refresh"
+                  />
                 )}
               </RefreshTooltip>
             )}
             <Tooltip title={t('statement.settings.title')} placement="bottom">
-              <SettingOutlined onClick={() => setShowSettings(true)} />
+              <SettingOutlined
+                onClick={() => setShowSettings(true)}
+                data-e2e="statement_setting"
+              />
             </Tooltip>
             <Dropdown overlay={dropdownMenu} placement="bottomRight">
               <div style={{ cursor: 'pointer' }}>

From 3653a94a438074b713748aa925e6d37d8a3888aa Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Wed, 2 Mar 2022 21:23:14 +0800
Subject: [PATCH 27/41] update statement list

---
 .../integration/statement/01-list.spec.js     | 962 +++++++++---------
 .../Overview/components/RecentStatements.tsx  |   1 -
 .../utils/useStatementTableController.ts      |   1 -
 3 files changed, 491 insertions(+), 473 deletions(-)

diff --git a/ui/cypress/integration/statement/01-list.spec.js b/ui/cypress/integration/statement/01-list.spec.js
index 7f2ec2de80..65622c66bb 100644
--- a/ui/cypress/integration/statement/01-list.spec.js
+++ b/ui/cypress/integration/statement/01-list.spec.js
@@ -29,491 +29,511 @@ describe('SQL statements list page', () => {
     'SELECT `version` ()',
   ]
 
-  // describe('Initialize statemen list page', () => {
-  //   it('Statement side bar highlighted', () => {
-  //     cy.get('[data-e2e=menu_item_statement]')
-  //       .should('be.visible')
-  //       .and('has.class', 'ant-menu-item-selected')
-  //   })
-
-  //   it('Has Toolbar', function () {
-  //     cy.get('[data-e2e=statement_toolbar]').should('be.visible')
-  //   })
-
-  //   it('Statements is enabled by default', () => {
-  //     cy.get('[data-e2e=statements_table]').should('be.visible')
-  //   })
-
-  //   it('Get statement list bad request', () => {
-  //     const staticResponse = {
-  //       statusCode: 400,
-  //       body: {
-  //         code: 'common.bad_request',
-  //         error: true,
-  //         message: 'common.bad_request',
-  //       },
-  //     }
-
-  //     // stub out a response body
-  //     cy.intercept(
-  //       `${Cypress.env('apiBasePath')}statements/list*`,
-  //       staticResponse
-  //     ).as('statements_list')
-  //     cy.wait('@statements_list').then(() => {
-  //       cy.get('[data-e2e=alert_error_bar]').should(
-  //         'has.text',
-  //         staticResponse.body.message
-  //       )
-  //     })
-  //   })
-
-  //   it('Statements which executed by default when starting TiDB', () => {
-  //     cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
-  //       'statements_list'
-  //     )
-
-  //     cy.wait('@statements_list').then((res) => {
-  //       const response = res.response.body
-
-  //       cy.get('[data-e2e=syntax_highlighter_compact]')
-  //         .should('have.length', response.length)
-  //         .then(($stmts) => {
-  //           // we get a list of jQuery elements
-  //           // let's convert the jQuery object into a plain array
-  //           return (
-  //             Cypress.$.makeArray($stmts)
-  //               // and extract inner text from each
-  //               .map((stmt) => stmt.innerText)
-  //           )
-  //         })
-  //         // make sure there exists the default executed statements
-  //         .should('to.include.members', defaultExecStmtList)
-  //     })
-  //   })
-  // })
-
-  // describe('Filter statements by changing database', () => {
-  //   it('No database selected by default', () => {
-  //     cy.get('[data-e2e=base_select_input_text]').eq(0).should('has.text', 'All Databases')
-  //   })
-
-  //   it('Show all databases', () => {
-  //     cy.intercept(`${Cypress.env('apiBasePath')}info/databases`).as(
-  //       'databases'
-  //     )
-
-  //     cy.wait('@databases').then((res) => {
-  //       const databases = res.response.body
-  //       testBaseSelectorOptions(databases, 0)
-  //     })
-  //   })
-
-  //   it('Filter statements without use database', () => {
-  //     cy.intercept(`${Cypress.env('apiBasePath')}info/databases`).as(
-  //       'databases'
-  //     )
-
-  //     cy.wait('@databases').then(() => {
-  //       // check all options in databases selector
-  //       checkAllOptionsInBaseSelector(0)
-  //     })
-
-  //     // check the existence of statements without use database
-  //     cy.contains(defaultExecStmtList[0]).should('not.exist')
-  //     cy.contains(defaultExecStmtList[2]).should('not.exist')
-  //   })
-
-  //   it('Filter statements with use database (mysql)', () => {
-  //     let queryData = {
-  //       query: 'SELECT count(*) from user;',
-  //       database: 'mysql',
-  //     }
-  //     cy.task('queryDB', { ...queryData })
-
-  //     cy.intercept(`${Cypress.env('apiBasePath')}info/databases`).as(
-  //       'databases'
-  //     )
-
-  //     cy.wait('@databases').then(() => {
-  //       cy.get('[data-e2e=base_selector]')
-  //         .eq(0)
-  //         .click()
-  //         .then(() => {
-  //           cy.get('.ant-dropdown').within(() => {
-  //             cy.get('.ant-checkbox-input').eq(3).click()
-  //           })
-  //         }).then(() => {
-  //           cy.contains('SELECT count (?) FROM user;').should('exist')
-  //         })
-  //     })
-
-  //     // Use databases config remembered
-  //     cy.reload()
-  //     cy.get('[data-e2e=base_select_input_text]').eq(0).should('has.text', '1 Databases')
-  //   })
-  // })
-
-  // describe('Filter statements by changing kind', () => {
-  //   it('No kind selected by default', () => {
-  //     cy.get('[data-e2e=base_select_input_text]').eq(1).should('has.text', 'All Kinds')
-  //   })
-
-  //   it('Show all kind of statements', () => {
-  //     cy.intercept(`${Cypress.env('apiBasePath')}statements/stmt_types`).as(
-  //       'stmt_types'
-  //     )
-
-  //     cy.wait('@stmt_types').then((res) => {
-  //       const stmtTypesList = res.response.body
-  //       testBaseSelectorOptions(stmtTypesList, 1)
-  //     })
-  //   })
-
-  //   it('Filter statements with all kind checked', () => {
-  //     cy.intercept(`${Cypress.env('apiBasePath')}statements/stmt_types`).as(
-  //       'stmt_types'
-  //     )
-
-  //     cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
-  //       'statements_list'
-  //     )
-
-  //     cy.wait(['@stmt_types', '@statements_list']).then((interceptions) => {
-  //       // check all options in kind selector
-  //       checkAllOptionsInBaseSelector(1)
-  //       const statementsList = interceptions[1].response.body
-  //       cy.get('[data-e2e=syntax_highlighter_compact]')
-  //         .should('have.length', statementsList.length)
-  //     })
-
-  //   })
-
-  //   it('Filter statements with one kind checked', () => {
-  //     cy.intercept(`${Cypress.env('apiBasePath')}statements/stmt_types`).as(
-  //       'stmt_types'
-  //     )
-
-  //     cy.wait('@stmt_types').then(() => {
-  //       cy.get('[data-e2e=base_selector]')
-  //         .eq(1)
-  //         .click()
-  //         .then(() => {
-  //           cy.get('.ant-dropdown').within(() => {
-  //             cy.get('.ant-checkbox-input').eq(2).click()
-  //           })
-  //         }).then(() => {
-  //           cy.get('[data-e2e=syntax_highlighter_compact]').each(($sql) => {
-  //             cy.wrap($sql).contains('SELECT')
-  //           })
-  //         })
-  //     })
-  //   })
-  // })
-
-  // describe('Search function', () => {
-  //   it('Default search text', () => {
-  //     cy.get('[data-e2e=sql_statements_search]').should('be.empty')
-  //   })
-
-  //   it('Search item with space', () => {
-  //     cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
-  //       'statements_list'
-  //     )
-
-  //     cy.get('[data-e2e=sql_statements_search]')
-  //       .type(' SELECT version{enter}')
-
-  //     cy.wait('@statements_list').then(() => {
-  //       cy.get('[data-e2e=syntax_highlighter_compact]').should('has.length', 1)
-  //     })
-  //   })
-
-  //   it('Type search without pressing enter then reload', () => {
-  //     cy.get('[data-e2e=sql_statements_search]').type('SELECT version')
-
-  //     cy.reload()
-  //     cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
-  //       'statements_list'
-  //     )
-
-  //     cy.get('[data-e2e=sql_statements_search]').clear().type('{enter}')
-
-  //     cy.wait('@statements_list').then((res) => {
-  //       const statementsList = res.response.body
-  //       cy.get('[data-e2e=syntax_highlighter_compact]').should('has.length', statementsList.length)
-  //     })
-  //   })
-  // })
-
-  // describe('Selected Columns', () => {
-  //   const defaultColumns = {
-  //     digest_text: 'Statement Template ',
-  //     sum_latency: 'Total Latency ',
-  //     avg_latency: 'Mean Latency ',
-  //     exec_count: '# Exec ',
-  //     plan_count: '# Plans ',
-  //     // related_schema: 'Database',
-  //   }
-
-  //   // it('Default selected columns', () => {
-  //   //   cy.get('[role=columnheader]')
-  //   //     .not('.is-empty')
-  //   //     .should('have.length', 6)
-  //   //     .each(($column, idx) => {
-  //   //       cy.wrap($column).contains(
-  //   //         defaultColumns[Object.keys(defaultColumns)[idx]]
-  //   //       )
-  //   //     })
-  //   // })
-
-  //   it('Hover on columns selector and check selected fileds ', () => {
-  //     cy.get('[data-e2e=columns_selector_popover]')
-  //       .trigger('mouseover')
-  //       .then(() => {
-  //         cy.get('[data-e2e=columns_selector_popover_content]')
-  //           .should('be.visible')
-  //           .within(() => {
-  //             cy.get('.ant-checkbox-wrapper-checked')
-  //               // .should('have.length', 5)
-  //               .then(($options) => {
-  //                 return (
-  //                   Cypress.$.makeArray($options)
-  //                     .map((option) => option.innerText)
-  //                 )
-  //               })
-  //               // make sure there exists the default executed statements
-  //               .should('to.deep.eq', Object.values(defaultColumns))
-  //           })
-  //       })
-  //   })
-
-  //   it('Select all column fileds', () => {
-  //     cy.get('[data-e2e=columns_selector_popover]')
-  //       .trigger('mouseover')
-  //       .then(() => {
-  //         cy.get('[data-e2e=column_selector_title]')
-  //           .check()
-  //           .then(() => {
-  //             cy.get('[role=columnheader]')
-  //               .not('.is-empty')
-  //               .should('have.length', 43)
-  //           })
-  //       })
-  //   })
-
-  //   it('Reset selected column fields', () => {
-  //     cy.get('[data-e2e=columns_selector_popover]')
-  //       .trigger('mouseover')
-  //       .then(() => {
-  //         cy.get('[data-e2e=column_selector_reset]')
-  //           .click()
-  //           .then(() => {
-  //             cy.get('[role=columnheader]')
-  //               .not('.is-empty')
-  //               .should('have.length', 5)
-  //           })
-  //       })
-  //   })
-
-  //   it('Select an orbitary column field', () => {
-  //     cy.get('[data-e2e=columns_selector_popover]')
-  //       .trigger('mouseover')
-  //       .then(() => {
-  //         cy.contains('Total Coprocessor Tasks')
-  //           .within(() => {
-  //             cy.get('[data-e2e=columns_selector_field_sum_cop_task_num]').check()
-  //           })
-  //           .then(() => {
-  //             cy.get('[data-item-key=sum_cop_task_num]')
-  //               .should('have.text', 'Total Coprocessor Tasks')
-  //           })
-  //       })
-  //   })
-
-  //   it('UnCheck last selected orbitary column field', () => {
-  //     cy.get('[data-e2e=columns_selector_popover]')
-  //       .trigger('mouseover')
-  //       .then(() => {
-  //         cy.contains('Total Coprocessor Tasks')
-  //           .within(() => {
-  //             cy.get('[data-e2e=columns_selector_field_sum_cop_task_num]').uncheck()
-  //           })
-  //           .then(() => {
-  //             cy.get('[data-item-key=sum_cop_task_num]').should('not.exist')
-  //           })
-  //       })
-  //   })
-
-  // it('Check SHOW_FULL_QUERY_TEXT', () => {
-  //   cy.get('[data-e2e=columns_selector_popover]')
-  //     .trigger('mouseover')
-  //     .then(() => {
-  //       cy.get('[data-e2e=statement_show_full_sql]')
-  //         .check()
-  //         .then(() => {
-  //           cy.get('[data-automation-key=digest_text]')
-  //             .eq(0)
-  //             .find('[data-e2e=syntax_highlighter_original]')
-  //         })
-
-  //       cy.get('[data-e2e=statement_show_full_sql]')
-  //         .uncheck()
-  //         .then(() => {
-  //           cy.get('[data-automation-key=digest_text]')
-  //             .eq(0)
-  //             .trigger('mouseover')
-  //             .find('[data-e2e=syntax_highlighter_compact]')
-  //         })
-  //     })
-  // })
-  // })
-
-  // describe('Reload statement', () => {
-  //   it('Reload statement table after execute a query', () => {
-  //     let queryData = {
-  //       query: 'select count(*) from tidb;',
-  //       database: 'mysql',
-  //     }
-  //     cy.task('queryDB', { ...queryData })
-
-  //     cy.intercept(
-  //       `${Cypress.env('apiBasePath')}statements/list*`,
-  //     ).as('statements_list')
-  //     cy.wait('@statements_list').then(() => {
-  //       cy.get('[data-e2e=statement_refresh]')
-  //       .click()
-  //       .then(() => {
-  //         cy.get('[data-automation-key=digest_text]').contains(
-  //           'SELECT count (?) FROM tidb;'
-  //         )
-  //       })
-  //     })
-
-  //   })
-  // })
+  describe('Initialize statemen list page', () => {
+    it('Statement side bar highlighted', () => {
+      cy.get('[data-e2e=menu_item_statement]')
+        .should('be.visible')
+        .and('has.class', 'ant-menu-item-selected')
+    })
 
-  describe('Statement Setting', () => {
-    // it('Close setting panel', () => {
-    //   cy.get('[data-e2e=statement_setting]')
-    //     .click()
-    //     .then(() => {
-    //       cy.get('.ant-drawer-mask')
-    //         .click()
-    //         .then(() => {
-    //           cy.get('.ant-drawer-content').should('not.be.visible')
-    //         })
-    //     })
-
-    //   cy.get('[data-e2e=statement_setting]')
-    //     .click()
-    //     .then(() => {
-    //       cy.get('.ant-drawer-close')
-    //         .click()
-    //         .then(() => {
-    //           cy.get('.ant-drawer-content').should('not.be.visible')
-    //         })
-    //     })
-    // })
-
-    // const siwtchStatement = (isEnabled) => {
-    //   cy.get('[data-e2e=statement_setting]')
-    //     .click()
-    //     .then(() => {
-    //       cy.get('.ant-drawer-content').should('exist')
-    //       cy.get('[data-e2e=statemen_enbale_switcher]')
-    //         // the current of switcher is isEnabled
-    //         .should('have.attr', 'aria-checked', isEnabled)
-    //         .click()
-    //       cy.get('[data-e2e=submit_btn]').click()
-    //     })
-    // }
-    // it('Disable statement feature', () => {
-    //   siwtchStatement('true')
-    //   cy.get('.ant-modal-confirm-btns').find('.ant-btn-dangerous').click()
-    //   cy.get('[data-e2e=statements_table]').should('not.exist')
-    // })
-
-    // it('Enable statement feature', () => {
-    //   siwtchStatement('false')
-    //   cy.get('[data-e2e=statements_table]').should('exist')
-    // })
-
-    // const checkSilder = (sizeList, defaultValueNow, dataE2EValue) => {
-    //   cy.get('[data-e2e=statement_setting]')
-    //     .click()
-    //     .then(() => {
-    //       cy.get(``).within(() => {
-    //         cy.get('.ant-slider-handle').should(
-    //           'have.attr',
-    //           'aria-valuenow',
-    //           defaultValueNow
-    //         )
-
-    //         cy.get('.ant-slider-mark-text')
-    //           .then(($marks) => {
-    //             return Cypress.$.makeArray($marks).map((mark) => mark.innerText)
-    //           })
-    //           // make sure there exists the default executed statements
-    //           .should('to.deep.eq', sizeList)
-    //       })
-    //     })
-    // }
-
-    // it('Statement setting max size', () => {
-    //   const sizeList = ['200', '1000', '2000', '5000']
-    //   checkSilder(sizeList, '3000', 'statement_setting_max_size')
-    // })
-
-    // it('Statement setting window size', () => {
-    //   const sizeList = ['1', '5', '15', '30', '60']
-    //   checkSilder(sizeList, '30', 'statement_setting_refresh_interval')
-    // })
-
-    // it('Statement setting number of windows', () => {
-    //   const sizeList = ['1', '255']
-    //   checkSilder(sizeList, '24', 'statement_setting_history_size')
-    // })
-
-    const getAriaValueNow = (dataE2EValue) => {
-      cy.get(`[data-e2e=${dataE2EValue}]`).within(() => {
-        cy.get('.ant-slider-handle').then(($el) => {
-          console.log('value', $el[0].ariaValueNow)
-          return $el[0].ariaValueNow
-        })
+    it('Has Toolbar', function () {
+      cy.get('[data-e2e=statement_toolbar]').should('be.visible')
+    })
+
+    it('Statements is enabled by default', () => {
+      cy.get('[data-e2e=statements_table]').should('be.visible')
+    })
+
+    it('Get statement list bad request', () => {
+      const staticResponse = {
+        statusCode: 400,
+        body: {
+          code: 'common.bad_request',
+          error: true,
+          message: 'common.bad_request',
+        },
+      }
+
+      // stub out a response body
+      cy.intercept(
+        `${Cypress.env('apiBasePath')}statements/list*`,
+        staticResponse
+      ).as('statements_list')
+      cy.wait('@statements_list').then(() => {
+        cy.get('[data-e2e=alert_error_bar]').should(
+          'has.text',
+          staticResponse.body.message
+        )
+      })
+    })
+
+    it('Statements which executed by default when starting TiDB', () => {
+      cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
+        'statements_list'
+      )
+
+      cy.wait('@statements_list').then((res) => {
+        const response = res.response.body
+
+        cy.get('[data-e2e=syntax_highlighter_compact]')
+          .should('have.length', response.length)
+          .then(($stmts) => {
+            // we get a list of jQuery elements
+            // let's convert the jQuery object into a plain array
+            return (
+              Cypress.$.makeArray($stmts)
+                // and extract inner text from each
+                .map((stmt) => stmt.innerText)
+            )
+          })
+          // make sure there exists the default executed statements
+          .should('to.include.members', defaultExecStmtList)
+      })
+    })
+  })
+
+  describe('Filter statements by changing database', () => {
+    it('No database selected by default', () => {
+      cy.get('[data-e2e=base_select_input_text]')
+        .eq(0)
+        .should('has.text', 'All Databases')
+    })
+
+    it('Show all databases', () => {
+      cy.intercept(`${Cypress.env('apiBasePath')}info/databases`).as(
+        'databases'
+      )
+
+      cy.wait('@databases').then((res) => {
+        const databases = res.response.body
+        testBaseSelectorOptions(databases, 0)
       })
+    })
+
+    it('Filter statements without use database', () => {
+      cy.intercept(`${Cypress.env('apiBasePath')}info/databases`).as(
+        'databases'
+      )
+
+      cy.wait('@databases').then(() => {
+        // check all options in databases selector
+        checkAllOptionsInBaseSelector(0)
+      })
+
+      // check the existence of statements without use database
+      cy.contains(defaultExecStmtList[0]).should('not.exist')
+      cy.contains(defaultExecStmtList[2]).should('not.exist')
+    })
+
+    it('Filter statements with use database (mysql)', () => {
+      let queryData = {
+        query: 'SELECT count(*) from user;',
+        database: 'mysql',
+      }
+      cy.task('queryDB', { ...queryData })
+
+      cy.intercept(`${Cypress.env('apiBasePath')}info/databases`).as(
+        'databases'
+      )
+
+      cy.wait('@databases').then(() => {
+        cy.get('[data-e2e=base_selector]')
+          .eq(0)
+          .click()
+          .then(() => {
+            cy.get('.ant-dropdown').within(() => {
+              cy.get('.ant-checkbox-input').eq(3).click()
+            })
+          })
+          .then(() => {
+            cy.contains('SELECT count (?) FROM user;').should('exist')
+          })
+      })
+
+      // Use databases config remembered
+      cy.reload()
+      cy.get('[data-e2e=base_select_input_text]')
+        .eq(0)
+        .should('has.text', '1 Databases')
+    })
+  })
+
+  describe('Filter statements by changing kind', () => {
+    it('No kind selected by default', () => {
+      cy.get('[data-e2e=base_select_input_text]')
+        .eq(1)
+        .should('has.text', 'All Kinds')
+    })
+
+    it('Show all kind of statements', () => {
+      cy.intercept(`${Cypress.env('apiBasePath')}statements/stmt_types`).as(
+        'stmt_types'
+      )
+
+      cy.wait('@stmt_types').then((res) => {
+        const stmtTypesList = res.response.body
+        testBaseSelectorOptions(stmtTypesList, 1)
+      })
+    })
+
+    it('Filter statements with all kind checked', () => {
+      cy.intercept(`${Cypress.env('apiBasePath')}statements/stmt_types`).as(
+        'stmt_types'
+      )
+
+      cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
+        'statements_list'
+      )
+
+      cy.wait(['@stmt_types', '@statements_list']).then((interceptions) => {
+        // check all options in kind selector
+        checkAllOptionsInBaseSelector(1)
+        const statementsList = interceptions[1].response.body
+        cy.get('[data-e2e=syntax_highlighter_compact]').should(
+          'have.length',
+          statementsList.length
+        )
+      })
+    })
+
+    it('Filter statements with one kind checked', () => {
+      cy.intercept(`${Cypress.env('apiBasePath')}statements/stmt_types`).as(
+        'stmt_types'
+      )
+
+      cy.wait('@stmt_types').then(() => {
+        cy.get('[data-e2e=base_selector]')
+          .eq(1)
+          .click()
+          .then(() => {
+            cy.get('.ant-dropdown').within(() => {
+              cy.get('.ant-checkbox-input').eq(2).click()
+            })
+          })
+          .then(() => {
+            cy.get('[data-e2e=syntax_highlighter_compact]').each(($sql) => {
+              cy.wrap($sql).contains('SELECT')
+            })
+          })
+      })
+    })
+  })
+
+  describe('Search function', () => {
+    it('Default search text', () => {
+      cy.get('[data-e2e=sql_statements_search]').should('be.empty')
+    })
+
+    it('Search item with space', () => {
+      cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
+        'statements_list'
+      )
+
+      cy.get('[data-e2e=sql_statements_search]').type(' SELECT version{enter}')
+
+      cy.wait('@statements_list').then(() => {
+        cy.get('[data-e2e=syntax_highlighter_compact]').should('has.length', 1)
+      })
+    })
+
+    it('Type search without pressing enter then reload', () => {
+      cy.get('[data-e2e=sql_statements_search]').type('SELECT version')
+
+      cy.reload()
+      cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
+        'statements_list'
+      )
+
+      cy.get('[data-e2e=sql_statements_search]').clear().type('{enter}')
+
+      cy.wait('@statements_list').then((res) => {
+        const statementsList = res.response.body
+        cy.get('[data-e2e=syntax_highlighter_compact]').should(
+          'has.length',
+          statementsList.length
+        )
+      })
+    })
+  })
+
+  describe('Selected Columns', () => {
+    const defaultColumns = {
+      digest_text: 'Statement Template ',
+      sum_latency: 'Total Latency ',
+      avg_latency: 'Mean Latency ',
+      exec_count: '# Exec ',
+      plan_count: '# Plans ',
     }
 
-    const calcStmtHistorySize = (refreshInterval, historySize) => {
-      const totalMins = refreshInterval * historySize
-      const day = Math.floor(totalMins / (24 * 60))
-      const hour = Math.floor((totalMins - day * 24 * 60) / 60)
-      const min = totalMins - day * 24 * 60 - hour * 60
-      return `${day} day ${hour} hour ${min} min`
+    it('Default selected columns', () => {
+      cy.get('[role=columnheader]')
+        .not('.is-empty')
+        .should('have.length', 5)
+        .each(($column, idx) => {
+          cy.wrap($column).contains(
+            defaultColumns[Object.keys(defaultColumns)[idx]]
+          )
+        })
+    })
+
+    it('Hover on columns selector and check selected fileds ', () => {
+      cy.get('[data-e2e=columns_selector_popover]')
+        .trigger('mouseover')
+        .then(() => {
+          cy.get('[data-e2e=columns_selector_popover_content]')
+            .should('be.visible')
+            .within(() => {
+              cy.get('.ant-checkbox-wrapper-checked')
+                // .should('have.length', 5)
+                .then(($options) => {
+                  return Cypress.$.makeArray($options).map(
+                    (option) => option.innerText
+                  )
+                })
+                // make sure there exists the default executed statements
+                .should('to.deep.eq', Object.values(defaultColumns))
+            })
+        })
+    })
+
+    it('Select all column fileds', () => {
+      cy.get('[data-e2e=columns_selector_popover]')
+        .trigger('mouseover')
+        .then(() => {
+          cy.get('[data-e2e=column_selector_title]')
+            .check()
+            .then(() => {
+              cy.get('[role=columnheader]')
+                .not('.is-empty')
+                .should('have.length', 43)
+            })
+        })
+    })
+
+    it('Reset selected column fields', () => {
+      cy.get('[data-e2e=columns_selector_popover]')
+        .trigger('mouseover')
+        .then(() => {
+          cy.get('[data-e2e=column_selector_reset]')
+            .click()
+            .then(() => {
+              cy.get('[role=columnheader]')
+                .not('.is-empty')
+                .should('have.length', 5)
+            })
+        })
+    })
+
+    it('Select an orbitary column field', () => {
+      cy.get('[data-e2e=columns_selector_popover]')
+        .trigger('mouseover')
+        .then(() => {
+          cy.contains('Total Coprocessor Tasks')
+            .within(() => {
+              cy.get(
+                '[data-e2e=columns_selector_field_sum_cop_task_num]'
+              ).check()
+            })
+            .then(() => {
+              cy.get('[data-item-key=sum_cop_task_num]').should(
+                'have.text',
+                'Total Coprocessor Tasks'
+              )
+            })
+        })
+    })
+
+    it('UnCheck last selected orbitary column field', () => {
+      cy.get('[data-e2e=columns_selector_popover]')
+        .trigger('mouseover')
+        .then(() => {
+          cy.contains('Total Coprocessor Tasks')
+            .within(() => {
+              cy.get(
+                '[data-e2e=columns_selector_field_sum_cop_task_num]'
+              ).uncheck()
+            })
+            .then(() => {
+              cy.get('[data-item-key=sum_cop_task_num]').should('not.exist')
+            })
+        })
+    })
+
+    it('Check SHOW_FULL_QUERY_TEXT', () => {
+      cy.get('[data-e2e=columns_selector_popover]')
+        .trigger('mouseover')
+        .then(() => {
+          cy.get('[data-e2e=statement_show_full_sql]')
+            .check()
+            .then(() => {
+              cy.get('[data-automation-key=digest_text]')
+                .eq(0)
+                .find('[data-e2e=syntax_highlighter_original]')
+            })
+
+          cy.get('[data-e2e=statement_show_full_sql]')
+            .uncheck()
+            .then(() => {
+              cy.get('[data-automation-key=digest_text]')
+                .eq(0)
+                .trigger('mouseover')
+                .find('[data-e2e=syntax_highlighter_compact]')
+            })
+        })
+    })
+  })
+
+  describe('Reload statement', () => {
+    it('Reload statement table after execute a query', () => {
+      let queryData = {
+        query: 'select count(*) from tidb;',
+        database: 'mysql',
+      }
+      cy.task('queryDB', { ...queryData })
+
+      cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
+        'statements_list'
+      )
+      cy.wait('@statements_list').then(() => {
+        cy.get('[data-e2e=statement_refresh]')
+          .click()
+          .then(() => {
+            cy.get('[data-automation-key=digest_text]').contains(
+              'SELECT count (?) FROM tidb;'
+            )
+          })
+      })
+    })
+  })
+
+  describe('Statement Setting', () => {
+    it('Close setting panel', () => {
+      cy.get('[data-e2e=statement_setting]')
+        .click()
+        .then(() => {
+          cy.get('.ant-drawer-mask')
+            .click()
+            .then(() => {
+              cy.get('.ant-drawer-content').should('not.be.visible')
+            })
+        })
+
+      cy.get('[data-e2e=statement_setting]')
+        .click()
+        .then(() => {
+          cy.get('.ant-drawer-close')
+            .click()
+            .then(() => {
+              cy.get('.ant-drawer-content').should('not.be.visible')
+            })
+        })
+    })
+
+    const siwtchStatement = (isEnabled) => {
+      cy.get('[data-e2e=statement_setting]')
+        .click()
+        .then(() => {
+          cy.get('.ant-drawer-content').should('exist')
+          cy.get('[data-e2e=statemen_enbale_switcher]')
+            // the current of switcher is isEnabled
+            .should('have.attr', 'aria-checked', isEnabled)
+            .click()
+          cy.get('[data-e2e=submit_btn]').click()
+        })
     }
 
-    it('SQL Statement History Size', () => {
+    it('Disable statement feature', () => {
+      siwtchStatement('true')
+      cy.get('.ant-modal-confirm-btns').find('.ant-btn-dangerous').click()
+      cy.get('[data-e2e=statements_table]').should('not.exist')
+    })
+
+    it('Enable statement feature', () => {
+      siwtchStatement('false')
+      cy.get('[data-e2e=statements_table]').should('exist')
+    })
+
+    const checkSilder = (sizeList, defaultValueNow, dataE2EValue) => {
       cy.get('[data-e2e=statement_setting]')
         .click()
         .then(() => {
-          const refreshInterval = getAriaValueNow(
-            'statement_setting_refresh_interval'
-          )
-          const historySize = getAriaValueNow('statement_setting_history_size')
-          console.log('refreshInterval', refreshInterval, historySize)
-          const StmtHistorySize = calcStmtHistorySize(
-            refreshInterval,
-            historySize
-          )
+          cy.get(`[data-e2e=${dataE2EValue}]`).within(() => {
+            cy.get('.ant-slider-handle').should(
+              'have.attr',
+              'aria-valuenow',
+              defaultValueNow
+            )
+
+            cy.get('.ant-slider-mark-text')
+              .then(($marks) => {
+                return Cypress.$.makeArray($marks).map((mark) => mark.innerText)
+              })
+              // make sure there exists the default executed statements
+              .should('to.deep.eq', sizeList)
+          })
+        })
+    }
+
+    it('Statement setting max size', () => {
+      const sizeList = ['200', '1000', '2000', '5000']
+      checkSilder(sizeList, '3000', 'statement_setting_max_size')
+    })
 
-          console.log('StmtHistorySize======', StmtHistorySize)
+    it('Statement setting window size', () => {
+      const sizeList = ['1', '5', '15', '30', '60']
+      checkSilder(sizeList, '30', 'statement_setting_refresh_interval')
+    })
+
+    it('Statement setting number of windows', () => {
+      const sizeList = ['1', '255']
+      checkSilder(sizeList, '24', 'statement_setting_history_size')
+    })
 
-          cy.get('[data-e2e=statement_setting_keep_duration]').within(() => {
-            cy.get('.ant-form-item-control-input-content').should(
-              'eq',
-              StmtHistorySize
+    describe('SQL Statement History Size', () => {
+      beforeEach(() => {
+        cy.get('[data-e2e=statement_setting]')
+          .click()
+          .then(() => {
+            // get refresh_interval value
+            cy.get(`[data-e2e=statement_setting_refresh_interval]`).within(
+              () => {
+                cy.get('.ant-slider-handle')
+                  .invoke('attr', 'aria-valuenow')
+                  .as('refreshIntervalVal')
+              }
             )
+
+            // get history_size value
+            cy.get(`[data-e2e=statement_setting_history_size]`).within(() => {
+              cy.get('.ant-slider-handle')
+                .invoke('attr', 'aria-valuenow')
+                .as('historySizeVal')
+            })
           })
+      })
+
+      const calcStmtHistorySize = (refreshInterval, historySize) => {
+        const totalMins = refreshInterval * historySize
+        const day = Math.floor(totalMins / (24 * 60))
+        const hour = Math.floor((totalMins - day * 24 * 60) / 60)
+        const min = totalMins - day * 24 * 60 - hour * 60
+        return `${day} day ${hour} hour ${min} min`
+      }
+
+      it('Check History Size', function () {
+        const stmtHistorySize = calcStmtHistorySize(
+          this.refreshIntervalVal,
+          this.historySizeVal
+        )
+        console.log('stmtHistorySize', stmtHistorySize)
+
+        cy.get('[data-e2e=statement_setting_keep_duration]').within(() => {
+          cy.get('.ant-form-item-control-input-content').should(
+            'have.text',
+            calcStmtHistorySize(this.refreshIntervalVal, this.historySizeVal)
+          )
         })
+      })
     })
   })
 })
diff --git a/ui/lib/apps/Overview/components/RecentStatements.tsx b/ui/lib/apps/Overview/components/RecentStatements.tsx
index a39fd7cf5a..26507a5141 100644
--- a/ui/lib/apps/Overview/components/RecentStatements.tsx
+++ b/ui/lib/apps/Overview/components/RecentStatements.tsx
@@ -13,7 +13,6 @@ const visibleColumnKeys: IColumnKeys = {
   digest_text: true,
   sum_latency: true,
   avg_latency: true,
-  related_schemas: true,
 }
 
 export default function RecentStatements() {
diff --git a/ui/lib/apps/Statement/utils/useStatementTableController.ts b/ui/lib/apps/Statement/utils/useStatementTableController.ts
index 3b9fd70626..5a1df1eebc 100644
--- a/ui/lib/apps/Statement/utils/useStatementTableController.ts
+++ b/ui/lib/apps/Statement/utils/useStatementTableController.ts
@@ -28,7 +28,6 @@ export const DEF_STMT_COLUMN_KEYS: IColumnKeys = {
   avg_latency: true,
   exec_count: true,
   plan_count: true,
-  related_schemas: true,
 }
 
 const QUERY_OPTIONS = 'statement.query_options'

From 2beaa78631831fbcdcb66c3e59aebaacde335164 Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Thu, 3 Mar 2022 20:58:52 +0800
Subject: [PATCH 28/41] update statement list

---
 .../integration/slow_query/01-list.spec.js    |  4 +-
 .../integration/statement/01-list.spec.js     | 63 ++++++++++++++++++-
 .../pages/List/TimeRangeSelector.tsx          |  8 ++-
 ui/lib/apps/Statement/pages/List/index.tsx    |  1 +
 4 files changed, 70 insertions(+), 6 deletions(-)

diff --git a/ui/cypress/integration/slow_query/01-list.spec.js b/ui/cypress/integration/slow_query/01-list.spec.js
index 01c9b10da1..311bba3fc3 100644
--- a/ui/cypress/integration/slow_query/01-list.spec.js
+++ b/ui/cypress/integration/slow_query/01-list.spec.js
@@ -323,7 +323,7 @@ describe('SlowQuery list page', () => {
           })
       })
 
-      it('Hover on columns selector and check selected fileds ', () => {
+      it('Hover on columns selector and check selected fields ', () => {
         cy.get('[data-e2e=columns_selector_popover]')
           .trigger('mouseover')
           .then(() => {
@@ -344,7 +344,7 @@ describe('SlowQuery list page', () => {
           })
       })
 
-      it('Select all column fileds', () => {
+      it('Select all column fields', () => {
         cy.get('[data-e2e=columns_selector_popover]')
           .trigger('mouseover')
           .then(() => {
diff --git a/ui/cypress/integration/statement/01-list.spec.js b/ui/cypress/integration/statement/01-list.spec.js
index 65622c66bb..66e11bb830 100644
--- a/ui/cypress/integration/statement/01-list.spec.js
+++ b/ui/cypress/integration/statement/01-list.spec.js
@@ -92,6 +92,65 @@ describe('SQL statements list page', () => {
     })
   })
 
+  describe('Time range selector', () => {
+    it('Default time range', () => {
+      cy.get('[data-e2e=statement_timerange_selector]').should(
+        'have.text',
+        'Recent 30 min'
+      )
+    })
+
+    it('Time range options', () => {
+      cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
+        'statements_list'
+      )
+
+      // select last_seen column field
+      cy.get('[data-e2e=columns_selector_popover]')
+        .trigger('mouseover')
+        .then(() => {
+          cy.contains('Last Seen').within(() => {
+            cy.get('[data-e2e=columns_selector_field_last_seen]').check()
+          })
+        })
+      cy.wait('@statements_list').then((res) => {
+        const response = res.response.body
+        console.log('response', response)
+        let lastSeenTimeStampList = []
+        response.forEach((stmt) => {
+          console.log('stmt.last_seen', stmt, stmt.last_seen)
+          lastSeenTimeStampList.push(stmt['last_seen'])
+        })
+        console.log('lastSeenTimeStampList', lastSeenTimeStampList)
+        cy.get('[data-e2e=statement_time_range_option]')
+          .should('have.length', 12)
+          .each(($option, $idx) => {
+            if ($idx == 0) {
+              // Recent 15 min is enabled
+              cy.wrap($option)
+                .invoke('attr', 'class')
+                .should('not.contain', 'time_range_item_disabled')
+            } else if ($idx == 1) {
+              // Recent 30 min is active
+              cy.wrap($option)
+                .invoke('attr', 'class')
+                .should('contain', 'time_range_item_active')
+            } else {
+              // the reset options are disabled
+              cy.wrap($option)
+                .invoke('attr', 'class')
+                .should('contain', 'time_range_item_disabled')
+            }
+          })
+
+        cy.get('[data-automation-key=digest_text]').should(
+          'have.length',
+          response.length
+        )
+      })
+    })
+  })
+
   describe('Filter statements by changing database', () => {
     it('No database selected by default', () => {
       cy.get('[data-e2e=base_select_input_text]')
@@ -276,7 +335,7 @@ describe('SQL statements list page', () => {
         })
     })
 
-    it('Hover on columns selector and check selected fileds ', () => {
+    it('Hover on columns selector and check selected fields', () => {
       cy.get('[data-e2e=columns_selector_popover]')
         .trigger('mouseover')
         .then(() => {
@@ -296,7 +355,7 @@ describe('SQL statements list page', () => {
         })
     })
 
-    it('Select all column fileds', () => {
+    it('Select all column fields', () => {
       cy.get('[data-e2e=columns_selector_popover]')
         .trigger('mouseover')
         .then(() => {
diff --git a/ui/lib/apps/Statement/pages/List/TimeRangeSelector.tsx b/ui/lib/apps/Statement/pages/List/TimeRangeSelector.tsx
index a4bac9bae8..157a72efac 100644
--- a/ui/lib/apps/Statement/pages/List/TimeRangeSelector.tsx
+++ b/ui/lib/apps/Statement/pages/List/TimeRangeSelector.tsx
@@ -214,6 +214,7 @@ export default function TimeRangeSelector({
                   curTimeRange.value === seconds,
               })}
               onClick={() => enabled && handleRecentChange(seconds)}
+              data-e2e="statement_time_range_option"
             >
               {t('statement.pages.overview.toolbar.time_range_selector.recent')}{' '}
               {getValueFormat('s')(seconds, 0)}
@@ -250,10 +251,13 @@ export default function TimeRangeSelector({
       disabled={timeRanges.length === 0}
       overlay={dropdownContent}
       trigger={['click']}
-      visible={dropdownVisible}
+      visible={true}
       onVisibleChange={setDropdownVisible}
     >
-      <Button icon={<ClockCircleOutlined />}>
+      <Button
+        icon={<ClockCircleOutlined />}
+        data-e2e="statement_timerange_selector"
+      >
         {curTimeRange.type === 'recent' ? (
           <span>
             {t('statement.pages.overview.toolbar.time_range_selector.recent')}{' '}
diff --git a/ui/lib/apps/Statement/pages/List/index.tsx b/ui/lib/apps/Statement/pages/List/index.tsx
index 66a940d33e..54d3571b0c 100644
--- a/ui/lib/apps/Statement/pages/List/index.tsx
+++ b/ui/lib/apps/Statement/pages/List/index.tsx
@@ -116,6 +116,7 @@ export default function StatementsOverview() {
                   timeRange,
                 })
               }
+              data-e2e="statement_time_range_selector"
             />
             <MultiSelect.Plain
               placeholder={t(

From 13449589146ee9cc1c67547aa741acd38c4a09e7 Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Mon, 7 Mar 2022 10:35:03 +0800
Subject: [PATCH 29/41] update statement

---
 .../integration/statement/01-list.spec.js     | 1085 +++++++++--------
 1 file changed, 553 insertions(+), 532 deletions(-)

diff --git a/ui/cypress/integration/statement/01-list.spec.js b/ui/cypress/integration/statement/01-list.spec.js
index 66e11bb830..a0a7743ed7 100644
--- a/ui/cypress/integration/statement/01-list.spec.js
+++ b/ui/cypress/integration/statement/01-list.spec.js
@@ -6,6 +6,8 @@ import {
   checkAllOptionsInBaseSelector,
 } from '../components'
 
+import dayjs from 'dayjs'
+
 describe('SQL statements list page', () => {
   before(() => {
     cy.fixture('uri.json').then(function (uri) {
@@ -29,70 +31,76 @@ describe('SQL statements list page', () => {
     'SELECT `version` ()',
   ]
 
-  describe('Initialize statemen list page', () => {
-    it('Statement side bar highlighted', () => {
-      cy.get('[data-e2e=menu_item_statement]')
-        .should('be.visible')
-        .and('has.class', 'ant-menu-item-selected')
-    })
-
-    it('Has Toolbar', function () {
-      cy.get('[data-e2e=statement_toolbar]').should('be.visible')
-    })
-
-    it('Statements is enabled by default', () => {
-      cy.get('[data-e2e=statements_table]').should('be.visible')
-    })
-
-    it('Get statement list bad request', () => {
-      const staticResponse = {
-        statusCode: 400,
-        body: {
-          code: 'common.bad_request',
-          error: true,
-          message: 'common.bad_request',
-        },
-      }
-
-      // stub out a response body
-      cy.intercept(
-        `${Cypress.env('apiBasePath')}statements/list*`,
-        staticResponse
-      ).as('statements_list')
-      cy.wait('@statements_list').then(() => {
-        cy.get('[data-e2e=alert_error_bar]').should(
-          'has.text',
-          staticResponse.body.message
-        )
-      })
-    })
+  // describe('Initialize statemen list page', () => {
+  //   it('Statement side bar highlighted', () => {
+  //     cy.get('[data-e2e=menu_item_statement]')
+  //       .should('be.visible')
+  //       .and('has.class', 'ant-menu-item-selected')
+  //   })
+
+  //   it('Has Toolbar', function () {
+  //     cy.get('[data-e2e=statement_toolbar]').should('be.visible')
+  //   })
+
+  //   it('Statements is enabled by default', () => {
+  //     cy.get('[data-e2e=statements_table]').should('be.visible')
+  //   })
+
+  //   it('Get statement list bad request', () => {
+  //     const staticResponse = {
+  //       statusCode: 400,
+  //       body: {
+  //         code: 'common.bad_request',
+  //         error: true,
+  //         message: 'common.bad_request',
+  //       },
+  //     }
+
+  //     // stub out a response body
+  //     cy.intercept(
+  //       `${Cypress.env('apiBasePath')}statements/list*`,
+  //       staticResponse
+  //     ).as('statements_list')
+  //     cy.wait('@statements_list').then(() => {
+  //       cy.get('[data-e2e=alert_error_bar]').should(
+  //         'has.text',
+  //         staticResponse.body.message
+  //       )
+  //     })
+  //   })
+
+  //   it('Statements which executed by default when starting TiDB', () => {
+  //     cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
+  //       'statements_list'
+  //     )
+
+  //     cy.wait('@statements_list').then((res) => {
+  //       const response = res.response.body
+
+  //       cy.get('[data-e2e=syntax_highlighter_compact]')
+  //         .should('have.length', response.length)
+  //         .then(($stmts) => {
+  //           // we get a list of jQuery elements
+  //           // let's convert the jQuery object into a plain array
+  //           return (
+  //             Cypress.$.makeArray($stmts)
+  //               // and extract inner text from each
+  //               .map((stmt) => stmt.innerText)
+  //           )
+  //         })
+  //         // make sure there exists the default executed statements
+  //         .should('to.include.members', defaultExecStmtList)
+  //     })
+  //   })
+  // })
 
-    it('Statements which executed by default when starting TiDB', () => {
+  describe('Time range selector', () => {
+    beforeEach(() => {
       cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
-        'statements_list'
+        'init_statements_list'
       )
-
-      cy.wait('@statements_list').then((res) => {
-        const response = res.response.body
-
-        cy.get('[data-e2e=syntax_highlighter_compact]')
-          .should('have.length', response.length)
-          .then(($stmts) => {
-            // we get a list of jQuery elements
-            // let's convert the jQuery object into a plain array
-            return (
-              Cypress.$.makeArray($stmts)
-                // and extract inner text from each
-                .map((stmt) => stmt.innerText)
-            )
-          })
-          // make sure there exists the default executed statements
-          .should('to.include.members', defaultExecStmtList)
-      })
     })
-  })
 
-  describe('Time range selector', () => {
     it('Default time range', () => {
       cy.get('[data-e2e=statement_timerange_selector]').should(
         'have.text',
@@ -101,8 +109,15 @@ describe('SQL statements list page', () => {
     })
 
     it('Time range options', () => {
+      // cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
+      //   'init_statements_list'
+      // )
+
+      // cy.wait('@init_statements_list')
+
+      // get statements with last_seen checked
       cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
-        'statements_list'
+        'statements_list_with_last_seen'
       )
 
       // select last_seen column field
@@ -113,486 +128,492 @@ describe('SQL statements list page', () => {
             cy.get('[data-e2e=columns_selector_field_last_seen]').check()
           })
         })
-      cy.wait('@statements_list').then((res) => {
-        const response = res.response.body
-        console.log('response', response)
-        let lastSeenTimeStampList = []
-        response.forEach((stmt) => {
-          console.log('stmt.last_seen', stmt, stmt.last_seen)
-          lastSeenTimeStampList.push(stmt['last_seen'])
-        })
-        console.log('lastSeenTimeStampList', lastSeenTimeStampList)
-        cy.get('[data-e2e=statement_time_range_option]')
-          .should('have.length', 12)
-          .each(($option, $idx) => {
-            if ($idx == 0) {
-              // Recent 15 min is enabled
-              cy.wrap($option)
-                .invoke('attr', 'class')
-                .should('not.contain', 'time_range_item_disabled')
-            } else if ($idx == 1) {
-              // Recent 30 min is active
-              cy.wrap($option)
-                .invoke('attr', 'class')
-                .should('contain', 'time_range_item_active')
-            } else {
-              // the reset options are disabled
-              cy.wrap($option)
-                .invoke('attr', 'class')
-                .should('contain', 'time_range_item_disabled')
-            }
-          })
-
-        cy.get('[data-automation-key=digest_text]').should(
-          'have.length',
-          response.length
-        )
-      })
-    })
-  })
-
-  describe('Filter statements by changing database', () => {
-    it('No database selected by default', () => {
-      cy.get('[data-e2e=base_select_input_text]')
-        .eq(0)
-        .should('has.text', 'All Databases')
-    })
-
-    it('Show all databases', () => {
-      cy.intercept(`${Cypress.env('apiBasePath')}info/databases`).as(
-        'databases'
-      )
-
-      cy.wait('@databases').then((res) => {
-        const databases = res.response.body
-        testBaseSelectorOptions(databases, 0)
-      })
-    })
-
-    it('Filter statements without use database', () => {
-      cy.intercept(`${Cypress.env('apiBasePath')}info/databases`).as(
-        'databases'
-      )
-
-      cy.wait('@databases').then(() => {
-        // check all options in databases selector
-        checkAllOptionsInBaseSelector(0)
-      })
-
-      // check the existence of statements without use database
-      cy.contains(defaultExecStmtList[0]).should('not.exist')
-      cy.contains(defaultExecStmtList[2]).should('not.exist')
-    })
 
-    it('Filter statements with use database (mysql)', () => {
-      let queryData = {
-        query: 'SELECT count(*) from user;',
-        database: 'mysql',
+      const checkStmtListWithTimeRange = (stmtList, timeDiff) => {
+        const now = dayjs().unix()
+        stmtList.forEach((stmt) => {
+          console.log('stmt.last_seen', stmt.last_seen)
+          cy.wrap(stmt.last_seen)
+            .should('be.lte', now)
+            .and('be.gt', now - timeDiff)
+        })
       }
-      cy.task('queryDB', { ...queryData })
-
-      cy.intercept(`${Cypress.env('apiBasePath')}info/databases`).as(
-        'databases'
-      )
-
-      cy.wait('@databases').then(() => {
-        cy.get('[data-e2e=base_selector]')
-          .eq(0)
-          .click()
-          .then(() => {
-            cy.get('.ant-dropdown').within(() => {
-              cy.get('.ant-checkbox-input').eq(3).click()
-            })
-          })
-          .then(() => {
-            cy.contains('SELECT count (?) FROM user;').should('exist')
-          })
-      })
-
-      // Use databases config remembered
-      cy.reload()
-      cy.get('[data-e2e=base_select_input_text]')
-        .eq(0)
-        .should('has.text', '1 Databases')
-    })
-  })
 
-  describe('Filter statements by changing kind', () => {
-    it('No kind selected by default', () => {
-      cy.get('[data-e2e=base_select_input_text]')
-        .eq(1)
-        .should('has.text', 'All Kinds')
-    })
-
-    it('Show all kind of statements', () => {
-      cy.intercept(`${Cypress.env('apiBasePath')}statements/stmt_types`).as(
-        'stmt_types'
-      )
-
-      cy.wait('@stmt_types').then((res) => {
-        const stmtTypesList = res.response.body
-        testBaseSelectorOptions(stmtTypesList, 1)
-      })
-    })
-
-    it('Filter statements with all kind checked', () => {
-      cy.intercept(`${Cypress.env('apiBasePath')}statements/stmt_types`).as(
-        'stmt_types'
-      )
-
-      cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
-        'statements_list'
-      )
+      cy.wait('@statements_list_with_last_seen').then((res) => {
+        const response = res.response.body
+        checkStmtListWithTimeRange(response, 1800)
+
+        // cy.get('[data-e2e=statement_time_range_option]')
+        //   .should('have.length', 12)
+        //   .each(($option, $idx) => {
+        //     if ($idx == 0) {
+        //       // Recent 15 min is enabled
+        //       cy.wrap($option)
+        //         .invoke('attr', 'class')
+        //         .should('not.contain', 'time_range_item_disabled')
+        //     } else if ($idx == 1) {
+        //       // Recent 30 min is active
+        //       cy.wrap($option)
+        //         .invoke('attr', 'class')
+        //         .should('contain', 'time_range_item_active')
+        //     } else {
+        //       // the reset options are disabled
+        //       cy.wrap($option)
+        //         .invoke('attr', 'class')
+        //         .should('contain', 'time_range_item_disabled')
+        //     }
+        //   })
 
-      cy.wait(['@stmt_types', '@statements_list']).then((interceptions) => {
-        // check all options in kind selector
-        checkAllOptionsInBaseSelector(1)
-        const statementsList = interceptions[1].response.body
-        cy.get('[data-e2e=syntax_highlighter_compact]').should(
+        cy.get('[data-automation-key=digest_text]').should(
           'have.length',
-          statementsList.length
-        )
-      })
-    })
-
-    it('Filter statements with one kind checked', () => {
-      cy.intercept(`${Cypress.env('apiBasePath')}statements/stmt_types`).as(
-        'stmt_types'
-      )
-
-      cy.wait('@stmt_types').then(() => {
-        cy.get('[data-e2e=base_selector]')
-          .eq(1)
-          .click()
-          .then(() => {
-            cy.get('.ant-dropdown').within(() => {
-              cy.get('.ant-checkbox-input').eq(2).click()
-            })
-          })
-          .then(() => {
-            cy.get('[data-e2e=syntax_highlighter_compact]').each(($sql) => {
-              cy.wrap($sql).contains('SELECT')
-            })
-          })
-      })
-    })
-  })
-
-  describe('Search function', () => {
-    it('Default search text', () => {
-      cy.get('[data-e2e=sql_statements_search]').should('be.empty')
-    })
-
-    it('Search item with space', () => {
-      cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
-        'statements_list'
-      )
-
-      cy.get('[data-e2e=sql_statements_search]').type(' SELECT version{enter}')
-
-      cy.wait('@statements_list').then(() => {
-        cy.get('[data-e2e=syntax_highlighter_compact]').should('has.length', 1)
-      })
-    })
-
-    it('Type search without pressing enter then reload', () => {
-      cy.get('[data-e2e=sql_statements_search]').type('SELECT version')
-
-      cy.reload()
-      cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
-        'statements_list'
-      )
-
-      cy.get('[data-e2e=sql_statements_search]').clear().type('{enter}')
-
-      cy.wait('@statements_list').then((res) => {
-        const statementsList = res.response.body
-        cy.get('[data-e2e=syntax_highlighter_compact]').should(
-          'has.length',
-          statementsList.length
+          response.length
         )
       })
     })
   })
 
-  describe('Selected Columns', () => {
-    const defaultColumns = {
-      digest_text: 'Statement Template ',
-      sum_latency: 'Total Latency ',
-      avg_latency: 'Mean Latency ',
-      exec_count: '# Exec ',
-      plan_count: '# Plans ',
-    }
-
-    it('Default selected columns', () => {
-      cy.get('[role=columnheader]')
-        .not('.is-empty')
-        .should('have.length', 5)
-        .each(($column, idx) => {
-          cy.wrap($column).contains(
-            defaultColumns[Object.keys(defaultColumns)[idx]]
-          )
-        })
-    })
-
-    it('Hover on columns selector and check selected fields', () => {
-      cy.get('[data-e2e=columns_selector_popover]')
-        .trigger('mouseover')
-        .then(() => {
-          cy.get('[data-e2e=columns_selector_popover_content]')
-            .should('be.visible')
-            .within(() => {
-              cy.get('.ant-checkbox-wrapper-checked')
-                // .should('have.length', 5)
-                .then(($options) => {
-                  return Cypress.$.makeArray($options).map(
-                    (option) => option.innerText
-                  )
-                })
-                // make sure there exists the default executed statements
-                .should('to.deep.eq', Object.values(defaultColumns))
-            })
-        })
-    })
-
-    it('Select all column fields', () => {
-      cy.get('[data-e2e=columns_selector_popover]')
-        .trigger('mouseover')
-        .then(() => {
-          cy.get('[data-e2e=column_selector_title]')
-            .check()
-            .then(() => {
-              cy.get('[role=columnheader]')
-                .not('.is-empty')
-                .should('have.length', 43)
-            })
-        })
-    })
-
-    it('Reset selected column fields', () => {
-      cy.get('[data-e2e=columns_selector_popover]')
-        .trigger('mouseover')
-        .then(() => {
-          cy.get('[data-e2e=column_selector_reset]')
-            .click()
-            .then(() => {
-              cy.get('[role=columnheader]')
-                .not('.is-empty')
-                .should('have.length', 5)
-            })
-        })
-    })
-
-    it('Select an orbitary column field', () => {
-      cy.get('[data-e2e=columns_selector_popover]')
-        .trigger('mouseover')
-        .then(() => {
-          cy.contains('Total Coprocessor Tasks')
-            .within(() => {
-              cy.get(
-                '[data-e2e=columns_selector_field_sum_cop_task_num]'
-              ).check()
-            })
-            .then(() => {
-              cy.get('[data-item-key=sum_cop_task_num]').should(
-                'have.text',
-                'Total Coprocessor Tasks'
-              )
-            })
-        })
-    })
-
-    it('UnCheck last selected orbitary column field', () => {
-      cy.get('[data-e2e=columns_selector_popover]')
-        .trigger('mouseover')
-        .then(() => {
-          cy.contains('Total Coprocessor Tasks')
-            .within(() => {
-              cy.get(
-                '[data-e2e=columns_selector_field_sum_cop_task_num]'
-              ).uncheck()
-            })
-            .then(() => {
-              cy.get('[data-item-key=sum_cop_task_num]').should('not.exist')
-            })
-        })
-    })
-
-    it('Check SHOW_FULL_QUERY_TEXT', () => {
-      cy.get('[data-e2e=columns_selector_popover]')
-        .trigger('mouseover')
-        .then(() => {
-          cy.get('[data-e2e=statement_show_full_sql]')
-            .check()
-            .then(() => {
-              cy.get('[data-automation-key=digest_text]')
-                .eq(0)
-                .find('[data-e2e=syntax_highlighter_original]')
-            })
-
-          cy.get('[data-e2e=statement_show_full_sql]')
-            .uncheck()
-            .then(() => {
-              cy.get('[data-automation-key=digest_text]')
-                .eq(0)
-                .trigger('mouseover')
-                .find('[data-e2e=syntax_highlighter_compact]')
-            })
-        })
-    })
-  })
-
-  describe('Reload statement', () => {
-    it('Reload statement table after execute a query', () => {
-      let queryData = {
-        query: 'select count(*) from tidb;',
-        database: 'mysql',
-      }
-      cy.task('queryDB', { ...queryData })
-
-      cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
-        'statements_list'
-      )
-      cy.wait('@statements_list').then(() => {
-        cy.get('[data-e2e=statement_refresh]')
-          .click()
-          .then(() => {
-            cy.get('[data-automation-key=digest_text]').contains(
-              'SELECT count (?) FROM tidb;'
-            )
-          })
-      })
-    })
-  })
-
-  describe('Statement Setting', () => {
-    it('Close setting panel', () => {
-      cy.get('[data-e2e=statement_setting]')
-        .click()
-        .then(() => {
-          cy.get('.ant-drawer-mask')
-            .click()
-            .then(() => {
-              cy.get('.ant-drawer-content').should('not.be.visible')
-            })
-        })
-
-      cy.get('[data-e2e=statement_setting]')
-        .click()
-        .then(() => {
-          cy.get('.ant-drawer-close')
-            .click()
-            .then(() => {
-              cy.get('.ant-drawer-content').should('not.be.visible')
-            })
-        })
-    })
-
-    const siwtchStatement = (isEnabled) => {
-      cy.get('[data-e2e=statement_setting]')
-        .click()
-        .then(() => {
-          cy.get('.ant-drawer-content').should('exist')
-          cy.get('[data-e2e=statemen_enbale_switcher]')
-            // the current of switcher is isEnabled
-            .should('have.attr', 'aria-checked', isEnabled)
-            .click()
-          cy.get('[data-e2e=submit_btn]').click()
-        })
-    }
-
-    it('Disable statement feature', () => {
-      siwtchStatement('true')
-      cy.get('.ant-modal-confirm-btns').find('.ant-btn-dangerous').click()
-      cy.get('[data-e2e=statements_table]').should('not.exist')
-    })
-
-    it('Enable statement feature', () => {
-      siwtchStatement('false')
-      cy.get('[data-e2e=statements_table]').should('exist')
-    })
-
-    const checkSilder = (sizeList, defaultValueNow, dataE2EValue) => {
-      cy.get('[data-e2e=statement_setting]')
-        .click()
-        .then(() => {
-          cy.get(`[data-e2e=${dataE2EValue}]`).within(() => {
-            cy.get('.ant-slider-handle').should(
-              'have.attr',
-              'aria-valuenow',
-              defaultValueNow
-            )
-
-            cy.get('.ant-slider-mark-text')
-              .then(($marks) => {
-                return Cypress.$.makeArray($marks).map((mark) => mark.innerText)
-              })
-              // make sure there exists the default executed statements
-              .should('to.deep.eq', sizeList)
-          })
-        })
-    }
-
-    it('Statement setting max size', () => {
-      const sizeList = ['200', '1000', '2000', '5000']
-      checkSilder(sizeList, '3000', 'statement_setting_max_size')
-    })
-
-    it('Statement setting window size', () => {
-      const sizeList = ['1', '5', '15', '30', '60']
-      checkSilder(sizeList, '30', 'statement_setting_refresh_interval')
-    })
-
-    it('Statement setting number of windows', () => {
-      const sizeList = ['1', '255']
-      checkSilder(sizeList, '24', 'statement_setting_history_size')
-    })
-
-    describe('SQL Statement History Size', () => {
-      beforeEach(() => {
-        cy.get('[data-e2e=statement_setting]')
-          .click()
-          .then(() => {
-            // get refresh_interval value
-            cy.get(`[data-e2e=statement_setting_refresh_interval]`).within(
-              () => {
-                cy.get('.ant-slider-handle')
-                  .invoke('attr', 'aria-valuenow')
-                  .as('refreshIntervalVal')
-              }
-            )
-
-            // get history_size value
-            cy.get(`[data-e2e=statement_setting_history_size]`).within(() => {
-              cy.get('.ant-slider-handle')
-                .invoke('attr', 'aria-valuenow')
-                .as('historySizeVal')
-            })
-          })
-      })
-
-      const calcStmtHistorySize = (refreshInterval, historySize) => {
-        const totalMins = refreshInterval * historySize
-        const day = Math.floor(totalMins / (24 * 60))
-        const hour = Math.floor((totalMins - day * 24 * 60) / 60)
-        const min = totalMins - day * 24 * 60 - hour * 60
-        return `${day} day ${hour} hour ${min} min`
-      }
-
-      it('Check History Size', function () {
-        const stmtHistorySize = calcStmtHistorySize(
-          this.refreshIntervalVal,
-          this.historySizeVal
-        )
-        console.log('stmtHistorySize', stmtHistorySize)
-
-        cy.get('[data-e2e=statement_setting_keep_duration]').within(() => {
-          cy.get('.ant-form-item-control-input-content').should(
-            'have.text',
-            calcStmtHistorySize(this.refreshIntervalVal, this.historySizeVal)
-          )
-        })
-      })
-    })
-  })
+  // describe('Filter statements by changing database', () => {
+  //   it('No database selected by default', () => {
+  //     cy.get('[data-e2e=base_select_input_text]')
+  //       .eq(0)
+  //       .should('has.text', 'All Databases')
+  //   })
+
+  //   it('Show all databases', () => {
+  //     cy.intercept(`${Cypress.env('apiBasePath')}info/databases`).as(
+  //       'databases'
+  //     )
+
+  //     cy.wait('@databases').then((res) => {
+  //       const databases = res.response.body
+  //       testBaseSelectorOptions(databases, 0)
+  //     })
+  //   })
+
+  //   it('Filter statements without use database', () => {
+  //     cy.intercept(`${Cypress.env('apiBasePath')}info/databases`).as(
+  //       'databases'
+  //     )
+
+  //     cy.wait('@databases').then(() => {
+  //       // check all options in databases selector
+  //       checkAllOptionsInBaseSelector(0)
+  //     })
+
+  //     // check the existence of statements without use database
+  //     cy.contains(defaultExecStmtList[0]).should('not.exist')
+  //     cy.contains(defaultExecStmtList[2]).should('not.exist')
+  //   })
+
+  //   it('Filter statements with use database (mysql)', () => {
+  //     let queryData = {
+  //       query: 'SELECT count(*) from user;',
+  //       database: 'mysql',
+  //     }
+  //     cy.task('queryDB', { ...queryData })
+
+  //     cy.intercept(`${Cypress.env('apiBasePath')}info/databases`).as(
+  //       'databases'
+  //     )
+
+  //     cy.wait('@databases').then(() => {
+  //       cy.get('[data-e2e=base_selector]')
+  //         .eq(0)
+  //         .click()
+  //         .then(() => {
+  //           cy.get('.ant-dropdown').within(() => {
+  //             cy.get('.ant-checkbox-input').eq(3).click()
+  //           })
+  //         })
+  //         .then(() => {
+  //           cy.contains('SELECT count (?) FROM user;').should('exist')
+  //         })
+  //     })
+
+  //     // Use databases config remembered
+  //     cy.reload()
+  //     cy.get('[data-e2e=base_select_input_text]')
+  //       .eq(0)
+  //       .should('has.text', '1 Databases')
+  //   })
+  // })
+
+  // describe('Filter statements by changing kind', () => {
+  //   it('No kind selected by default', () => {
+  //     cy.get('[data-e2e=base_select_input_text]')
+  //       .eq(1)
+  //       .should('has.text', 'All Kinds')
+  //   })
+
+  //   it('Show all kind of statements', () => {
+  //     cy.intercept(`${Cypress.env('apiBasePath')}statements/stmt_types`).as(
+  //       'stmt_types'
+  //     )
+
+  //     cy.wait('@stmt_types').then((res) => {
+  //       const stmtTypesList = res.response.body
+  //       testBaseSelectorOptions(stmtTypesList, 1)
+  //     })
+  //   })
+
+  //   it('Filter statements with all kind checked', () => {
+  //     cy.intercept(`${Cypress.env('apiBasePath')}statements/stmt_types`).as(
+  //       'stmt_types'
+  //     )
+
+  //     cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
+  //       'statements_list'
+  //     )
+
+  //     cy.wait(['@stmt_types', '@statements_list']).then((interceptions) => {
+  //       // check all options in kind selector
+  //       checkAllOptionsInBaseSelector(1)
+  //       const statementsList = interceptions[1].response.body
+  //       cy.get('[data-e2e=syntax_highlighter_compact]').should(
+  //         'have.length',
+  //         statementsList.length
+  //       )
+  //     })
+  //   })
+
+  //   it('Filter statements with one kind checked', () => {
+  //     cy.intercept(`${Cypress.env('apiBasePath')}statements/stmt_types`).as(
+  //       'stmt_types'
+  //     )
+
+  //     cy.wait('@stmt_types').then(() => {
+  //       cy.get('[data-e2e=base_selector]')
+  //         .eq(1)
+  //         .click()
+  //         .then(() => {
+  //           cy.get('.ant-dropdown').within(() => {
+  //             cy.get('.ant-checkbox-input').eq(2).click()
+  //           })
+  //         })
+  //         .then(() => {
+  //           cy.get('[data-e2e=syntax_highlighter_compact]').each(($sql) => {
+  //             cy.wrap($sql).contains('SELECT')
+  //           })
+  //         })
+  //     })
+  //   })
+  // })
+
+  // describe('Search function', () => {
+  //   it('Default search text', () => {
+  //     cy.get('[data-e2e=sql_statements_search]').should('be.empty')
+  //   })
+
+  //   it('Search item with space', () => {
+  //     cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
+  //       'statements_list'
+  //     )
+
+  //     cy.get('[data-e2e=sql_statements_search]').type(' SELECT version{enter}')
+
+  //     cy.wait('@statements_list').then(() => {
+  //       cy.get('[data-e2e=syntax_highlighter_compact]').should('has.length', 1)
+  //     })
+  //   })
+
+  //   it('Type search without pressing enter then reload', () => {
+  //     cy.get('[data-e2e=sql_statements_search]').type('SELECT version')
+
+  //     cy.reload()
+  //     cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
+  //       'statements_list'
+  //     )
+
+  //     cy.get('[data-e2e=sql_statements_search]').clear().type('{enter}')
+
+  //     cy.wait('@statements_list').then((res) => {
+  //       const statementsList = res.response.body
+  //       cy.get('[data-e2e=syntax_highlighter_compact]').should(
+  //         'has.length',
+  //         statementsList.length
+  //       )
+  //     })
+  //   })
+  // })
+
+  // describe('Selected Columns', () => {
+  //   const defaultColumns = {
+  //     digest_text: 'Statement Template ',
+  //     sum_latency: 'Total Latency ',
+  //     avg_latency: 'Mean Latency ',
+  //     exec_count: '# Exec ',
+  //     plan_count: '# Plans ',
+  //   }
+
+  //   it('Default selected columns', () => {
+  //     cy.get('[role=columnheader]')
+  //       .not('.is-empty')
+  //       .should('have.length', 5)
+  //       .each(($column, idx) => {
+  //         cy.wrap($column).contains(
+  //           defaultColumns[Object.keys(defaultColumns)[idx]]
+  //         )
+  //       })
+  //   })
+
+  //   it('Hover on columns selector and check selected fields', () => {
+  //     cy.get('[data-e2e=columns_selector_popover]')
+  //       .trigger('mouseover')
+  //       .then(() => {
+  //         cy.get('[data-e2e=columns_selector_popover_content]')
+  //           .should('be.visible')
+  //           .within(() => {
+  //             cy.get('.ant-checkbox-wrapper-checked')
+  //               // .should('have.length', 5)
+  //               .then(($options) => {
+  //                 return Cypress.$.makeArray($options).map(
+  //                   (option) => option.innerText
+  //                 )
+  //               })
+  //               // make sure there exists the default executed statements
+  //               .should('to.deep.eq', Object.values(defaultColumns))
+  //           })
+  //       })
+  //   })
+
+  //   it('Select all column fields', () => {
+  //     cy.get('[data-e2e=columns_selector_popover]')
+  //       .trigger('mouseover')
+  //       .then(() => {
+  //         cy.get('[data-e2e=column_selector_title]')
+  //           .check()
+  //           .then(() => {
+  //             cy.get('[role=columnheader]')
+  //               .not('.is-empty')
+  //               .should('have.length', 43)
+  //           })
+  //       })
+  //   })
+
+  //   it('Reset selected column fields', () => {
+  //     cy.get('[data-e2e=columns_selector_popover]')
+  //       .trigger('mouseover')
+  //       .then(() => {
+  //         cy.get('[data-e2e=column_selector_reset]')
+  //           .click()
+  //           .then(() => {
+  //             cy.get('[role=columnheader]')
+  //               .not('.is-empty')
+  //               .should('have.length', 5)
+  //           })
+  //       })
+  //   })
+
+  //   it('Select an orbitary column field', () => {
+  //     cy.get('[data-e2e=columns_selector_popover]')
+  //       .trigger('mouseover')
+  //       .then(() => {
+  //         cy.contains('Total Coprocessor Tasks')
+  //           .within(() => {
+  //             cy.get(
+  //               '[data-e2e=columns_selector_field_sum_cop_task_num]'
+  //             ).check()
+  //           })
+  //           .then(() => {
+  //             cy.get('[data-item-key=sum_cop_task_num]').should(
+  //               'have.text',
+  //               'Total Coprocessor Tasks'
+  //             )
+  //           })
+  //       })
+  //   })
+
+  //   it('UnCheck last selected orbitary column field', () => {
+  //     cy.get('[data-e2e=columns_selector_popover]')
+  //       .trigger('mouseover')
+  //       .then(() => {
+  //         cy.contains('Total Coprocessor Tasks')
+  //           .within(() => {
+  //             cy.get(
+  //               '[data-e2e=columns_selector_field_sum_cop_task_num]'
+  //             ).uncheck()
+  //           })
+  //           .then(() => {
+  //             cy.get('[data-item-key=sum_cop_task_num]').should('not.exist')
+  //           })
+  //       })
+  //   })
+
+  //   it('Check SHOW_FULL_QUERY_TEXT', () => {
+  //     cy.get('[data-e2e=columns_selector_popover]')
+  //       .trigger('mouseover')
+  //       .then(() => {
+  //         cy.get('[data-e2e=statement_show_full_sql]')
+  //           .check()
+  //           .then(() => {
+  //             cy.get('[data-automation-key=digest_text]')
+  //               .eq(0)
+  //               .find('[data-e2e=syntax_highlighter_original]')
+  //           })
+
+  //         cy.get('[data-e2e=statement_show_full_sql]')
+  //           .uncheck()
+  //           .then(() => {
+  //             cy.get('[data-automation-key=digest_text]')
+  //               .eq(0)
+  //               .trigger('mouseover')
+  //               .find('[data-e2e=syntax_highlighter_compact]')
+  //           })
+  //       })
+  //   })
+  // })
+
+  // describe('Reload statement', () => {
+  //   it('Reload statement table after execute a query', () => {
+  //     let queryData = {
+  //       query: 'select count(*) from tidb;',
+  //       database: 'mysql',
+  //     }
+  //     cy.task('queryDB', { ...queryData })
+
+  //     cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
+  //       'statements_list'
+  //     )
+  //     cy.wait('@statements_list').then(() => {
+  //       cy.get('[data-e2e=statement_refresh]')
+  //         .click()
+  //         .then(() => {
+  //           cy.get('[data-automation-key=digest_text]').contains(
+  //             'SELECT count (?) FROM tidb;'
+  //           )
+  //         })
+  //     })
+  //   })
+  // })
+
+  // describe('Statement Setting', () => {
+  //   it('Close setting panel', () => {
+  //     cy.get('[data-e2e=statement_setting]')
+  //       .click()
+  //       .then(() => {
+  //         cy.get('.ant-drawer-mask')
+  //           .click()
+  //           .then(() => {
+  //             cy.get('.ant-drawer-content').should('not.be.visible')
+  //           })
+  //       })
+
+  //     cy.get('[data-e2e=statement_setting]')
+  //       .click()
+  //       .then(() => {
+  //         cy.get('.ant-drawer-close')
+  //           .click()
+  //           .then(() => {
+  //             cy.get('.ant-drawer-content').should('not.be.visible')
+  //           })
+  //       })
+  //   })
+
+  //   const siwtchStatement = (isEnabled) => {
+  //     cy.get('[data-e2e=statement_setting]')
+  //       .click()
+  //       .then(() => {
+  //         cy.get('.ant-drawer-content').should('exist')
+  //         cy.get('[data-e2e=statemen_enbale_switcher]')
+  //           // the current of switcher is isEnabled
+  //           .should('have.attr', 'aria-checked', isEnabled)
+  //           .click()
+  //         cy.get('[data-e2e=submit_btn]').click()
+  //       })
+  //   }
+
+  //   it('Disable statement feature', () => {
+  //     siwtchStatement('true')
+  //     cy.get('.ant-modal-confirm-btns').find('.ant-btn-dangerous').click()
+  //     cy.get('[data-e2e=statements_table]').should('not.exist')
+  //   })
+
+  //   it('Enable statement feature', () => {
+  //     siwtchStatement('false')
+  //     cy.get('[data-e2e=statements_table]').should('exist')
+  //   })
+
+  //   const checkSilder = (sizeList, defaultValueNow, dataE2EValue) => {
+  //     cy.get('[data-e2e=statement_setting]')
+  //       .click()
+  //       .then(() => {
+  //         cy.get(`[data-e2e=${dataE2EValue}]`).within(() => {
+  //           cy.get('.ant-slider-handle').should(
+  //             'have.attr',
+  //             'aria-valuenow',
+  //             defaultValueNow
+  //           )
+
+  //           cy.get('.ant-slider-mark-text')
+  //             .then(($marks) => {
+  //               return Cypress.$.makeArray($marks).map((mark) => mark.innerText)
+  //             })
+  //             // make sure there exists the default executed statements
+  //             .should('to.deep.eq', sizeList)
+  //         })
+  //       })
+  //   }
+
+  //   it('Statement setting max size', () => {
+  //     const sizeList = ['200', '1000', '2000', '5000']
+  //     checkSilder(sizeList, '3000', 'statement_setting_max_size')
+  //   })
+
+  //   it('Statement setting window size', () => {
+  //     const sizeList = ['1', '5', '15', '30', '60']
+  //     checkSilder(sizeList, '30', 'statement_setting_refresh_interval')
+  //   })
+
+  //   it('Statement setting number of windows', () => {
+  //     const sizeList = ['1', '255']
+  //     checkSilder(sizeList, '24', 'statement_setting_history_size')
+  //   })
+
+  //   describe('SQL Statement History Size', () => {
+  //     beforeEach(() => {
+  //       cy.get('[data-e2e=statement_setting]')
+  //         .click()
+  //         .then(() => {
+  //           // get refresh_interval value
+  //           cy.get(`[data-e2e=statement_setting_refresh_interval]`).within(
+  //             () => {
+  //               cy.get('.ant-slider-handle')
+  //                 .invoke('attr', 'aria-valuenow')
+  //                 .as('refreshIntervalVal')
+  //             }
+  //           )
+
+  //           // get history_size value
+  //           cy.get(`[data-e2e=statement_setting_history_size]`).within(() => {
+  //             cy.get('.ant-slider-handle')
+  //               .invoke('attr', 'aria-valuenow')
+  //               .as('historySizeVal')
+  //           })
+  //         })
+  //     })
+
+  //     const calcStmtHistorySize = (refreshInterval, historySize) => {
+  //       const totalMins = refreshInterval * historySize
+  //       const day = Math.floor(totalMins / (24 * 60))
+  //       const hour = Math.floor((totalMins - day * 24 * 60) / 60)
+  //       const min = totalMins - day * 24 * 60 - hour * 60
+  //       return `${day} day ${hour} hour ${min} min`
+  //     }
+
+  //     it('Check History Size', function () {
+  //       const stmtHistorySize = calcStmtHistorySize(
+  //         this.refreshIntervalVal,
+  //         this.historySizeVal
+  //       )
+  //       console.log('stmtHistorySize', stmtHistorySize)
+
+  //       cy.get('[data-e2e=statement_setting_keep_duration]').within(() => {
+  //         cy.get('.ant-form-item-control-input-content').should(
+  //           'have.text',
+  //           calcStmtHistorySize(this.refreshIntervalVal, this.historySizeVal)
+  //         )
+  //       })
+  //     })
+  //   })
+  // })
 })

From 1bcc02a4f1d58a14842b8d0de5e4a6f45b6a9a7e Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Mon, 7 Mar 2022 20:50:06 +0800
Subject: [PATCH 30/41] update statement list

---
 .../integration/statement/01-list.spec.js     | 1157 +++++++++--------
 1 file changed, 602 insertions(+), 555 deletions(-)

diff --git a/ui/cypress/integration/statement/01-list.spec.js b/ui/cypress/integration/statement/01-list.spec.js
index a0a7743ed7..3fb73627b5 100644
--- a/ui/cypress/integration/statement/01-list.spec.js
+++ b/ui/cypress/integration/statement/01-list.spec.js
@@ -31,91 +31,77 @@ describe('SQL statements list page', () => {
     'SELECT `version` ()',
   ]
 
-  // describe('Initialize statemen list page', () => {
-  //   it('Statement side bar highlighted', () => {
-  //     cy.get('[data-e2e=menu_item_statement]')
-  //       .should('be.visible')
-  //       .and('has.class', 'ant-menu-item-selected')
-  //   })
-
-  //   it('Has Toolbar', function () {
-  //     cy.get('[data-e2e=statement_toolbar]').should('be.visible')
-  //   })
-
-  //   it('Statements is enabled by default', () => {
-  //     cy.get('[data-e2e=statements_table]').should('be.visible')
-  //   })
-
-  //   it('Get statement list bad request', () => {
-  //     const staticResponse = {
-  //       statusCode: 400,
-  //       body: {
-  //         code: 'common.bad_request',
-  //         error: true,
-  //         message: 'common.bad_request',
-  //       },
-  //     }
-
-  //     // stub out a response body
-  //     cy.intercept(
-  //       `${Cypress.env('apiBasePath')}statements/list*`,
-  //       staticResponse
-  //     ).as('statements_list')
-  //     cy.wait('@statements_list').then(() => {
-  //       cy.get('[data-e2e=alert_error_bar]').should(
-  //         'has.text',
-  //         staticResponse.body.message
-  //       )
-  //     })
-  //   })
-
-  //   it('Statements which executed by default when starting TiDB', () => {
-  //     cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
-  //       'statements_list'
-  //     )
-
-  //     cy.wait('@statements_list').then((res) => {
-  //       const response = res.response.body
-
-  //       cy.get('[data-e2e=syntax_highlighter_compact]')
-  //         .should('have.length', response.length)
-  //         .then(($stmts) => {
-  //           // we get a list of jQuery elements
-  //           // let's convert the jQuery object into a plain array
-  //           return (
-  //             Cypress.$.makeArray($stmts)
-  //               // and extract inner text from each
-  //               .map((stmt) => stmt.innerText)
-  //           )
-  //         })
-  //         // make sure there exists the default executed statements
-  //         .should('to.include.members', defaultExecStmtList)
-  //     })
-  //   })
-  // })
+  describe('Initialize statemen list page', () => {
+    it('Statement side bar highlighted', () => {
+      cy.get('[data-e2e=menu_item_statement]')
+        .should('be.visible')
+        .and('has.class', 'ant-menu-item-selected')
+    })
 
-  describe('Time range selector', () => {
-    beforeEach(() => {
-      cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
-        'init_statements_list'
-      )
+    it('Has Toolbar', function () {
+      cy.get('[data-e2e=statement_toolbar]').should('be.visible')
     })
 
-    it('Default time range', () => {
-      cy.get('[data-e2e=statement_timerange_selector]').should(
-        'have.text',
-        'Recent 30 min'
+    it('Statements is enabled by default', () => {
+      cy.get('[data-e2e=statements_table]').should('be.visible')
+    })
+
+    it('Get statement list bad request', () => {
+      const staticResponse = {
+        statusCode: 400,
+        body: {
+          code: 'common.bad_request',
+          error: true,
+          message: 'common.bad_request',
+        },
+      }
+
+      // stub out a response body
+      cy.intercept(
+        `${Cypress.env('apiBasePath')}statements/list*`,
+        staticResponse
+      ).as('statements_list')
+      cy.wait('@statements_list').then(() => {
+        cy.get('[data-e2e=alert_error_bar]').should(
+          'has.text',
+          staticResponse.body.message
+        )
+      })
+    })
+
+    it('Statements which executed by default when starting TiDB', () => {
+      cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
+        'statements_list'
       )
+
+      cy.wait('@statements_list').then((res) => {
+        const response = res.response.body
+
+        cy.get('[data-e2e=syntax_highlighter_compact]')
+          .should('have.length', response.length)
+          .then(($stmts) => {
+            // we get a list of jQuery elements
+            // let's convert the jQuery object into a plain array
+            return (
+              Cypress.$.makeArray($stmts)
+                // and extract inner text from each
+                .map((stmt) => stmt.innerText)
+            )
+          })
+          // make sure there exists the default executed statements
+          .should('to.include.members', defaultExecStmtList)
+      })
     })
+  })
 
-    it('Time range options', () => {
-      // cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
-      //   'init_statements_list'
-      // )
+  describe('Time range selector', () => {
+    beforeEach(() => {
+      cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
+        'init_statements_list'
+      )
 
-      // cy.wait('@init_statements_list')
+      cy.wait('@init_statements_list')
 
-      // get statements with last_seen checked
       cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
         'statements_list_with_last_seen'
       )
@@ -128,492 +114,553 @@ describe('SQL statements list page', () => {
             cy.get('[data-e2e=columns_selector_field_last_seen]').check()
           })
         })
+    })
+
+    const getNearTime = () => {
+      const cur = dayjs()
+      if (cur.get('minute') > 30) {
+        const endTime = cur.set('hour', cur.get('hour') + 1).set('minute', 0)
+        console.log('endTime', endTime, dayjs(endTime).unix())
+      } else {
+        const endTime = cur.set('minute', 0)
+        console.log('s endTime', endTime, dayjs(endTime).unix())
+      }
+    }
+
+    const checkStmtListWithTimeRange = (stmtList, timeDiff) => {
+      const now = dayjs().unix()
+
+      stmtList.forEach((stmt) => {
+        console.log('stmt.last_seen', stmt.last_seen)
+        cy.wrap(stmt.last_seen)
+          .should('be.lte', now)
+          .and('be.gt', now - timeDiff)
+      })
+    }
+
+    describe('Common time range selector', () => {
+      it('Default time range', () => {
+        cy.get('[data-e2e=statement_timerange_selector]').should(
+          'have.text',
+          'Recent 30 min'
+        )
+      })
+
+      it('Common time range options', () => {
+        cy.get('[data-e2e=statement_timerange_selector]')
+          .click()
+          .then(() => {
+            cy.get('[data-e2e=statement_time_range_option]')
+              .should('have.length', 12)
+              .each(($option, $idx) => {
+                if ($idx == 0) {
+                  // Recent 15 min is enabled
+                  cy.wrap($option)
+                    .invoke('attr', 'class')
+                    .should('not.contain', 'time_range_item_disabled')
+                } else if ($idx == 1) {
+                  // Recent 30 min is active
+                  cy.wrap($option)
+                    .invoke('attr', 'class')
+                    .should('contain', 'time_range_item_active')
+                } else {
+                  // the remained options are disabled
+                  cy.wrap($option)
+                    .invoke('attr', 'class')
+                    .should('contain', 'time_range_item_disabled')
+                }
+              })
+          })
+      })
 
-      const checkStmtListWithTimeRange = (stmtList, timeDiff) => {
-        const now = dayjs().unix()
-        stmtList.forEach((stmt) => {
-          console.log('stmt.last_seen', stmt.last_seen)
-          cy.wrap(stmt.last_seen)
-            .should('be.lte', now)
-            .and('be.gt', now - timeDiff)
+      it('Custom time range selector', () => {
+        cy.get('[data-e2e=statement_timerange_selector]')
+          .click()
+          .then(() => {
+            cy.get('.ant-slider').within(() => {
+              cy.get('[role=slider]')
+                .eq(0)
+                .should('have.attr', 'aria-valuemin', '1646645400')
+                .and('have.attr', 'aria-valuemax', '1646647200')
+              cy.get('[role=slider]')
+                .eq(1)
+                .should('have.attr', 'aria-valuemin', '1646645400')
+                .and('have.attr', 'aria-valuemax', '1646647200')
+            })
+          })
+      })
+
+      it('Init statement list', () => {
+        cy.wait('@statements_list_with_last_seen').then((res) => {
+          const response = res.response.body
+
+          cy.get('[data-automation-key=digest_text]').should(
+            'have.length',
+            response.length
+          )
+
+          checkStmtListWithTimeRange(response, 1800)
+        })
+      })
+
+      it('Select time range as recent 15 mins', () => {
+        // select recent 15 mins
+        cy.get('[data-e2e=statement_timerange_selector]')
+          .click()
+          .then(() => {
+            cy.get('[data-e2e=statement_time_range_option]').eq(0).click()
+          })
+
+        cy.wait('@statements_list_with_last_seen').then((res) => {
+          const response = res.response.body
+          checkStmtListWithTimeRange(response, 900)
         })
+      })
+    })
+  })
+
+  describe('Filter statements by changing database', () => {
+    it('No database selected by default', () => {
+      cy.get('[data-e2e=base_select_input_text]')
+        .eq(0)
+        .should('has.text', 'All Databases')
+    })
+
+    it('Show all databases', () => {
+      cy.intercept(`${Cypress.env('apiBasePath')}info/databases`).as(
+        'databases'
+      )
+
+      cy.wait('@databases').then((res) => {
+        const databases = res.response.body
+        testBaseSelectorOptions(databases, 0)
+      })
+    })
+
+    it('Filter statements without use database', () => {
+      cy.intercept(`${Cypress.env('apiBasePath')}info/databases`).as(
+        'databases'
+      )
+
+      cy.wait('@databases').then(() => {
+        // check all options in databases selector
+        checkAllOptionsInBaseSelector(0)
+      })
+
+      // check the existence of statements without use database
+      cy.contains(defaultExecStmtList[0]).should('not.exist')
+      cy.contains(defaultExecStmtList[2]).should('not.exist')
+    })
+
+    it('Filter statements with use database (mysql)', () => {
+      let queryData = {
+        query: 'SELECT count(*) from user;',
+        database: 'mysql',
       }
+      cy.task('queryDB', { ...queryData })
 
-      cy.wait('@statements_list_with_last_seen').then((res) => {
-        const response = res.response.body
-        checkStmtListWithTimeRange(response, 1800)
-
-        // cy.get('[data-e2e=statement_time_range_option]')
-        //   .should('have.length', 12)
-        //   .each(($option, $idx) => {
-        //     if ($idx == 0) {
-        //       // Recent 15 min is enabled
-        //       cy.wrap($option)
-        //         .invoke('attr', 'class')
-        //         .should('not.contain', 'time_range_item_disabled')
-        //     } else if ($idx == 1) {
-        //       // Recent 30 min is active
-        //       cy.wrap($option)
-        //         .invoke('attr', 'class')
-        //         .should('contain', 'time_range_item_active')
-        //     } else {
-        //       // the reset options are disabled
-        //       cy.wrap($option)
-        //         .invoke('attr', 'class')
-        //         .should('contain', 'time_range_item_disabled')
-        //     }
-        //   })
-
-        cy.get('[data-automation-key=digest_text]').should(
+      cy.intercept(`${Cypress.env('apiBasePath')}info/databases`).as(
+        'databases'
+      )
+
+      cy.wait('@databases').then(() => {
+        cy.get('[data-e2e=base_selector]')
+          .eq(0)
+          .click()
+          .then(() => {
+            cy.get('.ant-dropdown').within(() => {
+              cy.get('.ant-checkbox-input').eq(3).click()
+            })
+          })
+          .then(() => {
+            cy.contains('SELECT count (?) FROM user;').should('exist')
+          })
+      })
+
+      // Use databases config remembered
+      cy.reload()
+      cy.get('[data-e2e=base_select_input_text]')
+        .eq(0)
+        .should('has.text', '1 Databases')
+    })
+  })
+
+  describe('Filter statements by changing kind', () => {
+    it('No kind selected by default', () => {
+      cy.get('[data-e2e=base_select_input_text]')
+        .eq(1)
+        .should('has.text', 'All Kinds')
+    })
+
+    it('Show all kind of statements', () => {
+      cy.intercept(`${Cypress.env('apiBasePath')}statements/stmt_types`).as(
+        'stmt_types'
+      )
+
+      cy.wait('@stmt_types').then((res) => {
+        const stmtTypesList = res.response.body
+        testBaseSelectorOptions(stmtTypesList, 1)
+      })
+    })
+
+    it('Filter statements with all kind checked', () => {
+      cy.intercept(`${Cypress.env('apiBasePath')}statements/stmt_types`).as(
+        'stmt_types'
+      )
+
+      cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
+        'statements_list'
+      )
+
+      cy.wait(['@stmt_types', '@statements_list']).then((interceptions) => {
+        // check all options in kind selector
+        checkAllOptionsInBaseSelector(1)
+        const statementsList = interceptions[1].response.body
+        cy.get('[data-e2e=syntax_highlighter_compact]').should(
           'have.length',
-          response.length
+          statementsList.length
         )
       })
     })
+
+    it('Filter statements with one kind checked', () => {
+      cy.intercept(`${Cypress.env('apiBasePath')}statements/stmt_types`).as(
+        'stmt_types'
+      )
+
+      cy.wait('@stmt_types').then(() => {
+        cy.get('[data-e2e=base_selector]')
+          .eq(1)
+          .click()
+          .then(() => {
+            cy.get('.ant-dropdown').within(() => {
+              cy.get('.ant-checkbox-input').eq(2).click()
+            })
+          })
+          .then(() => {
+            cy.get('[data-e2e=syntax_highlighter_compact]').each(($sql) => {
+              cy.wrap($sql).contains('SELECT')
+            })
+          })
+      })
+    })
   })
 
-  // describe('Filter statements by changing database', () => {
-  //   it('No database selected by default', () => {
-  //     cy.get('[data-e2e=base_select_input_text]')
-  //       .eq(0)
-  //       .should('has.text', 'All Databases')
-  //   })
-
-  //   it('Show all databases', () => {
-  //     cy.intercept(`${Cypress.env('apiBasePath')}info/databases`).as(
-  //       'databases'
-  //     )
-
-  //     cy.wait('@databases').then((res) => {
-  //       const databases = res.response.body
-  //       testBaseSelectorOptions(databases, 0)
-  //     })
-  //   })
-
-  //   it('Filter statements without use database', () => {
-  //     cy.intercept(`${Cypress.env('apiBasePath')}info/databases`).as(
-  //       'databases'
-  //     )
-
-  //     cy.wait('@databases').then(() => {
-  //       // check all options in databases selector
-  //       checkAllOptionsInBaseSelector(0)
-  //     })
-
-  //     // check the existence of statements without use database
-  //     cy.contains(defaultExecStmtList[0]).should('not.exist')
-  //     cy.contains(defaultExecStmtList[2]).should('not.exist')
-  //   })
-
-  //   it('Filter statements with use database (mysql)', () => {
-  //     let queryData = {
-  //       query: 'SELECT count(*) from user;',
-  //       database: 'mysql',
-  //     }
-  //     cy.task('queryDB', { ...queryData })
-
-  //     cy.intercept(`${Cypress.env('apiBasePath')}info/databases`).as(
-  //       'databases'
-  //     )
-
-  //     cy.wait('@databases').then(() => {
-  //       cy.get('[data-e2e=base_selector]')
-  //         .eq(0)
-  //         .click()
-  //         .then(() => {
-  //           cy.get('.ant-dropdown').within(() => {
-  //             cy.get('.ant-checkbox-input').eq(3).click()
-  //           })
-  //         })
-  //         .then(() => {
-  //           cy.contains('SELECT count (?) FROM user;').should('exist')
-  //         })
-  //     })
-
-  //     // Use databases config remembered
-  //     cy.reload()
-  //     cy.get('[data-e2e=base_select_input_text]')
-  //       .eq(0)
-  //       .should('has.text', '1 Databases')
-  //   })
-  // })
-
-  // describe('Filter statements by changing kind', () => {
-  //   it('No kind selected by default', () => {
-  //     cy.get('[data-e2e=base_select_input_text]')
-  //       .eq(1)
-  //       .should('has.text', 'All Kinds')
-  //   })
-
-  //   it('Show all kind of statements', () => {
-  //     cy.intercept(`${Cypress.env('apiBasePath')}statements/stmt_types`).as(
-  //       'stmt_types'
-  //     )
-
-  //     cy.wait('@stmt_types').then((res) => {
-  //       const stmtTypesList = res.response.body
-  //       testBaseSelectorOptions(stmtTypesList, 1)
-  //     })
-  //   })
-
-  //   it('Filter statements with all kind checked', () => {
-  //     cy.intercept(`${Cypress.env('apiBasePath')}statements/stmt_types`).as(
-  //       'stmt_types'
-  //     )
-
-  //     cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
-  //       'statements_list'
-  //     )
-
-  //     cy.wait(['@stmt_types', '@statements_list']).then((interceptions) => {
-  //       // check all options in kind selector
-  //       checkAllOptionsInBaseSelector(1)
-  //       const statementsList = interceptions[1].response.body
-  //       cy.get('[data-e2e=syntax_highlighter_compact]').should(
-  //         'have.length',
-  //         statementsList.length
-  //       )
-  //     })
-  //   })
-
-  //   it('Filter statements with one kind checked', () => {
-  //     cy.intercept(`${Cypress.env('apiBasePath')}statements/stmt_types`).as(
-  //       'stmt_types'
-  //     )
-
-  //     cy.wait('@stmt_types').then(() => {
-  //       cy.get('[data-e2e=base_selector]')
-  //         .eq(1)
-  //         .click()
-  //         .then(() => {
-  //           cy.get('.ant-dropdown').within(() => {
-  //             cy.get('.ant-checkbox-input').eq(2).click()
-  //           })
-  //         })
-  //         .then(() => {
-  //           cy.get('[data-e2e=syntax_highlighter_compact]').each(($sql) => {
-  //             cy.wrap($sql).contains('SELECT')
-  //           })
-  //         })
-  //     })
-  //   })
-  // })
-
-  // describe('Search function', () => {
-  //   it('Default search text', () => {
-  //     cy.get('[data-e2e=sql_statements_search]').should('be.empty')
-  //   })
-
-  //   it('Search item with space', () => {
-  //     cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
-  //       'statements_list'
-  //     )
-
-  //     cy.get('[data-e2e=sql_statements_search]').type(' SELECT version{enter}')
-
-  //     cy.wait('@statements_list').then(() => {
-  //       cy.get('[data-e2e=syntax_highlighter_compact]').should('has.length', 1)
-  //     })
-  //   })
-
-  //   it('Type search without pressing enter then reload', () => {
-  //     cy.get('[data-e2e=sql_statements_search]').type('SELECT version')
-
-  //     cy.reload()
-  //     cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
-  //       'statements_list'
-  //     )
-
-  //     cy.get('[data-e2e=sql_statements_search]').clear().type('{enter}')
-
-  //     cy.wait('@statements_list').then((res) => {
-  //       const statementsList = res.response.body
-  //       cy.get('[data-e2e=syntax_highlighter_compact]').should(
-  //         'has.length',
-  //         statementsList.length
-  //       )
-  //     })
-  //   })
-  // })
-
-  // describe('Selected Columns', () => {
-  //   const defaultColumns = {
-  //     digest_text: 'Statement Template ',
-  //     sum_latency: 'Total Latency ',
-  //     avg_latency: 'Mean Latency ',
-  //     exec_count: '# Exec ',
-  //     plan_count: '# Plans ',
-  //   }
-
-  //   it('Default selected columns', () => {
-  //     cy.get('[role=columnheader]')
-  //       .not('.is-empty')
-  //       .should('have.length', 5)
-  //       .each(($column, idx) => {
-  //         cy.wrap($column).contains(
-  //           defaultColumns[Object.keys(defaultColumns)[idx]]
-  //         )
-  //       })
-  //   })
-
-  //   it('Hover on columns selector and check selected fields', () => {
-  //     cy.get('[data-e2e=columns_selector_popover]')
-  //       .trigger('mouseover')
-  //       .then(() => {
-  //         cy.get('[data-e2e=columns_selector_popover_content]')
-  //           .should('be.visible')
-  //           .within(() => {
-  //             cy.get('.ant-checkbox-wrapper-checked')
-  //               // .should('have.length', 5)
-  //               .then(($options) => {
-  //                 return Cypress.$.makeArray($options).map(
-  //                   (option) => option.innerText
-  //                 )
-  //               })
-  //               // make sure there exists the default executed statements
-  //               .should('to.deep.eq', Object.values(defaultColumns))
-  //           })
-  //       })
-  //   })
-
-  //   it('Select all column fields', () => {
-  //     cy.get('[data-e2e=columns_selector_popover]')
-  //       .trigger('mouseover')
-  //       .then(() => {
-  //         cy.get('[data-e2e=column_selector_title]')
-  //           .check()
-  //           .then(() => {
-  //             cy.get('[role=columnheader]')
-  //               .not('.is-empty')
-  //               .should('have.length', 43)
-  //           })
-  //       })
-  //   })
-
-  //   it('Reset selected column fields', () => {
-  //     cy.get('[data-e2e=columns_selector_popover]')
-  //       .trigger('mouseover')
-  //       .then(() => {
-  //         cy.get('[data-e2e=column_selector_reset]')
-  //           .click()
-  //           .then(() => {
-  //             cy.get('[role=columnheader]')
-  //               .not('.is-empty')
-  //               .should('have.length', 5)
-  //           })
-  //       })
-  //   })
-
-  //   it('Select an orbitary column field', () => {
-  //     cy.get('[data-e2e=columns_selector_popover]')
-  //       .trigger('mouseover')
-  //       .then(() => {
-  //         cy.contains('Total Coprocessor Tasks')
-  //           .within(() => {
-  //             cy.get(
-  //               '[data-e2e=columns_selector_field_sum_cop_task_num]'
-  //             ).check()
-  //           })
-  //           .then(() => {
-  //             cy.get('[data-item-key=sum_cop_task_num]').should(
-  //               'have.text',
-  //               'Total Coprocessor Tasks'
-  //             )
-  //           })
-  //       })
-  //   })
-
-  //   it('UnCheck last selected orbitary column field', () => {
-  //     cy.get('[data-e2e=columns_selector_popover]')
-  //       .trigger('mouseover')
-  //       .then(() => {
-  //         cy.contains('Total Coprocessor Tasks')
-  //           .within(() => {
-  //             cy.get(
-  //               '[data-e2e=columns_selector_field_sum_cop_task_num]'
-  //             ).uncheck()
-  //           })
-  //           .then(() => {
-  //             cy.get('[data-item-key=sum_cop_task_num]').should('not.exist')
-  //           })
-  //       })
-  //   })
-
-  //   it('Check SHOW_FULL_QUERY_TEXT', () => {
-  //     cy.get('[data-e2e=columns_selector_popover]')
-  //       .trigger('mouseover')
-  //       .then(() => {
-  //         cy.get('[data-e2e=statement_show_full_sql]')
-  //           .check()
-  //           .then(() => {
-  //             cy.get('[data-automation-key=digest_text]')
-  //               .eq(0)
-  //               .find('[data-e2e=syntax_highlighter_original]')
-  //           })
-
-  //         cy.get('[data-e2e=statement_show_full_sql]')
-  //           .uncheck()
-  //           .then(() => {
-  //             cy.get('[data-automation-key=digest_text]')
-  //               .eq(0)
-  //               .trigger('mouseover')
-  //               .find('[data-e2e=syntax_highlighter_compact]')
-  //           })
-  //       })
-  //   })
-  // })
-
-  // describe('Reload statement', () => {
-  //   it('Reload statement table after execute a query', () => {
-  //     let queryData = {
-  //       query: 'select count(*) from tidb;',
-  //       database: 'mysql',
-  //     }
-  //     cy.task('queryDB', { ...queryData })
-
-  //     cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
-  //       'statements_list'
-  //     )
-  //     cy.wait('@statements_list').then(() => {
-  //       cy.get('[data-e2e=statement_refresh]')
-  //         .click()
-  //         .then(() => {
-  //           cy.get('[data-automation-key=digest_text]').contains(
-  //             'SELECT count (?) FROM tidb;'
-  //           )
-  //         })
-  //     })
-  //   })
-  // })
-
-  // describe('Statement Setting', () => {
-  //   it('Close setting panel', () => {
-  //     cy.get('[data-e2e=statement_setting]')
-  //       .click()
-  //       .then(() => {
-  //         cy.get('.ant-drawer-mask')
-  //           .click()
-  //           .then(() => {
-  //             cy.get('.ant-drawer-content').should('not.be.visible')
-  //           })
-  //       })
-
-  //     cy.get('[data-e2e=statement_setting]')
-  //       .click()
-  //       .then(() => {
-  //         cy.get('.ant-drawer-close')
-  //           .click()
-  //           .then(() => {
-  //             cy.get('.ant-drawer-content').should('not.be.visible')
-  //           })
-  //       })
-  //   })
-
-  //   const siwtchStatement = (isEnabled) => {
-  //     cy.get('[data-e2e=statement_setting]')
-  //       .click()
-  //       .then(() => {
-  //         cy.get('.ant-drawer-content').should('exist')
-  //         cy.get('[data-e2e=statemen_enbale_switcher]')
-  //           // the current of switcher is isEnabled
-  //           .should('have.attr', 'aria-checked', isEnabled)
-  //           .click()
-  //         cy.get('[data-e2e=submit_btn]').click()
-  //       })
-  //   }
-
-  //   it('Disable statement feature', () => {
-  //     siwtchStatement('true')
-  //     cy.get('.ant-modal-confirm-btns').find('.ant-btn-dangerous').click()
-  //     cy.get('[data-e2e=statements_table]').should('not.exist')
-  //   })
-
-  //   it('Enable statement feature', () => {
-  //     siwtchStatement('false')
-  //     cy.get('[data-e2e=statements_table]').should('exist')
-  //   })
-
-  //   const checkSilder = (sizeList, defaultValueNow, dataE2EValue) => {
-  //     cy.get('[data-e2e=statement_setting]')
-  //       .click()
-  //       .then(() => {
-  //         cy.get(`[data-e2e=${dataE2EValue}]`).within(() => {
-  //           cy.get('.ant-slider-handle').should(
-  //             'have.attr',
-  //             'aria-valuenow',
-  //             defaultValueNow
-  //           )
-
-  //           cy.get('.ant-slider-mark-text')
-  //             .then(($marks) => {
-  //               return Cypress.$.makeArray($marks).map((mark) => mark.innerText)
-  //             })
-  //             // make sure there exists the default executed statements
-  //             .should('to.deep.eq', sizeList)
-  //         })
-  //       })
-  //   }
-
-  //   it('Statement setting max size', () => {
-  //     const sizeList = ['200', '1000', '2000', '5000']
-  //     checkSilder(sizeList, '3000', 'statement_setting_max_size')
-  //   })
-
-  //   it('Statement setting window size', () => {
-  //     const sizeList = ['1', '5', '15', '30', '60']
-  //     checkSilder(sizeList, '30', 'statement_setting_refresh_interval')
-  //   })
-
-  //   it('Statement setting number of windows', () => {
-  //     const sizeList = ['1', '255']
-  //     checkSilder(sizeList, '24', 'statement_setting_history_size')
-  //   })
-
-  //   describe('SQL Statement History Size', () => {
-  //     beforeEach(() => {
-  //       cy.get('[data-e2e=statement_setting]')
-  //         .click()
-  //         .then(() => {
-  //           // get refresh_interval value
-  //           cy.get(`[data-e2e=statement_setting_refresh_interval]`).within(
-  //             () => {
-  //               cy.get('.ant-slider-handle')
-  //                 .invoke('attr', 'aria-valuenow')
-  //                 .as('refreshIntervalVal')
-  //             }
-  //           )
-
-  //           // get history_size value
-  //           cy.get(`[data-e2e=statement_setting_history_size]`).within(() => {
-  //             cy.get('.ant-slider-handle')
-  //               .invoke('attr', 'aria-valuenow')
-  //               .as('historySizeVal')
-  //           })
-  //         })
-  //     })
-
-  //     const calcStmtHistorySize = (refreshInterval, historySize) => {
-  //       const totalMins = refreshInterval * historySize
-  //       const day = Math.floor(totalMins / (24 * 60))
-  //       const hour = Math.floor((totalMins - day * 24 * 60) / 60)
-  //       const min = totalMins - day * 24 * 60 - hour * 60
-  //       return `${day} day ${hour} hour ${min} min`
-  //     }
-
-  //     it('Check History Size', function () {
-  //       const stmtHistorySize = calcStmtHistorySize(
-  //         this.refreshIntervalVal,
-  //         this.historySizeVal
-  //       )
-  //       console.log('stmtHistorySize', stmtHistorySize)
-
-  //       cy.get('[data-e2e=statement_setting_keep_duration]').within(() => {
-  //         cy.get('.ant-form-item-control-input-content').should(
-  //           'have.text',
-  //           calcStmtHistorySize(this.refreshIntervalVal, this.historySizeVal)
-  //         )
-  //       })
-  //     })
-  //   })
-  // })
+  describe('Search function', () => {
+    it('Default search text', () => {
+      cy.get('[data-e2e=sql_statements_search]').should('be.empty')
+    })
+
+    it('Search item with space', () => {
+      cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
+        'statements_list'
+      )
+
+      cy.get('[data-e2e=sql_statements_search]').type(' SELECT version{enter}')
+
+      cy.wait('@statements_list').then(() => {
+        cy.get('[data-e2e=syntax_highlighter_compact]').should('has.length', 1)
+      })
+    })
+
+    it('Type search without pressing enter then reload', () => {
+      cy.get('[data-e2e=sql_statements_search]').type('SELECT version')
+
+      cy.reload()
+      cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
+        'statements_list'
+      )
+
+      cy.get('[data-e2e=sql_statements_search]').clear().type('{enter}')
+
+      cy.wait('@statements_list').then((res) => {
+        const statementsList = res.response.body
+        cy.get('[data-e2e=syntax_highlighter_compact]').should(
+          'has.length',
+          statementsList.length
+        )
+      })
+    })
+  })
+
+  describe('Selected Columns', () => {
+    const defaultColumns = {
+      digest_text: 'Statement Template ',
+      sum_latency: 'Total Latency ',
+      avg_latency: 'Mean Latency ',
+      exec_count: '# Exec ',
+      plan_count: '# Plans ',
+    }
+
+    it('Default selected columns', () => {
+      cy.get('[role=columnheader]')
+        .not('.is-empty')
+        .should('have.length', 5)
+        .each(($column, idx) => {
+          cy.wrap($column).contains(
+            defaultColumns[Object.keys(defaultColumns)[idx]]
+          )
+        })
+    })
+
+    it('Hover on columns selector and check selected fields', () => {
+      cy.get('[data-e2e=columns_selector_popover]')
+        .trigger('mouseover')
+        .then(() => {
+          cy.get('[data-e2e=columns_selector_popover_content]')
+            .should('be.visible')
+            .within(() => {
+              cy.get('.ant-checkbox-wrapper-checked')
+                // .should('have.length', 5)
+                .then(($options) => {
+                  return Cypress.$.makeArray($options).map(
+                    (option) => option.innerText
+                  )
+                })
+                // make sure there exists the default executed statements
+                .should('to.deep.eq', Object.values(defaultColumns))
+            })
+        })
+    })
+
+    it('Select all column fields', () => {
+      cy.get('[data-e2e=columns_selector_popover]')
+        .trigger('mouseover')
+        .then(() => {
+          cy.get('[data-e2e=column_selector_title]')
+            .check()
+            .then(() => {
+              cy.get('[role=columnheader]')
+                .not('.is-empty')
+                .should('have.length', 43)
+            })
+        })
+    })
+
+    it('Reset selected column fields', () => {
+      cy.get('[data-e2e=columns_selector_popover]')
+        .trigger('mouseover')
+        .then(() => {
+          cy.get('[data-e2e=column_selector_reset]')
+            .click()
+            .then(() => {
+              cy.get('[role=columnheader]')
+                .not('.is-empty')
+                .should('have.length', 5)
+            })
+        })
+    })
+
+    it('Select an orbitary column field', () => {
+      cy.get('[data-e2e=columns_selector_popover]')
+        .trigger('mouseover')
+        .then(() => {
+          cy.contains('Total Coprocessor Tasks')
+            .within(() => {
+              cy.get(
+                '[data-e2e=columns_selector_field_sum_cop_task_num]'
+              ).check()
+            })
+            .then(() => {
+              cy.get('[data-item-key=sum_cop_task_num]').should(
+                'have.text',
+                'Total Coprocessor Tasks'
+              )
+            })
+        })
+    })
+
+    it('UnCheck last selected orbitary column field', () => {
+      cy.get('[data-e2e=columns_selector_popover]')
+        .trigger('mouseover')
+        .then(() => {
+          cy.contains('Total Coprocessor Tasks')
+            .within(() => {
+              cy.get(
+                '[data-e2e=columns_selector_field_sum_cop_task_num]'
+              ).uncheck()
+            })
+            .then(() => {
+              cy.get('[data-item-key=sum_cop_task_num]').should('not.exist')
+            })
+        })
+    })
+
+    it('Check SHOW_FULL_QUERY_TEXT', () => {
+      cy.get('[data-e2e=columns_selector_popover]')
+        .trigger('mouseover')
+        .then(() => {
+          cy.get('[data-e2e=statement_show_full_sql]')
+            .check()
+            .then(() => {
+              cy.get('[data-automation-key=digest_text]')
+                .eq(0)
+                .find('[data-e2e=syntax_highlighter_original]')
+            })
+
+          cy.get('[data-e2e=statement_show_full_sql]')
+            .uncheck()
+            .then(() => {
+              cy.get('[data-automation-key=digest_text]')
+                .eq(0)
+                .trigger('mouseover')
+                .find('[data-e2e=syntax_highlighter_compact]')
+            })
+        })
+    })
+  })
+
+  describe('Reload statement', () => {
+    it('Reload statement table after execute a query', () => {
+      let queryData = {
+        query: 'select count(*) from tidb;',
+        database: 'mysql',
+      }
+      cy.task('queryDB', { ...queryData })
+
+      cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
+        'statements_list'
+      )
+      cy.wait('@statements_list').then(() => {
+        cy.get('[data-e2e=statement_refresh]')
+          .click()
+          .then(() => {
+            cy.get('[data-automation-key=digest_text]').contains(
+              'SELECT count (?) FROM tidb;'
+            )
+          })
+      })
+    })
+  })
+
+  describe('Statement Setting', () => {
+    it('Close setting panel', () => {
+      cy.get('[data-e2e=statement_setting]')
+        .click()
+        .then(() => {
+          cy.get('.ant-drawer-mask')
+            .click()
+            .then(() => {
+              cy.get('.ant-drawer-content').should('not.be.visible')
+            })
+        })
+
+      cy.get('[data-e2e=statement_setting]')
+        .click()
+        .then(() => {
+          cy.get('.ant-drawer-close')
+            .click()
+            .then(() => {
+              cy.get('.ant-drawer-content').should('not.be.visible')
+            })
+        })
+    })
+
+    const siwtchStatement = (isEnabled) => {
+      cy.get('[data-e2e=statement_setting]')
+        .click()
+        .then(() => {
+          cy.get('.ant-drawer-content').should('exist')
+          cy.get('[data-e2e=statemen_enbale_switcher]')
+            // the current of switcher is isEnabled
+            .should('have.attr', 'aria-checked', isEnabled)
+            .click()
+          cy.get('[data-e2e=submit_btn]').click()
+        })
+    }
+
+    it('Disable statement feature', () => {
+      siwtchStatement('true')
+      cy.get('.ant-modal-confirm-btns').find('.ant-btn-dangerous').click()
+      cy.get('[data-e2e=statements_table]').should('not.exist')
+    })
+
+    it('Enable statement feature', () => {
+      siwtchStatement('false')
+      cy.get('[data-e2e=statements_table]').should('exist')
+    })
+
+    const checkSilder = (sizeList, defaultValueNow, dataE2EValue) => {
+      cy.get('[data-e2e=statement_setting]')
+        .click()
+        .then(() => {
+          cy.get(`[data-e2e=${dataE2EValue}]`).within(() => {
+            cy.get('.ant-slider-handle').should(
+              'have.attr',
+              'aria-valuenow',
+              defaultValueNow
+            )
+
+            cy.get('.ant-slider-mark-text')
+              .then(($marks) => {
+                return Cypress.$.makeArray($marks).map((mark) => mark.innerText)
+              })
+              // make sure there exists the default executed statements
+              .should('to.deep.eq', sizeList)
+          })
+        })
+    }
+
+    it('Statement setting max size', () => {
+      const sizeList = ['200', '1000', '2000', '5000']
+      checkSilder(sizeList, '3000', 'statement_setting_max_size')
+    })
+
+    it('Statement setting window size', () => {
+      const sizeList = ['1', '5', '15', '30', '60']
+      checkSilder(sizeList, '30', 'statement_setting_refresh_interval')
+    })
+
+    it('Statement setting number of windows', () => {
+      const sizeList = ['1', '255']
+      checkSilder(sizeList, '24', 'statement_setting_history_size')
+    })
+
+    describe('SQL Statement History Size', () => {
+      beforeEach(() => {
+        cy.get('[data-e2e=statement_setting]')
+          .click()
+          .then(() => {
+            // get refresh_interval value
+            cy.get(`[data-e2e=statement_setting_refresh_interval]`).within(
+              () => {
+                cy.get('.ant-slider-handle')
+                  .invoke('attr', 'aria-valuenow')
+                  .as('refreshIntervalVal')
+              }
+            )
+
+            // get history_size value
+            cy.get(`[data-e2e=statement_setting_history_size]`).within(() => {
+              cy.get('.ant-slider-handle')
+                .invoke('attr', 'aria-valuenow')
+                .as('historySizeVal')
+            })
+          })
+      })
+
+      const calcStmtHistorySize = (refreshInterval, historySize) => {
+        const totalMins = refreshInterval * historySize
+        const day = Math.floor(totalMins / (24 * 60))
+        const hour = Math.floor((totalMins - day * 24 * 60) / 60)
+        const min = totalMins - day * 24 * 60 - hour * 60
+        return `${day} day ${hour} hour ${min} min`
+      }
+
+      it('Check History Size', function () {
+        const stmtHistorySize = calcStmtHistorySize(
+          this.refreshIntervalVal,
+          this.historySizeVal
+        )
+        console.log('stmtHistorySize', stmtHistorySize)
+
+        cy.get('[data-e2e=statement_setting_keep_duration]').within(() => {
+          cy.get('.ant-form-item-control-input-content').should(
+            'have.text',
+            calcStmtHistorySize(this.refreshIntervalVal, this.historySizeVal)
+          )
+        })
+      })
+    })
+  })
 })

From 0d23683bedae80684dea7df5bd2be6aa578e37db Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Tue, 8 Mar 2022 14:35:04 +0800
Subject: [PATCH 31/41] update statement list

---
 .../integration/statement/01-list.spec.js     | 180 +++++++++++-------
 1 file changed, 111 insertions(+), 69 deletions(-)

diff --git a/ui/cypress/integration/statement/01-list.spec.js b/ui/cypress/integration/statement/01-list.spec.js
index 3fb73627b5..1fd94a9ff3 100644
--- a/ui/cypress/integration/statement/01-list.spec.js
+++ b/ui/cypress/integration/statement/01-list.spec.js
@@ -118,20 +118,26 @@ describe('SQL statements list page', () => {
 
     const getNearTime = () => {
       const cur = dayjs()
+      let endTime, startTime
       if (cur.get('minute') > 30) {
-        const endTime = cur.set('hour', cur.get('hour') + 1).set('minute', 0)
-        console.log('endTime', endTime, dayjs(endTime).unix())
+        endTime = dayjs(
+          cur
+            .set('hour', cur.get('hour') + 1)
+            .set('minute', 0)
+            .set('second', 0)
+        ).unix()
+        startTime = dayjs(cur.set('minute', 30).set('second', 0)).unix()
       } else {
-        const endTime = cur.set('minute', 0)
-        console.log('s endTime', endTime, dayjs(endTime).unix())
+        endTime = dayjs(cur.set('minute', 30).set('second', 0)).unix()
+        startTime = dayjs(cur.set('minute', 0).set('second', 0)).unix()
       }
+      return [startTime, endTime]
     }
 
     const checkStmtListWithTimeRange = (stmtList, timeDiff) => {
       const now = dayjs().unix()
 
       stmtList.forEach((stmt) => {
-        console.log('stmt.last_seen', stmt.last_seen)
         cy.wrap(stmt.last_seen)
           .should('be.lte', now)
           .and('be.gt', now - timeDiff)
@@ -174,18 +180,19 @@ describe('SQL statements list page', () => {
       })
 
       it('Custom time range selector', () => {
+        const [startTime, endTime] = getNearTime()
         cy.get('[data-e2e=statement_timerange_selector]')
           .click()
           .then(() => {
             cy.get('.ant-slider').within(() => {
               cy.get('[role=slider]')
                 .eq(0)
-                .should('have.attr', 'aria-valuemin', '1646645400')
-                .and('have.attr', 'aria-valuemax', '1646647200')
+                .should('have.attr', 'aria-valuemin', startTime)
+                .and('have.attr', 'aria-valuemax', endTime)
               cy.get('[role=slider]')
                 .eq(1)
-                .should('have.attr', 'aria-valuemin', '1646645400')
-                .and('have.attr', 'aria-valuemax', '1646647200')
+                .should('have.attr', 'aria-valuemin', startTime)
+                .and('have.attr', 'aria-valuemax', endTime)
             })
           })
       })
@@ -533,6 +540,14 @@ describe('SQL statements list page', () => {
     })
   })
 
+  const calcStmtHistorySize = (refreshInterval, historySize) => {
+    const totalMins = refreshInterval * historySize
+    const day = Math.floor(totalMins / (24 * 60))
+    const hour = Math.floor((totalMins - day * 24 * 60) / 60)
+    const min = totalMins - day * 24 * 60 - hour * 60
+    return `${day} day ${hour} hour ${min} min`
+  }
+
   describe('Statement Setting', () => {
     it('Close setting panel', () => {
       cy.get('[data-e2e=statement_setting]')
@@ -580,87 +595,114 @@ describe('SQL statements list page', () => {
       cy.get('[data-e2e=statements_table]').should('exist')
     })
 
-    const checkSilder = (sizeList, defaultValueNow, dataE2EValue) => {
-      cy.get('[data-e2e=statement_setting]')
-        .click()
-        .then(() => {
-          cy.get(`[data-e2e=${dataE2EValue}]`).within(() => {
-            cy.get('.ant-slider-handle').should(
-              'have.attr',
-              'aria-valuenow',
-              defaultValueNow
-            )
+    describe('Default statement setting', () => {
+      beforeEach(() => {
+        cy.get('[data-e2e=statement_setting]').click()
 
-            cy.get('.ant-slider-mark-text')
-              .then(($marks) => {
-                return Cypress.$.makeArray($marks).map((mark) => mark.innerText)
-              })
-              // make sure there exists the default executed statements
-              .should('to.deep.eq', sizeList)
-          })
+        // get refresh_interval value
+        cy.get(`[data-e2e=statement_setting_refresh_interval]`).within(() => {
+          cy.get('.ant-slider-handle')
+            .invoke('attr', 'aria-valuenow')
+            .as('refreshIntervalVal')
         })
-    }
 
-    it('Statement setting max size', () => {
-      const sizeList = ['200', '1000', '2000', '5000']
-      checkSilder(sizeList, '3000', 'statement_setting_max_size')
-    })
+        // get history_size value
+        cy.get(`[data-e2e=statement_setting_history_size]`).within(() => {
+          cy.get('.ant-slider-handle')
+            .invoke('attr', 'aria-valuenow')
+            .as('historySizeVal')
+        })
+      })
 
-    it('Statement setting window size', () => {
-      const sizeList = ['1', '5', '15', '30', '60']
-      checkSilder(sizeList, '30', 'statement_setting_refresh_interval')
-    })
+      const checkSilder = (sizeList, defaultValueNow, dataE2EValue) => {
+        cy.get(`[data-e2e=${dataE2EValue}]`).within(() => {
+          cy.get('.ant-slider-handle').should(
+            'have.attr',
+            'aria-valuenow',
+            defaultValueNow
+          )
 
-    it('Statement setting number of windows', () => {
-      const sizeList = ['1', '255']
-      checkSilder(sizeList, '24', 'statement_setting_history_size')
-    })
+          cy.get('.ant-slider-mark-text')
+            .then(($marks) => {
+              return Cypress.$.makeArray($marks).map((mark) => mark.innerText)
+            })
+            // make sure there exists the default executed statements
+            .should('to.deep.eq', sizeList)
+        })
+      }
 
-    describe('SQL Statement History Size', () => {
-      beforeEach(() => {
-        cy.get('[data-e2e=statement_setting]')
-          .click()
-          .then(() => {
-            // get refresh_interval value
-            cy.get(`[data-e2e=statement_setting_refresh_interval]`).within(
-              () => {
-                cy.get('.ant-slider-handle')
-                  .invoke('attr', 'aria-valuenow')
-                  .as('refreshIntervalVal')
-              }
-            )
+      it('Statement setting max size', () => {
+        const sizeList = ['200', '1000', '2000', '5000']
+        checkSilder(sizeList, '3000', 'statement_setting_max_size')
+      })
 
-            // get history_size value
-            cy.get(`[data-e2e=statement_setting_history_size]`).within(() => {
-              cy.get('.ant-slider-handle')
-                .invoke('attr', 'aria-valuenow')
-                .as('historySizeVal')
-            })
-          })
+      it('Statement setting window size', () => {
+        const sizeList = ['1', '5', '15', '30', '60']
+        checkSilder(sizeList, '30', 'statement_setting_refresh_interval')
       })
 
-      const calcStmtHistorySize = (refreshInterval, historySize) => {
-        const totalMins = refreshInterval * historySize
-        const day = Math.floor(totalMins / (24 * 60))
-        const hour = Math.floor((totalMins - day * 24 * 60) / 60)
-        const min = totalMins - day * 24 * 60 - hour * 60
-        return `${day} day ${hour} hour ${min} min`
-      }
+      it('Statement setting number of windows', () => {
+        const sizeList = ['1', '255']
+        checkSilder(sizeList, '24', 'statement_setting_history_size')
+      })
 
       it('Check History Size', function () {
         const stmtHistorySize = calcStmtHistorySize(
           this.refreshIntervalVal,
           this.historySizeVal
         )
-        console.log('stmtHistorySize', stmtHistorySize)
-
         cy.get('[data-e2e=statement_setting_keep_duration]').within(() => {
           cy.get('.ant-form-item-control-input-content').should(
             'have.text',
-            calcStmtHistorySize(this.refreshIntervalVal, this.historySizeVal)
+            stmtHistorySize
           )
         })
       })
     })
+
+    describe('Update statement setting', () => {
+      beforeEach(() => {
+        cy.get('[data-e2e=statement_setting]').click()
+      })
+
+      it('Update window size and number of windows', () => {
+        cy.get('[data-e2e=statement_setting_refresh_interval]').within(() => {
+          cy.get('.ant-slider-step')
+            .find('.ant-slider-dot')
+            .eq(0)
+            .click()
+            .then(() => {
+              cy.get('.ant-slider-handle')
+                .invoke('attr', 'aria-valuenow')
+                .as('refreshIntervalVal')
+            })
+        })
+
+        cy.get('[data-e2e=statement_setting_history_size]').within(() => {
+          cy.get('.ant-slider-step')
+            .find('.ant-slider-dot')
+            .eq(0)
+            .click()
+            .then(() => {
+              cy.get('.ant-slider-handle')
+                .invoke('attr', 'aria-valuenow')
+                .as('historySizeVal')
+            })
+        })
+
+        cy.get(['@refreshIntervalVal', '@historySizeVal']).then(() => {
+          cy.get('[data-e2e=statement_setting_keep_duration]').within(() => {
+            const stmtHistorySize = calcStmtHistorySize(
+              this.refreshIntervalVal,
+              this.historySizeVal
+            )
+            cy.get('.ant-form-item-control-input-content').should(
+              'have.text',
+              stmtHistorySize
+            )
+          })
+        })
+      })
+    })
   })
 })

From abdfe7080c15b33586aee9cbb396ce7a368c129c Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Mon, 14 Mar 2022 09:51:26 +0800
Subject: [PATCH 32/41] update statement

---
 ui/cypress/fixtures/uri.json                  |   3 +-
 ui/cypress/integration/components.js          |   2 +
 .../integration/login/user_login.spec.js      |   2 +-
 .../integration/slow_query/01-list.spec.js    |  48 ++--
 .../integration/slow_query/02-detail.spec.js  |  16 +-
 .../integration/statement/01-list.spec.js     | 262 ++++++++++++++----
 .../integration/statement/02-detail.spec.js   | 171 ++++++++++++
 .../integration/statement/list.compat_spec.js |  63 +++++
 ui/cypress/integration/utils.js               |  19 +-
 ui/cypress/support/commands.js                |   2 +-
 ui/lib/apps/Configuration/index.tsx           |   6 +-
 .../SlowQuery/components/SlowQueriesTable.tsx |   1 +
 .../Statement/pages/Detail/PlanDetailTabs.tsx |   4 +
 ui/lib/apps/Statement/pages/Detail/index.tsx  |   1 +
 .../pages/List/TimeRangeSelector.tsx          |   2 +-
 ui/lib/apps/Statement/pages/List/index.tsx    |  12 +-
 ui/lib/components/Bar/Bar.tsx                 |   6 +-
 ui/lib/components/Expand/index.tsx            |   2 +-
 18 files changed, 530 insertions(+), 92 deletions(-)
 create mode 100644 ui/cypress/integration/statement/02-detail.spec.js
 create mode 100644 ui/cypress/integration/statement/list.compat_spec.js

diff --git a/ui/cypress/fixtures/uri.json b/ui/cypress/fixtures/uri.json
index 961987822b..196880c1c3 100644
--- a/ui/cypress/fixtures/uri.json
+++ b/ui/cypress/fixtures/uri.json
@@ -3,5 +3,6 @@
   "login": "/signin",
   "overview": "/overview",
   "slow_query": "/slow_query",
-  "statement": "/statement"
+  "statement": "/statement",
+  "configuration": "/configuration"
 }
diff --git a/ui/cypress/integration/components.js b/ui/cypress/integration/components.js
index 4a07f5dd59..67ecc1afe1 100644
--- a/ui/cypress/integration/components.js
+++ b/ui/cypress/integration/components.js
@@ -1,3 +1,5 @@
+// Copyright 2022 PingCAP, Inc. Licensed under Apache-2.0.
+
 export const testBaseSelectorOptions = (optionsList, index) => {
   cy.get('[data-e2e=base_selector]')
     .eq(index)
diff --git a/ui/cypress/integration/login/user_login.spec.js b/ui/cypress/integration/login/user_login.spec.js
index 023499c5aa..0250bf22ac 100644
--- a/ui/cypress/integration/login/user_login.spec.js
+++ b/ui/cypress/integration/login/user_login.spec.js
@@ -17,7 +17,7 @@ describe('Root User Login', () => {
 
   it('root login with no pwd', function () {
     cy.get('[data-e2e=signin_username_input]').should('have.value', 'root')
-    cy.get('[data-e2e=signin_submit]').click()
+    cy.get('[data-e2e=signin_submit]').click({ force: true })
     cy.url().should('include', this.uri.overview)
   })
 
diff --git a/ui/cypress/integration/slow_query/01-list.spec.js b/ui/cypress/integration/slow_query/01-list.spec.js
index 311bba3fc3..015d19a80b 100644
--- a/ui/cypress/integration/slow_query/01-list.spec.js
+++ b/ui/cypress/integration/slow_query/01-list.spec.js
@@ -1,7 +1,11 @@
 // Copyright 2022 PingCAP, Inc. Licensed under Apache-2.0.
 
 import dayjs from 'dayjs'
-import { restartTiUP, validateCSVList, deleteDownloadsFolder } from '../utils'
+import {
+  restartTiUP,
+  validateSlowQueryCSVList,
+  deleteDownloadsFolder,
+} from '../utils'
 import { testBaseSelectorOptions } from '../components'
 
 const neatCSV = require('neat-csv')
@@ -127,9 +131,9 @@ describe('SlowQuery list page', () => {
       describe('Check slow query', () => {
         it('Check slow query in the 1st 5 seconds time range', () => {
           cy.get('[data-e2e=timerange-selector]')
-            .click()
+            .click({ force: true })
             .then(() => {
-              cy.get('.ant-picker-range').click()
+              cy.get('.ant-picker-range').click({ force: true })
               cy.get('.ant-picker-input-active').type(
                 `${firstQueryTimeRangeStart}{leftarrow}{leftarrow}{backspace}{enter}`
               )
@@ -146,9 +150,9 @@ describe('SlowQuery list page', () => {
 
         it('Check slow query in the 2nd 5 seconds time range', () => {
           cy.get('[data-e2e=timerange-selector]')
-            .click()
+            .click({ force: true })
             .then(() => {
-              cy.get('.ant-picker-range').click()
+              cy.get('.ant-picker-range').click({ force: true })
               cy.get('.ant-picker-input-active').type(
                 `${secondQueryTimeRangeStart}{leftarrow}{leftarrow}{backspace}{enter}`
               )
@@ -163,9 +167,9 @@ describe('SlowQuery list page', () => {
 
         it('Check slow query in the 3rd 5 seconds time range', () => {
           cy.get('[data-e2e=timerange-selector]')
-            .click()
+            .click({ force: true })
             .then(() => {
-              cy.get('.ant-picker-range').click()
+              cy.get('.ant-picker-range').click({ force: true })
               cy.get('.ant-picker-input-active').type(
                 `${thirdQueryTimeRangeStart}{leftarrow}{leftarrow}{backspace}{enter}`
               )
@@ -182,9 +186,9 @@ describe('SlowQuery list page', () => {
 
         it('Check slow query in the latest 15 seconds time range', () => {
           cy.get('[data-e2e=timerange-selector]')
-            .click()
+            .click({ force: true })
             .then(() => {
-              cy.get('.ant-picker-range').click()
+              cy.get('.ant-picker-range').click({ force: true })
               cy.get('.ant-picker-input-active').type(
                 `${firstQueryTimeRangeStart}{leftarrow}{leftarrow}{backspace}{enter}`
               )
@@ -231,10 +235,10 @@ describe('SlowQuery list page', () => {
         cy.get('[data-automation-key=query]').should('has.length', 3)
 
         cy.get('[data-e2e=base_select_input_text]')
-          .click()
+          .click({ force: true })
           .then(() => {
             cy.get('.ms-DetailsHeader-checkTooltip')
-              .click()
+              .click({ force: true })
               .then(() => {
                 // global query will not be listed
                 cy.get('[data-automation-key=query]').should('has.length', 2)
@@ -281,7 +285,7 @@ describe('SlowQuery list page', () => {
 
       it('Check limit options', () => {
         cy.get('[data-e2e=slow_query_limit_select]')
-          .click()
+          .click({ force: true })
           .then(() => {
             cy.get('[data-e2e=slow_query_limit_option]')
               .should('have.length', 4)
@@ -293,11 +297,11 @@ describe('SlowQuery list page', () => {
 
       it('Check config remembered', () => {
         cy.get('[data-e2e=slow_query_limit_select]')
-          .click()
+          .click({ force: true })
           .then(() => {
             cy.get('[data-e2e=slow_query_limit_option]')
               .eq(1)
-              .click()
+              .click({ force: true })
               .then(() => {
                 cy.reload()
                 cy.get('[data-e2e=slow_query_limit_select]').contains('200')
@@ -363,7 +367,7 @@ describe('SlowQuery list page', () => {
           .trigger('mouseover')
           .then(() => {
             cy.get('[data-e2e=column_selector_reset]')
-              .click()
+              .click({ force: true })
               .then(() => {
                 cy.get('[role=columnheader]')
                   .not('.is-empty')
@@ -442,7 +446,7 @@ describe('SlowQuery list page', () => {
       cy.wait(1000)
 
       cy.get('[data-e2e=slow_query_refresh]')
-        .click()
+        .click({ force: true })
         .then(() => {
           cy.get('[data-automation-key=query]').should('have.length', 4)
         })
@@ -472,7 +476,7 @@ describe('SlowQuery list page', () => {
 
       cy.get('[data-item-key=timestamp]')
         .should('be.visible')
-        .click()
+        .click({ force: true })
         .then(() => {
           cy.get('[data-automation-key=query]').each(($query, $idx) => {
             cy.wrap($query).should('have.text', AscOrderByTimestamp[$idx])
@@ -490,7 +494,7 @@ describe('SlowQuery list page', () => {
 
       cy.get('[data-item-key=query_time]')
         .should('be.visible')
-        .click()
+        .click({ force: true })
         .then(() => {
           // Desc order by Latency
           cy.get('[data-automation-key=query]').each(($query, $idx) => {
@@ -508,7 +512,7 @@ describe('SlowQuery list page', () => {
           // Asc order by Latency
           cy.get('[data-item-key=query_time]')
             .should('be.visible')
-            .click()
+            .click({ force: true })
             .then(() => {
               cy.get('[data-automation-key=query]').each(($query, $idx) => {
                 cy.wrap($query).should('have.text', AscOrderByLatency[$idx])
@@ -522,7 +526,7 @@ describe('SlowQuery list page', () => {
     it('Click first slow query and go to detail page', function () {
       cy.get('[data-automationid=ListCell]')
         .eq(0)
-        .click()
+        .click({ force: true })
         .then(() => {
           cy.url().should('include', `${this.uri.slow_query}/detail`)
           cy.get('[data-e2e=syntax_highlighter_compact]').should(
@@ -558,7 +562,7 @@ describe('SlowQuery list page', () => {
                 `${Cypress.env('apiBasePath')}slow_query/download?token=*`
               ).as('download_slow_query')
 
-              cy.get('[data-e2e=slow_query_export_btn]').click()
+              cy.get('[data-e2e=slow_query_export_btn]').click({ force: true })
             })
         })
         .then(() => {
@@ -573,7 +577,7 @@ describe('SlowQuery list page', () => {
             cy.readFile(downloadedFilename, { timeout: 15000 })
               // parse CSV text into objects
               .then(neatCSV)
-              .then(validateCSVList)
+              .then(validateSlowQueryCSVList)
           })
         })
     })
diff --git a/ui/cypress/integration/slow_query/02-detail.spec.js b/ui/cypress/integration/slow_query/02-detail.spec.js
index 5e4370d067..15f17b71fe 100644
--- a/ui/cypress/integration/slow_query/02-detail.spec.js
+++ b/ui/cypress/integration/slow_query/02-detail.spec.js
@@ -13,14 +13,14 @@ describe('Slow query detail page E2E test', () => {
       'slow_query_detail'
     )
 
-    cy.get('[data-automation-key=query]').eq(0).click()
+    cy.get('[data-automation-key=query]').eq(0).click({ force: true })
   })
 
   describe('Query descriptions', () => {
     it('Check sql and default format', () => {
       // sql is collapsed by default
       cy.get('[data-e2e=expandText]').eq(0).should('have.text', 'Expand')
-      cy.get('[data-e2e=slow_query_detail_page_query]')
+      cy.get('[data-e2e=statement_query_detail_page_query]')
         .eq(0)
         .find('[data-e2e=syntax_highlighter_compact]')
         .and('have.text', 'SELECT sleep(1.2);')
@@ -28,11 +28,11 @@ describe('Slow query detail page E2E test', () => {
 
     it('Expand sql', () => {
       // expand sql
-      cy.get('[data-e2e=expandText]').eq(0).click()
+      cy.get('[data-e2e=expandText]').eq(0).click({ force: true })
 
       // sql is collapsed by default
       cy.get('[data-e2e=collapseText]').eq(0).should('have.text', 'Collapse')
-      cy.get('[data-e2e=slow_query_detail_page_query]')
+      cy.get('[data-e2e=statement_query_detail_page_query]')
         .eq(0)
         .find('[data-e2e=syntax_highlighter_original]')
         .and('have.text', 'SELECT\n  sleep(1.2);')
@@ -79,7 +79,7 @@ describe('Slow query detail page E2E test', () => {
 
       cy.wait('@slow_query_detail').then((res) => {
         const responseBody = res.response.body
-        cy.get('[data-e2e=slow_query_detail_page_query]')
+        cy.get('[data-e2e=statement_query_detail_page_query]')
           .eq(1)
           .and('have.text', responseBody.plan)
       })
@@ -104,17 +104,17 @@ describe('Slow query detail page E2E test', () => {
     })
 
     it('Time table rows count', () => {
-      cy.get('.ant-tabs-tab').eq(1).click()
+      cy.get('.ant-tabs-tab').eq(1).click({ force: true })
       cy.get('.ms-List-cell').should('have.length', 21)
     })
 
     it('Coprocessor table rows count', () => {
-      cy.get('.ant-tabs-tab').eq(2).click()
+      cy.get('.ant-tabs-tab').eq(2).click({ force: true })
       cy.get('.ms-List-cell').should('have.length', 10)
     })
 
     it('Transaction table rows count', () => {
-      cy.get('.ant-tabs-tab').eq(3).click()
+      cy.get('.ant-tabs-tab').eq(3).click({ force: true })
       cy.get('.ms-List-cell').should('have.length', 5)
     })
   })
diff --git a/ui/cypress/integration/statement/01-list.spec.js b/ui/cypress/integration/statement/01-list.spec.js
index 1fd94a9ff3..ee787c0c0f 100644
--- a/ui/cypress/integration/statement/01-list.spec.js
+++ b/ui/cypress/integration/statement/01-list.spec.js
@@ -1,12 +1,19 @@
 // Copyright 2022 PingCAP, Inc. Licensed under Apache-2.0.
 
-import { restartTiUP, deleteDownloadsFolder } from '../utils'
+import dayjs from 'dayjs'
+
+import {
+  restartTiUP,
+  validateStatementCSVList,
+  deleteDownloadsFolder,
+} from '../utils'
 import {
   testBaseSelectorOptions,
   checkAllOptionsInBaseSelector,
 } from '../components'
 
-import dayjs from 'dayjs'
+const neatCSV = require('neat-csv')
+const path = require('path')
 
 describe('SQL statements list page', () => {
   before(() => {
@@ -103,7 +110,7 @@ describe('SQL statements list page', () => {
       cy.wait('@init_statements_list')
 
       cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
-        'statements_list_with_last_seen'
+        'statements_list_with_last_seen_field'
       )
 
       // select last_seen column field
@@ -111,7 +118,9 @@ describe('SQL statements list page', () => {
         .trigger('mouseover')
         .then(() => {
           cy.contains('Last Seen').within(() => {
-            cy.get('[data-e2e=columns_selector_field_last_seen]').check()
+            cy.get('[data-e2e=columns_selector_field_last_seen]').check({
+              force: true,
+            })
           })
         })
     })
@@ -154,7 +163,7 @@ describe('SQL statements list page', () => {
 
       it('Common time range options', () => {
         cy.get('[data-e2e=statement_timerange_selector]')
-          .click()
+          .click({ force: true })
           .then(() => {
             cy.get('[data-e2e=statement_time_range_option]')
               .should('have.length', 12)
@@ -182,7 +191,7 @@ describe('SQL statements list page', () => {
       it('Custom time range selector', () => {
         const [startTime, endTime] = getNearTime()
         cy.get('[data-e2e=statement_timerange_selector]')
-          .click()
+          .click({ force: true })
           .then(() => {
             cy.get('.ant-slider').within(() => {
               cy.get('[role=slider]')
@@ -198,7 +207,7 @@ describe('SQL statements list page', () => {
       })
 
       it('Init statement list', () => {
-        cy.wait('@statements_list_with_last_seen').then((res) => {
+        cy.wait('@statements_list_with_last_seen_field').then((res) => {
           const response = res.response.body
 
           cy.get('[data-automation-key=digest_text]').should(
@@ -213,15 +222,24 @@ describe('SQL statements list page', () => {
       it('Select time range as recent 15 mins', () => {
         // select recent 15 mins
         cy.get('[data-e2e=statement_timerange_selector]')
-          .click()
+          .click({ force: true })
           .then(() => {
-            cy.get('[data-e2e=statement_time_range_option]').eq(0).click()
+            cy.get('[data-e2e=statement_time_range_option]')
+              .eq(0)
+              .click({ force: true })
           })
 
-        cy.wait('@statements_list_with_last_seen').then((res) => {
+        cy.wait('@statements_list_with_last_seen_field').then((res) => {
           const response = res.response.body
           checkStmtListWithTimeRange(response, 900)
         })
+
+        // time rage will be remebered after reload page
+        cy.reload()
+        cy.get('[data-e2e=statement_timerange_selector]').should(
+          'have.text',
+          'Recent 15 min'
+        )
       })
     })
   })
@@ -273,10 +291,10 @@ describe('SQL statements list page', () => {
       cy.wait('@databases').then(() => {
         cy.get('[data-e2e=base_selector]')
           .eq(0)
-          .click()
+          .click({ force: true })
           .then(() => {
             cy.get('.ant-dropdown').within(() => {
-              cy.get('.ant-checkbox-input').eq(3).click()
+              cy.get('.ant-checkbox-input').eq(3).click({ force: true })
             })
           })
           .then(() => {
@@ -338,10 +356,10 @@ describe('SQL statements list page', () => {
       cy.wait('@stmt_types').then(() => {
         cy.get('[data-e2e=base_selector]')
           .eq(1)
-          .click()
+          .click({ force: true })
           .then(() => {
             cy.get('.ant-dropdown').within(() => {
-              cy.get('.ant-checkbox-input').eq(2).click()
+              cy.get('.ant-checkbox-input').eq(2).click({ force: true })
             })
           })
           .then(() => {
@@ -368,6 +386,10 @@ describe('SQL statements list page', () => {
       cy.wait('@statements_list').then(() => {
         cy.get('[data-e2e=syntax_highlighter_compact]').should('has.length', 1)
       })
+
+      // check search text remembered after reload page
+      cy.reload()
+      cy.get('[data-e2e=sql_statements_search]').contains('SELECT version')
     })
 
     it('Type search without pressing enter then reload', () => {
@@ -435,7 +457,7 @@ describe('SQL statements list page', () => {
         .trigger('mouseover')
         .then(() => {
           cy.get('[data-e2e=column_selector_title]')
-            .check()
+            .check({ force: true })
             .then(() => {
               cy.get('[role=columnheader]')
                 .not('.is-empty')
@@ -449,7 +471,7 @@ describe('SQL statements list page', () => {
         .trigger('mouseover')
         .then(() => {
           cy.get('[data-e2e=column_selector_reset]')
-            .click()
+            .click({ force: true })
             .then(() => {
               cy.get('[role=columnheader]')
                 .not('.is-empty')
@@ -466,7 +488,7 @@ describe('SQL statements list page', () => {
             .within(() => {
               cy.get(
                 '[data-e2e=columns_selector_field_sum_cop_task_num]'
-              ).check()
+              ).check({ force: true })
             })
             .then(() => {
               cy.get('[data-item-key=sum_cop_task_num]').should(
@@ -485,7 +507,7 @@ describe('SQL statements list page', () => {
             .within(() => {
               cy.get(
                 '[data-e2e=columns_selector_field_sum_cop_task_num]'
-              ).uncheck()
+              ).uncheck({ force: true })
             })
             .then(() => {
               cy.get('[data-item-key=sum_cop_task_num]').should('not.exist')
@@ -498,7 +520,7 @@ describe('SQL statements list page', () => {
         .trigger('mouseover')
         .then(() => {
           cy.get('[data-e2e=statement_show_full_sql]')
-            .check()
+            .check({ force: true })
             .then(() => {
               cy.get('[data-automation-key=digest_text]')
                 .eq(0)
@@ -506,7 +528,7 @@ describe('SQL statements list page', () => {
             })
 
           cy.get('[data-e2e=statement_show_full_sql]')
-            .uncheck()
+            .uncheck({ force: true })
             .then(() => {
               cy.get('[data-automation-key=digest_text]')
                 .eq(0)
@@ -530,7 +552,7 @@ describe('SQL statements list page', () => {
       )
       cy.wait('@statements_list').then(() => {
         cy.get('[data-e2e=statement_refresh]')
-          .click()
+          .click({ force: true })
           .then(() => {
             cy.get('[data-automation-key=digest_text]').contains(
               'SELECT count (?) FROM tidb;'
@@ -548,23 +570,25 @@ describe('SQL statements list page', () => {
     return `${day} day ${hour} hour ${min} min`
   }
 
-  describe('Statement Setting', () => {
+  describe('Statement Setting', function () {
     it('Close setting panel', () => {
+      // close panel by clicking mask
       cy.get('[data-e2e=statement_setting]')
-        .click()
+        .click({ force: true })
         .then(() => {
           cy.get('.ant-drawer-mask')
-            .click()
+            .click({ force: true })
             .then(() => {
               cy.get('.ant-drawer-content').should('not.be.visible')
             })
         })
 
+      // close panel by clicking close icon
       cy.get('[data-e2e=statement_setting]')
-        .click()
+        .click({ force: true })
         .then(() => {
           cy.get('.ant-drawer-close')
-            .click()
+            .click({ force: true })
             .then(() => {
               cy.get('.ant-drawer-content').should('not.be.visible')
             })
@@ -573,20 +597,22 @@ describe('SQL statements list page', () => {
 
     const siwtchStatement = (isEnabled) => {
       cy.get('[data-e2e=statement_setting]')
-        .click()
+        .click({ force: true })
         .then(() => {
           cy.get('.ant-drawer-content').should('exist')
           cy.get('[data-e2e=statemen_enbale_switcher]')
             // the current of switcher is isEnabled
             .should('have.attr', 'aria-checked', isEnabled)
-            .click()
-          cy.get('[data-e2e=submit_btn]').click()
+            .click({ force: true })
+          cy.get('[data-e2e=submit_btn]').click({ force: true })
         })
     }
 
     it('Disable statement feature', () => {
       siwtchStatement('true')
-      cy.get('.ant-modal-confirm-btns').find('.ant-btn-dangerous').click()
+      cy.get('.ant-modal-confirm-btns')
+        .find('.ant-btn-dangerous')
+        .click({ force: true })
       cy.get('[data-e2e=statements_table]').should('not.exist')
     })
 
@@ -597,7 +623,7 @@ describe('SQL statements list page', () => {
 
     describe('Default statement setting', () => {
       beforeEach(() => {
-        cy.get('[data-e2e=statement_setting]').click()
+        cy.get('[data-e2e=statement_setting]').click({ force: true })
 
         // get refresh_interval value
         cy.get(`[data-e2e=statement_setting_refresh_interval]`).within(() => {
@@ -631,22 +657,22 @@ describe('SQL statements list page', () => {
         })
       }
 
-      it('Statement setting max size', () => {
+      it('Default statement setting max size', () => {
         const sizeList = ['200', '1000', '2000', '5000']
         checkSilder(sizeList, '3000', 'statement_setting_max_size')
       })
 
-      it('Statement setting window size', () => {
+      it('Default statement setting window size', () => {
         const sizeList = ['1', '5', '15', '30', '60']
         checkSilder(sizeList, '30', 'statement_setting_refresh_interval')
       })
 
-      it('Statement setting number of windows', () => {
+      it('Default Statement setting number of windows', () => {
         const sizeList = ['1', '255']
         checkSilder(sizeList, '24', 'statement_setting_history_size')
       })
 
-      it('Check History Size', function () {
+      it('Default Check History Size', function () {
         const stmtHistorySize = calcStmtHistorySize(
           this.refreshIntervalVal,
           this.historySizeVal
@@ -660,17 +686,18 @@ describe('SQL statements list page', () => {
       })
     })
 
-    describe('Update statement setting', () => {
-      beforeEach(() => {
-        cy.get('[data-e2e=statement_setting]').click()
+    describe('Update statement setting', function () {
+      beforeEach(function () {
+        cy.get('[data-e2e=statement_setting]').click({ force: true })
       })
 
-      it('Update window size and number of windows', () => {
+      it('Update window size and number of windows', function () {
+        // change window size
         cy.get('[data-e2e=statement_setting_refresh_interval]').within(() => {
           cy.get('.ant-slider-step')
             .find('.ant-slider-dot')
-            .eq(0)
-            .click()
+            .eq(2)
+            .click({ force: true })
             .then(() => {
               cy.get('.ant-slider-handle')
                 .invoke('attr', 'aria-valuenow')
@@ -678,11 +705,12 @@ describe('SQL statements list page', () => {
             })
         })
 
+        // change number of windows
         cy.get('[data-e2e=statement_setting_history_size]').within(() => {
           cy.get('.ant-slider-step')
             .find('.ant-slider-dot')
-            .eq(0)
-            .click()
+            .eq(1)
+            .click({ force: true })
             .then(() => {
               cy.get('.ant-slider-handle')
                 .invoke('attr', 'aria-valuenow')
@@ -690,19 +718,149 @@ describe('SQL statements list page', () => {
             })
         })
 
-        cy.get(['@refreshIntervalVal', '@historySizeVal']).then(() => {
-          cy.get('[data-e2e=statement_setting_keep_duration]').within(() => {
-            const stmtHistorySize = calcStmtHistorySize(
-              this.refreshIntervalVal,
-              this.historySizeVal
-            )
-            cy.get('.ant-form-item-control-input-content').should(
-              'have.text',
-              stmtHistorySize
+        cy.get('@refreshIntervalVal').then((refreshIntervalVal) => {
+          cy.get('@historySizeVal').then((historySizeVal) => {
+            cy.get('[data-e2e=statement_setting_keep_duration]').within(() => {
+              // check statement history size by calculating window size and # windows
+              const stmtHistorySize = calcStmtHistorySize(
+                refreshIntervalVal,
+                historySizeVal
+              )
+              cy.get('.ant-form-item-control-input-content').should(
+                'have.text',
+                stmtHistorySize
+              )
+            })
+
+            cy.intercept(
+              'POST',
+              `${Cypress.env('apiBasePath')}statements/config`
+            ).as('update_config')
+            cy.get('[data-e2e=submit_btn]').click({ force: true })
+
+            cy.wait('@update_config').then(() => {
+              // check configuration whether come to effect or not
+              cy.visit(this.uri.configuration)
+              cy.url().should('include', this.uri.configuration)
+
+              cy.get('[data-e2e=search_config]').type(
+                'tidb_stmt_summary_refresh_interval'
+              )
+              cy.wait(1000)
+              cy.get('[data-automation-key=key]').contains(
+                'tidb_stmt_summary_refresh_interval'
+              )
+              cy.get('[data-automation-key=value]').contains(
+                refreshIntervalVal * 60
+              )
+
+              cy.get('[data-e2e=search_config]')
+                .clear()
+                .type('tidb_stmt_summary_history_size')
+              cy.wait(1000)
+              cy.get('[data-automation-key=key]').contains(
+                'tidb_stmt_summary_history_size'
+              )
+              cy.get('[data-automation-key=value]').contains(historySizeVal)
+            })
+          })
+        })
+      })
+
+      it('Get config list bad request', () => {
+        const staticResponse = {
+          statusCode: 400,
+          body: {
+            code: 'common.bad_request',
+            error: true,
+            message: 'common.bad_request',
+          },
+        }
+
+        // stub out a response body
+        cy.intercept(
+          `${Cypress.env('apiBasePath')}statements/config`,
+          staticResponse
+        ).as('statements_config')
+        cy.wait('@statements_config').then(() => {
+          // get error alert on panel
+          cy.get('.ant-drawer-body').within(() => {
+            cy.get('[data-e2e=alert_error_bar]').should(
+              'has.text',
+              staticResponse.body.message
             )
           })
         })
       })
+
+      it('Failed to save config list', () => {
+        const staticResponse = {
+          statusCode: 400,
+          body: {
+            code: 'common.bad_request',
+            error: true,
+            message: 'common.bad_request',
+          },
+        }
+
+        // stub out a response body
+        cy.intercept(
+          'POST',
+          `${Cypress.env('apiBasePath')}statements/config`,
+          staticResponse
+        ).as('statements_config')
+        cy.get('[data-e2e=submit_btn]').click({ force: true })
+        cy.wait('@statements_config').then(() => {
+          // get error notifitcation on modal
+          cy.get('.ant-modal-confirm-content').should(
+            'has.text',
+            staticResponse.body.message
+          )
+        })
+      })
+    })
+  })
+
+  describe('Export statement CSV ', () => {
+    it('validate CSV File', () => {
+      const downloadsFolder = Cypress.config('downloadsFolder')
+      let downloadedFilename
+
+      cy.get('[data-e2e=statement_export_menu]')
+        .trigger('mouseover')
+        .then(() => {
+          cy.window()
+            .document()
+            .then(function (doc) {
+              doc.addEventListener('click', () => {
+                setTimeout(function () {
+                  doc.location.reload()
+                }, 5000)
+              })
+
+              // Make sure the file exists
+              cy.intercept(
+                `${Cypress.env('apiBasePath')}statements/download?token=*`
+              ).as('download_statement')
+
+              cy.get('[data-e2e=statement_export_btn]').click({ force: true })
+            })
+        })
+        .then(() => {
+          cy.wait('@download_statement').then((res) => {
+            // join downloadFolder with CSV filename
+            const filenameRegx = /"(.*)"/
+            downloadedFilename = path.join(
+              downloadsFolder,
+              res.response.headers['content-disposition'].match(filenameRegx)[1]
+            )
+
+            cy.readFile(downloadedFilename, { timeout: 15000 })
+              // parse CSV text into objects
+              .then(neatCSV)
+              .then(validateStatementCSVList)
+          })
+        })
     })
   })
 })
diff --git a/ui/cypress/integration/statement/02-detail.spec.js b/ui/cypress/integration/statement/02-detail.spec.js
new file mode 100644
index 0000000000..e74540b994
--- /dev/null
+++ b/ui/cypress/integration/statement/02-detail.spec.js
@@ -0,0 +1,171 @@
+describe('Statement detail page E2E test', () => {
+  before(() => {
+    const workloads = [
+      'DROP TABLE IF EXISTS mysql.t;',
+      'CREATE TABLE `t` (`a` bigint(20) DEFAULT NULL, `b` bigint(20) DEFAULT NULL, `c` timestamp(6) DEFAULT CURRENT_TIMESTAMP(6), `d` varchar(50) DEFAULT NULL, UNIQUE KEY `idx0` (`a`), KEY `idx1` (`b`), KEY `idx2` (`b`)) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_bin;',
+      'select /*+ USE_INDEX(t, idx1) */ count(*)  from t where b < 100;',
+      'select /*+ USE_INDEX(t, idx2) */ count(*)  from t where b < 100;',
+    ]
+
+    workloads.forEach((query) => {
+      cy.task('queryDB', { query })
+    })
+
+    cy.fixture('uri.json').then(function (uri) {
+      this.uri = uri
+    })
+  })
+
+  beforeEach(function () {
+    cy.login('root')
+    cy.visit(this.uri.statement)
+    cy.url().should('include', this.uri.statement)
+    cy.intercept(`${Cypress.env('apiBasePath')}statement/detail?*`).as(
+      'statement_detail'
+    )
+
+    cy.get('[data-automation-key=plan_count]')
+      .contains(2)
+      .eq(0)
+      .click({ force: true })
+  })
+
+  describe('Statement Template', () => {
+    it('Check sql and default format', () => {
+      // sql is collapsed by default
+      cy.get('[data-e2e=expandText]').eq(0).should('have.text', 'Expand')
+      cy.get('[data-e2e=statement_query_detail_page_query]')
+        .eq(0)
+        .find('[data-e2e=syntax_highlighter_compact]')
+        .and('have.text', 'SELECT count (?) FROM `t` WHERE `b` < ?;')
+    })
+
+    it('Expand sql', () => {
+      // expand sql
+      cy.get('[data-e2e=expandText]').eq(0).click({ force: true })
+
+      // sql is collapsed by default
+      cy.get('[data-e2e=collapseText]').eq(0).should('have.text', 'Collapse')
+      cy.get('[data-e2e=statement_query_detail_page_query]')
+        .eq(0)
+        .find('[data-e2e=syntax_highlighter_original]')
+        .and('have.text', 'SELECT\n  count (?)\nFROM\n  `t`\nWHERE\n  `b` < ?;')
+    })
+
+    it('Copy formatted sql to clipboard', () => {
+      cy.window().then((win) => {
+        cy.stub(win, 'prompt').returns(win.prompt).as('copyToClipboardPrompt')
+      })
+
+      cy.get('[data-e2e=copy_formatted_sql_to_clipboard]')
+        .realClick()
+        .then(() => {
+          cy.task('getClipboard').should(
+            'eq',
+            'SELECT\n  count (?)\nFROM\n  `t`\nWHERE\n  `b` < ?;'
+          )
+        })
+
+      cy.get('[data-e2e=copied_success]').should('exist')
+    })
+
+    it('Copy original sql to clipboard', () => {
+      cy.window().then((win) => {
+        cy.stub(win, 'prompt').returns(win.prompt).as('copyToClipboardPrompt')
+      })
+
+      cy.get('[data-e2e=copy_original_sql_to_clipboard]')
+        .realClick()
+        .then(() => {
+          cy.task('getClipboard').should(
+            'eq',
+            'select count ( ? ) from `t` where `b` < ? ;'
+          )
+        })
+
+      cy.get('[data-e2e=copied_success]').should('exist')
+    })
+  })
+
+  describe('Query Template', () => {
+    it('Check sql and default format', () => {
+      // sql is collapsed by default
+      cy.get('[data-e2e=expandText]').eq(1).should('have.text', 'Expand')
+
+      cy.wait('@statement_detail').then((res) => {
+        const responseBody = res.response.body
+        cy.get('[data-e2e=statement_query_detail_page_query]')
+          .eq(1)
+          .and('have.text', responseBody.digest)
+      })
+    })
+  })
+
+  describe('Plans', () => {
+    it('Has multiple execution plans', () => {
+      cy.get('[data-e2e=statement_multiple_execution_plans]')
+        .should('be.visible')
+        .within(() => {
+          cy.get('[data-automationid=ListCell]').should('have.length', 2)
+        })
+    })
+  })
+
+  describe('Detail tabs', () => {
+    it('Check tabs list', () => {
+      const tabList = [
+        'Basic',
+        'Time',
+        'Coprocessor',
+        'Transaction',
+        'Slow Query',
+      ]
+      cy.get('[data-e2e=tabs]')
+        .find('.ant-tabs-tab')
+        .should('have.length', 5)
+        .each(($tab, index) => {
+          cy.wrap($tab).should('have.text', tabList[index])
+        })
+    })
+  })
+
+  describe('Detail table tabs', () => {
+    it('Basic table rows count', () => {
+      cy.get('[data-e2e=statement_pages_detail_tabs_basic]').within(() => {
+        cy.get('.ms-List-cell').should('have.length', 13)
+      })
+    })
+
+    it('Time table rows count', () => {
+      cy.get('.ant-tabs-tab').eq(1).click({ force: true })
+
+      cy.get('[data-e2e=statement_pages_detail_tabs_time]').within(() => {
+        cy.get('.ms-List-cell').should('have.length', 12)
+      })
+    })
+
+    it('Coprocessor table rows count', () => {
+      cy.get('.ant-tabs-tab').eq(2).click({ force: true })
+
+      cy.get('[data-e2e=statement_pages_detail_tabs_copr]').within(() => {
+        cy.get('.ms-List-cell').should('have.length', 15)
+      })
+    })
+
+    it('Transaction table rows count', () => {
+      cy.get('.ant-tabs-tab').eq(3).click({ force: true })
+
+      cy.get('[data-e2e=statement_pages_detail_tabs_txn]').within(() => {
+        cy.get('.ms-List-cell').should('have.length', 10)
+      })
+    })
+
+    it('Slow query table rows count', () => {
+      cy.get('.ant-tabs-tab').eq(4).click({ force: true })
+
+      cy.get('[data-e2e=detail_tabs_slow_query]').within(() => {
+        cy.get('.ms-List-cell').should('have.length', 0)
+      })
+    })
+  })
+})
diff --git a/ui/cypress/integration/statement/list.compat_spec.js b/ui/cypress/integration/statement/list.compat_spec.js
new file mode 100644
index 0000000000..5969dc2b7c
--- /dev/null
+++ b/ui/cypress/integration/statement/list.compat_spec.js
@@ -0,0 +1,63 @@
+// Copyright 2022 PingCAP, Inc. Licensed under Apache-2.0.
+
+import { skipOn } from '@cypress/skip-test'
+
+describe('Read-only user open statement config setting', () => {
+  skipOn(Cypress.env('FEATURE_VERSION') !== '6.0.0', () => {
+    // Create read only user
+    before(() => {
+      const workloads = [
+        'DROP USER IF EXISTS "readOnlyUser"@"%"',
+        'CREATE USER "readOnlyUser"@"%" IDENTIFIED BY "test";',
+        'GRANT PROCESS, CONFIG ON *.* TO "readOnlyUser"@"%";',
+        'GRANT SHOW DATABASES ON *.* TO "readOnlyUser"@"%";',
+        'GRANT DASHBOARD_CLIENT ON *.* TO "readOnlyUser"@"%";',
+      ]
+
+      workloads.forEach((query) => {
+        cy.task('queryDB', { query })
+      })
+
+      cy.fixture('uri.json').then(function (uri) {
+        this.uri = uri
+      })
+    })
+
+    beforeEach(function () {
+      // login with readOnlyUser
+      cy.visit(this.uri.login)
+      cy.get('[data-e2e=signin_username_input]').clear().type('readOnlyUser')
+      cy.get('[data-e2e="signin_password_input"]').type('test{enter}')
+
+      cy.visit(this.uri.statement)
+      cy.url().should('include', this.uri.statement)
+    })
+
+    it('Unable to modify statement settings', function () {
+      cy.get('[data-e2e=statement_setting]').click({ force: true })
+
+      // switch is disabled
+      cy.get('[data-e2e=statemen_enbale_switcher]').should(
+        'have.class',
+        'ant-switch-disabled'
+      )
+
+      // max size is disabled
+      cy.get('[data-e2e=statement_setting_max_size]').within(() => {
+        cy.get('.ant-slider').should('have.class', 'ant-slider-disabled')
+      })
+
+      // refresh interval is disabled
+      cy.get('[data-e2e=statement_setting_refresh_interval]').within(() => {
+        cy.get('.ant-slider').should('have.class', 'ant-slider-disabled')
+      })
+      // internal query is disabled
+      cy.get('[data-e2e=statement_setting_internal_query]').within(() => {
+        cy.get('.ant-switch').should('have.class', 'ant-switch-disabled')
+      })
+
+      // save button is disableds
+      cy.get('[data-e2e=submit_btn]').should('have.attr', 'disabled')
+    })
+  })
+})
diff --git a/ui/cypress/integration/utils.js b/ui/cypress/integration/utils.js
index cc2e466848..77f47dfceb 100644
--- a/ui/cypress/integration/utils.js
+++ b/ui/cypress/integration/utils.js
@@ -1,3 +1,5 @@
+// Copyright 2022 PingCAP, Inc. Licensed under Apache-2.0.
+
 /**
  * Delete the downloads folder to make sure the test has "clean"
  * slate before starting.
@@ -11,7 +13,7 @@ export const deleteDownloadsFolder = () => {
 /**
  * @param {string[]} list List parsed from CSV file
  */
-export const validateCSVList = (list) => {
+export const validateSlowQueryCSVList = (list) => {
   expect(list).to.have.length(4)
 
   expect(list[0].query).to.equal('SELECT sleep(1.2);')
@@ -20,6 +22,21 @@ export const validateCSVList = (list) => {
   expect(list[3].query).to.equal('SELECT sleep(1);')
 }
 
+export const validateStatementCSVList = (allStatementList) => {
+  const defaultExecStmtList = [
+    'show databases',
+    'select distinct `stmt_type` from `information_schema` . `cluster_statements_summary_history` order by `stmt_type` asc',
+    'select `version` ( )',
+  ]
+
+  const allStatementDigestText = []
+  allStatementList.forEach((stmt) => {
+    allStatementDigestText.push(stmt.digest_text)
+  })
+  console.log('allStatementList', allStatementList, defaultExecStmtList)
+  expect(allStatementList).to.include.members(defaultExecStmtList)
+}
+
 export const restartTiUP = () => {
   // Restart tiup
   cy.exec(
diff --git a/ui/cypress/support/commands.js b/ui/cypress/support/commands.js
index 4e3665adad..0e217058dd 100644
--- a/ui/cypress/support/commands.js
+++ b/ui/cypress/support/commands.js
@@ -19,7 +19,7 @@ Cypress.Commands.add('login', (username, password = '') => {
     () => {
       // root login
       cy.visit('/')
-      cy.get('[data-e2e=signin_submit]').click()
+      cy.get('[data-e2e=signin_submit]').click({ force: true })
 
       // Wait for the post-login redirect to ensure that the
       // session actually exists to be cached
diff --git a/ui/lib/apps/Configuration/index.tsx b/ui/lib/apps/Configuration/index.tsx
index 5d6453a7f1..303e03086c 100644
--- a/ui/lib/apps/Configuration/index.tsx
+++ b/ui/lib/apps/Configuration/index.tsx
@@ -200,7 +200,11 @@ export default function () {
         <Sticky stickyPosition={StickyPositionType.Header} isScrollSynced>
           <div style={{ display: 'flow-root' }}>
             <Card>
-              <Input placeholder="Filter" onChange={handleFilterChange} />
+              <Input
+                placeholder="Filter"
+                onChange={handleFilterChange}
+                data-e2e="search_config"
+              />
             </Card>
           </div>
         </Sticky>
diff --git a/ui/lib/apps/SlowQuery/components/SlowQueriesTable.tsx b/ui/lib/apps/SlowQuery/components/SlowQueriesTable.tsx
index 00cf0e9e21..9e819603bc 100644
--- a/ui/lib/apps/SlowQuery/components/SlowQueriesTable.tsx
+++ b/ui/lib/apps/SlowQuery/components/SlowQueriesTable.tsx
@@ -53,6 +53,7 @@ function SlowQueriesTable({ controller, ...restProps }: Props) {
       onRowClicked={handleRowClick}
       clickedRowIndex={getClickedItemIndex()}
       getKey={getKey}
+      data-e2e="detail_tabs_slow_query"
     />
   )
 }
diff --git a/ui/lib/apps/Statement/pages/Detail/PlanDetailTabs.tsx b/ui/lib/apps/Statement/pages/Detail/PlanDetailTabs.tsx
index e9379db1ed..bea192a4f9 100644
--- a/ui/lib/apps/Statement/pages/Detail/PlanDetailTabs.tsx
+++ b/ui/lib/apps/Statement/pages/Detail/PlanDetailTabs.tsx
@@ -36,6 +36,7 @@ export default function DetailTabs({
             columns={columns}
             items={items}
             extendLastColumn
+            data-e2e="statement_pages_detail_tabs_basic"
           />
         )
       },
@@ -52,6 +53,7 @@ export default function DetailTabs({
             columns={columns}
             items={items}
             extendLastColumn
+            data-e2e="statement_pages_detail_tabs_time"
           />
         )
       },
@@ -70,6 +72,7 @@ export default function DetailTabs({
             columns={columns}
             items={items}
             extendLastColumn
+            data-e2e="statement_pages_detail_tabs_copr"
           />
         )
       },
@@ -86,6 +89,7 @@ export default function DetailTabs({
             columns={columns}
             items={items}
             extendLastColumn
+            data-e2e="statement_pages_detail_tabs_txn"
           />
         )
       },
diff --git a/ui/lib/apps/Statement/pages/Detail/index.tsx b/ui/lib/apps/Statement/pages/Detail/index.tsx
index 484fa76f68..7045036eb6 100644
--- a/ui/lib/apps/Statement/pages/Detail/index.tsx
+++ b/ui/lib/apps/Statement/pages/Detail/index.tsx
@@ -168,6 +168,7 @@ function DetailPage() {
                 style={{
                   display: plans && plans.length > 1 ? 'block' : 'none',
                 }}
+                data-e2e="statement_multiple_execution_plans"
               >
                 <Alert
                   message={t(`statement.pages.detail.desc.plans.note`)}
diff --git a/ui/lib/apps/Statement/pages/List/TimeRangeSelector.tsx b/ui/lib/apps/Statement/pages/List/TimeRangeSelector.tsx
index 157a72efac..174b26df39 100644
--- a/ui/lib/apps/Statement/pages/List/TimeRangeSelector.tsx
+++ b/ui/lib/apps/Statement/pages/List/TimeRangeSelector.tsx
@@ -251,7 +251,7 @@ export default function TimeRangeSelector({
       disabled={timeRanges.length === 0}
       overlay={dropdownContent}
       trigger={['click']}
-      visible={true}
+      visible={dropdownVisible}
       onVisibleChange={setDropdownVisible}
     >
       <Button
diff --git a/ui/lib/apps/Statement/pages/List/index.tsx b/ui/lib/apps/Statement/pages/List/index.tsx
index 54d3571b0c..dcb1071e3f 100644
--- a/ui/lib/apps/Statement/pages/List/index.tsx
+++ b/ui/lib/apps/Statement/pages/List/index.tsx
@@ -94,7 +94,12 @@ export default function StatementsOverview() {
 
   const dropdownMenu = (
     <Menu onClick={menuItemClick}>
-      <Menu.Item key="export" disabled={downloading} icon={<ExportOutlined />}>
+      <Menu.Item
+        key="export"
+        disabled={downloading}
+        icon={<ExportOutlined />}
+        data-e2e="statement_export_btn"
+      >
         {downloading
           ? t('statement.pages.overview.toolbar.exporting')
           : t('statement.pages.overview.toolbar.export')}
@@ -202,7 +207,10 @@ export default function StatementsOverview() {
               />
             </Tooltip>
             <Dropdown overlay={dropdownMenu} placement="bottomRight">
-              <div style={{ cursor: 'pointer' }}>
+              <div
+                style={{ cursor: 'pointer' }}
+                data-e2e="statement_export_menu"
+              >
                 <MenuOutlined />
               </div>
             </Dropdown>
diff --git a/ui/lib/components/Bar/Bar.tsx b/ui/lib/components/Bar/Bar.tsx
index b7338205f7..e51922190c 100644
--- a/ui/lib/components/Bar/Bar.tsx
+++ b/ui/lib/components/Bar/Bar.tsx
@@ -70,7 +70,11 @@ function Bar({
   return (
     <div className={cx(styles.container, className)} {...rest}>
       {children && (
-        <div className={styles.text} style={{ width: textWidth }}>
+        <div
+          className={styles.text}
+          style={{ width: textWidth }}
+          data-e2e="table_bar_value"
+        >
           {children}
         </div>
       )}
diff --git a/ui/lib/components/Expand/index.tsx b/ui/lib/components/Expand/index.tsx
index 853af5ce85..65ac41c2bc 100644
--- a/ui/lib/components/Expand/index.tsx
+++ b/ui/lib/components/Expand/index.tsx
@@ -11,7 +11,7 @@ export interface IExpandProps {
 function Expand({ collapsedContent, children, expanded }: IExpandProps) {
   // FIXME: Animations
   return (
-    <div data-e2e="slow_query_detail_page_query">
+    <div data-e2e="statement_query_detail_page_query">
       {expanded ? children : collapsedContent ?? children}
     </div>
   )

From 321cff882eb3f767876b681e4811a843fadad28a Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Mon, 14 Mar 2022 16:53:44 +0800
Subject: [PATCH 33/41] test statement

---
 .github/workflows/test.yaml                   |   6 +-
 .../integration/login/user_login.spec.js      |   2 +-
 .../integration/slow_query/01-list.spec.js    |  40 +++---
 .../integration/slow_query/02-detail.spec.js  |  10 +-
 .../integration/statement/01-list.spec.js     | 129 +++++++++---------
 .../integration/statement/02-detail.spec.js   | 115 ++++++++++------
 ui/cypress/integration/utils.js               |   3 +-
 ui/cypress/support/commands.js                |   2 +-
 ui/lib/components/CardTable/index.tsx         |   1 +
 9 files changed, 172 insertions(+), 136 deletions(-)

diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
index c6c45b86ba..73a2a6f6cc 100644
--- a/.github/workflows/test.yaml
+++ b/.github/workflows/test.yaml
@@ -3,11 +3,7 @@ name: Test
 on:
   push:
     branches:
-      - master
-  pull_request:
-    branches:
-      - master
-      - release
+      - addE2E_statementListPage
 
 jobs:
   backend_ut:
diff --git a/ui/cypress/integration/login/user_login.spec.js b/ui/cypress/integration/login/user_login.spec.js
index 0250bf22ac..023499c5aa 100644
--- a/ui/cypress/integration/login/user_login.spec.js
+++ b/ui/cypress/integration/login/user_login.spec.js
@@ -17,7 +17,7 @@ describe('Root User Login', () => {
 
   it('root login with no pwd', function () {
     cy.get('[data-e2e=signin_username_input]').should('have.value', 'root')
-    cy.get('[data-e2e=signin_submit]').click({ force: true })
+    cy.get('[data-e2e=signin_submit]').click()
     cy.url().should('include', this.uri.overview)
   })
 
diff --git a/ui/cypress/integration/slow_query/01-list.spec.js b/ui/cypress/integration/slow_query/01-list.spec.js
index 015d19a80b..c96ed3410e 100644
--- a/ui/cypress/integration/slow_query/01-list.spec.js
+++ b/ui/cypress/integration/slow_query/01-list.spec.js
@@ -131,9 +131,9 @@ describe('SlowQuery list page', () => {
       describe('Check slow query', () => {
         it('Check slow query in the 1st 5 seconds time range', () => {
           cy.get('[data-e2e=timerange-selector]')
-            .click({ force: true })
+            .click()
             .then(() => {
-              cy.get('.ant-picker-range').click({ force: true })
+              cy.get('.ant-picker-range').click()
               cy.get('.ant-picker-input-active').type(
                 `${firstQueryTimeRangeStart}{leftarrow}{leftarrow}{backspace}{enter}`
               )
@@ -150,9 +150,9 @@ describe('SlowQuery list page', () => {
 
         it('Check slow query in the 2nd 5 seconds time range', () => {
           cy.get('[data-e2e=timerange-selector]')
-            .click({ force: true })
+            .click()
             .then(() => {
-              cy.get('.ant-picker-range').click({ force: true })
+              cy.get('.ant-picker-range').click()
               cy.get('.ant-picker-input-active').type(
                 `${secondQueryTimeRangeStart}{leftarrow}{leftarrow}{backspace}{enter}`
               )
@@ -167,9 +167,9 @@ describe('SlowQuery list page', () => {
 
         it('Check slow query in the 3rd 5 seconds time range', () => {
           cy.get('[data-e2e=timerange-selector]')
-            .click({ force: true })
+            .click()
             .then(() => {
-              cy.get('.ant-picker-range').click({ force: true })
+              cy.get('.ant-picker-range').click()
               cy.get('.ant-picker-input-active').type(
                 `${thirdQueryTimeRangeStart}{leftarrow}{leftarrow}{backspace}{enter}`
               )
@@ -186,9 +186,9 @@ describe('SlowQuery list page', () => {
 
         it('Check slow query in the latest 15 seconds time range', () => {
           cy.get('[data-e2e=timerange-selector]')
-            .click({ force: true })
+            .click()
             .then(() => {
-              cy.get('.ant-picker-range').click({ force: true })
+              cy.get('.ant-picker-range').click()
               cy.get('.ant-picker-input-active').type(
                 `${firstQueryTimeRangeStart}{leftarrow}{leftarrow}{backspace}{enter}`
               )
@@ -235,10 +235,10 @@ describe('SlowQuery list page', () => {
         cy.get('[data-automation-key=query]').should('has.length', 3)
 
         cy.get('[data-e2e=base_select_input_text]')
-          .click({ force: true })
+          .click()
           .then(() => {
             cy.get('.ms-DetailsHeader-checkTooltip')
-              .click({ force: true })
+              .click()
               .then(() => {
                 // global query will not be listed
                 cy.get('[data-automation-key=query]').should('has.length', 2)
@@ -285,7 +285,7 @@ describe('SlowQuery list page', () => {
 
       it('Check limit options', () => {
         cy.get('[data-e2e=slow_query_limit_select]')
-          .click({ force: true })
+          .click()
           .then(() => {
             cy.get('[data-e2e=slow_query_limit_option]')
               .should('have.length', 4)
@@ -297,11 +297,11 @@ describe('SlowQuery list page', () => {
 
       it('Check config remembered', () => {
         cy.get('[data-e2e=slow_query_limit_select]')
-          .click({ force: true })
+          .click()
           .then(() => {
             cy.get('[data-e2e=slow_query_limit_option]')
               .eq(1)
-              .click({ force: true })
+              .click()
               .then(() => {
                 cy.reload()
                 cy.get('[data-e2e=slow_query_limit_select]').contains('200')
@@ -367,7 +367,7 @@ describe('SlowQuery list page', () => {
           .trigger('mouseover')
           .then(() => {
             cy.get('[data-e2e=column_selector_reset]')
-              .click({ force: true })
+              .click()
               .then(() => {
                 cy.get('[role=columnheader]')
                   .not('.is-empty')
@@ -446,7 +446,7 @@ describe('SlowQuery list page', () => {
       cy.wait(1000)
 
       cy.get('[data-e2e=slow_query_refresh]')
-        .click({ force: true })
+        .click()
         .then(() => {
           cy.get('[data-automation-key=query]').should('have.length', 4)
         })
@@ -476,7 +476,7 @@ describe('SlowQuery list page', () => {
 
       cy.get('[data-item-key=timestamp]')
         .should('be.visible')
-        .click({ force: true })
+        .click()
         .then(() => {
           cy.get('[data-automation-key=query]').each(($query, $idx) => {
             cy.wrap($query).should('have.text', AscOrderByTimestamp[$idx])
@@ -494,7 +494,7 @@ describe('SlowQuery list page', () => {
 
       cy.get('[data-item-key=query_time]')
         .should('be.visible')
-        .click({ force: true })
+        .click()
         .then(() => {
           // Desc order by Latency
           cy.get('[data-automation-key=query]').each(($query, $idx) => {
@@ -512,7 +512,7 @@ describe('SlowQuery list page', () => {
           // Asc order by Latency
           cy.get('[data-item-key=query_time]')
             .should('be.visible')
-            .click({ force: true })
+            .click()
             .then(() => {
               cy.get('[data-automation-key=query]').each(($query, $idx) => {
                 cy.wrap($query).should('have.text', AscOrderByLatency[$idx])
@@ -526,7 +526,7 @@ describe('SlowQuery list page', () => {
     it('Click first slow query and go to detail page', function () {
       cy.get('[data-automationid=ListCell]')
         .eq(0)
-        .click({ force: true })
+        .click()
         .then(() => {
           cy.url().should('include', `${this.uri.slow_query}/detail`)
           cy.get('[data-e2e=syntax_highlighter_compact]').should(
@@ -562,7 +562,7 @@ describe('SlowQuery list page', () => {
                 `${Cypress.env('apiBasePath')}slow_query/download?token=*`
               ).as('download_slow_query')
 
-              cy.get('[data-e2e=slow_query_export_btn]').click({ force: true })
+              cy.get('[data-e2e=slow_query_export_btn]').click()
             })
         })
         .then(() => {
diff --git a/ui/cypress/integration/slow_query/02-detail.spec.js b/ui/cypress/integration/slow_query/02-detail.spec.js
index 15f17b71fe..f1afd51eda 100644
--- a/ui/cypress/integration/slow_query/02-detail.spec.js
+++ b/ui/cypress/integration/slow_query/02-detail.spec.js
@@ -13,7 +13,7 @@ describe('Slow query detail page E2E test', () => {
       'slow_query_detail'
     )
 
-    cy.get('[data-automation-key=query]').eq(0).click({ force: true })
+    cy.get('[data-automation-key=query]').eq(0).click()
   })
 
   describe('Query descriptions', () => {
@@ -28,7 +28,7 @@ describe('Slow query detail page E2E test', () => {
 
     it('Expand sql', () => {
       // expand sql
-      cy.get('[data-e2e=expandText]').eq(0).click({ force: true })
+      cy.get('[data-e2e=expandText]').eq(0).click()
 
       // sql is collapsed by default
       cy.get('[data-e2e=collapseText]').eq(0).should('have.text', 'Collapse')
@@ -104,17 +104,17 @@ describe('Slow query detail page E2E test', () => {
     })
 
     it('Time table rows count', () => {
-      cy.get('.ant-tabs-tab').eq(1).click({ force: true })
+      cy.get('.ant-tabs-tab').eq(1).click()
       cy.get('.ms-List-cell').should('have.length', 21)
     })
 
     it('Coprocessor table rows count', () => {
-      cy.get('.ant-tabs-tab').eq(2).click({ force: true })
+      cy.get('.ant-tabs-tab').eq(2).click()
       cy.get('.ms-List-cell').should('have.length', 10)
     })
 
     it('Transaction table rows count', () => {
-      cy.get('.ant-tabs-tab').eq(3).click({ force: true })
+      cy.get('.ant-tabs-tab').eq(3).click()
       cy.get('.ms-List-cell').should('have.length', 5)
     })
   })
diff --git a/ui/cypress/integration/statement/01-list.spec.js b/ui/cypress/integration/statement/01-list.spec.js
index ee787c0c0f..d4b97c076e 100644
--- a/ui/cypress/integration/statement/01-list.spec.js
+++ b/ui/cypress/integration/statement/01-list.spec.js
@@ -21,7 +21,7 @@ describe('SQL statements list page', () => {
       this.uri = uri
     })
 
-    // restartTiUP()
+    restartTiUP()
 
     deleteDownloadsFolder()
   })
@@ -163,7 +163,7 @@ describe('SQL statements list page', () => {
 
       it('Common time range options', () => {
         cy.get('[data-e2e=statement_timerange_selector]')
-          .click({ force: true })
+          .click()
           .then(() => {
             cy.get('[data-e2e=statement_time_range_option]')
               .should('have.length', 12)
@@ -191,7 +191,7 @@ describe('SQL statements list page', () => {
       it('Custom time range selector', () => {
         const [startTime, endTime] = getNearTime()
         cy.get('[data-e2e=statement_timerange_selector]')
-          .click({ force: true })
+          .click()
           .then(() => {
             cy.get('.ant-slider').within(() => {
               cy.get('[role=slider]')
@@ -222,11 +222,9 @@ describe('SQL statements list page', () => {
       it('Select time range as recent 15 mins', () => {
         // select recent 15 mins
         cy.get('[data-e2e=statement_timerange_selector]')
-          .click({ force: true })
+          .click()
           .then(() => {
-            cy.get('[data-e2e=statement_time_range_option]')
-              .eq(0)
-              .click({ force: true })
+            cy.get('[data-e2e=statement_time_range_option]').eq(0).click()
           })
 
         cy.wait('@statements_list_with_last_seen_field').then((res) => {
@@ -291,10 +289,10 @@ describe('SQL statements list page', () => {
       cy.wait('@databases').then(() => {
         cy.get('[data-e2e=base_selector]')
           .eq(0)
-          .click({ force: true })
+          .click()
           .then(() => {
             cy.get('.ant-dropdown').within(() => {
-              cy.get('.ant-checkbox-input').eq(3).click({ force: true })
+              cy.get('.ant-checkbox-input').eq(3).click()
             })
           })
           .then(() => {
@@ -348,7 +346,7 @@ describe('SQL statements list page', () => {
       })
     })
 
-    it('Filter statements with one kind checked', () => {
+    it('Filter statements with one kind checked (select)', () => {
       cy.intercept(`${Cypress.env('apiBasePath')}statements/stmt_types`).as(
         'stmt_types'
       )
@@ -356,10 +354,12 @@ describe('SQL statements list page', () => {
       cy.wait('@stmt_types').then(() => {
         cy.get('[data-e2e=base_selector]')
           .eq(1)
-          .click({ force: true })
+          .click()
           .then(() => {
             cy.get('.ant-dropdown').within(() => {
-              cy.get('.ant-checkbox-input').eq(2).click({ force: true })
+              cy.get('[data-e2e=multi_select_options]')
+                .contains('Select')
+                .click({ force: true })
             })
           })
           .then(() => {
@@ -457,7 +457,7 @@ describe('SQL statements list page', () => {
         .trigger('mouseover')
         .then(() => {
           cy.get('[data-e2e=column_selector_title]')
-            .check({ force: true })
+            .check()
             .then(() => {
               cy.get('[role=columnheader]')
                 .not('.is-empty')
@@ -471,7 +471,7 @@ describe('SQL statements list page', () => {
         .trigger('mouseover')
         .then(() => {
           cy.get('[data-e2e=column_selector_reset]')
-            .click({ force: true })
+            .click()
             .then(() => {
               cy.get('[role=columnheader]')
                 .not('.is-empty')
@@ -488,7 +488,7 @@ describe('SQL statements list page', () => {
             .within(() => {
               cy.get(
                 '[data-e2e=columns_selector_field_sum_cop_task_num]'
-              ).check({ force: true })
+              ).check()
             })
             .then(() => {
               cy.get('[data-item-key=sum_cop_task_num]').should(
@@ -507,7 +507,7 @@ describe('SQL statements list page', () => {
             .within(() => {
               cy.get(
                 '[data-e2e=columns_selector_field_sum_cop_task_num]'
-              ).uncheck({ force: true })
+              ).uncheck()
             })
             .then(() => {
               cy.get('[data-item-key=sum_cop_task_num]').should('not.exist')
@@ -520,7 +520,7 @@ describe('SQL statements list page', () => {
         .trigger('mouseover')
         .then(() => {
           cy.get('[data-e2e=statement_show_full_sql]')
-            .check({ force: true })
+            .check()
             .then(() => {
               cy.get('[data-automation-key=digest_text]')
                 .eq(0)
@@ -528,7 +528,7 @@ describe('SQL statements list page', () => {
             })
 
           cy.get('[data-e2e=statement_show_full_sql]')
-            .uncheck({ force: true })
+            .uncheck()
             .then(() => {
               cy.get('[data-automation-key=digest_text]')
                 .eq(0)
@@ -552,7 +552,7 @@ describe('SQL statements list page', () => {
       )
       cy.wait('@statements_list').then(() => {
         cy.get('[data-e2e=statement_refresh]')
-          .click({ force: true })
+          .click()
           .then(() => {
             cy.get('[data-automation-key=digest_text]').contains(
               'SELECT count (?) FROM tidb;'
@@ -574,10 +574,10 @@ describe('SQL statements list page', () => {
     it('Close setting panel', () => {
       // close panel by clicking mask
       cy.get('[data-e2e=statement_setting]')
-        .click({ force: true })
+        .click()
         .then(() => {
           cy.get('.ant-drawer-mask')
-            .click({ force: true })
+            .click()
             .then(() => {
               cy.get('.ant-drawer-content').should('not.be.visible')
             })
@@ -585,10 +585,10 @@ describe('SQL statements list page', () => {
 
       // close panel by clicking close icon
       cy.get('[data-e2e=statement_setting]')
-        .click({ force: true })
+        .click()
         .then(() => {
           cy.get('.ant-drawer-close')
-            .click({ force: true })
+            .click()
             .then(() => {
               cy.get('.ant-drawer-content').should('not.be.visible')
             })
@@ -597,22 +597,20 @@ describe('SQL statements list page', () => {
 
     const siwtchStatement = (isEnabled) => {
       cy.get('[data-e2e=statement_setting]')
-        .click({ force: true })
+        .click()
         .then(() => {
           cy.get('.ant-drawer-content').should('exist')
           cy.get('[data-e2e=statemen_enbale_switcher]')
             // the current of switcher is isEnabled
             .should('have.attr', 'aria-checked', isEnabled)
-            .click({ force: true })
-          cy.get('[data-e2e=submit_btn]').click({ force: true })
+            .click()
+          cy.get('[data-e2e=submit_btn]').click()
         })
     }
 
     it('Disable statement feature', () => {
       siwtchStatement('true')
-      cy.get('.ant-modal-confirm-btns')
-        .find('.ant-btn-dangerous')
-        .click({ force: true })
+      cy.get('.ant-modal-confirm-btns').find('.ant-btn-dangerous').click()
       cy.get('[data-e2e=statements_table]').should('not.exist')
     })
 
@@ -623,7 +621,7 @@ describe('SQL statements list page', () => {
 
     describe('Default statement setting', () => {
       beforeEach(() => {
-        cy.get('[data-e2e=statement_setting]').click({ force: true })
+        cy.get('[data-e2e=statement_setting]').click()
 
         // get refresh_interval value
         cy.get(`[data-e2e=statement_setting_refresh_interval]`).within(() => {
@@ -688,7 +686,7 @@ describe('SQL statements list page', () => {
 
     describe('Update statement setting', function () {
       beforeEach(function () {
-        cy.get('[data-e2e=statement_setting]').click({ force: true })
+        cy.get('[data-e2e=statement_setting]').click()
       })
 
       it('Update window size and number of windows', function () {
@@ -697,7 +695,7 @@ describe('SQL statements list page', () => {
           cy.get('.ant-slider-step')
             .find('.ant-slider-dot')
             .eq(2)
-            .click({ force: true })
+            .click()
             .then(() => {
               cy.get('.ant-slider-handle')
                 .invoke('attr', 'aria-valuenow')
@@ -710,7 +708,7 @@ describe('SQL statements list page', () => {
           cy.get('.ant-slider-step')
             .find('.ant-slider-dot')
             .eq(1)
-            .click({ force: true })
+            .click()
             .then(() => {
               cy.get('.ant-slider-handle')
                 .invoke('attr', 'aria-valuenow')
@@ -736,7 +734,7 @@ describe('SQL statements list page', () => {
               'POST',
               `${Cypress.env('apiBasePath')}statements/config`
             ).as('update_config')
-            cy.get('[data-e2e=submit_btn]').click({ force: true })
+            cy.get('[data-e2e=submit_btn]').click()
 
             cy.wait('@update_config').then(() => {
               // check configuration whether come to effect or not
@@ -767,32 +765,6 @@ describe('SQL statements list page', () => {
         })
       })
 
-      it('Get config list bad request', () => {
-        const staticResponse = {
-          statusCode: 400,
-          body: {
-            code: 'common.bad_request',
-            error: true,
-            message: 'common.bad_request',
-          },
-        }
-
-        // stub out a response body
-        cy.intercept(
-          `${Cypress.env('apiBasePath')}statements/config`,
-          staticResponse
-        ).as('statements_config')
-        cy.wait('@statements_config').then(() => {
-          // get error alert on panel
-          cy.get('.ant-drawer-body').within(() => {
-            cy.get('[data-e2e=alert_error_bar]').should(
-              'has.text',
-              staticResponse.body.message
-            )
-          })
-        })
-      })
-
       it('Failed to save config list', () => {
         const staticResponse = {
           statusCode: 400,
@@ -809,7 +781,7 @@ describe('SQL statements list page', () => {
           `${Cypress.env('apiBasePath')}statements/config`,
           staticResponse
         ).as('statements_config')
-        cy.get('[data-e2e=submit_btn]').click({ force: true })
+        cy.get('[data-e2e=submit_btn]').click()
         cy.wait('@statements_config').then(() => {
           // get error notifitcation on modal
           cy.get('.ant-modal-confirm-content').should(
@@ -821,6 +793,39 @@ describe('SQL statements list page', () => {
     })
   })
 
+  describe('Simulate bad request', () => {
+    beforeEach(() => {
+      const staticResponse = {
+        statusCode: 400,
+        body: {
+          code: 'common.bad_request',
+          error: true,
+          message: 'common.bad_request',
+        },
+      }
+
+      // stub out a response body
+      cy.intercept(
+        `${Cypress.env('apiBasePath')}statements/config`,
+        staticResponse
+      ).as('failed_to_get_statements_config')
+
+      cy.get('[data-e2e=statement_setting]').click()
+    })
+
+    it('Get config list bad request', () => {
+      cy.wait('@failed_to_get_statements_config').then(() => {
+        // get error alert on panel
+        cy.get('.ant-drawer-body').within(() => {
+          cy.get('[data-e2e=alert_error_bar]').should(
+            'has.text',
+            'common.bad_request'
+          )
+        })
+      })
+    })
+  })
+
   describe('Export statement CSV ', () => {
     it('validate CSV File', () => {
       const downloadsFolder = Cypress.config('downloadsFolder')
@@ -843,7 +848,7 @@ describe('SQL statements list page', () => {
                 `${Cypress.env('apiBasePath')}statements/download?token=*`
               ).as('download_statement')
 
-              cy.get('[data-e2e=statement_export_btn]').click({ force: true })
+              cy.get('[data-e2e=statement_export_btn]').click()
             })
         })
         .then(() => {
diff --git a/ui/cypress/integration/statement/02-detail.spec.js b/ui/cypress/integration/statement/02-detail.spec.js
index e74540b994..9fee4bffdd 100644
--- a/ui/cypress/integration/statement/02-detail.spec.js
+++ b/ui/cypress/integration/statement/02-detail.spec.js
@@ -20,14 +20,16 @@ describe('Statement detail page E2E test', () => {
     cy.login('root')
     cy.visit(this.uri.statement)
     cy.url().should('include', this.uri.statement)
-    cy.intercept(`${Cypress.env('apiBasePath')}statement/detail?*`).as(
-      'statement_detail'
+
+    cy.intercept(
+      `${Cypress.env('apiBasePath')}statements/plans?begin_time=*`
+    ).as('statements_plans')
+
+    cy.intercept(`${Cypress.env('apiBasePath')}statements/plan/detail?*`).as(
+      'statements_plan_detail'
     )
 
-    cy.get('[data-automation-key=plan_count]')
-      .contains(2)
-      .eq(0)
-      .click({ force: true })
+    cy.get('[data-automation-key=plan_count]').contains(2).eq(0).click()
   })
 
   describe('Statement Template', () => {
@@ -42,7 +44,7 @@ describe('Statement detail page E2E test', () => {
 
     it('Expand sql', () => {
       // expand sql
-      cy.get('[data-e2e=expandText]').eq(0).click({ force: true })
+      cy.get('[data-e2e=expandText]').eq(0).click()
 
       // sql is collapsed by default
       cy.get('[data-e2e=collapseText]').eq(0).should('have.text', 'Collapse')
@@ -89,25 +91,48 @@ describe('Statement detail page E2E test', () => {
 
   describe('Query Template', () => {
     it('Check sql and default format', () => {
-      // sql is collapsed by default
-      cy.get('[data-e2e=expandText]').eq(1).should('have.text', 'Expand')
-
-      cy.wait('@statement_detail').then((res) => {
-        const responseBody = res.response.body
-        cy.get('[data-e2e=statement_query_detail_page_query]')
-          .eq(1)
-          .and('have.text', responseBody.digest)
+      cy.wait('@statements_plan_detail').then((res) => {
+        const response = res.response.body
+        cy.get('.ant-descriptions-row')
+          .eq(3)
+          .within(() => {
+            cy.get('.ant-descriptions-item')
+              .eq(0)
+              .and('have.text', response.digest)
+          })
       })
     })
   })
 
   describe('Plans', () => {
+    beforeEach(() => {})
     it('Has multiple execution plans', () => {
-      cy.get('[data-e2e=statement_multiple_execution_plans]')
-        .should('be.visible')
-        .within(() => {
-          cy.get('[data-automationid=ListCell]').should('have.length', 2)
-        })
+      cy.wait('@statements_plans').then((res) => {
+        const response = res.response.body
+        const plansDigest = []
+
+        response.forEach((plan) => plansDigest.push(plan.plan_digest))
+
+        cy.get('[data-e2e=statement_multiple_execution_plans]')
+          .should('be.visible')
+          .within(() => {
+            // check digest of each plan
+            cy.get('[data-automation-key=plan_digest]')
+              .should('have.length', 2)
+              .then(($plans) => {
+                return Cypress.$.makeArray($plans).map((plan) => plan.innerText)
+              })
+              .should('to.deep.equal', plansDigest)
+
+            // all plans are checked
+            cy.get('.ms-DetailsList-headerWrapper').within(() => {
+              cy.get('.ant-checkbox').should(
+                'have.class',
+                'ant-checkbox-checked'
+              )
+            })
+          })
+      })
     })
   })
 
@@ -116,7 +141,7 @@ describe('Statement detail page E2E test', () => {
       const tabList = [
         'Basic',
         'Time',
-        'Coprocessor',
+        'Coprocessor Read',
         'Transaction',
         'Slow Query',
       ]
@@ -131,41 +156,51 @@ describe('Statement detail page E2E test', () => {
 
   describe('Detail table tabs', () => {
     it('Basic table rows count', () => {
-      cy.get('[data-e2e=statement_pages_detail_tabs_basic]').within(() => {
-        cy.get('.ms-List-cell').should('have.length', 13)
-      })
+      cy.get('[data-e2e=memo_details_list]')
+        .eq(1)
+        .within(() => {
+          cy.get('.ms-List-cell').should('have.length', 13)
+        })
     })
 
     it('Time table rows count', () => {
-      cy.get('.ant-tabs-tab').eq(1).click({ force: true })
+      cy.get('.ant-tabs-tab').eq(1).click()
 
-      cy.get('[data-e2e=statement_pages_detail_tabs_time]').within(() => {
-        cy.get('.ms-List-cell').should('have.length', 12)
-      })
+      cy.get('[data-e2e=memo_details_list]')
+        .eq(1)
+        .within(() => {
+          cy.get('.ms-List-cell').should('have.length', 12)
+        })
     })
 
     it('Coprocessor table rows count', () => {
-      cy.get('.ant-tabs-tab').eq(2).click({ force: true })
+      cy.get('.ant-tabs-tab').eq(2).click()
 
-      cy.get('[data-e2e=statement_pages_detail_tabs_copr]').within(() => {
-        cy.get('.ms-List-cell').should('have.length', 15)
-      })
+      cy.get('[data-e2e=memo_details_list]')
+        .eq(1)
+        .within(() => {
+          cy.get('.ms-List-cell').should('have.length', 15)
+        })
     })
 
     it('Transaction table rows count', () => {
-      cy.get('.ant-tabs-tab').eq(3).click({ force: true })
+      cy.get('.ant-tabs-tab').eq(3).click()
 
-      cy.get('[data-e2e=statement_pages_detail_tabs_txn]').within(() => {
-        cy.get('.ms-List-cell').should('have.length', 10)
-      })
+      cy.get('[data-e2e=memo_details_list]')
+        .eq(1)
+        .within(() => {
+          cy.get('.ms-List-cell').should('have.length', 10)
+        })
     })
 
     it('Slow query table rows count', () => {
-      cy.get('.ant-tabs-tab').eq(4).click({ force: true })
+      cy.get('.ant-tabs-tab').eq(4).click()
 
-      cy.get('[data-e2e=detail_tabs_slow_query]').within(() => {
-        cy.get('.ms-List-cell').should('have.length', 0)
-      })
+      cy.get('[data-e2e=memo_details_list]')
+        .eq(1)
+        .within(() => {
+          cy.get('.ms-List-cell').should('have.length', 0)
+        })
     })
   })
 })
diff --git a/ui/cypress/integration/utils.js b/ui/cypress/integration/utils.js
index 77f47dfceb..86366f9e32 100644
--- a/ui/cypress/integration/utils.js
+++ b/ui/cypress/integration/utils.js
@@ -33,8 +33,7 @@ export const validateStatementCSVList = (allStatementList) => {
   allStatementList.forEach((stmt) => {
     allStatementDigestText.push(stmt.digest_text)
   })
-  console.log('allStatementList', allStatementList, defaultExecStmtList)
-  expect(allStatementList).to.include.members(defaultExecStmtList)
+  expect(allStatementDigestText).to.include.members(defaultExecStmtList)
 }
 
 export const restartTiUP = () => {
diff --git a/ui/cypress/support/commands.js b/ui/cypress/support/commands.js
index 0e217058dd..4e3665adad 100644
--- a/ui/cypress/support/commands.js
+++ b/ui/cypress/support/commands.js
@@ -19,7 +19,7 @@ Cypress.Commands.add('login', (username, password = '') => {
     () => {
       // root login
       cy.visit('/')
-      cy.get('[data-e2e=signin_submit]').click({ force: true })
+      cy.get('[data-e2e=signin_submit]').click()
 
       // Wait for the post-login redirect to ensure that the
       // session actually exists to be cached
diff --git a/ui/lib/components/CardTable/index.tsx b/ui/lib/components/CardTable/index.tsx
index 735770eb89..5ff7698559 100644
--- a/ui/lib/components/CardTable/index.tsx
+++ b/ui/lib/components/CardTable/index.tsx
@@ -245,6 +245,7 @@ export default function CardTable(props: ICardTableProps) {
       noMarginTop={cardNoMarginTop}
       noMarginBottom={cardNoMarginBottom}
       extra={cardExtra}
+      data-e2e="memo_details_list"
     >
       <ErrorBar errors={errors} />
       <AnimatedSkeleton

From fd6d9e35afe77b520cd151982b1d2232f14851bf Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Mon, 14 Mar 2022 19:29:40 +0800
Subject: [PATCH 34/41] test statement

---
 ui/cypress/integration/slow_query/01-list.spec.js |  4 ++--
 ui/cypress/integration/statement/01-list.spec.js  | 14 +++++++++-----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/ui/cypress/integration/slow_query/01-list.spec.js b/ui/cypress/integration/slow_query/01-list.spec.js
index c96ed3410e..9a24a6ffea 100644
--- a/ui/cypress/integration/slow_query/01-list.spec.js
+++ b/ui/cypress/integration/slow_query/01-list.spec.js
@@ -235,10 +235,10 @@ describe('SlowQuery list page', () => {
         cy.get('[data-automation-key=query]').should('has.length', 3)
 
         cy.get('[data-e2e=base_select_input_text]')
-          .click()
+          .click({ force: true })
           .then(() => {
             cy.get('.ms-DetailsHeader-checkTooltip')
-              .click()
+              .click({ force: true })
               .then(() => {
                 // global query will not be listed
                 cy.get('[data-automation-key=query]').should('has.length', 2)
diff --git a/ui/cypress/integration/statement/01-list.spec.js b/ui/cypress/integration/statement/01-list.spec.js
index d4b97c076e..601b71f00f 100644
--- a/ui/cypress/integration/statement/01-list.spec.js
+++ b/ui/cypress/integration/statement/01-list.spec.js
@@ -384,16 +384,20 @@ describe('SQL statements list page', () => {
       cy.get('[data-e2e=sql_statements_search]').type(' SELECT version{enter}')
 
       cy.wait('@statements_list').then(() => {
-        cy.get('[data-e2e=syntax_highlighter_compact]').should('has.length', 1)
+        cy.get('[data-e2e=syntax_highlighter_compact]').each(($stmt) => {
+          cy.wrap($stmt).contains('SELECT')
+        })
       })
 
       // check search text remembered after reload page
       cy.reload()
-      cy.get('[data-e2e=sql_statements_search]').contains('SELECT version')
+      cy.get('[data-e2e=syntax_highlighter_compact]').each(($stmt) => {
+        cy.wrap($stmt).contains('SELECT')
+      })
     })
 
     it('Type search without pressing enter then reload', () => {
-      cy.get('[data-e2e=sql_statements_search]').type('SELECT version')
+      cy.get('[data-e2e=sql_statements_search]').type('SELECT \\`version\\` ()')
 
       cy.reload()
       cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
@@ -517,7 +521,7 @@ describe('SQL statements list page', () => {
 
     it('Check SHOW_FULL_QUERY_TEXT', () => {
       cy.get('[data-e2e=columns_selector_popover]')
-        .trigger('mouseover')
+        .trigger('mouseover', { force: true })
         .then(() => {
           cy.get('[data-e2e=statement_show_full_sql]')
             .check()
@@ -532,7 +536,7 @@ describe('SQL statements list page', () => {
             .then(() => {
               cy.get('[data-automation-key=digest_text]')
                 .eq(0)
-                .trigger('mouseover')
+                .trigger('mouseover', { force: true })
                 .find('[data-e2e=syntax_highlighter_compact]')
             })
         })

From 7b4c0465d16c995faf6ad8d0ca8e5cb33091ab1c Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Mon, 14 Mar 2022 20:19:19 +0800
Subject: [PATCH 35/41] update statement

---
 .github/workflows/test.yaml             |   6 +-
 ui/cypress/fixtures/statement_plan.json | 236 ------------------------
 2 files changed, 5 insertions(+), 237 deletions(-)
 delete mode 100644 ui/cypress/fixtures/statement_plan.json

diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
index 73a2a6f6cc..c6c45b86ba 100644
--- a/.github/workflows/test.yaml
+++ b/.github/workflows/test.yaml
@@ -3,7 +3,11 @@ name: Test
 on:
   push:
     branches:
-      - addE2E_statementListPage
+      - master
+  pull_request:
+    branches:
+      - master
+      - release
 
 jobs:
   backend_ut:
diff --git a/ui/cypress/fixtures/statement_plan.json b/ui/cypress/fixtures/statement_plan.json
deleted file mode 100644
index f1cc46ed62..0000000000
--- a/ui/cypress/fixtures/statement_plan.json
+++ /dev/null
@@ -1,236 +0,0 @@
-[
-  {
-    "digest_text": "select `a` . * , `b` . * from ( select `id` , `name` , `xs_apis_id` , `state` , `pay_url` from `g86_pay_xs_items_v2` where `state` = ? and `xs_apis_id` in ( ... ) and `id` in ( ... ) ) as `a` inner join ( select `remarks` , `items_id` , `xs_products_id` , `qt_show_money` , `ismore_money` , `paymax` , `paymin` , `qt_show_type` from `g86_pay_xs_items_infos_v2` where `state` = ? and `xs_products_id` in ( ... ) and `xs_apis_id` in ( ... ) ) as `b` on `a` . `id` = `b` . `items_id`",
-    "digest": "da07d22de3d0d0c66404871c1d70df65c43404a6fa9446414dab8627ddd5989f",
-    "exec_count": 6,
-    "sum_errors": 0,
-    "sum_warnings": 0,
-    "sum_latency": 42684153,
-    "max_latency": 9764098,
-    "min_latency": 5538661,
-    "avg_latency": 7114026,
-    "avg_parse_latency": 0,
-    "max_parse_latency": 0,
-    "avg_compile_latency": 0,
-    "max_compile_latency": 0,
-    "sum_cop_task_num": 0,
-    "avg_cop_process_time": 0,
-    "max_cop_process_time": 0,
-    "avg_cop_wait_time": 0,
-    "max_cop_wait_time": 0,
-    "avg_process_time": 0,
-    "max_process_time": 0,
-    "avg_wait_time": 0,
-    "max_wait_time": 0,
-    "avg_backoff_time": 0,
-    "max_backoff_time": 0,
-    "avg_total_keys": 0,
-    "max_total_keys": 0,
-    "avg_processed_keys": 0,
-    "max_processed_keys": 0,
-    "avg_prewrite_time": 0,
-    "max_prewrite_time": 0,
-    "avg_commit_time": 0,
-    "max_commit_time": 0,
-    "avg_get_commit_ts_time": 0,
-    "max_get_commit_ts_time": 0,
-    "avg_commit_backoff_time": 0,
-    "max_commit_backoff_time": 0,
-    "avg_resolve_lock_time": 0,
-    "max_resolve_lock_time": 0,
-    "avg_local_latch_wait_time": 0,
-    "max_local_latch_wait_time": 0,
-    "avg_write_keys": 0,
-    "max_write_keys": 0,
-    "avg_write_size": 0,
-    "max_write_size": 0,
-    "avg_prewrite_regions": 0,
-    "max_prewrite_regions": 0,
-    "avg_txn_retry": 0,
-    "max_txn_retry": 0,
-    "sum_backoff_times": 0,
-    "avg_mem": 236416,
-    "max_mem": 236416,
-    "avg_disk": 0,
-    "max_disk": 0,
-    "avg_affected_rows": 0,
-    "first_seen": 0,
-    "last_seen": 0,
-    "sample_user": "",
-    "query_sample_text": "",
-    "prev_sample_text": "",
-    "schema_name": "gcb3",
-    "table_names": "",
-    "index_names": "",
-    "plan_count": 0,
-    "plan": "",
-    "plan_digest": "7ed5ddc5a935eab21c4b3a75c6b752e924d625854094dc3ab07140702485d26b",
-    "max_rocksdb_delete_skipped_count": 0,
-    "avg_rocksdb_delete_skipped_count": 0,
-    "max_rocksdb_key_skipped_count": 0,
-    "avg_rocksdb_key_skipped_count": 0,
-    "max_rocksdb_block_cache_hit_count": 0,
-    "avg_rocksdb_block_cache_hit_count": 0,
-    "max_rocksdb_block_read_count": 0,
-    "avg_rocksdb_block_read_count": 0,
-    "max_rocksdb_block_read_byte": 0,
-    "avg_rocksdb_block_read_byte": 0,
-    "related_schemas": ""
-  },
-  {
-    "digest_text": "select `a` . * , `b` . * from ( select `id` , `name` , `xs_apis_id` , `state` , `pay_url` from `g86_pay_xs_items_v2` where `state` = ? and `xs_apis_id` in ( ... ) and `id` in ( ... ) ) as `a` inner join ( select `remarks` , `items_id` , `xs_products_id` , `qt_show_money` , `ismore_money` , `paymax` , `paymin` , `qt_show_type` from `g86_pay_xs_items_infos_v2` where `state` = ? and `xs_products_id` in ( ... ) and `xs_apis_id` in ( ... ) ) as `b` on `a` . `id` = `b` . `items_id`",
-    "digest": "da07d22de3d0d0c66404871c1d70df65c43404a6fa9446414dab8627ddd5989f",
-    "exec_count": 4,
-    "sum_errors": 0,
-    "sum_warnings": 0,
-    "sum_latency": 24578694,
-    "max_latency": 6865353,
-    "min_latency": 5403643,
-    "avg_latency": 6144674,
-    "avg_parse_latency": 0,
-    "max_parse_latency": 0,
-    "avg_compile_latency": 0,
-    "max_compile_latency": 0,
-    "sum_cop_task_num": 0,
-    "avg_cop_process_time": 0,
-    "max_cop_process_time": 0,
-    "avg_cop_wait_time": 0,
-    "max_cop_wait_time": 0,
-    "avg_process_time": 0,
-    "max_process_time": 0,
-    "avg_wait_time": 0,
-    "max_wait_time": 0,
-    "avg_backoff_time": 0,
-    "max_backoff_time": 0,
-    "avg_total_keys": 0,
-    "max_total_keys": 0,
-    "avg_processed_keys": 0,
-    "max_processed_keys": 0,
-    "avg_prewrite_time": 0,
-    "max_prewrite_time": 0,
-    "avg_commit_time": 0,
-    "max_commit_time": 0,
-    "avg_get_commit_ts_time": 0,
-    "max_get_commit_ts_time": 0,
-    "avg_commit_backoff_time": 0,
-    "max_commit_backoff_time": 0,
-    "avg_resolve_lock_time": 0,
-    "max_resolve_lock_time": 0,
-    "avg_local_latch_wait_time": 0,
-    "max_local_latch_wait_time": 0,
-    "avg_write_keys": 0,
-    "max_write_keys": 0,
-    "avg_write_size": 0,
-    "max_write_size": 0,
-    "avg_prewrite_regions": 0,
-    "max_prewrite_regions": 0,
-    "avg_txn_retry": 0,
-    "max_txn_retry": 0,
-    "sum_backoff_times": 0,
-    "avg_mem": 234942,
-    "max_mem": 234942,
-    "avg_disk": 0,
-    "max_disk": 0,
-    "avg_affected_rows": 0,
-    "first_seen": 0,
-    "last_seen": 0,
-    "sample_user": "",
-    "query_sample_text": "",
-    "prev_sample_text": "",
-    "schema_name": "gcb3",
-    "table_names": "",
-    "index_names": "",
-    "plan_count": 0,
-    "plan": "",
-    "plan_digest": "9b1d90654f7af9f1e2dcb2a178c8b0f4d84bd46ea6d571dae988ddf4b37744c0",
-    "max_rocksdb_delete_skipped_count": 0,
-    "avg_rocksdb_delete_skipped_count": 0,
-    "max_rocksdb_key_skipped_count": 0,
-    "avg_rocksdb_key_skipped_count": 0,
-    "max_rocksdb_block_cache_hit_count": 0,
-    "avg_rocksdb_block_cache_hit_count": 0,
-    "max_rocksdb_block_read_count": 0,
-    "avg_rocksdb_block_read_count": 0,
-    "max_rocksdb_block_read_byte": 0,
-    "avg_rocksdb_block_read_byte": 0,
-    "related_schemas": ""
-  },
-  {
-    "digest_text": "select `a` . * , `b` . * from ( select `id` , `name` , `xs_apis_id` , `state` , `pay_url` from `g86_pay_xs_items_v2` where `state` = ? and `xs_apis_id` in ( ... ) and `id` in ( ... ) ) as `a` inner join ( select `remarks` , `items_id` , `xs_products_id` , `qt_show_money` , `ismore_money` , `paymax` , `paymin` , `qt_show_type` from `g86_pay_xs_items_infos_v2` where `state` = ? and `xs_products_id` in ( ... ) and `xs_apis_id` in ( ... ) ) as `b` on `a` . `id` = `b` . `items_id`",
-    "digest": "da07d22de3d0d0c66404871c1d70df65c43404a6fa9446414dab8627ddd5989f",
-    "exec_count": 2,
-    "sum_errors": 0,
-    "sum_warnings": 0,
-    "sum_latency": 11774984,
-    "max_latency": 6464246,
-    "min_latency": 5310738,
-    "avg_latency": 5887492,
-    "avg_parse_latency": 0,
-    "max_parse_latency": 0,
-    "avg_compile_latency": 0,
-    "max_compile_latency": 0,
-    "sum_cop_task_num": 0,
-    "avg_cop_process_time": 0,
-    "max_cop_process_time": 0,
-    "avg_cop_wait_time": 0,
-    "max_cop_wait_time": 0,
-    "avg_process_time": 0,
-    "max_process_time": 0,
-    "avg_wait_time": 0,
-    "max_wait_time": 0,
-    "avg_backoff_time": 0,
-    "max_backoff_time": 0,
-    "avg_total_keys": 0,
-    "max_total_keys": 0,
-    "avg_processed_keys": 0,
-    "max_processed_keys": 0,
-    "avg_prewrite_time": 0,
-    "max_prewrite_time": 0,
-    "avg_commit_time": 0,
-    "max_commit_time": 0,
-    "avg_get_commit_ts_time": 0,
-    "max_get_commit_ts_time": 0,
-    "avg_commit_backoff_time": 0,
-    "max_commit_backoff_time": 0,
-    "avg_resolve_lock_time": 0,
-    "max_resolve_lock_time": 0,
-    "avg_local_latch_wait_time": 0,
-    "max_local_latch_wait_time": 0,
-    "avg_write_keys": 0,
-    "max_write_keys": 0,
-    "avg_write_size": 0,
-    "max_write_size": 0,
-    "avg_prewrite_regions": 0,
-    "max_prewrite_regions": 0,
-    "avg_txn_retry": 0,
-    "max_txn_retry": 0,
-    "sum_backoff_times": 0,
-    "avg_mem": 234966,
-    "max_mem": 234966,
-    "avg_disk": 0,
-    "max_disk": 0,
-    "avg_affected_rows": 0,
-    "first_seen": 0,
-    "last_seen": 0,
-    "sample_user": "",
-    "query_sample_text": "",
-    "prev_sample_text": "",
-    "schema_name": "gcb3",
-    "table_names": "",
-    "index_names": "",
-    "plan_count": 0,
-    "plan": "",
-    "plan_digest": "378e9efc46fa8af54b80b7ce59adf841e05ed7b40def723b0138deb47be0e13f",
-    "max_rocksdb_delete_skipped_count": 0,
-    "avg_rocksdb_delete_skipped_count": 0,
-    "max_rocksdb_key_skipped_count": 0,
-    "avg_rocksdb_key_skipped_count": 0,
-    "max_rocksdb_block_cache_hit_count": 0,
-    "avg_rocksdb_block_cache_hit_count": 0,
-    "max_rocksdb_block_read_count": 0,
-    "avg_rocksdb_block_read_count": 0,
-    "max_rocksdb_block_read_byte": 0,
-    "avg_rocksdb_block_read_byte": 0,
-    "related_schemas": ""
-  }
-]

From 0965cd53826733eedd88d3e157305a25fef001c3 Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Mon, 14 Mar 2022 20:22:51 +0800
Subject: [PATCH 36/41] update statement

---
 ui/cypress/integration/statement/01-list.spec.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/ui/cypress/integration/statement/01-list.spec.js b/ui/cypress/integration/statement/01-list.spec.js
index 601b71f00f..5360fd2418 100644
--- a/ui/cypress/integration/statement/01-list.spec.js
+++ b/ui/cypress/integration/statement/01-list.spec.js
@@ -376,6 +376,8 @@ describe('SQL statements list page', () => {
       cy.get('[data-e2e=sql_statements_search]').should('be.empty')
     })
 
+    // test will fail caused by existing TiDB bug
+    // https://github.com/pingcap/tidb/issues/32783
     it('Search item with space', () => {
       cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
         'statements_list'

From d6ceb385f12f1abe158d02c1de0897fcd578d658 Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Wed, 16 Mar 2022 23:26:04 +0800
Subject: [PATCH 37/41] resolve comments

---
 Makefile                                      |  2 +-
 start_tiup.log                                | 14 +++++++
 ui/cypress/integration/components.js          | 10 ++---
 .../integration/slow_query/01-list.spec.js    |  2 +-
 .../integration/statement/01-list.spec.js     | 37 +++++++++++--------
 .../integration/statement/02-detail.spec.js   | 34 ++++++++---------
 ui/lib/apps/SlowQuery/pages/List/index.tsx    |  1 +
 ui/lib/apps/Statement/pages/List/index.tsx    |  2 +
 ui/lib/components/BaseSelect/index.tsx        |  1 -
 ui/lib/components/CardTable/index.tsx         |  2 +-
 10 files changed, 61 insertions(+), 44 deletions(-)
 create mode 100644 start_tiup.log

diff --git a/Makefile b/Makefile
index 5e983309f1..4928064593 100755
--- a/Makefile
+++ b/Makefile
@@ -81,6 +81,6 @@ test_e2e_compat_features:
 
 test_e2e_common_features:
 	cd ui &&\
-	yarn run:e2e-test:common-features TIDB_VERSION=$(TIDB_VERSION)
+	yarn run:e2e-test:common-features --env TIDB_VERSION=$(TIDB_VERSION)
 
 test_e2e: test_e2e_compat_features test_e2e_common_features
\ No newline at end of file
diff --git a/start_tiup.log b/start_tiup.log
new file mode 100644
index 0000000000..604457334a
--- /dev/null
+++ b/start_tiup.log
@@ -0,0 +1,14 @@
+tiup is checking updates for component playground ...
+Starting component `playground`: /Users/yinixu/.tiup/components/playground/v1.9.2/tiup-playground /Users/yinixu/.tiup/components/playground/v1.9.2/tiup-playground v5.0.0 --tiflash=0
+]0;TiUP Playground: T0Pe0j6Playground Bootstrapping...
+Start pd instance:v5.0.0
+Start tikv instance:v5.0.0
+Start tidb instance:v5.0.0
+
+
+
127.0.0.1:4000 ... ⠋ 

127.0.0.1:4000 ... ⠙ 

127.0.0.1:4000 ... ⠹ 

127.0.0.1:4000 ... ⠸ 

127.0.0.1:4000 ... ⠼ 

127.0.0.1:4000 ... ⠴ 

127.0.0.1:4000 ... ⠦ 

127.0.0.1:4000 ... ⠧ 

127.0.0.1:4000 ... ⠇ 

127.0.0.1:4000 ... ⠏ 

127.0.0.1:4000 ... ⠋ 

127.0.0.1:4000 ... ⠙ 

127.0.0.1:4000 ... ⠹ 

127.0.0.1:4000 ... ⠸ 

127.0.0.1:4000 ... ⠼ 

127.0.0.1:4000 ... ⠴ 

127.0.0.1:4000 ... ⠦ 

127.0.0.1:4000 ... ⠧ 

127.0.0.1:4000 ... ⠇ 

127.0.0.1:4000 ... ⠏ 

127.0.0.1:4000 ... ⠋ 

127.0.0.1:4000 ... ⠙ 

127.0.0.1:4000 ... ⠹ 

127.0.0.1:4000 ... ⠸ 

127.0.0.1:4000 ... ⠼ 

127.0.0.1:4000 ... ⠴ 

127.0.0.1:4000 ... ⠦ 

127.0.0.1:4000 ... ⠧ 

127.0.0.1:4000 ... ⠇ 

127.0.0.1:4000 ... ⠏ 

127.0.0.1:4000 ... ⠋ 

127.0.0.1:4000 ... ⠙ 

127.0.0.1:4000 ... ⠹ 

127.0.0.1:4000 ... ⠸ 

127.0.0.1:4000 ... ⠼ 

127.0.0.1:4000 ... ⠴ 

127.0.0.1:4000 ... ⠦ 

127.0.0.1:4000 ... ⠧ 

127.0.0.1:4000 ... ⠇ 

127.0.0.1:4000 ... ⠏ 

127.0.0.1:4000 ... ⠋ 

127.0.0.1:4000 ... ⠙ 

127.0.0.1:4000 ... ⠹ 

127.0.0.1:4000 ... ⠸ 

127.0.0.1:4000 ... ⠼ 

127.0.0.1:4000 ... ⠴ 

127.0.0.1:4000 ... ⠦ 

127.0.0.1:4000 ... ⠧ 

127.0.0.1:4000 ... ⠇ 

127.0.0.1:4000 ... ⠏ 

127.0.0.1:4000 ... ⠋ 

127.0.0.1:4000 ... ⠙ 

127.0.0.1:4000 ... ⠹ 

127.0.0.1:4000 ... ⠸ 

127.0.0.1:4000 ... ⠼ 

127.0.0.1:4000 ... ⠴ 

127.0.0.1:4000 ... ⠦ 

127.0.0.1:4000 ... ⠧ 

127.0.0.1:4000 ... ⠇ 

127.0.0.1:4000 ... ⠏ 

127.0.0.1:4000 ... ⠋ 

127.0.0.1:4000 ... ⠙ 

127.0.0.1:4000 ... ⠹ 

127.0.0.1:4000 ... ⠸ 

127.0.0.1:4000 ... ⠼ 

127.0.0.1:4000 ... ⠴ 

127.0.0.1:4000 ... ⠦ 

127.0.0.1:4000 ... ⠧ 

127.0.0.1:4000 ... ⠇ 

127.0.0.1:4000 ... ⠏ 

127.0.0.1:4000 ... ⠋ 

127.0.0.1:4000 ... ⠙ 

127.0.0.1:4000 ... ⠹ 

127.0.0.1:4000 ... ⠸ 

127.0.0.1:4000 ... ⠼ 

127.0.0.1:4000 ... ⠴ 

127.0.0.1:4000 ... ⠦ 

127.0.0.1:4000 ... ⠧ 

127.0.0.1:4000 ... ⠇ 

127.0.0.1:4000 ... ⠏ 

127.0.0.1:4000 ... ⠋ 

127.0.0.1:4000 ... ⠙ 

127.0.0.1:4000 ... ⠹ 

127.0.0.1:4000 ... ⠸ 

127.0.0.1:4000 ... ⠼ 

127.0.0.1:4000 ... ⠴ 

127.0.0.1:4000 ... ⠦ 

127.0.0.1:4000 ... ⠧ 

127.0.0.1:4000 ... ⠇ 

127.0.0.1:4000 ... ⠏ 

127.0.0.1:4000 ... ⠋ 

127.0.0.1:4000 ... ⠙ 

127.0.0.1:4000 ... ⠹ 

127.0.0.1:4000 ... ⠸ 

127.0.0.1:4000 ... ⠼ 

127.0.0.1:4000 ... ⠴ 

127.0.0.1:4000 ... ⠦ 

127.0.0.1:4000 ... ⠧ 

127.0.0.1:4000 ... ⠇ 

127.0.0.1:4000 ... ⠏ 

127.0.0.1:4000 ... ⠋ 

127.0.0.1:4000 ... ⠙ 

127.0.0.1:4000 ... ⠹ 

127.0.0.1:4000 ... ⠸ 

127.0.0.1:4000 ... ⠼ 

127.0.0.1:4000 ... ⠴ 

127.0.0.1:4000 ... ⠦ 

127.0.0.1:4000 ... ⠧ 

127.0.0.1:4000 ... ⠇ 

127.0.0.1:4000 ... ⠏ 

127.0.0.1:4000 ... ⠋ 

127.0.0.1:4000 ... ⠙ 

127.0.0.1:4000 ... ⠹ 

127.0.0.1:4000 ... ⠸ 

127.0.0.1:4000 ... ⠼ 

127.0.0.1:4000 ... ⠴ 

127.0.0.1:4000 ... ⠦ 

127.0.0.1:4000 ... ⠧ 

127.0.0.1:4000 ... ⠇ 

127.0.0.1:4000 ... ⠏ 

127.0.0.1:4000 ... Done
CLUSTER START SUCCESSFULLY, Enjoy it ^-^
+To connect TiDB: mysql --comments --host 127.0.0.1 --port 4000 -u root -p (no password)
+To view the dashboard: http://127.0.0.1:2379/dashboard
+PD client endpoints: [127.0.0.1:2379]
+To view the Prometheus: http://127.0.0.1:56139
+To view the Grafana: http://127.0.0.1:3000
diff --git a/ui/cypress/integration/components.js b/ui/cypress/integration/components.js
index 67ecc1afe1..fce38258d6 100644
--- a/ui/cypress/integration/components.js
+++ b/ui/cypress/integration/components.js
@@ -1,8 +1,7 @@
 // Copyright 2022 PingCAP, Inc. Licensed under Apache-2.0.
 
-export const testBaseSelectorOptions = (optionsList, index) => {
-  cy.get('[data-e2e=base_selector]')
-    .eq(index)
+export const testBaseSelectorOptions = (optionsList, dataE2EValue) => {
+  cy.get(`[data-e2e=${dataE2EValue}]`)
     .click()
     .then(() => {
       cy.get('[data-e2e=multi_select_options]')
@@ -13,9 +12,8 @@ export const testBaseSelectorOptions = (optionsList, index) => {
     })
 }
 
-export const checkAllOptionsInBaseSelector = (index) => {
-  cy.get('[data-e2e=base_selector]')
-    .eq(index)
+export const checkAllOptionsInBaseSelector = (dataE2EValue) => {
+  cy.get(`[data-e2e=${dataE2EValue}]`)
     .click()
     .then(() => {
       if (cy.get('.ant-dropdown').should('exist')) {
diff --git a/ui/cypress/integration/slow_query/01-list.spec.js b/ui/cypress/integration/slow_query/01-list.spec.js
index 9a24a6ffea..1a43e97482 100644
--- a/ui/cypress/integration/slow_query/01-list.spec.js
+++ b/ui/cypress/integration/slow_query/01-list.spec.js
@@ -218,7 +218,7 @@ describe('SlowQuery list page', () => {
 
         cy.wait('@databases').then((res) => {
           const databaseList = res.response.body
-          testBaseSelectorOptions(databaseList, 0)
+          testBaseSelectorOptions(databaseList, 'execution_database_name')
         })
       })
 
diff --git a/ui/cypress/integration/statement/01-list.spec.js b/ui/cypress/integration/statement/01-list.spec.js
index 5360fd2418..895128df31 100644
--- a/ui/cypress/integration/statement/01-list.spec.js
+++ b/ui/cypress/integration/statement/01-list.spec.js
@@ -256,7 +256,7 @@ describe('SQL statements list page', () => {
 
       cy.wait('@databases').then((res) => {
         const databases = res.response.body
-        testBaseSelectorOptions(databases, 0)
+        testBaseSelectorOptions(databases, 'execution_database_name')
       })
     })
 
@@ -267,12 +267,19 @@ describe('SQL statements list page', () => {
 
       cy.wait('@databases').then(() => {
         // check all options in databases selector
-        checkAllOptionsInBaseSelector(0)
-      })
 
-      // check the existence of statements without use database
-      cy.contains(defaultExecStmtList[0]).should('not.exist')
-      cy.contains(defaultExecStmtList[2]).should('not.exist')
+        cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
+          'statements_list'
+        )
+
+        checkAllOptionsInBaseSelector('execution_database_name')
+
+        cy.wait('@statements_list').then(() => {
+          // check the existence of statements without use database
+          cy.contains(defaultExecStmtList[0]).should('not.exist')
+          cy.contains(defaultExecStmtList[2]).should('not.exist')
+        })
+      })
     })
 
     it('Filter statements with use database (mysql)', () => {
@@ -287,7 +294,7 @@ describe('SQL statements list page', () => {
       )
 
       cy.wait('@databases').then(() => {
-        cy.get('[data-e2e=base_selector]')
+        cy.get('[data-e2e=execution_database_name]')
           .eq(0)
           .click()
           .then(() => {
@@ -322,7 +329,7 @@ describe('SQL statements list page', () => {
 
       cy.wait('@stmt_types').then((res) => {
         const stmtTypesList = res.response.body
-        testBaseSelectorOptions(stmtTypesList, 1)
+        testBaseSelectorOptions(stmtTypesList, 'statement_types')
       })
     })
 
@@ -337,7 +344,7 @@ describe('SQL statements list page', () => {
 
       cy.wait(['@stmt_types', '@statements_list']).then((interceptions) => {
         // check all options in kind selector
-        checkAllOptionsInBaseSelector(1)
+        checkAllOptionsInBaseSelector('statement_types')
         const statementsList = interceptions[1].response.body
         cy.get('[data-e2e=syntax_highlighter_compact]').should(
           'have.length',
@@ -352,8 +359,7 @@ describe('SQL statements list page', () => {
       )
 
       cy.wait('@stmt_types').then(() => {
-        cy.get('[data-e2e=base_selector]')
-          .eq(1)
+        cy.get('[data-e2e=statement_types]')
           .click()
           .then(() => {
             cy.get('.ant-dropdown').within(() => {
@@ -382,9 +388,7 @@ describe('SQL statements list page', () => {
       cy.intercept(`${Cypress.env('apiBasePath')}statements/list*`).as(
         'statements_list'
       )
-
       cy.get('[data-e2e=sql_statements_search]').type(' SELECT version{enter}')
-
       cy.wait('@statements_list').then(() => {
         cy.get('[data-e2e=syntax_highlighter_compact]').each(($stmt) => {
           cy.wrap($stmt).contains('SELECT')
@@ -392,9 +396,12 @@ describe('SQL statements list page', () => {
       })
 
       // check search text remembered after reload page
+
       cy.reload()
-      cy.get('[data-e2e=syntax_highlighter_compact]').each(($stmt) => {
-        cy.wrap($stmt).contains('SELECT')
+      cy.wait('@statements_list').then(() => {
+        cy.get('[data-e2e=syntax_highlighter_compact]').each(($stmt) => {
+          cy.wrap($stmt).contains('SELECT')
+        })
       })
     })
 
diff --git a/ui/cypress/integration/statement/02-detail.spec.js b/ui/cypress/integration/statement/02-detail.spec.js
index 9fee4bffdd..3d48a355ba 100644
--- a/ui/cypress/integration/statement/02-detail.spec.js
+++ b/ui/cypress/integration/statement/02-detail.spec.js
@@ -105,7 +105,6 @@ describe('Statement detail page E2E test', () => {
   })
 
   describe('Plans', () => {
-    beforeEach(() => {})
     it('Has multiple execution plans', () => {
       cy.wait('@statements_plans').then((res) => {
         const response = res.response.body
@@ -156,51 +155,48 @@ describe('Statement detail page E2E test', () => {
 
   describe('Detail table tabs', () => {
     it('Basic table rows count', () => {
-      cy.get('[data-e2e=memo_details_list]')
-        .eq(1)
-        .within(() => {
+      cy.wait('@statements_plan_detail').then(() => {
+        cy.get('[data-e2e=statement_pages_detail_tabs_basic]').within(() => {
           cy.get('.ms-List-cell').should('have.length', 13)
         })
+      })
     })
 
     it('Time table rows count', () => {
       cy.get('.ant-tabs-tab').eq(1).click()
 
-      cy.get('[data-e2e=memo_details_list]')
-        .eq(1)
-        .within(() => {
+      cy.wait('@statements_plan_detail').then(() => {
+        cy.get('[data-e2e=statement_pages_detail_tabs_time]').within(() => {
           cy.get('.ms-List-cell').should('have.length', 12)
         })
+      })
     })
 
     it('Coprocessor table rows count', () => {
       cy.get('.ant-tabs-tab').eq(2).click()
-
-      cy.get('[data-e2e=memo_details_list]')
-        .eq(1)
-        .within(() => {
+      cy.wait('@statements_plan_detail').then(() => {
+        cy.get('[data-e2e=statement_pages_detail_tabs_copr]').within(() => {
           cy.get('.ms-List-cell').should('have.length', 15)
         })
+      })
     })
 
     it('Transaction table rows count', () => {
       cy.get('.ant-tabs-tab').eq(3).click()
-
-      cy.get('[data-e2e=memo_details_list]')
-        .eq(1)
-        .within(() => {
+      cy.wait('@statements_plan_detail').then(() => {
+        cy.get('[data-e2e=statement_pages_detail_tabs_txn]').within(() => {
           cy.get('.ms-List-cell').should('have.length', 10)
         })
+      })
     })
 
     it('Slow query table rows count', () => {
       cy.get('.ant-tabs-tab').eq(4).click()
-
-      cy.get('[data-e2e=memo_details_list]')
-        .eq(1)
-        .within(() => {
+      cy.wait('@statements_plan_detail').then(() => {
+        cy.get('[data-e2e=detail_tabs_slow_query]').within(() => {
           cy.get('.ms-List-cell').should('have.length', 0)
         })
+      })
     })
   })
 })
diff --git a/ui/lib/apps/SlowQuery/pages/List/index.tsx b/ui/lib/apps/SlowQuery/pages/List/index.tsx
index f696eac7c5..977237d833 100644
--- a/ui/lib/apps/SlowQuery/pages/List/index.tsx
+++ b/ui/lib/apps/SlowQuery/pages/List/index.tsx
@@ -128,6 +128,7 @@ function List() {
                 })
               }
               items={allSchemas}
+              data-e2e="execution_database_name"
             />
             <Search
               defaultValue={queryOptions.searchText}
diff --git a/ui/lib/apps/Statement/pages/List/index.tsx b/ui/lib/apps/Statement/pages/List/index.tsx
index dcb1071e3f..52e831329c 100644
--- a/ui/lib/apps/Statement/pages/List/index.tsx
+++ b/ui/lib/apps/Statement/pages/List/index.tsx
@@ -140,6 +140,7 @@ export default function StatementsOverview() {
                 })
               }
               items={allSchemas}
+              data-e2e="execution_database_name"
             />
             <MultiSelect.Plain
               placeholder={t(
@@ -158,6 +159,7 @@ export default function StatementsOverview() {
                 })
               }
               items={allStmtTypes}
+              data-e2e="statement_types"
             />
             <Search
               defaultValue={queryOptions.searchText}
diff --git a/ui/lib/components/BaseSelect/index.tsx b/ui/lib/components/BaseSelect/index.tsx
index 21a096fab0..6901b5c7b0 100644
--- a/ui/lib/components/BaseSelect/index.tsx
+++ b/ui/lib/components/BaseSelect/index.tsx
@@ -214,7 +214,6 @@ function BaseSelect<T>({
       onKeyDown={handleContainerKeyDown}
       ref={containerRef}
       {...restProps}
-      data-e2e="base_selector"
     >
       <Trigger
         prefixCls="ant-dropdown"
diff --git a/ui/lib/components/CardTable/index.tsx b/ui/lib/components/CardTable/index.tsx
index 5ff7698559..d12c34a6b3 100644
--- a/ui/lib/components/CardTable/index.tsx
+++ b/ui/lib/components/CardTable/index.tsx
@@ -245,7 +245,7 @@ export default function CardTable(props: ICardTableProps) {
       noMarginTop={cardNoMarginTop}
       noMarginBottom={cardNoMarginBottom}
       extra={cardExtra}
-      data-e2e="memo_details_list"
+      {...restProps}
     >
       <ErrorBar errors={errors} />
       <AnimatedSkeleton

From cca91ba07654791922d17d7566937532db3ae776 Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Fri, 18 Mar 2022 16:48:37 +0800
Subject: [PATCH 38/41] fix typo

---
 ui/cypress/integration/statement/01-list.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/cypress/integration/statement/01-list.spec.js b/ui/cypress/integration/statement/01-list.spec.js
index 895128df31..ebed66f7a2 100644
--- a/ui/cypress/integration/statement/01-list.spec.js
+++ b/ui/cypress/integration/statement/01-list.spec.js
@@ -38,7 +38,7 @@ describe('SQL statements list page', () => {
     'SELECT `version` ()',
   ]
 
-  describe('Initialize statemen list page', () => {
+  describe('Initialize statement list page', () => {
     it('Statement side bar highlighted', () => {
       cy.get('[data-e2e=menu_item_statement]')
         .should('be.visible')

From 04e7a8ac48c750500b57e4da467b77282cf6b5ff Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Fri, 18 Mar 2022 17:28:29 +0800
Subject: [PATCH 39/41] update statement config

---
 .../integration/statement/01-list.spec.js     | 30 +++++++++++--------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/ui/cypress/integration/statement/01-list.spec.js b/ui/cypress/integration/statement/01-list.spec.js
index ebed66f7a2..b547b69ef4 100644
--- a/ui/cypress/integration/statement/01-list.spec.js
+++ b/ui/cypress/integration/statement/01-list.spec.js
@@ -634,6 +634,10 @@ describe('SQL statements list page', () => {
 
     describe('Default statement setting', () => {
       beforeEach(() => {
+        cy.intercept(`${Cypress.env('apiBasePath')}statements/config`).as(
+          'statements_config'
+        )
+
         cy.get('[data-e2e=statement_setting]').click()
 
         // get refresh_interval value
@@ -652,19 +656,21 @@ describe('SQL statements list page', () => {
       })
 
       const checkSilder = (sizeList, defaultValueNow, dataE2EValue) => {
-        cy.get(`[data-e2e=${dataE2EValue}]`).within(() => {
-          cy.get('.ant-slider-handle').should(
-            'have.attr',
-            'aria-valuenow',
-            defaultValueNow
-          )
+        cy.wait('@statements_config').then(() => {
+          cy.get(`[data-e2e=${dataE2EValue}]`).within(() => {
+            cy.get('.ant-slider-handle').should(
+              'have.attr',
+              'aria-valuenow',
+              defaultValueNow
+            )
 
-          cy.get('.ant-slider-mark-text')
-            .then(($marks) => {
-              return Cypress.$.makeArray($marks).map((mark) => mark.innerText)
-            })
-            // make sure there exists the default executed statements
-            .should('to.deep.eq', sizeList)
+            cy.get('.ant-slider-mark-text')
+              .then(($marks) => {
+                return Cypress.$.makeArray($marks).map((mark) => mark.innerText)
+              })
+              // make sure there exists the default executed statements
+              .should('to.deep.eq', sizeList)
+          })
         })
       }
 

From 68332c6cf8c69e0a53bcb87a88e81a3ae522a9b9 Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Tue, 22 Mar 2022 11:00:06 +0800
Subject: [PATCH 40/41] update statement default max size value

---
 start_tiup.log                                   | 14 --------------
 ui/cypress/integration/statement/01-list.spec.js | 12 +++++++-----
 2 files changed, 7 insertions(+), 19 deletions(-)
 delete mode 100644 start_tiup.log

diff --git a/start_tiup.log b/start_tiup.log
deleted file mode 100644
index 604457334a..0000000000
--- a/start_tiup.log
+++ /dev/null
@@ -1,14 +0,0 @@
-tiup is checking updates for component playground ...
-Starting component `playground`: /Users/yinixu/.tiup/components/playground/v1.9.2/tiup-playground /Users/yinixu/.tiup/components/playground/v1.9.2/tiup-playground v5.0.0 --tiflash=0
-]0;TiUP Playground: T0Pe0j6Playground Bootstrapping...
-Start pd instance:v5.0.0
-Start tikv instance:v5.0.0
-Start tidb instance:v5.0.0
-
-
-
127.0.0.1:4000 ... ⠋ 

127.0.0.1:4000 ... ⠙ 

127.0.0.1:4000 ... ⠹ 

127.0.0.1:4000 ... ⠸ 

127.0.0.1:4000 ... ⠼ 

127.0.0.1:4000 ... ⠴ 

127.0.0.1:4000 ... ⠦ 

127.0.0.1:4000 ... ⠧ 

127.0.0.1:4000 ... ⠇ 

127.0.0.1:4000 ... ⠏ 

127.0.0.1:4000 ... ⠋ 

127.0.0.1:4000 ... ⠙ 

127.0.0.1:4000 ... ⠹ 

127.0.0.1:4000 ... ⠸ 

127.0.0.1:4000 ... ⠼ 

127.0.0.1:4000 ... ⠴ 

127.0.0.1:4000 ... ⠦ 

127.0.0.1:4000 ... ⠧ 

127.0.0.1:4000 ... ⠇ 

127.0.0.1:4000 ... ⠏ 

127.0.0.1:4000 ... ⠋ 

127.0.0.1:4000 ... ⠙ 

127.0.0.1:4000 ... ⠹ 

127.0.0.1:4000 ... ⠸ 

127.0.0.1:4000 ... ⠼ 

127.0.0.1:4000 ... ⠴ 

127.0.0.1:4000 ... ⠦ 

127.0.0.1:4000 ... ⠧ 

127.0.0.1:4000 ... ⠇ 

127.0.0.1:4000 ... ⠏ 

127.0.0.1:4000 ... ⠋ 

127.0.0.1:4000 ... ⠙ 

127.0.0.1:4000 ... ⠹ 

127.0.0.1:4000 ... ⠸ 

127.0.0.1:4000 ... ⠼ 

127.0.0.1:4000 ... ⠴ 

127.0.0.1:4000 ... ⠦ 

127.0.0.1:4000 ... ⠧ 

127.0.0.1:4000 ... ⠇ 

127.0.0.1:4000 ... ⠏ 

127.0.0.1:4000 ... ⠋ 

127.0.0.1:4000 ... ⠙ 

127.0.0.1:4000 ... ⠹ 

127.0.0.1:4000 ... ⠸ 

127.0.0.1:4000 ... ⠼ 

127.0.0.1:4000 ... ⠴ 

127.0.0.1:4000 ... ⠦ 

127.0.0.1:4000 ... ⠧ 

127.0.0.1:4000 ... ⠇ 

127.0.0.1:4000 ... ⠏ 

127.0.0.1:4000 ... ⠋ 

127.0.0.1:4000 ... ⠙ 

127.0.0.1:4000 ... ⠹ 

127.0.0.1:4000 ... ⠸ 

127.0.0.1:4000 ... ⠼ 

127.0.0.1:4000 ... ⠴ 

127.0.0.1:4000 ... ⠦ 

127.0.0.1:4000 ... ⠧ 

127.0.0.1:4000 ... ⠇ 

127.0.0.1:4000 ... ⠏ 

127.0.0.1:4000 ... ⠋ 

127.0.0.1:4000 ... ⠙ 

127.0.0.1:4000 ... ⠹ 

127.0.0.1:4000 ... ⠸ 

127.0.0.1:4000 ... ⠼ 

127.0.0.1:4000 ... ⠴ 

127.0.0.1:4000 ... ⠦ 

127.0.0.1:4000 ... ⠧ 

127.0.0.1:4000 ... ⠇ 

127.0.0.1:4000 ... ⠏ 

127.0.0.1:4000 ... ⠋ 

127.0.0.1:4000 ... ⠙ 

127.0.0.1:4000 ... ⠹ 

127.0.0.1:4000 ... ⠸ 

127.0.0.1:4000 ... ⠼ 

127.0.0.1:4000 ... ⠴ 

127.0.0.1:4000 ... ⠦ 

127.0.0.1:4000 ... ⠧ 

127.0.0.1:4000 ... ⠇ 

127.0.0.1:4000 ... ⠏ 

127.0.0.1:4000 ... ⠋ 

127.0.0.1:4000 ... ⠙ 

127.0.0.1:4000 ... ⠹ 

127.0.0.1:4000 ... ⠸ 

127.0.0.1:4000 ... ⠼ 

127.0.0.1:4000 ... ⠴ 

127.0.0.1:4000 ... ⠦ 

127.0.0.1:4000 ... ⠧ 

127.0.0.1:4000 ... ⠇ 

127.0.0.1:4000 ... ⠏ 

127.0.0.1:4000 ... ⠋ 

127.0.0.1:4000 ... ⠙ 

127.0.0.1:4000 ... ⠹ 

127.0.0.1:4000 ... ⠸ 

127.0.0.1:4000 ... ⠼ 

127.0.0.1:4000 ... ⠴ 

127.0.0.1:4000 ... ⠦ 

127.0.0.1:4000 ... ⠧ 

127.0.0.1:4000 ... ⠇ 

127.0.0.1:4000 ... ⠏ 

127.0.0.1:4000 ... ⠋ 

127.0.0.1:4000 ... ⠙ 

127.0.0.1:4000 ... ⠹ 

127.0.0.1:4000 ... ⠸ 

127.0.0.1:4000 ... ⠼ 

127.0.0.1:4000 ... ⠴ 

127.0.0.1:4000 ... ⠦ 

127.0.0.1:4000 ... ⠧ 

127.0.0.1:4000 ... ⠇ 

127.0.0.1:4000 ... ⠏ 

127.0.0.1:4000 ... ⠋ 

127.0.0.1:4000 ... ⠙ 

127.0.0.1:4000 ... ⠹ 

127.0.0.1:4000 ... ⠸ 

127.0.0.1:4000 ... ⠼ 

127.0.0.1:4000 ... ⠴ 

127.0.0.1:4000 ... ⠦ 

127.0.0.1:4000 ... ⠧ 

127.0.0.1:4000 ... ⠇ 

127.0.0.1:4000 ... ⠏ 

127.0.0.1:4000 ... Done
CLUSTER START SUCCESSFULLY, Enjoy it ^-^
-To connect TiDB: mysql --comments --host 127.0.0.1 --port 4000 -u root -p (no password)
-To view the dashboard: http://127.0.0.1:2379/dashboard
-PD client endpoints: [127.0.0.1:2379]
-To view the Prometheus: http://127.0.0.1:56139
-To view the Grafana: http://127.0.0.1:3000
diff --git a/ui/cypress/integration/statement/01-list.spec.js b/ui/cypress/integration/statement/01-list.spec.js
index b547b69ef4..6c9306fbb7 100644
--- a/ui/cypress/integration/statement/01-list.spec.js
+++ b/ui/cypress/integration/statement/01-list.spec.js
@@ -283,16 +283,16 @@ describe('SQL statements list page', () => {
     })
 
     it('Filter statements with use database (mysql)', () => {
+      cy.intercept(`${Cypress.env('apiBasePath')}info/databases`).as(
+        'databases'
+      )
+
       let queryData = {
         query: 'SELECT count(*) from user;',
         database: 'mysql',
       }
       cy.task('queryDB', { ...queryData })
 
-      cy.intercept(`${Cypress.env('apiBasePath')}info/databases`).as(
-        'databases'
-      )
-
       cy.wait('@databases').then(() => {
         cy.get('[data-e2e=execution_database_name]')
           .eq(0)
@@ -676,7 +676,9 @@ describe('SQL statements list page', () => {
 
       it('Default statement setting max size', () => {
         const sizeList = ['200', '1000', '2000', '5000']
-        checkSilder(sizeList, '3000', 'statement_setting_max_size')
+        const defaultMaxSizeValue =
+          Cypress.env('TIDB_VERSION') === 'v5.0.0' ? '200' : '3000'
+        checkSilder(sizeList, defaultMaxSizeValue, 'statement_setting_max_size')
       })
 
       it('Default statement setting window size', () => {

From b3a9ee8b49669b4a5650bdf7cd07b83a8ebb017c Mon Sep 17 00:00:00 2001
From: YiniXu9506 <xuyini@pingcap.com>
Date: Tue, 22 Mar 2022 11:16:33 +0800
Subject: [PATCH 41/41] remove useless e2e data value

---
 ui/lib/apps/Statement/pages/List/StatementSettingForm.tsx | 2 +-
 ui/lib/components/Bar/Bar.tsx                             | 6 +-----
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/ui/lib/apps/Statement/pages/List/StatementSettingForm.tsx b/ui/lib/apps/Statement/pages/List/StatementSettingForm.tsx
index 9ac04a6521..9b752c31f9 100755
--- a/ui/lib/apps/Statement/pages/List/StatementSettingForm.tsx
+++ b/ui/lib/apps/Statement/pages/List/StatementSettingForm.tsx
@@ -206,7 +206,7 @@ function StatementSettingForm({ onClose, onConfigUpdated }: Props) {
               >
                 {t('statement.settings.actions.save')}
               </Button>
-              <Button onClick={onClose} data-e2e="cancel_btn">
+              <Button onClick={onClose}>
                 {t('statement.settings.actions.cancel')}
               </Button>
             </Space>
diff --git a/ui/lib/components/Bar/Bar.tsx b/ui/lib/components/Bar/Bar.tsx
index e51922190c..b7338205f7 100644
--- a/ui/lib/components/Bar/Bar.tsx
+++ b/ui/lib/components/Bar/Bar.tsx
@@ -70,11 +70,7 @@ function Bar({
   return (
     <div className={cx(styles.container, className)} {...rest}>
       {children && (
-        <div
-          className={styles.text}
-          style={{ width: textWidth }}
-          data-e2e="table_bar_value"
-        >
+        <div className={styles.text} style={{ width: textWidth }}>
           {children}
         </div>
       )}