This is an automated email from the ASF dual-hosted git repository.
likyh 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 c9a31d598 feat(config-ui): move Dashboard from sidebar to the top
right corner (#4673)
c9a31d598 is described below
commit c9a31d5980f21e9ee70b037dc5f2ee51b565f4ab
Author: coldgust <[email protected]>
AuthorDate: Fri Mar 17 09:33:36 2023 +0800
feat(config-ui): move Dashboard from sidebar to the top right corner (#4673)
* feat(config-ui): move Dashboard from sidebar to the top right corner
* feat(config-ui): move Dashboard from sidebar to the top right corner
---------
Co-authored-by: coldgust <[email protected]>
---
config-ui/src/images/icons/dashborad.svg | 4 ++++
config-ui/src/layouts/base/base.tsx | 16 ++++++++++++++++
config-ui/src/layouts/base/styled.ts | 9 +++++++++
config-ui/src/layouts/base/use-menu.ts | 14 --------------
4 files changed, 29 insertions(+), 14 deletions(-)
diff --git a/config-ui/src/images/icons/dashborad.svg
b/config-ui/src/images/icons/dashborad.svg
new file mode 100644
index 000000000..01eb9653c
--- /dev/null
+++ b/config-ui/src/images/icons/dashborad.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="19" viewBox="0 0 20 19" fill="none"
xmlns="http://www.w3.org/2000/svg";>
+<path d="M9.18553 11.758C8.43428 12.465 7.4539 12.9255 6.11104 12.9255C5.62012
12.9255 5.22215 12.5275 5.22215 12.0366C5.22215 11.5457 5.62012 11.1477 6.11104
11.1477C6.99041 11.1477 7.53781 10.8674 7.96711 10.4634C8.44077 10.0176 8.79435
9.40381 9.2252 8.63787L9.25398 8.58667C9.65058 7.88126 10.1242 7.03886 10.8143
6.38933C11.5656 5.68226 12.546 5.2218 13.8888 5.2218C14.3797 5.2218 14.7777
5.61977 14.7777 6.11069C14.7777 6.60161 14.3797 6.99958 13.8888 6.99958C13.0095
6.99958 12.4621 7. [...]
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8333 1.11068C10.8333
0.65044 10.4602 0.277344 9.99992 0.277344C9.53968 0.277344 9.16658 0.65044
9.16658 1.11068V2.22179H3.33325C1.95254 2.22179 0.833252 3.34108 0.833252
4.72179V13.0551C0.833252 14.4358 1.95254 15.5551 3.33325
15.5551H9.16658V17.2218H6.66658C6.20635 17.2218 5.83325 17.5949 5.83325
18.0551C5.83325 18.5154 6.20635 18.8885 6.66658 18.8885H13.3333C13.7935 18.8885
14.1666 18.5154 14.1666 18.0551C14.1666 17.5949 13.7935 17.2 [...]
+</svg>
diff --git a/config-ui/src/layouts/base/base.tsx
b/config-ui/src/layouts/base/base.tsx
index 51afa45d5..f17ffeebd 100644
--- a/config-ui/src/layouts/base/base.tsx
+++ b/config-ui/src/layouts/base/base.tsx
@@ -26,9 +26,11 @@ import { useVersion } from '@/store';
import FileIcon from '@/images/icons/file.svg';
import GitHubIcon from '@/images/icons/github.svg';
import SlackIcon from '@/images/icons/slack.svg';
+import DashboardIcon from '@/images/icons/dashborad.svg';
import { useMenu, MenuItemType } from './use-menu';
import * as S from './styled';
+import { BorderContainer } from "./styled";
interface Props {
children: React.ReactNode;
@@ -48,6 +50,13 @@ export const BaseLayout = ({ children }: Props) => {
}
};
+ const getGrafanaUrl = () => {
+ const suffix = '/d/lCO8w-pVk/homepage?orgId=1';
+ const { protocol, hostname } = window.location;
+
+ return process.env.LOCAL ? `${protocol}//${hostname}:3002${suffix}` :
`/grafana${suffix}`;
+ };
+
return (
<S.Container>
<S.Sider>
@@ -93,6 +102,13 @@ export const BaseLayout = ({ children }: Props) => {
<S.Inner>
<S.Header>
<Navbar.Group align={Alignment.RIGHT}>
+ <BorderContainer>
+ <a href={getGrafanaUrl()} rel="noreferrer" target="_blank">
+ <img src={DashboardIcon} alt="dashboards" />
+ <span>Dashboards</span>
+ </a>
+ </BorderContainer>
+ <Navbar.Divider />
<a
href="https://devlake.apache.org/docs/UserManuals/ConfigUI/Tutorial/";
rel="noreferrer" target="_blank">
<img src={FileIcon} alt="documents" />
<span>Docs</span>
diff --git a/config-ui/src/layouts/base/styled.ts
b/config-ui/src/layouts/base/styled.ts
index 77fe0fcdf..a13a8e58e 100644
--- a/config-ui/src/layouts/base/styled.ts
+++ b/config-ui/src/layouts/base/styled.ts
@@ -125,3 +125,12 @@ export const SiderMenuItem = styled.div`
margin-left: 8px;
}
`;
+
+export const BorderContainer = styled.div`
+border: 1px solid #7497F7;
+border-radius: 4px;
+padding: 8px 12px;
+display: flex;
+justify-content: center;
+align-items: center;
+`;
\ No newline at end of file
diff --git a/config-ui/src/layouts/base/use-menu.ts
b/config-ui/src/layouts/base/use-menu.ts
index ed3737875..6e282ca0d 100644
--- a/config-ui/src/layouts/base/use-menu.ts
+++ b/config-ui/src/layouts/base/use-menu.ts
@@ -34,13 +34,6 @@ export type MenuItemType = {
};
export const useMenu = () => {
- const getGrafanaUrl = () => {
- const suffix = '/d/lCO8w-pVk/homepage?orgId=1';
- const { protocol, hostname } = window.location;
-
- return process.env.LOCAL ? `${protocol}//${hostname}:3002${suffix}` :
`/grafana${suffix}`;
- };
-
return useMemo(
() =>
[
@@ -92,13 +85,6 @@ export const useMenu = () => {
},
],
},
- {
- key: 'dashboard',
- title: 'Dashboard',
- icon: 'dashboard',
- path: getGrafanaUrl(),
- target: true,
- },
] as MenuItemType[],
[],
);
