feat(log): added download chunk and entire log

web/src/containers/Studio/internal/components/log/logChunk.tsx

@@ -5,12 +5,14 @@ import { ErrorOutline, Warning } from '@mui/icons-material'
 import ContentCopyIcon from '@mui/icons-material/ContentCopy'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import CheckIcon from '@mui/icons-material/Check'
+import FileDownloadIcon from '@mui/icons-material/FileDownload'
 import { makeStyles } from '@mui/styles'
 import {
   defaultChunkSize,
   parseErrorsAndWarnings,
   LogInstance,
-  clearErrorsAndWarningsHtmlWrapping
+  clearErrorsAndWarningsHtmlWrapping,
+  download
 } from '../../../../../utils'
 
 const useStyles: any = makeStyles((theme: any) => ({
@@ -44,7 +46,11 @@ interface LogChunkProps {
 }
 
 const LogChunk = (props: LogChunkProps) => {
-  const { id, text, logLineCount, scrollToLogInstance } = props
+  const { id, text, logLineCount } = props
+  const [scrollToLogInstance, setScrollToLogInstance] = useState(
+    props.scrollToLogInstance
+  )
+  const rowText = clearErrorsAndWarningsHtmlWrapping(text)
   const classes = useStyles()
   const [expanded, setExpanded] = useState(props.expanded)
   const [copied, setCopied] = useState(false)
@@ -78,6 +84,13 @@ const LogChunk = (props: LogChunkProps) => {
 
   const { errors, warnings } = parseErrorsAndWarnings(text)
 
+  const getLineRange = (separator = ' ... ') =>
+    `${id * defaultChunkSize}${separator}${
+      (id + 1) * defaultChunkSize < logLineCount
+        ? (id + 1) * defaultChunkSize
+        : logLineCount
+    }`
+
   return (
     <div onClick={(evt) => props.onClick(evt, id)}>
       <button
@@ -103,11 +116,7 @@ const LogChunk = (props: LogChunkProps) => {
               alignItems: 'center'
             }}
           >
-            <span>{`Lines: ${id * defaultChunkSize} ... ${
-              (id + 1) * defaultChunkSize < logLineCount
-                ? (id + 1) * defaultChunkSize
-                : logLineCount
-            }`}</span>
+            <span>{`Lines: ${getLineRange()}`}</span>
             {copied ? (
               <CheckIcon style={{ fontSize: 20, color: 'green' }} />
             ) : (
@@ -116,9 +125,7 @@ const LogChunk = (props: LogChunkProps) => {
                 onClick={(evt: SyntheticEvent) => {
                   evt.stopPropagation()
 
-                  navigator.clipboard.writeText(
-                    clearErrorsAndWarningsHtmlWrapping(text)
-                  )
+                  navigator.clipboard.writeText(rowText)
 
                   setCopied(true)
 
@@ -128,11 +135,27 @@ const LogChunk = (props: LogChunkProps) => {
                 }}
               />
             )}
+            <FileDownloadIcon
+              onClick={(evt: SyntheticEvent) => {
+                download(evt, rowText, `log.${getLineRange('-')}`)
+              }}
+            />
             {errors && errors.length !== 0 && (
-              <ErrorOutline color="error" style={{ fontSize: 20 }} />
+              <ErrorOutline
+                color="error"
+                style={{ fontSize: 20 }}
+                onClick={() => {
+                  setScrollToLogInstance(errors[0])
+                }}
+              />
             )}
             {warnings && warnings.length !== 0 && (
-              <Warning style={{ fontSize: 20, color: 'green' }} />
+              <Warning
+                style={{ fontSize: 20, color: 'green' }}
+                onClick={() => {
+                  setScrollToLogInstance(warnings[0])
+                }}
+              />
             )}{' '}
             <ExpandMoreIcon
               style={{

web/src/containers/Studio/internal/components/log/logComponent.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState, SyntheticEvent } from 'react'
 import TreeView from '@mui/lab/TreeView'
 import TreeItem from '@mui/lab/TreeItem'
 import { ChevronRight, ExpandMore } from '@mui/icons-material'
@@ -7,12 +8,15 @@ import { makeStyles } from '@mui/styles'
 import Highlight from 'react-highlight'
 import { LogObject, defaultChunkSize } from '../../../../../utils'
 import { RunTimeType } from '../../../../../context/appContext'
-import { splitIntoChunks, LogInstance } from '../../../../../utils'
+import {
+  splitIntoChunks,
+  LogInstance,
+  clearErrorsAndWarningsHtmlWrapping,
+  download
+} from '../../../../../utils'
 import LogChunk from './logChunk'
-import { useEffect, useState } from 'react'
-
-// TODO:
-// link to download log.log
+import FileDownloadIcon from '@mui/icons-material/FileDownload'
+import { Button } from '@mui/material'
 
 const useStyles: any = makeStyles((theme: any) => ({
   expansionDescription: {
@@ -136,6 +140,7 @@ const LogComponent = (props: LogComponentProps) => {
 
   const hasErrorsOrWarnings =
     logObject.errors?.length !== 0 || logObject.warnings?.length !== 0
+  const logBody = typeof log === 'string' ? log : log.body
 
   return (
     <>
@@ -204,48 +209,50 @@ const LogComponent = (props: LogComponentProps) => {
             )}
           </div>
 
-          {Array.isArray(logChunks) ? (
-            logChunks.map((chunk: string, id: number) => (
-              <LogChunk
-                id={id}
-                text={chunk}
-                expanded={logChunksState[id]}
-                key={`log-chunk-${id}`}
-                logLineCount={logObject.linesCount}
-                scrollToLogInstance={scrollToLogInstance}
-                onClick={(_, chunkNumber) => {
-                  setLogChunksState((prevState) => {
-                    const newState = [...prevState]
-                    const expand = !newState[chunkNumber]
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+            {Array.isArray(logChunks) ? (
+              logChunks.map((chunk: string, id: number) => (
+                <LogChunk
+                  id={id}
+                  text={chunk}
+                  expanded={logChunksState[id]}
+                  key={`log-chunk-${id}`}
+                  logLineCount={logObject.linesCount}
+                  scrollToLogInstance={scrollToLogInstance}
+                  onClick={(_, chunkNumber) => {
+                    setLogChunksState((prevState) => {
+                      const newState = [...prevState]
+                      const expand = !newState[chunkNumber]
 
-                    newState[chunkNumber] = expand
+                      newState[chunkNumber] = expand
 
-                    if (expand) {
-                      const chunkToCollapse = getChunkToAutoCollapse()
+                      if (expand) {
+                        const chunkToCollapse = getChunkToAutoCollapse()
 
-                      if (chunkToCollapse !== undefined) {
-                        newState[chunkToCollapse] = false
+                        if (chunkToCollapse !== undefined) {
+                          newState[chunkToCollapse] = false
+                        }
                       }
-                    }
 
-                    return newState
-                  })
+                      return newState
+                    })
 
-                  setScrollToLogInstance(undefined)
-                }}
-              />
-            ))
-          ) : (
-            <Typography
-              id={`log_container`}
-              variant="h5"
-              className={classes.expansionDescription}
-            >
-              <Highlight className={'html'} innerHTML={true}>
-                {logChunks}
-              </Highlight>
-            </Typography>
-          )}
+                    setScrollToLogInstance(undefined)
+                  }}
+                />
+              ))
+            ) : (
+              <Typography
+                id={`log_container`}
+                variant="h5"
+                className={classes.expansionDescription}
+              >
+                <Highlight className={'html'} innerHTML={true}>
+                  {logChunks}
+                </Highlight>
+              </Typography>
+            )}
+          </div>
         </div>
       ) : (
         <div>
@@ -254,10 +261,29 @@ const LogComponent = (props: LogComponentProps) => {
             id="log"
             style={{ overflow: 'auto', height: 'calc(100vh - 220px)' }}
           >
-            {typeof log === 'string' ? log : log.body}
+            {logBody}
           </pre>
         </div>
       )}
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+
+          marginTop: 10
+        }}
+      >
+        <Button
+          onClick={(evt: SyntheticEvent) => {
+            download(evt, clearErrorsAndWarningsHtmlWrapping(logBody))
+          }}
+          variant="contained"
+          color="primary"
+          startIcon={<FileDownloadIcon />}
+        >
+          download entire log
+        </Button>
+      </div>
     </>
   )
 }

web/src/utils/log.ts

@@ -1,3 +1,4 @@
+import { SyntheticEvent } from 'react'
 import { LogInstance } from './'
 
 export const parseErrorsAndWarnings = (log: string) => {
@@ -100,3 +101,25 @@ export const splitIntoChunks = (log: string, chunkSize = defaultChunkSize) => {
 
 export const clearErrorsAndWarningsHtmlWrapping = (log: string) =>
   log.replace(/^<font[^>]*>/gm, '').replace(/<\/font>/gm, '')
+
+export const download = (
+  evt: SyntheticEvent,
+  log: string,
+  fileName = 'log'
+) => {
+  evt.stopPropagation()
+
+  const file = new Blob([log])
+  const url = URL.createObjectURL(file)
+
+  const a = document.createElement('a')
+  a.href = url
+  a.download = `${fileName}.log`
+  document.body.appendChild(a)
+  a.click()
+
+  setTimeout(() => {
+    document.body.removeChild(a)
+    window.URL.revokeObjectURL(url)
+  }, 0)
+}