+ {children}
+
+ {ansibleObject.type}
+ )
+ }
+ return (
+ Automation that does more
++ Red Hat Ansible Automation Platform offers more capabilities, + accessibility, and flexibility, so you can bring the power of + automation to the teams, tasks, and environments that need it. +
+Another action
,
+ onClick: () => console.log("clicked on Another action"), // eslint-disable-line no-console
+ },
+ {
+ isSeparator: true,
+ },
+ {
+ title: "Third action",
+ onClick: () => console.log("clicked on Third action"), // eslint-disable-line no-console
+ },
+ ];
+
+ const rows = integrations.map(
+ ({ name, type, status, statusText }, index) => ({
+ id: name,
+ row: [
+ {
+ id: "select",
+ row: name,
+ cell: undefined,
+ props: {
+ select: {
+ index,
+ rowIndex: index,
+ onSelect: () => { },
+ isSelected: false,
+ },
+ },
+ },
+ name,
+ type,
+ {
+ cell: (
+
+ ),
+ },
+ {
+ cell:
+
+
+
+
+
+ {data.details.map((detail, index) => (
+
+ {detail.term}
+
+ {detail.description}
+
+
+ ))}
+
+
+ {data.actionText && (
+ <>
+
+
+
+
+ )}
+
+
+
+
+ {data.title}
+
+ {data.status}
+
+ + {data.description} +
+
+
+
+
+ );
+};
+
+export const TestReactFlow = () => (
+ | Name | +Project | +Progress | ++ |
|---|---|---|---|
| + + | ++ + | +
+ |
+
+ |
+
+
+
+ setIsKebabOpen(false)}
+ onOpenChange={(isOpen: boolean) => setIsKebabOpen(isOpen)}
+ toggle={kebabToggle}
+ popperProps={{ position: "right" }}
+ >
+ {dropdownItems}
+
+ ),
+ hasNoOffset: false,
+ className: "",
+ }}
+ >
+
+
+
+
+
+
+ `${datum.name}: ${datum.y}`}
+ constrainToVisibleArea
+ />
+ }
+ height={250}
+ padding={{
+ bottom: 50,
+ left: 50,
+ right: 20,
+ top: 20,
+ }}
+ themeColor={ChartThemeColor.multi}
+ width={400}
+ >
+
+
+
+
+
+
+
+ );
+};
+NetworkActivityCard.displayName = "NetworkActivityCard";
+
+export default NetworkActivityCard;
diff --git a/src/components/DashboardContent/AnimationsOverviewStorage.tsx b/src/components/DashboardContent/AnimationsOverviewStorage.tsx
new file mode 100644
index 0000000..783b060
--- /dev/null
+++ b/src/components/DashboardContent/AnimationsOverviewStorage.tsx
@@ -0,0 +1,130 @@
+import { useState } from "react";
+import {
+ CardTitle,
+ CardBody,
+ CardFooter,
+ Flex,
+ Button,
+ Dropdown,
+ DropdownItem,
+ MenuToggle,
+ Card,
+ CardHeader,
+ DropdownList,
+ FlexItem,
+} from "@patternfly/react-core";
+import {
+ ChartDonutThreshold,
+ ChartDonutUtilization,
+} from "@patternfly/react-charts/dist/esm/victory/components";
+import StorageDomainIcon from "@patternfly/react-icons/dist/esm/icons/storage-domain-icon";
+import ArrowRightIcon from "@patternfly/react-icons/dist/esm/icons/arrow-right-icon";
+import EllipsisVIcon from "@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon";
+import { Glass } from "../lib/Glass";
+
+export const StorageCard: React.FunctionComponent = () => {
+ const [isKebabOpen, setIsKebabOpen] = useState(false);
+
+ const dropdownItems = [
+
+ Components of the Control Panel are responsible for maintaining and
+ reconciling the state of the cluster.
+
+ | + {columns.map((column, columnIndex) => ( + | + {column} + | + ))} +
|---|---|
| + {row.content.map((cell, cellIndex) => ( + | + {cell} + | + ))} +
|
+ |
+
+
+ `${datum.x}: ${datum.y}`
+ }
+ legendData={[
+ { name: "Fault Tolerance: 4" },
+ { name: "Performance: 4" },
+ { name: "Service Availability: 25" },
+ { name: "Security: 12" },
+ ]}
+ legendOrientation="vertical"
+ legendPosition="right"
+ name="chart1"
+ padding={{
+ bottom: 20,
+ left: 20,
+ right: 200, // Adjusted to accommodate legend
+ top: 20,
+ }}
+ width={350}
+ />
+
+ |
+ |
+ Name | +
|---|---|
|
+ |
+
+ |
+
+
+ handleNoGlassToggle(evt, !checked)}
+ />
+
+
+
+
+ );
+
+ if (hasDrawer) {
+ return (
+
+ {header}
+
+
+ {panelStart}
+
+ {main}
+
+ {panelEnd}
+
+
+ {footer}
+
+
+ {children}
+
+ );
+
+ if (hasDrawer) {
+ return (
+ {children}
;
+};
diff --git a/src/components/lib/CompassHeader.tsx b/src/components/lib/CompassHeader.tsx
new file mode 100644
index 0000000..c207b6e
--- /dev/null
+++ b/src/components/lib/CompassHeader.tsx
@@ -0,0 +1,24 @@
+import { css } from "@patternfly/react-styles";
+
+interface CompassHeaderProps {
+ /** Content for the logo area */
+ logo?: React.ReactNode;
+ /** Content for the navigation area */
+ nav?: React.ReactNode;
+ /** Content for the profile area */
+ profile?: React.ReactNode;
+}
+
+export const CompassHeader: React.FunctionComponent{logo}
+ {nav}
+ {profile}
+
+);
+
+CompassHeader.displayName = "CompassHeader";
diff --git a/src/components/lib/CompassHero.tsx b/src/components/lib/CompassHero.tsx
new file mode 100644
index 0000000..e36ae9d
--- /dev/null
+++ b/src/components/lib/CompassHero.tsx
@@ -0,0 +1,39 @@
+import { Flex, FlexItem } from "@patternfly/react-core";
+import { css } from "@patternfly/react-styles";
+
+interface CompassHeroProps
+ extends Omit
+
+ );
+ }
+
+ return (
+
+
+ {content}
+
+
+
+
+ );
+};
+
+CompassHero.displayName = "CompassHero";
diff --git a/src/components/lib/CompassMainHeader.tsx b/src/components/lib/CompassMainHeader.tsx
new file mode 100644
index 0000000..67b1197
--- /dev/null
+++ b/src/components/lib/CompassMainHeader.tsx
@@ -0,0 +1,40 @@
+import { Flex, FlexItem } from "@patternfly/react-core";
+import { css } from "@patternfly/react-styles";
+
+interface CompassMainHeaderProps
+ extends Omit{children}
+
+
+ {title}
+ {toolbar}
+
+
+ );
+ }
+
+ return (
+
+ {children}
+
+ );
+};
+
+CompassMainHeader.displayName = "CompassMainHeader";
diff --git a/src/components/lib/CompassPage.tsx b/src/components/lib/CompassPage.tsx
new file mode 100644
index 0000000..77180e1
--- /dev/null
+++ b/src/components/lib/CompassPage.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import { Page, PageSection, PageProps } from "@patternfly/react-core";
+import { CompassHero } from "./CompassHero";
+
+interface CompassPageProps extends Omit
+ {toolbar}
+
+ )}
+ {body}
+
+ {isGroup ? (
+ {children}
+ ) : (
+ {children}
+ )}
+
+ );
+ }
+);
+
+CompassPageBody.displayName = "CompassPageBody";
diff --git a/src/components/lib/CompassSection.tsx b/src/components/lib/CompassSection.tsx
new file mode 100644
index 0000000..d29925d
--- /dev/null
+++ b/src/components/lib/CompassSection.tsx
@@ -0,0 +1,20 @@
+import { css } from "@patternfly/react-styles";
+
+interface CompassSectionProps extends React.HTMLProps
+ {children}
+
+);
+
+CompassSection.displayName = "CompassSection";
diff --git a/src/components/lib/Glass.tsx b/src/components/lib/Glass.tsx
new file mode 100644
index 0000000..8398440
--- /dev/null
+++ b/src/components/lib/Glass.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+interface GlassProps extends React.HTMLAttributes
+ {children}
+
+ );
+};
diff --git a/src/components/lib/GlassCard.tsx b/src/components/lib/GlassCard.tsx
new file mode 100644
index 0000000..3672fc3
--- /dev/null
+++ b/src/components/lib/GlassCard.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { Card, CardProps } from "@patternfly/react-core";
+
+interface GlassCardProps extends Omit
+
+
+ );
+};
diff --git a/src/components/lib/assets/RHServerStackIcon.tsx b/src/components/lib/assets/RHServerStackIcon.tsx
new file mode 100644
index 0000000..6eec153
--- /dev/null
+++ b/src/components/lib/assets/RHServerStackIcon.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+export const RHServerStackIcon: React.FunctionComponent = () => {
+ return (
+
+ );
+};
diff --git a/src/components/lib/assets/hero-bg.png b/src/components/lib/assets/hero-bg.png
new file mode 100644
index 0000000..a117bdb
Binary files /dev/null and b/src/components/lib/assets/hero-bg.png differ
diff --git a/src/components/lib/assets/rh-wallpaper-dark.png b/src/components/lib/assets/rh-wallpaper-dark.png
new file mode 100644
index 0000000..554e515
Binary files /dev/null and b/src/components/lib/assets/rh-wallpaper-dark.png differ
diff --git a/src/components/lib/assets/rh-wallpaper-light.png b/src/components/lib/assets/rh-wallpaper-light.png
new file mode 100644
index 0000000..035d628
Binary files /dev/null and b/src/components/lib/assets/rh-wallpaper-light.png differ
diff --git a/src/components/lib/assets/wallpaper-dark.png b/src/components/lib/assets/wallpaper-dark.png
new file mode 100644
index 0000000..14109c3
Binary files /dev/null and b/src/components/lib/assets/wallpaper-dark.png differ
diff --git a/src/components/lib/assets/wallpaper-light.png b/src/components/lib/assets/wallpaper-light.png
new file mode 100644
index 0000000..9a76b0f
Binary files /dev/null and b/src/components/lib/assets/wallpaper-light.png differ
diff --git a/src/components/lib/css/compass.css b/src/components/lib/css/compass.css
new file mode 100644
index 0000000..b6b1f63
--- /dev/null
+++ b/src/components/lib/css/compass.css
@@ -0,0 +1,411 @@
+@property --thinking--spread {
+ syntax: "