@samitouri / QOS-React-1
Code Commits Issues Pulls Sessions CI/CD
main
main
js 115 lines 3.79 KB
Raw
1 /**
2 * Copyright (c) Meta Platforms, Inc. and affiliates.
3 *
4 * This source code is licensed under the MIT license found in the
5 * LICENSE file in the root directory of this source tree.
6 *
7 * @flow
8 */
9
10 import * as React from 'react';
11 import {Fragment, useContext} from 'react';
12 import {ProfilerContext} from './ProfilerContext';
13 import Updaters from './Updaters';
14 import {formatDuration, formatTime} from './utils';
15 import {StoreContext} from '../context';
16 import {getCommitTree} from './CommitTreeBuilder';
17
18 import styles from './SidebarCommitInfo.css';
19
20 export type Props = {};
21
22 export default function SidebarCommitInfo(_: Props): React.Node {
23 const {selectedCommitIndex, rootID} = useContext(ProfilerContext);
24
25 const {profilerStore} = useContext(StoreContext);
26
27 if (rootID === null || selectedCommitIndex === null) {
28 return <div className={styles.NothingSelected}>Nothing selected</div>;
29 }
30
31 const {
32 duration,
33 effectDuration,
34 passiveEffectDuration,
35 priorityLevel,
36 timestamp,
37 updaters,
38 } = profilerStore.getCommitData(rootID, selectedCommitIndex);
39
40 const hasCommitPhaseDurations =
41 effectDuration !== null || passiveEffectDuration !== null;
42
43 const commitTree =
44 updaters !== null
45 ? getCommitTree({
46 commitIndex: selectedCommitIndex,
47 profilerStore,
48 rootID,
49 })
50 : null;
51
52 return (
53 <Fragment>
54 <div className={styles.Toolbar}>Commit information</div>
55 <div className={styles.Content}>
56 <ul className={styles.List}>
57 {priorityLevel !== null && (
58 <li className={styles.ListItem}>
59 <label className={styles.Label}>Priority</label>:{' '}
60 <span className={styles.Value}>{priorityLevel}</span>
61 </li>
62 )}
63 <li className={styles.ListItem}>
64 <label className={styles.Label}>Committed at</label>:{' '}
65 <span className={styles.Value}>{formatTime(timestamp)}s</span>
66 </li>
67
68 {!hasCommitPhaseDurations && (
69 <li className={styles.ListItem}>
70 <label className={styles.Label}>Render duration</label>:{' '}
71 <span className={styles.Value}>{formatDuration(duration)}ms</span>
72 </li>
73 )}
74
75 {hasCommitPhaseDurations && (
76 <li className={styles.ListItem}>
77 <label className={styles.Label}>Durations</label>
78 <ul className={styles.DurationsList}>
79 <li className={styles.DurationsListItem}>
80 <label className={styles.Label}>Render</label>:{' '}
81 <span className={styles.Value}>
82 {formatDuration(duration)}ms
83 </span>
84 </li>
85 {effectDuration !== null && (
86 <li className={styles.DurationsListItem}>
87 <label className={styles.Label}>Layout effects</label>:{' '}
88 <span className={styles.Value}>
89 {formatDuration(effectDuration)}ms
90 </span>
91 </li>
92 )}
93 {passiveEffectDuration !== null && (
94 <li className={styles.DurationsListItem}>
95 <label className={styles.Label}>Passive effects</label>:{' '}
96 <span className={styles.Value}>
97 {formatDuration(passiveEffectDuration)}ms
98 </span>
99 </li>
100 )}
101 </ul>
102 </li>
103 )}
104
105 {updaters !== null && commitTree !== null && (
106 <li className={styles.ListItem}>
107 <label className={styles.Label}>What caused this update</label>?
108 <Updaters commitTree={commitTree} updaters={updaters} />
109 </li>
110 )}
111 </ul>
112 </div>
113 </Fragment>
114 );
115 }