feat: schema size in explore bar

src/main/libs/clients/MySQLClient.js

@@ -187,6 +187,7 @@ export class MySQLClient extends AntaresCore {
 
       const tablesArr = [];
       const triggersArr = [];
+      let schemaSize = 0;
 
       for (const db of filteredDatabases) {
          if (!schemas.has(db.Database)) continue;
@@ -224,6 +225,9 @@ export class MySQLClient extends AntaresCore {
                      break;
                }
 
+               const tableSize = table.Data_length + table.Index_length;
+               schemaSize += tableSize;
+
                return {
                   name: table.Name,
                   type: tableType,
@@ -232,7 +236,7 @@ export class MySQLClient extends AntaresCore {
                   updated: table.Update_time,
                   engine: table.Engine,
                   comment: table.Comment,
-                  size: table.Data_length + table.Index_length,
+                  size: tableSize,
                   autoIncrement: table.Auto_increment,
                   collation: table.Collation
                };
@@ -309,6 +313,7 @@ export class MySQLClient extends AntaresCore {
 
             return {
                name: db.Database,
+               size: schemaSize,
                tables: remappedTables,
                functions: remappedFunctions,
                procedures: remappedProcedures,
@@ -319,6 +324,7 @@ export class MySQLClient extends AntaresCore {
          else {
             return {
                name: db.Database,
+               size: 0,
                tables: [],
                functions: [],
                procedures: [],

src/main/libs/clients/PostgreSQLClient.js

@@ -144,6 +144,7 @@ export class PostgreSQLClient extends AntaresCore {
 
       const tablesArr = [];
       const triggersArr = [];
+      let schemaSize = 0;
 
       for (const db of databases) {
          if (!schemas.has(db.database)) continue;
@@ -198,11 +199,14 @@ export class PostgreSQLClient extends AntaresCore {
          if (schemas.has(db.database)) {
             // TABLES
             const remappedTables = tablesArr.filter(table => table.Db === db.database).map(table => {
+               const tableSize = +table.data_length + table.index_length;
+               schemaSize += tableSize;
+
                return {
                   name: table.table_name,
                   type: table.table_type === 'VIEW' ? 'view' : 'table',
                   rows: table.reltuples,
-                  size: +table.data_length + +table.index_length,
+                  size: tableSize,
                   collation: table.Collation,
                   comment: table.comment,
                   engine: ''
@@ -250,6 +254,7 @@ export class PostgreSQLClient extends AntaresCore {
 
             return {
                name: db.database,
+               size: schemaSize,
                tables: remappedTables,
                functions: remappedFunctions,
                procedures: remappedProcedures,
@@ -261,6 +266,7 @@ export class PostgreSQLClient extends AntaresCore {
          else {
             return {
                name: db.database,
+               size: 0,
                tables: [],
                functions: [],
                procedures: [],

src/renderer/components/WorkspaceExploreBarSchema.vue

@@ -9,7 +9,16 @@
          <div v-if="isLoading" class="icon loading" />
          <i v-else class="icon mdi mdi-18px mdi-chevron-right" />
          <i class="database-icon mdi mdi-18px mdi-database mr-1" />
-         <span>{{ database.name }}</span>
+         <div class="">
+            <span>{{ database.name }}</span>
+            <div
+               v-if="database.size"
+               class="schema-size tooltip tooltip-left mr-1"
+               :data-tooltip="formatBytes(database.size)"
+            >
+               <i class="mdi mdi-information-outline pr-2" />
+            </div>
+         </div>
       </summary>
       <div class="accordion-body">
          <div class="database-tables">
@@ -442,6 +451,11 @@ export default {
     position: sticky;
     top: 0;
     z-index: 2;
+
+    .schema-size{
+       visibility: hidden;
+       width: 22.5px;
+    }
   }
 
   .database-name,
@@ -487,6 +501,10 @@ export default {
   .misc-name {
     &:hover {
       border-radius: $border-radius;
+
+      .schema-size{
+         visibility: visible;
+      }
     }
   }
 
@@ -516,6 +534,7 @@ export default {
     }
   }
 
+  .schema-size,
   .table-size,
   .disabled-indicator {
     position: absolute;