- {props.fields.map((f, i) => {
+ {fields.map((f, i) => {
const [key, value] = f;
// only try to parse json if value is a string
@@ -97,18 +103,17 @@ const DetailsTable = (props: DetailsTableProps) => {
// do nothing
}
}
- // If the value isn't a JSON object, just display it as is
+ // If a ValueComponent and a value is provided, render the value with
+ // the ValueComponent. Otherwise render the value as a string (empty string if null or undefined).
return (
{key}
- {(() => {
- const ValueComponent = props.valueComponent;
- if (ValueComponent && !!value && !isString(value)) {
- return ;
- }
- return value;
- })()}
+ {ValueComponent && value ? (
+
+ ) : (
+ `${value || ''}`
+ )}
);
diff --git a/frontend/src/components/MinioArtifactLink.test.tsx b/frontend/src/components/MinioArtifactLink.test.tsx
deleted file mode 100644
index eb2affb869b..00000000000
--- a/frontend/src/components/MinioArtifactLink.test.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-/*
- * 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 React from 'react';
-import MinioArtifactLink from './MinioArtifactLink';
-import { render } from '@testing-library/react';
-
-describe('MinioArtifactLink', () => {
- it('handles undefined artifact', () => {
- const { container } = render(
);
- expect(container).toMatchInlineSnapshot(`
`);
- });
-
- it('handles null artifact', () => {
- const { container } = render(
);
- expect(container).toMatchInlineSnapshot(`
`);
- });
-
- it('handles empty artifact', () => {
- const { container } = render(
);
- expect(container).toMatchInlineSnapshot(`
`);
- });
-
- 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' },
- };
- const { container } = render(
);
- expect(container).toMatchInlineSnapshot(`
`);
- });
-
- 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' },
- };
- const { container } = render(
);
- expect(container).toMatchInlineSnapshot(`
`);
- });
-
- 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' },
- };
- const { container } = render(
);
- expect(container).toMatchInlineSnapshot(`
-
- `);
- });
-
- 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' },
- };
- const { container } = render(
);
- expect(container).toMatchInlineSnapshot(`
-
- `);
- });
-});
diff --git a/frontend/src/components/MinioArtifactLink.tsx b/frontend/src/components/MinioArtifactLink.tsx
deleted file mode 100644
index cd1080c26a4..00000000000
--- a/frontend/src/components/MinioArtifactLink.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import * as React from 'react';
-import { StoragePath, StorageService } from '../lib/WorkflowParser';
-import { S3Artifact } from '../../third_party/argo-ui/argo_template';
-import { buildQuery } from 'src/lib/Utils';
-
-const artifactApiUri = ({ source, bucket, key }: StoragePath, namespace?: string) =>
- `artifacts/get${buildQuery({ source, bucket, key, namespace })}`;
-
-/**
- * A component that renders an artifact link.
- */
-const MinioArtifactLink: React.FC<{
- artifact: Partial
| null | undefined;
- namespace?: string;
-}> = ({ artifact, namespace }) => {
- if (!artifact || !artifact.key || !artifact.bucket) {
- return null;
- }
-
- const { key, bucket, endpoint } = artifact;
- const source = endpoint === 's3.amazonaws.com' ? StorageService.S3 : StorageService.MINIO;
- const linkText = `${source.toString()}://${bucket}/${key}`;
- // Opens in new window safely
- return (
-
- {linkText}
-
- );
-};
-
-export default MinioArtifactLink;
diff --git a/frontend/src/components/MinioArtifactPreview.test.tsx b/frontend/src/components/MinioArtifactPreview.test.tsx
new file mode 100644
index 00000000000..80f0e50a6c6
--- /dev/null
+++ b/frontend/src/components/MinioArtifactPreview.test.tsx
@@ -0,0 +1,372 @@
+/*
+ * Copyright 2019-2020 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 MinioArtifactPreview from './MinioArtifactPreview';
+import React from 'react';
+import TestUtils from '../TestUtils';
+import { act, render } from '@testing-library/react';
+import { Apis } from '../lib/Apis';
+
+describe('MinioArtifactPreview', () => {
+ const readFile = jest.spyOn(Apis, 'readFile');
+
+ beforeEach(() => {
+ readFile.mockResolvedValue('preview ...');
+ });
+
+ afterEach(() => {
+ jest.resetAllMocks();
+ });
+
+ it('handles undefined artifact', () => {
+ const { container } = render();
+ expect(container).toMatchInlineSnapshot(``);
+ });
+
+ it('handles null artifact', () => {
+ const { container } = render();
+ expect(container).toMatchInlineSnapshot(``);
+ });
+
+ it('handles empty artifact', () => {
+ const { container } = render();
+ expect(container).toMatchInlineSnapshot(``);
+ });
+
+ 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' },
+ };
+ const { container } = render();
+ expect(container).toMatchInlineSnapshot(``);
+ });
+
+ 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' },
+ };
+ const { container } = render();
+ expect(container).toMatchInlineSnapshot(``);
+ });
+
+ it('handles string value', () => {
+ const { container } = render();
+ expect(container).toMatchInlineSnapshot(`
+
+ teststring
+
+ `);
+ });
+
+ it('handles boolean value', () => {
+ const { container } = render();
+ expect(container).toMatchInlineSnapshot(`
+
+ false
+
+ `);
+ });
+
+ it('handles s3 artifact', async () => {
+ const s3Artifact = {
+ accessKeySecret: { key: 'accesskey', optional: false, name: 'minio' },
+ bucket: 'foo',
+ endpoint: 's3.amazonaws.com',
+ key: 'bar',
+ secretKeySecret: { key: 'secretkey', optional: false, name: 'minio' },
+ };
+
+ const { container } = render();
+ await act(TestUtils.flushPromises);
+ expect(container).toMatchInlineSnapshot(`
+
+ `);
+ });
+
+ it('handles minio artifact', async () => {
+ const minioArtifact = {
+ accessKeySecret: { key: 'accesskey', optional: false, name: 'minio' },
+ bucket: 'foo',
+ endpoint: 'minio.kubeflow',
+ key: 'bar',
+ secretKeySecret: { key: 'secretkey', optional: false, name: 'minio' },
+ };
+ const container = document.body.appendChild(document.createElement('div'));
+ await act(async () => {
+ render(, { container });
+ });
+ expect(container).toMatchInlineSnapshot(`
+
+ `);
+ });
+
+ it('handles artifact with namespace', async () => {
+ const minioArtifact = {
+ accessKeySecret: { key: 'accesskey', optional: false, name: 'minio' },
+ bucket: 'foo',
+ endpoint: 'minio.kubeflow',
+ key: 'bar',
+ secretKeySecret: { key: 'secretkey', optional: false, name: 'minio' },
+ };
+ const { container } = render(
+ ,
+ );
+ await act(TestUtils.flushPromises);
+ expect(container).toMatchInlineSnapshot(`
+
+ `);
+ });
+
+ it('handles artifact cleanly even when fetch fails', async () => {
+ const minioArtifact = {
+ accessKeySecret: { key: 'accesskey', optional: false, name: 'minio' },
+ bucket: 'foo',
+ endpoint: 'minio.kubeflow',
+ key: 'bar',
+ secretKeySecret: { key: 'secretkey', optional: false, name: 'minio' },
+ };
+ readFile.mockRejectedValue('unknown error');
+ const { container } = render();
+ await act(TestUtils.flushPromises);
+ expect(container).toMatchInlineSnapshot(`
+
+ `);
+ });
+
+ it('handles artifact that previews fully', async () => {
+ const minioArtifact = {
+ accessKeySecret: { key: 'accesskey', optional: false, name: 'minio' },
+ bucket: 'foo',
+ endpoint: 'minio.kubeflow',
+ key: 'bar',
+ secretKeySecret: { key: 'secretkey', optional: false, name: 'minio' },
+ };
+ const data = `012\n345\n678\n910`;
+ readFile.mockResolvedValue(data);
+ const { container } = render(
+ ,
+ );
+ await act(TestUtils.flushPromises);
+ expect(container).toMatchInlineSnapshot(`
+
+ `);
+ });
+
+ it('handles artifact that previews with maxlines', async () => {
+ const minioArtifact = {
+ accessKeySecret: { key: 'accesskey', optional: false, name: 'minio' },
+ bucket: 'foo',
+ endpoint: 'minio.kubeflow',
+ key: 'bar',
+ secretKeySecret: { key: 'secretkey', optional: false, name: 'minio' },
+ };
+ const data = `012\n345\n678\n910`;
+ readFile.mockResolvedValue(data);
+ const { container } = render(
+ ,
+ );
+ await act(TestUtils.flushPromises);
+ expect(container).toMatchInlineSnapshot(`
+
+ `);
+ });
+
+ it('handles artifact that previews with maxbytes', async () => {
+ const minioArtifact = {
+ accessKeySecret: { key: 'accesskey', optional: false, name: 'minio' },
+ bucket: 'foo',
+ endpoint: 'minio.kubeflow',
+ key: 'bar',
+ secretKeySecret: { key: 'secretkey', optional: false, name: 'minio' },
+ };
+ const data = `012\n345\n678\n910`;
+ readFile.mockResolvedValue(data);
+ const { container } = render(
+ ,
+ );
+ await act(TestUtils.flushPromises);
+ expect(container).toMatchInlineSnapshot(`
+
+ `);
+ });
+});
diff --git a/frontend/src/components/MinioArtifactPreview.tsx b/frontend/src/components/MinioArtifactPreview.tsx
new file mode 100644
index 00000000000..9241ffcc7e8
--- /dev/null
+++ b/frontend/src/components/MinioArtifactPreview.tsx
@@ -0,0 +1,128 @@
+import * as React from 'react';
+import { stylesheet } from 'typestyle';
+import { color } from '../Css';
+import { StorageService, StoragePath } from '../lib/WorkflowParser';
+import { S3Artifact } from '../../third_party/argo-ui/argo_template';
+import { isS3Endpoint } from '../lib/AwsHelper';
+import { Apis } from '../lib/Apis';
+import { ExternalLink } from '../atoms/ExternalLink';
+import { ValueComponentProps } from './DetailsTable';
+
+const css = stylesheet({
+ root: {
+ width: '100%',
+ whiteSpace: 'nowrap',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ },
+ preview: {
+ maxHeight: 250,
+ overflowY: 'auto',
+ padding: 3,
+ backgroundColor: color.lightGrey,
+ },
+});
+
+/**
+ * Check if a javascript object is an argo S3Artifact object.
+ * @param value Any javascript object.
+ */
+export function isS3Artifact(value: any): value is S3Artifact {
+ return value && value.key && value.bucket;
+}
+
+export interface MinioArtifactPreviewProps extends ValueComponentProps> {
+ namespace?: string;
+ maxbytes?: number;
+ maxlines?: number;
+}
+
+function getStoragePath(value?: string | Partial) {
+ if (!value || typeof value === 'string') return;
+ const { key, bucket, endpoint } = value;
+ if (!bucket || !key) return;
+ const source = isS3Endpoint(endpoint) ? StorageService.S3 : StorageService.MINIO;
+ return { source, bucket, key };
+}
+
+async function getPreview(
+ storagePath: StoragePath,
+ namespace: string | undefined,
+ maxbytes: number,
+ maxlines?: number,
+) {
+ // 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) {
+ 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...`;
+}
+
+/**
+ * A component that renders a preview to an artifact with a link to the full content.
+ */
+const MinioArtifactPreview: React.FC = ({
+ value,
+ namespace,
+ maxbytes = 255,
+ maxlines,
+}) => {
+ const [content, setContent] = React.useState(undefined);
+ const storagePath = getStoragePath(value);
+
+ React.useEffect(() => {
+ let cancelled = false;
+ if (storagePath) {
+ getPreview(storagePath, namespace, maxbytes, maxlines).then(
+ data => !cancelled && setContent(data),
+ error => console.error(error), // TODO error badge on link?
+ );
+ }
+ return () => {
+ cancelled = true;
+ };
+ }, [storagePath, namespace, maxbytes, maxlines]);
+
+ if (!storagePath) {
+ // if value is undefined, null, or an invalid s3artifact object, don't render
+ if (value === null || value === undefined || typeof value === 'object') return null;
+ // otherwise render value as string (with default string method)
+ return {`${value}`};
+ }
+
+ // TODO need to come to an agreement how to encode artifact info inside a url
+ // namespace is currently not supported
+ const linkText = Apis.buildArtifactUrl(storagePath);
+ const artifactUrl = Apis.buildReadFileUrl(storagePath, namespace, maxbytes);
+
+ // Opens in new window safely
+ // TODO use ArtifactLink instead (but it need to support namespace)
+ return (
+
+
+ {linkText}
+
+ {content && (
+
+ )}
+
-
-
- key1
-
-
- true
-
-
-
-
- key2
-
-
- false
-
-
-
-
-
- key
-
-
- null
-
-
-
-
-
- key
-
-
- "some string"
-
-
-
- some title
-
-
-
-
- key
-
-
- value
-
-
-
-
-
- key
-
-
- Lorem Ipsum is simply dummy text of the printing and typesetting
- industry. Lorem Ipsum has been the industry's standard dummy text ever
- since the 1500s, when an unknown printer took a galley of type and
- scrambled it to make a type specimen book. It has survived not only five
- centuries, but also the leap into electronic typesetting, remaining
- essentially unchanged. It was popularised in the 1960s with the release
- of Letraset sheets containing Lorem Ipsum passages, and more recently
- with desktop publishing software like Aldus PageMaker including versions
- of Lorem Ipsum.
-
-
-
-
-
- key
-
-
- value
-
-
-
-
-
- key1
-
-
- value1
-
-
-
-
- key2
-
-
-
-
-
- key3
-
-
- value3
-
-
-
-
- key4
-
-
- value4
-
-
-
-
- key5
-
-
-
-
-
- key6
-
-
- value6
-
-
-
-
- key6
-
-
- value7
-
-
-
-
-
- key
-
-
- value
-
-
-