ui: new charts to statement details page

The overview for a statement details page now
shows charts instead of just the mean value for:

- Execution and Planning Time
- Rows Processed
- Execution Retries
- Execution Count
- Contention

Fixes cockroachdb#74517

This commit also introduces mock for matchMedia and canvas
used for testing with jest.

Release note (ui change): Statement Details page now shows charts
for: Execution and Planning Time, Rows Processed, Execution Retries,
Execution Count and Contention.

pkg/server/combined_statement_stats.go

@@ -563,6 +563,7 @@ func getStatementDetailsPerAggregatedTs(
 		GROUP BY
 				aggregated_ts,
 				aggregation_interval
+		ORDER BY aggregated_ts ASC
 		LIMIT $%d`, whereClause, len(args)+1)
 
 	args = append(args, limit)

pkg/ui/workspaces/cluster-ui/BUILD.bazel

@@ -83,6 +83,7 @@ DEPENDENCIES = [
     "@npm_cluster_ui//highlight.js",
     "@npm_cluster_ui//http-proxy-middleware",
     "@npm_cluster_ui//identity-obj-proxy",
+    "@npm_cluster_ui//jest-canvas-mock",
     "@npm_cluster_ui//jest-environment-enzyme",
     "@npm_cluster_ui//jest-enzyme",
     "@npm_cluster_ui//jest-fetch-mock",

pkg/ui/workspaces/cluster-ui/jest.config.js

@@ -43,7 +43,7 @@ module.exports = {
   ],
   roots: ["<rootDir>/src"],
   testEnvironment: "enzyme",
-  setupFilesAfterEnv: ["./enzyme.setup.js", "jest-enzyme"],
+  setupFilesAfterEnv: ["./enzyme.setup.js", "./src/test-utils/matchMedia.mock.js", "jest-enzyme", "jest-canvas-mock"],
   transform: {
     "^.+\\.tsx?$": "ts-jest",
     "^.+\\.jsx?$": ['babel-jest', { configFile: path.resolve(__dirname, 'babel.config.js') }],

pkg/ui/workspaces/cluster-ui/package.json

@@ -104,6 +104,7 @@
     "http-proxy-middleware": "^1.0.5",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.5.1",
+    "jest-canvas-mock": "^2.4.0",
     "jest-cli": "^27.5.1",
     "jest-environment-enzyme": "^7.1.2",
     "jest-enzyme": "^7.1.2",

pkg/ui/workspaces/cluster-ui/src/graphs/bargraph/bars.ts

@@ -14,8 +14,8 @@ import { AxisUnits, AxisDomain } from "../utils/domain";
 import { barTooltipPlugin } from "./plugins";
 
 const seriesPalette = [
-  "#475872",
-  "#FFCD02",
+  "#003EBD",
+  "#2AAF44",
   "#F16969",
   "#4E9FD1",
   "#49D990",
@@ -24,7 +24,7 @@ const seriesPalette = [
   "#A3415B",
   "#B59153",
   "#C9DB6D",
-  "#203D9B",
+  "#475872",
   "#748BF2",
   "#91C8F2",
   "#FF9696",
@@ -158,6 +158,9 @@ export const getBarChartOpts = (
       x: {
         range: () => [xAxisDomain.extent[0], xAxisDomain.extent[1]],
       },
+      yAxis: {
+        range: () => [yAxisDomain.extent[0], yAxisDomain.extent[1]],
+      },
     },
     axes: [
       {

pkg/ui/workspaces/cluster-ui/src/pageConfig/pageConfig.module.scss

@@ -14,7 +14,7 @@
   margin-bottom: -10px;
   margin-top: -10px;
 
-  z-index: 1;
+  z-index: 2;
   background-color: $colors--background;
 
   &__list {