[Frontend] Node detail view now can show workflow input/output artifacts

frontend/src/components/DetailsTable.tsx

@@ -17,11 +17,13 @@
 import * as React from 'react';
 import { stylesheet } from 'typestyle';
 import { color, spacing, commonCss } from '../Css';
+import { KeyValue } from '../lib/StaticGraphParser';
 import Editor from './Editor';
 import 'brace';
 import 'brace/ext/language_tools';
 import 'brace/mode/json';
 import 'brace/theme/github';
+import { S3Artifact } from 'third_party/argo-ui/argo_template';
 
 export const css = stylesheet({
   key: {
@@ -40,43 +42,60 @@ export const css = stylesheet({
   },
   valueText: {
     maxWidth: 400,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
   },
 });
 
 interface DetailsTableProps {
-  fields: string[][];
+  fields: Array<KeyValue<string|S3Artifact>>;
   title?: string;
+  valueComponent?: React.FC<S3Artifact>;
+}
+
+function isString(x: any): x is string {
+  return typeof x === 'string';
 }
 
 export default (props: DetailsTableProps) => {
   return (<React.Fragment>
     {!!props.title && <div className={commonCss.header}>{props.title}</div>}
     <div>
       {props.fields.map((f, i) => {
-        try {
-          const parsedJson = JSON.parse(f[1]);
-          // Nulls, booleans, strings, and numbers can all be parsed as JSON, but we don't care
-          // about rendering. Note that `typeOf null` returns 'object'
-          if (parsedJson === null || typeof parsedJson !== 'object') {
-            throw new Error('Parsed JSON was neither an array nor an object. Using default renderer');
+        const [key, value] = f;
+
+        // only try to parse json if value is a string
+        if (isString(value)) {
+          try {
+            const parsedJson = JSON.parse(value);
+            // Nulls, booleans, strings, and numbers can all be parsed as JSON, but we don't care
+            // about rendering. Note that `typeOf null` returns 'object'
+            if (parsedJson === null || typeof parsedJson !== 'object') {
+              throw new Error('Parsed JSON was neither an array nor an object. Using default renderer');
+            }
+            return (
+              <div key={i} className={css.row}>
+                <span className={css.key}>{key}</span>
+                <Editor width='100%' height='300px' mode='json' theme='github'
+                  highlightActiveLine={true} showGutter={true} readOnly={true}
+                  value={JSON.stringify(parsedJson, null, 2) || ''} />
+              </div>
+            );
+          } catch (err) {
+            // do nothing
           }
-          return (
-            <div key={i} className={css.row}>
-              <span className={css.key}>{f[0]}</span>
-              <Editor width='100%' height='300px' mode='json' theme='github'
-                highlightActiveLine={true} showGutter={true} readOnly={true}
-                value={JSON.stringify(parsedJson, null, 2) || ''} />
-            </div>
-          );
-        } catch (err) {
-          // If the value isn't a JSON object, just display it as is
-          return (
-            <div key={i} className={css.row}>
-              <span className={css.key}>{f[0]}</span>
-              <span className={css.valueText}>{f[1]}</span>
-            </div>
-          );
         }
+        // If the value isn't a JSON object, just display it as is
+        return (
+          <div key={i} className={css.row}>
+            <span className={css.key}>{key}</span>
+            <span className={css.valueText}>
+              {props.valueComponent && !!value && !isString(value) ? props.valueComponent(value) : value}
+            </span>
+          </div>
+        );
+
       })}
     </div>
   </React.Fragment>

frontend/src/components/MinioArtifactLink.test.tsx

@@ -0,0 +1,73 @@
+/*
+ * Copyright 2019 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import MinioArtifactLink from './MinioArtifactLink';
+
+describe('MinioArtifactLink', () => {
+
+  it('handles null artifact', () => {
+        expect(MinioArtifactLink(null as any)).toMatchSnapshot();
+  });
+
+  it('handles empty artifact', () => {
+    expect(MinioArtifactLink({} as any)).toMatchSnapshot();
+  });
+
+  it('handles invalid artifact: no bucket', () => {
+    const s3artifact = {
+      accessKeySecret: {key: 'accesskey', optional: false, name: 'minio'},
+      bucket: '',
+      endpoint: 'minio.kubeflow',
+      key: 'bar',
+      secretKeySecret: {key: 'secretkey', optional: false, name: 'minio'},
+    };
+    expect(MinioArtifactLink(s3artifact)).toMatchSnapshot();
+  });
+
+  it('handles invalid artifact: no key', () => {
+    const s3artifact = {
+      accessKeySecret: {key: 'accesskey', optional: false, name: 'minio'},
+      bucket: 'foo',
+      endpoint: 'minio.kubeflow',
+      key: '',
+      secretKeySecret: {key: 'secretkey', optional: false, name: 'minio'},
+    };
+    expect(MinioArtifactLink(s3artifact)).toMatchSnapshot();
+  });
+
+  it('handles s3 artifact', () => {
+    const s3artifact = {
+      accessKeySecret: {key: 'accesskey', optional: false, name: 'minio'},
+      bucket: 'foo',
+      endpoint: 's3.amazonaws.com',
+      key: 'bar',
+      secretKeySecret: {key: 'secretkey', optional: false, name: 'minio'},
+    };
+    expect(MinioArtifactLink(s3artifact)).toMatchSnapshot();
+  });
+
+  it('handles minio artifact', () => {
+    const minioartifact = {
+      accessKeySecret: {key: 'accesskey', optional: false, name: 'minio'},
+      bucket: 'foo',
+      endpoint: 'minio.kubeflow',
+      key: 'bar',
+      secretKeySecret: {key: 'secretkey', optional: false, name: 'minio'},
+    };
+    expect(MinioArtifactLink(minioartifact)).toMatchSnapshot();
+  });
+
+});

frontend/src/components/MinioArtifactLink.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { StoragePath, StorageService } from '../lib/WorkflowParser';
+import { S3Artifact } from '../../third_party/argo-ui/argo_template';
+
+const artifactApiUri = ({ source, bucket, key }: StoragePath) =>
+  'artifacts/get' +
+  `?source=${source}&bucket=${bucket}&key=${encodeURIComponent(key)}`;
+
+/**
+ * A component that renders an artifact link.
+ */
+const MinioArtifactLink: React.FC<S3Artifact> = (
+  s3artifact
+) => {
+  if (!s3artifact || !s3artifact.key || !s3artifact.bucket) {
+    return null;
+  }
+
+  const { key, bucket, endpoint } = s3artifact;
+  const source = endpoint === 's3.amazonaws.com' ? StorageService.S3 : StorageService.MINIO;
+  const linkText = `${source.toString()}://${bucket}/${key}`;
+  // Opens in new window safely
+  return (
+    <a href={artifactApiUri({key, bucket, source})} target={'_blank'} rel={'noreferrer noopener'} title={linkText}>
+      {linkText}
+    </a>
+  );
+
+};
+
+export default MinioArtifactLink;

frontend/src/components/__snapshots__/MinioArtifactLink.test.tsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MinioArtifactLink handles empty artifact 1`] = `null`;
+
+exports[`MinioArtifactLink handles invalid artifact: no bucket 1`] = `null`;
+
+exports[`MinioArtifactLink handles invalid artifact: no key 1`] = `null`;
+
+exports[`MinioArtifactLink handles minio artifact 1`] = `
+<a
+  href="artifacts/get?source=minio&bucket=foo&key=bar"
+  rel="noreferrer noopener"
+  target="_blank"
+  title="minio://foo/bar"
+>
+  minio://foo/bar
+</a>
+`;
+
+exports[`MinioArtifactLink handles null artifact 1`] = `null`;
+
+exports[`MinioArtifactLink handles s3 artifact 1`] = `
+<a
+  href="artifacts/get?source=s3&bucket=foo&key=bar"
+  rel="noreferrer noopener"
+  target="_blank"
+  title="s3://foo/bar"
+>
+  s3://foo/bar
+</a>
+`;

frontend/src/lib/StaticGraphParser.ts

@@ -22,16 +22,21 @@ import { logger } from './Utils';
 
 export type nodeType = 'container' | 'resource' | 'dag' | 'unknown';
 
+export interface KeyValue<T> extends Array<any> {
+  0?: string;
+  1?: T;
+}
+
 export class SelectedNodeInfo {
   public args: string[];
   public command: string[];
   public condition: string;
   public image: string;
-  public inputs: string[][];
+  public inputs: Array<KeyValue<string>>;
   public nodeType: nodeType;
-  public outputs: string[][];
-  public volumeMounts: string[][];
-  public resource: string[][];
+  public outputs: Array<KeyValue<string>>;
+  public volumeMounts: Array<KeyValue<string>>;
+  public resource: Array<KeyValue<string>>;
 
   constructor() {
     this.args = [];

frontend/src/lib/WorkflowParser.ts

@@ -17,11 +17,12 @@
 import * as dagre from 'dagre';
 import IconWithTooltip from '../atoms/IconWithTooltip';
 import MoreIcon from '@material-ui/icons/MoreHoriz';
-import { Workflow, NodeStatus, Parameter } from '../../third_party/argo-ui/argo_template';
+import { Workflow, NodeStatus, Parameter, S3Artifact } from '../../third_party/argo-ui/argo_template';
 import { statusToIcon } from '../pages/Status';
 import { color } from '../Css';
 import { Constants } from './Constants';
 import { NodePhase, statusToBgColor, hasFinished } from './StatusUtils';
+import { KeyValue } from './StaticGraphParser';
 
 export enum StorageService {
   GCS = 'gcs',
@@ -168,14 +169,14 @@ export default class WorkflowParser {
   // Makes sure the workflow object contains the node and returns its
   // inputs/outputs if any, while looking out for any missing link in the chain to
   // the node's inputs/outputs.
-  public static getNodeInputOutputParams(workflow?: Workflow, nodeId?: string): [string[][], string[][]] {
-    type paramList = string[][];
+  public static getNodeInputOutputParams(workflow?: Workflow, nodeId?: string): [Array<KeyValue<string>>, Array<KeyValue<string>>] {
+    type ParamList = Array<KeyValue<string>>;
     if (!nodeId || !workflow || !workflow.status || !workflow.status.nodes || !workflow.status.nodes[nodeId]) {
       return [[], []];
     }
 
     const node = workflow.status.nodes[nodeId];
-    const inputsOutputs: [paramList, paramList] = [[], []];
+    const inputsOutputs: [ParamList, ParamList] = [[], []];
     if (node.inputs && node.inputs.parameters) {
       inputsOutputs[0] = node.inputs.parameters.map(p => [p.name, p.value || '']);
     }
@@ -185,16 +186,36 @@ export default class WorkflowParser {
     return inputsOutputs;
   }
 
+  // Makes sure the workflow object contains the node and returns its
+  // inputs/outputs artifacts if any, while looking out for any missing link in the chain to
+  // the node's inputs/outputs.
+  public static getNodeInputOutputArtifacts(workflow?: Workflow, nodeId?: string): [Array<KeyValue<S3Artifact>>, Array<KeyValue<S3Artifact>>] {
+    type ParamList = Array<KeyValue<S3Artifact>>;
+    if (!nodeId || !workflow || !workflow.status || !workflow.status.nodes || !workflow.status.nodes[nodeId]) {
+      return [[], []];
+    }
+
+    const node = workflow.status.nodes[nodeId];
+    const inputsArtifacts: [ParamList, ParamList] = [[], []];
+    if (node.inputs && node.inputs.artifacts) {
+      inputsArtifacts[0] = node.inputs.artifacts.map(p => [p.name, p.s3]);
+    }
+    if (node.outputs && node.outputs.artifacts) {
+      inputsArtifacts[1] = node.outputs.artifacts.map(p => [p.name, p.s3]);
+    }
+    return inputsArtifacts;
+  }
+
   // Makes sure the workflow object contains the node and returns its
   // volume mounts if any.
-  public static getNodeVolumeMounts(workflow: Workflow, nodeId: string): string[][] {
+  public static getNodeVolumeMounts(workflow: Workflow, nodeId: string): Array<KeyValue<string>> {
     if (!workflow || !workflow.status || !workflow.status.nodes || !workflow.status.nodes[nodeId] || !workflow.spec || !workflow.spec.templates) {
       return [];
     }
 
     const node = workflow.status.nodes[nodeId];
     const tmpl = workflow.spec.templates.find(t => !!t && !!t.name && t.name === node.templateName);
-    let volumeMounts: string[][] = [];
+    let volumeMounts: Array<KeyValue<string>> = [];
     if (tmpl && tmpl.container && tmpl.container.volumeMounts) {
       volumeMounts = tmpl.container.volumeMounts.map(v => [v.mountPath, v.name]);
     }
@@ -203,14 +224,14 @@ export default class WorkflowParser {
 
   // Makes sure the workflow object contains the node and returns its
   // action and manifest.
-  public static getNodeManifest(workflow: Workflow, nodeId: string): string[][] {
+  public static getNodeManifest(workflow: Workflow, nodeId: string): Array<KeyValue<string>> {
     if (!workflow || !workflow.status || !workflow.status.nodes || !workflow.status.nodes[nodeId] || !workflow.spec || !workflow.spec.templates) {
       return [];
     }
 
     const node = workflow.status.nodes[nodeId];
     const tmpl = workflow.spec.templates.find(t => !!t && !!t.name && t.name === node.templateName);
-    let manifest: string[][] = [];
+    let manifest: Array<KeyValue<string>> = [];
     if (tmpl && tmpl.resource && tmpl.resource.action && tmpl.resource.manifest) {
       manifest = [[tmpl.resource.action, tmpl.resource.manifest]];
     }

frontend/src/pages/RecurringRunDetails.tsx

@@ -26,6 +26,7 @@ import { RoutePage, RouteParams } from '../components/Router';
 import { Breadcrumb, ToolbarProps } from '../components/Toolbar';
 import { classes } from 'typestyle';
 import { commonCss, padding } from '../Css';
+import { KeyValue } from '../lib/StaticGraphParser';
 import { formatDateString, enabledDisplayString, errorToMessage } from '../lib/Utils';
 import { triggerDisplayString } from '../lib/TriggerUtils';
 
@@ -65,9 +66,9 @@ class RecurringRunDetails extends Page<{}, RecurringRunConfigState> {
 
   public render(): JSX.Element {
     const { run } = this.state;
-    let runDetails: string[][] = [];
-    let inputParameters: string[][] = [];
-    let triggerDetails: string[][] = [];
+    let runDetails: Array<[string, string]> = [];
+    let inputParameters: Array<KeyValue<string>> = [];
+    let triggerDetails: Array<[string, string]> = [];
     if (run && run.pipeline_spec) {
       runDetails = [
         ['Description', run.description!],