jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change(ui): performance cards

Browse source
This commit is contained in:
Shekar Siri 2024-06-26 18:55:51 +02:00
parent f27680a89c
commit 7d2d4db21e
3 changed files with 371 additions and 206 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

515
frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
View file

@ -1,61 +1,68 @@
import ExampleFunnel from "./Examples/Funnel";
import ExamplePath from "./Examples/Path";
import ExampleTrend from "./Examples/Trend";
import ExampleCount from "./Examples/Count";
import PerfBreakdown from "./Examples/PerfBreakdown";
import SlowestDomain from "./Examples/SlowestDomain";
import SessionsByErrors from "./Examples/SessionsByErrors";
import SessionsByIssues from "./Examples/SessionsByIssues";
import ByBrowser from "./Examples/SessionsBy/ByBrowser";
import BySystem from "./Examples/SessionsBy/BySystem";
import ByCountry from "./Examples/SessionsBy/ByCountry";
import ByUrl from "./Examples/SessionsBy/ByUrl";
import {ERRORS, FUNNEL, PERFORMANCE, TABLE, TIMESERIES, USER_PATH, WEB_VITALS} from "App/constants/card";
import {
ERRORS,
FUNNEL, INSIGHTS,
PERFORMANCE,
RESOURCE_MONITORING,
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";
import InsightsExample from "Components/Dashboard/components/DashboardList/NewDashModal/Examples/InsightsExample";
const TYPE = {
FUNNEL: 'funnel',
PATH_FINDER: 'path-finder',
TREND: 'trend',
SESSIONS_BY: 'sessions-by',
BREAKDOWN: 'breakdown',
SLOWEST_DOMAIN: 'slowest-domain',
SESSIONS_BY_ERRORS: 'sessions-by-errors',
SESSIONS_BY_ISSUES: 'sessions-by-issues',
SESSIONS_BY_BROWSER: 'sessions-by-browser',
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',
}
// const TYPE = {
// FUNNEL: 'funnel',
// PATH_FINDER: 'path-finder',
// TREND: 'trend',
// SESSIONS_BY: 'sessions-by',
// BREAKDOWN: 'breakdown',
// SLOWEST_DOMAIN: 'slowest-domain',
// SESSIONS_BY_ERRORS: 'sessions-by-errors',
// SESSIONS_BY_ISSUES: 'sessions-by-issues',
// SESSIONS_BY_BROWSER: 'sessions-by-browser',
// 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',
WEB_VITALS: 'web-vitals',
}
export const CARD_CATEGORIES = [
{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]}
{key: CARD_CATEGORY.ERROR_TRACKING, label: 'Errors Tracking', icon: TableCellsMerge, types: [WEB_VITALS]},
{key: CARD_CATEGORY.WEB_VITALS, label: 'Web Vitals', icon: TableCellsMerge, types: [WEB_VITALS]}
];
export interface CardType {
@ -87,8 +94,9 @@ export const CARD_LIST: CardType[] = [
},
{
title: 'Trend',
key: TYPE.TREND,
key: TIMESERIES,
cardType: TIMESERIES,
metricOf: 'sessionCount',
category: CARD_CATEGORIES[0].key,
example: ExampleTrend,
},
@ -102,226 +110,136 @@ export const CARD_LIST: CardType[] = [
example: ByIssues,
},
{
title: 'Insights',
key: INSIGHTS,
cardType: INSIGHTS,
metricOf: 'issueCategories',
category: CARD_CATEGORIES[0].key,
width: 4,
example: InsightsExample,
},
// Performance Monitoring
{
title: 'CPU Load',
key: FilterKey.AVG_CPU,
cardType: WEB_VITALS,
metricOf: FilterKey.AVG_CPU,
key: FilterKey.CPU,
cardType: PERFORMANCE,
metricOf: FilterKey.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,
example: Trend,
},
{
title: 'DOM Content Loadeded Start',
key: FilterKey.AVG_DOM_CONTENT_LOAD_START,
cardType: WEB_VITALS,
metricOf: FilterKey.AVG_DOM_CONTENT_LOAD_START,
title: 'Crashes',
key: FilterKey.CRASHES,
cardType: PERFORMANCE,
metricOf: FilterKey.CRASHES,
category: CARD_CATEGORIES[1].key,
width: 1,
height: 148,
example: WebVital,
example: Trend,
},
{
title: 'First Meaningful Paint',
key: FilterKey.AVG_FIRST_CONTENTFUL_PIXEL,
cardType: WEB_VITALS,
metricOf: FilterKey.AVG_FIRST_CONTENTFUL_PIXEL,
title: 'Framerate',
key: FilterKey.FPS,
cardType: PERFORMANCE,
metricOf: FilterKey.FPS,
category: CARD_CATEGORIES[1].key,
width: 1,
height: 148,
example: WebVital,
example: Trend,
},
{
title: 'First Paint',
key: FilterKey.AVG_FIRST_PAINT,
cardType: WEB_VITALS,
metricOf: FilterKey.AVG_FIRST_PAINT,
title: 'DOM Building Time',
key: FilterKey.PAGES_DOM_BUILD_TIME,
cardType: PERFORMANCE,
metricOf: FilterKey.PAGES_DOM_BUILD_TIME,
category: CARD_CATEGORIES[1].key,
width: 1,
height: 148,
example: WebVital,
example: Trend,
},
{
title: 'Frame Rate',
key: FilterKey.AVG_FPS,
cardType: WEB_VITALS,
metricOf: FilterKey.AVG_FPS,
title: 'Memory Consumption',
key: FilterKey.MEMORY_CONSUMPTION,
cardType: PERFORMANCE,
metricOf: FilterKey.MEMORY_CONSUMPTION,
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,
example: Trend,
},
{
title: 'Page Response Time',
key: FilterKey.AVG_PAGES_RESPONSE_TIME,
cardType: WEB_VITALS,
metricOf: FilterKey.AVG_PAGES_RESPONSE_TIME,
key: FilterKey.PAGES_RESPONSE_TIME,
cardType: PERFORMANCE,
metricOf: FilterKey.PAGES_RESPONSE_TIME,
category: CARD_CATEGORIES[1].key,
width: 1,
height: 148,
example: WebVital,
example: Trend,
},
{
title: 'Request Load Time',
key: FilterKey.AVG_REQUEST_LOADT_IME,
cardType: WEB_VITALS,
metricOf: FilterKey.AVG_REQUEST_LOADT_IME,
title: 'Page Response Time Distribution',
key: FilterKey.PAGES_RESPONSE_TIME_DISTRIBUTION,
cardType: PERFORMANCE,
metricOf: FilterKey.PAGES_RESPONSE_TIME_DISTRIBUTION,
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,
example: Trend,
},
{
title: 'Session Duration',
key: FilterKey.AVG_SESSION_DURATION,
cardType: WEB_VITALS,
metricOf: FilterKey.AVG_SESSION_DURATION,
title: 'Resources vs Visually Completed',
key: FilterKey.RESOURCES_VS_VISUALLY_COMPLETE,
cardType: PERFORMANCE,
metricOf: FilterKey.RESOURCES_VS_VISUALLY_COMPLETE,
category: CARD_CATEGORIES[1].key,
width: 1,
height: 148,
example: WebVital,
example: Trend,
},
{
title: 'Time Till First Byte',
key: FilterKey.AVG_TILL_FIRST_BYTE,
cardType: WEB_VITALS,
metricOf: FilterKey.AVG_TILL_FIRST_BYTE,
title: 'Sessions per Browser',
key: FilterKey.SESSIONS_PER_BROWSER,
cardType: PERFORMANCE,
metricOf: FilterKey.SESSIONS_PER_BROWSER,
category: CARD_CATEGORIES[1].key,
width: 1,
height: 148,
example: WebVital,
example: Bars,
},
{
title: 'Time to be Interactive',
key: FilterKey.AVG_TIME_TO_INTERACTIVE,
cardType: WEB_VITALS,
metricOf: FilterKey.AVG_TIME_TO_INTERACTIVE,
title: 'Slowest Domains',
key: FilterKey.SLOWEST_DOMAINS,
cardType: PERFORMANCE,
metricOf: FilterKey.SLOWEST_DOMAINS,
category: CARD_CATEGORIES[1].key,
width: 1,
height: 148,
example: WebVital,
example: Bars,
},
{
title: 'Speed Index by Location',
key: FilterKey.SPEED_LOCATION,
cardType: PERFORMANCE,
metricOf: FilterKey.SPEED_LOCATION,
category: CARD_CATEGORIES[1].key,
example: Trend,
},
{
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,
key: FilterKey.TIME_TO_RENDER,
cardType: PERFORMANCE,
metricOf: FilterKey.TIME_TO_RENDER,
category: CARD_CATEGORIES[1].key,
example: PerfBreakdown,
},
{
title: 'Slowest Domain',
key: TYPE.SLOWEST_DOMAIN,
cardType: TIMESERIES,
category: CARD_CATEGORIES[1].key,
example: SlowestDomain,
example: Trend,
},
{
title: 'Sessions by Errors',
key: TYPE.SESSIONS_BY_ERRORS,
cardType: TIMESERIES,
title: 'Sessions Impacted by Slow Pages',
key: FilterKey.IMPACTED_SESSIONS_BY_SLOW_PAGES,
cardType: PERFORMANCE,
metricOf: FilterKey.IMPACTED_SESSIONS_BY_SLOW_PAGES,
category: CARD_CATEGORIES[1].key,
example: SessionsByErrors,
example: Trend,
},
// Web analytics
{
title: 'Sessions by Users',
key: FilterKey.USERID,
@ -377,7 +295,7 @@ export const CARD_LIST: CardType[] = [
{
title: 'JS Errors',
key: FilterKey.IMPACTED_SESSIONS_BY_JS_ERRORS,
cardType: TABLE,
cardType: ERRORS,
metricOf: FilterKey.IMPACTED_SESSIONS_BY_JS_ERRORS,
category: CARD_CATEGORIES[3].key,
example: PerfBreakdown,
@ -385,7 +303,7 @@ export const CARD_LIST: CardType[] = [
{
title: 'Errors by Origin',
key: FilterKey.RESOURCES_BY_PARTY,
cardType: TABLE,
cardType: ERRORS,
metricOf: FilterKey.RESOURCES_BY_PARTY,
category: CARD_CATEGORIES[3].key,
example: PerfBreakdown,
@ -393,7 +311,7 @@ export const CARD_LIST: CardType[] = [
{
title: 'Errors by Domain',
key: FilterKey.ERRORS_PER_DOMAINS,
cardType: TABLE,
cardType: ERRORS,
metricOf: FilterKey.ERRORS_PER_DOMAINS,
category: CARD_CATEGORIES[3].key,
example: Bars,
@ -415,7 +333,7 @@ export const CARD_LIST: CardType[] = [
{
title: 'Errors by Type',
key: FilterKey.ERRORS_PER_TYPE,
cardType: TABLE,
cardType: ERRORS,
metricOf: FilterKey.ERRORS_PER_TYPE,
category: CARD_CATEGORIES[3].key,
example: PerfBreakdown,
@ -423,7 +341,7 @@ export const CARD_LIST: CardType[] = [
{
title: 'Calls with Errors',
key: FilterKey.CALLS_ERRORS,
cardType: TABLE,
cardType: ERRORS,
metricOf: FilterKey.CALLS_ERRORS,
category: CARD_CATEGORIES[3].key,
example: PerfBreakdown,
@ -432,7 +350,7 @@ export const CARD_LIST: CardType[] = [
{
title: '4xx Domains',
key: FilterKey.DOMAINS_ERRORS_4XX,
cardType: TABLE,
cardType: ERRORS,
metricOf: FilterKey.DOMAINS_ERRORS_4XX,
category: CARD_CATEGORIES[3].key,
example: Trend,
@ -441,9 +359,196 @@ export const CARD_LIST: CardType[] = [
{
title: '5xx Domains',
key: FilterKey.DOMAINS_ERRORS_5XX,
cardType: TABLE,
cardType: ERRORS,
metricOf: FilterKey.DOMAINS_ERRORS_5XX,
category: CARD_CATEGORIES[3].key,
example: Trend,
},
// Web vitals
{
title: 'CPU Load',
key: FilterKey.AVG_CPU,
cardType: WEB_VITALS,
metricOf: FilterKey.AVG_CPU,
category: CARD_CATEGORIES[4].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[4].key,
width: 1,
height: 148,
example: WebVital,
},
{
title: 'DOM Content Loaded Start',
key: FilterKey.AVG_DOM_CONTENT_LOAD_START,
cardType: WEB_VITALS,
metricOf: FilterKey.AVG_DOM_CONTENT_LOAD_START,
category: CARD_CATEGORIES[4].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[4].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[4].key,
width: 1,
height: 148,
example: WebVital,
},
{
title: 'Frame Rate',
key: FilterKey.AVG_FPS,
cardType: WEB_VITALS,
metricOf: FilterKey.AVG_FPS,
category: CARD_CATEGORIES[4].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[4].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[4].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[4].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[4].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[4].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[4].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[4].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[4].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[4].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[4].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[4].key,
width: 1,
height: 148,
example: WebVital,
},
]

11
frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Bars.tsx
View file

@ -13,7 +13,16 @@ interface Props {
function Bars(props: Props) {
const _data = props.data || {
total: 90,
values: []
values: [
{
"label": "company.domain.com",
"value": 89
},
{
"label": "openreplay.com",
"value": 15
}
]
}
return (
<ExCard

51
frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/InsightsExample.tsx Normal file
View file

@ -0,0 +1,51 @@
import React from 'react';
import CustomMetricOverviewChart from "Components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricOverviewChart";
import ExCard from "Components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard";
import InsightsCard from "Components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard";
interface Props {
title: string;
type: string;
onCard: (card: string) => void;
}
function InsightsExample(props: Props) {
const data = [
{
"category": "errors",
"name": "Error: Invalid unit value NaN",
"value": 562,
"oldValue": null,
"ratio": 7.472410583698976,
"change": null,
"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": null,
"isNew": true
}
];
return (
<ExCard
{...props}
>
<InsightsCard data={data}/>
</ExCard>
);
}
export default InsightsExample;