Add Artifact Metadata section to OCI Repository detail pages (#4002)

* add artifact metadata, update tests * metadata section component * restore label flex * items type
weaveworks · Sep 12, 2023 · 897cef1 · 897cef1
1 parent 554ad63
commit 897cef1
Show file tree

Hide file tree

Showing 7 changed files with 200 additions and 91 deletions.
diff --git a/ui/components/Metadata.tsx b/ui/components/Metadata.tsx
@@ -4,12 +4,12 @@ import { formatMetadataKey, isHTTP } from "../lib/utils";
 import Flex from "./Flex";
 import InfoList from "./InfoList";
 import Link from "./Link";
-import Spacer from "./Spacer";
 import Text from "./Text";
 
 type Props = {
   className?: string;
   metadata?: [string, string][];
+  artifactMetadata?: [string, string][];
   labels?: [string, string][];
 };
 
@@ -21,9 +21,8 @@ const Label = styled(Text)`
   background-color: ${(props) => props.theme.colors.neutralGray};
 `;
 
-function Metadata({ metadata = [], labels = [], className }: Props) {
+const makeMetadata = (metadata: [string, string][]): [string, any][] => {
   const metadataCopy = [];
-
   for (let i = 0; i < metadata.length; i++) {
     metadataCopy[i] = metadata[i].slice();
   }
@@ -41,40 +40,62 @@ function Metadata({ metadata = [], labels = [], className }: Props) {
         </Link>
       );
   });
+  return metadataCopy;
+};
 
+const MetadataSection: React.FC<{
+  title: string;
+  items: [string, string | JSX.Element][];
+}> = ({ title, items }) => {
   return (
-    <Flex wide column className={className} gap="16">
-      {metadataCopy.length > 0 && (
-        <Flex column gap="8">
-          <Text size="large" color="neutral30">
-            Metadata
-          </Text>
-          <InfoList items={metadataCopy} />
-          <Spacer padding="small" />
+    <Flex column gap="8">
+      <Text size="large" color="neutral30">
+        {title}
+      </Text>
+      {title === "Labels" ? (
+        <Flex wide start wrap gap="4">
+          {items.map((label, index) => {
+            return (
+              <Label key={index}>
+                {label[0]}: {label[1]}
+              </Label>
+            );
+          })}
         </Flex>
+      ) : (
+        <InfoList items={items} />
       )}
-      {labels.length > 0 && (
-        <Flex column gap="8">
-          <Text size="large" color="neutral30">
-            Labels
-          </Text>
-          <Flex wide start wrap gap="4">
-            {labels.map((label, index) => {
-              return (
-                <Label key={index}>
-                  {label[0]}: {label[1]}
-                </Label>
-              );
-            })}
-          </Flex>
-        </Flex>
+    </Flex>
+  );
+};
+
+function Metadata({
+  metadata = [],
+  labels = [],
+  artifactMetadata = [],
+  className,
+}: Props) {
+  const metadataCopy = makeMetadata(metadata);
+  const artifactMetadataCopy = makeMetadata(artifactMetadata);
+
+  return (
+    <Flex wide column className={className} gap="12">
+      {metadataCopy.length > 0 && (
+        <MetadataSection title="Metadata" items={metadataCopy} />
+      )}
+      {artifactMetadataCopy.length > 0 && (
+        <MetadataSection
+          title="Artifact Metadata"
+          items={artifactMetadataCopy}
+        />
       )}
+      {labels.length > 0 && <MetadataSection title="Labels" items={labels} />}
     </Flex>
   );
 }
 
 export default styled(Metadata).attrs({
   className: Metadata.name,
 })`
-  margin-top: ${(props) => props.theme.spacing.medium};
+  margin: ${(props) => props.theme.spacing.small} 0;
 `;
diff --git a/ui/components/OCIRepositoryDetail.tsx b/ui/components/OCIRepositoryDetail.tsx
@@ -56,11 +56,6 @@ function OCIRepositoryDetail({
         ["Interval", <Interval interval={ociRepository.interval} />],
         ...clusterInfo,
         ["Namespace", ociRepository.namespace],
-        [
-          "Source",
-          <Link href={ociRepository.source}>{ociRepository.source}</Link>,
-        ],
-        ["Revision", ociRepository.revision],
         ...tenancyInfo,
       ]}
     />

diff --git a/ui/components/SourceDetail.tsx b/ui/components/SourceDetail.tsx
@@ -4,7 +4,7 @@ import { useRouteMatch } from "react-router-dom";
 import styled from "styled-components";
 import { useListAutomations } from "../hooks/automations";
 import { Kind } from "../lib/api/core/types.pb";
-import { HelmRelease, Source } from "../lib/objects";
+import { HelmRelease, OCIRepository, Source } from "../lib/objects";
 import { getSourceRefForAutomation } from "../lib/utils";
 import AutomationsTable from "./AutomationsTable";
 import EventsTable from "./EventsTable";
@@ -17,6 +17,11 @@ import SubRouterTabs, { RouterTab } from "./SubRouterTabs";
 import SyncActions from "./SyncActions";
 import YamlView from "./YamlView";
 
+//must specify OCIRepository type, artifactMetadata causes errors on the Source type
+const getArtifactMetadata = (source: OCIRepository) => {
+  return source.artifactMetadata || null;
+};
+
 type Props = {
   className?: string;
   type: Kind;
@@ -27,7 +32,16 @@ type Props = {
 };
 
 function SourceDetail({ className, source, info, type, customActions }: Props) {
-  const { name, namespace, clusterName, suspended } = source;
+  const {
+    name,
+    namespace,
+    yaml,
+    clusterName,
+    conditions,
+    suspended,
+    metadata,
+    labels,
+  } = source;
 
   const { data: automations, isLoading: automationsLoading } =
     useListAutomations();
@@ -38,18 +52,18 @@ function SourceDetail({ className, source, info, type, customActions }: Props) {
   }
 
   const isNameRelevant = (expectedName) => {
-    return expectedName == source.name;
+    return expectedName == name;
   };
 
   const isRelevant = (expectedType, expectedName) => {
-    return expectedType == source.type && isNameRelevant(expectedName);
+    return expectedType == type && isNameRelevant(expectedName);
   };
 
   const relevantAutomations = _.filter(automations?.result, (a) => {
     if (!source) {
       return false;
     }
-    if (a.clusterName != source.clusterName) {
+    if (a.clusterName != clusterName) {
       return false;
     }
 
@@ -65,10 +79,7 @@ function SourceDetail({ className, source, info, type, customActions }: Props) {
   return (
     <Flex wide tall column className={className} gap="32">
       <Flex column gap="8">
-        <PageStatus
-          conditions={source.conditions}
-          suspended={source.suspended}
-        />
+        <PageStatus conditions={conditions} suspended={suspended} />
         <SyncActions
           name={name}
           namespace={namespace}
@@ -84,28 +95,35 @@ function SourceDetail({ className, source, info, type, customActions }: Props) {
         <RouterTab name="Details" path={`${path}/details`}>
           <>
             <InfoList items={info} />
-            <Metadata metadata={source.metadata} labels={source.labels} />
+            <Metadata
+              metadata={metadata}
+              labels={labels}
+              artifactMetadata={
+                type === Kind.OCIRepository &&
+                getArtifactMetadata(source as OCIRepository)
+              }
+            />
             <AutomationsTable automations={relevantAutomations} hideSource />
           </>
         </RouterTab>
         <RouterTab name="Events" path={`${path}/events`}>
           <EventsTable
-            namespace={source.namespace}
+            namespace={namespace}
             involvedObject={{
-              kind: source.type,
-              name: source.name,
-              namespace: source.namespace,
-              clusterName: source.clusterName,
+              kind: type,
+              name: name,
+              namespace: namespace,
+              clusterName: clusterName,
             }}
           />
         </RouterTab>
         <RouterTab name="yaml" path={`${path}/yaml`}>
           <YamlView
-            yaml={source.yaml}
+            yaml={yaml}
             object={{
-              kind: source.type,
-              name: source.name,
-              namespace: source.namespace,
+              kind: type,
+              name: name,
+              namespace: namespace,
             }}
           />
         </RouterTab>

diff --git a/ui/components/__tests__/Metadata.test.tsx b/ui/components/__tests__/Metadata.test.tsx
@@ -21,6 +21,11 @@ describe("Metadata", () => {
                 ["link-to-google", "https://google.com"],
                 ["multi-lines", "This is first line\nThis is second line\n"],
               ]}
+              artifactMetadata={[
+                ["description", "Value 1"],
+                ["html", "<p><b>html</b></p>"],
+                ["link-to-google", "https://google.com"],
+              ]}
               labels={[
                 ["label", "label"],
                 ["goose", "goose"],