feat(gui): Display logs of specific swap on press of button on history page

src-gui/src/models/cliModel.ts

@@ -18,3 +18,26 @@ export interface CliLog {
     [index: string]: unknown;
   }[];
 }
+
+function isCliLog(log: unknown): log is CliLog {
+  return (
+    typeof log === "object" &&
+    log !== null &&
+    "timestamp" in log &&
+    "level" in log &&
+    "fields" in log
+  );
+}
+
+export function parseCliLogString(log: string): CliLog | string {
+  try {
+    const parsed = JSON.parse(log);
+    if (isCliLog(parsed)) {
+      return parsed;
+    } else {
+      return log;
+    }
+  } catch (err) {
+    return log;
+  }
+}

src-gui/src/renderer/components/pages/history/table/SwapLogFileOpenButton.tsx

@@ -6,29 +6,38 @@ import {
   DialogTitle,
 } from "@material-ui/core";
 import { ButtonProps } from "@material-ui/core/Button/Button";
-import { CliLog } from "models/cliModel";
+import { CliLog, parseCliLogString } from "models/cliModel";
+import { GetLogsResponse } from "models/tauriModel";
 import { useState } from "react";
 import PromiseInvokeButton from "renderer/components/PromiseInvokeButton";
+import { getLogsOfSwap } from "renderer/rpc";
 import CliLogsBox from "../../../other/RenderedCliLog";
 
 export default function SwapLogFileOpenButton({
   swapId,
   ...props
 }: { swapId: string } & ButtonProps) {
-  const [logs, setLogs] = useState<CliLog[] | null>(null);
+  const [logs, setLogs] = useState<(CliLog | string)[] | null>(null);
+
+  function onLogsReceived(response: GetLogsResponse) {
+    setLogs(response.logs.map(parseCliLogString));
+  }
 
   return (
     <>
       <PromiseInvokeButton
-        onSuccess={(data) => {
-          setLogs(data as CliLog[]);
-        }}
-        onInvoke={async () => {
-          throw new Error("Not implemented");
-        }}
+        onSuccess={onLogsReceived}
+        onInvoke={() => getLogsOfSwap(swapId, false)}
         {...props}
       >
-        View log
+        View full logs
+      </PromiseInvokeButton>
+      <PromiseInvokeButton
+        onSuccess={onLogsReceived}
+        onInvoke={() => getLogsOfSwap(swapId, true)}
+        {...props}
+      >
+        View redacted logs
       </PromiseInvokeButton>
       {logs && (
         <Dialog open onClose={() => setLogs(null)} fullWidth maxWidth="lg">
@@ -37,7 +46,13 @@ export default function SwapLogFileOpenButton({
             <CliLogsBox logs={logs} label="Logs relevant to the swap" />
           </DialogContent>
           <DialogActions>
-            <Button onClick={() => setLogs(null)}>Close</Button>
+            <Button
+              onClick={() => setLogs(null)}
+              variant="contained"
+              color="primary"
+            >
+              Close
+            </Button>
           </DialogActions>
         </Dialog>
       )}

src-gui/src/renderer/rpc.ts

@@ -5,6 +5,8 @@ import {
   BalanceResponse,
   BuyXmrArgs,
   BuyXmrResponse,
+  GetLogsArgs,
+  GetLogsResponse,
   GetSwapInfoResponse,
   MoneroRecoveryArgs,
   ResumeSwapArgs,
@@ -132,3 +134,13 @@ export async function checkContextAvailability(): Promise<boolean> {
   const available = await invokeNoArgs<boolean>("is_context_available");
   return available;
 }
+
+export async function getLogsOfSwap(
+  swapId: string,
+  redact: boolean,
+): Promise<GetLogsResponse> {
+  return await invoke<GetLogsArgs, GetLogsResponse>("get_logs", {
+    swap_id: swapId,
+    redact,
+  });
+}