diff --git a/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx b/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx index fde2b4f4e..3050acb94 100644 --- a/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx +++ b/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx @@ -2,15 +2,27 @@ import React from 'react'; import {Card, Space, Typography, Button} from "antd"; import {useStore} from "App/mstore"; import {eventKeys} from "Types/filter/newFilter"; -import {CLICKMAP, FUNNEL, INSIGHTS, RETENTION, TABLE, USER_PATH} from "App/constants/card"; +import { + CLICKMAP, + ERRORS, + FUNNEL, + INSIGHTS, + PERFORMANCE, + RESOURCE_MONITORING, + RETENTION, + TABLE, + USER_PATH, WEB_VITALS +} from "App/constants/card"; import FilterSeries from "Components/Dashboard/components/FilterSeries/FilterSeries"; import {metricOf} from "App/constants/filterOptions"; import {AudioWaveform, ChevronDown, ChevronUp, PlusIcon} from "lucide-react"; import {observer} from "mobx-react-lite"; import AddStepButton from "Components/Dashboard/components/FilterSeries/AddStepButton"; +import {Icon} from "UI"; +import FilterItem from "Shared/Filters/FilterItem"; +import {FilterKey} from "Types/filter/filterType"; function WidgetFormNew() { - // const [expanded, setExpanded] = React.useState(true); const {metricStore, dashboardStore, aiFiltersStore} = useStore(); const metric: any = metricStore.instance; @@ -20,9 +32,11 @@ function WidgetFormNew() { const isPathAnalysis = metric.metricType === USER_PATH; const excludeFilterKeys = isClickMap || isPathAnalysis ? eventKeys : []; const hasFilters = filtersLength > 0 || eventsLength > 0; + const isPredefined = [ERRORS, PERFORMANCE, RESOURCE_MONITORING, WEB_VITALS].includes(metric.metricType); - return ( + return isPredefined ? : ( <> + { > ); }) + + +const PathAnalysisFilter = observer(({metric}: any) => ( + + {metric.startType === 'start' ? 'Start Point' : 'End Point'} + metric.updateStartPoint(val)} + onRemoveFilter={() => { + }} + /> + +)); + +const AdditionalFilters = observer(() => { + const {metricStore, dashboardStore, aiFiltersStore} = useStore(); + const metric: any = metricStore.instance; + + return ( + <> + {metric.metricType === USER_PATH && } + > + ) +}); + + +const PredefinedMessage = () => ( + + + Filtering and drill-downs will be supported soon for this card type. + +);