Preview error log in run history (#130)

---------

Co-authored-by: Ben Sherman <[email protected]>

Author: MythicalFish

webview-ui/src/Layout/SeqeraCloud/Workspace/RunHistory/ErrorReport.tsx

@@ -0,0 +1,48 @@
+import { useState } from "react";
+import clsx from "clsx";
+
+import styles from "./styles.module.css";
+
+const ErrorReport = ({ errorReport }: { errorReport: string }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  if (!errorReport) return null;
+
+  const firstLine = errorReport.split("\n")[0];
+
+  const handleCopy = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    navigator.clipboard.writeText(errorReport);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className={styles.errorReport}>
+      <div
+        className={styles.errorPreview}
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          setIsExpanded(!isExpanded);
+        }}
+      >
+        <div className={styles.errorContent}>
+          {isExpanded ? errorReport : `${firstLine}...`}
+        </div>
+        <button
+          className={clsx(
+            copied ? "codicon codicon-check" : "codicon codicon-copy",
+            styles.copyButton
+          )}
+          onClick={handleCopy}
+          title={copied ? "Copied!" : "Copy error report"}
+        ></button>
+      </div>
+    </div>
+  );
+};
+
+export default ErrorReport;

webview-ui/src/Layout/SeqeraCloud/Workspace/RunHistory/index.tsx

@@ -9,6 +9,7 @@ import {
   getStatusIcon
 } from "./utils";
 import Button from "../../../../components/Button";
+import ErrorReport from "./ErrorReport";
 import FilterForProject from "../FilterForProject";
 
 import styles from "./styles.module.css";
@@ -60,6 +61,9 @@ const RunHistory = () => {
                   {relativeTime(workflow.dateCreated)}
                 </div>
               </div>
+              {workflow.status === "FAILED" && (
+                <ErrorReport errorReport={workflow.errorReport} />
+              )}
             </a>
           ))}
           {hasMore && (

webview-ui/src/Layout/SeqeraCloud/Workspace/RunHistory/styles.module.css

@@ -8,6 +8,7 @@
   cursor: pointer;
   transition: all 0.2s;
   min-width: 260px;
+  outline: none !important;
   &:hover {
     border-color: var(--vscode-button-background);
     color: var(--vscode-button-foreground);
@@ -64,3 +65,47 @@
     text-overflow: ellipsis;
   }
 }
+
+.errorReport {
+  margin-top: 6px;
+  font-size: 11px;
+}
+
+.errorPreview {
+  background: var(--vscode-editor-background);
+  border: 1px solid var(--vscode-panel-border);
+  border-radius: 4px;
+  padding: 6px;
+  cursor: pointer;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--vscode-errorForeground);
+  position: relative;
+  &:hover {
+    & .copyButton {
+      opacity: 0.5;
+    }
+  }
+}
+
+.errorContent {
+  padding-right: 24px;
+}
+
+.copyButton {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  background: none;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  color: var(--vscode-button-foreground);
+  opacity: 0;
+  transition: opacity 0.2s;
+  font-size: 12px;
+  outline: none !important;
+  &:hover {
+    opacity: 1;
+  }
+}