diff --git a/frontend/dashboard/app/api/api_calls.ts b/frontend/dashboard/app/api/api_calls.ts index f7501ed0f..455a71797 100644 --- a/frontend/dashboard/app/api/api_calls.ts +++ b/frontend/dashboard/app/api/api_calls.ts @@ -635,6 +635,14 @@ export const emptySessionReplay = { "timestamp": "" } ], + "memory_usage_absolute": [ + { + "max_memory": 0, + "used_memory": 0, + "interval": 0, + "timestamp": "" + } + ], "session_id": "", "threads": { "main": [ @@ -1622,4 +1630,4 @@ export const fetchUsageFromServer = async (teamId: string, router: AppRouterInst } catch { return { status: FetchUsageApiStatus.Cancelled, data: null } } -} \ No newline at end of file +} diff --git a/frontend/dashboard/app/components/session_replay.tsx b/frontend/dashboard/app/components/session_replay.tsx index 1c6e32b5a..6b9a9c176 100644 --- a/frontend/dashboard/app/components/session_replay.tsx +++ b/frontend/dashboard/app/components/session_replay.tsx @@ -141,6 +141,27 @@ const SessionReplay: React.FC = ({ teamId, appId, sessionRep } ] : null + const memoryAbsData = sessionReplay.memory_usage_absolute != null ? [ + { + id: 'Max Memory', + data: sessionReplay.memory_usage_absolute + .filter(item => isWithinEventTimeRange(item.timestamp)) + .map(item => ({ + x: formatTimestampToChartFormat(item.timestamp), + y: item.max_memory + })) + }, + { + id: 'Used Memory', + data: sessionReplay.memory_usage_absolute + .filter(item => isWithinEventTimeRange(item.timestamp)) + .map(item => ({ + x: formatTimestampToChartFormat(item.timestamp), + y: item.used_memory + })) + }, + ] : null + const seekBarIndicatorOffset = 90 const [seekBarValue, setSeekBarValue] = useState(0) const eventRefs = useRef<(HTMLDivElement | null)[]>([]) @@ -242,7 +263,7 @@ const SessionReplay: React.FC = ({ teamId, appId, sessionRep return (
{/* Graphs container */} - {(cpuData != null || memoryData != null) && + {(cpuData != null || memoryData != null || memoryAbsData != null) &&
@@ -281,7 +302,62 @@ const SessionReplay: React.FC = ({ teamId, appId, sessionRep tickSize: 1, tickPadding: 5, tickValues: 5, - legend: 'Memory in MB', + legend: 'Memory in KB', + legendOffset: -80, + legendPosition: 'middle' + }} + colors={{ scheme: 'nivo' }} + tooltip={({ point }) => { + return ( +
+
+
+

Time: {formatChartFormatTimestampToHumanReadable(point.data.xFormatted.toString())}

+
+

{point.serieId}: {point.data.y.toString()} KB

+
+
+ ) + }} + /> +
+ } + {/* Memory Absolute line */} + {memoryAbsData != null && +
+ = ({ teamId, appId, sessionRep

Time: {formatChartFormatTimestampToHumanReadable(point.data.xFormatted.toString())}

-

{point.serieId}: {point.data.y.toString()} MB

+

{point.serieId}: {point.data.y.toString()} KB

) @@ -400,4 +476,4 @@ const SessionReplay: React.FC = ({ teamId, appId, sessionRep ) } -export default SessionReplay \ No newline at end of file +export default SessionReplay