diff --git a/src/components/features/execution-timeline/StepsTimeline.js b/src/components/features/execution-timeline/StepsTimeline.js
index ff9b4fb..1067f9e 100644
--- a/src/components/features/execution-timeline/StepsTimeline.js
+++ b/src/components/features/execution-timeline/StepsTimeline.js
@@ -12,6 +12,7 @@ import InfoRoundIcon from '@rsuite/icons/InfoRound';
import WarningRoundIcon from '@rsuite/icons/WarningRound';
import CheckRoundIcon from '@rsuite/icons/CheckRound';
import RemindRoundIcon from '@rsuite/icons/RemindRound';
+import AttachmentList from '../test-attachments/AttachmentList';
const StepsTimeline = function (props) {
const {
@@ -19,6 +20,7 @@ const StepsTimeline = function (props) {
openModal,
screenshots,
showScreenshots = true,
+ attachments,
} = props;
const getScreenShot = (screenshotId) => {
@@ -130,6 +132,13 @@ const StepsTimeline = function (props) {
{renderStepBody(step)}
+ { attachments ? (
+
+ ) : null }
{renderScreenshot(step)}
diff --git a/src/components/features/test-attachments/AttachmentList.js b/src/components/features/test-attachments/AttachmentList.js
new file mode 100644
index 0000000..42e126a
--- /dev/null
+++ b/src/components/features/test-attachments/AttachmentList.js
@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import AttachmentViewer from './AttachmentViewer';
+import KindIcon from './KindIcon';
+import { formatBytes } from './attachmentFormat';
+
+/*
+ * A row of chips, one per attachment, each opening the attachment in a viewer suited to
+ * its kind. `ids` are the ids the execution (or step) lists; `byId` is the metadata loaded
+ * by useExecutionAttachments. Ids with no metadata - a manual-testing image on a manual
+ * step, or an attachment since deleted - are skipped.
+ */
+const AttachmentList = function ({
+ ids, byId, status, showLabel,
+}) {
+ const intl = useIntl();
+ const [open, setOpen] = useState(undefined);
+
+ if (!ids || ids.length === 0) return null;
+ if (status === 'loading') {
+ return (
+
+
+
+
+ );
+ }
+ if (status === 'error') {
+ return (
+
+
+
+
+ );
+ }
+ const attachments = ids.map((id) => byId[id]).filter(Boolean);
+ if (attachments.length === 0) return null;
+
+ return (
+
+ { showLabel ? (
+
+
+ ) : null }
+ { attachments.map((attachment) => (
+
{
+ event.stopPropagation();
+ setOpen(attachment);
+ }}
+ >
+ {attachment.originalName}
+ {formatBytes(intl, attachment.size)}
+
+ ))}
+ { open ? (
+
setOpen(undefined)} />
+ ) : null }
+
+
+ {/* An empty sandbox: no scripts, no forms, no same-origin access. The snapshot is
+ the page under test, so its scripts must never run inside Angles. */}
+
+
+ );
+ case 'trace':
+ return (
+
+
+ trace.playwright.dev
+
+ ),
+ }}
+ />
+
+ );
+ default:
+ return (
+
+
+ );
+ }
+};
+
+/*
+ * Shows one attachment in a modal, with a viewer suited to its kind: text with a line
+ * filter for logs and JSON, a request table for HAR files, a player for video, the page
+ * in a script-less sandbox for HTML snapshots, and the picture for images. Traces and
+ * archives are offered for download.
+ */
+const AttachmentViewer = function ({ attachment, onClose }) {
+ const intl = useIntl();
+ const [state, setState] = useState({ status: 'loading' });
+ const previewable = PREVIEWABLE_KINDS.includes(attachment.kind);
+
+ useEffect(() => {
+ if (!previewable) {
+ setState({ status: 'ready' });
+ return undefined;
+ }
+ let cancelled = false;
+ let created;
+ setState({ status: 'loading' });
+ axios.get(`attachment/${attachment._id}/file`, { responseType: 'blob' })
+ .then((response) => {
+ if (cancelled) return;
+ created = URL.createObjectURL(response.data);
+ setState({ status: 'ready', blob: response.data, objectUrl: created });
+ })
+ .catch(() => { if (!cancelled) setState({ status: 'error' }); });
+ return () => {
+ cancelled = true;
+ if (created) URL.revokeObjectURL(created);
+ };
+ }, [attachment._id, previewable]);
+
+ const download = async () => {
+ try {
+ const blob = state.blob || (await axios.get(
+ `attachment/${attachment._id}/file`,
+ { params: { download: true }, responseType: 'blob' },
+ )).data;
+ saveBlob(blob, attachment.originalName);
+ } catch (error) {
+ setState((current) => ({ ...current, downloadFailed: true }));
+ }
+ };
+
+ return (
+ event.stopPropagation()}
+ >
+
+
+ {attachment.originalName}
+
+
+
+
+
+ { state.status === 'loading' ? (
+
+
+ ) : null }
+ { state.status === 'error' ? (
+
+
+ ) : null }
+ { state.status === 'ready' ? (
+
+
+ ) : null }
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default AttachmentViewer;
diff --git a/src/components/features/test-attachments/HarViewer.js b/src/components/features/test-attachments/HarViewer.js
new file mode 100644
index 0000000..1d39bcd
--- /dev/null
+++ b/src/components/features/test-attachments/HarViewer.js
@@ -0,0 +1,131 @@
+import React, { useMemo, useState } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Toggle } from 'rsuite';
+import { formatBytes, formatMilliseconds } from './attachmentFormat';
+
+// More rows than this make the table sluggish; a HAR for one test is usually far smaller.
+const MAX_ROWS = 2000;
+
+// A request failed if the server answered with an error, or never answered at all.
+// Browsers record a request that got no response (blocked, aborted, a network error) as
+// status 0, and Playwright as -1.
+const isFailed = (status) => status <= 0 || status >= 400;
+
+const statusClass = (status) => {
+ if (isFailed(status)) return 'status-fail';
+ if (status >= 300) return 'status-info';
+ return 'status-pass';
+};
+
+const parseHar = (text) => {
+ try {
+ const har = JSON.parse(text);
+ if (!har || !har.log || !Array.isArray(har.log.entries)) return undefined;
+ return har.log.entries.map((entry, index) => {
+ const request = entry.request || {};
+ const response = entry.response || {};
+ const content = response.content || {};
+ const size = content.size >= 0 ? content.size : response.bodySize;
+ return {
+ key: index,
+ method: request.method || '',
+ url: request.url || '',
+ status: Number(response.status) || 0,
+ type: (content.mimeType || '').split(';')[0],
+ size: size >= 0 ? size : undefined,
+ time: entry.time,
+ };
+ });
+ } catch (error) {
+ return undefined;
+ }
+};
+
+/*
+ * A HAR file as a table of requests, in the order they were made, with failed requests
+ * highlighted and a toggle to show only those - usually the reason a test was looking
+ * at the network in the first place.
+ */
+const HarViewer = function ({ text }) {
+ const intl = useIntl();
+ const entries = useMemo(() => parseHar(text), [text]);
+ const [failedOnly, setFailedOnly] = useState(false);
+
+ if (!entries) {
+ return (
+
+
+ );
+ }
+ const failedCount = entries.filter((entry) => isFailed(entry.status)).length;
+ const rows = (failedOnly ? entries.filter((entry) => isFailed(entry.status)) : entries)
+ .slice(0, MAX_ROWS);
+
+ return (
+
+
+
+
+
+
+
+ { rows.length === 0 ? (
+
+
+ ) : (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ { rows.map((entry) => (
+
+
+ { entry.status > 0 ? entry.status : (
+
+ {entry.method}
+ {entry.url}
+ {entry.type}
+ {formatBytes(intl, entry.size)}
+ {formatMilliseconds(intl, entry.time)}
+
+ ))}
+
+
+
+ )}
+ { (failedOnly ? failedCount : entries.length) > MAX_ROWS ? (
+
+
+ ) : null }
+
+
+
+ { term ? (
+
+
+ ) : null }
+ { shown.length === 0 ? (
+
+
+ ) : (
+
+ { shown.map(({ line, number }) => (
+
+ {number}
+ {line}
+
+ ))}
+
+ )}
+ { matching.length > MAX_LINES ? (
+
+
+ ) : null }
+
@@ -99,6 +105,14 @@ const ExecutionTable = function (props) {
/>
) : null }
+ { attachmentCount > 0 ? (
+
+
+ ) : null }
{ showHistoryLink !== false ? (
@@ -119,6 +133,12 @@ const ExecutionTable = function (props) {
{ expanded ? (
+
{ execution.actions.map((action, actionIndex) => [
,
])}