diff --git a/frontend/app/Router.tsx b/frontend/app/Router.tsx index c050096b1..8c5801dc9 100644 --- a/frontend/app/Router.tsx +++ b/frontend/app/Router.tsx @@ -10,14 +10,13 @@ import { GLOBAL_DESTINATION_PATH, IFRAME, JWT_PARAM, - SPOT_ONBOARDING, + SPOT_ONBOARDING } from 'App/constants/storageKeys'; import Layout from 'App/layout/Layout'; -import { withStore } from 'App/mstore'; +import { useStore, withStore } from 'App/mstore'; import { checkParam, handleSpotJWT, isTokenExpired } from 'App/utils'; import { ModalProvider } from 'Components/Modal'; import { ModalProvider as NewModalProvider } from 'Components/ModalContext'; -import { fetchListActive as fetchMetadata } from 'Duck/customField'; import { setSessionPath } from 'Duck/sessions'; import { fetchList as fetchSiteList } from 'Duck/site'; import { init as initSite } from 'Duck/site'; @@ -43,7 +42,6 @@ interface RouterProps }; mstore: any; setJwt: (params: { jwt: string; spotJwt: string | null }) => any; - fetchMetadata: (siteId: string) => void; initSite: (site: any) => void; scopeSetup: boolean; localSpotJwt: string | null; @@ -62,8 +60,9 @@ const Router: React.FC = (props) => { setSessionPath, scopeSetup, localSpotJwt, - logout, + logout } = props; + const { customFieldStore } = useStore(); const params = new URLSearchParams(location.search); const spotCb = params.get('spotCallback'); @@ -175,12 +174,16 @@ const Router: React.FC = (props) => { }, [isSpotCb, isLoggedIn, localSpotJwt, isSignup]); useEffect(() => { - if (siteId && siteId !== lastFetchedSiteIdRef.current) { - const activeSite = sites.find((s) => s.id == siteId); - props.initSite(activeSite); - props.fetchMetadata(siteId); - lastFetchedSiteIdRef.current = siteId; - } + const fetchData = async () => { + if (siteId && siteId !== lastFetchedSiteIdRef.current) { + const activeSite = sites.find((s) => s.id == siteId); + props.initSite(activeSite); + lastFetchedSiteIdRef.current = activeSite.id; + await customFieldStore.fetchListActive(siteId + ''); + } + }; + + fetchData(); }, [siteId]); const lastFetchedSiteIdRef = useRef(null); @@ -232,7 +235,7 @@ const mapStateToProps = (state: Map) => { const userInfoLoading = state.getIn([ 'user', 'fetchUserInfoRequest', - 'loading', + 'loading' ]); const sitesLoading = state.getIn(['site', 'fetchListRequest', 'loading']); const scopeSetup = getScope(state) === 0; @@ -256,7 +259,7 @@ const mapStateToProps = (state: Map) => { tenants: state.getIn(['user', 'tenants']), isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee' || - state.getIn(['user', 'authDetails', 'edition']) === 'ee', + state.getIn(['user', 'authDetails', 'edition']) === 'ee' }; }; @@ -265,9 +268,8 @@ const mapDispatchToProps = { setSessionPath, fetchSiteList, setJwt, - fetchMetadata, initSite, - logout, + logout }; const connector = connect(mapStateToProps, mapDispatchToProps); diff --git a/frontend/app/components/Header/SiteDropdown.js b/frontend/app/components/Header/SiteDropdown.js deleted file mode 100644 index f8dda8b9d..000000000 --- a/frontend/app/components/Header/SiteDropdown.js +++ /dev/null @@ -1,92 +0,0 @@ -import React from 'react'; -import { connect } from 'react-redux'; -import { setSiteId } from 'Duck/site'; -import { withRouter } from 'react-router-dom'; -import { hasSiteId, siteChangeAvailable } from 'App/routes'; -import { Icon } from 'UI'; -import { pushNewSite } from 'Duck/user'; -import { init } from 'Duck/site'; -import styles from './siteDropdown.module.css'; -import cn from 'classnames'; -import { clearSearch } from 'Duck/search'; -import { clearSearch as clearSearchLive } from 'Duck/liveSearch'; -import { fetchListActive as fetchIntegrationVariables } from 'Duck/customField'; -import { withStore } from 'App/mstore'; -import NewProjectButton from './NewProjectButton'; - -@withStore -@withRouter -@connect( - (state) => ({ - sites: state.getIn(['site', 'list']), - siteId: state.getIn(['site', 'siteId']), - account: state.getIn(['user', 'account']), - }), - { - setSiteId, - pushNewSite, - init, - clearSearch, - clearSearchLive, - fetchIntegrationVariables, - } -) -export default class SiteDropdown extends React.PureComponent { - state = { showProductModal: false }; - - closeModal = (e, newSite) => { - this.setState({ showProductModal: false }); - }; - - newSite = () => { - this.props.init({}); - this.setState({ showProductModal: true }); - }; - - switchSite = (siteId) => { - const { mstore, location } = this.props; - - this.props.setSiteId(siteId); - this.props.fetchIntegrationVariables(); - this.props.clearSearch(location.pathname.includes('/sessions')); - this.props.clearSearchLive(); - - mstore.initClient(); - }; - - render() { - const { - sites, - siteId, - account, - location: { pathname }, - } = this.props; - const isAdmin = account.admin || account.superAdmin; - const activeSite = sites.find((s) => s.id == siteId); - const disabled = !siteChangeAvailable(pathname); - const showCurrent = hasSiteId(pathname) || siteChangeAvailable(pathname); - - return ( -
-
-
- {showCurrent && activeSite ? activeSite.host : 'All Projects'} -
- -
-
    - {isAdmin && } -
    - {sites.map((site) => ( -
  • this.switchSite(site.id)}> - - {site.host} -
    • - ))} -
-
-
-
- ); - } -} diff --git a/frontend/app/components/Onboarding/components/MetadataList/MetadataList.tsx b/frontend/app/components/Onboarding/components/MetadataList/MetadataList.tsx new file mode 100644 index 000000000..536442bd9 --- /dev/null +++ b/frontend/app/components/Onboarding/components/MetadataList/MetadataList.tsx @@ -0,0 +1,72 @@ +import React, { useEffect } from 'react'; +import { Button, TagBadge } from 'UI'; +import { connect } from 'react-redux'; +import CustomFieldForm from '../../../Client/CustomFields/CustomFieldForm'; +import { confirm } from 'UI'; +import { useModal } from 'App/components/Modal'; +import { toast } from 'react-toastify'; +import { useStore } from 'App/mstore'; + +interface MetadataListProps { + site: { id: string }; +} + +const MetadataList: React.FC = (props) => { + const { site } = props; + const { customFieldStore } = useStore(); + const fields = customFieldStore.list; + + const { showModal, hideModal } = useModal(); + + useEffect(() => { + customFieldStore.fetchList(site.id); + }, [site.id]); + + const save = (field: any) => { + customFieldStore.save(site.id, field).then((response) => { + if (!response || !response.errors || response.errors.size === 0) { + hideModal(); + toast.success('Metadata added successfully!'); + } else { + toast.error(response.errors[0]); + } + }); + }; + + const openModal = () => { + showModal(, { right: true }); + }; + + const removeMetadata = async (field: { index: number }) => { + if ( + await confirm({ + header: 'Metadata', + confirmation: 'Are you sure you want to remove?' + }) + ) { + customFieldStore.remove(site.id, field.index + ''); + } + }; + + return ( +
+ +
+ {fields.map((f, index) => ( + removeMetadata(f)} outline /> + ))} +
+
+ ); +}; + +export default connect( + (state: any) => ({ + site: state.getIn(['site', 'instance']), + fields: state.getIn(['customFields', 'list']).sortBy((i: any) => i.index), + field: state.getIn(['customFields', 'instance']), + loading: state.getIn(['customFields', 'fetchRequest', 'loading']) + }) +)(MetadataList); diff --git a/frontend/app/components/Session/Player/MobilePlayer/MobilePlayerHeader.tsx b/frontend/app/components/Session/Player/MobilePlayer/MobilePlayerHeader.tsx index dce61eee8..183c419f1 100644 --- a/frontend/app/components/Session/Player/MobilePlayer/MobilePlayerHeader.tsx +++ b/frontend/app/components/Session/Player/MobilePlayer/MobilePlayerHeader.tsx @@ -11,8 +11,8 @@ import Tabs from 'Components/Session/Tabs'; import { PlayerContext } from 'App/components/Session/playerContext'; import { observer } from 'mobx-react-lite'; import stl from '../ReplayPlayer/playerBlockHeader.module.css'; -import { fetchListActive as fetchMetadata } from 'Duck/customField'; import { IFRAME } from 'App/constants/storageKeys'; +import { useStore } from 'App/mstore'; const SESSIONS_ROUTE = sessionsRoute(); @@ -23,6 +23,7 @@ function PlayerBlockHeader(props: any) { const playerState = store?.get?.() || { width: 0, height: 0, showEvents: false }; const { width = 0, height = 0, showEvents = false } = playerState; + const { customFieldStore } = useStore(); const { session, @@ -32,15 +33,13 @@ function PlayerBlockHeader(props: any) { setActiveTab, activeTab, history, - sessionPath, - fetchMetadata, } = props; React.useEffect(() => { const iframe = localStorage.getItem(IFRAME) || false; setHideBack(!!iframe && iframe === 'true'); - if (metaList.size === 0) fetchMetadata(); + if (metaList.size === 0) customFieldStore.fetchList(); }, []); const backHandler = () => { @@ -116,7 +115,6 @@ const PlayerHeaderCont = connect( { toggleFavorite, setSessionPath, - fetchMetadata, } )(observer(PlayerBlockHeader)); diff --git a/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx b/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx index 75cb9cbe7..c4ffefc89 100644 --- a/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx +++ b/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx @@ -16,7 +16,6 @@ import Tabs from 'Components/Session/Tabs'; import { PlayerContext } from 'App/components/Session/playerContext'; import { observer } from 'mobx-react-lite'; import stl from './playerBlockHeader.module.css'; -import { fetchListActive as fetchMetadata } from 'Duck/customField'; import { IFRAME } from 'App/constants/storageKeys'; const SESSIONS_ROUTE = sessionsRoute(); @@ -25,7 +24,7 @@ const SESSIONS_ROUTE = sessionsRoute(); function PlayerBlockHeader(props: any) { const [hideBack, setHideBack] = React.useState(false); const { player, store } = React.useContext(PlayerContext); - const { uxtestingStore } = useStore() + const { uxtestingStore, customFieldStore } = useStore() const playerState = store?.get?.() || { width: 0, height: 0, showEvents: false } const { width = 0, height = 0, showEvents = false } = playerState @@ -39,14 +38,13 @@ function PlayerBlockHeader(props: any) { activeTab, history, sessionPath, - fetchMetadata, } = props; React.useEffect(() => { const iframe = localStorage.getItem(IFRAME) || false; setHideBack(!!iframe && iframe === 'true'); - if (metaList.size === 0) fetchMetadata(); + if (metaList.size === 0) customFieldStore.fetchList(); }, []); const backHandler = () => { @@ -146,7 +144,6 @@ const PlayerHeaderCont = connect( { toggleFavorite, setSessionPath, - fetchMetadata, } )(observer(PlayerBlockHeader)); diff --git a/frontend/app/components/Session_/Player/Controls/AssistSessionsModal/AssistSessionsModal.tsx b/frontend/app/components/Session_/Player/Controls/AssistSessionsModal/AssistSessionsModal.tsx index 6fd6043fc..82d9f151c 100644 --- a/frontend/app/components/Session_/Player/Controls/AssistSessionsModal/AssistSessionsModal.tsx +++ b/frontend/app/components/Session_/Player/Controls/AssistSessionsModal/AssistSessionsModal.tsx @@ -11,7 +11,6 @@ import { KEYS } from 'Types/filter/customFilter'; import { capitalize } from 'App/utils'; import { useStore } from 'App/mstore'; import { observer } from 'mobx-react-lite'; -import { fetchList as fetchMeta } from 'Duck/customField'; import AssistSearchField from 'App/components/Assist/AssistSearchField'; import LiveSessionSearch from 'Shared/LiveSessionSearch'; import cn from 'classnames'; @@ -19,7 +18,9 @@ import Session from 'App/mstore/types/session'; const PER_PAGE = 10; -interface OwnProps {} +interface OwnProps { +} + interface ConnectProps { loading: boolean; metaListLoading: boolean; @@ -34,30 +35,30 @@ interface ConnectProps { updateCurrentPage: (page: number) => void; applyFilter: (filter: any) => void; onAdd: () => void; - fetchMeta: () => void; } type Props = OwnProps & ConnectProps; function AssistSessionsModal(props: Props) { - const { assistMultiviewStore } = useStore(); - const { loading, list, metaList = [], filter, currentPage, total, onAdd, fetchMeta } = props; + const { assistMultiviewStore, customFieldStore } = useStore(); + const { loading, list, filter, currentPage, total, onAdd } = props; const onUserClick = () => false; const { filters } = filter; const hasUserFilter = filters.map((i: any) => i.key).includes(KEYS.USERID); + const metaList = customFieldStore.list; const sortOptions = metaList .map((i: any) => ({ label: capitalize(i), - value: i, - })) - .toJS(); + value: i + })); React.useEffect(() => { if (total === 0) { reloadSessions(); } - fetchMeta(); + // fetchMeta(); + customFieldStore.fetchList(); }, []); const reloadSessions = () => props.applyFilter({ ...filter }); const onSortChange = ({ value }: any) => { @@ -109,37 +110,37 @@ function AssistSessionsModal(props: Props) {
-
- {list.map((session) => ( - -
) => s.sessionId === session.sessionId - ) !== -1 - ? 'cursor-not-allowed opacity-60' - : '' - )} - > - + {list.map((session) => ( + +
) => s.sessionId === session.sessionId ) !== -1 - } - isAdd - onClick={() => onSessionAdd(session)} - /> -
- - ))} + ? 'cursor-not-allowed opacity-60' + : '' + )} + > + ) => s.sessionId === session.sessionId + ) !== -1 + } + isAdd + onClick={() => onSessionAdd(session)} + /> +
+ + ))}
@@ -166,12 +167,11 @@ export default connect( 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']), + sort: state.getIn(['liveSearch', 'sort']) }), { applyFilter, addFilterByKeyAndValue, - updateCurrentPage, - fetchMeta, + updateCurrentPage } )(observer(AssistSessionsModal)); diff --git a/frontend/app/components/shared/ProjectDropdown/ProjectDropdown.tsx b/frontend/app/components/shared/ProjectDropdown/ProjectDropdown.tsx index 78780def0..de96ad67e 100644 --- a/frontend/app/components/shared/ProjectDropdown/ProjectDropdown.tsx +++ b/frontend/app/components/shared/ProjectDropdown/ProjectDropdown.tsx @@ -8,11 +8,10 @@ import React from 'react'; import { connect } from 'react-redux'; import { RouteComponentProps, withRouter } from 'react-router-dom'; -import { withStore } from 'App/mstore'; +import { useStore, withStore } from 'App/mstore'; import { hasSiteId, siteChangeAvailable } from 'App/routes'; import NewSiteForm from 'Components/Client/Sites/NewSiteForm'; import { useModal } from 'Components/Modal'; -import { fetchListActive as fetchMetadata } from 'Duck/customField'; import { clearSearch as clearSearchLive } from 'Duck/liveSearch'; import { clearSearch } from 'Duck/search'; import { setSiteId } from 'Duck/site'; @@ -31,7 +30,6 @@ interface Props extends RouteComponentProps { sites: Site[]; siteId: string; setSiteId: (siteId: string) => void; - fetchMetadata: () => void; clearSearch: (isSession: boolean) => void; clearSearchLive: () => void; initProject: (data: any) => void; @@ -46,10 +44,11 @@ function ProjectDropdown(props: Props) { const showCurrent = hasSiteId(location.pathname) || siteChangeAvailable(location.pathname); const { showModal, hideModal } = useModal(); + const { customFieldStore } = useStore(); - const handleSiteChange = (newSiteId: string) => { + const handleSiteChange = async (newSiteId: string) => { props.setSiteId(newSiteId); // Fixed: should set the new siteId, not the existing one - props.fetchMetadata(); + await customFieldStore.fetchList(newSiteId) props.clearSearch(location.pathname.includes('/sessions')); props.clearSearchLive(); @@ -151,7 +150,6 @@ const mapStateToProps = (state: any) => ({ export default withRouter( connect(mapStateToProps, { setSiteId, - fetchMetadata, clearSearch, clearSearchLive, initProject, diff --git a/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionList.tsx b/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionList.tsx index 12369b9c1..99fca152c 100644 --- a/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionList.tsx +++ b/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionList.tsx @@ -13,7 +13,6 @@ import { checkForLatestSessions } from 'Duck/search'; import { numberWithCommas } from 'App/utils'; -import { fetchListActive as fetchMetadata } from 'Duck/customField'; import { toggleFavorite } from 'Duck/sessions'; import SessionDateRange from './SessionDateRange'; import RecordingStatus from 'Shared/SessionsTabOverview/components/RecordingStatus'; @@ -51,7 +50,6 @@ interface Props extends RouteComponentProps { updateCurrentPage: (page: number) => void; setScrollPosition: (scrollPosition: number) => void; fetchSessions: (filters: any, force: boolean) => void; - fetchMetadata: () => void; updateProjectRecordingStatus: (siteId: string, status: boolean) => void; activeTab: any; isEnterprise?: boolean; @@ -87,6 +85,7 @@ function SessionList(props: Props) { const activeSite: any = sites.find((s: any) => s.id === siteId); const hasNoRecordings = !activeSite || !activeSite.recorded; + const NO_CONTENT = React.useMemo(() => { if (isBookmark && !isEnterprise) { setNoContentType(NoContentType.Bookmarked); @@ -165,7 +164,6 @@ function SessionList(props: Props) { props.fetchSessions(null, true); }, 300); } - // props.fetchMetadata(); return () => { props.setScrollPosition(window.scrollY); @@ -304,7 +302,6 @@ export default connect( addFilterByKeyAndValue, setScrollPosition, fetchSessions, - fetchMetadata, checkForLatestSessions, toggleFavorite, updateProjectRecordingStatus diff --git a/frontend/app/layout/Layout.tsx b/frontend/app/layout/Layout.tsx index ca073ff9a..7b9370072 100644 --- a/frontend/app/layout/Layout.tsx +++ b/frontend/app/layout/Layout.tsx @@ -4,7 +4,6 @@ import SideMenu from 'App/layout/SideMenu'; import TopHeader from 'App/layout/TopHeader'; import { useStore } from 'App/mstore'; import { observer } from 'mobx-react-lite'; -import { fetchListActive as fetchMetadata } from 'Duck/customField'; import { init as initSite } from 'Duck/site'; import { connect } from 'react-redux'; @@ -15,7 +14,6 @@ interface Props { children: React.ReactNode; hideHeader?: boolean; siteId?: string; - fetchMetadata: (siteId: string) => void; initSite: (site: any) => void; sites: any[]; } @@ -25,18 +23,6 @@ function Layout(props: Props) { const isPlayer = /\/(session|assist|view-spot)\//.test(window.location.pathname); const { settingsStore } = useStore(); - // const lastFetchedSiteIdRef = React.useRef(null); - // - // useEffect(() => { - // if (!siteId || siteId === lastFetchedSiteIdRef.current) return; - // - // const activeSite = props.sites.find((s) => s.id == siteId); - // props.initSite(activeSite); - // props.fetchMetadata(siteId); - // - // lastFetchedSiteIdRef.current = siteId; - // }, [siteId]); - return ( {!hideHeader && ( @@ -69,4 +55,4 @@ function Layout(props: Props) { export default connect((state: any) => ({ siteId: state.getIn(['site', 'siteId']), sites: state.getIn(['site', 'list']) -}), { fetchMetadata, initSite })(observer(Layout)); +}), { initSite })(observer(Layout)); diff --git a/frontend/app/layout/TopHeader.tsx b/frontend/app/layout/TopHeader.tsx index e35323fa3..e82a4df33 100644 --- a/frontend/app/layout/TopHeader.tsx +++ b/frontend/app/layout/TopHeader.tsx @@ -9,14 +9,12 @@ import { INDEXES } from 'App/constants/zindex'; import { connect } from 'react-redux'; import { logout } from 'Duck/user'; import { init as initSite } from 'Duck/site'; -import { fetchListActive as fetchMetadata } from 'Duck/customField'; const { Header } = Layout; interface Props { account: any; siteId: string; - fetchMetadata: (siteId: string) => void; initSite: (site: any) => void; } @@ -49,7 +47,7 @@ function TopHeader(props: Props) { alignItems: 'center', height: '60px' }} - className='justify-between' + className="justify-between" >
-
+
@@ -81,8 +79,7 @@ const mapStateToProps = (state: any) => ({ const mapDispatchToProps = { onLogoutClick: logout, - initSite, - fetchMetadata + initSite }; export default connect( diff --git a/frontend/app/mstore/customFieldStore.ts b/frontend/app/mstore/customFieldStore.ts index b8bd2ebb7..2b4b9a2e2 100644 --- a/frontend/app/mstore/customFieldStore.ts +++ b/frontend/app/mstore/customFieldStore.ts @@ -15,8 +15,10 @@ import customFields from 'Components/Client/CustomFields'; class CustomFieldStore { isLoading: boolean = false; + isAllLoading: boolean = false; isSaving: boolean = false; list: CustomField[] = []; + allList: CustomField[] = []; instance: CustomField = new CustomField(); sources: CustomField[] = []; fetchedMetadata: boolean = false; @@ -43,7 +45,7 @@ class CustomFieldStore { async fetchListActive(siteId?: string): Promise { this.isLoading = true; try { - const response = await customFieldService.get(siteId); + const response = await customFieldService.fetchList(siteId); clearMetaFilters(); response.forEach((item: any) => { addElementToFiltersMap(FilterCategory.METADATA, '_' + item.key); diff --git a/frontend/app/services/CustomFieldService.ts b/frontend/app/services/CustomFieldService.ts index d1dbb0e40..1b85e92ba 100644 --- a/frontend/app/services/CustomFieldService.ts +++ b/frontend/app/services/CustomFieldService.ts @@ -1,29 +1,29 @@ import BaseService from './BaseService'; export default class CustomFieldService extends BaseService { - async fetchList(siteId: string): Promise { - return this.client.get(siteId ? `/${siteId}/metadata` : '/metadata') + async fetchList(projectId?: string): Promise { + return this.client.get(projectId ? `/${projectId}/metadata` : '/metadata') .then(r => r.json()).then(j => j.data); } - async get(siteId?: string): Promise { - const url = siteId ? `/${siteId}/metadata` : '/metadata'; + async get(projectId?: string): Promise { + const url = projectId ? `/${projectId}/metadata` : '/PROJECT_ID/metadata'; return this.client.get(url) .then(r => r.json()).then(j => j.data); } - async create(siteId: string, customField: any): Promise { - return this.client.post(`/${siteId}/metadata`, customField) + async create(projectId: string, customField: any): Promise { + return this.client.post(`/${projectId}/metadata`, customField) .then(r => r.json()).then(j => j.data); } - async update(siteId: string, instance: any): Promise { - return this.client.put(`/${siteId}/metadata/${instance.index}`, instance) + async update(projectId: string, instance: any): Promise { + return this.client.put(`/${projectId}/metadata/${instance.index}`, instance) .then(r => r.json()).then(j => j.data); } - async delete(siteId: string, index: string): Promise { - return this.client.delete(`/${siteId}/metadata/${index}`) + async delete(projectId: string, index: string): Promise { + return this.client.delete(`/${projectId}/metadata/${index}`) .then(r => r.json()).then(j => j.data); } } diff --git a/frontend/app/types/filter/customFilter.js b/frontend/app/types/filter/customFilter.js index 09e0d3ff7..be720a959 100644 --- a/frontend/app/types/filter/customFilter.js +++ b/frontend/app/types/filter/customFilter.js @@ -108,7 +108,6 @@ export default Record({ key: '', operator: 'is', label: '', - icon: '', type: '', value: [""], custom: '', diff --git a/frontend/app/types/filter/filter.js b/frontend/app/types/filter/filter.js index ea94a90a4..2496f8e42 100644 --- a/frontend/app/types/filter/filter.js +++ b/frontend/app/types/filter/filter.js @@ -109,68 +109,68 @@ export default Record({ } }); -export const preloadedFilters = []; +// export const preloadedFilters = []; -export const defaultFilters = [ - { - category: 'Interactions', - type: 'default', - keys: [ - { label: 'Click', key: KEYS.CLICK, type: KEYS.CLICK, filterKey: KEYS.CLICK, icon: 'filters/click', isFilter: false }, - { label: 'DOM Complete', key: KEYS.DOM_COMPLETE, type: KEYS.DOM_COMPLETE, filterKey: KEYS.DOM_COMPLETE, icon: 'filters/click', isFilter: false }, - { label: 'Largest Contentful Paint Time', key: KEYS.LARGEST_CONTENTFUL_PAINT_TIME, type: KEYS.LARGEST_CONTENTFUL_PAINT_TIME, filterKey: KEYS.LARGEST_CONTENTFUL_PAINT_TIME, icon: 'filters/click', isFilter: false }, - { label: 'Time Between Events', key: KEYS.TIME_BETWEEN_EVENTS, type: KEYS.TIME_BETWEEN_EVENTS, filterKey: KEYS.TIME_BETWEEN_EVENTS, icon: 'filters/click', isFilter: false }, - { label: 'Avg CPU Load', key: KEYS.AVG_CPU_LOAD, type: KEYS.AVG_CPU_LOAD, filterKey: KEYS.AVG_CPU_LOAD, icon: 'filters/click', isFilter: false }, - { label: 'Memory Usage', key: KEYS.AVG_MEMORY_USAGE, type: KEYS.AVG_MEMORY_USAGE, filterKey: KEYS.AVG_MEMORY_USAGE, icon: 'filters/click', isFilter: false }, - { label: 'Input', key: KEYS.INPUT, type: KEYS.INPUT, filterKey: KEYS.INPUT, icon: 'event/input', isFilter: false }, - { label: 'Path', key: KEYS.LOCATION, type: KEYS.LOCATION, filterKey: KEYS.LOCATION, icon: 'event/link', isFilter: false }, - // { label: 'View', key: KEYS.VIEW, type: KEYS.VIEW, filterKey: KEYS.VIEW, icon: 'event/view', isFilter: false } - ] - }, - { - category: 'Gear', - type: 'default', - keys: [ - { label: 'OS', key: KEYS.USER_OS, type: KEYS.USER_OS, filterKey: KEYS.USER_OS, icon: 'os', isFilter: true }, - { label: 'Browser', key: KEYS.USER_BROWSER, type: KEYS.USER_BROWSER, filterKey: KEYS.USER_BROWSER, icon: 'window', isFilter: true }, - { label: 'Device', key: KEYS.USER_DEVICE, type: KEYS.USER_DEVICE, filterKey: KEYS.USER_DEVICE, icon: 'device', isFilter: true }, - { label: 'Rev ID', key: KEYS.REVID, type: KEYS.REVID, filterKey: KEYS.REVID, icon: 'filters/rev-id', isFilter: true }, - { label: 'Platform', key: KEYS.PLATFORM, type: KEYS.PLATFORM, filterKey: KEYS.PLATFORM, icon: 'filters/platform', isFilter: true }, - ] - }, - { - category: 'Recording Attributes', - type: 'default', - keys: [ - { label: 'Referrer', key: KEYS.REFERRER, type: KEYS.REFERRER, filterKey: KEYS.REFERRER, icon: 'chat-square-quote', isFilter: true }, - { label: 'Duration', key: KEYS.DURATION, type: KEYS.DURATION, filterKey: KEYS.DURATION, icon: 'clock', isFilter: true }, - { label: 'Country', key: KEYS.USER_COUNTRY, type: KEYS.USER_COUNTRY, filterKey: KEYS.USER_COUNTRY, icon: 'map-marker-alt', isFilter: true }, - ] - }, - { - category: 'Javascript', - type: 'default', - keys: [ - { label: 'Errors', key: KEYS.ERROR, type: KEYS.ERROR, filterKey: KEYS.ERROR, icon: 'exclamation-circle', isFilter: false }, - { label: 'Issues', key: KEYS.ISSUES, type: KEYS.ISSUES, filterKey: KEYS.ISSUES, icon: 'exclamation-circle', isFilter: true }, - { label: 'UTM Source', key: KEYS.UTM_SOURCE, type: KEYS.UTM_SOURCE, filterKey: KEYS.UTM_SOURCE, icon: 'exclamation-circle', isFilter: true }, - { label: 'UTM Medium', key: KEYS.UTM_MEDIUM, type: KEYS.UTM_MEDIUM, filterKey: KEYS.UTM_MEDIUM, icon: 'exclamation-circle', isFilter: true }, - { label: 'UTM Campaign', key: KEYS.UTM_CAMPAIGN, type: KEYS.UTM_CAMPAIGN, filterKey: KEYS.UTM_CAMPAIGN, icon: 'exclamation-circle', isFilter: true }, - { label: 'Fetch Requests', key: KEYS.FETCH, type: KEYS.FETCH, filterKey: KEYS.FETCH, icon: 'fetch', isFilter: false }, - { label: 'GraphQL Queries', key: KEYS.GRAPHQL, type: KEYS.GRAPHQL, filterKey: KEYS.GRAPHQL, icon: 'vendors/graphql', isFilter: false }, - { label: 'Store Actions', key: KEYS.STATEACTION, type: KEYS.STATEACTION, filterKey: KEYS.STATEACTION, icon: 'store', isFilter: false }, - { label: 'Custom Events', key: KEYS.CUSTOM, type: KEYS.CUSTOM, filterKey: KEYS.CUSTOM, icon: 'filters/file-code', isFilter: false }, - ] - }, - { - category: 'User', - type: 'default', - keys: [ - { label: 'User ID', key: KEYS.USERID, type: KEYS.USERID, filterKey: KEYS.USERID, icon: 'filters/user-alt', isFilter: true }, - { label: 'Anonymous ID', key: KEYS.USERANONYMOUSID, type: KEYS.USERANONYMOUSID, filterKey: KEYS.USERANONYMOUSID, icon: 'filters/userid', isFilter: true }, - ] - } -]; +// export const defaultFilters = [ +// { +// category: 'Interactions', +// type: 'default', +// keys: [ +// { label: 'Click', key: KEYS.CLICK, type: KEYS.CLICK, filterKey: KEYS.CLICK, icon: 'filters/click', isFilter: false }, +// { label: 'DOM Complete', key: KEYS.DOM_COMPLETE, type: KEYS.DOM_COMPLETE, filterKey: KEYS.DOM_COMPLETE, icon: 'filters/click', isFilter: false }, +// { label: 'Largest Contentful Paint Time', key: KEYS.LARGEST_CONTENTFUL_PAINT_TIME, type: KEYS.LARGEST_CONTENTFUL_PAINT_TIME, filterKey: KEYS.LARGEST_CONTENTFUL_PAINT_TIME, icon: 'filters/click', isFilter: false }, +// { label: 'Time Between Events', key: KEYS.TIME_BETWEEN_EVENTS, type: KEYS.TIME_BETWEEN_EVENTS, filterKey: KEYS.TIME_BETWEEN_EVENTS, icon: 'filters/click', isFilter: false }, +// { label: 'Avg CPU Load', key: KEYS.AVG_CPU_LOAD, type: KEYS.AVG_CPU_LOAD, filterKey: KEYS.AVG_CPU_LOAD, icon: 'filters/click', isFilter: false }, +// { label: 'Memory Usage', key: KEYS.AVG_MEMORY_USAGE, type: KEYS.AVG_MEMORY_USAGE, filterKey: KEYS.AVG_MEMORY_USAGE, icon: 'filters/click', isFilter: false }, +// { label: 'Input', key: KEYS.INPUT, type: KEYS.INPUT, filterKey: KEYS.INPUT, icon: 'event/input', isFilter: false }, +// { label: 'Path', key: KEYS.LOCATION, type: KEYS.LOCATION, filterKey: KEYS.LOCATION, icon: 'event/link', isFilter: false }, +// // { label: 'View', key: KEYS.VIEW, type: KEYS.VIEW, filterKey: KEYS.VIEW, icon: 'event/view', isFilter: false } +// ] +// }, +// { +// category: 'Gear', +// type: 'default', +// keys: [ +// { label: 'OS', key: KEYS.USER_OS, type: KEYS.USER_OS, filterKey: KEYS.USER_OS, icon: 'os', isFilter: true }, +// { label: 'Browser', key: KEYS.USER_BROWSER, type: KEYS.USER_BROWSER, filterKey: KEYS.USER_BROWSER, icon: 'window', isFilter: true }, +// { label: 'Device', key: KEYS.USER_DEVICE, type: KEYS.USER_DEVICE, filterKey: KEYS.USER_DEVICE, icon: 'device', isFilter: true }, +// { label: 'Rev ID', key: KEYS.REVID, type: KEYS.REVID, filterKey: KEYS.REVID, icon: 'filters/rev-id', isFilter: true }, +// { label: 'Platform', key: KEYS.PLATFORM, type: KEYS.PLATFORM, filterKey: KEYS.PLATFORM, icon: 'filters/platform', isFilter: true }, +// ] +// }, +// { +// category: 'Recording Attributes', +// type: 'default', +// keys: [ +// { label: 'Referrer', key: KEYS.REFERRER, type: KEYS.REFERRER, filterKey: KEYS.REFERRER, icon: 'chat-square-quote', isFilter: true }, +// { label: 'Duration', key: KEYS.DURATION, type: KEYS.DURATION, filterKey: KEYS.DURATION, icon: 'clock', isFilter: true }, +// { label: 'Country', key: KEYS.USER_COUNTRY, type: KEYS.USER_COUNTRY, filterKey: KEYS.USER_COUNTRY, icon: 'map-marker-alt', isFilter: true }, +// ] +// }, +// { +// category: 'Javascript', +// type: 'default', +// keys: [ +// { label: 'Errors', key: KEYS.ERROR, type: KEYS.ERROR, filterKey: KEYS.ERROR, icon: 'exclamation-circle', isFilter: false }, +// { label: 'Issues', key: KEYS.ISSUES, type: KEYS.ISSUES, filterKey: KEYS.ISSUES, icon: 'exclamation-circle', isFilter: true }, +// { label: 'UTM Source', key: KEYS.UTM_SOURCE, type: KEYS.UTM_SOURCE, filterKey: KEYS.UTM_SOURCE, icon: 'exclamation-circle', isFilter: true }, +// { label: 'UTM Medium', key: KEYS.UTM_MEDIUM, type: KEYS.UTM_MEDIUM, filterKey: KEYS.UTM_MEDIUM, icon: 'exclamation-circle', isFilter: true }, +// { label: 'UTM Campaign', key: KEYS.UTM_CAMPAIGN, type: KEYS.UTM_CAMPAIGN, filterKey: KEYS.UTM_CAMPAIGN, icon: 'exclamation-circle', isFilter: true }, +// { label: 'Fetch Requests', key: KEYS.FETCH, type: KEYS.FETCH, filterKey: KEYS.FETCH, icon: 'fetch', isFilter: false }, +// { label: 'GraphQL Queries', key: KEYS.GRAPHQL, type: KEYS.GRAPHQL, filterKey: KEYS.GRAPHQL, icon: 'vendors/graphql', isFilter: false }, +// { label: 'Store Actions', key: KEYS.STATEACTION, type: KEYS.STATEACTION, filterKey: KEYS.STATEACTION, icon: 'store', isFilter: false }, +// { label: 'Custom Events', key: KEYS.CUSTOM, type: KEYS.CUSTOM, filterKey: KEYS.CUSTOM, icon: 'filters/file-code', isFilter: false }, +// ] +// }, +// { +// category: 'User', +// type: 'default', +// keys: [ +// { label: 'User ID', key: KEYS.USERID, type: KEYS.USERID, filterKey: KEYS.USERID, icon: 'filters/user-alt', isFilter: true }, +// { label: 'Anonymous ID', key: KEYS.USERANONYMOUSID, type: KEYS.USERANONYMOUSID, filterKey: KEYS.USERANONYMOUSID, icon: 'filters/userid', isFilter: true }, +// ] +// } +// ]; export const getEventIcon = (filter) => { let { type, key, source } = filter;