feat(artifacts): verification

branding/manifest.json

@@ -3,7 +3,7 @@
   "name": "RHTAS Console UI",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "favicon-rh.svg",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     }

client/index.html

@@ -9,7 +9,7 @@
     <meta name="theme-color" content="#000000"/>
     <meta name="version" content="2.0.0"/>
     <link rel="manifest" href="/manifest.json"/>
-    <link rel="icon" href="/favicon.ico"/>
+    <link rel="icon" href="/favicon-rh.svg"/>
     <base href="/"/>
     <script>
       window._env = "<%= _env %>";

client/openapi/console.yaml

@@ -644,6 +644,25 @@ components:
       required:
         - mediaType
         - size
+    Signatures:
+      type: array
+      items:
+        $ref: '#/components/schemas/Signature'
+    Signature:
+      type: object
+      description: A cryptographic signature with its associated certificate chain
+      properties:
+        signature:
+          type: string
+          description: A single cryptographic signature encoded as a string
+        certificateChain:
+          type: array
+          description: The X.509 certificate chain associated with this signature
+          items:
+            type: string
+      required:
+        - signature
+        - certificateChain
     ImageMetadataResponse:
       type: object
       properties:
@@ -657,6 +676,14 @@ components:
           type: string
           description: The container image's digest (e.g., SHA256 hash)
           example: sha256:abcdef1234567890abcdef1234567890abcdef1234567890abcdef1234567890
+        signatures:
+          $ref: '#/components/schemas/Signatures'
+        attestations:
+          type: array
+          description: A list of signed attestations associated with the image
+          items:
+            type: string
+            description: A single signed attestation payload or reference
       required:
         - artifact
         - metadata

client/src/app/Routes.tsx

@@ -5,18 +5,21 @@ import { Navigate, useRoutes } from "react-router-dom";
 import { Bullseye, Spinner } from "@patternfly/react-core";
 import { ErrorFallback } from "./components/ErrorFallback";
 
+const Artifacts = lazy(() => import("./pages/Artifacts"));
 const TrustRoot = lazy(() => import("./pages/TrustRoot"));
 const RekorSearch = lazy(() => import("./pages/RekorSearch"));
 
 export const Paths = {
-  trustRoot: "/trust-root",
+  artifacts: "/artifacts",
   rekorSearch: "/rekor-search",
+  trustRoot: "/trust-root",
 } as const;
 
 export const AppRoutes = () => {
   const allRoutes = useRoutes([
     { path: "/", element: <Navigate to={Paths.trustRoot} /> },
     { path: Paths.trustRoot, element: <TrustRoot /> },
+    { path: Paths.artifacts, element: <Artifacts /> },
     { path: Paths.rekorSearch, element: <RekorSearch /> },
   ]);
 

client/src/app/layout/sidebar.tsx

@@ -21,7 +21,15 @@ export const SidebarApp: React.FC = () => {
                 return css(LINK_CLASS, isActive ? ACTIVE_LINK_CLASS : "");
               }}
             >
-              Trust root
+              Trust Root
+            </NavLink>
+            <NavLink
+              to={Paths.artifacts}
+              className={({ isActive }) => {
+                return css(LINK_CLASS, isActive ? ACTIVE_LINK_CLASS : "");
+              }}
+            >
+              Artifacts
             </NavLink>
           </li>
           <li className={nav.navItem}>

client/src/app/pages/Artifacts/Artifacts.tsx

@@ -0,0 +1,156 @@
+import { Fragment, useRef, useState } from "react";
+import {
+  Button,
+  Content,
+  Flex,
+  FlexItem,
+  Form,
+  FormGroup,
+  FormGroupLabelHelp,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  PageSection,
+  Popover,
+  TextInput,
+} from "@patternfly/react-core";
+import { useFetchArtifactsImageData, useVerifyArtifact } from "@app/queries/artifacts";
+import { LoadingWrapper } from "@app/components/LoadingWrapper";
+import { ArtifactResults } from "./components/ArtifactResults";
+import { Controller, useForm } from "react-hook-form";
+import { ExclamationCircleIcon } from "@patternfly/react-icons";
+
+const PLACEHOLDER_URI = "docker.io/library/nginx:latest";
+
+interface FormInputs {
+  searchInput: string;
+}
+
+export const Artifacts = () => {
+  const [artifactUri, setArtifactUri] = useState<string | null>();
+  const labelHelpRef = useRef(null);
+
+  const {
+    artifact,
+    isFetching: isFetchingArtifactMetadata,
+    fetchError: fetchErrorArtifactMetadata,
+  } = useFetchArtifactsImageData({ uri: artifactUri });
+
+  const { mutate: verifyArtifact, data: verification, error: verifyError } = useVerifyArtifact();
+
+  const {
+    control,
+    handleSubmit,
+    watch,
+    formState: { errors },
+  } = useForm<FormInputs>({
+    mode: "all",
+    reValidateMode: "onChange",
+    defaultValues: {
+      searchInput: "",
+    },
+  });
+
+  const onSubmit = (data: FormInputs) => {
+    const uri = data.searchInput?.trim();
+    if (!uri) return;
+    setArtifactUri(uri);
+    // kick off verification for this URI as well
+    verifyArtifact({ uri, expectedSAN: null });
+  };
+
+  const query = watch("searchInput");
+  const isEmpty = query.trim().length === 0;
+
+  return (
+    <Fragment>
+      <PageSection variant="default">
+        <Content>
+          <h1>Artifacts</h1>
+          <p>Search for an artifact.</p>
+        </Content>
+      </PageSection>
+      <PageSection>
+        <Form onSubmit={(e) => void handleSubmit(onSubmit)(e)}>
+          <Flex>
+            <Flex direction={{ default: "column" }} flex={{ default: "flex_3" }}>
+              <FlexItem>
+                <Controller
+                  name="searchInput"
+                  control={control}
+                  rules={{ required: { value: true, message: "A URI is required" } }}
+                  render={({ field, fieldState }) => (
+                    <FormGroup
+                      label="Container Image URI"
+                      labelHelp={
+                        <Popover
+                          triggerRef={labelHelpRef}
+                          headerContent={<div>Uniform Resource Identifier (URI)</div>}
+                          bodyContent={
+                            <div>
+                              The URI identifies where a resource, like a container image, lives (e.g.,{" "}
+                              {PLACEHOLDER_URI})
+                            </div>
+                          }
+                        >
+                          <FormGroupLabelHelp ref={labelHelpRef} aria-label="More info for URI field" />
+                        </Popover>
+                      }
+                      isRequired
+                      fieldId="uri"
+                    >
+                      <TextInput
+                        aria-label={`uri input field`}
+                        {...field}
+                        type="text"
+                        name="searchInput"
+                        id="uri"
+                        aria-describedby="uri-helper"
+                        aria-invalid={errors.searchInput ? "true" : "false"}
+                        placeholder={PLACEHOLDER_URI}
+                        validated={fieldState.invalid ? "error" : "default"}
+                      />
+                      {fieldState.invalid && (
+                        <FormHelperText>
+                          <HelperText>
+                            <HelperTextItem icon={<ExclamationCircleIcon />} variant={"error"}>
+                              {fieldState.invalid ? fieldState.error?.message : <span>A value is required</span>}
+                            </HelperTextItem>
+                          </HelperText>
+                        </FormHelperText>
+                      )}
+                    </FormGroup>
+                  )}
+                ></Controller>
+              </FlexItem>
+            </Flex>
+            <Flex
+              direction={{ default: "column" }}
+              alignSelf={{ default: "alignSelfFlexStart" }}
+              flex={{ default: "flex_1" }}
+            >
+              <FlexItem style={{ marginTop: "2em" }}>
+                <Button
+                  variant="primary"
+                  id="search-form-button"
+                  isBlock={true}
+                  isDisabled={isEmpty}
+                  type="submit"
+                  spinnerAriaLabel="Loading"
+                  spinnerAriaLabelledBy="search-form-button"
+                >
+                  Search
+                </Button>
+              </FlexItem>
+            </Flex>
+          </Flex>
+        </Form>
+      </PageSection>
+      <PageSection>
+        <LoadingWrapper isFetching={isFetchingArtifactMetadata} fetchError={fetchErrorArtifactMetadata ?? verifyError}>
+          {artifact && verification && <ArtifactResults artifact={artifact} verification={verification} />}
+        </LoadingWrapper>
+      </PageSection>
+    </Fragment>
+  );
+};

client/src/app/pages/Artifacts/components/ArtifactResults.tsx

@@ -0,0 +1,78 @@
+import { useState } from "react";
+import type { ImageMetadataResponse } from "@app/client";
+import type { ArtifactVerificationViewModel } from "@app/queries/artifacts";
+import {
+  Button,
+  Card,
+  CardBody,
+  CardHeader,
+  Content,
+  ContentVariants,
+  Flex,
+  FlexItem,
+  Label,
+  Panel,
+  Tab,
+  Tabs,
+  TabTitleText,
+} from "@patternfly/react-core";
+import { ArtifactResultsSummary } from "./ArtifactResultsSummary";
+import { ArtifactResultsSignatures } from "./ArtifactResultsSignatures";
+import { ArtifactResultsAttestations } from "./ArtifactResultsAttestations";
+import { verificationStatusToLabelColor } from "@app/utils/utils";
+
+export interface IArtifactResultsProps {
+  artifact: ImageMetadataResponse;
+  verification: ArtifactVerificationViewModel;
+}
+
+export const ArtifactResults = ({ artifact, verification }: IArtifactResultsProps) => {
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
+  const { overallStatus } = verification.summary;
+  const { label: verificationLabel, color: verificationLabelColor } = verificationStatusToLabelColor(overallStatus);
+
+  const handleTabClick = (
+    _event: React.MouseEvent<unknown> | React.KeyboardEvent | MouseEvent,
+    tabIndex: string | number
+  ) => {
+    setActiveTabKey(tabIndex);
+  };
+
+  return (
+    <div style={{ margin: "2em auto" }}>
+      <p>Showing 1 of 1</p>
+      <Card style={{ margin: "1.5em auto 2em", overflowY: "hidden" }}>
+        <CardHeader>
+          <Content component={ContentVariants.h4} style={{ overflow: "hidden", textOverflow: "ellipsis" }}>
+            <Flex className="border">
+              <FlexItem>
+                Artifact: <Button variant="plain">{artifact.image}</Button>
+              </FlexItem>
+              <FlexItem align={{ default: "alignRight" }}>
+                <Label color={verificationLabelColor}>{verificationLabel}</Label>
+              </FlexItem>
+            </Flex>
+          </Content>
+        </CardHeader>
+        <CardBody>
+          <Panel style={{ margin: "0.75em auto" }}>
+            {/** ARTIFACT RESULTS SUMMARY */}
+            <ArtifactResultsSummary artifact={artifact} verification={verification} />
+          </Panel>
+          <Panel style={{ marginTop: "1.25em" }}>
+            <Tabs activeKey={activeTabKey} onSelect={handleTabClick} aria-label="Artifact results" role="region">
+              <Tab eventKey={0} title={<TabTitleText>Signatures</TabTitleText>} aria-label="Signatures">
+                {/** SIGNATURES */}
+                <ArtifactResultsSignatures signatures={verification.signatures} />
+              </Tab>
+              <Tab eventKey={1} title={<TabTitleText>Attestations</TabTitleText>} aria-label="Attestations">
+                {/** ATTESTATIONS */}
+                <ArtifactResultsAttestations attestations={verification.attestations} />
+              </Tab>
+            </Tabs>
+          </Panel>
+        </CardBody>
+      </Card>
+    </div>
+  );
+};