@patternfly/react-docs 5.22.5 → 5.22.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [5.22.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@5.22.5...@patternfly/react-docs@5.22.6) (2021-10-05)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
## [5.22.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@5.22.4...@patternfly/react-docs@5.22.5) (2021-10-04)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @patternfly/react-docs
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/react-docs",
|
|
3
3
|
"description": "PatternFly React Docs",
|
|
4
|
-
"version": "5.22.
|
|
4
|
+
"version": "5.22.6",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public",
|
|
7
7
|
"tag": "prerelease-v4"
|
|
@@ -23,18 +23,18 @@
|
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
25
|
"@patternfly/patternfly": "4.139.2",
|
|
26
|
-
"@patternfly/react-catalog-view-extension": "^4.13.
|
|
26
|
+
"@patternfly/react-catalog-view-extension": "^4.13.4",
|
|
27
27
|
"@patternfly/react-charts": "^6.15.26",
|
|
28
|
-
"@patternfly/react-code-editor": "^4.3.
|
|
29
|
-
"@patternfly/react-core": "^4.158.
|
|
28
|
+
"@patternfly/react-code-editor": "^4.3.71",
|
|
29
|
+
"@patternfly/react-core": "^4.158.4",
|
|
30
30
|
"@patternfly/react-icons": "^4.12.1",
|
|
31
|
-
"@patternfly/react-inline-edit-extension": "^4.7.
|
|
32
|
-
"@patternfly/react-log-viewer": "^4.7.
|
|
31
|
+
"@patternfly/react-inline-edit-extension": "^4.7.95",
|
|
32
|
+
"@patternfly/react-log-viewer": "^4.7.7",
|
|
33
33
|
"@patternfly/react-styles": "^4.12.1",
|
|
34
|
-
"@patternfly/react-table": "^4.30.
|
|
34
|
+
"@patternfly/react-table": "^4.30.14",
|
|
35
35
|
"@patternfly/react-tokens": "^4.13.1",
|
|
36
|
-
"@patternfly/react-topology": "^4.9.
|
|
37
|
-
"@patternfly/react-virtualized-extension": "^4.9.
|
|
36
|
+
"@patternfly/react-topology": "^4.9.90",
|
|
37
|
+
"@patternfly/react-virtualized-extension": "^4.9.60"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@patternfly/patternfly-a11y": "4.2.1",
|
|
@@ -53,5 +53,5 @@
|
|
|
53
53
|
"last 2 versions",
|
|
54
54
|
"not ie <= 11"
|
|
55
55
|
],
|
|
56
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "d9a788888b436fb8a85bed6042ae4bd056b78c53"
|
|
57
57
|
}
|
|
@@ -5,6 +5,11 @@ import ArrowRightIcon from '@patternfly/react-icons/dist/js/icons/arrow-right-ic
|
|
|
5
5
|
import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
|
|
6
6
|
import { CheckCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, TimesCircleIcon, BellIcon } from '@patternfly/react-icons';
|
|
7
7
|
import { TableComposable, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
|
|
8
|
+
import { Chart, ChartAxis, ChartGroup, ChartVoronoiContainer, ChartStack, ChartBar, ChartTooltip, ChartDonutThreshold, ChartDonutUtilization, ChartArea, ChartContainer, ChartLabel } from '@patternfly/react-charts';
|
|
9
|
+
import chart_color_gold_100 from '@patternfly/react-tokens/dist/esm/chart_color_gold_100';
|
|
10
|
+
import chart_color_gold_300 from '@patternfly/react-tokens/dist/esm/chart_color_gold_300';
|
|
11
|
+
import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300';
|
|
12
|
+
import chart_color_red_100 from '@patternfly/react-tokens/dist/esm/chart_color_red_100';
|
|
8
13
|
import srcImportcardview from './react-demos/card-view.png';
|
|
9
14
|
const pageData = {
|
|
10
15
|
"id": "Card",
|
|
@@ -19,6 +24,10 @@ const pageData = {
|
|
|
19
24
|
"Aggregate status card",
|
|
20
25
|
"Status",
|
|
21
26
|
"Status Tabbed",
|
|
27
|
+
"Utilization card 1",
|
|
28
|
+
"Utilization card 2",
|
|
29
|
+
"Utilization card 3",
|
|
30
|
+
"Utilization card 4",
|
|
22
31
|
"Log view",
|
|
23
32
|
"Event view"
|
|
24
33
|
]
|
|
@@ -38,7 +47,23 @@ pageData.liveContext = {
|
|
|
38
47
|
Tr,
|
|
39
48
|
Th,
|
|
40
49
|
Td,
|
|
41
|
-
ExpandableRowContent
|
|
50
|
+
ExpandableRowContent,
|
|
51
|
+
Chart,
|
|
52
|
+
ChartAxis,
|
|
53
|
+
ChartGroup,
|
|
54
|
+
ChartVoronoiContainer,
|
|
55
|
+
ChartStack,
|
|
56
|
+
ChartBar,
|
|
57
|
+
ChartTooltip,
|
|
58
|
+
ChartDonutThreshold,
|
|
59
|
+
ChartDonutUtilization,
|
|
60
|
+
ChartArea,
|
|
61
|
+
ChartContainer,
|
|
62
|
+
ChartLabel,
|
|
63
|
+
chart_color_gold_100,
|
|
64
|
+
chart_color_gold_300,
|
|
65
|
+
chart_color_orange_300,
|
|
66
|
+
chart_color_red_100
|
|
42
67
|
};
|
|
43
68
|
pageData.examples = {
|
|
44
69
|
'Horizontal card grid': props =>
|
|
@@ -64,6 +89,22 @@ pageData.examples = {
|
|
|
64
89
|
'Status Tabbed': props =>
|
|
65
90
|
<Example {...pageData} {...props} {...{"code":"import * as React from 'react';\nimport {\n Card,\n CardBody,\n CardHeader,\n DescriptionList,\n DescriptionListDescription,\n DescriptionListGroup,\n DescriptionListTerm,\n Flex,\n FlexItem,\n Grid,\n GridItem,\n Spinner,\n Tab,\n TabContent,\n Tabs,\n TabTitleText,\n Title\n} from '@patternfly/react-core';\nimport CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';\nimport ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';\n\nconst descriptionListData = [\n {\n status: 'Running',\n resourceName: 'Resource name that is long and can wrap',\n detail: '121 Systems',\n icon: <CheckCircleIcon />\n },\n {\n status: 'Ready',\n resourceName: 'Resource name that is long and can wrap',\n detail: '123 Systems',\n icon: <ExclamationCircleIcon />\n },\n {\n status: 'Running',\n resourceName: 'Resource name that is long and can wrap',\n detail: '122 Systems',\n icon: <CheckCircleIcon />\n },\n {\n status: 'Ready',\n resourceName: 'Resource name that is long and can wrap',\n detail: '124 Systems',\n icon: <ExclamationCircleIcon />\n }\n];\n\nconst Status: React.FunctionComponent = () => {\n const [activeTabKey, setActiveTabKey] = React.useState(0);\n const handleTabClick = (event: React.MouseEvent, tabIndex: number) => {\n setActiveTabKey(tabIndex);\n };\n\n const tabContent = (\n <DescriptionList isHorizontal columnModifier={{ lg: '2Col' }}>\n {descriptionListData.map(({ status, resourceName, detail, icon }, index) => (\n <DescriptionListGroup key={index}>\n <DescriptionListTerm>\n <Flex>\n <FlexItem>{icon}</FlexItem>\n <FlexItem>\n <Title headingLevel=\"h3\" size=\"md\">\n {status}\n </Title>\n </FlexItem>\n </Flex>\n </DescriptionListTerm>\n <DescriptionListDescription>\n <a href=\"#\">{resourceName}</a>\n <div>{detail}</div>\n </DescriptionListDescription>\n </DescriptionListGroup>\n ))}\n </DescriptionList>\n );\n\n return (\n <>\n <Card>\n <CardHeader>\n <Title headingLevel=\"h2\" size=\"lg\">\n Status\n </Title>\n </CardHeader>\n <CardBody>\n <Tabs isFilled id=\"status-tabs\" activeKey={activeTabKey} onSelect={handleTabClick}>\n {[1, 2, 3].map((tab, tabIndex) => (\n <Tab\n key={tabIndex}\n eventKey={tabIndex}\n title={<TabTitleText>{`Object ${tabIndex + 1}`}</TabTitleText>}\n tabContentId={`tabContent${tabIndex}`}\n />\n ))}\n </Tabs>\n </CardBody>\n <CardBody>\n {[1, 2, 3].map((tab, tabIndex) => (\n <TabContent\n key={tabIndex}\n eventKey={tabIndex}\n id={`tabContent${tabIndex}`}\n activeKey={activeTabKey}\n hidden={tabIndex !== activeTabKey}\n >\n {tabContent}\n </TabContent>\n ))}\n </CardBody>\n </Card>\n </>\n );\n};","title":"Status Tabbed","lang":"ts"}}>
|
|
66
91
|
|
|
92
|
+
</Example>,
|
|
93
|
+
'Utilization card 1': props =>
|
|
94
|
+
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n Card,\n CardTitle,\n CardBody,\n CardFooter,\n Title,\n Gallery,\n GalleryItem,\n Flex,\n FlexItem,\n Stack,\n StackItem,\n Divider\n} from '@patternfly/react-core';\nimport { ChartArea, ChartContainer, ChartGroup, ChartLabel, ChartVoronoiContainer } from '@patternfly/react-charts';\n\nconst UtilizationCard1 = () => (\n <Gallery hasGutter minWidths={{ default: '360px' }}>\n <GalleryItem>\n <Card id=\"utilization-card-1\" component=\"div\">\n <CardTitle>\n <Title headingLevel=\"h2\" size=\"lg\">\n Top Utilized Clusters\n </Title>\n </CardTitle>\n <CardBody>\n <Flex direction={{ default: 'column' }}>\n <FlexItem>\n <Stack>\n <b>Cluster-1204</b>\n <span>27.3 cores available</span>\n </Stack>\n </FlexItem>\n <FlexItem>\n <ChartGroup\n ariaDesc=\"Mock average cluster utilization\"\n ariaTitle=\"Mock cluster sparkline chart\"\n containerComponent={\n <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />\n }\n height={100}\n maxDomain={{ y: 9 }}\n padding={0}\n width={400}\n >\n <ChartArea\n data={[\n { name: 'Cluster', x: '2015', y: 7 },\n { name: 'Cluster', x: '2016', y: 6 },\n { name: 'Cluster', x: '2017', y: 8 },\n { name: 'Cluster', x: '2018', y: 3 },\n { name: 'Cluster', x: '2019', y: 4 },\n { name: 'Cluster', x: '2020', y: 1 },\n { name: 'Cluster', x: '2021', y: 0 }\n ]}\n />\n </ChartGroup>\n </FlexItem>\n <FlexItem>\n <a href=\"#\">View details</a>\n </FlexItem>\n </Flex>\n </CardBody>\n <CardBody>\n <Flex direction={{ default: 'column' }}>\n <FlexItem>\n <Stack>\n <b>Abcdef-1204</b>\n <span>50.6 cores available</span>\n </Stack>\n </FlexItem>\n <FlexItem>\n <ChartGroup\n ariaDesc=\"Mock average cluster utilization\"\n ariaTitle=\"Mock cluster sparkline chart\"\n containerComponent={\n <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />\n }\n height={100}\n maxDomain={{ y: 9 }}\n padding={0}\n width={400}\n >\n <ChartArea\n data={[\n { name: 'Cluster', x: '2015', y: 7 },\n { name: 'Cluster', x: '2016', y: 6 },\n { name: 'Cluster', x: '2017', y: 8 },\n { name: 'Cluster', x: '2018', y: 3 },\n { name: 'Cluster', x: '2019', y: 4 },\n { name: 'Cluster', x: '2020', y: 1 },\n { name: 'Cluster', x: '2021', y: 0 }\n ]}\n />\n </ChartGroup>\n </FlexItem>\n <FlexItem>\n <a href=\"#\">View details</a>\n </FlexItem>\n </Flex>\n </CardBody>\n <Divider />\n <CardFooter>\n <a href=\"#\">View all clusters</a>\n </CardFooter>\n </Card>\n </GalleryItem>\n </Gallery>\n)","title":"Utilization card 1","lang":"ts"}}>
|
|
95
|
+
|
|
96
|
+
</Example>,
|
|
97
|
+
'Utilization card 2': props =>
|
|
98
|
+
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n Card,\n CardTitle,\n CardBody,\n CardFooter,\n Title,\n Gallery,\n GalleryItem,\n Flex,\n FlexItem,\n Stack,\n StackItem,\n Divider\n} from '@patternfly/react-core';\nimport { ChartArea, ChartContainer, ChartGroup, ChartLabel, ChartVoronoiContainer } from '@patternfly/react-charts';\n\nconst UtilizationCard2 = () => (\n <Gallery hasGutter minWidths={{ default: '360px' }}>\n <GalleryItem>\n <Card id=\"utilization-card-2\" component=\"div\">\n <CardTitle>\n <Title headingLevel=\"h2\" size=\"lg\">\n Top Utilized Clusters\n </Title>\n </CardTitle>\n <CardBody>\n <Flex direction={{ default: 'column' }}>\n <FlexItem>\n <Stack>\n <a href=\"#\">Cluster-1204</a>\n <span>27.3 cores available</span>\n </Stack>\n </FlexItem>\n <FlexItem>\n <ChartGroup\n ariaDesc=\"Mock average cluster utilization\"\n ariaTitle=\"Mock cluster sparkline chart\"\n containerComponent={\n <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />\n }\n height={100}\n maxDomain={{ y: 9 }}\n padding={0}\n width={400}\n >\n <ChartArea\n data={[\n { name: 'Cluster', x: '2015', y: 7 },\n { name: 'Cluster', x: '2016', y: 6 },\n { name: 'Cluster', x: '2017', y: 8 },\n { name: 'Cluster', x: '2018', y: 3 },\n { name: 'Cluster', x: '2019', y: 4 },\n { name: 'Cluster', x: '2020', y: 1 },\n { name: 'Cluster', x: '2021', y: 0 }\n ]}\n />\n </ChartGroup>\n </FlexItem>\n </Flex>\n </CardBody>\n <CardBody>\n <Flex direction={{ default: 'column' }}>\n <FlexItem>\n <Stack>\n <a href=\"#\">Abcdef-1204</a>\n <span>50.6 cores available</span>\n </Stack>\n </FlexItem>\n <FlexItem>\n <ChartGroup\n ariaDesc=\"Mock average cluster utilization\"\n ariaTitle=\"Mock cluster sparkline chart\"\n containerComponent={\n <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />\n }\n height={100}\n maxDomain={{ y: 9 }}\n padding={0}\n width={400}\n >\n <ChartArea\n data={[\n { name: 'Cluster', x: '2015', y: 7 },\n { name: 'Cluster', x: '2016', y: 6 },\n { name: 'Cluster', x: '2017', y: 8 },\n { name: 'Cluster', x: '2018', y: 3 },\n { name: 'Cluster', x: '2019', y: 4 },\n { name: 'Cluster', x: '2020', y: 1 },\n { name: 'Cluster', x: '2021', y: 0 }\n ]}\n />\n </ChartGroup>\n </FlexItem>\n </Flex>\n </CardBody>\n <Divider />\n <CardFooter>\n <a href=\"#\">View all clusters</a>\n </CardFooter>\n </Card>\n </GalleryItem>\n </Gallery>\n)","title":"Utilization card 2","lang":"ts"}}>
|
|
99
|
+
|
|
100
|
+
</Example>,
|
|
101
|
+
'Utilization card 3': props =>
|
|
102
|
+
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n Card,\n CardTitle,\n CardHeader,\n CardActions,\n CardBody,\n CardFooter,\n Title,\n Gallery,\n GalleryItem,\n Flex,\n FlexItem,\n Stack,\n StackItem,\n Divider,\n Dropdown,\n DropdownItem,\n DropdownToggle,\n DropdownSeparator\n} from '@patternfly/react-core';\nimport ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';\nimport { Chart, ChartStack, ChartBar, ChartTooltip } from '@patternfly/react-charts';\nimport chart_color_gold_100 from '@patternfly/react-tokens/dist/esm/chart_color_gold_100';\nimport chart_color_gold_300 from '@patternfly/react-tokens/dist/esm/chart_color_gold_300';\nimport chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300';\nimport chart_color_red_100 from '@patternfly/react-tokens/dist/esm/chart_color_red_100';\n\nconst UtilizationCard3: React.FunctionComponent = () => {\n const [isOpen, setIsOpen] = React.useState(false);\n\n const dropdownItems = [\n <DropdownItem key=\"link\">Link</DropdownItem>,\n <DropdownItem key=\"action\" component=\"button\">\n Action\n </DropdownItem>,\n <DropdownItem key=\"disabled link\" isDisabled href=\"www.google.com\">\n Disabled link\n </DropdownItem>,\n <DropdownSeparator key=\"separator\" />,\n <DropdownItem key=\"separated link\">Separated link</DropdownItem>\n ];\n\n return (\n <Gallery hasGutter minWidths={{ default: '360px' }}>\n <GalleryItem>\n <Card id=\"utilization-card-1\" component=\"div\">\n <CardHeader>\n <CardTitle>\n <Title headingLevel=\"h2\" size=\"lg\">\n Recommendations\n </Title>\n </CardTitle>\n <CardActions>\n <Dropdown\n onSelect={() => setIsOpen(!isOpen)}\n toggle={<DropdownToggle onToggle={() => setIsOpen(!isOpen)}>Filter</DropdownToggle>}\n isOpen={isOpen}\n dropdownItems={dropdownItems}\n position=\"right\"\n />\n </CardActions>\n </CardHeader>\n <CardBody>\n <Flex direction={{ default: 'column' }}>\n <FlexItem>\n <span>System</span>\n </FlexItem>\n <Flex>\n <ExclamationCircleIcon className=\"pf-u-danger-color-100\" aria-hidden />\n <a href=\"#\">25 incidents detected</a>\n </Flex>\n <FlexItem>\n <Chart\n ariaDesc=\"Mock incidents chart\"\n ariaTitle=\"Mock stack chart\"\n domainPadding={{ x: [30, 25] }}\n legendData={[\n { name: 'Low', symbol: { fill: chart_color_gold_100.value } },\n { name: 'Important', symbol: { fill: chart_color_gold_300.value } },\n { name: 'Moderate', symbol: { fill: chart_color_orange_300.value } },\n { name: 'Critical', symbol: { fill: chart_color_red_100.value } }\n ]}\n legendPosition=\"bottom-left\"\n height={50}\n padding={{\n bottom: 40,\n left: 0,\n right: 0,\n top: 0\n }}\n width={350}\n showAxis={false}\n >\n <ChartStack\n horizontal\n colorScale={[\n chart_color_gold_100.value,\n chart_color_gold_300.value,\n chart_color_orange_300.value,\n chart_color_red_100.value\n ]}\n >\n <ChartBar\n data={[\n {\n name: 'Low',\n x: 'Cluster A',\n y: 6,\n label: 'Low: 6'\n }\n ]}\n labelComponent={<ChartTooltip constrainToVisibleArea />}\n />\n <ChartBar\n data={[\n {\n name: 'Important',\n x: 'Cluster A',\n y: 2,\n label: 'Important: 2'\n }\n ]}\n labelComponent={<ChartTooltip constrainToVisibleArea />}\n />\n <ChartBar\n data={[\n {\n name: 'Moderate',\n x: 'Cluster A',\n y: 4,\n label: 'Moderate: 4'\n }\n ]}\n labelComponent={<ChartTooltip constrainToVisibleArea />}\n />\n <ChartBar\n data={[\n {\n name: 'Critical',\n x: 'Cluster A',\n y: 2,\n label: 'Critical: 2'\n }\n ]}\n labelComponent={<ChartTooltip constrainToVisibleArea />}\n />\n </ChartStack>\n </Chart>\n </FlexItem>\n </Flex>\n </CardBody>\n <CardFooter>\n <a href=\"#\">See details</a>\n </CardFooter>\n </Card>\n </GalleryItem>\n </Gallery>\n );\n};","title":"Utilization card 3","lang":"ts"}}>
|
|
103
|
+
|
|
104
|
+
</Example>,
|
|
105
|
+
'Utilization card 4': props =>
|
|
106
|
+
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { Card, CardTitle, CardBody, CardFooter, Title, Gallery, GalleryItem } from '@patternfly/react-core';\nimport { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts';\n\nconst UtilizationCard4 = () => (\n <Gallery hasGutter minWidths={{ default: '360px' }}>\n <GalleryItem>\n <Card id=\"utilization-card-1\" component=\"div\">\n <CardTitle>\n <Title headingLevel=\"h2\" size=\"lg\">\n CPU Usage\n </Title>\n </CardTitle>\n <CardBody>\n <ChartDonutThreshold\n ariaDesc=\"Mock storage capacity\"\n ariaTitle=\"Mock donut utilization chart\"\n constrainToVisibleArea={true}\n data={[\n { x: 'Warning at 60%', y: 60 },\n { x: 'Danger at 90%', y: 90 }\n ]}\n height={200}\n labels={({ datum }) => (datum.x ? datum.x : null)}\n padding={{\n bottom: 0,\n left: 10,\n right: 150,\n top: 0\n }}\n width={350}\n >\n <ChartDonutUtilization\n data={{ x: 'Storage capacity', y: 80 }}\n labels={({ datum }) => (datum.x ? `${datum.x}: ${datum.y}%` : null)}\n legendData={[{ name: `Capacity: 80%` }, { name: 'Warning at 60%' }, { name: 'Danger at 90%' }]}\n legendOrientation=\"vertical\"\n title=\"80%\"\n subTitle=\"of 100 GBps\"\n thresholds={[{ value: 60 }, { value: 90 }]}\n />\n </ChartDonutThreshold>{' '}\n </CardBody>\n <CardFooter>\n <a href=\"#\">See details</a>\n </CardFooter>\n </Card>\n </GalleryItem>\n </Gallery>\n)","title":"Utilization card 4","lang":"ts"}}>
|
|
107
|
+
|
|
67
108
|
</Example>,
|
|
68
109
|
'Log view': props =>
|
|
69
110
|
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n Card,\n CardHeader,\n CardActions,\n CardTitle,\n CardBody,\n CardFooter,\n Gallery,\n Title,\n DescriptionList,\n DescriptionListGroup,\n DescriptionListTerm,\n DescriptionListDescription,\n Dropdown,\n DropdownItem,\n DropdownToggle,\n Divider\n} from '@patternfly/react-core';\n\nCardLogViewDemo = () => {\n const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);\n\n const onActionSelect = event => {\n setIsDropdownOpen(!isDropdownOpen);\n };\n\n const onActionToggle = isOpen => {\n setIsDropdownOpen(isOpen);\n };\n\n const dropdownItems = [\n <DropdownItem key=\"action1\" component=\"a\">\n Link\n </DropdownItem>,\n <DropdownItem key=\"action2\" component=\"button\">\n Action\n </DropdownItem>,\n <DropdownItem key=\"disabled action3\" isDisabled component=\"a\">\n Disabled link\n </DropdownItem>,\n <DropdownItem key=\"action4\" component=\"button\">\n Disabled action\n </DropdownItem>,\n <DropdownItem key=\"action5\" component=\"a\">\n Separated link\n </DropdownItem>\n ];\n\n return (\n <Gallery hasGutter style={{ '--pf-l-gallery--GridTemplateColumns--min': '360px' }}>\n <Card id=\"card-log-view-example\">\n <CardHeader>\n <CardActions>\n <Dropdown\n onSelect={onActionSelect}\n toggle={<DropdownToggle onToggle={onActionToggle}>Most recent</DropdownToggle>}\n isOpen={isDropdownOpen}\n dropdownItems={dropdownItems}\n position=\"right\"\n />\n </CardActions>\n <CardTitle>\n <Title headingLevel=\"h2\" size=\"xl\">\n Activity\n </Title>\n </CardTitle>\n </CardHeader>\n <CardBody>\n <DescriptionList>\n <DescriptionListGroup>\n <DescriptionListTerm>Readiness probe failed</DescriptionListTerm>\n <DescriptionListDescription>\n Readiness probe failed: Get https://10.131.0.7:5000/healthz: dial tcp 10.131.0.7:5000: connect:\n connection refused\n </DescriptionListDescription>\n <DescriptionListDescription>\n <date className=\"pf-u-color-200 pf-u-font-size-sm\">Jun 17, 11:02 am</date>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Successful assignment</DescriptionListTerm>\n <DescriptionListDescription>\n Successfully assigned default/example to ip-10-0-130-149.ec2.internal\n </DescriptionListDescription>\n <DescriptionListDescription>\n <date className=\"pf-u-color-200 pf-u-font-size-sm\">Jun 17, 11:13 am</date>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Pulling image</DescriptionListTerm>\n <DescriptionListDescription>Pulling image \"openshift/hello-openshift\"</DescriptionListDescription>\n <DescriptionListDescription>\n <date className=\"pf-u-color-200 pf-u-font-size-sm\">Jun 17, 10:59 am</date>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Created container</DescriptionListTerm>\n <DescriptionListDescription>Created container hello-openshift</DescriptionListDescription>\n <DescriptionListDescription>\n <date className=\"pf-u-color-200 pf-u-font-size-sm\">Jun 17, 10:45 am</date>\n </DescriptionListDescription>\n </DescriptionListGroup>\n </DescriptionList>\n </CardBody>\n <Divider />\n <CardFooter>\n <a href=\"#\">View all activity</a>\n </CardFooter>\n </Card>\n </Gallery>\n );\n};","title":"Log view","lang":"js"}}>
|
|
@@ -86,6 +127,10 @@ const Component = () => (
|
|
|
86
127
|
{React.createElement(pageData.examples["Aggregate status card"])}
|
|
87
128
|
{React.createElement(pageData.examples["Status"])}
|
|
88
129
|
{React.createElement(pageData.examples["Status Tabbed"])}
|
|
130
|
+
{React.createElement(pageData.examples["Utilization card 1"])}
|
|
131
|
+
{React.createElement(pageData.examples["Utilization card 2"])}
|
|
132
|
+
{React.createElement(pageData.examples["Utilization card 3"])}
|
|
133
|
+
{React.createElement(pageData.examples["Utilization card 4"])}
|
|
89
134
|
{React.createElement(pageData.examples["Log view"])}
|
|
90
135
|
{React.createElement(pageData.examples["Event view"])}
|
|
91
136
|
</React.Fragment>
|
package/src/generated/index.js
CHANGED
|
@@ -812,8 +812,8 @@ module.exports = {
|
|
|
812
812
|
'/components/card/react-demos': {
|
|
813
813
|
id: "Card",
|
|
814
814
|
title: "Card",
|
|
815
|
-
toc: [{"text":"Demos"},[{"text":"Horizontal card grid"},{"text":"Horizontal split"},{"text":"Details card"},{"text":"Aggregate status card"},{"text":"Status"},{"text":"Status Tabbed"},{"text":"Log view"},{"text":"Event view"}]],
|
|
816
|
-
examples: ["Horizontal card grid","Horizontal split","Details card","Aggregate status card","Status","Status Tabbed","Log view","Event view"],
|
|
815
|
+
toc: [{"text":"Demos"},[{"text":"Horizontal card grid"},{"text":"Horizontal split"},{"text":"Details card"},{"text":"Aggregate status card"},{"text":"Status"},{"text":"Status Tabbed"},{"text":"Utilization card 1"},{"text":"Utilization card 2"},{"text":"Utilization card 3"},{"text":"Utilization card 4"},{"text":"Log view"},{"text":"Event view"}]],
|
|
816
|
+
examples: ["Horizontal card grid","Horizontal split","Details card","Aggregate status card","Status","Status Tabbed","Utilization card 1","Utilization card 2","Utilization card 3","Utilization card 4","Log view","Event view"],
|
|
817
817
|
section: "components",
|
|
818
818
|
source: "react-demos",
|
|
819
819
|
Component: () => import(/* webpackChunkName: "components/card/react-demos/index" */ './components/card/react-demos')
|