Merge pull request #491 from zsnmwy/fix/react_store

feat: dashboard error handler
gocrane · Aug 19, 2022 · 9ad7615 · 9ad7615
2 parents 485a32b + 6b43374
commit 9ad7615
Show file tree

Hide file tree

Showing 21 changed files with 182 additions and 152 deletions.
diff --git a/pkg/web/src/components/BoardChart/index.tsx b/pkg/web/src/components/BoardChart/index.tsx
@@ -6,7 +6,7 @@ import Style from './index.module.less';
 import { useInstantPrometheusQuery, useRangePrometheusQuery } from '../../services/prometheusApi';
 import { useCraneUrl } from '../../hooks';
 import ReactEcharts from 'echarts-for-react';
-import {useTranslation} from "react-i18next";
+import { useTranslation } from 'react-i18next';
 
 export enum ETrend {
   up,
@@ -241,7 +241,7 @@ const BoardChart = ({
   tips,
 }: IBoardProps) => {
   const craneUrl: any = useCraneUrl();
-  const {t} = useTranslation();
+  const { t } = useTranslation();
 
   let fetchDataResult;
   try {
@@ -265,7 +265,11 @@ const BoardChart = ({
   let count: React.ReactNode = null;
   if (error) {
     count = error as any;
-  } else if ((typeof result?.isFetching === 'boolean' && result?.isFetching === true) || result?.data?.emptyData) {
+  } else if (
+    (typeof result?.isFetching === 'boolean' && result?.isFetching === true) ||
+    (typeof result?.isError === 'boolean' && result?.isError === true) ||
+    result?.data?.emptyData
+  ) {
     count = 'No Data';
   } else {
     count = `${countPrefix || ''}${result?.data?.latestValue || ''}`;
@@ -285,12 +289,11 @@ const BoardChart = ({
     trendNum = `${(Math.floor(calc * 100) / 100) * -1}%`;
     trend = calc < 0 ? ETrend.up : ETrend.down;
   } else {
-    console.log('emptyData', fetchDataResult.preResult?.data);
     trendNum = t('历史数据不足');
     trend = ETrend.error;
   }
 
-  if (result?.isError) MessagePlugin.error(`[${title}] Check Your Network Or Query Params !!!`, 10 * 1000);
+  if (result?.isError) MessagePlugin.error(`[${title}] Check Your Network Or Query Params !!!`);
 
   return (
     <Card

diff --git a/pkg/web/src/components/PieChart/index.tsx b/pkg/web/src/components/PieChart/index.tsx
@@ -23,10 +23,11 @@ export interface IPieChart {
 const fetchPieData = (craneUrl: string, title: string, timeDateRangePicker: string[], step: string, query: string) => {
   const start = dayjs(timeDateRangePicker[0]).valueOf();
   const end = dayjs(timeDateRangePicker[1]).valueOf();
-  const minutesDuration = Math.round((end - start)/1000/60)
-  query = query.replaceAll("{DURATION}", minutesDuration.toString())
+  const minutesDuration = Math.round((end - start) / 1000 / 60);
+  query = query.replaceAll('{DURATION}', minutesDuration.toString());
   const { data, isError } = useRangePrometheusQuery({ craneUrl, start, end, step, query });
-  if (isError) MessagePlugin.error(`[${title}] Check Your Network Or Query Params !!!`, 10 * 1000);
+  if (isError) MessagePlugin.error(`[${title}] Check Your Network Or Query Params !!!`);
+  if (isError) return {};
   const result: any = {};
   data?.data?.map((namesapce) => {
     const namespaceName = namesapce.metric.namespace;

diff --git a/pkg/web/src/components/SeriesLineChart/index.tsx b/pkg/web/src/components/SeriesLineChart/index.tsx
@@ -49,11 +49,10 @@ const fetchLinesData = (craneUrl: string, timeDateRangePicker: string[], step: s
   return lines.map((line) => {
     const { name, query } = line;
     const { data, isError } = useRangePrometheusQuery({ craneUrl, start, end, step, query });
-    if (isError) MessagePlugin.error(`[${name}] Check Your Network Or Query Params !!!`, 10 * 1000);
-    console.log(name, data?.metricData, data?.emptyData);
+    if (isError) MessagePlugin.error(`[${name}] Check Your Network Or Query Params !!!`);
     return {
       ...line,
-      data: data?.emptyData ? [] : data?.metricData,
+      data: isError || data?.emptyData ? [] : data?.metricData,
     };
   });
 };
@@ -78,16 +77,16 @@ const buildLineChartOption = (lineStyle: LineStyle | undefined, linesData: ISeri
           type: 'line',
           data: series.data,
           showSymbol: false,
-      }));
+        }));
   return {
     tooltip: {
       trigger: 'axis',
       axisPointer: {
         type: 'cross',
         label: {
-          backgroundColor: '#6a7985'
-        }
-      }
+          backgroundColor: '#6a7985',
+        },
+      },
     },
     legend: {
       data: legend,
@@ -148,8 +147,8 @@ const SeriesLineChart = ({
   const [presets] = useState<Record<string, [Date, Date]>>({
     [t('最近7天')]: [dayjs().subtract(6, 'day').toDate(), dayjs().toDate()],
     [t('最近3天')]: [dayjs().subtract(2, 'day').toDate(), dayjs().toDate()],
-    [t('最近2天')]: [dayjs().subtract(24, 'h').toDate(), dayjs().toDate()],
-    [t('最近1天')]: [dayjs().subtract(1, 'h').toDate(), dayjs().toDate()],
+    [t('最近1天')]: [dayjs().subtract(24, 'h').toDate(), dayjs().toDate()],
+    [t('最近1小时')]: [dayjs().subtract(1, 'h').toDate(), dayjs().toDate()],
   });
 
   const onTimeChange = (time: any) => {

diff --git a/pkg/web/src/layouts/components/Header/index.tsx b/pkg/web/src/layouts/components/Header/index.tsx
@@ -11,6 +11,11 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { ViewListIcon } from 'tdesign-icons-react';
 import { Button, Col, Layout, MessagePlugin, Row, Select } from 'tdesign-react';
 import { useFetchClusterListQuery } from '../../../services/clusterApi';
+import { recommendationRuleApi } from '../../../services/recommendationRuleApi';
+import { recommendationApi } from '../../../services/recommendationApi';
+import { prometheusApi } from '../../../services/prometheusApi';
+import { namespaceApi } from '../../../services/namespaceApi';
+import { grafanaApi } from '../../../services/grafanaApi';
 
 const { Header } = Layout;
 

diff --git a/pkg/web/src/pages/Cost/CarbonInsight/components/CarbonChart.tsx b/pkg/web/src/pages/Cost/CarbonInsight/components/CarbonChart.tsx
@@ -1,19 +1,18 @@
 import React from 'react';
-import {Col, Row} from 'tdesign-react';
+import { Col, Row } from 'tdesign-react';
 import Style from './CarbonChart.module.less';
-import SeriesLineChart, {ISeriesLineChart} from '../../../../components/SeriesLineChart';
-import {useTranslation} from "react-i18next";
-
+import SeriesLineChart, { ISeriesLineChart } from '../../../../components/SeriesLineChart';
+import { useTranslation } from 'react-i18next';
 
 const CarbonChart = () => {
-  const {t} = useTranslation();
+  const { t } = useTranslation();
 
   const item: ISeriesLineChart = {
     title: t('碳排放'),
     subTitle: t('(克/小时)'),
     datePicker: true,
     step: '1h',
-    xAxis: {type: 'time'},
+    xAxis: { type: 'time' },
     lines: [
       {
         name: t('carbon emissions'),

diff --git a/pkg/web/src/pages/Dashboard/Base/components/CpuChart.tsx b/pkg/web/src/pages/Dashboard/Base/components/CpuChart.tsx
@@ -1,20 +1,18 @@
 import React from 'react';
-import {Col, Row} from 'tdesign-react';
+import { Col, Row } from 'tdesign-react';
 import Style from './CpuChart.module.less';
-import SeriesLineChart, {ISeriesLineChart, LineStyle} from '../../../../components/SeriesLineChart';
+import SeriesLineChart, { ISeriesLineChart, LineStyle } from '../../../../components/SeriesLineChart';
 import { useTranslation } from 'react-i18next';
 
-
-
 const CpuChart = () => {
-  const {t} = useTranslation();
-  
+  const { t } = useTranslation();
+
   const item: ISeriesLineChart = {
     title: 'CPU 资源使用',
     subTitle: '(Core)',
     datePicker: true,
     step: '1h',
-    xAxis: {type: 'time'},
+    xAxis: { type: 'time' },
     lines: [
       {
         name: 'capacity',
@@ -51,4 +49,4 @@ const CpuChart = () => {
   );
 };
 
-export default React.memo(CpuChart);
+export default React.memo(CpuChart);
diff --git a/pkg/web/src/pages/Dashboard/Base/components/MemoryChart.tsx b/pkg/web/src/pages/Dashboard/Base/components/MemoryChart.tsx
@@ -1,19 +1,18 @@
 import React from 'react';
-import {Col, Row} from 'tdesign-react';
+import { Col, Row } from 'tdesign-react';
 import Style from './MemoryChart.module.less';
-import SeriesLineChart, {ISeriesLineChart} from '../../../../components/SeriesLineChart';
+import SeriesLineChart, { ISeriesLineChart } from '../../../../components/SeriesLineChart';
 import { useTranslation } from 'react-i18next';
 
-
 const MemoryChart = () => {
-  const {t} = useTranslation();
-  
+  const { t } = useTranslation();
+
   const item: ISeriesLineChart = {
     title: t('Memory 资源使用'),
     subTitle: '( GB )',
     datePicker: true,
     step: '1h',
-    xAxis: {type: 'time'},
+    xAxis: { type: 'time' },
     lines: [
       {
         name: 'capacity',
@@ -51,4 +50,4 @@ const MemoryChart = () => {
   );
 };
 
-export default React.memo(MemoryChart);
+export default React.memo(MemoryChart);
diff --git a/pkg/web/src/pages/Dashboard/Base/components/MiddleChart.tsx b/pkg/web/src/pages/Dashboard/Base/components/MiddleChart.tsx
@@ -1,14 +1,13 @@
 import React from 'react';
-import {Col, Row} from 'tdesign-react';
+import { Col, Row } from 'tdesign-react';
 import Style from './MiddleChart.module.less';
-import SeriesLineChart, {LineStyle} from '../../../../components/SeriesLineChart';
+import SeriesLineChart, { LineStyle } from '../../../../components/SeriesLineChart';
 import PieChart from '../../../../components/PieChart';
-import {useTranslation} from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { useCraneDiscount } from 'hooks';
 
 const MiddleChart = () => {
-
-  const {t} = useTranslation();
+  const { t } = useTranslation();
 
   const craneDiscount: any = useCraneDiscount();
 
@@ -64,6 +63,6 @@ sum(
       </Col>
     </Row>
   );
-}
+};
 
 export default React.memo(MiddleChart);
diff --git a/pkg/web/src/pages/Dashboard/Base/components/TopPanel.tsx b/pkg/web/src/pages/Dashboard/Base/components/TopPanel.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import {Col, Row} from 'tdesign-react';
-import Board, {IBoardProps, TimeType} from 'components/BoardChart';
+import { Col, Row } from 'tdesign-react';
+import Board, { IBoardProps, TimeType } from 'components/BoardChart';
 import { useTranslation } from 'react-i18next';
 import { useCraneDiscount } from 'hooks';
 
 const TopPanel = () => {
-  const {t} = useTranslation();
+  const { t } = useTranslation();
 
   const craneDiscount: any = useCraneDiscount();
 
@@ -22,7 +22,7 @@ const TopPanel = () => {
 
   by (node)) * (${craneDiscount}/100.0)`,
       timeType: TimeType.Range,
-      tips: t("过去一个月集群总成本。从安装Crane时间开始，按小时累加集群成本"),
+      tips: t('过去一个月集群总成本。从安装Crane时间开始，按小时累加集群成本'),
     },
     {
       title: t('预估每月成本'),
@@ -35,7 +35,7 @@ const TopPanel = () => {
 
   by (node)) * 730 * (${craneDiscount}/100.0)`,
       timeType: TimeType.Range,
-      tips: t("以最近一小时成本估算未来一个月的成本。每小时成本 * 24 * 30"),
+      tips: t('以最近一小时成本估算未来一个月的成本。每小时成本 * 24 * 30'),
     },
     {
       title: t('预估CPU总成本'),
@@ -49,7 +49,7 @@ const TopPanel = () => {
   ) * 730 * (${craneDiscount}/100.)`,
       countPrefix: '¥ ',
       timeType: TimeType.Range,
-      tips: t("以最近一小时CPU成本估算未来一个月的CPU成本。每小时CPU成本 * 24 * 30"),
+      tips: t('以最近一小时CPU成本估算未来一个月的CPU成本。每小时CPU成本 * 24 * 30'),
     },
     {
       title: t('预估Memory总成本'),
@@ -62,33 +62,35 @@ const TopPanel = () => {
   ) * 730 * (${craneDiscount}/100.)`,
       countPrefix: '¥ ',
       timeType: TimeType.Range,
-      tips: t("以最近一小时Memory成本估算未来一个月的Memory成本。每小时Memory成本 * 24 * 30"),
+      tips: t('以最近一小时Memory成本估算未来一个月的Memory成本。每小时Memory成本 * 24 * 30'),
     },
   ];
 
-  return <Row gutter={[16, 16]}>
-    {PANE_LIST.map((item, index) => (
-      <Col key={item.title} xs={6} xl={3}>
-        <Board
-          title={item.title}
-          trend={item.trend}
-          trendNum={item.trendNum}
-          count={item.count}
-          countPrefix={item.countPrefix}
-          lineColor={item.lineColor}
-          desc={t('自从上周以来')}
-          Icon={item.Icon}
-          dark={index === 0}
-          query={item.query}
-          timeType={item.timeType}
-          start={item.start}
-          end={item.end}
-          step={item.step}
-          tips={item.tips}
-        />
-      </Col>
-    ))}
-  </Row>
+  return (
+    <Row gutter={[16, 16]}>
+      {PANE_LIST.map((item, index) => (
+        <Col key={item.title} xs={6} xl={3}>
+          <Board
+            title={item.title}
+            trend={item.trend}
+            trendNum={item.trendNum}
+            count={item.count}
+            countPrefix={item.countPrefix}
+            lineColor={item.lineColor}
+            desc={t('自从上周以来')}
+            Icon={item.Icon}
+            dark={index === 0}
+            query={item.query}
+            timeType={item.timeType}
+            start={item.start}
+            end={item.end}
+            step={item.step}
+            tips={item.tips}
+          />
+        </Col>
+      ))}
+    </Row>
+  );
 };
 
 export default React.memo(TopPanel);