diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomChartTooltip.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomChartTooltip.tsx index 2b57a7a6f..0065eca3b 100644 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomChartTooltip.tsx +++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomChartTooltip.tsx @@ -49,7 +49,7 @@ function CustomTooltip(props: Props) { }; return (
{transformedArray.map((p, index) => ( diff --git a/frontend/app/components/Dashboard/Widgets/common/Styles.js b/frontend/app/components/Dashboard/Widgets/common/Styles.js index 9075bf6f2..5147ba26a 100644 --- a/frontend/app/components/Dashboard/Widgets/common/Styles.js +++ b/frontend/app/components/Dashboard/Widgets/common/Styles.js @@ -50,6 +50,9 @@ export default { tickFormatterBytes: val => Math.round(val / 1024 / 1024), chartMargins: {left: 0, right: 20, top: 10, bottom: 5}, tooltip: { + wrapperStyle: { + zIndex: 999, + }, contentStyle: { padding: '5px', background: 'white', diff --git a/frontend/app/components/Dashboard/components/DashboardOptions/DashboardOptions.tsx b/frontend/app/components/Dashboard/components/DashboardOptions/DashboardOptions.tsx index 38d295f5f..c785109df 100644 --- a/frontend/app/components/Dashboard/components/DashboardOptions/DashboardOptions.tsx +++ b/frontend/app/components/Dashboard/components/DashboardOptions/DashboardOptions.tsx @@ -1,31 +1,57 @@ import React from 'react'; -import { ItemMenu } from 'UI'; import { observer } from 'mobx-react-lite'; -import { useStore } from "App/mstore"; +import { useStore } from 'App/mstore'; import { ENTERPRISE_REQUEIRED } from 'App/constants'; +import { Dropdown, Button } from 'antd'; +import { EllipsisVertical } from 'lucide-react'; +import { Icon } from 'UI'; interface Props { - editHandler: (isTitle: boolean) => void; - deleteHandler: any; - renderReport: any; + editHandler: (isTitle: boolean) => void; + deleteHandler: any; + renderReport: any; } function DashboardOptions(props: Props) { - const { userStore } = useStore(); - const isEnterprise = userStore.isEnterprise; - const { editHandler, deleteHandler, renderReport } = props; - const menuItems = [ - { icon: 'pencil', text: 'Rename', onClick: () => editHandler(true) }, - { icon: 'users', text: 'Visibility & Access', onClick: editHandler }, - { icon: 'trash', text: 'Delete', onClick: deleteHandler }, - { icon: 'pdf-download', text: 'Download Report', onClick: renderReport, disabled: !isEnterprise, tooltipTitle: ENTERPRISE_REQUEIRED } - ] + const { userStore } = useStore(); + const isEnterprise = userStore.isEnterprise; + const { editHandler, deleteHandler, renderReport } = props; - return ( - - ); + const menu = { + items: [ + { + icon: , + key: 'rename', + label: 'Rename', + onClick: () => editHandler(true), + }, + { + icon: , + key: 'visibility', + label: 'Visibility & Access', + onClick: editHandler, + }, + { + icon: , + key: 'delete', + label: 'Delete', + onClick: deleteHandler, + }, + { + icon: , + key: 'download', + label: 'Download Report', + onClick: renderReport, + disabled: !isEnterprise, + tooltipTitle: ENTERPRISE_REQUEIRED, + }, + ], + }; + + return ( + +
{renderModal()} diff --git a/frontend/app/components/Dashboard/components/MetricViewHeader/MetricViewHeader.tsx b/frontend/app/components/Dashboard/components/MetricViewHeader/MetricViewHeader.tsx index b1972c4cb..03877d352 100644 --- a/frontend/app/components/Dashboard/components/MetricViewHeader/MetricViewHeader.tsx +++ b/frontend/app/components/Dashboard/components/MetricViewHeader/MetricViewHeader.tsx @@ -1,29 +1,23 @@ import React, { useEffect } from 'react'; -import { PageTitle, Icon } from 'UI'; -import { Segmented, Button, Popover } from 'antd'; +import { PageTitle } from 'UI'; +import { Button, Popover } from 'antd'; import { PlusOutlined } from '@ant-design/icons'; import AddCardSection from '../AddCardSection/AddCardSection'; import MetricsSearch from '../MetricsSearch'; -import Select from 'Shared/Select'; -import {Select as AntSelect} from 'antd'; import { useStore } from 'App/mstore'; -import { observer, useObserver } from 'mobx-react-lite'; -import { DROPDOWN_OPTIONS } from 'App/constants/card'; +import { observer } from 'mobx-react-lite'; function MetricViewHeader() { const { metricStore } = useStore(); - const filter = metricStore.filter; - const [showAddCardModal, setShowAddCardModal] = React.useState(false); - const modalBgRef = React.useRef(null); - // Set the default sort order to 'desc' useEffect(() => { + // Set the default sort order to 'desc' metricStore.updateKey('sort', { by: 'desc' }); }, [metricStore]); return (
-
+
@@ -31,7 +25,6 @@ function MetricViewHeader() { } trigger={'click'}>
- -
-
- - metricStore.updateKey('filter', { ...filter, type: value.value }) - } - - /> - - - metricStore.updateKey('filter', { ...filter, dashboard: value }) - } - /> -
-
); } export default observer(MetricViewHeader); -function DashboardDropdown({ - onChange, - plain = false, -}: { - plain?: boolean; - onChange: (val: any) => void; -}) { - const { dashboardStore, metricStore } = useStore(); - const dashboardOptions = dashboardStore.dashboards.map((i, l) => ({ - key: `${i.dashboardId}_${l}`, - label: i.name, - value: i.dashboardId, - })); - - return ( -