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

change(ui) - filter series to check for empty flag

Browse source
This commit is contained in:
Shekar Siri 2023-01-06 11:56:12 +01:00
parent 275554b625
commit 9dd8a351d9
4 changed files with 15 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx
View file

@ -11,7 +11,7 @@ interface Props {
series: any;
onRemoveSeries: (seriesIndex: any) => void;
canDelete?: boolean;
supportsEmpty?: boolean;
hideHeader?: boolean;
emptyMessage?: any;
observeChanges?: () => void;
@ -23,7 +23,8 @@ function FilterSeries(props: Props) {
},
canDelete,
hideHeader = false,
emptyMessage = 'Add user event or filter to define the series by clicking Add Step.'
emptyMessage = 'Add user event or filter to define the series by clicking Add Step.',
supportsEmpty = true,
} = props;
const [expanded, setExpanded] = useState(true)
const { series, seriesIndex } = props;
@ -74,6 +75,7 @@ function FilterSeries(props: Props) {
onUpdateFilter={onUpdateFilter}
onRemoveFilter={onRemoveFilter}
onChangeEventsOrder={onChangeEventsOrder}
supportsEmpty={supportsEmpty}
/>
) : (
<div className="color-gray-medium">{emptyMessage}</div>

1
frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx
View file

@ -201,6 +201,7 @@ function WidgetForm(props: Props) {
.map((series: any, index: number) => (
<div className="mb-2" key={series.name}>
<FilterSeries
supportsEmpty={!isClickmap}
observeChanges={() => metric.updateKey('hasChanged', true)}
hideHeader={isTable || isClickmap}
seriesIndex={index}

13
frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx
View file

@ -2,7 +2,7 @@ import React from 'react';
import FilterOperator from '../FilterOperator';
import FilterSelection from '../FilterSelection';
import FilterValue from '../FilterValue';
import { Icon } from 'UI';
import { Icon, Button } from 'UI';
import FilterSource from '../FilterSource';
import { FilterKey, FilterType } from 'App/types/filter/filterType';
import SubFilterItem from '../SubFilterItem';
@ -14,9 +14,10 @@ interface Props {
onRemoveFilter: () => void;
isFilter?: boolean;
saveRequestPayloads?: boolean;
disableDelete?: boolean
}
function FilterItem(props: Props) {
const { isFilter = false, filterIndex, filter, saveRequestPayloads } = props;
const { isFilter = false, filterIndex, filter, saveRequestPayloads, disableDelete = false } = props;
const canShowValues = !(filter.operator === 'isAny' || filter.operator === 'onAny' || filter.operator === 'isUndefined');
const isSubFilter = filter.type === FilterType.SUB_FILTERS;
@ -49,7 +50,7 @@ function FilterItem(props: Props) {
};
return (
<div className="flex items-center hover:bg-active-blue -mx-5 px-5 py-2">
<div className="flex items-center hover:bg-active-blue -mx-5 px-5">
<div className="flex items-start w-full">
{!isFilter && (
<div className="mt-1 flex-shrink-0 border w-6 h-6 text-xs flex items-center justify-center rounded-full bg-gray-light-shade mr-2">
@ -102,10 +103,8 @@ function FilterItem(props: Props) {
</div>
)}
</div>
<div className="flex flex-shrink-0 self-start mt-1 ml-auto px-2">
<div className="cursor-pointer p-1" onClick={props.onRemoveFilter}>
<Icon name="trash" size="14" />
</div>
<div className="flex flex-shrink-0 self-start ml-auto">
<Button disabled={disableDelete} variant="text" icon="trash" onClick={props.onRemoveFilter} size="small" iconSize={14} />
</div>
</div>
);

5
frontend/app/components/shared/Filters/FilterList/FilterList.tsx
View file

@ -12,13 +12,15 @@ interface Props {
hideEventsOrder?: boolean;
observeChanges?: () => void;
saveRequestPayloads?: boolean;
supportsEmpty?: boolean
}
function FilterList(props: Props) {
const { observeChanges = () => {}, filter, hideEventsOrder = false, saveRequestPayloads } = props;
const { observeChanges = () => {}, filter, hideEventsOrder = false, saveRequestPayloads, supportsEmpty = true } = props;
const filters = List(filter.filters);
const hasEvents = filters.filter((i: any) => i.isEvent).size > 0;
const hasFilters = filters.filter((i: any) => !i.isEvent).size > 0;
let rowIndex = 0;
const cannotDeleteFilter = filters.size === 1 && !supportsEmpty;
useEffect(observeChanges, [filters]);
@ -69,6 +71,7 @@ function FilterList(props: Props) {
onUpdate={(filter) => props.onUpdateFilter(filterIndex, filter)}
onRemoveFilter={() => onRemoveFilter(filterIndex)}
saveRequestPayloads={saveRequestPayloads}
disableDelete={cannotDeleteFilter}
/>
) : null
)}