fix ui: remove dead code
This commit is contained in:
nick-delirium
parent
18e694d6e4
commit
1434e937ab
9 changed files with 5 additions and 405 deletions
3
frontend/.unimportedrc.json
Normal file
3
frontend/.unimportedrc.json
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"entry": ["./app/initialize.tsx"]
|
||||||
|
}
|
||||||
|
|
@ -10,9 +10,6 @@ import AuditView from './Audit/AuditView';
|
||||||
import Sites from './Sites';
|
import Sites from './Sites';
|
||||||
import CustomFields from './CustomFields';
|
import CustomFields from './CustomFields';
|
||||||
import Webhooks from './Webhooks';
|
import Webhooks from './Webhooks';
|
||||||
import styles from './client.module.css';
|
|
||||||
import cn from 'classnames';
|
|
||||||
import PreferencesMenu from './PreferencesMenu';
|
|
||||||
import Notifications from './Notifications';
|
import Notifications from './Notifications';
|
||||||
import Roles from './Roles';
|
import Roles from './Roles';
|
||||||
import SessionsListingSettings from 'Components/Client/SessionsListingSettings';
|
import SessionsListingSettings from 'Components/Client/SessionsListingSettings';
|
||||||
|
|
|
||||||
|
|
@ -1,180 +0,0 @@
|
||||||
import { error as errorRoute } from 'App/routes';
|
|
||||||
import JsonViewer from 'Components/Session_/StackEvents/UserEvent/JsonViewer';
|
|
||||||
import Sentry from 'Components/Session_/StackEvents/UserEvent/Sentry';
|
|
||||||
import { hideHint } from 'Duck/components/player';
|
|
||||||
import withEnumToggle from 'HOCs/withEnumToggle';
|
|
||||||
import { connectPlayer, jump } from 'Player';
|
|
||||||
import React from 'react';
|
|
||||||
import { connect } from 'react-redux';
|
|
||||||
import StackEventRow from 'Shared/DevTools/StackEventRow';
|
|
||||||
import { DATADOG, SENTRY, STACKDRIVER, typeList } from 'Types/session/stackEvent';
|
|
||||||
import { NoContent, SlideModal, Tabs, Link } from 'UI';
|
|
||||||
import Autoscroll from '../Autoscroll';
|
|
||||||
import BottomBlock from '../BottomBlock';
|
|
||||||
|
|
||||||
const ALL = 'ALL';
|
|
||||||
|
|
||||||
const TABS = [ALL, ...typeList].map((tab) => ({ text: tab, key: tab }));
|
|
||||||
|
|
||||||
@withEnumToggle('activeTab', 'setActiveTab', ALL)
|
|
||||||
@connectPlayer((state) => ({
|
|
||||||
stackEvents: state.stackList,
|
|
||||||
// stackEventsNow: state.stackListNow,
|
|
||||||
}))
|
|
||||||
@connect(
|
|
||||||
(state) => ({
|
|
||||||
hintIsHidden:
|
|
||||||
state.getIn(['components', 'player', 'hiddenHints', 'stack']) ||
|
|
||||||
!state.getIn(['site', 'list']).some((s) => s.stackIntegrations),
|
|
||||||
}),
|
|
||||||
{
|
|
||||||
hideHint,
|
|
||||||
}
|
|
||||||
)
|
|
||||||
export default class StackEvents extends React.PureComponent {
|
|
||||||
// onFilterChange = (e, { value }) => this.setState({ filter: value })
|
|
||||||
|
|
||||||
state = {
|
|
||||||
currentEvent: null,
|
|
||||||
};
|
|
||||||
|
|
||||||
onDetailsClick(userEvent) {
|
|
||||||
this.setState({ currentEvent: userEvent });
|
|
||||||
}
|
|
||||||
|
|
||||||
closeModal() {
|
|
||||||
this.setState({ currentEvent: undefined });
|
|
||||||
}
|
|
||||||
|
|
||||||
renderPopupContent(userEvent) {
|
|
||||||
const { source, payload, name } = userEvent;
|
|
||||||
switch (source) {
|
|
||||||
case SENTRY:
|
|
||||||
return <Sentry event={payload} />;
|
|
||||||
case DATADOG:
|
|
||||||
return <JsonViewer title={name} data={payload} icon="integrations/datadog" />;
|
|
||||||
case STACKDRIVER:
|
|
||||||
return <JsonViewer title={name} data={payload} icon="integrations/stackdriver" />;
|
|
||||||
default:
|
|
||||||
return <JsonViewer title={name} data={payload} icon={`integrations/${source}`} />;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { stackEvents, activeTab, setActiveTab, hintIsHidden } = this.props;
|
|
||||||
//const filterRE = new RegExp(filter, 'i');
|
|
||||||
const { currentEvent } = this.state;
|
|
||||||
|
|
||||||
const tabs = TABS.filter(
|
|
||||||
({ key }) => key === ALL || stackEvents.some(({ source }) => key === source)
|
|
||||||
);
|
|
||||||
|
|
||||||
const filteredStackEvents = stackEvents.filter(
|
|
||||||
({ source }) => activeTab === ALL || activeTab === source
|
|
||||||
);
|
|
||||||
|
|
||||||
// let lastIndex = -1;
|
|
||||||
// // TODO: Need to do filtering in store, or preferably in a selector
|
|
||||||
// filteredStackEvents.forEach((item, index) => {
|
|
||||||
// if (
|
|
||||||
// this.props.stackEventsNow.length > 0 &&
|
|
||||||
// item.time <= this.props.stackEventsNow[this.props.stackEventsNow.length - 1].time
|
|
||||||
// ) {
|
|
||||||
// lastIndex = index;
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<SlideModal
|
|
||||||
title={
|
|
||||||
currentEvent && (
|
|
||||||
<div className="mb-4">
|
|
||||||
<div className="text-xl mb-2">
|
|
||||||
<Link to={errorRoute(currentEvent.errorId)}>
|
|
||||||
<span className="font-bold">{currentEvent.name}</span>
|
|
||||||
</Link>
|
|
||||||
<span className="ml-2 text-sm color-gray-medium">{currentEvent.function}</span>
|
|
||||||
</div>
|
|
||||||
<div>{currentEvent.message}</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
isDisplayed={currentEvent != null}
|
|
||||||
content={
|
|
||||||
currentEvent && <div className="px-4">{this.renderPopupContent(currentEvent)}</div>
|
|
||||||
}
|
|
||||||
onClose={this.closeModal.bind(this)}
|
|
||||||
/>
|
|
||||||
<BottomBlock>
|
|
||||||
<BottomBlock.Header>
|
|
||||||
<div className="flex items-center">
|
|
||||||
<span className="font-semibold color-gray-medium mr-4">Events</span>
|
|
||||||
<Tabs
|
|
||||||
className="uppercase"
|
|
||||||
tabs={tabs}
|
|
||||||
active={activeTab}
|
|
||||||
onClick={setActiveTab}
|
|
||||||
border={false}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</BottomBlock.Header>
|
|
||||||
<BottomBlock.Content>
|
|
||||||
<NoContent
|
|
||||||
title="Nothing to display yet"
|
|
||||||
subtext={
|
|
||||||
!hintIsHidden ? (
|
|
||||||
<>
|
|
||||||
<a
|
|
||||||
className="underline color-teal"
|
|
||||||
href="https://docs.openreplay.com/integrations"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
Integrations
|
|
||||||
</a>
|
|
||||||
{' and '}
|
|
||||||
<a
|
|
||||||
className="underline color-teal"
|
|
||||||
href="https://docs.openreplay.com/installation/custom-events"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
Events
|
|
||||||
</a>
|
|
||||||
{
|
|
||||||
' make debugging easier. Sync your backend logs and custom events with session replay.'
|
|
||||||
}
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
<button className="color-teal" onClick={() => this.props.hideHint('stack')}>
|
|
||||||
Got It!
|
|
||||||
</button>
|
|
||||||
</>
|
|
||||||
) : null
|
|
||||||
}
|
|
||||||
size="small"
|
|
||||||
show={filteredStackEvents.length === 0}
|
|
||||||
>
|
|
||||||
<Autoscroll>
|
|
||||||
{filteredStackEvents.map((userEvent, index) => (
|
|
||||||
<StackEventRow
|
|
||||||
key={userEvent.key}
|
|
||||||
event={userEvent}
|
|
||||||
onJump={() => jump(userEvent.time)}
|
|
||||||
/>
|
|
||||||
// <UserEvent
|
|
||||||
// key={userEvent.key}
|
|
||||||
// onDetailsClick={this.onDetailsClick.bind(this)}
|
|
||||||
// // inactive={index > lastIndex}
|
|
||||||
// // selected={lastIndex === index}
|
|
||||||
// userEvent={userEvent}
|
|
||||||
// onJump={() => jump(userEvent.time)}
|
|
||||||
// />
|
|
||||||
))}
|
|
||||||
</Autoscroll>
|
|
||||||
</NoContent>
|
|
||||||
</BottomBlock.Content>
|
|
||||||
</BottomBlock>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,62 +0,0 @@
|
||||||
import { HTML5Backend } from 'react-dnd-html5-backend';
|
|
||||||
import { findDOMNode } from 'react-dom';
|
|
||||||
import { DragSource, DropTarget, DndContext } from 'react-dnd';
|
|
||||||
|
|
||||||
const cardSource = {
|
|
||||||
beginDrag(props) {
|
|
||||||
return {
|
|
||||||
id: props.key,
|
|
||||||
index: props.index,
|
|
||||||
prevIndex: props.index,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const cardTarget = {
|
|
||||||
// eslint-disable-next-line complexity
|
|
||||||
hover(props, monitor, component) {
|
|
||||||
const dragIndex = monitor.getItem().index;
|
|
||||||
const hoverIndex = props.index;
|
|
||||||
|
|
||||||
if (dragIndex === hoverIndex) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
/* eslint-disable react/no-find-dom-node */
|
|
||||||
const hoverBoundingRect = findDOMNode(component).getBoundingClientRect();
|
|
||||||
const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
|
|
||||||
const clientOffset = monitor.getClientOffset();
|
|
||||||
const hoverClientY = clientOffset.y - hoverBoundingRect.top;
|
|
||||||
|
|
||||||
// Dragging downwards
|
|
||||||
if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Dragging upwards
|
|
||||||
if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
props.onDNDMove(dragIndex, hoverIndex);
|
|
||||||
monitor.getItem().index = hoverIndex;
|
|
||||||
},
|
|
||||||
|
|
||||||
drop(props, monitor) {
|
|
||||||
const dragIndex = monitor.getItem().prevIndex;
|
|
||||||
const dropIndex = props.index;
|
|
||||||
if (props.onDNDDrop) {
|
|
||||||
props.onDNDDrop(dragIndex, dropIndex);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export const DNDContext = DndContext(HTML5Backend);
|
|
||||||
|
|
||||||
export const DNDSource = name => DragSource(name, cardSource, (connect, monitor) => ({
|
|
||||||
connectDragSource: connect.dragSource(),
|
|
||||||
isDragging: monitor.isDragging(),
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const DNDTarget = name => DropTarget(name, cardTarget, connect => ({
|
|
||||||
connectDropTarget: connect.dropTarget(),
|
|
||||||
}));
|
|
||||||
|
|
@ -1,67 +0,0 @@
|
||||||
import React, { useState } from 'react';
|
|
||||||
import { Drawer, DrawerProps } from 'antd';
|
|
||||||
|
|
||||||
|
|
||||||
interface ExtendedDrawerProps extends DrawerProps {
|
|
||||||
visible: boolean;
|
|
||||||
onClose: any;
|
|
||||||
}
|
|
||||||
|
|
||||||
const DrawerComponent: React.FC<ExtendedDrawerProps> = ({
|
|
||||||
visible,
|
|
||||||
onClose,
|
|
||||||
title,
|
|
||||||
placement,
|
|
||||||
children
|
|
||||||
}) => {
|
|
||||||
return (
|
|
||||||
<Drawer
|
|
||||||
visible={visible}
|
|
||||||
onClose={onClose}
|
|
||||||
destroyOnClose
|
|
||||||
width={400}
|
|
||||||
maskClosable={false}
|
|
||||||
title={title}
|
|
||||||
placement={placement}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</Drawer>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const useDrawer = () => {
|
|
||||||
const [visible, setVisible] = useState(false);
|
|
||||||
const [content, setContent] = useState<React.ReactNode>(null);
|
|
||||||
const [drawerProps, setDrawerProps] = useState<DrawerProps>({
|
|
||||||
title: '',
|
|
||||||
children: null,
|
|
||||||
placement: 'right'
|
|
||||||
});
|
|
||||||
|
|
||||||
const showDrawer = (component: React.ReactNode, props: DrawerProps) => {
|
|
||||||
setContent(component);
|
|
||||||
setDrawerProps(props);
|
|
||||||
setVisible(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
const DrawerWrapper: React.FC = () => {
|
|
||||||
return (
|
|
||||||
<DrawerComponent
|
|
||||||
visible={visible}
|
|
||||||
onClose={() => setVisible(false)}
|
|
||||||
{...drawerProps}
|
|
||||||
>
|
|
||||||
{content}
|
|
||||||
</DrawerComponent>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
showDrawer,
|
|
||||||
// hideDrawer,
|
|
||||||
DrawerWrapper
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export default useDrawer;
|
|
||||||
|
|
@ -1,71 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
export default (propNames) => BaseComponent => class extends React.PureComponent {
|
|
||||||
state = {
|
|
||||||
obj: this.getObjFromProps(),
|
|
||||||
changed: false,
|
|
||||||
}
|
|
||||||
|
|
||||||
getObjFromProps() {
|
|
||||||
const obj = {}
|
|
||||||
propNames.forEach(propName => {
|
|
||||||
obj[ propName ] = this.props[ propName ] || null;
|
|
||||||
});
|
|
||||||
return obj;
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidUpdate(prevProps) {
|
|
||||||
if (propNames.some(propName => prevProps[ propName ] !== this.props[ propName ])){
|
|
||||||
this.setState({
|
|
||||||
obj: this.getObjFromProps(),
|
|
||||||
changed: false,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
_onChange = ({ name, value, type, checked }) => {
|
|
||||||
if ([ 'radio', 'checkbox' ].includes(type)) {
|
|
||||||
this.edit(name, checked);
|
|
||||||
} else {
|
|
||||||
this.edit(name, value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onChange = ({ target }) => this._onChange(target)
|
|
||||||
|
|
||||||
onChangeSemantic = (e, target) => this._onChange(target)
|
|
||||||
|
|
||||||
edit = (name, value) => {
|
|
||||||
this.setState({
|
|
||||||
obj: {
|
|
||||||
...this.state.obj,
|
|
||||||
[ name ]: value,
|
|
||||||
},
|
|
||||||
changed: true,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
update = (name, updateFunction = a => a) => {
|
|
||||||
this.setState({
|
|
||||||
obj: {
|
|
||||||
...this.state.obj,
|
|
||||||
[ name ]: updateFunction(this.state.obj[ name ]),
|
|
||||||
},
|
|
||||||
changed: true,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
|
|
||||||
return (
|
|
||||||
<BaseComponent
|
|
||||||
{ ...this.props }
|
|
||||||
onChange={ this.onChange }
|
|
||||||
onChangeSemantic={ this.onChangeSemantic }
|
|
||||||
edit={ this.edit }
|
|
||||||
update={ this.update }
|
|
||||||
changed={ this.state.changed }
|
|
||||||
{ ...this.state.obj }
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
const withEnumToggle = (stateName = 'active', handlerName = 'setActive', initial) => BaseComponent =>
|
|
||||||
class extends React.Component {
|
|
||||||
state = {
|
|
||||||
active: initial,
|
|
||||||
};
|
|
||||||
|
|
||||||
setActive = state => this.setState({
|
|
||||||
active: state,
|
|
||||||
})
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const newProps = {
|
|
||||||
[ handlerName ]: this.setActive,
|
|
||||||
[ stateName ]: this.state.active,
|
|
||||||
};
|
|
||||||
return <BaseComponent { ...newProps } { ...this.props } />;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export default withEnumToggle;
|
|
||||||
|
|
@ -21,7 +21,8 @@
|
||||||
"cy:open": "cypress open",
|
"cy:open": "cypress open",
|
||||||
"cy:test": "cypress install && cypress run --browser chrome",
|
"cy:test": "cypress install && cypress run --browser chrome",
|
||||||
"cy:test-firefox": "cypress install && cypress run --browser firefox",
|
"cy:test-firefox": "cypress install && cypress run --browser firefox",
|
||||||
"cy:test-edge": "cypress install && cypress run --browser edge"
|
"cy:test-edge": "cypress install && cypress run --browser edge",
|
||||||
|
"check-unimported": "npx unimported"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@ant-design/icons": "^5.2.5",
|
"@ant-design/icons": "^5.2.5",
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue