-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
new-log-viewer: Add support for exporting decoded logs as a file. (#72)
- Loading branch information
Showing
9 changed files
with
287 additions
and
20 deletions.
There are no files selected for viewing
60 changes: 60 additions & 0 deletions
60
new-log-viewer/src/components/MenuBar/ExportLogsButton.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import {useContext} from "react"; | ||
|
|
||
| import { | ||
| CircularProgress, | ||
| Typography, | ||
| } from "@mui/joy"; | ||
|
|
||
| import DownloadIcon from "@mui/icons-material/Download"; | ||
|
|
||
| import {StateContext} from "../../contexts/StateContextProvider"; | ||
| import { | ||
| EXPORT_LOG_PROGRESS_VALUE_MAX, | ||
| EXPORT_LOG_PROGRESS_VALUE_MIN, | ||
| } from "../../services/LogExportManager"; | ||
| import SmallIconButton from "./SmallIconButton"; | ||
|
|
||
|
|
||
| /** | ||
| * Represents a button for triggering log exports and displays the progress. | ||
| * | ||
| * @return | ||
| */ | ||
| const ExportLogsButton = () => { | ||
| const {exportLogs, exportProgress, fileName} = useContext(StateContext); | ||
|
|
||
| return ( | ||
| <SmallIconButton | ||
| disabled={ | ||
| // eslint-disable-next-line no-warning-comments | ||
| // TODO: Replace `"" === fileName` with a more specific context variable that | ||
| // indicates whether the file has been loaded. | ||
| (null !== exportProgress && EXPORT_LOG_PROGRESS_VALUE_MAX !== exportProgress) || | ||
| "" === fileName | ||
| } | ||
| onClick={exportLogs} | ||
| > | ||
| {null === exportProgress || EXPORT_LOG_PROGRESS_VALUE_MIN === exportProgress ? | ||
| <DownloadIcon/> : | ||
| <CircularProgress | ||
| determinate={true} | ||
| thickness={3} | ||
| value={exportProgress * 100} | ||
| variant={"solid"} | ||
| color={EXPORT_LOG_PROGRESS_VALUE_MAX === exportProgress ? | ||
| "success" : | ||
| "primary"} | ||
| > | ||
| {EXPORT_LOG_PROGRESS_VALUE_MAX === exportProgress ? | ||
| <DownloadIcon | ||
| color={"success"} | ||
| sx={{fontSize: "14px"}}/> : | ||
| <Typography level={"body-xs"}> | ||
| {Math.ceil(exportProgress * 100)} | ||
| </Typography>} | ||
| </CircularProgress>} | ||
| </SmallIconButton> | ||
| ); | ||
| }; | ||
|
|
||
| export default ExportLogsButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| import {downloadBlob} from "../utils/file"; | ||
|
|
||
|
|
||
| const EXPORT_LOG_PROGRESS_VALUE_MIN = 0; | ||
| const EXPORT_LOG_PROGRESS_VALUE_MAX = 1; | ||
|
|
||
| /** | ||
| * Manager for exporting logs as a file. | ||
| */ | ||
| class LogExportManager { | ||
| /** | ||
| * Internal buffer which stores decoded chunks of log data. | ||
| */ | ||
| readonly #chunks: string[] = []; | ||
|
|
||
| /** | ||
| * Total number of chunks to export. | ||
| */ | ||
| readonly #numChunks: number; | ||
|
|
||
| /** | ||
| * Name of the file to export to. | ||
| */ | ||
| readonly #exportedFileName: string; | ||
|
|
||
| constructor (numChunks: number, fileName: string) { | ||
| this.#numChunks = numChunks; | ||
| this.#exportedFileName = `exported-${new Date().toISOString() | ||
| .replace(/[:.]/g, "-")}-${fileName}.log`; | ||
| } | ||
|
|
||
| /** | ||
| * Appends the provided chunk of logs into an internal buffer. If the number of chunks reaches | ||
| * the specified limit, triggers a download. | ||
| * | ||
| * @param chunk | ||
| * @return The current download progress as a float between 0 and 1. | ||
| */ | ||
| appendChunk (chunk: string): number { | ||
| if (0 === this.#numChunks) { | ||
| this.#download(); | ||
|
|
||
| return EXPORT_LOG_PROGRESS_VALUE_MAX; | ||
| } | ||
| this.#chunks.push(chunk); | ||
| if (this.#chunks.length === this.#numChunks) { | ||
| this.#download(); | ||
| this.#chunks.length = 0; | ||
|
|
||
| return EXPORT_LOG_PROGRESS_VALUE_MAX; | ||
| } | ||
|
|
||
| return this.#chunks.length / this.#numChunks; | ||
| } | ||
|
|
||
| /** | ||
| * Triggers a download of the accumulated chunks. | ||
| */ | ||
| #download () { | ||
| const blob = new Blob(this.#chunks, {type: "text/plain"}); | ||
| downloadBlob(blob, this.#exportedFileName); | ||
| } | ||
| } | ||
|
|
||
| export default LogExportManager; | ||
| export { | ||
| EXPORT_LOG_PROGRESS_VALUE_MAX, | ||
| EXPORT_LOG_PROGRESS_VALUE_MIN, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.