This is an automated email from the ASF dual-hosted git repository.
lynwee 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 b5039d2d9 feat(config-ui): use new layout to replace old (#6475)
b5039d2d9 is described below
commit b5039d2d9f5d46c5677647c97d9b714b82f81f13
Author: 青湛 <[email protected]>
AuthorDate: Tue Nov 21 14:43:51 2023 +1300
feat(config-ui): use new layout to replace old (#6475)
---
config-ui/package.json | 1 +
config-ui/src/app/routrer.tsx | 41 +++--
config-ui/src/components/logo/index.tsx | 8 +-
.../pages/blueprint/connection-detail/index.tsx | 12 +-
.../blueprint/detail/blueprint-detail-page.tsx | 6 +-
.../pages/blueprint/detail/configuration-panel.tsx | 2 +-
.../src/pages/blueprint/detail/status-panel.tsx | 2 +-
config-ui/src/pages/blueprint/home/index.tsx | 8 +-
config-ui/src/routes/api-keys/api-keys.tsx | 2 +-
config-ui/src/routes/layout/config.tsx | 116 +++++++++++++
config-ui/src/routes/layout/layout.tsx | 188 ++++++++-------------
config-ui/src/routes/layout/use-menu.ts | 77 ---------
config-ui/src/routes/pipeline/pipeline.tsx | 4 +-
config-ui/src/routes/pipeline/pipelines.tsx | 4 +-
config-ui/yarn.lock | 1 +
15 files changed, 240 insertions(+), 232 deletions(-)
diff --git a/config-ui/package.json b/config-ui/package.json
index 8e97c8d06..4376c7c7d 100644
--- a/config-ui/package.json
+++ b/config-ui/package.json
@@ -23,6 +23,7 @@
},
"dependencies": {
"@ahooksjs/use-url-state": "^3.5.1",
+ "@ant-design/icons": "^5.2.6",
"@blueprintjs/core": "^5.3.0",
"@blueprintjs/datetime2": "^1.0.10",
"@blueprintjs/popover2": "^2.0.10",
diff --git a/config-ui/src/app/routrer.tsx b/config-ui/src/app/routrer.tsx
index c3e86021b..8ca565965 100644
--- a/config-ui/src/app/routrer.tsx
+++ b/config-ui/src/app/routrer.tsx
@@ -72,24 +72,29 @@ export const router = createBrowserRouter([
element: <BlueprintConnectionDetailPage />,
},
{
- path: 'blueprints',
- element: <BlueprintHomePage />,
- },
- {
- path: 'blueprints/:id',
- element: <BlueprintDetailPage />,
- },
- {
- path: 'blueprints/:bid/:unique',
- element: <BlueprintConnectionDetailPage />,
- },
- {
- path: 'pipelines',
- element: <Pipelines />,
- },
- {
- path: 'pipeline/:id',
- element: <Pipeline />,
+ path: 'advanced',
+ children: [
+ {
+ path: 'blueprints',
+ element: <BlueprintHomePage />,
+ },
+ {
+ path: 'blueprints/:id',
+ element: <BlueprintDetailPage />,
+ },
+ {
+ path: 'blueprints/:bid/:unique',
+ element: <BlueprintConnectionDetailPage />,
+ },
+ {
+ path: 'pipelines',
+ element: <Pipelines />,
+ },
+ {
+ path: 'pipeline/:id',
+ element: <Pipeline />,
+ },
+ ],
},
{
path: 'keys',
diff --git a/config-ui/src/components/logo/index.tsx
b/config-ui/src/components/logo/index.tsx
index 23362c9e4..f60e8ac98 100644
--- a/config-ui/src/components/logo/index.tsx
+++ b/config-ui/src/components/logo/index.tsx
@@ -25,9 +25,13 @@ const Wrapper = styled.div`
justify-content: center;
`;
-export const Logo = () => {
+interface Props {
+ style?: React.CSSProperties;
+}
+
+export const Logo = ({ style }: Props) => {
return (
- <Wrapper>
+ <Wrapper style={style}>
<img src={import.meta.env.DEVLAKE_LOGO ?? LogoImg} alt="Logo" />
</Wrapper>
);
diff --git a/config-ui/src/pages/blueprint/connection-detail/index.tsx
b/config-ui/src/pages/blueprint/connection-detail/index.tsx
index 6b821702f..ce9329a30 100644
--- a/config-ui/src/pages/blueprint/connection-detail/index.tsx
+++ b/config-ui/src/pages/blueprint/connection-detail/index.tsx
@@ -101,7 +101,7 @@ export const BlueprintConnectionDetailPage = () => {
});
if (success) {
- navigate(pname ? `/projects/${pname}` : `/blueprints/${blueprint.id}`);
+ navigate(pname ? `/projects/${pname}` :
`/advanced/blueprints/${blueprint.id}`);
}
};
@@ -134,7 +134,9 @@ export const BlueprintConnectionDetailPage = () => {
if (success) {
handleShowTips();
navigate(
- pname ? `/projects/${encodeName(pname)}?tab=configuration` :
`/blueprints/${blueprint.id}?tab=configuration`,
+ pname
+ ? `/projects/${encodeName(pname)}?tab=configuration`
+ : `/advanced/blueprints/${blueprint.id}?tab=configuration`,
);
}
};
@@ -176,9 +178,9 @@ export const BlueprintConnectionDetailPage = () => {
{ name: `Connection - ${connection.name}`, path: '' },
]
: [
- { name: 'Advanced', path: '/blueprints' },
- { name: 'Blueprints', path: '/blueprints' },
- { name: bid as any, path: `/blueprints/${bid}` },
+ { name: 'Advanced', path: '/advanced/blueprints' },
+ { name: 'Blueprints', path: '/advanced/blueprints' },
+ { name: bid as any, path: `/advanced/blueprints/${bid}` },
{ name: `Connection - ${connection.name}`, path: '' },
]
}
diff --git a/config-ui/src/pages/blueprint/detail/blueprint-detail-page.tsx
b/config-ui/src/pages/blueprint/detail/blueprint-detail-page.tsx
index 7d97bf3b4..42d927243 100644
--- a/config-ui/src/pages/blueprint/detail/blueprint-detail-page.tsx
+++ b/config-ui/src/pages/blueprint/detail/blueprint-detail-page.tsx
@@ -30,9 +30,9 @@ export const BlueprintDetailPage = () => {
return (
<PageHeader
breadcrumbs={[
- { name: 'Advanced', path: '/blueprints' },
- { name: 'Blueprints', path: '/blueprints' },
- { name: id, path: `/blueprints/${id}` },
+ { name: 'Advanced', path: '/advanced/blueprints' },
+ { name: 'Blueprints', path: '/advanced/blueprints' },
+ { name: id, path: `/advanced/blueprints/${id}` },
]}
>
<BlueprintDetail id={id} from={FromEnum.blueprint} />
diff --git a/config-ui/src/pages/blueprint/detail/configuration-panel.tsx
b/config-ui/src/pages/blueprint/detail/configuration-panel.tsx
index 1dddb6069..d7f3a755e 100644
--- a/config-ui/src/pages/blueprint/detail/configuration-panel.tsx
+++ b/config-ui/src/pages/blueprint/detail/configuration-panel.tsx
@@ -218,7 +218,7 @@ export const ConfigurationPanel = ({ from, blueprint,
onRefresh, onChangeTab }:
<Link
to={
from === FromEnum.blueprint
- ?
`/blueprints/${blueprint.id}/${cs.plugin}-${cs.connectionId}`
+ ?
`/advanced/blueprints/${blueprint.id}/${cs.plugin}-${cs.connectionId}`
:
`/projects/${encodeName(blueprint.projectName)}/${cs.plugin}-${cs.connectionId}`
}
>
diff --git a/config-ui/src/pages/blueprint/detail/status-panel.tsx
b/config-ui/src/pages/blueprint/detail/status-panel.tsx
index 3f0763b95..07a99d159 100644
--- a/config-ui/src/pages/blueprint/detail/status-panel.tsx
+++ b/config-ui/src/pages/blueprint/detail/status-panel.tsx
@@ -116,7 +116,7 @@ export const StatusPanel = ({ from, blueprint, pipelineId,
onRefresh }: Props) =
});
if (success) {
- navigate('/blueprints');
+ navigate('/advanced/blueprints');
}
};
diff --git a/config-ui/src/pages/blueprint/home/index.tsx
b/config-ui/src/pages/blueprint/home/index.tsx
index 5d8fb0b37..3c78f8e52 100644
--- a/config-ui/src/pages/blueprint/home/index.tsx
+++ b/config-ui/src/pages/blueprint/home/index.tsx
@@ -91,8 +91,8 @@ export const BlueprintHomePage = () => {
return (
<PageHeader
breadcrumbs={[
- { name: 'Advanced', path: '/blueprints' },
- { name: 'Blueprints', path: '/blueprints' },
+ { name: 'Advanced', path: '/advanced/blueprints' },
+ { name: 'Blueprints', path: '/advanced/blueprints' },
]}
>
<S.Wrapper>
@@ -120,7 +120,7 @@ export const BlueprintHomePage = () => {
title: 'Blueprint Name',
key: 'name',
render: (_, { id, name }) => (
- <Link to={`/blueprints/${id}?tab=configuration`} style={{
color: '#292b3f' }}>
+ <Link to={`/advanced/blueprints/${id}?tab=configuration`}
style={{ color: '#292b3f' }}>
<TextTooltip content={name}>{name}</TextTooltip>
</Link>
),
@@ -193,7 +193,7 @@ export const BlueprintHomePage = () => {
width: 100,
align: 'center',
render: (val) => (
- <Link to={`/blueprints/${val}?tab=configuration`}>
+ <Link to={`/advanced/blueprints/${val}?tab=configuration`}>
<IconButton icon="cog" tooltip="Detail" />
</Link>
),
diff --git a/config-ui/src/routes/api-keys/api-keys.tsx
b/config-ui/src/routes/api-keys/api-keys.tsx
index ef3acdcef..f62ba1ad6 100644
--- a/config-ui/src/routes/api-keys/api-keys.tsx
+++ b/config-ui/src/routes/api-keys/api-keys.tsx
@@ -92,7 +92,7 @@ export const ApiKeys = () => {
return (
<PageHeader
- breadcrumbs={[{ name: 'API Keys', path: '/api-keys' }]}
+ breadcrumbs={[{ name: 'API Keys', path: '/keys' }]}
extra={<Button intent={Intent.PRIMARY} icon="plus" text="New API Key"
onClick={() => setModal('create')} />}
>
<p>You can generate and manage your API keys to access the DevLake
API.</p>
diff --git a/config-ui/src/routes/layout/config.tsx
b/config-ui/src/routes/layout/config.tsx
new file mode 100644
index 000000000..b44d97bc0
--- /dev/null
+++ b/config-ui/src/routes/layout/config.tsx
@@ -0,0 +1,116 @@
+/*
+ * 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.
+ *
+ */
+
+import {
+ AppstoreOutlined,
+ ProjectOutlined,
+ ExperimentOutlined,
+ KeyOutlined,
+ DashboardOutlined,
+ FileSearchOutlined,
+ ApiOutlined,
+ GithubOutlined,
+ SlackOutlined,
+} from '@ant-design/icons';
+
+import { DOC_URL } from '@/release';
+
+type MenuItem = {
+ key: string;
+ label: string;
+ icon?: React.ReactNode;
+ children?: MenuItem[];
+};
+
+export const menuItems: MenuItem[] = [
+ {
+ key: '/connections',
+ label: 'Connections',
+ icon: <AppstoreOutlined rev={undefined} />,
+ },
+ {
+ key: '/projects',
+ label: 'Projects',
+ icon: <ProjectOutlined rev={undefined} />,
+ },
+ {
+ key: '/advanced',
+ label: 'Advanced',
+ icon: <ExperimentOutlined rev={undefined} />,
+ children: [
+ {
+ key: '/advanced/blueprints',
+ label: 'Blueprints',
+ },
+ {
+ key: '/advanced/pipelines',
+ label: 'Pipelines',
+ },
+ ],
+ },
+ {
+ key: '/keys',
+ label: 'API Keys',
+ icon: <KeyOutlined rev={undefined} />,
+ },
+];
+
+const getMenuMatchs = (items: MenuItem[], parentKey?: string) => {
+ return items.reduce((pre, cur) => {
+ pre[cur.key] = {
+ ...cur,
+ parentKey,
+ };
+
+ if (cur.children) {
+ pre = { ...pre, ...getMenuMatchs(cur.children, cur.key) };
+ }
+
+ return pre;
+ }, {} as Record<string, MenuItem & { parentKey?: string }>);
+};
+
+export const menuItemsMatch = getMenuMatchs(menuItems);
+
+export const headerItems = [
+ {
+ link: import.meta.env.DEV ?
`${window.location.protocol}//${window.location.hostname}:3002` : `/grafana`,
+ label: 'Dashboards',
+ icon: <DashboardOutlined rev={undefined} />,
+ },
+ {
+ link: DOC_URL.TUTORIAL,
+ label: 'Docs',
+ icon: <FileSearchOutlined rev={undefined} />,
+ },
+ {
+ link: '/api/swagger/index.html',
+ label: 'API',
+ icon: <ApiOutlined rev={undefined} />,
+ },
+ {
+ link: 'https://github.com/apache/incubator-devlake',
+ label: 'GitHub',
+ icon: <GithubOutlined rev={undefined} />,
+ },
+ {
+ link:
'https://join.slack.com/t/devlake-io/shared_invite/zt-26ulybksw-IDrJYuqY1FrdjlMMJhs53Q',
+ label: 'Slack',
+ icon: <SlackOutlined rev={undefined} />,
+ },
+];
diff --git a/config-ui/src/routes/layout/layout.tsx
b/config-ui/src/routes/layout/layout.tsx
index eca5c265b..82f8aae62 100644
--- a/config-ui/src/routes/layout/layout.tsx
+++ b/config-ui/src/routes/layout/layout.tsx
@@ -16,29 +16,27 @@
*
*/
-import { useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
import { useLoaderData, Outlet, useNavigate, useLocation } from
'react-router-dom';
import { CSSTransition } from 'react-transition-group';
-import { Menu, MenuItem, Navbar, Alignment } from '@blueprintjs/core';
+import { Layout as AntdLayout, Menu, Divider } from 'antd';
import { useAppDispatch, useAppSelector } from '@/app/hook';
import { PageLoading, Logo, ExternalLink, IconButton } from '@/components';
import { init, selectError, selectStatus } from '@/features';
-import { DOC_URL } from '@/release';
import { TipsContextProvider, TipsContextConsumer } from '@/store';
-import DashboardIcon from '@/images/icons/dashboard.svg';
-import FileIcon from '@/images/icons/file.svg';
-import APIIcon from '@/images/icons/api.svg';
-import GitHubIcon from '@/images/icons/github.svg';
-import SlackIcon from '@/images/icons/slack.svg';
-
import { loader } from './loader';
-import { useMenu, MenuItemType } from './use-menu';
+import { menuItems, menuItemsMatch, headerItems } from './config';
import * as S from './styled';
import './tips-transition.css';
+const { Sider, Header, Content, Footer } = AntdLayout;
+
export const Layout = () => {
+ const [openKeys, setOpenKeys] = useState<string[]>([]);
+ const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
+
const { version, plugins } = useLoaderData() as Awaited<ReturnType<typeof
loader>>;
const navigate = useNavigate();
@@ -48,14 +46,24 @@ export const Layout = () => {
const status = useAppSelector(selectStatus);
const error = useAppSelector(selectError);
- const menu = useMenu();
-
const tipsRef = useRef(null);
useEffect(() => {
dispatch(init(plugins));
}, []);
+ useEffect(() => {
+ const curMenuItem = menuItemsMatch[pathname];
+ const parentKey = curMenuItem?.parentKey;
+ if (parentKey) {
+ setOpenKeys([parentKey]);
+ }
+ }, []);
+
+ useEffect(() => {
+ setSelectedKeys([pathname]);
+ }, [pathname]);
+
if (['idle', 'loading'].includes(status)) {
return <PageLoading />;
}
@@ -64,122 +72,70 @@ export const Layout = () => {
throw error.message;
}
- const handlePushPath = (it: MenuItemType) => {
- if (!it.path) {
- return;
- }
-
- if (!it.target) {
- navigate(it.path);
- } else {
- window.open(it.path, '_blank');
- }
- };
-
- const getGrafanaUrl = () => {
- const suffix = '/';
- const { protocol, hostname } = window.location;
-
- return import.meta.env.DEV ? `${protocol}//${hostname}:3002${suffix}` :
`/grafana${suffix}`;
- };
-
return (
<TipsContextProvider>
<TipsContextConsumer>
{({ tips, setTips }) => (
- <S.Wrapper>
- <S.Sider style={{ userSelect: 'none' }}>
- <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={cit.key}
- className="sub-menu-item"
- text={
- <S.SiderMenuItem>
- <span>{cit.title}</span>
- </S.SiderMenuItem>
- }
- icon={cit.icon}
- active={pathname.includes(cit.path)}
- disabled={cit.disabled}
- onClick={() => handlePushPath(cit)}
- />
- ))}
- </MenuItem>
- );
- })}
- </Menu>
- <div className="copyright">
- <div>{import.meta.env.DEVLAKE_COPYRIGHT ?? 'Apache 2.0
License'}</div>
- <div className="version">{version}</div>
+ <AntdLayout style={{ minHeight: '100vh' }}>
+ <Sider
+ style={{
+ position: 'fixed',
+ top: 0,
+ bottom: 0,
+ left: 0,
+ height: '100vh',
+ overflow: 'auto',
+ }}
+ >
+ <Logo style={{ padding: 24 }} />
+ <Menu
+ mode="inline"
+ theme="dark"
+ items={menuItems}
+ openKeys={openKeys}
+ selectedKeys={selectedKeys}
+ onSelect={({ key }) => navigate(key)}
+ onOpenChange={(keys) => setOpenKeys(keys)}
+ />
+ <div style={{ position: 'absolute', right: 0, bottom: 20, left:
0, color: '#fff', textAlign: 'center' }}>
+ {version}
</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>
+ </Sider>
+ <AntdLayout style={{ marginLeft: 200 }}>
+ <Header
+ style={{
+ display: 'flex',
+ justifyContent: 'flex-end',
+ alignItems: 'center',
+ padding: '0 24px',
+ height: 50,
+ background: 'transparent',
+ }}
+ >
+ {headerItems.map((item, i) => (
+ <>
+ <ExternalLink key={item.label} link={item.link} style={{
display: 'flex', alignItems: 'center' }}>
+ {item.icon}
+ <span style={{ marginLeft: 4 }}>{item.label}</span>
</ExternalLink>
- </S.DashboardIcon>
- <Navbar.Divider />
- <ExternalLink link={DOC_URL.TUTORIAL}>
- <img src={FileIcon} alt="documents" />
- <span>Docs</span>
- </ExternalLink>
- <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-26ulybksw-IDrJYuqY1FrdjlMMJhs53Q";
- rel="noreferrer"
- target="_blank"
- >
- <img src={SlackIcon} alt="slack" />
- <span>Slack</span>
- </a>
- </Navbar.Group>
- </S.Header>
- <S.Inner>
- <S.Content>
- <Outlet />
- </S.Content>
- </S.Inner>
+ {i !== headerItems.length - 1 && <Divider type="vertical"
/>}
+ </>
+ ))}
+ </Header>
+ <Content style={{ margin: '16px 24px' }}>
+ <Outlet />
+ </Content>
+ <Footer style={{ color: '#a1a1a1', textAlign: 'center' }}>
+ {import.meta.env.DEVLAKE_COPYRIGHT ?? 'Apache 2.0 License'}
+ </Footer>
<CSSTransition in={!!tips} unmountOnExit timeout={300}
nodeRef={tipsRef} classNames="tips">
<S.Tips ref={tipsRef}>
<div className="content">{tips}</div>
<IconButton style={{ color: '#fff' }} icon="cross"
tooltip="Close" onClick={() => setTips('')} />
</S.Tips>
</CSSTransition>
- </S.Main>
- </S.Wrapper>
+ </AntdLayout>
+ </AntdLayout>
)}
</TipsContextConsumer>
</TipsContextProvider>
diff --git a/config-ui/src/routes/layout/use-menu.ts
b/config-ui/src/routes/layout/use-menu.ts
deleted file mode 100644
index 20055f293..000000000
--- a/config-ui/src/routes/layout/use-menu.ts
+++ /dev/null
@@ -1,77 +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.
- *
- */
-
-import { useMemo } from 'react';
-import { IconName } from '@blueprintjs/core';
-
-export type MenuItemType = {
- key: string;
- title: string;
- icon?: IconName;
- path: string;
- children?: MenuItemType[];
- target?: boolean;
- disabled: boolean;
-};
-
-export const useMenu = () => {
- return useMemo(
- () =>
- [
- {
- key: 'connection',
- title: 'Connections',
- icon: 'data-connection',
- path: '/connections',
- },
- {
- key: 'project',
- title: 'Projects',
- icon: 'projects',
- path: '/projects',
- },
- {
- key: 'advanced',
- title: 'Advanced',
- icon: 'pulse',
- // path: '/advanced',
- children: [
- {
- key: 'blueprints',
- title: 'Blueprints',
- icon: '',
- path: '/blueprints',
- },
- {
- key: 'pipelines',
- title: 'Pipelines',
- icon: '',
- path: '/pipelines',
- },
- ],
- },
- {
- key: 'api-keys',
- title: 'API Keys',
- icon: 'key',
- path: '/keys',
- },
- ] as MenuItemType[],
- [],
- );
-};
diff --git a/config-ui/src/routes/pipeline/pipeline.tsx
b/config-ui/src/routes/pipeline/pipeline.tsx
index 1cf17f9b8..bfbec6cfa 100644
--- a/config-ui/src/routes/pipeline/pipeline.tsx
+++ b/config-ui/src/routes/pipeline/pipeline.tsx
@@ -27,8 +27,8 @@ export const Pipeline = () => {
return (
<PageHeader
breadcrumbs={[
- { name: 'Advanced', path: '/blueprints' },
- { name: 'Pipelines', path: '/pipelines' },
+ { name: 'Advanced', path: '/advanced/blueprints' },
+ { name: 'Pipelines', path: '/advanced/pipelines' },
{
name: id as string,
path: `/pipelines/${id}`,
diff --git a/config-ui/src/routes/pipeline/pipelines.tsx
b/config-ui/src/routes/pipeline/pipelines.tsx
index 6fb57a5b6..87180f988 100644
--- a/config-ui/src/routes/pipeline/pipelines.tsx
+++ b/config-ui/src/routes/pipeline/pipelines.tsx
@@ -34,8 +34,8 @@ export const Pipelines = () => {
return (
<PageHeader
breadcrumbs={[
- { name: 'Advanced', path: '/blueprints' },
- { name: 'Pipelines', path: '/pipelines' },
+ { name: 'Advanced', path: '/advanced/blueprints' },
+ { name: 'Pipelines', path: '/advanced/pipelines' },
]}
>
<PipelineTable
diff --git a/config-ui/yarn.lock b/config-ui/yarn.lock
index b705b2993..3b5ce4844 100644
--- a/config-ui/yarn.lock
+++ b/config-ui/yarn.lock
@@ -3315,6 +3315,7 @@ __metadata:
resolution: "config-ui@workspace:."
dependencies:
"@ahooksjs/use-url-state": ^3.5.1
+ "@ant-design/icons": ^5.2.6
"@blueprintjs/core": ^5.3.0
"@blueprintjs/datetime2": ^1.0.10
"@blueprintjs/popover2": ^2.0.10
