refactor(Process): ♻️ Add protocol to the process query

skupperproject · Jan 15, 2024 · 9a760aa · 9a760aa
1 parent e5ebe57
commit 9a760aa
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 28 deletions.
diff --git a/src/API/REST.api.ts b/src/API/REST.api.ts
@@ -30,7 +30,6 @@ import {
   getFlowPairPATH,
   getSitePairPATH,
   getProcessGroupPairPATH,
-  getServicesByProcessPATH,
   getFlowPairsPATH,
   getRoutersPATH,
   geProcessesPATH,
@@ -142,14 +141,6 @@ export const RESTApi = {
     return getApiResults(data);
   },
 
-  fetchServicesByProcess: async (id: string, options?: RequestOptions): Promise<ServiceResponse[]> => {
-    const data = await axiosFetch<ResponseWrapper<ServiceResponse[]>>(getServicesByProcessPATH(id), {
-      params: options ? mapOptionsToQueryParams(options) : null
-    });
-
-    return getApiResults(data);
-  },
-
   // HOST APIs
   fetchHosts: async (options?: RequestOptions): Promise<HostResponse[]> => {
     const data = await axiosFetch<ResponseWrapper<HostResponse[]>>(getHostsPATH(), {

diff --git a/src/API/REST.paths.ts b/src/API/REST.paths.ts
@@ -36,7 +36,6 @@ export const getLinkPATH = (id: string) => `${LINKS_PATH}${id}`;
 const PROCESSES_PATH = `${COLLECTOR_URL}/processes/`;
 export const geProcessesPATH = () => PROCESSES_PATH;
 export const geProcessPATH = (id: string) => `${PROCESSES_PATH}${id}`;
-export const getServicesByProcessPATH = (id: string) => `${PROCESSES_PATH}${id}/addresses`;
 
 // PROCESS_GROUPS
 const PROCESS_GROUPS_PATH = `${COLLECTOR_URL}/processgroups/`;

diff --git a/src/pages/Processes/components/Details.tsx b/src/pages/Processes/components/Details.tsx
@@ -16,22 +16,19 @@ import {
   Tooltip,
   Truncate
 } from '@patternfly/react-core';
-import { useQuery } from '@tanstack/react-query';
 import { Link } from 'react-router-dom';
 
-import { RESTApi } from '@API/REST.api';
 import ResourceIcon from '@core/components/ResourceIcon';
 import { timeAgo } from '@core/utils/timeAgo';
 import { ProcessGroupsRoutesPaths } from '@pages/ProcessGroups/ProcessGroups.enum';
 import { ServicesRoutesPaths } from '@pages/Services/Services.enum';
 import { SitesRoutesPaths } from '@pages/Sites/Sites.enum';
 
-import { ProcessesLabels, QueriesProcesses } from '../Processes.enum';
+import { ProcessesLabels } from '../Processes.enum';
 import { DetailsProps } from '../Processes.interfaces';
 
 const Details: FC<DetailsProps> = function ({ process, title }) {
   const {
-    identity: processId,
     parent,
     parentName,
     imageName,
@@ -40,14 +37,10 @@ const Details: FC<DetailsProps> = function ({ process, title }) {
     sourceHost,
     hostName,
     startTime,
-    processBinding
+    processBinding,
+    addresses
   } = process;
 
-  const { data: services } = useQuery({
-    queryKey: [QueriesProcesses.GetServicesByProcessId, processId],
-    queryFn: () => RESTApi.fetchServicesByProcess(processId)
-  });
-
   return (
     <Card>
       {title && (
@@ -124,20 +117,16 @@ const Details: FC<DetailsProps> = function ({ process, title }) {
               </DescriptionListGroup>
             </GridItem>
 
-            {!!services?.length && (
+            {!!addresses?.length && (
               <GridItem span={6}>
                 <DescriptionListGroup>
                   <DescriptionListTerm>{ProcessesLabels.Services}</DescriptionListTerm>
                   <DescriptionListDescription>
                     <Flex>
-                      {services.map((service) => (
-                        <div key={service.identity}>
+                      {addresses.map((service) => (
+                        <div key={service}>
                           <ResourceIcon type="service" />
-                          <Link
-                            to={`${ServicesRoutesPaths.Services}/${service.name}@${service.identity}@${service.protocol}`}
-                          >
-                            {service.name}
-                          </Link>
+                          <Link to={`${ServicesRoutesPaths.Services}/${service}}`}>{service.split('@')[0]}</Link>
                         </div>
                       ))}
                     </Flex>