ydb-embedded-ui 1.14.2 → 2.1.0

package/dist/types/api/healthcheck.ts

@@ -0,0 +1,91 @@
+export enum SelfCheckResult {
+    UNSPECIFIED = 'UNSPECIFIED',
+    GOOD = 'GOOD',
+    DEGRADED = 'DEGRADED',
+    MAINTENANCE_REQUIRED = 'MAINTENANCE_REQUIRED',
+    EMERGENCY = 'EMERGENCY',
+}
+
+enum StatusFlag {
+    UNSPECIFIED = 'UNSPECIFIED',
+    GREY = 'GREY',
+    GREEN = 'GREEN',
+    BLUE = 'BLUE',
+    YELLOW = 'YELLOW',
+    ORANGE = 'ORANGE',
+    RED = 'RED',
+}
+
+interface LocationNode {
+    id: number;
+    host: string;
+    port: number;
+}
+
+interface LocationStoragePDisk {
+    id: string;
+    path: string;
+}
+
+interface LocationStorageVDisk {
+    id: string;
+    pdisk: LocationStoragePDisk;
+}
+
+interface LocationStorageGroup {
+    id: string;
+    vdisk: LocationStorageVDisk;
+}
+
+interface LocationStoragePool {
+    name: string;
+    group: LocationStorageGroup;
+}
+
+interface LocationStorage {
+    node: LocationNode;
+    pool: LocationStoragePool;
+}
+
+interface LocationComputePool {
+    name: string;
+}
+
+interface LocationComputeTablet {
+    type: string;
+    id?: string[];
+    count: number;
+}
+
+interface LocationCompute {
+    node: LocationNode;
+    pool: LocationComputePool;
+    tablet: LocationComputeTablet;
+}
+
+interface LocationDatabase {
+    name: string;
+}
+
+interface Location {
+    storage: LocationStorage;
+    compute: LocationCompute;
+    database: LocationDatabase;
+}
+
+export interface IssueLog {
+    id: string;
+    status: StatusFlag;
+    message: string;
+    location: Location;
+    reason?: string[];
+    type: string;
+    level: number;
+}
+
+export interface HealthCheckAPIResponse {
+    // eslint-disable-next-line camelcase
+    self_check_result: SelfCheckResult;
+    // eslint-disable-next-line camelcase
+    issue_log?: IssueLog[];
+}

package/dist/types/api/query.ts

@@ -46,15 +46,12 @@ export interface ColumnType {
 // modern response
 
 export type ExecuteModernResponse = {
-    // either both fields exist, or neither one does
-    // they can be undefined for queries like `insert into`
-    result?: ArrayRow[];
-    columns?: ColumnType[];
+    result: ArrayRow[];
+    columns: ColumnType[];
 } & CommonFields;
 
 export type ExecuteClassicResponseDeep = {
-    // can be undefined for queries like `insert into`
-    result?: KeyValueRow[];
+    result: KeyValueRow[];
 } & CommonFields;
 
 // can be undefined for queries like `insert into`
@@ -63,19 +60,20 @@ export type ExecuteClassicResponsePlain = KeyValueRow[] | undefined;
 export type ExecuteClassicResponse = ExecuteClassicResponseDeep | ExecuteClassicResponsePlain;
 
 export type ExecuteYdbResponse = {
-    // can be undefined for queries like `insert into`
-    result?: KeyValueRow[];
+    result: KeyValueRow[];
 } & CommonFields;
 
-type ExecuteResponse<Schema extends Schemas> = (
-    Schema extends 'modern'
-        ? ExecuteModernResponse
-        : Schema extends 'ydb'
-            ? ExecuteYdbResponse
-            : Schema extends 'classic' | undefined
-                ? ExecuteClassicResponse
-                : unknown
-);
+type ExecuteResponse<Schema extends Schemas> = 
+    | CommonFields // result can be undefined for queries like `insert into`
+    | (
+        Schema extends 'modern'
+            ? ExecuteModernResponse
+            : Schema extends 'ydb'
+                ? ExecuteYdbResponse
+                : Schema extends 'classic' | undefined
+                    ? ExecuteClassicResponse
+                    : unknown
+    );
 
 // deprecated response from older versions, backward compatibility
 
@@ -107,9 +105,9 @@ type ExplainResponse = CommonFields;
 
 type DeprecatedExplainResponse<Action extends ExplainActions> = (
     Action extends 'explain-ast'
-        ? {ast: AST} & DeprecatedCommonFields
-        : Actions extends 'explain'
-            ? ({result: Plan} & DeprecatedCommonFields) | Plan
+        ? ({result: {ast: AST}} & Required<DeprecatedCommonFields>) | {ast: AST}
+        : Action extends 'explain'
+            ? ({result: Plan} & Required<DeprecatedCommonFields>) | Plan
             : unknown
 );
 
@@ -138,10 +136,23 @@ export type AnyExecuteResponse =
     | ExecuteModernResponse
     | ExecuteClassicResponse
     | ExecuteYdbResponse
-    | DeprecatedExecuteResponse;
+    | CommonFields
+    | DeprecatedExecuteResponse
+    | null;
 
 export type DeepExecuteResponse =
     | ExecuteModernResponse
     | ExecuteClassicResponseDeep
     | ExecuteYdbResponse
     | DeprecatedExecuteResponseDeep;
+
+export type AnyExplainResponse = 
+    | ExplainResponse
+    | CommonFields
+    | DeprecatedExplainResponse<'explain'>
+    | DeprecatedExplainResponse<'explain-ast'>
+    | null;
+
+export type AnyResponse =
+    | AnyExecuteResponse
+    | AnyExplainResponse;

package/dist/types/assets.d.ts

@@ -9,4 +9,4 @@ declare module '*.jpeg';
 declare module '*.ico';
 
 declare type SVGIconData =
-    import('@yandex-cloud/uikit/build/esm/components/Icon/types').SVGIconData;
+    import('@gravity-ui/uikit/build/esm/components/Icon/types').SVGIconData;

package/dist/types/store/healthcheck.ts

@@ -0,0 +1,3 @@
+import type {HealthCheckAPIResponse} from "../api/healthcheck";
+
+export type IHealthCheck = HealthCheckAPIResponse;

package/dist/types/store/query.ts

@@ -5,5 +5,5 @@ export interface IQueryResult {
     columns?: ColumnType[];
     stats?: any;
     plan?: any;
-    ast?: any;
+    ast?: string;
 }

package/dist/utils/createToast.tsx

@@ -1,4 +1,4 @@
-import {Toaster} from '@yandex-cloud/uikit';
+import {Toaster} from '@gravity-ui/uikit';
 
 const toaster = new Toaster();
 

package/dist/utils/getNodesColumns.js

@@ -1,6 +1,6 @@
 import cn from 'bem-cn-lite';
 import DataTable from '@yandex-cloud/react-data-table';
-import {Button, Popover} from '@yandex-cloud/uikit';
+import {Button, Popover} from '@gravity-ui/uikit';
 
 import Icon from '../components/Icon/Icon';
 import EntityStatus from '../components/EntityStatus/EntityStatus';

package/dist/utils/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useAutofetcher';

package/dist/utils/hooks/useAutofetcher.ts

@@ -0,0 +1,29 @@
+import {DependencyList, useEffect, useRef} from 'react';
+
+import {AutoFetcher} from '../autofetcher';
+
+export const useAutofetcher = (fetchData: VoidFunction, deps: DependencyList, enabled = true) => {
+    const ref = useRef<AutoFetcher | null>(null);
+
+    if (ref.current === null) {
+        ref.current = new AutoFetcher();
+    }
+
+    const autofetcher = ref.current;
+
+    // initial fetch
+    useEffect(fetchData, deps); // eslint-disable-line react-hooks/exhaustive-deps
+
+    useEffect(() => {
+        autofetcher.stop();
+
+        if (enabled) {
+            autofetcher.start();
+            autofetcher.fetch(fetchData);
+        }
+
+        return () => {
+            autofetcher.stop();
+        };
+    }, [enabled, ...deps]); // eslint-disable-line react-hooks/exhaustive-deps
+};

package/dist/utils/i18n/i18n.ts

@@ -1,4 +1,4 @@
-import {I18N} from '@yandex-cloud/i18n';
+import {I18N} from '@gravity-ui/i18n';
 
 export enum Lang {
     En = 'en',

package/dist/utils/prepareQueryExplain.ts

@@ -59,8 +59,6 @@ export function preparePlan(plan: Plan) {
     const nodes: GraphNode[] = [];
     const links: Link[] = [];
 
-    let graphDepth = 0;
-
     function parsePlans(plans: Plan[] = [], from: string, curDepth: number) {
         const depth = curDepth + 1;
         plans.forEach((p) => {
@@ -77,7 +75,6 @@ export function preparePlan(plan: Plan) {
             };
             nodes.push(node);
             links.push({from, to: node.name});
-            graphDepth = Math.max(graphDepth, depth);
             parsePlans(p.Plans, node.name, depth);
         });
     }
@@ -96,6 +93,5 @@ export function preparePlan(plan: Plan) {
     return {
         nodes,
         links,
-        graphDepth,
     };
 }

package/dist/utils/query.test.ts

@@ -1,4 +1,7 @@
-import {parseQueryAPIExecuteResponse} from './query';
+import {
+    parseQueryAPIExecuteResponse,
+    parseQueryAPIExplainResponse,
+} from './query';
 
 describe('API utils', () => {
     describe('json/viewer/query', () => {
@@ -185,5 +188,60 @@ describe('API utils', () => {
                 });
             });
         });
+
+        describe('parseQueryAPIExplainResponse', () => {
+            it('should handle empty response', () => {
+                expect(parseQueryAPIExplainResponse(null)).toEqual({});
+            });
+
+            it('should accept stats without a plan', () => {
+                const stats = {metric: 'good'};
+                expect(parseQueryAPIExplainResponse({stats}).stats).toEqual(stats);
+            });
+
+            describe('old format', () => {
+                describe('explain', () => {
+                    it('should parse plan data in the root', () => {
+                        const plan = {foo: 'bar'};
+                        expect(parseQueryAPIExplainResponse(plan).plan).toEqual(plan);
+                    });
+
+                    it('should parse plan in the result field with stats', () => {
+                        const plan = {foo: 'bar'};
+                        const stats = {metric: 'good'};
+                        const actual = parseQueryAPIExplainResponse({result: plan, stats});
+                        expect(actual.plan).toEqual(plan);
+                        expect(actual.stats).toEqual(stats);
+                    });
+                });
+
+                describe('explain-ast', () => {
+                    it('should parse ast field in the root', () => {
+                        const ast = 'ast';
+                        expect(parseQueryAPIExplainResponse({ast}).ast).toBe(ast);
+                    });
+
+                    it('should parse ast in the result field with stats', () => {
+                        const ast = 'ast';
+                        const stats = {metric: 'good'};
+                        const actual = parseQueryAPIExplainResponse({result: {ast}, stats});
+                        expect(actual.ast).toBe(ast);
+                        expect(actual.stats).toEqual(stats);
+                    });
+                });
+            });
+
+            describe('new format', () => {
+                it('should parse explain response with stats', () => {
+                    const plan = {foo: 'bar'};
+                    const ast = 'ast';
+                    const stats = {metric: 'good'};
+                    const actual = parseQueryAPIExplainResponse({plan, ast, stats});
+                    expect(actual.plan).toEqual(plan);
+                    expect(actual.ast).toBe(ast);
+                    expect(actual.stats).toEqual(stats);
+                });
+            });
+        });
     });
 });

package/dist/utils/query.ts

@@ -1,14 +1,14 @@
 import {YQLType} from '../types';
 import type {
     AnyExecuteResponse,
+    AnyExplainResponse,
+    AnyResponse,
     CommonFields,
     DeepExecuteResponse,
     DeprecatedExecuteResponsePlain,
     ExecuteClassicResponsePlain,
     ExecuteModernResponse,
     KeyValueRow,
-    QueryAPIExecuteResponse,
-    Schemas,
 } from '../types/api/query';
 import type {IQueryResult} from '../types/store/query';
 
@@ -97,13 +97,13 @@ const isModern = (response: AnyExecuteResponse): response is ExecuteModernRespon
     Array.isArray((response as ExecuteModernResponse).columns)
 );
 
-const hasCommonFields = (data: AnyExecuteResponse): data is CommonFields => Boolean(
+const hasCommonFields = (data: AnyResponse): data is CommonFields => Boolean(
     data && typeof data === 'object' && ('ast' in data || 'plan' in data || 'stats' in data)
 );
 
 // complex logic because of the variety of possible responses
 // after all backends are updated to the latest version, it can be simplified
-export const parseQueryAPIExecuteResponse = <T extends Schemas>(data: QueryAPIExecuteResponse<T>): IQueryResult => {
+export const parseQueryAPIExecuteResponse = (data: AnyExecuteResponse): IQueryResult => {
     if (!data) {
         return {};
     }
@@ -128,6 +128,40 @@ export const parseQueryAPIExecuteResponse = <T extends Schemas>(data: QueryAPIEx
     };
 };
 
+// complex logic because of the variety of possible responses
+// after all backends are updated to the latest version, it can be simplified
+export const parseQueryAPIExplainResponse = (data: AnyExplainResponse): IQueryResult => {
+    if (!data) {
+        return {};
+    }
+
+    if ('ast' in data) {
+        return data;
+    }
+
+    if ('result' in data) {
+        const {result, ...restData} = data;
+
+        if ('ast' in data.result) {
+            return {
+                ast: result.ast,
+                ...restData,
+            };
+        }
+
+        return {
+            plan: data.result,
+            ...restData,
+        };
+    }
+
+    if (hasCommonFields(data)) {
+        return data;
+    }
+
+    return {plan: data};
+};
+
 export const prepareQueryResponse = (data?: KeyValueRow[]) => {
     if (!Array.isArray(data)) {
         return [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "1.14.2",
+  "version": "2.1.0",
   "files": [
     "dist"
   ],
@@ -9,7 +9,7 @@
     "url": "git@github.com:ydb-platform/ydb-embedded-ui.git"
   },
   "dependencies": {
-    "@yandex-cloud/i18n": "0.6.0",
+    "@gravity-ui/i18n": "^1.0.0",
     "@yandex-cloud/paranoid": "^1.2.1",
     "@yandex-cloud/react-data-table": "0.2.1",
     "axios": "0.19.2",
@@ -36,7 +36,7 @@
     "reselect": "4.0.0",
     "sass": "1.32.8",
     "web-vitals": "1.1.2",
-    "ydb-ui-components": "2.4.1"
+    "ydb-ui-components": "3.0.1"
   },
   "scripts": {
     "start": "react-app-rewired start",
@@ -95,6 +95,11 @@
   "devDependencies": {
     "@commitlint/cli": "^15.0.0",
     "@commitlint/config-conventional": "^15.0.0",
+    "@gravity-ui/eslint-config": "^1.0.2",
+    "@gravity-ui/prettier-config": "^1.0.1",
+    "@gravity-ui/stylelint-config": "^1.0.1",
+    "@gravity-ui/tsconfig": "^1.0.0",
+    "@gravity-ui/uikit": "^3.0.1",
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
@@ -107,12 +112,6 @@
     "@types/react-transition-group": "^4.4.4",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@yandex-cloud/axios-wrapper": "^1.0.2",
-    "@yandex-cloud/browserslist-config": "1.0.1",
-    "@yandex-cloud/eslint-config": "^1.0.0",
-    "@yandex-cloud/prettier-config": "^1.0.0",
-    "@yandex-cloud/stylelint-config": "^1.1.0",
-    "@yandex-cloud/tsconfig": "^1.0.0",
-    "@yandex-cloud/uikit": "^2.8.0",
     "copyfiles": "^2.4.1",
     "eslint-config-prettier": "^8.3.0",
     "husky": "^7.0.4",
@@ -128,7 +127,6 @@
     "typescript": "^4.5.5"
   },
   "peerDependencies": {
-    "@yandex-cloud/browserslist-config": "^1.0.1",
-    "@yandex-cloud/uikit": "^2.8.0"
+    "@gravity-ui/uikit": "^3.0.1"
   }
 }

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

@@ -1,195 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {connect} from 'react-redux';
-import cn from 'bem-cn-lite';
-
-import {Loader, Button} from '@yandex-cloud/uikit';
-
-import IssuesViewer from './IssuesViewer/IssuesViewer';
-
-import {getHealthcheckInfo} from '../../../../store/reducers/healthcheckInfo';
-import {hideTooltip, showTooltip} from '../../../../store/reducers/tooltip';
-import {AutoFetcher} from '../../../../utils/autofetcher';
-
-import './Healthcheck.scss';
-
-const b = cn('healthcheck');
-
-class Healthcheck extends React.Component {
-    static propTypes = {
-        data: PropTypes.object,
-        loading: PropTypes.bool,
-        wasLoaded: PropTypes.bool,
-        error: PropTypes.object,
-        getHealthcheckInfo: PropTypes.func,
-        tenant: PropTypes.string,
-        preview: PropTypes.bool,
-        showMoreHandler: PropTypes.func,
-    };
-
-    autofetcher;
-
-    componentDidMount() {
-        this.autofetcher = new AutoFetcher();
-        this.fetchHealthcheck();
-        if (this.props.autorefresh) {
-            this.autofetcher.start();
-            this.autofetcher.fetch(() => this.fetchHealthcheck());
-        }
-    }
-
-    componentDidUpdate(prevProps) {
-        const {autorefresh} = this.props;
-
-        if (autorefresh && !prevProps.autorefresh) {
-            this.fetchHealthcheck();
-            this.autofetcher.stop();
-            this.autofetcher.start();
-            this.autofetcher.fetch(() => this.fetchHealthcheck());
-        }
-        if (!autorefresh && prevProps.autorefresh) {
-            this.autofetcher.stop();
-        }
-    }
-
-    componentWillUnmount() {
-        this.autofetcher.stop();
-    }
-
-    fetchHealthcheck = () => {
-        const {tenant, getHealthcheckInfo} = this.props;
-        getHealthcheckInfo(tenant);
-    };
-
-    renderLoader() {
-        return (
-            <div className={b('loader')}>
-                <Loader size="m" />
-            </div>
-        );
-    }
-
-    renderUpdateButton() {
-        const {loading} = this.props;
-        return (
-            <Button size="s" onClick={this.fetchHealthcheck} loading={loading}>
-                Update
-            </Button>
-        );
-    }
-
-    renderPreview = () => {
-        const {data, showMoreHandler} = this.props;
-        const {self_check_result: selfCheckResult} = data;
-        const modifier = selfCheckResult.toLowerCase();
-
-        const statusOk = selfCheckResult === 'GOOD';
-        const text = statusOk
-            ? 'No issues have been found on this database.'
-            : 'Several issues have been found on this database.';
-
-        return (
-            <div>
-                <div className={b('status-wrapper')}>
-                    <div className={b('preview-title')}>Healthcheck</div>
-                    <div className={b('self-check-status-indicator', {[modifier]: true})}>
-                        {statusOk ? 'Ok' : 'Error'}
-                    </div>
-                    {this.renderUpdateButton()}
-                </div>
-                <div className={b('preview-content')}>
-                    {text}
-                    {!statusOk && (
-                        <Button
-                            view="flat-info"
-                            onClick={showMoreHandler}
-                            size="s"
-                        >
-                            Show details
-                        </Button>
-                    )}
-                </div>
-            </div>
-        );
-    };
-
-    renderOverviewStatus = () => {
-        const {data} = this.props;
-        const {self_check_result: selfCheckResult} = data;
-        const modifier = selfCheckResult.toLowerCase();
-
-        return (
-            <div className={b('self-check-status')}>
-                <h3 className={b('self-check-status-label')}>Self check status</h3>
-                <div className={b('self-check-status-indicator', {[modifier]: true})} />
-                {selfCheckResult}
-                <div className={b('self-check-update')}>{this.renderUpdateButton()}</div>
-            </div>
-        );
-    };
-
-    renderHealthcheckIssues() {
-        const {data, showTooltip, hideTooltip} = this.props;
-        const {issue_log: issueLog} = data;
-
-        if (!issueLog) {
-            return null;
-        }
-
-        return (
-            <div className={b('issues')}>
-                <h3>Issues</h3>
-                <IssuesViewer
-                    issues={issueLog}
-                    showTooltip={showTooltip}
-                    hideTooltip={hideTooltip}
-                />
-            </div>
-        );
-    }
-
-    renderContent = () => {
-        const {preview} = this.props;
-        return preview ? (
-            this.renderPreview()
-        ) : (
-            <div className={b()}>
-                {this.renderOverviewStatus()}
-                {this.renderHealthcheckIssues()}
-            </div>
-        );
-    };
-
-    render() {
-        const {error, data, loading, wasLoaded} = this.props;
-
-        if (error) {
-            return <div>{error.statusText}</div>;
-        } else if (data && data['self_check_result']) {
-            return this.renderContent();
-        } else if (loading && !wasLoaded) {
-            return this.renderLoader();
-        } else return <div className="error">no healthcheck data</div>;
-    }
-}
-
-function mapStateToProps(state) {
-    const {data, loading, wasLoaded, error} = state.healthcheckInfo;
-    const {autorefresh} = state.schema;
-
-    return {
-        data,
-        loading,
-        wasLoaded,
-        error,
-        autorefresh,
-    };
-}
-
-const mapDispatchToProps = {
-    getHealthcheckInfo,
-    hideTooltip,
-    showTooltip,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(Healthcheck);