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

fix(ui) - player resize on opening xray

Browse source
This commit is contained in:
Shekar Siri 2022-08-26 15:18:58 +02:00
parent 468c896ce0
commit 36901c3331
1 changed files with 115 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

199
frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx
View file

@ -15,101 +15,132 @@ import OverviewPanelContainer from './components/OverviewPanelContainer';
import { NoContent, Icon } from 'UI';
interface Props {
resourceList: any[];
exceptionsList: any[];
eventsList: any[];
toggleBottomBlock: any;
stackEventList: any[];
issuesList: any[];
performanceChartData: any;
endTime: number;
resourceList: any[];
exceptionsList: any[];
eventsList: any[];
toggleBottomBlock: any;
stackEventList: any[];
issuesList: any[];
performanceChartData: any;
endTime: number;
}
function OverviewPanel(props: Props) {
const [dataLoaded, setDataLoaded] = React.useState(false);
const [selectedFeatures, setSelectedFeatures] = React.useState(['PERFORMANCE', 'ERRORS', 'EVENTS']);
const [dataLoaded, setDataLoaded] = React.useState(false);
const [selectedFeatures, setSelectedFeatures] = React.useState([
'PERFORMANCE',
'ERRORS',
'EVENTS',
]);
const resources: any = React.useMemo(() => {
const { resourceList, exceptionsList, eventsList, stackEventList, issuesList, performanceChartData } = props;
return {
NETWORK: resourceList,
ERRORS: exceptionsList,
EVENTS: stackEventList,
CLICKRAGE: eventsList.filter((item: any) => item.type === TYPES.CLICKRAGE),
PERFORMANCE: performanceChartData,
};
}, [dataLoaded]);
const resources: any = React.useMemo(() => {
const {
resourceList,
exceptionsList,
eventsList,
stackEventList,
issuesList,
performanceChartData,
} = props;
return {
NETWORK: resourceList,
ERRORS: exceptionsList,
EVENTS: stackEventList,
CLICKRAGE: eventsList.filter((item: any) => item.type === TYPES.CLICKRAGE),
PERFORMANCE: performanceChartData,
};
}, [dataLoaded]);
useEffect(() => {
if (dataLoaded) {
return;
}
useEffect(() => {
if (dataLoaded) {
return;
}
if (props.resourceList.length > 0 || props.exceptionsList.length > 0 || props.eventsList.length > 0 || props.stackEventList.length > 0 || props.issuesList.length > 0 || props.performanceChartData.length > 0) {
setDataLoaded(true);
}
}, [props.resourceList, props.exceptionsList, props.eventsList, props.stackEventList, props.performanceChartData]);
if (
props.resourceList.length > 0 ||
props.exceptionsList.length > 0 ||
props.eventsList.length > 0 ||
props.stackEventList.length > 0 ||
props.issuesList.length > 0 ||
props.performanceChartData.length > 0
) {
setDataLoaded(true);
}
}, [
props.resourceList,
props.exceptionsList,
props.eventsList,
props.stackEventList,
props.performanceChartData,
]);
return (
dataLoaded && (
<Wrapper {...props}>
<BottomBlock style={{ height: '245px' }}>
<BottomBlock.Header>
<span className="font-semibold color-gray-medium mr-4">X-RAY</span>
<div className="flex items-center h-20">
<FeatureSelection list={selectedFeatures} updateList={setSelectedFeatures} />
</div>
</BottomBlock.Header>
<BottomBlock.Content>
<OverviewPanelContainer endTime={props.endTime}>
<TimelineScale endTime={props.endTime} />
<div style={{ width: '100%', height: '187px' }} className="transition relative">
<NoContent show={selectedFeatures.length === 0} title={
<div className="flex items-center mt-16">
<Icon name="info-circle" className="mr-2" size="18" />
Select a debug option to visualize on timeline.
</div>}>
<VerticalPointerLine />
{selectedFeatures.map((feature: any, index: number) => (
<div key={feature} className={cn('border-b last:border-none', { 'bg-white': index % 2 })}>
<EventRow
isGraph={feature === 'PERFORMANCE'}
title={feature}
list={resources[feature]}
renderElement={(pointer: any) => <TimelinePointer pointer={pointer} type={feature} />}
endTime={props.endTime}
message={HELP_MESSAGE[feature]}
/>
</div>
))}
</NoContent>
</div>
</OverviewPanelContainer>
</BottomBlock.Content>
</BottomBlock>
</Wrapper>
)
);
return (
<Wrapper {...props}>
<BottomBlock style={{ height: '245px' }}>
<BottomBlock.Header>
<span className="font-semibold color-gray-medium mr-4">X-RAY</span>
<div className="flex items-center h-20">
<FeatureSelection list={selectedFeatures} updateList={setSelectedFeatures} />
</div>
</BottomBlock.Header>
<BottomBlock.Content>
<OverviewPanelContainer endTime={props.endTime}>
<TimelineScale endTime={props.endTime} />
<div style={{ width: '100%', height: '187px' }} className="transition relative">
<NoContent
show={selectedFeatures.length === 0}
title={
<div className="flex items-center mt-16">
<Icon name="info-circle" className="mr-2" size="18" />
Select a debug option to visualize on timeline.
</div>
}
>
<VerticalPointerLine />
{selectedFeatures.map((feature: any, index: number) => (
<div
key={feature}
className={cn('border-b last:border-none', { 'bg-white': index % 2 })}
>
<EventRow
isGraph={feature === 'PERFORMANCE'}
title={feature}
list={resources[feature]}
renderElement={(pointer: any) => (
<TimelinePointer pointer={pointer} type={feature} />
)}
endTime={props.endTime}
message={HELP_MESSAGE[feature]}
/>
</div>
))}
</NoContent>
</div>
</OverviewPanelContainer>
</BottomBlock.Content>
</BottomBlock>
</Wrapper>
);
}
export default connect(
(state: any) => ({
issuesList: state.getIn(['sessions', 'current', 'issues']),
}),
{
toggleBottomBlock,
}
(state: any) => ({
issuesList: state.getIn(['sessions', 'current', 'issues']),
}),
{
toggleBottomBlock,
}
)(
connectPlayer((state: any) => ({
resourceList: state.resourceList.filter((r: any) => r.isRed() || r.isYellow()),
exceptionsList: state.exceptionsList,
eventsList: state.eventList,
stackEventList: state.stackList,
performanceChartData: state.performanceChartData,
endTime: state.endTime,
// endTime: 30000000,
}))(OverviewPanel)
connectPlayer((state: any) => ({
resourceList: state.resourceList.filter((r: any) => r.isRed() || r.isYellow()),
exceptionsList: state.exceptionsList,
eventsList: state.eventList,
stackEventList: state.stackList,
performanceChartData: state.performanceChartData,
endTime: state.endTime,
// endTime: 30000000,
}))(OverviewPanel)
);
const Wrapper = React.memo((props: any) => {
return <div>{props.children}</div>;
return <>{props.children}</>;
});