Support cloud metrics (#1377)

* mix line and bar_stacked type in one chart

* add cloud metrics queries

* update cloud metrics

* update time picker

* define metrics query interface

* fix: lint

* customize time range picker on cloud metrics

* unify unit and update tikv io write query

* handle empty query result

* update

* update empty result handle

* update metrics empty query result handling

* fix: monitoring docs link on tidb cloud

* fix: remove extra space at the end of link

* fix: Fix x Domain for xScaleType is Time

Co-authored-by: Suhaha <jklopsdfw@gmail.com>
Co-authored-by: Sparkle <1284531+baurine@users.noreply.github.com>

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

@@ -1,6 +1,6 @@
 {
   "name": "@pingcap/tidb-dashboard-for-dbaas",
-  "version": "0.0.16",
+  "version": "0.0.24",
   "main": "dist/main.js",
   "module": "dist/main.js",
   "files": [

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

@@ -6,6 +6,7 @@ import {
 
 import client from '~/client'
 
+import { monitoringItems } from './metricsQueries'
 class DataSource implements IMonitoringDataSource {
   metricsQueryGet(
     endTimeSec?: number,
@@ -28,6 +29,25 @@ class DataSource implements IMonitoringDataSource {
 
 const ds = new DataSource()
 
+const RECENT_SECONDS = [
+  5 * 60,
+  15 * 60,
+  30 * 60,
+  60 * 60,
+  3 * 60 * 60,
+  6 * 60 * 60,
+  12 * 60 * 60,
+  24 * 60 * 60
+]
+
 export const ctx: () => IMonitoringContext = () => ({
-  ds
+  ds,
+  cfg: {
+    metricsQueries: monitoringItems,
+    promeAddrConfigurable: false,
+    timeRangeSelector: {
+      recent_seconds: RECENT_SECONDS,
+      withAbsoluteRangePicker: false
+    }
+  }
 })