-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
281 additions
and
111 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
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 |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| import { Divider, Flex, FlexItem, Text, TextContent, TextVariants, Title } from '@patternfly/react-core'; | ||
|
|
||
| import { EDGE_COLOR_ACTIVE_DEFAULT } from './Graph.constants'; | ||
| import SvgCircle from './Shapes/Circle'; | ||
| import SvgDiamond from './Shapes/Diamond'; | ||
| import SvgHorizontalLine from './Shapes/HorizontalLine'; | ||
| import SvgSquare from './Shapes/Square'; | ||
|
|
||
| enum Labels { | ||
| Exposed = 'Process, Component or Site exposed', | ||
| NoExposed = 'Process/Component', | ||
| SiteGroup = 'Site group', | ||
| Remote = 'Server process or component', | ||
| DataLink = 'Data link', | ||
| ActiveDataLink = 'Active data link', | ||
| SiteLink = 'Site link' | ||
| } | ||
|
|
||
| const ProcessLegend = function () { | ||
| return ( | ||
| <> | ||
| <Title headingLevel="h3" className="pf-u-my-sm "> | ||
| Processes | ||
| </Title> | ||
| <Flex> | ||
| <Flex className="pf-u-mx-md" direction={{ default: 'column' }} alignItems={{ default: 'alignItemsCenter' }}> | ||
| <FlexItem className="pf-u-mb-0"> | ||
| <SvgCircle /> | ||
| </FlexItem> | ||
|
|
||
| <FlexItem className="pf-u-mb-0"> | ||
| <SvgDiamond /> | ||
| </FlexItem> | ||
|
|
||
| <FlexItem className="pf-u-mb-0"> | ||
| <SvgSquare /> | ||
| </FlexItem> | ||
|
|
||
| <FlexItem className="pf-u-mb-0"> | ||
| <SvgCircle dimension={8} /> | ||
| </FlexItem> | ||
| </Flex> | ||
| <Flex className="pf-u-mb-md "> | ||
| <TextContent> | ||
| <FlexItem> | ||
| <Text component={TextVariants.small}>{Labels.Exposed}</Text> | ||
| </FlexItem> | ||
|
|
||
| <FlexItem> | ||
| <Text component={TextVariants.small}>{Labels.NoExposed}</Text> | ||
| </FlexItem> | ||
|
|
||
| <FlexItem> | ||
| <Text component={TextVariants.small}>{Labels.SiteGroup}</Text> | ||
| </FlexItem> | ||
|
|
||
| <FlexItem> | ||
| <Text component={TextVariants.small}>{Labels.Remote}</Text> | ||
| </FlexItem> | ||
| </TextContent> | ||
| </Flex> | ||
|
|
||
| <Divider /> | ||
|
|
||
| <Title headingLevel="h3" className="pf-u-mt-md "> | ||
| Links | ||
| </Title> | ||
| </Flex> | ||
| <Flex> | ||
| <Flex className="pf-u-mx-md" direction={{ default: 'column' }} alignItems={{ default: 'alignItemsCenter' }}> | ||
| <FlexItem className="pf-u-mb-0"> | ||
| <SvgHorizontalLine /> | ||
| </FlexItem> | ||
|
|
||
| <FlexItem className="pf-u-mb-0"> | ||
| <SvgHorizontalLine color={EDGE_COLOR_ACTIVE_DEFAULT} /> | ||
| </FlexItem> | ||
|
|
||
| <FlexItem className="pf-u-mb-0"> | ||
| <SvgHorizontalLine dashed /> | ||
| </FlexItem> | ||
| </Flex> | ||
| <Flex> | ||
| <TextContent> | ||
| <FlexItem> | ||
| <Text component={TextVariants.small}>{Labels.DataLink}</Text> | ||
| </FlexItem> | ||
|
|
||
| <FlexItem> | ||
| <Text component={TextVariants.small}>{Labels.ActiveDataLink}</Text> | ||
| </FlexItem> | ||
|
|
||
| <FlexItem> | ||
| <Text component={TextVariants.small}>{Labels.SiteLink}</Text> | ||
| </FlexItem> | ||
| </TextContent> | ||
| </Flex> | ||
| </Flex> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default ProcessLegend; |
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 |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { LEGEND_DEFAULT_BG_COLOR, LEGEND_DEFAULT_STROKE_COLOR } from '../Graph.constants'; | ||
|
|
||
| const SvgCircle = function ({ dimension = 12 }: { dimension?: number }) { | ||
| // Dimension of the circle (width and height) | ||
| const circleDimension = dimension; | ||
| const circleColor = LEGEND_DEFAULT_BG_COLOR; | ||
| const circleStroke = LEGEND_DEFAULT_STROKE_COLOR; | ||
|
|
||
| return ( | ||
| <svg width={circleDimension} height={circleDimension}> | ||
| <circle | ||
| cx={circleDimension / 2} | ||
| cy={circleDimension / 2} | ||
| r={circleDimension / 2} | ||
| fill={circleColor} | ||
| stroke={circleStroke} | ||
| /> | ||
| </svg> | ||
| ); | ||
| }; | ||
|
|
||
| export default SvgCircle; |
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 |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { LEGEND_DEFAULT_BG_COLOR, LEGEND_DEFAULT_STROKE_COLOR } from '../Graph.constants'; | ||
|
|
||
| const SvgDiamond = function ({ dimension = 12 }: { dimension?: number }) { | ||
| // Dimension of the diamond (width and height) | ||
| const diamondDimension = dimension; | ||
| const diamondColor = LEGEND_DEFAULT_BG_COLOR; | ||
| const diamondStroke = LEGEND_DEFAULT_STROKE_COLOR; | ||
|
|
||
| return ( | ||
| <svg width={diamondDimension} height={diamondDimension}> | ||
| <polygon | ||
| points={`0,${diamondDimension / 2} ${diamondDimension / 2},0 ${diamondDimension},${diamondDimension / 2} ${ | ||
| diamondDimension / 2 | ||
| },${diamondDimension}`} | ||
| fill={diamondColor} | ||
| stroke={diamondStroke} | ||
| /> | ||
| </svg> | ||
| ); | ||
| }; | ||
|
|
||
| export default SvgDiamond; |
Oops, something went wrong.