Render empty placeholder

__tests__/pages/Processes/Details.spec.tsx

@@ -38,7 +38,7 @@ describe('Process component', () => {
   it('should render the title, description data and processes associated the data loading is complete', async () => {
     expect(screen.getByText(processResult.parentName)).toHaveTextContent('site 1');
     expect(screen.getByText(processResult.groupName)).toHaveTextContent('payment');
-    expect(screen.getByText(processResult.hostName)).toHaveTextContent('10.242.0.5');
+    expect(screen.getByText(processResult.hostName as string)).toHaveTextContent('10.242.0.5');
     expect(screen.getByText(processResult.sourceHost)).toHaveTextContent('172.17.63.163');
   });
 });

src/config/config.ts

@@ -26,6 +26,7 @@ export const waitForElementToBeRemovedTimeout = 10000;
 
 export const DEFAULT_FONT_VAR = 'var(--pf-v5-global--FontFamily--text)';
 
+export const EMPTY_VALUE_PLACEHOLDER = '-';
 export const IDS_GROUP_SEPARATOR = '~';
 export const IDS_MULTIPLE_SELECTION_SEPARATOR = ',';
 export const PAIR_SEPARATOR = 'processpair-';

src/core/components/SkExposedCell/index.tsx

@@ -4,10 +4,6 @@ import { Binding } from '@API/REST.enum';
 import { ProcessesLabels } from '@pages/Processes/Processes.enum';
 
 const SkExposedCell = function ({ value }: { value: Binding }) {
-  if (!value) {
-    return '-';
-  }
-
   if (value === Binding.Exposed) {
     return <Label color="blue">{ProcessesLabels.IsExposed}</Label>;
   }

src/core/components/SkFlowPairsTable/FlowPair.tsx

@@ -24,7 +24,7 @@ import { getTestsIds } from '@config/testIds';
 import ResourceIcon from '@core/components/ResourceIcon';
 import { formatBytes } from '@core/utils/formatBytes';
 import { formatLatency } from '@core/utils/formatLatency';
-import { formatTraceBySites } from '@core/utils/formatTrace';
+import { renderTraceBySites } from '@core/utils/renderTraceBySites';
 import { ProcessesRoutesPaths } from '@pages/Processes/Processes.enum';
 import { TcpBiflow, FlowPairsResponse, HttpBiflow } from '@sk-types/REST.interfaces';
 
@@ -54,7 +54,7 @@ const FlowPair: FC<FlowPairProps> = function ({ flowPair }) {
               <DescriptionList>
                 <DescriptionListGroup>
                   <DescriptionListTerm>{FlowPairLabels.Trace}</DescriptionListTerm>
-                  <DescriptionListDescription>{formatTraceBySites(traceSites) || '-'}</DescriptionListDescription>
+                  <DescriptionListDescription>{renderTraceBySites(traceSites)}</DescriptionListDescription>
                   {!!duration && (
                     <>
                       <DescriptionListTerm>{FlowPairLabels.Duration}</DescriptionListTerm>
@@ -81,7 +81,7 @@ const FlowPair: FC<FlowPairProps> = function ({ flowPair }) {
                     <DescriptionListDescription>{protocol}</DescriptionListDescription>
 
                     <DescriptionListTerm>{FlowPairLabels.Trace}</DescriptionListTerm>
-                    <DescriptionListDescription>{formatTraceBySites(traceSites)}</DescriptionListDescription>
+                    <DescriptionListDescription>{renderTraceBySites(traceSites)}</DescriptionListDescription>
                     {!!duration && (
                       <>
                         <DescriptionListTerm>{FlowPairLabels.Duration}</DescriptionListTerm>

src/core/utils/renderTraceBySites.ts

@@ -0,0 +1,9 @@
+import { EMPTY_VALUE_PLACEHOLDER } from '@config/config';
+
+export function renderTraceBySites(traces: string[]) {
+  if (!traces.length) {
+    return EMPTY_VALUE_PLACEHOLDER;
+  }
+
+  return traces.join(' -> ');
+}

src/pages/Processes/components/Details.tsx

@@ -44,6 +44,7 @@ const Details: FC<DetailsProps> = function ({ process }) {
     addresses
   } = process;
 
+
   return (
     <Card>
       <CardBody>
@@ -78,7 +79,7 @@ const Details: FC<DetailsProps> = function ({ process }) {
             <GridItem span={6}>
               <DescriptionListGroup>
                 <DescriptionListTerm>{ProcessesLabels.Host}</DescriptionListTerm>
-                <DescriptionListDescription>{hostName}</DescriptionListDescription>
+                <DescriptionListDescription>{hostName || '-'}</DescriptionListDescription>
               </DescriptionListGroup>
             </GridItem>
 
@@ -93,8 +94,8 @@ const Details: FC<DetailsProps> = function ({ process }) {
               <DescriptionListGroup>
                 <DescriptionListTerm>{ProcessesLabels.Image}</DescriptionListTerm>
                 <DescriptionListDescription>
-                  <Tooltip content={imageName || ''}>
-                    <Truncate content={imageName || ''} trailingNumChars={10} position={'middle'} />
+                  <Tooltip content={imageName}>
+                    <Truncate content={imageName || '-'} trailingNumChars={10} position={'middle'} />
                   </Tooltip>
                 </DescriptionListDescription>
               </DescriptionListGroup>

src/pages/Services/services/index.ts

@@ -1,4 +1,5 @@
 import { VarColors } from '@config/colors';
+import { EMPTY_VALUE_PLACEHOLDER } from '@config/config';
 import { PrometheusLabelsV2 } from '@config/prometheus';
 import { DEFAULT_SANKEY_CHART_FLOW_VALUE } from '@core/components/SKSanckeyChart/SkSankey.constants';
 import { PrometheusMetric } from '@sk-types/Prometheus.interfaces';
@@ -28,7 +29,9 @@ export const ServicesController = {
     return services.map((service) => ({
       ...service,
       currentFlows:
-        tcpActiveFlowsMap && tcpActiveFlowsMap[service.name] ? Math.round(tcpActiveFlowsMap[service.name]) : '-'
+        tcpActiveFlowsMap && tcpActiveFlowsMap[service.name]
+          ? Math.round(tcpActiveFlowsMap[service.name])
+          : EMPTY_VALUE_PLACEHOLDER
     }));
   },
 

src/pages/Sites/components/Details.tsx

@@ -17,6 +17,7 @@ import {
 } from '@patternfly/react-core';
 import { Link } from 'react-router-dom';
 
+import { EMPTY_VALUE_PLACEHOLDER } from '@config/config';
 import ResourceIcon from '@core/components/ResourceIcon';
 import { SiteResponse } from '@sk-types/REST.interfaces';
 
@@ -67,7 +68,7 @@ const Details: FC<DetailsProps> = function ({ site: { identity: id, nameSpace, s
                             </Flex>
                           </ListItem>
                         ))
-                      : '-'}
+                      : EMPTY_VALUE_PLACEHOLDER}
                   </List>
                 </DescriptionListDescription>
               </DescriptionListGroup>

src/types/REST.interfaces.ts

@@ -68,12 +68,12 @@ export interface ProcessResponse extends BaseResponse {
   parentName: string;
   groupIdentity: string;
   groupName: string;
-  imageName?: string;
   sourceHost: string;
-  hostName: string;
   processBinding: Binding;
   processRole: Role;
-  addresses?: string[];
+  hostName: string | null;
+  imageName: string | null;
+  addresses: string[] | null;
 }
 
 export interface SitePairsResponse extends BaseResponse {