feat: make summary table sortable, filtrable, with sticky header

packages/types/engines.d.ts

@@ -131,6 +131,8 @@ export type SummaryDatabaseColumn = {
   header: string;
   fieldName: string;
   type: 'data' | 'fileSize';
+  filterable?: boolean;
+  sortable?: boolean;
 };
 
 export interface ServerSummary {

packages/web/src/widgets/SummaryDatabases.svelte

@@ -1,11 +1,16 @@
 <script lang="ts">
+  import { writable } from 'svelte/store';
   import TableControl from '../elements/TableControl.svelte';
   import formatFileSize from '../utility/formatFileSize';
 
   export let rows: any[] = [];
   export let columns: any[] = [];
 
+  const filters = writable({});
+
   const tableColumns = columns.map(col => ({
+    filterable: col.filterable,
+    sortable: col.sortable,
     header: col.header,
     fieldName: col.fieldName,
     type: col.type || 'data',
@@ -19,7 +24,7 @@
 </script>
 
 <div>
-  <TableControl {rows} columns={tableColumns} />
+  <TableControl {filters} stickyHeader {rows} columns={tableColumns} />
 </div>
 
 <style>

packages/web/src/widgets/SummaryProcesses.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { writable } from 'svelte/store';
   import { DatabaseProcess } from 'dbgate-types';
   import TableControl from '../elements/TableControl.svelte';
   import { _t } from '../translations';
@@ -15,6 +16,8 @@
   export let refreshInterval: number = 1000;
   export let tabVisible: boolean = false;
 
+  const filters = writable({});
+
   let internalProcesses = [...processes];
 
   async function refreshProcesses() {
@@ -79,20 +82,54 @@
 
 <div>
   <TableControl
+    {filters}
+    stickyHeader
     rows={internalProcesses}
     columns={[
-      { header: _t('summaryProcesses.processId', { defaultMessage: 'Process ID' }), fieldName: 'processId', slot: 1 },
-      { header: _t('summaryProcesses.connectionId', { defaultMessage: 'Connection ID' }), fieldName: 'connectionId' },
-      { header: _t('summaryProcesses.client', { defaultMessage: 'Client' }), fieldName: 'client' },
-      { header: _t('summaryProcesses.operation', { defaultMessage: 'Operation' }), fieldName: 'operation' },
-      { header: _t('summaryProcesses.namespace', { defaultMessage: 'Namespace' }), fieldName: 'namespace' },
       {
+        sortable: true,
+        filterable: true,
+        header: _t('summaryProcesses.processId', { defaultMessage: 'Process ID' }),
+        fieldName: 'processId',
+        slot: 1,
+      },
+      {
+        sortable: true,
+        filterable: true,
+        header: _t('summaryProcesses.connectionId', { defaultMessage: 'Connection ID' }),
+        fieldName: 'connectionId',
+      },
+      {
+        sortable: true,
+        filterable: true,
+        header: _t('summaryProcesses.client', { defaultMessage: 'Client' }),
+        fieldName: 'client',
+      },
+      {
+        filterable: true,
+        header: _t('summaryProcesses.operation', { defaultMessage: 'Operation' }),
+        fieldName: 'operation',
+      },
+      {
+        sortable: true,
+        filterable: true,
+        header: _t('summaryProcesses.namespace', { defaultMessage: 'Namespace' }),
+        fieldName: 'namespace',
+      },
+      {
+        sortable: true,
         header: _t('summaryProcesses.runningTime', { defaultMessage: 'Running Time' }),
         fieldName: 'runningTime',
         slot: 2,
       },
-      { header: _t('summaryProcesses.state', { defaultMessage: 'State' }), fieldName: 'state' },
       {
+        sortable: true,
+        filterable: true,
+        header: _t('summaryProcesses.state', { defaultMessage: 'State' }),
+        fieldName: 'state',
+      },
+      {
+        sortable: true,
         header: _t('summaryProcesses.waitingFor', { defaultMessage: 'Waiting For' }),
         fieldName: 'waitingFor',
         slot: 3,

packages/web/src/widgets/SummaryVariables.svelte

@@ -1,16 +1,28 @@
 <script lang="ts">
+  import { writable } from 'svelte/store';
   import TableControl from '../elements/TableControl.svelte';
   import JSONTree from '../jsontree/JSONTree.svelte';
   import { _t } from '../translations';
   export let variables: { variable: string; value: any }[] = [];
+
+  const filters = writable({});
 </script>
 
 <div>
   <TableControl
+    stickyHeader
     rows={variables}
+    {filters}
     columns={[
-      { header: _t('summaryVariables.variable', { defaultMessage: 'Variable' }), fieldName: 'variable' },
       {
+        sortable: true,
+        filterable: true,
+        header: _t('summaryVariables.variable', { defaultMessage: 'Variable' }),
+        fieldName: 'variable',
+      },
+      {
+        sortable: true,
+        filterable: true,
         header: _t('summaryVariables.value', { defaultMessage: 'Value' }),
         fieldName: 'value',
         slot: 0,

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

@@ -647,9 +647,26 @@ const driver = {
       databases: {
         rows: databases,
         columns: [
-          { header: 'Name', fieldName: 'name', type: 'data' },
-          { header: 'Size on disk', fieldName: 'sizeOnDisk', type: 'fileSize' },
-          { header: 'Empty', fieldName: 'empty', type: 'data' },
+          {
+            filterable: true,
+            sortable: true,
+            header: 'Name',
+            fieldName: 'name',
+            type: 'data',
+          },
+          {
+            sortable: true,
+            header: 'Size on disk',
+            fieldName: 'sizeOnDisk',
+            type: 'fileSize',
+          },
+          {
+            filterable: true,
+            sortable: true,
+            header: 'Empty',
+            fieldName: 'empty',
+            type: 'data',
+          },
         ],
       },
     };

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

@@ -180,13 +180,53 @@ const driver = {
       databases: {
         rows: databases,
         columns: [
-          { header: 'Database', fieldName: 'name', type: 'data' },
-          { header: 'Status', fieldName: 'status', type: 'data' },
-          { header: 'Recovery Model', fieldName: 'recoveryModel', type: 'data' },
-          { header: 'Compatibility Level', fieldName: 'compatibilityLevel', type: 'data' },
-          { header: 'Read Only', fieldName: 'isReadOnly', type: 'data' },
-          { header: 'Data Size', fieldName: 'sizeOnDisk', type: 'fileSize' },
-          { header: 'Log Size', fieldName: 'logSizeOnDisk', type: 'fileSize' },
+          {
+            filterable: true,
+            sortable: true,
+            header: 'Database',
+            fieldName: 'name',
+            type: 'data',
+          },
+          {
+            filterable: true,
+            sortable: true,
+            header: 'Status',
+            fieldName: 'status',
+            type: 'data',
+          },
+          {
+            filterable: true,
+            sortable: true,
+            header: 'Recovery Model',
+            fieldName: 'recoveryModel',
+            type: 'data',
+          },
+          {
+            filterable: true,
+            sortable: true,
+            header: 'Compatibility Level',
+            fieldName: 'compatibilityLevel',
+            type: 'data',
+          },
+          {
+            filterable: true,
+            sortable: true,
+            header: 'Read Only',
+            fieldName: 'isReadOnly',
+            type: 'data',
+          },
+          {
+            sortable: true,
+            header: 'Data Size',
+            fieldName: 'sizeOnDisk',
+            type: 'fileSize',
+          },
+          {
+            sortable: true,
+            header: 'Log Size',
+            fieldName: 'logSizeOnDisk',
+            type: 'fileSize',
+          },
         ],
       },
     };

plugins/dbgate-plugin-mysql/src/backend/drivers.js

@@ -250,7 +250,15 @@ const drivers = driverBases.map(driverBase => ({
         rows: databases.map(db => ({
           name: db.name,
         })),
-        columns: [{ header: 'Database', fieldName: 'name', type: 'data' }],
+        columns: [
+          {
+            filterable: true,
+            sortable: true,
+            header: 'Database',
+            fieldName: 'name',
+            type: 'data',
+          },
+        ],
       },
     };
   },