Add URI to artifact details page (#2157)

frontend/src/components/ResourceInfo.tsx

@@ -43,11 +43,25 @@ export const css = stylesheet({
   }
 });
 
-export interface ResourceInfoProps {
-  resource: Artifact | Execution;
+export enum ResourceType {
+  ARTIFACT = 'ARTIFACT',
+  EXECUTION = 'EXECUTION',
+}
+
+interface ArtifactProps {
+  resourceType: ResourceType.ARTIFACT;
+  resource: Artifact;
   typeName: string;
 }
 
+interface ExecutionProps {
+  resourceType: ResourceType.EXECUTION;
+  resource: Execution;
+  typeName: string;
+}
+
+export type ResourceInfoProps = ArtifactProps | ExecutionProps;
+
 export class ResourceInfo extends React.Component<ResourceInfoProps, {}> {
 
   public render(): JSX.Element {
@@ -57,6 +71,15 @@ export class ResourceInfo extends React.Component<ResourceInfoProps, {}> {
     return (
       <section>
         <h1 className={commonCss.header}>Type: {this.props.typeName}</h1>
+        {(() => {
+          if (this.props.resourceType === ResourceType.ARTIFACT) {
+            return <>
+              <dt className={css.term}>URI</dt>
+              <dd className={css.value}>{this.props.resource.getUri()}</dd>
+            </>;
+          }
+          return null;
+        })()}
         <h2 className={commonCss.header2}>Properties</h2>
         <dl className={css.resourceInfo}>
           {propertyMap.getEntryList()

frontend/src/pages/ArtifactDetails.tsx

@@ -22,7 +22,7 @@ import { classes } from 'typestyle';
 import { commonCss, padding } from '../Css';
 import { CircularProgress } from '@material-ui/core';
 import { titleCase, getResourceProperty, serviceErrorToString } from '../lib/Utils';
-import { ResourceInfo } from '../components/ResourceInfo';
+import { ResourceInfo, ResourceType } from '../components/ResourceInfo';
 import { Artifact } from '../generated/src/apis/metadata/metadata_store_pb';
 import { Apis, ArtifactProperties } from '../lib/Apis';
 import { GetArtifactsByIDRequest } from '../generated/src/apis/metadata/metadata_store_service_pb';
@@ -64,8 +64,11 @@ export default class ArtifactDetails extends Page<{}, ArtifactDetailsState> {
     }
     return (
       <div className={classes(commonCss.page, padding(20, 'lr'))}>
-        {<ResourceInfo typeName={this.properTypeName}
-          resource={this.state.artifact} />}
+        {<ResourceInfo
+          resourceType={ResourceType.ARTIFACT}
+          typeName={this.properTypeName}
+          resource={this.state.artifact}
+        />}
       </div >
     );
   }

frontend/src/pages/ExecutionDetails.tsx

@@ -22,7 +22,7 @@ import { classes } from 'typestyle';
 import { commonCss, padding } from '../Css';
 import { CircularProgress } from '@material-ui/core';
 import { titleCase, getResourceProperty, serviceErrorToString } from '../lib/Utils';
-import { ResourceInfo } from '../components/ResourceInfo';
+import { ResourceInfo, ResourceType } from '../components/ResourceInfo';
 import { Execution } from '../generated/src/apis/metadata/metadata_store_pb';
 import { Apis, ExecutionProperties } from '../lib/Apis';
 import { GetExecutionsByIDRequest } from '../generated/src/apis/metadata/metadata_store_service_pb';
@@ -67,8 +67,11 @@ export default class ExecutionDetails extends Page<{}, ExecutionDetailsState> {
 
     return (
       <div className={classes(commonCss.page, padding(20, 'lr'))}>
-        {<ResourceInfo typeName={this.properTypeName}
-          resource={this.state.execution} />}
+        {<ResourceInfo
+          resourceType={ResourceType.EXECUTION}
+          typeName={this.properTypeName}
+          resource={this.state.execution}
+        />}
       </div >
     );
   }