[DOP-31841] Show job tags

Author: dolfinus

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "data-rentgen",
-    "version": "0.4.8",
+    "version": "0.5.0",
     "private": true,
     "description": "Frontend for Data.Rentgen",
     "license": "Apache-2.0",

package.json

@@ -0,0 +1,20 @@
+import { TagResponseV1 } from "@/dataProvider/types";
+import { Chip, Box } from "@mui/material";
+
+const TagValuesField = ({ tag }: { tag: TagResponseV1 }) => {
+    return (
+        <Box sx={{ width: "fit-content" }}>
+            {tag.values.map((tag_value, tag_value_index) => (
+                <Chip
+                    key={tag_value_index}
+                    label={`${tag.name}: ${tag_value.value}`}
+                    size="small"
+                    variant="outlined"
+                    sx={{ fontSize: "0.7rem" }}
+                />
+            ))}
+        </Box>
+    );
+};
+
+export default TagValuesField;

src/components/base/TagValuesField.tsx

@@ -8,6 +8,7 @@ import ListActions from "./ListActions";
 import RowCountField from "./RowCountField";
 import StatusField from "./StatusField";
 import StatusRaField from "./StatusRaField";
+import TagValuesField from "./TagValuesField";
 
 export {
     ByteCountField,
@@ -20,4 +21,5 @@ export {
     StatusField,
     StatusRaField,
     IOStatisticsField,
+    TagValuesField,
 };

src/components/base/index.ts

@@ -1,6 +1,7 @@
 import { useRecordContext } from "react-admin";
 import { DatasetDetailedResponseV1 } from "@/dataProvider/types";
-import { Stack, Chip, Box } from "@mui/material";
+import { Stack, Box } from "@mui/material";
+import { TagValuesField } from "@/components/base";
 
 const DatasetRaTag = () => {
     const record: DatasetDetailedResponseV1 | undefined = useRecordContext();
@@ -11,15 +12,7 @@ const DatasetRaTag = () => {
         <Stack spacing={1}>
             {record.tags?.map((tag, tag_index) => (
                 <Box key={tag_index} sx={{ width: "fit-content" }}>
-                    {tag.values.map((tag_value, tag_value_index) => (
-                        <Chip
-                            key={tag_value_index}
-                            label={`${tag.name}: ${tag_value.value}`}
-                            size="small"
-                            variant="outlined"
-                            sx={{ fontSize: "0.7rem" }}
-                        />
-                    ))}
+                    <TagValuesField tag={tag} />
                 </Box>
             ))}
         </Stack>

src/components/dataset/DatasetRaTag.tsx

@@ -1,5 +1,6 @@
 import { ReactElement } from "react";
 import {
+    ArrayField,
     Show,
     SimpleShowLayout,
     TabbedShowLayout,
@@ -14,6 +15,7 @@ import {
     LocationRaTypeWithIconField,
 } from "@/components/location";
 import JobRaTypeField from "./JobRaTypeField";
+import JobRaTag from "./JobRaTag";
 
 const JobRaShow = (): ReactElement => {
     return (
@@ -37,6 +39,12 @@ const JobRaShow = (): ReactElement => {
                     source="data.location.name"
                     label="resources.locations.fields.name"
                 />
+                <ArrayField
+                    source="data.tags"
+                    label="resources.datasets.fields.tags"
+                >
+                    <JobRaTag />
+                </ArrayField>
 
                 <TabbedShowLayout>
                     <TabbedShowLayout.Tab label="resources.jobs.tabs.runs">

src/components/job/JobRaShow.tsx

@@ -0,0 +1,22 @@
+import { useRecordContext } from "react-admin";
+import { JobDetailedResponseV1 } from "@/dataProvider/types";
+import { Stack, Box } from "@mui/material";
+import { TagValuesField } from "@/components/base";
+
+const JobRaTag = () => {
+    const record: JobDetailedResponseV1 | undefined = useRecordContext();
+    if (!record) {
+        return null;
+    }
+    return (
+        <Stack spacing={1}>
+            {record.tags?.map((tag, tag_index) => (
+                <Box key={tag_index} sx={{ width: "fit-content" }}>
+                    <TagValuesField tag={tag} />
+                </Box>
+            ))}
+        </Stack>
+    );
+};
+
+export default JobRaTag;

src/components/job/JobRaTag.tsx

@@ -67,6 +67,7 @@ interface JobResponseV1 extends RaRecord {
 interface JobDetailedResponseV1 {
     id: string;
     data: JobResponseV1;
+    tags: TagResponseV1[];
 }
 
 interface JobTypesResponseV1 {
@@ -336,4 +337,6 @@ export type {
     PersonalTokenScopeV1,
     PersonalTokenDetailedResponseV1,
     PersonalTokenCreateDetailedResponseV1,
+    TagResponseV1,
+    TagValueResponseV1,
 };