Make gs:// links in metadata UI point to GCS console page

frontend/src/components/GcsLink.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { generateGcsConsoleUri } from '../lib/Utils';
+
+/**
+ * A component that renders a gcs console link when gcsUri is gs:// and pure
+ * text if it is not a valid gs:// uri.
+ */
+export const GcsLink: React.FC<{ gcsUri?: string }> = ({ gcsUri }) => {
+  const gcsConsoleUri = gcsUri ? generateGcsConsoleUri(gcsUri) : undefined;
+  if (gcsConsoleUri) {
+    // Opens in new window safely
+    return <a href={gcsConsoleUri} target={'_blank'} rel={'noreferrer noopener'}>{gcsUri}</a>;
+  } else {
+    return <>{gcsUri}</>;
+  }
+};

frontend/src/components/ResourceInfo.tsx

@@ -18,6 +18,7 @@ import { stylesheet } from 'typestyle';
 import { color, commonCss } from '../Css';
 import { getMetadataValue } from '../lib/Utils';
 import { Artifact, Execution } from '../generated/src/apis/metadata/metadata_store_pb';
+import { GcsLink } from './GcsLink';
 
 export const css = stylesheet({
   field: {
@@ -75,7 +76,9 @@ export class ResourceInfo extends React.Component<ResourceInfoProps, {}> {
           if (this.props.resourceType === ResourceType.ARTIFACT) {
             return <>
               <dt className={css.term}>URI</dt>
-              <dd className={css.value}>{this.props.resource.getUri()}</dd>
+              <dd className={css.value}>
+                <GcsLink gcsUri={this.props.resource.getUri()} />
+              </dd>
             </>;
           }
           return null;

frontend/src/lib/Utils.tsx

@@ -291,3 +291,20 @@ export function getExpandedRow(expandedRows: Map<number, Row[]>, columns: Column
     );
   };
 }
+
+const GCS_CONSOLE_BASE = 'https://console.cloud.google.com/storage/browser/';
+const GCS_URI_PREFIX = 'gs://';
+
+/**
+ * Generates a cloud console uri from gs:// uri
+ *
+ * @param gcsUri Gcs uri that starts with gs://, like gs://bucket/path/file
+ * @returns A link user can open to visit cloud console page. Returns undefined when gcsUri is not valid.
+ */
+export function generateGcsConsoleUri(gcsUri: string): string | undefined {
+  if (!gcsUri.startsWith(GCS_URI_PREFIX)) {
+    return undefined;
+  }
+
+  return GCS_CONSOLE_BASE + gcsUri.substring(GCS_URI_PREFIX.length);
+}

frontend/src/pages/ArtifactList.tsx

@@ -27,6 +27,7 @@ import { Artifact, ArtifactType } from '../generated/src/apis/metadata/metadata_
 import { ArtifactProperties, ArtifactCustomProperties, ListRequest, Apis } from '../lib/Apis';
 import { GetArtifactTypesRequest, GetArtifactsRequest } from '../generated/src/apis/metadata/metadata_store_service_pb';
 import { getArtifactCreationTime } from '../lib/MetadataUtils';
+import { GcsLink } from '../components/GcsLink';
 
 interface ArtifactListState {
   artifacts: Artifact[];
@@ -57,7 +58,7 @@ class ArtifactList extends Page<{}, ArtifactListState> {
         },
         { label: 'ID', flex: 1, sortKey: 'id' },
         { label: 'Type', flex: 2, sortKey: 'type' },
-        { label: 'URI', flex: 2, sortKey: 'uri', },
+        { label: 'URI', flex: 2, sortKey: 'uri', customRenderer: this.uriCustomRenderer },
         { label: 'Created at', flex: 1, sortKey: 'created_at' },
       ],
       expandedRows: new Map(),
@@ -133,6 +134,9 @@ class ArtifactList extends Page<{}, ArtifactListState> {
       );
     }
 
+  private uriCustomRenderer: React.FC<CustomRendererProps<string>> =
+    ({ value }) => <GcsLink gcsUri={value} />
+
   /**
    * Temporary solution to apply sorting, filtering, and pagination to the
    * local list of artifacts until server-side handling is available

frontend/tslint.json

@@ -40,6 +40,7 @@
       true,
       "check-format",
       "ban-keywords",
+      "allow-pascal-case",
       "allow-leading-underscore",
       "allow-trailing-underscore"
     ]