vesoft-inc · kqzh · Dec 19, 2022 · Dec 19, 2022
diff --git a/src/components/Charts/LineChart.tsx b/src/components/Charts/LineChart.tsx
@@ -119,10 +119,11 @@ function LineChart(props: IProps, ref) {
     }
     yMin.current = min;
     yMax.current = max;
+    const tickInterval = Math.round((max - min) / 5);
     return {
       min: yMin.current,
-      max: yMax.current,
-      tickInterval: Math.round((max - min) / 5),
+      max: yMax.current + tickInterval,
+      tickInterval,
     }
   }
 

diff --git a/src/config/locale/en-US/metric_description.json b/src/config/locale/en-US/metric_description.json
@@ -55,8 +55,8 @@
   "num_reclaimed_expired_sessions": "Number of expired sessions reclaimed by the server",
   "num_added_jobs": "Number of tasks added",
   "num_stoped_jobs": "Number of stopped tasks",
-  "commit_log_latency_us": "Raft commit log delay",
-  "commit_snapshot_latency_us": "Raft commit snapshot of time delay",
+  "commit_log_latency_us": "The latency of committing logs in Raft.",
+  "commit_snapshot_latency_us": "The latency of committing snapshots in Raft.",
   "num_rpc_sent_to_storaged": "Number of RPC requests sent to Storaged",
   "num_rpc_sent_to_storaged_failed": "Number of FAILED RPC requests sent to Storaged",
   "num_agent_heartbeats": "The number of heartbeats for the AgentHBProcessor.",

diff --git a/src/config/locale/zh-CN/metric_description.json b/src/config/locale/zh-CN/metric_description.json
@@ -46,9 +46,9 @@
   "slow_query_latency_us": "慢查询平均延迟",
   "num_added_jobs": "添加的任务数量",
   "num_stoped_jobs": "停止的任务数量",
-  "commit_log_latency_us": "raft commit log延时",
-  "commit_snapshot_latency_us": "raft commit 快照延时",
-  "transfer_leader_latency_us": "raft 转移leader延时",
+  "commit_log_latency_us": "Raft 协议中 Commit 日志的延迟时间。",
+  "commit_snapshot_latency_us": "Raft 协议中 Commit 快照的延迟时间。",
+  "transfer_leader_latency_us": "Raft 协议中转移 Leader 的延迟时间。",
   "num_rpc_sent_to_metad": "发给metad的rpc请求数量",
   "num_rpc_sent_to_metad_failed": "发给metad的rpc请求失败的数量",
   "num_rpc_sent_to_storaged": "发给storaged的rpc请求数量",

diff --git a/src/pages/MachineDashboard/Cards/CPUCard.tsx b/src/pages/MachineDashboard/Cards/CPUCard.tsx
@@ -8,11 +8,8 @@ import { MetricScene } from '@/utils/interface';
 
 const mapState = (state: IRootState) => {
   const { cpuStat, metricsFilterValues } = state.machine;
-  const { cpuBaseLine } = state.setting;
   const { aliasConfig } = state.app;
-
   return {
-    baseLine: cpuBaseLine,
     data: getDataByType({
       data: cpuStat,
       type: metricsFilterValues.instanceList,

diff --git a/src/pages/MachineDashboard/Cards/LoadCard.tsx b/src/pages/MachineDashboard/Cards/LoadCard.tsx
@@ -8,10 +8,8 @@ import { MetricScene } from '@/utils/interface';
 
 const mapState = (state: IRootState) => {
   const { loadStat, metricsFilterValues } = state.machine;
-  const { loadBaseLine } = state.setting;
   const { aliasConfig } = state.app;
   return {
-    baseLine: loadBaseLine,
     data: getDataByType({
       data: loadStat,
       type: metricsFilterValues.instanceList,

diff --git a/src/pages/MachineDashboard/Cards/MemoryCard.tsx b/src/pages/MachineDashboard/Cards/MemoryCard.tsx
@@ -7,7 +7,6 @@ import { MetricScene } from '@/utils/interface';
 
 const mapState = (state: IRootState) => {
   const { memoryStat, memorySizeStat, metricsFilterValues } = state.machine;
-  const { memoryBaseLine } = state.setting;
   const { aliasConfig } = state.app;
   return {
     data: getDataByType({
@@ -17,7 +16,6 @@ const mapState = (state: IRootState) => {
       aliasConfig,
     }),
     sizes: memorySizeStat,
-    baseLine: memoryBaseLine,
     valueType: VALUE_TYPE.percentage,
     loading:false,
   };

diff --git a/src/pages/MachineDashboard/Cards/NetworkIn.tsx b/src/pages/MachineDashboard/Cards/NetworkIn.tsx
@@ -8,10 +8,8 @@ import { MetricScene } from '@/utils/interface';
 
 const mapState = (state: IRootState) => {
   const { networkInStat, metricsFilterValues } = state.machine;
-  const { networkInBaseLine } = state.setting;
   const { aliasConfig } = state.app;
   return {
-    baseLine: networkInBaseLine,
     data: getDataByType({
       data: networkInStat,
       type: metricsFilterValues.instanceList,

diff --git a/src/pages/MachineDashboard/Cards/NetworkOut.tsx b/src/pages/MachineDashboard/Cards/NetworkOut.tsx
@@ -8,10 +8,8 @@ import { MetricScene } from '@/utils/interface';
 
 const mapState = (state: IRootState) => {
   const { networkOutStat, metricsFilterValues } = state.machine;
-  const { networkOutBaseLine } = state.setting;
   const { aliasConfig } = state.app;
   return {
-    baseLine: networkOutBaseLine,
     data: getDataByType({
       data: networkOutStat,
       type: metricsFilterValues.instanceList,

diff --git a/src/pages/MachineDashboard/Detail/index.tsx b/src/pages/MachineDashboard/Detail/index.tsx
@@ -23,10 +23,6 @@ import { IMachineMetricOption } from '@/utils/interface';
 import { RouteProps, useHistory } from 'react-router-dom';
 
 const mapDispatch: any = (dispatch: IDispatch) => ({
-  asyncUpdateBaseLine: (key, value) =>
-    dispatch.setting.update({
-      [key]: value,
-    }),
   updateMetricsFiltervalues: dispatch.machine.updateMetricsFiltervalues,
 });
 

diff --git a/src/pages/MachineDashboard/index.tsx b/src/pages/MachineDashboard/index.tsx
@@ -29,19 +29,10 @@ const mapDispatch: any = (dispatch: any) => ({
   asyncGetDiskStatByRange: dispatch.machine.asyncGetDiskStatByRange,
   asyncGetLoadByRange: dispatch.machine.asyncGetLoadByRange,
   asyncGetNetworkStatByRange: dispatch.machine.asyncGetNetworkStatByRange,
-  asyncUpdateBaseLine: (key, value) =>
-    dispatch.setting.update({
-      [key]: value,
-    }),
   updateMetricsFiltervalues: dispatch.machine.updateMetricsFiltervalues,
 });
 
 const mapState = (state: any) => ({
-  cpuBaseLine: state.setting.cpuBaseLine,
-  memoryBaseLine: state.setting.memoryBaseLine,
-  networkOutBaseLine: state.setting.networkOutBaseLine,
-  networkInBaseLine: state.setting.networkInBaseLine,
-  loadBaseLine: state.setting.loadBaseLine,
   instanceList: state.machine.instanceList as any,
   metricsFilterValues: state.machine.metricsFilterValues,
   loading: state.loading.effects.machine.asyncGetMetricsData,
@@ -58,13 +49,15 @@ let pollingTimer: any;
 function MachineDashboard(props: IProps) {
 
   const { asyncGetMemorySizeStat, asyncGetDiskSizeStat, cluster, metricsFilterValues,
-    asyncUpdateBaseLine, asyncGetCPUStatByRange, asyncGetMemoryStatByRange, asyncGetDiskStatByRange,
+    asyncGetCPUStatByRange, asyncGetMemoryStatByRange, asyncGetDiskStatByRange,
     asyncGetLoadByRange, asyncGetNetworkStatByRange, updateMetricsFiltervalues, instanceList,
     loading,
   } = props;
 
   const [showLoading, setShowLoading] = useState<boolean>(false);
 
+  const [baseLineMap, setBaseLineMap] = useState<any>({})
+
   useEffect(() => {
     asyncGetMemorySizeStat(cluster?.id);
     asyncGetDiskSizeStat(cluster?.id);
@@ -97,14 +90,15 @@ function MachineDashboard(props: IProps) {
 
   const handleBaseLineChange = async (value, editPanelType) => {
     const { baseLine, unit } = value;
-    await asyncUpdateBaseLine(
-      `${editPanelType}BaseLine`,
-      getBaseLineByUnit({
-        baseLine,
-        unit,
-        valueType: getValueType(editPanelType),
-      }),
-    );
+    const curBaseLine = getBaseLineByUnit({
+      baseLine,
+      unit,
+      valueType: getValueType(editPanelType),
+    });
+    setBaseLineMap({
+      ...baseLineMap,
+      [`${editPanelType}BaseLine`]: curBaseLine
+    })
   };
 
   const getMachineStatus = () => {
@@ -196,8 +190,8 @@ function MachineDashboard(props: IProps) {
     <Spin spinning={showLoading} wrapperClassName='machine-dashboard-spinning'>
       <div className="machine-dashboard">
         <div className='common-header' >
-          <MetricsFilterPanel 
-            onChange={handleMetricsChange} 
+          <MetricsFilterPanel
+            onChange={handleMetricsChange}
             instanceList={instanceList}
             values={metricsFilterValues}
             onRefresh={handleRefreshData}
@@ -210,7 +204,7 @@ function MachineDashboard(props: IProps) {
               viewPath={getViewPath("/machine/cpu")}
               onConfigPanel={() => handleConfigPanel(MACHINE_TYPE.cpu)}
             >
-              <CPUCard />
+              <CPUCard baseLine={baseLineMap[`${MACHINE_TYPE.cpu}BaseLine`]} />
             </DashboardCard>
           </Col>
           <Col span={12}>
@@ -219,7 +213,7 @@ function MachineDashboard(props: IProps) {
               viewPath={getViewPath("/machine/memory")}
               onConfigPanel={() => handleConfigPanel(MACHINE_TYPE.memory)}
             >
-              <MemoryCard />
+              <MemoryCard baseLine={baseLineMap[`${MACHINE_TYPE.memory}BaseLine`]} />
             </DashboardCard>
           </Col>
         </Row>
@@ -230,7 +224,7 @@ function MachineDashboard(props: IProps) {
               viewPath={getViewPath("/machine/load")}
               onConfigPanel={() => handleConfigPanel(MACHINE_TYPE.load)}
             >
-              <LoadCard />
+              <LoadCard baseLine={baseLineMap[`${MACHINE_TYPE.load}BaseLine`]} />
             </DashboardCard>
           </Col>
           <Col span={12}>
@@ -251,7 +245,7 @@ function MachineDashboard(props: IProps) {
                 handleConfigPanel(MACHINE_TYPE.networkOut)
               }
             >
-              <NetworkOut />
+              <NetworkOut baseLine={baseLineMap[`${MACHINE_TYPE.networkOut}BaseLine`]} />
             </DashboardCard>
           </Col>
           <Col span={12}>
@@ -262,7 +256,7 @@ function MachineDashboard(props: IProps) {
                 handleConfigPanel(MACHINE_TYPE.networkIn)
               }
             >
-              <NetworkIn />
+              <NetworkIn baseLine={baseLineMap[`${MACHINE_TYPE.networkIn}BaseLine`]} />
             </DashboardCard>
           </Col>
         </Row>

diff --git a/src/pages/MetricDetail/index.tsx b/src/pages/MetricDetail/index.tsx
@@ -70,10 +70,10 @@ const mapState = (state: IRootState) => ({
 });
 
 const mapDispatch: any = (dispatch: IDispatch) => ({
-  asyncUpdateBaseLine: (key, value) =>
-    dispatch.setting.update({
-      [key]: value,
-    }),
+  // asyncUpdateBaseLine: (key, value) =>
+  //   dispatch.setting.update({
+  //     [key]: value,
+  //   }),
   updateMetricsFiltervalues: dispatch.machine.updateMetricsFiltervalues,
   updateServiceMetricsFiltervalues: dispatch.service.updateMetricsFiltervalues,
   asyncFetchMachineMetricsData: dispatch.machine.asyncGetMetricsData,

diff --git a/src/pages/ServiceDashboard/Detail/index.tsx b/src/pages/ServiceDashboard/Detail/index.tsx
@@ -33,10 +33,6 @@ const mapDispatch: any = (dispatch: IDispatch) => ({
   asyncGetStatus: dispatch.service.asyncGetStatus,
   asyncGetSpaces: dispatch.serviceMetric.asyncGetSpaces,
   asyncFetchMetricsData: dispatch.service.asyncGetMetricsData,
-  asyncUpdateBaseLine: (key, value) =>
-    dispatch.machine.update({
-      [key]: value,
-    }),
   updateMetricsFiltervalues: dispatch.service.updateMetricsFiltervalues,
 });
 

diff --git a/src/store/models/index.ts b/src/store/models/index.ts
@@ -2,5 +2,4 @@ export { app } from './app';
 export { machine } from './machine';
 export { nebula } from './nebula';
 export { service } from './service';
-export { setting } from './setting';
 export { serviceMetric } from './metric';
diff --git a/src/store/models/setting.ts b/src/store/models/setting.ts
diff --git a/src/utils/metric.ts b/src/utils/metric.ts
@@ -213,7 +213,7 @@ export const RawServiceMetrics = [
 
 export const ServiceMetricValueTypeMap = {
   [VALUE_TYPE.byte]: ["write_bytes_total", "memory_bytes_gauge", "read_bytes_total"],
-  [VALUE_TYPE.byteSecond]: ["memory_bytes_gauge"],
+  [VALUE_TYPE.byteSecond]: [],
   [VALUE_TYPE.numberSecond]: ["cpu_seconds_total"]
 }