diff --git a/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx b/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx
index aa5e2ee47..c4ef52bb2 100644
--- a/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx
@@ -7,6 +7,7 @@ import WidgetPreview from '../WidgetPreview';
import WidgetSessions from '../WidgetSessions';
import { useObserver } from 'mobx-react-lite';
import WidgetName from '../WidgetName';
+import { withSiteId } from 'App/routes';
import FunnelIssues from '../Funnels/FunnelIssues/FunnelIssues';
import Breadcrumb from 'Shared/Breadcrumb';
diff --git a/frontend/app/components/Funnels/FunnelList/index.ts b/frontend/app/components/Funnels/FunnelList/index.ts
new file mode 100644
index 000000000..d03b7ff8b
--- /dev/null
+++ b/frontend/app/components/Funnels/FunnelList/index.ts
@@ -0,0 +1 @@
+export { default } from './FunnelList';
\ No newline at end of file
diff --git a/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.css b/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.module.css
similarity index 100%
rename from frontend/app/components/Funnels/FunnelWidget/FunnelWidget.css
rename to frontend/app/components/Funnels/FunnelWidget/FunnelWidget.module.css
diff --git a/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx b/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
index 981111256..5f7c1cd91 100644
--- a/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
+++ b/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
@@ -2,7 +2,7 @@ import React from 'react';
import Widget from 'App/mstore/types/widget';
import Funnelbar from './FunnelBar';
import cn from 'classnames';
-import stl from './FunnelWidget.css';
+import stl from './FunnelWidget.module.css';
import { Icon } from 'UI';
interface Props {
diff --git a/frontend/app/components/shared/Select/Select.tsx b/frontend/app/components/shared/Select/Select.tsx
index eb777a3f0..6122df577 100644
--- a/frontend/app/components/shared/Select/Select.tsx
+++ b/frontend/app/components/shared/Select/Select.tsx
@@ -14,7 +14,8 @@ interface Props {
name?: string;
[x:string]: any;
}
-export default function({ name = '', onChange, right = false, plain = false, options, isSearchable = false, components = {}, defaultValue = '', ...rest }: Props) {
+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 customStyles = {
option: (provided, state) => ({
...provided,
@@ -37,17 +38,17 @@ export default function({ name = '', onChange, right = false, plain = false, opt
borderRadius: '3px',
right: right ? 0 : undefined,
border: `1px solid ${colors['gray-light']}`,
- borderRadius: '3px',
+ // borderRadius: '3px',
backgroundColor: '#fff',
boxShadow: '1px 1px 1px rgba(0, 0, 0, 0.1)',
position: 'absolute',
minWidth: 'fit-content',
- zIndex: 99,
+ // zIndex: 99,
overflow: 'hidden',
zIndex: 100,
- ...(alignRight && { right: 0 })
+ ...(right && { right: 0 })
}),
- menuList: (provided, state) => ({
+ menuList: (provided: any, state: any) => ({
...provided,
padding: 0,
}),
@@ -95,7 +96,7 @@ export default function({ name = '', onChange, right = false, plain = false, opt
return { ...provided, opacity, transition };
},
- noOptionsMessage: (provided) => ({
+ noOptionsMessage: (provided: any) => ({
...provided,
whiteSpace: 'nowrap !important',
// minWidth: 'fit-content',
diff --git a/frontend/app/components/ui/SVG.tsx b/frontend/app/components/ui/SVG.tsx
index 87b4b2d8a..83c2bde72 100644
--- a/frontend/app/components/ui/SVG.tsx
+++ b/frontend/app/components/ui/SVG.tsx
@@ -20,6 +20,7 @@ const SVG = (props: Props) => {
case 'anchor': return ;
case 'arrow-alt-square-right': return ;
case 'arrow-down': return ;
+ case 'arrow-right-short': return ;
case 'arrow-square-left': return ;
case 'arrow-square-right': return ;
case 'arrow-up': return ;
@@ -143,6 +144,7 @@ const SVG = (props: Props) => {
case 'expand-wide': return ;
case 'explosion': return ;
case 'external-link-alt': return ;
+ case 'eye-slash-fill': return ;
case 'eye-slash': return ;
case 'eye': return ;
case 'fetch': return ;
@@ -209,6 +211,7 @@ const SVG = (props: Props) => {
case 'funnel/mouse': return ;
case 'funnel/patch-exclamation-fill': return ;
case 'funnel/sd-card': return ;
+ case 'funnel-fill': return ;
case 'funnel': return ;
case 'geo-alt-fill-custom': return ;
case 'github': return ;
diff --git a/frontend/app/constants/filterOptions.js b/frontend/app/constants/filterOptions.js
index 94d22d426..bcb2297fd 100644
--- a/frontend/app/constants/filterOptions.js
+++ b/frontend/app/constants/filterOptions.js
@@ -62,6 +62,9 @@ export const customOperators = [
export const metricTypes = [
{ text: 'Timeseries', label: 'Timeseries', value: 'timeseries' },
{ text: 'Table', label: 'Table', value: 'table' },
+ { label: 'Funnel', value: 'funnel' },
+ { label: 'Errors', value: 'errors' },
+ { label: 'Sessions', value: 'sessions' },
];
export const tableColumnName = {
diff --git a/frontend/app/mstore/index.tsx b/frontend/app/mstore/index.tsx
index 540ea596f..21fd6de75 100644
--- a/frontend/app/mstore/index.tsx
+++ b/frontend/app/mstore/index.tsx
@@ -6,7 +6,7 @@ import RoleStore from './roleStore';
import APIClient from 'App/api_client';
import FunnelStore from './funnelStore';
import { makeAutoObservable, observable, action } from "mobx"
-import { dashboardService, metricService, sessionService, userService, auditService, funnelService } from 'App/services';
+import { dashboardService, metricService, sessionService, userService, auditService, funnelService, errorService } from 'App/services';
import SettingsStore from './settingsStore';
import AuditStore from './auditStore';
import NotificationStore from './notificationStore';