feat: in-app debug console, closes #824

src/renderer/App.vue

@@ -10,9 +10,7 @@
                   :key="connection.uid"
                   :connection="connection"
                />
-               <div class="connection-panel-wrapper p-relative">
-                  <WorkspaceAddConnectionPanel v-if="selectedWorkspace === 'NEW'" />
-               </div>
+               <WorkspaceAddConnectionPanel v-if="selectedWorkspace === 'NEW'" />
             </div>
             <TheFooter />
             <TheNotificationsBoard />
@@ -48,6 +46,8 @@ import { useSchemaExportStore } from '@/stores/schemaExport';
 import { useSettingsStore } from '@/stores/settings';
 import { useWorkspacesStore } from '@/stores/workspaces';
 
+import { useConsoleStore } from './stores/console';
+
 const { t } = useI18n();
 
 const TheTitleBar = defineAsyncComponent(() => import(/* webpackChunkName: "TheTitleBar" */'@/components/TheTitleBar.vue'));
@@ -80,6 +80,8 @@ const schemaExportStore = useSchemaExportStore();
 const { hideExportModal } = schemaExportStore;
 const { isExportModal: isExportSchemaModal } = storeToRefs(schemaExportStore);
 
+const consoleStore = useConsoleStore();
+
 const isAllConnectionsModal: Ref<boolean> = ref(false);
 
 document.addEventListener('DOMContentLoaded', () => {
@@ -152,6 +154,60 @@ onMounted(() => {
       }
    });
 });
+
+// Console messages
+const oldLog = console.log;
+const oldWarn = console.warn;
+const oldInfo = console.info;
+const oldError = console.error;
+
+console.log = function (...args) {
+   consoleStore.putLog('debug', {
+      level: 'log',
+      process: 'renderer',
+      message: args.join(' '),
+      date: new Date()
+   });
+   oldLog.apply(this, args);
+};
+
+console.info = function (...args) {
+   consoleStore.putLog('debug', {
+      level: 'info',
+      process: 'renderer',
+      message: args.join(' '),
+      date: new Date()
+   });
+   oldInfo.apply(this, args);
+};
+
+console.warn = function (...args) {
+   consoleStore.putLog('debug', {
+      level: 'warn',
+      process: 'renderer',
+      message: args.join(' '),
+      date: new Date()
+   });
+   oldWarn.apply(this, args);
+};
+
+console.error = function (...args) {
+   consoleStore.putLog('debug', {
+      level: 'error',
+      process: 'renderer',
+      message: args.join(' '),
+      date: new Date()
+   });
+   oldError.apply(this, args);
+};
+
+window.addEventListener('unhandledrejection', (event) => {
+   console.error(event.reason);
+});
+
+window.addEventListener('error', (event) => {
+   console.error(event.error, '| File name:', event.filename.split('/').pop().split('?')[0]);
+});
 </script>
 
 <style lang="scss">

src/renderer/components/BaseSelect.vue

@@ -365,7 +365,11 @@ export default defineComponent({
       };
 
       const handleWheelEvent = (e) => {
-         if (!e.target.className.includes('select__')) deactivate();
+         try {
+            if (!e.target.className.includes('select__')) deactivate();
+         }
+         catch (_) {
+         }
       };
 
       onMounted(() => {

src/renderer/components/DebugConsole.vue

@@ -0,0 +1,285 @@
+<template>
+   <div
+      ref="wrapper"
+      class="console-wrapper"
+      @mouseenter="isHover = true"
+      @mouseleave="isHover = false"
+   >
+      <div ref="resizer" class="console-resizer" />
+      <div
+         id="console"
+         ref="queryConsole"
+         class="console column col-12"
+         :style="{height: localHeight ? localHeight+'px' : ''}"
+      >
+         <div class="console-header">
+            <ul class="tab tab-block">
+               <li class="tab-item" :class="{'active': selectedTab === 'query'}">
+                  <a class="tab-link" @click="selectedTab = 'query'">{{ t('application.executedQueries') }}</a>
+               </li>
+               <li class="tab-item" :class="{'active': selectedTab === 'debug'}">
+                  <a class="tab-link" @click="selectedTab = 'debug'">{{ t('application.debugConsole') }}</a>
+               </li>
+            </ul>
+            <button class="btn btn-clear mr-1" @click="resizeConsole(0)" />
+         </div>
+         <div
+            v-show="selectedTab === 'query'"
+            ref="queryConsoleBody"
+            class="console-body"
+         >
+            <div
+               v-for="(wLog, i) in workspaceQueryLogs"
+               :key="i"
+               class="console-log"
+               tabindex="0"
+               @contextmenu.prevent="contextMenu($event, wLog)"
+            >
+               <span class="console-log-datetime">{{ moment(wLog.date).format('HH:mm:ss') }}</span>: <code class="console-log-sql" v-html="highlight(wLog.sql, {html: true})" />
+            </div>
+         </div>
+         <div
+            v-show="selectedTab === 'debug'"
+            ref="logConsoleBody"
+            class="console-body"
+         >
+            <div
+               v-for="(log, i) in debugLogs"
+               :key="i"
+               class="console-log"
+               tabindex="0"
+               @contextmenu.prevent="contextMenu($event, log)"
+            >
+               <span class="console-log-datetime">{{ moment(log.date).format('HH:mm:ss') }}</span> <small>[{{ log.process.substring(0, 1).toUpperCase() }}]</small>: <span class="console-log-message" :class="`console-log-level-${log.level}`">{{ log.message }}</span>
+            </div>
+         </div>
+      </div>
+   </div>
+   <BaseContextMenu
+      v-if="isContext"
+      :context-event="contextEvent"
+      @close-context="isContext = false"
+   >
+      <div class="context-element" @click="copyLog">
+         <span class="d-flex">
+            <BaseIcon
+               class="text-light mt-1 mr-1"
+               icon-name="mdiContentCopy"
+               :size="18"
+            /> {{ t('general.copy') }}</span>
+      </div>
+   </BaseContextMenu>
+</template>
+<script setup lang="ts">
+import * as moment from 'moment';
+import { storeToRefs } from 'pinia';
+import { highlight } from 'sql-highlight';
+import { computed, nextTick, onMounted, Ref, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import BaseContextMenu from '@/components/BaseContextMenu.vue';
+import BaseIcon from '@/components/BaseIcon.vue';
+import { copyText } from '@/libs/copyText';
+import { useConsoleStore } from '@/stores/console';
+
+const { t } = useI18n();
+
+const consoleStore = useConsoleStore();
+
+const { resizeConsole, getLogsByWorkspace } = consoleStore;
+const {
+   isConsoleOpen,
+   consoleHeight,
+   selectedTab,
+   debugLogs
+} = storeToRefs(consoleStore);
+
+const props = defineProps({
+   uid: {
+      type: String,
+      default: null,
+      required: false
+   }
+});
+
+const wrapper: Ref<HTMLInputElement> = ref(null);
+const queryConsole: Ref<HTMLInputElement> = ref(null);
+const queryConsoleBody: Ref<HTMLInputElement> = ref(null);
+const logConsoleBody: Ref<HTMLInputElement> = ref(null);
+const resizer: Ref<HTMLInputElement> = ref(null);
+const localHeight = ref(consoleHeight.value);
+const isHover = ref(false);
+const isContext = ref(false);
+const contextContent: Ref<string> = ref(null);
+const contextEvent: Ref<MouseEvent> = ref(null);
+
+const resize = (e: MouseEvent) => {
+   const el = queryConsole.value;
+   let elementHeight = el.getBoundingClientRect().bottom - e.pageY;
+   if (elementHeight > 400) elementHeight = 400;
+   localHeight.value = elementHeight;
+};
+
+const workspaceQueryLogs = computed(() => {
+   return getLogsByWorkspace(props.uid);
+});
+
+const stopResize = () => {
+   if (localHeight.value < 0) localHeight.value = 0;
+   resizeConsole(localHeight.value);
+   window.removeEventListener('mousemove', resize);
+   window.removeEventListener('mouseup', stopResize);
+};
+
+const contextMenu = (event: MouseEvent, wLog: {date: Date; sql?: string; message?: string}) => {
+   contextEvent.value = event;
+   contextContent.value = wLog.sql || wLog.message;
+   isContext.value = true;
+};
+
+const copyLog = () => {
+   copyText(contextContent.value);
+   isContext.value = false;
+};
+
+watch(workspaceQueryLogs, async () => {
+   if (!isHover.value) {
+      await nextTick();
+      queryConsoleBody.value.scrollTop = queryConsoleBody.value.scrollHeight;
+   }
+});
+
+watch(() => debugLogs.value.length, async () => {
+   if (!isHover.value) {
+      await nextTick();
+      logConsoleBody.value.scrollTop = logConsoleBody.value.scrollHeight;
+   }
+});
+
+watch(isConsoleOpen, async () => {
+   queryConsoleBody.value.scrollTop = queryConsoleBody.value.scrollHeight;
+   logConsoleBody.value.scrollTop = logConsoleBody.value.scrollHeight;
+});
+
+watch(selectedTab, async () => {
+   queryConsoleBody.value.scrollTop = queryConsoleBody.value.scrollHeight;
+   logConsoleBody.value.scrollTop = logConsoleBody.value.scrollHeight;
+});
+
+watch(consoleHeight, async (val) => {
+   await nextTick();
+   localHeight.value = val;
+});
+
+onMounted(() => {
+   queryConsoleBody.value.scrollTop = queryConsoleBody.value.scrollHeight;
+   logConsoleBody.value.scrollTop = logConsoleBody.value.scrollHeight;
+
+   resizer.value.addEventListener('mousedown', (e: MouseEvent) => {
+      e.preventDefault();
+
+      window.addEventListener('mousemove', resize);
+      window.addEventListener('mouseup', stopResize);
+   });
+});
+</script>
+<style lang="scss" scoped>
+.console-wrapper {
+  width: -webkit-fill-available;
+  z-index: 9;
+  margin-top: auto;
+  position: absolute;
+  bottom: 0;
+
+  .console-resizer {
+    height: 4px;
+    top: -1px;
+    width: 100%;
+    cursor: ns-resize;
+    position: absolute;
+    z-index: 99;
+    transition: background 0.2s;
+
+    &:hover {
+      background: var(--primary-color-dark);
+    }
+  }
+
+  .console {
+    padding: 0;
+    padding-bottom: $footer-height;
+
+    .console-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 4px;
+
+      .tab-block {
+         margin-top: 0;
+         margin-bottom: 0;
+      }
+
+      .tab-block,
+      .tab-item {
+         background-color: transparent;
+      }
+
+      .tab-link {
+         padding: 0.2rem 0.6rem;
+         cursor: pointer;
+         white-space: nowrap;
+      }
+    }
+
+    .console-body {
+      overflow: auto;
+      display: flex;
+      flex-direction: column;
+      max-height: 100%;
+      padding: 0 6px 3px;
+
+      .console-log {
+        padding: 1px 3px;
+        margin: 1px 0;
+        border-radius: $border-radius;
+        user-select: text;
+
+        &-datetime {
+            opacity: .6;
+            font-size: 90%;
+        }
+
+        &-sql {
+          font-size: 95%;
+          opacity: 0.8;
+          font-weight: 700;
+
+          &:hover {
+            user-select: text;
+          }
+        }
+
+        &-message {
+          font-size: 95%;
+        }
+
+        &-level {
+         // &-log,
+         // &-info {}
+         &-warn {
+            color: orange;
+         }
+         &-error {
+            color: red;
+         }
+        }
+
+        small {
+         opacity: .6;
+        }
+      }
+    }
+  }
+}
+</style>