diff --git a/web/containers/ModalTroubleShoot/AppLogs.tsx b/web/containers/ModalTroubleShoot/AppLogs.tsx index 63b324e96..7b0a31a5d 100644 --- a/web/containers/ModalTroubleShoot/AppLogs.tsx +++ b/web/containers/ModalTroubleShoot/AppLogs.tsx @@ -1,9 +1,11 @@ -import React, { useEffect, useState } from 'react' +import React, { useEffect, useState, memo } from 'react' import { Button } from '@janhq/joi' import { CopyIcon, CheckIcon, FolderIcon } from 'lucide-react' +import { twMerge } from 'tailwind-merge' + import { useClipboard } from '@/hooks/useClipboard' import { useLogs } from '@/hooks/useLogs' import { usePath } from '@/hooks/usePath' @@ -16,7 +18,9 @@ const AppLogs = () => { useEffect(() => { getLogs('app').then((log) => { if (typeof log?.split === 'function') { - setLogs(log.split(/\r?\n|\r|\n/g)) + if (log.length > 0) { + setLogs(log.split(/\r?\n|\r|\n/g)) + } } }) @@ -26,7 +30,12 @@ const AppLogs = () => { const clipboard = useClipboard({ timeout: 1000 }) return ( -
+
- - {logs.map((log, i) => { - return ( -

- {log} -

- ) - })} -
+ {logs.length > 0 ? ( + + {logs.slice(-100).map((log, i) => { + return ( +

+ {log} +

+ ) + })} +
+ ) : ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Empty logs

+
+ )}
) } -export default DeviceSpecs +export default memo(DeviceSpecs) diff --git a/web/containers/ModalTroubleShoot/index.tsx b/web/containers/ModalTroubleShoot/index.tsx index 698f7e63d..46ef947dd 100644 --- a/web/containers/ModalTroubleShoot/index.tsx +++ b/web/containers/ModalTroubleShoot/index.tsx @@ -104,9 +104,21 @@ const ModalTroubleShooting = () => {
- {isTabActive === 0 && } - {isTabActive === 1 && } - {isTabActive === 2 && } +
+ +
+
+ +
+
+ +
diff --git a/web/containers/ServerLogs/index.tsx b/web/containers/ServerLogs/index.tsx index 858a7b2ab..e12d89fd1 100644 --- a/web/containers/ServerLogs/index.tsx +++ b/web/containers/ServerLogs/index.tsx @@ -1,6 +1,6 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import { useCallback, useEffect, useState } from 'react' +import { memo, useCallback, useEffect, useState } from 'react' import { Button, useClipboard } from '@janhq/joi' import { useAtomValue } from 'jotai' @@ -117,10 +117,15 @@ const ServerLogs = (props: ServerLogsProps) => { })} ) : ( -
+
{ ) } -export default ServerLogs +export default memo(ServerLogs)