Skip to content

Commit

Permalink
fix(#905): Polish the Trace view of the camel plugin
Browse files Browse the repository at this point in the history
  • Loading branch information
@mmelko @tadayosi
mmelko authored and tadayosi committed May 7, 2024
1 parent 83905aa commit fd7a488
Show file tree
Hide file tree
Showing 4 changed files with 104 additions and 89 deletions.
14 changes: 9 additions & 5 deletions packages/hawtio/src/plugins/camel/debug/MessageDrawer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,11 +118,11 @@ export const MessageDrawer: React.FunctionComponent<MessageDrawerProps> = (props
}

const panelContent = (
<DrawerPanelContent>
<DrawerPanelContent minSize={'50%'}>
<DrawerHead>
<div tabIndex={props.expanded ? 0 : -1} ref={panelRef}>
<Text>
<em>{props.messages && props.messages.length > 0 ? props.messages[0]?.uid : ''}</em>
<em>UID: {props.messages && props.messages.length > 0 ? props.messages[0]?.uid : ''}</em>
</Text>
<Nav
onSelect={onSelectTab}
Expand All @@ -138,16 +138,20 @@ export const MessageDrawer: React.FunctionComponent<MessageDrawerProps> = (props
<DrawerCloseButton onClick={onPanelCloseClick} />
</DrawerActions>
</DrawerHead>
<Panel isScrollable>
<Panel>
<PanelMain>
<PanelMainBody>{drawerPanels().map(panel => activePanelTab === panel.id && panel.panelFn())}</PanelMainBody>
<PanelMainBody>
<div style={{ height: '100%', overflow: 'auto' }}>
{drawerPanels().map(panel => activePanelTab === panel.id && panel.panelFn())}
</div>
</PanelMainBody>
</PanelMain>
</Panel>
</DrawerPanelContent>
)

return (
<Drawer isExpanded={props.expanded} onExpand={onPanelExpand} position='left'>
<Drawer isExpanded={props.expanded} onExpand={onPanelExpand} position='right'>
<DrawerContent panelContent={panelContent}>
<DrawerContentBody>{props.children}</DrawerContentBody>
</DrawerContent>
Expand Down
5 changes: 4 additions & 1 deletion packages/hawtio/src/plugins/camel/route-diagram/RouteDiagram.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,10 @@
.camel-route-diagram {
flex-grow: 1;
position: relative;
height: 80vh;
height: 60vh;
min-height: 50vh;
max-height: 75vh;
width: 100%;
}

.highlighted {
Expand Down
155 changes: 73 additions & 82 deletions packages/hawtio/src/plugins/camel/trace/Trace.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,6 @@
import { HawtioEmptyCard, HawtioLoadingCard, MBeanNode } from '@hawtiosrc/plugins/shared'
import { childText, parseXML } from '@hawtiosrc/util/xml'
import {
Button,
CardBody,
Divider,
Panel,
PanelHeader,
PanelMain,
PanelMainBody,
Text,
Title,
} from '@patternfly/react-core'
import { Button, Divider, Panel, PanelHeader, PanelMain, PanelMainBody, Text, Title } from '@patternfly/react-core'
import { BanIcon, PlayIcon } from '@patternfly/react-icons'
import { TableComposable, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table'
import { Response } from 'jolokia.js'
Expand Down Expand Up @@ -199,84 +189,85 @@ export const Trace: React.FunctionComponent = () => {
{!isTracing ? 'Start Tracing' : 'Stop Tracing'}
</Button>
</PanelHeader>
<CardBody>
{!isTracing && (
<React.Fragment>
<Text className='noTracing' data-testid='no-tracing' component='p'>
Tracing allows you to send messages to a route and then step through and see the messages flow through a
route to aid debugging and to help diagnose issues.
</Text>
<Text className='noTracing' data-testid='no-tracing' component='p'>
Once you start tracing, you can send messages to the input endpoints, then come back to this page and see
the flow of messages through your route.
</Text>
<Text className='noTracing' data-testid='no-tracing' component='p'>
As you click on the message table, you can see which node in the flow it came through; moving the
selection up and down in the message table lets you see the flow of the message through the diagram.
</Text>
</React.Fragment>
)}
{isTracing && (
<React.Fragment>
<Panel id='route-diagram-tracing-view' isScrollable>
<PanelMain>
<PanelMainBody>
<RouteDiagramContext.Provider
value={{
graphNodeData,
setGraphNodeData,
graphSelection,
setGraphSelection,
setShowStatistics,
}}
>
<RouteDiagram />
</RouteDiagramContext.Provider>
</PanelMainBody>
</PanelMain>
</Panel>

<PanelMain>
<PanelMainBody>
{!isTracing && (
<React.Fragment>
<Text className='noTracing' data-testid='no-tracing' component='p'>
Tracing allows you to send messages to a route and then step through and see the messages flow through a
route to aid debugging and to help diagnose issues.
</Text>
<Text className='noTracing' data-testid='no-tracing2' component='p'>
Once you start tracing, you can send messages to the input endpoints, then come back to this page and
see the flow of messages through your route.
</Text>
<Text className='noTracing' data-testid='no-tracing3' component='p'>
As you click on the message table, you can see which node in the flow it came through; moving the
selection up and down in the message table lets you see the flow of the message through the diagram.
</Text>
</React.Fragment>
)}
{isTracing && (
<MessageDrawer
messages={message ? [message] : []}
expanded={msgPanelExpanded}
setExpanded={setMsgPanelExpanded}
>
<Panel id='route-message-table' isScrollable variant='raised'>
<PanelHeader>Messages</PanelHeader>
<Divider />
<PanelMain>
<PanelMainBody>
<TableComposable aria-label='message table' variant='compact' isStriped>
<Thead>
<Tr>
<Th>ID</Th>
<Th>To Node</Th>
</Tr>
</Thead>
<Tbody isOddStriped>
{messages.current.map(message => (
<Tr
key={message.uid}
onRowClick={() => onRowSelected(message)}
isRowSelected={isRowSelected(message)}
>
<Td dataLabel='ID'>
<Button variant='link' isDisabled={!message} onClick={onMessagePanelToggle}>
{message.headers.breadcrumbId ? message.headers.breadcrumbId : message.uid}
</Button>
</Td>
<Td dataLabel='ToNode'>{message.toNode}</Td>
<div id='trace-content'>
<Panel id='route-diagram-tracing-view'>
<PanelMain>
<PanelMainBody>
<RouteDiagramContext.Provider
value={{
graphNodeData,
setGraphNodeData,
graphSelection,
setGraphSelection,
setShowStatistics,
}}
>
<RouteDiagram />
</RouteDiagramContext.Provider>
</PanelMainBody>
</PanelMain>
</Panel>
<Panel id='route-message-table'>
<PanelHeader>Messages</PanelHeader>
<Divider />
<PanelMain>
<PanelMainBody id='route-message-table-body'>
<TableComposable aria-label='message table' variant='compact' isStriped>
<Thead>
<Tr>
<Th>ID</Th>
<Th>To Node</Th>
</Tr>
))}
</Tbody>
</TableComposable>
</PanelMainBody>
</PanelMain>
</Panel>
</Thead>
<Tbody isOddStriped>
{messages.current.map(message => (
<Tr
key={message.uid}
onRowClick={() => onRowSelected(message)}
isRowSelected={isRowSelected(message)}
>
<Td dataLabel='ID'>
<Button variant='link' isDisabled={!message} onClick={onMessagePanelToggle}>
{message.headers.breadcrumbId ? message.headers.breadcrumbId : message.uid}
</Button>
</Td>
<Td dataLabel='ToNode'>{message.toNode}</Td>
</Tr>
))}
</Tbody>
</TableComposable>
</PanelMainBody>
</PanelMain>
</Panel>
</div>
</MessageDrawer>
</React.Fragment>
)}
</CardBody>
)}
</PanelMainBody>
</PanelMain>
</Panel>
)
}
19 changes: 18 additions & 1 deletion packages/hawtio/src/plugins/camel/trace/Tracing.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,25 @@
margin-bottom: 0.5em;
}

#trace-content {
display: flex;
flex-direction: row;
height: 100%;
}

#route-message-table {
margin-top: 0.5em;
height: 100%;
flex: 1;
}

#route-message-table-body {
height: 100%;
max-height: 60vh;
overflow: auto;
}

#route-diagram-tracing-view {
flex: 1;
}

#trace-header-container {
Expand Down

0 comments on commit fd7a488

Please sign in to comment.