2542 lines
138 KiB
Vue
2542 lines
138 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref, defineAsyncComponent, watch, nextTick, onMounted, onUnmounted } from "vue";
|
|
import { safeLocalStorageGet, safeLocalStorageSet } from "@/lib/backend/safeStorage";
|
|
import { appendDebugLog, isDebugLoggingEnabled } from "@/lib/backend/debugLog";
|
|
import { canReloadUnavailableDataTab } from "@/lib/table/tableDataRefresh";
|
|
import { defaultViewForResult } from "@/lib/query/queryResultDefaultView";
|
|
import { isQueryExecutionErrorResult } from "@/lib/query/queryResultError";
|
|
import { batchSqlRecoveryState, type BatchSqlRecoveryAction } from "@/lib/query/batchSqlRecovery";
|
|
import type { CSSProperties } from "vue";
|
|
import { useI18n } from "vue-i18n";
|
|
import {
|
|
Check,
|
|
CheckSquare2,
|
|
Columns3Cog,
|
|
Copy,
|
|
EyeOff,
|
|
Loader2,
|
|
Search,
|
|
TableProperties,
|
|
ChevronDown,
|
|
ChevronUp,
|
|
Inbox,
|
|
RefreshCcw,
|
|
Wrench,
|
|
Toolbox,
|
|
Database,
|
|
Download,
|
|
Upload,
|
|
X,
|
|
Pin,
|
|
Rows3,
|
|
SquareDashed,
|
|
Minus,
|
|
Plus,
|
|
ShieldAlert,
|
|
AlignLeft,
|
|
AlignRight,
|
|
PanelsTopLeft,
|
|
Palette,
|
|
CircleAlert,
|
|
CircleStop,
|
|
RotateCcw,
|
|
SkipForward,
|
|
ListX,
|
|
} from "@lucide/vue";
|
|
import { Splitpanes, Pane } from "splitpanes";
|
|
import { DynamicScroller, DynamicScrollerItem } from "vue-virtual-scroller";
|
|
import "splitpanes/dist/splitpanes.css";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuPortal } from "@/components/ui/dropdown-menu";
|
|
import CustomContextMenu, { type ContextMenuItem } from "@/components/ui/CustomContextMenu.vue";
|
|
import { Switch } from "@/components/ui/switch";
|
|
import LightTooltip from "@/components/ui/LightTooltip.vue";
|
|
import QueryEditor from "@/components/editor/QueryEditor.vue";
|
|
import ColumnInfoPanel from "@/components/editor/ColumnInfoPanel.vue";
|
|
import QueryLoadingState from "@/components/common/QueryLoadingState.vue";
|
|
import QueryErrorActions from "@/components/common/QueryErrorActions.vue";
|
|
import QueryMessagesView from "@/components/layout/QueryMessagesView.vue";
|
|
import QueryResultToolbarActions from "@/components/layout/QueryResultToolbarActions.vue";
|
|
import QueryResultViewSwitcher from "@/components/layout/QueryResultViewSwitcher.vue";
|
|
import DataGridCopyFormatControl from "@/components/grid/DataGridCopyFormatControl.vue";
|
|
import DataGridFontFamilyControl from "@/components/grid/DataGridFontFamilyControl.vue";
|
|
import DataGridColumnLayoutPopover from "@/components/grid/DataGridColumnLayoutPopover.vue";
|
|
import type { DataGridColumnLayoutHandle } from "@/components/grid/dataGridColumnLayoutPopover";
|
|
import type { ColumnInfo } from "@/components/editor/ColumnInfoPanel.vue";
|
|
let dataGridComponentPromise: Promise<typeof import("@/components/grid/DataGrid.vue")> | undefined;
|
|
function loadDataGridComponent() {
|
|
if (!dataGridComponentPromise) {
|
|
dataGridComponentPromise = (async () => {
|
|
const shouldLogTiming = isDebugLoggingEnabled();
|
|
const startedAt = shouldLogTiming ? performance.now() : 0;
|
|
if (shouldLogTiming) appendDebugLog("info", "[DBX][DataGrid:load:start]");
|
|
const component = await import("@/components/grid/DataGrid.vue");
|
|
if (shouldLogTiming) appendDebugLog("info", "[DBX][DataGrid:load:done]", { elapsed: `${Math.round(performance.now() - startedAt)}ms` });
|
|
return component;
|
|
})();
|
|
}
|
|
return dataGridComponentPromise;
|
|
}
|
|
|
|
function preloadDataGridComponent() {
|
|
void loadDataGridComponent();
|
|
}
|
|
|
|
const DataGrid = defineAsyncComponent(loadDataGridComponent);
|
|
const RedisKeyBrowser = defineAsyncComponent(() => import("@/components/redis/RedisKeyBrowser.vue"));
|
|
const RedisDashboard = defineAsyncComponent(() => import("@/components/redis/RedisDashboard.vue"));
|
|
const EtcdKeyBrowser = defineAsyncComponent(() => import("@/components/etcd/EtcdKeyBrowser.vue"));
|
|
const EtcdDashboard = defineAsyncComponent(() => import("@/components/etcd/EtcdDashboard.vue"));
|
|
const EtcdAccessControl = defineAsyncComponent(() => import("@/components/etcd/EtcdAccessControl.vue"));
|
|
const ZooKeeperKeyBrowser = defineAsyncComponent(() => import("@/components/zookeeper/ZooKeeperKeyBrowser.vue"));
|
|
const ConsulOverview = defineAsyncComponent(() => import("@/components/consul/ConsulOverview.vue"));
|
|
const ConsulWorkspace = defineAsyncComponent(() => import("@/components/consul/ConsulWorkspace.vue"));
|
|
const DocumentBrowser = defineAsyncComponent(() => import("@/components/document/DocumentBrowser.vue"));
|
|
const MeilisearchIndexView = defineAsyncComponent(() => import("@/components/meilisearch/MeilisearchIndexView.vue"));
|
|
const MeilisearchSystemWorkspace = defineAsyncComponent(() => import("@/components/meilisearch/MeilisearchSystemWorkspace.vue"));
|
|
const MongoGridFsBrowser = defineAsyncComponent(() => import("@/components/document/MongoGridFsBrowser.vue"));
|
|
const MongoBucketBrowser = defineAsyncComponent(() => import("@/components/document/MongoBucketBrowser.vue"));
|
|
const VectorBrowser = defineAsyncComponent(() => import("@/components/vector/VectorBrowser.vue"));
|
|
const HBaseBrowser = defineAsyncComponent(() => import("@/components/hbase/HBaseBrowser.vue"));
|
|
const ElasticsearchJsonResponsePanel = defineAsyncComponent(() => import("@/components/common/ElasticsearchJsonResponsePanel.vue"));
|
|
const MqAdminConsole = defineAsyncComponent(() => import("@/components/mq/MqAdminConsole.vue"));
|
|
const MqttAdminConsole = defineAsyncComponent(() => import("@/components/mqtt/MqttAdminConsole.vue"));
|
|
const NacosAdminConsole = defineAsyncComponent(() => import("@/components/nacos/NacosAdminConsole.vue"));
|
|
const NacosAccessControlConsole = defineAsyncComponent(() => import("@/components/nacos/NacosAccessControlConsole.vue"));
|
|
const NacosDashboard = defineAsyncComponent(() => import("@/components/nacos/NacosDashboard.vue"));
|
|
const DoltVersionControl = defineAsyncComponent(() => import("@/components/dolt/DoltVersionControl.vue"));
|
|
const DatabaseBrowser = defineAsyncComponent(() => import("@/components/objects/DatabaseBrowser.vue"));
|
|
const ObjectBrowser = defineAsyncComponent(() => import("@/components/objects/ObjectBrowser.vue"));
|
|
const TableStructureEditor = defineAsyncComponent(() => import("@/components/structure/TableStructureEditor.vue"));
|
|
const DatabaseUserAdmin = defineAsyncComponent(() => import("@/components/admin/DatabaseUserAdmin.vue"));
|
|
const ProcessListPanel = defineAsyncComponent(() => import("@/components/admin/ProcessListPanel.vue"));
|
|
const SqlServerActivityTracePanel = defineAsyncComponent(() => import("@/components/admin/SqlServerActivityTracePanel.vue"));
|
|
const MySqlDashboard = defineAsyncComponent(() => import("@/components/admin/MySqlDashboard.vue"));
|
|
const PostgresDashboard = defineAsyncComponent(() => import("@/components/admin/PostgresDashboard.vue"));
|
|
const DamengJobAdmin = defineAsyncComponent(() => import("@/components/admin/DamengJobAdmin.vue"));
|
|
const DamengUserAdmin = defineAsyncComponent(() => import("@/components/admin/DamengUserAdmin.vue"));
|
|
const DamengRoleAdmin = defineAsyncComponent(() => import("@/components/admin/DamengRoleAdmin.vue"));
|
|
const ExplainPlanViewer = defineAsyncComponent(() => import("@/components/explain/ExplainPlanViewer.vue"));
|
|
const QueryChart = defineAsyncComponent(() => import("@/components/chart/QueryChart.vue"));
|
|
import { useQueryStore } from "@/stores/queryStore";
|
|
import { useConnectionStore } from "@/stores/connectionStore";
|
|
import { TABLE_FONT_SIZE_MAX, TABLE_FONT_SIZE_MIN, useSettingsStore, type DataGridSearchMode, type ResultRunDisplayMode } from "@/stores/settingsStore";
|
|
import { useToast } from "@/composables/useToast";
|
|
import { isTauriRuntime } from "@/lib/backend/tauriRuntime";
|
|
import { canCancelQueryExecution, queryExecutionLabelKey } from "@/lib/sql/queryExecutionState";
|
|
import {
|
|
databaseDisplayNameForTab,
|
|
executionSummaryItems,
|
|
queryResultExecutionSql,
|
|
resultGridCacheKey,
|
|
resultGridColumnWidthCacheKey,
|
|
resultGridInstanceKey,
|
|
resultRunItems,
|
|
resultSourceRange,
|
|
resultSqlForGrid,
|
|
statementExecutionMarkers,
|
|
tabularResultItems,
|
|
type ExecutionSummaryItem,
|
|
} from "@/lib/tabs/tabPresentation";
|
|
import { defaultQueryResultArchiveFileName } from "@/lib/query/queryResultArchive";
|
|
import { saveQueryResultArchiveFile } from "@/lib/query/queryResultArchiveFile";
|
|
import { isTableDataEditable } from "@/lib/table/tableEditing";
|
|
import { tableMetaForDataTab } from "@/lib/table/tableDataTabMeta";
|
|
import { dataTabExecutionDatabase } from "@/lib/table/dataTabExecutionDatabase";
|
|
import { formatShortcut } from "@/lib/editor/shortcutRegistry";
|
|
import type { CodeMirrorSqlDialectName } from "@/lib/editor/codemirrorSqlDialect";
|
|
import { codeMirrorSqlDialect, codeMirrorSqlDialectForConnection, effectiveDatabaseTypeForConnection } from "@/lib/database/jdbcDialect";
|
|
import { chartableColumnIndexes } from "@/lib/dataGrid/chartData";
|
|
import { elasticsearchJsonResponseForResult } from "@/lib/elasticsearch/elasticsearchJsonResponse";
|
|
import * as api from "@/lib/backend/api";
|
|
import { applyMongoGridChangesToDocument, applyMongoGridChangesToDocumentBaseline, buildMongoUpdateDocument, formatMongoShellLiteral, serializeMongoDocumentId, type MongoInputValue } from "@/lib/mongo/mongoDocumentValues";
|
|
import type { SqlExecutionOverride } from "@/lib/sql/sqlExecutionTarget";
|
|
import type { DataGridSortMode } from "@/lib/dataGrid/dataGridSort";
|
|
import { isDataGridToolbarCompact, type DataGridReloadIntent } from "@/lib/dataGrid/dataGridToolbar";
|
|
import { useTabScroll } from "@/composables/useTabScroll";
|
|
import { formatElapsedSeconds } from "@/lib/common/elapsedTime";
|
|
import { copyToClipboard } from "@/lib/common/clipboard";
|
|
import type { CustomSaveHandler } from "@/composables/useDataGridEditor";
|
|
import type { QueryTab, ConnectionConfig, TableInfoTab, TreeNode, VectorCollectionMeta, ObjectBrowserViewport } from "@/types/database";
|
|
import type { SqlObjectNavigationTarget } from "@/lib/sql/sqlNavigation";
|
|
import { sqlFormatDialectForDbType, type SqlFormatDialect } from "@/lib/sql/sqlFormatter";
|
|
import { productionContextForDatabase } from "@/lib/database/productionSafety";
|
|
import { connectionIsEffectivelyReadOnly } from "@/lib/database/readOnlyWriteAccess";
|
|
|
|
type DataGridHandle = DataGridColumnLayoutHandle & {
|
|
onToolbarRefresh: () => Promise<void> | void;
|
|
focusSearch: () => boolean;
|
|
openGoToColumn: () => boolean;
|
|
openCellDetailSearch: () => boolean;
|
|
nullColumnsHidden: boolean;
|
|
allNullColumnCount: number;
|
|
canToggleAllNullColumns: boolean;
|
|
toggleAllNullColumns: () => void;
|
|
defaultCopyPreference: string;
|
|
defaultCopyPreferenceLabel: string;
|
|
copyPreferenceMenuItems: Array<{ value: string; label: string; disabled?: boolean; separatorBefore?: boolean }>;
|
|
setDefaultCopyPreference: (value: string) => void;
|
|
openExtractorConfiguration: () => void;
|
|
showDdl: boolean;
|
|
toggleDdl: (tab?: TableInfoTab) => void;
|
|
multiRowTranspose: boolean;
|
|
setMultiRowTranspose: (value: boolean) => void;
|
|
exportCsv: () => Promise<void>;
|
|
exportJson: () => Promise<void>;
|
|
exportSql: () => Promise<void>;
|
|
exportXlsx: () => Promise<void>;
|
|
};
|
|
|
|
type SearchableBrowserHandle = {
|
|
focusSearch: () => boolean;
|
|
refresh?: () => boolean;
|
|
insertCommand?: (command: string) => Promise<boolean>;
|
|
executeCommand?: (command: string) => Promise<boolean>;
|
|
};
|
|
|
|
type ElasticsearchJsonResponsePanelHandle = {
|
|
focusSearch: () => boolean;
|
|
};
|
|
|
|
const props = defineProps<{
|
|
activeTab: QueryTab;
|
|
activeConnection?: ConnectionConfig;
|
|
executableSql: string;
|
|
activeOutputView: "result" | "summary" | "explain" | "chart" | "messages";
|
|
formatSqlRequest: { id: number; tabId: string } | null;
|
|
compressSqlRequest: { id: number; tabId: string } | null;
|
|
selectedSql: string;
|
|
cursorPos: number;
|
|
blockDangerousRedisCommands: boolean;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
"update:activeOutputView": [value: "result" | "summary" | "explain" | "chart" | "messages"];
|
|
fixWithAi: [errorMessage: string];
|
|
sendSelectionToAi: [sql: string];
|
|
execute: [sqlOverride?: SqlExecutionOverride];
|
|
executeInNewResultTab: [sqlOverride?: SqlExecutionOverride];
|
|
saveSql: [];
|
|
cancel: [];
|
|
explain: [];
|
|
editorUpdate: [tabId: string, value: string];
|
|
editorSelectionChange: [value: string];
|
|
editorCursorChange: [pos: number];
|
|
previewChangesAvailable: [value: boolean];
|
|
editorViewportChange: [tabId: string, viewport: { scrollTop: number; scrollLeft: number }];
|
|
editorSelectionStateChange: [tabId: string, selection: { anchor: number; head: number }];
|
|
formatError: [];
|
|
reload: [sql?: string, searchText?: string, whereInput?: string, orderBy?: string, limit?: number, offset?: number, intent?: DataGridReloadIntent];
|
|
paginate: [offset: number, limit: number, whereInput?: string, orderBy?: string];
|
|
sort: [column: string, columnIndex: number, direction: "asc" | "desc" | null, whereInput?: string, mode?: DataGridSortMode];
|
|
executeSql: [sql: string];
|
|
clickTable: [target: SqlObjectNavigationTarget];
|
|
viewTableData: [target: SqlObjectNavigationTarget];
|
|
viewTableDdl: [target: SqlObjectNavigationTarget];
|
|
editTableStructure: [target: SqlObjectNavigationTarget];
|
|
openObjectSource: [target: SqlObjectNavigationTarget, initialEditing: boolean];
|
|
openObjectTable: [target: { tableName: string; schema?: string; tableType?: string; catalog?: string }];
|
|
objectSchemaChange: [schema: string | undefined];
|
|
objectBrowserViewportChange: [tabId: string, viewport: ObjectBrowserViewport];
|
|
structureEditorSaved: [commentChanged: boolean];
|
|
structureEditorClose: [];
|
|
openSettings: [initialTab?: string, initialSection?: string];
|
|
openConnectionSettings: [connectionId: string, initialTab: "advanced"];
|
|
}>();
|
|
|
|
const { t, locale } = useI18n();
|
|
const queryStore = useQueryStore();
|
|
const connectionStore = useConnectionStore();
|
|
|
|
function groupedQueryReadonlyColumnIndexes(tab: QueryTab): number[] | undefined {
|
|
if (!tab.queryAnalysis?.groupByColumns?.length || !tab.querySourceColumns || !tab.tableMeta?.primaryKeys.length) return undefined;
|
|
const primaryKeys = new Set(tab.tableMeta.primaryKeys);
|
|
return tab.querySourceColumns.flatMap((column, index) => (column && primaryKeys.has(column) ? [index] : []));
|
|
}
|
|
const settingsStore = useSettingsStore();
|
|
const booleanDisplayMode = computed(() => settingsStore.editorSettings.dataGridBooleanDisplayMode);
|
|
const setBooleanDisplayMode = (mode: "checkbox" | "dropdown") => settingsStore.updateEditorSettings({ dataGridBooleanDisplayMode: mode });
|
|
const colorizeDataGridCellTypes = computed(() => settingsStore.editorSettings.colorizeDataGridCellTypes);
|
|
const setColorizeDataGridCellTypes = (value: boolean) => settingsStore.updateEditorSettings({ colorizeDataGridCellTypes: value });
|
|
const { toast } = useToast();
|
|
const DEFAULT_QUERY_RESULTS_PANE_SIZE = 68;
|
|
|
|
onMounted(() => {
|
|
const preload = () => preloadDataGridComponent();
|
|
if ("requestIdleCallback" in window) {
|
|
window.requestIdleCallback(preload, { timeout: 1500 });
|
|
} else {
|
|
setTimeout(preload, 300);
|
|
}
|
|
window.addEventListener("dbx-refresh-active-kv-browser", onRefreshActiveKvBrowser);
|
|
window.addEventListener("resize", updateStandaloneResultToolbarDimensions);
|
|
window.visualViewport?.addEventListener("resize", updateStandaloneResultToolbarDimensions);
|
|
window.addEventListener("dbx:ui-scale-applied", updateStandaloneResultToolbarDimensions);
|
|
revealActiveResultRunAfterRender();
|
|
});
|
|
|
|
watch(
|
|
() => [props.activeTab.mode, !!props.activeTab.result] as const,
|
|
([mode, hasResult]) => {
|
|
if (mode === "data" || hasResult) preloadDataGridComponent();
|
|
},
|
|
{ immediate: true },
|
|
);
|
|
|
|
// Column info panel state
|
|
const showColumnInfo = ref(false);
|
|
const columnInfoColumns = ref<ColumnInfo[]>([]);
|
|
const columnInfoLoading = ref(false);
|
|
const columnInfoError = ref<string | undefined>(undefined);
|
|
const dataGridRef = ref<DataGridHandle>();
|
|
const queryEditorRef = ref<InstanceType<typeof QueryEditor>>();
|
|
const elasticsearchJsonResponsePanelRef = ref<ElasticsearchJsonResponsePanelHandle>();
|
|
const tableStructureEditorRef = ref<{ applyChanges: () => Promise<boolean> }>();
|
|
const standaloneResultToolbarRef = ref<HTMLElement | null>(null);
|
|
const standaloneResultToolbarWidth = ref(0);
|
|
const standaloneResultToolbarViewportWidth = ref(0);
|
|
const resultTabsScrollerRef = ref<HTMLElement | null>(null);
|
|
const dataGridViewOptionsOpen = ref(false);
|
|
const dataGridRenderMode = computed(() => settingsStore.editorSettings.dataGridRenderMode);
|
|
const dataGridSearchMode = computed(() => settingsStore.editorSettings.dataGridSearchMode);
|
|
const resultRunDisplayMode = computed(() => settingsStore.editorSettings.resultRunDisplayMode);
|
|
const columnWidthDensity = computed(() => settingsStore.editorSettings.columnWidthDensity);
|
|
const tableFontSize = computed(() => settingsStore.editorSettings.tableFontSize);
|
|
const redisKeyBrowserRef = ref<SearchableBrowserHandle>();
|
|
const documentBrowserRef = ref<SearchableBrowserHandle>();
|
|
|
|
function openDataGridExtractorConfiguration() {
|
|
dataGridViewOptionsOpen.value = false;
|
|
void nextTick(() => dataGridRef.value?.openExtractorConfiguration());
|
|
}
|
|
|
|
const etcdKeyBrowserRef = ref<SearchableBrowserHandle>();
|
|
const etcdDashboardRef = ref<{ refresh?: () => boolean }>();
|
|
const zookeeperKeyBrowserRef = ref<SearchableBrowserHandle>();
|
|
const consulOverviewRef = ref<{ refresh?: () => boolean }>();
|
|
const consulWorkspaceRef = ref<SearchableBrowserHandle>();
|
|
const databaseBrowserRef = ref<SearchableBrowserHandle>();
|
|
const objectBrowserRef = ref<SearchableBrowserHandle>();
|
|
const activeTableMeta = computed(() => props.activeTab.tableMeta);
|
|
const activeDataTabTableMeta = computed(() => tableMetaForDataTab(props.activeTab));
|
|
const activeResultExecutionTarget = computed(() => queryStore.activeResultExecutionTarget(props.activeTab.id));
|
|
const activeResultConnection = computed(() => (activeResultExecutionTarget.value ? connectionStore.getConfig(activeResultExecutionTarget.value.connectionId) : props.activeConnection));
|
|
const activeResultConnectionId = computed(() => activeResultExecutionTarget.value?.connectionId ?? props.activeTab.connectionId);
|
|
const activeResultDatabase = computed(() => activeResultExecutionTarget.value?.database ?? props.activeTab.database);
|
|
const activeResultSchema = computed(() => activeResultExecutionTarget.value?.schema ?? props.activeTab.schema);
|
|
const activeEffectiveDatabaseType = computed(() => effectiveDatabaseTypeForConnection(activeResultConnection.value));
|
|
const activeVectorConnection = computed(() => connectionStore.getConfig(props.activeTab.connectionId) ?? props.activeConnection);
|
|
const activeDataTabExecutionDatabase = computed(() => dataTabExecutionDatabase(props.activeConnection, props.activeTab.database, activeDataTabTableMeta.value?.catalog));
|
|
const activeProductionContext = computed(() => productionContextForDatabase(props.activeConnection, props.activeTab.database));
|
|
const productionWatermarkText = computed(() => (locale.value.startsWith("zh") ? "生产环境" : "PROD"));
|
|
const productionSessionDetail = computed(() => {
|
|
if (!activeProductionContext.value.active) return "";
|
|
if (activeProductionContext.value.reason === "connection") return t("production.connection");
|
|
return activeProductionContext.value.databases.join(", ") || t("production.databases");
|
|
});
|
|
|
|
function findNodeInTree(nodes: TreeNode[], id: string): TreeNode | undefined {
|
|
for (const node of nodes) {
|
|
if (node.id === id) return node;
|
|
if (node.children) {
|
|
const found = findNodeInTree(node.children, id);
|
|
if (found) return found;
|
|
}
|
|
}
|
|
return undefined;
|
|
}
|
|
|
|
function setDataGridRenderMode(value: "canvas" | "dom") {
|
|
settingsStore.updateEditorSettings({ dataGridRenderMode: value });
|
|
}
|
|
|
|
function setDataGridSearchMode(value: DataGridSearchMode) {
|
|
settingsStore.updateEditorSettings({ dataGridSearchMode: value });
|
|
}
|
|
|
|
function setResultRunDisplayMode(value: ResultRunDisplayMode) {
|
|
settingsStore.updateEditorSettings({ resultRunDisplayMode: value });
|
|
}
|
|
|
|
function setColumnWidthDensity(value: "compact" | "standard" | "comfortable") {
|
|
settingsStore.updateEditorSettings({ columnWidthDensity: value });
|
|
}
|
|
|
|
function setTableFontSize(value: number) {
|
|
settingsStore.updateEditorSettings({ tableFontSize: value });
|
|
}
|
|
|
|
const numericColumnRightAlign = computed(() => settingsStore.editorSettings.numericColumnRightAlign ?? true);
|
|
|
|
function setNumericColumnRightAlign(value: boolean) {
|
|
settingsStore.updateEditorSettings({ numericColumnRightAlign: value });
|
|
}
|
|
|
|
function decreaseTableFontSize() {
|
|
setTableFontSize(tableFontSize.value - 1);
|
|
}
|
|
|
|
function increaseTableFontSize() {
|
|
setTableFontSize(tableFontSize.value + 1);
|
|
}
|
|
|
|
const activeTabDimension = computed(() => {
|
|
const tab = props.activeTab;
|
|
if (!tab.connectionId || tab.mode !== "vector") return undefined;
|
|
const isMilvus = connectionStore.getConfig(tab.connectionId)?.db_type === "milvus";
|
|
const suffix = isMilvus && tab.database ? `${tab.database}:${tab.sql}` : tab.sql;
|
|
const nodeId = `${tab.connectionId}:__vector_collection:${suffix}`;
|
|
const meta = findNodeInTree(connectionStore.treeNodes, nodeId)?.meta;
|
|
return meta && "dimension" in meta ? (meta as VectorCollectionMeta).dimension : undefined;
|
|
});
|
|
|
|
const activeSqlFormatDialect = computed<SqlFormatDialect>(() => sqlFormatDialectForDbType(activeEffectiveDatabaseType.value));
|
|
|
|
const editorDialect = computed<"mysql" | "postgres" | "sqlserver">(() => codeMirrorSqlDialect(activeEffectiveDatabaseType.value));
|
|
const editorSyntaxDialect = computed<CodeMirrorSqlDialectName>(() => codeMirrorSqlDialectForConnection(props.activeConnection));
|
|
|
|
const shortcutModifier = computed(() => (navigator.platform.toLowerCase().includes("mac") ? "Cmd" : "Ctrl"));
|
|
|
|
const modRKeys = computed(() =>
|
|
formatShortcut("Mod+R")
|
|
.split("+")
|
|
.map((key) => (key === "Cmd" ? "⌘" : key)),
|
|
);
|
|
|
|
const {
|
|
hasTabOverflow: hasResultTabOverflow,
|
|
scrollThumbLeftPercent: resultTabsThumbLeftPercent,
|
|
scrollThumbWidthPercent: resultTabsThumbWidthPercent,
|
|
isScrollbarDragging: isResultTabsScrollbarDragging,
|
|
updateScrollButtons: updateResultTabsScrollbar,
|
|
onTabsWheel: onResultTabsWheel,
|
|
startScrollbarDrag: startResultTabsScrollbarDrag,
|
|
} = useTabScroll(resultTabsScrollerRef);
|
|
|
|
const resultTabsScrollerStyle: CSSProperties = {
|
|
msOverflowStyle: "none",
|
|
scrollbarWidth: "none",
|
|
WebkitOverflowScrolling: "touch",
|
|
};
|
|
|
|
const resultTabsScrollbarThumbStyle = computed<CSSProperties>(() => ({
|
|
insetInlineStart: `${resultTabsThumbLeftPercent.value}%`,
|
|
width: `${resultTabsThumbWidthPercent.value}%`,
|
|
}));
|
|
|
|
const hasNumericData = computed(() => {
|
|
const r = props.activeTab.result;
|
|
if (!r || r.rows.length === 0) return false;
|
|
return chartableColumnIndexes(r).length > 0;
|
|
});
|
|
|
|
const activeQueryError = computed(() => {
|
|
const result = props.activeTab.result;
|
|
if (!result || !isQueryExecutionErrorResult(result)) return "";
|
|
return String(result.rows[0]?.[0] ?? "");
|
|
});
|
|
const hasQueryOutput = computed(
|
|
() =>
|
|
!!props.activeTab.result ||
|
|
!!props.activeTab.resultRuns?.length ||
|
|
props.activeTab.resultEvicted === true ||
|
|
!!props.activeTab.explainPlan ||
|
|
!!props.activeTab.explainError ||
|
|
!!props.activeTab.explainTableResult ||
|
|
!!props.activeTab.explainTableError ||
|
|
props.activeTab.isExecuting === true ||
|
|
props.activeTab.isExplaining === true,
|
|
);
|
|
const visibleResultItems = computed(() => tabularResultItems(props.activeTab.results ?? (props.activeTab.result ? [props.activeTab.result] : undefined)));
|
|
const tabularResults = computed(() => tabularResultItems(props.activeTab.results));
|
|
const allResultExportSheets = computed(() =>
|
|
tabularResults.value.map((item) => ({
|
|
sheetName: item.label || t("tabs.resultN", { n: item.n }),
|
|
result: item.result,
|
|
sql: item.index === props.activeTab.activeResultIndex ? queryResultExecutionSql(props.activeTab) : item.result.sourceStatement,
|
|
})),
|
|
);
|
|
const resultRuns = computed(() => resultRunItems(props.activeTab));
|
|
const activeResultGridCacheKey = computed(() => resultGridCacheKey(props.activeTab));
|
|
const activeResultGridColumnWidthCacheKey = computed(() => resultGridColumnWidthCacheKey(props.activeTab));
|
|
const activeResultGridInstanceKey = computed(() => resultGridInstanceKey(props.activeTab));
|
|
const activeResultSql = computed(() => resultSqlForGrid(props.activeTab));
|
|
const activeResultExportSql = computed(() => queryResultExecutionSql(props.activeTab));
|
|
const activeStatementExecutionMarkers = computed(() =>
|
|
statementExecutionMarkers(
|
|
props.activeTab.sql,
|
|
props.activeTab.results ?? (props.activeTab.result ? [props.activeTab.result] : undefined),
|
|
activeEffectiveDatabaseType.value,
|
|
props.activeTab.resultBaseSql || props.activeTab.lastExecutedSql || props.activeTab.sql,
|
|
props.activeTab.resultEditorFingerprint ?? "",
|
|
props.activeTab.batchSqlExecution,
|
|
),
|
|
);
|
|
const activeElasticsearchJsonResponse = computed(() => elasticsearchJsonResponseForResult(activeEffectiveDatabaseType.value, activeResultSql.value, props.activeTab.result));
|
|
/** Whether the active result is an Elasticsearch _source table that also has a raw JSON toggle. */
|
|
const activeElasticsearchRawBody = computed(() => {
|
|
if (activeEffectiveDatabaseType.value !== "elasticsearch" && activeEffectiveDatabaseType.value !== "easysearch") return undefined;
|
|
return props.activeTab.result?.elasticsearch_raw_body;
|
|
});
|
|
/** Toggle between the _source table and the raw JSON panel for Elasticsearch REST results. */
|
|
const showElasticsearchRawJson = ref(false);
|
|
watch(
|
|
() => props.activeTab.result?.elasticsearch_raw_body,
|
|
() => {
|
|
showElasticsearchRawJson.value = false;
|
|
},
|
|
);
|
|
const resultArchiveExporting = ref(false);
|
|
const canExportResultArchive = computed(() => props.activeTab.mode === "query" && (!!props.activeTab.result || !!props.activeTab.results?.length || !!props.activeTab.resultRuns?.length));
|
|
const resultAutoSave = computed(() => props.activeTab.resultAutoSave === true);
|
|
const activeResultRunItem = computed(() => resultRuns.value.find((run) => run.active));
|
|
const showResultRunTabs = computed(() => resultRuns.value.length > 0 && resultRunDisplayMode.value === "tabs");
|
|
const showResultRunSelector = computed(() => resultRuns.value.length > 0 && resultRunDisplayMode.value === "list");
|
|
const canCloseQueryResult = computed(() => props.activeTab.mode === "query" && !props.activeTab.isExecuting && !props.activeTab.activeResultRunId && (!!props.activeTab.result || !!props.activeTab.results?.length || props.activeTab.resultEvicted === true));
|
|
|
|
function updateResultTabsAfterRender() {
|
|
nextTick(() => updateResultTabsScrollbar());
|
|
}
|
|
|
|
function revealActiveResultRunAfterRender() {
|
|
nextTick(() => {
|
|
if (!showResultRunTabs.value) return;
|
|
updateResultTabsScrollbar();
|
|
resultTabsScrollerRef.value?.querySelector<HTMLElement>('[data-active-result-run="true"]')?.scrollIntoView({ block: "nearest", inline: "nearest" });
|
|
});
|
|
}
|
|
|
|
function resultRunIdsWereAppended(previous: string[], current: string[]) {
|
|
return current.length > previous.length && previous.every((id, index) => current[index] === id);
|
|
}
|
|
|
|
watch(
|
|
() => ({
|
|
tabId: props.activeTab.id,
|
|
displayMode: resultRunDisplayMode.value,
|
|
runIds: resultRuns.value.map((run) => run.id),
|
|
activeRunId: props.activeTab.activeResultRunId,
|
|
}),
|
|
(current, previous) => {
|
|
const switchedTab = current.tabId !== previous.tabId;
|
|
const switchedDisplayMode = current.displayMode !== previous.displayMode;
|
|
const activeRunChanged = current.activeRunId !== previous.activeRunId;
|
|
|
|
// Appending a fresh result must keep the user's horizontal position stable.
|
|
// Reused result slots, tab/display-mode changes, and keyboard/close flows
|
|
// still reveal the active run when it may be outside the visible strip.
|
|
if (switchedTab || switchedDisplayMode || (activeRunChanged && !resultRunIdsWereAppended(previous.runIds, current.runIds))) {
|
|
revealActiveResultRunAfterRender();
|
|
return;
|
|
}
|
|
updateResultTabsAfterRender();
|
|
},
|
|
);
|
|
const summaryItems = computed(() => executionSummaryItems(props.activeTab));
|
|
const hasExecutionSummary = computed(() => summaryItems.value.length > 0 || props.activeTab.isExecuting);
|
|
const batchExecutionProgress = computed(() => props.activeTab.batchSqlExecution);
|
|
const batchRecovery = computed(() => batchSqlRecoveryState(props.activeTab));
|
|
const batchExecutionPercent = computed(() => {
|
|
const progress = batchExecutionProgress.value;
|
|
return progress?.total ? Math.round((progress.completed / progress.total) * 100) : 0;
|
|
});
|
|
const hasTabularResult = computed(() => {
|
|
if (props.activeTab.result?.columns.length) return true;
|
|
return visibleResultItems.value.length > 0;
|
|
});
|
|
const canShowResultOutput = computed(() => hasTabularResult.value || props.activeTab.isExecuting);
|
|
const canShowExplainOutput = computed(() => !!props.activeTab.explainPlan || !!props.activeTab.explainError || !!props.activeTab.explainTableResult || !!props.activeTab.explainTableError || props.activeTab.isExplaining === true);
|
|
const resultMessageCount = computed(() => props.activeTab.result?.messages?.length ?? 0);
|
|
const canShowMessagesOutput = computed(() => resultMessageCount.value > 0);
|
|
const showStandaloneResultToolbar = computed(() => activeElasticsearchJsonResponse.value || props.activeOutputView !== "result" || !props.activeTab.result || !hasTabularResult.value);
|
|
const standaloneResultToolbarCompact = computed(() => isDataGridToolbarCompact(standaloneResultToolbarWidth.value, standaloneResultToolbarViewportWidth.value));
|
|
let standaloneResultToolbarResizeObserver: ResizeObserver | undefined;
|
|
|
|
function updateStandaloneResultToolbarDimensions() {
|
|
standaloneResultToolbarWidth.value = standaloneResultToolbarRef.value?.clientWidth ?? 0;
|
|
standaloneResultToolbarViewportWidth.value = typeof window === "undefined" ? 0 : window.innerWidth;
|
|
}
|
|
|
|
function observeStandaloneResultToolbar() {
|
|
standaloneResultToolbarResizeObserver?.disconnect();
|
|
standaloneResultToolbarResizeObserver = undefined;
|
|
const toolbar = standaloneResultToolbarRef.value;
|
|
updateStandaloneResultToolbarDimensions();
|
|
if (toolbar && typeof ResizeObserver !== "undefined") {
|
|
standaloneResultToolbarResizeObserver = new ResizeObserver(updateStandaloneResultToolbarDimensions);
|
|
standaloneResultToolbarResizeObserver.observe(toolbar);
|
|
}
|
|
}
|
|
|
|
watch(standaloneResultToolbarRef, observeStandaloneResultToolbar, { flush: "post" });
|
|
type MongoQueryGridChanges = {
|
|
dirtyRows: Map<number, Map<number, MongoInputValue>>;
|
|
deletedRows: Set<number>;
|
|
newRows: MongoInputValue[][];
|
|
columns: string[];
|
|
rows: MongoInputValue[][];
|
|
};
|
|
function mongoCollectionExpression(collection: string): string {
|
|
return `db.getCollection(${JSON.stringify(collection)})`;
|
|
}
|
|
function mongoQueryResultDocumentId(rowIdx: number, fallback: unknown): unknown {
|
|
const document = props.activeTab.result?.mongo_documents?.[rowIdx];
|
|
if (!document || typeof document !== "object" || Array.isArray(document)) return fallback;
|
|
return (document as Record<string, unknown>)._id ?? fallback;
|
|
}
|
|
const mongoQueryResultSaveHandler = computed<CustomSaveHandler | undefined>(() => {
|
|
const tab = props.activeTab;
|
|
const target = tab.mongoEditTarget;
|
|
if (tab.mode !== "query" || activeEffectiveDatabaseType.value !== "mongodb" || !target || !activeResultConnectionId.value || !activeResultDatabase.value || !tab.result) return undefined;
|
|
if (!tab.result.columns.includes(target.idColumn)) return undefined;
|
|
|
|
const save: CustomSaveHandler["save"] = async (changes: MongoQueryGridChanges) => {
|
|
if (changes.newRows.length > 0 || changes.deletedRows.size > 0) {
|
|
throw new Error("MongoDB query result editing only supports updating existing rows.");
|
|
}
|
|
const idColIdx = changes.columns.indexOf(target.idColumn);
|
|
if (idColIdx < 0) throw new Error("No _id column");
|
|
for (const [rowIdx, dirtyCols] of changes.dirtyRows) {
|
|
const row = changes.rows[rowIdx];
|
|
const id = row?.[idColIdx];
|
|
if (id === null || id === undefined || String(id).trim() === "") continue;
|
|
const updateDoc = buildMongoUpdateDocument(dirtyCols, changes.columns, tab.result?.mongo_documents?.[rowIdx]);
|
|
if (Object.keys(updateDoc).length === 0) continue;
|
|
await api.mongoUpdateDocument(activeResultConnectionId.value, activeResultDatabase.value, target.collection, serializeMongoDocumentId(mongoQueryResultDocumentId(rowIdx, id)), JSON.stringify(updateDoc));
|
|
}
|
|
};
|
|
|
|
const preview: CustomSaveHandler["preview"] = async (changes: MongoQueryGridChanges) => {
|
|
const idColIdx = changes.columns.indexOf(target.idColumn);
|
|
if (idColIdx < 0) return [];
|
|
const stmts: string[] = [];
|
|
for (const [rowIdx, dirtyCols] of changes.dirtyRows) {
|
|
const row = changes.rows[rowIdx];
|
|
const id = row?.[idColIdx];
|
|
if (id === null || id === undefined || String(id).trim() === "") continue;
|
|
const updateDoc = buildMongoUpdateDocument(dirtyCols, changes.columns, tab.result?.mongo_documents?.[rowIdx]);
|
|
if (Object.keys(updateDoc).length === 0) continue;
|
|
stmts.push(`${mongoCollectionExpression(target.collection)}.updateOne({_id: ${formatMongoShellLiteral(mongoQueryResultDocumentId(rowIdx, id))}}, ${formatMongoShellLiteral(updateDoc)})`);
|
|
}
|
|
return stmts;
|
|
};
|
|
|
|
const applySavedChanges: NonNullable<CustomSaveHandler["applySavedChanges"]> = ({ dirtyRows, columns }) => {
|
|
const documents = tab.result?.mongo_documents;
|
|
if (!documents) return;
|
|
|
|
// Replace the raw array only after every backend update succeeds, keeping
|
|
// the grid and JSON preview atomic when a multi-row save partially fails.
|
|
if (tab.resultLocalSortOriginalMongoDocuments) {
|
|
tab.resultLocalSortOriginalMongoDocuments = applyMongoGridChangesToDocumentBaseline(tab.resultLocalSortOriginalMongoDocuments, documents, dirtyRows, columns);
|
|
}
|
|
tab.result!.mongo_documents = documents.map((document, rowIdx) => {
|
|
const changes = dirtyRows.get(rowIdx);
|
|
return changes ? applyMongoGridChangesToDocument(document, changes, columns) : document;
|
|
});
|
|
const copyDocuments = tab.result!.mongo_copy_documents;
|
|
if (copyDocuments) {
|
|
if (tab.resultLocalSortOriginalMongoCopyDocuments) {
|
|
tab.resultLocalSortOriginalMongoCopyDocuments = applyMongoGridChangesToDocumentBaseline(tab.resultLocalSortOriginalMongoCopyDocuments, copyDocuments, dirtyRows, columns);
|
|
}
|
|
tab.result!.mongo_copy_documents = copyDocuments.map((document, rowIdx) => {
|
|
const changes = dirtyRows.get(rowIdx);
|
|
return changes ? applyMongoGridChangesToDocument(document, changes, columns) : document;
|
|
});
|
|
}
|
|
};
|
|
|
|
return { save, preview, applySavedChanges, canInsert: false, canDelete: false, supportsInsert: false, readonlyColumns: [target.idColumn], targetLabel: target.collection };
|
|
});
|
|
const resultsPaneOpen = ref(false);
|
|
const resultsPaneSize = ref(Number(safeLocalStorageGet("dbx-results-pane-size")) || DEFAULT_QUERY_RESULTS_PANE_SIZE);
|
|
const editorPaneSize = computed(() => (resultsPaneOpen.value ? 100 - resultsPaneSize.value : 100));
|
|
const queryRunningElapsed = ref(0);
|
|
|
|
function toggleResultsPane(): boolean {
|
|
if (props.activeTab.mode !== "query" || !hasQueryOutput.value) return false;
|
|
resultsPaneOpen.value = !resultsPaneOpen.value;
|
|
return true;
|
|
}
|
|
|
|
function onResultsResized(payload: { panes: { size: number }[] }) {
|
|
const resultsPane = payload.panes[1];
|
|
if (resultsPane?.size != null && resultsPane.size >= 20 && resultsPane.size <= 85) {
|
|
resultsPaneSize.value = resultsPane.size;
|
|
safeLocalStorageSet("dbx-results-pane-size", String(resultsPane.size));
|
|
}
|
|
}
|
|
let queryRunningElapsedFrame: number | undefined;
|
|
|
|
function stopQueryRunningElapsedTimer() {
|
|
if (queryRunningElapsedFrame !== undefined) {
|
|
window.cancelAnimationFrame(queryRunningElapsedFrame);
|
|
queryRunningElapsedFrame = undefined;
|
|
}
|
|
}
|
|
|
|
function updateQueryRunningElapsed() {
|
|
const startedAt = props.activeTab.queryExecutionStartedAt;
|
|
queryRunningElapsed.value = props.activeTab.isExecuting && startedAt ? Math.max(0, Date.now() - startedAt) : 0;
|
|
}
|
|
|
|
function startQueryRunningElapsedTimer() {
|
|
stopQueryRunningElapsedTimer();
|
|
updateQueryRunningElapsed();
|
|
if (!props.activeTab.isExecuting || !props.activeTab.queryExecutionStartedAt) return;
|
|
const updateOnNextFrame = () => {
|
|
updateQueryRunningElapsed();
|
|
if (props.activeTab.isExecuting && props.activeTab.queryExecutionStartedAt) {
|
|
queryRunningElapsedFrame = window.requestAnimationFrame(updateOnNextFrame);
|
|
}
|
|
};
|
|
queryRunningElapsedFrame = window.requestAnimationFrame(updateOnNextFrame);
|
|
}
|
|
|
|
const queryRunningElapsedSeconds = computed(() => formatElapsedSeconds(queryRunningElapsed.value));
|
|
|
|
watch(() => [props.activeTab.id, props.activeTab.isExecuting, props.activeTab.queryExecutionStartedAt] as const, startQueryRunningElapsedTimer, { immediate: true });
|
|
|
|
onUnmounted(() => {
|
|
stopQueryRunningElapsedTimer();
|
|
standaloneResultToolbarResizeObserver?.disconnect();
|
|
window.removeEventListener("dbx-refresh-active-kv-browser", onRefreshActiveKvBrowser);
|
|
window.removeEventListener("resize", updateStandaloneResultToolbarDimensions);
|
|
window.visualViewport?.removeEventListener("resize", updateStandaloneResultToolbarDimensions);
|
|
window.removeEventListener("dbx:ui-scale-applied", updateStandaloneResultToolbarDimensions);
|
|
});
|
|
|
|
watch(
|
|
hasQueryOutput,
|
|
(hasOutput) => {
|
|
resultsPaneOpen.value = hasOutput ? true : false;
|
|
},
|
|
{ immediate: true },
|
|
);
|
|
|
|
watch(
|
|
() => props.activeTab.id,
|
|
() => {
|
|
resultsPaneOpen.value = hasQueryOutput.value;
|
|
},
|
|
);
|
|
|
|
watch(
|
|
() => [props.activeTab.id, props.activeTab.result, props.activeTab.results, props.activeTab.isExecuting, props.activeOutputView] as const,
|
|
() => {
|
|
if (props.activeTab.isExecuting) return;
|
|
if (hasExecutionSummary.value && !hasTabularResult.value && props.activeOutputView === "result") {
|
|
const result = props.activeTab.result;
|
|
emit("update:activeOutputView", result ? defaultViewForResult(result) : "summary");
|
|
}
|
|
},
|
|
{ immediate: true },
|
|
);
|
|
|
|
watch(
|
|
() => [props.activeTab.isExecuting, props.activeTab.isExplaining],
|
|
([isExecuting, isExplaining]) => {
|
|
if (isExecuting || isExplaining) resultsPaneOpen.value = true;
|
|
},
|
|
);
|
|
|
|
watch(
|
|
() => props.activeTab.result,
|
|
(result) => {
|
|
if (!result) return;
|
|
if (!isDebugLoggingEnabled()) return;
|
|
const startedAt = performance.now();
|
|
appendDebugLog("info", "[DBX][ContentArea:result:observed]", {
|
|
tabId: props.activeTab.id,
|
|
rowCount: result.rows.length,
|
|
columnCount: result.columns.length,
|
|
backendMs: result.execution_time_ms,
|
|
isExecuting: props.activeTab.isExecuting,
|
|
});
|
|
nextTick(() => {
|
|
appendDebugLog("info", "[DBX][ContentArea:result:nextTick]", {
|
|
tabId: props.activeTab.id,
|
|
elapsed: `${Math.round(performance.now() - startedAt)}ms`,
|
|
isExecuting: props.activeTab.isExecuting,
|
|
});
|
|
requestAnimationFrame(() => {
|
|
appendDebugLog("info", "[DBX][ContentArea:result:first-frame]", {
|
|
tabId: props.activeTab.id,
|
|
elapsed: `${Math.round(performance.now() - startedAt)}ms`,
|
|
isExecuting: props.activeTab.isExecuting,
|
|
});
|
|
});
|
|
});
|
|
},
|
|
);
|
|
|
|
watch(
|
|
() => props.activeTab.isExecuting,
|
|
(isExecuting, wasExecuting) => {
|
|
if (isExecuting && !wasExecuting) {
|
|
queryEditorRef.value?.beginExecutionViewportTracking();
|
|
}
|
|
if (!isExecuting && wasExecuting) {
|
|
nextTick(() => {
|
|
requestAnimationFrame(() => {
|
|
queryEditorRef.value?.scrollCursorIntoView();
|
|
});
|
|
});
|
|
}
|
|
},
|
|
);
|
|
|
|
// Table toolbox handlers
|
|
function handleTableImport() {
|
|
const tab = props.activeTab;
|
|
if (!tab.tableMeta || !tab.connectionId) return;
|
|
connectionStore.tableImportSource = {
|
|
connectionId: tab.connectionId,
|
|
database: tab.database,
|
|
schema: tab.tableMeta.schema,
|
|
tableName: tab.tableMeta.tableName,
|
|
};
|
|
}
|
|
|
|
function handleTableDataGenerate() {
|
|
const tab = props.activeTab;
|
|
if (!tab.tableMeta || !tab.connectionId) return;
|
|
connectionStore.tableDataGenerateSource = {
|
|
connectionId: tab.connectionId,
|
|
database: tab.database,
|
|
schema: tab.tableMeta.schema,
|
|
tableName: tab.tableMeta.tableName,
|
|
};
|
|
}
|
|
|
|
// Column info panel handlers
|
|
async function onHandleClickColumn(matchedCols: Array<{ name: string; table: string; schema?: string }>, errorMsg?: string) {
|
|
if (!props.activeTab.connectionId || !props.activeTab.database) return;
|
|
|
|
// If error or no columns, silently ignore — don't show the panel
|
|
if (errorMsg || matchedCols.length === 0) return;
|
|
|
|
columnInfoLoading.value = true;
|
|
columnInfoError.value = undefined;
|
|
|
|
try {
|
|
// Fetch full column details from API
|
|
const apiModule = await import("@/lib/backend/api");
|
|
const results: ColumnInfo[] = [];
|
|
|
|
for (const matchedCol of matchedCols) {
|
|
const querySchema = matchedCol.schema || props.activeTab.database || "";
|
|
try {
|
|
const fullColumns = await apiModule.getColumns(props.activeTab.connectionId, props.activeTab.database, querySchema, matchedCol.table);
|
|
for (const col of fullColumns) {
|
|
if (col.name === matchedCol.name) {
|
|
results.push({
|
|
name: col.name,
|
|
table: matchedCol.table,
|
|
dataType: col.data_type,
|
|
isNullable: col.is_nullable,
|
|
columnDefault: col.column_default,
|
|
isPrimaryKey: col.is_primary_key,
|
|
comment: col.comment,
|
|
extra: col.extra,
|
|
});
|
|
}
|
|
}
|
|
} catch {
|
|
// Skip tables that fail
|
|
}
|
|
}
|
|
|
|
columnInfoColumns.value = results;
|
|
} catch (e: any) {
|
|
// Silently ignore errors
|
|
console.error("[DBX] Failed to fetch column info:", e);
|
|
return;
|
|
} finally {
|
|
columnInfoLoading.value = false;
|
|
showColumnInfo.value = true;
|
|
}
|
|
}
|
|
|
|
function closeColumnInfo() {
|
|
showColumnInfo.value = false;
|
|
columnInfoColumns.value = [];
|
|
columnInfoError.value = undefined;
|
|
}
|
|
|
|
function onHandleClickTable(target: SqlObjectNavigationTarget) {
|
|
emit("clickTable", target);
|
|
}
|
|
|
|
function onHandleViewTableData(target: SqlObjectNavigationTarget) {
|
|
emit("viewTableData", target);
|
|
}
|
|
|
|
function onHandleViewTableDdl(target: SqlObjectNavigationTarget) {
|
|
emit("viewTableDdl", target);
|
|
}
|
|
|
|
function onHandleEditTableStructure(target: SqlObjectNavigationTarget) {
|
|
emit("editTableStructure", target);
|
|
}
|
|
|
|
function onHandleOpenObjectSource(target: SqlObjectNavigationTarget, initialEditing: boolean) {
|
|
emit("openObjectSource", target, initialEditing);
|
|
}
|
|
|
|
function onHandleCloseColumnPanel() {
|
|
showColumnInfo.value = false;
|
|
columnInfoColumns.value = [];
|
|
columnInfoError.value = undefined;
|
|
}
|
|
|
|
function focusSearch(): boolean {
|
|
if (elasticsearchJsonResponsePanelRef.value?.focusSearch()) return true;
|
|
if (props.activeTab.mode === "mongo") return documentBrowserRef.value?.focusSearch() ?? false;
|
|
if (props.activeTab.mode === "redis") return redisKeyBrowserRef.value?.focusSearch() ?? false;
|
|
if (props.activeTab.mode === "etcd") return etcdKeyBrowserRef.value?.focusSearch() ?? false;
|
|
if (props.activeTab.mode === "zookeeper") return zookeeperKeyBrowserRef.value?.focusSearch() ?? false;
|
|
if (props.activeTab.mode === "consul") return consulWorkspaceRef.value?.focusSearch() ?? false;
|
|
if (props.activeTab.mode === "databases") return databaseBrowserRef.value?.focusSearch() ?? false;
|
|
if (props.activeTab.mode === "objects") return objectBrowserRef.value?.focusSearch() ?? false;
|
|
if (props.activeTab.mode === "query") return queryEditorRef.value?.openSearch() ?? false;
|
|
return dataGridRef.value?.focusSearch() ?? false;
|
|
}
|
|
|
|
function openGoToColumn(): boolean {
|
|
if (props.activeTab.mode !== "data") return false;
|
|
return dataGridRef.value?.openGoToColumn() ?? false;
|
|
}
|
|
|
|
function refreshQueryEditorCompletionCache(): boolean {
|
|
if (props.activeTab.mode !== "query" || !queryEditorRef.value) return false;
|
|
queryEditorRef.value.refreshCompletionCache();
|
|
return true;
|
|
}
|
|
|
|
function refreshData(): boolean {
|
|
// Reuse ObjectBrowser's reload path so schema reloads and stale object-response guards stay intact.
|
|
if (props.activeTab.mode === "objects") return objectBrowserRef.value?.refresh?.() ?? false;
|
|
if (props.activeTab.mode === "etcd") return etcdKeyBrowserRef.value?.refresh?.() ?? false;
|
|
if (props.activeTab.mode === "etcd-dashboard") return etcdDashboardRef.value?.refresh?.() ?? false;
|
|
if (props.activeTab.mode === "zookeeper") return zookeeperKeyBrowserRef.value?.refresh?.() ?? false;
|
|
if (props.activeTab.mode === "consul-overview") return consulOverviewRef.value?.refresh?.() ?? false;
|
|
if (props.activeTab.mode === "consul") return consulWorkspaceRef.value?.refresh?.() ?? false;
|
|
if (props.activeTab.mode === "databases") return databaseBrowserRef.value?.refresh?.() ?? false;
|
|
// Restored data tabs intentionally omit row data, so refresh must work before DataGrid mounts.
|
|
if (canReloadUnavailableDataTab(props.activeTab)) {
|
|
emit("reload");
|
|
return true;
|
|
}
|
|
if (activeElasticsearchJsonResponse.value) {
|
|
// Match DataGrid's toolbar refresh intent so multi-result runs are
|
|
// refreshed as a group instead of replacing them with the active result.
|
|
emit("reload", activeResultSql.value, undefined, undefined, undefined, undefined, undefined, "refresh");
|
|
return true;
|
|
}
|
|
if (!dataGridRef.value) return false;
|
|
void dataGridRef.value.onToolbarRefresh();
|
|
return true;
|
|
}
|
|
|
|
function onRefreshActiveKvBrowser(event: Event) {
|
|
const detail = (event as CustomEvent<{ mode?: string; connectionId?: string }>).detail;
|
|
if (!detail || props.activeTab.mode !== detail.mode || props.activeTab.connectionId !== detail.connectionId) return;
|
|
void nextTick(() => refreshData());
|
|
}
|
|
|
|
async function exportResultArchive() {
|
|
if (resultArchiveExporting.value) return;
|
|
resultArchiveExporting.value = true;
|
|
try {
|
|
const bytes = await queryStore.exportResultArchive(props.activeTab.id);
|
|
if (!bytes) {
|
|
toast(t("tabs.resultArchiveUnavailable"), 4000);
|
|
return;
|
|
}
|
|
const saved = await saveQueryResultArchiveFile(defaultQueryResultArchiveFileName(props.activeTab.title), bytes);
|
|
if (saved) toast(t("tabs.resultArchiveExported"), 2500);
|
|
} catch (error: any) {
|
|
toast(t("tabs.resultArchiveExportFailed", { message: error?.message || String(error) }), 5000);
|
|
} finally {
|
|
resultArchiveExporting.value = false;
|
|
}
|
|
}
|
|
|
|
async function removeResultRun(runId: string) {
|
|
const removedActiveRun = props.activeTab.activeResultRunId === runId;
|
|
const removed = await queryStore.removeResultRun(props.activeTab.id, runId);
|
|
if (!removed) return;
|
|
if (removedActiveRun) emit("update:activeOutputView", "result");
|
|
await nextTick();
|
|
const activeRunTab = resultTabsScrollerRef.value?.querySelector<HTMLElement>('[data-active-result-run="true"]');
|
|
activeRunTab?.focus({ preventScroll: true });
|
|
activeRunTab?.scrollIntoView({ block: "nearest", inline: "nearest" });
|
|
}
|
|
|
|
function toggleResultRunPinned(runId: string) {
|
|
queryStore.toggleResultRunPinned(props.activeTab.id, runId);
|
|
}
|
|
|
|
async function closeOtherResultRuns(runId: string) {
|
|
if (!(await queryStore.closeOtherResultRuns(props.activeTab.id, runId))) return;
|
|
await selectResultRun(runId);
|
|
}
|
|
|
|
async function closeResultRunsToLeft(runId: string) {
|
|
if (!(await queryStore.closeResultRunsToLeft(props.activeTab.id, runId))) return;
|
|
await selectResultRun(runId);
|
|
}
|
|
|
|
async function closeResultRunsToRight(runId: string) {
|
|
if (!(await queryStore.closeResultRunsToRight(props.activeTab.id, runId))) return;
|
|
await selectResultRun(runId);
|
|
}
|
|
|
|
function resultRunContextMenuItems(run: (typeof resultRuns.value)[number]): ContextMenuItem[] {
|
|
return [
|
|
{
|
|
label: t(run.pinned ? "tabs.unpinResultRun" : "tabs.pinResultRun"),
|
|
action: () => toggleResultRunPinned(run.id),
|
|
icon: Pin,
|
|
iconClass: run.pinned ? "fill-current" : "",
|
|
},
|
|
{
|
|
label: t("tabs.unpinAllResultRuns"),
|
|
action: () => queryStore.unpinAllResultRuns(props.activeTab.id),
|
|
disabled: !resultRuns.value.some((item) => item.pinned),
|
|
icon: Pin,
|
|
},
|
|
{ label: "", separator: true },
|
|
{
|
|
label: t("tabs.closeOtherResultRuns"),
|
|
action: () => void closeOtherResultRuns(run.id),
|
|
disabled: resultRuns.value.length <= 1,
|
|
icon: X,
|
|
},
|
|
{
|
|
label: t("tabs.closeResultRunsToLeft"),
|
|
action: () => void closeResultRunsToLeft(run.id),
|
|
disabled: resultRuns.value.findIndex((item) => item.id === run.id) <= 0,
|
|
icon: X,
|
|
},
|
|
{
|
|
label: t("tabs.closeResultRunsToRight"),
|
|
action: () => void closeResultRunsToRight(run.id),
|
|
disabled: resultRuns.value.findIndex((item) => item.id === run.id) >= resultRuns.value.length - 1,
|
|
icon: X,
|
|
},
|
|
];
|
|
}
|
|
|
|
async function closeCurrentQueryResult() {
|
|
if (!(await queryStore.closeQueryResult(props.activeTab.id))) return;
|
|
emit("update:activeOutputView", "result");
|
|
}
|
|
|
|
async function selectResultRun(runId: string) {
|
|
if (!(await queryStore.setActiveResultRun(props.activeTab.id, runId))) {
|
|
toast(t("tabs.missingResultRun"), 4000);
|
|
return false;
|
|
}
|
|
emit("update:activeOutputView", "result");
|
|
return true;
|
|
}
|
|
|
|
async function focusResultRunByIndex(index: number) {
|
|
const run = resultRuns.value[index];
|
|
if (!run) return;
|
|
if (!(await selectResultRun(run.id))) return;
|
|
await nextTick();
|
|
const runTabs = resultTabsScrollerRef.value?.querySelectorAll<HTMLElement>("[data-result-run-tab]");
|
|
const runTab = runTabs?.[index];
|
|
runTab?.focus({ preventScroll: true });
|
|
runTab?.scrollIntoView({ block: "nearest", inline: "nearest" });
|
|
}
|
|
|
|
function onResultRunTabKeydown(event: KeyboardEvent, currentIndex: number) {
|
|
const lastIndex = resultRuns.value.length - 1;
|
|
let targetIndex: number | undefined;
|
|
if (event.key === "ArrowLeft") targetIndex = currentIndex > 0 ? currentIndex - 1 : lastIndex;
|
|
if (event.key === "ArrowRight") targetIndex = currentIndex < lastIndex ? currentIndex + 1 : 0;
|
|
if (event.key === "Home") targetIndex = 0;
|
|
if (event.key === "End") targetIndex = lastIndex;
|
|
if (targetIndex === undefined || targetIndex < 0) return;
|
|
event.preventDefault();
|
|
void focusResultRunByIndex(targetIndex);
|
|
}
|
|
|
|
function toggleResultAutoSave() {
|
|
const enabled = queryStore.toggleResultAutoSave(props.activeTab.id);
|
|
toast(t(enabled ? "tabs.autoKeepResultsEnabled" : "tabs.autoKeepResultsDisabled"), 2500);
|
|
}
|
|
|
|
function selectResultItem(item: (typeof visibleResultItems.value)[number]) {
|
|
queryStore.setActiveResultIndex(props.activeTab.id, item.index);
|
|
emit("update:activeOutputView", "result");
|
|
nextTick(() => {
|
|
queryEditorRef.value?.previewStatementRange(resultSourceRange(props.activeTab.sql, item.result, item.index, activeEffectiveDatabaseType.value) ?? null);
|
|
});
|
|
}
|
|
|
|
function executionSummaryItemRange(item: ExecutionSummaryItem) {
|
|
if (typeof item.sourceFrom === "number" && typeof item.sourceTo === "number" && item.sql && props.activeTab.sql.slice(item.sourceFrom, item.sourceTo) === item.sql) {
|
|
return { from: item.sourceFrom, to: item.sourceTo };
|
|
}
|
|
return item.result ? resultSourceRange(props.activeTab.sql, item.result, item.statementIndex, activeEffectiveDatabaseType.value) : undefined;
|
|
}
|
|
|
|
function previewExecutionSummaryItem(item: ExecutionSummaryItem) {
|
|
queryEditorRef.value?.previewStatementRange(executionSummaryItemRange(item) ?? null);
|
|
}
|
|
|
|
function focusExecutionSummaryItem(item: ExecutionSummaryItem) {
|
|
queryEditorRef.value?.focusStatementRange(executionSummaryItemRange(item) ?? null);
|
|
}
|
|
|
|
async function copyExecutionSummaryError(error: string) {
|
|
try {
|
|
await copyToClipboard(error);
|
|
toast(t("grid.copied"));
|
|
} catch (copyError: any) {
|
|
toast(t("grid.copyFailed", { message: copyError?.message || String(copyError) }), 5000);
|
|
}
|
|
}
|
|
|
|
function dismissBatchRecovery() {
|
|
queryStore.dismissBatchSqlRecovery(props.activeTab.id);
|
|
}
|
|
|
|
function resumeBatchExecution(action: BatchSqlRecoveryAction) {
|
|
void queryStore.resumeBatchSql(props.activeTab.id, action);
|
|
}
|
|
|
|
function handleModRTarget(target: Element): boolean {
|
|
if (target.closest("[data-query-editor-root]")) return queryEditorRef.value?.openReplace() ?? false;
|
|
if (target.closest("[data-cell-detail-editor-root]")) return dataGridRef.value?.openCellDetailSearch() ?? false;
|
|
if (target.closest("[data-grid-root], [data-elasticsearch-json-response-root]")) return refreshData();
|
|
if (canReloadUnavailableDataTab(props.activeTab)) return refreshData();
|
|
return false;
|
|
}
|
|
|
|
function requestQueryEditorExecute() {
|
|
return queryEditorRef.value?.requestExecute();
|
|
}
|
|
|
|
function captureQueryEditorExecutionSnapshot() {
|
|
return queryEditorRef.value?.captureExecutionSnapshot();
|
|
}
|
|
|
|
function requestQueryEditorExecuteInNewResultTab() {
|
|
return queryEditorRef.value?.requestExecuteInNewResultTab();
|
|
}
|
|
|
|
function requestQueryEditorPreviewChanges(stackSql?: string) {
|
|
return queryEditorRef.value?.requestPreviewChanges?.(stackSql);
|
|
}
|
|
|
|
function shouldBlockQueryEditorExecutionShortcut(event: KeyboardEvent) {
|
|
return queryEditorRef.value?.shouldBlockExecutionShortcut?.(event) ?? false;
|
|
}
|
|
|
|
function acceptQueryEditorExecutionViewport(requestId: number) {
|
|
return queryEditorRef.value?.acceptGutterExecutionViewport(requestId) ?? false;
|
|
}
|
|
|
|
function cancelQueryEditorExecutionViewport(requestId: number) {
|
|
return queryEditorRef.value?.cancelGutterExecutionViewport(requestId) ?? false;
|
|
}
|
|
|
|
async function handleExportQuery(payload: { sql: string; format: "csv" | "xlsx" | "txt"; columnComments?: (string | null)[] }) {
|
|
const tab = props.activeTab;
|
|
if (!tab || tab.mode !== "query") return;
|
|
let filePath = `query-result.${payload.format}`;
|
|
if (isTauriRuntime()) {
|
|
const { save } = await import("@tauri-apps/plugin-dialog");
|
|
const filterName = payload.format === "csv" ? "CSV" : payload.format === "xlsx" ? "Excel" : "Text";
|
|
const picked = await save({ defaultPath: filePath, filters: [{ name: filterName, extensions: [payload.format] }] });
|
|
if (!picked) return;
|
|
filePath = picked as string;
|
|
}
|
|
await queryStore.exportQuerySqlDirect(tab.id, payload.sql, payload.format, filePath, payload.columnComments);
|
|
}
|
|
|
|
function pasteClipboardAsSqlInCondition() {
|
|
return queryEditorRef.value?.pasteClipboardAsSqlInCondition();
|
|
}
|
|
|
|
function applyTableStructureChanges() {
|
|
return tableStructureEditorRef.value?.applyChanges() ?? Promise.resolve(false);
|
|
}
|
|
|
|
async function insertRedisCommand(command: string): Promise<boolean> {
|
|
if (props.activeTab.mode !== "redis") return false;
|
|
return (await redisKeyBrowserRef.value?.insertCommand?.(command)) ?? false;
|
|
}
|
|
|
|
async function executeRedisCommand(command: string): Promise<boolean> {
|
|
if (props.activeTab.mode !== "redis") return false;
|
|
return (await redisKeyBrowserRef.value?.executeCommand?.(command)) ?? false;
|
|
}
|
|
|
|
defineExpose({
|
|
focusSearch,
|
|
openGoToColumn,
|
|
refreshData,
|
|
toggleResultsPane,
|
|
refreshQueryEditorCompletionCache,
|
|
handleModRTarget,
|
|
requestQueryEditorExecute,
|
|
captureQueryEditorExecutionSnapshot,
|
|
requestQueryEditorExecuteInNewResultTab,
|
|
requestQueryEditorPreviewChanges,
|
|
shouldBlockQueryEditorExecutionShortcut,
|
|
acceptQueryEditorExecutionViewport,
|
|
cancelQueryEditorExecutionViewport,
|
|
pasteClipboardAsSqlInCondition,
|
|
applyTableStructureChanges,
|
|
insertRedisCommand,
|
|
executeRedisCommand,
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="production-session-shell flex flex-col flex-1 min-h-0" :class="{ 'production-session-shell--active': activeProductionContext.active }">
|
|
<div v-if="activeProductionContext.active" class="production-session-strip flex h-7 shrink-0 items-center gap-2 border-b border-red-500/35 bg-red-500/10 px-3 text-xs font-semibold text-red-800 shadow-[inset_0_1px_0_rgb(239_68_68_/_0.28)] dark:text-red-200">
|
|
<ShieldAlert class="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
|
|
<span class="font-mono uppercase tracking-normal">{{ t("production.title") }}</span>
|
|
<span v-if="productionSessionDetail" class="min-w-0 truncate rounded-md border border-red-500/25 bg-background/65 px-1.5 py-0.5 font-medium text-red-700 dark:text-red-200">{{ productionSessionDetail }}</span>
|
|
</div>
|
|
<!-- Query mode: editor + results -->
|
|
<template v-if="activeTab.mode === 'query'">
|
|
<Splitpanes horizontal class="query-output-splitpanes flex-1 min-h-0 overflow-hidden" @resized="onResultsResized">
|
|
<Pane class="min-h-0" :size="editorPaneSize" :min-size="resultsPaneOpen ? 15 : 100">
|
|
<div class="h-full flex flex-col relative">
|
|
<div v-if="activeProductionContext.active" class="production-watermark pointer-events-none absolute inset-0 z-10 grid select-none" aria-hidden="true">
|
|
<span v-for="index in 4" :key="index" class="production-watermark__label whitespace-nowrap font-mono text-6xl font-extrabold text-red-700/[0.12] dark:text-red-200/[0.1]">{{ productionWatermarkText }}</span>
|
|
</div>
|
|
<QueryEditor
|
|
ref="queryEditorRef"
|
|
class="relative z-0 flex-1"
|
|
auto-focus
|
|
:model-value="activeTab.sql"
|
|
:connection-id="activeTab.connectionId"
|
|
:catalog="activeTab.catalog"
|
|
:database="activeTab.database"
|
|
:schema="activeTab.schema"
|
|
:client-session-id="activeTab.id"
|
|
:completion-context-version="activeTab.completionContextVersion"
|
|
:database-type="activeEffectiveDatabaseType"
|
|
:dialect="editorDialect"
|
|
:syntax-dialect="editorSyntaxDialect"
|
|
:format-dialect="activeSqlFormatDialect"
|
|
:format-request-id="formatSqlRequest?.tabId === activeTab.id ? formatSqlRequest.id : undefined"
|
|
:compress-request-id="compressSqlRequest?.tabId === activeTab.id ? compressSqlRequest.id : undefined"
|
|
:execution-error="activeQueryError"
|
|
:execution-error-sql="activeTab.lastExecutedSql"
|
|
:result-columns="activeTab.result?.columns"
|
|
:result-source-statement="activeTab.result?.sourceStatement"
|
|
:result-source-from="activeTab.result?.sourceFrom"
|
|
:result-source-to="activeTab.result?.sourceTo"
|
|
:statement-execution-markers="activeStatementExecutionMarkers"
|
|
:initial-viewport="activeTab.editorViewport"
|
|
:initial-selection="activeTab.editorSelection"
|
|
:force-word-wrap="activeTab.forceWordWrap"
|
|
@update:model-value="emit('editorUpdate', activeTab.id, $event)"
|
|
@selection-change="emit('editorSelectionChange', $event)"
|
|
@send-selection-to-ai="emit('sendSelectionToAi', $event)"
|
|
@cursor-change="emit('editorCursorChange', $event)"
|
|
@preview-changes-available="emit('previewChangesAvailable', $event)"
|
|
@viewport-change="emit('editorViewportChange', activeTab.id, $event)"
|
|
@selection-state-change="emit('editorSelectionStateChange', activeTab.id, $event)"
|
|
@format-error="emit('formatError')"
|
|
@execute="emit('execute', $event)"
|
|
@execute-in-new-result-tab="emit('executeInNewResultTab', $event)"
|
|
@export-query="handleExportQuery"
|
|
@save="emit('saveSql')"
|
|
@click-table="onHandleClickTable"
|
|
@view-table-data="onHandleViewTableData"
|
|
@edit-table-structure="onHandleEditTableStructure"
|
|
@view-table-ddl="onHandleViewTableDdl"
|
|
@open-object-source="onHandleOpenObjectSource"
|
|
@click-column="onHandleClickColumn"
|
|
@close-column-panel="onHandleCloseColumnPanel"
|
|
/>
|
|
<ColumnInfoPanel
|
|
v-if="showColumnInfo"
|
|
:columns="columnInfoColumns"
|
|
:loading="columnInfoLoading"
|
|
:error="columnInfoError"
|
|
:database-type="activeEffectiveDatabaseType"
|
|
:is-gaussdb-m="activeEffectiveDatabaseType === 'gaussdb' && activeResultConnection?.driver_profile?.toLowerCase() === 'gaussdb-m'"
|
|
@close="closeColumnInfo"
|
|
/>
|
|
<Button v-if="hasQueryOutput && !resultsPaneOpen" variant="secondary" size="sm" class="absolute bottom-3 right-3 z-20 h-7 gap-1.5 rounded-full border bg-background/95 px-3 text-xs shadow-lg hover:bg-accent" @click="resultsPaneOpen = true">
|
|
<ChevronUp class="h-3.5 w-3.5" />
|
|
{{ t("editor.showResultsPane") }}
|
|
</Button>
|
|
</div>
|
|
</Pane>
|
|
<Pane v-if="resultsPaneOpen" class="min-h-0" :size="resultsPaneSize" :min-size="20">
|
|
<div class="h-full flex flex-col">
|
|
<div v-if="hasQueryOutput" class="flex h-10 shrink-0 items-center gap-1 border-b bg-muted/20 px-2">
|
|
<Button
|
|
v-if="activeTab.mode === 'query' && activeTab.result"
|
|
variant="ghost"
|
|
size="icon"
|
|
class="h-6 w-7 shrink-0"
|
|
:class="resultAutoSave ? 'bg-primary/10 text-primary hover:bg-primary/15 hover:text-primary' : 'text-muted-foreground hover:bg-accent hover:text-foreground'"
|
|
:title="resultAutoSave ? t('tabs.autoKeepResultsEnabled') : t('tabs.autoKeepResults')"
|
|
:aria-label="resultAutoSave ? t('tabs.autoKeepResultsEnabled') : t('tabs.autoKeepResults')"
|
|
:aria-pressed="resultAutoSave"
|
|
@click="toggleResultAutoSave"
|
|
>
|
|
<Pin class="h-3.5 w-3.5" :class="{ 'fill-current': resultAutoSave }" />
|
|
</Button>
|
|
<Button v-if="canCloseQueryResult" variant="ghost" size="icon" class="h-6 w-7 shrink-0 text-muted-foreground hover:bg-accent hover:text-foreground" :title="t('tabs.closeResult')" :aria-label="t('tabs.closeResult')" @click="closeCurrentQueryResult">
|
|
<X class="h-3.5 w-3.5" />
|
|
</Button>
|
|
<template v-if="resultRuns.length > 0 || visibleResultItems.length > 0">
|
|
<span class="mx-1 h-4 w-px shrink-0 bg-border" />
|
|
<div v-if="showResultRunTabs" data-result-run-tabs-region class="relative min-w-0 flex-1 self-stretch">
|
|
<div v-if="hasResultTabOverflow" class="result-tab-scrollbar" :class="{ 'result-tab-scrollbar--dragging': isResultTabsScrollbarDragging }" @pointerdown="startResultTabsScrollbarDrag">
|
|
<div class="result-tab-scrollbar__thumb" :style="resultTabsScrollbarThumbStyle" />
|
|
</div>
|
|
<div ref="resultTabsScrollerRef" class="result-tab-scroll flex h-full items-center gap-1 overflow-x-auto overflow-y-hidden px-1" :style="resultTabsScrollerStyle" @scroll="updateResultTabsScrollbar" @wheel="onResultTabsWheel">
|
|
<div role="tablist" :aria-label="t('tabs.resultRuns')" class="flex h-full shrink-0 items-center gap-1">
|
|
<CustomContextMenu v-for="(run, runIndex) in resultRuns" :key="run.id" :items="() => resultRunContextMenuItems(run)" v-slot="{ onContextMenu }">
|
|
<div
|
|
role="presentation"
|
|
class="group/result-run inline-flex h-7 shrink-0 select-none items-center overflow-hidden rounded-md border transition-colors"
|
|
:class="run.active ? 'border-border bg-background text-foreground shadow-sm' : 'border-transparent text-muted-foreground hover:border-border/70 hover:bg-background/70 hover:text-foreground'"
|
|
@contextmenu="onContextMenu"
|
|
>
|
|
<button
|
|
type="button"
|
|
role="tab"
|
|
data-result-run-tab
|
|
:tabindex="run.active ? 0 : -1"
|
|
:aria-selected="run.active"
|
|
:data-active-result-run="run.active ? 'true' : undefined"
|
|
class="flex h-full select-none items-center gap-1 whitespace-nowrap pl-2.5 pr-1 text-xs font-medium outline-none focus-visible:bg-accent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/50"
|
|
@click="selectResultRun(run.id)"
|
|
@keydown="onResultRunTabKeydown($event, runIndex)"
|
|
>
|
|
<Pin v-if="run.pinned" class="h-3 w-3 shrink-0 fill-current text-primary" />
|
|
{{ run.title || t("tabs.runN", { n: run.sequence }) }}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="mr-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-sm text-muted-foreground/70 outline-none transition-colors hover:bg-accent hover:text-foreground focus-visible:bg-accent focus-visible:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50"
|
|
:title="t('tabs.removeRun', { n: run.sequence })"
|
|
:aria-label="t('tabs.removeRun', { n: run.sequence })"
|
|
@click.stop.prevent="removeResultRun(run.id)"
|
|
>
|
|
<X class="h-3 w-3" />
|
|
</button>
|
|
</div>
|
|
</CustomContextMenu>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="showResultRunSelector" class="min-w-0 flex-1">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger as-child>
|
|
<Button variant="ghost" size="sm" class="h-6 max-w-48 gap-1 px-2 text-xs">
|
|
<span class="min-w-0 truncate">{{ activeResultRunItem ? activeResultRunItem.title || t("tabs.runN", { n: activeResultRunItem.sequence }) : t("tabs.resultRuns") }}</span>
|
|
<ChevronDown class="h-3.5 w-3.5 shrink-0" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="start" class="w-48">
|
|
<CustomContextMenu v-for="run in resultRuns" :key="run.id" :items="() => resultRunContextMenuItems(run)" v-slot="{ onContextMenu }">
|
|
<DropdownMenuItem class="flex items-center gap-2 pr-1" @select="selectResultRun(run.id)" @contextmenu="onContextMenu">
|
|
<Check v-if="run.active" class="h-3.5 w-3.5 shrink-0" />
|
|
<span v-else class="h-3.5 w-3.5 shrink-0" />
|
|
<Pin v-if="run.pinned" class="h-3 w-3 shrink-0 fill-current text-primary" />
|
|
<span class="min-w-0 flex-1 truncate">{{ run.title || t("tabs.runN", { n: run.sequence }) }}</span>
|
|
<button
|
|
type="button"
|
|
class="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-sm text-muted-foreground hover:bg-accent hover:text-foreground"
|
|
:title="t('tabs.removeRun', { n: run.sequence })"
|
|
:aria-label="t('tabs.removeRun', { n: run.sequence })"
|
|
@click.stop.prevent="removeResultRun(run.id)"
|
|
>
|
|
<X class="h-3 w-3" />
|
|
</button>
|
|
</DropdownMenuItem>
|
|
</CustomContextMenu>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
<div v-else-if="resultRuns.length > 0" class="min-w-0 flex-1" />
|
|
<span v-if="resultRuns.length > 0 && visibleResultItems.length > 0" class="mx-1 h-4 w-px shrink-0 bg-border" />
|
|
<div v-if="visibleResultItems.length > 0" data-result-set-tabs-region role="group" :aria-label="t('tabs.resultSets')" class="flex h-full min-w-0 items-center gap-1" :class="resultRuns.length > 0 ? 'shrink-0' : 'flex-1 overflow-x-auto'">
|
|
<LightTooltip v-for="item in visibleResultItems" :key="item.index" :text="item.label || item.title || t('tabs.resultN', { n: item.n })" :disabled="!item.labelTruncated && !(!item.label && item.title)" :delay="150" :close-delay="0" nowrap>
|
|
<Button size="sm" :variant="activeOutputView === 'result' && (activeTab.activeResultIndex ?? 0) === item.index ? 'default' : 'ghost'" class="h-6 min-w-0 max-w-48 shrink-0 px-2 text-xs" :aria-label="item.label || t('tabs.resultN', { n: item.n })" @click="selectResultItem(item)">
|
|
<span class="block min-w-0 max-w-44 whitespace-nowrap">{{ item.displayLabel || item.label || t("tabs.resultN", { n: item.n }) }}</span>
|
|
</Button>
|
|
</LightTooltip>
|
|
</div>
|
|
</template>
|
|
<div class="ml-auto flex shrink-0 items-center gap-1">
|
|
<Popover v-if="activeOutputView === 'result' && activeTab.result && hasTabularResult && !activeElasticsearchJsonResponse" v-model:open="dataGridViewOptionsOpen">
|
|
<PopoverTrigger as-child>
|
|
<Button variant="ghost" size="icon" class="h-6 w-7 shrink-0 text-foreground hover:bg-accent" :title="t('grid.viewOptions')" :aria-label="t('grid.viewOptions')">
|
|
<Wrench class="h-4 w-4" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent
|
|
align="end"
|
|
:collision-padding="8"
|
|
class="w-max min-w-44 max-h-[var(--reka-popover-content-available-height)] max-w-[calc(100vw-2rem)] gap-0 overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-0 text-popover-foreground shadow-xl"
|
|
@click.stop
|
|
@keydown.stop
|
|
>
|
|
<div class="border-b bg-muted/40 px-3 py-2">
|
|
<div class="text-xs font-semibold">{{ t("grid.viewOptions") }}</div>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-3 px-3 py-1.5 text-xs">
|
|
<div class="min-w-0 flex items-center gap-2 font-medium">
|
|
<PanelsTopLeft class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
|
<span>{{ t("grid.resultRunDisplayMode") }}</span>
|
|
</div>
|
|
<div role="group" :aria-label="t('grid.resultRunDisplayMode')" class="grid w-32 grid-cols-2 rounded-md border bg-muted/40 p-0.5">
|
|
<button
|
|
type="button"
|
|
class="h-5 min-w-0 truncate whitespace-nowrap rounded-[5px] px-2 text-xs transition-colors"
|
|
:class="resultRunDisplayMode === 'list' ? 'bg-background font-semibold text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'"
|
|
@click="setResultRunDisplayMode('list')"
|
|
>
|
|
{{ t("grid.resultRunDisplayList") }}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="h-5 min-w-0 truncate whitespace-nowrap rounded-[5px] px-2 text-xs transition-colors"
|
|
:class="resultRunDisplayMode === 'tabs' ? 'bg-background font-semibold text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'"
|
|
@click="setResultRunDisplayMode('tabs')"
|
|
>
|
|
{{ t("grid.resultRunDisplayTabs") }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-3 px-3 py-1.5 text-xs">
|
|
<div class="min-w-0 flex items-center gap-2 font-medium">
|
|
<SquareDashed class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
|
<span>{{ t("grid.renderMode") }}</span>
|
|
</div>
|
|
<LightTooltip :text="t('grid.renderModeHint')" side="left" :side-offset="6" :delay="0" :open-on-focus="false">
|
|
<div class="grid w-32 grid-cols-2 rounded-md border bg-muted/40 p-0.5">
|
|
<button
|
|
type="button"
|
|
class="h-5 min-w-0 truncate whitespace-nowrap rounded-[5px] px-2 text-xs transition-colors"
|
|
:class="dataGridRenderMode === 'canvas' ? 'bg-background font-semibold text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'"
|
|
@click="setDataGridRenderMode('canvas')"
|
|
>
|
|
{{ t("grid.canvasRenderMode") }}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="h-5 min-w-0 truncate whitespace-nowrap rounded-[5px] px-2 text-xs transition-colors"
|
|
:class="dataGridRenderMode === 'dom' ? 'bg-background font-semibold text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'"
|
|
@click="setDataGridRenderMode('dom')"
|
|
>
|
|
{{ t("grid.domRenderMode") }}
|
|
</button>
|
|
</div>
|
|
</LightTooltip>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-3 px-3 py-1.5 text-xs">
|
|
<div class="min-w-0 flex items-center gap-2 font-medium">
|
|
<Columns3Cog class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
|
<span>{{ t("grid.columnWidth") }}</span>
|
|
</div>
|
|
<div class="grid w-48 grid-cols-3 rounded-md border bg-muted/40 p-0.5">
|
|
<button
|
|
v-for="density in ['compact', 'standard', 'comfortable'] as const"
|
|
:key="density"
|
|
type="button"
|
|
class="h-5 min-w-0 truncate whitespace-nowrap rounded-[5px] px-1.5 text-xs transition-colors"
|
|
:class="columnWidthDensity === density ? 'bg-background font-semibold text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'"
|
|
@click="setColumnWidthDensity(density)"
|
|
>
|
|
{{ t(`grid.columnWidth${density.charAt(0).toUpperCase()}${density.slice(1)}`) }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<DataGridFontFamilyControl />
|
|
<div class="flex items-center justify-between gap-3 px-3 py-1.5 text-xs">
|
|
<div class="min-w-0 flex items-center gap-2 font-medium">
|
|
<span class="flex h-3.5 w-3.5 shrink-0 items-center justify-center text-[11px] font-semibold text-muted-foreground">A</span>
|
|
<span>{{ t("grid.tableFontSize") }}</span>
|
|
</div>
|
|
<div class="flex h-6 w-32 items-center rounded-md border bg-muted/40 p-0.5">
|
|
<button
|
|
type="button"
|
|
class="flex h-5 w-8 items-center justify-center rounded-[5px] bg-background text-foreground shadow-sm transition-colors hover:text-foreground disabled:pointer-events-none disabled:bg-muted/40 disabled:text-muted-foreground disabled:opacity-50 disabled:shadow-none"
|
|
:disabled="tableFontSize <= TABLE_FONT_SIZE_MIN"
|
|
:aria-label="t('common.decrease')"
|
|
@click="decreaseTableFontSize"
|
|
>
|
|
<Minus class="h-3.5 w-3.5" />
|
|
</button>
|
|
<span class="flex-1 text-center text-xs font-semibold tabular-nums">{{ tableFontSize }}</span>
|
|
<button
|
|
type="button"
|
|
class="flex h-5 w-8 items-center justify-center rounded-[5px] bg-background text-foreground shadow-sm transition-colors hover:text-foreground disabled:pointer-events-none disabled:bg-muted/40 disabled:text-muted-foreground disabled:opacity-50 disabled:shadow-none"
|
|
:disabled="tableFontSize >= TABLE_FONT_SIZE_MAX"
|
|
:aria-label="t('common.increase')"
|
|
@click="increaseTableFontSize"
|
|
>
|
|
<Plus class="h-3.5 w-3.5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-3 px-3 py-1.5 text-xs">
|
|
<div class="min-w-0 flex items-center gap-2 font-medium">
|
|
<Search class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
|
<span>{{ t("grid.searchMode") }}</span>
|
|
</div>
|
|
<LightTooltip :text="t('grid.searchModeHint')" side="left" :side-offset="6" :delay="0" :open-on-focus="false">
|
|
<div class="grid w-32 grid-cols-2 rounded-md border bg-muted/40 p-0.5">
|
|
<button
|
|
type="button"
|
|
class="h-5 min-w-0 truncate whitespace-nowrap rounded-[5px] px-2 text-xs transition-colors"
|
|
:class="dataGridSearchMode === 'filter' ? 'bg-background font-semibold text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'"
|
|
@click="setDataGridSearchMode('filter')"
|
|
>
|
|
{{ t("grid.searchModeFilter") }}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="h-5 min-w-0 truncate whitespace-nowrap rounded-[5px] px-2 text-xs transition-colors"
|
|
:class="dataGridSearchMode === 'highlight' ? 'bg-background font-semibold text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'"
|
|
@click="setDataGridSearchMode('highlight')"
|
|
>
|
|
{{ t("grid.searchModeHighlight") }}
|
|
</button>
|
|
</div>
|
|
</LightTooltip>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-3 px-3 py-1.5 text-xs">
|
|
<div class="min-w-0 flex items-center gap-2 font-medium">
|
|
<Rows3 class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
|
<span>{{ t("grid.transposeMultiRowToggle") }}</span>
|
|
</div>
|
|
<LightTooltip :text="t('grid.transposeMultiRowHint')" side="left" :side-offset="6" :delay="0" :open-on-focus="false">
|
|
<div class="grid w-32 grid-cols-2 rounded-md border bg-muted/40 p-0.5">
|
|
<button
|
|
type="button"
|
|
class="h-5 min-w-0 truncate whitespace-nowrap rounded-[5px] px-2 text-xs transition-colors"
|
|
:class="!dataGridRef?.multiRowTranspose ? 'bg-background font-semibold text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'"
|
|
@click="dataGridRef?.setMultiRowTranspose(false)"
|
|
>
|
|
{{ t("grid.transposeSingleRow") }}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="h-5 min-w-0 truncate whitespace-nowrap rounded-[5px] px-2 text-xs transition-colors"
|
|
:class="dataGridRef?.multiRowTranspose ? 'bg-background font-semibold text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'"
|
|
@click="dataGridRef?.setMultiRowTranspose(true)"
|
|
>
|
|
{{ t("grid.transposeMultiRow") }}
|
|
</button>
|
|
</div>
|
|
</LightTooltip>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-3 px-3 py-1.5 text-xs">
|
|
<div class="min-w-0 flex items-center gap-2 font-medium">
|
|
<component :is="numericColumnRightAlign ? AlignRight : AlignLeft" class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
|
<span>{{ t("grid.numericColumnAlign") }}</span>
|
|
</div>
|
|
<div class="grid w-32 grid-cols-2 rounded-md border bg-muted/40 p-0.5">
|
|
<button
|
|
type="button"
|
|
class="h-5 min-w-0 truncate whitespace-nowrap rounded-[5px] px-2 text-xs transition-colors"
|
|
:class="!numericColumnRightAlign ? 'bg-background font-semibold text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'"
|
|
@click="setNumericColumnRightAlign(false)"
|
|
>
|
|
{{ t("grid.numericColumnAlignLeft") }}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="h-5 min-w-0 truncate whitespace-nowrap rounded-[5px] px-2 text-xs transition-colors"
|
|
:class="numericColumnRightAlign ? 'bg-background font-semibold text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'"
|
|
@click="setNumericColumnRightAlign(true)"
|
|
>
|
|
{{ t("grid.numericColumnAlignRight") }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-3 px-3 py-1.5 text-xs">
|
|
<div class="min-w-0 flex items-center gap-2 font-medium">
|
|
<CheckSquare2 class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
|
<span>{{ t("grid.booleanDisplayMode") }}</span>
|
|
</div>
|
|
<div class="grid w-32 grid-cols-2 rounded-md border bg-muted/40 p-0.5">
|
|
<button
|
|
type="button"
|
|
class="h-5 min-w-0 truncate whitespace-nowrap rounded-[5px] px-2 text-xs transition-colors"
|
|
:class="booleanDisplayMode === 'dropdown' ? 'bg-background font-semibold text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'"
|
|
@click="setBooleanDisplayMode('dropdown')"
|
|
>
|
|
{{ t("grid.booleanDisplayDropdown") }}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="h-5 min-w-0 truncate whitespace-nowrap rounded-[5px] px-2 text-xs transition-colors"
|
|
:class="booleanDisplayMode === 'checkbox' ? 'bg-background font-semibold text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'"
|
|
@click="setBooleanDisplayMode('checkbox')"
|
|
>
|
|
{{ t("grid.booleanDisplayCheckbox") }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-3 px-3 py-1.5 text-xs">
|
|
<div class="min-w-0 flex items-center gap-2 font-medium">
|
|
<Palette class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
|
<span>{{ t("grid.colorizeDataTypes") }}</span>
|
|
</div>
|
|
<Switch size="sm" :model-value="colorizeDataGridCellTypes" :aria-label="t('grid.colorizeDataTypes')" @update:model-value="setColorizeDataGridCellTypes" />
|
|
</div>
|
|
<div class="flex items-center justify-between gap-3 px-3 py-1.5 text-xs" :class="{ 'opacity-60': !dataGridRef?.canToggleAllNullColumns }">
|
|
<span class="min-w-0 flex items-center gap-2 font-medium">
|
|
<EyeOff class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
|
{{ t("grid.hideNullColumns") }}
|
|
<span v-if="(dataGridRef?.allNullColumnCount ?? 0) > 0" class="text-muted-foreground tabular-nums"> ({{ dataGridRef?.allNullColumnCount }}) </span>
|
|
</span>
|
|
<Switch size="sm" :model-value="!!dataGridRef?.nullColumnsHidden" :disabled="!dataGridRef?.canToggleAllNullColumns" :aria-label="t('grid.hideNullColumns')" @update:model-value="dataGridRef?.toggleAllNullColumns()" />
|
|
</div>
|
|
<DataGridCopyFormatControl
|
|
:current-label="dataGridRef?.defaultCopyPreferenceLabel ?? '-'"
|
|
:current-value="dataGridRef?.defaultCopyPreference ?? ''"
|
|
:items="dataGridRef?.copyPreferenceMenuItems ?? []"
|
|
@select="dataGridRef?.setDefaultCopyPreference($event)"
|
|
@configure="openDataGridExtractorConfiguration"
|
|
/>
|
|
</PopoverContent>
|
|
</Popover>
|
|
<LightTooltip :text="t('editor.hideResultsPane')" side="bottom" :delay="0" :close-delay="0" nowrap>
|
|
<Button variant="ghost" size="icon" class="h-6 w-7 shrink-0 text-muted-foreground hover:text-foreground" :title="t('editor.hideResultsPane')" :aria-label="t('editor.hideResultsPane')" @click="resultsPaneOpen = false">
|
|
<ChevronDown class="h-3.5 w-3.5" />
|
|
</Button>
|
|
</LightTooltip>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Keep this height in sync with the embedded result toolbar. -->
|
|
<div v-if="hasQueryOutput && showStandaloneResultToolbar" ref="standaloneResultToolbarRef" class="flex h-8 shrink-0 items-center border-b bg-muted/20">
|
|
<QueryResultViewSwitcher
|
|
:active-view="activeOutputView"
|
|
:can-show-result="canShowResultOutput"
|
|
:can-show-summary="hasExecutionSummary"
|
|
:can-show-chart="hasNumericData && !activeElasticsearchJsonResponse"
|
|
:can-show-messages="canShowMessagesOutput"
|
|
:message-count="resultMessageCount"
|
|
:compact="standaloneResultToolbarCompact"
|
|
@select-view="emit('update:activeOutputView', $event)"
|
|
/>
|
|
<QueryResultToolbarActions
|
|
class="ml-auto"
|
|
:active-view="activeOutputView"
|
|
:can-show-explain="canShowExplainOutput"
|
|
:can-export-archive="canExportResultArchive"
|
|
:archive-exporting="resultArchiveExporting"
|
|
:compact="standaloneResultToolbarCompact"
|
|
@select-explain="emit('update:activeOutputView', 'explain')"
|
|
@export-archive="exportResultArchive"
|
|
/>
|
|
</div>
|
|
|
|
<ExplainPlanViewer
|
|
v-if="activeOutputView === 'explain'"
|
|
class="flex-1 min-h-0"
|
|
:plan="activeTab.explainPlan"
|
|
:error="activeTab.explainError"
|
|
:loading="activeTab.isExplaining"
|
|
:source-sql="activeTab.lastExplainedSql"
|
|
:explain-sql="activeTab.explainSql"
|
|
:table-result="activeTab.explainTableResult"
|
|
:table-error="activeTab.explainTableError"
|
|
/>
|
|
|
|
<QueryChart v-else-if="activeOutputView === 'chart' && activeTab.result && !activeElasticsearchJsonResponse" class="flex-1 min-h-0" :result="activeTab.result" />
|
|
|
|
<div v-else-if="activeOutputView === 'summary'" class="flex flex-1 min-h-0 flex-col bg-background">
|
|
<div v-if="summaryItems.length === 0" class="flex h-full items-center justify-center text-sm text-muted-foreground">
|
|
<Loader2 v-if="activeTab.isExecuting" class="mr-2 h-4 w-4 animate-spin" />
|
|
<template v-if="activeTab.isExecuting">{{ t("executionSummary.executing") }}</template>
|
|
<template v-else>{{ t("executionSummary.empty") }}</template>
|
|
</div>
|
|
<div v-else class="flex h-full min-h-0 min-w-[46rem] flex-col">
|
|
<div v-if="batchExecutionProgress" class="z-10 shrink-0 border-b bg-background/95 px-3 py-2 backdrop-blur">
|
|
<div class="mb-1.5 flex items-center gap-3 text-xs">
|
|
<span class="font-medium">{{ activeTab.isExecuting ? t("executionSummary.executing") : t("executionSummary.finished") }}</span>
|
|
<span class="tabular-nums text-muted-foreground">{{ batchExecutionProgress.completed }} / {{ batchExecutionProgress.total }}</span>
|
|
<span class="ml-auto tabular-nums text-muted-foreground">{{ batchExecutionPercent }}%</span>
|
|
</div>
|
|
<div class="h-1.5 overflow-hidden rounded-full bg-muted">
|
|
<div class="h-full rounded-full bg-primary transition-[width] duration-200" :style="{ width: `${batchExecutionPercent}%` }" />
|
|
</div>
|
|
</div>
|
|
<div v-if="batchRecovery" class="flex shrink-0 items-center gap-3 border-b border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive">
|
|
<CircleAlert class="h-4 w-4 shrink-0" />
|
|
<span class="min-w-0 flex-1 truncate">
|
|
{{ t("executionSummary.recoveryPrompt", { statement: batchRecovery.failedStatementIndex + 1, count: batchRecovery.remainingStatementCount }) }}
|
|
</span>
|
|
<div class="flex shrink-0 items-center gap-1">
|
|
<Button variant="ghost" size="sm" class="h-6 gap-1 px-2 text-xs text-foreground hover:bg-background/70" @click="dismissBatchRecovery">
|
|
<CircleStop class="h-3.5 w-3.5" />
|
|
{{ t("executionSummary.stop") }}
|
|
</Button>
|
|
<Button variant="ghost" size="sm" class="h-6 gap-1 px-2 text-xs text-foreground hover:bg-background/70" @click="resumeBatchExecution('retry')">
|
|
<RotateCcw class="h-3.5 w-3.5" />
|
|
{{ t("executionSummary.retry") }}
|
|
</Button>
|
|
<Button variant="ghost" size="sm" class="h-6 gap-1 px-2 text-xs text-foreground hover:bg-background/70" @click="resumeBatchExecution('skip')">
|
|
<SkipForward class="h-3.5 w-3.5" />
|
|
{{ t("executionSummary.skipAndContinue") }}
|
|
</Button>
|
|
<LightTooltip :text="t('executionSummary.skipAllHint')" side="bottom" :delay="0" :close-delay="0" nowrap>
|
|
<Button variant="ghost" size="sm" class="h-6 gap-1 px-2 text-xs text-foreground hover:bg-background/70" @click="resumeBatchExecution('skip-all')">
|
|
<ListX class="h-3.5 w-3.5" />
|
|
{{ t("executionSummary.skipAll") }}
|
|
</Button>
|
|
</LightTooltip>
|
|
</div>
|
|
</div>
|
|
<div class="grid shrink-0 grid-cols-[4rem_minmax(14rem,1fr)_7rem_7rem_6rem] border-b bg-muted/30 px-3 py-2 text-xs font-medium text-muted-foreground">
|
|
<div>{{ t("executionSummary.statement") }}</div>
|
|
<div>{{ t("executionSummary.sql") }}</div>
|
|
<div>{{ t("executionSummary.status") }}</div>
|
|
<div class="text-right">{{ t("executionSummary.rows") }}</div>
|
|
<div class="text-right">{{ t("executionSummary.time") }}</div>
|
|
</div>
|
|
<DynamicScroller v-slot="{ item, index, active }" class="min-h-0 flex-1 border-b" :items="summaryItems" :min-item-size="37" :buffer="600" :skip-hover="true" key-field="statementIndex">
|
|
<DynamicScrollerItem :item="item" :active="active" :data-index="index" :size-dependencies="[item.error]">
|
|
<div class="relative grid w-full grid-cols-[4rem_minmax(14rem,1fr)_7rem_7rem_6rem] items-center border-b px-3 py-2 text-left text-xs last:border-b-0">
|
|
<button
|
|
type="button"
|
|
class="absolute inset-0 z-0 cursor-pointer text-left transition-colors hover:bg-muted/35 focus-visible:bg-muted/40 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-primary"
|
|
:title="item.error || item.sql"
|
|
:aria-label="item.error || item.sql || t('executionSummary.noSql')"
|
|
@click="previewExecutionSummaryItem(item)"
|
|
@dblclick="focusExecutionSummaryItem(item)"
|
|
@keydown.enter.prevent="focusExecutionSummaryItem(item)"
|
|
/>
|
|
<div class="pointer-events-none relative z-[1] font-mono text-muted-foreground">#{{ item.statementIndex + 1 }}</div>
|
|
<div class="relative z-[1] min-w-0 cursor-pointer" @click="previewExecutionSummaryItem(item)" @dblclick="focusExecutionSummaryItem(item)">
|
|
<div class="truncate font-mono text-[11px] text-foreground">{{ item.sql || t("executionSummary.noSql") }}</div>
|
|
<div v-if="item.error" class="mt-0.5 flex min-w-0 items-center gap-1 text-[11px] text-destructive">
|
|
<span data-native-clipboard class="min-w-0 flex-1 cursor-text select-text truncate" :title="item.error" @mousedown.stop @click.stop @dblclick.stop>{{ item.error }}</span>
|
|
<LightTooltip :text="t('grid.copy')" side="bottom" :delay="0" :close-delay="0" nowrap>
|
|
<button type="button" class="pointer-events-auto flex h-5 w-5 shrink-0 items-center justify-center rounded text-destructive/70 hover:bg-destructive/10 hover:text-destructive" :aria-label="t('grid.copy')" @mousedown.stop @click.stop="copyExecutionSummaryError(item.error)">
|
|
<Copy class="h-3 w-3" />
|
|
</button>
|
|
</LightTooltip>
|
|
</div>
|
|
</div>
|
|
<div class="pointer-events-none relative z-[1]">
|
|
<span
|
|
class="inline-flex h-5 items-center gap-1 rounded-full border px-2 text-[10px]"
|
|
:class="{
|
|
'border-primary/35 bg-primary/10 text-primary': item.status === 'running',
|
|
'border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300': item.status === 'success',
|
|
'border-destructive/40 bg-destructive/10 text-destructive': item.status === 'error',
|
|
'border-border bg-muted/40 text-muted-foreground': item.status === 'pending' || item.status === 'skipped',
|
|
'border-amber-500/35 bg-amber-500/10 text-amber-700 dark:text-amber-300': item.status === 'cancelled',
|
|
}"
|
|
>
|
|
<Loader2 v-if="item.status === 'running'" class="h-3 w-3 animate-spin" />
|
|
<Check v-else-if="item.status === 'success'" class="h-3 w-3" />
|
|
<X v-else-if="item.status === 'error'" class="h-3 w-3" />
|
|
<SquareDashed v-else class="h-3 w-3" />
|
|
{{ t(`executionSummary.statuses.${item.status}`) }}
|
|
</span>
|
|
</div>
|
|
<div class="pointer-events-none relative z-[1] text-right tabular-nums">{{ item.status === "pending" || item.status === "running" || item.status === "skipped" ? "—" : item.rowCount.toLocaleString() }}</div>
|
|
<div class="pointer-events-none relative z-[1] text-right tabular-nums">{{ item.executionTimeMs > 0 || item.status === "success" || item.status === "error" ? `${item.executionTimeMs}ms` : "—" }}</div>
|
|
</div>
|
|
</DynamicScrollerItem>
|
|
</DynamicScroller>
|
|
<div class="shrink-0 px-3 py-2 text-[11px] text-muted-foreground">{{ t("executionSummary.navigationHint") }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<QueryMessagesView v-else-if="activeOutputView === 'messages'" class="flex-1 min-h-0" :messages="activeTab.result?.messages ?? []" />
|
|
|
|
<template v-else>
|
|
<ElasticsearchJsonResponsePanel v-if="activeElasticsearchJsonResponse" ref="elasticsearchJsonResponsePanelRef" class="flex-1 min-h-0" :status="activeElasticsearchJsonResponse.status" :body="activeElasticsearchJsonResponse.body" />
|
|
<ElasticsearchJsonResponsePanel v-else-if="showElasticsearchRawJson && activeElasticsearchRawBody" ref="elasticsearchJsonResponsePanelRef" class="flex-1 min-h-0" :status="200" :body="activeElasticsearchRawBody" can-show-table @show-table="showElasticsearchRawJson = false" />
|
|
<DataGrid
|
|
v-else-if="activeTab.result && hasTabularResult"
|
|
ref="dataGridRef"
|
|
:key="activeResultGridInstanceKey"
|
|
:cache-key="activeResultGridCacheKey"
|
|
:column-width-cache-key="activeResultGridColumnWidthCacheKey"
|
|
:pending-state-key="activeResultGridInstanceKey"
|
|
class="flex-1 min-h-0"
|
|
:result="activeTab.result"
|
|
:sort-column="activeTab.resultSortColumn"
|
|
:sort-column-index="activeTab.resultSortColumnIndex"
|
|
:sort-direction="activeTab.resultSortDirection"
|
|
:sort-mode="activeTab.resultSortMode"
|
|
:initial-order-by-input="activeTab.orderByInput"
|
|
:sql="activeResultSql"
|
|
:export-sql="activeResultExportSql"
|
|
:loading="activeTab.isExecuting"
|
|
:editable="!!activeTab.queryAnalysis || !!mongoQueryResultSaveHandler"
|
|
:source-columns="activeTab.querySourceColumns"
|
|
:readonly-column-indexes="groupedQueryReadonlyColumnIndexes(activeTab)"
|
|
:result-column-comments="activeTab.resultColumnComments"
|
|
:query-display-source-columns="activeTab.queryDisplaySourceColumns"
|
|
:custom-save-handler="mongoQueryResultSaveHandler"
|
|
:mongo-update-target="mongoQueryResultSaveHandler && activeTab.result.mongo_copy_documents?.length === activeTab.result.rows.length ? activeTab.mongoEditTarget : undefined"
|
|
:query-editability-reason="activeTab.queryEditabilityReason"
|
|
:allow-insert-rows="activeTab.queryAnalysis?.allowInsert ?? activeTab.queryAnalysis?.allowInsertDelete !== false"
|
|
:allow-delete-rows="activeTab.queryAnalysis?.allowDelete ?? activeTab.queryAnalysis?.allowInsertDelete !== false"
|
|
context="results"
|
|
:auto-transpose-single-row="settingsStore.editorSettings.dataGridAutoTransposeSingleRow"
|
|
:database-type="activeEffectiveDatabaseType"
|
|
:connection-id="activeResultConnectionId"
|
|
:database="activeResultDatabase"
|
|
:schema="activeResultSchema"
|
|
:table-meta="activeTab.tableMeta"
|
|
:table-info-tab="activeTab.tableInfoTab"
|
|
:page-offset="activeTab.resultPageOffset"
|
|
:page-limit="activeTab.resultPageLimit"
|
|
:count-sql="activeTab.resultCountSql"
|
|
:total-row-count="activeTab.resultTotalRowCount"
|
|
:total-row-count-is-exact="activeTab.resultTotalRowCount !== undefined || activeTab.result.total_is_exact !== false"
|
|
:total-row-count-loading="activeTab.resultTotalRowCountLoading"
|
|
:page-jump-progress="activeTab.resultPageJumpProgress"
|
|
:on-execute-sql="async (sql: string) => emit('executeSql', sql)"
|
|
:full-export-result="(onProgress?: (info: { rowsExported: number; totalRows: number | null }) => void) => queryStore.fetchTabResultForExport(activeTab.id, onProgress)"
|
|
:query-result-export-request="
|
|
(options: { exportId: string; filePath: string; format: 'csv' | 'xlsx' | 'txt' | 'sql'; includeSqlSheet?: boolean; exportTableName?: string; exportColumnTypes?: Array<string | null | undefined> }) => queryStore.buildQueryResultExportRequest(activeTab.id, options)
|
|
"
|
|
:all-export-results="allResultExportSheets"
|
|
:export-file-base-name="activeTab.title"
|
|
@update:order-by-input="(v: string) => (activeTab.orderByInput = v)"
|
|
@local-column-filters-change="(filters: Record<string, string[]>) => queryStore.updateDataGridLocalColumnFilters(activeTab.id, filters)"
|
|
@reload="(sql?: string, searchText?: string, whereInput?: string, orderBy?: string, limit?: number, offset?: number, intent?: DataGridReloadIntent) => emit('reload', sql, searchText, whereInput, orderBy, limit, offset, intent)"
|
|
@paginate="(offset: number, limit: number, whereInput?: string, orderBy?: string) => emit('paginate', offset, limit, whereInput, orderBy)"
|
|
@sort="(column: string, columnIndex: number, direction: 'asc' | 'desc' | null, whereInput?: string, mode?: DataGridSortMode) => emit('sort', column, columnIndex, direction, whereInput, mode)"
|
|
>
|
|
<template #result-toolbar-leading="{ compact }">
|
|
<QueryResultViewSwitcher
|
|
:active-view="activeOutputView"
|
|
:can-show-result="canShowResultOutput"
|
|
:can-show-summary="hasExecutionSummary"
|
|
:can-show-chart="hasNumericData && !activeElasticsearchJsonResponse"
|
|
:can-show-messages="canShowMessagesOutput"
|
|
:message-count="resultMessageCount"
|
|
:compact="compact"
|
|
@select-view="emit('update:activeOutputView', $event)"
|
|
/>
|
|
<template v-if="activeElasticsearchRawBody">
|
|
<div class="mx-1 h-4 w-px bg-border" />
|
|
<button
|
|
type="button"
|
|
class="inline-flex h-5 shrink-0 items-center rounded-sm border border-transparent px-2 text-xs leading-none transition-colors"
|
|
:class="showElasticsearchRawJson ? 'bg-secondary text-secondary-foreground' : 'text-muted-foreground hover:text-foreground'"
|
|
:aria-pressed="showElasticsearchRawJson"
|
|
@click="showElasticsearchRawJson = !showElasticsearchRawJson"
|
|
>
|
|
{{ showElasticsearchRawJson ? t("tabs.tableData") : t("redis.jsonView") }}
|
|
</button>
|
|
</template>
|
|
</template>
|
|
<template #result-toolbar-actions="{ compact }">
|
|
<DataGridColumnLayoutPopover :grid="dataGridRef" :compact="compact" />
|
|
<QueryResultToolbarActions
|
|
:active-view="activeOutputView"
|
|
:can-show-explain="canShowExplainOutput"
|
|
:can-export-archive="canExportResultArchive"
|
|
:archive-exporting="resultArchiveExporting"
|
|
:compact="compact"
|
|
@select-explain="emit('update:activeOutputView', 'explain')"
|
|
@export-archive="exportResultArchive"
|
|
/>
|
|
</template>
|
|
<template v-if="activeTab.result && isQueryExecutionErrorResult(activeTab.result)" #error-actions="{ errorMessage }">
|
|
<QueryErrorActions
|
|
:error-message="String(errorMessage)"
|
|
:backend-error="activeTab.result.error"
|
|
:connection-id="activeResultConnectionId"
|
|
@change-connection-timeout="activeResultConnectionId && emit('openConnectionSettings', activeResultConnectionId, 'advanced')"
|
|
@change-query-timeout="activeResultConnectionId && emit('openConnectionSettings', activeResultConnectionId, 'advanced')"
|
|
@fix-with-ai="(message) => emit('fixWithAi', message)"
|
|
/>
|
|
</template>
|
|
</DataGrid>
|
|
<QueryLoadingState
|
|
v-else-if="!activeTab.result && activeTab.isExecuting"
|
|
class="flex-1 min-h-0"
|
|
:label-key="queryExecutionLabelKey(activeTab)"
|
|
:elapsed-seconds="queryRunningElapsedSeconds"
|
|
show-cancel
|
|
:cancel-disabled="!canCancelQueryExecution(activeTab)"
|
|
:cancelling="activeTab.isCancelling"
|
|
@cancel="emit('cancel')"
|
|
/>
|
|
<div v-else-if="activeTab.resultEvicted && activeTab.resultCacheState === 'missing'" class="flex flex-1 min-h-0 flex-col items-center justify-center gap-3 text-sm text-muted-foreground">
|
|
<div>{{ t("grid.cachedResultUnavailable") }}</div>
|
|
<Button v-if="(activeTab.lastExecutedSql ?? activeTab.sql)?.trim()" variant="secondary" size="sm" @click="queryStore.reloadEvictedTab(activeTab.id, { reexecuteOnMissing: true })">
|
|
{{ t("grid.reexecuteQuery") }}
|
|
</Button>
|
|
</div>
|
|
<div v-else-if="!activeTab.result" class="flex-1 min-h-0 flex flex-col items-center justify-center gap-1 text-muted-foreground text-sm">
|
|
<div>{{ t("editor.pressToExecute", { mod: shortcutModifier }) }}</div>
|
|
<div>{{ t("editor.pressToSaveSql", { mod: shortcutModifier }) }}</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</Pane>
|
|
</Splitpanes>
|
|
</template>
|
|
|
|
<!-- Data mode: full-height grid -->
|
|
<template v-else-if="activeTab.mode === 'data'">
|
|
<div class="flex-1 min-h-0 flex flex-col">
|
|
<div class="h-9 shrink-0 border-b bg-background/80 px-3 flex items-center gap-2 text-xs">
|
|
<span v-if="activeConnection?.name?.trim()" data-data-header-connection class="inline-flex max-w-48 min-w-0 items-center truncate rounded border border-border bg-muted/30 px-2 py-0.5 text-muted-foreground" :title="activeConnection.name">
|
|
{{ activeConnection.name }}
|
|
</span>
|
|
<span class="inline-flex max-w-48 min-w-0 items-center truncate rounded border border-border bg-muted/50 px-2 py-0.5 font-medium">
|
|
{{ activeTab.tableMeta?.tableName || activeTab.title }}
|
|
</span>
|
|
<span class="inline-flex max-w-56 min-w-0 items-center truncate rounded border border-border bg-muted/30 px-2 py-0.5 text-muted-foreground">
|
|
<template v-if="activeTab.tableMeta?.schema">{{ activeTab.tableMeta.schema }}@</template>{{ databaseDisplayNameForTab(activeTab.connectionId, activeTab.database, t) }}
|
|
</span>
|
|
<span v-if="activeTab.mode === 'data' && activeTab.tableMeta" class="inline-flex shrink-0 items-center rounded border border-border bg-muted/30 px-2 py-0.5 font-medium text-muted-foreground tabular-nums"> {{ activeTab.tableMeta.columns.length }} {{ t("tree.columns") }} </span>
|
|
<span class="ml-auto" />
|
|
<DataGridColumnLayoutPopover v-if="activeTab.result?.columns.length" :grid="dataGridRef" trigger-class="px-1.5" />
|
|
<Button v-if="activeTab.result && activeTab.tableMeta && activeTab.connectionId" variant="ghost" size="sm" class="h-5 text-xs px-1.5 shrink-0" :class="{ 'bg-accent': dataGridRef?.showDdl }" @click="dataGridRef?.toggleDdl()"
|
|
><TableProperties class="h-3.5 w-3.5" />{{ t("grid.tableInfo") }}</Button
|
|
>
|
|
<DropdownMenu v-if="activeTab.result && activeTab.tableMeta && activeTab.connectionId">
|
|
<DropdownMenuTrigger as-child>
|
|
<Button variant="ghost" size="sm" class="h-5 text-xs px-1.5 shrink-0" :title="t('tableToolbox.title')"><Toolbox class="h-3.5 w-3.5" />{{ t("tableToolbox.title") }}</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" class="w-max min-w-44 gap-0 overflow-hidden rounded-md border bg-popover p-0 text-popover-foreground shadow-xl">
|
|
<div class="border-b bg-muted/40 px-3 py-2">
|
|
<div class="text-xs font-semibold">{{ t("tableToolbox.title") }}</div>
|
|
</div>
|
|
<div class="p-1">
|
|
<DropdownMenuItem class="gap-2" @click="handleTableDataGenerate">
|
|
<Database class="h-4 w-4" />
|
|
{{ t("tableToolbox.generateData") }}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem class="gap-2" @click="handleTableImport">
|
|
<Download class="h-4 w-4" />
|
|
{{ t("tableToolbox.importData") }}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSub>
|
|
<DropdownMenuSubTrigger class="gap-2">
|
|
<Upload class="h-4 w-4" />
|
|
{{ t("tableToolbox.exportData") }}
|
|
</DropdownMenuSubTrigger>
|
|
<DropdownMenuPortal>
|
|
<DropdownMenuSubContent>
|
|
<DropdownMenuItem @click="dataGridRef?.exportCsv()"> CSV </DropdownMenuItem>
|
|
<DropdownMenuItem @click="dataGridRef?.exportJson()"> JSON </DropdownMenuItem>
|
|
<DropdownMenuItem @click="dataGridRef?.exportSql()"> SQL INSERT </DropdownMenuItem>
|
|
<DropdownMenuItem @click="dataGridRef?.exportXlsx()"> XLSX </DropdownMenuItem>
|
|
</DropdownMenuSubContent>
|
|
</DropdownMenuPortal>
|
|
</DropdownMenuSub>
|
|
</div>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
<Popover v-if="activeTab.result?.columns.length" v-model:open="dataGridViewOptionsOpen">
|
|
<PopoverTrigger as-child>
|
|
<Button variant="ghost" size="icon" class="h-6 w-7 shrink-0 text-foreground hover:bg-accent" :title="t('grid.viewOptions')" :aria-label="t('grid.viewOptions')">
|
|
<Wrench class="h-4 w-4" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent align="end" :collision-padding="8" class="w-max min-w-44 max-h-[var(--reka-popover-content-available-height)] max-w-[calc(100vw-2rem)] gap-0 overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-0 text-popover-foreground shadow-xl" @click.stop @keydown.stop>
|
|
<div class="border-b bg-muted/40 px-3 py-2">
|
|
<div class="text-xs font-semibold">{{ t("grid.viewOptions") }}</div>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-3 px-3 py-1.5 text-xs">
|
|
<div class="min-w-0 flex items-center gap-2 font-medium">
|
|
<SquareDashed class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
|
<span>{{ t("grid.renderMode") }}</span>
|
|
</div>
|
|
<LightTooltip :text="t('grid.renderModeHint')" side="left" :side-offset="6" :delay="0" :open-on-focus="false">
|
|
<div class="grid w-32 grid-cols-2 rounded-md border bg-muted/40 p-0.5">
|
|
<button
|
|
type="button"
|
|
class="h-5 min-w-0 truncate whitespace-nowrap rounded-[5px] px-2 text-xs transition-colors"
|
|
:class="dataGridRenderMode === 'canvas' ? 'bg-background font-semibold text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'"
|
|
@click="setDataGridRenderMode('canvas')"
|
|
>
|
|
{{ t("grid.canvasRenderMode") }}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="h-5 min-w-0 truncate whitespace-nowrap rounded-[5px] px-2 text-xs transition-colors"
|
|
:class="dataGridRenderMode === 'dom' ? 'bg-background font-semibold text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'"
|
|
@click="setDataGridRenderMode('dom')"
|
|
>
|
|
{{ t("grid.domRenderMode") }}
|
|
</button>
|
|
</div>
|
|
</LightTooltip>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-3 px-3 py-1.5 text-xs">
|
|
<div class="min-w-0 flex items-center gap-2 font-medium">
|
|
<Columns3Cog class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
|
<span>{{ t("grid.columnWidth") }}</span>
|
|
</div>
|
|
<div class="grid w-48 grid-cols-3 rounded-md border bg-muted/40 p-0.5">
|
|
<button
|
|
v-for="density in ['compact', 'standard', 'comfortable'] as const"
|
|
:key="density"
|
|
type="button"
|
|
class="h-5 min-w-0 truncate whitespace-nowrap rounded-[5px] px-1.5 text-xs transition-colors"
|
|
:class="columnWidthDensity === density ? 'bg-background font-semibold text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'"
|
|
@click="setColumnWidthDensity(density)"
|
|
>
|
|
{{ t(`grid.columnWidth${density.charAt(0).toUpperCase()}${density.slice(1)}`) }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<DataGridFontFamilyControl />
|
|
<div class="flex items-center justify-between gap-3 px-3 py-1.5 text-xs">
|
|
<div class="min-w-0 flex items-center gap-2 font-medium">
|
|
<span class="flex h-3.5 w-3.5 shrink-0 items-center justify-center text-[11px] font-semibold text-muted-foreground">A</span>
|
|
<span>{{ t("grid.tableFontSize") }}</span>
|
|
</div>
|
|
<div class="flex h-6 w-32 items-center rounded-md border bg-muted/40 p-0.5">
|
|
<button
|
|
type="button"
|
|
class="flex h-5 w-8 items-center justify-center rounded-[5px] bg-background text-foreground shadow-sm transition-colors hover:text-foreground disabled:pointer-events-none disabled:bg-muted/40 disabled:text-muted-foreground disabled:opacity-50 disabled:shadow-none"
|
|
:disabled="tableFontSize <= TABLE_FONT_SIZE_MIN"
|
|
:aria-label="t('common.decrease')"
|
|
@click="decreaseTableFontSize"
|
|
>
|
|
<Minus class="h-3.5 w-3.5" />
|
|
</button>
|
|
<span class="flex-1 text-center text-xs font-semibold tabular-nums">{{ tableFontSize }}</span>
|
|
<button
|
|
type="button"
|
|
class="flex h-5 w-8 items-center justify-center rounded-[5px] bg-background text-foreground shadow-sm transition-colors hover:text-foreground disabled:pointer-events-none disabled:bg-muted/40 disabled:text-muted-foreground disabled:opacity-50 disabled:shadow-none"
|
|
:disabled="tableFontSize >= TABLE_FONT_SIZE_MAX"
|
|
:aria-label="t('common.increase')"
|
|
@click="increaseTableFontSize"
|
|
>
|
|
<Plus class="h-3.5 w-3.5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-3 px-3 py-1.5 text-xs">
|
|
<div class="min-w-0 flex items-center gap-2 font-medium">
|
|
<Search class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
|
<span>{{ t("grid.searchMode") }}</span>
|
|
</div>
|
|
<LightTooltip :text="t('grid.searchModeHint')" side="left" :side-offset="6" :delay="0" :open-on-focus="false">
|
|
<div class="grid w-32 grid-cols-2 rounded-md border bg-muted/40 p-0.5">
|
|
<button
|
|
type="button"
|
|
class="h-5 min-w-0 truncate whitespace-nowrap rounded-[5px] px-2 text-xs transition-colors"
|
|
:class="dataGridSearchMode === 'filter' ? 'bg-background font-semibold text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'"
|
|
@click="setDataGridSearchMode('filter')"
|
|
>
|
|
{{ t("grid.searchModeFilter") }}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="h-5 min-w-0 truncate whitespace-nowrap rounded-[5px] px-2 text-xs transition-colors"
|
|
:class="dataGridSearchMode === 'highlight' ? 'bg-background font-semibold text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'"
|
|
@click="setDataGridSearchMode('highlight')"
|
|
>
|
|
{{ t("grid.searchModeHighlight") }}
|
|
</button>
|
|
</div>
|
|
</LightTooltip>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-3 px-3 py-1.5 text-xs">
|
|
<div class="min-w-0 flex items-center gap-2 font-medium">
|
|
<Rows3 class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
|
<span>{{ t("grid.transposeMultiRowToggle") }}</span>
|
|
</div>
|
|
<LightTooltip :text="t('grid.transposeMultiRowHint')" side="left" :side-offset="6" :delay="0" :open-on-focus="false">
|
|
<div class="grid w-32 grid-cols-2 rounded-md border bg-muted/40 p-0.5">
|
|
<button
|
|
type="button"
|
|
class="h-5 min-w-0 truncate whitespace-nowrap rounded-[5px] px-2 text-xs transition-colors"
|
|
:class="!dataGridRef?.multiRowTranspose ? 'bg-background font-semibold text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'"
|
|
@click="dataGridRef?.setMultiRowTranspose(false)"
|
|
>
|
|
{{ t("grid.transposeSingleRow") }}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="h-5 min-w-0 truncate whitespace-nowrap rounded-[5px] px-2 text-xs transition-colors"
|
|
:class="dataGridRef?.multiRowTranspose ? 'bg-background font-semibold text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'"
|
|
@click="dataGridRef?.setMultiRowTranspose(true)"
|
|
>
|
|
{{ t("grid.transposeMultiRow") }}
|
|
</button>
|
|
</div>
|
|
</LightTooltip>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-3 px-3 py-1.5 text-xs">
|
|
<div class="min-w-0 flex items-center gap-2 font-medium">
|
|
<component :is="numericColumnRightAlign ? AlignRight : AlignLeft" class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
|
<span>{{ t("grid.numericColumnAlign") }}</span>
|
|
</div>
|
|
<div class="grid w-32 grid-cols-2 rounded-md border bg-muted/40 p-0.5">
|
|
<button
|
|
type="button"
|
|
class="h-5 min-w-0 truncate whitespace-nowrap rounded-[5px] px-2 text-xs transition-colors"
|
|
:class="!numericColumnRightAlign ? 'bg-background font-semibold text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'"
|
|
@click="setNumericColumnRightAlign(false)"
|
|
>
|
|
{{ t("grid.numericColumnAlignLeft") }}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="h-5 min-w-0 truncate whitespace-nowrap rounded-[5px] px-2 text-xs transition-colors"
|
|
:class="numericColumnRightAlign ? 'bg-background font-semibold text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'"
|
|
@click="setNumericColumnRightAlign(true)"
|
|
>
|
|
{{ t("grid.numericColumnAlignRight") }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-3 px-3 py-1.5 text-xs">
|
|
<div class="min-w-0 flex items-center gap-2 font-medium">
|
|
<CheckSquare2 class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
|
<span>{{ t("grid.booleanDisplayMode") }}</span>
|
|
</div>
|
|
<div class="grid w-32 grid-cols-2 rounded-md border bg-muted/40 p-0.5">
|
|
<button
|
|
type="button"
|
|
class="h-5 min-w-0 truncate whitespace-nowrap rounded-[5px] px-2 text-xs transition-colors"
|
|
:class="booleanDisplayMode === 'dropdown' ? 'bg-background font-semibold text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'"
|
|
@click="setBooleanDisplayMode('dropdown')"
|
|
>
|
|
{{ t("grid.booleanDisplayDropdown") }}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="h-5 min-w-0 truncate whitespace-nowrap rounded-[5px] px-2 text-xs transition-colors"
|
|
:class="booleanDisplayMode === 'checkbox' ? 'bg-background font-semibold text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'"
|
|
@click="setBooleanDisplayMode('checkbox')"
|
|
>
|
|
{{ t("grid.booleanDisplayCheckbox") }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-3 px-3 py-1.5 text-xs">
|
|
<div class="min-w-0 flex items-center gap-2 font-medium">
|
|
<Palette class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
|
<span>{{ t("grid.colorizeDataTypes") }}</span>
|
|
</div>
|
|
<Switch size="sm" :model-value="colorizeDataGridCellTypes" :aria-label="t('grid.colorizeDataTypes')" @update:model-value="setColorizeDataGridCellTypes" />
|
|
</div>
|
|
<div class="flex items-center justify-between gap-3 px-3 py-1.5 text-xs" :class="{ 'opacity-60': !dataGridRef?.canToggleAllNullColumns }">
|
|
<span class="min-w-0 flex items-center gap-2 font-medium">
|
|
<EyeOff class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
|
{{ t("grid.hideNullColumns") }}
|
|
<span v-if="(dataGridRef?.allNullColumnCount ?? 0) > 0" class="text-muted-foreground tabular-nums"> ({{ dataGridRef?.allNullColumnCount }}) </span>
|
|
</span>
|
|
<Switch size="sm" :model-value="!!dataGridRef?.nullColumnsHidden" :disabled="!dataGridRef?.canToggleAllNullColumns" :aria-label="t('grid.hideNullColumns')" @update:model-value="dataGridRef?.toggleAllNullColumns()" />
|
|
</div>
|
|
<DataGridCopyFormatControl
|
|
:current-label="dataGridRef?.defaultCopyPreferenceLabel ?? '-'"
|
|
:current-value="dataGridRef?.defaultCopyPreference ?? ''"
|
|
:items="dataGridRef?.copyPreferenceMenuItems ?? []"
|
|
@select="dataGridRef?.setDefaultCopyPreference($event)"
|
|
@configure="openDataGridExtractorConfiguration"
|
|
/>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
<DataGrid
|
|
v-if="activeTab.result"
|
|
ref="dataGridRef"
|
|
class="flex-1 min-h-0"
|
|
:key="activeTab.id"
|
|
:cache-key="activeTab.id"
|
|
:result="activeTab.result"
|
|
:sort-column="activeTab.resultSortColumn"
|
|
:sort-column-index="activeTab.resultSortColumnIndex"
|
|
:sort-direction="activeTab.resultSortDirection"
|
|
:sort-mode="activeTab.resultSortMode"
|
|
:initial-order-by-input="activeTab.orderByInput"
|
|
:sql="activeTab.sql"
|
|
:loading="activeTab.isExecuting"
|
|
:editable="!activeTab.tableMetaPending && isTableDataEditable(activeEffectiveDatabaseType, activeTableMeta?.primaryKeys ?? [], activeTableMeta?.tableType)"
|
|
context="table-data"
|
|
:initial-where-input="activeTab.whereInput"
|
|
:database-type="activeEffectiveDatabaseType"
|
|
:connection-id="activeTab.connectionId"
|
|
:database="activeTab.database"
|
|
:execution-database="activeDataTabExecutionDatabase"
|
|
:table-meta="activeDataTabTableMeta"
|
|
:table-info-tab="activeTab.tableInfoTab"
|
|
:page-offset="activeTab.resultPageOffset"
|
|
:page-limit="activeTab.resultPageLimit"
|
|
:total-row-count="activeTab.resultTotalRowCount"
|
|
:total-row-count-is-exact="activeTab.resultTotalRowCount !== undefined || activeTab.result.total_is_exact !== false"
|
|
:total-row-count-loading="activeTab.resultTotalRowCountLoading"
|
|
:on-execute-sql="async (sql: string) => emit('executeSql', sql)"
|
|
:full-export-result="(onProgress?: (info: { rowsExported: number; totalRows: number | null }) => void) => queryStore.fetchTabResultForExport(activeTab.id, onProgress)"
|
|
:export-file-base-name="activeTab.title"
|
|
@update:where-input="(v: string) => (activeTab.whereInput = v)"
|
|
@update:order-by-input="(v: string) => (activeTab.orderByInput = v)"
|
|
@local-column-filters-change="(filters: Record<string, string[]>) => queryStore.updateDataGridLocalColumnFilters(activeTab.id, filters)"
|
|
@reload="(sql?: string, searchText?: string, whereInput?: string, orderBy?: string, limit?: number, offset?: number, intent?: DataGridReloadIntent) => emit('reload', sql, searchText, whereInput, orderBy, limit, offset, intent)"
|
|
@paginate="(offset: number, limit: number, whereInput?: string, orderBy?: string) => emit('paginate', offset, limit, whereInput, orderBy)"
|
|
@sort="(column: string, columnIndex: number, direction: 'asc' | 'desc' | null, whereInput?: string, mode?: DataGridSortMode) => emit('sort', column, columnIndex, direction, whereInput, mode)"
|
|
>
|
|
<template v-if="activeTab.result && isQueryExecutionErrorResult(activeTab.result)" #error-actions="{ errorMessage }">
|
|
<QueryErrorActions
|
|
:error-message="String(errorMessage)"
|
|
:backend-error="activeTab.result.error"
|
|
:connection-id="activeResultConnectionId"
|
|
@change-connection-timeout="activeResultConnectionId && emit('openConnectionSettings', activeResultConnectionId, 'advanced')"
|
|
@change-query-timeout="activeResultConnectionId && emit('openConnectionSettings', activeResultConnectionId, 'advanced')"
|
|
@fix-with-ai="(message) => emit('fixWithAi', message)"
|
|
/>
|
|
</template>
|
|
</DataGrid>
|
|
<QueryLoadingState v-else-if="activeTab.isExecuting" class="h-full" :label-key="queryExecutionLabelKey(activeTab)" :elapsed-seconds="queryRunningElapsedSeconds" show-cancel :cancel-disabled="!canCancelQueryExecution(activeTab)" :cancelling="activeTab.isCancelling" @cancel="emit('cancel')" />
|
|
<div v-else class="h-full flex flex-col items-center justify-center gap-3 text-muted-foreground text-sm">
|
|
<Inbox class="h-8 w-8 opacity-60" />
|
|
<div>{{ t("grid.dataUnavailable") }}</div>
|
|
<div class="text-xs text-muted-foreground/70 inline-flex items-center gap-1">
|
|
<span>{{ t("grid.dataUnavailableHintPrefix") }}</span>
|
|
<kbd v-for="key in modRKeys" :key="key" class="min-w-5 rounded border border-border/60 bg-muted/50 px-1.5 py-0.5 text-center font-mono text-[12px] leading-none text-muted-foreground shadow-xs">{{ key }}</kbd>
|
|
<span>{{ t("grid.dataUnavailableHintSuffix") }}</span>
|
|
</div>
|
|
<Button variant="outline" size="sm" class="h-7 gap-1.5" @click="emit('reload')">
|
|
<RefreshCcw class="h-3.5 w-3.5" />
|
|
{{ t("grid.refresh") }}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Redis mode: key browser -->
|
|
<template v-else-if="activeTab.mode === 'redis'">
|
|
<div class="flex-1 min-h-0">
|
|
<RedisKeyBrowser ref="redisKeyBrowserRef" :key="`${activeTab.id}:${activeTab.connectionId}:${activeTab.database}`" :connection-id="activeTab.connectionId" :db="Number(activeTab.database)" :block-dangerous-redis-commands="props.blockDangerousRedisCommands" />
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Redis Dashboard: instance info -->
|
|
<template v-else-if="activeTab.mode === 'redis-dashboard'">
|
|
<div class="flex-1 min-h-0">
|
|
<RedisDashboard :key="activeTab.id" :connection-id="activeTab.connectionId" />
|
|
</div>
|
|
</template>
|
|
|
|
<!-- etcd mode: key browser -->
|
|
<template v-else-if="activeTab.mode === 'etcd'">
|
|
<div class="flex-1 min-h-0">
|
|
<EtcdKeyBrowser ref="etcdKeyBrowserRef" :key="activeTab.id" :connection-id="activeTab.connectionId" />
|
|
</div>
|
|
</template>
|
|
|
|
<!-- etcd Dashboard: cluster observation -->
|
|
<template v-else-if="activeTab.mode === 'etcd-dashboard'">
|
|
<div class="flex-1 min-h-0">
|
|
<EtcdDashboard ref="etcdDashboardRef" :key="activeTab.id" :connection-id="activeTab.connectionId" />
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else-if="activeTab.mode === 'etcd-access-control'">
|
|
<div class="flex-1 min-h-0">
|
|
<EtcdAccessControl :key="activeTab.id" :connection-id="activeTab.connectionId" />
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else-if="activeTab.mode === 'nacos-access-control'">
|
|
<div class="flex-1 min-h-0">
|
|
<NacosAccessControlConsole :key="activeTab.id" :connection-id="activeTab.connectionId" :read-only="connectionIsEffectivelyReadOnly(activeConnection)" />
|
|
</div>
|
|
</template>
|
|
|
|
<!-- ZooKeeper mode: znode browser -->
|
|
<template v-else-if="activeTab.mode === 'zookeeper'">
|
|
<div class="flex-1 min-h-0">
|
|
<ZooKeeperKeyBrowser ref="zookeeperKeyBrowserRef" :key="activeTab.id" :connection-id="activeTab.connectionId" />
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else-if="activeTab.mode === 'consul-overview'">
|
|
<div class="flex-1 min-h-0">
|
|
<ConsulOverview ref="consulOverviewRef" :key="activeTab.id" :connection-id="activeTab.connectionId" />
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Consul management workspace -->
|
|
<template v-else-if="activeTab.mode === 'consul'">
|
|
<div class="flex-1 min-h-0">
|
|
<ConsulWorkspace ref="consulWorkspaceRef" :key="activeTab.id" :connection-id="activeTab.connectionId" />
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Document mode: MongoDB collections and Elasticsearch indices -->
|
|
<template v-else-if="activeTab.mode === 'mongo'">
|
|
<div class="flex-1 min-h-0">
|
|
<DocumentBrowser ref="documentBrowserRef" :key="`${activeTab.id}:${activeTab.sql}`" :connection-id="activeTab.connectionId" :database="activeTab.database" :collection="activeTab.sql" :database-type="activeEffectiveDatabaseType" :table-meta="activeTab.tableMeta" />
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Meilisearch index detail -->
|
|
<template v-else-if="activeTab.mode === 'meilisearch'">
|
|
<div class="flex-1 min-h-0">
|
|
<MeilisearchIndexView :key="activeTab.id" :connection-id="activeTab.connectionId" :index="activeTab.sql" />
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else-if="activeTab.mode === 'meilisearch-system'">
|
|
<div class="flex-1 min-h-0">
|
|
<MeilisearchSystemWorkspace :key="activeTab.id" :connection-id="activeTab.connectionId" />
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else-if="activeTab.mode === 'mongo-gridfs'">
|
|
<div class="flex-1 min-h-0">
|
|
<MongoGridFsBrowser :key="activeTab.id" :connection-id="activeTab.connectionId" :database="activeTab.database" />
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else-if="activeTab.mode === 'mongo-bucket'">
|
|
<div class="flex-1 min-h-0">
|
|
<MongoBucketBrowser :key="activeTab.id" :connection-id="activeTab.connectionId" :database="activeTab.database" :bucket="activeTab.mongoBucket?.bucketName || activeTab.sql" />
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Vector mode: Qdrant and Milvus collections -->
|
|
<template v-else-if="activeTab.mode === 'vector'">
|
|
<div class="flex-1 min-h-0">
|
|
<VectorBrowser :key="activeTab.id" :connection-id="activeTab.connectionId" :database="activeTab.database" :collection="activeTab.sql" :collection-label="activeTab.title" :database-type="activeEffectiveDatabaseType" :dimension="activeTabDimension" :tenant="activeVectorConnection?.username" />
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else-if="activeTab.mode === 'hbase'">
|
|
<div class="flex-1 min-h-0">
|
|
<HBaseBrowser :key="activeTab.id" :tab-id="activeTab.id" :connection-id="activeTab.connectionId" :namespace="activeTab.database" :table="activeTab.sql" :create-table-on-open="activeTab.hbaseCreateTableOnOpen" />
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else-if="activeTab.mode === 'mq'">
|
|
<div class="flex-1 min-h-0">
|
|
<MqAdminConsole :key="activeTab.id" :connection-id="activeTab.connectionId" :initial-tenant="activeTab.mqTenant" :initial-tab="activeTab.mqInitialTab" :read-only="connectionIsEffectivelyReadOnly(activeConnection)" />
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else-if="activeTab.mode === 'mqtt'">
|
|
<div class="flex-1 min-h-0">
|
|
<MqttAdminConsole :key="activeTab.id" :connection-id="activeTab.connectionId" :initial-topic="activeTab.mqttInitialTopic" />
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else-if="activeTab.mode === 'nacos'">
|
|
<div class="flex-1 min-h-0">
|
|
<NacosAdminConsole
|
|
:key="activeTab.id"
|
|
:connection-id="activeTab.connectionId"
|
|
:namespace="activeTab.nacosNamespace"
|
|
:namespace-name="activeTab.nacosNamespaceName"
|
|
:target-data-id="activeTab.nacosTargetDataId"
|
|
:target-group="activeTab.nacosTargetGroup"
|
|
:target-keyword="activeTab.nacosTargetKeyword"
|
|
:target-request-id="activeTab.nacosTargetRequestId"
|
|
:read-only="connectionIsEffectivelyReadOnly(activeConnection)"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else-if="activeTab.mode === 'databases' && activeConnection">
|
|
<div class="min-w-0 flex-1 min-h-0">
|
|
<DatabaseBrowser ref="databaseBrowserRef" :connection="activeConnection" />
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Objects mode: virtualized database object browser -->
|
|
<template v-else-if="activeTab.mode === 'objects' && activeConnection">
|
|
<div class="min-w-0 flex-1 min-h-0">
|
|
<ObjectBrowser
|
|
ref="objectBrowserRef"
|
|
:key="`${activeTab.id}-${activeTab.objectBrowser?.schema || ''}`"
|
|
:connection="activeConnection"
|
|
:database="activeTab.database"
|
|
:catalog="activeTab.objectBrowser?.catalog"
|
|
:schema="activeTab.objectBrowser?.schema"
|
|
:initial-event-name="activeTab.objectBrowser?.eventName"
|
|
:initial-event-read-only="activeTab.objectBrowser?.eventReadOnly"
|
|
:initial-event-open-request-id="activeTab.objectBrowser?.eventOpenRequestId"
|
|
:initial-event-create-request-id="activeTab.objectBrowser?.eventCreateRequestId"
|
|
:initial-object-filter="activeTab.objectBrowser?.initialObjectFilter"
|
|
:viewport="activeTab.objectBrowser?.viewport"
|
|
@open-table="emit('openObjectTable', $event)"
|
|
@schema-change="emit('objectSchemaChange', $event)"
|
|
@viewport-change="emit('objectBrowserViewportChange', activeTab.id, $event)"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Structure mode: table structure editor -->
|
|
<template v-else-if="activeTab.mode === 'structure'">
|
|
<TableStructureEditor
|
|
ref="tableStructureEditorRef"
|
|
:key="activeTab.id"
|
|
:connection-id="activeTab.connectionId"
|
|
:database="activeTab.database"
|
|
:catalog="activeTab.catalog"
|
|
:schema="activeTab.schema"
|
|
:table-name="activeTab.structureTableName || ''"
|
|
:initial-tab="activeTab.structureInitialTab"
|
|
:initial-tab-request-id="activeTab.structureInitialTabRequestId"
|
|
:initial-target="activeTab.structureInitialTarget"
|
|
:draft="activeTab.structureDraft"
|
|
@update:draft="(draft) => (activeTab.structureDraft = draft)"
|
|
@saved="(commentChanged) => emit('structureEditorSaved', commentChanged)"
|
|
@close="emit('structureEditorClose')"
|
|
@open-settings="(initialTab, initialSection) => emit('openSettings', initialTab, initialSection)"
|
|
/>
|
|
</template>
|
|
|
|
<template v-else-if="activeTab.mode === 'users' && activeConnection">
|
|
<DatabaseUserAdmin :key="activeTab.id" :connection="activeConnection" />
|
|
</template>
|
|
|
|
<template v-else-if="activeTab.mode === 'processlist' && activeConnection">
|
|
<ProcessListPanel :key="activeTab.id" :connection="activeConnection" />
|
|
</template>
|
|
|
|
<template v-else-if="activeTab.mode === 'sqlserver-trace' && activeConnection">
|
|
<SqlServerActivityTracePanel :key="activeTab.id" :connection="activeConnection" :tab-id="activeTab.id" />
|
|
</template>
|
|
|
|
<template v-else-if="activeTab.mode === 'mysql-dashboard'">
|
|
<div class="min-h-0 flex-1">
|
|
<MySqlDashboard :key="activeTab.id" :connection-id="activeTab.connectionId" :client-session-id="activeTab.id" />
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else-if="activeTab.mode === 'postgres-dashboard'">
|
|
<div class="min-h-0 flex-1">
|
|
<PostgresDashboard :key="activeTab.id" :connection-id="activeTab.connectionId" />
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else-if="activeTab.mode === 'nacos-dashboard'">
|
|
<div class="min-h-0 flex-1">
|
|
<NacosDashboard :key="activeTab.id" :connection-id="activeTab.connectionId" />
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else-if="activeTab.mode === 'dolt-version-control'">
|
|
<div class="min-h-0 flex-1">
|
|
<DoltVersionControl :key="activeTab.id" :connection-id="activeTab.connectionId" :database="activeTab.database" :initial-branch="activeTab.workspaceBranch" />
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else-if="activeTab.mode === 'dameng-jobs' && activeConnection">
|
|
<DamengJobAdmin :key="activeTab.id" :connection="activeConnection" />
|
|
</template>
|
|
|
|
<template v-else-if="activeTab.mode === 'dameng-users' && activeConnection">
|
|
<DamengUserAdmin :key="activeTab.id" :connection="activeConnection" />
|
|
</template>
|
|
|
|
<template v-else-if="activeTab.mode === 'dameng-roles' && activeConnection">
|
|
<DamengRoleAdmin :key="activeTab.id" :connection="activeConnection" />
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.query-output-splitpanes {
|
|
isolation: isolate;
|
|
}
|
|
|
|
.production-session-shell--active {
|
|
box-shadow: inset 3px 0 0 color-mix(in oklch, var(--destructive) 78%, transparent);
|
|
}
|
|
|
|
.production-session-strip {
|
|
background-image: linear-gradient(90deg, color-mix(in oklch, var(--destructive) 14%, transparent), color-mix(in oklch, var(--destructive) 7%, transparent));
|
|
}
|
|
|
|
.query-output-splitpanes :deep(> .splitpanes__splitter) {
|
|
z-index: 1;
|
|
flex: 0 0 3px;
|
|
}
|
|
|
|
.production-watermark {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
grid-template-rows: repeat(2, minmax(0, 1fr));
|
|
gap: 3rem;
|
|
overflow: hidden;
|
|
padding: 3rem 2.5rem;
|
|
}
|
|
|
|
.production-watermark__label {
|
|
align-self: center;
|
|
justify-self: center;
|
|
transform: rotate(-22deg);
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.production-watermark {
|
|
grid-template-columns: 1fr;
|
|
gap: 1.5rem;
|
|
padding-inline: 1rem;
|
|
}
|
|
}
|
|
|
|
.result-tab-scroll::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.result-tab-scrollbar {
|
|
position: absolute;
|
|
inset-inline: 0.5rem;
|
|
bottom: 2px;
|
|
z-index: 20;
|
|
height: 8px;
|
|
cursor: pointer;
|
|
touch-action: none;
|
|
}
|
|
|
|
.result-tab-scrollbar::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset-inline: 0;
|
|
top: 3px;
|
|
height: 2px;
|
|
border-radius: 999px;
|
|
background: color-mix(in oklch, var(--foreground) 10%, transparent);
|
|
}
|
|
|
|
.result-tab-scrollbar__thumb {
|
|
position: absolute;
|
|
top: 2px;
|
|
height: 4px;
|
|
min-width: 20px;
|
|
border-radius: 999px;
|
|
background: color-mix(in oklch, var(--foreground) 38%, transparent);
|
|
transition:
|
|
height 120ms ease,
|
|
background-color 120ms ease,
|
|
top 120ms ease;
|
|
}
|
|
|
|
.result-tab-scrollbar:hover .result-tab-scrollbar__thumb,
|
|
.result-tab-scrollbar--dragging .result-tab-scrollbar__thumb {
|
|
top: 1px;
|
|
height: 6px;
|
|
background: color-mix(in oklch, var(--foreground) 58%, transparent);
|
|
}
|
|
</style>
|