jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change(ui): path analysis filter card

Browse source
This commit is contained in:
Shekar Siri 2024-06-27 18:15:06 +02:00
parent 6f793582f6
commit 71aea9b0db
2 changed files with 42 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
frontend/app/components/Dashboard/components/WidgetForm/CardBuilder.tsx
View file

@ -53,7 +53,7 @@ const MetricTabs = ({metric, writeOption}: any) => {
}
return (
<Segmented options={tableOptions} onChange={onChange} selected={metric.metricOf} />
<Segmented options={tableOptions} onChange={onChange} selected={metric.metricOf}/>
)
}
@ -138,19 +138,26 @@ const MetricOptions = ({metric, writeOption}: any) => {
);
};
const PathAnalysisFilter = ({metric}) => (
<div className='form-group flex flex-col'>
{metric.startType === 'start' ? 'Start Point' : 'End Point'}
<FilterItem
hideDelete
filter={metric.startPoint}
allowedFilterKeys={[FilterKey.LOCATION, FilterKey.CLICK, FilterKey.INPUT, FilterKey.CUSTOM]}
onUpdate={val => metric.updateStartPoint(val)}
onRemoveFilter={() => {
}}
/>
</div>
);
const PathAnalysisFilter = observer(({metric}: any) => (
<Card styles={{
body: {padding: '4px 20px'},
header: {padding: '4px 20px', fontSize: '14px', fontWeight: 'bold', borderBottom: 'none'},
}}
title={metric.startType === 'start' ? 'Start Point' : 'End Point'}
>
<div className='form-group flex flex-col'>
{/*{metric.startType === 'start' ? 'Start Point' : 'End Point'}*/}
<FilterItem
hideDelete
filter={metric.startPoint}
allowedFilterKeys={[FilterKey.LOCATION, FilterKey.CLICK, FilterKey.INPUT, FilterKey.CUSTOM]}
onUpdate={val => metric.updateStartPoint(val)}
onRemoveFilter={() => {
}}
/>
</div>
</Card>
));
const SeriesList = observer(() => {
const {metricStore, dashboardStore, aiFiltersStore} = useStore();

36
frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx
View file

@ -35,7 +35,7 @@ function WidgetFormNew() {
const isPredefined = [ERRORS, PERFORMANCE, RESOURCE_MONITORING, WEB_VITALS].includes(metric.metricType);
return isPredefined ? <PredefinedMessage/> : (
<>
<Space direction="vertical" className="w-full">
<AdditionalFilters/>
<Card
styles={{
@ -51,7 +51,7 @@ function WidgetFormNew() {
{hasFilters && (
<FilterSection metric={metric} excludeFilterKeys={excludeFilterKeys}/>
)}
</>
</Space>
);
}
@ -140,17 +140,23 @@ const FilterSection = observer(({metric, excludeFilterKeys}: any) => {
const PathAnalysisFilter = observer(({metric}: any) => (
<div className='form-group flex flex-col'>
{metric.startType === 'start' ? 'Start Point' : 'End Point'}
<FilterItem
hideDelete
filter={metric.startPoint}
allowedFilterKeys={[FilterKey.LOCATION, FilterKey.CLICK, FilterKey.INPUT, FilterKey.CUSTOM]}
onUpdate={val => metric.updateStartPoint(val)}
onRemoveFilter={() => {
}}
/>
</div>
<Card styles={{
body: {padding: '4px 20px'},
header: {padding: '4px 20px', fontSize: '14px', fontWeight: 'bold', borderBottom: 'none'},
}}
title={metric.startType === 'start' ? 'Start Point' : 'End Point'}
>
<div className='form-group flex flex-col'>
<FilterItem
hideDelete
filter={metric.startPoint}
allowedFilterKeys={[FilterKey.LOCATION, FilterKey.CLICK, FilterKey.INPUT, FilterKey.CUSTOM]}
onUpdate={val => metric.updateStartPoint(val)}
onRemoveFilter={() => {
}}
/>
</div>
</Card>
));
const AdditionalFilters = observer(() => {
@ -158,9 +164,9 @@ const AdditionalFilters = observer(() => {
const metric: any = metricStore.instance;
return (
<>
<Space direction="vertical" className="w-full">
{metric.metricType === USER_PATH && <PathAnalysisFilter metric={metric}/>}
</>
</Space>
)
});