From 540568d29f3292e8ef9f22a4d112abccb4f5fd05 Mon Sep 17 00:00:00 2001 From: dnazarenkosignoz <134951516+dnazarenkosignoz@users.noreply.github.com> Date: Thu, 8 Jun 2023 10:49:33 +0300 Subject: [PATCH] feat: update the SideNav component (#2858) * feat: update the SideNav component * chore: onClick is updated * chore: selected condition is updated * fix: build is fixed --------- Co-authored-by: Nazarenko19 Co-authored-by: Palash Gupta --- frontend/src/constants/routes.ts | 1 + frontend/src/container/SideNav/config.ts | 1 + frontend/src/container/SideNav/helper.ts | 4 +- frontend/src/container/SideNav/index.tsx | 52 ++++----- frontend/src/container/SideNav/menuItems.ts | 84 --------------- frontend/src/container/SideNav/menuItems.tsx | 108 +++++++++++++++++++ frontend/src/utils/permission/index.ts | 1 + 7 files changed, 135 insertions(+), 116 deletions(-) delete mode 100644 frontend/src/container/SideNav/menuItems.ts create mode 100644 frontend/src/container/SideNav/menuItems.tsx diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts index b5a92b3a0e..b618dda805 100644 --- a/frontend/src/constants/routes.ts +++ b/frontend/src/constants/routes.ts @@ -30,6 +30,7 @@ const ROUTES = { HOME_PAGE: '/', PASSWORD_RESET: '/password-reset', LIST_LICENSES: '/licenses', + TRACE_EXPLORER: '/trace-explorer', }; export default ROUTES; diff --git a/frontend/src/container/SideNav/config.ts b/frontend/src/container/SideNav/config.ts index f14da541c7..9938b54278 100644 --- a/frontend/src/container/SideNav/config.ts +++ b/frontend/src/container/SideNav/config.ts @@ -35,4 +35,5 @@ export const routeConfig: Record = { [ROUTES.UN_AUTHORIZED]: [QueryParams.resourceAttributes], [ROUTES.USAGE_EXPLORER]: [QueryParams.resourceAttributes], [ROUTES.VERSION]: [QueryParams.resourceAttributes], + [ROUTES.TRACE_EXPLORER]: [QueryParams.resourceAttributes], }; diff --git a/frontend/src/container/SideNav/helper.ts b/frontend/src/container/SideNav/helper.ts index 6160702336..988f3196b6 100644 --- a/frontend/src/container/SideNav/helper.ts +++ b/frontend/src/container/SideNav/helper.ts @@ -1,8 +1,8 @@ export const getQueryString = ( - avialableParams: string[], + availableParams: string[], params: URLSearchParams, ): string[] => - avialableParams.map((param) => { + availableParams.map((param) => { if (params.has(param)) { return `${param}=${params.get(param)}`; } diff --git a/frontend/src/container/SideNav/index.tsx b/frontend/src/container/SideNav/index.tsx index a65a590589..2fe53d4d44 100644 --- a/frontend/src/container/SideNav/index.tsx +++ b/frontend/src/container/SideNav/index.tsx @@ -1,5 +1,5 @@ import { CheckCircleTwoTone, WarningOutlined } from '@ant-design/icons'; -import { Menu, Space, Typography } from 'antd'; +import { Menu, MenuProps } from 'antd'; import getLocalStorageKey from 'api/browser/localstorage/get'; import { IS_SIDEBAR_COLLAPSED } from 'constants/app'; import ROUTES from 'constants/routes'; @@ -27,7 +27,6 @@ import { Sider, SlackButton, SlackMenuItemContainer, - Tags, VersionContainer, } from './styles'; @@ -42,6 +41,7 @@ function SideNav(): JSX.Element { >((state) => state.app); const { pathname, search } = useLocation(); + const { t } = useTranslation(''); const onCollapse = useCallback(() => { @@ -55,9 +55,9 @@ function SideNav(): JSX.Element { const onClickHandler = useCallback( (to: string) => { const params = new URLSearchParams(search); - const avialableParams = routeConfig[to]; + const availableParams = routeConfig[to]; - const queryString = getQueryString(avialableParams, params); + const queryString = getQueryString(availableParams || [], params); if (pathname !== to) { history.push(`${to}?${queryString.join('&')}`); @@ -66,6 +66,10 @@ function SideNav(): JSX.Element { [pathname, search], ); + const onClickMenuHandler: MenuProps['onClick'] = (e) => { + onClickHandler(e.key); + }; + const onClickSlackHandler = (): void => { window.open('https://signoz.io/slack', '_blank'); }; @@ -104,30 +108,17 @@ function SideNav(): JSX.Element { }, ]; - const currentMenu = useMemo( - () => menus.find((menu) => pathname.startsWith(menu.to)), - [pathname], - ); + const currentMenu = useMemo(() => { + const routeKeys = Object.keys(ROUTES) as (keyof typeof ROUTES)[]; + const currentRouteKey = routeKeys.find((key) => { + const route = ROUTES[key]; + return pathname === route; + }); - const items = [ - ...menus.map(({ to, Icon, name, tags, children }) => ({ - key: to, - icon: , - onClick: (): void => onClickHandler(to), - label: ( - -
{name}
- {tags && - tags.map((e) => ( - - {e} - - ))} - - ), - children, - })), - ]; + if (!currentRouteKey) return null; + + return ROUTES[currentRouteKey]; + }, [pathname]); const sidebarItems = (props: SidebarItem, index: number): SidebarItem => ({ key: `${index}`, @@ -141,10 +132,11 @@ function SideNav(): JSX.Element { {sidebar.map((props, index) => ( ['items'][number][]; -} - -export default menus; diff --git a/frontend/src/container/SideNav/menuItems.tsx b/frontend/src/container/SideNav/menuItems.tsx new file mode 100644 index 0000000000..6254cf84a6 --- /dev/null +++ b/frontend/src/container/SideNav/menuItems.tsx @@ -0,0 +1,108 @@ +import { + AlertOutlined, + AlignLeftOutlined, + ApiOutlined, + BarChartOutlined, + BugOutlined, + DashboardFilled, + DeploymentUnitOutlined, + LineChartOutlined, + MenuOutlined, + SettingOutlined, +} from '@ant-design/icons'; +import { MenuProps, Space, Typography } from 'antd'; +import ROUTES from 'constants/routes'; + +import { Tags } from './styles'; + +type MenuItem = Required['items'][number]; + +export const createLabelWithTags = ( + label: string, + tags: string[], +): JSX.Element => ( + +
{label}
+ {tags.map((tag) => ( + + {tag} + + ))} + +); + +const menus: SidebarMenu[] = [ + { + key: ROUTES.APPLICATION, + label: 'Services', + icon: , + }, + { + key: 'traces', + label: 'Traces', + icon: , + children: [ + { + key: ROUTES.TRACE, + label: 'Traces', + }, + // { + // key: ROUTES.TRACE_EXPLORER, + // label: 'Explorer', + // }, + ], + }, + { + key: ROUTES.LOGS, + label: 'Logs', + icon: , + // label: createLabelWithTags('Logs', ['Beta']), + // children: [ + // { + // key: ROUTES.LOGS, + // label: 'Search', + // }, + // ], + }, + { + key: ROUTES.ALL_DASHBOARD, + label: 'Dashboards', + icon: , + }, + { + key: ROUTES.LIST_ALL_ALERT, + label: 'Alerts', + icon: , + }, + { + key: ROUTES.ALL_ERROR, + label: 'Exceptions', + icon: , + }, + { + key: ROUTES.SERVICE_MAP, + label: 'Service Map', + icon: , + }, + { + key: ROUTES.USAGE_EXPLORER, + label: 'Usage Explorer', + icon: , + }, + { + key: ROUTES.SETTINGS, + label: 'Settings', + icon: , + }, + { + key: ROUTES.INSTRUMENTATION, + label: 'Get Started', + icon: , + }, +]; + +type SidebarMenu = MenuItem & { + tags?: string[]; +}; + +export default menus; diff --git a/frontend/src/utils/permission/index.ts b/frontend/src/utils/permission/index.ts index 3eb9032ba9..62c7c2012e 100644 --- a/frontend/src/utils/permission/index.ts +++ b/frontend/src/utils/permission/index.ts @@ -70,4 +70,5 @@ export const routePermission: Record = { VERSION: ['ADMIN', 'EDITOR', 'VIEWER'], LOGS: ['ADMIN', 'EDITOR', 'VIEWER'], LIST_LICENSES: ['ADMIN'], + TRACE_EXPLORER: ['ADMIN', 'EDITOR', 'VIEWER'], };