refactor: dashboard variables

* refactor: dashboard variables * refactor: dashboard variables * refactor: 优化大盘刷新逻辑 * refactor: 刷新间隔提示 * refactor: add copyright and license * refactor: clean useless code * refactor: variables set default value * fix: dasboard variable * refactor: filter variable value options * fix: update dashboard configs exception * refactor: dashboard variables * append panel
n9e · Jun 24, 2022 · bd1a4e7 · bd1a4e7
1 parent 6f837be
commit bd1a4e7
Show file tree

Hide file tree

Showing 28 changed files with 1,151 additions and 596 deletions.
diff --git a/src/components/DateRangePicker/index.tsx b/src/components/DateRangePicker/index.tsx
@@ -19,6 +19,7 @@ import { Popover, Button, DatePicker } from 'antd';
 import { CaretDownOutlined, CloseCircleFilled } from '@ant-design/icons';
 import moment, { unitOfTime, Moment } from 'moment';
 import classNames from 'classnames';
+import _ from 'lodash';
 import './index.less';
 import { useTranslation } from 'react-i18next';
 import { TooltipPlacement } from 'antd/es/tooltip';
@@ -177,10 +178,12 @@ export default function DateRangePicker(props: Props) {
     setVisible(false);
   };
 
-  const emitValue = (value: Range) => {
-    onChange && onChange(value);
-    if (value) {
-      setLabel(formatLabel(value, unit));
+  const emitValue = (val: Range) => {
+    if (!_.isEqual(_.omit(value, 'refreshFlag'), _.omit(val, 'refreshFlag'))) {
+      onChange && onChange(val);
+    }
+    if (val) {
+      setLabel(formatLabel(val, unit));
     } else {
       setLabel('选择时间');
     }

diff --git a/src/pages/TargetsMap/MetricSelect.tsx b/src/pages/TargetsMap/MetricSelect.tsx
diff --git a/src/pages/TargetsMap/index.tsx b/src/pages/TargetsMap/index.tsx
diff --git a/src/pages/TargetsMap/style.less b/src/pages/TargetsMap/style.less
diff --git a/src/pages/TargetsMap/utils.ts b/src/pages/TargetsMap/utils.ts
diff --git a/src/pages/dashboard/Components/Refresh/index.tsx b/src/pages/dashboard/Components/Refresh/index.tsx
@@ -15,9 +15,10 @@
  *
  */
 import React, { useState, useEffect, useRef, useImperativeHandle } from 'react';
-import { Dropdown, Button, Menu } from 'antd';
+import { Dropdown, Button, Menu, Tooltip } from 'antd';
 import { DownOutlined, SyncOutlined } from '@ant-design/icons';
 import _ from 'lodash';
+import { Range, formatPickerDate } from '@/components/DateRangePicker';
 import './style.less';
 
 const refreshMap = {
@@ -34,14 +35,20 @@ const refreshMap = {
 };
 
 interface IProps {
+  range: Range;
+  step: number | null;
   onRefresh: () => void;
 }
 
 const intervalSecondsCache = _.toNumber(window.localStorage.getItem('refresh-interval-seconds'));
 
 function Refresh(props: IProps, ref) {
+  const { range, step } = props;
   const [intervalSeconds, setIntervalSeconds] = useState(intervalSecondsCache);
   const intervalRef = useRef<NodeJS.Timeout>();
+  let { start, end } = formatPickerDate(range);
+  let _step = step;
+  if (!step) _step = Math.max(Math.floor((end - start) / 250), 1);
 
   useEffect(() => {
     if (intervalRef.current) {
@@ -71,7 +78,9 @@ function Refresh(props: IProps, ref) {
 
   return (
     <div className='refresh-container'>
-      <Button className='refresh-btn' icon={<SyncOutlined />} onClick={props.onRefresh} />
+      <Tooltip title={`刷新间隔小于 step(${_step}s) 将不会更新数据`}>
+        <Button className='refresh-btn' icon={<SyncOutlined />} onClick={props.onRefresh} />
+      </Tooltip>
       <Dropdown
         trigger={['click']}
         overlay={

diff --git a/src/pages/dashboard/Context.tsx b/src/pages/dashboard/Context.tsx
@@ -1,4 +1,20 @@
-import React, { createContext, useReducer, useContext } from 'react';
+/*
+ * Copyright 2022 Nightingale Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+import React, { createContext, useReducer } from 'react';
 
 export const Context = createContext<any>({});
 

diff --git a/src/pages/dashboard/Detail/Title.tsx b/src/pages/dashboard/Detail/Title.tsx
@@ -40,14 +40,12 @@ interface IProps {
   setRange: (range: Range) => void;
   step: number | null;
   setStep: (step: number | null) => void;
-  refreshFlag: string;
-  setRefreshFlag: (refreshFlag: string) => void;
   refreshRef: any;
   onAddPanel: (type: string) => void;
 }
 
 export default function Title(props: IProps) {
-  const { curCluster, clusters, setCurCluster, dashboard, setDashboard, refresh, range, setRange, step, setStep, refreshFlag, setRefreshFlag, refreshRef, onAddPanel } = props;
+  const { curCluster, clusters, setCurCluster, dashboard, setDashboard, refresh, range, setRange, step, setStep, refreshRef, onAddPanel } = props;
   const { id, name } = dashboard;
   const history = useHistory();
   const [titleEditing, setTitleEditing] = useState(false);
@@ -73,7 +71,6 @@ export default function Title(props: IProps) {
           ...range,
           refreshFlag: newRefreshFlag,
         });
-        setRefreshFlag(newRefreshFlag);
       }
       refresh(false);
     },
@@ -157,7 +154,7 @@ export default function Title(props: IProps) {
                       onClick={(_) => {
                         setCurCluster(cluster);
                         localStorage.setItem('curCluster', cluster);
-                        refresh();
+                        refresh(true);
                       }}
                     >
                       {cluster}
@@ -171,9 +168,14 @@ export default function Title(props: IProps) {
               </Button>
             </Dropdown>
           </div>
-          <DateRangePicker value={range} onChange={setRange} />
+          <DateRangePicker
+            value={range}
+            onChange={(val) => {
+              setRange(val);
+            }}
+          />
           <Resolution onChange={(v) => setStep(v)} initialValue={step} />
-          <Refresh onRefresh={run} ref={refreshRef} />
+          <Refresh range={range} step={step} onRefresh={run} ref={refreshRef} />
         </Space>
       </div>
     </div>