Generate clickable artifact url for s3 URI (#3531)

* Generate clickable artifact url for s3 URI

Signed-off-by: Jiaxin Shan <seedjeffwan@gmail.com>

* Format code using prettier@1.19.1

* Fix unit test failure

* Use encoded string in bucket url

frontend/src/components/ArtifactLink.tsx

@@ -1,5 +1,9 @@
 import * as React from 'react';
-import { generateGcsConsoleUri, generateMinioArtifactUrl } from '../lib/Utils';
+import {
+  generateGcsConsoleUri,
+  generateS3ArtifactUrl,
+  generateMinioArtifactUrl,
+} from '../lib/Utils';
 
 /**
  * A component that renders an artifact URL as clickable link if URL is correct
@@ -12,6 +16,9 @@ export const ArtifactLink: React.FC<{ artifactUri?: string }> = ({ artifactUri }
       if (gcsConsoleUrl) {
         clickableUrl = gcsConsoleUrl;
       }
+    }
+    if (artifactUri.startsWith('s3:')) {
+      clickableUrl = generateS3ArtifactUrl(artifactUri);
     } else if (artifactUri.startsWith('http:') || artifactUri.startsWith('https:')) {
       clickableUrl = artifactUri;
     } else if (artifactUri.startsWith('minio:')) {

frontend/src/lib/Utils.test.ts

@@ -19,6 +19,7 @@ import {
   enabledDisplayString,
   formatDateString,
   generateMinioArtifactUrl,
+  generateS3ArtifactUrl,
   getRunDuration,
   getRunDurationFromWorkflow,
   logger,
@@ -253,4 +254,12 @@ describe('Utils', () => {
       expect(generateMinioArtifactUrl('ZZZ://my-bucket/a/b/c')).toBe(undefined);
     });
   });
+
+  describe('generateS3ArtifactUrl', () => {
+    it('handles s3:// URIs', () => {
+      expect(generateS3ArtifactUrl('s3://my-bucket/a/b/c')).toBe(
+        'artifacts/get?source=s3&bucket=my-bucket&key=a%2Fb%2Fc',
+      );
+    });
+  });
 });

frontend/src/lib/Utils.tsx

@@ -328,6 +328,26 @@ export function generateMinioArtifactUrl(minioUri: string, peek?: number): strin
   return generateArtifactUrl('minio', matches[1], matches[2], peek);
 }
 
+const S3_URI_PREFIX = 's3://';
+/**
+ * Generates an HTTPS API URL from s3:// uri
+ *
+ * @param s3Uri S3 uri that starts with s3://, like s3://ml-pipeline/path/file
+ * @returns A URL that leads to the artifact data. Returns undefined when s3Uri is not valid.
+ */
+export function generateS3ArtifactUrl(s3Uri: string): string | undefined {
+  if (!s3Uri.startsWith(S3_URI_PREFIX)) {
+    return undefined;
+  }
+
+  // eslint-disable-next-line no-useless-escape
+  const matches = s3Uri.match(/^s3:\/\/([^\/]+)\/(.+)$/);
+  if (matches == null) {
+    return undefined;
+  }
+  return generateArtifactUrl('s3', matches[1], matches[2]);
+}
+
 export function buildQuery(queriesMap: { [key: string]: string | number | undefined }): string {
   const queryContent = Object.entries(queriesMap)
     .filter((entry): entry is [string, string | number] => entry[1] != null)