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

ui: remove web_vitals, performance_monitoring cards

Browse source
This commit is contained in:
nick-delirium 2024-10-30 13:03:24 +01:00
parent 60f29eea6a
commit 6479292158
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
15 changed files with 30 additions and 546 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/.env.sample
View file

@ -23,4 +23,4 @@ MINIO_SECRET_KEY = ''
# APP and TRACKER VERSIONS
VERSION = 1.20.0
TRACKER_VERSION = '14.0.6'
TRACKER_VERSION = '14.0.13'

4
frontend/app/components/Dashboard/Widgets/CardSessionsByList.tsx
View file

@ -2,7 +2,6 @@ import React, { useEffect } from 'react';
import { Avatar, List, Progress, Typography, Pagination } from 'antd';
import cn from 'classnames';
import { useStore } from '@/mstore';
import { WEB_VITALS } from '@/constants/card';
import { observer } from 'mobx-react-lite';
import { metricService } from '@/services';
@ -18,8 +17,7 @@ interface Props {
function CardSessionsByList({ list, selected, paginated, onClickHandler = () => null, metric, total }: Props) {
const { dashboardStore, metricStore, sessionStore } = useStore();
const drillDownPeriod = dashboardStore.drillDownPeriod;
const isOverviewWidget = metric?.metricType === WEB_VITALS;
const params = { density: isOverviewWidget ? 7 : 70 };
const params = { density: 70 };
const metricParams = { ...params };
const [loading, setLoading] = React.useState(false);
const data = paginated ? metric?.data[0]?.values : list;

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

@ -11,28 +11,20 @@ import {
ERRORS,
FUNNEL,
INSIGHTS,
PERFORMANCE,
TABLE,
TIMESERIES,
USER_PATH,
WEB_VITALS
} from 'App/constants/card';
import { FilterKey } from 'Types/filter/filterType';
import { Activity, BarChart, TableCellsMerge, SearchSlash, TrendingUp } from 'lucide-react';
import WebVital from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/WebVital';
import { BarChart, TrendingUp, SearchSlash } from 'lucide-react';
import ByIssues from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByIssues';
import InsightsExample from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/InsightsExample';
import ByUser from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByUser';
import BarChartCard from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/BarChart';
import AreaChartCard from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/AreaChartCard';
import CallsWithErrorsExample
from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/CallsWithErrorsExample';
import SessionsPerBrowserExample
from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsPerBrowserExample';
import SlowestDomains
from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/SlowestDomains';
import SpeedIndexByLocationExample
from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SpeedIndexByLocationExample';
import HeatmapsExample from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/HeatmapsExample';
import ByReferrer from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByRferrer';
import ByFetch from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByFecth';
@ -40,18 +32,14 @@ import TableOfErrors from 'Components/Dashboard/components/DashboardList/NewDash
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: SearchSlash, types: [WEB_VITALS] },
{ key: CARD_CATEGORY.WEB_VITALS, label: 'Web Vitals', icon: TableCellsMerge, types: [WEB_VITALS] }
{ key: CARD_CATEGORY.ERROR_TRACKING, label: 'Errors Tracking', icon: SearchSlash, types: [] },
];
export interface CardType {
@ -157,188 +145,6 @@ export const CARD_LIST: CardType[] = [
example: ByIssues
},
// Performance Monitoring
{
title: 'CPU Load',
key: FilterKey.CPU,
cardType: PERFORMANCE,
metricOf: FilterKey.CPU,
category: CARD_CATEGORIES[1].key,
data: {
chart: generateAreaData(),
label: 'CPU Load (%)',
namesMap: [
'Series 1'
]
},
example: AreaChartCard
},
{
title: 'Crashes',
key: FilterKey.CRASHES,
cardType: PERFORMANCE,
metricOf: FilterKey.CRASHES,
category: CARD_CATEGORIES[1].key,
data: {
chart: generateAreaData(),
namesMap: [
'Series 1'
]
},
example: AreaChartCard
},
{
title: 'Framerate',
key: FilterKey.FPS,
cardType: PERFORMANCE,
metricOf: FilterKey.FPS,
category: CARD_CATEGORIES[1].key,
data: {
chart: generateAreaData(),
label: 'Frames Per Second',
namesMap: [
'Series 1'
]
},
example: AreaChartCard
},
{
title: 'DOM Building Time',
key: FilterKey.PAGES_DOM_BUILD_TIME,
cardType: PERFORMANCE,
metricOf: FilterKey.PAGES_DOM_BUILD_TIME,
category: CARD_CATEGORIES[1].key,
data: {
chart: generateAreaData(),
label: 'DOM Build Time (ms)',
namesMap: [
'Series 1'
]
},
example: AreaChartCard
},
{
title: 'Memory Consumption',
key: FilterKey.MEMORY_CONSUMPTION,
cardType: PERFORMANCE,
metricOf: FilterKey.MEMORY_CONSUMPTION,
category: CARD_CATEGORIES[1].key,
data: {
chart: generateAreaData(),
label: 'JS Heap Size (MB)',
unit: 'mb',
namesMap: [
'Series 1'
]
},
example: AreaChartCard
},
{
title: 'Page Response Time',
key: FilterKey.PAGES_RESPONSE_TIME,
cardType: PERFORMANCE,
metricOf: FilterKey.PAGES_RESPONSE_TIME,
category: CARD_CATEGORIES[1].key,
data: {
chart: generateAreaData(),
label: 'Page Response Time (ms)',
namesMap: [
'Series 1'
]
},
example: AreaChartCard
},
{
title: 'Page Response Time Distribution',
key: FilterKey.PAGES_RESPONSE_TIME_DISTRIBUTION,
cardType: PERFORMANCE,
metricOf: FilterKey.PAGES_RESPONSE_TIME_DISTRIBUTION,
category: CARD_CATEGORIES[1].key,
data: {
chart: generateStackedBarChartData(['Page Response Time (ms)']),
label: 'Number of Calls',
unit: 'ms',
namesMap: [
'Series 1'
]
},
example: BarChartCard
},
{
title: 'Sessions by Browser & Version',
key: FilterKey.SESSIONS_PER_BROWSER,
cardType: PERFORMANCE,
metricOf: FilterKey.SESSIONS_PER_BROWSER,
category: CARD_CATEGORIES[1].key,
data: generateRandomBarsData(),
example: SessionsPerBrowserExample
},
{
title: 'Slowest Domains',
key: FilterKey.SLOWEST_DOMAINS,
cardType: PERFORMANCE,
metricOf: FilterKey.SLOWEST_DOMAINS,
category: CARD_CATEGORIES[1].key,
// data: generateRandomBarsData(),
example: SlowestDomains
},
{
title: 'Speed Index by Location',
key: FilterKey.SPEED_LOCATION,
cardType: PERFORMANCE,
metricOf: FilterKey.SPEED_LOCATION,
category: CARD_CATEGORIES[1].key,
data: {
chart: generateAreaData(),
namesMap: [
'Series 1'
]
},
example: SpeedIndexByLocationExample
},
{
title: 'Time to Render',
key: FilterKey.TIME_TO_RENDER,
cardType: PERFORMANCE,
metricOf: FilterKey.TIME_TO_RENDER,
category: CARD_CATEGORIES[1].key,
data: {
chart: generateAreaData(),
label: 'Time to Render (ms)',
unit: 'ms',
namesMap: [
'Series 1'
]
},
example: AreaChartCard
},
{
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,
data: {
chart: generateAreaData(),
label: 'Number of Sessions',
namesMap: [
'Series 1'
]
},
example: AreaChartCard
},
// Web analytics
{
@ -346,7 +152,7 @@ export const CARD_LIST: CardType[] = [
key: FilterKey.USERID,
cardType: TABLE,
metricOf: FilterKey.USERID,
category: CARD_CATEGORIES[2].key,
category: CARD_CATEGORIES[1].key,
example: ByUser
},
@ -355,7 +161,7 @@ export const CARD_LIST: CardType[] = [
key: FilterKey.USER_BROWSER,
cardType: TABLE,
metricOf: FilterKey.USER_BROWSER,
category: CARD_CATEGORIES[2].key,
category: CARD_CATEGORIES[1].key,
example: ByBrowser
},
// {
@ -363,7 +169,7 @@ export const CARD_LIST: CardType[] = [
// key: TYPE.SESSIONS_BY_SYSTEM,
// cardType: TABLE,
// metricOf: FilterKey.USER_OS,
// category: CARD_CATEGORIES[2].key,
// category: CARD_CATEGORIES[1].key,
// example: BySystem,
// },
{
@ -371,7 +177,7 @@ export const CARD_LIST: CardType[] = [
key: FilterKey.USER_COUNTRY,
cardType: TABLE,
metricOf: FilterKey.USER_COUNTRY,
category: CARD_CATEGORIES[2].key,
category: CARD_CATEGORIES[1].key,
example: ByCountry
},
@ -380,7 +186,7 @@ export const CARD_LIST: CardType[] = [
key: FilterKey.USER_DEVICE,
cardType: TABLE,
metricOf: FilterKey.USER_DEVICE,
category: CARD_CATEGORIES[2].key,
category: CARD_CATEGORIES[1].key,
example: BySystem
},
{
@ -388,7 +194,7 @@ export const CARD_LIST: CardType[] = [
key: FilterKey.LOCATION,
cardType: TABLE,
metricOf: FilterKey.LOCATION,
category: CARD_CATEGORIES[2].key,
category: CARD_CATEGORIES[1].key,
example: ByUrl
},
@ -397,7 +203,7 @@ export const CARD_LIST: CardType[] = [
key: FilterKey.REFERRER,
cardType: TABLE,
metricOf: FilterKey.REFERRER,
category: CARD_CATEGORIES[2].key,
category: CARD_CATEGORIES[1].key,
example: ByReferrer
},
@ -406,7 +212,7 @@ export const CARD_LIST: CardType[] = [
key: FilterKey.FETCH,
cardType: TABLE,
metricOf: FilterKey.FETCH,
category: CARD_CATEGORIES[2].key,
category: CARD_CATEGORIES[1].key,
example: ByFetch
},
@ -417,7 +223,7 @@ export const CARD_LIST: CardType[] = [
key: FilterKey.ERRORS,
cardType: TABLE,
metricOf: FilterKey.ERRORS,
category: CARD_CATEGORIES[3].key,
category: CARD_CATEGORIES[2].key,
data: {
chart: generateBarChartData(),
hideLegend: true,
@ -432,7 +238,7 @@ export const CARD_LIST: CardType[] = [
key: INSIGHTS,
cardType: INSIGHTS,
metricOf: 'issueCategories',
category: CARD_CATEGORIES[3].key,
category: CARD_CATEGORIES[2].key,
width: 4,
isEnterprise: true,
example: InsightsExample
@ -442,7 +248,7 @@ export const CARD_LIST: CardType[] = [
key: FilterKey.IMPACTED_SESSIONS_BY_JS_ERRORS,
cardType: ERRORS,
metricOf: FilterKey.IMPACTED_SESSIONS_BY_JS_ERRORS,
category: CARD_CATEGORIES[3].key,
category: CARD_CATEGORIES[2].key,
data: {
chart: generateBarChartData(),
hideLegend: true,
@ -455,7 +261,7 @@ export const CARD_LIST: CardType[] = [
key: FilterKey.RESOURCES_BY_PARTY,
cardType: ERRORS,
metricOf: FilterKey.RESOURCES_BY_PARTY,
category: CARD_CATEGORIES[3].key,
category: CARD_CATEGORIES[2].key,
data: {
chart: generateStackedBarChartData(['1st Party', '3rd Party'])
},
@ -466,16 +272,15 @@ export const CARD_LIST: CardType[] = [
key: FilterKey.ERRORS_PER_DOMAINS,
cardType: ERRORS,
metricOf: FilterKey.ERRORS_PER_DOMAINS,
category: CARD_CATEGORIES[3].key,
category: CARD_CATEGORIES[2].key,
example: SlowestDomains
// data: generateRandomBarsData(),
},
{
title: 'Errors by Type',
key: FilterKey.ERRORS_PER_TYPE,
cardType: ERRORS,
metricOf: FilterKey.ERRORS_PER_TYPE,
category: CARD_CATEGORIES[3].key,
category: CARD_CATEGORIES[2].key,
data: {
chart: generateStackedBarChartData(['Integrations', '4xx', '5xx'])
},
@ -486,7 +291,7 @@ export const CARD_LIST: CardType[] = [
key: FilterKey.CALLS_ERRORS,
cardType: ERRORS,
metricOf: FilterKey.CALLS_ERRORS,
category: CARD_CATEGORIES[3].key,
category: CARD_CATEGORIES[2].key,
width: 4,
data: {
chart: [
@ -521,7 +326,7 @@ export const CARD_LIST: CardType[] = [
key: FilterKey.DOMAINS_ERRORS_4XX,
cardType: ERRORS,
metricOf: FilterKey.DOMAINS_ERRORS_4XX,
category: CARD_CATEGORIES[3].key,
category: CARD_CATEGORIES[2].key,
data: {
chart: generateTimeSeriesData(),
label: 'Number of Errors',
@ -538,7 +343,7 @@ export const CARD_LIST: CardType[] = [
key: FilterKey.DOMAINS_ERRORS_5XX,
cardType: ERRORS,
metricOf: FilterKey.DOMAINS_ERRORS_5XX,
category: CARD_CATEGORIES[3].key,
category: CARD_CATEGORIES[2].key,
data: {
chart: generateTimeSeriesData(),
label: 'Number of Errors',
@ -549,210 +354,8 @@ export const CARD_LIST: CardType[] = [
},
example: ExampleTrend
},
// Web vitals
{
title: 'Avg. CPU Load',
key: FilterKey.AVG_CPU,
cardType: WEB_VITALS,
metricOf: FilterKey.AVG_CPU,
category: CARD_CATEGORIES[4].key,
data: generateWebVitalData(),
example: WebVital
},
{
title: 'Avg. DOM Content Load Time',
key: FilterKey.AVG_DOM_CONTENT_LOADED,
cardType: WEB_VITALS,
metricOf: FilterKey.AVG_DOM_CONTENT_LOADED,
category: CARD_CATEGORIES[4].key,
data: generateWebVitalData(),
example: WebVital
},
{
title: 'Avg. 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,
data: generateWebVitalData(),
example: WebVital
},
{
title: 'Avg. First Meaningful Paint Time',
key: FilterKey.AVG_FIRST_CONTENTFUL_PIXEL,
cardType: WEB_VITALS,
metricOf: FilterKey.AVG_FIRST_CONTENTFUL_PIXEL,
category: CARD_CATEGORIES[4].key,
data: generateWebVitalData(),
example: WebVital
},
{
title: 'Avg. First Paint Time',
key: FilterKey.AVG_FIRST_PAINT,
cardType: WEB_VITALS,
metricOf: FilterKey.AVG_FIRST_PAINT,
category: CARD_CATEGORIES[4].key,
data: generateWebVitalData(),
example: WebVital
},
{
title: 'Avg. Frame Rate',
key: FilterKey.AVG_FPS,
cardType: WEB_VITALS,
metricOf: FilterKey.AVG_FPS,
category: CARD_CATEGORIES[4].key,
data: generateWebVitalData(),
example: WebVital
},
{
title: 'Avg. Load Time of Images',
key: FilterKey.AVG_IMAGE_LOAD_TIME,
cardType: WEB_VITALS,
metricOf: FilterKey.AVG_IMAGE_LOAD_TIME,
category: CARD_CATEGORIES[4].key,
data: generateWebVitalData(),
example: WebVital
},
{
title: 'Avg. Load Time of Pages',
key: FilterKey.AVG_PAGE_LOAD_TIME,
cardType: WEB_VITALS,
metricOf: FilterKey.AVG_PAGE_LOAD_TIME,
category: CARD_CATEGORIES[4].key,
data: generateWebVitalData(),
example: WebVital
},
{
title: 'Avg. 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,
data: generateWebVitalData(),
example: WebVital
},
{
title: 'Avg. Page Response Time',
key: FilterKey.AVG_PAGES_RESPONSE_TIME,
cardType: WEB_VITALS,
metricOf: FilterKey.AVG_PAGES_RESPONSE_TIME,
category: CARD_CATEGORIES[4].key,
data: generateWebVitalData(),
example: WebVital
},
{
title: 'Avg. Request Load Time',
key: FilterKey.AVG_REQUEST_LOADT_IME,
cardType: WEB_VITALS,
metricOf: FilterKey.AVG_REQUEST_LOADT_IME,
category: CARD_CATEGORIES[4].key,
data: generateWebVitalData(),
example: WebVital
},
{
title: 'Avg. Response Time',
key: FilterKey.AVG_RESPONSE_TIME,
cardType: WEB_VITALS,
metricOf: FilterKey.AVG_RESPONSE_TIME,
category: CARD_CATEGORIES[4].key,
data: generateWebVitalData(),
example: WebVital
},
{
title: 'Avg. Session Duration',
key: FilterKey.AVG_SESSION_DURATION,
cardType: WEB_VITALS,
metricOf: FilterKey.AVG_SESSION_DURATION,
category: CARD_CATEGORIES[4].key,
data: generateWebVitalData(),
example: WebVital
},
{
title: 'Avg. Time Till First Byte',
key: FilterKey.AVG_TILL_FIRST_BYTE,
cardType: WEB_VITALS,
metricOf: FilterKey.AVG_TILL_FIRST_BYTE,
category: CARD_CATEGORIES[4].key,
data: generateWebVitalData(),
example: WebVital
},
{
title: 'Avg. Time to be Interactive',
key: FilterKey.AVG_TIME_TO_INTERACTIVE,
cardType: WEB_VITALS,
metricOf: FilterKey.AVG_TIME_TO_INTERACTIVE,
category: CARD_CATEGORIES[4].key,
data: generateWebVitalData(),
example: WebVital
},
{
title: 'Avg. Time to Render',
key: FilterKey.AVG_TIME_TO_RENDER,
cardType: WEB_VITALS,
metricOf: FilterKey.AVG_TIME_TO_RENDER,
category: CARD_CATEGORIES[4].key,
data: generateWebVitalData(),
example: WebVital
},
{
title: 'Avg. 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,
data: generateWebVitalData(),
example: WebVital
}
];
function generateRandomBarsData(): { total: number, values: { label: string, value: number }[] } {
const labels = ['company.domain.com', 'openreplay.com'];
const values = labels.map(label => ({
label,
value: Math.floor(Math.random() * 100)
}));
const total = values.reduce((acc, curr) => acc + curr.value, 0);
return {
total,
values: values.sort((a, b) => b.value - a.value)
};
}
function generateWebVitalData(): { value: number, chart: { timestamp: number, value: number }[], unit: string } {
const chart = Array.from({ length: 7 }, (_, i) => ({
timestamp: Date.now() + i * 86400000,
value: parseFloat((Math.random() * 10).toFixed(15))
}));
const value = chart.reduce((acc, curr) => acc + curr.value, 0) / chart.length;
return {
value,
chart,
unit: '%'
};
}
function generateTimeSeriesData(): any[] {
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];
const pointsPerMonth = 3; // Number of points for each month

1
frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/PerfBreakdown.tsx
View file

@ -2,7 +2,6 @@ import { GitCommitHorizontal } from 'lucide-react';
import React from 'react';
import ExCard from './ExCard';
import {PERFORMANCE} from "App/constants/card";
function PerfBreakdown(props: any) {
const rows = [

1
frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx
View file

@ -18,7 +18,6 @@ const ICONS: Record<string, string | null> = {
resources: 'resources-icon',
overview: null,
custom: null,
'web vitals': 'web-vitals',
}
export function WidgetCategoryItem({ category, isSelected, onClick, selectedWidgetIds }: IWiProps) {

11
frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
View file

@ -18,9 +18,6 @@ import {
HEATMAP,
FUNNEL,
ERRORS,
PERFORMANCE,
RESOURCE_MONITORING,
WEB_VITALS,
INSIGHTS,
USER_PATH,
RETENTION
@ -55,8 +52,7 @@ function WidgetChart(props: Props) {
const drillDownFilter = dashboardStore.drillDownFilter;
const colors = Styles.customMetricColors;
const [loading, setLoading] = useState(true);
const isOverviewWidget = metric.metricType === WEB_VITALS;
const params = {density: isOverviewWidget ? 7 : 70};
const params = {density: 70};
const metricParams = {...params};
const prevMetricRef = useRef<any>();
const isMounted = useIsMounted();
@ -145,11 +141,8 @@ function WidgetChart(props: Props) {
return <FunnelWidget metric={metric} data={data} isWidget={isSaved || isTemplate}/>;
}
if (metricType === 'predefined' || metricType === ERRORS || metricType === PERFORMANCE || metricType === RESOURCE_MONITORING || metricType === WEB_VITALS) {
if (metricType === 'predefined' || metricType === ERRORS) {
const defaultMetric = metric.data.chart && metric.data.chart.length === 0 ? metricWithData : metric;
if (isOverviewWidget) {
return <CustomMetricOverviewChart data={data}/>;
}
return <WidgetPredefinedChart isTemplate={isTemplate} metric={defaultMetric} data={data}
predefinedKey={metric.metricOf}/>;
}

5
frontend/app/components/Dashboard/components/WidgetForm/CardBuilder.tsx
View file

@ -15,8 +15,7 @@ import {eventKeys} from 'App/types/filter/newFilter';
import {renderClickmapThumbnail} from './renderMap';
import FilterItem from 'Shared/Filters/FilterItem';
import {
TIMESERIES, TABLE, HEATMAP, FUNNEL, ERRORS, RESOURCE_MONITORING,
PERFORMANCE, WEB_VITALS, INSIGHTS, USER_PATH, RETENTION
TIMESERIES, TABLE, HEATMAP, FUNNEL, ERRORS, INSIGHTS, USER_PATH, RETENTION
} from 'App/constants/card';
import {useHistory} from "react-router";
@ -227,7 +226,7 @@ const CardBuilder = observer((props: CardBuilderProps) => {
const metric = metricStore.instance;
const timeseriesOptions = metricOf.filter(i => i.type === 'timeseries');
const tableOptions = metricOf.filter(i => i.type === 'table');
const isPredefined = [ERRORS, PERFORMANCE, RESOURCE_MONITORING, WEB_VITALS].includes(metric.metricType);
const isPredefined = metric.metricType === ERRORS
const testingKey = localStorage.getItem('__mauricio_testing_access') === 'true';

7
frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx
View file

@ -16,9 +16,6 @@ import {
HEATMAP,
FUNNEL,
ERRORS,
RESOURCE_MONITORING,
PERFORMANCE,
WEB_VITALS,
INSIGHTS,
USER_PATH,
RETENTION
@ -61,9 +58,7 @@ function WidgetForm(props: Props) {
const eventsLength = metric.series[0].filter.filters.filter((i: any) => i && i.isEvent).length;
const cannotSaveFunnel = isFunnel && (!metric.series[0] || eventsLength <= 1);
const isPredefined = [ERRORS, PERFORMANCE, RESOURCE_MONITORING, WEB_VITALS].includes(
metric.metricType
);
const isPredefined = metric.metricType === ERRORS
const excludeFilterKeys = isClickmap || isPathAnalysis ? eventKeys : [];

6
frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx
View file

@ -7,11 +7,9 @@ import {
ERRORS,
FUNNEL,
INSIGHTS,
PERFORMANCE,
RESOURCE_MONITORING,
RETENTION,
TABLE,
USER_PATH, WEB_VITALS, TIMESERIES
USER_PATH
} from 'App/constants/card';
import FilterSeries from 'Components/Dashboard/components/FilterSeries/FilterSeries';
import { issueCategories, metricOf } from 'App/constants/filterOptions';
@ -32,7 +30,7 @@ function WidgetFormNew() {
const isPathAnalysis = metric.metricType === USER_PATH;
const excludeFilterKeys = isClickMap || isPathAnalysis ? eventKeys : [];
const hasFilters = filtersLength > 0 || eventsLength > 0;
const isPredefined = [ERRORS, PERFORMANCE, RESOURCE_MONITORING, WEB_VITALS].includes(metric.metricType);
const isPredefined = metric.metricType === ERRORS
return isPredefined ? <PredefinedMessage /> : (
<Space direction="vertical" className="w-full">

26
frontend/app/components/Dashboard/components/WidgetPredefinedChart/WidgetPredefinedChart.tsx
View file

@ -48,32 +48,6 @@ function WidgetPredefinedChart(props: Props) {
case FilterKey.CALLS_ERRORS:
return <CallWithErrors isTemplate={isTemplate} data={data} />
// PERFORMANCE
case FilterKey.IMPACTED_SESSIONS_BY_SLOW_PAGES:
return <SessionsImpactedBySlowRequests data={data} metric={metric} />
case FilterKey.PAGES_RESPONSE_TIME_DISTRIBUTION:
return <ResponseTimeDistribution data={data} metric={metric} />
case FilterKey.SPEED_LOCATION:
return <SpeedIndexByLocation data={data} />
case FilterKey.CPU:
return <CPULoad data={data} metric={metric} />
case FilterKey.CRASHES:
return <Crashes data={data} metric={metric} />
case FilterKey.PAGES_DOM_BUILD_TIME:
return <DomBuildingTime data={data} metric={metric} />
case FilterKey.FPS:
return <FPS data={data} metric={metric} />
case FilterKey.MEMORY_CONSUMPTION:
return <MemoryConsumption data={data} metric={metric} />
case FilterKey.PAGES_RESPONSE_TIME:
return <ResponseTime data={data} metric={metric} />
case FilterKey.SESSIONS_PER_BROWSER:
return <SessionsPerBrowser data={data} />
case FilterKey.SLOWEST_DOMAINS:
return <SlowestDomains data={data} />
case FilterKey.TIME_TO_RENDER:
return <TimeToRender data={data} metric={metric} />
default:
return <div className="h-40 color-red">Widget not supported</div>
}

2
frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
View file

@ -161,7 +161,7 @@ function LiveSessionList() {
<div>
Showing <span className="font-medium">{(currentPage - 1) * PER_PAGE + 1}</span> to{' '}
<span className="font-medium">{(currentPage - 1) * PER_PAGE + list.length}</span> of{' '}
<span className="font-medium">{numberWithCommas(total)}</span> sessions.
<span className="font-medium">{numberWithCommas(totalLiveSessions)}</span> sessions.
</div>
<Pagination
page={currentPage}

67
frontend/app/constants/card.ts
View file

@ -17,9 +17,6 @@ export const TABLE = 'table';
export const HEATMAP = 'heatMap';
export const FUNNEL = 'funnel';
export const ERRORS = 'errors';
export const PERFORMANCE = 'performance';
export const RESOURCE_MONITORING = 'resources';
export const WEB_VITALS = 'webVitals';
export const USER_PATH = 'pathAnalysis';
export const RETENTION = 'retention';
export const FEATURE_ADOPTION = 'featureAdoption';
@ -95,70 +92,6 @@ export const TYPES: CardType[] = [
},
],
},
{
title: 'Performance Tracking',
icon: 'speedometer2',
description: 'Uncover slowdowns and monitor CPU and memory consumption.',
slug: PERFORMANCE,
subTypes: [
{ title: 'CPU Load', slug: FilterKey.CPU, description: '' },
{ title: 'Crashes', slug: FilterKey.CRASHES, description: '' },
{ title: 'Frame Rate', slug: FilterKey.FPS, description: '' },
{ title: 'DOM Building Time', slug: FilterKey.PAGES_DOM_BUILD_TIME, description: '' },
{ title: 'Memory Consumption', slug: FilterKey.MEMORY_CONSUMPTION, description: '' },
{ title: 'Page Response Time', slug: FilterKey.PAGES_RESPONSE_TIME, description: '' },
{
title: 'Page Response Time Distribution',
slug: FilterKey.PAGES_RESPONSE_TIME_DISTRIBUTION,
description: '',
},
{ title: 'Sessions per Browser', slug: FilterKey.SESSIONS_PER_BROWSER, description: '' },
{ title: 'Slowest Domains', slug: FilterKey.SLOWEST_DOMAINS, description: '' },
{ title: 'Speed Index by Location', slug: FilterKey.SPEED_LOCATION, description: '' },
{ title: 'Time to Render', slug: FilterKey.TIME_TO_RENDER, description: '' },
{
title: 'Sessions Impacted by Slow Pages',
slug: FilterKey.IMPACTED_SESSIONS_BY_SLOW_PAGES,
description: '',
},
],
},
{
title: 'Web Vitals',
icon: 'activity',
description: 'Keep an eye on your web vitals and how they evolve over time.',
slug: WEB_VITALS,
subTypes: [
{ title: 'CPU Load', slug: FilterKey.AVG_CPU, description: '' },
{ title: 'DOM Content Loaded', slug: FilterKey.AVG_DOM_CONTENT_LOADED, description: '' },
{
title: 'DOM Content Loaded Start',
slug: FilterKey.AVG_DOM_CONTENT_LOAD_START,
description: '',
},
{
title: 'First Meaningful Paint',
slug: FilterKey.AVG_FIRST_CONTENTFUL_PIXEL,
description: '',
},
{ title: 'First Paint', slug: FilterKey.AVG_FIRST_PAINT, description: '' },
{ title: 'Frame Rate', slug: FilterKey.AVG_FPS, description: '' },
{ title: 'Image Load Time', slug: FilterKey.AVG_IMAGE_LOAD_TIME, description: '' },
{ title: 'Page Load Time', slug: FilterKey.AVG_PAGE_LOAD_TIME, description: '' },
{ title: 'DOM Build Time', slug: FilterKey.AVG_PAGES_DOM_BUILD_TIME, description: '' },
{ title: 'Pages Response Time', slug: FilterKey.AVG_PAGES_RESPONSE_TIME, description: '' },
{ title: 'Request Load Time', slug: FilterKey.AVG_REQUEST_LOADT_IME, description: '' },
{ title: 'Response Time ', slug: FilterKey.AVG_RESPONSE_TIME, description: '' },
{ title: 'Session Duration', slug: FilterKey.AVG_SESSION_DURATION, description: '' },
{ title: 'Time Till First Byte', slug: FilterKey.AVG_TILL_FIRST_BYTE, description: '' },
{ title: 'Time to be Interactive', slug: FilterKey.AVG_TIME_TO_INTERACTIVE, description: '' },
{ title: 'Time to Render', slug: FilterKey.AVG_TIME_TO_RENDER, description: '' },
{ title: 'JS Heap Size', slug: FilterKey.AVG_USED_JS_HEAP_SIZE, description: '' },
{ title: 'Visited Pages', slug: FilterKey.AVG_VISITED_PAGES, description: '' },
{ title: 'Captured Requests', slug: FilterKey.COUNT_REQUESTS, description: '' },
{ title: 'Captured Sessions', slug: FilterKey.COUNT_SESSIONS, description: '' },
],
},
{
title: 'Path Analysis',
icon: 'signpost-split',

1
frontend/app/layout/data.ts
View file

@ -46,7 +46,6 @@ export const enum MENU {
CARDS = 'cards',
FUNNELS = 'funnels',
ERROR_TRACKING = 'error-tracking',
RESOURCE_MONITORING = 'resource-monitoring',
ALERTS = 'alerts',
FEATURE_FLAGS = 'feature-flags',
USABILITY_TESTS = 'usability-tests',

6
frontend/app/mstore/metricStore.ts
View file

@ -8,9 +8,6 @@ import {
TABLE,
FUNNEL,
ERRORS,
RESOURCE_MONITORING,
PERFORMANCE,
WEB_VITALS,
INSIGHTS,
HEATMAP,
USER_PATH,
@ -156,9 +153,6 @@ export default class MetricStore {
}
if (
value === ERRORS ||
value === RESOURCE_MONITORING ||
value === PERFORMANCE ||
value === WEB_VITALS ||
value === HEATMAP
) {
obj['viewType'] = 'chart';

2
frontend/app/mstore/types/widget.ts
View file

@ -8,7 +8,7 @@ import {FilterKey} from 'Types/filter/filterType';
import Period, {LAST_24_HOURS} from 'Types/app/period';
import Funnel from '../types/funnel';
import {metricService} from 'App/services';
import { FUNNEL, HEATMAP, INSIGHTS, TABLE, USER_PATH, WEB_VITALS } from "App/constants/card";
import { FUNNEL, HEATMAP, INSIGHTS, TABLE, USER_PATH } from "App/constants/card";
import { ErrorInfo } from '../types/error';
import {getChartFormatter} from 'Types/dashboard/helper';
import FilterItem from './filterItem';