From f4fed1a843258d1a10f7caafdb7c34aee51da668 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Mon, 7 Mar 2022 18:37:53 +0100 Subject: [PATCH] fix(ui) - fix network request --- .../CustomMetricWidgetPreview.tsx | 2 +- .../CustomMetrics/FilterSeries/FilterSeries.tsx | 3 +++ .../shared/Filters/FilterItem/FilterItem.tsx | 8 ++++---- frontend/app/duck/search.js | 6 +++--- frontend/app/types/filter/filter.js | 15 +++++++++++++-- frontend/app/types/filter/newFilter.js | 9 ++++----- 6 files changed, 28 insertions(+), 15 deletions(-) diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.tsx index a8c596df6..109243252 100644 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.tsx +++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.tsx @@ -178,7 +178,7 @@ function CustomMetricWidget(props: Props) { { isTable && ( <> { metric.viewType === 'table' ? ( - + ) : ( { filter.value = [""] + if (filter.hasOwnProperty('filters')) { + filter.filters = filter.filters.map(i => ({ ...i, value: [""] })) + } props.addSeriesFilterFilter(seriesIndex, filter); } diff --git a/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx b/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx index f01fefcd8..6a3829699 100644 --- a/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx +++ b/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx @@ -23,7 +23,7 @@ function FilterItem(props: Props) { props.onUpdate({ ...filter, value: [""], - subFilters: filter.subFilters ? filter.subFilters.map(i => ({ ...i, value: [""] })) : [] + filters: filter.filters ? filter.filters.map(i => ({ ...i, value: [""] })) : [] }); }; @@ -38,7 +38,7 @@ function FilterItem(props: Props) { const onUpdateSubFilter = (subFilter, subFilterIndex) => { props.onUpdate({ ...filter, - subFilters: filter.subFilters.map((i, index) => { + filters: filter.filters.map((i, index) => { if (index === subFilterIndex) { return subFilter; } @@ -80,10 +80,10 @@ function FilterItem(props: Props) { )} - {/* SubFilters */} + {/* filters */} {isSubFilter && (
- {filter.subFilters.map((subFilter, subFilterIndex) => ( + {filter.filters.map((subFilter, subFilterIndex) => ( { return Array.isArray(value) ? (value.length === 0 ? [""] : value) : [value]; } -export const filterMap = ({category, value, key, operator, sourceOperator, source, custom, isEvent, subFilters }) => ({ +export const filterMap = ({category, value, key, operator, sourceOperator, source, custom, isEvent, filters }) => ({ value: checkValues(key, value), custom, type: category === FilterCategory.METADATA ? FilterKey.METADATA : key, @@ -115,7 +115,7 @@ export const filterMap = ({category, value, key, operator, sourceOperator, sourc source: category === FilterCategory.METADATA ? key : source, sourceOperator, isEvent, - filters: subFilters ? subFilters.map(filterMap) : [], + filters: filters ? filters.map(filterMap) : [], }); const reduceThenFetchResource = actionCreator => (...args) => (dispatch, getState) => { @@ -234,7 +234,7 @@ export const hasFilterApplied = (filters, filter) => { export const addFilter = (filter) => (dispatch, getState) => { filter.value = checkFilterValue(filter.value); - filter.subFilters = filter.subFilters ? filter.subFilters.map(subFilter => ({ + filter.filters = filter.filters ? filter.filters.map(subFilter => ({ ...subFilter, value: checkFilterValue(subFilter.value), })) : null; diff --git a/frontend/app/types/filter/filter.js b/frontend/app/types/filter/filter.js index 25d62c7cc..3fc61df2f 100644 --- a/frontend/app/types/filter/filter.js +++ b/frontend/app/types/filter/filter.js @@ -96,8 +96,19 @@ export default Record({ startDate, endDate, events: List(events).map(Event), - filters: List(filters).map(i => NewFilter(i).toData()).concat(List(events).map(i => NewFilter(i).toData())), - custom: Map(custom), + filters: List(filters) + .map(i => { + const filter = NewFilter(i).toData(); + if (filter.hasOwnProperty('filters')) { + filter.filters = filter.filters.map(f => ({ ...f, value: [""]})); + // filter.filters = filter.filters.map(f => ({ ...f, value: [""]})); + } + + console.log('filter', filter); + return filter; + }), + // .concat(List(events).map(i => NewFilter(i).toData())), + // custom: Map(custom), } } }); diff --git a/frontend/app/types/filter/newFilter.js b/frontend/app/types/filter/newFilter.js index 7ce792b78..d7c4aac71 100644 --- a/frontend/app/types/filter/newFilter.js +++ b/frontend/app/types/filter/newFilter.js @@ -33,7 +33,7 @@ export const filtersMap = { [FilterKey.USERANONYMOUSID]: { key: FilterKey.USERANONYMOUSID, type: FilterType.MULTIPLE, category: FilterCategory.USER, label: 'User AnonymousId', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/userid' }, // PERFORMANCE - [FilterKey.FETCH]: { key: FilterKey.FETCH, type: FilterType.SUB_FILTERS, category: FilterCategory.PERFORMANCE, operator: 'is', label: 'Network Request', subFilters: [ + [FilterKey.FETCH]: { key: FilterKey.FETCH, type: FilterType.SUB_FILTERS, category: FilterCategory.PERFORMANCE, operator: 'is', label: 'Network Request', filters: [ { key: FilterKey.FETCH_URL, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'with URL', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/fetch' }, { key: FilterKey.FETCH_STATUS_CODE, type: FilterType.NUMBER_MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'with status code', operator: '=', operatorOptions: filterOptions.customOperators, icon: 'filters/fetch' }, { key: FilterKey.FETCH_METHOD, type: FilterType.MULTIPLE_DROPDOWN, category: FilterCategory.PERFORMANCE, label: 'with method', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/fetch', options: filterOptions.methodOptions }, @@ -115,18 +115,17 @@ export default Record({ index: 0, options: [], - subFilters: [], + filters: [], }, { keyKey: "_key", - fromJS: ({ value, key, type, ...filter }) => { + fromJS: ({ value, type, ...filter }) => { const _filter = filtersMap[type]; return { ...filter, ..._filter, key: _filter.key, type: _filter.type, // camelCased(filter.type.toLowerCase()), - value: value.length === 0 ? [""] : value, - // subFilters: filter.subFilters.map(this), + value: value.length === 0 || !value ? [""] : value, } }, })