QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-04-26 11:34:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(sqllab): improve table metadata UI (#32051)

Browse Source
This commit is contained in:
JUST.in DO IT
2025-01-31 10:19:37 -08:00
committed by GitHub
parent 101d3fa78d
commit c590e90c87
22 changed files with 889 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
superset-frontend/src/SqlLab/components/AceEditorWrapper/AceEditorWrapper.test.tsx
View File

@@ -16,8 +16,6 @@
* specific language governing permissions and limitations
* under the License.
*/
import configureStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import reducerIndex from 'spec/helpers/reducerIndex';
import { render, waitFor, createStore } from 'spec/helpers/testing-library';
import { QueryEditor } from 'src/SqlLab/types';
@@ -34,9 +32,6 @@ import {
} from 'src/SqlLab/actions/sqlLab';
import fetchMock from 'fetch-mock';
const middlewares = [thunk];
const mockStore = configureStore(middlewares);
fetchMock.get('glob:*/api/v1/database/*/function_names/', {
function_names: [],
});
@@ -79,7 +74,8 @@ describe('AceEditorWrapper', () => {
});
it('renders ace editor including sql value', async () => {
const { getByTestId } = setup(defaultQueryEditor, mockStore(initialState));
const store = createStore(initialState, reducerIndex);
const { getByTestId } = setup(defaultQueryEditor, store);
await waitFor(() => expect(getByTestId('react-ace')).toBeInTheDocument());
expect(getByTestId('react-ace')).toHaveTextContent(
@@ -89,9 +85,8 @@ describe('AceEditorWrapper', () => {
it('renders current sql for unrelated unsaved changes', () => {
const expectedSql = 'SELECT updated_column\nFROM updated_table\nWHERE';
const { getByTestId } = setup(
defaultQueryEditor,
mockStore({
const store = createStore(
{
...initialState,
sqlLab: {
...initialState.sqlLab,
@@ -100,8 +95,10 @@ describe('AceEditorWrapper', () => {
sql: expectedSql,
},
},
}),
},
reducerIndex,
);
const { getByTestId } = setup(defaultQueryEditor, store);
expect(getByTestId('react-ace')).not.toHaveTextContent(
JSON.stringify({ value: expectedSql }).slice(1, -1),
@@ -122,7 +119,7 @@ describe('AceEditorWrapper', () => {
queryEditorSetCursorPosition(defaultQueryEditor, updatedCursorPosition),
);
expect(FullSQLEditor).toHaveBeenCalledTimes(renderCount);
store.dispatch(queryEditorSetDb(defaultQueryEditor, 1));
store.dispatch(queryEditorSetDb(defaultQueryEditor, 2));
expect(FullSQLEditor).toHaveBeenCalledTimes(renderCount + 1);
});
});

2
superset-frontend/src/SqlLab/components/AceEditorWrapper/useKeywords.test.ts
View File

@@ -202,6 +202,7 @@ test('returns column keywords among selected tables', async () => {
{
name: expectColumn,
type: 'VARCHAR',
longType: 'VARCHAR',
},
],
},
@@ -223,6 +224,7 @@ test('returns column keywords among selected tables', async () => {
{
name: unexpectedColumn,
type: 'VARCHAR',
longType: 'VARCHAR',
},
],
},

2
superset-frontend/src/SqlLab/components/App/index.tsx
View File

@@ -47,7 +47,7 @@ const SqlLabStyles = styled.div`
left: 0;
padding: 0 ${theme.gridUnit * 2}px;
pre {
pre:not(.code) {
padding: 0 !important;
margin: 0;
border: none;

12
superset-frontend/src/SqlLab/components/ShowSQL/index.tsx
View File

@@ -28,21 +28,25 @@ interface ShowSQLProps {
sql: string;
title: string;
tooltipText: string;
triggerNode?: React.ReactNode;
}
export default function ShowSQL({
tooltipText,
title,
sql: sqlString,
triggerNode,
}: ShowSQLProps) {
return (
<ModalTrigger
modalTitle={title}
triggerNode={
<IconTooltip
className="fa fa-eye pull-left m-l-2"
tooltip={tooltipText}
/>
triggerNode || (
<IconTooltip
className="fa fa-eye pull-left m-l-2"
tooltip={tooltipText}
/>
)
}
modalBody={
<div>

6
superset-frontend/src/SqlLab/components/SouthPane/SouthPane.test.tsx
View File

@@ -135,7 +135,7 @@ test('should render empty result state when latestQuery is empty', () => {
expect(resultPanel).toHaveTextContent('Run a query to display results');
});
test('should render tabs for table preview queries', () => {
test('should render tabs for table metadata view', () => {
const { getAllByRole } = render(<SouthPane {...mockedProps} />, {
useRedux: true,
initialState: mockState,
@@ -145,7 +145,7 @@ test('should render tabs for table preview queries', () => {
expect(tabs).toHaveLength(mockState.sqlLab.tables.length + 2);
expect(tabs[0]).toHaveTextContent('Results');
expect(tabs[1]).toHaveTextContent('Query history');
mockState.sqlLab.tables.forEach(({ name }, index) => {
expect(tabs[index + 2]).toHaveTextContent(`Preview: \`${name}\``);
mockState.sqlLab.tables.forEach(({ name, schema }, index) => {
expect(tabs[index + 2]).toHaveTextContent(`${schema}.${name}`);
});
});

95
superset-frontend/src/SqlLab/components/SouthPane/index.tsx
View File

@@ -16,24 +16,25 @@
* specific language governing permissions and limitations
* under the License.
*/
import { createRef, useMemo } from 'react';
import { createRef, useCallback, useMemo } from 'react';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { nanoid } from 'nanoid';
import Tabs from 'src/components/Tabs';
import { styled, t } from '@superset-ui/core';
import { css, styled, t } from '@superset-ui/core';
import { setActiveSouthPaneTab } from 'src/SqlLab/actions/sqlLab';
import { removeTables, setActiveSouthPaneTab } from 'src/SqlLab/actions/sqlLab';
import Label from 'src/components/Label';
import Icons from 'src/components/Icons';
import { SqlLabRootState } from 'src/SqlLab/types';
import QueryHistory from '../QueryHistory';
import ResultSet from '../ResultSet';
import {
STATUS_OPTIONS,
STATE_TYPE_MAP,
STATUS_OPTIONS_LOCALIZED,
} from '../../constants';
import Results from './Results';
import TablePreview from '../TablePreview';
const TAB_HEIGHT = 130;
@@ -98,31 +99,45 @@ const SouthPane = ({
}),
shallowEqual,
);
const queries = useSelector(
({ sqlLab: { queries } }: SqlLabRootState) => Object.keys(queries),
shallowEqual,
);
const activeSouthPaneTab =
useSelector<SqlLabRootState, string>(
state => state.sqlLab.activeSouthPaneTab as string,
) ?? 'Results';
const querySet = useMemo(() => new Set(queries), [queries]);
const dataPreviewQueries = useMemo(
const pinnedTables = useMemo(
() =>
tables.filter(
({ dataPreviewQueryId, queryEditorId: qeId }) =>
dataPreviewQueryId &&
queryEditorId === qeId &&
querySet.has(dataPreviewQueryId),
({ queryEditorId: qeId }) => String(queryEditorId) === qeId,
),
[queryEditorId, tables, querySet],
[queryEditorId, tables],
);
const pinnedTableKeys = useMemo(
() =>
Object.fromEntries(
pinnedTables.map(({ id, dbId, catalog, schema, name }) => [
id,
[dbId, catalog, schema, name].join(':'),
]),
),
[pinnedTables],
);
const innerTabContentHeight = height - TAB_HEIGHT;
const southPaneRef = createRef<HTMLDivElement>();
const switchTab = (id: string) => {
dispatch(setActiveSouthPaneTab(id));
};
const removeTable = useCallback(
(key, action) => {
if (action === 'remove') {
const table = pinnedTables.find(
({ dbId, catalog, schema, name }) =>
[dbId, catalog, schema, name].join(':') === key,
);
dispatch(removeTables([table]));
}
},
[dispatch, queryEditorId],
);
return offline ? (
<Label className="m-r-3" type={STATE_TYPE_MAP[STATUS_OPTIONS.offline]}>
@@ -136,14 +151,17 @@ const SouthPane = ({
ref={southPaneRef}
>
<Tabs
activeKey={activeSouthPaneTab}
type="editable-card"
activeKey={pinnedTableKeys[activeSouthPaneTab] || activeSouthPaneTab}
className="SouthPaneTabs"
onChange={switchTab}
id={nanoid(11)}
fullWidth={false}
animated={false}
onEdit={removeTable}
hideAdd
>
<Tabs.TabPane tab={t('Results')} key="Results">
<Tabs.TabPane tab={t('Results')} key="Results" closable={false}>
<Results
height={innerTabContentHeight}
latestQueryId={latestQueryId}
@@ -151,32 +169,37 @@ const SouthPane = ({
defaultQueryLimit={defaultQueryLimit}
/>
</Tabs.TabPane>
<Tabs.TabPane tab={t('Query history')} key="History">
<Tabs.TabPane tab={t('Query history')} key="History" closable={false}>
<QueryHistory
queryEditorId={queryEditorId}
displayLimit={displayLimit}
latestQueryId={latestQueryId}
/>
</Tabs.TabPane>
{dataPreviewQueries.map(
({ name, dataPreviewQueryId }) =>
dataPreviewQueryId && (
<Tabs.TabPane
tab={t('Preview: `%s`', decodeURIComponent(name))}
key={dataPreviewQueryId}
>
<ResultSet
queryId={dataPreviewQueryId}
visualize={false}
csv={false}
cache
height={innerTabContentHeight}
displayLimit={displayLimit}
defaultQueryLimit={defaultQueryLimit}
{pinnedTables.map(({ id, dbId, catalog, schema, name }) => (
<Tabs.TabPane
tab={
<>
<Icons.Table
iconSize="s"
css={css`
margin-bottom: 2px;
margin-right: 4px;
`}
/>
</Tabs.TabPane>
),
)}
{`${schema}.${decodeURIComponent(name)}`}
</>
}
key={pinnedTableKeys[id]}
>
<TablePreview
dbId={dbId}
catalog={catalog}
schema={schema}
tableName={name}
/>
</Tabs.TabPane>
))}
</Tabs>
</StyledPane>
);

63
superset-frontend/src/SqlLab/components/SqlEditorLeftBar/SqlEditorLeftBar.test.tsx
View File

@@ -27,6 +27,7 @@ import {
initialState,
defaultQueryEditor,
extraQueryEditor1,
extraQueryEditor2,
} from 'src/SqlLab/fixtures';
import type { RootState } from 'src/views/store';
import type { Store } from 'redux';
@@ -206,13 +207,13 @@ test('should toggle the table when the header is clicked', async () => {
});
test('When changing database the schema and table list must be updated', async () => {
const { rerender } = await renderAndWait(mockedProps, undefined, {
const reduxState = {
...initialState,
sqlLab: {
...initialState.sqlLab,
unsavedQueryEditor: {
id: defaultQueryEditor.id,
schema: 'new_schema',
schema: 'db1_schema',
},
queryEditors: [
defaultQueryEditor,
@@ -223,16 +224,22 @@ test('When changing database the schema and table list must be updated', async (
},
],
tables: [
table,
{
...table,
dbId: defaultQueryEditor.dbId,
schema: 'db1_schema',
},
{
...table,
dbId: 2,
schema: 'new_schema',
name: 'new_table',
queryEditorId: extraQueryEditor1.id,
},
],
},
});
};
const { rerender } = await renderAndWait(mockedProps, undefined, reduxState);
expect(screen.getAllByText(/main/i)[0]).toBeInTheDocument();
expect(screen.getAllByText(/ab_user/i)[0]).toBeInTheDocument();
@@ -250,30 +257,60 @@ test('When changing database the schema and table list must be updated', async (
);
const updatedDbSelector = await screen.findAllByText(/new_db/i);
expect(updatedDbSelector[0]).toBeInTheDocument();
const updatedTableSelector = await screen.findAllByText(/new_table/i);
expect(updatedTableSelector[0]).toBeInTheDocument();
const select = screen.getByRole('combobox', {
name: 'Select schema or type to search schemas',
});
userEvent.click(select);
expect(
await screen.findByRole('option', { name: 'main' }),
).toBeInTheDocument();
expect(
await screen.findByRole('option', { name: 'new_schema' }),
).toBeInTheDocument();
rerender(
<SqlEditorLeftBar
{...mockedProps}
database={{
userEvent.click(screen.getAllByText('new_schema')[1]);
const updatedTableSelector = await screen.findAllByText(/new_table/i);
expect(updatedTableSelector[0]).toBeInTheDocument();
});
test('display no compatible schema found when schema api throws errors', async () => {
const reduxState = {
...initialState,
sqlLab: {
...initialState.sqlLab,
queryEditors: [
{
...extraQueryEditor2,
dbId: 3,
schema: undefined,
},
],
},
};
await renderAndWait(
{
...mockedProps,
queryEditorId: extraQueryEditor2.id,
database: {
id: 3,
database_name: 'unauth_db',
backend: 'minervasql',
}}
queryEditorId={extraQueryEditor1.id}
/>,
},
},
undefined,
reduxState,
);
await waitFor(() =>
expect(fetchMock.calls('glob:*/api/v1/database/3/schemas/?*')).toHaveLength(
1,
),
);
const select = screen.getByRole('combobox', {
name: 'Select schema or type to search schemas',
});
userEvent.click(select);
expect(
await screen.findByText('No compatible schema found'),

11
superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
View File

@@ -101,7 +101,7 @@ const SqlEditorLeftBar = ({
queryEditorId,
height = 500,
}: SqlEditorLeftBarProps) => {
const tables = useSelector<SqlLabRootState, Table[]>(
const allSelectedTables = useSelector<SqlLabRootState, Table[]>(
({ sqlLab }) =>
sqlLab.tables.filter(table => table.queryEditorId === queryEditorId),
shallowEqual,
@@ -117,7 +117,14 @@ const SqlEditorLeftBar = ({
const [userSelectedDb, setUserSelected] = useState<DatabaseObject | null>(
null,
);
const { catalog, schema } = queryEditor;
const { dbId, catalog, schema } = queryEditor;
const tables = useMemo(
() =>
allSelectedTables.filter(
table => table.dbId === dbId && table.schema === schema,
),
[allSelectedTables, dbId, schema],
);
useEffect(() => {
const bool = querystring.parse(window.location.search).db;

10
superset-frontend/src/SqlLab/components/TableElement/TableElement.test.tsx
View File

@@ -92,7 +92,7 @@ test('has 4 IconTooltip elements', async () => {
initialState,
});
await waitFor(() =>
expect(getAllByTestId('mock-icon-tooltip')).toHaveLength(5),
expect(getAllByTestId('mock-icon-tooltip')).toHaveLength(6),
);
});
@@ -112,7 +112,7 @@ test('fades table', async () => {
initialState,
});
await waitFor(() =>
expect(getAllByTestId('mock-icon-tooltip')).toHaveLength(5),
expect(getAllByTestId('mock-icon-tooltip')).toHaveLength(6),
);
const style = window.getComputedStyle(getAllByTestId('fade')[0]);
expect(style.opacity).toBe('0');
@@ -133,7 +133,7 @@ test('sorts columns', async () => {
},
);
await waitFor(() =>
expect(getAllByTestId('mock-icon-tooltip')).toHaveLength(5),
expect(getAllByTestId('mock-icon-tooltip')).toHaveLength(6),
);
expect(
getAllByTestId('mock-column-element').map(el => el.textContent),
@@ -160,7 +160,7 @@ test('removes the table', async () => {
},
);
await waitFor(() =>
expect(getAllByTestId('mock-icon-tooltip')).toHaveLength(5),
expect(getAllByTestId('mock-icon-tooltip')).toHaveLength(6),
);
expect(fetchMock.calls(updateTableSchemaEndpoint)).toHaveLength(0);
fireEvent.click(getByText('Remove table preview'));
@@ -193,7 +193,7 @@ test('refreshes table metadata when triggered', async () => {
},
);
await waitFor(() =>
expect(getAllByTestId('mock-icon-tooltip')).toHaveLength(5),
expect(getAllByTestId('mock-icon-tooltip')).toHaveLength(6),
);
expect(fetchMock.calls(updateTableSchemaEndpoint)).toHaveLength(0);
expect(fetchMock.calls(getTableMetadataEndpoint)).toHaveLength(1);

173
superset-frontend/src/SqlLab/components/TablePreview/TablePreview.test.tsx Normal file
View File

@@ -0,0 +1,173 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import { type ReactChild } from 'react';
import fetchMock from 'fetch-mock';
import { table, initialState } from 'src/SqlLab/fixtures';
import {
render,
waitFor,
fireEvent,
screen,
} from 'spec/helpers/testing-library';
import TablePreview from '.';
jest.mock(
'src/components/FilterableTable',
() =>
({ data }: { data: Record<string, any>[] }) => (
<div>
{data.map((record, i) => (
<div key={i} data-test="mock-record-row">
{JSON.stringify(record)}
</div>
))}
</div>
),
);
jest.mock(
'react-virtualized-auto-sizer',
() =>
({ children }: { children: (params: { height: number }) => ReactChild }) =>
children({ height: 500 }),
);
jest.mock('src/components/IconTooltip', () => ({
IconTooltip: ({
onClick,
tooltip,
}: {
onClick: () => void;
tooltip: string;
}) => (
<button type="button" data-test="mock-icon-tooltip" onClick={onClick}>
{tooltip}
</button>
),
}));
const getTableMetadataEndpoint =
/\/api\/v1\/database\/\d+\/table_metadata\/(?:\?.*)?$/;
const getExtraTableMetadataEndpoint =
/\/api\/v1\/database\/\d+\/table_metadata\/extra\/(?:\?.*)?$/;
const fetchPreviewEndpoint = 'glob:*/api/v1/sqllab/execute/';
beforeEach(() => {
fetchMock.get(getTableMetadataEndpoint, table);
fetchMock.get(getExtraTableMetadataEndpoint, {});
fetchMock.post(fetchPreviewEndpoint, `{ "data": 123 }`);
});
afterEach(() => {
fetchMock.reset();
});
const mockedProps = {
dbId: table.dbId,
catalog: table.catalog,
schema: table.schema,
tableName: table.name,
};
test('renders columns', async () => {
const { getAllByTestId, queryByText } = render(
<TablePreview {...mockedProps} />,
{
useRedux: true,
initialState,
},
);
await waitFor(() =>
expect(getAllByTestId('mock-record-row')).toHaveLength(
table.columns.length,
),
);
expect(queryByText(`Columns (${table.columns.length})`)).toBeInTheDocument();
});
test('renders indexes', async () => {
const { queryByText } = render(<TablePreview {...mockedProps} />, {
useRedux: true,
initialState,
});
await waitFor(() =>
expect(fetchMock.calls(getTableMetadataEndpoint)).toHaveLength(1),
);
expect(queryByText(`Indexes (${table.indexes.length})`)).toBeInTheDocument();
});
test('renders preview', async () => {
const { getByText } = render(<TablePreview {...mockedProps} />, {
useRedux: true,
initialState: {
...initialState,
sqlLab: {
...initialState.sqlLab,
databases: {
[table.dbId]: {
id: table.dbId,
database_name: 'mysql',
disable_data_preview: false,
},
},
},
},
});
await waitFor(() =>
expect(fetchMock.calls(getTableMetadataEndpoint)).toHaveLength(1),
);
expect(fetchMock.calls(fetchPreviewEndpoint)).toHaveLength(0);
fireEvent.click(getByText('Data preview'));
await waitFor(() =>
expect(fetchMock.calls(fetchPreviewEndpoint)).toHaveLength(1),
);
});
describe('table actions', () => {
test('refreshes table metadata when triggered', async () => {
const { getByRole, getByText } = render(<TablePreview {...mockedProps} />, {
useRedux: true,
initialState,
});
await waitFor(() =>
expect(fetchMock.calls(getTableMetadataEndpoint)).toHaveLength(1),
);
const menuButton = getByRole('button', { name: /Table actions/i });
fireEvent.click(menuButton);
fireEvent.click(getByText('Refresh table schema'));
await waitFor(() =>
expect(fetchMock.calls(getTableMetadataEndpoint)).toHaveLength(2),
);
});
test('shows CREATE VIEW statement', async () => {
const { getByRole, getByText } = render(<TablePreview {...mockedProps} />, {
useRedux: true,
initialState,
});
await waitFor(() =>
expect(fetchMock.calls(getTableMetadataEndpoint)).toHaveLength(1),
);
const menuButton = getByRole('button', { name: /Table actions/i });
fireEvent.click(menuButton);
fireEvent.click(getByText('Show CREATE VIEW statement'));
await waitFor(() =>
expect(
screen.queryByRole('dialog', { name: 'CREATE VIEW statement' }),
).toBeInTheDocument(),
);
});
});

430
superset-frontend/src/SqlLab/components/TablePreview/index.tsx Normal file
View File

@@ -0,0 +1,430 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import { type FC, useCallback, useMemo, useRef, useState } from 'react';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { nanoid } from 'nanoid';
import {
ClientErrorObject,
css,
getExtensionsRegistry,
SafeMarkdown,
styled,
t,
} from '@superset-ui/core';
import AutoSizer from 'react-virtualized-auto-sizer';
import Icons from 'src/components/Icons';
import type { SqlLabRootState } from 'src/SqlLab/types';
import {
Skeleton,
AntdBreadcrumb as Breadcrumb,
AntdDropdown,
} from 'src/components';
import FilterableTable from 'src/components/FilterableTable';
import Tabs from 'src/components/Tabs';
import {
tableApiUtil,
TableMetaData,
useTableExtendedMetadataQuery,
useTableMetadataQuery,
} from 'src/hooks/apiResources';
import { runTablePreviewQuery } from 'src/SqlLab/actions/sqlLab';
import Alert from 'src/components/Alert';
import { Menu } from 'src/components/Menu';
import Card from 'src/components/Card';
import CopyToClipboard from 'src/components/CopyToClipboard';
import ResultSet from '../ResultSet';
import ShowSQL from '../ShowSQL';
type Props = {
dbId: number | string;
schema?: string;
catalog?: string | null;
tableName: string;
};
const extensionsRegistry = getExtensionsRegistry();
const COLUMN_KEYS = ['column_name', 'column_type', 'keys', 'comment'];
const MENUS = [
{
key: 'refresh-table',
label: t('Refresh table schema'),
icon: <i aria-hidden className="fa fa-refresh" />,
},
{
key: 'copy-select-statement',
label: t('Copy SELECT statement'),
icon: <i aria-hidden className="fa fa-clipboard m-l-2" />,
},
{
key: 'show-create-view-statement',
label: t('Show CREATE VIEW statement'),
icon: <i aria-hidden className="fa fa-eye" />,
},
];
const TAB_HEADER_HEIGHT = 80;
const PREVIEW_TOP_ACTION_HEIGHT = 30;
const PREVIEW_QUERY_LIMIT = 100;
const Title = styled.div`
display: flex;
flex-direction: row;
align-items: center;
column-gap: ${({ theme }) => theme.gridUnit}px;
font-size: ${({ theme }) => theme.typography.sizes.l}px;
font-weight: ${({ theme }) => theme.typography.weights.bold};
`;
const renderWell = (partitions: TableMetaData['partitions']) => {
if (!partitions) {
return null;
}
const { partitionQuery } = partitions;
let partitionClipBoard;
if (partitionQuery) {
const tt = t('Copy partition query to clipboard');
partitionClipBoard = (
<CopyToClipboard
text={partitionQuery}
shouldShowText={false}
tooltipText={tt}
copyNode={<i className="fa fa-clipboard" />}
/>
);
}
const latest = Object.entries(partitions.latest || [])
.map(([key, value]) => `${key}=${value}`)
.join('/');
return (
<Card size="small">
<div>
<small>
{t('latest partition:')} {latest}
</small>{' '}
{partitionClipBoard}
</div>
</Card>
);
};
const TablePreview: FC<Props> = ({ dbId, catalog, schema, tableName }) => {
const dispatch = useDispatch();
const [databaseName, backend, disableDataPreview] = useSelector<
SqlLabRootState,
string[]
>(
({ sqlLab: { databases } }) => [
databases[dbId]?.database_name,
databases[dbId]?.backend,
databases[dbId]?.disable_data_preview,
],
shallowEqual,
);
const copyStatementActionRef = useRef<HTMLButtonElement | null>(null);
const showViewStatementActionRef = useRef<HTMLButtonElement | null>(null);
const [previewQueryId, setPreviewQueryId] = useState<string>();
const {
currentData: tableMetadata,
isLoading: isMetadataLoading,
isFetching: isMetadataRefreshing,
isError: hasMetadataError,
error: metadataError,
} = useTableMetadataQuery(
{
dbId,
catalog,
schema: schema ?? '',
table: tableName ?? '',
},
{ skip: !dbId || !schema || !tableName },
);
const { currentData: tableExtendedMetadata, error: metadataExtrError } =
useTableExtendedMetadataQuery(
{
dbId,
catalog,
schema: schema ?? '',
table: tableName ?? '',
},
{ skip: !dbId || !schema || !tableName },
);
const data = useMemo(
() =>
(tableMetadata?.columns.length ?? 0) > 0
? tableMetadata?.columns.map(
({ name, type, longType, keys, comment }) => ({
column_name: name,
column_type: longType || type,
keys,
comment,
}),
)
: undefined,
[tableMetadata],
);
const hasKeys = useMemo(
() => data?.some(({ keys }) => Boolean(keys?.length)),
[data],
);
const columns = useMemo(
() => (hasKeys ? COLUMN_KEYS : COLUMN_KEYS.filter(name => name !== 'keys')),
[hasKeys],
);
const tableData = {
dataPreviewQueryId: previewQueryId,
...tableMetadata,
...tableExtendedMetadata,
};
const refreshTableMetadata = () => {
dispatch(
tableApiUtil.invalidateTags([{ type: 'TableMetadatas', id: tableName }]),
);
};
const ResultTable =
extensionsRegistry.get('sqleditor.extension.resultTable') ??
FilterableTable;
const customTabs =
extensionsRegistry.get('sqleditor.extension.tablePreview') ?? [];
const onTabSwitch = useCallback(
(activeKey: string) => {
if (activeKey === 'sample' && !previewQueryId) {
const queryId = nanoid(11);
dispatch(
runTablePreviewQuery(
{
previewQueryId: queryId,
dbId,
catalog,
schema,
name: tableName,
selectStar: tableData.selectStar,
},
true,
),
);
setPreviewQueryId(queryId);
}
},
[
previewQueryId,
dbId,
catalog,
schema,
tableName,
tableData.selectStar,
dispatch,
],
);
const dropdownMenu = useMemo(() => {
let menus = [...MENUS];
if (!tableData.selectStar) {
menus = menus.filter(({ key }) => key !== 'copy-select-statement');
}
if (!tableData.view) {
menus = menus.filter(({ key }) => key !== 'show-create-view-statement');
}
return menus;
}, [tableData.view, tableData.selectStar]);
if (isMetadataLoading) {
return <Skeleton active />;
}
if (hasMetadataError || metadataExtrError) {
return (
<Alert
type="warning"
message={
((metadataError || metadataExtrError) as ClientErrorObject)?.error
}
/>
);
}
if (!data) {
return (
<Alert
type="warning"
message={t('Cannot find the table (%s) metadata.', tableName)}
closable={false}
/>
);
}
return (
<div
css={css`
height: 100%;
display: flex;
flex-direction: column;
`}
>
<Breadcrumb separator=">">
<Breadcrumb.Item>{backend}</Breadcrumb.Item>
<Breadcrumb.Item>{databaseName}</Breadcrumb.Item>
{catalog && <Breadcrumb.Item>{catalog}</Breadcrumb.Item>}
{schema && <Breadcrumb.Item>{schema}</Breadcrumb.Item>}
<Breadcrumb.Item> </Breadcrumb.Item>
</Breadcrumb>
<div style={{ display: 'none' }}>
<CopyToClipboard
copyNode={
<button type="button" ref={copyStatementActionRef}>
invisible button
</button>
}
text={tableData.selectStar}
shouldShowText={false}
/>
{tableData.view && (
<ShowSQL
sql={tableData.view}
tooltipText={t('Show CREATE VIEW statement')}
title={t('CREATE VIEW statement')}
triggerNode={
<button type="button" ref={showViewStatementActionRef}>
invisible button
</button>
}
/>
)}
</div>
<Title>
<Icons.Table iconSize="l" />
{tableName}
<AntdDropdown
overlay={
<Menu
onClick={({ key }) => {
if (key === 'refresh-table') {
refreshTableMetadata();
}
if (key === 'copy-select-statement') {
copyStatementActionRef.current?.click();
}
if (key === 'show-create-view-statement') {
showViewStatementActionRef.current?.click();
}
}}
items={dropdownMenu}
/>
}
trigger={['click']}
>
<Icons.DownSquareOutlined
iconSize="m"
style={{ marginTop: 2, marginLeft: 4 }}
aria-label={t('Table actions')}
/>
</AntdDropdown>
</Title>
{isMetadataRefreshing ? (
<Skeleton active />
) : (
<>
{tableData.comment && <SafeMarkdown source={tableData.comment} />}
{renderWell(tableData.partitions)}
<div
css={css`
flex: 1 1 auto;
`}
>
<AutoSizer disableWidth>
{({ height }) => (
<Tabs
fullWidth={false}
onTabClick={onTabSwitch}
css={css`
height: ${height}px;
`}
>
<Tabs.TabPane
tab={t('Columns (%s)', data.length)}
key="columns"
>
<ResultTable
queryId="table-columns"
height={height - TAB_HEADER_HEIGHT}
data={data}
orderedColumnKeys={columns}
/>
</Tabs.TabPane>
{tableData?.selectStar && !disableDataPreview && (
<Tabs.TabPane tab={t('Data preview')} key="sample">
{previewQueryId && (
<ResultSet
queryId={previewQueryId}
visualize={false}
csv={false}
cache
height={
height -
TAB_HEADER_HEIGHT -
PREVIEW_TOP_ACTION_HEIGHT
}
displayLimit={PREVIEW_QUERY_LIMIT}
defaultQueryLimit={PREVIEW_QUERY_LIMIT}
/>
)}
</Tabs.TabPane>
)}
{tableData?.indexes && tableData.indexes.length > 0 && (
<Tabs.TabPane
tab={t('Indexes (%s)', tableData.indexes.length)}
key="indexes"
>
{tableData.indexes.map((ix, i) => (
<pre className="code" key={i}>
{JSON.stringify(ix, null, ' ')}
</pre>
))}
</Tabs.TabPane>
)}
{tableData?.metadata && (
<Tabs.TabPane tab={t('Metadata')} key="metadata">
<ResultTable
queryId="table-metadata"
height={height - TAB_HEADER_HEIGHT}
data={Object.entries(tableData.metadata).map(
([name, value]) => ({ name, value }),
)}
orderedColumnKeys={['name', 'value']}
/>
</Tabs.TabPane>
)}
{customTabs.map(([title, ExtComponent]) => (
<Tabs.TabPane tab={title} key={title}>
<ExtComponent
dbId={Number(dbId)}
schema={schema ?? ''}
tableName={tableName}
/>
</Tabs.TabPane>
))}
</Tabs>
)}
</AutoSizer>
</div>
</>
)}
</div>
);
};
export default TablePreview;