Merge Remote Dev into Origin Master

core/src/main/java/datart/core/mappers/ext/StorypageMapperExt.java

@@ -18,7 +18,7 @@ public interface StorypageMapperExt extends StorypageMapper {
 
 
     @Delete({
-            "DELETE FROM storypage sp WHERE sp.storyboard_id = #{storyboardId}"
+            "DELETE FROM storypage WHERE storyboard_id = #{storyboardId}"
     })
     int deleteByStoryboard(String storyboardId);
 }

frontend/src/app/components/Chronograph.tsx

@@ -0,0 +1,66 @@
+/**
+ * Datart
+ *
+ * Copyright 2021
+ *
+ * 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 { Badge, BadgeProps } from 'antd';
+import moment from 'moment';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { FONT_SIZE_LABEL } from 'styles/StyleConstants';
+
+interface ChronographProps {
+  running: boolean;
+  status: BadgeProps['status'];
+}
+
+export function Chronograph({ running, status }: ChronographProps) {
+  const [label, setLabel] = useState('00:00:00.00');
+  const intervalRef = useRef<ReturnType<typeof setInterval>>();
+
+  const clear = useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = void 0;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (running) {
+      const start = Number(new Date());
+      intervalRef.current = setInterval(() => {
+        const current = Number(new Date());
+        setLabel(
+          moment(current - start)
+            .utc()
+            .format('HH:mm:ss.SS'),
+        );
+      }, 10);
+    } else {
+      clear();
+    }
+    return clear;
+  }, [running, clear]);
+
+  return <StyledBadge status={status} text={label} />;
+}
+
+const StyledBadge = styled(Badge)`
+  .ant-badge-status-text {
+    font-size: ${FONT_SIZE_LABEL};
+    color: ${p => p.theme.textColorLight};
+  }
+`;

frontend/src/app/pages/ChartWorkbenchPage/components/ChartOperationPanel/components/ChartTools/ReactChartAdapter.ts

@@ -64,7 +64,6 @@ export default class ReactChartAdapter implements ReactChartAdapterProps {
       React.createElement(this.getComponent(), opt),
       this.domContainer,
     );
-    // TODO: to be implement
   }
 
   private getComponent() {

frontend/src/app/pages/DashBoardPage/components/BoardProvider.tsx

@@ -66,6 +66,13 @@ export const BoardProvider: FC<{
       //
       renderedWidgetById: useCallback(
         wid => {
+          let initialQuery= board.config.initialQuery;
+
+          if (initialQuery=== false && renderMode !== 'schedule') {
+            //zh:如果 initialQuery=== false renderMode !=='schedule' 则不请求数据 en: If initialQuery=== false renderMode !=='schedule' then no data is requested
+            return false;
+          }
+
           if (editing) {
             dispatch(
               renderedEditWidgetAsync({ boardId: board.id, widgetId: wid }),

frontend/src/app/pages/DashBoardPage/pages/Board/index.tsx

@@ -31,10 +31,8 @@ import { BoardProvider } from '../../components/BoardProvider';
 import FullScreenPanel from '../../components/FullScreenPanel';
 import TitleHeader from '../../components/TitleHeader';
 import BoardEditor from '../BoardEditor';
-import {
-  editBoardStackActions,
-  editDashBoardInfoActions,
-} from '../BoardEditor/slice';
+import { editDashBoardInfoActions } from '../BoardEditor/slice';
+import { clearEditBoardState } from '../BoardEditor/slice/actions';
 import AutoBoardCore from './AutoDashboard/AutoBoardCore';
 import FreeBoardCore from './FreeDashboard/FreeBoardCore';
 import { boardActions } from './slice';
@@ -92,7 +90,12 @@ export const Board: React.FC<BoardProps> = memo(
           }),
         );
       }
-      dispatch(editBoardStackActions.updateBoard({} as any));
+
+      // 销毁组件 清除该对象缓存
+      return () => {
+        dispatch(boardActions.clearBoardStateById(boardId));
+        dispatch(clearEditBoardState(boardId));
+      };
     }, [boardId, dispatch, fetchData, searchParams]);
 
     const [showBoardEditor, setShowBoardEditor] = useState(false);

frontend/src/app/pages/DashBoardPage/pages/Board/slice/index.ts

@@ -78,6 +78,14 @@ const boardSlice = createSlice({
         state.viewMap[view.id] = view;
       });
     },
+    clearBoardStateById(state, action: PayloadAction<string>) {
+      const boardId = action.payload;
+      delete state.boardRecord[boardId];
+      delete state.boardInfoRecord[boardId];
+      delete state.widgetRecord[boardId];
+      delete state.widgetInfoRecord[boardId];
+      // can not del :dataCharts、views
+    },
     setGroupWidgetsById(
       state,
       action: PayloadAction<{ boardId: string; widgets: Widget[] }>,
@@ -110,13 +118,7 @@ const boardSlice = createSlice({
         state.viewMap[view.id] = view;
       });
     },
-    clearCacheByBoardId(state, action: PayloadAction<string[]>) {
-      const groupIds = action.payload;
-      groupIds.forEach(id => {
-        delete state.widgetRecord[id];
-        delete state.boardRecord[id];
-      });
-    },
+
     renderedWidgets(
       state,
       action: PayloadAction<{ boardId: string; widgetIds: string[] }>,

frontend/src/app/pages/DashBoardPage/pages/Board/slice/types.ts

@@ -98,6 +98,7 @@ export interface DashboardConfig {
   height: number;
   gridStep: [number, number];
   scaleMode: ScaleModeType;
+  initialQuery: boolean;
 }
 
 export const BoardTypeMap = strEnumType(['auto', 'free']);

frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/SlideSetting/BoardSetting.tsx

@@ -34,6 +34,7 @@ import { useDispatch } from 'react-redux';
 import { editBoardStackActions } from '../../slice';
 import BackgroundSet from './SettingItem/BackgroundSet';
 import NumberSet from './SettingItem/BasicSet/NumberSet';
+import InitialQuerySet from './SettingItem/InitialQuerySet';
 import ScaleModeSet from './SettingItem/ScaleModeSet';
 import { Group, SettingPanel } from './SettingPanel';
 
@@ -56,6 +57,7 @@ export const BoardSetting: FC = memo(() => {
       paddingW: config.containerPadding[0],
       paddingH: config.containerPadding[1],
       rowHeight: config.rowHeight,
+      initialQuery: config.initialQuery=== false ? false : true, // TODO migration 如果initialQuery的值为undefined默认为true 兼容旧的仪表盘没有initialQuery参数的问题 
     };
     form.setFieldsValue({ ...cacheValue.current });
   }, [config, form]);
@@ -74,6 +76,7 @@ export const BoardSetting: FC = memo(() => {
         draft.containerPadding[0] = value.paddingW;
         draft.containerPadding[1] = value.paddingH;
         draft.rowHeight = value.rowHeight;
+        draft.initialQuery= value.initialQuery;
       });
       dispatch(editBoardStackActions.updateBoardConfig(nextConf));
     },
@@ -144,6 +147,11 @@ export const BoardSetting: FC = memo(() => {
               />
             </Group>
           </Panel>
+          <Panel header="查询配置" key="initialQuery" forceRender>
+            <Group>
+              <InitialQuerySet name="initialQuery"></InitialQuerySet>
+            </Group>
+          </Panel>
         </Collapse>
       </Form>
     </SettingPanel>

frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/SlideSetting/SettingItem/InitialQuerySet.tsx

@@ -0,0 +1,34 @@
+/**
+ * Datart
+ *
+ * Copyright 2021
+ *
+ * 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 { Form, Checkbox } from 'antd';
+ import { NamePath } from 'rc-field-form/lib/interface';
+ import React, { FC, memo } from 'react';
+ export const InitialQuerySet: FC<{
+    name: NamePath;
+ }> = memo(({ name}) => {
+   return (
+     <>
+        <Form.Item valuePropName="checked"  name={name}>
+            <Checkbox>初始化自动查询</Checkbox>
+        </Form.Item>
+     </>
+   );
+ });
+
+ export default InitialQuerySet;
+

frontend/src/app/pages/DashBoardPage/pages/BoardEditor/index.tsx

@@ -35,7 +35,7 @@ import {
   selectBoardChartEditorProps,
   selectEditBoard,
 } from './slice/selectors';
-import { getEditBoardDetail } from './slice/thunk';
+import { fetchEditBoardDetail } from './slice/thunk';
 
 // import { loadEditBoardDetail } from './slice/thunk';
 
@@ -62,7 +62,8 @@ export const BoardEditor: React.FC<{
       dispatch(editDashBoardInfoActions.changeChartEditorProps(undefined));
     }, [dispatch]);
     useEffect(() => {
-      dispatch(getEditBoardDetail(dashboardId));
+      // dispatch(getEditBoardDetail(dashboardId));
+      dispatch(fetchEditBoardDetail(dashboardId));
     }, [dashboardId, dispatch]);
 
     const onSaveToWidget = useCallback(

frontend/src/app/pages/DashBoardPage/pages/BoardEditor/slice/actions.ts

@@ -20,13 +20,15 @@ import { ChartEditorBaseProps } from 'app/components/ChartEditor';
 import { boardActions } from 'app/pages/DashBoardPage/pages/Board/slice';
 import {
   ContainerWidgetContent,
+  Dashboard,
   DataChart,
   FilterWidgetContent,
   RelatedView,
   Relation,
   Widget,
   WidgetFilterTypes,
 } from 'app/pages/DashBoardPage/pages/Board/slice/types';
+import { editWidgetInfoActions } from 'app/pages/DashBoardPage/pages/BoardEditor/slice';
 import {
   createInitWidgetConfig,
   createWidget,
@@ -42,7 +44,22 @@ import { addWidgetsToEditBoard, getEditWidgetDataAsync } from './thunk';
 import { HistoryEditBoard } from './types';
 
 const { confirm } = Modal;
-export const deleteWidgetsAction = () => async (dispatch, getState) => {
+export const clearEditBoardState =
+  (boardId: string) => async (dispatch, getState) => {
+    const editBoard = getState().editBoard as HistoryEditBoard;
+    if (editBoard.boardInfo.id !== boardId) {
+      return;
+    }
+    await dispatch(
+      editBoardStackActions.setBoardToEditStack({
+        dashBoard: {} as Dashboard,
+        widgetRecord: {},
+      }),
+    );
+    await dispatch(editDashBoardInfoActions.clearEditBoardInfo());
+    await dispatch(editWidgetInfoActions.clearWidgetInfo());
+  };
+export const deleteWidgetsAction = () => (dispatch, getState) => {
   const editBoard = getState().editBoard as HistoryEditBoard;
   let selectedIds = Object.values(editBoard.widgetInfoRecord)
     .filter(WidgetInfo => WidgetInfo.selected)

frontend/src/app/pages/DashBoardPage/pages/BoardEditor/slice/index.ts

@@ -38,6 +38,12 @@ const editDashBoardInfoSlice = createSlice({
         state[key] = boardInfo[key];
       });
     },
+    clearEditBoardInfo(state) {
+      const boardInfo = getInitBoardInfo('default');
+      Object.keys(boardInfo).forEach(key => {
+        state[key] = boardInfo[key];
+      });
+    },
     changeDashboardEdit(state, action: PayloadAction<boolean>) {
       state.editing = action.payload;
     },
@@ -190,10 +196,10 @@ const widgetInfoRecordSlice = createSlice({
       }
     },
     addWidgetInfos(state, action: PayloadAction<Record<string, WidgetInfo>>) {
-      const widgetInfoRecord = action.payload;
-      const widgetIds = Object.keys(widgetInfoRecord);
+      const widgetInfoMap = action.payload;
+      const widgetIds = Object.keys(widgetInfoMap);
       widgetIds.forEach(id => {
-        state[id] = widgetInfoRecord[id];
+        state[id] = widgetInfoMap[id];
       });
     },
     clearWidgetInfo(state) {

frontend/src/app/pages/DashBoardPage/pages/BoardEditor/slice/thunk.ts

@@ -85,6 +85,7 @@ export const getEditBoardDetail = createAsyncThunk<
     return null;
   },
 );
+
 export const fetchEditBoardDetail = createAsyncThunk<
   null,
   string,

frontend/src/app/pages/DashBoardPage/utils/board.ts

@@ -98,11 +98,8 @@ export const getScheduleBoardInfo = (
 
   return newBoardInfo;
 };
-export const getInitBoardInfo = (
-  id: string,
-  widgetIds: string[] = [],
-): BoardInfo => {
-  return {
+export const getInitBoardInfo = (id: string, widgetIds: string[] = []) => {
+  const boardInfo: BoardInfo = {
     id: id,
     saving: false,
     loading: false,
@@ -133,6 +130,7 @@ export const getInitBoardInfo = (
     hasFetchItems: [],
     boardWidthHeight: [0, 0],
   };
+  return boardInfo;
 };
 
 export const getInitBoardConfig = (boardType: BoardType) => {
@@ -154,6 +152,7 @@ export const getInitBoardConfig = (boardType: BoardType) => {
     containerPadding: [16, 16], //0-100
     rowHeight: 32, //20-200
     cols: LAYOUT_COLS, //2-48    step 2
+    initialQuery:true,
   };
   return dashboardConfig;
 };

frontend/src/app/pages/MainPage/pages/ViewPage/Main/Editor/Toolbar.tsx

@@ -8,6 +8,7 @@ import {
 } from '@ant-design/icons';
 import { Divider, Dropdown, Menu, Select, Space, Tooltip } from 'antd';
 import { ToolbarButton } from 'app/components';
+import { Chronograph } from 'app/components/Chronograph';
 import { CommonFormTypes } from 'globalConstants';
 import React, { memo, useCallback, useContext } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -78,6 +79,9 @@ export const Toolbar = memo(({ allowManage }: ToolbarProps) => {
   const size = useSelector(state =>
     selectCurrentEditingViewAttr(state, { name: 'size' }),
   ) as number;
+  const error = useSelector(state =>
+    selectCurrentEditingViewAttr(state, { name: 'error' }),
+  ) as string;
   const ViewIndex = useSelector(state =>
     selectCurrentEditingViewAttr(state, { name: 'index' }),
   ) as number;
@@ -210,6 +214,18 @@ export const Toolbar = memo(({ allowManage }: ToolbarProps) => {
           >
             <ToolbarButton size="small">{`Limit: ${size}`}</ToolbarButton>
           </Dropdown>
+          <Chronograph
+            running={stage === ViewViewModelStages.Running}
+            status={
+              error
+                ? 'error'
+                : stage >= ViewViewModelStages.Running
+                ? stage === ViewViewModelStages.Running
+                  ? 'processing'
+                  : 'success'
+                : 'default'
+            }
+          />
         </Space>
       </Operates>
       {allowManage && (