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

Merge branch 'summary'

Browse Source
This commit is contained in:
Jan Prochazka
2022-12-09 15:49:22 +01:00
parent 9d6fe2460f 9fa6155cd9
commit a1032138da
10 changed files with 329 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
packages/web/src/appobj/ConnectionAppObject.svelte
View File

@@ -104,7 +104,7 @@
import ImportDatabaseDumpModal from '../modals/ImportDatabaseDumpModal.svelte';
import { closeMultipleTabs } from '../widgets/TabsPanel.svelte';
import AboutModal from '../modals/AboutModal.svelte';
import { tick } from 'svelte';
import { tick } from 'svelte';
export let data;
export let passProps;
@@ -195,6 +195,16 @@ import { tick } from 'svelte';
}),
});
};
const handleServerSummary = () => {
openNewTab({
title: getConnectionLabel(data),
icon: 'img server',
tabComponent: 'ServerSummaryTab',
props: {
conid: data._id,
},
});
};
const handleNewQuery = () => {
const tooltip = `${getConnectionLabel(data)}`;
openNewTab({
@@ -244,6 +254,11 @@ import { tick } from 'svelte';
text: 'Create database',
onClick: handleCreateDatabase,
},
$openedConnections.includes(data._id) &&
driver?.supportsServerSummary && {
text: 'Server summary',
onClick: handleServerSummary,
},
],
data.singleDatabase && [
{ divider: true },

46
packages/web/src/elements/ObjectListControl.svelte
View File

@@ -1,8 +1,7 @@
<script lang="ts">
import _ from 'lodash';
import FontIcon from '../icons/FontIcon.svelte';
import Link from './Link.svelte';
import TableControl from './TableControl.svelte';
export let title;
@@ -10,6 +9,7 @@
export let columns;
export let showIfEmpty = false;
export let emptyMessage = null;
export let hideDisplayName = false;
export let clickable;
export let onAddNew;
</script>
@@ -31,43 +31,43 @@
<div class="body">
<TableControl
rows={collection || []}
columns={[
{
columns={_.compact([
!hideDisplayName && {
fieldName: 'displayName',
header: 'Name',
slot: -1,
},
...columns,
]}
])}
{clickable}
on:clickrow
>
<svelte:fragment slot="-1" let:row>
<slot name="name" {row} />
<svelte:fragment slot="-1" let:row let:col>
<slot name="name" {row} {col} />
</svelte:fragment>
<svelte:fragment slot="0" let:row>
<slot name="0" {row} />
<svelte:fragment slot="0" let:row let:col>
<slot name="0" {row} {col} />
</svelte:fragment>
<svelte:fragment slot="1" let:row>
<slot name="1" {row} />
<svelte:fragment slot="1" let:row let:col>
<slot name="1" {row} {col} />
</svelte:fragment>
<svelte:fragment slot="2" let:row>
<slot name="2" {row} />
<svelte:fragment slot="2" let:row let:col>
<slot name="2" {row} {col} />
</svelte:fragment>
<svelte:fragment slot="3" let:row>
<slot name="3" {row} />
<svelte:fragment slot="3" let:row let:col>
<slot name="3" {row} {col} />
</svelte:fragment>
<svelte:fragment slot="4" let:row>
<slot name="4" {row} />
<svelte:fragment slot="4" let:row let:col>
<slot name="4" {row} {col} />
</svelte:fragment>
<svelte:fragment slot="5" let:row>
<slot name="5" {row} />
<svelte:fragment slot="5" let:row let:col>
<slot name="5" {row} {col} />
</svelte:fragment>
<svelte:fragment slot="6" let:row>
<slot name="6" {row} />
<svelte:fragment slot="6" let:row let:col>
<slot name="6" {row} {col} />
</svelte:fragment>
<svelte:fragment slot="7" let:row>
<slot name="7" {row} />
<svelte:fragment slot="7" let:row let:col>
<slot name="7" {row} {col} />
</svelte:fragment>
</TableControl>
</div>

22
packages/web/src/elements/TableControl.svelte
View File

@@ -86,17 +86,17 @@
{:else if col.formatter}
{col.formatter(row)}
{:else if col.slot != null}
{#if col.slot == -1}<slot name="-1" {row} {index} />
{:else if col.slot == 0}<slot name="0" {row} {index} {...rowProps} />
{:else if col.slot == 1}<slot name="1" {row} {index} {...rowProps} />
{:else if col.slot == 2}<slot name="2" {row} {index} {...rowProps} />
{:else if col.slot == 3}<slot name="3" {row} {index} {...rowProps} />
{:else if col.slot == 4}<slot name="4" {row} {index} {...rowProps} />
{:else if col.slot == 5}<slot name="5" {row} {index} {...rowProps} />
{:else if col.slot == 6}<slot name="6" {row} {index} {...rowProps} />
{:else if col.slot == 7}<slot name="7" {row} {index} {...rowProps} />
{:else if col.slot == 8}<slot name="8" {row} {index} {...rowProps} />
{:else if col.slot == 9}<slot name="9" {row} {index} {...rowProps} />
{#if col.slot == -1}<slot name="-1" {row} {col} {index} />
{:else if col.slot == 0}<slot name="0" {row} {col} {index} {...rowProps} />
{:else if col.slot == 1}<slot name="1" {row} {col} {index} {...rowProps} />
{:else if col.slot == 2}<slot name="2" {row} {col} {index} {...rowProps} />
{:else if col.slot == 3}<slot name="3" {row} {col} {index} {...rowProps} />
{:else if col.slot == 4}<slot name="4" {row} {col} {index} {...rowProps} />
{:else if col.slot == 5}<slot name="5" {row} {col} {index} {...rowProps} />
{:else if col.slot == 6}<slot name="6" {row} {col} {index} {...rowProps} />
{:else if col.slot == 7}<slot name="7" {row} {col} {index} {...rowProps} />
{:else if col.slot == 8}<slot name="8" {row} {col} {index} {...rowProps} />
{:else if col.slot == 9}<slot name="9" {row} {col} {index} {...rowProps} />
{/if}
{:else}
{row[col.fieldName] || ''}

103
packages/web/src/tabs/ServerSummaryTab.svelte Normal file
View File

@@ -0,0 +1,103 @@
<script lang="ts" context="module">
const getCurrentEditor = () => getActiveComponent('ServerSummaryTab');
registerCommand({
id: 'serverSummary.refresh',
category: 'Server sumnmary',
name: 'Refresh',
keyText: 'F5 | CtrlOrCommand+R',
toolbar: true,
isRelatedToTab: true,
icon: 'icon reload',
onClick: () => getCurrentEditor().refresh(),
});
</script>
<script>
import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
import registerCommand from '../commands/registerCommand';
import Link from '../elements/Link.svelte';
import LoadingInfo from '../elements/LoadingInfo.svelte';
import ObjectListControl from '../elements/ObjectListControl.svelte';
import { apiCall } from '../utility/api';
import createActivator, { getActiveComponent } from '../utility/createActivator';
import formatFileSize from '../utility/formatFileSize';
import openNewTab from '../utility/openNewTab';
export let conid;
let refreshToken = 0;
export const activator = createActivator('ServerSummaryTab', true);
export function refresh() {
refreshToken += 1;
}
async function runAction(action, row) {
const { command, openQuery } = action;
if (command) {
await apiCall('server-connections/summary-command', { conid, refreshToken, command, row });
refresh();
}
if (openQuery) {
openNewTab({
title: action.tabTitle || row.name,
icon: 'img query-data',
tabComponent: 'QueryDataTab',
props: {
conid,
database: row.name,
sql: openQuery,
},
});
}
}
</script>
<ToolStripContainer>
{#await apiCall('server-connections/server-summary', { conid, refreshToken })}
<LoadingInfo message="Loading server details" wrapper />
{:then summary}
<div class="wrapper">
<ObjectListControl
collection={summary.databases}
hideDisplayName
title={`Databases (${summary.databases.length})`}
emptyMessage={'No databases'}
columns={summary.columns.map(col => ({
...col,
slot: col.columnType == 'bytes' ? 1 : col.columnType == 'actions' ? 2 : null,
}))}
>
<svelte:fragment slot="1" let:row let:col>{formatFileSize(row?.[col.fieldName])}</svelte:fragment>
<svelte:fragment slot="2" let:row let:col>
{#each col.actions as action, index}
{#if index > 0}
<span> | </span>
{/if}
<Link onClick={() => runAction(action, row)}>{action.header}</Link>
{/each}
</svelte:fragment>
</ObjectListControl>
</div>
{/await}
<svelte:fragment slot="toolstrip">
<ToolStripCommandButton command="serverSummary.refresh" />
</svelte:fragment>
</ToolStripContainer>
<style>
.wrapper {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: var(--theme-bg-0);
overflow: auto;
}
</style>

2
packages/web/src/tabs/index.js
View File

@@ -26,6 +26,7 @@ import * as QueryDataTab from './QueryDataTab.svelte';
import * as ConnectionTab from './ConnectionTab.svelte';
import * as MapTab from './MapTab.svelte';
import * as PerspectiveTab from './PerspectiveTab.svelte';
import * as ServerSummaryTab from './ServerSummaryTab.svelte';
export default {
TableDataTab,
@@ -56,4 +57,5 @@ export default {
ConnectionTab,
MapTab,
PerspectiveTab,
ServerSummaryTab,
};