CE-3403: Display reverse alias

src/mocks/fixtures/RecordResponse.json

@@ -14,7 +14,7 @@
       "iocVersion": "3926de9c5a8fa42fa8b239f98bf3477059d4cbb6",
       "description": "Application Directory",
       "recordType": "waveform",
-      "alias": null
+      "aliasFor": null
     },
     {
       "name": "CCCE:SC-IOC-010:#APP_DIR1",
@@ -26,7 +26,7 @@
       "iocVersion": "3926de9c5a8fa42fa8b239f98bf3477059d4cbb6",
       "description": "Application Directory Part 1",
       "recordType": "stringin",
-      "alias": null
+      "aliasFor": null
     },
     {
       "name": "CCCE:SC-IOC-010:#APP_DIR2",
@@ -38,7 +38,7 @@
       "iocVersion": "3926de9c5a8fa42fa8b239f98bf3477059d4cbb6",
       "description": "Application Directory Part 2",
       "recordType": "stringin",
-      "alias": null
+      "aliasFor": null
     }
   ]
 }

src/store/deployApi.ts

@@ -907,7 +907,7 @@ export type Record = {
   iocVersion?: string;
   description?: string;
   recordType?: string;
-  alias?: string;
+  aliasFor?: string;
 };
 export type PagedRecordResponse = {
   totalCount?: number;
@@ -925,7 +925,8 @@ export type RecordDetails = {
   iocVersion?: string;
   description?: string;
   recordType?: string;
-  alias?: string;
+  aliasFor?: string;
+  aliasTo?: string[];
   properties?: {
     [key: string]: string;
   };

src/views/records/Alias.jsx

+import { EmptyValue, InternalLink, useUniqueKeys } from "@ess-ics/ce-ui-common";
+import { Stack } from "@mui/material";
+
+export const Alias = ({ aliases }) => {
+  const itemsKeys = useUniqueKeys(aliases);
+
+  if (!aliases || aliases.length === 0) {
+    return <EmptyValue />;
+  }
+
+  return (
+    <Stack
+      direction="row"
+      gap={1.5}
+      flexWrap="wrap"
+    >
+      {aliases.map((alias, index) => (
+        <InternalLink
+          key={itemsKeys[index]}
+          to={`/records/${alias}`}
+          label={alias}
+        >
+          {`${alias}${index < aliases.length - 1 && aliases.length > 1 ? "," : ""}`}
+        </InternalLink>
+      ))}
+    </Stack>
+  );
+};

src/views/records/RecordDetailsView.jsx

@@ -6,11 +6,11 @@ import {
   KeyValueTable,
   GlobalAppBarContext,
   InternalLink,
-  EmptyValue,
   useAPIMethod,
   formatDateAndTime
 } from "@ess-ics/ce-ui-common";
 import { useParams, useNavigate } from "react-router-dom";
+import { Alias } from "./Alias";
 import { RecordBadge } from "../../components/records/RecordBadge";
 import {
   applicationTitle,
@@ -78,17 +78,8 @@ export function RecordDetailsView() {
       ) : (
         record?.iocName
       ),
-      Alias: record.alias ? (
-        <Typography>
-          <InternalLink
-            to={`/records/${record.alias}`}
-            label={`Record details, alias ${record?.alias}`}
-          >
-            {record?.alias}
-          </InternalLink>
-        </Typography>
-      ) : (
-        <EmptyValue />
+      "Alias for": (
+        <Alias aliases={record?.aliasFor ? [record?.aliasFor] : []} />
       ),
       Description: record?.description,
       Version: record?.iocVersion,
@@ -104,7 +95,8 @@ export function RecordDetailsView() {
         </Typography>
       ) : (
         record?.hostName
-      )
+      ),
+      "Alias to": <Alias aliases={record?.aliasTo} />
     };
 
     for (const [key, value] of Object.entries(record.properties)) {
@@ -114,11 +106,12 @@ export function RecordDetailsView() {
         subset["Record type"] = value;
       } else if (key.toLowerCase().includes("recorddesc")) {
         subset.Description = value;
-      } else if (key.toLowerCase().includes("alias")) {
-        subset.Alias = value;
       } else if (key.toLowerCase() === "iocversion") {
         subset["IOC Revision"] = value;
-      } else if (key.toLowerCase() !== "iocid") {
+      } else if (
+        key.toLowerCase() !== "iocid" &&
+        key.toLowerCase() !== "alias"
+      ) {
         subset[key.replaceAll("_", " ")] = value;
       }
     }