port naming fix for service

Author: shivani170

src/components/v2/appDetails/k8Resource/nodeType/Node.component.tsx

@@ -213,11 +213,11 @@ function NodeComponent({ handleFocusTabs, externalLinks, monitoringTools, isDevt
                             return (
                                 <div className="flex left cn-9 m-0 dc__no-decore">
                                     <div className="" key={node.name}>
-                                        {node.name}:{node.namespace}:{val}
+                                        {node.name}.{node.namespace}:{val}
                                         <Clipboard
                                             className="ml-0 resource-action-tabs__clipboard fs-13 dc__truncate-text cursor pt-8"
                                             onClick={(event) => {
-                                                toggleClipBoardPort(event, `${node.name}:${node.namespace}:${val}`)
+                                                toggleClipBoardPort(event, `${node.name}.${node.namespace}:${val}`)
                                             }}
                                         />
                                     </div>
@@ -241,7 +241,7 @@ function NodeComponent({ handleFocusTabs, externalLinks, monitoringTools, isDevt
                             <Clipboard
                                 className="resource-action-tabs__clipboard icon-dim-12 pointer ml-8 mr-8"
                                 onClick={(event) => {
-                                    toggleClipBoardPort(event, `${node.name}:${node.namespace}:${node.port[0]}`)
+                                    toggleClipBoardPort(event, `${node.name}.${node.namespace}:${node.port[0]}`)
                                 }}
                             />
                         </span>
@@ -300,7 +300,7 @@ function NodeComponent({ handleFocusTabs, externalLinks, monitoringTools, isDevt
         }
 
         return nodes.map((node, index) => {
-            const nodeName = `${node.name}.${node.namespace} : ${node.port}`
+            const nodeName = `${node.name}.${node.namespace} . ${node.port}`
             const _isSelected = markedNodes.current.get(node.name)
             // Only render node kind header when it's the first node or it's a different kind header
             _currentNodeHeader = index === 0 || _currentNodeHeader !== node.kind ? node.kind : ''
@@ -442,7 +442,7 @@ function NodeComponent({ handleFocusTabs, externalLinks, monitoringTools, isDevt
                             </div>
                         </div>
                         {params.nodeType === NodeType.Service.toLowerCase() && node.kind !== "Endpoints" && node.kind !== "EndpointSlice" && (
-                                <div className={'col-5 pt-9 pb-9 flex left cn-9 dc__hover-icon'}>
+                                <div className="col-5 pt-9 pb-9 flex left cn-9 dc__hover-icon">
                                     {portNumberPlaceHolder(node)}
                                     {node.port > 1 ? renderClipboardInteraction(nodeName) : null}
                                 </div>