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

fix(ui) - dev tools sync check

Browse source
This commit is contained in:
Shekar Siri 2022-11-28 16:23:07 +01:00
parent f31ee245e2
commit aa52f3c6fb
4 changed files with 14 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/app/components/Session_/Player/Overlay/AutoplayTimer.tsx
View file

@ -52,8 +52,7 @@ function AutoplayTimer({ nextId, siteId, history }: IProps) {
</Link>
</div>
<div className="mt-2 flex items-center">
<Icon name="ellipsis-v" className="mr-2" />
<span className="color-gray-medium">Turn on/off auto-replay in: More options</span>
<span className="color-gray-medium">Turn on/off auto-replay in <Icon name="ellipsis-v" className="mx-2" /> More options</span>
</div>
</div>
</div>

8
frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx
View file

@ -72,14 +72,13 @@ function ConsolePanel(props: Props) {
const {
sessionStore: { devTools },
} = useStore();
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({});
const { showModal } = useModal();
const { showModal, component: modalActive } = useModal();
const onTabClick = (activeTab: any) => devTools.update(INDEX_KEY, { activeTab });
const onFilterChange = ({ target: { value } }: any) => {
@ -92,7 +91,7 @@ function ConsolePanel(props: Props) {
};
const removePause = () => {
setIsDetailsModalActive(false);
if (!!modalActive) return;
clearTimeout(timeOut);
timeOut = setTimeout(() => {
devTools.update(INDEX_KEY, { index: getCurrentIndex() });
@ -101,7 +100,6 @@ function ConsolePanel(props: Props) {
};
const onMouseLeave = () => {
if (isDetailsModalActive) return;
removePause();
};
@ -136,7 +134,7 @@ function ConsolePanel(props: Props) {
const _list = React.useRef();
const showDetails = (log: any) => {
setIsDetailsModalActive(true);
clearTimeout(timeOut);
showModal(<ErrorDetailsModal errorId={log.errorId} />, { right: true, onClose: removePause });
devTools.update(INDEX_KEY, { index: filteredList.indexOf(log) });
setPauseSync(true);

13
frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
View file

@ -140,11 +140,9 @@ interface Props {
}
function NetworkPanel(props: Props) {
const { resources, time, domContentLoadedTime, loadTime, domBuildingTime, fetchList } = props;
const { showModal } = useModal();
const { showModal, component: modalActive } = useModal();
const [filteredList, setFilteredList] = useState([]);
const [showOnlyErrors, setShowOnlyErrors] = useState(false);
const [isDetailsModalActive, setIsDetailsModalActive] = useState(false);
const additionalHeight = 0;
const fetchPresented = fetchList.length > 0;
const {
@ -169,7 +167,7 @@ function NetworkPanel(props: Props) {
};
const removePause = () => {
setIsDetailsModalActive(false);
if (!!modalActive) return;
clearTimeout(timeOut);
timeOut = setTimeout(() => {
devTools.update(INDEX_KEY, { index: getCurrentIndex() });
@ -178,7 +176,7 @@ function NetworkPanel(props: Props) {
};
const onMouseLeave = () => {
if (isDetailsModalActive) return;
if (!!modalActive) return;
removePause();
};
@ -261,7 +259,8 @@ function NetworkPanel(props: Props) {
}, []);
const showDetailsModal = (row: any) => {
setIsDetailsModalActive(true);
clearTimeout(timeOut);
setPauseSync(true);
showModal(
<FetchDetailsModal resource={row} rows={filteredList} fetchPresented={fetchPresented} />,
{
@ -270,7 +269,6 @@ function NetworkPanel(props: Props) {
}
);
devTools.update(INDEX_KEY, { index: filteredList.indexOf(row) });
setPauseSync(true);
};
useEffect(() => {
@ -296,6 +294,7 @@ function NetworkPanel(props: Props) {
border={false}
/>
</div>
{pauseSync && <div>pause</div>}
<Input
className="input-small"
placeholder="Filter by name, type or value"

10
frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx
View file

@ -1,6 +1,6 @@
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { hideHint } from 'Duck/components/player';
import { Tooltip, Tabs, Input, NoContent, Icon, Toggler } from 'UI';
import { Tabs, Input, NoContent, Icon } from 'UI';
import { getRE } from 'App/utils';
import { List, CellMeasurer, CellMeasurerCache, AutoSizer } from 'react-virtualized';
@ -31,8 +31,7 @@ function StackEventPanel(props: Props) {
const {
sessionStore: { devTools },
} = useStore();
const { showModal } = useModal();
const [isDetailsModalActive, setIsDetailsModalActive] = useState(false);
const { showModal, component: modalActive } = useModal();
const [filteredList, setFilteredList] = useState([]);
const filter = useObserver(() => devTools[INDEX_KEY].filter);
const activeTab = useObserver(() => devTools[INDEX_KEY].activeTab);
@ -55,8 +54,8 @@ function StackEventPanel(props: Props) {
};
const removePause = () => {
if (!!modalActive) return;
clearTimeout(timeOut);
setIsDetailsModalActive(false);
timeOut = setTimeout(() => {
devTools.update(INDEX_KEY, { index: getCurrentIndex() });
setPauseSync(false);
@ -71,7 +70,6 @@ function StackEventPanel(props: Props) {
}, [time]);
const onMouseLeave = () => {
if (isDetailsModalActive) return;
removePause();
};
@ -97,7 +95,7 @@ function StackEventPanel(props: Props) {
});
const showDetails = (item: any) => {
setIsDetailsModalActive(true);
clearTimeout(timeOut);
showModal(<StackEventModal event={item} />, { right: true, onClose: removePause });
devTools.update(INDEX_KEY, { index: filteredList.indexOf(item) });
setPauseSync(true);