feat: send cols from list databases

packages/types/engines.d.ts

@@ -127,11 +127,21 @@ export interface SummaryColumn {
   header: string;
   dataType: 'string' | 'number' | 'bytes';
 }
-export interface ServerSummaryDatabase {}
+export interface ServerSummaryDatabases {
+  rows: any[];
+  columns: DatabaseColumn[];
+}
+
+export type DatabaseColumn = {
+  header: string;
+  fieldName: string;
+  type: 'data' | 'fileSize';
+};
+
 export interface ServerSummary {
   processes: DatabaseProcess[];
   variables: DatabaseVariable[];
-  databases: ServerSummaryDatabase[];
+  databases: ServerSummaryDatabases;
 }
 
 export type CollectionAggregateFunction = 'count' | 'sum' | 'avg' | 'min' | 'max';
@@ -292,6 +302,8 @@ export interface EngineDriver<TClient = any, TDataBase = any> extends FilterBeha
   listDatabases(dbhan: DatabaseHandle<TClient, TDataBase>): Promise<
     {
       name: string;
+      sizeOnDisk?: number;
+      empty?: boolean;
     }[]
   >;
   loadKeys(dbhan: DatabaseHandle<TClient, TDataBase>, root: string, filter?: string): Promise;

packages/web/src/tabs/ServerSummaryTab.svelte

@@ -101,7 +101,7 @@
           {
             label: 'Databases',
             component: SummaryDatabases,
-            props: { databases: summary.databases || [] },
+            props: { rows: summary.databases?.rows ?? [], columns: summary.databases?.columns ?? [] },
           },
         ]}
       />

packages/web/src/widgets/SummaryDatabases.svelte

@@ -1,77 +1,21 @@
 <script lang="ts">
   import TableControl from '../elements/TableControl.svelte';
-  import CtaButton from '../buttons/CtaButton.svelte';
-  import { _t } from '../translations';
-  import formatFileSize from '../utility/formatFileSize';
 
-  export let databases: any[] = [];
+  export let rows: any[] = [];
+  export let columns: any[] = [];
 
-  async function profileOff(database: any) {
-    // TODO: Implement profile off functionality
-    console.log('Profile off:', database.name);
-  }
-
-  async function profileFiltered(database: any) {
-    // TODO: Implement profile filtered functionality
-    console.log('Profile filtered:', database.name);
-  }
-
-  async function profileAll(database: any) {
-    // TODO: Implement profile all functionality
-    console.log('Profile all:', database.name);
-  }
+  const tableColumns = columns.map(col => ({
+    header: col.header,
+    fieldName: col.fieldName,
+  }));
 </script>
 
 <div>
-  <TableControl
-    rows={databases}
-    columns={[
-      { header: 'Name', fieldName: 'name', slot: 1 },
-      { header: 'Size', fieldName: 'sizeOnDisk', slot: 2 },
-      { header: 'Collections', fieldName: 'collections' },
-      { header: 'Indexes', fieldName: 'indexes' },
-      { header: 'Data Size', fieldName: 'dataSize', slot: 3 },
-      { header: 'Index Size', fieldName: 'indexSize', slot: 4 },
-      {
-        header: 'Actions',
-        fieldName: 'name',
-        slot: 0,
-      },
-    ]}
-  >
-    <svelte:fragment slot="0" let:row>
-      <CtaButton on:click={() => profileOff(row)}>Profile Off</CtaButton>
-      <span class="action-separator">|</span>
-      <CtaButton on:click={() => profileFiltered(row)}>Profile Filtered</CtaButton>
-      <span class="action-separator">|</span>
-      <CtaButton on:click={() => profileAll(row)}>Profile All</CtaButton>
-    </svelte:fragment>
-
-    <svelte:fragment slot="1" let:row>
-      <strong>{row.name}</strong>
-    </svelte:fragment>
-
-    <svelte:fragment slot="2" let:row>
-      <span>{formatFileSize(row.sizeOnDisk)}</span>
-    </svelte:fragment>
-
-    <svelte:fragment slot="3" let:row>
-      <span>{formatFileSize(row.dataSize)}</span>
-    </svelte:fragment>
-
-    <svelte:fragment slot="4" let:row>
-      <span>{formatFileSize(row.indexSize)}</span>
-    </svelte:fragment>
-  </TableControl>
+  <TableControl {rows} columns={tableColumns} />
 </div>
 
 <style>
   div {
     padding: 10px;
   }
-
-  .action-separator {
-    margin: 0 5px;
-    color: var(--theme-font-3);
-  }
 </style>

plugins/dbgate-plugin-mongo/src/backend/driver.js

@@ -643,7 +643,14 @@ const driver = {
     const data = {
       processes,
       variables,
-      databases,
+      databases: {
+        rows: databases,
+        columns: [
+          { header: 'Name', fieldName: 'name' },
+          { header: 'Size on disk', fieldName: 'sizeOnDisk' },
+          { header: 'Empty', fieldName: 'empty' },
+        ],
+      },
     };
 
     return data;