This is an automated email from the ASF dual-hosted git repository.
abeizn pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
The following commit(s) were added to refs/heads/main by this push:
new b13a98992 fix(config-ui): the offline page error. (#5415)
b13a98992 is described below
commit b13a98992e6eeebe1022e0c01e0ec304e77c6359
Author: 青湛 <[email protected]>
AuthorDate: Mon Jun 12 15:43:22 2023 +0800
fix(config-ui): the offline page error. (#5415)
* refactor(config-ui): move global store to base layout
* fix(config-ui): the style for buttons component
* fix(config-ui): the offline page error
---
config-ui/src/components/buttons/index.tsx | 2 +-
config-ui/src/hooks/use-auto-refresh.ts | 11 +-
config-ui/src/layouts/base/base.tsx | 192 +++++++++++++++--------------
config-ui/src/main.tsx | 7 +-
config-ui/src/pages/offline/index.tsx | 26 ++--
5 files changed, 127 insertions(+), 111 deletions(-)
diff --git a/config-ui/src/components/buttons/index.tsx
b/config-ui/src/components/buttons/index.tsx
index 4fd3473f9..43580427c 100644
--- a/config-ui/src/components/buttons/index.tsx
+++ b/config-ui/src/components/buttons/index.tsx
@@ -42,7 +42,7 @@ const Wrapper = styled.div<{ position: 'top' | 'bottom';
align: 'left' | 'right'
}
if (align === 'center') {
- return 'justify-content: space-around;';
+ return 'justify-content: center;';
}
}}
diff --git a/config-ui/src/hooks/use-auto-refresh.ts
b/config-ui/src/hooks/use-auto-refresh.ts
index f77fc74b9..b7e524097 100644
--- a/config-ui/src/hooks/use-auto-refresh.ts
+++ b/config-ui/src/hooks/use-auto-refresh.ts
@@ -46,11 +46,18 @@ export const useAutoRefresh = <T>(
useEffect(() => {
timer.current = setInterval(() => {
+ setLoading(true);
retryCount.current += 1;
- request().then((data) => setData(data));
+ request()
+ .then((data) => {
+ setData(data);
+ })
+ .finally(() => {
+ setLoading(false);
+ });
}, option?.interval ?? 5000);
return () => clearInterval(timer.current);
- }, [...deps]);
+ }, []);
useEffect(() => {
if (option?.cancel?.(data) || (option?.retryLimit && option?.retryLimit <=
retryCount.current)) {
diff --git a/config-ui/src/layouts/base/base.tsx
b/config-ui/src/layouts/base/base.tsx
index 520112bb4..1ed4c4f81 100644
--- a/config-ui/src/layouts/base/base.tsx
+++ b/config-ui/src/layouts/base/base.tsx
@@ -18,10 +18,11 @@
import { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
-import { Menu, MenuItem, Tag, Navbar, Intent, Alignment, Button } from
'@blueprintjs/core';
+import { Menu, MenuItem, Tag, Navbar, Intent, Alignment } from
'@blueprintjs/core';
import { PageLoading, Logo, ExternalLink } from '@/components';
import { useTips, useRefreshData } from '@/hooks';
+import { TipsContextProvider, ConnectionContextProvider } from '@/store';
import { history } from '@/utils/history';
import DashboardIcon from '@/images/icons/dashborad.svg';
@@ -45,6 +46,7 @@ export const BaseLayout = ({ children }: Props) => {
const { ready, data } = useRefreshData<{ version: string }>(() =>
API.getVersion(), []);
const [userInfo, setUserInfo] = useState<API.UserInfo | null>(null);
+
useEffect(() => {
API.getUserInfo().then(setUserInfo);
}, []);
@@ -69,100 +71,104 @@ export const BaseLayout = ({ children }: Props) => {
}
return (
- <S.Wrapper>
- <S.Sider>
- <Logo />
- <Menu className="menu">
- {menu.map((it) => {
- const paths = [it.path, ...(it.children ?? []).map((cit) =>
cit.path)];
- const active = !!paths.find((path) => pathname.includes(path));
- return (
- <MenuItem
- key={it.key}
- className="menu-item"
- text={it.title}
- icon={it.icon}
- active={active}
- onClick={() => handlePushPath(it)}
- >
- {it.children?.map((cit) => (
+ <TipsContextProvider>
+ <ConnectionContextProvider>
+ <S.Wrapper>
+ <S.Sider>
+ <Logo />
+ <Menu className="menu">
+ {menu.map((it) => {
+ const paths = [it.path, ...(it.children ?? []).map((cit) =>
cit.path)];
+ const active = !!paths.find((path) => pathname.includes(path));
+ return (
<MenuItem
- key={cit.key}
- className="sub-menu-item"
- text={
- <S.SiderMenuItem>
- <span>{cit.title}</span>
- {cit.isBeta && <Tag intent={Intent.WARNING}>beta</Tag>}
- </S.SiderMenuItem>
- }
- icon={cit.icon ?? <img src={cit.iconUrl} width={16} alt=""
/>}
- active={pathname.includes(cit.path)}
- disabled={cit.disabled}
- onClick={() => handlePushPath(cit)}
- />
- ))}
- </MenuItem>
- );
- })}
- </Menu>
- <div className="copyright">
- <div>Apache 2.0 License</div>
- <div className="version">{data.version}</div>
- </div>
- </S.Sider>
- <S.Main>
- <S.Header>
- <Navbar.Group align={Alignment.RIGHT}>
- <S.DashboardIcon>
- <ExternalLink link={getGrafanaUrl()}>
- <img src={DashboardIcon} alt="dashboards" />
- <span>Dashboards</span>
- </ExternalLink>
- </S.DashboardIcon>
- <Navbar.Divider />
- <a href="https://devlake.apache.org/docs/Configuration/Tutorial";
rel="noreferrer" target="_blank">
- <img src={FileIcon} alt="documents" />
- <span>Docs</span>
- </a>
- <Navbar.Divider />
- <ExternalLink link="/api/swagger/index.html">
- <img src={APIIcon} alt="api" />
- <span>API</span>
- </ExternalLink>
- <Navbar.Divider />
- <a
- href="https://github.com/apache/incubator-devlake";
- rel="noreferrer"
- target="_blank"
- className="navIconLink"
- >
- <img src={GitHubIcon} alt="github" />
- <span>GitHub</span>
- </a>
- <Navbar.Divider />
- <a
-
href="https://join.slack.com/t/devlake-io/shared_invite/zt-17b6vuvps-x98pqseoUagM7EAmKC82xQ";
- rel="noreferrer"
- target="_blank"
- >
- <img src={SlackIcon} alt="slack" />
- <span>Slack</span>
- </a>
- {userInfo && userInfo.logoutURI && (
- <>
+ key={it.key}
+ className="menu-item"
+ text={it.title}
+ icon={it.icon}
+ active={active}
+ onClick={() => handlePushPath(it)}
+ >
+ {it.children?.map((cit) => (
+ <MenuItem
+ key={cit.key}
+ className="sub-menu-item"
+ text={
+ <S.SiderMenuItem>
+ <span>{cit.title}</span>
+ {cit.isBeta && <Tag
intent={Intent.WARNING}>beta</Tag>}
+ </S.SiderMenuItem>
+ }
+ icon={cit.icon ?? <img src={cit.iconUrl} width={16}
alt="" />}
+ active={pathname.includes(cit.path)}
+ disabled={cit.disabled}
+ onClick={() => handlePushPath(cit)}
+ />
+ ))}
+ </MenuItem>
+ );
+ })}
+ </Menu>
+ <div className="copyright">
+ <div>Apache 2.0 License</div>
+ <div className="version">{data.version}</div>
+ </div>
+ </S.Sider>
+ <S.Main>
+ <S.Header>
+ <Navbar.Group align={Alignment.RIGHT}>
+ <S.DashboardIcon>
+ <ExternalLink link={getGrafanaUrl()}>
+ <img src={DashboardIcon} alt="dashboards" />
+ <span>Dashboards</span>
+ </ExternalLink>
+ </S.DashboardIcon>
+ <Navbar.Divider />
+ <a
href="https://devlake.apache.org/docs/Configuration/Tutorial"; rel="noreferrer"
target="_blank">
+ <img src={FileIcon} alt="documents" />
+ <span>Docs</span>
+ </a>
+ <Navbar.Divider />
+ <ExternalLink link="/api/swagger/index.html">
+ <img src={APIIcon} alt="api" />
+ <span>API</span>
+ </ExternalLink>
<Navbar.Divider />
- <span>{userInfo.email}</span>
+ <a
+ href="https://github.com/apache/incubator-devlake";
+ rel="noreferrer"
+ target="_blank"
+ className="navIconLink"
+ >
+ <img src={GitHubIcon} alt="github" />
+ <span>GitHub</span>
+ </a>
<Navbar.Divider />
- <a href={userInfo.logoutURI}>Sign Out</a>
- </>
- )}
- </Navbar.Group>
- </S.Header>
- <S.Inner>
- <S.Content>{children}</S.Content>
- </S.Inner>
- {tips && <S.Tips>{tips}</S.Tips>}
- </S.Main>
- </S.Wrapper>
+ <a
+
href="https://join.slack.com/t/devlake-io/shared_invite/zt-17b6vuvps-x98pqseoUagM7EAmKC82xQ";
+ rel="noreferrer"
+ target="_blank"
+ >
+ <img src={SlackIcon} alt="slack" />
+ <span>Slack</span>
+ </a>
+ {userInfo && userInfo.logoutURI && (
+ <>
+ <Navbar.Divider />
+ <span>{userInfo.email}</span>
+ <Navbar.Divider />
+ <a href={userInfo.logoutURI}>Sign Out</a>
+ </>
+ )}
+ </Navbar.Group>
+ </S.Header>
+ <S.Inner>
+ <S.Content>{children}</S.Content>
+ </S.Inner>
+ {tips && <S.Tips>{tips}</S.Tips>}
+ </S.Main>
+ </S.Wrapper>
+ </ConnectionContextProvider>
+ </TipsContextProvider>
);
};
diff --git a/config-ui/src/main.tsx b/config-ui/src/main.tsx
index 5108af853..96e41f49b 100644
--- a/config-ui/src/main.tsx
+++ b/config-ui/src/main.tsx
@@ -20,7 +20,6 @@ import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { ErrorBoundary } from '@/components';
-import { ConnectionContextProvider, TipsContextProvider } from '@/store';
import App from './App';
@@ -29,11 +28,7 @@ import './index.css';
ReactDOM.render(
<BrowserRouter>
<ErrorBoundary>
- <ConnectionContextProvider>
- <TipsContextProvider>
- <App />
- </TipsContextProvider>
- </ConnectionContextProvider>
+ <App />
</ErrorBoundary>
</BrowserRouter>,
document.getElementById('root'),
diff --git a/config-ui/src/pages/offline/index.tsx
b/config-ui/src/pages/offline/index.tsx
index eaf1ea199..dc5e64742 100644
--- a/config-ui/src/pages/offline/index.tsx
+++ b/config-ui/src/pages/offline/index.tsx
@@ -16,17 +16,19 @@
*
*/
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
import { useHistory } from 'react-router-dom';
-import { Icon, Tag, ButtonGroup, Button, Intent, Colors, IconName } from
'@blueprintjs/core';
+import { Icon, Tag, Button, Intent, Colors, IconName } from
'@blueprintjs/core';
import { DEVLAKE_ENDPOINT } from '@/config';
-import { Card } from '@/components';
+import { Card, Buttons } from '@/components';
import { useAutoRefresh } from '@/hooks';
import * as API from './api';
export const OfflinePage = () => {
+ const [version, setVersion] = useState(1);
+
const history = useHistory();
const { loading, data } = useAutoRefresh<{ online: boolean }>(
@@ -38,7 +40,7 @@ export const OfflinePage = () => {
return { online: false };
}
},
- [],
+ [version],
{
cancel: (data) => {
return data?.online ?? false;
@@ -74,14 +76,20 @@ export const OfflinePage = () => {
Please wait for the
<strong>Lake API</strong> to start before accessing the
<strong>Configuration Interface</strong>.
</p>
- <ButtonGroup>
- <Button loading={loading} icon="refresh" intent={Intent.PRIMARY}
text="Refresh" />
- </ButtonGroup>
+ <Buttons position="bottom" align="center">
+ <Button
+ loading={loading}
+ icon="refresh"
+ intent={Intent.PRIMARY}
+ text="Refresh"
+ onClick={() => setVersion((v) => v + 1)}
+ />
+ </Buttons>
</>
) : (
<>
<p>Connectivity to the Lake API service was successful.</p>
- <ButtonGroup>
+ <Buttons position="bottom" align="center">
<Button intent={Intent.PRIMARY} text="Continue"
onClick={handleContinue} />
<Button
icon="help"
@@ -94,7 +102,7 @@ export const OfflinePage = () => {
)
}
/>
- </ButtonGroup>
+ </Buttons>
</>
)}
</Card>
