diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricOverviewChart/CustomMetricOverviewChart.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricOverviewChart/CustomMetricOverviewChart.tsx index 84ab4805a..de6fb9c87 100644 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricOverviewChart/CustomMetricOverviewChart.tsx +++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricOverviewChart/CustomMetricOverviewChart.tsx @@ -1,51 +1,52 @@ import React from 'react' -import { Styles } from '../../common'; -import { AreaChart, ResponsiveContainer, XAxis, YAxis, Area, Tooltip } from 'recharts'; +import {Styles} from '../../common'; +import {AreaChart, ResponsiveContainer, XAxis, YAxis, Area, Tooltip} from 'recharts'; import CountBadge from '../../common/CountBadge'; -import { numberWithCommas } from 'App/utils'; +import {numberWithCommas} from 'App/utils'; interface Props { data: any; } + function CustomMetricOverviewChart(props: Props) { - const { data } = props; + const {data} = props; const gradientDef = Styles.gradientDef(); - + return (
-
+
- + {gradientDef} - - + + @@ -57,16 +58,16 @@ function CustomMetricOverviewChart(props: Props) { export default CustomMetricOverviewChart -const countView = (avg: any, unit: any) => { +const countView = (avg: any, unit: any) => { if (unit === 'mb') { - if (!avg) return 0; - const count = Math.trunc(avg / 1024 / 1024); - return numberWithCommas(count); + if (!avg) return 0; + const count = Math.trunc(avg / 1024 / 1024); + return numberWithCommas(count); } if (unit === 'min') { - if (!avg) return 0; - const count = Math.trunc(avg); - return numberWithCommas(count > 1000 ? count +'k' : count); + if (!avg) return 0; + const count = Math.trunc(avg); + return numberWithCommas(count > 1000 ? count + 'k' : count); } - return avg ? numberWithCommas(avg): 0; -} \ No newline at end of file + return avg ? numberWithCommas(avg) : 0; +} diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/SessionsBy.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/SessionsBy.tsx index b7a086d0c..5abc2d895 100644 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/SessionsBy.tsx +++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/SessionsBy.tsx @@ -53,6 +53,7 @@ function SessionsBy(props: Props) {
{data.values && data.values.length === 0 ? (
- {metric.data.chart.map((item, i) => + {data.chart.map((item, i) => { - const isMoreThanK = count >= 1000; - return numberWithCommas(isMoreThanK ? Math.trunc(count / 1000) + 'k' : count); + const isMoreThanK = count >= 1000; + return numberWithCommas(isMoreThanK ? Math.trunc(count / 1000) + 'k' : count); } export default { - customMetricColors, - colors, - colorsTeal, - colorsPie, - colorsx, - compareColors, - compareColorsx, - lineColor: '#2A7B7F', - lineColorCompare: '#394EFF', - strokeColor: colors[2], - xaxis: { - axisLine: { stroke: '#CCCCCC' }, - interval: 0, - dataKey: "time", - tick: { fill: '#999999', fontSize: 9 }, - tickLine: { stroke: '#CCCCCC' }, - strokeWidth: 0.5 - }, - yaxis: { - axisLine: { stroke: '#CCCCCC' }, - tick: { fill: '#999999', fontSize: 9 }, - tickLine: { stroke: '#CCCCCC' }, - }, - axisLabelLeft: { - angle: -90, - fill: '#999999', - offset: 10, - style: { textAnchor: 'middle' }, - position: 'insideLeft', - fontSize: 11 - }, - tickFormatter: val => `${countView(val)}`, - tickFormatterBytes: val => Math.round(val / 1024 / 1024), - chartMargins: { left: 0, right: 20, top: 10, bottom: 5 }, - tooltip: { - cursor: { - fill: '#f6f6f6' + customMetricColors, + colors, + colorsTeal, + colorsPie, + colorsx, + compareColors, + compareColorsx, + lineColor: '#2A7B7F', + lineColorCompare: '#394EFF', + strokeColor: compareColors[2], + xaxis: { + axisLine: {stroke: '#CCCCCC'}, + interval: 0, + dataKey: "time", + tick: {fill: '#999999', fontSize: 9}, + tickLine: {stroke: '#CCCCCC'}, + strokeWidth: 0.5 }, - contentStyle: { - padding: '5px', - background: 'white', - border: '1px solid #DDD', - borderRadius: '3px', - lineHeight: '1.25rem', - color: '#888', - fontSize: '10px' + yaxis: { + axisLine: {stroke: '#CCCCCC'}, + tick: {fill: '#999999', fontSize: 9}, + tickLine: {stroke: '#CCCCCC'}, }, - labelStyle: {}, - formatter: (value, name, { unit }) => { - if (unit && unit.trim() === 'mb') { - return numberWithCommas(Math.round(value / 1024 / 1024)) - } - return numberWithCommas(Math.round(value)) + axisLabelLeft: { + angle: -90, + fill: '#999999', + offset: 10, + style: {textAnchor: 'middle'}, + position: 'insideLeft', + fontSize: 11 }, - itemStyle: { - lineHeight: '0.75rem', - color: '#000', - fontSize: '12px' - } - }, - gradientDef: () => ( - - - - - - - - - - - ) -}; \ No newline at end of file + tickFormatter: val => `${countView(val)}`, + tickFormatterBytes: val => Math.round(val / 1024 / 1024), + chartMargins: {left: 0, right: 20, top: 10, bottom: 5}, + tooltip: { + cursor: { + fill: '#f6f6f6' + }, + contentStyle: { + padding: '5px', + background: 'white', + border: '1px solid #DDD', + borderRadius: '3px', + lineHeight: '1.25rem', + color: '#888', + fontSize: '10px' + }, + labelStyle: {}, + formatter: (value, name, {unit}) => { + if (unit && unit.trim() === 'mb') { + return numberWithCommas(Math.round(value / 1024 / 1024)) + } + return numberWithCommas(Math.round(value)) + }, + itemStyle: { + lineHeight: '0.75rem', + color: '#000', + fontSize: '12px' + } + }, + gradientDef: () => ( + + + + + + + + + + + ) +}; diff --git a/frontend/app/components/Dashboard/components/AddCardSelectionModal.tsx b/frontend/app/components/Dashboard/components/AddCardSelectionModal.tsx index 649122170..037bf8cae 100644 --- a/frontend/app/components/Dashboard/components/AddCardSelectionModal.tsx +++ b/frontend/app/components/Dashboard/components/AddCardSelectionModal.tsx @@ -33,17 +33,17 @@ function AddCardSelectionModal(props: Props) { onClick(true)}>
- + Add from library -

Select from 12 available

+ {/*

Select from 12 available

*/}
onClick(false)}>
- -

Create New Card

+ + Create New Card
diff --git a/frontend/app/components/Dashboard/components/CreateDashboardButton.tsx b/frontend/app/components/Dashboard/components/CreateDashboardButton.tsx index d5731517d..639c63903 100644 --- a/frontend/app/components/Dashboard/components/CreateDashboardButton.tsx +++ b/frontend/app/components/Dashboard/components/CreateDashboardButton.tsx @@ -8,7 +8,7 @@ interface Props { } function CreateDashboardButton({disabled = false}: Props) { - const [showModal, setShowModal] = React.useState(false); + const [showModal, setShowModal] = React.useState(true); return <>
+ )} + description={( + + )} + /> + + )} + /> + + ); +} + +export default Bars; diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard.tsx index c36729632..8fbe5e865 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard.tsx @@ -1,20 +1,22 @@ import React from 'react' function ExCard({ - title, - children, - type, - onCard, -}: { - title: React.ReactNode; - children: React.ReactNode; - type: string; - onCard: (card: string) => void; + title, + children, + type, + onCard, + height, + }: { + title: React.ReactNode; + children: React.ReactNode; + type: string; + onCard: (card: string) => void; + height?: number; }) { return (
{title}
onCard(type)}>{children}
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/InsightsExample.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/InsightsExample.tsx new file mode 100644 index 000000000..b3271aa33 --- /dev/null +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/InsightsExample.tsx @@ -0,0 +1,56 @@ +import React from 'react'; +import ExCard from "Components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard"; +import InsightsCard from "Components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard"; +import {InsightIssue} from "App/mstore/types/widget"; + +interface Props { + title: string; + type: string; + onCard: (card: string) => void; +} + +function InsightsExample(props: Props) { + const data = { + issues: [ + { + "category": "errors", + "name": "Error: Invalid unit value NaN", + "value": 562, + "oldValue": null, + "ratio": 7.472410583698976, + "change": 1, + "isNew": true + }, + { + "category": "errors", + "name": "TypeError: e.node.getContext is not a function", + "value": 128, + "oldValue": 1, + "ratio": 1.7019013429065284, + "change": 12700.0, + "isNew": false + }, + { + "category": "errors", + "name": "Unhandled Promise Rejection: {\"message\":\"! POST error on /client/members; 400\",\"response\":{}}", + "value": 26, + "oldValue": null, + "ratio": 0.34569871027788857, + "change": 1, + "isNew": true + } + ].map( + (i: any) => + new InsightIssue(i.category, i.name, i.ratio, i.oldValue, i.value, i.change, i.isNew) + ) + } + return ( + + + + ); +} + +export default InsightsExample; diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByIssues.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByIssues.tsx new file mode 100644 index 000000000..a8af2fd31 --- /dev/null +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByIssues.tsx @@ -0,0 +1,46 @@ +import React from 'react'; + +import {Icon} from 'UI'; + +import ExCard from '../ExCard'; +import ByComponent from './Component'; + +function ByIssues(props: any) { + const rows = [ + { + label: 'Dead Click', + progress: 85, + value: '2.5K', + icon: , + }, + { + label: 'Click Rage', + progress: 25, + value: '405', + icon: , + }, + { + label: 'Bad Request', + progress: 5, + value: '302', + icon: , + }, + { + label: 'Mouse Thrashing', + progress: 3, + value: '194', + icon: , + }, + ]; + + const lineWidth = 200; + return ( + + ); +} + +export default ByIssues; diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/WebVital.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/WebVital.tsx new file mode 100644 index 000000000..c15e3d86a --- /dev/null +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/WebVital.tsx @@ -0,0 +1,55 @@ +import React from 'react'; +import CustomMetricOverviewChart from "Components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricOverviewChart"; +import ExCard from "Components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard"; + +interface Props { + title: string; + type: string; + onCard: (card: string) => void; +} + +function WebVital(props: Props) { + const data = { + "value": 8.33316146432396, + "chart": [ + { + "timestamp": 1718755200000, + "value": 9.37317620650954 + }, + { + "timestamp": 1718870399833, + "value": 6.294931643881294 + }, + { + "timestamp": 1718985599666, + "value": 7.103504928806133 + }, + { + "timestamp": 1719100799499, + "value": 7.946568201563857 + }, + { + "timestamp": 1719215999332, + "value": 8.941158674935712 + }, + { + "timestamp": 1719331199165, + "value": 10.180191693290734 + }, + { + "timestamp": 1719446398998, + "value": 0 + } + ], + "unit": "%" + } + return ( + + + + ); +} + +export default WebVital; diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx index ac189a15e..e4fe08fa4 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx @@ -22,6 +22,7 @@ const SelectCard: React.FC = (props: SelectCardProps) => { const handleCardSelection = (card: string) => { + console.log('card', card); const selectedCard = CARD_LIST.find((c) => c.key === card) as CardType; metricStore.merge({ metricType: selectedCard.cardType, @@ -33,8 +34,8 @@ const SelectCard: React.FC = (props: SelectCardProps) => { const cardItems = useMemo(() => { return CARD_LIST.filter((card) => card.category === selected).map((card) => ( -
- +
+
)); }, [selected]); @@ -134,7 +135,7 @@ interface ExampleCardsGridProps { const ExampleCardsGrid: React.FC = ({items}) => (
{items} diff --git a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx index 6018ef5f7..ffea3f484 100644 --- a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx +++ b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx @@ -1,111 +1,114 @@ -import React, { useEffect } from 'react'; -import { observer } from 'mobx-react-lite'; -import { useStore } from 'App/mstore'; -import { Loader } from 'UI'; -import { withSiteId } from 'App/routes'; +import React, {useEffect} from 'react'; +import {observer} from 'mobx-react-lite'; +import {useStore} from 'App/mstore'; +import {Loader} from 'UI'; +import {withSiteId} from 'App/routes'; import withModal from 'App/components/Modal/withModal'; import DashboardWidgetGrid from '../DashboardWidgetGrid'; -import { withRouter, RouteComponentProps } from 'react-router-dom'; -import { useModal } from 'App/components/Modal'; +import {withRouter, RouteComponentProps} from 'react-router-dom'; +import {useModal} from 'App/components/Modal'; import DashboardModal from '../DashboardModal'; import AlertFormModal from 'App/components/Alerts/AlertFormModal'; import withPageTitle from 'HOCs/withPageTitle'; import withReport from 'App/components/hocs/withReport'; import DashboardHeader from '../DashboardHeader'; +import {useHistory} from "react-router"; interface IProps { - siteId: string; - dashboardId: any; - renderReport?: any; + siteId: string; + dashboardId: any; + renderReport?: any; } type Props = IProps & RouteComponentProps; function DashboardView(props: Props) { - const { siteId, dashboardId } = props; - const { dashboardStore } = useStore(); - const { showModal, hideModal } = useModal(); + const {siteId, dashboardId} = props; + const {dashboardStore} = useStore(); + const {showModal, hideModal} = useModal(); + const history = useHistory(); - const showAlertModal = dashboardStore.showAlertModal; - const loading = dashboardStore.fetchingDashboard; - const dashboard: any = dashboardStore.selectedDashboard; + const showAlertModal = dashboardStore.showAlertModal; + const loading = dashboardStore.fetchingDashboard; + const dashboard: any = dashboardStore.selectedDashboard; - const queryParams = new URLSearchParams(props.location.search); + const queryParams = new URLSearchParams(location.search); - const trimQuery = () => { - if (!queryParams.has('modal')) return; - queryParams.delete('modal'); - props.history.replace({ - search: queryParams.toString(), - }); - }; + const trimQuery = () => { + if (!queryParams.has('modal')) return; + queryParams.delete('modal'); + history.replace({ + search: queryParams.toString(), + }); + }; - useEffect(() => { - if (showAlertModal) { - showModal( - { - hideModal(); - dashboardStore.toggleAlertModal(false) - }} - />, - { right: false, width: 580 }, - () => dashboardStore.toggleAlertModal(false) - ) - } - }, [showAlertModal]) + useEffect(() => { + if (showAlertModal) { + showModal( + { + hideModal(); + dashboardStore.toggleAlertModal(false) + }} + />, + {right: false, width: 580}, + () => dashboardStore.toggleAlertModal(false) + ) + } + }, [showAlertModal]) - const pushQuery = () => { - if (!queryParams.has('modal')) props.history.push('?modal=addMetric'); - }; + const pushQuery = () => { + if (!queryParams.has('modal')) history.push('?modal=addMetric'); + }; - useEffect(() => { - if (queryParams.has('modal')) { - onAddWidgets(); - trimQuery(); - } - }, []); + useEffect(() => { + if (queryParams.has('modal')) { + onAddWidgets(); + trimQuery(); + } + }, []); - useEffect(() => { - const isExists = dashboardStore.getDashboardById(dashboardId); - if (!isExists) { - props.history.push(withSiteId(`/dashboard`, siteId)); - } - }, [dashboardId]); + useEffect(() => { + const isExists = dashboardStore.getDashboardById(dashboardId); + if (!isExists) { + history.push(withSiteId(`/dashboard`, siteId)); + } + }, [dashboardId]); - useEffect(() => { - if (!dashboard || !dashboard.dashboardId) return; - dashboardStore.fetch(dashboard.dashboardId); - }, [dashboard]); + useEffect(() => { + if (!dashboard || !dashboard.dashboardId) return; + dashboardStore.fetch(dashboard.dashboardId); + }, [dashboard]); - const onAddWidgets = () => { - dashboardStore.initDashboard(dashboard); - showModal( - , - { right: true } + const onAddWidgets = () => { + dashboardStore.initDashboard(dashboard); + showModal( + , + {right: true} + ); + }; + + if (!dashboard) return null; + + return ( + +
+ {/* @ts-ignore */} + + + +
+ ); - }; - - if (!dashboard) return null; - - return ( - -
- {/* @ts-ignore */} - - - -
- - ); } + // @ts-ignore export default withPageTitle('Dashboards - OpenReplay')( - withReport(withRouter(withModal(observer(DashboardView)))) + withReport(withModal(observer(DashboardView))) ); diff --git a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx index 4f26f2d32..bbd945f0b 100644 --- a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx +++ b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx @@ -1,113 +1,117 @@ import React from 'react'; -import { useStore } from 'App/mstore'; +import {useStore} from 'App/mstore'; import WidgetWrapper from '../WidgetWrapper'; -import { NoContent, Loader, Icon } from 'UI'; -import { useObserver } from 'mobx-react-lite'; +import {NoContent, Loader, Icon} from 'UI'; +import {useObserver} from 'mobx-react-lite'; import Widget from 'App/mstore/types/widget'; import MetricTypeList from '../MetricTypeList'; import WidgetWrapperNew from "Components/Dashboard/components/WidgetWrapper/WidgetWrapperNew"; +import {Empty} from "antd"; interface Props { - siteId: string; - dashboardId: string; - onEditHandler: () => void; - id?: string; + siteId: string; + dashboardId: string; + onEditHandler: () => void; + id?: string; } + function DashboardWidgetGrid(props: Props) { - const { dashboardId, siteId } = props; - const { dashboardStore } = useStore(); - const loading = useObserver(() => dashboardStore.isLoading); - const dashboard = dashboardStore.selectedDashboard; - const list = useObserver(() => dashboard?.widgets); - const smallWidgets: Widget[] = []; - const regularWidgets: Widget[] = []; + const {dashboardId, siteId} = props; + const {dashboardStore} = useStore(); + const loading = useObserver(() => dashboardStore.isLoading); + const dashboard = dashboardStore.selectedDashboard; + const list = useObserver(() => dashboard?.widgets); + const smallWidgets: Widget[] = []; + const regularWidgets: Widget[] = []; - list.forEach((item) => { - if (item.config.col === 1) { - smallWidgets.push(item); - } else { - regularWidgets.push(item); - } - }); - - const smallWidgetsLen = smallWidgets.length; - - return useObserver(() => ( - // @ts-ignore - - -
-
- There are no cards in this dashboard -
-
- Create a card from any of the below types or pick an existing one from your library. -
-
-
- -
-
+ list?.forEach((item) => { + if (item.config.col === 1) { + smallWidgets.push(item); + } else { + regularWidgets.push(item); } - > -
{smallWidgets.length > 0 ? ( - <> -
- - Web Vitals -
+ }); - {smallWidgets && - smallWidgets.map((item: any, index: any) => ( - - - dashboard.swapWidgetPosition(dragIndex, hoverIndex) + const smallWidgetsLen = smallWidgets.length; - }dashboardId={dashboardId} - siteId={siteId} - isWidget={true} - grid="vitals" - /> - - ))} + return useObserver(() => ( + // @ts-ignore + list?.length === 0 ? : ( + + +
+
+ There are no cards in this dashboard +
+
+ Create a card from any of the below types or pick an existing one from your library. +
+
+ {/*
*/} + {/* */} + {/*
*/} +
+ } + > +
{smallWidgets.length > 0 ? ( + <> +
+ + Web Vitals +
- - ) : null} + {smallWidgets && + smallWidgets.map((item: any, index: any) => ( + + + dashboard?.swapWidgetPosition(dragIndex, hoverIndex) - {smallWidgets.length > 0 && regularWidgets.length > 0 ? ( -
- - All Cards -
- ) : null} + } dashboardId={dashboardId} + siteId={siteId} + isWidget={true} + grid="vitals" + /> + + ))} - {regularWidgets && - regularWidgets.map((item: any, index: any) => ( - - - dashboard.swapWidgetPosition(dragIndex, hoverIndex) - } - dashboardId={dashboardId} - siteId={siteId} - isWidget={true} - grid="other" - /> - - ))} -
- - - )); + + ) : null} + + {smallWidgets.length > 0 && regularWidgets.length > 0 ? ( +
+ + All Cards +
+ ) : null} + + {regularWidgets && + regularWidgets.map((item: any, index: any) => ( + + + dashboard?.swapWidgetPosition(dragIndex, hoverIndex) + } + dashboardId={dashboardId} + siteId={siteId} + isWidget={true} + grid="other" + /> + + ))} +
+ + + ) + )); } export default DashboardWidgetGrid; diff --git a/frontend/app/components/Dashboard/components/WidgetPredefinedChart/WidgetPredefinedChart.tsx b/frontend/app/components/Dashboard/components/WidgetPredefinedChart/WidgetPredefinedChart.tsx index 88da5d888..0cfb02c2b 100644 --- a/frontend/app/components/Dashboard/components/WidgetPredefinedChart/WidgetPredefinedChart.tsx +++ b/frontend/app/components/Dashboard/components/WidgetPredefinedChart/WidgetPredefinedChart.tsx @@ -42,7 +42,7 @@ function WidgetPredefinedChart(props: Props) { case FilterKey.ERRORS_PER_TYPE: return case FilterKey.ERRORS_PER_DOMAINS: - return + return case FilterKey.RESOURCES_BY_PARTY: return case FilterKey.IMPACTED_SESSIONS_BY_JS_ERRORS: diff --git a/frontend/app/components/ui/Icons/color_issues_bad_request.tsx b/frontend/app/components/ui/Icons/color_issues_bad_request.tsx new file mode 100644 index 000000000..dc00e7aa0 --- /dev/null +++ b/frontend/app/components/ui/Icons/color_issues_bad_request.tsx @@ -0,0 +1,28 @@ + +/* Auto-generated, do not edit */ +import React from 'react'; + +interface Props { + size?: number | string; + width?: number | string; + height?: number | string; + fill?: string; +} + +function Color_issues_bad_request(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + + + + + + + + + + ); +} + +export default Color_issues_bad_request; diff --git a/frontend/app/components/ui/Icons/color_issues_click_rage.tsx b/frontend/app/components/ui/Icons/color_issues_click_rage.tsx new file mode 100644 index 000000000..3d6081055 --- /dev/null +++ b/frontend/app/components/ui/Icons/color_issues_click_rage.tsx @@ -0,0 +1,25 @@ + +/* Auto-generated, do not edit */ +import React from 'react'; + +interface Props { + size?: number | string; + width?: number | string; + height?: number | string; + fill?: string; +} + +function Color_issues_click_rage(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + + + + + + + ); +} + +export default Color_issues_click_rage; diff --git a/frontend/app/components/ui/Icons/color_issues_cpu.tsx b/frontend/app/components/ui/Icons/color_issues_cpu.tsx new file mode 100644 index 000000000..55ec1444c --- /dev/null +++ b/frontend/app/components/ui/Icons/color_issues_cpu.tsx @@ -0,0 +1,31 @@ + +/* Auto-generated, do not edit */ +import React from 'react'; + +interface Props { + size?: number | string; + width?: number | string; + height?: number | string; + fill?: string; +} + +function Color_issues_cpu(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + + + + + + + + + + + + + ); +} + +export default Color_issues_cpu; diff --git a/frontend/app/components/ui/Icons/color_issues_crash.tsx b/frontend/app/components/ui/Icons/color_issues_crash.tsx new file mode 100644 index 000000000..8568cc3b7 --- /dev/null +++ b/frontend/app/components/ui/Icons/color_issues_crash.tsx @@ -0,0 +1,26 @@ + +/* Auto-generated, do not edit */ +import React from 'react'; + +interface Props { + size?: number | string; + width?: number | string; + height?: number | string; + fill?: string; +} + +function Color_issues_crash(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + + + + + + + + ); +} + +export default Color_issues_crash; diff --git a/frontend/app/components/ui/Icons/color_issues_custom.tsx b/frontend/app/components/ui/Icons/color_issues_custom.tsx new file mode 100644 index 000000000..d9cca3880 --- /dev/null +++ b/frontend/app/components/ui/Icons/color_issues_custom.tsx @@ -0,0 +1,25 @@ + +/* Auto-generated, do not edit */ +import React from 'react'; + +interface Props { + size?: number | string; + width?: number | string; + height?: number | string; + fill?: string; +} + +function Color_issues_custom(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + + + + + + + ); +} + +export default Color_issues_custom; diff --git a/frontend/app/components/ui/Icons/color_issues_dead_click.tsx b/frontend/app/components/ui/Icons/color_issues_dead_click.tsx new file mode 100644 index 000000000..21d3aef23 --- /dev/null +++ b/frontend/app/components/ui/Icons/color_issues_dead_click.tsx @@ -0,0 +1,31 @@ + +/* Auto-generated, do not edit */ +import React from 'react'; + +interface Props { + size?: number | string; + width?: number | string; + height?: number | string; + fill?: string; +} + +function Color_issues_dead_click(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + + + + + + + + + + + + + ); +} + +export default Color_issues_dead_click; diff --git a/frontend/app/components/ui/Icons/color_issues_errors.tsx b/frontend/app/components/ui/Icons/color_issues_errors.tsx new file mode 100644 index 000000000..0cd4c3ca2 --- /dev/null +++ b/frontend/app/components/ui/Icons/color_issues_errors.tsx @@ -0,0 +1,24 @@ + +/* Auto-generated, do not edit */ +import React from 'react'; + +interface Props { + size?: number | string; + width?: number | string; + height?: number | string; + fill?: string; +} + +function Color_issues_errors(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + + + + + + ); +} + +export default Color_issues_errors; diff --git a/frontend/app/components/ui/Icons/color_issues_excessive_scrolling.tsx b/frontend/app/components/ui/Icons/color_issues_excessive_scrolling.tsx new file mode 100644 index 000000000..51cceb591 --- /dev/null +++ b/frontend/app/components/ui/Icons/color_issues_excessive_scrolling.tsx @@ -0,0 +1,24 @@ + +/* Auto-generated, do not edit */ +import React from 'react'; + +interface Props { + size?: number | string; + width?: number | string; + height?: number | string; + fill?: string; +} + +function Color_issues_excessive_scrolling(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + + + + + + ); +} + +export default Color_issues_excessive_scrolling; diff --git a/frontend/app/components/ui/Icons/color_issues_js_exception.tsx b/frontend/app/components/ui/Icons/color_issues_js_exception.tsx new file mode 100644 index 000000000..31b11070f --- /dev/null +++ b/frontend/app/components/ui/Icons/color_issues_js_exception.tsx @@ -0,0 +1,24 @@ + +/* Auto-generated, do not edit */ +import React from 'react'; + +interface Props { + size?: number | string; + width?: number | string; + height?: number | string; + fill?: string; +} + +function Color_issues_js_exception(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + + + + + + ); +} + +export default Color_issues_js_exception; diff --git a/frontend/app/components/ui/Icons/color_issues_memory.tsx b/frontend/app/components/ui/Icons/color_issues_memory.tsx new file mode 100644 index 000000000..0c93aacd9 --- /dev/null +++ b/frontend/app/components/ui/Icons/color_issues_memory.tsx @@ -0,0 +1,30 @@ + +/* Auto-generated, do not edit */ +import React from 'react'; + +interface Props { + size?: number | string; + width?: number | string; + height?: number | string; + fill?: string; +} + +function Color_issues_memory(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + + + + + + + + + + + + ); +} + +export default Color_issues_memory; diff --git a/frontend/app/components/ui/Icons/color_issues_missing_resource.tsx b/frontend/app/components/ui/Icons/color_issues_missing_resource.tsx new file mode 100644 index 000000000..09fe666b4 --- /dev/null +++ b/frontend/app/components/ui/Icons/color_issues_missing_resource.tsx @@ -0,0 +1,27 @@ + +/* Auto-generated, do not edit */ +import React from 'react'; + +interface Props { + size?: number | string; + width?: number | string; + height?: number | string; + fill?: string; +} + +function Color_issues_missing_resource(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + + + + + + + + + ); +} + +export default Color_issues_missing_resource; diff --git a/frontend/app/components/ui/Icons/color_issues_mouse_thrashing.tsx b/frontend/app/components/ui/Icons/color_issues_mouse_thrashing.tsx new file mode 100644 index 000000000..6ea8b4dee --- /dev/null +++ b/frontend/app/components/ui/Icons/color_issues_mouse_thrashing.tsx @@ -0,0 +1,23 @@ + +/* Auto-generated, do not edit */ +import React from 'react'; + +interface Props { + size?: number | string; + width?: number | string; + height?: number | string; + fill?: string; +} + +function Color_issues_mouse_thrashing(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + + + + + ); +} + +export default Color_issues_mouse_thrashing; diff --git a/frontend/app/components/ui/Icons/color_issues_mouse_trashing.tsx b/frontend/app/components/ui/Icons/color_issues_mouse_trashing.tsx new file mode 100644 index 000000000..cd8257212 --- /dev/null +++ b/frontend/app/components/ui/Icons/color_issues_mouse_trashing.tsx @@ -0,0 +1,23 @@ + +/* Auto-generated, do not edit */ +import React from 'react'; + +interface Props { + size?: number | string; + width?: number | string; + height?: number | string; + fill?: string; +} + +function Color_issues_mouse_trashing(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + + + + + ); +} + +export default Color_issues_mouse_trashing; diff --git a/frontend/app/components/ui/Icons/color_issues_slow_page_load.tsx b/frontend/app/components/ui/Icons/color_issues_slow_page_load.tsx new file mode 100644 index 000000000..074c74c86 --- /dev/null +++ b/frontend/app/components/ui/Icons/color_issues_slow_page_load.tsx @@ -0,0 +1,38 @@ + +/* Auto-generated, do not edit */ +import React from 'react'; + +interface Props { + size?: number | string; + width?: number | string; + height?: number | string; + fill?: string; +} + +function Color_issues_slow_page_load(props: Props) { + const { size = 14, width = size, height = size, fill = '' } = props; + return ( + + + + + + + + + + + + + + + + + + + + + ); +} + +export default Color_issues_slow_page_load; diff --git a/frontend/app/components/ui/Icons/index.ts b/frontend/app/components/ui/Icons/index.ts index 6fc2a46b3..2f57a0ebd 100644 --- a/frontend/app/components/ui/Icons/index.ts +++ b/frontend/app/components/ui/Icons/index.ts @@ -159,6 +159,19 @@ export { default as Color_firefox } from './color_firefox'; export { default as Color_fr } from './color_fr'; export { default as Color_gb } from './color_gb'; export { default as Color_in } from './color_in'; +export { default as Color_issues_bad_request } from './color_issues_bad_request'; +export { default as Color_issues_click_rage } from './color_issues_click_rage'; +export { default as Color_issues_cpu } from './color_issues_cpu'; +export { default as Color_issues_crash } from './color_issues_crash'; +export { default as Color_issues_custom } from './color_issues_custom'; +export { default as Color_issues_dead_click } from './color_issues_dead_click'; +export { default as Color_issues_errors } from './color_issues_errors'; +export { default as Color_issues_excessive_scrolling } from './color_issues_excessive_scrolling'; +export { default as Color_issues_js_exception } from './color_issues_js_exception'; +export { default as Color_issues_memory } from './color_issues_memory'; +export { default as Color_issues_missing_resource } from './color_issues_missing_resource'; +export { default as Color_issues_mouse_thrashing } from './color_issues_mouse_thrashing'; +export { default as Color_issues_slow_page_load } from './color_issues_slow_page_load'; export { default as Color_microsoft } from './color_microsoft'; export { default as Color_opera } from './color_opera'; export { default as Color_os_android } from './color_os_android'; diff --git a/frontend/app/components/ui/SVG.tsx b/frontend/app/components/ui/SVG.tsx index 4fdadcbe1..b46650f1f 100644 --- a/frontend/app/components/ui/SVG.tsx +++ b/frontend/app/components/ui/SVG.tsx @@ -161,6 +161,19 @@ import { 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, @@ -542,7 +555,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/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/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'; interface Props { name: IconNames; @@ -1034,6 +1047,45 @@ const SVG = (props: Props) => { // case 'color/in': case 'color/in': return ; + // case 'color/issues/bad_request': + case 'color/issues/bad_request': return ; + + // case 'color/issues/click_rage': + case 'color/issues/click_rage': return ; + + // case 'color/issues/cpu': + case 'color/issues/cpu': return ; + + // case 'color/issues/crash': + case 'color/issues/crash': return ; + + // case 'color/issues/custom': + case 'color/issues/custom': return ; + + // case 'color/issues/dead_click': + case 'color/issues/dead_click': return ; + + // case 'color/issues/errors': + case 'color/issues/errors': return ; + + // case 'color/issues/excessive_scrolling': + case 'color/issues/excessive_scrolling': return ; + + // case 'color/issues/js_exception': + case 'color/issues/js_exception': return ; + + // case 'color/issues/memory': + case 'color/issues/memory': return ; + + // case 'color/issues/missing_resource': + case 'color/issues/missing_resource': return ; + + // case 'color/issues/mouse_thrashing': + case 'color/issues/mouse_thrashing': return ; + + // case 'color/issues/slow_page_load': + case 'color/issues/slow_page_load': return ; + // case 'color/microsoft': case 'color/microsoft': return ; diff --git a/frontend/app/mstore/types/IconProvider.tsx b/frontend/app/mstore/types/IconProvider.tsx index a4654633d..e792fd87f 100644 --- a/frontend/app/mstore/types/IconProvider.tsx +++ b/frontend/app/mstore/types/IconProvider.tsx @@ -46,17 +46,20 @@ class CountryIconProvider implements IconProvider { class IssueIconProvider implements IconProvider { getIcon(name: string): React.ReactNode { const s = name.toLowerCase(); - // let icon = 'event/' + s; // TODO use this line - let icon = 'event/clickrage'; + let icon = 'color/issues/' + s; // TODO use this line - if (s.includes('dead_click')) { - icon = 'event/clickrage'; - } else if (s.includes('click_rage')) { - icon = 'event/clickrage'; - } else if (s.includes('mouse_thrashing')) { - icon = 'event/clickrage'; - } + // if (s.includes('dead_click')) { + // icon = 'color/issues/dead_click'; + // } else if (s.includes('click_rage')) { + // icon = 'color/issues/click_rage'; + // } else if (s.includes('mouse_thrashing')) { + // icon = 'color/issues/mouse_thrashing'; + // } else if (s.includes('bad_request')) { + // icon = 'color/issues/bad_request'; + // } else if (s.includes('crash')) { + // icon = 'color/issues/crash'; + // } return } } diff --git a/frontend/app/mstore/types/widget.ts b/frontend/app/mstore/types/widget.ts index d93ebedda..e33d8b61e 100644 --- a/frontend/app/mstore/types/widget.ts +++ b/frontend/app/mstore/types/widget.ts @@ -15,8 +15,6 @@ import FilterItem from './filterItem'; import {filtersMap} from 'Types/filter/newFilter'; import Issue from '../types/issue'; import {durationFormatted} from 'App/date'; -import React from "react"; -import {countries} from "App/constants/countries"; import {SessionsByRow} from "./sessionsCardData"; export class InsightIssue { diff --git a/frontend/app/svg/icons/color/issues/bad_request.svg b/frontend/app/svg/icons/color/issues/bad_request.svg new file mode 100644 index 000000000..fcfc41af5 --- /dev/null +++ b/frontend/app/svg/icons/color/issues/bad_request.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/frontend/app/svg/icons/color/issues/click_rage.svg b/frontend/app/svg/icons/color/issues/click_rage.svg new file mode 100644 index 000000000..4a0ca78c2 --- /dev/null +++ b/frontend/app/svg/icons/color/issues/click_rage.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/frontend/app/svg/icons/color/issues/cpu.svg b/frontend/app/svg/icons/color/issues/cpu.svg new file mode 100644 index 000000000..a1cfdc71c --- /dev/null +++ b/frontend/app/svg/icons/color/issues/cpu.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/frontend/app/svg/icons/color/issues/crash.svg b/frontend/app/svg/icons/color/issues/crash.svg new file mode 100644 index 000000000..bcd81ac45 --- /dev/null +++ b/frontend/app/svg/icons/color/issues/crash.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/frontend/app/svg/icons/color/issues/custom.svg b/frontend/app/svg/icons/color/issues/custom.svg new file mode 100644 index 000000000..b9553e452 --- /dev/null +++ b/frontend/app/svg/icons/color/issues/custom.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/frontend/app/svg/icons/color/issues/dead_click.svg b/frontend/app/svg/icons/color/issues/dead_click.svg new file mode 100644 index 000000000..b4961ffed --- /dev/null +++ b/frontend/app/svg/icons/color/issues/dead_click.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/frontend/app/svg/icons/color/issues/errors.svg b/frontend/app/svg/icons/color/issues/errors.svg new file mode 100644 index 000000000..be7dc9917 --- /dev/null +++ b/frontend/app/svg/icons/color/issues/errors.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/frontend/app/svg/icons/color/issues/excessive_scrolling.svg b/frontend/app/svg/icons/color/issues/excessive_scrolling.svg new file mode 100644 index 000000000..5170cea16 --- /dev/null +++ b/frontend/app/svg/icons/color/issues/excessive_scrolling.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/frontend/app/svg/icons/color/issues/js_exception.svg b/frontend/app/svg/icons/color/issues/js_exception.svg new file mode 100644 index 000000000..be7dc9917 --- /dev/null +++ b/frontend/app/svg/icons/color/issues/js_exception.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/frontend/app/svg/icons/color/issues/memory.svg b/frontend/app/svg/icons/color/issues/memory.svg new file mode 100644 index 000000000..12ea0fa9e --- /dev/null +++ b/frontend/app/svg/icons/color/issues/memory.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/frontend/app/svg/icons/color/issues/missing_resource.svg b/frontend/app/svg/icons/color/issues/missing_resource.svg new file mode 100644 index 000000000..23197f14d --- /dev/null +++ b/frontend/app/svg/icons/color/issues/missing_resource.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/frontend/app/svg/icons/color/issues/mouse_thrashing.svg b/frontend/app/svg/icons/color/issues/mouse_thrashing.svg new file mode 100644 index 000000000..318e9b8fc --- /dev/null +++ b/frontend/app/svg/icons/color/issues/mouse_thrashing.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/frontend/app/svg/icons/color/issues/slow_page_load.svg b/frontend/app/svg/icons/color/issues/slow_page_load.svg new file mode 100644 index 000000000..4206af9cf --- /dev/null +++ b/frontend/app/svg/icons/color/issues/slow_page_load.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + \ No newline at end of file