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

Merge pull request #843 from openreplay/ui-fixes-network

Browse source 
UI fixes devtools, audit sort etc.,
This commit is contained in:
Shekar Siri 2022-11-28 16:48:38 +01:00 • committed by GitHub
commit db7313de62
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 37 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/Client/Audit/AuditView/AuditView.tsx
View file

@ -46,7 +46,7 @@ function AuditView(props) {
]}
defaultValue={order}
plain
onChange={({ value }) => auditStore.updateKey('order', value)}
onChange={({ value }) => auditStore.updateKey('order', value.value)}
/>
</div>
<AuditSearchField onChange={(value) => auditStore.updateKey('searchQuery', value) }/>

2
frontend/app/components/Session_/Player/Controls/components/ReadNote.tsx
View file

@ -67,7 +67,7 @@ function ReadNote(props: Props) {
<Icon name="close" size={18} />
</div>
</div>
<div className="text-xl py-3 overflow-y-scroll capitalize-first" style={{ maxHeight: 400 }}>
<div className="text-xl py-3 overflow-y-auto capitalize-first" style={{ maxHeight: 400 }}>
{props.note.message}
</div>
<div className="w-full">

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

@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
import cn from 'classnames';
import { connect } from 'react-redux';
import { withRouter, RouteComponentProps } from 'react-router-dom';
import { Button, Link } from 'UI';
import { Button, Link, Icon } from 'UI';
import { session as sessionRoute, withSiteId } from 'App/routes';
import stl from './AutoplayTimer.module.css';
import clsOv from './overlay.module.css';
@ -51,7 +51,9 @@ function AutoplayTimer({ nextId, siteId, history }: IProps) {
<Button variant="primary">Play Now</Button>
</Link>
</div>
<div className="mt-2 italic">Turn on/off auto-replay in: More options</div>
<div className="mt-2 flex items-center">
<span className="color-gray-medium">Turn on/off auto-replay in <Icon name="ellipsis-v" className="mx-2" /> More options</span>
</div>
</div>
</div>
);

50
frontend/app/components/Session_/components/HeaderMenu.tsx
View file

@ -1,5 +1,5 @@
import React from 'react';
import { Icon } from 'UI';
import { Icon, Button } from 'UI';
import styles from './menu.module.css';
import cn from 'classnames';
import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
@ -32,8 +32,8 @@ export default class ItemMenu extends React.PureComponent<Props> {
};
closeMenu = () => {
this.setState({ displayed: false })
}
this.setState({ displayed: false });
};
render() {
const { items } = this.props;
@ -42,36 +42,22 @@ export default class ItemMenu extends React.PureComponent<Props> {
return (
<div className={styles.wrapper}>
<OutsideClickDetectingDiv onClickOutside={this.closeMenu}>
<div
onClick={this.toggleMenu}
className={cn(
'flex items-center cursor-pointer select-none',
'rounded p-2', displayed ? 'bg-gray-light' : 'hover:bg-gray-light-shade'
)}
>
<div
className={cn('rounded-full flex items-center justify-center', {
'bg-gray-light': displayed,
})}
role="button"
>
<Icon name="ellipsis-v" size="16" />
<Button variant="text" icon="ellipsis-v" onClick={this.toggleMenu}>
More
</Button>
<div className={cn(styles.menu, styles.menuDim)} data-displayed={displayed}>
{items.map((item) =>
item.component ? (
<div
key={item.key}
role="menuitem"
className="hover:bg-gray-light-shade cursor-pointer flex items-center w-full"
>
{item.component}
</div>
) : null
)}
</div>
<span className={'mr-1 text-disabled-text'}>More</span>
</div>
<div className={cn(styles.menu, styles.menuDim)} data-displayed={displayed}>
{items.map((item) =>
item.component ? (
<div
key={item.key}
role="menuitem"
className="hover:bg-gray-light-shade cursor-pointer flex items-center w-full"
>
{item.component}
</div>
) : null
)}
</div>
</OutsideClickDetectingDiv>
</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);

12
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(() => {

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);

2
frontend/app/svg/icons/quotes.svg
View file

@ -1,3 +1,3 @@
<svg viewBox="0 0 29 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg viewBox="0 0 29 19" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.7" d="M11.6355 2.9045C10.8963 1.75328 9.80334 0.873101 8.521 0.396241C7.23867 -0.0806184 5.83621 -0.128393 4.5244 0.260101C3.21259 0.648595 2.06231 1.45237 1.24645 2.55061C0.430585 3.64885 -0.00678382 4.98223 7.95597e-05 6.35034C0.00076002 7.48328 0.305669 8.59524 0.882952 9.57006C1.46024 10.5449 2.28871 11.3468 3.28182 11.892C4.27493 12.4372 5.39624 12.7058 6.52859 12.6695C7.66095 12.6333 8.76279 12.2937 9.71903 11.6861C9.22188 13.1623 8.29591 14.7372 6.77033 16.316C6.47844 16.6179 6.31846 17.0234 6.32558 17.4433C6.3327 17.8632 6.50633 18.2631 6.80828 18.555C7.11022 18.8469 7.51575 19.0069 7.93566 18.9997C8.35556 18.9926 8.75543 18.819 9.04731 18.517C14.6867 12.6728 13.9542 6.31998 11.6355 2.91209V2.9045ZM26.8154 2.9045C26.0762 1.75328 24.9833 0.873101 23.7009 0.396241C22.4186 -0.0806184 21.0161 -0.128393 19.7043 0.260101C18.3925 0.648595 17.2422 1.45237 16.4264 2.55061C15.6105 3.64885 15.1731 4.98223 15.18 6.35034C15.1807 7.48328 15.4856 8.59524 16.0629 9.57006C16.6402 10.5449 17.4686 11.3468 18.4617 11.892C19.4549 12.4372 20.5762 12.7058 21.7085 12.6695C22.8409 12.6333 23.9427 12.2937 24.899 11.6861C24.4018 13.1623 23.4758 14.7372 21.9503 16.316C21.6584 16.6179 21.4984 17.0234 21.5055 17.4433C21.5126 17.8632 21.6863 18.2631 21.9882 18.555C22.2901 18.8469 22.6957 19.0069 23.1156 18.9997C23.5355 18.9926 23.9354 18.819 24.2272 18.517C29.8666 12.6728 29.1342 6.31998 26.8154 2.91209V2.9045Z" />
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB