Skip to content
Merged
Show file tree
Hide file tree
Changes from 7 commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export function SchemaTree(props: SchemaTreeProps) {
{currentData: actionsSchemaData, isFetching: isActionsDataFetching},
] = tableSchemaDataApi.useLazyGetTableSchemaDataQuery();

const [querySettings, setQueryExecutionSettings] = useQueryExecutionSettings();
const [querySettings] = useQueryExecutionSettings();
const [createDirectoryOpen, setCreateDirectoryOpen] = React.useState(false);
const [parentPath, setParentPath] = React.useState('');
const setSchemaTreeKey = useDispatchTreeKey();
Expand Down Expand Up @@ -128,8 +128,6 @@ export function SchemaTree(props: SchemaTreeProps) {
dispatch,
{
setActivePath: onActivePathUpdate,
updateQueryExecutionSettings: (settings) =>
setQueryExecutionSettings({...querySettings, ...settings}),
showCreateDirectoryDialog: createDirectoryFeatureAvailable
? handleOpenCreateDirectoryDialog
: undefined,
Expand All @@ -149,7 +147,6 @@ export function SchemaTree(props: SchemaTreeProps) {
onActivePathUpdate,
querySettings,
rootPath,
setQueryExecutionSettings,
]);

return (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,24 +28,13 @@
flex: 6;
}

&__limit-rows,
&__timeout {
width: 33.3%;
&__limit-rows {
width: 50%;
margin-right: var(--g-spacing-2);
}

&__timeout-suffix {
display: flex;
align-items: center;

color: var(--g-color-text-secondary);
}

&__documentation-link {
display: flex;
align-items: center;

margin-left: var(--g-spacing-4);
&__postfix {
margin-right: var(--g-spacing-2);

color: var(--g-color-text-secondary);
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';

import {Dialog, Link as ExternalLink, Flex, TextInput, Tooltip} from '@gravity-ui/uikit';
import {Button, Dialog, Flex, TextInput, Tooltip} from '@gravity-ui/uikit';
import {zodResolver} from '@hookform/resolvers/zod';
import {Controller, useForm} from 'react-hook-form';

Expand All @@ -18,9 +18,10 @@ import {
useTypedDispatch,
useTypedSelector,
} from '../../../../utils/hooks';
import {querySettingsValidationSchema} from '../../../../utils/query';
import {QUERY_MODES, querySettingsValidationSchema} from '../../../../utils/query';

import {QuerySettingsSelect} from './QuerySettingsSelect';
import {QuerySettingsTimeout} from './QuerySettingsTimeout';
import {QUERY_SETTINGS_FIELD_SETTINGS} from './constants';
import i18n from './i18n';

Expand Down Expand Up @@ -73,6 +74,8 @@ function QuerySettingsForm({initialValues, onSubmit, onClose}: QuerySettingsForm
const {
control,
handleSubmit,
setValue,
watch,
formState: {errors},
} = useForm<QuerySettings>({
defaultValues: initialValues,
Expand All @@ -82,6 +85,9 @@ function QuerySettingsForm({initialValues, onSubmit, onClose}: QuerySettingsForm
const [useShowPlanToSvg] = useSetting<boolean>(USE_SHOW_PLAN_SVG_KEY);
const enableTracingLevel = useTracingLevelOptionAvailable();

const timeout = watch('timeout');
const queryMode = watch('queryMode');

return (
<form onSubmit={handleSubmit(onSubmit)}>
<Dialog.Body className={b('dialog-body')}>
Expand All @@ -97,42 +103,21 @@ function QuerySettingsForm({initialValues, onSubmit, onClose}: QuerySettingsForm
<QuerySettingsSelect
id="queryMode"
setting={field.value}
onUpdateSetting={field.onChange}
onUpdateSetting={(mode) => {
field.onChange(mode);

if (mode !== 'query' && timeout === null) {
setValue('timeout', '');
} else if (mode === 'query') {
setValue('timeout', null);
}
}}
settingOptions={QUERY_SETTINGS_FIELD_SETTINGS.queryMode.options}
/>
)}
/>
</div>
</Flex>
<Flex direction="row" alignItems="flex-start" className={b('dialog-row')}>
<label htmlFor="timeout" className={b('field-title')}>
{QUERY_SETTINGS_FIELD_SETTINGS.timeout.title}
</label>
<div className={b('control-wrapper')}>
<Controller
name="timeout"
control={control}
render={({field}) => (
<React.Fragment>
<TextInput
id="timeout"
type="number"
{...field}
value={field.value?.toString()}
className={b('timeout')}
placeholder="60"
validationState={errors.timeout ? 'invalid' : undefined}
errorMessage={errors.timeout?.message}
errorPlacement="inside"
/>
<span className={b('timeout-suffix')}>
{i18n('form.timeout.seconds')}
</span>
</React.Fragment>
)}
/>
</div>
</Flex>
{enableTracingLevel && (
<Flex direction="row" alignItems="flex-start" className={b('dialog-row')}>
<label htmlFor="tracingLevel" className={b('field-title')}>
Expand Down Expand Up @@ -225,11 +210,33 @@ function QuerySettingsForm({initialValues, onSubmit, onClose}: QuerySettingsForm
validationState={errors.limitRows ? 'invalid' : undefined}
errorMessage={errors.limitRows?.message}
errorPlacement="inside"
endContent={
<span className={b('postfix')}>
{i18n('form.limit.rows')}
</span>
}
/>
)}
/>
</div>
</Flex>
<Flex direction="row" alignItems="flex-start" className={b('dialog-row')}>
<Controller
name="timeout"
control={control}
render={({field}) => (
<QuerySettingsTimeout
id="timeout"
value={typeof field.value === 'string' ? undefined : field.value}
onChange={field.onChange}
onToggle={(enabled) => field.onChange(enabled ? '' : null)}
validationState={errors.timeout ? 'invalid' : undefined}
errorMessage={errors.timeout?.message}
isDisabled={queryMode !== QUERY_MODES.query}
/>
)}
/>
</Flex>
</Dialog.Body>
<Dialog.Footer
textButtonApply={i18n('button-done')}
Expand All @@ -240,13 +247,14 @@ function QuerySettingsForm({initialValues, onSubmit, onClose}: QuerySettingsForm
}}
renderButtons={(buttonApply, buttonCancel) => (
<div className={b('buttons-container')}>
<ExternalLink
<Button
href="https://ydb.tech/docs"
target="_blank"
className={b('documentation-link')}
view="outlined"
size="l"
>
{i18n('docs')}
</ExternalLink>
</Button>
<div className={b('main-buttons')}>
{buttonCancel}
{buttonApply}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
.ydb-query-settings-timeout {
&__control-wrapper {
display: flex;
flex: 6;
align-items: center;
}

&__input {
width: 50%;
}

&__postfix {
margin-right: var(--g-spacing-2);

color: var(--g-color-text-secondary);
}

&__switch {
align-items: center;

height: var(--g-text-header-2-line-height);
margin-right: var(--g-spacing-1);
}

&__label-title,
&__switch-title {
flex: 4;
align-items: center;

margin-right: var(--g-spacing-3);

font-weight: 500;
white-space: nowrap;
}

&__label-title {
line-height: var(--g-text-header-2-line-height);
}

&__question-icon {
color: var(--g-color-text-secondary);
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
import React from 'react';

import {CircleQuestion} from '@gravity-ui/icons';
import {Icon, Popover, Switch, TextInput} from '@gravity-ui/uikit';

import {cn} from '../../../../utils/cn';
import {ENABLE_QUERY_STREAMING} from '../../../../utils/constants';
import {useSetting} from '../../../../utils/hooks';

import {QUERY_SETTINGS_FIELD_SETTINGS} from './constants';
import i18n from './i18n';

import './QuerySettingsTimeout.scss';

const b = cn('ydb-query-settings-timeout');

interface QuerySettingsTimeoutProps {
id?: string;
value: number | null | undefined;
onChange: (value: number | undefined) => void;
onToggle: (enabled: boolean) => void;
validationState?: 'invalid';
errorMessage?: string;
isDisabled?: boolean;
}

export function QuerySettingsTimeout({
id,
value,
onChange,
onToggle,
validationState,
errorMessage,
isDisabled,
}: QuerySettingsTimeoutProps) {
const [isQueryStreamingEnabled] = useSetting(ENABLE_QUERY_STREAMING);

const handleValueChange = React.useCallback(
(event: React.ChangeEvent<HTMLInputElement>) => {
const newValue = event.target.value ? Number(event.target.value) : undefined;
onChange(newValue);
},
[onChange],
);

const isChecked = value !== null;

const queryStreamingLabel = isQueryStreamingEnabled ? (
Copy link
Contributor

Choose a reason for hiding this comment

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

maybe rename to timeoutLabel? And I would do it a separate component (not a demand, just suggestion).

<div className={b('switch-title')}>
<Switch
disabled={isDisabled}
checked={isChecked}
onUpdate={onToggle}
className={b('switch')}
content={QUERY_SETTINGS_FIELD_SETTINGS.timeout.title}
/>
{isDisabled ? (
Copy link
Contributor

Choose a reason for hiding this comment

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

it seems && is enough?

<Popover
Copy link
Contributor

Choose a reason for hiding this comment

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

content={i18n('form.timeout.disabled')}
placement={'bottom-start'}
hasArrow={false}
size="s"
>
<Icon className={b('question-icon')} data={CircleQuestion} />
</Popover>
) : null}
</div>
) : (
<label htmlFor="timeout" className={b('label-title')}>
{QUERY_SETTINGS_FIELD_SETTINGS.timeout.title}
</label>
);

return (
<React.Fragment>
{queryStreamingLabel}
{isChecked && (
<div className={b('control-wrapper')}>
<TextInput
id={id}
type="number"
value={value?.toString() || ''}
onChange={handleValueChange}
className={b('input')}
placeholder="60"
validationState={validationState}
errorMessage={errorMessage}
errorPlacement="inside"
endContent={
<span className={b('postfix')}>{i18n('form.timeout.seconds')}</span>
}
/>
</div>
)}
</React.Fragment>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
"tooltip_plan-to-svg-statistics": "Statistics option is set to \"Full\" due to the enabled \"Execution plan\" experiment.\n To disable it, go to the \"Experiments\" section in the user settings.",
"button-cancel": "Cancel",
"form.timeout.seconds": "sec",
"form.limit.rows": "rows",
"form.timeout.disabled": "Not available to turn off in this query type",
"form.validation.timeout": "Must be positive",
"form.validation.limitRows": "Must be between 1 and 100000",
"description.default": " (default)",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
"button-done": "Готово",
"button-cancel": "Отменить",
"form.timeout.seconds": "сек",
"form.limit.rows": "строк",
"form.timeout.disabled": "Невозможно выключить для текущего типа запроса",
"form.validation.timeout": "Таймаут должен быть положительным",
"form.validation.limitRows": "Лимит строк должен быть между 1 и 100000",
"description.default": " (default)",
Expand Down
2 changes: 0 additions & 2 deletions src/containers/Tenant/utils/schemaActions.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import type {SnippetParams} from '../../../components/ConnectToDB/types';
import type {AppDispatch} from '../../../store';
import {TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID} from '../../../store/reducers/tenant/constants';
import {setQueryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
import type {QuerySettings} from '../../../types/store/query';
import createToast from '../../../utils/createToast';
import {insertSnippetToEditor} from '../../../utils/monaco/insertSnippet';
import {transformPath} from '../ObjectSummary/transformPath';
Expand Down Expand Up @@ -42,7 +41,6 @@ import {
} from './schemaQueryTemplates';

interface ActionsAdditionalParams {
updateQueryExecutionSettings: (settings?: Partial<QuerySettings>) => void;
setActivePath: (path: string) => void;
showCreateDirectoryDialog?: (path: string) => void;
getConfirmation?: () => Promise<boolean>;
Expand Down
4 changes: 4 additions & 0 deletions src/services/api/streaming.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {parseMultipart} from '@mjackson/multipart-parser';
import qs from 'qs';

import {
isKeepAliveChunk,
isQueryResponseChunk,
isSessionChunk,
isStreamDataChunk,
Expand Down Expand Up @@ -93,6 +94,9 @@ export class StreamingAPI extends BaseYdbAPI {
options.onStreamDataChunk(chunk);
} else if (isQueryResponseChunk(chunk)) {
options.onQueryResponseChunk(chunk);
} else if (isKeepAliveChunk(chunk)) {
// Logging for debug purposes
console.log('Received keep alive chunk');
}
} catch (e) {
throw new Error(`Error parsing chunk: ${e}`);
Expand Down
Loading
Loading