Merge branch 'CE-2866-UI-updates-host-details' into 'develop'

CE-2866: UI updates in host details

See merge request !473

src/views/host/details/HostDetailsTable.js

 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">,&nbsp;</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"
+  />
+);