ydb-embedded-ui 1.13.1 → 1.14.0

package/dist/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.tsx

@@ -1,7 +1,12 @@
 import React from 'react';
-import InternalLink from '../../../components/InternalLink/InternalLink';
+import {useSelector} from 'react-redux';
 import cn from 'bem-cn-lite';
 
+import {INVERTED_DISKS_KEY} from '../../../utils/constants';
+import {getSettingValue} from '../../../store/reducers/settings';
+
+import InternalLink from '../../../components/InternalLink/InternalLink';
+
 import './DiskStateProgressBar.scss';
 
 const b = cn('storage-disk-progress-bar');
@@ -26,11 +31,16 @@ function DiskStateProgressBar({
     severity,
     href,
 }: DiskStateProgressBarProps) {
+    const inverted = useSelector((state) => getSettingValue(state, INVERTED_DISKS_KEY));
+
     const renderAllocatedPercent = () => {
         return (
             diskAllocatedPercent >= 0 && (
                 <React.Fragment>
-                    <div className={b('filled')} style={{width: `${diskAllocatedPercent}%`}} />
+                    <div
+                        className={b('filled')}
+                        style={{width: `${inverted ? 100 - diskAllocatedPercent : diskAllocatedPercent}%`}}
+                    />
                     <div className={b('filled-title')}>
                         {`${Math.round(diskAllocatedPercent)}%`}
                     </div>
@@ -39,13 +49,14 @@ function DiskStateProgressBar({
         );
     };
 
+    const mods: Record<string, boolean | undefined> = {inverted};
+    if (severity !== undefined && severity in diskProgressColors) {
+        mods[diskProgressColors[severity].toLocaleLowerCase()] = true;
+    }
+
     return (
         <div
-            className={
-                severity !== undefined
-                    ? b({[diskProgressColors[severity].toLowerCase()]: true})
-                    : undefined
-            }
+            className={b(mods)}
             role="meter"
             aria-label="Disk allocated space"
             aria-valuemin={0}

package/dist/containers/Storage/Pdisk/__tests__/colors.tsx

@@ -1,13 +1,14 @@
-import {render} from '@testing-library/react'
 import {MemoryRouter} from 'react-router-dom';
 
+import {renderWithStore} from '../../../../utils/tests/providers';
+
 import {TPDiskState} from '../../../../types/api/storage'
 
 import PDisk from '../Pdisk'
 
 describe('PDisk state', () => {
     it('Should determine severity based on State', () => {
-        const {getAllByRole} = render(
+        const {getAllByRole} = renderWithStore(
             <MemoryRouter>
                 <PDisk
                     NodeId={1}
@@ -26,7 +27,7 @@ describe('PDisk state', () => {
     });
 
     it('Should display as unavailabe when no State is provided', () => {
-        const {getByRole} = render(
+        const {getByRole} = renderWithStore(
             <MemoryRouter>
                 <PDisk NodeId={1} />
             </MemoryRouter>

package/dist/containers/Storage/Vdisk/__tests__/colors.tsx

@@ -1,10 +1,10 @@
-import {render} from '@testing-library/react'
+import {renderWithStore} from '../../../../utils/tests/providers';
 
 import VDisk from '../Vdisk'
 
 describe('VDisk state', () => {
     it('Should determine severity based on the highest value among VDiskState, DiskSpace and FrontQueues', () => {
-        const {getAllByRole} = render(
+        const {getAllByRole} = renderWithStore(
             <>
                 <VDisk
                     VDiskId={{Domain: 1}}
@@ -35,7 +35,7 @@ describe('VDisk state', () => {
     });
 
     it('Should not pick the highest severity based on FrontQueues value', () => {
-        const {getAllByRole} = render(
+        const {getAllByRole} = renderWithStore(
             <>
                 <VDisk
                     VDiskId={{Domain: 1}}
@@ -59,7 +59,7 @@ describe('VDisk state', () => {
     });
 
     it('Should display as unavailable when no VDiskState is provided', () => {
-        const {getAllByRole} = render(
+        const {getAllByRole} = renderWithStore(
             <>
                 <VDisk VDiskId={{Domain: 1}} />
                 <VDisk VDiskId={{Domain: 2}} VDiskState="OK" />
@@ -86,7 +86,7 @@ describe('VDisk state', () => {
     });
 
     it('Should display replicating VDisks in OK state with a distinct color', () => {
-        const {getAllByRole} = render(
+        const {getAllByRole} = renderWithStore(
             <>
                 <VDisk
                     VDiskId={{Domain: 1}}
@@ -108,7 +108,7 @@ describe('VDisk state', () => {
     });
 
     it('Should display replicating VDisks in a not-OK state with a regular color', () => {
-        const {getAllByRole} = render(
+        const {getAllByRole} = renderWithStore(
             <>
                 <VDisk
                     VDiskId={{Domain: 1}}
@@ -130,7 +130,7 @@ describe('VDisk state', () => {
     });
 
     it('Should always display donor VDisks with a regular color', () => {
-        const {getAllByRole} = render(
+        const {getAllByRole} = renderWithStore(
             <>
                 <VDisk
                     VDiskId={{Domain: 1}}

package/dist/containers/Tenant/Acl/Acl.js

@@ -13,6 +13,12 @@ const b = cn('kv-acl');
 
 const COLUMN_WIDTH = 140;
 
+const TABLE_SETTINGS = {
+    ...DEFAULT_TABLE_SETTINGS,
+    dynamicRender: false,
+    stickyTop: 36,
+};
+
 class Acl extends React.Component {
     static propTypes = {
         error: PropTypes.string,
@@ -81,7 +87,7 @@ class Acl extends React.Component {
             <DataTable
                 columns={this.COLUMNS}
                 data={acl}
-                settings={{...DEFAULT_TABLE_SETTINGS, stickyTop: 36}}
+                settings={TABLE_SETTINGS}
             />
         );
     };

package/dist/containers/Tenant/Diagnostics/DiagnosticsPages.ts

@@ -20,7 +20,7 @@ type Page = {
 
 const overview = {
     id: GeneralPagesIds.overview,
-    title: 'Overview',
+    title: 'Info',
 };
 
 const topQueries = {
@@ -81,6 +81,8 @@ export const TABLE_PAGES = [overview, topShards, graph, tablets, hotKeys, descri
 
 export const DIR_PAGES = [overview, topShards, describe];
 
+export const TOPIC_PAGES = [overview, describe];
+
 // verbose mapping to guarantee correct tabs for new path types
 // TS will error when a new type is added but not mapped here
 const pathTypeToPages: Record<EPathType, Page[] | undefined> = {
@@ -95,7 +97,9 @@ const pathTypeToPages: Record<EPathType, Page[] | undefined> = {
 
     [EPathType.EPathTypeDir]: DIR_PAGES,
     [EPathType.EPathTypeTableIndex]: DIR_PAGES,
-    [EPathType.EPathTypeCdcStream]: DIR_PAGES,
+    
+    [EPathType.EPathTypeCdcStream]: TOPIC_PAGES,
+    [EPathType.EPathTypePersQueueGroup]: TOPIC_PAGES,
 };
 
 export const getPagesByType = (type?: EPathType) =>

package/dist/containers/Tenant/Diagnostics/HotKeys/HotKeys.js

@@ -8,7 +8,7 @@ import Icon from '../../../../components/Icon/Icon';
 
 import {AutoFetcher} from '../../../../utils/autofetcher';
 import {getHotKeys, setHotKeysOptions} from '../../../../store/reducers/hotKeys';
-import {prepareQueryError} from '../../../../utils';
+import {prepareQueryError} from '../../../../utils/query';
 
 import {isColumnEntityType, isTableType} from '../../utils/schema';
 

package/dist/containers/Tenant/Diagnostics/Overview/Overview.tsx

@@ -6,7 +6,11 @@ import {Loader} from '@yandex-cloud/uikit';
 
 //@ts-ignore
 import SchemaInfoViewer from '../../Schema/SchemaInfoViewer/SchemaInfoViewer';
-import {IndexInfoViewer} from '../../../../components/IndexInfoViewer/IndexInfoViewer';
+import {
+    CDCStreamInfo,
+    TableIndexInfo,
+    PersQueueGroupInfo,
+} from '../../../../components/InfoViewer/schemaInfo';
 
 import {EPathType} from '../../../../types/api/schema';
 import {isColumnEntityType, isTableType} from '../../utils/schema';
@@ -121,11 +125,12 @@ function Overview(props: OverviewProps) {
             [EPathType.EPathTypeDir]: undefined,
             [EPathType.EPathTypeTable]: undefined,
             [EPathType.EPathTypeSubDomain]: undefined,
-            [EPathType.EPathTypeTableIndex]: () => <IndexInfoViewer data={schemaData} />,
+            [EPathType.EPathTypeTableIndex]: () => <TableIndexInfo data={schemaData} />,
             [EPathType.EPathTypeExtSubDomain]: undefined,
             [EPathType.EPathTypeColumnStore]: undefined,
             [EPathType.EPathTypeColumnTable]: undefined,
-            [EPathType.EPathTypeCdcStream]: undefined,
+            [EPathType.EPathTypeCdcStream]: () => <CDCStreamInfo data={schemaData} />,
+            [EPathType.EPathTypePersQueueGroup]: () => <PersQueueGroupInfo data={schemaData} />,
         };
 
         return (props.type && pathTypeToComponent[props.type]?.()) || (

package/dist/containers/Tenant/Diagnostics/TopQueries/TopQueries.js

@@ -13,7 +13,7 @@ import {isColumnEntityType} from '../../utils/schema';
 
 import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
 import {TenantGeneralTabsIds} from '../../TenantPages';
-import {prepareQueryError} from '../../../../utils';
+import {prepareQueryError} from '../../../../utils/query';
 
 import './TopQueries.scss';
 

package/dist/containers/Tenant/Diagnostics/TopShards/TopShards.js

@@ -13,7 +13,7 @@ import {AutoFetcher} from '../../../../utils/autofetcher';
 import HistoryContext from '../../../../contexts/HistoryContext';
 import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
 import {isColumnEntityType} from '../../utils/schema';
-import {prepareQueryError} from '../../../../utils';
+import {prepareQueryError} from '../../../../utils/query';
 import {i18n} from '../../../../utils/i18n';
 
 import './TopShards.scss';

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useReducer} from 'react';
+import React, {ReactNode, useEffect, useReducer} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import {Link} from 'react-router-dom';
 import cn from 'bem-cn-lite';
@@ -14,9 +14,13 @@ import Acl from '../Acl/Acl';
 import SchemaViewer from '../Schema/SchemaViewer/SchemaViewer';
 import CopyToClipboard from '../../../components/CopyToClipboard/CopyToClipboard';
 import InfoViewer from '../../../components/InfoViewer/InfoViewer';
+import {
+    CDCStreamOverview,
+    PersQueueGroupOverview,
+} from '../../../components/InfoViewer/schemaOverview';
 import Icon from '../../../components/Icon/Icon';
 
-import type {EPathSubType, EPathType} from '../../../types/api/schema';
+import {EPathSubType, EPathType, TDirEntry} from '../../../types/api/schema';
 import {isColumnEntityType, isIndexTable, isTableType} from '../utils/schema';
 
 import {
@@ -100,8 +104,8 @@ function ObjectSummary(props: ObjectSummaryProps) {
     });
 
     const {name: tenantName, info: infoTab} = queryParams;
-    const pathData = _.get(data[tenantName as string], 'PathDescription.Self');
-    const currentSchemaData = _.get(data[currentSchemaPath], 'PathDescription.Self');
+    const pathData: TDirEntry | undefined = _.get(data[tenantName as string], 'PathDescription.Self');
+    const currentSchemaData: TDirEntry | undefined = _.get(data[currentSchemaPath], 'PathDescription.Self');
 
     const tableSchema =
         currentItem?.PathDescription?.Table || currentItem?.PathDescription?.ColumnTableDescription;
@@ -151,14 +155,36 @@ function ObjectSummary(props: ObjectSummaryProps) {
     };
 
     const renderObjectOverview = () => {
-        const startTimeInMilliseconds = Number(currentSchemaData?.CreateStep);
-        let createTime = '';
-        if (startTimeInMilliseconds) {
-            createTime = new Date(startTimeInMilliseconds).toUTCString();
+        // verbose mapping to guarantee a correct render for new path types
+        // TS will error when a new type is added but not mapped here
+        const pathTypeToComponent: Record<EPathType, (() => ReactNode) | undefined> = {
+            [EPathType.EPathTypeInvalid]: undefined,
+            [EPathType.EPathTypeDir]: undefined,
+            [EPathType.EPathTypeTable]: undefined,
+            [EPathType.EPathTypeSubDomain]: undefined,
+            [EPathType.EPathTypeTableIndex]: undefined,
+            [EPathType.EPathTypeExtSubDomain]: undefined,
+            [EPathType.EPathTypeColumnStore]: undefined,
+            [EPathType.EPathTypeColumnTable]: undefined,
+            [EPathType.EPathTypeCdcStream]: () => <CDCStreamOverview data={data[currentSchemaPath]} />,
+            [EPathType.EPathTypePersQueueGroup]: () => <PersQueueGroupOverview data={data[currentSchemaPath]} />,
+        };
+
+        let component = currentSchemaData?.PathType && pathTypeToComponent[currentSchemaData.PathType]?.();
+
+        if (!component) {
+            const startTimeInMilliseconds = Number(currentSchemaData?.CreateStep);
+            let createTime = '';
+            if (startTimeInMilliseconds) {
+                createTime = new Date(startTimeInMilliseconds).toUTCString();
+            }
+
+            component = <InfoViewer info={[{label: 'Create time', value: createTime}]} />;
         }
+
         return (
             <div className={b('overview-wrapper')}>
-                <InfoViewer info={[{label: 'Create time', value: createTime}]} />
+                {component}
             </div>
         );
     };
@@ -203,7 +229,7 @@ function ObjectSummary(props: ObjectSummaryProps) {
                             rootPath={tenantName as string}
                             // for the root pathData.Name contains the same string as tenantName,
                             // but without the leading slash
-                            rootName={pathData?.Name || tenantName}
+                            rootName={pathData.Name || String(tenantName)}
                             rootType={pathData.PathType}
                             currentPath={currentSchemaPath}
                         />

package/dist/containers/Tenant/Preview/Preview.js

@@ -3,30 +3,22 @@ import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import cn from 'bem-cn-lite';
 
-import DataTable from '@yandex-cloud/react-data-table';
 import {Loader, Button} from '@yandex-cloud/uikit';
 
 import Icon from '../../../components/Icon/Icon';
 import Fullscreen from '../../../components/Fullscreen/Fullscreen';
+import {QueryResultTable} from '../../../components/QueryResultTable';
 
 import {sendQuery, setQueryOptions} from '../../../store/reducers/preview';
-import {showTooltip, hideTooltip} from '../../../store/reducers/tooltip';
-import {prepareQueryError, prepareQueryResponse} from '../../../utils/index';
-import {isNumeric} from '../../../utils/utils';
+import {prepareQueryError} from '../../../utils/query';
 
 import {isTableType} from '../utils/schema';
 import {AutoFetcher} from '../../../utils/autofetcher';
 import EnableFullscreenButton from '../../../components/EnableFullscreenButton/EnableFullscreenButton';
-import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
 import {setShowPreview} from '../../../store/reducers/schema';
 
 import './Preview.scss';
 
-const TABLE_SETTINGS = {
-    ...DEFAULT_TABLE_SETTINGS,
-    stripedRows: true,
-};
-
 const b = cn('kv-preview');
 
 class Preview extends React.Component {
@@ -38,8 +30,6 @@ class Preview extends React.Component {
         data: PropTypes.array,
         loading: PropTypes.bool,
         type: PropTypes.string,
-        showTooltip: PropTypes.func,
-        hideTooltip: PropTypes.func,
         partCount: PropTypes.string,
     };
 
@@ -55,11 +45,10 @@ class Preview extends React.Component {
     }
 
     componentDidUpdate(prevProps) {
-        const {table, hideTooltip, autorefresh, setQueryOptions} = this.props;
+        const {table, autorefresh, setQueryOptions} = this.props;
 
         if (prevProps.table !== table) {
             this.sendQueryForPreview();
-            hideTooltip();
             setQueryOptions({
                 wasLoaded: false,
                 data: undefined,
@@ -121,41 +110,8 @@ class Preview extends React.Component {
         );
     };
 
-    renderTable = () => {
-        const {data, showTooltip} = this.props;
-
-        let columns = [];
-        if (data && data.length > 0) {
-            columns = Object.keys(data[0]).map((key) => ({
-                name: key,
-                align: isNumeric(data[0][key]) ? DataTable.RIGHT : DataTable.LEFT,
-                sortAccessor: (row) => isNumeric(row[key]) ? Number(row[key]) : row[key],
-                render: ({value}) => {
-                    return (
-                        <span
-                            className={b('cell')}
-                            onClick={(e) => showTooltip(e.target, value, 'cell')}
-                        >
-                            {value}
-                        </span>
-                    );
-                },
-            }));
-        }
-
-        const preparedData = prepareQueryResponse(data);
-
-        return <DataTable columns={columns} data={preparedData} settings={TABLE_SETTINGS} />;
-    };
-
     render() {
-        const {error, loading, data = [], type, wasLoaded, isFullscreen} = this.props;
-
-        let message;
-
-        if (!isTableType(type)) {
-            message = <div className={b('message-container')}>Not available</div>;
-        }
+        const {error, loading, data, type, wasLoaded, isFullscreen} = this.props;
 
         if (loading && !wasLoaded) {
             return (
@@ -165,15 +121,19 @@ class Preview extends React.Component {
             );
         }
 
-        if (error) {
-            message = <div className={b('message-container')}>{prepareQueryError(error)}</div>;
-        }
+        let message;
 
-        if (!loading && data.length === 0) {
-            message = <div className={b('message-container')}>Table is empty</div>;
+        if (!isTableType(type)) {
+            message = <div className={b('message-container')}>Not available</div>;
+        } else if (error) {
+            message = <div className={b('message-container')}>{prepareQueryError(error)}</div>;
         }
 
-        const content = message ?? <div className={b('result')}>{this.renderTable()}</div>;
+        const content = message ?? (
+            <div className={b('result')}>
+                <QueryResultTable data={data.result} columns={data.columns} />
+            </div>
+        );
 
         return (
             <div className={b()}>
@@ -185,7 +145,7 @@ class Preview extends React.Component {
 }
 
 const mapStateToProps = (state) => {
-    const {data = [], loading, error, wasLoaded} = state.preview;
+    const {data = {}, loading, error, wasLoaded} = state.preview;
     const {autorefresh, currentSchemaPath} = state.schema;
 
     return {
@@ -201,8 +161,6 @@ const mapStateToProps = (state) => {
 
 const mapDispatchToProps = {
     sendQuery,
-    showTooltip,
-    hideTooltip,
     setQueryOptions,
     setShowPreview,
 };

package/dist/containers/Tenant/Preview/Preview.scss

@@ -16,8 +16,8 @@
         justify-content: space-between;
         align-items: center;
 
-        height: 40px;
-        padding: 0 19px;
+        height: 53px;
+        padding: 0 20px;
 
         border-bottom: 1px solid var(--yc-color-line-generic);
         background-color: var(--yc-color-base-background);
@@ -38,7 +38,7 @@
         gap: 5px;
     }
     &__message-container {
-        padding: 15px 19px;
+        padding: 15px 20px;
     }
 
     &__loader-container {
@@ -49,14 +49,10 @@
         height: 100%;
     }
 
-    &__cell {
-        @include cell-container;
-    }
-
     &__result {
         overflow: auto;
 
         height: calc(100% - 40px);
-        padding: 0 19px;
+        padding: 0 10px;
     }
 }

package/dist/containers/Tenant/QueryEditor/QueryEditor.js

@@ -4,9 +4,10 @@ import {connect} from 'react-redux';
 import cn from 'bem-cn-lite';
 import _ from 'lodash';
 import MonacoEditor from 'react-monaco-editor';
-import DataTable from '@yandex-cloud/react-data-table';
 import {Button, DropdownMenu} from '@yandex-cloud/uikit';
+
 import SplitPane from '../../../components/SplitPane';
+import {QueryResultTable} from '../../../components/QueryResultTable';
 
 import SaveQuery from './SaveQuery/SaveQuery';
 import SavedQueries from './SavedQueries/SavedQueries';
@@ -26,16 +27,13 @@ import {
     setMonacoHotKey,
 } from '../../../store/reducers/executeQuery';
 import {getExplainQuery, getExplainQueryAst} from '../../../store/reducers/explainQuery';
-import {showTooltip} from '../../../store/reducers/tooltip';
 import {getSettingValue, setSettingValue} from '../../../store/reducers/settings';
 import {
     DEFAULT_IS_QUERY_RESULT_COLLAPSED,
     DEFAULT_SIZE_RESULT_PANE_KEY,
-    DEFAULT_TABLE_SETTINGS,
     SAVED_QUERIES_KEY,
     QUERY_INITIAL_RUN_ACTION_KEY,
 } from '../../../utils/constants';
-import {prepareQueryResponse} from '../../../utils/index';
 
 import {parseJson} from '../../../utils/utils';
 
@@ -55,11 +53,9 @@ export const RUN_ACTIONS = [
 ];
 
 const TABLE_SETTINGS = {
-    ...DEFAULT_TABLE_SETTINGS,
     sortable: false,
     dynamicItemSizeGetter: () => 40,
     dynamicRenderType: 'variable',
-    stripedRows: true,
 };
 
 const EDITOR_OPTIONS = {
@@ -84,7 +80,6 @@ const propTypes = {
     response: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),
     executeQuery: PropTypes.object,
     explainQuery: PropTypes.object,
-    showTooltip: PropTypes.func,
     setMonacoHotKey: PropTypes.func,
     theme: PropTypes.string,
     type: PropTypes.string,
@@ -306,40 +301,17 @@ function QueryEditor(props) {
     const renderExecuteQuery = () => {
         const {
             executeQuery: {data, error, stats},
-            showTooltip,
         } = props;
 
         let content;
         if (data) {
-            let columns = [];
-            if (data.length > 0) {
-                columns = Object.keys(data[0]).map((key) => ({
-                    name: key,
-                    render: ({value}) => {
-                        return (
-                            <span
-                                className={b('cell')}
-                                onClick={(e) => showTooltip(e.target, value, 'cell')}
-                            >
-                                {value}
-                            </span>
-                        );
-                    },
-                }));
-                const preparedData = prepareQueryResponse(data);
-
-                content = columns.length ? (
-                    <DataTable
-                        columns={columns}
-                        data={preparedData}
-                        settings={TABLE_SETTINGS}
-                        theme="yandex-cloud"
-                        rowKey={(_, index) => index}
-                    />
-                ) : (
-                    <div>{data}</div>
-                );
-            }
+            content = (
+                <QueryResultTable
+                    data={data.result}
+                    columns={data.columns}
+                    settings={TABLE_SETTINGS}
+                />
+            );
         }
         const textResults = getPreparedResult();
         const disabled = !textResults.length || resultType !== RESULT_TYPES.EXECUTE;
@@ -469,12 +441,12 @@ function QueryEditor(props) {
         const columnDivider = '\t';
         const rowDivider = '\n';
 
-        if (!data?.length) {
+        if (!data?.result?.length) {
             return '';
         }
 
-        const columnHeaders = Object.keys(data[0]);
-        const rows = [columnHeaders].concat(data);
+        const columnHeaders = Object.keys(data.result[0]);
+        const rows = [columnHeaders].concat(data.result);
 
         return rows
             .map((item) => {
@@ -675,7 +647,6 @@ const mapDispatchToProps = {
     saveQueryToHistory,
     goToPreviousQuery,
     goToNextQuery,
-    showTooltip,
     getExplainQuery,
     getExplainQueryAst,
     setSettingValue,

package/dist/containers/Tenant/QueryEditor/QueryEditor.scss

@@ -7,7 +7,7 @@
     flex: 1 1 auto;
     flex-direction: column;
 
-    height: calc(100% - 56px);
+    height: 100%;
 
     @include query-data-table;
 
@@ -94,10 +94,6 @@
         color: var(--yc-color-text-secondary);
     }
 
-    &__cell {
-        @include cell-container;
-    }
-
     &__select-query-action {
         margin-left: 2px;
     }

package/dist/containers/Tenant/QueryEditor/QueryExplain/QueryExplain.scss

@@ -7,8 +7,7 @@
         flex-grow: 1;
         flex-direction: column;
 
-        margin-top: 20px;
-        padding: 0px 8px;
+        padding: 0px 10px;
     }
     &__controls {
         position: sticky;

package/dist/containers/Tenant/QueryEditor/QueryResult/QueryResult.scss

@@ -7,8 +7,8 @@
         flex-grow: 1;
         flex-direction: column;
 
-        margin-top: 20px;
-        padding: 0px 8px;
+        padding: 0px 10px;
+
         @include query-data-table();
         & .data-table__table-wrapper {
             padding-bottom: 0;