{
diff --git a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
index e62bf25ff..634aa9bae 100644
--- a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
+++ b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { QuestionMarkHint, Tooltip, Tabs, Input, NoContent, Icon, Toggler, Button } from 'UI';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Tooltip, Tabs, Input, NoContent, Icon, Toggler } from 'UI';
import { getRE } from 'App/utils';
import Resource, { TYPES } from 'Types/session/resource';
import { formatBytes } from 'App/utils';
@@ -12,6 +12,10 @@ import { Duration } from 'luxon';
import { connectPlayer, jump } from 'Player';
import { useModal } from 'App/components/Modal';
import FetchDetailsModal from 'Shared/FetchDetailsModal';
+import { useStore } from 'App/mstore';
+import { useObserver } from 'mobx-react-lite';
+
+const INDEX_KEY = 'network';
const ALL = 'ALL';
const XHR = 'xhr';
@@ -67,37 +71,6 @@ export function renderStart(r: any) {
);
}
-// const renderXHRText = () => (
-//
-// {XHR}
-//
-// Use our{' '}
-//
-// Fetch plugin
-//
-// {' to capture HTTP requests and responses, including status codes and bodies.'}
-// We also provide{' '}
-//
-// support for GraphQL
-//
-// {' for easy debugging of your queries.'}
-//
-// }
-// className="ml-1"
-// />
-//
-// );
-
function renderSize(r: any) {
if (r.responseBodySize) return formatBytes(r.responseBodySize);
let triggerText;
@@ -152,6 +125,9 @@ export function renderDuration(r: any) {
);
}
+let timeOut: any = null;
+const TIMEOUT_DURATION = 5000;
+
interface Props {
location: any;
resources: any;
@@ -160,58 +136,101 @@ interface Props {
loadTime: any;
playing: boolean;
domBuildingTime: any;
- currentIndex: any;
time: any;
}
function NetworkPanel(props: Props) {
- const {
- resources,
- time,
- currentIndex,
- domContentLoadedTime,
- loadTime,
- playing,
- domBuildingTime,
- fetchList,
- } = props;
- const { showModal, hideModal } = useModal();
- const [activeTab, setActiveTab] = useState(ALL);
- const [sortBy, setSortBy] = useState('time');
- const [sortAscending, setSortAscending] = useState(true);
- const [filter, setFilter] = useState('');
+ const { resources, time, domContentLoadedTime, loadTime, domBuildingTime, fetchList } = props;
+ const { showModal } = useModal();
+
+ const [filteredList, setFilteredList] = useState([]);
const [showOnlyErrors, setShowOnlyErrors] = useState(false);
- const [activeRequest, setActiveRequest] = useState(false )
- const onTabClick = (activeTab: any) => setActiveTab(activeTab);
- const onFilterChange = ({ target: { value } }: any) => setFilter(value);
+ const [isDetailsModalActive, setIsDetailsModalActive] = useState(false);
const additionalHeight = 0;
const fetchPresented = fetchList.length > 0;
+ const {
+ sessionStore: { devTools },
+ } = useStore();
+ // const [filter, setFilter] = useState(devTools[INDEX_KEY].filter);
+ // const [activeTab, setActiveTab] = useState(ALL);
+ const filter = useObserver(() => devTools[INDEX_KEY].filter);
+ const activeTab = useObserver(() => devTools[INDEX_KEY].activeTab);
+ const activeIndex = useObserver(() => devTools[INDEX_KEY].index);
+ const [pauseSync, setPauseSync] = useState(activeIndex > 0);
+ const synRef: any = useRef({});
- const resourcesSize = resources.reduce(
- (sum: any, { decodedBodySize }: any) => sum + (decodedBodySize || 0),
- 0
- );
+ const onTabClick = (activeTab: any) => devTools.update(INDEX_KEY, { activeTab });
+ const onFilterChange = ({ target: { value } }: any) => {
+ devTools.update(INDEX_KEY, { filter: value });
+ };
- const transferredSize = resources.reduce(
- (sum: any, { headerSize, encodedBodySize }: any) =>
- sum + (headerSize || 0) + (encodedBodySize || 0),
- 0
- );
+ synRef.current = {
+ pauseSync,
+ activeIndex,
+ };
- const filterRE = getRE(filter, 'i');
- let filtered = React.useMemo(() => {
+ const removePause = () => {
+ setIsDetailsModalActive(false);
+ clearTimeout(timeOut);
+ timeOut = setTimeout(() => {
+ devTools.update(INDEX_KEY, { index: getCurrentIndex() });
+ setPauseSync(false);
+ }, TIMEOUT_DURATION);
+ };
+
+ const onMouseLeave = () => {
+ if (isDetailsModalActive) return;
+ removePause();
+ };
+
+ useEffect(() => {
+ if (pauseSync) {
+ removePause();
+ }
+
+ return () => {
+ clearTimeout(timeOut);
+ if (!synRef.current.pauseSync) {
+ devTools.update(INDEX_KEY, { index: 0 });
+ }
+ };
+ }, []);
+
+ const getCurrentIndex = () => {
+ return filteredList.filter((item: any) => item.time <= time).length - 1;
+ };
+
+ useEffect(() => {
+ const currentIndex = getCurrentIndex();
+ if (currentIndex !== activeIndex && !pauseSync) {
+ devTools.update(INDEX_KEY, { index: currentIndex });
+ }
+ }, [time]);
+
+ const { resourcesSize, transferredSize } = useMemo(() => {
+ const resourcesSize = resources.reduce(
+ (sum: any, { decodedBodySize }: any) => sum + (decodedBodySize || 0),
+ 0
+ );
+
+ const transferredSize = resources.reduce(
+ (sum: any, { headerSize, encodedBodySize }: any) =>
+ sum + (headerSize || 0) + (encodedBodySize || 0),
+ 0
+ );
+ return {
+ resourcesSize,
+ transferredSize,
+ };
+ }, [resources]);
+
+ useEffect(() => {
+ const filterRE = getRE(filter, 'i');
let list = resources;
fetchList.forEach(
(fetchCall: any) =>
(list = list.filter((networkCall: any) => networkCall.url !== fetchCall.url))
);
list = list.concat(fetchList);
- list = list.sort((a: any, b: any) => {
- return compare(a, b, sortBy);
- });
-
- if (!sortAscending) {
- list = list.reverse();
- }
list = list.filter(
({ type, name, status, success }: any) =>
@@ -219,41 +238,53 @@ function NetworkPanel(props: Props) {
(activeTab === ALL || type === TAB_TO_TYPE_MAP[activeTab]) &&
(showOnlyErrors ? parseInt(status) >= 400 || !success : true)
);
- return list;
- }, [filter, sortBy, sortAscending, showOnlyErrors, activeTab]);
+ setFilteredList(list);
+ }, [resources, filter, showOnlyErrors, activeTab]);
- // const lastIndex = currentIndex || filtered.filter((item: any) => item.time <= time).length - 1;
- const referenceLines = [];
- if (domContentLoadedTime != null) {
- referenceLines.push({
- time: domContentLoadedTime.time,
- color: DOM_LOADED_TIME_COLOR,
- });
- }
- if (loadTime != null) {
- referenceLines.push({
- time: loadTime.time,
- color: LOAD_TIME_COLOR,
- });
- }
+ const referenceLines = useMemo(() => {
+ const arr = [];
- const onRowClick = (row: any) => {
- showModal(
, {
- right: true,
- });
- };
-
- const handleSort = (sortKey: string) => {
- if (sortKey === sortBy) {
- setSortAscending(!sortAscending);
- // setSortBy('time');
+ if (domContentLoadedTime != null) {
+ arr.push({
+ time: domContentLoadedTime.time,
+ color: DOM_LOADED_TIME_COLOR,
+ });
}
- setSortBy(sortKey);
+ if (loadTime != null) {
+ arr.push({
+ time: loadTime.time,
+ color: LOAD_TIME_COLOR,
+ });
+ }
+
+ return arr;
+ }, []);
+
+ const showDetailsModal = (row: any) => {
+ setIsDetailsModalActive(true);
+ showModal(
+
,
+ {
+ right: true,
+ onClose: removePause,
+ }
+ );
+ devTools.update(INDEX_KEY, { index: filteredList.indexOf(row) });
+ setPauseSync(true);
};
+ useEffect(() => {
+ devTools.update(INDEX_KEY, { filter, activeTab });
+ }, [filter, activeTab]);
+
return (
-
+ setPauseSync(true)}
+ onMouseLeave={onMouseLeave}
+ >
Network
@@ -274,6 +305,7 @@ function NetworkPanel(props: Props) {
onChange={onFilterChange}
height={28}
width={230}
+ value={filter}
/>
@@ -287,7 +319,7 @@ function NetworkPanel(props: Props) {
/>
-
+
}
size="small"
- show={filtered.length === 0}
+ show={filteredList.length === 0}
>
{
+ setPauseSync(true);
+ devTools.update(INDEX_KEY, { index: filteredList.indexOf(row) });
+ jump(row.time);
+ }}
+ activeIndex={activeIndex}
>
{[
// {
@@ -348,28 +382,24 @@ function NetworkPanel(props: Props) {
label: 'Status',
dataKey: 'status',
width: 70,
- onClick: handleSort,
},
{
label: 'Type',
dataKey: 'type',
width: 90,
render: renderType,
- onClick: handleSort,
},
{
label: 'Name',
width: 240,
dataKey: 'name',
render: renderName,
- onClick: handleSort,
},
{
label: 'Size',
width: 80,
dataKey: 'decodedBodySize',
render: renderSize,
- onClick: handleSort,
hidden: activeTab === XHR,
},
{
@@ -377,7 +407,6 @@ function NetworkPanel(props: Props) {
width: 80,
dataKey: 'duration',
render: renderDuration,
- onClick: handleSort,
},
]}
@@ -391,9 +420,12 @@ function NetworkPanel(props: Props) {
export default connectPlayer((state: any) => ({
location: state.location,
resources: state.resourceList,
- fetchList: state.fetchList.map((i: any) => Resource({ ...i.toJS(), type: TYPES.XHR })),
+ fetchList: state.fetchList.map((i: any) =>
+ Resource({ ...i.toJS(), type: TYPES.XHR, time: i.time < 0 ? 0 : i.time })
+ ),
domContentLoadedTime: state.domContentLoadedTime,
loadTime: state.loadTime,
+ time: state.time,
playing: state.playing,
domBuildingTime: state.domBuildingTime,
}))(NetworkPanel);
diff --git a/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx b/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx
new file mode 100644
index 000000000..557c72172
--- /dev/null
+++ b/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx
@@ -0,0 +1,203 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { hideHint } from 'Duck/components/player';
+import { Tooltip, Tabs, Input, NoContent, Icon, Toggler } from 'UI';
+import { getRE } from 'App/utils';
+import { List, CellMeasurer, CellMeasurerCache, AutoSizer } from 'react-virtualized';
+
+import BottomBlock from '../BottomBlock';
+import { connectPlayer, jump } from 'Player';
+import { useModal } from 'App/components/Modal';
+import { useStore } from 'App/mstore';
+import { useObserver } from 'mobx-react-lite';
+import { DATADOG, SENTRY, STACKDRIVER, typeList } from 'Types/session/stackEvent';
+import { connect } from 'react-redux';
+import StackEventRow from 'Shared/DevTools/StackEventRow';
+import StackEventModal from '../StackEventModal';
+
+let timeOut: any = null;
+const TIMEOUT_DURATION = 5000;
+const INDEX_KEY = 'stackEvent';
+const ALL = 'ALL';
+const TABS = [ALL, ...typeList].map((tab) => ({ text: tab, key: tab }));
+
+interface Props {
+ list: any;
+ hideHint: any;
+ time: any;
+}
+function StackEventPanel(props: Props) {
+ const { list, time } = props;
+ const additionalHeight = 0;
+ const {
+ sessionStore: { devTools },
+ } = useStore();
+ const { showModal } = useModal();
+ const [isDetailsModalActive, setIsDetailsModalActive] = useState(false);
+ const [filteredList, setFilteredList] = useState([]);
+ const filter = useObserver(() => devTools[INDEX_KEY].filter);
+ const activeTab = useObserver(() => devTools[INDEX_KEY].activeTab);
+ const activeIndex = useObserver(() => devTools[INDEX_KEY].index);
+ const [pauseSync, setPauseSync] = useState(activeIndex > 0);
+ const synRef: any = useRef({});
+ synRef.current = {
+ pauseSync,
+ activeIndex,
+ };
+ const _list = React.useRef();
+
+ const onTabClick = (activeTab: any) => devTools.update(INDEX_KEY, { activeTab });
+ const onFilterChange = ({ target: { value } }: any) => {
+ devTools.update(INDEX_KEY, { filter: value });
+ };
+
+ const getCurrentIndex = () => {
+ return filteredList.filter((item: any) => item.time <= time).length - 1;
+ };
+
+ const removePause = () => {
+ clearTimeout(timeOut);
+ setIsDetailsModalActive(false);
+ timeOut = setTimeout(() => {
+ devTools.update(INDEX_KEY, { index: getCurrentIndex() });
+ setPauseSync(false);
+ }, TIMEOUT_DURATION);
+ };
+
+ useEffect(() => {
+ const currentIndex = getCurrentIndex();
+ if (currentIndex !== activeIndex && !pauseSync) {
+ devTools.update(INDEX_KEY, { index: currentIndex });
+ }
+ }, [time]);
+
+ const onMouseLeave = () => {
+ if (isDetailsModalActive) return;
+ removePause();
+ };
+
+ React.useMemo(() => {
+ const filterRE = getRE(filter, 'i');
+ let list = props.list;
+
+ list = list.filter(
+ ({ name, source }: any) =>
+ (!!filter ? filterRE.test(name) : true) && (activeTab === ALL || activeTab === source)
+ );
+
+ setFilteredList(list);
+ }, [filter, activeTab]);
+
+ const tabs = useMemo(() => {
+ return TABS.filter(({ key }) => key === ALL || list.some(({ source }: any) => key === source));
+ }, []);
+
+ const cache = new CellMeasurerCache({
+ fixedWidth: true,
+ keyMapper: (index: number) => filteredList[index],
+ });
+
+ const showDetails = (item: any) => {
+ setIsDetailsModalActive(true);
+ showModal(, { right: true, onClose: removePause });
+ devTools.update(INDEX_KEY, { index: filteredList.indexOf(item) });
+ setPauseSync(true);
+ };
+
+ const _rowRenderer = ({ index, key, parent, style }: any) => {
+ const item = filteredList[index];
+
+ return (
+ // @ts-ignore
+
+ {() => (
+ {
+ setPauseSync(true);
+ devTools.update(INDEX_KEY, { index: filteredList.indexOf(item) });
+ jump(item.time);
+ }}
+ onClick={() => showDetails(item)}
+ />
+ )}
+
+ );
+ };
+
+ useEffect(() => {
+ if (_list.current) {
+ // @ts-ignore
+ _list.current.scrollToRow(activeIndex);
+ }
+ }, [activeIndex]);
+
+ return (
+ setPauseSync(true)}
+ onMouseLeave={onMouseLeave}
+ >
+
+
+ Stack Events
+
+
+
+
+
+
+
+ No Data
+