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

feat(ui): new timeseries cards in monitor tab with sessionsCount

Browse source
This commit is contained in:
Shekar Siri 2024-11-04 13:48:25 +01:00
parent a9acf01f61
commit 369adfc3f5
2 changed files with 81 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -53,6 +53,7 @@ export interface CardType {
data?: any;
height?: number;
isEnterprise?: boolean;
filters?: any;
}
export const CARD_LIST: CardType[] = [
@ -222,6 +223,74 @@ export const CARD_LIST: CardType[] = [
category: CARD_CATEGORIES[2].key,
example: ByFetch
},
{
title: 'Sessions with 4xx/5xx Requests',
key: TIMESERIES + '_4xx_requests',
cardType: TIMESERIES,
metricOf: 'sessionCount',
category: CARD_CATEGORY.ERROR_TRACKING,
data: {
chart: generateTimeSeriesData(),
label: 'Number of Sessions',
namesMap: [
'Series 1'
]
},
filters: [
{
"type": "fetch",
"isEvent": true,
"value": [],
"operator": "is",
"filters": [
{
"type": "fetchStatusCode",
"isEvent": false,
"value": [
"400"
],
"operator": ">=",
"filters": []
},
]
}
],
example: ExampleTrend
},
{
title: 'Sessions with Slow Network Requests',
key: TIMESERIES + '_slow_network_requests',
cardType: TIMESERIES,
metricOf: 'sessionCount',
category: CARD_CATEGORY.ERROR_TRACKING,
data: {
chart: generateTimeSeriesData(),
label: 'Number of Sessions',
namesMap: [
'Series 1'
]
},
filters: [
{
"type": "fetch",
"isEvent": true,
"value": [],
"operator": "is",
"filters": [
{
"type": "fetchDuration",
"isEvent": false,
"value": [
"5000"
],
"operator": ">=",
"filters": []
},
]
}
],
example: ExampleTrend
},
];
function generateTimeSeriesData(): any[] {

12
frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx
View file

@ -9,6 +9,7 @@ import CardsLibrary from 'Components/Dashboard/components/DashboardList/NewDashM
import { FUNNEL } from 'App/constants/card';
import { useHistory } from 'react-router';
import { FilterKey } from 'Types/filter/filterType';
import FilterSeries from '@/mstore/types/filterSeries';
interface SelectCardProps {
onClose: (refresh?: boolean) => void;
@ -65,6 +66,17 @@ const SelectCard: React.FC<SelectCardProps> = (props: SelectCardProps) => {
metricOf: selectedCard.metricOf
};
if (selectedCard.filters) {
cardData.series = [
new FilterSeries().fromJson({
name: "Series 1",
filter: {
filters: selectedCard.filters,
}
})
];
}
if (selectedCard.cardType === FUNNEL) {
cardData.series = [];
cardData.series.filter = [];