From 52654b10554950464d614f304e0ea40b391bb056 Mon Sep 17 00:00:00 2001
From: Louis <louis@jan.ai>
Date: Thu, 4 Apr 2024 08:55:00 +0700
Subject: [PATCH] chore: add open log dir to troubleshooting modal (#2605)

---
 web/containers/ModalTroubleShoot/AppLogs.tsx | 56 ++++++++++++-------
 web/containers/ServerLogs/index.tsx          | 57 +++++++++++++-------
 web/hooks/usePath.ts                         |  3 ++
 3 files changed, 76 insertions(+), 40 deletions(-)

diff --git a/web/containers/ModalTroubleShoot/AppLogs.tsx b/web/containers/ModalTroubleShoot/AppLogs.tsx
index bd2dd2ceb..312053d51 100644
--- a/web/containers/ModalTroubleShoot/AppLogs.tsx
+++ b/web/containers/ModalTroubleShoot/AppLogs.tsx
@@ -2,14 +2,16 @@ import React, { useEffect, useState } from 'react'
 
 import { Button } from '@janhq/uikit'
 
-import { CopyIcon, CheckIcon } from 'lucide-react'
+import { CopyIcon, CheckIcon, FolderIcon } from 'lucide-react'
 
 import { useClipboard } from '@/hooks/useClipboard'
 import { useLogs } from '@/hooks/useLogs'
+import { usePath } from '@/hooks/usePath'
 
 const AppLogs = () => {
   const { getLogs } = useLogs()
   const [logs, setLogs] = useState<string[]>([])
+  const { onRevealInFinder } = usePath()
 
   useEffect(() => {
     getLogs('app').then((log) => {
@@ -26,27 +28,41 @@ const AppLogs = () => {
   return (
     <>
       <div className="absolute -top-11 right-2">
-        <Button
-          themes="outline"
-          className="bg-white dark:bg-secondary/50"
-          onClick={() => {
-            clipboard.copy(logs.slice(-50) ?? '')
-          }}
-        >
-          <div className="flex items-center space-x-2">
-            {clipboard.copied ? (
+        <div className="flex w-full flex-row gap-2">
+          <Button
+            themes="outline"
+            className="bg-white dark:bg-secondary/50"
+            onClick={() => onRevealInFinder('Logs')}
+          >
+            <div className="flex items-center space-x-2">
               <>
-                <CheckIcon size={14} className="text-green-600" />
-                <span>Copying...</span>
+                <FolderIcon size={14} />
+                <span>Open</span>
               </>
-            ) : (
-              <>
-                <CopyIcon size={14} />
-                <span>Copy All</span>
-              </>
-            )}
-          </div>
-        </Button>
+            </div>
+          </Button>
+          <Button
+            themes="outline"
+            className="bg-white dark:bg-secondary/50"
+            onClick={() => {
+              clipboard.copy(logs.slice(-50) ?? '')
+            }}
+          >
+            <div className="flex items-center space-x-2">
+              {clipboard.copied ? (
+                <>
+                  <CheckIcon size={14} className="text-green-600" />
+                  <span>Copying...</span>
+                </>
+              ) : (
+                <>
+                  <CopyIcon size={14} />
+                  <span>Copy All</span>
+                </>
+              )}
+            </div>
+          </Button>
+        </div>
       </div>
       <div className="overflow-hidden">
         {logs.length > 1 ? (
diff --git a/web/containers/ServerLogs/index.tsx b/web/containers/ServerLogs/index.tsx
index a6d5a16c9..39328e4c0 100644
--- a/web/containers/ServerLogs/index.tsx
+++ b/web/containers/ServerLogs/index.tsx
@@ -6,11 +6,13 @@ import React from 'react'
 import { Button } from '@janhq/uikit'
 import { useAtomValue } from 'jotai'
 
-import { CopyIcon, CheckIcon } from 'lucide-react'
+import { CopyIcon, CheckIcon, FolderIcon } from 'lucide-react'
 
 import { useClipboard } from '@/hooks/useClipboard'
 import { useLogs } from '@/hooks/useLogs'
 
+import { usePath } from '@/hooks/usePath'
+
 import { serverEnabledAtom } from '@/helpers/atoms/LocalServer.atom'
 
 type ServerLogsProps = { limit?: number; withCopy?: boolean }
@@ -20,6 +22,7 @@ const ServerLogs = (props: ServerLogsProps) => {
   const { getLogs } = useLogs()
   const serverEnabled = useAtomValue(serverEnabledAtom)
   const [logs, setLogs] = useState<string[]>([])
+  const { onRevealInFinder } = usePath()
 
   const clipboard = useClipboard({ timeout: 1000 })
 
@@ -55,27 +58,41 @@ const ServerLogs = (props: ServerLogsProps) => {
   return (
     <>
       <div className="absolute -top-11 right-2">
-        <Button
-          themes="outline"
-          className="bg-white dark:bg-secondary/50"
-          onClick={() => {
-            clipboard.copy(logs.slice(-100) ?? '')
-          }}
-        >
-          <div className="flex items-center space-x-2">
-            {clipboard.copied ? (
+        <div className="flex w-full flex-row gap-2">
+          <Button
+            themes="outline"
+            className="bg-white dark:bg-secondary/50"
+            onClick={() => onRevealInFinder('Logs')}
+          >
+            <div className="flex items-center space-x-2">
               <>
-                <CheckIcon size={14} className="text-green-600" />
-                <span>Copying...</span>
+                <FolderIcon size={14} />
+                <span>Open</span>
               </>
-            ) : (
-              <>
-                <CopyIcon size={14} />
-                <span>Copy All</span>
-              </>
-            )}
-          </div>
-        </Button>
+            </div>
+          </Button>
+          <Button
+            themes="outline"
+            className="bg-white dark:bg-secondary/50"
+            onClick={() => {
+              clipboard.copy(logs.slice(-100) ?? '')
+            }}
+          >
+            <div className="flex items-center space-x-2">
+              {clipboard.copied ? (
+                <>
+                  <CheckIcon size={14} className="text-green-600" />
+                  <span>Copying...</span>
+                </>
+              ) : (
+                <>
+                  <CopyIcon size={14} />
+                  <span>Copy All</span>
+                </>
+              )}
+            </div>
+          </Button>
+        </div>
       </div>
       <div className="overflow-hidden">
         {logs.length > 1 ? (
diff --git a/web/hooks/usePath.ts b/web/hooks/usePath.ts
index ed784a5c5..4b5ceacef 100644
--- a/web/hooks/usePath.ts
+++ b/web/hooks/usePath.ts
@@ -31,6 +31,9 @@ export const usePath = () => {
         if (!assistantId) return
         filePath = await joinPath(['assistants', assistantId])
         break
+      case 'Logs':
+        filePath = 'logs'
+        break
       default:
         break
     }