Merge branch 'main' into perf/dark-theme

packages/ui/src/components/NavBar.vue

@@ -34,6 +34,7 @@
             </template>
             <a href="#" @click.prevent="showPluginsManager" class="bl">Plugins</a>
             <a href="#" @click.prevent="showSettings" class="bl br">Settings</a>
+            <a href="#" @click.prevent="showLogs" class="bl br">Logs</a>
             <span class="spacer"></span>
             <div>
                 <a class="gh-button-container" href="https://github.com/flawiddsouza/Restfox" rel="noopener" target="_blank" title="Star Restfox" aria-label="Star Restfox on GitHub">
@@ -49,6 +50,7 @@
     <PluginManagerModal v-model:showModal="showPluginManagerModal" />
     <AddWorkspaceModal v-model:showModal="showAddWorkspaceModal" :is-electron="flags.isElectron" />
     <SettingsModal v-model:showModal="showSettingsModal" />
+    <LogsModal v-model:showModal="showLogsModal"></LogsModal>
     <EnvironmentModal v-model:showModal="environmentModalShow" :workspace="activeWorkspace" v-if="activeWorkspace" />
     <BackupAndRestoreModal />
 </template>
@@ -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
         },

packages/ui/src/components/RequestPanel.vue

@@ -397,7 +397,7 @@ export default {
                 },
                 {
                     name: 'Docs'
-                }
+                },
             ],
             activeRequestPanelTab: 'Body',
             methods: [

packages/ui/src/components/modals/LogsModal.vue

@@ -0,0 +1,40 @@
+<template>
+    <div v-if="showModalComp">
+        <modal :title="title" v-model="showModalComp">
+            <table style="table-layout: fixed">
+                <tr v-for="(log, index) in consoleLogs" :key="index">
+                    <td>
+                        {{ log.message }}
+                    </td>
+                </tr>
+            </table>
+        </modal>
+    </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import Modal from '@/components/Modal.vue'
+
+export default {
+    components: {Modal},
+    props: {
+        showModal: Boolean,
+    },
+    computed: {
+        title() {
+            return 'Logs'
+        },
+        showModalComp: {
+            get() {
+                return this.showModal
+            },
+            set(value) {
+                this.$emit('update:showModal', value)
+            }
+        },
+        ...mapState(['consoleLogs']),
+    },
+}
+</script>
+

packages/ui/src/global.d.ts

@@ -104,6 +104,7 @@ export interface RequestFinalResponse {
 }
 
 export interface State {
+    consoleLogs: string[]
     collection: CollectionItem[]
     collectionTree: CollectionItem[]
     tabs: CollectionItem[]

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<State, State>, 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
 }

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(' ')
+}

packages/ui/src/store.ts

@@ -349,6 +349,7 @@ const store = createStore<State>({
             tabEnvironmentResolved: {},
             idMap: null,
             skipPersistingActiveTab: false,
+            consoleLogs: [],
         }
     },
     getters: {
@@ -663,6 +664,12 @@ const store = createStore<State>({
         detachTab(state, tab) {
             state.detachedTabs.push(tab)
         },
+        addConsoleLog(state, log: string) {
+            state.consoleLogs.push(log)
+        },
+        clearConsoleLogs(state) {
+            state.consoleLogs = []
+        },
     },
     actions: {
         addTab(context, tab) {