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 ? [ - , ] 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/';