[#304] Simplify access to broker details view

artemiscloud · Oct 22, 2024 · 3719775 · 3719775
1 parent d32ac8b
commit 3719775
Show file tree

Hide file tree

Showing 10 changed files with 179 additions and 375 deletions.
diff --git a/console-extensions.json b/console-extensions.json
@@ -26,6 +26,17 @@
       "component": { "$codeRef": "UpdateBrokerContainer.UpdateBrokerPage" }
     }
   },
+  // {
+  //   "type": "console.page/route",
+  //   "properties": {
+  //     "exact": true,
+  //     "path": [
+  //       "/k8s/ns/:ns/brokers/:name",
+  //       "/k8s/all-namespaces/brokers/:name"
+  //     ],
+  //     "component": { "$codeRef": "PodsListContainer.PodsContainer" }
+  //   }
+  // },
   {
     "type": "console.page/route",
     "properties": {
@@ -34,17 +45,6 @@
         "/k8s/ns/:ns/brokers/:name",
         "/k8s/all-namespaces/brokers/:name"
       ],
-      "component": { "$codeRef": "PodsListContainer.PodsContainer" }
-    }
-  },
-  {
-    "type": "console.page/route",
-    "properties": {
-      "exact": true,
-      "path": [
-        "/k8s/ns/:ns/brokers/:brokerName/:podName",
-        "/k8s/all-namespaces/brokers/:brokerName/:podName"
-      ],
       "component": { "$codeRef": "BrokerDetailsContainer.App" }
     }
   },

diff --git a/package.json b/package.json
@@ -113,7 +113,6 @@
       "BrokersListContainer": "./brokers/view-brokers/BrokersList.container",
       "AddBrokerContainer": "./brokers/add-broker/AddBroker.container",
       "UpdateBrokerContainer": "./brokers/update-broker/UpdateBroker.container",
-      "PodsListContainer": "./brokers/broker-pods/PodsList.container",
       "BrokerDetailsContainer": "./brokers/broker-details/BrokerDetails.container",
       "AddressesContainer": "./addresses/Addresses/Address.container",
       "AddressDetailsContainer": "./addresses/Address-details/AddressDetails.container"

diff --git a/src/brokers/broker-details/BrokerDetails.container.test.tsx b/src/brokers/broker-details/BrokerDetails.container.test.tsx
@@ -50,8 +50,7 @@ describe('BrokerDetailsPage', () => {
 
     mockUseParams.mockReturnValue({
       ns: 'test-namespace',
-      brokerName: 'test-1',
-      podName: 'test-1-ss-0',
+      name: 'test-1',
     });
 
     mockUseLocation.mockReturnValue({
@@ -90,7 +89,7 @@ describe('BrokerDetailsPage', () => {
     expect(
       screen.getByText('Mocked BrokerDetailsBreadcrumb'),
     ).toBeInTheDocument();
-    expect(screen.getByText('Broker test-1 / test-1-ss-0'));
+    expect(screen.getByText('Broker test-1'));
     expect(screen.getByText('Overview')).toBeInTheDocument();
     expect(screen.getByText('OverviewContainer component')).toBeInTheDocument();
     expect(screen.getByText('Clients')).toBeInTheDocument();

diff --git a/src/brokers/broker-details/BrokerDetails.container.tsx b/src/brokers/broker-details/BrokerDetails.container.tsx
@@ -20,6 +20,7 @@ import {
   JolokiaTestPanel,
 } from './components/JolokiaDevComponents';
 import { OverviewContainer } from './components/Overview/Overview.container';
+import { PodsContainer } from '@app/brokers/broker-pods/PodsList.container';
 import {
   useLocation,
   useNavigate,
@@ -36,17 +37,15 @@ import {
 
 type AuthenticatedPageContentPropType = {
   brokerCr: BrokerCR;
-  brokerName: string;
-  podName: string;
+  name: string;
   namespace: string;
   loading: boolean;
   error: string;
 };
 const AuthenticatedPageContent: FC<AuthenticatedPageContentPropType> = ({
   brokerCr,
-  brokerName,
+  name,
   namespace,
-  podName,
   loading: loadingBrokerCr,
   error: errorBrokerCr,
 }) => {
@@ -72,12 +71,12 @@ const AuthenticatedPageContent: FC<AuthenticatedPageContentPropType> = ({
     >
       <div className="pf-u-mt-md pf-u-mb-md">
         <BrokerDetailsBreadcrumb
-          name={brokerName}
+          name={name}
           namespace={namespace}
-          podName={podName}
+          // podName={podName}
         />
         <Title headingLevel="h2" className="pf-u-ml-md">
-          {t('Broker')} {brokerName} {t('/')} {podName}
+          {t('Broker')} {name}
         </Title>
       </div>
       {errorBrokerCr && <Alert variant="danger" title={errorBrokerCr} />}
@@ -87,7 +86,7 @@ const AuthenticatedPageContent: FC<AuthenticatedPageContentPropType> = ({
           title={<TabTitleText>{t('Overview')}</TabTitleText>}
         >
           <OverviewContainer
-            name={brokerName}
+            name={name}
             namespace={namespace}
             cr={brokerCr}
             loading={loadingBrokerCr}
@@ -99,6 +98,9 @@ const AuthenticatedPageContent: FC<AuthenticatedPageContentPropType> = ({
         >
           <ClientsContainer />
         </Tab>
+        <Tab eventKey={'pods'} title={<TabTitleText>{t('Pods')}</TabTitleText>}>
+          <PodsContainer />
+        </Tab>
         {process.env.NODE_ENV === 'development' && (
           <Tab
             eventKey={'jolokiaTestPanel'}
@@ -175,28 +177,18 @@ const AuthenticatedPageContent: FC<AuthenticatedPageContentPropType> = ({
     </PageSection>
   );
 };
-export const BrokerDetailsPage: FC = () => {
-  const {
-    ns: namespace,
-    brokerName,
-    podName,
-  } = useParams<{
-    ns?: string;
-    brokerName?: string;
-    podName?: string;
-  }>();
 
-  const { brokerCr, isLoading, error } = useGetBrokerCR(brokerName, namespace);
+export const BrokerDetailsPage: FC = () => {
+  const { ns: namespace, name } = useParams<{ ns?: string; name?: string }>();
 
-  const podOrdinal = parseInt(podName.replace(brokerName + '-ss-', ''));
+  const { brokerCr, isLoading, error } = useGetBrokerCR(name, namespace);
 
   return (
     <>
-      <JolokiaAuthentication brokerCR={brokerCr} podOrdinal={podOrdinal}>
+      <JolokiaAuthentication brokerCR={brokerCr} podOrdinal={0}>
         <AuthenticatedPageContent
           brokerCr={brokerCr}
-          brokerName={brokerName}
-          podName={podName}
+          name={name}
           namespace={namespace}
           loading={isLoading}
           error={error}

diff --git a/...rokers/broker-details/components/BrokerDetailsBreadcrumb/BrokerDetailsBreadcrumb.test.tsx b/...rokers/broker-details/components/BrokerDetailsBreadcrumb/BrokerDetailsBreadcrumb.test.tsx
@@ -22,7 +22,6 @@ jest.mock('@openshift-console/dynamic-plugin-sdk', () => ({
 describe('BrokerDetailsBreadcrumb', () => {
   const name = 'test-1';
   const namespace = 'test';
-  const podName = 'test-1-ss-0';
   const navigate = jest.fn();
 
   beforeEach(() => {
@@ -39,7 +38,7 @@ describe('BrokerDetailsBreadcrumb', () => {
         <BrokerDetailsBreadcrumb
           name={name}
           namespace={namespace}
-          podName={podName}
+          // podName={podName}
         />
       </MemoryRouter>,
     );
@@ -51,14 +50,14 @@ describe('BrokerDetailsBreadcrumb', () => {
         <BrokerDetailsBreadcrumb
           name={name}
           namespace={namespace}
-          podName={podName}
+          // podName={podName}
         />
       </MemoryRouter>,
     );
     await waitForI18n(comp);
     expect(comp.getByText('Brokers')).toBeInTheDocument();
     expect(comp.getByText(`Broker ${name}`)).toBeInTheDocument();
-    expect(comp.getByText(`${podName}`)).toBeInTheDocument();
+    // expect(comp.getByText(`${podName}`)).toBeInTheDocument();
   });
 
   it('should navigate back to BrokerList page when click on Brokers BreadcrumbItem', async () => {
@@ -67,7 +66,7 @@ describe('BrokerDetailsBreadcrumb', () => {
         <BrokerDetailsBreadcrumb
           name={name}
           namespace={namespace}
-          podName={podName}
+          //  podName={podName}
         />
       </MemoryRouter>,
     );
@@ -77,32 +76,14 @@ describe('BrokerDetailsBreadcrumb', () => {
     expect(navigate).toHaveBeenCalledWith(`/k8s/ns/${namespace}/brokers`);
   });
 
-  it('should navigate back to BrokerPodsList page when click on BrokerPods BreadcrumbItem', async () => {
-    const comp = render(
-      <MemoryRouter>
-        <BrokerDetailsBreadcrumb
-          name={name}
-          namespace={namespace}
-          podName={podName}
-        />
-      </MemoryRouter>,
-    );
-    await waitForI18n(comp);
-
-    fireEvent.click(screen.getByText(`Broker ${name}`));
-    expect(navigate).toHaveBeenCalledWith(
-      `/k8s/ns/${namespace}/brokers/${name}`,
-    );
-  });
-
   it('should redirect back to BrokerList page when namespace is all-namespaces', async () => {
     const namespace = 'all-namespaces';
     const comp = render(
       <MemoryRouter>
         <BrokerDetailsBreadcrumb
           name={name}
           namespace={namespace}
-          podName={podName}
+          // podName={podName}
         />
       </MemoryRouter>,
     );
@@ -118,7 +99,7 @@ describe('BrokerDetailsBreadcrumb', () => {
         <BrokerDetailsBreadcrumb
           name={name}
           namespace={namespace}
-          podName={podName}
+          // podName={podName}
         />
       </MemoryRouter>,
     );
@@ -136,7 +117,7 @@ describe('BrokerDetailsBreadcrumb', () => {
         <BrokerDetailsBreadcrumb
           name={name}
           namespace={namespace}
-          podName={podName}
+          // podName={podName}
         />
       </MemoryRouter>,
     );
@@ -158,7 +139,7 @@ describe('BrokerDetailsBreadcrumb', () => {
         <BrokerDetailsBreadcrumb
           name={name}
           namespace={namespace}
-          podName={podName}
+          // podName={podName}
         />
       </MemoryRouter>,
     );
@@ -180,7 +161,7 @@ describe('BrokerDetailsBreadcrumb', () => {
         <BrokerDetailsBreadcrumb
           name={name}
           namespace={namespace}
-          podName={podName}
+          //podName={podName}
         />
       </MemoryRouter>,
     );