diff --git a/src/views/host/details/HostDetailsTable.js b/src/views/host/details/HostDetailsTable.js index 370538701ef4bdcfcc2f07ec0bf384a7db32a3bd..08a7b33f97fe68d6b5edcd5516ee8123b6bbf886 100644 --- a/src/views/host/details/HostDetailsTable.js +++ b/src/views/host/details/HostDetailsTable.js @@ -1,55 +1,43 @@ import React from "react"; -import { KeyValueTable, InternalLink, EmptyValue } from "@ess-ics/ce-ui-common"; -import { Stack, Typography } from "@mui/material"; +import { KeyValueTable, EmptyValue } from "@ess-ics/ce-ui-common"; +import { Chip, Stack } from "@mui/material"; -export const HostDetailsTable = ({ host }) => { - function listToString(list) { - if (list) { - if (Array.isArray(list)) { - return list.join(", "); - } - return list; - } +const Tags = ({ tags }) => ( + <Stack + direction="row" + gap={1.5} + flexWrap="wrap" + > + {tags.map((tag) => ( + <Chip + key={tag} + label={tag} + sx={{ minWidth: "50px" }} + /> + ))} + </Stack> +); - return ""; - } +const getTableData = (host) => ({ + "device type": host?.netBoxHost?.vm + ? "Virtual machine" + : host?.netBoxHost?.deviceType, + description: host?.netBoxHost?.description ? ( + host.netBoxHost.description + ) : ( + <EmptyValue /> + ), + scope: host?.netBoxHost?.scope, + tags: host?.netBoxHost?.tags ? ( + <Tags tags={host?.netBoxHost?.tags} /> + ) : ( + <EmptyValue /> + ) +}); - function renderVmOwners(owners) { - if (owners && owners.length > 0) { - return ( - <Stack - direction="row" - flexWrap="wrap" - divider={<Typography component="span">, </Typography>} - > - {owners.map((username) => ( - <InternalLink - to={`/user/${username}`} - label={`${username} VM Owner User profile`} - key={username} - > - {username} - </InternalLink> - ))} - </Stack> - ); - } else { - return <EmptyValue />; - } - } - - const obj = { - "device type": host?.netBoxHost?.deviceType, - description: host?.netBoxHost?.description, - scope: host?.netBoxHost?.scope, - "vm owner": renderVmOwners(host?.netBoxHost?.vmOwner), - "ansible groups": listToString(host?.netBoxHost?.ansibleGroups) - }; - - return ( - <KeyValueTable - obj={obj} - variant="overline" - /> - ); -}; +export const HostDetailsTable = ({ host }) => ( + <KeyValueTable + obj={getTableData(host)} + variant="overline" + /> +);