[WIP] [AAP-33080] create deployment details section

src/Api/api.ts

@@ -38,6 +38,8 @@ export enum Endpoint {
   adoptionRate = '/api/tower-analytics/v1/adoption_rate/',
   ROI = '/api/tower-analytics/v1/roi_templates/',
   costEffortROI = '/api/tower-analytics/v1/roi_cost_effort_data/',
+  // eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values
+  deployment = '/api/tower-analytics/v1/aap_clusters/',
   plans = '/api/tower-analytics/v1/plans/',
   plan = '/api/tower-analytics/v1/plan/',
   sendEmail = 'api/tower-analytics/v1/send_email/',
@@ -179,6 +181,9 @@ export const readOrgOptions = (params: Params): Promise<ApiJson> =>
 export const readHostExplorerOptions = (params: Params): Promise<ApiJson> =>
   post(Endpoint.hostExplorerOptions, params);
 
+export const readDeployment = (id: number): Promise<ApiJson> =>
+  get(`${Endpoint.deployment}${id}/`);
+
 export const readPlans = (params: ParamsWithPagination): Promise<ApiJson> =>
   postWithPagination(Endpoint.plans, params);
 

src/Containers/ClusterLists/ClusterDetails.js

@@ -0,0 +1,88 @@
+import { DescriptionList } from '@patternfly/react-core/dist/dynamic/components/DescriptionList';
+import { PageSection } from '@patternfly/react-core/dist/dynamic/components/Page';
+import PropTypes from 'prop-types';
+import React from 'react';
+// import React, { useEffect } from 'react';
+import styled from 'styled-components';
+// import { readDeployment } from '../../Api';
+// import ApiErrorState from '../../Components/ApiStatus/ApiErrorState';
+// import useRequest from '../../Utilities/useRequest';
+import { PageDetail } from '../../framework/PageDetails/PageDetail';
+
+const ClusterDetails = (id) => {
+  const orientation = 'vertical';
+  const numberOfColumns = 'multiple';
+  const disablePadding = false;
+  const isCompact = false;
+
+  // Makes an API call to the deployments endpoint with the specific id passed
+  // const {
+  //   result: { deployment },
+  //   isSuccess: dataSuccess,
+  //   error: dataError,
+  //   request: fetchEndpoints,
+  // } = useRequest(readDeployment, {
+  //   deployment: {},
+  //   rbac: {
+  //     perms: {},
+  //   },
+  // });
+
+  // useEffect(() => {
+  //   fetchEndpoints(id.id);
+  // }, [id]);
+
+  return (
+    <>
+      {/* {dataError && <ApiErrorState message={dataError.error} />} */}
+      {/* {dataSuccess && ( */}
+      <PageSectionStyled variant='light' padding={{ default: 'noPadding' }}>
+        <DescriptionList
+          orientation={{
+            sm: orientation,
+            md: orientation,
+            lg: orientation,
+            xl: orientation,
+            '2xl': orientation,
+          }}
+          columnModifier={
+            numberOfColumns === 'multiple'
+              ? {
+                  default: '1Col',
+                  sm: '1Col',
+                  md: '2Col',
+                  lg: '2Col',
+                  xl: '3Col',
+                  '2xl': '3Col',
+                }
+              : numberOfColumns === 'two'
+              ? {
+                  default: '1Col',
+                  sm: '1Col',
+                  md: '2Col',
+                  lg: '2Col',
+                  xl: '3Col',
+                  '2xl': '2Col',
+                }
+              : undefined
+          }
+          style={{ maxWidth: 1200, padding: disablePadding ? undefined : 24 }}
+          isCompact={isCompact}
+        >
+          <PageDetail label={'Id'}>{id.id}</PageDetail>
+        </DescriptionList>
+      </PageSectionStyled>
+      {/* )} */}
+    </>
+  );
+};
+
+const PageSectionStyled = styled(PageSection)`
+  background-color: transparent;
+`;
+
+ClusterDetails.propTypes = {
+  id: PropTypes.number.isRequired,
+};
+
+export default ClusterDetails;

src/Containers/ClusterLists/ClusterPage.js

@@ -0,0 +1,47 @@
+import { Tab } from '@patternfly/react-core/dist/dynamic/components/Tabs';
+import { TabTitleText } from '@patternfly/react-core/dist/dynamic/components/Tabs';
+import { Tabs } from '@patternfly/react-core/dist/dynamic/components/Tabs';
+import { CaretLeftIcon } from '@patternfly/react-icons';
+import React from 'react';
+import { useLocation, useParams } from 'react-router-dom';
+import { PageHeader } from '../../framework/PageHeader';
+import ClusterDetails from './ClusterDetails';
+
+const ClusterPage = () => {
+  const { id } = useParams();
+  const location = useLocation();
+
+  const [activeTabKey, setActiveTabKey] = React.useState(1);
+  const handleTabClick = (event, tabIndex) => {
+    setActiveTabKey(tabIndex);
+  };
+  return (
+    <div>
+      <PageHeader data-cy={'cluster-details'} title={'Cluster Name'} />
+      <Tabs activeKey={activeTabKey} onSelect={handleTabClick} isBox={true}>
+        <Tab
+          eventKey={0}
+          title={
+            <TabTitleText>
+              <CaretLeftIcon />
+              <span style={{ marginLeft: 6 }}>{'Back to Clusters List'}</span>
+            </TabTitleText>
+          }
+          href={location.pathname.slice(0, location.pathname.lastIndexOf('/'))}
+        />
+        <Tab
+          eventKey={1}
+          title={<TabTitleText>Details</TabTitleText>}
+          aria-label='Default content - users'
+        >
+          <ClusterDetails id={id} />
+        </Tab>
+        <Tab eventKey={2} title={<TabTitleText>Resources</TabTitleText>}>
+          {'Resources'}
+        </Tab>
+      </Tabs>
+    </div>
+  );
+};
+
+export default ClusterPage;

src/Containers/ClusterLists/ClustersList.js

@@ -7,6 +7,7 @@ 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 { Link } from 'react-router-dom';
 import { readJobExplorer, readJobExplorerOptions } from '../../Api';
 import ApiErrorState from '../../Components/ApiStatus/ApiErrorState';
 import JobStatus from '../../Components/JobStatus';
@@ -74,15 +75,7 @@ const ClustersList = ({ activeClusters }) => {
       type: 'text',
       cell: (item) => <TextCell text={item.id.id} iconSize='sm' />,
       value: (item) => {
-        return (
-          <a
-            href={item.id.tower_link}
-            target='_blank'
-            rel='noopener noreferrer'
-          >
-            {`${item.id.id} - ${item.id.template_name}`}
-          </a>
-        );
+        return <Link to={`${item.id.id}`}>{`${item.id.template_name}`}</Link>;
       },
     },
     {

src/Routes.tsx

@@ -45,6 +45,9 @@ const components = {
   [Paths.clusterList]: asyncComponent(
     () => import('./Containers/ClusterLists/ClusterListsPage')
   ),
+  [Paths.clusterListDetails]: asyncComponent(
+    () => import('./Containers/ClusterLists/ClusterPage')
+  ),
 };
 
 export const AnalyticsRoutes: FunctionComponent<Record<string, never>> = () => {

src/paths.ts

@@ -13,5 +13,6 @@ export const Paths = {
   reportsDetails: '/reports/:slug',
   reportsAutomationCalculator: '/reports/automation_calculator',
   clusterList: '/cluster-list',
+  clusterListDetails: '/cluster-list/:id',
 };
 export const prefixPath = '/ansible/automation-analytics/';