GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-16 20:35:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: tags are added in the sidebar (#1153)

Browse Source 
* feat: tags are added in the sidebar

* chore: styles is updated
This commit is contained in:
palash-signoz 2022-05-20 11:43:23 +05:30 committed by GitHub
parent 7d2883df11
commit 4b8bd2e335
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/container/SideNav/index.tsx
View File

@ -1,5 +1,5 @@
import { CheckCircleTwoTone, WarningOutlined } from '@ant-design/icons'; import { CheckCircleTwoTone, WarningOutlined } from '@ant-design/icons';
import { Menu, Typography } from 'antd'; import { Menu, Space, Typography } from 'antd';
import getLocalStorageKey from 'api/browser/localstorage/get'; import getLocalStorageKey from 'api/browser/localstorage/get';
import { IS_SIDEBAR_COLLAPSED } from 'constants/app'; import { IS_SIDEBAR_COLLAPSED } from 'constants/app';
import ROUTES from 'constants/routes'; import ROUTES from 'constants/routes';
@ -19,6 +19,7 @@ import {
Sider, Sider,
SlackButton, SlackButton,
SlackMenuItemContainer, SlackMenuItemContainer,
Tags,
VersionContainer, VersionContainer,
} from './styles'; } from './styles';
@ -96,13 +97,21 @@ function SideNav(): JSX.Element {
selectedKeys={[pathname]} selectedKeys={[pathname]}
mode="inline" mode="inline"
> >
{menus.map(({ to, Icon, name }) => ( {menus.map(({ to, Icon, name, tags }) => (
<Menu.Item <Menu.Item
key={to} key={to}
icon={<Icon />} icon={<Icon />}
onClick={(): void => onClickHandler(to)} onClick={(): void => onClickHandler(to)}
> >
<Typography>{name}</Typography> <Space style={{ position: 'relative' }}>
<Typography>{name}</Typography>
{tags &&
tags.map((e) => (
<Tags color="#177DDC" key={e}>
<Typography.Text strong>{e}</Typography.Text>
</Tags>
))}
</Space>
</Menu.Item> </Menu.Item>
))} ))}
{sidebar.map((props, index) => ( {sidebar.map((props, index) => (

2
frontend/src/container/SideNav/menuItems.ts
View File

@ -41,6 +41,7 @@ const menus: SidebarMenu[] = [
to: ROUTES.SERVICE_MAP, to: ROUTES.SERVICE_MAP,
name: 'Service Map', name: 'Service Map',
Icon: DeploymentUnitOutlined, Icon: DeploymentUnitOutlined,
tags: ['Beta'],
}, },
{ {
Icon: LineChartOutlined, Icon: LineChartOutlined,
@ -63,6 +64,7 @@ interface SidebarMenu {
to: string; to: string;
name: string; name: string;
Icon: typeof ApiOutlined; Icon: typeof ApiOutlined;
tags?: string[];
} }
export default menus; export default menus;

10
frontend/src/container/SideNav/styles.ts
View File

@ -1,4 +1,4 @@
import { Layout, Typography } from 'antd'; import { Layout, Tag, Typography } from 'antd';
import { StyledCSS } from 'container/GantChart/Trace/styles'; import { StyledCSS } from 'container/GantChart/Trace/styles';
import styled, { css } from 'styled-components'; import styled, { css } from 'styled-components';
@ -75,3 +75,11 @@ export const VersionContainer = styled.div`
display: flex; display: flex;
} }
`; `;
export const Tags = styled(Tag)`
&&& {
position: absolute;
top: 0;
border-radius: 0.5rem;
}
`;