diff --git a/frontend/app/components/shared/SaveFilterButton/SaveFilterButton.tsx b/frontend/app/components/shared/SaveFilterButton/SaveFilterButton.tsx index 82be6101a..9b5230f24 100644 --- a/frontend/app/components/shared/SaveFilterButton/SaveFilterButton.tsx +++ b/frontend/app/components/shared/SaveFilterButton/SaveFilterButton.tsx @@ -1,18 +1,19 @@ import React, { useState } from 'react'; import { connect } from 'react-redux'; import { save } from 'Duck/filters'; -import { Button } from 'UI'; +import { IconButton } from 'UI'; import SaveSearchModal from 'Shared/SaveSearchModal' interface Props { filter: any; } -function SaveFilterButton(props) { +function SaveFilterButton(props: Props) { const [showModal, setshowModal] = useState(false) return (
- + {/* */} + setshowModal(true)} primaryText label="SAVE SEARCH" icon="zoom-in" /> setshowModal(false)} diff --git a/frontend/app/components/shared/SessionSearch/SessionSearch.tsx b/frontend/app/components/shared/SessionSearch/SessionSearch.tsx index 0955f3c1f..8a3aaa599 100644 --- a/frontend/app/components/shared/SessionSearch/SessionSearch.tsx +++ b/frontend/app/components/shared/SessionSearch/SessionSearch.tsx @@ -84,7 +84,8 @@ function SessionSearch(props) {
- + {/* */} +
diff --git a/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx b/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx index 6d9f62cd5..35fc1847e 100644 --- a/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx +++ b/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx @@ -3,7 +3,8 @@ import { connect } from 'react-redux'; import stl from './SessionSearchField.css'; import { Input } from 'UI'; import FilterModal from 'Shared/Filters/FilterModal'; -import { fetchList as fetchEventList } from 'Duck/events'; +// import { fetchList as fetchFilterSearch } from 'Duck/events'; +import { fetchFilterSearch } from 'Duck/search'; import { debounce } from 'App/utils'; import { edit as editFilter } from 'Duck/search'; import { @@ -13,19 +14,19 @@ import { interface Props { setSearchQuery: (query: string) => void; - fetchEventList: (query: any) => void; + fetchFilterSearch: (query: any) => void; searchQuery: string; appliedFilter: any; editFilter: typeof editFilter; } function SessionSearchField(props: Props) { const { appliedFilter } = props; - const debounceFetchEventList = debounce(props.fetchEventList, 1000) + const debounceFetchFilterSearch = debounce(props.fetchFilterSearch, 1000) const [showModal, setShowModal] = useState(false) const onSearchChange = (e, { value }) => { // props.setSearchQuery(value) - debounceFetchEventList({ q: value }); + debounceFetchFilterSearch({ q: value }); } const onAddFilter = (filter) => { @@ -87,4 +88,4 @@ export default connect(state => ({ strict: state.getIn([ 'filters', 'appliedFilter', 'strict' ]), blink: state.getIn([ 'funnels', 'blink' ]), appliedFilter: state.getIn(['search', 'instance']), -}), { setSearchQuery, fetchEventList, editFilter })(SessionSearchField); \ No newline at end of file +}), { setSearchQuery, fetchFilterSearch, editFilter })(SessionSearchField); \ No newline at end of file diff --git a/frontend/app/duck/filters.js b/frontend/app/duck/filters.js index aecb59ae6..a5afd25bf 100644 --- a/frontend/app/duck/filters.js +++ b/frontend/app/duck/filters.js @@ -16,7 +16,6 @@ import NewFilter, { filtersMap } from 'Types/filter/newFilter'; const filterOptions = {} Object.keys(filtersMap).forEach(key => { - // const filter = NewFilter(filtersMap[key]); const filter = filtersMap[key]; if (filterOptions.hasOwnProperty(filter.category)) { filterOptions[filter.category].push(filter); diff --git a/frontend/app/duck/search.js b/frontend/app/duck/search.js index 87385e37e..51de61d7c 100644 --- a/frontend/app/duck/search.js +++ b/frontend/app/duck/search.js @@ -17,6 +17,7 @@ const name = "search"; const idKey = "metricId"; const FETCH_LIST = fetchListType(name); +const FETCH_FILTER_SEARCH = fetchListType(`${name}/FILTER_SEARCH`); const FETCH = fetchType(name); const SAVE = saveType(name); const EDIT = editType(name); @@ -39,6 +40,7 @@ const initialState = Map({ alertMetricId: null, instance: new Filter({ filters: [] }), savedFilter: new SavedFilter({ filters: [] }), + filterSearchList: List(), }); // Metric - Series - [] - filters @@ -62,6 +64,8 @@ function reducer(state = initialState, action = {}) { case success(FETCH_LIST): const { data } = action; return state.set("list", List(data.map(NewFilter))); + case success(FETCH_FILTER_SEARCH): + return state.set("filterSearchList", action.data.map(NewFilter)); } return state; } @@ -147,4 +151,12 @@ export function setAlertMetricId(id) { type: SET_ALERT_METRIC_ID, id, }; +} + +export function fetchFilterSearch(params) { + return { + types: FETCH_FILTER_SEARCH.array, + call: client => client.get('/events/search', params), + params, + }; } \ No newline at end of file diff --git a/frontend/app/svg/icons/filters/cpu-load.svg b/frontend/app/svg/icons/filters/cpu-load.svg new file mode 100644 index 000000000..4ab748bd0 --- /dev/null +++ b/frontend/app/svg/icons/filters/cpu-load.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/frontend/app/svg/icons/filters/dom-complete.svg b/frontend/app/svg/icons/filters/dom-complete.svg new file mode 100644 index 000000000..1e6ddcd16 --- /dev/null +++ b/frontend/app/svg/icons/filters/dom-complete.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/app/svg/icons/filters/fetch-failed.svg b/frontend/app/svg/icons/filters/fetch-failed.svg new file mode 100644 index 000000000..2502dbd1d --- /dev/null +++ b/frontend/app/svg/icons/filters/fetch-failed.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/frontend/app/svg/icons/filters/lcpt.svg b/frontend/app/svg/icons/filters/lcpt.svg new file mode 100644 index 000000000..0b9958c15 --- /dev/null +++ b/frontend/app/svg/icons/filters/lcpt.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/app/svg/icons/filters/memory-load.svg b/frontend/app/svg/icons/filters/memory-load.svg new file mode 100644 index 000000000..9c082dfce --- /dev/null +++ b/frontend/app/svg/icons/filters/memory-load.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/app/svg/icons/filters/ttfb.svg b/frontend/app/svg/icons/filters/ttfb.svg new file mode 100644 index 000000000..6a8b43eba --- /dev/null +++ b/frontend/app/svg/icons/filters/ttfb.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/frontend/app/svg/icons/zoom-in.svg b/frontend/app/svg/icons/zoom-in.svg new file mode 100644 index 000000000..468fdcb33 --- /dev/null +++ b/frontend/app/svg/icons/zoom-in.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/frontend/app/types/filter/newFilter.js b/frontend/app/types/filter/newFilter.js index b2cb016ea..d3d7e25ee 100644 --- a/frontend/app/types/filter/newFilter.js +++ b/frontend/app/types/filter/newFilter.js @@ -181,13 +181,13 @@ export const filtersMap = { [FilterKey.USERANONYMOUSID]: { key: FilterKey.USERANONYMOUSID, type: FilterType.MULTIPLE, category: FilterCategory.USER, label: 'UserAnonymousId', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/userid' }, // PERFORMANCE - [FilterKey.DOM_COMPLETE]: { key: FilterKey.DOM_COMPLETE, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'DOM Complete', operator: 'is', operatorOptions: filterOptions.stringOperators, sourceOperatorOptions: filterOptions.customOperators, source: [], icon: 'filters/click', isEvent: true, hasSource: true, sourceOperator: '=', sourceType: FilterType.NUMBER }, - [FilterKey.LARGEST_CONTENTFUL_PAINT_TIME]: { key: FilterKey.LARGEST_CONTENTFUL_PAINT_TIME, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Largest Contentful Paint Time', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/click', isEvent: true }, + [FilterKey.DOM_COMPLETE]: { key: FilterKey.DOM_COMPLETE, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'DOM Complete', operator: 'is', operatorOptions: filterOptions.stringOperators, sourceOperatorOptions: filterOptions.customOperators, source: [], icon: 'filters/dom-complete', isEvent: true, hasSource: true, sourceOperator: '=', sourceType: FilterType.NUMBER }, + [FilterKey.LARGEST_CONTENTFUL_PAINT_TIME]: { key: FilterKey.LARGEST_CONTENTFUL_PAINT_TIME, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Largest Contentful Paint Time', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/lcpt', isEvent: true }, // [FilterKey.TIME_BETWEEN_EVENTS]: { key: FilterKey.TIME_BETWEEN_EVENTS, type: FilterType.NUMBER, category: FilterCategory.PERFORMANCE, label: 'Time Between Events', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/click' }, - [FilterKey.TTFB]: { key: FilterKey.TTFB, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Time to First Byte', operator: 'is', operatorOptions: filterOptions.stringOperators, sourceOperatorOptions: filterOptions.customOperators, source: [], icon: 'filters/click', isEvent: true }, - [FilterKey.AVG_CPU_LOAD]: { key: FilterKey.AVG_CPU_LOAD, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Avg CPU Load', operator: 'is', operatorOptions: filterOptions.stringOperators, sourceOperatorOptions: filterOptions.customOperators, source: [], icon: 'filters/click', isEvent: true }, - [FilterKey.AVG_MEMORY_USAGE]: { key: FilterKey.AVG_MEMORY_USAGE, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Avg Memory Usage', operator: 'is', operatorOptions: filterOptions.stringOperators, sourceOperatorOptions: filterOptions.customOperators, source: [], icon: 'filters/click', isEvent: true }, - [FilterKey.FETCH_FAILED]: { key: FilterKey.AVG_MEMORY_USAGE, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Fetch Failed', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/click', isEvent: true }, + [FilterKey.TTFB]: { key: FilterKey.TTFB, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Time to First Byte', operator: 'is', operatorOptions: filterOptions.stringOperators, sourceOperatorOptions: filterOptions.customOperators, source: [], icon: 'filters/ttfb', isEvent: true }, + [FilterKey.AVG_CPU_LOAD]: { key: FilterKey.AVG_CPU_LOAD, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Avg CPU Load', operator: 'is', operatorOptions: filterOptions.stringOperators, sourceOperatorOptions: filterOptions.customOperators, source: [], icon: 'filters/cpu-load', isEvent: true }, + [FilterKey.AVG_MEMORY_USAGE]: { key: FilterKey.AVG_MEMORY_USAGE, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Avg Memory Usage', operator: 'is', operatorOptions: filterOptions.stringOperators, sourceOperatorOptions: filterOptions.customOperators, source: [], icon: 'filters/memory-load', isEvent: true }, + [FilterKey.FETCH_FAILED]: { key: FilterKey.AVG_MEMORY_USAGE, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Fetch Failed', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/fetch-failed', isEvent: true }, [FilterKey.ISSUE]: { key: FilterKey.ISSUE, type: FilterType.ISSUE, category: FilterCategory.JAVASCRIPT, label: 'Issue', operator: 'is', operatorOptions: filterOptions.baseOperators, icon: 'filters/click', options: ISSUE_OPTIONS }, }