diff --git a/src/Containers/ClusterLists/ClustersList.js b/src/Containers/ClusterLists/ClustersList.js
index 8059e2534..951f03a4e 100644
--- a/src/Containers/ClusterLists/ClustersList.js
+++ b/src/Containers/ClusterLists/ClustersList.js
@@ -7,12 +7,13 @@ import MinusCircleIcon from '@patternfly/react-icons/dist/dynamic/icons/minus-ci
import PlusCircleIcon from '@patternfly/react-icons/dist/dynamic/icons/plus-circle-icon';
import PropTypes from 'prop-types';
import React, { useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
import { readJobExplorer, readJobExplorerOptions } from '../../Api';
import ApiErrorState from '../../Components/ApiStatus/ApiErrorState';
import JobStatus from '../../Components/JobStatus';
import Pagination from '../../Components/Pagination';
import FilterableToolbar from '../../Components/Toolbar';
-import { useQueryParams } from '../../QueryParams';
+import { createUrl, useQueryParams } from '../../QueryParams';
import { clusterList } from '../../Utilities/constants';
import useRequest from '../../Utilities/useRequest';
import { PageActionType } from '../../framework/PageActions/PageActionType';
@@ -43,6 +44,9 @@ const ClustersList = ({ activeClusters }) => {
fetchEndpoints(queryParams);
}, [queryParams]);
+ const navigate = useNavigate();
+ const { pathname } = useLocation();
+
if (error) return ;
const setSort = (idx) => {
@@ -125,7 +129,13 @@ const ClustersList = ({ activeClusters }) => {
additionalControls={
activeClusters
? [
- } key={'test'}>
+ }
+ key={'test'}
+ onClick={() => {
+ navigate(createUrl(`${pathname}/create/local`));
+ }}
+ >
Create Cluster
,
]
diff --git a/src/Containers/ClusterLists/CreateClustersPage.js b/src/Containers/ClusterLists/CreateClustersPage.js
new file mode 100644
index 000000000..8872dda91
--- /dev/null
+++ b/src/Containers/ClusterLists/CreateClustersPage.js
@@ -0,0 +1,43 @@
+import { Card } from '@patternfly/react-core/dist/dynamic/components/Card';
+import CaretLeftIcon from '@patternfly/react-icons/dist/dynamic/icons/caret-left-icon';
+import React from 'react';
+import { PageHeader } from '../../framework/PageHeader';
+import LocalTab from './LocalTab';
+
+const CreateClustersPage = () => {
+ const tabsArray = [
+ {
+ id: 0,
+ name: (
+ <>
+
+ {'Back to Clusters'}
+ >
+ ),
+ link: '../cluster-list',
+ },
+ { id: 1, name: 'Local', link: `../create/local` },
+ {
+ id: 2,
+ name: 'Cloud',
+ link: `../create/cloud`,
+ },
+ ];
+ return (
+
+
+
+
+
+ {location.pathname.includes('local') && (
+
+ )}
+ {location.pathname.includes('cloud') && (
+
+ )}
+
+
+ );
+};
+
+export default CreateClustersPage;
diff --git a/src/Containers/ClusterLists/LocalTab.js b/src/Containers/ClusterLists/LocalTab.js
new file mode 100644
index 000000000..a6f99fd44
--- /dev/null
+++ b/src/Containers/ClusterLists/LocalTab.js
@@ -0,0 +1,53 @@
+import { Card } from '@patternfly/react-core/dist/dynamic/components/Card';
+import { CardBody } from '@patternfly/react-core/dist/dynamic/components/Card';
+import { Text } from '@patternfly/react-core/dist/dynamic/components/Text';
+import { Title } from '@patternfly/react-core/dist/dynamic/components/Title';
+import PropTypes from 'prop-types';
+import React from 'react';
+import styled from 'styled-components';
+import RoutedTabs from '../../Components/RoutedTabs';
+
+const StepNumber = styled.div`
+ height: 50px;
+ width: 50px;
+ border: 1px solid;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+`;
+
+const LocalTab = ({ tabsArray }) => {
+ return (
+ <>
+
+
+
+
+ {'Download Red Hat Ansible Automation Platform'}
+
+
+ {
+ 'Create a minimal cluster on your desktop/laptop for local development and testing'
+ }
+
+
+
+
+
+
+
+ 1
+
+
+
+
+ >
+ );
+};
+
+LocalTab.propTypes = {
+ tabsArray: PropTypes.array,
+};
+
+export default LocalTab;
diff --git a/src/Routes.tsx b/src/Routes.tsx
index f6b1c3f4e..e2d30947d 100644
--- a/src/Routes.tsx
+++ b/src/Routes.tsx
@@ -45,6 +45,12 @@ const components = {
[Paths.clusterList]: asyncComponent(
() => import('./Containers/ClusterLists/ClusterListsPage')
),
+ [Paths.createCluster]: asyncComponent(
+ () => import('./Containers/ClusterLists/CreateClustersPage')
+ ),
+ [Paths.createClusterTabs]: asyncComponent(
+ () => import('./Containers/ClusterLists/CreateClustersPage')
+ ),
};
export const AnalyticsRoutes: FunctionComponent> = () => {
diff --git a/src/paths.ts b/src/paths.ts
index d8da78951..4e01b9533 100644
--- a/src/paths.ts
+++ b/src/paths.ts
@@ -13,5 +13,7 @@ export const Paths = {
reportsDetails: '/reports/:slug',
reportsAutomationCalculator: '/reports/automation_calculator',
clusterList: '/cluster-list',
+ createCluster: '/cluster-list/create',
+ createClusterTabs: '/cluster-list/create/local',
};
export const prefixPath = '/ansible/automation-analytics/';