10d990c32c
Summary: Plugins moved from "sonar/desktop/src/plugins" to "sonar/desktop/plugins". Fixed all the paths after moving. New "desktop" folder structure: - `src` - Flipper desktop app JS code executing in Electron Renderer (Chrome) process. - `static` - Flipper desktop app JS code executing in Electron Main (Node.js) process. - `plugins` - Flipper desktop JS plugins. - `pkg` - Flipper packaging lib and CLI tool. - `doctor` - Flipper diagnostics lib and CLI tool. - `scripts` - Build scripts for Flipper desktop app. - `headless` - Headless version of Flipper desktop app. - `headless-tests` - Integration tests running agains Flipper headless version. Reviewed By: mweststrate Differential Revision: D20344186 fbshipit-source-id: d020da970b2ea1e001f9061a8782bfeb54e31ba0
112 lines
3.1 KiB
JavaScript
112 lines
3.1 KiB
JavaScript
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* 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
|
|
key="eventUserInfo"
|
|
collapsable={false}
|
|
floating={false}
|
|
heading={'Event User Info'}>
|
|
<ManagedDataInspector data={eventUserInfo} expandRoot={true} />
|
|
</Panel>
|
|
)}
|
|
{changeSets && changeSets.length > 0 ? (
|
|
<Panel
|
|
key="Changesets"
|
|
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
|
|
key="Changeset Details"
|
|
floating={false}
|
|
heading="Changeset Details">
|
|
<ManagedDataInspector
|
|
data={this.props.focusedChangeSet.changeset}
|
|
expandRoot={true}
|
|
/>
|
|
</Panel>
|
|
)}
|
|
{this.props.selectedNodeInfo && (
|
|
<Panel
|
|
key="Selected Node Info"
|
|
floating={false}
|
|
heading="Selected Node Info">
|
|
<ManagedDataInspector
|
|
data={this.props.selectedNodeInfo}
|
|
expandRoot={true}
|
|
/>
|
|
</Panel>
|
|
)}
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
}
|