feat(frontend) Support Input/Output from MLMD for V2-compatible. Fix #5670

frontend/src/TestUtils.ts

@@ -163,7 +163,13 @@ export function expectWarnings() {
   };
 }
 
-export const queryClientTest = new QueryClient();
+export const queryClientTest = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
 export function testBestPractices() {
   beforeEach(async () => {
     queryClientTest.clear();

frontend/src/components/ArtifactPreview.test.tsx

@@ -0,0 +1,123 @@
+/*
+ * Copyright 2021 The Kubeflow Authors
+ *
+ * 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 { render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { CommonTestWrapper } from 'src/TestWrapper';
+import { Apis } from '../lib/Apis';
+import { testBestPractices } from '../TestUtils';
+import ArtifactPreview from './ArtifactPreview';
+
+testBestPractices();
+describe('ArtifactPreview', () => {
+  it('handles undefined artifact', () => {
+    render(
+      <CommonTestWrapper>
+        <ArtifactPreview value={undefined} />
+      </CommonTestWrapper>,
+    );
+    screen.getByText('Can not retrieve storage path from artifact uri: undefined');
+  });
+
+  it('handles null artifact', () => {
+    render(
+      <CommonTestWrapper>
+        <ArtifactPreview value={null as any} />
+      </CommonTestWrapper>,
+    );
+    screen.getByText('Can not retrieve storage path from artifact uri: null');
+  });
+
+  it('handles empty artifact', () => {
+    expect(() => {
+      render(
+        <CommonTestWrapper>
+          <ArtifactPreview value={'i am random path'} />
+        </CommonTestWrapper>,
+      );
+    }).toThrow(new Error('Unsupported storage path: i am random path'));
+  });
+
+  it('handles invalid artifact: no bucket', async () => {
+    jest.spyOn(Apis, 'readFile').mockRejectedValue(new Error('server error: no bucket'));
+
+    render(
+      <CommonTestWrapper>
+        <ArtifactPreview value={'minio://'} namespace={'kubeflow'} />
+      </CommonTestWrapper>,
+    );
+    await waitFor(() => screen.getByText('Error in retrieving artifact preview.'));
+  });
+
+  it('handles gcs artifact', async () => {
+    jest.spyOn(Apis, 'readFile').mockResolvedValue('gcs preview');
+    render(
+      <CommonTestWrapper>
+        <ArtifactPreview value={'gs://bucket/key'} />
+      </CommonTestWrapper>,
+    );
+    await waitFor(() => screen.getByText('gcs://bucket/key'));
+    await waitFor(() => screen.getByText('gcs preview'));
+  });
+
+  it('handles minio artifact with namespace', async () => {
+    jest.spyOn(Apis, 'readFile').mockResolvedValueOnce('minio content');
+    render(
+      <CommonTestWrapper>
+        <ArtifactPreview value={'minio://bucket/key'} namespace={'kubeflow'} />
+      </CommonTestWrapper>,
+    );
+    await waitFor(() => screen.getByText('minio://bucket/key'));
+    await waitFor(() =>
+      expect(screen.getByText('View All').getAttribute('href')).toEqual(
+        'artifacts/get?source=minio&namespace=kubeflow&bucket=bucket&key=key',
+      ),
+    );
+  });
+
+  it('handles artifact that previews with maxlines', async () => {
+    const data = `012\n345\n678\n910`;
+    jest.spyOn(Apis, 'readFile').mockResolvedValueOnce(data);
+    render(
+      <CommonTestWrapper>
+        <ArtifactPreview
+          value={'minio://bucket/key'}
+          namespace={'kubeflow'}
+          maxbytes={data.length}
+          maxlines={2}
+        />
+      </CommonTestWrapper>,
+    );
+    await waitFor(() => screen.getByText('minio://bucket/key'));
+    await waitFor(() => screen.getByText(`012 345 ...`));
+  });
+
+  it('handles artifact that previews with maxbytes', async () => {
+    const data = `012\n345\n678\n910`;
+    jest.spyOn(Apis, 'readFile').mockResolvedValueOnce(data);
+    render(
+      <CommonTestWrapper>
+        <ArtifactPreview
+          value={'minio://bucket/key'}
+          namespace={'kubeflow'}
+          maxbytes={data.length - 5}
+        />
+      </CommonTestWrapper>,
+    );
+    await waitFor(() => screen.getByText('minio://bucket/key'));
+    await waitFor(() => screen.getByText(`012 345 67 ...`));
+  });
+});

frontend/src/components/ArtifactPreview.tsx

@@ -0,0 +1,147 @@
+/**
+ * Copyright 2021 The Kubeflow Authors
+ *
+ * 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
+ *
+ *      http://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 React from 'react';
+import { useQuery } from 'react-query';
+import { ExternalLink } from 'src/atoms/ExternalLink';
+import { color } from 'src/Css';
+import { Apis } from 'src/lib/Apis';
+import WorkflowParser, { StoragePath } from 'src/lib/WorkflowParser';
+import { stylesheet } from 'typestyle';
+import Banner from './Banner';
+import { ValueComponentProps } from './DetailsTable';
+
+const css = stylesheet({
+  root: {
+    width: '100%',
+  },
+  preview: {
+    maxHeight: 250,
+    overflowY: 'auto',
+    padding: 3,
+    backgroundColor: color.lightGrey,
+  },
+  topDiv: {
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
+  separater: {
+    width: 20, // There's minimum 20px separation between URI and view button.
+    display: 'inline-block',
+  },
+  viewLink: {
+    whiteSpace: 'nowrap',
+  },
+});
+
+export interface ArtifactPreviewProps extends ValueComponentProps<string> {
+  namespace?: string;
+  maxbytes?: number;
+  maxlines?: number;
+}
+
+/**
+ * A component that renders a preview to an artifact with a link to the full content.
+ */
+const ArtifactPreview: React.FC<ArtifactPreviewProps> = ({
+  value,
+  namespace,
+  maxbytes = 255,
+  maxlines = 20,
+}) => {
+  let storage: StoragePath | undefined;
+  if (value) {
+    storage = WorkflowParser.parseStoragePath(value);
+  }
+
+  const { isSuccess, isError, data, error } = useQuery<string, Error>(
+    ['artifact_preview', value],
+    () => getPreview(storage, namespace, maxbytes, maxlines),
+    { staleTime: Infinity },
+  );
+
+  if (!storage) {
+    return (
+      <Banner message={'Can not retrieve storage path from artifact uri: ' + value} mode='error' />
+    );
+  }
+
+  const linkText = Apis.buildArtifactUrl(storage);
+  const artifactDownloadUrl = Apis.buildReadFileUrl({
+    path: storage,
+    namespace,
+    isDownload: true,
+  });
+  const artifactViewUrl = Apis.buildReadFileUrl({ path: storage, namespace });
+
+  return (
+    <div className={css.root}>
+      <div className={css.topDiv}>
+        <ExternalLink href={artifactDownloadUrl} title={linkText}>
+          {linkText}
+        </ExternalLink>
+        <span className={css.separater} />
+        <ExternalLink href={artifactViewUrl} className={css.viewLink}>
+          View All
+        </ExternalLink>
+      </div>
+      {isError && (
+        <Banner
+          message='Error in retrieving artifact preview.'
+          mode='error'
+          additionalInfo={error ? error.message : 'No error message'}
+        />
+      )}
+      {isSuccess && data && (
+        <div className={css.preview}>
+          <small>
+            <pre>{data}</pre>
+          </small>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ArtifactPreview;
+
+async function getPreview(
+  storagePath: StoragePath | undefined,
+  namespace: string | undefined,
+  maxbytes: number,
+  maxlines?: number,
+): Promise<string> {
+  if (!storagePath) {
+    return ``;
+  }
+  // TODO how to handle binary data (can probably use magic number to id common mime types)
+  let data = await Apis.readFile(storagePath, namespace, maxbytes + 1);
+  // is preview === data and no maxlines
+  if (data.length <= maxbytes && (!maxlines || data.split('\n').length < maxlines)) {
+    return data;
+  }
+  // remove extra byte at the end (we requested maxbytes +1)
+  data = data.slice(0, maxbytes);
+  // check num lines
+  if (maxlines) {
+    data = data
+      .split('\n')
+      .slice(0, maxlines)
+      .join('\n')
+      .trim();
+  }
+  return `${data}\n...`;
+}

frontend/src/components/DetailsTable.test.tsx

@@ -62,7 +62,7 @@ describe('DetailsTable', () => {
     expect(container).toMatchInlineSnapshot(`
       <div>
         <div
-          class="header"
+          class="header2"
         >
           some title
         </div>

frontend/src/components/DetailsTable.tsx

@@ -14,15 +14,15 @@
  * limitations under the License.
  */
 
-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 * as React from 'react';
+import { stylesheet } from 'typestyle';
+import { color, commonCss, spacing } from '../Css';
+import { KeyValue } from '../lib/StaticGraphParser';
+import Editor from './Editor';
 
 export const css = stylesheet({
   key: {
@@ -71,7 +71,7 @@ const DetailsTable = <T extends {}>(props: DetailsTableProps<T>) => {
   const { fields, title, valueComponent: ValueComponent, valueComponentProps } = props;
   return (
     <React.Fragment>
-      {!!title && <div className={commonCss.header}>{title}</div>}
+      {!!title && <div className={commonCss.header2}>{title}</div>}
       <div>
         {fields.map((f, i) => {
           const [key, value] = f;

frontend/src/components/tabs/ExecutionTitle.test.tsx

@@ -0,0 +1,51 @@
+/*
+ * Copyright 2021 The Kubeflow Authors
+ *
+ * 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 { Execution, Value } from '@kubeflow/frontend';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { testBestPractices } from 'src/TestUtils';
+import { CommonTestWrapper } from 'src/TestWrapper';
+import { ExecutionTitle } from './ExecutionTitle';
+
+testBestPractices();
+describe('ExecutionTitle', () => {
+  const execution = new Execution();
+  const executionName = 'fake-execution';
+  const executionId = 123;
+  beforeEach(() => {
+    execution.setId(executionId);
+    execution.getCustomPropertiesMap().set('task_name', new Value().setStringValue(executionName));
+  });
+
+  it('Shows execution name', () => {
+    render(
+      <CommonTestWrapper>
+        <ExecutionTitle execution={execution}></ExecutionTitle>
+      </CommonTestWrapper>,
+    );
+    screen.getByText(executionName, { selector: 'a', exact: false });
+  });
+
+  it('Shows execution description', () => {
+    render(
+      <CommonTestWrapper>
+        <ExecutionTitle execution={execution}></ExecutionTitle>
+      </CommonTestWrapper>,
+    );
+    screen.getByText('This step corresponds to execution');
+  });
+});