refactor: support setting default cluster

jsers · jsers · commit 9008af2c2d88 · 2022-10-18T21:05:11.000+08:00
diff --git a/src/components/Graph/api.ts b/src/components/Graph/api.ts
@@ -39,7 +39,7 @@ export const fetchHistory = (params?, signalKey?) => {
   });
 };
 
-export const fetchHistoryBatch = (data, signalKey) => {
+export const fetchHistoryBatch = (data, signalKey, datasourceValue) => {
   const controller = new AbortController();
   const { signal } = controller;
   if (signalKey && signals[signalKey] && signals[signalKey].abort) {
@@ -50,6 +50,9 @@ export const fetchHistoryBatch = (data, signalKey) => {
     method: RequestMethod.Post,
     data,
     signal,
+    headers: {
+      'X-Cluster': datasourceValue,
+    },
   }).finally(() => {
     delete signals[signalKey];
   });
diff --git a/src/pages/chart/index.tsx b/src/pages/chart/index.tsx
@@ -147,6 +147,7 @@ export default function Chart() {
                         },
                       },
                     })}
+                    datasourceValue={curCluster}
                     isPreview
                   />
                 </div>
diff --git a/src/pages/dashboard/Detail/Detail.tsx b/src/pages/dashboard/Detail/Detail.tsx
@@ -61,7 +61,6 @@ export default function DetailV2({ isPreview = false }: { isPreview?: boolean })
   const { id } = useParams<URLParam>();
   const refreshRef = useRef<{ closeRefresh: Function }>();
   const { clusters } = useSelector<CommonRootState, CommonStoreState>((state) => state.common);
-  const [curCluster, setCurCluster] = useState<string>(localCluster || clusters[0]);
   const [dashboard, setDashboard] = useState<Dashboard>({
     create_by: '',
     favorite: 0,
@@ -71,6 +70,7 @@ export default function DetailV2({ isPreview = false }: { isPreview?: boolean })
     update_at: 0,
     update_by: '',
   });
+  const [curCluster, setCurCluster] = useState<string>();
   const [variableConfig, setVariableConfig] = useState<IVariable[]>();
   const [variableConfigWithOptions, setVariableConfigWithOptions] = useState<IVariable[]>();
   const [dashboardLinks, setDashboardLinks] = useState<ILink[]>();
@@ -94,6 +94,10 @@ export default function DetailV2({ isPreview = false }: { isPreview?: boolean })
     getDashboard(id).then((res) => {
       updateAtRef.current = res.update_at;
       setDashboard(res);
+      if (!curCluster) {
+        const dashboardConfigs: any = JSONParse(res.configs);
+        setCurCluster(dashboardConfigs.datasourceValue || localCluster || clusters[0]);
+      }
       if (res.configs) {
         const configs = JSONParse(res.configs);
         // TODO: configs 中可能没有 var 属性会导致 VariableConfig 报错
@@ -156,6 +160,8 @@ export default function DetailV2({ isPreview = false }: { isPreview?: boolean })
     }
   }, 2000);
 
+  if (!curCluster) return null;
+
   return (
     <PageLayout
       customArea={
diff --git a/src/pages/dashboard/Editor/Form.tsx b/src/pages/dashboard/Editor/Form.tsx
@@ -72,7 +72,9 @@ function FormCpt(props, ref) {
             <div style={{ marginBottom: 10, height: 300 }}>
               <Form.Item shouldUpdate noStyle>
                 {({ getFieldsValue }) => {
-                  return <Renderer dashboardId={id} time={range} step={step} values={getFieldsValue()} variableConfig={variableConfigWithOptions} isPreview />;
+                  return (
+                    <Renderer datasourceValue={cluster} dashboardId={id} time={range} step={step} values={getFieldsValue()} variableConfig={variableConfigWithOptions} isPreview />
+                  );
                 }}
               </Form.Item>
             </div>
diff --git a/src/pages/dashboard/List/Form.tsx b/src/pages/dashboard/List/Form.tsx
@@ -14,17 +14,19 @@
  * limitations under the License.
  *
  */
-import React from 'react';
+import React, { useEffect } from 'react';
 import _ from 'lodash';
 import { Form, Modal, Input, Select, message } from 'antd';
 import ModalHOC, { ModalWrapProps } from '@/components/ModalHOC';
-import { updateDashboard, createDashboard } from '@/services/dashboardV2';
+import { updateDashboard, createDashboard, updateDashboardConfigs, getDashboard } from '@/services/dashboardV2';
+import { JSONParse } from '../utils';
 
 interface IProps {
   mode: 'crate' | 'edit';
   initialValues?: any;
   busiId: number;
   refreshList: () => void;
+  clusters: string[];
 }
 
 const layout = {
@@ -41,33 +43,58 @@ const titleMap = {
 };
 
 function FormCpt(props: IProps & ModalWrapProps) {
-  const { mode, initialValues = {}, visible, busiId, refreshList, destroy } = props;
+  const { mode, initialValues = {}, visible, busiId, refreshList, destroy, clusters } = props;
   const [form] = Form.useForm();
   const handleOk = async () => {
-    const values = await form.validateFields();
+    try {
+      const values = await form.validateFields();
+      let result;
 
-    if (mode === 'edit') {
-      await updateDashboard(initialValues.id, {
-        name: values.name,
-        tags: _.join(values.tags, ' '),
-      });
-      message.success('编辑大盘成功');
-    } else if (mode === 'crate') {
-      await createDashboard(busiId, {
-        name: values.name,
-        tags: _.join(values.tags, ' '),
-        configs: JSON.stringify({
-          var: [],
-          panels: [],
-          version: '2.0.0',
-        }),
+      if (mode === 'edit') {
+        result = await updateDashboard(initialValues.id, {
+          name: values.name,
+          tags: _.join(values.tags, ' '),
+        });
+        message.success('编辑大盘成功');
+      } else if (mode === 'crate') {
+        result = await createDashboard(busiId, {
+          name: values.name,
+          tags: _.join(values.tags, ' '),
+          configs: JSON.stringify({
+            var: [],
+            panels: [],
+            version: '2.0.0',
+          }),
+        });
+        message.success('新建大盘成功');
+      }
+      if (result) {
+        const configs = JSONParse(result.configs);
+        await updateDashboardConfigs(result.id, {
+          configs: JSON.stringify({
+            ...configs,
+            datasourceValue: values.datasourceValue,
+          }),
+        });
+      }
+      refreshList();
+      destroy();
+    } catch (error) {
+      message.error('操作失败');
+    }
+  };
+
+  useEffect(() => {
+    if (initialValues.id) {
+      getDashboard(initialValues.id).then((res) => {
+        const configs = JSONParse(res.configs);
+        form.setFieldsValue({
+          datasourceValue: configs.datasourceValue,
+        });
       });
-      message.success('新建大盘成功');
     }
+  }, [initialValues.id]);
 
-    refreshList();
-    destroy();
-  };
   return (
     <Modal
       title={titleMap[mode]}
@@ -109,6 +136,23 @@ function FormCpt(props: IProps & ModalWrapProps) {
             placeholder={'请输入分类标签(请用回车分割)'}
           />
         </Form.Item>
+        <Form.Item
+          wrapperCol={{
+            span: 24,
+          }}
+          label='默认集群'
+          name='datasourceValue'
+        >
+          <Select>
+            {_.map(clusters, (item) => {
+              return (
+                <Select.Option key={item} value={item}>
+                  {item}
+                </Select.Option>
+              );
+            })}
+          </Select>
+        </Form.Item>
         <Form.Item name='id' hidden>
           <Input />
         </Form.Item>
diff --git a/src/pages/dashboard/List/Header.tsx b/src/pages/dashboard/List/Header.tsx
@@ -17,7 +17,10 @@
 import React from 'react';
 import { Input, Button, Dropdown, Modal, message } from 'antd';
 import { SearchOutlined, DownOutlined } from '@ant-design/icons';
+import { useSelector } from 'react-redux';
 import { removeDashboards } from '@/services/dashboardV2';
+import { RootState as CommonRootState } from '@/store/common';
+import { CommonStoreState } from '@/store/commonInterface';
 import FormCpt from './Form';
 import Import from './Import';
 
@@ -30,6 +33,7 @@ interface IProps {
 }
 
 export default function Header(props: IProps) {
+  const { clusters } = useSelector<CommonRootState, CommonStoreState>((state) => state.common);
   const { busiId, selectRowKeys, refreshList, searchVal, onSearchChange } = props;
 
   return (
@@ -54,6 +58,7 @@ export default function Header(props: IProps) {
                 mode: 'crate',
                 busiId,
                 refreshList,
+                clusters,
               });
             }}
             ghost
diff --git a/src/pages/dashboard/List/index.tsx b/src/pages/dashboard/List/index.tsx
@@ -23,19 +23,23 @@ import { Table, Tag, Modal, Switch, message } from 'antd';
 import { FundViewOutlined } from '@ant-design/icons';
 import moment from 'moment';
 import _ from 'lodash';
+import { useSelector } from 'react-redux';
 import queryString from 'query-string';
 import { Dashboard as DashboardType } from '@/store/dashboardInterface';
 import { getDashboards, cloneDashboard, removeDashboards, getDashboard, updateDashboardPublic } from '@/services/dashboardV2';
 import PageLayout from '@/components/pageLayout';
 import LeftTree from '@/components/LeftTree';
 import BlankBusinessPlaceholder from '@/components/BlankBusinessPlaceholder';
+import { RootState as CommonRootState } from '@/store/common';
+import { CommonStoreState } from '@/store/commonInterface';
 import Header from './Header';
 import FormCpt from './Form';
 import Export from './Export';
 import { exportDataStringify } from './utils';
 import './style.less';
 
 export default function index() {
+  const { clusters } = useSelector<CommonRootState, CommonStoreState>((state) => state.common);
   const history = useHistory();
   const [busiId, setBusiId] = useState<number>();
   const [list, setList] = useState([]);
@@ -188,6 +192,7 @@ export default function index() {
                             refreshList: () => {
                               setRefreshKey(_.uniqueId('refreshKey_'));
                             },
+                            clusters,
                           });
                         }}
                       >
diff --git a/src/pages/dashboard/Panels/index.tsx b/src/pages/dashboard/Panels/index.tsx
@@ -150,6 +150,7 @@ function index(props: IProps) {
                     step={step}
                     values={item as any}
                     variableConfig={variableConfig}
+                    datasourceValue={curCluster}
                     onCloneClick={() => {
                       const newPanels = updatePanelsInsertNewPanel(panels, {
                         ...item,
diff --git a/src/pages/dashboard/Renderer/Renderer/Timeseries/index.tsx b/src/pages/dashboard/Renderer/Renderer/Timeseries/index.tsx
@@ -41,9 +41,26 @@ interface IProps {
   onClick?: (event: any, datetime: Date, value: number) => void;
 }
 
+function getStartAndEndByTargets(targets: any[]) {
+  let start = undefined as number | undefined;
+  let end = undefined as number | undefined;
+  _.forEach(targets, (target) => {
+    if (target.time) {
+      const { start: targetStart, end: targetEnd } = parseRange(target.time);
+      if (!start || targetStart?.unix()! < start) {
+        start = targetStart?.unix()!;
+      }
+      if (!end || targetEnd?.unix()! > end) {
+        end = targetEnd?.unix()!;
+      }
+    }
+  });
+  return { start, end };
+}
+
 export default function index(props: IProps) {
   const { time, values, series, inDashboard = true, chartHeight = '200px', tableHeight = '200px', themeMode = '', onClick } = props;
-  const { custom, options = {} } = values;
+  const { custom, options = {}, targets } = values;
   const { lineWidth = 1, gradientMode = 'none', scaleDistribution } = custom;
   const [seriesData, setSeriesData] = useState(series);
   const [activeLegend, setActiveLegend] = useState('');
@@ -122,8 +139,9 @@ export default function index(props: IProps) {
     let xAxisDamin = {};
     if (time) {
       const parsedRange = parseRange(time);
-      const start = moment(parsedRange.start).unix();
-      const end = moment(parsedRange.end).unix();
+      const startAndEnd = getStartAndEndByTargets(targets);
+      const start = startAndEnd.start || moment(parsedRange.start).unix();
+      const end = startAndEnd.end || moment(parsedRange.end).unix();
       xAxisDamin = { min: start, max: end };
     }
     if (chartRef.current) {
diff --git a/src/pages/dashboard/Renderer/Renderer/index.tsx b/src/pages/dashboard/Renderer/Renderer/index.tsx
@@ -46,6 +46,7 @@ interface IProps {
   values: IPanel;
   variableConfig?: IVariable[];
   isPreview?: boolean; // 是否是预览，预览中不显示编辑和分享
+  datasourceValue: string;
   onCloneClick?: () => void;
   onShareClick?: () => void;
   onEditClick?: () => void;
@@ -60,7 +61,7 @@ function replaceFieldWithVariable(dashboardId, value: string, variableConfig?: I
 }
 
 function index(props: IProps) {
-  const { themeMode, dashboardId, id, step, variableConfig, isPreview, onCloneClick, onShareClick, onEditClick, onDeleteClick } = props;
+  const { themeMode, dashboardId, id, step, variableConfig, isPreview, datasourceValue, onCloneClick, onShareClick, onEditClick, onDeleteClick } = props;
   const [time, setTime] = useState(props.time);
   const [visible, setVisible] = useState(false);
   const values = _.cloneDeep(props.values);
@@ -74,6 +75,7 @@ function index(props: IProps) {
     step,
     targets: values.targets,
     variableConfig,
+    datasourceValue,
     inViewPort: isPreview || inViewPort,
     datasourceCate: values.datasourceCate || 'prometheus',
     datasourceName: values.datasourceName,
diff --git a/src/pages/dashboard/Renderer/Renderer/style.less b/src/pages/dashboard/Renderer/Renderer/style.less
@@ -1,6 +1,7 @@
 .renderer-container {
   height: 100%;
   background-color: #fff;
+  box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.04);
   &:hover {
     .renderer-header-desc {
       .anticon-info-circle,
diff --git a/src/pages/dashboard/Renderer/datasource/prometheus.ts b/src/pages/dashboard/Renderer/datasource/prometheus.ts
@@ -19,14 +19,15 @@ interface IOptions {
   targets: ITarget[];
   variableConfig?: IVariable[];
   spanNulls?: boolean;
+  datasourceValue: string;
 }
 
 const getDefaultStepByStartAndEnd = (start: number, end: number) => {
   return Math.max(Math.floor((end - start) / 240), 1);
 };
 
 export default async function prometheusQuery(options: IOptions) {
-  const { dashboardId, id, time, step, targets, variableConfig, spanNulls } = options;
+  const { dashboardId, id, time, step, targets, variableConfig, spanNulls, datasourceValue } = options;
   if (!time.start) return;
   const parsedRange = parseRange(time);
   let start = moment(parsedRange.start).unix();
@@ -73,7 +74,7 @@ export default async function prometheusQuery(options: IOptions) {
         signalKey += `-${target.expr}`;
       }
     });
-    const res = await fetchHistoryBatch({ queries: batchParams }, signalKey);
+    const res = await fetchHistoryBatch({ queries: batchParams }, signalKey, datasourceValue);
     const dat = res.dat || [];
     for (let i = 0; i < dat?.length; i++) {
       var item = {
diff --git a/src/pages/dashboard/Renderer/datasource/useQuery.tsx b/src/pages/dashboard/Renderer/datasource/useQuery.tsx
@@ -37,10 +37,11 @@ interface IProps {
   variableConfig?: IVariable[];
   inViewPort?: boolean;
   spanNulls?: boolean;
+  datasourceValue: string;
 }
 
 export default function usePrometheus(props: IProps) {
-  const { dashboardId, datasourceCate, time, step, targets, variableConfig, inViewPort, spanNulls } = props;
+  const { dashboardId, datasourceCate, time, step, targets, variableConfig, inViewPort, spanNulls, datasourceValue } = props;
   const [series, setSeries] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
   const cachedVariableValues = _.map(variableConfig, (item) => {
@@ -71,7 +72,7 @@ export default function usePrometheus(props: IProps) {
     } else {
       flag.current = false;
     }
-  }, [JSON.stringify(targets), JSON.stringify(time), step, JSON.stringify(variableConfig), JSON.stringify(cachedVariableValues), spanNulls]);
+  }, [JSON.stringify(targets), JSON.stringify(time), step, JSON.stringify(variableConfig), JSON.stringify(cachedVariableValues), spanNulls, datasourceValue]);
 
   useEffect(() => {
     // 如果图表在可视区域内并且没有请求过数据，则请求数据
diff --git a/src/pages/dashboard/VariableConfig/EditItem.tsx b/src/pages/dashboard/VariableConfig/EditItem.tsx
diff --git a/src/pages/dashboard/VariableConfig/EditItems.tsx b/src/pages/dashboard/VariableConfig/EditItems.tsx
diff --git a/src/pages/dashboard/VariableConfig/constant.tsx b/src/pages/dashboard/VariableConfig/constant.tsx
diff --git a/src/pages/dashboard/VariableConfig/index.tsx b/src/pages/dashboard/VariableConfig/index.tsx
diff --git a/src/services/dashboard.ts b/src/services/dashboard.ts
diff --git a/src/services/dashboardV2.ts b/src/services/dashboardV2.ts
