Realign healthy icon in summary panel graph

frontend/src/components/Health/HealthIndicator.tsx

@@ -2,22 +2,22 @@ import * as React from 'react';
 import { PopoverPosition, Tooltip } from '@patternfly/react-core';
 import { HealthDetails } from './HealthDetails';
 import * as H from '../../types/Health';
-import { createIcon } from './Helper';
+import { Size, createIcon } from './Helper';
 import { createTooltipIcon } from '../../config/KialiIcon';
 import { healthIndicatorStyle } from '../../styles/HealthStyle';
 
 interface HealthIndicatorProps {
   health?: H.Health;
   id: string;
+  size?: Size;
   tooltipPlacement?: PopoverPosition;
 }
 
 export const HealthIndicator: React.FC<HealthIndicatorProps> = (props: HealthIndicatorProps) => {
   const globalStatus = props.health ? props.health.getGlobalStatus() : H.NA;
 
   if (props.health) {
-    // HealthIndicator will render always in SMALL mode
-    const icon = createIcon(globalStatus, 'md');
+    const icon = createIcon(globalStatus, props.size ?? 'md');
 
     return (
       <Tooltip

frontend/src/components/Health/Helper.ts

@@ -3,7 +3,7 @@ import { Status } from 'types/Health';
 import { Icon } from '@patternfly/react-core';
 import { kialiStyle } from 'styles/StyleUtils';
 
-type Size = 'sm' | 'md' | 'lg' | 'xl';
+export type Size = 'sm' | 'md' | 'lg' | 'xl';
 
 export const createIcon = (status: Status, size?: Size) => {
   const classForColor = kialiStyle({

frontend/src/components/Pf/PfBadges.tsx

@@ -76,29 +76,29 @@ export const PFBadges: { [key: string]: PFBadgeType } = Object.freeze({
 export const kialiBadge = kialiStyle({
   backgroundColor: PFColors.Badge,
   color: PFColors.White,
-  borderRadius: '1.25rem',
+  borderRadius: '20px',
   flexShrink: 0,
   fontFamily: 'var(--pf-v5-global--FontFamily--text)',
   fontSize: 'var(--kiali-global--font-size)',
-  lineHeight: '1rem',
-  marginRight: '0.25rem',
+  lineHeight: '16px',
+  marginRight: '4px',
   minWidth: '1.5em',
-  padding: '0.075rem 0.25rem',
+  padding: '1px 4px',
   textAlign: 'center',
   whiteSpace: 'nowrap'
 });
 
 export const kialiBadgeSmall = kialiStyle({
   backgroundColor: PFColors.Badge,
   color: PFColors.White,
-  borderRadius: '1.25rem',
+  borderRadius: '20px',
   flexShrink: 0,
   fontFamily: 'var(--pf-v5-global--FontFamily--text)',
-  fontSize: '0.75rem',
-  lineHeight: '0.75rem',
-  marginRight: '0.25rem',
+  fontSize: '12px',
+  lineHeight: '13px',
+  marginRight: '5px',
   minWidth: '1.3em',
-  padding: '0.075rem 0.25rem',
+  padding: '1px 3px',
   textAlign: 'center',
   whiteSpace: 'nowrap'
 });
@@ -110,7 +110,7 @@ type PFBadgeProps = {
   position?: TooltipPosition; // default=auto
   size?: 'global' | 'sm';
   style?: CSSProperties;
-  tooltip?: React.ReactFragment;
+  tooltip?: React.ReactNode;
 };
 
 export const PFBadge: React.FC<PFBadgeProps> = (props: PFBadgeProps) => {

frontend/src/pages/Graph/SummaryLink.tsx

@@ -8,36 +8,47 @@ import {
   DecoratedGraphNodeData
 } from '../../types/Graph';
 import { KialiIcon } from 'config/KialiIcon';
-import { Badge, PopoverPosition } from '@patternfly/react-core';
+import { PopoverPosition } from '@patternfly/react-core';
 import { Health } from 'types/Health';
 import { HealthIndicator } from 'components/Health/HealthIndicator';
 import { PFBadge, PFBadges } from 'components/Pf/PfBadges';
 import { homeCluster } from 'config';
 import { KialiPageLink } from 'components/Link/KialiPageLink';
+import { kialiStyle } from 'styles/StyleUtils';
 
 interface LinkInfo {
-  link: string;
   displayName: string;
   key: string;
+  link: string;
 }
 
-const getTooltip = (tooltip: React.ReactFragment, nodeData: GraphNodeData): React.ReactFragment => {
+const badgeStyle = kialiStyle({
+  display: 'inline-block',
+  marginRight: '0.5rem',
+  marginBottom: '0.25rem'
+});
+
+const getTooltip = (tooltip: React.ReactNode, nodeData: GraphNodeData): React.ReactNode => {
   const addNamespace = nodeData.isBox !== BoxByType.NAMESPACE;
+
   const addCluster =
     nodeData.isBox !== BoxByType.CLUSTER &&
     nodeData.cluster !== CLUSTER_DEFAULT &&
     homeCluster?.name !== nodeData.cluster;
+
   return (
     <div style={{ textAlign: 'left' }}>
       <span>{tooltip}</span>
+
       {addNamespace && <div>{`Namespace: ${nodeData.namespace}`}</div>}
+
       {addCluster && <div>{`Cluster: ${nodeData.cluster}`}</div>}
     </div>
   );
 };
 
-export const getBadge = (nodeData: GraphNodeData, nodeType?: NodeType) => {
-  switch (nodeType || nodeData.nodeType) {
+export const getBadge = (nodeData: GraphNodeData, nodeType?: NodeType): React.ReactNode => {
+  switch (nodeType ?? nodeData.nodeType) {
     case NodeType.AGGREGATE:
       return (
         <PFBadge
@@ -85,11 +96,17 @@ export const getBadge = (nodeData: GraphNodeData, nodeType?: NodeType) => {
   }
 };
 
-export const getLink = (nodeData: GraphNodeData, nodeType?: NodeType, linkGenerator?: () => LinkInfo) => {
+export const getLink = (
+  nodeData: GraphNodeData,
+  nodeType?: NodeType,
+  linkGenerator?: () => LinkInfo
+): React.ReactNode => {
   const { app, cluster, namespace, service, workload } = nodeData;
+
   if (!nodeType || nodeData.nodeType === NodeType.UNKNOWN) {
     nodeType = nodeData.nodeType;
   }
+
   let displayName: string = 'unknown';
   let link: string | undefined;
   let key: string | undefined;
@@ -154,7 +171,7 @@ export const getLink = (nodeData: GraphNodeData, nodeType?: NodeType, linkGenera
   return <span key={key}>{displayName}</span>;
 };
 
-export const renderBadgedHost = (host: string) => {
+export const renderBadgedHost = (host: string): React.ReactNode => {
   return (
     <div>
       <PFBadge key={`badgedHost-${host}`} badge={PFBadges.Host} size="sm" />
@@ -163,15 +180,16 @@ export const renderBadgedHost = (host: string) => {
   );
 };
 
-export const renderBadgedName = (nodeData: GraphNodeData, label?: string) => {
+export const renderBadgedName = (nodeData: GraphNodeData, label?: string): React.ReactNode => {
   return (
     <div key={`badgedName-${nodeData.id}`}>
-      <span style={{ marginRight: '1em', marginBottom: '3px', display: 'inline-block' }}>
+      <span className={badgeStyle}>
         {label && (
           <span style={{ whiteSpace: 'pre' }}>
             <b>{label}</b>
           </span>
         )}
+
         {getBadge(nodeData)}
         {getLink({ ...nodeData, isInaccessible: true })}
       </span>
@@ -184,17 +202,18 @@ export const renderBadgedLink = (
   nodeType?: NodeType,
   label?: string,
   linkGenerator?: () => LinkInfo
-): React.ReactFragment => {
+): React.ReactNode => {
   const link = getLink(nodeData, nodeType, linkGenerator);
 
   return (
     <div key={`node-${nodeData.id}`}>
-      <span style={{ marginRight: '1em', marginBottom: '3px', display: 'inline-block' }}>
+      <span className={badgeStyle}>
         {label && (
           <span style={{ whiteSpace: 'pre' }}>
             <b>{label}</b>
           </span>
         )}
+
         {getBadge(nodeData, nodeType)}
         {link}
       </span>
@@ -203,27 +222,27 @@ export const renderBadgedLink = (
   );
 };
 
-export const renderHealth = (health?: Health) => {
+export const renderHealth = (health?: Health): React.ReactNode => {
   return (
-    <>
-      <Badge style={{ fontWeight: 'normal', marginTop: '4px', marginBottom: '4px' }} isRead={true}>
-        <span style={{ margin: '3px 3px 1px 0' }}>
-          {health ? (
-            <HealthIndicator id="graph-health-indicator" health={health} tooltipPlacement={PopoverPosition.left} />
-          ) : (
-            'n/a'
-          )}
-        </span>
-        health
-      </Badge>
-    </>
+    <span>
+      {health ? (
+        <HealthIndicator
+          id="graph-health-indicator"
+          health={health}
+          tooltipPlacement={PopoverPosition.left}
+          size="sm"
+        />
+      ) : (
+        'n/a'
+      )}
+    </span>
   );
 };
 
-export const renderDestServicesLinks = (nodeData: DecoratedGraphNodeData) => {
+export const renderDestServicesLinks = (nodeData: DecoratedGraphNodeData): React.ReactNode[] => {
   const destServices: DestService[] | undefined = nodeData.destServices;
 
-  const links: any[] = [];
+  const links: React.ReactNode[] = [];
   if (!destServices) {
     return links;
   }
@@ -243,6 +262,7 @@ export const renderDestServicesLinks = (nodeData: DecoratedGraphNodeData) => {
       version: '',
       workload: ''
     };
+
     links.push(renderBadgedLink(serviceNodeData));
   });