ephemeral download buttons

Author: Trey Ivy

frontend/src/app/bazel-invocations/[invocationID]/index.graphql.ts

@@ -302,6 +302,7 @@ fragment BlobReferenceInfo on BlobReference {
   name
   sizeInBytes
   downloadURL
+  ephemeralURL
 }
 `)
 

frontend/src/components/Problems/LogOutput/index.tsx

@@ -2,6 +2,13 @@ import React, {useEffect, useState} from 'react';
 import {util} from 'zod';
 import {BlobReference} from '@/graphql/__generated__/graphql';
 import {LogViewerCard} from "@/components/LogViewer";
+import { env } from 'next-runtime-env';
+import { Button, Card, Space, Tooltip } from 'antd';
+import ButtonGroup from 'antd/es/button/button-group';
+import { DownloadOutlined, WarningOutlined } from '@ant-design/icons';
+import Link from 'next/link';
+import styles from "@/components/LogViewer/index.module.css"
+import DownloadButton from '@/components/DownloadButton';
 
 interface Props {
     blobReference: BlobReference;
@@ -10,8 +17,26 @@ interface Props {
 
 const DEFAULT_TAIL_BYTES = 10_000;
 
+
+
 /* eslint-disable consistent-return */
 const LogOutput: React.FC<Props> = ({blobReference, tailBytes = DEFAULT_TAIL_BYTES}) => {
+    // if (blobReference.ephemeralURL != "" && env('NEXT_PUBLIC_BROWSER_URL')) {
+    //     const url = new URL(blobReference.ephemeralURL, env('NEXT_PUBLIC_BROWSER_URL'))
+    //     var logDownload = <Space direction="horizontal" size="small">
+    //       <Card>
+    //         <ButtonGroup>
+    //           <Button>
+    //             <DownloadOutlined/>
+    //             <Link href={url.toString()} download="test.log" target="_self">Download Log File</Link>
+    //           </Button>
+    //           <Tooltip title="Depending on the configuration of your remote cache, this link may point to ephemeral content and it could disappear.">
+    //             <Button icon={<WarningOutlined/>} danger/>
+    //           </Tooltip>
+    //         </ButtonGroup>
+    //       </Card>
+    //     </Space>
+    //   }
     const [contents, setContents] = useState<string>("");
     useEffect(() => {
         fetch(blobReference.downloadURL, {
@@ -39,6 +64,21 @@ const LogOutput: React.FC<Props> = ({blobReference, tailBytes = DEFAULT_TAIL_BYT
         validContent = selectedLines.join('\n')
     }
 
+    if (blobReference.ephemeralURL != "" && env('NEXT_PUBLIC_BROWSER_URL')) {
+        console.log("blobReference.ephemeralURL=", blobReference.ephemeralURL)
+        const url = new URL(blobReference.ephemeralURL, env('NEXT_PUBLIC_BROWSER_URL'))
+        return <Space direction="horizontal" size="small">
+        <Card>
+          <ButtonGroup>
+            <DownloadButton url={url.toString()} enabled={true} buttonLabel="Download Log File" fileName="output.log" />
+            <Tooltip title="Depending on the configuration of your remote cache, this link may point to ephemeral content and it could disappear.">
+              <Button icon={<WarningOutlined/>} danger />
+            </Tooltip>
+          </ButtonGroup>
+        </Card>
+      </Space>
+      }
+
     return <LogViewerCard log={validContent}/>;
 };
 

frontend/src/components/Problems/TestResultContainer/index.tsx

@@ -1,9 +1,9 @@
-import {TestProblem} from "@/graphql/__generated__/graphql";
-import {Space} from "antd";
+import { TestProblem } from "@/graphql/__generated__/graphql";
+import { Space } from "antd";
 import React from "react";
 import ErrorAlert from "@/components/ErrorAlert";
 import themeStyles from '@/theme/theme.module.css';
-import {SectionWithTestStatus} from "@/components/Problems/BuildProblem";
+import { SectionWithTestStatus } from "@/components/Problems/BuildProblem";
 import LogOutput from "@/components/Problems/LogOutput";
 
 interface Props {
@@ -12,6 +12,7 @@ interface Props {
   testProblem: TestProblem;
 }
 
+
 const TestResultContainer: React.FC<Props> = ({ id, problemLabel, testProblem }) => {
   const testResult = testProblem.results.find(r => r.id == id)
   if (!testResult) {
@@ -23,12 +24,15 @@ const TestResultContainer: React.FC<Props> = ({ id, problemLabel, testProblem })
     );
   }
 
+  var contents = <LogOutput blobReference={testResult.actionLogOutput} />
+
+
   return (
     <>
       <SectionWithTestStatus testProblem={testProblem} />
       {/* Display spin behind the actions, making UI stable when query is being executed. */}
       <Space direction="vertical" size="middle" className={themeStyles.space}>
-        <LogOutput blobReference={testResult.actionLogOutput} />
+        {contents}
       </Space>
     </>
   );