From 133714a4cbcaafb95f8e63ae70f8f20771e803d7 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Thu, 16 Jun 2022 16:48:25 +0200 Subject: [PATCH] feat(ui) - assist filters with pagination --- .../Alerts/DropdownChips/DropdownChips.js | 2 +- .../DashboardView/DashboardView.tsx | 1 + .../Funnels/FunnelIssues/FunnelIssues.tsx | 2 +- .../WidgetPreview/WidgetPreview.tsx | 1 + .../Filters/FilterDuration/FilterDuration.js | 2 +- .../shared/Filters/FilterItem/FilterItem.tsx | 2 + .../Filters/FilterModal/FilterModal.tsx | 3 +- .../Filters/FilterOperator/FilterOperator.tsx | 4 +- .../FilterSelection/FilterSelection.tsx | 9 ++- .../Filters/FilterValue/FilterValue.tsx | 5 +- .../FilterValueDropdown.tsx | 6 +- .../LiveSessionList/LiveSessionList.tsx | 67 +++++++++---------- .../LiveSessionReloadButton.tsx | 12 ++-- .../LiveSessionSearch/LiveSessionSearch.tsx | 2 - .../app/components/shared/Select/Select.tsx | 4 +- .../SelectDateRange/SelectDateRange.tsx | 5 +- .../components/ListingVisibility.tsx | 2 +- frontend/app/components/ui/Input/Input.tsx | 2 +- frontend/app/duck/customField.js | 1 + frontend/app/duck/liveSearch.js | 39 +++-------- frontend/app/duck/search.js | 2 +- frontend/app/types/filter/newFilter.js | 27 ++++++-- 22 files changed, 100 insertions(+), 100 deletions(-) diff --git a/frontend/app/components/Alerts/DropdownChips/DropdownChips.js b/frontend/app/components/Alerts/DropdownChips/DropdownChips.js index 07698f47c..7a7e81ada 100644 --- a/frontend/app/components/Alerts/DropdownChips/DropdownChips.js +++ b/frontend/app/components/Alerts/DropdownChips/DropdownChips.js @@ -17,7 +17,7 @@ const DropdownChips = ({ } const onSelect = ({ value }) => { - const newSlected = selected.concat(value); + const newSlected = selected.concat(value.value); onChange(newSlected) }; diff --git a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx index fd6bd2ee3..843593200 100644 --- a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx +++ b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx @@ -129,6 +129,7 @@ function DashboardView(props: RouteComponentProps) { plain period={period} onChange={(period: any) => dashboardStore.setPeriod(period)} + right={true} />
diff --git a/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/FunnelIssues.tsx b/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/FunnelIssues.tsx index d1f817a21..e053f2562 100644 --- a/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/FunnelIssues.tsx +++ b/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/FunnelIssues.tsx @@ -7,7 +7,7 @@ import FunnelIssuesSort from '../FunnelIssuesSort'; import FunnelIssuesList from '../FunnelIssuesList'; import { DateTime } from 'luxon'; import { debounce } from 'App/utils'; -import useIsMounted from 'App/hooks/useIsMounted' +import useIsMounted from 'App/hooks/useIsMounted'; import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG'; function FunnelIssues() { diff --git a/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx b/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx index e9c15d165..679da3944 100644 --- a/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx +++ b/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx @@ -66,6 +66,7 @@ function WidgetPreview(props: Props) { dashboardStore.setPeriod(period)} + right={true} />
diff --git a/frontend/app/components/shared/Filters/FilterDuration/FilterDuration.js b/frontend/app/components/shared/Filters/FilterDuration/FilterDuration.js index 6183c6311..34e2fe3b1 100644 --- a/frontend/app/components/shared/Filters/FilterDuration/FilterDuration.js +++ b/frontend/app/components/shared/Filters/FilterDuration/FilterDuration.js @@ -8,7 +8,7 @@ const toMs = value => value !== '' ? value * 1000 * 60 : null export default class FilterDuration extends React.PureComponent { state = { focused: false } - onChange = (e, { name, value }) => { + onChange = ({ target: { name, value }}) => { const { onChange } = this.props; if (typeof onChange === 'function') { onChange({ diff --git a/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx b/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx index 0910b8e4c..1212f1f6c 100644 --- a/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx +++ b/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx @@ -65,6 +65,7 @@ function FilterItem(props: Props) { onChange={onSourceOperatorChange} className="mx-2 flex-shrink-0" value={filter.sourceOperator} + isDisabled={filter.operatorDisabled} /> @@ -78,6 +79,7 @@ function FilterItem(props: Props) { onChange={onOperatorChange} className="mx-2 flex-shrink-0" value={filter.operator} + isDisabled={filter.operatorDisabled} /> { canShowValues && () } diff --git a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx index 5db8bd1ab..5ed5b228f 100644 --- a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx +++ b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx @@ -51,9 +51,8 @@ function FilterModal(props: Props) { } = props; const hasSearchQuery = searchQuery && searchQuery.length > 0; const showSearchList = isMainSearch && searchQuery.length > 0; - console.log('filters', props.filters) - const onFilterSearchClick = (filter) => { + const onFilterSearchClick = (filter: any) => { const _filter = filtersMap[filter.type]; _filter.value = [filter.value]; onFilterClick(_filter); diff --git a/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.tsx b/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.tsx index 9e91df59f..b52a91939 100644 --- a/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.tsx +++ b/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.tsx @@ -57,9 +57,10 @@ interface Props { className?: string; options?: any; value?: string; + isDisabled?: boolean; } function FilterOperator(props: Props) { - const { options, value, onChange, className = '' } = props; + const { options, value, onChange, isDisabled = false, className = '' } = props; return (
@@ -68,6 +69,7 @@ function FilterOperator(props: Props) { options={options} styles={dropdownStyles} placeholder="Select" + isDisabled={isDisabled} defaultValue={ value } onChange={({ value }: any) => onChange(null, { name: 'operator', value })} /> diff --git a/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx b/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx index 5c2e5c32b..91be41af0 100644 --- a/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx +++ b/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx @@ -44,7 +44,10 @@ function FilterSelection(props: Props) { {showModal && (
- +
)}
@@ -52,7 +55,7 @@ function FilterSelection(props: Props) { } export default connect((state: any) => ({ - filters: state.getIn([ 'search', 'filterList' ]), - liveFilters: state.getIn([ 'search', 'filterListLive' ]), + filterList: state.getIn([ 'search', 'filterList' ]), + filterListLive: state.getIn([ 'search', 'filterListLive' ]), isLive: state.getIn([ 'sessions', 'activeTab' ]).type === 'live', }), { })(FilterSelection); \ No newline at end of file diff --git a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx index ffd91bb09..df36a1046 100644 --- a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx +++ b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx @@ -57,17 +57,16 @@ function FilterValue(props: Props) { } const getParms = (key: any) => { - let params = {}; + let params: any = { type: filter.key }; switch (filter.category) { case FilterCategory.METADATA: params = { type: FilterKey.METADATA, key: key }; - default: - params = { type: filter.key }; } if (isRoute(ASSIST_ROUTE, window.location.pathname)) { params = { ...params, live: true }; } + return params; } diff --git a/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx b/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx index 58e3394cf..6123f931d 100644 --- a/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx +++ b/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx @@ -62,7 +62,7 @@ const dropdownStyles = { ...provided, opacity, transition, display: 'flex', alignItems: 'center', - height: '26px', + height: '20px', }; } } @@ -70,7 +70,7 @@ interface Props { filter: any; // event/filter // options: any[]; value: string; - onChange: (e, { name, value }) => void; + onChange: (value: any) => void; className?: string; options: any[]; search?: boolean; @@ -94,7 +94,7 @@ function FilterValueDropdown(props: Props) { options={ options } name="issue_type" defaultValue={ value } - onChange={ onChange } + onChange={ (value: any) => onChange(value.value) } placeholder="Select" styles={dropdownStyles} /> diff --git a/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx b/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx index d44dbe2be..5f536ad20 100644 --- a/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx +++ b/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx @@ -1,14 +1,13 @@ import React, { useEffect } from 'react'; -import { fetchLiveList } from 'Duck/sessions'; import { connect } from 'react-redux'; import { NoContent, Loader, Pagination } from 'UI'; import { List } from 'immutable'; import SessionItem from 'Shared/SessionItem'; import withPermissions from 'HOCs/withPermissions' import { KEYS } from 'Types/filter/customFilter'; -import { applyFilter, addAttribute } from 'Duck/filters'; +import { applyFilter } from 'Duck/liveSearch'; import { FilterKey } from 'App/types/filter/filterType'; -import { addFilterByKeyAndValue, updateCurrentPage, updateSort } from 'Duck/liveSearch'; +import { addFilterByKeyAndValue, updateCurrentPage } from 'Duck/liveSearch'; import Select from 'Shared/Select'; import SortOrderButton from 'Shared/SortOrderButton'; import { capitalize } from 'App/utils'; @@ -18,42 +17,38 @@ const AUTOREFRESH_INTERVAL = .5 * 60 * 1000 const PER_PAGE = 10; interface Props { - loading: Boolean, + loading: boolean, + metaListLoading: boolean list: List, - fetchLiveList: () => Promise, - applyFilter: () => void, - filters: any, - addAttribute: (obj: any) => void, + // fetchLiveList: () => Promise, + applyFilter: (filter: any) => void, + filter: any, + // addAttribute: (obj: any) => void, addFilterByKeyAndValue: (key: FilterKey, value: string) => void, updateCurrentPage: (page: number) => void, currentPage: number, + totla: number, metaList: any, - updateSort: (sort: any) => void, sort: any, + total: number, } function LiveSessionList(props: Props) { - const { loading, filters, list, currentPage, metaList = [], sort } = props; + const { loading, metaListLoading, filter, list, currentPage, total, metaList = [], sort } = props; var timeoutId: any; + const { filters } = filter; const hasUserFilter = filters.map((i: any) => i.key).includes(KEYS.USERID); - const [sessions, setSessions] = React.useState(list); const sortOptions = metaList.map((i: any) => ({ - text: capitalize(i), label: i + label: capitalize(i), value: i })).toJS(); - // useEffect(() => { - // if (filters.size === 0) { - // props.addFilterByKeyAndValue(FilterKey.USERID, ''); - // } - // }, []); - useEffect(() => { - if (metaList.size === 0 || !!sort.field) return; + if (metaListLoading || metaList.size === 0 || !!filter.sort) return; if (sortOptions[0]) { - props.updateSort({ field: sortOptions[0].value }); + props.applyFilter({ sort: sortOptions[0].value }); } - }, [metaList]); + }, [metaListLoading]); // useEffect(() => { // const filteredSessions = filters.size > 0 ? props.list.filter(session => { @@ -77,7 +72,7 @@ function LiveSessionList(props: Props) { // }, [filters, list]); useEffect(() => { - props.fetchLiveList(); + props.applyFilter({ ...filter}); timeout(); return () => { clearTimeout(timeoutId) @@ -93,13 +88,12 @@ function LiveSessionList(props: Props) { } const onSortChange = ({ value }: any) => { - value = value.value - props.updateSort({ field: value }); + props.applyFilter({ sort: value.value }); } const timeout = () => { timeoutId = setTimeout(() => { - props.fetchLiveList(); + props.applyFilter({ ...filter}); timeout(); }, AUTOREFRESH_INTERVAL); } @@ -110,10 +104,10 @@ function LiveSessionList(props: Props) {

Live Sessions - {sessions.size} + {total}

- + props.applyFilter({ ...filter }) } />
@@ -122,12 +116,12 @@ function LiveSessionList(props: Props) { plain right options={sortOptions} - defaultValue={sort.field} + // defaultValue={sort.field} onChange={onSortChange} - value={sort.field} + value={sortOptions.find((i: any) => i.value === filter.sort) || sortOptions[0]} />
- props.updateSort({ order: state })} sortOrder={sort.order} /> + props.applyFilter({ order: state })} sortOrder={filter.order} />
@@ -140,10 +134,10 @@ function LiveSessionList(props: Props) { } image={} - show={ !loading && sessions && sessions.size === 0} + show={ !loading && list.size === 0} > - {sessions.map(session => ( + {list.map(session => ( props.updateCurrentPage(page)} limit={PER_PAGE} /> @@ -172,17 +166,16 @@ export default withPermissions(['ASSIST_LIVE'])(connect( (state: any) => ({ list: state.getIn(['liveSearch', 'list']), loading: state.getIn([ 'liveSearch', 'fetchList', 'loading' ]), - filters: state.getIn([ 'liveSearch', 'instance', 'filters' ]), + metaListLoading: state.getIn([ 'customFields', 'fetchRequest', 'loading' ]), + filter: state.getIn([ 'liveSearch', 'instance' ]), + total: state.getIn([ 'liveSearch', 'total' ]), currentPage: state.getIn(["liveSearch", "currentPage"]), metaList: state.getIn(['customFields', 'list']).map((i: any) => i.key), sort: state.getIn(['liveSearch', 'sort']), }), { - fetchLiveList, applyFilter, - addAttribute, addFilterByKeyAndValue, updateCurrentPage, - updateSort, } )(LiveSessionList)); diff --git a/frontend/app/components/shared/LiveSessionReloadButton/LiveSessionReloadButton.tsx b/frontend/app/components/shared/LiveSessionReloadButton/LiveSessionReloadButton.tsx index c4de7dd19..f55f5ca91 100644 --- a/frontend/app/components/shared/LiveSessionReloadButton/LiveSessionReloadButton.tsx +++ b/frontend/app/components/shared/LiveSessionReloadButton/LiveSessionReloadButton.tsx @@ -1,19 +1,19 @@ import React from 'react' import ReloadButton from '../ReloadButton' import { connect } from 'react-redux' -import { fetchSessions } from 'Duck/liveSearch' +// import { fetchSessions } from 'Duck/liveSearch' interface Props { loading: boolean - fetchSessions: typeof fetchSessions + onClick: () => void } function LiveSessionReloadButton(props: Props) { - const { loading } = props + const { loading, onClick } = props return ( - props.fetchSessions()} className="cursor-pointer" /> + ) } -export default connect(state => ({ +export default connect((state: any) => ({ loading: state.getIn([ 'sessions', 'fetchLiveListRequest', 'loading' ]), -}), { fetchSessions })(LiveSessionReloadButton) +}))(LiveSessionReloadButton) diff --git a/frontend/app/components/shared/LiveSessionSearch/LiveSessionSearch.tsx b/frontend/app/components/shared/LiveSessionSearch/LiveSessionSearch.tsx index 6b4f73d81..289a05ac0 100644 --- a/frontend/app/components/shared/LiveSessionSearch/LiveSessionSearch.tsx +++ b/frontend/app/components/shared/LiveSessionSearch/LiveSessionSearch.tsx @@ -1,11 +1,9 @@ import React from 'react'; import FilterList from 'Shared/Filters/FilterList'; import FilterSelection from 'Shared/Filters/FilterSelection'; -import SaveFilterButton from 'Shared/SaveFilterButton'; import { connect } from 'react-redux'; import { Button } from 'UI'; import { edit, addFilter } from 'Duck/liveSearch'; -import SaveFunnelButton from '../SaveFunnelButton'; interface Props { appliedFilter: any; diff --git a/frontend/app/components/shared/Select/Select.tsx b/frontend/app/components/shared/Select/Select.tsx index 1f02b476d..44d13f2ac 100644 --- a/frontend/app/components/shared/Select/Select.tsx +++ b/frontend/app/components/shared/Select/Select.tsx @@ -16,9 +16,9 @@ interface Props { [x:string]: any; } export default function({ name = '', onChange, right = false, plain = false, options, isSearchable = false, components = {}, styles = {}, defaultValue = '', ...rest }: Props) { - const defaultSelected = options.find(o => o.value === defaultValue) || options[0]; + const defaultSelected = defaultValue ? (options.find(o => o.value === defaultValue) || options[0]): null; const customStyles = { - option: (provided, state) => ({ + option: (provided: any, state: any) => ({ ...provided, whiteSpace: 'nowrap', transition: 'all 0.3s', diff --git a/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx b/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx index d349b9354..13573b4d5 100644 --- a/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx +++ b/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx @@ -10,11 +10,12 @@ interface Props { period: any, onChange: (data: any) => void; disableCustom?: boolean; + right?: boolean; [x: string]: any; } function SelectDateRange(props: Props) { const [isCustom, setIsCustom] = React.useState(false); - const { period, disableCustom = false, ...rest } = props; + const { right = false, period, disableCustom = false, ...rest } = props; let selectedValue = DATE_RANGE_OPTIONS.find((obj: any) => obj.value === period.rangeName) const options = DATE_RANGE_OPTIONS.filter((obj: any) => disableCustom ? obj.value !== CUSTOM_RANGE : true); @@ -54,7 +55,7 @@ function SelectDateRange(props: Props) { setIsCustom(false)} > -
{ changeSettings({ count: value }) }} diff --git a/frontend/app/components/ui/Input/Input.tsx b/frontend/app/components/ui/Input/Input.tsx index 73a610e17..502142508 100644 --- a/frontend/app/components/ui/Input/Input.tsx +++ b/frontend/app/components/ui/Input/Input.tsx @@ -14,7 +14,7 @@ function Input(props: Props) { return (
{icon && } - + { leadingButton &&
{ leadingButton }
}
); diff --git a/frontend/app/duck/customField.js b/frontend/app/duck/customField.js index 9a8fdcc0e..76378a2b3 100644 --- a/frontend/app/duck/customField.js +++ b/frontend/app/duck/customField.js @@ -70,6 +70,7 @@ export const fetchList = (siteId) => (dispatch, getState) => { dispatch(refreshFilterOptions()); }); } + export const fetchSources = () => { return { types: array(FETCH_SOURCES), diff --git a/frontend/app/duck/liveSearch.js b/frontend/app/duck/liveSearch.js index fce73539a..b84361105 100644 --- a/frontend/app/duck/liveSearch.js +++ b/frontend/app/duck/liveSearch.js @@ -3,7 +3,6 @@ import { fetchListType, fetchType, editType } from './funcTools/crud'; import { createRequestReducer } from './funcTools/request'; import { mergeReducers, success } from './funcTools/tools'; import Filter from 'Types/filter'; -// import { fetchList as fetchSessionList } from './sessions'; import { liveFiltersMap, filtersMap } from 'Types/filter/newFilter'; import { filterMap, checkFilterValue, hasFilterApplied } from './search'; import Session from 'Types/session'; @@ -17,29 +16,24 @@ const EDIT = editType(name); const CLEAR_SEARCH = `${name}/CLEAR_SEARCH`; const APPLY = `${name}/APPLY`; const UPDATE_CURRENT_PAGE = `${name}/UPDATE_CURRENT_PAGE`; -const UPDATE_SORT = `${name}/UPDATE_SORT`; const FETCH_SESSION_LIST = fetchListType(`${name}/FETCH_SESSION_LIST`); const initialState = Map({ list: List(), - instance: new Filter({ filters: [] }), + instance: new Filter({ filters: [], sort: '' }), filterSearchList: {}, currentPage: 1, - sort: { - order: 'asc', - field: '' - } }); function reducer(state = initialState, action = {}) { switch (action.type) { + case APPLY: + return state.mergeIn(['instance'], action.filter).set('currentPage', 1); case EDIT: - return state.mergeIn(['instance'], action.instance); + return state.mergeIn(['instance'], action.instance).set('currentPage', 1); case UPDATE_CURRENT_PAGE: return state.set('currentPage', action.page); - case UPDATE_SORT: - return state.mergeIn(['sort'], action.sort); - case FETCH_SESSION_LIST: + case success(FETCH_SESSION_LIST): const { sessions, total } = action.data; const list = List(sessions).map(Session); return state @@ -72,7 +66,6 @@ const reduceThenFetchResource = actionCreator => (...args) => (dispatch, getStat dispatch(actionCreator(...args)); const filter = getState().getIn([ 'liveSearch', 'instance']).toData(); filter.filters = filter.filters.map(filterMap); - filter.limit = 10; filter.page = getState().getIn([ 'liveSearch', 'currentPage']); @@ -91,10 +84,9 @@ export const edit = reduceThenFetchResource((instance) => ({ instance, })); -export const applyFilter = reduceThenFetchResource((filter, fromUrl=false) => ({ +export const applyFilter = reduceThenFetchResource((filter) => ({ type: APPLY, filter, - fromUrl, })); export const fetchSessions = (filter) => (dispatch, getState) => { @@ -125,7 +117,7 @@ export const addFilter = (filter) => (dispatch, getState) => { } export const addFilterByKeyAndValue = (key, value, operator = undefined) => (dispatch, getState) => { - let defaultFilter = filtersMap[key]; + let defaultFilter = liveFiltersMap[key]; defaultFilter.value = value; if (operator) { defaultFilter.operator = operator; @@ -133,19 +125,10 @@ export const addFilterByKeyAndValue = (key, value, operator = undefined) => (dis dispatch(addFilter(defaultFilter)); } -export function updateCurrentPage(page) { - return { - type: UPDATE_CURRENT_PAGE, - page, - }; -} - -export function updateSort(sort) { - return { - type: UPDATE_SORT, - sort, - }; -} +export const updateCurrentPage = reduceThenFetchResource((page, fromUrl=false) => ({ + type: UPDATE_CURRENT_PAGE, + page, +})); export function fetchFilterSearch(params) { params.live = true diff --git a/frontend/app/duck/search.js b/frontend/app/duck/search.js index a1e6485b6..25724c7dc 100644 --- a/frontend/app/duck/search.js +++ b/frontend/app/duck/search.js @@ -120,7 +120,7 @@ export const checkFilterValue = (value) => { return Array.isArray(value) ? (value.length === 0 ? [""] : value) : [value]; } -export const filterMap = ({category, value, key, operator, sourceOperator, source, custom, isEvent, filters }) => ({ +export const filterMap = ({category, value, key, operator, sourceOperator, source, custom, isEvent, filters, sort, order }) => ({ value: checkValues(key, value), custom, type: category === FilterCategory.METADATA ? FilterKey.METADATA : key, diff --git a/frontend/app/types/filter/newFilter.js b/frontend/app/types/filter/newFilter.js index d5e3859ba..10c4f5247 100644 --- a/frontend/app/types/filter/newFilter.js +++ b/frontend/app/types/filter/newFilter.js @@ -6,7 +6,7 @@ import { capitalize } from 'App/utils'; const countryOptions = Object.keys(countries).map(i => ({ label: countries[i], value: i })); const containsFilters = [{ key: 'contains', label: 'contains', text: 'contains', value: 'contains' }] -export const metaFilter = { key: FilterKey.METADATA, type: FilterType.MULTIPLE, category: FilterCategory.METADATA, label: 'Metadata', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/metadata' }; +// export const metaFilter = { key: FilterKey.METADATA, type: FilterType.MULTIPLE, category: FilterCategory.METADATA, label: 'Metadata', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/metadata' }; export const filters = [ { key: FilterKey.CLICK, type: FilterType.MULTIPLE, category: FilterCategory.INTERACTIONS, label: 'Click', operator: 'on', operatorOptions: filterOptions.targetOperators, icon: 'filters/click', isEvent: true }, { key: FilterKey.INPUT, type: FilterType.MULTIPLE, category: FilterCategory.INTERACTIONS, label: 'Input', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/input', isEvent: true }, @@ -29,7 +29,7 @@ export const filters = [ ]}, { key: FilterKey.STATEACTION, type: FilterType.MULTIPLE, category: FilterCategory.JAVASCRIPT, label: 'StateAction', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/state-action', isEvent: true }, { key: FilterKey.ERROR, type: FilterType.MULTIPLE, category: FilterCategory.JAVASCRIPT, label: 'Error', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/error', isEvent: true }, - { key: FilterKey.METADATA, type: FilterType.MULTIPLE, category: FilterCategory.METADATA, label: 'Metadata', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/metadata', isEvent: true }, + // { key: FilterKey.METADATA, type: FilterType.MULTIPLE, category: FilterCategory.METADATA, label: 'Metadata', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/metadata', isEvent: true }, // FILTERS { key: FilterKey.USER_OS, type: FilterType.MULTIPLE, category: FilterCategory.GEAR, label: 'User OS', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/os' }, @@ -63,9 +63,16 @@ export const liveFiltersMap = filters.reduce((acc, filter) => { if ( filter.category !== FilterCategory.INTERACTIONS && filter.category !== FilterCategory.JAVASCRIPT && - filter.category !== FilterCategory.PERFORMANCE + filter.category !== FilterCategory.PERFORMANCE && + filter.key !== FilterKey.DURATION && + filter.key !== FilterKey.REFERRER ) { acc[filter.key] = filter; + acc[filter.key].operator = 'contains'; + acc[filter.key].operatorDisabled = true; + if (filter.key === FilterKey.PLATFORM) { + acc[filter.key].operator = 'is'; + } } return acc }, {}); @@ -98,12 +105,19 @@ export const addElementToFiltersMap = ( export const addElementToLiveFiltersMap = ( category = FilterCategory.METADATA, key, - type = FilterType.STRING, + type = FilterType.MULTIPLE, operator = 'contains', operatorOptions = containsFilters, icon = 'filters/metadata' ) => { - liveFiltersMap[key] = { key, type, category, label: capitalize(key), operator: operator, operatorOptions, icon, isLive: true } + liveFiltersMap[key] = { + key, type, category, label: capitalize(key), + operator: operator, + operatorOptions, + icon, + operatorDisabled: true, + isLive: true + } } export default Record({ @@ -132,11 +146,13 @@ export default Record({ operator: '', operatorOptions: [], + operatorDisabled: false, isEvent: false, index: 0, options: [], filters: [], + }, { keyKey: "_key", fromJS: ({ value, type, subFilter = false, ...filter }) => { @@ -189,6 +205,7 @@ export const generateLiveFilterOptions = (map) => { Object.keys(map).filter(i => map[i].isLive).forEach(key => { const filter = map[key]; filter.operator = 'contains'; + filter.operatorDisabled = true; if (filterSection.hasOwnProperty(filter.category)) { filterSection[filter.category].push(filter); } else {