72 lines
2.3 KiB
JavaScript
72 lines
2.3 KiB
JavaScript
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { useState } from 'react';
|
|
import { NoContent, Tabs } from 'UI';
|
|
import { hideHint } from 'Duck/components/player';
|
|
import { typeList } from 'Types/session/stackEvent';
|
|
import * as PanelLayout from './PanelLayout';
|
|
|
|
import UserEvent from 'Components/Session_/StackEvents/UserEvent';
|
|
import Autoscroll from 'Components/Session_/Autoscroll';
|
|
|
|
const ALL = 'ALL';
|
|
|
|
const TABS = [ ALL, ...typeList ].map(tab =>({ text: tab, key: tab }));
|
|
|
|
function StackEvents({
|
|
stackEvents,
|
|
hintIsHidden,
|
|
hideHint,
|
|
}) {
|
|
const [ activeTab, setTab ] = useState(ALL);
|
|
const tabs = TABS.filter(({ key }) => key === ALL || stackEvents.some(({ source }) => key === source)); // Do it once for all when we show them all
|
|
|
|
const filteredStackEvents = stackEvents
|
|
.filter(({ source }) => activeTab === ALL || activeTab === source);
|
|
|
|
return (
|
|
<>
|
|
<PanelLayout.Header>
|
|
<Tabs
|
|
className="uppercase"
|
|
tabs={ tabs }
|
|
active={ activeTab }
|
|
onClick={ setTab }
|
|
border={ false }
|
|
/>
|
|
</PanelLayout.Header>
|
|
<PanelLayout.Body>
|
|
<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/api#event" target="_blank">Events</a>
|
|
{ ' make debugging easier. Sync your backend logs and custom events with session replay.' }
|
|
<br/><br/>
|
|
<button className="color-teal" onClick={() => hideHint("stack")}>Got It!</button>
|
|
</>
|
|
: null
|
|
}
|
|
size="small"
|
|
show={ filteredStackEvents.length === 0 }
|
|
>
|
|
<Autoscroll>
|
|
{ filteredStackEvents.map(userEvent => (
|
|
<UserEvent key={ userEvent.key } userEvent={ userEvent }/>
|
|
))}
|
|
</Autoscroll>
|
|
</NoContent>
|
|
</PanelLayout.Body>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default connect(state => ({
|
|
hintIsHidden: state.getIn(['components', 'player', 'hiddenHints', 'stack']) ||
|
|
!state.getIn([ 'site', 'list' ]).some(s => s.stackIntegrations),
|
|
}), {
|
|
hideHint
|
|
})(StackEvents);
|