From cd41b1642fbeb42829e649fd3604e6a6eb089326 Mon Sep 17 00:00:00 2001
From: scottsut <scottsut@163.com>
Date: Fri, 19 Nov 2021 19:18:11 +0800
Subject: [PATCH] feat(View): add chronograph to show query time

---
 frontend/src/app/components/Chronograph.tsx   | 66 +++++++++++++++++++
 .../pages/ViewPage/Main/Editor/Toolbar.tsx    | 16 +++++
 2 files changed, 82 insertions(+)
 create mode 100644 frontend/src/app/components/Chronograph.tsx

diff --git a/frontend/src/app/components/Chronograph.tsx b/frontend/src/app/components/Chronograph.tsx
new file mode 100644
index 000000000..f1de49a6e
--- /dev/null
+++ b/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};
+  }
+`;
diff --git a/frontend/src/app/pages/MainPage/pages/ViewPage/Main/Editor/Toolbar.tsx b/frontend/src/app/pages/MainPage/pages/ViewPage/Main/Editor/Toolbar.tsx
index 0890b4ac9..8afdde047 100644
--- a/frontend/src/app/pages/MainPage/pages/ViewPage/Main/Editor/Toolbar.tsx
+++ b/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 && (