Frontend - Metadata - Use custom properties instead of plain properti…

…es (kubeflow#2854)
Jeffwan · Dec 9, 2020 · bc9372b · bc9372b
1 parent e3b064e
commit bc9372b
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 9 deletions.
diff --git a/frontend/src/lib/Apis.ts b/frontend/src/lib/Apis.ts
@@ -44,6 +44,9 @@ export enum ArtifactProperties {
 export enum ArtifactCustomProperties {
   WORKSPACE = '__kf_workspace__',
   RUN = '__kf_run__',
+  NAME = 'name',
+  PIPELINE_NAME = 'pipeline_name', // TODO: Remove when switching to contexts
+  RUN_ID = 'run_id', // TODO: Remove when switching to contexts
 }
 
 /** Known Execution properties */
@@ -57,6 +60,8 @@ export enum ExecutionProperties {
 /** Known Execution custom properties */
 export enum ExecutionCustomProperties {
   WORKSPACE = '__kf_workspace__',
+  RUN_ID = 'run_id', // TODO: Remove when switching to contexts
+  TASK_ID = 'task_id',
 }
 
 export interface ListRequest {

diff --git a/frontend/src/pages/ArtifactDetails.tsx b/frontend/src/pages/ArtifactDetails.tsx
@@ -24,7 +24,7 @@ import { CircularProgress } from '@material-ui/core';
 import { titleCase, getResourceProperty, serviceErrorToString } from '../lib/Utils';
 import { ResourceInfo, ResourceType } from '../components/ResourceInfo';
 import { Artifact } from '../generated/src/apis/metadata/metadata_store_pb';
-import { Apis, ArtifactProperties } from '../lib/Apis';
+import { Apis, ArtifactProperties, ArtifactCustomProperties } from '../lib/Apis';
 import { GetArtifactsByIDRequest } from '../generated/src/apis/metadata/metadata_store_service_pb';
 
 interface ArtifactDetailsState {
@@ -108,7 +108,9 @@ export default class ArtifactDetails extends Page<{}, ArtifactDetailsState> {
 
       const artifact = res.getArtifactsList()[0];
 
-      const artifactName = getResourceProperty(artifact, ArtifactProperties.NAME);
+      const artifactName =
+        getResourceProperty(artifact, ArtifactProperties.NAME) ||
+        getResourceProperty(artifact, ArtifactCustomProperties.NAME, true);
       let title = artifactName ? artifactName.toString() : '';
       const version = getResourceProperty(artifact, ArtifactProperties.VERSION);
       if (version) {

diff --git a/frontend/src/pages/ArtifactList.tsx b/frontend/src/pages/ArtifactList.tsx
@@ -210,8 +210,10 @@ class ArtifactList extends Page<{}, ArtifactListState> {
               id: `${type}:${artifact.getId()}`, // Join with colon so we can build the link
               otherFields: [
                 getResourceProperty(artifact, ArtifactProperties.PIPELINE_NAME) ||
-                  getResourceProperty(artifact, ArtifactCustomProperties.WORKSPACE, true),
-                getResourceProperty(artifact, ArtifactProperties.NAME),
+                  getResourceProperty(artifact, ArtifactCustomProperties.WORKSPACE, true) ||
+                  getResourceProperty(artifact, ArtifactCustomProperties.RUN_ID, true),
+                getResourceProperty(artifact, ArtifactProperties.NAME) ||
+                  getResourceProperty(artifact, ArtifactCustomProperties.NAME, true),
                 artifact.getId(),
                 type,
                 artifact.getUri(),

diff --git a/frontend/src/pages/ExecutionDetails.tsx b/frontend/src/pages/ExecutionDetails.tsx
@@ -24,7 +24,13 @@ import { CircularProgress } from '@material-ui/core';
 import { titleCase, getResourceProperty, serviceErrorToString, logger } from '../lib/Utils';
 import { ResourceInfo, ResourceType } from '../components/ResourceInfo';
 import { Execution, ArtifactType } from '../generated/src/apis/metadata/metadata_store_pb';
-import { Apis, ExecutionProperties, ArtifactProperties } from '../lib/Apis';
+import {
+  Apis,
+  ExecutionProperties,
+  ArtifactProperties,
+  ExecutionCustomProperties,
+  ArtifactCustomProperties,
+} from '../lib/Apis';
 import {
   GetExecutionsByIDRequest,
   GetEventsByExecutionIDsRequest,
@@ -168,7 +174,9 @@ export default class ExecutionDetails extends Page<{}, ExecutionDetailsState> {
     }
 
     const execution = executionResponse.response.getExecutionsList()[0];
-    const executionName = getResourceProperty(execution, ExecutionProperties.COMPONENT_ID);
+    const executionName =
+      getResourceProperty(execution, ExecutionProperties.COMPONENT_ID) ||
+      getResourceProperty(execution, ExecutionCustomProperties.TASK_ID, true);
     this.props.updateToolbar({
       pageTitle: executionName ? executionName.toString() : '',
     });
@@ -252,7 +260,9 @@ class SectionIO extends Component<
       }
       const data: ArtifactInfo = {
         id,
-        name: (getResourceProperty(artifact, ArtifactProperties.NAME) || '') as string, // TODO: assert name is string
+        name: (getResourceProperty(artifact, ArtifactProperties.NAME) ||
+          getResourceProperty(artifact, ArtifactCustomProperties.NAME, true) ||
+          '') as string, // TODO: assert name is string
         typeId: artifact.getTypeId(),
         uri: artifact.getUri() || '',
       };

diff --git a/frontend/src/pages/ExecutionList.tsx b/frontend/src/pages/ExecutionList.tsx
@@ -192,8 +192,10 @@ class ExecutionList extends Page<{}, ExecutionListState> {
             id: `${type}:${execution.getId()}`, // Join with colon so we can build the link
             otherFields: [
               getResourceProperty(execution, ExecutionProperties.PIPELINE_NAME) ||
-                getResourceProperty(execution, ExecutionCustomProperties.WORKSPACE, true),
-              getResourceProperty(execution, ExecutionProperties.COMPONENT_ID),
+                getResourceProperty(execution, ExecutionCustomProperties.WORKSPACE, true) ||
+                getResourceProperty(execution, ExecutionCustomProperties.RUN_ID, true),
+              getResourceProperty(execution, ExecutionProperties.COMPONENT_ID) ||
+                getResourceProperty(execution, ExecutionCustomProperties.TASK_ID, true),
               getResourceProperty(execution, ExecutionProperties.STATE),
               execution.getId(),
               type,