Use artofact downloader hook in fetching markdown html

opendatahub-io · Aug 1, 2024 · 5446aae · 5446aae
1 parent 3c946bf
commit 5446aae
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 80 deletions.
diff --git a/frontend/src/concepts/pipelines/apiHooks/useArtifactStorage.ts b/frontend/src/concepts/pipelines/apiHooks/useArtifactStorage.ts
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Artifact } from '~/third_party/mlmd';
 import { usePipelinesAPI } from '~/concepts/pipelines/context';
 import { fetchStorageObject, fetchStorageObjectSize } from '~/services/storageService';
@@ -21,65 +22,79 @@ export type ArtifactType =
 export const useArtifactStorage = (): ArtifactType => {
   const s3EndpointAvailable = useIsAreaAvailable(SupportedArea.S3_ENDPOINT).status;
   const artifactApiAvailable = useIsAreaAvailable(SupportedArea.ARTIFACT_API).status;
+
   const { api, namespace } = usePipelinesAPI();
 
-  if (!s3EndpointAvailable && !artifactApiAvailable) {
-    return { enabled: false };
-  }
+  const enabled = s3EndpointAvailable || artifactApiAvailable;
 
-  const getStorageObject = async (artifact: Artifact): Promise<string> => {
-    if (artifactApiAvailable) {
-      return api
-        .getArtifact({}, artifact.getId(), 'DOWNLOAD')
-        .then((artifactStorage) => {
-          if (artifactStorage.download_url) {
-            return fetch(artifactStorage.download_url).then((downloadObject) =>
-              downloadObject.text(),
-            );
-          }
-          return Promise.reject();
-        })
-        .catch((e) => {
-          throw new Error(`Error fetching Storage object ${e}`);
-        });
-    }
+  const getStorageObject = React.useCallback(
+    async (artifact: Artifact): Promise<string> => {
+      if (artifactApiAvailable) {
+        return api
+          .getArtifact({}, artifact.getId(), 'DOWNLOAD')
+          .then((artifactStorage) => {
+            if (artifactStorage.download_url) {
+              return fetch(artifactStorage.download_url).then((downloadObject) =>
+                downloadObject.text(),
+              );
+            }
+            return Promise.reject();
+          })
+          .catch((e) => {
+            throw new Error(`Error fetching Storage object ${e}`);
+          });
+      }
 
-    const path = artifact.getUri();
-    const uriComponents = extractS3UriComponents(path);
-    if (uriComponents) {
-      return fetchStorageObject(namespace, uriComponents.path);
-    }
-    return Promise.reject();
-  };
+      const path = artifact.getUri();
+      const uriComponents = extractS3UriComponents(path);
+      if (uriComponents) {
+        return fetchStorageObject(namespace, uriComponents.path);
+      }
+      return Promise.reject();
+    },
+    [api, artifactApiAvailable, namespace],
+  );
 
-  const getStorageObjectSize = async (artifact: Artifact): Promise<number> => {
-    if (artifactApiAvailable) {
-      return api
-        .getArtifact({}, artifact.getId())
-        .then((artifactStorage) => Number(artifactStorage.artifact_size))
-        .catch((e) => {
-          throw new Error(`Error fetching Storage size ${e}`);
-        });
-    }
-    const path = artifact.getUri();
-    const uriComponents = extractS3UriComponents(path);
-    if (uriComponents) {
-      return fetchStorageObjectSize(namespace, uriComponents.path);
-    }
-    return Promise.reject();
-  };
+  const getStorageObjectSize = React.useCallback(
+    async (artifact: Artifact): Promise<number> => {
+      if (artifactApiAvailable) {
+        return api
+          .getArtifact({}, artifact.getId())
+          .then((artifactStorage) => Number(artifactStorage.artifact_size))
+          .catch((e) => {
+            throw new Error(`Error fetching Storage size ${e}`);
+          });
+      }
+      const path = artifact.getUri();
+      const uriComponents = extractS3UriComponents(path);
+      if (uriComponents) {
+        return fetchStorageObjectSize(namespace, uriComponents.path);
+      }
+      return Promise.reject();
+    },
+    [api, artifactApiAvailable, namespace],
+  );
 
-  const getStorageObjectUrl = async (artifact: Artifact): Promise<string | undefined> => {
-    if (artifactApiAvailable) {
-      return api
-        .getArtifact({}, artifact.getId(), 'DOWNLOAD')
-        .then((artifactStorage) => artifactStorage.download_url)
-        .catch((e) => {
-          throw new Error(`Error fetching Storage url ${e}`);
-        });
-    }
-    return getArtifactUrlFromUri(artifact.getUri(), namespace);
-  };
+  const getStorageObjectUrl = React.useCallback(
+    async (artifact: Artifact): Promise<string | undefined> => {
+      if (artifactApiAvailable) {
+        return api
+          .getArtifact({}, artifact.getId(), 'DOWNLOAD')
+          .then((artifactStorage) => artifactStorage.download_url)
+          .catch((e) => {
+            throw new Error(`Error fetching Storage url ${e}`);
+          });
+      }
+      return getArtifactUrlFromUri(artifact.getUri(), namespace);
+    },
+    [api, artifactApiAvailable, namespace],
+  );
 
-  return { enabled: true, getStorageObject, getStorageObjectSize, getStorageObjectUrl };
+  return React.useMemo(
+    () =>
+      enabled
+        ? { enabled: true, getStorageObject, getStorageObjectSize, getStorageObjectUrl }
+        : { enabled: false },
+    [enabled, getStorageObject, getStorageObjectSize, getStorageObjectUrl],
+  );
 };
diff --git a/...rc/concepts/pipelines/content/compareRuns/metricsSection/markdown/useFetchMarkdownMaps.ts b/...rc/concepts/pipelines/content/compareRuns/metricsSection/markdown/useFetchMarkdownMaps.ts
@@ -1,14 +1,12 @@
 import React from 'react';
 import { RunArtifact } from '~/concepts/pipelines/apiHooks/mlmd/types';
-import { extractS3UriComponents } from '~/concepts/pipelines/content/artifacts/utils';
+import { useArtifactStorage } from '~/concepts/pipelines/apiHooks/useArtifactStorage';
 import { MarkdownAndTitle } from '~/concepts/pipelines/content/compareRuns/metricsSection/markdown/MarkdownCompare';
 import {
   getFullArtifactPathLabel,
   getFullArtifactPaths,
 } from '~/concepts/pipelines/content/compareRuns/metricsSection/utils';
-import { usePipelinesAPI } from '~/concepts/pipelines/context';
 import { PipelineRunKFv2 } from '~/concepts/pipelines/kfTypes';
-import { fetchStorageObject, fetchStorageObjectSize } from '~/services/storageService';
 import { allSettledPromises } from '~/utilities/allSettledPromises';
 
 const useFetchMarkdownMaps = (
@@ -18,8 +16,9 @@ const useFetchMarkdownMaps = (
   runMap: Record<string, PipelineRunKFv2>;
   configsLoaded: boolean;
 } => {
-  const { namespace } = usePipelinesAPI();
   const [configsLoaded, setConfigsLoaded] = React.useState(false);
+  const artifactStorage = useArtifactStorage();
+
   const [configMapBuilder, setConfigMapBuilder] = React.useState<
     Record<string, MarkdownAndTitle[]>
   >({});
@@ -39,22 +38,25 @@ const useFetchMarkdownMaps = (
         .filter((path) => !!path.linkedArtifact.artifact.getUri())
         .map(async (path) => {
           const { run } = path;
-          const uriComponents = extractS3UriComponents(path.linkedArtifact.artifact.getUri());
-          if (!uriComponents) {
-            return null;
+          let sizeBytes: number | undefined;
+          let text: string | undefined;
+
+          if (artifactStorage.enabled) {
+            sizeBytes = await artifactStorage
+              .getStorageObjectSize(path.linkedArtifact.artifact)
+              .catch(() => undefined);
+            text = await artifactStorage
+              .getStorageObject(path.linkedArtifact.artifact)
+              .catch(() => undefined);
           }
-          const sizeBytes = await fetchStorageObjectSize(namespace, uriComponents.path).catch(
-            () => undefined,
-          );
-          const text = await fetchStorageObject(namespace, uriComponents.path).catch(() => null);
 
-          if (text === null) {
+          if (text === undefined) {
             return null;
           }
-
           return { run, sizeBytes, text, path };
         }),
-    [fullArtifactPaths, namespace],
+
+    [artifactStorage, fullArtifactPaths],
   );
 
   React.useEffect(() => {

diff --git a/...ncepts/pipelines/content/pipelinesDetails/pipelineRun/artifacts/ArtifactVisualization.tsx b/...ncepts/pipelines/content/pipelinesDetails/pipelineRun/artifacts/ArtifactVisualization.tsx
@@ -26,16 +26,13 @@ import ROCCurve from '~/concepts/pipelines/content/artifacts/charts/ROCCurve';
 import ConfusionMatrix from '~/concepts/pipelines/content/artifacts/charts/confusionMatrix/ConfusionMatrix';
 import { buildConfusionMatrixConfig } from '~/concepts/pipelines/content/artifacts/charts/confusionMatrix/utils';
 import { isConfusionMatrix } from '~/concepts/pipelines/content/compareRuns/metricsSection/confusionMatrix/utils';
-import {
-  MAX_STORAGE_OBJECT_SIZE,
-  fetchStorageObject,
-  fetchStorageObjectSize,
-} from '~/services/storageService';
+import { MAX_STORAGE_OBJECT_SIZE } from '~/services/storageService';
 import { usePipelinesAPI } from '~/concepts/pipelines/context';
 import { extractS3UriComponents } from '~/concepts/pipelines/content/artifacts/utils';
 import MarkdownView from '~/components/MarkdownView';
 import { useIsAreaAvailable, SupportedArea } from '~/concepts/areas';
 import { bytesAsRoundedGiB } from '~/utilities/number';
+import { useArtifactStorage } from '~/concepts/pipelines/apiHooks/useArtifactStorage';
 import { getArtifactProperties } from './utils';
 
 interface ArtifactVisualizationProps {
@@ -48,11 +45,11 @@ export const ArtifactVisualization: React.FC<ArtifactVisualizationProps> = ({ ar
   const [loading, setLoading] = React.useState<boolean>(false);
   const { namespace } = usePipelinesAPI();
   const isS3EndpointAvailable = useIsAreaAvailable(SupportedArea.S3_ENDPOINT).status;
-
+  const artifactStorage = useArtifactStorage();
   const artifactType = artifact.getType();
 
   React.useEffect(() => {
-    if (!isS3EndpointAvailable) {
+    if (!artifactStorage.enabled) {
       return;
     }
 
@@ -61,23 +58,25 @@ export const ArtifactVisualization: React.FC<ArtifactVisualizationProps> = ({ ar
       if (uri) {
         const uriComponents = extractS3UriComponents(uri);
         if (uriComponents) {
-          const downloadArtifact = async (path: string) => {
-            await fetchStorageObjectSize(namespace, path)
+          const downloadArtifact = async (currentArtifact: Artifact) => {
+            await artifactStorage
+              .getStorageObjectSize(currentArtifact)
               .then((size) => setDownloadedArtifactSize(size))
               .catch(() => null);
-            await fetchStorageObject(namespace, path)
+            await artifactStorage
+              .getStorageObject(artifact)
               .then((text) => setDownloadedArtifact(text))
               .catch(() => null);
             setLoading(false);
           };
           setLoading(true);
           setDownloadedArtifact(null);
           setDownloadedArtifactSize(null);
-          downloadArtifact(uriComponents.path);
+          downloadArtifact(artifact);
         }
       }
     }
-  }, [artifact, artifactType, isS3EndpointAvailable, namespace]);
+  }, [artifact, artifactStorage, artifactType, isS3EndpointAvailable, namespace]);
 
   if (artifactType === ArtifactType.CLASSIFICATION_METRICS) {
     const confusionMatrix = artifact.getCustomPropertiesMap().get('confusionMatrix');

diff --git a/manifests/common/crd/odhdashboardconfigs.opendatahub.io.crd.yaml b/manifests/common/crd/odhdashboardconfigs.opendatahub.io.crd.yaml
@@ -71,6 +71,8 @@ spec:
                       type: boolean
                     disableS3Endpoint:
                       type: boolean
+                    disableArtifactsAPI:
+                      type: boolean
                     disableDistributedWorkloads:
                       type: boolean
                     disableModelRegistry: