fix(28933): Add device tags to the node visualisation

hivemq-edge/src/frontend/src/api/hooks/useProtocolAdapters/__handlers__/index.ts

@@ -18,6 +18,7 @@ import {
 } from '@/api/__generated__'
 import { MockAdapterType } from '@/__test-utils__/adapters/types.ts'
 import { enumFromStringValue } from '@/utils/types.utils.ts'
+import { DeviceMetadata } from '@/modules/Workspace/types.ts'
 
 export const mockUISchema: UiSchema = {
   'ui:tabs': [
@@ -208,6 +209,11 @@ export const mockProtocolAdapter: ProtocolAdapter = {
   uiSchema: mockUISchema,
 }
 
+export const mockDeviceFromAdapter: DeviceMetadata = {
+  ...mockProtocolAdapter,
+  sourceAdapterId: 'my-adapter',
+}
+
 export const mockProtocolAdapter_OPCUA: ProtocolAdapter = {
   id: 'opcua',
   protocol: 'OPC UA',

hivemq-edge/src/frontend/src/modules/Device/components/DeviceMetadataViewer.spec.cy.tsx

@@ -1,6 +1,4 @@
-/// <reference types="cypress" />
-
-import { mockProtocolAdapter } from '@/api/hooks/useProtocolAdapters/__handlers__'
+import { mockDeviceFromAdapter } from '@/api/hooks/useProtocolAdapters/__handlers__'
 import DeviceMetadataViewer from '@/modules/Device/components/DeviceMetadataViewer.tsx'
 
 describe('DeviceMetadataViewer', () => {
@@ -9,7 +7,7 @@ describe('DeviceMetadataViewer', () => {
   })
 
   it('should render the form', () => {
-    cy.mountWithProviders(<DeviceMetadataViewer protocolAdapter={mockProtocolAdapter} />)
+    cy.mountWithProviders(<DeviceMetadataViewer device={mockDeviceFromAdapter} />)
 
     cy.getByTestId('device-metadata-header').should('be.visible')
     cy.getByTestId('device-metadata-header').find('h2').should('contain.text', 'simulation')

hivemq-edge/src/frontend/src/modules/Device/components/DeviceMetadataViewer.tsx

@@ -3,19 +3,19 @@ import { Avatar, Box, Card, CardHeader, Flex, Heading, Text } from '@chakra-ui/r
 import { DeviceMetadata } from '@/modules/Workspace/types.ts'
 
 interface DeviceMetadataProps {
-  protocolAdapter?: DeviceMetadata
+  device: DeviceMetadata
 }
 
-const DeviceMetadataViewer: FC<DeviceMetadataProps> = ({ protocolAdapter }) => {
+const DeviceMetadataViewer: FC<DeviceMetadataProps> = ({ device }) => {
   return (
     <Card size="sm">
       <CardHeader>
         <Flex data-testid="device-metadata-header">
           <Flex flex="1" gap="4" alignItems="center" flexWrap="wrap">
-            <Avatar src={protocolAdapter?.logoUrl} />
+            <Avatar src={device.logoUrl} />
             <Box>
-              <Heading size="sm">{protocolAdapter?.id}</Heading>
-              <Text>{protocolAdapter?.category?.displayName}</Text>
+              <Heading size="sm">{device.id}</Heading>
+              <Text>{device.category?.displayName}</Text>
             </Box>
           </Flex>
         </Flex>

hivemq-edge/src/frontend/src/modules/Workspace/components/nodes/NodeDevice.tsx

@@ -1,8 +1,9 @@
-import { FC } from 'react'
+import { FC, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Handle, Position, NodeProps, useStore } from 'reactflow'
 import { HStack, Icon, Text, VStack } from '@chakra-ui/react'
 
+import { useGetDomainTags } from '@/api/hooks/useProtocolAdapters/useGetDomainTags.ts'
 import ToolbarButtonGroup from '@/components/react-flow/ToolbarButtonGroup.tsx'
 import IconButton from '@/components/Chakra/IconButton.tsx'
 import { PLCTagIcon } from '@/components/Icons/TopicIcon.tsx'
@@ -17,12 +18,18 @@ import { useContextMenu } from '@/modules/Workspace/hooks/useContextMenu.ts'
 import ContextualToolbar from '@/modules/Workspace/components/nodes/ContextualToolbar.tsx'
 import { CONFIG_ADAPTER_WIDTH } from '@/modules/Workspace/utils/nodes-utils.ts'
 import { selectorIsSkeletonZoom } from '@/modules/Workspace/utils/react-flow.utils.ts'
+import MappingBadge from '@/modules/Workspace/components/parts/MappingBadge.tsx'
 
 const NodeDevice: FC<NodeProps<DeviceMetadata>> = ({ id, selected, data, dragging }) => {
   const { t } = useTranslation()
   const { onContextMenu } = useContextMenu(id, selected, '/workspace/node')
   const { category, capabilities } = data
   const showSkeleton = useStore(selectorIsSkeletonZoom)
+  const { data: deviceTags } = useGetDomainTags(data.sourceAdapterId)
+
+  const tagNames = useMemo(() => {
+    return deviceTags?.items?.map((tag) => tag.name) || []
+  }, [deviceTags?.items])
 
   return (
     <>
@@ -58,6 +65,7 @@ const NodeDevice: FC<NodeProps<DeviceMetadata>> = ({ id, selected, data, draggin
                 />
                 <Text>{data.protocol}</Text>
               </HStack>
+              <MappingBadge destinations={tagNames} isTag />
             </>
           )}
           {showSkeleton && (

hivemq-edge/src/frontend/src/modules/Workspace/types.ts

@@ -77,5 +77,5 @@ export interface TopicTreeMetadata {
 }
 
 export interface DeviceMetadata extends ProtocolAdapter {
-  sourceAdapterId?: string
+  sourceAdapterId: string
 }

hivemq-edge/src/frontend/src/modules/Workspace/utils/nodes-utils.ts

@@ -18,9 +18,9 @@ const MAX_ADAPTERS = 10
 
 export const gluedNodeDefinition: Record<string, [NodeTypes, number, 'target' | 'source']> = {
   [NodeTypes.BRIDGE_NODE]: [NodeTypes.HOST_NODE, 200, 'target'],
-  [NodeTypes.ADAPTER_NODE]: [NodeTypes.DEVICE_NODE, -125, 'target'],
+  [NodeTypes.ADAPTER_NODE]: [NodeTypes.DEVICE_NODE, -175, 'target'],
   [NodeTypes.HOST_NODE]: [NodeTypes.BRIDGE_NODE, -200, 'source'],
-  [NodeTypes.DEVICE_NODE]: [NodeTypes.ADAPTER_NODE, 125, 'source'],
+  [NodeTypes.DEVICE_NODE]: [NodeTypes.ADAPTER_NODE, 175, 'source'],
 }
 
 export const createEdgeNode = (label: string, positionStorage?: Record<string, XYPosition>) => {