Visualize structure and connectivity

bit import grommet.react-components/visualization/topology

Visualize structure and connectivity.

import Topology from 'grommet/components/Topology’;

<Topology a11yTitle=’Server Topology’ links={[{"colorIndex": "graph-1", "ids": ["s1p1", “s2p1”]}, {"colorIndex": "graph-1", "ids": ["s1p1", “s2p1”]}, {"colorIndex": "graph-1", "ids": ["s1p2", “s2p2”]}, {"colorIndex": "graph-2", "ids": ["em1p2", “em2p1”]}, {"colorIndex": "graph-2", "ids": ["em2p2", “em3p1”]}, {"colorIndex": "graph-2", "ids": ["em3p2", “em4p1”]}, {"colorIndex": "graph-2", "ids": ["em4p2", “em1p1”]}, {"colorIndex": "graph-2", "ids": ["s2p14", “s2p8”]}, {"colorIndex": "graph-2", "ids": ["em4p2", “s2p8”]}]}> <Parts direction=’row’> <Part a11yTitle=’rack’ className=’rack’ direction=’column’> <Part a11yTitle=’switch’ className=’switch’ direction=’column’> <Parts direction=’row’> <Part id=’s1p1’ status=’ok’ label=’1’ direction=’column’ demarcate={false} /> <Part id=’s1p2’ status=’ok’ label=’2’ direction=’column’ demarcate={false} /> <Part id=’s1p3’ status=’ok’ label=’3’ direction=’column’ demarcate={false} /> <Part id=’s1p4’ status=’ok’ label=’4’ direction=’column’ demarcate={false} /> <Part id=’s1p5’ status=’ok’ label=’5’ direction=’column’ demarcate={false} /> <Part id=’s1p6’ status=’ok’ label=’6’ direction=’column’ demarcate={false} /> <Part id=’s1p7’ status=’ok’ label=’7’ direction=’column’ demarcate={false} /> <Part id=’s1p8’ status=’ok’ label=’8’ direction=’column’ demarcate={false} /> </Parts> <M> HP 3100 SI </M> </Part> <Part a11yTitle=’enclosure’ className=’enclosure’ direction=’column’> <Part className=’em’ label=’HP Virtual Connect FlexFabric-20/40 F8 Module’ /> <Part className=’em’ label=’HP Virtual Connect FlexFabric-20/40 F8 Module’ /> <Parts direction=’row’> <Part className=’em’> <Parts> <Part id=’em1p1’ status=’ok’ label=’1’ demarcate={false} align=’center’ /> <Part id=’em1p2’ status=’ok’ label=’2’ demarcate={false} align=’center’ /> </Parts> </Part> <Part a11yTitle=’fan 1 ok’ className=’fan’ status=’ok’ label=’1’ align=’center’ /> <Part className=’fan’ /> <Part a11yTitle=’fan 3 ok’ className=’fan’ status=’ok’ label=’3’ align=’center’ /> </Parts> <Part className=’em’ label=’HP Virtual Connect FlexFabric-20/40 F8 Module’ /> <Parts direction=’row’> <Part className=’em’> <Parts> <Part id=’em2p1’ status=’ok’ label=’1’ demarcate={false} align=’center’ /> <Part id=’em2p2’ status=’ok’ label=’2’ demarcate={false} align=’center’ /> </Parts> </Part> <Part className=’fan’ status=’ok’ label=’4’ align=’center’ /> <Part className=’fan’ status=’ok’ label=’5’ align=’center’ /> <Part className=’fan’ status=’ok’ label=’6’ align=’center’ /> </Parts> </Part> </Part> <Part a11yTitle=’rack’ className=’rack’ direction=’column’> <Part a11yTitle=’switch’ className=’switch’ direction=’column’> <Parts direction=’row’> <Part id=’s2p1’ status=’ok’ label=’1’ direction=’column’ demarcate={false} /> <Part id=’s2p2’ status=’ok’ label=’2’ direction=’column’ demarcate={false} /> <Part id=’s2p3’ status=’ok’ label=’3’ direction=’column’ demarcate={false} /> <Part id=’s2p4’ status=’ok’ label=’4’ direction=’column’ demarcate={false} /> <Part id=’s2p5’ status=’ok’ label=’5’ direction=’column’ demarcate={false} /> <Part id=’s2p6’ status=’ok’ label=’6’ direction=’column’ demarcate={false} /> <Part id=’s2p7’ status=’ok’ label=’7’ direction=’column’ demarcate={false} /> <Part id=’s2p8’ status=’ok’ label=’8’ direction=’column’ demarcate={false} /> <Part id=’s2p9’ status=’ok’ label=’9’ direction=’column’ demarcate={false} /> <Part id=’s2p10’ status=’ok’ label=’10’ direction=’column’ demarcate={false} /> </Parts> <M> HP 5920AF-24XG </M> <Parts direction=’row’> <Part id=’s2p11’ status=’ok’ label=’11’ direction=’column’ demarcate={false} reverse={true} /> <Part id=’s2p12’ status=’ok’ label=’12’ direction=’column’ demarcate={false} reverse={true} /> <Part id=’s2p13’ status=’ok’ label=’13’ direction=’column’ demarcate={false} reverse={true} /> <Part id=’s2p14’ status=’ok’ label=’14’ direction=’column’ demarcate={false} reverse={true} /> <Part id=’s2p15’ status=’ok’ label=’15’ direction=’column’ demarcate={false} reverse={true} /> <Part id=’s2p16’ status=’ok’ label=’16’ direction=’column’ demarcate={false} reverse={true} /> <Part id=’s2p17’ status=’ok’ label=’17’ direction=’column’ demarcate={false} reverse={true} /> <Part id=’s2p18’ status=’ok’ label=’18’ direction=’column’ demarcate={false} reverse={true} /> <Part id=’s2p19’ status=’ok’ label=’19’ direction=’column’ demarcate={false} reverse={true} /> <Part id=’s2p20’ status=’ok’ label=’20’ direction=’column’ demarcate={false} reverse={true} /> </Parts> </Part> <Part a11yTitle=’enclosure’ className=’enclosure’ direction=’column’> <Parts direction=’row’> <Part className=’em’> <Parts> <Part id=’em3p1’ status=’ok’ label=’1’ demarcate={false} align=’center’ /> <Part id=’em3p2’ status=’ok’ label=’2’ demarcate={false} align=’center’ /> </Parts> </Part> <Part className=’fan’ status=’ok’ label=’1’ align=’center’ /> <Part className=’fan’ status=’ok’ label=’2’ align=’center’ /> <Part className=’fan’ status=’ok’ label=’3’ align=’center’ /> </Parts> <Part className=’em’ label=’HP Virtual Connect FlexFabric-20/40 F8 Module’ /> <Parts direction=’row’> <Part className=’em’> <Parts> <Part id=’em4p1’ status=’ok’ label=’1’ demarcate={false} align=’center’ /> <Part id=’em4p2’ status=’ok’ label=’2’ demarcate={false} align=’center’ /> </Parts> </Part> <Part className=’fan’ status=’ok’ label=’4’ align=’center’ /> <Part className=’fan’ status=’ok’ label=’5’ align=’center’ /> <Part className=’fan’ status=’ok’ label=’6’ align=’center’ /> </Parts> </Part> </Part> </Parts> </Topology>

NameTypeDescription
linksArray<PropTypes.object>

An array of: {ids: [<id>, …], colorIndex: <string>}. The ids should reference id properties of contained Topology.Part components.

Test Summary

has correct default optionsTests didn't run