change(ui): example categorize and other improvements
This commit is contained in:
Shekar Siri
parent
4abed73219
commit
bd9aa50605
44 changed files with 1384 additions and 343 deletions
|
|
@ -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 (
|
||||
<div className="relative -mx-4">
|
||||
<div className="absolute flex items-start flex-col justify-start inset-0 p-3">
|
||||
<div className="mb-2 flex items-center" >
|
||||
<div className="mb-2 flex items-center">
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<CountBadge
|
||||
// title={subtext}
|
||||
count={ countView(Math.round(data.value), data.unit) }
|
||||
change={ data.progress || 0 }
|
||||
unit={ data.unit }
|
||||
count={countView(Math.round(data.value), data.unit)}
|
||||
change={data.progress || 0}
|
||||
unit={data.unit}
|
||||
// className={textClass}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ResponsiveContainer height={ 100 } width="100%">
|
||||
<ResponsiveContainer height={100} width="100%">
|
||||
<AreaChart
|
||||
data={ data.chart }
|
||||
margin={ {
|
||||
data={data.chart}
|
||||
margin={{
|
||||
top: 50, right: 0, left: 0, bottom: 0,
|
||||
} }
|
||||
}}
|
||||
>
|
||||
{gradientDef}
|
||||
<Tooltip {...Styles.tooltip} />
|
||||
<XAxis hide {...Styles.xaxis} interval={4} dataKey="time" />
|
||||
<YAxis hide interval={ 0 } />
|
||||
<XAxis hide {...Styles.xaxis} interval={4} dataKey="time"/>
|
||||
<YAxis hide interval={0}/>
|
||||
<Area
|
||||
name={''}
|
||||
// unit={unit && ' ' + unit}
|
||||
type="monotone"
|
||||
dataKey="value"
|
||||
stroke={Styles.strokeColor}
|
||||
fillOpacity={ 1 }
|
||||
strokeWidth={ 2 }
|
||||
strokeOpacity={ 0.8 }
|
||||
fillOpacity={1}
|
||||
strokeWidth={2}
|
||||
strokeOpacity={0.8}
|
||||
fill={'url(#colorCount)'}
|
||||
/>
|
||||
</AreaChart>
|
||||
|
|
@ -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;
|
||||
}
|
||||
return avg ? numberWithCommas(avg) : 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,6 +53,7 @@ function SessionsBy(props: Props) {
|
|||
<div>
|
||||
{data.values && data.values.length === 0 ? (
|
||||
<Empty
|
||||
image={null}
|
||||
style={{minHeight: 220}}
|
||||
className="flex flex-col items-center justify-center"
|
||||
imageStyle={{height: 60}}
|
||||
|
|
|
|||
|
|
@ -7,21 +7,20 @@ import { NO_METRIC_DATA } from 'App/constants/messages'
|
|||
|
||||
interface Props {
|
||||
data: any
|
||||
metric?: any
|
||||
}
|
||||
function ErrorsPerDomain(props: Props) {
|
||||
const { data, metric } = props;
|
||||
const { data } = props;
|
||||
// const firstAvg = 10;
|
||||
const firstAvg = metric.data.chart[0] && metric.data.chart[0].errorsCount;
|
||||
const firstAvg = data.chart[0] && data.chart[0].errorsCount;
|
||||
return (
|
||||
<NoContent
|
||||
size="small"
|
||||
show={ metric.data.chart.length === 0 }
|
||||
show={ data.chart.length === 0 }
|
||||
style={{ height: '240px'}}
|
||||
title={NO_METRIC_DATA}
|
||||
>
|
||||
<div className="w-full" style={{ height: '240px' }}>
|
||||
{metric.data.chart.map((item, i) =>
|
||||
{data.chart.map((item, i) =>
|
||||
<Bar
|
||||
key={i}
|
||||
className="mb-2"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import React from 'react';
|
||||
import { numberWithCommas } from 'App/utils';
|
||||
import {numberWithCommas} from 'App/utils';
|
||||
|
||||
const colorsTeal = ['#1E889A', '#239DB2', '#28B2C9', '#36C0D7', '#65CFE1'];
|
||||
const colors = ['#6774E2', '#929ACD', '#3EAAAF', '#565D97', '#8F9F9F', '#376F72'];
|
||||
const colorsx = ['#256669', '#38999e', '#3eaaaf', '#51b3b7', '#78c4c7', '#9fd5d7', '#c5e6e7'].reverse();
|
||||
|
|
@ -9,81 +10,81 @@ const customMetricColors = ['#3EAAAF', '#394EFF', '#565D97'];
|
|||
const colorsPie = colors.concat(["#DDDDDD"]);
|
||||
|
||||
const countView = count => {
|
||||
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: () => (
|
||||
<defs>
|
||||
<linearGradient id="colorCount" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor={colors[2]} stopOpacity={ 0.5 } />
|
||||
<stop offset="95%" stopColor={colors[2]} stopOpacity={ 0.2 } />
|
||||
</linearGradient>
|
||||
<linearGradient id="colorCountCompare" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor={compareColors[4]} stopOpacity={ 0.9 } />
|
||||
<stop offset="95%" stopColor={compareColors[4]} stopOpacity={ 0.2 } />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
)
|
||||
};
|
||||
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: () => (
|
||||
<defs>
|
||||
<linearGradient id="colorCount" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor={compareColors[2]} stopOpacity={0.5}/>
|
||||
<stop offset="95%" stopColor={compareColors[2]} stopOpacity={0.2}/>
|
||||
</linearGradient>
|
||||
<linearGradient id="colorCountCompare" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor={compareColors[4]} stopOpacity={0.9}/>
|
||||
<stop offset="95%" stopColor={compareColors[4]} stopOpacity={0.2}/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
)
|
||||
};
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ interface Props {
|
|||
}
|
||||
|
||||
function CreateDashboardButton({disabled = false}: Props) {
|
||||
const [showModal, setShowModal] = React.useState(false);
|
||||
const [showModal, setShowModal] = React.useState(true);
|
||||
|
||||
return <>
|
||||
<Button
|
||||
|
|
|
|||
|
|
@ -13,6 +13,12 @@ import ByUrl from "./Examples/SessionsBy/ByUrl";
|
|||
import {ERRORS, FUNNEL, PERFORMANCE, TABLE, TIMESERIES, USER_PATH, WEB_VITALS} from "App/constants/card";
|
||||
import {FilterKey} from "Types/filter/filterType";
|
||||
import {Activity, BarChart, TableCellsMerge, TrendingUp} from "lucide-react";
|
||||
import WebVital from "Components/Dashboard/components/DashboardList/NewDashModal/Examples/WebVital";
|
||||
import Trend from "./Examples/Trend";
|
||||
import ErrorsPerDomain from "Components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain";
|
||||
import Bars from "Components/Dashboard/components/DashboardList/NewDashModal/Examples/Bars";
|
||||
import SessionsBy from "Components/Dashboard/Widgets/CustomMetricsWidgets/SessionsBy";
|
||||
import ByIssues from "Components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByIssues";
|
||||
|
||||
const TYPE = {
|
||||
FUNNEL: 'funnel',
|
||||
|
|
@ -27,15 +33,29 @@ const TYPE = {
|
|||
SESSIONS_BY_SYSTEM: 'sessions-by-system',
|
||||
SESSIONS_BY_COUNTRY: 'sessions-by-country',
|
||||
SESSIONS_BY_URL: 'sessions-by-url',
|
||||
|
||||
|
||||
ERRORS_JS: 'js-errors',
|
||||
ERRORS_BY_ORIGIN: 'errors-by-origin',
|
||||
ERRORS_BY_DOMAIN: 'errors-by-domain',
|
||||
ERRORS_BY_TYPE: 'errors-by-type',
|
||||
CALLS_WITH_ERRORS: 'calls-with-errors',
|
||||
ERRORS_4XX: '4xx-errors',
|
||||
ERRORS_5XX: '5xx-errors',
|
||||
}
|
||||
|
||||
export const CARD_CATEGORY = {
|
||||
PRODUCT_ANALYTICS: 'product-analytics',
|
||||
PERFORMANCE_MONITORING: 'performance-monitoring',
|
||||
WEB_ANALYTICS: 'web-analytics',
|
||||
ERROR_TRACKING: 'error-tracking',
|
||||
}
|
||||
|
||||
export const CARD_CATEGORIES = [
|
||||
{
|
||||
key: 'product-analytics', label: 'Product Analytics', icon: TrendingUp, types: [USER_PATH, ERRORS]
|
||||
},
|
||||
{key: 'performance-monitoring', label: 'Performance Monitoring', icon: Activity, types: [TIMESERIES]},
|
||||
{key: 'web-analytics', label: 'Web Analytics', icon: BarChart, types: [TABLE]},
|
||||
{key: 'core-web-vitals', label: 'Core Web Vitals', icon: TableCellsMerge, types: [WEB_VITALS]}
|
||||
{key: CARD_CATEGORY.PRODUCT_ANALYTICS, label: 'Product Analytics', icon: TrendingUp, types: [USER_PATH, ERRORS]},
|
||||
{key: CARD_CATEGORY.PERFORMANCE_MONITORING, label: 'Performance Monitoring', icon: Activity, types: [TIMESERIES]},
|
||||
{key: CARD_CATEGORY.WEB_ANALYTICS, label: 'Web Analytics', icon: BarChart, types: [TABLE]},
|
||||
{key: CARD_CATEGORY.ERROR_TRACKING, label: 'Errors Tracking', icon: TableCellsMerge, types: [WEB_VITALS]}
|
||||
];
|
||||
|
||||
export interface CardType {
|
||||
|
|
@ -45,19 +65,22 @@ export interface CardType {
|
|||
category: string;
|
||||
example: any;
|
||||
metricOf?: string;
|
||||
width?: number;
|
||||
data?: any;
|
||||
height?: number;
|
||||
}
|
||||
|
||||
export const CARD_LIST: CardType[] = [
|
||||
{
|
||||
title: 'Funnel',
|
||||
key: TYPE.FUNNEL,
|
||||
key: FUNNEL,
|
||||
cardType: FUNNEL,
|
||||
category: CARD_CATEGORIES[0].key,
|
||||
example: ExampleFunnel,
|
||||
},
|
||||
{
|
||||
title: 'Path Finder',
|
||||
key: TYPE.PATH_FINDER,
|
||||
key: USER_PATH,
|
||||
cardType: USER_PATH,
|
||||
category: CARD_CATEGORIES[0].key,
|
||||
example: ExamplePath,
|
||||
|
|
@ -69,15 +92,213 @@ export const CARD_LIST: CardType[] = [
|
|||
category: CARD_CATEGORIES[0].key,
|
||||
example: ExampleTrend,
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Sessions by',
|
||||
key: TYPE.SESSIONS_BY,
|
||||
title: 'Sessions by Issues',
|
||||
key: FilterKey.ISSUE,
|
||||
cardType: TABLE,
|
||||
metricOf: 'userBrowser',
|
||||
metricOf: FilterKey.ISSUE,
|
||||
category: CARD_CATEGORIES[0].key,
|
||||
example: ExampleCount,
|
||||
example: ByIssues,
|
||||
},
|
||||
|
||||
// Performance Monitoring
|
||||
{
|
||||
title: 'CPU Load',
|
||||
key: FilterKey.AVG_CPU,
|
||||
cardType: WEB_VITALS,
|
||||
metricOf: FilterKey.AVG_CPU,
|
||||
category: CARD_CATEGORIES[1].key,
|
||||
width: 1,
|
||||
height: 148,
|
||||
example: WebVital,
|
||||
},
|
||||
{
|
||||
title: 'DOM Content Loaded',
|
||||
key: FilterKey.AVG_DOM_CONTENT_LOADED,
|
||||
cardType: WEB_VITALS,
|
||||
metricOf: FilterKey.AVG_DOM_CONTENT_LOADED,
|
||||
category: CARD_CATEGORIES[1].key,
|
||||
width: 1,
|
||||
height: 148,
|
||||
example: WebVital,
|
||||
},
|
||||
|
||||
{
|
||||
title: 'DOM Content Loadeded Start',
|
||||
key: FilterKey.AVG_DOM_CONTENT_LOAD_START,
|
||||
cardType: WEB_VITALS,
|
||||
metricOf: FilterKey.AVG_DOM_CONTENT_LOAD_START,
|
||||
category: CARD_CATEGORIES[1].key,
|
||||
width: 1,
|
||||
height: 148,
|
||||
example: WebVital,
|
||||
},
|
||||
|
||||
{
|
||||
title: 'First Meaningful Paint',
|
||||
key: FilterKey.AVG_FIRST_CONTENTFUL_PIXEL,
|
||||
cardType: WEB_VITALS,
|
||||
metricOf: FilterKey.AVG_FIRST_CONTENTFUL_PIXEL,
|
||||
category: CARD_CATEGORIES[1].key,
|
||||
width: 1,
|
||||
height: 148,
|
||||
example: WebVital,
|
||||
},
|
||||
|
||||
{
|
||||
title: 'First Paint',
|
||||
key: FilterKey.AVG_FIRST_PAINT,
|
||||
cardType: WEB_VITALS,
|
||||
metricOf: FilterKey.AVG_FIRST_PAINT,
|
||||
category: CARD_CATEGORIES[1].key,
|
||||
width: 1,
|
||||
height: 148,
|
||||
example: WebVital,
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Frame Rate',
|
||||
key: FilterKey.AVG_FPS,
|
||||
cardType: WEB_VITALS,
|
||||
metricOf: FilterKey.AVG_FPS,
|
||||
category: CARD_CATEGORIES[1].key,
|
||||
width: 1,
|
||||
height: 148,
|
||||
example: WebVital,
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Image Load Time',
|
||||
key: FilterKey.AVG_IMAGE_LOAD_TIME,
|
||||
cardType: WEB_VITALS,
|
||||
metricOf: FilterKey.AVG_IMAGE_LOAD_TIME,
|
||||
category: CARD_CATEGORIES[1].key,
|
||||
width: 1,
|
||||
height: 148,
|
||||
example: WebVital,
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Page Load Time',
|
||||
key: FilterKey.AVG_PAGE_LOAD_TIME,
|
||||
cardType: WEB_VITALS,
|
||||
metricOf: FilterKey.AVG_PAGE_LOAD_TIME,
|
||||
category: CARD_CATEGORIES[1].key,
|
||||
width: 1,
|
||||
height: 148,
|
||||
example: WebVital,
|
||||
},
|
||||
|
||||
{
|
||||
title: 'DOM Build Time',
|
||||
key: FilterKey.AVG_PAGES_DOM_BUILD_TIME,
|
||||
cardType: WEB_VITALS,
|
||||
metricOf: FilterKey.AVG_PAGES_DOM_BUILD_TIME,
|
||||
category: CARD_CATEGORIES[1].key,
|
||||
width: 1,
|
||||
height: 148,
|
||||
example: WebVital,
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Page Response Time',
|
||||
key: FilterKey.AVG_PAGES_RESPONSE_TIME,
|
||||
cardType: WEB_VITALS,
|
||||
metricOf: FilterKey.AVG_PAGES_RESPONSE_TIME,
|
||||
category: CARD_CATEGORIES[1].key,
|
||||
width: 1,
|
||||
height: 148,
|
||||
example: WebVital,
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Request Load Time',
|
||||
key: FilterKey.AVG_REQUEST_LOADT_IME,
|
||||
cardType: WEB_VITALS,
|
||||
metricOf: FilterKey.AVG_REQUEST_LOADT_IME,
|
||||
category: CARD_CATEGORIES[1].key,
|
||||
width: 1,
|
||||
height: 148,
|
||||
example: WebVital,
|
||||
},
|
||||
{
|
||||
title: 'Response Time',
|
||||
key: FilterKey.AVG_RESPONSE_TIME,
|
||||
cardType: WEB_VITALS,
|
||||
metricOf: FilterKey.AVG_RESPONSE_TIME,
|
||||
category: CARD_CATEGORIES[1].key,
|
||||
width: 1,
|
||||
height: 148,
|
||||
example: WebVital,
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Session Duration',
|
||||
key: FilterKey.AVG_SESSION_DURATION,
|
||||
cardType: WEB_VITALS,
|
||||
metricOf: FilterKey.AVG_SESSION_DURATION,
|
||||
category: CARD_CATEGORIES[1].key,
|
||||
width: 1,
|
||||
height: 148,
|
||||
example: WebVital,
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Time Till First Byte',
|
||||
key: FilterKey.AVG_TILL_FIRST_BYTE,
|
||||
cardType: WEB_VITALS,
|
||||
metricOf: FilterKey.AVG_TILL_FIRST_BYTE,
|
||||
category: CARD_CATEGORIES[1].key,
|
||||
width: 1,
|
||||
height: 148,
|
||||
example: WebVital,
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Time to be Interactive',
|
||||
key: FilterKey.AVG_TIME_TO_INTERACTIVE,
|
||||
cardType: WEB_VITALS,
|
||||
metricOf: FilterKey.AVG_TIME_TO_INTERACTIVE,
|
||||
category: CARD_CATEGORIES[1].key,
|
||||
width: 1,
|
||||
height: 148,
|
||||
example: WebVital,
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Time to Render',
|
||||
key: FilterKey.AVG_TIME_TO_RENDER,
|
||||
cardType: WEB_VITALS,
|
||||
metricOf: FilterKey.AVG_TIME_TO_RENDER,
|
||||
category: CARD_CATEGORIES[1].key,
|
||||
width: 1,
|
||||
height: 148,
|
||||
example: WebVital,
|
||||
},
|
||||
|
||||
{
|
||||
title: 'JS Heap Size',
|
||||
key: FilterKey.AVG_USED_JS_HEAP_SIZE,
|
||||
cardType: WEB_VITALS,
|
||||
metricOf: FilterKey.AVG_USED_JS_HEAP_SIZE,
|
||||
category: CARD_CATEGORIES[1].key,
|
||||
width: 1,
|
||||
height: 148,
|
||||
example: WebVital,
|
||||
},
|
||||
|
||||
// {
|
||||
// title: 'Captured Requests',
|
||||
// key: WEB_VITALS,
|
||||
// cardType: WEB_VITALS,
|
||||
// // metricOf: FilterKey.AVG_DOM_CONTENT_LOADED,
|
||||
// category: CARD_CATEGORIES[1].key,
|
||||
// width: 1,
|
||||
// example: WebVital,
|
||||
// },
|
||||
|
||||
|
||||
{
|
||||
title: 'Breakdown',
|
||||
key: TYPE.BREAKDOWN,
|
||||
|
|
@ -92,6 +313,7 @@ export const CARD_LIST: CardType[] = [
|
|||
category: CARD_CATEGORIES[1].key,
|
||||
example: SlowestDomain,
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Sessions by Errors',
|
||||
key: TYPE.SESSIONS_BY_ERRORS,
|
||||
|
|
@ -99,44 +321,129 @@ export const CARD_LIST: CardType[] = [
|
|||
category: CARD_CATEGORIES[1].key,
|
||||
example: SessionsByErrors,
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Sessions by Issues',
|
||||
key: TYPE.SESSIONS_BY_ISSUES,
|
||||
cardType: TIMESERIES,
|
||||
category: CARD_CATEGORIES[1].key,
|
||||
example: SessionsByIssues,
|
||||
title: 'Sessions by Users',
|
||||
key: FilterKey.USERID,
|
||||
cardType: TABLE,
|
||||
metricOf: FilterKey.USERID,
|
||||
category: CARD_CATEGORIES[2].key,
|
||||
example: ByBrowser,
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Sessions by Browser',
|
||||
key: TYPE.SESSIONS_BY_BROWSER,
|
||||
key: FilterKey.USER_BROWSER,
|
||||
cardType: TABLE,
|
||||
metricOf: FilterKey.USER_BROWSER,
|
||||
category: CARD_CATEGORIES[2].key,
|
||||
example: ByBrowser,
|
||||
},
|
||||
{
|
||||
title: 'Sessions by System',
|
||||
key: TYPE.SESSIONS_BY_SYSTEM,
|
||||
cardType: TABLE,
|
||||
metricOf: FilterKey.USER_OS,
|
||||
category: CARD_CATEGORIES[2].key,
|
||||
example: BySystem,
|
||||
},
|
||||
// {
|
||||
// title: 'Sessions by System',
|
||||
// key: TYPE.SESSIONS_BY_SYSTEM,
|
||||
// cardType: TABLE,
|
||||
// metricOf: FilterKey.USER_OS,
|
||||
// category: CARD_CATEGORIES[2].key,
|
||||
// example: BySystem,
|
||||
// },
|
||||
{
|
||||
title: 'Sessions by Country',
|
||||
key: TYPE.SESSIONS_BY_COUNTRY,
|
||||
key: FilterKey.USER_COUNTRY,
|
||||
cardType: TABLE,
|
||||
metricOf: FilterKey.USER_COUNTRY,
|
||||
category: CARD_CATEGORIES[2].key,
|
||||
example: ByCountry,
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Sessions by Device',
|
||||
key: FilterKey.USER_DEVICE,
|
||||
cardType: TABLE,
|
||||
metricOf: FilterKey.USER_DEVICE,
|
||||
category: CARD_CATEGORIES[2].key,
|
||||
example: BySystem,
|
||||
},
|
||||
{
|
||||
title: 'Sessions by URL',
|
||||
key: TYPE.SESSIONS_BY_URL,
|
||||
key: FilterKey.LOCATION,
|
||||
cardType: TABLE,
|
||||
metricOf: FilterKey.LOCATION,
|
||||
category: CARD_CATEGORIES[2].key,
|
||||
example: ByUrl,
|
||||
},
|
||||
|
||||
// Errors Tracking
|
||||
{
|
||||
title: 'JS Errors',
|
||||
key: FilterKey.IMPACTED_SESSIONS_BY_JS_ERRORS,
|
||||
cardType: TABLE,
|
||||
metricOf: FilterKey.IMPACTED_SESSIONS_BY_JS_ERRORS,
|
||||
category: CARD_CATEGORIES[3].key,
|
||||
example: PerfBreakdown,
|
||||
},
|
||||
{
|
||||
title: 'Errors by Origin',
|
||||
key: FilterKey.RESOURCES_BY_PARTY,
|
||||
cardType: TABLE,
|
||||
metricOf: FilterKey.RESOURCES_BY_PARTY,
|
||||
category: CARD_CATEGORIES[3].key,
|
||||
example: PerfBreakdown,
|
||||
},
|
||||
{
|
||||
title: 'Errors by Domain',
|
||||
key: FilterKey.ERRORS_PER_DOMAINS,
|
||||
cardType: TABLE,
|
||||
metricOf: FilterKey.ERRORS_PER_DOMAINS,
|
||||
category: CARD_CATEGORIES[3].key,
|
||||
example: Bars,
|
||||
data: {
|
||||
total: 90,
|
||||
values: [
|
||||
{
|
||||
"label": "company.domain.com",
|
||||
"value": 89
|
||||
},
|
||||
{
|
||||
"label": "openreplay.com",
|
||||
"value": 15
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Errors by Type',
|
||||
key: FilterKey.ERRORS_PER_TYPE,
|
||||
cardType: TABLE,
|
||||
metricOf: FilterKey.ERRORS_PER_TYPE,
|
||||
category: CARD_CATEGORIES[3].key,
|
||||
example: PerfBreakdown,
|
||||
},
|
||||
{
|
||||
title: 'Calls with Errors',
|
||||
key: FilterKey.CALLS_ERRORS,
|
||||
cardType: TABLE,
|
||||
metricOf: FilterKey.CALLS_ERRORS,
|
||||
category: CARD_CATEGORIES[3].key,
|
||||
example: PerfBreakdown,
|
||||
},
|
||||
|
||||
{
|
||||
title: '4xx Domains',
|
||||
key: FilterKey.DOMAINS_ERRORS_4XX,
|
||||
cardType: TABLE,
|
||||
metricOf: FilterKey.DOMAINS_ERRORS_4XX,
|
||||
category: CARD_CATEGORIES[3].key,
|
||||
example: Trend,
|
||||
},
|
||||
|
||||
{
|
||||
title: '5xx Domains',
|
||||
key: FilterKey.DOMAINS_ERRORS_5XX,
|
||||
cardType: TABLE,
|
||||
metricOf: FilterKey.DOMAINS_ERRORS_5XX,
|
||||
category: CARD_CATEGORIES[3].key,
|
||||
example: Trend,
|
||||
},
|
||||
]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,52 @@
|
|||
import React from 'react';
|
||||
import ExCard from "Components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard";
|
||||
import {List, Progress} from "antd";
|
||||
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
type: string;
|
||||
onCard: (card: string) => void;
|
||||
data?: any;
|
||||
}
|
||||
|
||||
function Bars(props: Props) {
|
||||
const _data = props.data || {
|
||||
total: 90,
|
||||
values: []
|
||||
}
|
||||
return (
|
||||
<ExCard
|
||||
{...props}
|
||||
>
|
||||
|
||||
<List
|
||||
itemLayout="horizontal"
|
||||
dataSource={_data.values}
|
||||
renderItem={(item: any) => (
|
||||
<List.Item>
|
||||
<List.Item.Meta
|
||||
title={(
|
||||
<div className="flex justify-between w-full">
|
||||
<span>{item.label}</span>
|
||||
<span>{item.value}</span>
|
||||
</div>
|
||||
)}
|
||||
description={(
|
||||
<Progress percent={Math.round((item.value * 100) / _data.total)}
|
||||
showInfo={false}
|
||||
strokeColor="#394EFF"
|
||||
trailColor="#f0f0f0"
|
||||
style={{width: '100%'}}
|
||||
size={['small', 2]}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
</ExCard>
|
||||
);
|
||||
}
|
||||
|
||||
export default Bars;
|
||||
|
|
@ -1,25 +1,27 @@
|
|||
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 (
|
||||
<div
|
||||
className={'rounded overflow-hidden border p-4 bg-white hover:border-gray-light hover:shadow'}
|
||||
style={{ width: '100%', height: 286 }}
|
||||
>
|
||||
<div className={'font-semibold text-lg'}>{title}</div>
|
||||
<div className={'flex flex-col gap-2 mt-2 cursor-pointer'} onClick={() => onCard(type)}>{children}</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div
|
||||
className={'rounded overflow-hidden border p-4 bg-white hover:border-gray-light hover:shadow'}
|
||||
style={{width: '100%', height: height || 286}}
|
||||
>
|
||||
<div className={'font-semibold text-lg'}>{title}</div>
|
||||
<div className={'flex flex-col gap-2 mt-2 cursor-pointer'} onClick={() => onCard(type)}>{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ExCard
|
||||
|
|
|
|||
|
|
@ -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: <Icon name={'color/issues/dead_click'} size={26}/>,
|
||||
},
|
||||
{
|
||||
label: 'Click Rage',
|
||||
progress: 25,
|
||||
value: '405',
|
||||
icon: <Icon name={'color/issues/click_rage'} size={26}/>,
|
||||
},
|
||||
{
|
||||
label: 'Bad Request',
|
||||
progress: 5,
|
||||
value: '302',
|
||||
icon: <Icon name={'color/issues/bad_request'} size={26}/>,
|
||||
},
|
||||
{
|
||||
label: 'Mouse Thrashing',
|
||||
progress: 3,
|
||||
value: '194',
|
||||
icon: <Icon name={'color/issues/mouse_thrashing'} size={26}/>,
|
||||
},
|
||||
];
|
||||
|
||||
const lineWidth = 200;
|
||||
return (
|
||||
<ByComponent
|
||||
{...props}
|
||||
rows={rows}
|
||||
lineWidth={lineWidth}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default ByIssues;
|
||||
|
|
@ -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 (
|
||||
<ExCard
|
||||
{...props}
|
||||
>
|
||||
<CustomMetricOverviewChart data={data}/>
|
||||
</ExCard>
|
||||
);
|
||||
}
|
||||
|
||||
export default WebVital;
|
||||
|
|
@ -22,6 +22,7 @@ const SelectCard: React.FC<SelectCardProps> = (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<SelectCardProps> = (props: SelectCardProps) => {
|
|||
|
||||
const cardItems = useMemo(() => {
|
||||
return CARD_LIST.filter((card) => card.category === selected).map((card) => (
|
||||
<div key={card.key}>
|
||||
<card.example onCard={handleCardSelection} type={card.key} title={card.title}/>
|
||||
<div key={card.key} className={card.width ? `col-span-${card.width}` : 'col-span-2'}>
|
||||
<card.example onCard={handleCardSelection} type={card.key} title={card.title} data={card.data} height={card.height}/>
|
||||
</div>
|
||||
));
|
||||
}, [selected]);
|
||||
|
|
@ -133,7 +134,7 @@ interface ExampleCardsGridProps {
|
|||
|
||||
const ExampleCardsGrid: React.FC<ExampleCardsGridProps> = ({items}) => (
|
||||
<div
|
||||
className="w-full grid grid-cols-2 gap-4 overflow-scroll"
|
||||
className="w-full grid grid-cols-4 gap-4 overflow-scroll"
|
||||
style={{maxHeight: 'calc(100vh - 210px)'}}
|
||||
>
|
||||
{items}
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
<AlertFormModal
|
||||
showModal={showAlertModal}
|
||||
onClose={() => {
|
||||
hideModal();
|
||||
dashboardStore.toggleAlertModal(false)
|
||||
}}
|
||||
/>,
|
||||
{ right: false, width: 580 },
|
||||
() => dashboardStore.toggleAlertModal(false)
|
||||
)
|
||||
}
|
||||
}, [showAlertModal])
|
||||
useEffect(() => {
|
||||
if (showAlertModal) {
|
||||
showModal(
|
||||
<AlertFormModal
|
||||
showModal={showAlertModal}
|
||||
onClose={() => {
|
||||
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(
|
||||
<DashboardModal siteId={siteId} onMetricAdd={pushQuery} dashboardId={dashboardId} />,
|
||||
{ right: true }
|
||||
const onAddWidgets = () => {
|
||||
dashboardStore.initDashboard(dashboard);
|
||||
showModal(
|
||||
<DashboardModal siteId={siteId} onMetricAdd={pushQuery} dashboardId={dashboardId}/>,
|
||||
{right: true}
|
||||
);
|
||||
};
|
||||
|
||||
if (!dashboard) return null;
|
||||
|
||||
return (
|
||||
<Loader loading={loading}>
|
||||
<div style={{maxWidth: '1360px', margin: 'auto'}}>
|
||||
{/* @ts-ignore */}
|
||||
<DashboardHeader renderReport={props.renderReport} siteId={siteId} dashboardId={dashboardId}/>
|
||||
|
||||
<DashboardWidgetGrid
|
||||
siteId={siteId}
|
||||
dashboardId={dashboardId}
|
||||
onEditHandler={onAddWidgets}
|
||||
id="report"
|
||||
/>
|
||||
</div>
|
||||
</Loader>
|
||||
);
|
||||
};
|
||||
|
||||
if (!dashboard) return null;
|
||||
|
||||
return (
|
||||
<Loader loading={loading}>
|
||||
<div style={{ maxWidth: '1360px', margin: 'auto' }}>
|
||||
{/* @ts-ignore */}
|
||||
<DashboardHeader renderReport={props.renderReport} siteId={siteId} dashboardId={dashboardId} />
|
||||
|
||||
<DashboardWidgetGrid
|
||||
siteId={siteId}
|
||||
dashboardId={dashboardId}
|
||||
onEditHandler={onAddWidgets}
|
||||
id="report"
|
||||
/>
|
||||
</div>
|
||||
</Loader>
|
||||
);
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
export default withPageTitle('Dashboards - OpenReplay')(
|
||||
withReport(withRouter(withModal(observer(DashboardView))))
|
||||
withReport(withModal(observer(DashboardView)))
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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
|
||||
<Loader loading={loading}>
|
||||
<NoContent
|
||||
show={list.length === 0}
|
||||
icon="no-metrics-chart"
|
||||
title={
|
||||
<div className="bg-white rounded">
|
||||
<div className="border-b p-5">
|
||||
<div className="text-2xl font-normal">
|
||||
There are no cards in this dashboard
|
||||
</div>
|
||||
<div className="text-base font-normal">
|
||||
Create a card from any of the below types or pick an existing one from your library.
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 p-8 gap-2">
|
||||
<MetricTypeList dashboardId={parseInt(dashboardId)} siteId={siteId} />
|
||||
</div>
|
||||
</div>
|
||||
list?.forEach((item) => {
|
||||
if (item.config.col === 1) {
|
||||
smallWidgets.push(item);
|
||||
} else {
|
||||
regularWidgets.push(item);
|
||||
}
|
||||
>
|
||||
<div className="grid gap-4 grid-cols-4 items-start pb-10" id={props.id}>{smallWidgets.length > 0 ? (
|
||||
<>
|
||||
<div className="font-semibold text-xl py-4 flex items-center gap-2 col-span-4">
|
||||
<Icon name="grid-horizontal" size={26} />
|
||||
Web Vitals
|
||||
</div>
|
||||
});
|
||||
|
||||
{smallWidgets &&
|
||||
smallWidgets.map((item: any, index: any) => (
|
||||
<React.Fragment key={item.widgetId}>
|
||||
<WidgetWrapperNew
|
||||
index={index}
|
||||
widget={item}
|
||||
moveListItem={(dragIndex: any, hoverIndex: any) =>
|
||||
dashboard.swapWidgetPosition(dragIndex, hoverIndex)
|
||||
const smallWidgetsLen = smallWidgets.length;
|
||||
|
||||
}dashboardId={dashboardId}
|
||||
siteId={siteId}
|
||||
isWidget={true}
|
||||
grid="vitals"
|
||||
/>
|
||||
</React.Fragment>
|
||||
))}
|
||||
return useObserver(() => (
|
||||
// @ts-ignore
|
||||
list?.length === 0 ? <Empty description="No cards in this dashboard"/> : (
|
||||
<Loader loading={loading}>
|
||||
<NoContent
|
||||
show={list?.length === 0}
|
||||
icon="no-metrics-chart"
|
||||
title={
|
||||
<div className="bg-white rounded">
|
||||
<div className="border-b p-5">
|
||||
<div className="text-2xl font-normal">
|
||||
There are no cards in this dashboard
|
||||
</div>
|
||||
<div className="text-base font-normal">
|
||||
Create a card from any of the below types or pick an existing one from your library.
|
||||
</div>
|
||||
</div>
|
||||
{/*<div className="grid grid-cols-4 p-8 gap-2">*/}
|
||||
{/* <MetricTypeList dashboardId={parseInt(dashboardId)} siteId={siteId}/>*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="grid gap-4 grid-cols-4 items-start pb-10" id={props.id}>{smallWidgets.length > 0 ? (
|
||||
<>
|
||||
<div className="font-semibold text-xl py-4 flex items-center gap-2 col-span-4">
|
||||
<Icon name="grid-horizontal" size={26}/>
|
||||
Web Vitals
|
||||
</div>
|
||||
|
||||
</>
|
||||
) : null}
|
||||
{smallWidgets &&
|
||||
smallWidgets.map((item: any, index: any) => (
|
||||
<React.Fragment key={item.widgetId}>
|
||||
<WidgetWrapperNew
|
||||
index={index}
|
||||
widget={item}
|
||||
moveListItem={(dragIndex: any, hoverIndex: any) =>
|
||||
dashboard?.swapWidgetPosition(dragIndex, hoverIndex)
|
||||
|
||||
{smallWidgets.length > 0 && regularWidgets.length > 0 ? (
|
||||
<div className="font-semibold text-xl py-4 flex items-center gap-2 col-span-4">
|
||||
<Icon name="grid-horizontal" size={26} />
|
||||
All Cards
|
||||
</div>
|
||||
) : null}
|
||||
} dashboardId={dashboardId}
|
||||
siteId={siteId}
|
||||
isWidget={true}
|
||||
grid="vitals"
|
||||
/>
|
||||
</React.Fragment>
|
||||
))}
|
||||
|
||||
{regularWidgets &&
|
||||
regularWidgets.map((item: any, index: any) => (
|
||||
<React.Fragment key={item.widgetId}>
|
||||
<WidgetWrapperNew
|
||||
index={smallWidgetsLen + index}
|
||||
widget={item}
|
||||
moveListItem={(dragIndex: any, hoverIndex: any) =>
|
||||
dashboard.swapWidgetPosition(dragIndex, hoverIndex)
|
||||
}
|
||||
dashboardId={dashboardId}
|
||||
siteId={siteId}
|
||||
isWidget={true}
|
||||
grid="other"
|
||||
/>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</NoContent>
|
||||
</Loader>
|
||||
));
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{smallWidgets.length > 0 && regularWidgets.length > 0 ? (
|
||||
<div className="font-semibold text-xl py-4 flex items-center gap-2 col-span-4">
|
||||
<Icon name="grid-horizontal" size={26}/>
|
||||
All Cards
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{regularWidgets &&
|
||||
regularWidgets.map((item: any, index: any) => (
|
||||
<React.Fragment key={item.widgetId}>
|
||||
<WidgetWrapperNew
|
||||
index={smallWidgetsLen + index}
|
||||
widget={item}
|
||||
moveListItem={(dragIndex: any, hoverIndex: any) =>
|
||||
dashboard?.swapWidgetPosition(dragIndex, hoverIndex)
|
||||
}
|
||||
dashboardId={dashboardId}
|
||||
siteId={siteId}
|
||||
isWidget={true}
|
||||
grid="other"
|
||||
/>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</NoContent>
|
||||
</Loader>
|
||||
)
|
||||
));
|
||||
}
|
||||
|
||||
export default DashboardWidgetGrid;
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ function WidgetPredefinedChart(props: Props) {
|
|||
case FilterKey.ERRORS_PER_TYPE:
|
||||
return <ErrorsByType data={data} metric={metric} />
|
||||
case FilterKey.ERRORS_PER_DOMAINS:
|
||||
return <ErrorsPerDomain data={data} metric={metric} />
|
||||
return <ErrorsPerDomain data={metric.data} />
|
||||
case FilterKey.RESOURCES_BY_PARTY:
|
||||
return <ErrorsByOrigin data={data} metric={metric} />
|
||||
case FilterKey.IMPACTED_SESSIONS_BY_JS_ERRORS:
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
|
||||
<rect width="32" height="32" rx="10" fill="#FFEEEE"/>
|
||||
<path d="M16 24H16.01" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M12.5 20.429C13.4346 19.5129 14.6912 18.9998 16 18.9998C17.3088 18.9998 18.5654 19.5129 19.5 20.429" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M9 16.8589C10.418 15.4689 12.2178 14.5324 14.17 14.1689" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M23 16.8591C22.3979 16.2688 21.7236 15.7571 20.993 15.3361" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M6 12.82C7.2366 11.7141 8.64809 10.821 10.177 10.177" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M26 12.82C24.4748 11.4558 22.6865 10.4182 20.7452 9.77087C18.804 9.12355 16.7508 8.88029 14.712 9.05603" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M6 6L26 26" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default Color_issues_bad_request;
|
||||
25
frontend/app/components/ui/Icons/color_issues_click_rage.tsx
Normal file
25
frontend/app/components/ui/Icons/color_issues_click_rage.tsx
Normal file
|
|
@ -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 (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
|
||||
<rect width="32" height="32" rx="10" fill="#FFEEEE"/>
|
||||
<path d="M16 26C21.5228 26 26 21.5228 26 16C26 10.4772 21.5228 6 16 6C10.4772 6 6 10.4772 6 16C6 21.5228 10.4772 26 16 26Z" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M20 20C20 20 18.5 18 16 18C13.5 18 12 20 12 20" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M11.5 12L14 13" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M18 13L20.5 12" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default Color_issues_click_rage;
|
||||
31
frontend/app/components/ui/Icons/color_issues_cpu.tsx
Normal file
31
frontend/app/components/ui/Icons/color_issues_cpu.tsx
Normal file
|
|
@ -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 (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
|
||||
<rect width="32" height="32" rx="10" fill="#FFEEEE"/>
|
||||
<path d="M22 8H10C8.89543 8 8 8.89543 8 10V22C8 23.1046 8.89543 24 10 24H22C23.1046 24 24 23.1046 24 22V10C24 8.89543 23.1046 8 22 8Z" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M19 13H13V19H19V13Z" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M19 6V8" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M19 24V26" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M6 19H8" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M6 13H8" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M24 19H26" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M24 13H26" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M13 6V8" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M13 24V26" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default Color_issues_cpu;
|
||||
26
frontend/app/components/ui/Icons/color_issues_crash.tsx
Normal file
26
frontend/app/components/ui/Icons/color_issues_crash.tsx
Normal file
|
|
@ -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 (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
|
||||
<rect width="32" height="32" rx="10" fill="#FFEEEE"/>
|
||||
<path d="M13 17C13.5523 17 14 16.5523 14 16C14 15.4477 13.5523 15 13 15C12.4477 15 12 15.4477 12 16C12 16.5523 12.4477 17 13 17Z" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M19 17C19.5523 17 20 16.5523 20 16C20 15.4477 19.5523 15 19 15C18.4477 15 18 15.4477 18 16C18 16.5523 18.4477 17 19 17Z" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M12 24V26H20V24" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M16.5 21L16 20L15.5 21H16.5Z" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M20 24C20.3767 23.9998 20.7457 23.8932 21.0644 23.6924C21.3832 23.4917 21.6388 23.2051 21.8018 22.8655C21.9648 22.5259 22.0286 22.1471 21.9858 21.7729C21.943 21.3986 21.7954 21.0441 21.56 20.75C22.706 19.6423 23.495 18.2175 23.8258 16.6584C24.1566 15.0993 24.0142 13.4769 23.4168 11.9993C22.8194 10.5217 21.7942 9.25619 20.4728 8.36509C19.1513 7.474 17.5938 6.99792 16 6.99792C14.4062 6.99792 12.8487 7.474 11.5272 8.36509C10.2058 9.25619 9.18065 10.5217 8.58324 11.9993C7.98584 13.4769 7.84341 15.0993 8.17423 16.6584C8.50505 18.2175 9.29403 19.6423 10.44 20.75C10.2046 21.0441 10.057 21.3986 10.0142 21.7729C9.97141 22.1471 10.0352 22.5259 10.1982 22.8655C10.3612 23.2051 10.6168 23.4917 10.9356 23.6924C11.2543 23.8932 11.6233 23.9998 12 24" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default Color_issues_crash;
|
||||
25
frontend/app/components/ui/Icons/color_issues_custom.tsx
Normal file
25
frontend/app/components/ui/Icons/color_issues_custom.tsx
Normal file
|
|
@ -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 (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
|
||||
<rect width="32" height="32" rx="10" fill="#FFEEEE"/>
|
||||
<path d="M16 13V17" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M16 21H16.01" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M20 22L26 16L20 10" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M12 10L6 16L12 22" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default Color_issues_custom;
|
||||
31
frontend/app/components/ui/Icons/color_issues_dead_click.tsx
Normal file
31
frontend/app/components/ui/Icons/color_issues_dead_click.tsx
Normal file
|
|
@ -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 (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
|
||||
<rect width="32" height="32" rx="10" fill="#FFEEEE"/>
|
||||
<path d="M9 7C8.46957 7 7.96086 7.21071 7.58579 7.58579C7.21071 7.96086 7 8.46957 7 9" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M23 7C23.5304 7 24.0391 7.21071 24.4142 7.58579C24.7893 7.96086 25 8.46957 25 9" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M16 16L20 26L21.7 21.7L26 20L16 16Z" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M9 25C8.46957 25 7.96086 24.7893 7.58579 24.4142C7.21071 24.0391 7 23.5304 7 23" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M13 7H14" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M13 25H15" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M18 7H19" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M7 13V14" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M25 13V15" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M7 18V19" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default Color_issues_dead_click;
|
||||
24
frontend/app/components/ui/Icons/color_issues_errors.tsx
Normal file
24
frontend/app/components/ui/Icons/color_issues_errors.tsx
Normal file
|
|
@ -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 (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
|
||||
<rect width="32" height="32" rx="10" fill="#FFEEEE"/>
|
||||
<path d="M16 26C21.5228 26 26 21.5228 26 16C26 10.4772 21.5228 6 16 6C10.4772 6 6 10.4772 6 16C6 21.5228 10.4772 26 16 26Z" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M16 12V16" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M16 20H16.01" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default Color_issues_errors;
|
||||
|
|
@ -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 (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
|
||||
<rect width="32" height="32" rx="10" fill="#FFEEEE"/>
|
||||
<path d="M11 6H21" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M9 10H23" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M23 14H9C7.89543 14 7 14.8954 7 16V24C7 25.1046 7.89543 26 9 26H23C24.1046 26 25 25.1046 25 24V16C25 14.8954 24.1046 14 23 14Z" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default Color_issues_excessive_scrolling;
|
||||
|
|
@ -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 (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
|
||||
<rect width="32" height="32" rx="10" fill="#FFEEEE"/>
|
||||
<path d="M16 26C21.5228 26 26 21.5228 26 16C26 10.4772 21.5228 6 16 6C10.4772 6 6 10.4772 6 16C6 21.5228 10.4772 26 16 26Z" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M16 12V16" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M16 20H16.01" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default Color_issues_js_exception;
|
||||
30
frontend/app/components/ui/Icons/color_issues_memory.tsx
Normal file
30
frontend/app/components/ui/Icons/color_issues_memory.tsx
Normal file
|
|
@ -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 (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
|
||||
<rect width="32" height="32" rx="10" fill="#FFEEEE"/>
|
||||
<path d="M10 23V20" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M14 23V20" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M18 23V20" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M22 23V20" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M12 15V13" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M20 15V13" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M16 15V13" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M6 19H26" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M6 11C6 10.4696 6.21071 9.96086 6.58579 9.58579C6.96086 9.21071 7.46957 9 8 9H24C24.5304 9 25.0391 9.21071 25.4142 9.58579C25.7893 9.96086 26 10.4696 26 11V12.1C25.5858 12.222 25.2222 12.4748 24.9635 12.8206C24.7049 13.1664 24.5651 13.5867 24.5651 14.0185C24.5651 14.4503 24.7049 14.8706 24.9635 15.2164C25.2222 15.5622 25.5858 15.815 26 15.937V21C26 21.5304 25.7893 22.0391 25.4142 22.4142C25.0391 22.7893 24.5304 23 24 23H8C7.46957 23 6.96086 22.7893 6.58579 22.4142C6.21071 22.0391 6 21.5304 6 21V15.9C6.41423 15.778 6.77784 15.5252 7.03648 15.1794C7.29512 14.8336 7.43488 14.4133 7.43488 13.9815C7.43488 13.5497 7.29512 13.1294 7.03648 12.7836C6.77784 12.4378 6.41423 12.185 6 12.063V11Z" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default Color_issues_memory;
|
||||
|
|
@ -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 (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
|
||||
<rect width="32" height="32" rx="10" fill="#FFEEEE"/>
|
||||
<path d="M6 6L26 26" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M14.41 14.41C14.2242 14.5958 14.0036 14.7432 13.7608 14.8437C13.518 14.9443 13.2578 14.9961 12.995 14.9961C12.7322 14.9961 12.472 14.9443 12.2292 14.8437C11.9864 14.7432 11.7658 14.5958 11.58 14.41C11.3942 14.2241 11.2468 14.0035 11.1462 13.7607C11.0457 13.518 10.9939 13.2577 10.9939 12.995C10.9939 12.7322 11.0457 12.472 11.1462 12.2292C11.2468 11.9864 11.3942 11.7658 11.58 11.58" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M17.5 17.5L10 25" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M22 16L25 19" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M7.59 7.58997C7.40358 7.77451 7.25548 7.99408 7.15423 8.23606C7.05298 8.47804 7.00056 8.73766 7 8.99997V23C7 23.5304 7.21071 24.0391 7.58579 24.4142C7.96086 24.7893 8.46957 25 9 25H23C23.55 25 24.052 24.78 24.41 24.41" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M25 19V9C25 8.46957 24.7893 7.96086 24.4142 7.58579C24.0391 7.21071 23.5304 7 23 7H13" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default Color_issues_missing_resource;
|
||||
|
|
@ -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 (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
|
||||
<rect width="32" height="32" rx="10" fill="#FFEEEE"/>
|
||||
<path d="M23 13C23 9.13401 19.866 6 16 6C12.134 6 9 9.13401 9 13V19C9 22.866 12.134 26 16 26C19.866 26 23 22.866 23 19V13Z" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M16 10V14" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default Color_issues_mouse_thrashing;
|
||||
|
|
@ -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 (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
|
||||
<rect width="32" height="32" rx="10" fill="#FFEEEE"/>
|
||||
<path d="M23 13C23 9.13401 19.866 6 16 6C12.134 6 9 9.13401 9 13V19C9 22.866 12.134 26 16 26C19.866 26 23 22.866 23 19V13Z" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M16 10V14" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default Color_issues_mouse_trashing;
|
||||
|
|
@ -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 (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
|
||||
<rect width="32" height="32" rx="10" fill="#FFEEEE"/>
|
||||
<path d="M18.5 6H10C9.46957 6 8.96086 6.21071 8.58579 6.58579C8.21071 6.96086 8 7.46957 8 8V24C8 24.5304 8.21071 25.0391 8.58579 25.4142C8.96086 25.7893 9.46957 26 10 26H22C22.5304 26 23.0391 25.7893 23.4142 25.4142C23.7893 25.0391 24 24.5304 24 24V11.5L18.5 6Z" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M18 6L18.8092 11.0911L24 12" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<g clipPath="url(#clip0_458_14755)">
|
||||
<path d="M16 13.8334V15.5" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M17.75 16.25L18.9583 15.0416" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M18.5 18H20.1667" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M17.75 19.75L18.9583 20.9583" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M16 20.5V22.1667" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M13.0416 20.9583L14.25 19.75" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M11.8334 18H13.5" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M13.0416 15.0416L14.25 16.25" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_458_14755">
|
||||
<rect width="10" height="10" fill="white" transform="translate(11 13)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default Color_issues_slow_page_load;
|
||||
|
|
@ -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';
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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 <Icon name={icon} size={24}/>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
10
frontend/app/svg/icons/color/issues/bad_request.svg
Normal file
10
frontend/app/svg/icons/color/issues/bad_request.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
|
||||
<rect width="32" height="32" rx="10" fill="#FFEEEE"/>
|
||||
<path d="M16 24H16.01" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12.5 20.429C13.4346 19.5129 14.6912 18.9998 16 18.9998C17.3088 18.9998 18.5654 19.5129 19.5 20.429" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M9 16.8589C10.418 15.4689 12.2178 14.5324 14.17 14.1689" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M23 16.8591C22.3979 16.2688 21.7236 15.7571 20.993 15.3361" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M6 12.82C7.2366 11.7141 8.64809 10.821 10.177 10.177" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M26 12.82C24.4748 11.4558 22.6865 10.4182 20.7452 9.77087C18.804 9.12355 16.7508 8.88029 14.712 9.05603" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M6 6L26 26" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
7
frontend/app/svg/icons/color/issues/click_rage.svg
Normal file
7
frontend/app/svg/icons/color/issues/click_rage.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
|
||||
<rect width="32" height="32" rx="10" fill="#FFEEEE"/>
|
||||
<path d="M16 26C21.5228 26 26 21.5228 26 16C26 10.4772 21.5228 6 16 6C10.4772 6 6 10.4772 6 16C6 21.5228 10.4772 26 16 26Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M20 20C20 20 18.5 18 16 18C13.5 18 12 20 12 20" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M11.5 12L14 13" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M18 13L20.5 12" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 688 B |
13
frontend/app/svg/icons/color/issues/cpu.svg
Normal file
13
frontend/app/svg/icons/color/issues/cpu.svg
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
|
||||
<rect width="32" height="32" rx="10" fill="#FFEEEE"/>
|
||||
<path d="M22 8H10C8.89543 8 8 8.89543 8 10V22C8 23.1046 8.89543 24 10 24H22C23.1046 24 24 23.1046 24 22V10C24 8.89543 23.1046 8 22 8Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M19 13H13V19H19V13Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M19 6V8" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M19 24V26" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M6 19H8" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M6 13H8" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M24 19H26" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M24 13H26" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M13 6V8" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M13 24V26" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
8
frontend/app/svg/icons/color/issues/crash.svg
Normal file
8
frontend/app/svg/icons/color/issues/crash.svg
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
|
||||
<rect width="32" height="32" rx="10" fill="#FFEEEE"/>
|
||||
<path d="M13 17C13.5523 17 14 16.5523 14 16C14 15.4477 13.5523 15 13 15C12.4477 15 12 15.4477 12 16C12 16.5523 12.4477 17 13 17Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M19 17C19.5523 17 20 16.5523 20 16C20 15.4477 19.5523 15 19 15C18.4477 15 18 15.4477 18 16C18 16.5523 18.4477 17 19 17Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12 24V26H20V24" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M16.5 21L16 20L15.5 21H16.5Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M20 24C20.3767 23.9998 20.7457 23.8932 21.0644 23.6924C21.3832 23.4917 21.6388 23.2051 21.8018 22.8655C21.9648 22.5259 22.0286 22.1471 21.9858 21.7729C21.943 21.3986 21.7954 21.0441 21.56 20.75C22.706 19.6423 23.495 18.2175 23.8258 16.6584C24.1566 15.0993 24.0142 13.4769 23.4168 11.9993C22.8194 10.5217 21.7942 9.25619 20.4728 8.36509C19.1513 7.474 17.5938 6.99792 16 6.99792C14.4062 6.99792 12.8487 7.474 11.5272 8.36509C10.2058 9.25619 9.18065 10.5217 8.58324 11.9993C7.98584 13.4769 7.84341 15.0993 8.17423 16.6584C8.50505 18.2175 9.29403 19.6423 10.44 20.75C10.2046 21.0441 10.057 21.3986 10.0142 21.7729C9.97141 22.1471 10.0352 22.5259 10.1982 22.8655C10.3612 23.2051 10.6168 23.4917 10.9356 23.6924C11.2543 23.8932 11.6233 23.9998 12 24" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
7
frontend/app/svg/icons/color/issues/custom.svg
Normal file
7
frontend/app/svg/icons/color/issues/custom.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
|
||||
<rect width="32" height="32" rx="10" fill="#FFEEEE"/>
|
||||
<path d="M16 13V17" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M16 21H16.01" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M20 22L26 16L20 10" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12 10L6 16L12 22" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 561 B |
13
frontend/app/svg/icons/color/issues/dead_click.svg
Normal file
13
frontend/app/svg/icons/color/issues/dead_click.svg
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
|
||||
<rect width="32" height="32" rx="10" fill="#FFEEEE"/>
|
||||
<path d="M9 7C8.46957 7 7.96086 7.21071 7.58579 7.58579C7.21071 7.96086 7 8.46957 7 9" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M23 7C23.5304 7 24.0391 7.21071 24.4142 7.58579C24.7893 7.96086 25 8.46957 25 9" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M16 16L20 26L21.7 21.7L26 20L16 16Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M9 25C8.46957 25 7.96086 24.7893 7.58579 24.4142C7.21071 24.0391 7 23.5304 7 23" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M13 7H14" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M13 25H15" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M18 7H19" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M7 13V14" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M25 13V15" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M7 18V19" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
6
frontend/app/svg/icons/color/issues/errors.svg
Normal file
6
frontend/app/svg/icons/color/issues/errors.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
|
||||
<rect width="32" height="32" rx="10" fill="#FFEEEE"/>
|
||||
<path d="M16 26C21.5228 26 26 21.5228 26 16C26 10.4772 21.5228 6 16 6C10.4772 6 6 10.4772 6 16C6 21.5228 10.4772 26 16 26Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M16 12V16" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M16 20H16.01" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 543 B |
|
|
@ -0,0 +1,6 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
|
||||
<rect width="32" height="32" rx="10" fill="#FFEEEE"/>
|
||||
<path d="M11 6H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M9 10H23" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M23 14H9C7.89543 14 7 14.8954 7 16V24C7 25.1046 7.89543 26 9 26H23C24.1046 26 25 25.1046 25 24V16C25 14.8954 24.1046 14 23 14Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 551 B |
6
frontend/app/svg/icons/color/issues/js_exception.svg
Normal file
6
frontend/app/svg/icons/color/issues/js_exception.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
|
||||
<rect width="32" height="32" rx="10" fill="#FFEEEE"/>
|
||||
<path d="M16 26C21.5228 26 26 21.5228 26 16C26 10.4772 21.5228 6 16 6C10.4772 6 6 10.4772 6 16C6 21.5228 10.4772 26 16 26Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M16 12V16" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M16 20H16.01" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 543 B |
12
frontend/app/svg/icons/color/issues/memory.svg
Normal file
12
frontend/app/svg/icons/color/issues/memory.svg
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
|
||||
<rect width="32" height="32" rx="10" fill="#FFEEEE"/>
|
||||
<path d="M10 23V20" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M14 23V20" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M18 23V20" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M22 23V20" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12 15V13" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M20 15V13" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M16 15V13" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M6 19H26" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M6 11C6 10.4696 6.21071 9.96086 6.58579 9.58579C6.96086 9.21071 7.46957 9 8 9H24C24.5304 9 25.0391 9.21071 25.4142 9.58579C25.7893 9.96086 26 10.4696 26 11V12.1C25.5858 12.222 25.2222 12.4748 24.9635 12.8206C24.7049 13.1664 24.5651 13.5867 24.5651 14.0185C24.5651 14.4503 24.7049 14.8706 24.9635 15.2164C25.2222 15.5622 25.5858 15.815 26 15.937V21C26 21.5304 25.7893 22.0391 25.4142 22.4142C25.0391 22.7893 24.5304 23 24 23H8C7.46957 23 6.96086 22.7893 6.58579 22.4142C6.21071 22.0391 6 21.5304 6 21V15.9C6.41423 15.778 6.77784 15.5252 7.03648 15.1794C7.29512 14.8336 7.43488 14.4133 7.43488 13.9815C7.43488 13.5497 7.29512 13.1294 7.03648 12.7836C6.77784 12.4378 6.41423 12.185 6 12.063V11Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
9
frontend/app/svg/icons/color/issues/missing_resource.svg
Normal file
9
frontend/app/svg/icons/color/issues/missing_resource.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
|
||||
<rect width="32" height="32" rx="10" fill="#FFEEEE"/>
|
||||
<path d="M6 6L26 26" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M14.41 14.41C14.2242 14.5958 14.0036 14.7432 13.7608 14.8437C13.518 14.9443 13.2578 14.9961 12.995 14.9961C12.7322 14.9961 12.472 14.9443 12.2292 14.8437C11.9864 14.7432 11.7658 14.5958 11.58 14.41C11.3942 14.2241 11.2468 14.0035 11.1462 13.7607C11.0457 13.518 10.9939 13.2577 10.9939 12.995C10.9939 12.7322 11.0457 12.472 11.1462 12.2292C11.2468 11.9864 11.3942 11.7658 11.58 11.58" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M17.5 17.5L10 25" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M22 16L25 19" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M7.59 7.58997C7.40358 7.77451 7.25548 7.99408 7.15423 8.23606C7.05298 8.47804 7.00056 8.73766 7 8.99997V23C7 23.5304 7.21071 24.0391 7.58579 24.4142C7.96086 24.7893 8.46957 25 9 25H23C23.55 25 24.052 24.78 24.41 24.41" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M25 19V9C25 8.46957 24.7893 7.96086 24.4142 7.58579C24.0391 7.21071 23.5304 7 23 7H13" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
5
frontend/app/svg/icons/color/issues/mouse_thrashing.svg
Normal file
5
frontend/app/svg/icons/color/issues/mouse_thrashing.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
|
||||
<rect width="32" height="32" rx="10" fill="#FFEEEE"/>
|
||||
<path d="M23 13C23 9.13401 19.866 6 16 6C12.134 6 9 9.13401 9 13V19C9 22.866 12.134 26 16 26C19.866 26 23 22.866 23 19V13Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M16 10V14" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 439 B |
20
frontend/app/svg/icons/color/issues/slow_page_load.svg
Normal file
20
frontend/app/svg/icons/color/issues/slow_page_load.svg
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
|
||||
<rect width="32" height="32" rx="10" fill="#FFEEEE"/>
|
||||
<path d="M18.5 6H10C9.46957 6 8.96086 6.21071 8.58579 6.58579C8.21071 6.96086 8 7.46957 8 8V24C8 24.5304 8.21071 25.0391 8.58579 25.4142C8.96086 25.7893 9.46957 26 10 26H22C22.5304 26 23.0391 25.7893 23.4142 25.4142C23.7893 25.0391 24 24.5304 24 24V11.5L18.5 6Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M18 6L18.8092 11.0911L24 12" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<g clip-path="url(#clip0_458_14755)">
|
||||
<path d="M16 13.8334V15.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M17.75 16.25L18.9583 15.0416" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M18.5 18H20.1667" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M17.75 19.75L18.9583 20.9583" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M16 20.5V22.1667" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M13.0416 20.9583L14.25 19.75" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M11.8334 18H13.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M13.0416 15.0416L14.25 16.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_458_14755">
|
||||
<rect width="10" height="10" fill="white" transform="translate(11 13)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
Loading…
Add table
Reference in a new issue