11198e003e
Summary: This displays the data models passed to the Sections in the side panel when a data node is clicked. This does not change the collapse behaviour when a Section node is clicked. To make it easier to associate a section with its changesets, appended the global indexes a Section is responsible for to the node label. Reviewed By: passy Differential Revision: D16283820 fbshipit-source-id: f1149f47dff448de05d919f7f8d16a2aba53bbb0
98 lines
2.8 KiB
JavaScript
98 lines
2.8 KiB
JavaScript
/**
|
|
* Copyright 2018-present Facebook.
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
* @format
|
|
*/
|
|
import type {UpdateTreeGenerationChangesetApplicationPayload} from './Models.js';
|
|
|
|
import React from 'react';
|
|
import {
|
|
MarkerTimeline,
|
|
Component,
|
|
styled,
|
|
FlexBox,
|
|
ManagedDataInspector,
|
|
Panel,
|
|
colors,
|
|
} from 'flipper';
|
|
|
|
const NoContent = styled(FlexBox)({
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexGrow: 1,
|
|
fontWeight: '500',
|
|
color: colors.light30,
|
|
});
|
|
|
|
type Props = {|
|
|
changeSets: ?Array<UpdateTreeGenerationChangesetApplicationPayload>,
|
|
eventUserInfo: ?Object,
|
|
focusedChangeSet: ?UpdateTreeGenerationChangesetApplicationPayload,
|
|
onFocusChangeSet: (
|
|
focusedChangeSet: ?UpdateTreeGenerationChangesetApplicationPayload,
|
|
) => void,
|
|
selectedNodeInfo: ?Object,
|
|
|};
|
|
|
|
export default class DetailsPanel extends Component<Props> {
|
|
render() {
|
|
const {changeSets, eventUserInfo} = this.props;
|
|
const firstChangeSet =
|
|
(changeSets || []).reduce(
|
|
(min, cs) => Math.min(min, cs.timestamp),
|
|
Infinity,
|
|
) || 0;
|
|
return (
|
|
<React.Fragment>
|
|
{eventUserInfo && (
|
|
<Panel
|
|
collapsable={false}
|
|
floating={false}
|
|
heading={'Event User Info'}>
|
|
<ManagedDataInspector data={eventUserInfo} expandRoot={true} />
|
|
</Panel>
|
|
)}
|
|
{changeSets && changeSets.length > 0 ? (
|
|
<Panel collapsable={false} floating={false} heading={'Changesets'}>
|
|
<MarkerTimeline
|
|
points={changeSets.map(p => ({
|
|
label:
|
|
p.type === 'CHANGESET_GENERATED' ? 'Generated' : 'Rendered',
|
|
time: Math.round((p.timestamp || 0) - firstChangeSet),
|
|
color:
|
|
p.type === 'CHANGESET_GENERATED' ? colors.lemon : colors.teal,
|
|
key: p.identifier,
|
|
}))}
|
|
onClick={ids =>
|
|
this.props.onFocusChangeSet(
|
|
changeSets.find(c => c.identifier === ids[0]),
|
|
)
|
|
}
|
|
selected={this.props.focusedChangeSet?.identifier}
|
|
/>
|
|
</Panel>
|
|
) : (
|
|
<NoContent>No changes sets available</NoContent>
|
|
)}
|
|
{this.props.focusedChangeSet && (
|
|
<Panel floating={false} heading="Changeset Details">
|
|
<ManagedDataInspector
|
|
data={this.props.focusedChangeSet.changeset}
|
|
expandRoot={true}
|
|
/>
|
|
</Panel>
|
|
)}
|
|
{this.props.selectedNodeInfo && (
|
|
<Panel floating={false} heading="Selected Node Info">
|
|
<ManagedDataInspector
|
|
data={this.props.selectedNodeInfo}
|
|
expandRoot={true}
|
|
/>
|
|
</Panel>
|
|
)}
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
}
|