Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(Query): enable queries with multiple resultsets #595

Merged
merged 3 commits into from
Nov 27, 2023
Merged

feat(Query): enable queries with multiple resultsets #595

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e8983d1
refactor: move utils functions
artemmufazalov Nov 22, 2023
8f58972
feat(Query): enable queries with multiple resultsets
artemmufazalov Nov 22, 2023
8ad062b
fixup! feat(Query): enable queries with multiple resultsets
artemmufazalov Nov 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/components/VirtualTable/TableChunk.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import {useEffect, useRef, memo} from 'react';

import {getArray} from '../../utils';

import type {Column, Chunk, GetRowClassName} from './types';
import {LoadingTableRow, TableRow} from './TableRow';
import {getArray} from './utils';

// With original memo generic types are lost
const typedMemo: <T>(Component: T) => T = memo;
Expand Down
2 changes: 1 addition & 1 deletion src/components/VirtualTable/VirtualTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {useState, useReducer, useRef, useCallback, useEffect} from 'react';

import type {IResponseError} from '../../types/api/error';
import {getArray} from '../../utils';

import {TableWithControlsLayout} from '../TableWithControlsLayout/TableWithControlsLayout';
import {ResponseError} from '../Errors/ResponseError';
Expand Down Expand Up @@ -31,7 +32,6 @@ import {TableHead} from './TableHead';
import {TableChunk} from './TableChunk';
import {EmptyTableRow} from './TableRow';
import {useIntersectionObserver} from './useIntersectionObserver';
import {getArray} from './utils';
import i18n from './i18n';
import {b} from './shared';

Expand Down
15 changes: 5 additions & 10 deletions src/containers/Tenant/Diagnostics/Network/Network.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ import {changeFilter, ProblemFilterValues} from '../../../../store/reducers/sett
import {AutoFetcher} from '../../../../utils/autofetcher';
import {getDefaultNodePath} from '../../../Node/NodePages';

import {getConnectedNodesCount} from './utils';

import './Network.scss';

const b = cn('network');
Expand Down Expand Up @@ -145,11 +147,6 @@ class Network extends React.Component {
);
};

getConnectedNodesCount = (peers) => {
const res = peers?.reduce((acc, item) => (item.Connected ? acc + 1 : acc), 0);
return res;
};

renderNodes = (nodes, isRight) => {
const {showId, showRacks, clickedNode} = this.state;
let problemNodesCount = 0;
Expand All @@ -171,9 +168,7 @@ class Network extends React.Component {
let capacity, connected;
if (!isRight && nodeInfo?.Peers) {
capacity = Object.keys(nodeInfo?.Peers).length;
connected = this.getConnectedNodesCount(
nodeInfo?.Peers,
);
connected = getConnectedNodesCount(nodeInfo?.Peers);
}

if (
Expand Down Expand Up @@ -214,7 +209,7 @@ class Network extends React.Component {
let capacity, connected;
if (!isRight) {
capacity = nodeInfo?.Peers?.length;
connected = this.getConnectedNodesCount(nodeInfo?.Peers);
connected = getConnectedNodesCount(nodeInfo?.Peers);
}

if (
Expand All @@ -234,7 +229,7 @@ class Network extends React.Component {
capacity={nodeInfo?.Peers && nodeInfo?.Peers.length}
connected={
nodeInfo?.Peers &&
this.getConnectedNodesCount(nodeInfo?.Peers)
getConnectedNodesCount(nodeInfo?.Peers)
}
onMouseEnter={showTooltip}
onMouseLeave={hideTooltip}
Expand Down
6 changes: 6 additions & 0 deletions src/containers/Tenant/Diagnostics/Network/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import type {TNetNodePeerInfo} from '../../../../types/api/netInfo';

// determine how many nodes have status Connected "true"
export const getConnectedNodesCount = (peers: TNetNodePeerInfo[] | undefined) => {
return peers?.reduce((acc, item) => (item.Connected ? acc + 1 : acc), 0);
};
18 changes: 13 additions & 5 deletions src/containers/Tenant/Query/ExecuteResult/ExecuteResult.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,19 @@
& .data-table__table-wrapper {
padding-bottom: 0;
}
&_fullscreen {
width: 100%;
margin-top: 10px;
padding: 0 10px 10px;
}
}

&__result-fullscreen-wrapper {
display: flex;
flex-direction: column;

width: 100%;
margin-top: 10px;
padding: 0 10px 10px;
}

&__result-tabs {
padding-left: 10px;
}

&__error {
Expand Down
87 changes: 71 additions & 16 deletions src/containers/Tenant/Query/ExecuteResult/ExecuteResult.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,30 @@
import React, {type ReactNode, useEffect, useState} from 'react';
import React, {useEffect, useState} from 'react';
import {useDispatch} from 'react-redux';
import cn from 'bem-cn-lite';
import JSONTree from 'react-json-inspector';

import {RadioButton} from '@gravity-ui/uikit';
import {RadioButton, Tabs} from '@gravity-ui/uikit';

import CopyToClipboard from '../../../../components/CopyToClipboard/CopyToClipboard';
import Divider from '../../../../components/Divider/Divider';
import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
import {QueryExecutionStatus} from '../../../../components/QueryExecutionStatus';
import {QueryResultTable} from '../../../../components/QueryResultTable/QueryResultTable';

import type {ValueOf} from '../../../../types/common';
import type {IQueryResult, QueryErrorResponse} from '../../../../types/store/query';
import type {ColumnType, KeyValueRow} from '../../../../types/api/query';
import {disableFullscreen} from '../../../../store/reducers/fullscreen';
import {prepareQueryError} from '../../../../utils/query';
import {useTypedSelector} from '../../../../utils/hooks';
import {getArray} from '../../../../utils';

import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';

import {ResultIssues} from '../Issues/Issues';
import {QueryDuration} from '../QueryDuration/QueryDuration';
import {getPreparedResult} from '../utils/getPreparedResult';

import './ExecuteResult.scss';

Expand All @@ -39,30 +43,34 @@ const resultOptions = [
];

interface ExecuteResultProps {
textResults: string;
result: ReactNode;
data: IQueryResult | undefined;
stats: IQueryResult['stats'] | undefined;
error: string | QueryErrorResponse | undefined;
copyDisabled?: boolean;
isResultsCollapsed?: boolean;
onCollapseResults: VoidFunction;
onExpandResults: VoidFunction;
}

export function ExecuteResult({
textResults,
result,
data,
stats,
error,
copyDisabled,
isResultsCollapsed,
onCollapseResults,
onExpandResults,
}: ExecuteResultProps) {
const [selectedResultSet, setSelectedResultSet] = useState(0);
const [activeSection, setActiveSection] = useState<SectionID>(resultOptionsIds.result);

const isFullscreen = useTypedSelector((state) => state.fullscreen);
const dispatch = useDispatch();

const isMulti = data?.schema === 'multi';
const currentResult = isMulti ? data?.resultSets?.[selectedResultSet].result : data?.result;
const currentColumns = isMulti ? data?.resultSets?.[selectedResultSet].columns : data?.columns;
const textResults = getPreparedResult(currentResult);
const copyDisabled = !textResults.length;

useEffect(() => {
return () => {
dispatch(disableFullscreen());
Expand All @@ -73,6 +81,43 @@ export function ExecuteResult({
setActiveSection(value as SectionID);
};

const renderResultTable = (
result: KeyValueRow[] | undefined,
columns: ColumnType[] | undefined,
) => {
return <QueryResultTable data={result} columns={columns} settings={{sortable: false}} />;
};

const renderContent = () => {
const resultsSetsCount = data?.resultSets?.length;

if (isMulti && !resultsSetsCount) {
return null;
}

return (
<>
{isMulti && resultsSetsCount && resultsSetsCount > 1 && (
<div>
<Tabs
className={b('result-tabs')}
size="l"
items={getArray(resultsSetsCount).map((item) => ({
id: String(item),
title: `Result #${item + 1}`,
}))}
activeTab={String(selectedResultSet)}
onSelectTab={(tabId) => setSelectedResultSet(Number(tabId))}
/>
Raubzeug marked this conversation as resolved.
Show resolved Hide resolved
</div>
)}
<div className={b('result')}>
{renderResultTable(currentResult, currentColumns)}
</div>
</>
);
};

const renderClipboardButton = () => {
return (
<CopyToClipboard
Expand Down Expand Up @@ -110,10 +155,10 @@ export function ExecuteResult({
const renderResult = () => {
return (
<React.Fragment>
{result}
{renderContent()}
{isFullscreen && (
<Fullscreen>
<div className={b('result', {fullscreen: true})}>{result}</div>
<div className={b('result-fullscreen-wrapper')}>{renderContent()}</div>
</Fullscreen>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We render content here and in 158 line. Is it possible to optimise this?
And we should think about optimisation work with Fullscreen. It seems that it's no need to render Fullscreen always. I remember that there're a lot of pitfalls with it, but maybe we need this issue in backlog.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll put it to a variable.

Could you please clarify what is the problem with Fullscreen and how it could be optimised?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For now, Fullscreen is always rendered, no matter if user wanted to see it at least one time or not. And its content may be quite heavy to render. So I suggest to improve it with the same technology as we discussed regarding Tabs content!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now I get it, added this issue to ticket with QueryEditor optimisation

)}
</React.Fragment>
Expand All @@ -131,7 +176,7 @@ export function ExecuteResult({
<ResultIssues data={error.data} />
{isFullscreen && (
<Fullscreen>
<div className={b('result', {fullscreen: true})}>
<div className={b('result-fullscreen-wrapper', b('result'))}>
<ResultIssues data={error.data} />
</div>
</Fullscreen>
Expand All @@ -145,6 +190,19 @@ export function ExecuteResult({
return <div className={b('error')}>{parsedError}</div>;
};

const renderResultSection = () => {
if (activeSection === resultOptionsIds.result && !error) {
return renderResult();
}

return (
<div className={b('result')}>
{activeSection === resultOptionsIds.stats && !error && renderStats()}
{renderIssues()}
</div>
);
};

return (
<React.Fragment>
<div className={b('controls')}>
Expand Down Expand Up @@ -174,11 +232,8 @@ export function ExecuteResult({
/>
</div>
</div>
<div className={b('result')}>
{activeSection === resultOptionsIds.result && !error && renderResult()}
{activeSection === resultOptionsIds.stats && !error && renderStats()}
{renderIssues()}
</div>

{renderResultSection()}
</React.Fragment>
);
}
3 changes: 2 additions & 1 deletion src/containers/Tenant/Query/ExplainResult/ExplainResult.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,12 @@ import {QueryExecutionStatus} from '../../../../components/QueryExecutionStatus'
import {explainVersions} from '../../../../store/reducers/explainQuery';
import {disableFullscreen} from '../../../../store/reducers/fullscreen';

import {renderExplainNode} from '../../../../utils';
import {LANGUAGE_S_EXPRESSION_ID} from '../../../../utils/monaco';

import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';

import {renderExplainNode} from './utils';

import './ExplainResult.scss';

const b = cn('ydb-query-explain-result');
Expand Down
6 changes: 6 additions & 0 deletions src/containers/Tenant/Query/ExplainResult/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import type {GraphNode} from '@gravity-ui/paranoid';

export const renderExplainNode = (node: GraphNode): string => {
const parts = node.name.split('|');
return parts.length > 1 ? parts[1] : node.name;
};
35 changes: 11 additions & 24 deletions src/containers/Tenant/Query/QueryEditor/QueryEditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import _ from 'lodash';
import MonacoEditor from 'react-monaco-editor';

import SplitPane from '../../../../components/SplitPane';
import {QueryResultTable} from '../../../../components/QueryResultTable';

import {
sendExecuteQuery,
Expand All @@ -26,6 +25,7 @@ import {
SAVED_QUERIES_KEY,
ENABLE_ADDITIONAL_QUERY_MODES,
LAST_USED_QUERY_ACTION_KEY,
QUERY_USE_MULTI_SCHEMA_KEY,
} from '../../../../utils/constants';
import {useSetting, useQueryModes} from '../../../../utils/hooks';
import {QUERY_ACTIONS, QUERY_MODES, isNewQueryMode} from '../../../../utils/query';
Expand All @@ -40,14 +40,8 @@ import {ExecuteResult} from '../ExecuteResult/ExecuteResult';
import {ExplainResult} from '../ExplainResult/ExplainResult';
import {QueryEditorControls} from '../QueryEditorControls/QueryEditorControls';

import {getPreparedResult} from '../utils/getPreparedResult';

import './QueryEditor.scss';

const TABLE_SETTINGS = {
sortable: false,
};

const EDITOR_OPTIONS = {
automaticLayout: true,
selectOnLineNumbers: true,
Expand Down Expand Up @@ -92,6 +86,7 @@ function QueryEditor(props) {
const [isResultLoaded, setIsResultLoaded] = useState(false);
const [queryMode, setQueryMode] = useQueryModes();
const [enableAdditionalQueryModes] = useSetting(ENABLE_ADDITIONAL_QUERY_MODES);
const [useMultiSchema] = useSetting(QUERY_USE_MULTI_SCHEMA_KEY);
const [lastUsedQueryAction, setLastUsedQueryAction] = useSetting(LAST_USED_QUERY_ACTION_KEY);

useEffect(() => {
Expand Down Expand Up @@ -256,9 +251,16 @@ function QueryEditor(props) {
setShowPreview,
} = props;

const schema = useMultiSchema ? 'multi' : 'modern';

setLastUsedQueryAction(QUERY_ACTIONS.execute);
setResultType(RESULT_TYPES.EXECUTE);
sendExecuteQuery({query: input, database: path, mode});
sendExecuteQuery({
query: input,
database: path,
mode,
schema,
});
setIsResultLoaded(true);
setShowPreview(false);

Expand Down Expand Up @@ -314,26 +316,11 @@ function QueryEditor(props) {
executeQuery: {data, error, stats},
} = props;

let content;
if (data) {
content = (
<QueryResultTable
data={data.result}
columns={data.columns}
settings={TABLE_SETTINGS}
/>
);
}
const textResults = getPreparedResult(data);
const disabled = !textResults.length || resultType !== RESULT_TYPES.EXECUTE;

return data || error ? (
<ExecuteResult
result={content}
data={data}
stats={stats}
error={error}
textResults={textResults}
copyDisabled={disabled}
isResultsCollapsed={resultVisibilityState.collapsed}
onExpandResults={onExpandResultHandler}
onCollapseResults={onCollapseResultHandler}
Expand Down
Loading
Loading