dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-20 13:36:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Pavel
2025-08-19 17:08:38 +02:00
parent 78215552bf
commit 114ce1ea3a
7 changed files with 140 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/web/src/widgets/SummaryDatabases.svelte
View File

@@ -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>

49
packages/web/src/widgets/SummaryProcesses.svelte
View File

@@ -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,

14
packages/web/src/widgets/SummaryVariables.svelte
View File

@@ -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,