-
Notifications
You must be signed in to change notification settings - Fork 59
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: runtime metrics * feat: add mock data * fix: chart distance spacing breaking * chore: use traversal logic to get operation id from nodes * chore: minor fixes Signed-off-by: Soham <[email protected]> * fix: phase color * chore: threshold on milliseconds * chore: add borders * feat: runtime metrics * chore: minor fixes * chore: remove tooltip datasets, sanitize tooltip design * Added parsing function for span data Signed-off-by: Jason Porter <[email protected]> * chore: minor fixes * chore: minor fixes * chore: minor fixes * chore: minor fixes * fix: width * chore: remove highlight, fix fonts * fixed parsing algo to include node operations Signed-off-by: Jason Porter <[email protected]> * chore: support ms * fix: formatting * chore: cleanup * Minor fixes Signed-off-by: Jason Porter <[email protected]> * Fixed formatting issue with displayed duration Signed-off-by: Jason Porter <[email protected]> * chore: fix yarn.lock Signed-off-by: Carina Ursu <[email protected]> * chore: up package version Signed-off-by: Carina Ursu <[email protected]> * fix: add space Signed-off-by: Soham <[email protected]> --------- Signed-off-by: Soham <[email protected]> Signed-off-by: Jason Porter <[email protected]> Signed-off-by: Carina Ursu <[email protected]> Co-authored-by: Jason Porter <[email protected]> Co-authored-by: Carina Ursu <[email protected]>
- Loading branch information
3 people
authored
May 10, 2023
1 parent
5caa0ab
commit 29babaa
Showing
13 changed files
with
357 additions
and
19 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
109 changes: 102 additions & 7 deletions
109
packages/console/src/components/Executions/ExecutionDetails/Timeline/TimelineChart/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,117 @@ | ||
| import * as React from 'react'; | ||
| import { Bar } from 'react-chartjs-2'; | ||
| import { dNode } from 'models/Graph/types'; | ||
| import { Box, Theme, makeStyles } from '@material-ui/core'; | ||
|
|
||
| import { NodeExecutionPhase } from 'models'; | ||
| import { getNodeExecutionPhaseConstants } from 'components/Executions/utils'; | ||
| import { | ||
| BarItemData, | ||
| formatSecondsToHmsFormat, | ||
| generateChartData, | ||
| getChartData, | ||
| getDuration, | ||
| parseSpanData, | ||
| } from './utils'; | ||
| import { getBarOptions } from './barOptions'; | ||
| import { BarItemData, generateChartData, getChartData } from './utils'; | ||
|
|
||
| interface TimelineChartProps { | ||
| items: BarItemData[]; | ||
| nodes: dNode[]; | ||
| chartTimeIntervalSec: number; | ||
| operationIds: string[]; | ||
| parsedExecutionMetricsData: ReturnType<typeof parseSpanData>; | ||
| } | ||
|
|
||
| interface StyleProps { | ||
| opacity: number; | ||
| top: number; | ||
| left: number; | ||
| phaseColor: string; | ||
| } | ||
|
|
||
| const useStyles = makeStyles<Theme, StyleProps>(theme => ({ | ||
| tooltipContainer: { | ||
| position: 'absolute', | ||
| background: theme.palette.grey[100], | ||
| color: theme.palette.common.black, | ||
| padding: theme.spacing(2), | ||
| borderRadius: 8, | ||
| width: 'fit-content', | ||
| maxContent: 'fit-content', | ||
| top: ({ top }) => top + 10, | ||
| left: ({ left }) => left + 10, | ||
| display: ({ opacity }) => (opacity ? 'block' : 'none'), | ||
| }, | ||
| phaseText: { | ||
| width: 'fit-content', | ||
| marginBlockEnd: theme.spacing(1), | ||
| }, | ||
| tooltipText: { | ||
| minWidth: '50px', | ||
| }, | ||
| tooltipTextContainer: { | ||
| display: 'flex', | ||
| gap: 1, | ||
| color: theme.palette.grey[700], | ||
| }, | ||
| operationIdContainer: { | ||
| textAlign: 'left', | ||
| flex: 1, | ||
| }, | ||
| })); | ||
|
|
||
| export const TimelineChart = (props: TimelineChartProps) => { | ||
| const [tooltip, setTooltip] = React.useState({ | ||
| opacity: 0, | ||
| top: 0, | ||
| left: 0, | ||
| dataIndex: -1, | ||
| }); | ||
| const chartRef = React.useRef<any>(null); | ||
| const phaseData = generateChartData(props.items); | ||
|
|
||
| const options = getBarOptions( | ||
| props.chartTimeIntervalSec, | ||
| phaseData.tooltipLabel, | ||
| chartRef, | ||
| tooltip, | ||
| setTooltip, | ||
| ) as any; | ||
|
|
||
| const data = getChartData(phaseData); | ||
| const node = props.nodes[tooltip.dataIndex]; | ||
| const phase = node?.execution?.closure.phase ?? NodeExecutionPhase.UNDEFINED; | ||
| const phaseConstant = getNodeExecutionPhaseConstants(phase); | ||
| const spans = (node && props.parsedExecutionMetricsData[node.scopedId]) || []; | ||
|
|
||
| const styles = useStyles({ | ||
| opacity: tooltip.opacity, | ||
| top: tooltip.top, | ||
| left: tooltip.left, | ||
| phaseColor: phaseConstant.badgeColor, | ||
| }); | ||
|
|
||
| return ( | ||
| <Bar | ||
| options={ | ||
| getBarOptions(props.chartTimeIntervalSec, phaseData.tooltipLabel) as any | ||
| } | ||
| data={getChartData(phaseData)} | ||
| /> | ||
| <> | ||
| <Bar options={options} data={data} ref={chartRef} /> | ||
| <Box className={styles.tooltipContainer}> | ||
| {phase && <Box className={styles.phaseText}>{phaseConstant.text}</Box>} | ||
| {spans?.map(span => ( | ||
| <Box className={styles.tooltipTextContainer}> | ||
| <Box className={styles.tooltipText}> | ||
| {formatSecondsToHmsFormat( | ||
| Math.round( | ||
| (getDuration(span.startTime, span.endTime) / 1000) * 100, | ||
| ) / 100, | ||
| )} | ||
| </Box> | ||
| <Box className={styles.operationIdContainer}> | ||
| {span.operationId} | ||
| </Box> | ||
| </Box> | ||
| ))} | ||
| </Box> | ||
| </> | ||
| ); | ||
| }; |
Oops, something went wrong.