diff --git a/frontend/src/components/TimePreferenceDropDown/config.tsx b/frontend/src/components/TimePreferenceDropDown/config.tsx
new file mode 100644
index 0000000000..bf09498ec7
--- /dev/null
+++ b/frontend/src/components/TimePreferenceDropDown/config.tsx
@@ -0,0 +1,8 @@
+import { Typography } from 'antd';
+import { timeItems } from 'container/NewWidget/RightContainer/timeItems';
+import React from 'react';
+
+export const menuItems = timeItems.map((item) => ({
+ key: item.enum,
+ label: {item.name},
+}));
diff --git a/frontend/src/components/TimePreferenceDropDown/index.tsx b/frontend/src/components/TimePreferenceDropDown/index.tsx
index 0f9a06bc10..8774edbdc9 100644
--- a/frontend/src/components/TimePreferenceDropDown/index.tsx
+++ b/frontend/src/components/TimePreferenceDropDown/index.tsx
@@ -1,10 +1,11 @@
-import { Button, Dropdown, Menu, Typography } from 'antd';
+import { Button, Dropdown, Menu } from 'antd';
import TimeItems, {
timePreferance,
timePreferenceType,
} from 'container/NewWidget/RightContainer/timeItems';
import React, { useCallback } from 'react';
+import { menuItems } from './config';
import { TextContainer } from './styles';
function TimePreference({
@@ -24,15 +25,7 @@ function TimePreference({
return (
- {TimeItems.map((item) => (
-
- {item.name}
-
- ))}
-
- }
+ overlay={}
>
diff --git a/frontend/src/container/ConfigDropdown/Config/index.tsx b/frontend/src/container/ConfigDropdown/Config/index.tsx
index bb9bee69a8..3d356a0af4 100644
--- a/frontend/src/container/ConfigDropdown/Config/index.tsx
+++ b/frontend/src/container/ConfigDropdown/Config/index.tsx
@@ -6,7 +6,6 @@ import { ConfigProps } from 'types/api/dynamicConfigs/getDynamicConfigs';
import ErrorLink from './ErrorLink';
import LinkContainer from './Link';
-import { MenuItem } from './styles';
function HelpToolTip({ config }: HelpToolTipProps): JSX.Element {
const sortedConfig = useMemo(
@@ -16,31 +15,29 @@ function HelpToolTip({ config }: HelpToolTipProps): JSX.Element {
const isDarkMode = useIsDarkMode();
- return (
-
- );
+ return ;
}
interface HelpToolTipProps {
diff --git a/frontend/src/container/ConfigDropdown/Config/styles.ts b/frontend/src/container/ConfigDropdown/Config/styles.ts
index dac63b21a6..4807ea77c2 100644
--- a/frontend/src/container/ConfigDropdown/Config/styles.ts
+++ b/frontend/src/container/ConfigDropdown/Config/styles.ts
@@ -1,10 +1,17 @@
import { Menu } from 'antd';
import styled from 'styled-components';
-export const MenuItem = styled(Menu.Item)`
+export const MenuDropdown = styled(Menu)`
&&& {
- height: 1.75rem;
- display: flex;
- align-items: center;
+ .ant-dropdown,
+ .ant-dropdown-menu,
+ .ant-dropdown-menu-item {
+ padding: 0px;
+ }
+ .ant-menu-item {
+ height: 1.75rem;
+ display: flex;
+ align-items: center;
+ }
}
`;
diff --git a/frontend/src/container/ConfigDropdown/index.tsx b/frontend/src/container/ConfigDropdown/index.tsx
index 123b8a26b8..8390e09167 100644
--- a/frontend/src/container/ConfigDropdown/index.tsx
+++ b/frontend/src/container/ConfigDropdown/index.tsx
@@ -4,14 +4,16 @@ import {
QuestionCircleFilled,
QuestionCircleOutlined,
} from '@ant-design/icons';
-import { Dropdown, Menu, Space } from 'antd';
+import { Dropdown, Space } from 'antd';
import { useIsDarkMode } from 'hooks/useDarkMode';
import React, { useMemo, useState } from 'react';
import { useSelector } from 'react-redux';
import { AppState } from 'store/reducers';
+import { ConfigProps } from 'types/api/dynamicConfigs/getDynamicConfigs';
import AppReducer from 'types/reducer/app';
import HelpToolTip from './Config';
+import { MenuDropdown } from './Config/styles';
function DynamicConfigDropdown({
frontendId,
@@ -32,6 +34,16 @@ function DynamicConfigDropdown({
setIsHelpDropDownOpen(!isHelpDropDownOpen);
};
+ const menuItems = useMemo(
+ () => [
+ {
+ key: '1',
+ label: ,
+ },
+ ],
+ [config],
+ );
+
if (!config) {
return ;
}
@@ -43,11 +55,7 @@ function DynamicConfigDropdown({
-
-
- }
+ overlay={}
visible={isHelpDropDownOpen}
>
diff --git a/frontend/src/container/ListOfDashboard/index.tsx b/frontend/src/container/ListOfDashboard/index.tsx
index d3feaa0bc9..b513df0c6a 100644
--- a/frontend/src/container/ListOfDashboard/index.tsx
+++ b/frontend/src/container/ListOfDashboard/index.tsx
@@ -1,5 +1,6 @@
import { PlusOutlined } from '@ant-design/icons';
import { Card, Dropdown, Menu, Row, TableColumnProps, Typography } from 'antd';
+import { ItemType } from 'antd/es/menu/hooks/useItems';
import createDashboard from 'api/dashboard/create';
import { AxiosError } from 'axios';
import { ResizeTable } from 'components/ResizeTable';
@@ -188,34 +189,33 @@ function ListOfAllDashboard(): JSX.Element {
setUploadedGrafana(uploadedGrafana);
};
- const menu = useMemo(
- () => (
-
- ),
- [createNewDashboard, loading, onNewDashboardHandler, t],
- );
+ const getMenuItems = useCallback(() => {
+ const menuItems: ItemType[] = [];
+ if (createNewDashboard) {
+ menuItems.push({
+ key: t('create_dashboard').toString(),
+ label: t('create_dashboard'),
+ disabled: loading,
+ onClick: onNewDashboardHandler,
+ });
+ }
+
+ menuItems.push({
+ key: t('import_json').toString(),
+ label: t('import_json'),
+ onClick: (): void => onModalHandler(false),
+ });
+
+ menuItems.push({
+ key: t('import_grafana_json').toString(),
+ label: t('import_grafana_json'),
+ onClick: (): void => onModalHandler(true),
+ });
+
+ return menuItems;
+ }, [createNewDashboard, loading, onNewDashboardHandler, t]);
+
+ const menuItems = getMenuItems();
const GetHeader = useMemo(
() => (
@@ -230,7 +230,7 @@ function ListOfAllDashboard(): JSX.Element {
}}
/>
{newDashboard && (
-
+ }>
}
type="primary"
@@ -246,10 +246,10 @@ function ListOfAllDashboard(): JSX.Element {
),
[
getText,
- menu,
newDashboard,
newDashboardState.error,
newDashboardState.loading,
+ menuItems,
],
);
diff --git a/frontend/src/container/SideNav/index.tsx b/frontend/src/container/SideNav/index.tsx
index d8da0d6f65..a033854e86 100644
--- a/frontend/src/container/SideNav/index.tsx
+++ b/frontend/src/container/SideNav/index.tsx
@@ -64,14 +64,16 @@ function SideNav(): JSX.Element {
const isNotCurrentVersion = currentVersion !== latestVersion;
- const sidebar = [
+ const sidebar: SidebarItem[] = [
{
onClick: onClickSlackHandler,
icon: ,
text: Support,
+ key: 'slack',
},
{
onClick: onClickVersionHandler,
+ key: 'version',
icon: isNotCurrentVersion ? (
) : (
@@ -95,6 +97,32 @@ function SideNav(): JSX.Element {
[pathname],
);
+ const items = [
+ ...menus.map(({ to, Icon, name, tags }) => ({
+ key: to,
+ icon: ,
+ onClick: (): void => onClickHandler(to),
+ label: (
+
+ {name}
+ {tags &&
+ tags.map((e) => (
+
+ {e}
+
+ ))}
+
+ ),
+ })),
+ ];
+
+ const sidebarItems = (props: SidebarItem, index: number): SidebarItem => ({
+ key: `${index}`,
+ icon: props.icon,
+ onClick: props.onClick,
+ label: props.text,
+ });
+
return (
+ items={items}
+ />
+ {sidebar.map((props, index) => (
+
+
+
+ ))}
);
}
+interface SidebarItem {
+ onClick: VoidFunction;
+ icon?: React.ReactNode;
+ text?: React.ReactNode;
+ key: string;
+ label?: React.ReactNode;
+}
+
export default SideNav;