diff --git a/hivemq-edge/src/frontend/src/api/hooks/useProtocolAdapters/__handlers__/index.ts b/hivemq-edge/src/frontend/src/api/hooks/useProtocolAdapters/__handlers__/index.ts
index a84761f67..0d637f731 100644
--- a/hivemq-edge/src/frontend/src/api/hooks/useProtocolAdapters/__handlers__/index.ts
+++ b/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',
diff --git a/hivemq-edge/src/frontend/src/modules/Device/components/DeviceMetadataViewer.spec.cy.tsx b/hivemq-edge/src/frontend/src/modules/Device/components/DeviceMetadataViewer.spec.cy.tsx
index 016802195..d0bfc8bd5 100644
--- a/hivemq-edge/src/frontend/src/modules/Device/components/DeviceMetadataViewer.spec.cy.tsx
+++ b/hivemq-edge/src/frontend/src/modules/Device/components/DeviceMetadataViewer.spec.cy.tsx
@@ -1,6 +1,4 @@
-///
-
-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()
+ cy.mountWithProviders()
cy.getByTestId('device-metadata-header').should('be.visible')
cy.getByTestId('device-metadata-header').find('h2').should('contain.text', 'simulation')
diff --git a/hivemq-edge/src/frontend/src/modules/Device/components/DeviceMetadataViewer.tsx b/hivemq-edge/src/frontend/src/modules/Device/components/DeviceMetadataViewer.tsx
index dfcca3ceb..e98269ea1 100644
--- a/hivemq-edge/src/frontend/src/modules/Device/components/DeviceMetadataViewer.tsx
+++ b/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 = ({ protocolAdapter }) => {
+const DeviceMetadataViewer: FC = ({ device }) => {
return (
-
+
- {protocolAdapter?.id}
- {protocolAdapter?.category?.displayName}
+ {device.id}
+ {device.category?.displayName}
diff --git a/hivemq-edge/src/frontend/src/modules/Workspace/components/nodes/NodeDevice.tsx b/hivemq-edge/src/frontend/src/modules/Workspace/components/nodes/NodeDevice.tsx
index 8e5682c17..fce100c9e 100644
--- a/hivemq-edge/src/frontend/src/modules/Workspace/components/nodes/NodeDevice.tsx
+++ b/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> = ({ 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> = ({ id, selected, data, draggin
/>
{data.protocol}
+
>
)}
{showSkeleton && (
diff --git a/hivemq-edge/src/frontend/src/modules/Workspace/types.ts b/hivemq-edge/src/frontend/src/modules/Workspace/types.ts
index 3d1d71753..f2f61eb7c 100644
--- a/hivemq-edge/src/frontend/src/modules/Workspace/types.ts
+++ b/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
}
diff --git a/hivemq-edge/src/frontend/src/modules/Workspace/utils/nodes-utils.ts b/hivemq-edge/src/frontend/src/modules/Workspace/utils/nodes-utils.ts
index fc3a011e1..4e937c0fb 100644
--- a/hivemq-edge/src/frontend/src/modules/Workspace/utils/nodes-utils.ts
+++ b/hivemq-edge/src/frontend/src/modules/Workspace/utils/nodes-utils.ts
@@ -18,9 +18,9 @@ const MAX_ADAPTERS = 10
export const gluedNodeDefinition: Record = {
[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) => {