feat(MySQL): option, disabled by default, to enable table size indicators on sidebar

src/main/libs/clients/MySQLClient.ts

@@ -1,10 +1,14 @@
 import * as antares from 'common/interfaces/antares';
 import * as mysql from 'mysql2/promise';
+import * as Store from 'electron-store';
 import { AntaresCore } from '../AntaresCore';
 import dataTypes from 'common/data-types/mysql';
 import SSH2Promise = require('ssh2-promise');
 import SSHConfig from 'ssh2-promise/lib/sshConfig';
 
+Store.initRenderer();
+const settingsStore = new Store({ name: 'settings' });
+
 export class MySQLClient extends AntaresCore {
    private _schema?: string;
    private _runningConnections: Map<string, number>;
@@ -308,28 +312,46 @@ export class MySQLClient extends AntaresCore {
       for (const db of filteredDatabases) {
          if (!schemas.has(db.Database)) continue;
 
-         let { rows: tables } = await this.raw<antares.QueryResult<ShowTableResult>>(`
+         const showTableSize = settingsStore.get('show_table_size');
-            SELECT
-               TABLE_NAME,
-               TABLE_TYPE,
-               ENGINE,
-               DATA_LENGTH,
-               INDEX_LENGTH,
-               TABLE_COMMENT,
-               TABLE_COLLATION, 
-               CREATE_TIME,
-               UPDATE_TIME
-            FROM information_schema.TABLES
-            WHERE TABLE_SCHEMA = "${db.Database}"
-            ORDER BY TABLE_NAME
-         `);
 
-         if (tables.length) {
+         if (showTableSize) {
-            tables = tables.map(table => {
+            let { rows: tables } = await this.raw<antares.QueryResult<ShowTableResult>>(`
-               table.TABLE_SCHEMA = db.Database;
+               SELECT
-               return table;
+                  TABLE_NAME,
-            });
+                  TABLE_TYPE,
-            tablesArr.push(...tables);
+                  ENGINE,
+                  DATA_LENGTH,
+                  INDEX_LENGTH,
+                  TABLE_COMMENT,
+                  TABLE_COLLATION, 
+                  CREATE_TIME,
+                  UPDATE_TIME
+               FROM information_schema.TABLES
+               WHERE TABLE_SCHEMA = "${db.Database}"
+               ORDER BY TABLE_NAME
+            `);
+
+            if (tables.length) {
+               tables = tables.map(table => {
+                  table.TABLE_SCHEMA = db.Database;
+                  return table;
+               });
+               tablesArr.push(...tables);
+            }
+         }
+         else {
+            let { rows: tables } = await this.raw<antares.QueryResult<ShowTableResult>>(`SHOW FULL TABLES FROM \`${db.Database}\``);
+
+            if (tables.length) {
+               tables = tables.map(table => {
+                  const [name, type] = Object.values(table);
+                  table.TABLE_SCHEMA = db.Database;
+                  table.TABLE_NAME = name;
+                  table.TABLE_TYPE = type;
+                  return table;
+               });
+               tablesArr.push(...tables);
+            }
          }
 
          let { rows: triggers } = await this.raw<antares.QueryResult<ShowTriggersResult>>(`SHOW TRIGGERS FROM \`${db.Database}\``);

src/renderer/components/ModalSettings.vue

@@ -120,6 +120,24 @@
                                     </label>
                                  </div>
                               </div>
+                              <div class="form-group column col-12 mb-0">
+                                 <div class="col-5 col-sm-12">
+                                    <label class="form-label">
+                                       {{ t('message.showTableSize') }}
+                                    </label>
+                                 </div>
+                                 <div class="col-1 col-sm-12">
+                                    <label class="form-switch d-inline-block" @click.prevent="toggleShowTableSize">
+                                       <input type="checkbox" :checked="showTableSize">
+                                       <i class="form-icon" />
+                                    </label>
+                                 </div>
+                                 <div class="col-6 col-sm-12 px-2 p-vcentered">
+                                    <small class="d-block" :style="'line-height: 1.1; font-size: 70%;'">
+                                       {{ t('message.showTableSizeDescription') }}
+                                    </small>
+                                 </div>
+                              </div>
                               <div class="form-group column col-12 mb-0">
                                  <div class="col-5 col-sm-12">
                                     <label class="form-label">
@@ -418,6 +436,7 @@ const {
    defaultCopyType: selectedCopyType,
    notificationsTimeout,
    restoreTabs,
+   showTableSize,
    disableBlur,
    disableScratchpad,
    applicationTheme,
@@ -440,7 +459,8 @@ const {
    changeEditorTheme,
    changeEditorFontSize,
    updateNotificationsTimeout,
-   changeDefaultCopyType
+   changeDefaultCopyType,
+   changeShowTableSize
 } = settingsStore;
 const {
    hideSettingModal: closeModal,
@@ -582,6 +602,10 @@ const toggleRestoreSession = () => {
    changeRestoreTabs(!restoreTabs.value);
 };
 
+const toggleShowTableSize = () => {
+   changeShowTableSize(!showTableSize.value);
+};
+
 const toggleDisableBlur = () => {
    changeDisableBlur(!disableBlur.value);
 };

src/renderer/i18n/en-US.ts

@@ -335,7 +335,9 @@ export const enUS = {
       deleteFolder: 'Delete folder',
       editConnectionAppearence: 'Edit connection appearence',
       executeSelectedQuery: 'Execute selected query',
-      defaultCopyType: 'Default copy type'
+      defaultCopyType: 'Default copy type',
+      showTableSize: 'Show table size in sidebar',
+      showTableSizeDescription: 'MySQL/MariaDB only. Enable this option may affects performance on schema with many tables.'
    },
    faker: {
       address: 'Address',

src/renderer/stores/settings.ts

@@ -19,6 +19,7 @@ export const useSettingsStore = defineStore('settings', {
       allowPrerelease: settingsStore.get('allow_prerelease', true) as boolean,
       explorebarSize: settingsStore.get('explorebar_size', null) as number,
       notificationsTimeout: settingsStore.get('notifications_timeout', 5) as number,
+      showTableSize: settingsStore.get('show_table_size', false) as boolean,
       dataTabLimit: settingsStore.get('data_tab_limit', 1000) as number,
       autoComplete: settingsStore.get('auto_complete', true) as boolean,
       lineWrap: settingsStore.get('line_wrap', true) as boolean,
@@ -50,6 +51,10 @@ export const useSettingsStore = defineStore('settings', {
          this.notificationsTimeout = timeout;
          settingsStore.set('notifications_timeout', this.notificationsTimeout);
       },
+      changeShowTableSize (show: boolean) {
+         this.showTableSize = show;
+         settingsStore.set('show_table_size', this.showTableSize);
+      },
       changeExplorebarSize (size: number) {
          this.explorebarSize = size;
          settingsStore.set('explorebar_size', this.explorebarSize);