chore: load promql by op and cloud variant type

ui/packages/tidb-dashboard-for-clinic-cloud/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingcap/tidb-dashboard-for-clinic-cloud",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "main": "dist/dashboardApp.js",
   "module": "dist/dashboardApp.js",
   "files": [

ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/Overview/context.ts

@@ -5,6 +5,7 @@ import {
 } from '@pingcap/tidb-dashboard-lib'
 
 import client from '~/client'
+import { overviewMetrics } from './metricsQueries'
 
 class DataSource implements IOverviewDataSource {
   getTiDBTopology(options?: ReqConfig) {
@@ -54,5 +55,5 @@ const ds = new DataSource()
 
 export const ctx: IOverviewContext = {
   ds,
-  cfg: { apiPathBase: client.getBasePath() }
+  cfg: { apiPathBase: client.getBasePath(), metricsQueries: overviewMetrics }
 }

ui/packages/tidb-dashboard-for-clinic-cloud/src/apps/Overview/metricsQueries.ts

@@ -0,0 +1,96 @@
+import {
+  TransformNullValue,
+  OverviewMetricsQueryType
+} from '@pingcap/tidb-dashboard-lib'
+
+const overviewMetrics: OverviewMetricsQueryType[] = [
+  {
+    title: 'total_requests',
+    queries: [
+      {
+        query: 'sum(rate(tidb_executor_statement_total[$__rate_interval]))',
+        name: 'Total'
+      },
+      {
+        query:
+          'sum(rate(tidb_executor_statement_total[$__rate_interval])) by (type)',
+        name: '{type}'
+      }
+    ],
+    nullValue: TransformNullValue.AS_ZERO,
+    unit: 'qps',
+    type: 'line'
+  },
+  {
+    title: 'latency',
+    queries: [
+      {
+        query:
+          'sum(rate(tidb_server_handle_query_duration_seconds_sum{sql_type!="internal"}[$__rate_interval])) / sum(rate(tidb_server_handle_query_duration_seconds_count{sql_type!="internal"}[$__rate_interval]))',
+        name: 'avg'
+      },
+      {
+        query:
+          'histogram_quantile(0.99, sum(rate(tidb_server_handle_query_duration_seconds_bucket{sql_type!="internal"}[$__rate_interval])) by (le))',
+        name: '99'
+      },
+      {
+        query:
+          'sum(rate(tidb_server_handle_query_duration_seconds_sum{sql_type!="internal"}[$__rate_interval])) by (sql_type) / sum(rate(tidb_server_handle_query_duration_seconds_count{sql_type!="internal"}[$__rate_interval])) by (sql_type)',
+        name: 'avg-{sql_type}'
+      },
+      {
+        query:
+          'histogram_quantile(0.99, sum(rate(tidb_server_handle_query_duration_seconds_bucket{sql_type!="internal"}[$__rate_interval])) by (le,sql_type))',
+        name: '99-{sql_type}'
+      }
+    ],
+    nullValue: TransformNullValue.AS_ZERO,
+    unit: 's',
+    type: 'line'
+  },
+  {
+    title: 'cpu',
+    queries: [
+      {
+        query:
+          'irate(process_cpu_seconds_total{component="tidb"}[$__rate_interval])',
+        name: '{instance}'
+      }
+    ],
+    nullValue: TransformNullValue.AS_ZERO,
+    unit: 'percentunit',
+    type: 'line'
+  },
+  {
+    title: 'memory',
+    queries: [
+      {
+        query: 'process_resident_memory_bytes{component="tidb"}',
+        name: '{instance}'
+      }
+    ],
+    nullValue: TransformNullValue.AS_ZERO,
+    unit: 'bytes',
+    type: 'line'
+  },
+  {
+    title: 'io',
+    queries: [
+      {
+        query:
+          'sum(rate(tikv_engine_flow_bytes{db="kv", type="wal_file_bytes"}[$__rate_interval])) by (instance) + (sum(rate(tikv_engine_flow_bytes{db="raft", type="wal_file_bytes"}[$__rate_interval])) by (instance) or (0 * sum(rate(raft_engine_write_size_sum[$__rate_interval])) by (instance))) + (sum(rate(raft_engine_write_size_sum[$__rate_interval])) by (instance) or (0 * sum(rate(tikv_engine_flow_bytes{db="raft", type="wal_file_bytes"}[$__rate_interval])) by (instance)))',
+        name: '{instance}-write'
+      },
+      {
+        query:
+          'sum(rate(tikv_engine_flow_bytes{db="kv", type=~"bytes_read|iter_bytes_read"}[$__rate_interval])) by (instance)',
+        name: '{instance}-read'
+      }
+    ],
+    unit: 'Bps',
+    type: 'line'
+  }
+]
+
+export { overviewMetrics }

ui/packages/tidb-dashboard-for-op/src/apps/Overview/context.ts

@@ -5,6 +5,7 @@ import {
 } from '@pingcap/tidb-dashboard-lib'
 
 import client from '~/client'
+import { overviewMetrics } from './metricsQueries'
 
 class DataSource implements IOverviewDataSource {
   getTiDBTopology(options?: ReqConfig) {
@@ -54,5 +55,8 @@ const ds = new DataSource()
 
 export const ctx: IOverviewContext = {
   ds,
-  cfg: { apiPathBase: client.getBasePath() }
+  cfg: {
+    apiPathBase: client.getBasePath(),
+    metricsQueries: overviewMetrics
+  }
 }

ui/packages/tidb-dashboard-lib/src/apps/Overview/data/overviewMetrics.ts → ui/packages/tidb-dashboard-for-op/src/apps/Overview/metricsQueries.ts

@@ -1,6 +1,9 @@
-import { TransformNullValue } from '@lib/utils/prometheus'
+import {
+  TransformNullValue,
+  OverviewMetricsQueryType
+} from '@pingcap/tidb-dashboard-lib'
 
-const overviewMetrics = [
+const overviewMetrics: OverviewMetricsQueryType[] = [
   {
     title: 'total_requests',
     queries: [
@@ -75,7 +78,7 @@ const overviewMetrics = [
     queries: [
       {
         query:
-          'sum(rate(tikv_engine_flow_bytes{db="raft", type="wal_file_bytes"}[$__rate_interval])) by (instance) + sum(rate(raft_engine_write_size_sum[$__rate_interval])) by (instance)',
+          'sum(rate(tikv_engine_flow_bytes{db="kv", type="wal_file_bytes"}[$__rate_interval])) by (instance) + sum(rate(tikv_engine_flow_bytes{db="raft", type="wal_file_bytes"}[$__rate_interval])) by (instance) + sum(rate(raft_engine_write_size_sum[$__rate_interval])) by (instance)',
         name: '{instance}-write'
       },
       {

ui/packages/tidb-dashboard-lib/src/apps/Overview/components/Metrics.tsx

@@ -21,7 +21,6 @@ import { OverviewContext } from '../context'
 import { PointerEvent } from '@elastic/charts'
 import { ChartContext } from '@lib/components/MetricChart/ChartContext'
 import { useEventEmitter, useMemoizedFn } from 'ahooks'
-import { overviewMetrics } from '../data/overviewMetrics'
 import { telemetry } from '../utils/telemetry'
 
 export default function Metrics() {
@@ -96,7 +95,7 @@ export default function Metrics() {
       </Card>
       <ChartContext.Provider value={useEventEmitter<PointerEvent>()}>
         <Stack tokens={{ childrenGap: 16 }}>
-          {overviewMetrics.map((item) => (
+          {ctx?.cfg.metricsQueries.map((item) => (
             <Card noMarginTop noMarginBottom>
               <Typography.Title level={5}>
                 {t(`overview.metrics.${item.title}`)}

ui/packages/tidb-dashboard-lib/src/apps/Overview/context/index.ts

@@ -12,6 +12,15 @@ import {
 } from '@lib/client'
 
 import { IContextConfig, ReqConfig } from '@lib/types'
+import { GraphType, IQueryOption } from '@lib/components'
+import { TransformNullValue } from '@lib/utils'
+export interface OverviewMetricsQueryType {
+  title: string
+  queries: IQueryOption[]
+  unit: string
+  type: GraphType
+  nullValue?: TransformNullValue
+}
 
 export interface IOverviewDataSource {
   getTiDBTopology(options?: ReqConfig): AxiosPromise<Array<TopologyTiDBInfo>>
@@ -44,7 +53,9 @@ export interface IOverviewDataSource {
 
 export interface IOverviewContext {
   ds: IOverviewDataSource
-  cfg: IContextConfig
+  cfg: IContextConfig & {
+    metricsQueries: OverviewMetricsQueryType[]
+  }
 }
 
 export const OverviewContext = createContext<IOverviewContext | null>(null)