diff --git a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx index 640134079..9126c8e96 100644 --- a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx +++ b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx @@ -32,7 +32,7 @@ import { connect } from 'react-redux'; import { Icon, Loader } from 'UI'; import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG'; -import { FilterKey } from '../../../../types/filter/filterType'; +import { FilterKey } from 'Types/filter/filterType'; import stl from './FilterModal.module.css'; const IconMap = { diff --git a/frontend/app/components/ui/Icons/activity.tsx b/frontend/app/components/ui/Icons/activity.tsx index 26570ced3..284c532a2 100644 --- a/frontend/app/components/ui/Icons/activity.tsx +++ b/frontend/app/components/ui/Icons/activity.tsx @@ -12,7 +12,6 @@ interface Props { function Activity(props: Props) { const { size = 14, width = size, height = size, fill = '' } = props; return ( - ); } diff --git a/frontend/app/components/ui/Icons/console_info.tsx b/frontend/app/components/ui/Icons/console_info.tsx index 787acce26..674f08c44 100644 --- a/frontend/app/components/ui/Icons/console_info.tsx +++ b/frontend/app/components/ui/Icons/console_info.tsx @@ -10,7 +10,7 @@ interface Props { } function Console_info(props: Props) { - const { size = 14, width = size, height = size, fill = '' } = props; + const { size = 14, width = size, height = size, fill = '' } = props; return ( ); diff --git a/frontend/app/components/ui/Icons/filters_chevrons_up_down.tsx b/frontend/app/components/ui/Icons/filters_chevrons_up_down.tsx new file mode 100644 index 000000000..db9bd2973 --- /dev/null +++ b/frontend/app/components/ui/Icons/filters_chevrons_up_down.tsx @@ -0,0 +1,19 @@ + +/* Auto-generated, do not edit */ +import React from 'react'; + +interface Props { + size?: number | string; + width?: number | string; + height?: number | string; + fill?: string; +} + +function Filters_chevrons_up_down(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + ); +} + +export default Filters_chevrons_up_down; diff --git a/frontend/app/components/ui/Icons/filters_screen.tsx b/frontend/app/components/ui/Icons/filters_screen.tsx new file mode 100644 index 000000000..a03898a9c --- /dev/null +++ b/frontend/app/components/ui/Icons/filters_screen.tsx @@ -0,0 +1,19 @@ + +/* Auto-generated, do not edit */ +import React from 'react'; + +interface Props { + size?: number | string; + width?: number | string; + height?: number | string; + fill?: string; +} + +function Filters_screen(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + ); +} + +export default Filters_screen; diff --git a/frontend/app/components/ui/Icons/index.ts b/frontend/app/components/ui/Icons/index.ts index 2f57a0ebd..239193a3a 100644 --- a/frontend/app/components/ui/Icons/index.ts +++ b/frontend/app/components/ui/Icons/index.ts @@ -275,6 +275,7 @@ export { default as Filetype_pdf } from './filetype_pdf'; export { default as Filter } from './filter'; export { default as Filters_arrow_return_right } from './filters_arrow_return_right'; export { default as Filters_browser } from './filters_browser'; +export { default as Filters_chevrons_up_down } from './filters_chevrons_up_down'; export { default as Filters_click } from './filters_click'; export { default as Filters_clickrage } from './filters_clickrage'; export { default as Filters_code } from './filters_code'; @@ -303,6 +304,7 @@ export { default as Filters_platform } from './filters_platform'; export { default as Filters_referrer } from './filters_referrer'; export { default as Filters_resize } from './filters_resize'; export { default as Filters_rev_id } from './filters_rev_id'; +export { default as Filters_screen } from './filters_screen'; export { default as Filters_state_action } from './filters_state_action'; export { default as Filters_tag_element } from './filters_tag_element'; export { default as Filters_ttfb } from './filters_ttfb'; diff --git a/frontend/app/components/ui/Icons/pdf_download.tsx b/frontend/app/components/ui/Icons/pdf_download.tsx index f7f773277..16ea79523 100644 --- a/frontend/app/components/ui/Icons/pdf_download.tsx +++ b/frontend/app/components/ui/Icons/pdf_download.tsx @@ -12,7 +12,7 @@ interface Props { function Pdf_download(props: Props) { const { size = 14, width = size, height = size, fill = '' } = props; return ( - + ); } diff --git a/frontend/app/components/ui/Icons/pencil.tsx b/frontend/app/components/ui/Icons/pencil.tsx index 1c9714adf..aa38965da 100644 --- a/frontend/app/components/ui/Icons/pencil.tsx +++ b/frontend/app/components/ui/Icons/pencil.tsx @@ -12,7 +12,7 @@ interface Props { function Pencil(props: Props) { const { size = 14, width = size, height = size, fill = '' } = props; return ( - + ); } diff --git a/frontend/app/components/ui/Icons/trash.tsx b/frontend/app/components/ui/Icons/trash.tsx index ded64f33b..286f4a6e0 100644 --- a/frontend/app/components/ui/Icons/trash.tsx +++ b/frontend/app/components/ui/Icons/trash.tsx @@ -12,7 +12,7 @@ interface Props { function Trash(props: Props) { const { size = 14, width = size, height = size, fill = '' } = props; return ( - + ); } diff --git a/frontend/app/components/ui/Icons/users.tsx b/frontend/app/components/ui/Icons/users.tsx index b5bc58d21..bc6a852d6 100644 --- a/frontend/app/components/ui/Icons/users.tsx +++ b/frontend/app/components/ui/Icons/users.tsx @@ -12,8 +12,7 @@ interface Props { function Users(props: Props) { const { size = 14, width = size, height = size, fill = '' } = props; return ( - - + ); } diff --git a/frontend/app/components/ui/SVG.tsx b/frontend/app/components/ui/SVG.tsx index b46650f1f..d5ee94fb3 100644 --- a/frontend/app/components/ui/SVG.tsx +++ b/frontend/app/components/ui/SVG.tsx @@ -277,6 +277,7 @@ import { Filter, Filters_arrow_return_right, Filters_browser, + Filters_chevrons_up_down, Filters_click, Filters_clickrage, Filters_code, @@ -305,6 +306,7 @@ import { Filters_referrer, Filters_resize, Filters_rev_id, + Filters_screen, Filters_state_action, Filters_tag_element, Filters_ttfb, @@ -555,7 +557,7 @@ import { Zoom_in } from './Icons' -export type IconNames = 'activity' | 'alarm-clock' | 'alarm-plus' | 'all-sessions' | 'analytics' | 'anchor' | 'arrow-alt-square-right' | 'arrow-bar-left' | 'arrow-clockwise' | 'arrow-counterclockwise' | 'arrow-down-short' | 'arrow-down-up' | 'arrow-down' | 'arrow-repeat' | 'arrow-right-short' | 'arrow-square-left' | 'arrow-square-right' | 'arrow-up-short' | 'arrow-up' | 'arrows-angle-extend' | 'avatar/icn_avatar1' | 'avatar/icn_avatar10' | 'avatar/icn_avatar11' | 'avatar/icn_avatar12' | 'avatar/icn_avatar13' | 'avatar/icn_avatar14' | 'avatar/icn_avatar15' | 'avatar/icn_avatar16' | 'avatar/icn_avatar17' | 'avatar/icn_avatar18' | 'avatar/icn_avatar19' | 'avatar/icn_avatar2' | 'avatar/icn_avatar20' | 'avatar/icn_avatar21' | 'avatar/icn_avatar22' | 'avatar/icn_avatar23' | 'avatar/icn_avatar3' | 'avatar/icn_avatar4' | 'avatar/icn_avatar5' | 'avatar/icn_avatar6' | 'avatar/icn_avatar7' | 'avatar/icn_avatar8' | 'avatar/icn_avatar9' | 'ban' | 'bar-chart-line' | 'bar-pencil' | 'battery-charging' | 'battery' | 'bell-fill' | 'bell-plus' | 'bell-slash' | 'bell' | 'binoculars' | 'book-doc' | 'book' | 'bookmark' | 'broadcast' | 'browser/browser' | 'browser/chrome' | 'browser/edge' | 'browser/electron' | 'browser/facebook' | 'browser/firefox' | 'browser/ie' | 'browser/opera' | 'browser/safari' | 'buildings' | 'bullhorn' | 'business-time' | 'calendar-alt' | 'calendar-check' | 'calendar-day' | 'calendar' | 'call' | 'camera-alt' | 'camera-video-off' | 'camera-video' | 'camera' | 'card-checklist' | 'card-list' | 'card-text' | 'caret-down-fill' | 'caret-left-fill' | 'caret-right-fill' | 'caret-up-fill' | 'chat-dots' | 'chat-left-text' | 'chat-right-text' | 'chat-square-quote' | 'check-circle-fill' | 'check-circle' | 'check' | 'chevron-double-left' | 'chevron-double-right' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle-fill' | 'circle' | 'click-hesitation' | 'click-rage' | 'clipboard-check' | 'clipboard-list-check' | 'clock-history' | 'clock' | 'close' | 'cloud-fog2-fill' | 'code' | 'cog' | 'cogs' | 'collection-play' | 'collection' | 'color/apple' | 'color/browser/Tor' | 'color/browser/applebot' | 'color/browser/chrome' | 'color/browser/chrome_mobile' | 'color/browser/chrome_mobile_ios' | 'color/browser/duck_duck_go' | 'color/browser/duckduckgo_mobile' | 'color/browser/edge' | 'color/browser/edge_mobile' | 'color/browser/facebook' | 'color/browser/firefox' | 'color/browser/firefox_ios' | 'color/browser/firefox_mobile' | 'color/browser/google' | 'color/browser/googlebot' | 'color/browser/huawei_browser' | 'color/browser/internet_explorer' | 'color/browser/miui_browser' | 'color/browser/mobile_safari' | 'color/browser/mobile_safari_ui' | 'color/browser/opera' | 'color/browser/safari' | 'color/browser/samsung_internet' | 'color/browser/uc_browser' | 'color/browser/unknown' | 'color/browser/whale' | 'color/browser/yandex_browser' | 'color/chrome' | 'color/country/de' | 'color/country/fr' | 'color/country/gb' | 'color/country/in' | 'color/country/us' | 'color/de' | 'color/device/desktop' | 'color/device/mobile' | 'color/device/other_phone' | 'color/device/tablet' | 'color/device/unkown' | 'color/edge' | 'color/fedora' | 'color/firefox' | 'color/fr' | 'color/gb' | 'color/in' | 'color/issues/bad_request' | 'color/issues/click_rage' | 'color/issues/cpu' | 'color/issues/crash' | 'color/issues/custom' | 'color/issues/dead_click' | 'color/issues/errors' | 'color/issues/excessive_scrolling' | 'color/issues/js_exception' | 'color/issues/memory' | 'color/issues/missing_resource' | 'color/issues/mouse_thrashing' | 'color/issues/slow_page_load' | 'color/microsoft' | 'color/opera' | 'color/os/android' | 'color/os/apple' | 'color/os/blackberry' | 'color/os/chrome_os' | 'color/os/elementary' | 'color/os/fedora' | 'color/os/freebsd' | 'color/os/gnome' | 'color/os/ios' | 'color/os/linux' | 'color/os/linux_mint' | 'color/os/macos' | 'color/os/microsoft' | 'color/os/ubuntu' | 'color/os/unkown' | 'color/safari' | 'color/ubuntu' | 'color/us' | 'columns-gap-filled' | 'columns-gap' | 'console/error' | 'console/exception' | 'console/info' | 'console/warning' | 'console' | 'controller' | 'cookies' | 'copy' | 'credit-card-2-back' | 'credit-card-front' | 'cross' | 'cubes' | 'cursor-trash' | 'dash' | 'dashboard-icn' | 'db-icons/icn-card-clickMap' | 'db-icons/icn-card-errors' | 'db-icons/icn-card-funnel' | 'db-icons/icn-card-funnels' | 'db-icons/icn-card-insights' | 'db-icons/icn-card-library' | 'db-icons/icn-card-mapchart' | 'db-icons/icn-card-pathAnalysis' | 'db-icons/icn-card-performance' | 'db-icons/icn-card-resources' | 'db-icons/icn-card-table' | 'db-icons/icn-card-timeseries' | 'db-icons/icn-card-webVitals' | 'desktop' | 'device' | 'diagram-3' | 'dice-3' | 'dizzy' | 'door-closed' | 'doublecheck' | 'download' | 'drag' | 'edit' | 'ellipsis-v' | 'emoji-dizzy' | 'enter' | 'envelope-check' | 'envelope-paper' | 'envelope-x' | 'envelope' | 'errors-icon' | 'event/click' | 'event/click_hesitation' | 'event/clickrage' | 'event/code' | 'event/i-cursor' | 'event/input' | 'event/input_hesitation' | 'event/link' | 'event/location' | 'event/mouse_thrashing' | 'event/resize' | 'event/view' | 'exclamation-circle-fill' | 'exclamation-circle' | 'exclamation-triangle' | 'expand-wide' | 'explosion' | 'external-link-alt' | 'eye-slash-fill' | 'eye-slash' | 'eye' | 'fetch' | 'fflag-multi' | 'fflag-single' | 'file-bar-graph' | 'file-code' | 'file-medical-alt' | 'file-pdf' | 'file' | 'files' | 'filetype-js' | 'filetype-pdf' | 'filter' | 'filters/arrow-return-right' | 'filters/browser' | 'filters/click' | 'filters/clickrage' | 'filters/code' | 'filters/console' | 'filters/country' | 'filters/cpu-load' | 'filters/custom' | 'filters/device' | 'filters/dom-complete' | 'filters/duration' | 'filters/error' | 'filters/fetch-failed' | 'filters/fetch' | 'filters/file-code' | 'filters/graphql' | 'filters/i-cursor' | 'filters/input' | 'filters/lcpt' | 'filters/link' | 'filters/location' | 'filters/memory-load' | 'filters/metadata' | 'filters/os' | 'filters/perfromance-network-request' | 'filters/platform' | 'filters/referrer' | 'filters/resize' | 'filters/rev-id' | 'filters/state-action' | 'filters/tag-element' | 'filters/ttfb' | 'filters/user-alt' | 'filters/userid' | 'filters/view' | 'flag-na' | 'folder-plus' | 'folder2' | 'fullscreen' | 'funnel/cpu-fill' | 'funnel/cpu' | 'funnel/dizzy' | 'funnel/emoji-angry-fill' | 'funnel/emoji-angry' | 'funnel/emoji-dizzy-fill' | 'funnel/exclamation-circle-fill' | 'funnel/exclamation-circle' | 'funnel/file-earmark-break-fill' | 'funnel/file-earmark-break' | 'funnel/file-earmark-minus-fill' | 'funnel/file-earmark-minus' | 'funnel/file-medical-alt' | 'funnel/file-x' | 'funnel/hdd-fill' | 'funnel/hourglass-top' | 'funnel/image-fill' | 'funnel/image' | 'funnel/microchip' | 'funnel/mouse' | 'funnel/patch-exclamation-fill' | 'funnel/sd-card' | 'funnel-fill' | 'funnel-new' | 'funnel' | 'gear-fill' | 'gear' | 'geo-alt-fill-custom' | 'github' | 'graph-up-arrow' | 'graph-up' | 'grid-1x2' | 'grid-3x3' | 'grid-check' | 'grid-horizontal' | 'grid' | 'grip-horizontal' | 'hash' | 'hdd-stack' | 'headset' | 'heart-rate' | 'high-engagement' | 'history' | 'hourglass-start' | 'ic-errors' | 'ic-network' | 'ic-rage' | 'ic-resources' | 'id-card' | 'image' | 'info-circle-fill' | 'info-circle' | 'info-square' | 'info' | 'input-hesitation' | 'inspect' | 'integrations/assist' | 'integrations/bugsnag-text' | 'integrations/bugsnag' | 'integrations/cloudwatch-text' | 'integrations/cloudwatch' | 'integrations/datadog' | 'integrations/elasticsearch-text' | 'integrations/elasticsearch' | 'integrations/github' | 'integrations/graphql' | 'integrations/jira-text' | 'integrations/jira' | 'integrations/mobx' | 'integrations/newrelic-text' | 'integrations/newrelic' | 'integrations/ngrx' | 'integrations/openreplay-text' | 'integrations/openreplay' | 'integrations/redux' | 'integrations/rollbar-text' | 'integrations/rollbar' | 'integrations/segment' | 'integrations/sentry-text' | 'integrations/sentry' | 'integrations/slack-bw' | 'integrations/slack' | 'integrations/stackdriver' | 'integrations/sumologic-text' | 'integrations/sumologic' | 'integrations/teams-white' | 'integrations/teams' | 'integrations/vuejs' | 'integrations/zustand' | 'journal-code' | 'key' | 'keyboard' | 'layer-group' | 'layers-half' | 'lightbulb-on' | 'lightbulb' | 'link-45deg' | 'list-alt' | 'list-arrow' | 'list-ul' | 'list' | 'lock-alt' | 'low-disc-space' | 'magic' | 'map-marker-alt' | 'memory-ios' | 'memory' | 'mic-mute' | 'mic' | 'minus' | 'mobile' | 'mouse-alt' | 'mouse-pointer-click' | 'network' | 'next1' | 'no-dashboard' | 'no-metrics-chart' | 'no-metrics' | 'no-recordings' | 'os/android' | 'os/chrome_os' | 'os/fedora' | 'os/ios' | 'os/linux' | 'os/mac_os_x' | 'os/other' | 'os/ubuntu' | 'os/windows' | 'os' | 'pause-circle-fill' | 'pause-fill' | 'pause' | 'pdf-download' | 'pencil-stop' | 'pencil' | 'people' | 'percent' | 'performance-icon' | 'person-border' | 'person-fill' | 'person' | 'pie-chart-fill' | 'pin-fill' | 'play-circle-bold' | 'play-circle-light' | 'play-circle' | 'play-fill-new' | 'play-fill' | 'play-hover' | 'play' | 'plug' | 'plus-circle' | 'plus-lg' | 'plus' | 'pointer-sessions-search' | 'prev1' | 'pulse' | 'puzzle-piece' | 'puzzle' | 'question-circle' | 'question-lg' | 'quote-left' | 'quote-right' | 'quotes' | 'record-btn' | 'record-circle-fill' | 'record-circle' | 'record2' | 'redo-back' | 'redo' | 'redux' | 'remote-control' | 'replay-10' | 'resources-icon' | 'safe-fill' | 'safe' | 'sandglass' | 'search' | 'search_notification' | 'server' | 'share-alt' | 'shield-lock' | 'side_menu_closed' | 'side_menu_open' | 'signpost-split' | 'signup' | 'skip-forward-fill' | 'skip-forward' | 'slack' | 'slash-circle' | 'sleep' | 'sliders' | 'social/slack' | 'social/trello' | 'sparkles' | 'speedometer2' | 'spinner' | 'star-solid' | 'star' | 'step-forward' | 'stickies' | 'stop-record-circle' | 'stopwatch' | 'store' | 'sync-alt' | 'table-new' | 'table' | 'tablet-android' | 'tachometer-slow' | 'tachometer-slowest' | 'tags' | 'team-funnel' | 'telephone-fill' | 'telephone' | 'terminal' | 'text-paragraph' | 'thermometer-sun' | 'toggles' | 'tools' | 'trash' | 'turtle' | 'user-alt' | 'user-circle' | 'user-friends' | 'user-switch' | 'users' | 'vendors/graphql' | 'vendors/mobx' | 'vendors/ngrx' | 'vendors/redux' | 'vendors/vuex' | 'web-vitals' | 'wifi' | 'window-alt' | 'window-restore' | 'window-x' | 'window' | 'zoom-in'; +export type IconNames = 'activity' | 'alarm-clock' | 'alarm-plus' | 'all-sessions' | 'analytics' | 'anchor' | 'arrow-alt-square-right' | 'arrow-bar-left' | 'arrow-clockwise' | 'arrow-counterclockwise' | 'arrow-down-short' | 'arrow-down-up' | 'arrow-down' | 'arrow-repeat' | 'arrow-right-short' | 'arrow-square-left' | 'arrow-square-right' | 'arrow-up-short' | 'arrow-up' | 'arrows-angle-extend' | 'avatar/icn_avatar1' | 'avatar/icn_avatar10' | 'avatar/icn_avatar11' | 'avatar/icn_avatar12' | 'avatar/icn_avatar13' | 'avatar/icn_avatar14' | 'avatar/icn_avatar15' | 'avatar/icn_avatar16' | 'avatar/icn_avatar17' | 'avatar/icn_avatar18' | 'avatar/icn_avatar19' | 'avatar/icn_avatar2' | 'avatar/icn_avatar20' | 'avatar/icn_avatar21' | 'avatar/icn_avatar22' | 'avatar/icn_avatar23' | 'avatar/icn_avatar3' | 'avatar/icn_avatar4' | 'avatar/icn_avatar5' | 'avatar/icn_avatar6' | 'avatar/icn_avatar7' | 'avatar/icn_avatar8' | 'avatar/icn_avatar9' | 'ban' | 'bar-chart-line' | 'bar-pencil' | 'battery-charging' | 'battery' | 'bell-fill' | 'bell-plus' | 'bell-slash' | 'bell' | 'binoculars' | 'book-doc' | 'book' | 'bookmark' | 'broadcast' | 'browser/browser' | 'browser/chrome' | 'browser/edge' | 'browser/electron' | 'browser/facebook' | 'browser/firefox' | 'browser/ie' | 'browser/opera' | 'browser/safari' | 'buildings' | 'bullhorn' | 'business-time' | 'calendar-alt' | 'calendar-check' | 'calendar-day' | 'calendar' | 'call' | 'camera-alt' | 'camera-video-off' | 'camera-video' | 'camera' | 'card-checklist' | 'card-list' | 'card-text' | 'caret-down-fill' | 'caret-left-fill' | 'caret-right-fill' | 'caret-up-fill' | 'chat-dots' | 'chat-left-text' | 'chat-right-text' | 'chat-square-quote' | 'check-circle-fill' | 'check-circle' | 'check' | 'chevron-double-left' | 'chevron-double-right' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle-fill' | 'circle' | 'click-hesitation' | 'click-rage' | 'clipboard-check' | 'clipboard-list-check' | 'clock-history' | 'clock' | 'close' | 'cloud-fog2-fill' | 'code' | 'cog' | 'cogs' | 'collection-play' | 'collection' | 'color/apple' | 'color/browser/Tor' | 'color/browser/applebot' | 'color/browser/chrome' | 'color/browser/chrome_mobile' | 'color/browser/chrome_mobile_ios' | 'color/browser/duck_duck_go' | 'color/browser/duckduckgo_mobile' | 'color/browser/edge' | 'color/browser/edge_mobile' | 'color/browser/facebook' | 'color/browser/firefox' | 'color/browser/firefox_ios' | 'color/browser/firefox_mobile' | 'color/browser/google' | 'color/browser/googlebot' | 'color/browser/huawei_browser' | 'color/browser/internet_explorer' | 'color/browser/miui_browser' | 'color/browser/mobile_safari' | 'color/browser/mobile_safari_ui' | 'color/browser/opera' | 'color/browser/safari' | 'color/browser/samsung_internet' | 'color/browser/uc_browser' | 'color/browser/unknown' | 'color/browser/whale' | 'color/browser/yandex_browser' | 'color/chrome' | 'color/country/de' | 'color/country/fr' | 'color/country/gb' | 'color/country/in' | 'color/country/us' | 'color/de' | 'color/device/desktop' | 'color/device/mobile' | 'color/device/other_phone' | 'color/device/tablet' | 'color/device/unkown' | 'color/edge' | 'color/fedora' | 'color/firefox' | 'color/fr' | 'color/gb' | 'color/in' | 'color/issues/bad_request' | 'color/issues/click_rage' | 'color/issues/cpu' | 'color/issues/crash' | 'color/issues/custom' | 'color/issues/dead_click' | 'color/issues/errors' | 'color/issues/excessive_scrolling' | 'color/issues/js_exception' | 'color/issues/memory' | 'color/issues/missing_resource' | 'color/issues/mouse_thrashing' | 'color/issues/slow_page_load' | 'color/microsoft' | 'color/opera' | 'color/os/android' | 'color/os/apple' | 'color/os/blackberry' | 'color/os/chrome_os' | 'color/os/elementary' | 'color/os/fedora' | 'color/os/freebsd' | 'color/os/gnome' | 'color/os/ios' | 'color/os/linux' | 'color/os/linux_mint' | 'color/os/macos' | 'color/os/microsoft' | 'color/os/ubuntu' | 'color/os/unkown' | 'color/safari' | 'color/ubuntu' | 'color/us' | 'columns-gap-filled' | 'columns-gap' | 'console/error' | 'console/exception' | 'console/info' | 'console/warning' | 'console' | 'controller' | 'cookies' | 'copy' | 'credit-card-2-back' | 'credit-card-front' | 'cross' | 'cubes' | 'cursor-trash' | 'dash' | 'dashboard-icn' | 'db-icons/icn-card-clickMap' | 'db-icons/icn-card-errors' | 'db-icons/icn-card-funnel' | 'db-icons/icn-card-funnels' | 'db-icons/icn-card-insights' | 'db-icons/icn-card-library' | 'db-icons/icn-card-mapchart' | 'db-icons/icn-card-pathAnalysis' | 'db-icons/icn-card-performance' | 'db-icons/icn-card-resources' | 'db-icons/icn-card-table' | 'db-icons/icn-card-timeseries' | 'db-icons/icn-card-webVitals' | 'desktop' | 'device' | 'diagram-3' | 'dice-3' | 'dizzy' | 'door-closed' | 'doublecheck' | 'download' | 'drag' | 'edit' | 'ellipsis-v' | 'emoji-dizzy' | 'enter' | 'envelope-check' | 'envelope-paper' | 'envelope-x' | 'envelope' | 'errors-icon' | 'event/click' | 'event/click_hesitation' | 'event/clickrage' | 'event/code' | 'event/i-cursor' | 'event/input' | 'event/input_hesitation' | 'event/link' | 'event/location' | 'event/mouse_thrashing' | 'event/resize' | 'event/view' | 'exclamation-circle-fill' | 'exclamation-circle' | 'exclamation-triangle' | 'expand-wide' | 'explosion' | 'external-link-alt' | 'eye-slash-fill' | 'eye-slash' | 'eye' | 'fetch' | 'fflag-multi' | 'fflag-single' | 'file-bar-graph' | 'file-code' | 'file-medical-alt' | 'file-pdf' | 'file' | 'files' | 'filetype-js' | 'filetype-pdf' | 'filter' | 'filters/arrow-return-right' | 'filters/browser' | 'filters/chevrons-up-down' | 'filters/click' | 'filters/clickrage' | 'filters/code' | 'filters/console' | 'filters/country' | 'filters/cpu-load' | 'filters/custom' | 'filters/device' | 'filters/dom-complete' | 'filters/duration' | 'filters/error' | 'filters/fetch-failed' | 'filters/fetch' | 'filters/file-code' | 'filters/graphql' | 'filters/i-cursor' | 'filters/input' | 'filters/lcpt' | 'filters/link' | 'filters/location' | 'filters/memory-load' | 'filters/metadata' | 'filters/os' | 'filters/perfromance-network-request' | 'filters/platform' | 'filters/referrer' | 'filters/resize' | 'filters/rev-id' | 'filters/screen' | 'filters/state-action' | 'filters/tag-element' | 'filters/ttfb' | 'filters/user-alt' | 'filters/userid' | 'filters/view' | 'flag-na' | 'folder-plus' | 'folder2' | 'fullscreen' | 'funnel/cpu-fill' | 'funnel/cpu' | 'funnel/dizzy' | 'funnel/emoji-angry-fill' | 'funnel/emoji-angry' | 'funnel/emoji-dizzy-fill' | 'funnel/exclamation-circle-fill' | 'funnel/exclamation-circle' | 'funnel/file-earmark-break-fill' | 'funnel/file-earmark-break' | 'funnel/file-earmark-minus-fill' | 'funnel/file-earmark-minus' | 'funnel/file-medical-alt' | 'funnel/file-x' | 'funnel/hdd-fill' | 'funnel/hourglass-top' | 'funnel/image-fill' | 'funnel/image' | 'funnel/microchip' | 'funnel/mouse' | 'funnel/patch-exclamation-fill' | 'funnel/sd-card' | 'funnel-fill' | 'funnel-new' | 'funnel' | 'gear-fill' | 'gear' | 'geo-alt-fill-custom' | 'github' | 'graph-up-arrow' | 'graph-up' | 'grid-1x2' | 'grid-3x3' | 'grid-check' | 'grid-horizontal' | 'grid' | 'grip-horizontal' | 'hash' | 'hdd-stack' | 'headset' | 'heart-rate' | 'high-engagement' | 'history' | 'hourglass-start' | 'ic-errors' | 'ic-network' | 'ic-rage' | 'ic-resources' | 'id-card' | 'image' | 'info-circle-fill' | 'info-circle' | 'info-square' | 'info' | 'input-hesitation' | 'inspect' | 'integrations/assist' | 'integrations/bugsnag-text' | 'integrations/bugsnag' | 'integrations/cloudwatch-text' | 'integrations/cloudwatch' | 'integrations/datadog' | 'integrations/elasticsearch-text' | 'integrations/elasticsearch' | 'integrations/github' | 'integrations/graphql' | 'integrations/jira-text' | 'integrations/jira' | 'integrations/mobx' | 'integrations/newrelic-text' | 'integrations/newrelic' | 'integrations/ngrx' | 'integrations/openreplay-text' | 'integrations/openreplay' | 'integrations/redux' | 'integrations/rollbar-text' | 'integrations/rollbar' | 'integrations/segment' | 'integrations/sentry-text' | 'integrations/sentry' | 'integrations/slack-bw' | 'integrations/slack' | 'integrations/stackdriver' | 'integrations/sumologic-text' | 'integrations/sumologic' | 'integrations/teams-white' | 'integrations/teams' | 'integrations/vuejs' | 'integrations/zustand' | 'journal-code' | 'key' | 'keyboard' | 'layer-group' | 'layers-half' | 'lightbulb-on' | 'lightbulb' | 'link-45deg' | 'list-alt' | 'list-arrow' | 'list-ul' | 'list' | 'lock-alt' | 'low-disc-space' | 'magic' | 'map-marker-alt' | 'memory-ios' | 'memory' | 'mic-mute' | 'mic' | 'minus' | 'mobile' | 'mouse-alt' | 'mouse-pointer-click' | 'network' | 'next1' | 'no-dashboard' | 'no-metrics-chart' | 'no-metrics' | 'no-recordings' | 'os/android' | 'os/chrome_os' | 'os/fedora' | 'os/ios' | 'os/linux' | 'os/mac_os_x' | 'os/other' | 'os/ubuntu' | 'os/windows' | 'os' | 'pause-circle-fill' | 'pause-fill' | 'pause' | 'pdf-download' | 'pencil-stop' | 'pencil' | 'people' | 'percent' | 'performance-icon' | 'person-border' | 'person-fill' | 'person' | 'pie-chart-fill' | 'pin-fill' | 'play-circle-bold' | 'play-circle-light' | 'play-circle' | 'play-fill-new' | 'play-fill' | 'play-hover' | 'play' | 'plug' | 'plus-circle' | 'plus-lg' | 'plus' | 'pointer-sessions-search' | 'prev1' | 'pulse' | 'puzzle-piece' | 'puzzle' | 'question-circle' | 'question-lg' | 'quote-left' | 'quote-right' | 'quotes' | 'record-btn' | 'record-circle-fill' | 'record-circle' | 'record2' | 'redo-back' | 'redo' | 'redux' | 'remote-control' | 'replay-10' | 'resources-icon' | 'safe-fill' | 'safe' | 'sandglass' | 'search' | 'search_notification' | 'server' | 'share-alt' | 'shield-lock' | 'side_menu_closed' | 'side_menu_open' | 'signpost-split' | 'signup' | 'skip-forward-fill' | 'skip-forward' | 'slack' | 'slash-circle' | 'sleep' | 'sliders' | 'social/slack' | 'social/trello' | 'sparkles' | 'speedometer2' | 'spinner' | 'star-solid' | 'star' | 'step-forward' | 'stickies' | 'stop-record-circle' | 'stopwatch' | 'store' | 'sync-alt' | 'table-new' | 'table' | 'tablet-android' | 'tachometer-slow' | 'tachometer-slowest' | 'tags' | 'team-funnel' | 'telephone-fill' | 'telephone' | 'terminal' | 'text-paragraph' | 'thermometer-sun' | 'toggles' | 'tools' | 'trash' | 'turtle' | 'user-alt' | 'user-circle' | 'user-friends' | 'user-switch' | 'users' | 'vendors/graphql' | 'vendors/mobx' | 'vendors/ngrx' | 'vendors/redux' | 'vendors/vuex' | 'web-vitals' | 'wifi' | 'window-alt' | 'window-restore' | 'window-x' | 'window' | 'zoom-in'; interface Props { name: IconNames; @@ -1395,6 +1397,9 @@ const SVG = (props: Props) => { // case 'filters/browser': case 'filters/browser': return ; + // case 'filters/chevrons-up-down': + case 'filters/chevrons-up-down': return ; + // case 'filters/click': case 'filters/click': return ; @@ -1479,6 +1484,9 @@ const SVG = (props: Props) => { // case 'filters/rev-id': case 'filters/rev-id': return ; + // case 'filters/screen': + case 'filters/screen': return ; + // case 'filters/state-action': case 'filters/state-action': return ; diff --git a/frontend/app/duck/search.js b/frontend/app/duck/search.js index 9a2c9bf07..274b1030c 100644 --- a/frontend/app/duck/search.js +++ b/frontend/app/duck/search.js @@ -76,7 +76,7 @@ function reducer(state = initialState, action = {}) { switch (action.type) { case REFRESH_FILTER_OPTIONS: return state - .set('filterList', generateFilterOptions(filtersMap)) + .set('filterList', generateFilterOptions(filtersMap, action.isMobile)) .set('filterListLive', generateFilterOptions(liveFiltersMap)) .set( 'filterListConditional', @@ -466,10 +466,12 @@ export const editSavedSearch = (instance) => { }; }; -export const refreshFilterOptions = () => { - return { +export const refreshFilterOptions = () => (dispatch, getState) => { + const currentProject = getState().getIn(['site', 'instance']); + return dispatch({ type: REFRESH_FILTER_OPTIONS, - }; + isMobile: currentProject?.platform === 'ios' + }); }; export const setScrollPosition = (scrollPosition) => { diff --git a/frontend/app/svg/icons/filters/chevrons-up-down.svg b/frontend/app/svg/icons/filters/chevrons-up-down.svg new file mode 100644 index 000000000..b538d60da --- /dev/null +++ b/frontend/app/svg/icons/filters/chevrons-up-down.svg @@ -0,0 +1 @@ + diff --git a/frontend/app/svg/icons/filters/screen.svg b/frontend/app/svg/icons/filters/screen.svg new file mode 100644 index 000000000..ebe2fd223 --- /dev/null +++ b/frontend/app/svg/icons/filters/screen.svg @@ -0,0 +1 @@ + diff --git a/frontend/app/types/filter/filterType.ts b/frontend/app/types/filter/filterType.ts index ca1a0b869..2fbefcc57 100644 --- a/frontend/app/types/filter/filterType.ts +++ b/frontend/app/types/filter/filterType.ts @@ -196,6 +196,14 @@ export enum FilterType { } export enum FilterKey { + CLICK_MOBILE = 'clickMobile', + INPUT_MOBILE = 'inputMobile', + VIEW_MOBILE = 'viewMobile', + CUSTOM_MOBILE = 'customMobile', + REQUEST_MOBILE = 'requestMobile', + ERROR_MOBILE = 'errorMobile', + SWIPE_MOBILE = 'swipeMobile', + ERROR = 'error', MISSING_RESOURCE = 'missingResource', SLOW_SESSION = 'slowSession', diff --git a/frontend/app/types/filter/newFilter.js b/frontend/app/types/filter/newFilter.js index 1add570a4..810241ce5 100644 --- a/frontend/app/types/filter/newFilter.js +++ b/frontend/app/types/filter/newFilter.js @@ -1,4 +1,4 @@ -import { stringConditional, tagElementOperators, targetConditional } from "App/constants/filterOptions"; +import { stringConditional, tagElementOperators, targetConditional } from 'App/constants/filterOptions'; import { KEYS } from 'Types/filter/customFilter'; import Record from 'Types/Record'; import { FilterType, FilterKey, FilterCategory } from './filterType'; @@ -13,10 +13,78 @@ const filterOrder = { [FilterCategory.TECHNICAL]: 1, [FilterCategory.PERFORMANCE]: 2, [FilterCategory.USER]: 3, - [FilterCategory.GEAR]: 4, -} + [FilterCategory.GEAR]: 4 +}; + +export const mobileFilters = [ + { + key: FilterKey.CLICK_MOBILE, + type: FilterType.MULTIPLE, + category: FilterCategory.INTERACTIONS, + label: 'Tap', + operator: 'on', + operatorOptions: filterOptions.targetOperators, + icon: 'filters/click', + isEvent: true + }, + { + key: FilterKey.INPUT_MOBILE, + type: FilterType.MULTIPLE, + category: FilterCategory.INTERACTIONS, + label: 'Text Input', + placeholder: 'Enter input label name', + operator: 'is', + operatorOptions: filterOptions.stringOperators, + icon: 'filters/input', + isEvent: true + }, + { + key: FilterKey.VIEW_MOBILE, + type: FilterType.MULTIPLE, + category: FilterCategory.INTERACTIONS, + label: 'Screen', + placeholder: 'Enter screen name', + operator: 'is', + operatorOptions: filterOptions.stringOperators, + icon: 'filters/screen', + isEvent: true + }, + { + key: FilterKey.CUSTOM_MOBILE, + type: FilterType.MULTIPLE, + category: FilterCategory.TECHNICAL, + label: 'Custom Events', + placeholder: 'Enter event key', + operator: 'is', + operatorOptions: filterOptions.stringOperators, + icon: 'filters/custom', + isEvent: true + }, + { + key: FilterKey.ERROR_MOBILE, + type: FilterType.MULTIPLE, + category: FilterCategory.TECHNICAL, + label: 'Error Message', + placeholder: 'E.g. Uncaught SyntaxError', + operator: 'is', + operatorOptions: filterOptions.stringOperators, + icon: 'filters/error', + isEvent: true + }, + { + key: FilterKey.SWIPE_MOBILE, + type: FilterType.MULTIPLE, + category: FilterCategory.INTERACTIONS, + label: 'Swipe', + operator: 'on', + operatorOptions: filterOptions.targetOperators, + icon: 'filters/chevrons-up-down', + isEvent: true + } +]; export const filters = [ + ...mobileFilters, { key: FilterKey.CLICK, type: FilterType.MULTIPLE, @@ -96,7 +164,7 @@ export const filters = [ operator: 'is', placeholder: 'Select method type', operatorOptions: filterOptions.stringOperatorsLimited, - icon: 'filters/fetch', + icon: 'filters/fetch', options: filterOptions.methodOptions }, { @@ -232,7 +300,7 @@ export const filters = [ isEvent: true, icon: 'filters/tag-element', operatorOptions: filterOptions.tagElementOperators, - options: [], + options: [] }, { key: FilterKey.UTM_SOURCE, @@ -241,7 +309,7 @@ export const filters = [ label: 'UTM Source', operator: 'is', operatorOptions: filterOptions.stringOperators, - icon: 'filters/country', + icon: 'filters/country' }, { key: FilterKey.UTM_MEDIUM, @@ -250,7 +318,7 @@ export const filters = [ label: 'UTM Medium', operator: 'is', operatorOptions: filterOptions.stringOperators, - icon: 'filters/country', + icon: 'filters/country' }, { key: FilterKey.UTM_CAMPAIGN, @@ -259,7 +327,7 @@ export const filters = [ label: 'UTM Campaign', operator: 'is', operatorOptions: filterOptions.stringOperators, - icon: 'filters/country', + icon: 'filters/country' }, { key: FilterKey.USER_COUNTRY, @@ -471,12 +539,12 @@ export const filters = [ operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'collection' - }, + } ].sort((a, b) => { - const aOrder = filterOrder[a.category] ?? 9 - const bOrder = filterOrder[b.category] ?? 9 - return aOrder - bOrder -}) + const aOrder = filterOrder[a.category] ?? 9; + const bOrder = filterOrder[b.category] ?? 9; + return aOrder - bOrder; +}); export const flagConditionFilters = [ { @@ -559,10 +627,10 @@ export const flagConditionFilters = [ icon: 'filters/userid' } ].sort((a, b) => { - const aOrder = filterOrder[a.category] ?? 9 - const bOrder = filterOrder[b.category] ?? 9 - return aOrder - bOrder -}) + const aOrder = filterOrder[a.category] ?? 9; + const bOrder = filterOrder[b.category] ?? 9; + return aOrder - bOrder; +}); export const conditionalFilters = [ { @@ -612,7 +680,7 @@ export const conditionalFilters = [ placeholder: 'Enter path or URL', operator: 'is', operatorOptions: filterOptions.stringConditional, - icon: "filters/fetch" + icon: 'filters/fetch' }, { key: FilterKey.FETCH_STATUS_CODE, @@ -622,7 +690,7 @@ export const conditionalFilters = [ placeholder: 'Enter status code', operator: '=', operatorOptions: filterOptions.customOperators, - icon: "filters/fetch" + icon: 'filters/fetch' }, { key: FilterKey.FETCH_METHOD, @@ -643,8 +711,8 @@ export const conditionalFilters = [ placeholder: 'E.g. 12', operator: '=', operatorOptions: filterOptions.customOperators, - icon: "filters/fetch" - }, + icon: 'filters/fetch' + } ], icon: 'filters/fetch', isEvent: true @@ -667,7 +735,7 @@ export const conditionalFilters = [ label: 'Duration', operator: 'is', operatorOptions: filterOptions.getOperatorsByKeys(['is']), - icon: "filters/duration", + icon: 'filters/duration', isEvent: false }, { @@ -690,10 +758,10 @@ export const conditionalFilters = [ icon: 'filters/userid' } ].sort((a, b) => { - const aOrder = filterOrder[a.category] ?? 9 - const bOrder = filterOrder[b.category] ?? 9 - return aOrder - bOrder -}) + const aOrder = filterOrder[a.category] ?? 9; + const bOrder = filterOrder[b.category] ?? 9; + return aOrder - bOrder; +}); export const mobileConditionalFilters = [ { @@ -703,7 +771,7 @@ export const mobileConditionalFilters = [ label: 'Duration', operator: 'is', operatorOptions: filterOptions.getOperatorsByKeys(['is']), - icon: "filters/duration", + icon: 'filters/duration', isEvent: false }, { @@ -721,7 +789,7 @@ export const mobileConditionalFilters = [ placeholder: 'Enter path or URL', operator: 'is', operatorOptions: filterOptions.stringConditional, - icon: "filters/fetch" + icon: 'filters/fetch' }, { key: FilterKey.FETCH_STATUS_CODE, @@ -731,7 +799,7 @@ export const mobileConditionalFilters = [ placeholder: 'Enter status code', operator: '=', operatorOptions: filterOptions.customOperators, - icon: "filters/fetch" + icon: 'filters/fetch' }, { key: FilterKey.FETCH_METHOD, @@ -752,8 +820,8 @@ export const mobileConditionalFilters = [ placeholder: 'E.g. 12', operator: '=', operatorOptions: filterOptions.customOperators, - icon: "filters/fetch" - }, + icon: 'filters/fetch' + } ], icon: 'filters/fetch', isEvent: true @@ -779,11 +847,11 @@ export const mobileConditionalFilters = [ operatorOptions: filterOptions.getOperatorsByKeys(['is']), icon: 'filters/cpu-load', options: [ - { label: 'nominal', value: "0" }, - { label: 'warm', value: "1" }, - { label: 'hot', value: "2" }, - { label: 'critical', value: "3" } - ], + { label: 'nominal', value: '0' }, + { label: 'warm', value: '1' }, + { label: 'hot', value: '2' }, + { label: 'critical', value: '3' } + ] }, { key: 'mainThreadCPU', @@ -793,7 +861,7 @@ export const mobileConditionalFilters = [ placeholder: '0 .. 100', operator: '=', operatorOptions: filterOptions.customOperators, - icon: 'filters/cpu-load', + icon: 'filters/cpu-load' }, { key: 'viewComponent', @@ -803,7 +871,7 @@ export const mobileConditionalFilters = [ placeholder: 'View Name', operator: 'is', operatorOptions: filterOptions.getOperatorsByKeys(['is']), - icon: 'filters/view', + icon: 'filters/view' }, { key: FilterKey.USERID, @@ -833,7 +901,7 @@ export const mobileConditionalFilters = [ placeholder: 'logged value', operator: 'is', operatorOptions: filterOptions.stringOperators, - icon: 'filters/console', + icon: 'filters/console' }, { key: 'clickEvent', @@ -854,7 +922,7 @@ export const mobileConditionalFilters = [ operatorOptions: filterOptions.customOperators, icon: 'filters/memory-load' } -] +]; export const eventKeys = filters.filter((i) => i.isEvent).map(i => i.key); export const nonFlagFilters = filters.filter(i => { @@ -955,12 +1023,12 @@ export const addElementToFiltersMap = ( export const addOptionsToFilter = ( key, - options, + options ) => { if (filtersMap[key] && filtersMap[key].options) { - filtersMap[key].options = options + filtersMap[key].options = options; } -} +}; function getMetadataLabel(key) { return key.replace(/^_/, '').charAt(0).toUpperCase() + key.slice(2); @@ -1008,11 +1076,11 @@ export const addElementToConditionalFiltersMap = ( export const addElementToMobileConditionalFiltersMap = ( category = FilterCategory.METADATA, - key, - type = FilterType.MULTIPLE, - operator = 'is', - operatorOptions = filterOptions.stringOperators, - icon = 'filters/metadata' + key, + type = FilterType.MULTIPLE, + operator = 'is', + operatorOptions = filterOptions.stringOperators, + icon = 'filters/metadata' ) => { mobileConditionalFiltersMap[key] = { key, @@ -1023,8 +1091,8 @@ export const addElementToMobileConditionalFiltersMap = ( operatorOptions, icon, isLive: true - } -} + }; +}; export const addElementToLiveFiltersMap = ( category = FilterCategory.METADATA, @@ -1094,7 +1162,7 @@ export default Record({ _filter = filtersMap[`_${filter.source}`]; } else { if (filtersMap[filter.key]) { - _filter = filtersMap[filter.key] + _filter = filtersMap[filter.key]; } else { _filter = filtersMap[type]; } @@ -1118,14 +1186,35 @@ export default Record({ } }); +const WEB_EXCLUDE = [ + FilterKey.CLICK_MOBILE, FilterKey.SWIPE_MOBILE, FilterKey.INPUT_MOBILE, + FilterKey.VIEW_MOBILE, FilterKey.CUSTOM_MOBILE, FilterKey.REQUEST_MOBILE, FilterKey.ERROR_MOBILE +]; + +const MOBILE_EXCLUDE = [ + FilterKey.CLICK, FilterKey.INPUT, FilterKey.ERROR, FilterKey.CUSTOM, + FilterKey.LOCATION, FilterKey.FETCH, FilterKey.DOM_COMPLETE, + FilterKey.LARGEST_CONTENTFUL_PAINT_TIME, FilterKey.TTFB, FilterKey.USER_BROWSER, + FilterKey.PLATFORM +]; + /** * Group filters by category - * @param {*} filtersMap * @returns + * @param map + * @param isMobile */ -export const generateFilterOptions = (map) => { +export const generateFilterOptions = (map, isMobile = false) => { const filterSection = {}; Object.keys(map).forEach(key => { + if (isMobile && MOBILE_EXCLUDE.includes(key)) { + return; + } + + if (!isMobile && WEB_EXCLUDE.includes(key)) { + return; + } + const filter = map[key]; if (filterSection.hasOwnProperty(filter.category)) { filterSection[filter.category].push(filter);