@patternfly/react-core 6.0.0-alpha.1 → 6.0.0-alpha.2

package/src/demos/examples/Card/CardStatus.tsx

@@ -0,0 +1,262 @@
+/* eslint-disable camelcase */
+import * as React from 'react';
+import {
+  Alert,
+  Card,
+  CardBody,
+  CardHeader,
+  Divider,
+  Flex,
+  FlexItem,
+  Grid,
+  GridItem,
+  Label,
+  NotificationDrawer,
+  NotificationDrawerBody,
+  NotificationDrawerGroup,
+  NotificationDrawerList,
+  NotificationDrawerListItem,
+  NotificationDrawerListItemBody,
+  NotificationDrawerListItemHeader,
+  Popover,
+  Title
+} from '@patternfly/react-core';
+import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
+import BellIcon from '@patternfly/react-icons/dist/js/icons/bell-icon';
+import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+import global_success_color_100 from '@patternfly/react-tokens/dist/esm/global_success_color_100';
+import global_danger_color_100 from '@patternfly/react-tokens/dist/esm/global_danger_color_100';
+import global_Color_200 from '@patternfly/react-tokens/dist/esm/global_Color_200';
+
+export const CardStatus: React.FunctionComponent = () => {
+  const [drawerExpanded, setDrawerExpanded] = React.useState(false);
+  const handleDrawerToggleClick = () => {
+    setDrawerExpanded(!drawerExpanded);
+  };
+
+  const [rowsExpanded, setRowsExpanded] = React.useState([false, false, false]);
+  const handleToggleExpand = (_: any, rowIndex: number) => {
+    const newRowsExpanded = [...rowsExpanded];
+    newRowsExpanded[rowIndex] = !rowsExpanded[rowIndex];
+    setRowsExpanded(newRowsExpanded);
+  };
+
+  const header = (
+    <CardHeader>
+      <Title headingLevel="h4" size="lg">
+        Status
+      </Title>
+    </CardHeader>
+  );
+
+  const columns = ['Components', 'Response Rate'];
+
+  const rows = [
+    {
+      content: ['API Servers', '20%'],
+      child: (
+        <Alert
+          title="This is a critical alert that can be associated with the control panel."
+          variant="danger"
+          isInline
+        ></Alert>
+      )
+    },
+    {
+      content: ['Controller Managers', '100%'],
+      child: (
+        <Alert
+          title="This is a critical alert that can be associated with the control panel."
+          variant="danger"
+          isInline
+        ></Alert>
+      )
+    },
+    {
+      content: ['etcd', '91%'],
+      child: (
+        <Alert
+          title="This is a critical alert that can be associated with the control panel."
+          variant="danger"
+          isInline
+        ></Alert>
+      )
+    }
+  ];
+
+  const popoverBodyContent = (
+    <>
+      <div>
+        Components of the Control Panel are responsible for maintaining and reconciling the state of the cluster.
+      </div>
+      <Table variant="compact">
+        <Thead>
+          <Tr>
+            <Th />
+            {columns.map((column, columnIndex) => (
+              <Th key={columnIndex} modifier="fitContent">
+                {column}
+              </Th>
+            ))}
+          </Tr>
+        </Thead>
+        {rows.map((row, rowIndex) => {
+          const parentRow = (
+            <Tr key={rowIndex}>
+              <Td
+                key={`${rowIndex}_0`}
+                expand={row.child && { isExpanded: rowsExpanded[rowIndex], rowIndex, onToggle: handleToggleExpand }}
+              />
+              {row.content.map((cell, cellIndex) => (
+                <Td key={`${rowIndex}_${cellIndex}`} dataLabel={columns[cellIndex]} modifier="fitContent">
+                  {cell}
+                </Td>
+              ))}
+            </Tr>
+          );
+          const childRow = row.child ? (
+            <Tr key={`${rowIndex}_child`} isExpanded={rowsExpanded[rowIndex]}>
+              <Td key={`${rowIndex}_1`} colSpan={3} dataLabel={`${rowIndex}_child`}>
+                <ExpandableRowContent>{row.child}</ExpandableRowContent>
+              </Td>
+            </Tr>
+          ) : null;
+          return (
+            <Tbody key={rowIndex} isExpanded={rowsExpanded[rowIndex]}>
+              {parentRow}
+              {childRow}
+            </Tbody>
+          );
+        })}
+      </Table>
+    </>
+  );
+
+  const body = (
+    <CardBody>
+      <Grid hasGutter sm={6} lg={3}>
+        <GridItem>
+          <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+            <FlexItem>
+              <CheckCircleIcon color={global_success_color_100.var} />
+            </FlexItem>
+            <FlexItem>
+              <span>Cluster</span>
+            </FlexItem>
+          </Flex>
+        </GridItem>
+        <GridItem>
+          <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+            <FlexItem>
+              <ExclamationCircleIcon color={global_danger_color_100.var} />
+            </FlexItem>
+            <FlexItem>
+              <Popover headerContent="Control Panel Status" bodyContent={popoverBodyContent} minWidth="400px">
+                <a href="#" onClick={(e) => e.preventDefault()}>
+                  Control Panel
+                </a>
+              </Popover>
+            </FlexItem>
+          </Flex>
+        </GridItem>
+        <GridItem>
+          <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+            <FlexItem>
+              <ExclamationCircleIcon color={global_danger_color_100.var} />
+            </FlexItem>
+            <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}>
+              <FlexItem>
+                <a href="#">Operators</a>
+              </FlexItem>
+              <FlexItem>
+                <span style={{ color: global_Color_200.var }}>1 degraded</span>
+              </FlexItem>
+            </Flex>
+          </Flex>
+        </GridItem>
+        <GridItem>
+          <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+            <FlexItem>
+              <CheckCircleIcon color={global_success_color_100.var} />
+            </FlexItem>
+            <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}>
+              <FlexItem>
+                <a href="#">Image Vulnerabilities</a>
+              </FlexItem>
+              <FlexItem>
+                <span style={{ color: global_Color_200.var }}>0 vulnerabilities</span>
+              </FlexItem>
+            </Flex>
+          </Flex>
+        </GridItem>
+      </Grid>
+    </CardBody>
+  );
+
+  const drawerTitle = (
+    <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+      <FlexItem spacer={{ default: 'spacerMd' }}>
+        <span>Notifications</span>
+      </FlexItem>
+      <Label color="red" icon={<ExclamationCircleIcon />}>
+        1
+      </Label>
+      <Label color="orange" icon={<ExclamationTriangleIcon />}>
+        3
+      </Label>
+      <Label color="green" icon={<CheckCircleIcon />}>
+        3
+      </Label>
+      <Label color="blue" icon={<ExclamationCircleIcon />}>
+        3
+      </Label>
+      <Label color="green" icon={<BellIcon />}>
+        3
+      </Label>
+    </Flex>
+  );
+
+  const drawer = (
+    <NotificationDrawer>
+      <NotificationDrawerBody>
+        <NotificationDrawerGroup
+          count={0}
+          onExpand={handleDrawerToggleClick}
+          isExpanded={drawerExpanded}
+          title={drawerTitle}
+          headingLevel="h4"
+        >
+          <NotificationDrawerList isHidden={!drawerExpanded}>
+            <NotificationDrawerListItem variant="danger">
+              <NotificationDrawerListItemHeader
+                variant="danger"
+                headingLevel="h5"
+                title="Critical alert regarding control plane"
+              />
+              <NotificationDrawerListItemBody>
+                This is a long description to show how the title will wrap if it is long and wraps to multiple lines.
+              </NotificationDrawerListItemBody>
+            </NotificationDrawerListItem>
+            <NotificationDrawerListItem variant="warning">
+              <NotificationDrawerListItemHeader variant="warning" headingLevel="h5" title="Warning alert" />
+              <NotificationDrawerListItemBody>
+                This is a warning notification description.
+              </NotificationDrawerListItemBody>
+            </NotificationDrawerListItem>
+          </NotificationDrawerList>
+        </NotificationDrawerGroup>
+      </NotificationDrawerBody>
+    </NotificationDrawer>
+  );
+
+  return (
+    <Card>
+      {header}
+      {body}
+      <Divider />
+      {drawer}
+    </Card>
+  );
+};

package/src/demos/examples/Card/CardStatusTabbed.tsx

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import {
+  Card,
+  CardBody,
+  CardHeader,
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  Flex,
+  FlexItem,
+  Tab,
+  TabContent,
+  Tabs,
+  TabTitleText,
+  Title
+} from '@patternfly/react-core';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+
+const descriptionListData = [
+  {
+    status: 'Running',
+    resourceName: 'Resource name that is long and can wrap',
+    detail: '121 Systems',
+    icon: <CheckCircleIcon />
+  },
+  {
+    status: 'Ready',
+    resourceName: 'Resource name that is long and can wrap',
+    detail: '123 Systems',
+    icon: <ExclamationCircleIcon />
+  },
+  {
+    status: 'Running',
+    resourceName: 'Resource name that is long and can wrap',
+    detail: '122 Systems',
+    icon: <CheckCircleIcon />
+  },
+  {
+    status: 'Ready',
+    resourceName: 'Resource name that is long and can wrap',
+    detail: '124 Systems',
+    icon: <ExclamationCircleIcon />
+  }
+];
+
+export const CardStatusTabbed: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = React.useState(0);
+  const handleTabClick = (_e: React.MouseEvent<HTMLElement, MouseEvent>, tabIndex: string | number) => {
+    setActiveTabKey(Number(tabIndex));
+  };
+
+  const tabContent = (
+    <DescriptionList isHorizontal columnModifier={{ lg: '2Col' }}>
+      {descriptionListData.map(({ status, resourceName, detail, icon }, index) => (
+        <DescriptionListGroup key={index}>
+          <DescriptionListTerm>
+            <Flex>
+              <FlexItem>{icon}</FlexItem>
+              <FlexItem>
+                <Title headingLevel="h4" size="md">
+                  {status}
+                </Title>
+              </FlexItem>
+            </Flex>
+          </DescriptionListTerm>
+          <DescriptionListDescription>
+            <a href="#">{resourceName}</a>
+            <div>{detail}</div>
+          </DescriptionListDescription>
+        </DescriptionListGroup>
+      ))}
+    </DescriptionList>
+  );
+
+  return (
+    <>
+      <Card>
+        <CardHeader>
+          <Title headingLevel="h4" size="lg">
+            Status
+          </Title>
+        </CardHeader>
+        <CardBody>
+          <Tabs isFilled id="status-tabs" activeKey={activeTabKey} onSelect={handleTabClick}>
+            {[1, 2, 3].map((tab, tabIndex) => (
+              <Tab
+                key={tabIndex}
+                eventKey={tabIndex}
+                title={<TabTitleText>{`Object ${tabIndex + 1}`}</TabTitleText>}
+                tabContentId={`tabContent${tabIndex}`}
+              />
+            ))}
+          </Tabs>
+        </CardBody>
+        <CardBody>
+          {[1, 2, 3].map((tab, tabIndex) => (
+            <TabContent
+              key={tabIndex}
+              eventKey={tabIndex}
+              id={`tabContent${tabIndex}`}
+              activeKey={activeTabKey}
+              hidden={tabIndex !== activeTabKey}
+            >
+              {tabContent}
+            </TabContent>
+          ))}
+        </CardBody>
+      </Card>
+    </>
+  );
+};

package/src/demos/examples/Card/CardTrendDemo1.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import {
+  Card,
+  CardTitle,
+  CardBody,
+  CardHeader,
+  Title,
+  Gallery,
+  GalleryItem,
+  Flex,
+  FlexItem,
+  Select,
+  SelectList,
+  SelectOption,
+  MenuToggle,
+  MenuToggleElement
+} from '@patternfly/react-core';
+import { ChartArea, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts';
+import text from '@patternfly/react-styles/css/utilities/Text/text';
+
+export const CardTrendDemo1: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const selectItems = (
+    <SelectList>
+      <SelectOption key="option1" value="Last hour">
+        Last hour
+      </SelectOption>
+      <SelectOption key="option2" value="Last 6 hours">
+        Last 6 hours
+      </SelectOption>
+      <SelectOption key="option3" value="Last 24 hours">
+        Last 24 hours
+      </SelectOption>
+      <SelectOption key="option4" value="Last 7 days">
+        Last 7 days
+      </SelectOption>
+    </SelectList>
+  );
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle ref={toggleRef} onClick={() => setIsOpen(!isOpen)} isExpanded={isOpen} variant="plainText">
+      Filter
+    </MenuToggle>
+  );
+
+  const headerActions = (
+    <Select onSelect={() => setIsOpen(!isOpen)} onOpenChange={setIsOpen} isOpen={isOpen} toggle={toggle}>
+      {selectItems}
+    </Select>
+  );
+
+  return (
+    <React.Fragment>
+      <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to{' '}
+      <code>baseline</code> alignment.
+      <br />
+      <br />
+      <Gallery hasGutter minWidths={{ default: '360px' }}>
+        <GalleryItem>
+          <Card id="trend-card-1-card" component="div">
+            <CardHeader actions={{ actions: headerActions, hasNoOffset: true }}>
+              <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}>
+                <FlexItem>
+                  <CardTitle>
+                    <Title headingLevel="h4" size="lg">
+                      1,050,765 IOPS
+                    </Title>
+                  </CardTitle>
+                </FlexItem>
+                <FlexItem>
+                  <span className={text.color_200}>Workload</span>
+                </FlexItem>
+              </Flex>
+            </CardHeader>
+            <CardBody>
+              <ChartGroup
+                ariaDesc="Mock average cluster utilization"
+                ariaTitle="Mock cluster sparkline chart"
+                containerComponent={
+                  <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />
+                }
+                height={100}
+                maxDomain={{ y: 9 }}
+                padding={0}
+                width={400}
+              >
+                <ChartArea
+                  data={[
+                    { name: 'Cluster', x: '2015', y: 7 },
+                    { name: 'Cluster', x: '2016', y: 6 },
+                    { name: 'Cluster', x: '2017', y: 8 },
+                    { name: 'Cluster', x: '2018', y: 3 },
+                    { name: 'Cluster', x: '2019', y: 4 },
+                    { name: 'Cluster', x: '2020', y: 1 },
+                    { name: 'Cluster', x: '2021', y: 0 }
+                  ]}
+                />
+              </ChartGroup>
+            </CardBody>
+          </Card>
+        </GalleryItem>
+      </Gallery>
+    </React.Fragment>
+  );
+};

package/src/demos/examples/Card/CardTrendDemo2.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import {
+  Card,
+  CardTitle,
+  CardFooter,
+  CardHeader,
+  Title,
+  Gallery,
+  GalleryItem,
+  Flex,
+  FlexItem
+} from '@patternfly/react-core';
+import { ChartArea, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts';
+import text from '@patternfly/react-styles/css/utilities/Text/text';
+
+export const CardTrendDemo2: React.FunctionComponent = () => (
+  <Gallery hasGutter minWidths={{ default: '360px' }}>
+    <GalleryItem>
+      <Card id="trend-card-2-card" component="div">
+        <CardHeader>
+          <Flex alignItems={{ default: 'alignItemsCenter' }}>
+            <FlexItem flex={{ default: 'flexNone' }}>
+              <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}>
+                <FlexItem>
+                  <CardTitle>
+                    <Title headingLevel="h4" size="2xl">
+                      842 TB
+                    </Title>
+                  </CardTitle>
+                </FlexItem>
+                <FlexItem>
+                  <span className={text.color_200}>Storage capacity</span>
+                </FlexItem>
+              </Flex>
+            </FlexItem>
+            <FlexItem flex={{ default: 'flex_1' }}>
+              <ChartGroup
+                ariaDesc="Mock average cluster utilization"
+                ariaTitle="Mock cluster sparkline chart"
+                containerComponent={
+                  <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />
+                }
+                height={100}
+                maxDomain={{ y: 9 }}
+                padding={0}
+                width={400}
+              >
+                <ChartArea
+                  data={[
+                    { name: 'Cluster', x: '2015', y: 7 },
+                    { name: 'Cluster', x: '2016', y: 6 },
+                    { name: 'Cluster', x: '2017', y: 8 },
+                    { name: 'Cluster', x: '2018', y: 3 },
+                    { name: 'Cluster', x: '2019', y: 4 },
+                    { name: 'Cluster', x: '2020', y: 1 },
+                    { name: 'Cluster', x: '2021', y: 0 }
+                  ]}
+                />
+              </ChartGroup>
+            </FlexItem>
+          </Flex>
+        </CardHeader>
+        <CardFooter>
+          <Flex>
+            <FlexItem>
+              <a href="#">Action 1</a>
+            </FlexItem>
+            <FlexItem>
+              <a href="#">Action 2</a>
+            </FlexItem>
+          </Flex>
+        </CardFooter>
+      </Card>
+    </GalleryItem>
+  </Gallery>
+);

package/src/demos/examples/Card/CardUtilizationDemo1.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import {
+  Card,
+  CardTitle,
+  CardBody,
+  CardFooter,
+  Title,
+  Gallery,
+  GalleryItem,
+  Flex,
+  FlexItem,
+  Stack,
+  Divider
+} from '@patternfly/react-core';
+import { ChartArea, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts';
+
+export const CardUtilizationDemo1: React.FunctionComponent = () => (
+  <Gallery hasGutter minWidths={{ default: '360px' }}>
+    <GalleryItem>
+      <Card id="utilization-card-1-card" component="div">
+        <CardTitle>
+          <Title headingLevel="h4" size="lg">
+            Top Utilized Clusters
+          </Title>
+        </CardTitle>
+        <CardBody>
+          <Flex direction={{ default: 'column' }}>
+            <FlexItem>
+              <Stack>
+                <b>Cluster-1204</b>
+                <span>27.3 cores available</span>
+              </Stack>
+            </FlexItem>
+            <FlexItem>
+              <ChartGroup
+                ariaDesc="Mock average cluster utilization"
+                ariaTitle="Mock cluster sparkline chart"
+                containerComponent={
+                  <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />
+                }
+                height={100}
+                maxDomain={{ y: 9 }}
+                padding={0}
+                width={400}
+              >
+                <ChartArea
+                  data={[
+                    { name: 'Cluster', x: '2015', y: 7 },
+                    { name: 'Cluster', x: '2016', y: 6 },
+                    { name: 'Cluster', x: '2017', y: 8 },
+                    { name: 'Cluster', x: '2018', y: 3 },
+                    { name: 'Cluster', x: '2019', y: 4 },
+                    { name: 'Cluster', x: '2020', y: 1 },
+                    { name: 'Cluster', x: '2021', y: 0 }
+                  ]}
+                />
+              </ChartGroup>
+            </FlexItem>
+            <FlexItem>
+              <a href="#">View details</a>
+            </FlexItem>
+          </Flex>
+        </CardBody>
+        <CardBody>
+          <Flex direction={{ default: 'column' }}>
+            <FlexItem>
+              <Stack>
+                <b>Abcdef-1204</b>
+                <span>50.6 cores available</span>
+              </Stack>
+            </FlexItem>
+            <FlexItem>
+              <ChartGroup
+                ariaDesc="Mock average cluster utilization"
+                ariaTitle="Mock cluster sparkline chart"
+                containerComponent={
+                  <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />
+                }
+                height={100}
+                maxDomain={{ y: 9 }}
+                padding={0}
+                width={400}
+              >
+                <ChartArea
+                  data={[
+                    { name: 'Cluster', x: '2015', y: 7 },
+                    { name: 'Cluster', x: '2016', y: 6 },
+                    { name: 'Cluster', x: '2017', y: 8 },
+                    { name: 'Cluster', x: '2018', y: 3 },
+                    { name: 'Cluster', x: '2019', y: 4 },
+                    { name: 'Cluster', x: '2020', y: 1 },
+                    { name: 'Cluster', x: '2021', y: 0 }
+                  ]}
+                />
+              </ChartGroup>
+            </FlexItem>
+            <FlexItem>
+              <a href="#">View details</a>
+            </FlexItem>
+          </Flex>
+        </CardBody>
+        <Divider />
+        <CardFooter>
+          <a href="#">View all clusters</a>
+        </CardFooter>
+      </Card>
+    </GalleryItem>
+  </Gallery>
+);