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

fix(ui) - xray verticle line sync on resize

Browse source
This commit is contained in:
Shekar Siri 2023-04-24 17:11:32 +02:00
parent d9404d1d13
commit ea64656b02
1 changed files with 22 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -14,7 +14,7 @@ import { observer } from 'mobx-react-lite';
import { PlayerContext } from 'App/components/Session/playerContext';
function OverviewPanel({ issuesList }: { issuesList: Record<string, any>[] }) {
const { store } = React.useContext(PlayerContext)
const { store } = React.useContext(PlayerContext);
const [dataLoaded, setDataLoaded] = React.useState(false);
const [selectedFeatures, setSelectedFeatures] = React.useState([
'PERFORMANCE',
@ -22,24 +22,24 @@ function OverviewPanel({ issuesList }: { issuesList: Record<string, any>[] }) {
'NETWORK',
]);
const {
endTime,
performanceChartData,
stackList: stackEventList,
eventList: eventsList,
frustrationsList,
exceptionsList,
resourceList: resourceListUnmap,
fetchList,
graphqlList,
} = store.get()
const {
endTime,
performanceChartData,
stackList: stackEventList,
eventList: eventsList,
frustrationsList,
exceptionsList,
resourceList: resourceListUnmap,
fetchList,
graphqlList,
} = store.get();
const fetchPresented = fetchList.length > 0;
const fetchPresented = fetchList.length > 0;
const resourceList = resourceListUnmap
.filter((r: any) => r.isRed || r.isYellow)
.concat(fetchList.filter((i: any) => parseInt(i.status) >= 400))
.concat(graphqlList.filter((i: any) => parseInt(i.status) >= 400))
const resourceList = resourceListUnmap
.filter((r: any) => r.isRed || r.isYellow)
.concat(fetchList.filter((i: any) => parseInt(i.status) >= 400))
.concat(graphqlList.filter((i: any) => parseInt(i.status) >= 400));
const resources: any = React.useMemo(() => {
return {
@ -66,16 +66,10 @@ function OverviewPanel({ issuesList }: { issuesList: Record<string, any>[] }) {
) {
setDataLoaded(true);
}
}, [
resourceList,
issuesList,
exceptionsList,
eventsList,
stackEventList,
performanceChartData,
]);
}, [resourceList, issuesList, exceptionsList, eventsList, stackEventList, performanceChartData]);
return (
<React.Fragment>
<BottomBlock style={{ height: '100%' }}>
<BottomBlock.Header>
<span className="font-semibold color-gray-medium mr-4">X-RAY</span>
@ -88,7 +82,7 @@ function OverviewPanel({ issuesList }: { issuesList: Record<string, any>[] }) {
<TimelineScale endTime={endTime} />
<div
// style={{ width: '100%', height: '187px', overflow: 'hidden' }}
style={{ width: 'calc(100vw - 1rem)', margin: '0 auto' }}
style={{ width: 'calc(100% - 1rem)', margin: '0 auto' }}
className="transition relative"
>
<NoContent
@ -128,6 +122,7 @@ function OverviewPanel({ issuesList }: { issuesList: Record<string, any>[] }) {
</OverviewPanelContainer>
</BottomBlock.Content>
</BottomBlock>
</React.Fragment>
);
}
@ -138,6 +133,4 @@ export default connect(
{
toggleBottomBlock,
}
)(
observer(OverviewPanel)
)
)(observer(OverviewPanel));