This is an automated email from the ASF dual-hosted git repository.
klesh 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 59f02506b fix(config-ui): remove loading from auto refresh (#5496)
59f02506b is described below
commit 59f02506b535403185a46c86c09ef50cc120094a
Author: 青湛 <[email protected]>
AuthorDate: Thu Jun 15 15:53:48 2023 +0800
fix(config-ui): remove loading from auto refresh (#5496)
* fix(config-ui): tips not defined
* fix(config-ui): remove loading from use auto refresh
* refactor(config-ui): remove scope item type from tapd
---
config-ui/src/layouts/base/base.tsx | 198 +++++++++++----------
.../pages/pipeline/components/historical/index.tsx | 12 +-
.../src/pages/pipeline/components/info/index.tsx | 4 +-
.../src/pages/pipeline/components/tasks/index.tsx | 6 +-
config-ui/src/plugins/register/tapd/data-scope.tsx | 7 +-
config-ui/src/plugins/register/tapd/types.ts | 24 ---
6 files changed, 110 insertions(+), 141 deletions(-)
diff --git a/config-ui/src/layouts/base/base.tsx
b/config-ui/src/layouts/base/base.tsx
index 1ed4c4f81..1607fc695 100644
--- a/config-ui/src/layouts/base/base.tsx
+++ b/config-ui/src/layouts/base/base.tsx
@@ -40,6 +40,16 @@ interface Props {
}
export const BaseLayout = ({ children }: Props) => {
+ return (
+ <TipsContextProvider>
+ <ConnectionContextProvider>
+ <Layout>{children}</Layout>
+ </ConnectionContextProvider>
+ </TipsContextProvider>
+ );
+};
+
+export const Layout = ({ children }: Props) => {
const menu = useMenu();
const { pathname } = useLocation();
const { tips } = useTips();
@@ -71,104 +81,100 @@ export const BaseLayout = ({ children }: Props) => {
}
return (
- <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 (
+ <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) => (
<MenuItem
- 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>
+ 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 && (
+ <>
<Navbar.Divider />
- <ExternalLink link="/api/swagger/index.html">
- <img src={APIIcon} alt="api" />
- <span>API</span>
- </ExternalLink>
+ <span>{userInfo.email}</span>
<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 && (
- <>
- <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>
+ <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>
);
};
diff --git a/config-ui/src/pages/pipeline/components/historical/index.tsx
b/config-ui/src/pages/pipeline/components/historical/index.tsx
index 860bd2fd3..570d80665 100644
--- a/config-ui/src/pages/pipeline/components/historical/index.tsx
+++ b/config-ui/src/pages/pipeline/components/historical/index.tsx
@@ -23,7 +23,7 @@ import { saveAs } from 'file-saver';
import { DEVLAKE_ENDPOINT } from '@/config';
import type { ColumnType } from '@/components';
-import { Card, Loading, Table, Inspector, Dialog, IconButton } from
'@/components';
+import { Card, Table, Inspector, Dialog, IconButton } from '@/components';
import { useAutoRefresh } from '@/hooks';
import { formatTime } from '@/utils';
@@ -46,7 +46,7 @@ export const PipelineHistorical = ({ blueprintId }: Props) =>
{
const { version } = usePipeline();
- const { loading, data } = useAutoRefresh<PipelineType[]>(
+ const { data } = useAutoRefresh<PipelineType[]>(
async () => {
const res = await API.getPipelineHistorical(blueprintId);
return res.pipelines;
@@ -127,14 +127,6 @@ export const PipelineHistorical = ({ blueprintId }: Props)
=> {
[],
);
- if (loading) {
- return (
- <Card>
- <Loading />
- </Card>
- );
- }
-
if (!data) {
return <Card>There are no historical runs associated with this
blueprint.</Card>;
}
diff --git a/config-ui/src/pages/pipeline/components/info/index.tsx
b/config-ui/src/pages/pipeline/components/info/index.tsx
index 146cfa793..0ee64a87d 100644
--- a/config-ui/src/pages/pipeline/components/info/index.tsx
+++ b/config-ui/src/pages/pipeline/components/info/index.tsx
@@ -42,7 +42,7 @@ interface Props {
export const PipelineInfo = ({ id, style }: Props) => {
const { version } = usePipeline();
- const { loading, data } = useAutoRefresh<PipelineType>(() =>
API.getPipeline(id), [version], {
+ const { data } = useAutoRefresh<PipelineType>(() => API.getPipeline(id),
[version], {
cancel: (data) => {
return !!(
data &&
@@ -51,7 +51,7 @@ export const PipelineInfo = ({ id, style }: Props) => {
},
});
- if (loading || !data) {
+ if (!data) {
return <Loading />;
}
diff --git a/config-ui/src/pages/pipeline/components/tasks/index.tsx
b/config-ui/src/pages/pipeline/components/tasks/index.tsx
index d9ceb4447..3380aa455 100644
--- a/config-ui/src/pages/pipeline/components/tasks/index.tsx
+++ b/config-ui/src/pages/pipeline/components/tasks/index.tsx
@@ -42,7 +42,7 @@ export const PipelineTasks = ({ id, style }: Props) => {
const { version } = usePipeline();
- const { loading, data } = useAutoRefresh<TaskType[]>(
+ const { data } = useAutoRefresh<TaskType[]>(
async () => {
const taskRes = await API.getPipelineTasks(id);
return taskRes.tasks;
@@ -58,10 +58,6 @@ export const PipelineTasks = ({ id, style }: Props) => {
},
);
- if (loading) {
- return <Loading />;
- }
-
const stages = groupBy(sortBy(data, 'id'), 'pipelineRow');
const handleToggleOpen = () => setIsOpen(!isOpen);
diff --git a/config-ui/src/plugins/register/tapd/data-scope.tsx
b/config-ui/src/plugins/register/tapd/data-scope.tsx
index d8a700ab5..13f3b87b0 100644
--- a/config-ui/src/plugins/register/tapd/data-scope.tsx
+++ b/config-ui/src/plugins/register/tapd/data-scope.tsx
@@ -20,16 +20,15 @@ import { useState } from 'react';
import { DataScopeMillerColumns } from '@/plugins';
-import type { ScopeItemType } from './types';
import * as API from '@/plugins/components/data-scope-miller-columns/api';
import { Button, ControlGroup, InputGroup, Intent } from '@blueprintjs/core';
import { ExternalLink } from '@/components';
interface Props {
connectionId: ID;
- disabledItems?: ScopeItemType[];
- selectedItems: ScopeItemType[];
- onChangeItems: (selectedItems: ScopeItemType[]) => void;
+ disabledItems?: any[];
+ selectedItems: any[];
+ onChangeItems: (selectedItems: any[]) => void;
}
export const DataScope = ({ connectionId, disabledItems, selectedItems,
onChangeItems }: Props) => {
diff --git a/config-ui/src/plugins/register/tapd/types.ts
b/config-ui/src/plugins/register/tapd/types.ts
deleted file mode 100644
index bd33de323..000000000
--- a/config-ui/src/plugins/register/tapd/types.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You 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.
- *
- */
-
-export type ScopeItemType = {
- connectionId: ID;
- id: string;
- name: string;
- // and others
-};
