ydb-embedded-ui 4.10.0 → 4.11.0

package/dist/types/store/executeQuery.ts

@@ -9,9 +9,8 @@ import {
     MONACO_HOT_KEY_ACTIONS,
 } from '../../store/reducers/executeQuery';
 import type {ApiRequestAction} from '../../store/utils';
-import type {ErrorResponse} from '../api/query';
 import type {ValueOf} from '../common';
-import type {IQueryResult, QueryError} from './query';
+import type {IQueryResult, QueryError, QueryErrorResponse} from './query';
 
 export type MonacoHotKeyAction = ValueOf<typeof MONACO_HOT_KEY_ACTIONS>;
 
@@ -26,7 +25,7 @@ export interface ExecuteQueryState {
     tenantPath?: string;
     data?: IQueryResult;
     stats?: IQueryResult['stats'];
-    error?: string | ErrorResponse;
+    error?: string | QueryErrorResponse;
 }
 
 type SendQueryAction = ApiRequestAction<typeof SEND_QUERY, IQueryResult, QueryError>;

package/dist/types/store/executeTopQueries.ts

@@ -1,7 +1,10 @@
-import {FETCH_TOP_QUERIES, setTopQueriesState, setTopQueriesFilters} from '../../store/reducers/executeTopQueries';
+import {
+    FETCH_TOP_QUERIES,
+    setTopQueriesState,
+    setTopQueriesFilters,
+} from '../../store/reducers/executeTopQueries';
 import type {ApiRequestAction} from '../../store/utils';
-import type {IResponseError} from '../api/error';
-import type {IQueryResult} from './query';
+import type {IQueryResult, QueryErrorResponse} from './query';
 
 export interface ITopQueriesFilters {
     /** ms from epoch */
@@ -15,12 +18,12 @@ export interface ITopQueriesState {
     loading: boolean;
     wasLoaded: boolean;
     data?: IQueryResult;
-    error?: IResponseError;
+    error?: QueryErrorResponse;
     filters: ITopQueriesFilters;
 }
 
 export type ITopQueriesAction =
-    | ApiRequestAction<typeof FETCH_TOP_QUERIES, IQueryResult, IResponseError>
+    | ApiRequestAction<typeof FETCH_TOP_QUERIES, IQueryResult, QueryErrorResponse>
     | ReturnType<typeof setTopQueriesState>
     | ReturnType<typeof setTopQueriesFilters>;
 

package/dist/types/store/explainQuery.ts

@@ -2,8 +2,8 @@ import type {ExplainPlanNodeData, GraphNode, Link} from '@gravity-ui/paranoid';
 
 import {GET_EXPLAIN_QUERY, GET_EXPLAIN_QUERY_AST} from '../../store/reducers/explainQuery';
 import type {ApiRequestAction} from '../../store/utils';
-import type {PlanTable, ErrorResponse, QueryPlan, ScriptPlan} from '../api/query';
-import type {IQueryResult, QueryError} from './query';
+import type {PlanTable, QueryPlan, ScriptPlan} from '../api/query';
+import type {IQueryResult, QueryError, QueryErrorResponse} from './query';
 
 export interface PreparedExplainResponse {
     plan?: {
@@ -20,8 +20,8 @@ export interface ExplainQueryState {
     loading: boolean;
     data?: PreparedExplainResponse['plan'];
     dataAst?: PreparedExplainResponse['ast'];
-    error?: string | ErrorResponse;
-    errorAst?: string | ErrorResponse;
+    error?: string | QueryErrorResponse;
+    errorAst?: string | QueryErrorResponse;
 }
 
 type GetExplainQueryAstAction = ApiRequestAction<

package/dist/types/store/query.ts

@@ -1,10 +1,10 @@
 import {QUERY_ACTIONS, QUERY_MODES} from '../../utils/query';
 
-import type {NetworkError} from '../api/error';
+import type {IResponseError, NetworkError} from '../api/error';
 import type {
     KeyValueRow,
     ColumnType,
-    ErrorResponse,
+    ErrorResponse as QueryErrorResponseData,
     ScriptPlan,
     QueryPlan,
     TKqpStatsQuery,
@@ -24,7 +24,8 @@ export interface QueryRequestParams {
     query: string;
 }
 
-export type QueryError = NetworkError | ErrorResponse;
+export type QueryErrorResponse = IResponseError<QueryErrorResponseData>;
+export type QueryError = NetworkError | QueryErrorResponse;
 
 export type QueryAction = ValueOf<typeof QUERY_ACTIONS>;
 export type QueryMode = ValueOf<typeof QUERY_MODES>;

package/dist/types/store/shardsWorkload.ts

@@ -1,7 +1,10 @@
-import {SEND_SHARD_QUERY, setShardsState, setShardsQueryFilters} from '../../store/reducers/shardsWorkload';
+import {
+    SEND_SHARD_QUERY,
+    setShardsState,
+    setShardsQueryFilters,
+} from '../../store/reducers/shardsWorkload';
 import type {ApiRequestAction} from '../../store/utils';
-import type {IResponseError} from '../api/error';
-import type {IQueryResult} from './query';
+import type {IQueryResult, QueryErrorResponse} from './query';
 
 export enum EShardsWorkloadMode {
     Immediate = 'immediate',
@@ -20,12 +23,12 @@ export interface IShardsWorkloadState {
     loading: boolean;
     wasLoaded: boolean;
     data?: IQueryResult;
-    error?: IResponseError;
+    error?: QueryErrorResponse;
     filters: IShardsWorkloadFilters;
 }
 
 export type IShardsWorkloadAction =
-    | ApiRequestAction<typeof SEND_SHARD_QUERY, IQueryResult, IResponseError>
+    | ApiRequestAction<typeof SEND_SHARD_QUERY, IQueryResult, QueryErrorResponse>
     | ReturnType<typeof setShardsState>
     | ReturnType<typeof setShardsQueryFilters>;
 

package/dist/utils/constants.ts

@@ -75,8 +75,11 @@ export const COLORS_PRIORITY = {
     grey: 1,
 };
 
-export const DEVELOPER_UI = 'Developer UI';
+// ==== Titles ====
+export const DEVELOPER_UI_TITLE = 'Developer UI';
+export const CLUSTER_DEFAULT_TITLE = 'Cluster';
 
+// ==== Settings ====
 export const THEME_KEY = 'theme';
 export const INVERTED_DISKS_KEY = 'invertedDisks';
 export const USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY = 'useNodesEndpointInDiagnostics';

package/dist/utils/error.ts

@@ -1,10 +1,9 @@
 import type {AxiosError} from 'axios';
 
 import type {IResponseError, NetworkError} from '../types/api/error';
-import type {ErrorResponse as QueryErrorResponse} from '../types/api/query';
-import type {QueryError} from '../types/store/query';
+import type {QueryError, QueryErrorResponse} from '../types/store/query';
 
-type RequestError = NetworkError | IResponseError | AxiosError | QueryErrorResponse | unknown;
+type RequestError = NetworkError | IResponseError | AxiosError | unknown;
 
 const isNetworkError = (error: RequestError): error is NetworkError => {
     return Boolean(

package/dist/utils/query.ts

@@ -7,7 +7,7 @@ import type {
     QueryPlan,
     ScriptPlan,
 } from '../types/api/query';
-import type {IQueryResult} from '../types/store/query';
+import type {IQueryResult, QueryErrorResponse} from '../types/store/query';
 
 export const QUERY_ACTIONS = {
     execute: 'execute',
@@ -169,12 +169,6 @@ export const prepareQueryResponse = (data?: KeyValueRow[]) => {
     });
 };
 
-export function prepareQueryError(error: any) {
-    return (
-        error.data?.error?.message ||
-        error.message ||
-        error.data ||
-        error.statusText ||
-        JSON.stringify(error)
-    );
+export function prepareQueryError(error: QueryErrorResponse) {
+    return error.data?.error?.message || error.statusText;
 }

package/dist/utils/tests/providers.tsx

@@ -1,7 +1,7 @@
 import React, {PropsWithChildren} from 'react';
-import {Provider} from 'react-redux'
-import {render} from '@testing-library/react'
-import type {RenderOptions} from '@testing-library/react'
+import {Provider} from 'react-redux';
+import {render} from '@testing-library/react';
+import type {RenderOptions} from '@testing-library/react';
 
 import configureStore from '../../store';
 
@@ -14,16 +14,13 @@ interface ExtendedRenderOptions extends Omit<RenderOptions, 'queries'> {
 
 export const renderWithStore = (
     ui: React.ReactElement,
-    {
-        storeConfiguration = configureStore(),
-        ...renderOptions
-    }: ExtendedRenderOptions = {}
+    {storeConfiguration = configureStore(), ...renderOptions}: ExtendedRenderOptions = {},
 ) => {
     const {store} = storeConfiguration;
 
     function Wrapper({children}: PropsWithChildren<{}>) {
-        return <Provider store={store}>{children}</Provider>
+        return <Provider store={store}>{children}</Provider>;
     }
 
-    return {store, ...render(ui, {wrapper: Wrapper, ...renderOptions})}
+    return {store, ...render(ui, {wrapper: Wrapper, ...renderOptions})};
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "4.10.0",
+  "version": "4.11.0",
   "files": [
     "dist"
   ],
@@ -17,6 +17,7 @@
     "@gravity-ui/react-data-table": "^1.0.3",
     "axios": "0.19.2",
     "bem-cn-lite": "4.0.0",
+    "copy-to-clipboard": "^3.3.3",
     "history": "4.10.1",
     "js-cookie": "2.2.1",
     "keymaster": "1.6.2",
@@ -39,7 +40,7 @@
     "reselect": "4.1.6",
     "sass": "1.32.8",
     "web-vitals": "1.1.2",
-    "ydb-ui-components": "^3.1.0"
+    "ydb-ui-components": "^3.2.1"
   },
   "scripts": {
     "start": "react-app-rewired start",
@@ -64,6 +65,9 @@
     ],
     "*.{js,jsx,ts,tsx}": [
       "eslint --fix --quiet"
+    ],
+    "*.{json}": [
+      "prettier --write"
     ]
   },
   "jest": {

package/dist/assets/icons/versions.svg

@@ -1,3 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.625 13.0156C8.625 13.2695 8.47266 13.498 8.24414 13.5742C8.04102 13.6758 7.76172 13.6504 7.58398 13.4727L5.55273 11.6445C5.42578 11.543 5.375 11.3652 5.375 11.1875C5.375 11.0352 5.42578 10.8574 5.55273 10.7559L7.58398 8.92773C7.76172 8.75 8.04102 8.72461 8.24414 8.82617C8.47266 8.90234 8.625 9.13086 8.625 9.35938V10.5781H9.03125C10.0215 10.5781 10.8594 9.76562 10.8594 8.75V4.61133C10.0215 4.35742 9.4375 3.57031 9.4375 2.65625C9.4375 1.53906 10.3262 0.625 11.4688 0.625C12.5859 0.625 13.5 1.53906 13.5 2.65625C13.5 3.57031 12.8906 4.35742 12.0781 4.61133V8.75C12.0781 10.4512 10.707 11.7969 9.03125 11.7969H8.625V13.0156ZM12.2812 2.65625C12.2812 2.22461 11.9004 1.84375 11.4688 1.84375C11.0117 1.84375 10.6562 2.22461 10.6562 2.65625C10.6562 3.11328 11.0117 3.46875 11.4688 3.46875C11.9004 3.46875 12.2812 3.11328 12.2812 2.65625ZM5.375 1.23438C5.375 1.00586 5.50195 0.777344 5.73047 0.701172C5.93359 0.599609 6.21289 0.625 6.39062 0.802734L8.42188 2.63086C8.54883 2.73242 8.625 2.91016 8.625 3.0625C8.625 3.24023 8.54883 3.41797 8.42188 3.51953L6.39062 5.34766C6.21289 5.52539 5.93359 5.55078 5.73047 5.44922C5.50195 5.37305 5.375 5.14453 5.375 4.89062V3.67188H4.96875C3.95312 3.67188 3.14062 4.50977 3.14062 5.5V9.66406C3.95312 9.91797 4.5625 10.7051 4.5625 11.5938C4.5625 12.7363 3.64844 13.625 2.53125 13.625C1.38867 13.625 0.5 12.7363 0.5 11.5938C0.5 10.7051 1.08398 9.91797 1.92188 9.66406V5.5C1.92188 3.82422 3.26758 2.45312 4.96875 2.45312H5.375V1.23438ZM1.71875 11.5938C1.71875 12.0508 2.07422 12.4062 2.53125 12.4062C2.96289 12.4062 3.34375 12.0508 3.34375 11.5938C3.34375 11.1621 2.96289 10.7812 2.53125 10.7812C2.07422 10.7812 1.71875 11.1621 1.71875 11.5938Z"/>
-</svg>

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

@@ -1,153 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cn from 'bem-cn-lite';
-import _ from 'lodash';
-import {connect} from 'react-redux';
-import {Loader} from '@gravity-ui/uikit';
-import DataTable from '@gravity-ui/react-data-table';
-import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
-
-import './Acl.scss';
-
-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,
-        acl: PropTypes.array,
-        loading: PropTypes.bool,
-        additionalTenantInfo: PropTypes.object,
-    };
-
-    COLUMNS = [
-        {
-            name: 'AccessType',
-            header: 'Access Type',
-            sortable: false,
-        },
-        {
-            name: 'AccessRights',
-            header: 'Access Rights',
-            render: ({value}) => {
-                return _.map(value, (item, index) => {
-                    return <div key={index}>{item}</div>;
-                });
-            },
-            sortable: false,
-        },
-        {
-            name: 'Subject',
-            sortable: false,
-            // eslint-disable-next-line react/display-name
-            render: ({value}) => {
-                return this.prepareLogin(value);
-            },
-            width: COLUMN_WIDTH,
-        },
-        {
-            name: 'InheritanceType',
-            header: 'Inheritance Type',
-            render: ({value}) => {
-                return _.map(value, (item, index) => {
-                    return <div key={index}>{item}</div>;
-                });
-            },
-            sortable: false,
-        },
-    ];
-
-    prepareLogin = (value) => {
-        if (this.props.prepareLogin) {
-            return this.props.additionalTenantInfo?.prepareLogin(value);
-        }
-        if (value && value.endsWith('@staff') && !value.startsWith('svc_')) {
-            const login = value.split('@')[0];
-            return login;
-        }
-
-        return value;
-    };
-
-    renderTable = () => {
-        const {acl} = this.props;
-
-        if (!acl) {
-            return null;
-        }
-
-        return <DataTable columns={this.COLUMNS} data={acl} settings={TABLE_SETTINGS} />;
-    };
-
-    renderOwner = () => {
-        const {owner} = this.props;
-
-        if (!owner) {
-            return null;
-        }
-
-        return (
-            <div className={b('owner-container')}>
-                <span className={b('owner-label')}>Owner: </span>
-                {this.prepareLogin(owner)}
-            </div>
-        );
-    };
-    renderResult = () => {
-        return (
-            <React.Fragment>
-                {this.renderOwner()}
-                {this.renderTable()}
-            </React.Fragment>
-        );
-    };
-
-    render() {
-        const {error, loading, acl, owner, wasLoaded} = this.props;
-
-        if (loading && !wasLoaded) {
-            return (
-                <div className={b('loader-container')}>
-                    <Loader size="m" />
-                </div>
-            );
-        }
-
-        if (error && !error.isCancelled) {
-            const message = (error.data || error).slice(0, 100);
-
-            return <div className={b('message-container')}>{message}</div>;
-        }
-
-        if (!loading && !acl && !owner) {
-            return <div className={b('message-container')}>Empty</div>;
-        }
-
-        return (
-            <div className={b()}>
-                <div className={b('result')}>{this.renderResult()}</div>
-            </div>
-        );
-    }
-}
-
-const mapStateToProps = (state) => {
-    const {loading, error, acl, owner, wasLoaded} = state.schemaAcl;
-
-    return {
-        acl,
-        owner,
-        loading,
-        error,
-        wasLoaded,
-    };
-};
-
-export default connect(mapStateToProps)(Acl);

package/dist/containers/Tenant/Schema/SchemaViewer/SchemaViewer.js

@@ -1,94 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cn from 'bem-cn-lite';
-
-import find from 'lodash/find';
-
-import {Icon} from '../../../../components/Icon';
-import DataTable from '@gravity-ui/react-data-table';
-import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
-import './SchemaViewer.scss';
-
-const b = cn('schema-viewer');
-
-const SchemaViewerColumns = {
-    id: 'Id',
-    name: 'Name',
-    key: 'Key',
-    type: 'Type',
-    notNull: 'NotNull',
-};
-
-class SchemaViewer extends React.Component {
-    static propTypes = {
-        data: PropTypes.arrayOf(PropTypes.object),
-    };
-
-    renderTable() {
-        const {data = {}} = this.props;
-        const keyColumnsIds = data.KeyColumnIds ?? [];
-        const keyColumns = keyColumnsIds.map((key) => {
-            const keyColumn = find(data.Columns, {Id: key});
-            return keyColumn;
-        });
-        const restColumns = data.Columns?.filter((item) => !keyColumnsIds.includes(item.Id)) ?? [];
-
-        const columns = [
-            {
-                name: SchemaViewerColumns.id,
-                width: 40,
-            },
-            {
-                name: SchemaViewerColumns.key,
-                width: 40,
-                sortAccessor: (row) => {
-                    return keyColumnsIds.includes(row.Id) ? 1 : 0;
-                },
-                render: ({row}) => {
-                    return keyColumnsIds.includes(row.Id) ? (
-                        <div className={b('key-icon')}>
-                            <Icon name="key" viewBox="0 0 12 7" width={12} height={7} />
-                        </div>
-                    ) : null;
-                },
-            },
-            {
-                name: SchemaViewerColumns.name,
-                width: 100,
-            },
-            {
-                name: SchemaViewerColumns.type,
-                width: 100,
-            },
-            {
-                name: SchemaViewerColumns.notNull,
-                width: 100,
-                render: ({row}) => {
-                    if (row.NotNull) {
-                        return '\u2713';
-                    }
-
-                    return undefined;
-                },
-            },
-        ];
-
-        const tableData = [...keyColumns, ...restColumns];
-        return (
-            <DataTable
-                theme="yandex-cloud"
-                data={tableData}
-                columns={columns}
-                settings={DEFAULT_TABLE_SETTINGS}
-                dynamicRender={true}
-                initialSortOrder={{columnId: SchemaViewerColumns.key, order: DataTable.DESCENDING}}
-            />
-        );
-    }
-
-    render() {
-        return <div className={b()}>{this.renderTable()}</div>;
-    }
-}
-
-export default SchemaViewer;