From c298f921657f4026e748d3dc3b443b433091ec8c Mon Sep 17 00:00:00 2001 From: KobeN <7845001+kobenguyent@users.noreply.github.com> Date: Fri, 10 May 2024 12:41:52 +0200 Subject: [PATCH] feat(ui): logs tab (#137) --- packages/ui/src/components/NavBar.vue | 12 +++- packages/ui/src/components/RequestPanel.vue | 2 +- .../ui/src/components/modals/LogsModal.vue | 40 ++++++++++++ packages/ui/src/global.d.ts | 1 + packages/ui/src/helpers.ts | 10 ++- packages/ui/src/main.ts | 62 ++++++++++++++++--- packages/ui/src/store.ts | 7 +++ 7 files changed, 120 insertions(+), 14 deletions(-) create mode 100644 packages/ui/src/components/modals/LogsModal.vue diff --git a/packages/ui/src/components/NavBar.vue b/packages/ui/src/components/NavBar.vue index bdb01763..62995440 100644 --- a/packages/ui/src/components/NavBar.vue +++ b/packages/ui/src/components/NavBar.vue @@ -34,6 +34,7 @@ Plugins Settings + Logs
@@ -49,6 +50,7 @@ + @@ -59,6 +61,7 @@ import AddWorkspaceModal from './modals/AddWorkspaceModal.vue' import SettingsModal from './modals/SettingsModal.vue' import EnvironmentModal from './modals/EnvironmentModal.vue' import BackupAndRestoreModal from './modals/BackupAndRestoreModal.vue' +import LogsModal from './modals/LogsModal.vue' import { exportRestfoxCollection, applyTheme, generateNewIdsForTree, toTree } from '@/helpers' import { getCollectionForWorkspace } from '@/db' import constants from '../constants' @@ -69,7 +72,8 @@ export default { AddWorkspaceModal, SettingsModal, EnvironmentModal, - BackupAndRestoreModal + BackupAndRestoreModal, + LogsModal }, props: { nav: String @@ -79,7 +83,8 @@ export default { showSettingsModal: false, showPluginManagerModal: false, showAddWorkspaceModal: false, - environmentModalShow: false + environmentModalShow: false, + showLogsModal: false, } }, computed: { @@ -168,6 +173,9 @@ export default { showSettings() { this.showSettingsModal = true }, + showLogs() { + this.showLogsModal = true + }, showPluginsManager() { this.showPluginManagerModal = true }, diff --git a/packages/ui/src/components/RequestPanel.vue b/packages/ui/src/components/RequestPanel.vue index 19224e4f..5a7ecd3b 100644 --- a/packages/ui/src/components/RequestPanel.vue +++ b/packages/ui/src/components/RequestPanel.vue @@ -397,7 +397,7 @@ export default { }, { name: 'Docs' - } + }, ], activeRequestPanelTab: 'Body', methods: [ diff --git a/packages/ui/src/components/modals/LogsModal.vue b/packages/ui/src/components/modals/LogsModal.vue new file mode 100644 index 00000000..bd758b99 --- /dev/null +++ b/packages/ui/src/components/modals/LogsModal.vue @@ -0,0 +1,40 @@ + + + + diff --git a/packages/ui/src/global.d.ts b/packages/ui/src/global.d.ts index 385c2903..0731589f 100644 --- a/packages/ui/src/global.d.ts +++ b/packages/ui/src/global.d.ts @@ -104,6 +104,7 @@ export interface RequestFinalResponse { } export interface State { + consoleLogs: string[] collection: CollectionItem[] collectionTree: CollectionItem[] tabs: CollectionItem[] diff --git a/packages/ui/src/helpers.ts b/packages/ui/src/helpers.ts index a978179b..1d04684a 100644 --- a/packages/ui/src/helpers.ts +++ b/packages/ui/src/helpers.ts @@ -585,7 +585,7 @@ export async function handleRequest( return responseToSend } catch(e: any) { - console.log(e) + console.error(e) let error = 'Error: Request failed' @@ -1578,8 +1578,8 @@ export function setEnvironmentVariable(store: ActionContext, objec environments: environmentsToModify }) } catch(e) { - console.log('Failed to set environment variable:') - console.log(e) + console.error('Failed to set environment variable:') + console.error(e) } } @@ -1611,6 +1611,10 @@ export function getAlertConfirmPromptContainer(componentRootElement: HTMLElement return (componentRootElement.ownerDocument?.defaultView ?? window).document.querySelector('alert-confirm-prompt') as any } +export function getCurrentTimestamp(): string { + return dayjs().format('HH:mm:ss:SSS') +} + export function getVersion(): string { return version } diff --git a/packages/ui/src/main.ts b/packages/ui/src/main.ts index 20623fd6..3559bbb1 100644 --- a/packages/ui/src/main.ts +++ b/packages/ui/src/main.ts @@ -3,7 +3,7 @@ import store from './store' import App from './App.vue' import VueToast from 'vue-toast-notification' import 'vue-toast-notification/dist/theme-default.css' -import dayjs from 'dayjs' +import { getCurrentTimestamp } from '@/helpers' const app = createApp(App) @@ -12,12 +12,58 @@ app.use(VueToast) app.mount('#app') -const originalConsoleLog = console.log -console.log = (...args) => { - const timestamp = dayjs().format('HH:mm:ss:SSS') - const timestampStyle = 'color: #4CAF50;' - const logMessage = `%c${timestamp} %c` - const resetStyle = 'color: inherit;' +interface ConsoleMethod { + (...args: any[]): void +} + +interface OriginalConsoleMethods { + log: ConsoleMethod + warn: ConsoleMethod + error: ConsoleMethod + info: ConsoleMethod +} - originalConsoleLog(logMessage, timestampStyle, resetStyle, ...args) +type LogType = 'log' | 'warn' | 'error' | 'info' + +const originalConsoleMethods: OriginalConsoleMethods = { + log: console.log, + warn: console.warn, + error: console.error, + info: console.info } + +function interceptConsole(type: LogType): ConsoleMethod { + return (...args: any[]) => { + const timestampStyle = 'color: #4CAF50;' + const logMessage = `%c${getCurrentTimestamp()} - [${type.toUpperCase()}] - %c` + const resetStyle = 'color: inherit;' + + originalConsoleMethods[type](logMessage, timestampStyle, resetStyle, ...args) + storeLog(type, args) + } +} + +console.log = interceptConsole('log') +console.warn = interceptConsole('warn') +console.error = interceptConsole('error') +console.info = interceptConsole('info') + +function storeLog(type: LogType, args: any[]): void { + try { + store.commit('addConsoleLog', { type, message: `${getCurrentTimestamp()} - [${type.toUpperCase()}] - ${argsMapping(args)}` }) + } catch (error) { + console.error('Failed to store log:', error) + } +} + +function argsMapping(args: any[]): string { + return args.map(arg => { + if (arg instanceof Error) { + return arg.message + } else if (typeof arg === 'object') { + return JSON.stringify(arg, null, 2) + } else { + return arg + } + }).join(' ') +} \ No newline at end of file diff --git a/packages/ui/src/store.ts b/packages/ui/src/store.ts index d0241228..177ee3c2 100644 --- a/packages/ui/src/store.ts +++ b/packages/ui/src/store.ts @@ -349,6 +349,7 @@ const store = createStore({ tabEnvironmentResolved: {}, idMap: null, skipPersistingActiveTab: false, + consoleLogs: [], } }, getters: { @@ -663,6 +664,12 @@ const store = createStore({ detachTab(state, tab) { state.detachedTabs.push(tab) }, + addConsoleLog(state, log: string) { + state.consoleLogs.push(log) + }, + clearConsoleLogs(state) { + state.consoleLogs = [] + }, }, actions: { addTab(context, tab) {