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) => {