ydb-embedded-ui 20.2.1 → 20.4.0

package/src/containers/Tenant/TableFormDialog/components/layout.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+
+import {HelpMark, Text} from '@gravity-ui/uikit';
+
+import {cn} from '../../../../utils/cn';
+
+const b = cn('ydb-table-form-dialog');
+
+export function FormSection({
+    title,
+    note,
+    children,
+}: {
+    title?: string;
+    note?: string;
+    children: React.ReactNode;
+}) {
+    return (
+        <section className={b('section')}>
+            {title ? (
+                <Text as="div" variant="subheader-2" className={b('section-title')}>
+                    {title}
+                    {note ? (
+                        <HelpMark
+                            className={b('help-mark')}
+                            popoverProps={{
+                                placement: ['bottom', 'right'],
+                                className: b('help-mark-popup'),
+                            }}
+                        >
+                            {note}
+                        </HelpMark>
+                    ) : null}
+                </Text>
+            ) : null}
+            {children}
+        </section>
+    );
+}
+
+export function FormRow({
+    title,
+    note,
+    htmlFor,
+    children,
+}: {
+    title?: string;
+    note?: string;
+    htmlFor?: string;
+    children: React.ReactNode;
+}) {
+    let labelTitleNode: React.ReactNode = null;
+
+    if (title) {
+        if (htmlFor) {
+            labelTitleNode = (
+                <label className={b('label-title')} htmlFor={htmlFor}>
+                    {title}
+                </label>
+            );
+        } else {
+            labelTitleNode = <span className={b('label-title')}>{title}</span>;
+        }
+    }
+
+    return (
+        <div className={b('row')}>
+            <div className={b('label')}>
+                {labelTitleNode}
+                {note ? (
+                    <HelpMark
+                        className={b('help-mark')}
+                        popoverProps={{
+                            placement: ['bottom', 'right'],
+                            className: b('help-mark-popup'),
+                        }}
+                    >
+                        {note}
+                    </HelpMark>
+                ) : null}
+            </div>
+            <div className={b('row-control')}>{children}</div>
+        </div>
+    );
+}
+
+export function FormFieldError({message}: {message?: string}) {
+    if (!message) {
+        return null;
+    }
+    return (
+        <Text color="danger" variant="body-1" className={b('field-error')}>
+            {message}
+        </Text>
+    );
+}

package/src/containers/Tenant/TableFormDialog/constants.ts

@@ -0,0 +1,107 @@
+export const TABLE_FORM_DIALOG = 'table-form-dialog';
+
+export const ENTITY_NAME_REG_EXP = /^[a-zA-Z0-9._-]+$/;
+export const ENTITY_PATH_REG_EXP = /^[a-zA-Z0-9._-]+(\/[a-zA-Z0-9._-]+)*$/;
+export const ENTITY_RENAME_PATH_REG_EXP = /^\/?[a-zA-Z0-9._-]+(\/[a-zA-Z0-9._-]+)*$/;
+export const COLUMN_NAME_REG_EXP = /^\w[\w_-]*$/;
+
+export const MIN_PARTITION_SIZE_MB = 10;
+export const MAX_PARTITION_SIZE_MB = 2048;
+
+export const MIN_PARTITIONS_COUNT = 1;
+export const MAX_PARTITIONS_COUNT = 35000;
+
+export const MIN_COLUMN_PARTITION_COUNT = 1;
+export const MAX_COLUMN_PARTITION_COUNT = 1000;
+
+export const SPLIT_POINT_STRING_TYPES = new Set<string>(['String', 'Utf8']);
+
+export const YDB_TABLE_TYPES: string[] = [
+    'Bool',
+    'Int8',
+    'Int16',
+    'Int32',
+    'Int64',
+    'Uint8',
+    'Uint16',
+    'Uint32',
+    'Uint64',
+    'Float',
+    'Double',
+    'Decimal(22,9)',
+    'String',
+    'Utf8',
+    'Json',
+    'JsonDocument',
+    'Date32',
+    'Date',
+    'Datetime64',
+    'Datetime',
+    'Timestamp64',
+    'Timestamp',
+    'Interval64',
+    'Interval',
+    'Uuid',
+];
+
+export const YDB_COLUMN_TABLE_TYPES: string[] = [
+    'Int8',
+    'Int16',
+    'Int32',
+    'Int64',
+    'Uint8',
+    'Uint16',
+    'Uint32',
+    'Uint64',
+    'Float',
+    'Double',
+    'String',
+    'Utf8',
+    'Json',
+    'JsonDocument',
+    'Date32',
+    'Date',
+    'Datetime64',
+    'Datetime',
+    'Timestamp64',
+    'Timestamp',
+];
+
+export const YDB_PK_TYPES = new Set<string>([
+    'Bool',
+    'Int8',
+    'Int16',
+    'Int32',
+    'Int64',
+    'Uint8',
+    'Uint16',
+    'Uint32',
+    'Uint64',
+    'String',
+    'Utf8',
+    'Date',
+    'Date32',
+    'Datetime',
+    'Datetime64',
+    'Timestamp',
+    'Timestamp64',
+    'Uuid',
+    'Interval64',
+]);
+
+export const YDB_COLUMN_PK_TYPES = new Set<string>([
+    'Int32',
+    'Int64',
+    'Uint8',
+    'Uint16',
+    'Uint32',
+    'Uint64',
+    'String',
+    'Utf8',
+    'Date',
+    'Date32',
+    'Datetime',
+    'Datetime64',
+    'Timestamp',
+    'Timestamp64',
+]);

package/src/containers/Tenant/TableFormDialog/i18n/en.json

@@ -0,0 +1,155 @@
+{
+  "title_create": "Create table",
+  "title_update": "Edit table",
+
+  "action_create": "Create",
+  "action_update": "Update",
+  "action_add": "Add",
+  "action_set-value": "Set value",
+  "action_cancel": "Cancel",
+  "action_delete": "Delete",
+  "action_apply": "Apply",
+  "action_clear": "Clear",
+  "action_select": "Select",
+  "action_select-all": "Select all",
+  "action_undo": "Undo",
+
+  "alert_create-success": "Table created",
+  "alert_create-error": "Failed to create table",
+  "alert_update-success": "Table updated",
+  "alert_update-error": "Failed to update table",
+
+  "context_field-name": "Use slash-separated path segments. Each segment may contain Latin letters (A-Z, a-z), numbers (0-9), and special characters: ., -, _. Maximum segment length is 255 characters.",
+
+  "error_load-table": "Failed to load table",
+  "error_required": "Required field",
+  "error_name-pattern": "Can only contain Latin letters, numbers, underscores, dashes, and dots.",
+  "error_name-segment-pattern": "Can only contain Latin letters (A-Z, a-z), numbers (0-9), and special characters: ., -, _. Maximum length is 255 characters.",
+  "error_name-path-pattern": "Use slash-separated path segments. Each segment may contain Latin letters (A-Z, a-z), numbers (0-9), and special characters: ., -, _. Maximum segment length is 255 characters.",
+  "error_rename-with-other-changes": "Rename cannot be submitted together with other table changes. Apply the rename separately, or undo the other changes.",
+  "error_column-name-pattern": "Only word characters, underscores and dashes are allowed",
+  "error_column-name-duplicate": "Column names must be unique",
+  "error_index-name-duplicate": "Index names must be unique",
+  "error_maximum-less-minimum": "Maximum must not be less than minimum",
+  "error_minimum-greater-maximum": "Minimum must not be greater than maximum",
+  "error_partitions-count": "Value must be between 1 and 35000",
+  "error_uniform-partitions-first-key-type": "Uniform partitions require the first primary key column to have type Uint32 or Uint64",
+  "error_partition-count-range": "Value must be between 1 and 1000",
+  "error_columns-empty": "Columns are empty",
+  "error_indexes-delete-column": "Columns used by existing secondary indexes cannot be deleted.",
+  "error_primary-key-required": "At least one primary key column is required",
+  "error_indexes-key": "Incorrect set of columns in the key",
+  "error_ttl-column-invalid": "Select an existing column with a supported TTL type",
+  "error_partitions-at-keys-invalid": "Invalid split points",
+  "error_value-invalid": "Incorrect value in field",
+
+  "button_add-column": "Add column",
+  "button_add-index": "Add index",
+  "button_add-split-point": "Add split point",
+
+  "column_default": "Default",
+  "column_index-key": "Key",
+  "column_name": "Name",
+  "column_not-null": "NotNull",
+  "column_primary-key": "Primary key",
+  "column_type": "Type",
+
+  "field_autopartition-by-load": "By load",
+  "field_autopartition-by-size": "By size",
+  "field_autopartition-by-size-mb": "Autopartitioning by size",
+  "field_autopartition-max": "Maximum number of partitions",
+  "field_autopartition-min": "Minimum number of partitions",
+  "field_explicit-partitions": "Split points",
+  "field_key-bloom-filter": "Bloom filter for primary key",
+  "field_name": "Name",
+  "field_partition-count": "Partition count",
+  "field_partition-key": "Partition key",
+  "field_partitions-type": "Type",
+  "field_ttl-column": "Column",
+  "field_ttl-lifetime": "Lifetime",
+  "field_ttl-status": "Status",
+  "field_ttl-unit": "Unit",
+  "field_type": "Type",
+  "field_uniform-partitions": "Count",
+
+  "label_autoincrement": "Autoincrement",
+  "label_autoincrement-note-type": "Permitted type for autoincrement: Int16, Int32, or Int64",
+  "label_column-table": "Column table",
+  "label_columns": "Columns",
+  "label_indexes": "Secondary indexes",
+  "label_info-table-type_column": "A column table is a relational table that stores a set of related data organized into rows and columns. Unlike traditional row-based tables designed for OLTP workloads, column tables are optimized for data analytics and OLAP workloads.",
+  "label_info-table-type_row": "A row table always has one or more columns that make up a primary key. Table rows are unique by key, meaning there can only be one row for a single key value. Row tables are always ordered by key. This means that point reads by key and range-based queries by key are performed efficiently (actually using an index). The sequence of columns in a key matters. Tables only consisting of key columns are allowed. You can't create tables without a primary key.",
+  "label_items": "Items",
+  "label_not-null-note-autoincrement": "Autoincrement columns are always NOT NULL",
+  "label_not-null-note-key": "Key columns must have this constraint",
+  "label_partitioning": "Partitioning",
+  "label_row-table": "Row table",
+  "label_section-advanced": "Advanced settings",
+  "label_section-autopartition": "Autopartitioning",
+  "label_section-partition-policy": "Partition policy",
+  "label_section-ttl": "TTL settings",
+  "label_search": "Search",
+  "label_select-columns": "Select 1 or more columns",
+  "label_selected": "Selected",
+  "label_selected-count": "Selected: {{count}}",
+  "label_non-null": "NonNull",
+  "label_ttl-warning": "You don't have columns with the right type",
+
+  "title_split-point": "Split point",
+
+  "context_type-bool": "Can store either true or false",
+  "context_type-int8": "Signed integer from −2^7 to 2^7 − 1",
+  "context_type-int16": "Signed integer from −2^15 to 2^15 − 1",
+  "context_type-int32": "Signed integer from −2^31 to 2^31 − 1",
+  "context_type-int64": "Signed integer from −2^63 to 2^63 − 1",
+  "context_type-uint8": "Unsigned integer, from 0 to 2^8 − 1",
+  "context_type-uint16": "Unsigned integer, from 0 to 2^16 − 1",
+  "context_type-uint32": "Unsigned integer, from 0 to 2^32 − 1",
+  "context_type-uint64": "Unsigned integer, from 0 to 2^64 − 1",
+  "context_type-decimal22-9": "Fixed-precision number — 22 digits, 9 digits after the decimal point",
+  "context_type-float": "Floating-point number 4 byte",
+  "context_type-double": "Double type have 8 bytes",
+  "context_type-string": "Arbitrary byte sequence",
+  "context_type-utf8": "Text encoded in UTF-8",
+  "context_type-json": "Valid JSON in text representation",
+  "context_type-jsondocument": "Valid JSON in binary indexed representation",
+  "context_type-date": "Precision up to days, YYYY-MM-DD",
+  "context_type-datetime": "Precision up to seconds, YYYY-MM-DDThh:mm:ssZ",
+  "context_type-timestamp": "Precision up to microseconds, YYYY-MM-DDThh:mm:ss.SSSZ",
+  "context_type-interval": "Time interval (signed), accuracy up to microseconds. The range of values is from -136 years to +136 years. The internal representation is a 64-bit signed integer.",
+  "context_type-uuid": "Universally unique identifier (UUID)",
+
+  "tooltip_autopartition-by-load": "A table shard is split into two if it is under high loads for a certain period of time (uses a lot of CPU time)",
+  "tooltip_autopartition-by-size": "A table shard is split into two when the specified data size is reached",
+  "tooltip_autopartition-max": "The number of table shards above which no splitting by size or load is performed",
+  "tooltip_autopartition-min": "The number of table shards below which no shard merge by size or load is performed",
+  "tooltip_explicit-partitions": "Shard boundary keys during initial partitioning",
+  "tooltip_index-key": "A table may have multiple secondary indexes, and an index may include multiple columns. The sequence of columns in an index matters. A single column may consist of multiple indexes and even be part of a primary key and a secondary index at the same time.",
+  "tooltip_index-delete-disabled": "This column is used by an existing secondary index and cannot be deleted in this form.",
+  "tooltip_key-bloom-filter": "In some cases, it can speed up key reads",
+  "tooltip_partitions-type": "Evenly: For Uint32 and Uint64 key columns, it splits the entire range from 0 to the maximum value of the type into intervals of the same length. It's well suited for even distribution of data across shards when an evenly distributed hash function is used as key values.\nExplicitly: Lets you set shard boundary keys for initial partitioning.",
+  "tooltip_primary-key": "A YDB table always has one or more columns that make up a primary key. Table rows are unique by key, meaning there can only be one row for a single key value. YDB tables are always ordered by key. The sequence of columns in a key matters. Tables only consisting of key columns are allowed. You can't create tables without a primary key.",
+  "tooltip_section-autopartition": "Automatically split shards when the size or load increases and merge them when the size or load decreases",
+  "tooltip_section-ttl": "Automatically delete expired rows from a table.",
+  "tooltip_ttl-delete-disabled": "This column is currently used for TTL. Apply a separate update to disable or move TTL before deleting it.",
+  "tooltip_ttl-column": "Date, Datetime, Timestamp, Uint32, Uint64 columns are supported.",
+  "tooltip_ttl-lifetime": "The row will be considered expired when the value stored in the column is less than or equal to the current time and the lifetime has passed.",
+  "tooltip_ttl-unit": "The numbers in the column are interpreted as values from the Unix epoch with a given unit.",
+
+  "value_disabled": "Disabled",
+  "value_enabled": "Enabled",
+  "value_no": "No",
+  "value_yes": "Yes",
+  "value_partitions-explicit": "Explicitly",
+  "value_partitions-none": "None",
+  "value_partitions-uniform": "Evenly",
+  "value_megabyte": "MB",
+  "value_seconds": "seconds",
+  "value_minutes": "minutes",
+  "value_hours": "hours",
+  "value_days": "days",
+  "value_epoch-seconds": "Seconds",
+  "value_epoch-milliseconds": "Milliseconds",
+  "value_epoch-microseconds": "Microseconds",
+  "value_epoch-nanoseconds": "Nanoseconds"
+}

package/src/containers/Tenant/TableFormDialog/i18n/index.ts

@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-table-form-dialog';
+
+export default registerKeysets(COMPONENT, {en});

package/src/containers/Tenant/TableFormDialog/sections/GeneralSection.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+
+import type {SelectOption} from '@gravity-ui/uikit';
+import {HelpMark, Select, TextInput} from '@gravity-ui/uikit';
+import {Controller, useFormContext, useWatch} from 'react-hook-form';
+
+import {cn} from '../../../../utils/cn';
+import {FormRow, FormSection} from '../components/layout';
+import i18n from '../i18n';
+import type {FormMode, FormValues, TableType} from '../types';
+
+const b = cn('ydb-table-form-dialog');
+
+interface GeneralSectionProps {
+    mode: FormMode;
+    nameInputRef?: React.Ref<HTMLInputElement>;
+}
+
+const tableTypeInfo: Record<TableType, string> = {
+    row: i18n('label_info-table-type_row'),
+    column: i18n('label_info-table-type_column'),
+};
+
+export function GeneralSection({mode, nameInputRef}: GeneralSectionProps) {
+    const {control, formState} = useFormContext<FormValues>();
+    const type = useWatch({control, name: 'type'});
+
+    const typeOptions = React.useMemo<SelectOption[]>(
+        () => [
+            {value: 'row', content: i18n('label_row-table')},
+            {value: 'column', content: i18n('label_column-table')},
+        ],
+        [],
+    );
+
+    const nameError = formState.errors.name?.message;
+    const nameDisabled = mode === 'update' && type === 'column';
+    const typeDisabled = mode === 'update';
+    const tableTypeHelpText = mode === 'create' && type ? tableTypeInfo[type] : undefined;
+    const nameHelpText = nameDisabled ? undefined : i18n('context_field-name');
+
+    return (
+        <FormSection>
+            <FormRow title={i18n('field_name')} note={nameHelpText} htmlFor="table-form-name">
+                <Controller
+                    control={control}
+                    name="name"
+                    render={({field}) => (
+                        <TextInput
+                            controlRef={nameInputRef}
+                            id="table-form-name"
+                            value={field.value ?? ''}
+                            onUpdate={field.onChange}
+                            autoComplete={false}
+                            disabled={nameDisabled}
+                            validationState={nameError ? 'invalid' : undefined}
+                            errorMessage={nameError}
+                            className={b('control')}
+                            autoFocus={mode === 'create'}
+                        />
+                    )}
+                />
+            </FormRow>
+            <FormRow title={i18n('field_type')}>
+                <div className={b('type-select-row')}>
+                    <Controller
+                        control={control}
+                        name="type"
+                        render={({field}) => (
+                            <Select
+                                className={b('type-select-control')}
+                                value={field.value ? [field.value] : []}
+                                options={typeOptions}
+                                onUpdate={([value]) => field.onChange(value)}
+                                disabled={typeDisabled}
+                                width="max"
+                            />
+                        )}
+                    />
+                    {tableTypeHelpText ? (
+                        <HelpMark
+                            className={b('help-mark')}
+                            popoverProps={{
+                                placement: ['bottom', 'right'],
+                                className: b('help-mark-popup'),
+                            }}
+                        >
+                            {tableTypeHelpText}
+                        </HelpMark>
+                    ) : null}
+                </div>
+            </FormRow>
+        </FormSection>
+    );
+}

package/src/containers/Tenant/TableFormDialog/sections/PartitioningSection.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+
+import {TextInput} from '@gravity-ui/uikit';
+import {Controller, useFormContext, useWatch} from 'react-hook-form';
+
+import {cn} from '../../../../utils/cn';
+import {ColumnSelectorField} from '../components/ColumnSelectorField';
+import {FormFieldError, FormRow, FormSection} from '../components/layout';
+import i18n from '../i18n';
+import type {FormValues} from '../types';
+import {acceptIntegerInput, formatOptionalIntegerInput, parseOptionalIntegerInput} from '../utils';
+
+const b = cn('ydb-table-form-dialog');
+
+interface PartitioningSectionProps {
+    pkTypes: Set<string>;
+}
+
+export function PartitioningSection({pkTypes}: PartitioningSectionProps) {
+    const {control, formState} = useFormContext<FormValues>();
+    const columns = useWatch({control, name: 'columns'});
+
+    const pkColumns = React.useMemo(
+        () => columns.filter(({key, type}) => key && pkTypes.has(type)),
+        [columns, pkTypes],
+    );
+
+    const partitionKeyError = formState.errors.partitionKey?.message;
+    const partitionCountError = formState.errors.partitionCount?.message;
+
+    return (
+        <FormSection title={i18n('label_partitioning')}>
+            <FormRow title={i18n('field_partition-key')}>
+                <Controller
+                    control={control}
+                    name="partitionKey"
+                    render={({field}) => (
+                        <div className={b('control-stack')}>
+                            <ColumnSelectorField
+                                value={field.value ?? []}
+                                onChange={field.onChange}
+                                columns={pkColumns}
+                                invalid={Boolean(partitionKeyError)}
+                                className={b('control')}
+                            />
+                            <FormFieldError message={partitionKeyError} />
+                        </div>
+                    )}
+                />
+            </FormRow>
+            <FormRow title={i18n('field_partition-count')}>
+                <Controller
+                    control={control}
+                    name="partitionCount"
+                    render={({field}) => (
+                        <TextInput
+                            className={b('control')}
+                            value={formatOptionalIntegerInput(field.value)}
+                            onUpdate={(value) => {
+                                if (!acceptIntegerInput(value)) {
+                                    return;
+                                }
+                                field.onChange(parseOptionalIntegerInput(value));
+                            }}
+                            validationState={partitionCountError ? 'invalid' : undefined}
+                            errorMessage={partitionCountError}
+                        />
+                    )}
+                />
+            </FormRow>
+        </FormSection>
+    );
+}