ydb-embedded-ui 4.5.2 → 4.7.0

package/dist/containers/Tenant/Diagnostics/Overview/Overview.tsx

@@ -1,85 +1,88 @@
 import {ReactNode, useCallback} from 'react';
-import {shallowEqual, useDispatch, useSelector} from 'react-redux';
+import {shallowEqual, useDispatch} from 'react-redux';
 
 import {Loader} from '../../../../components/Loader';
-
-//@ts-ignore
 import {TableIndexInfo} from '../../../../components/InfoViewer/schemaInfo';
 import {ResponseError} from '../../../../components/Errors/ResponseError';
 
-import {TopicInfo} from './TopicInfo';
-import {ChangefeedInfo} from './ChangefeedInfo';
-import {TableInfo} from './TableInfo';
-
 import {EPathType} from '../../../../types/api/schema';
+import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
+import {selectSchemaMergedChildrenPaths} from '../../../../store/reducers/schema/schema';
+import {getTopic} from '../../../../store/reducers/topic';
+import {
+    getOlapStats,
+    resetLoadingState as resetOlapLoadingState,
+} from '../../../../store/reducers/olapStats';
+import {
+    getOverview,
+    getOverviewBatched,
+    setCurrentOverviewPath,
+    setDataWasNotLoaded,
+} from '../../../../store/reducers/overview/overview';
+
 import {
     isEntityWithMergedImplementation,
     isColumnEntityType,
     isTableType,
     isPathTypeWithTopic,
 } from '../../utils/schema';
-//@ts-ignore
-import {
-    getSchema,
-    getSchemaBatched,
-    resetLoadingState,
-    selectSchemaMergedChildrenPaths,
-} from '../../../../store/reducers/schema';
-import {getTopic} from '../../../../store/reducers/topic';
-//@ts-ignore
-import {
-    getOlapStats,
-    resetLoadingState as resetOlapLoadingState,
-} from '../../../../store/reducers/olapStats';
-import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
+
+import {TopicInfo} from './TopicInfo';
+import {ChangefeedInfo} from './ChangefeedInfo';
+import {TableInfo} from './TableInfo';
 
 interface OverviewProps {
     type?: EPathType;
-    className?: string;
     tenantName?: string;
 }
 
-function Overview({type, tenantName, className}: OverviewProps) {
+function Overview({type, tenantName}: OverviewProps) {
     const dispatch = useDispatch();
 
+    const {autorefresh, currentSchemaPath} = useTypedSelector((state) => state.schema);
     const {
-        currentSchema: currentItem = {},
-        loading: schemaLoading,
-        wasLoaded,
-        autorefresh,
-        currentSchemaPath,
-        error,
-    } = useSelector((state: any) => state.schema);
-
-    const {data: {result: olapStats} = {result: undefined}, loading: olapStatsLoading} =
-        useTypedSelector((state) => state.olapStats);
-
-    const loading = schemaLoading || olapStatsLoading;
+        data,
+        additionalData,
+        loading: overviewLoading,
+        wasLoaded: overviewWasLoaded,
+        error: overviewError,
+    } = useTypedSelector((state) => state.overview);
+    const {
+        data: {result: olapStats} = {result: undefined},
+        loading: olapStatsLoading,
+        wasLoaded: olapStatsWasLoaded,
+    } = useTypedSelector((state) => state.olapStats);
 
     const isEntityWithMergedImpl = isEntityWithMergedImplementation(type);
 
-    // There is a circular dependency here. Fetch data depends on children paths
-    // When data in store updated on fetch request,
-    // new object is set there, so source children array is updated
-    // This updates selector, the selector returns a new array, and data is fetched again
-    // To prevent it, shallowEqual, which compares array content, was added
+    // shalloEqual prevents rerenders when new schema data is loaded
     const mergedChildrenPaths = useTypedSelector(
         (state) => selectSchemaMergedChildrenPaths(state, currentSchemaPath, type),
         shallowEqual,
     );
 
+    const entityLoading =
+        (overviewLoading && !overviewWasLoaded) || (olapStatsLoading && !olapStatsWasLoaded);
+    const entityNotReady = isEntityWithMergedImpl && !mergedChildrenPaths;
+
     const fetchData = useCallback(
         (isBackground: boolean) => {
-            if (!isBackground) {
-                dispatch(resetLoadingState());
+            const schemaPath = currentSchemaPath || tenantName;
+
+            if (!schemaPath) {
+                return;
             }
 
-            const schemaPath = currentSchemaPath || tenantName;
+            dispatch(setCurrentOverviewPath(schemaPath));
+
+            if (!isBackground) {
+                dispatch(setDataWasNotLoaded());
+            }
 
             if (!isEntityWithMergedImpl) {
-                dispatch(getSchema({path: schemaPath}));
+                dispatch(getOverview({path: schemaPath}));
             } else if (mergedChildrenPaths) {
-                dispatch(getSchemaBatched([schemaPath, ...mergedChildrenPaths]));
+                dispatch(getOverviewBatched([schemaPath, ...mergedChildrenPaths]));
             }
 
             if (isTableType(type) && isColumnEntityType(type)) {
@@ -113,32 +116,32 @@ function Overview({type, tenantName, className}: OverviewProps) {
             [EPathType.EPathTypeDir]: undefined,
             [EPathType.EPathTypeTable]: undefined,
             [EPathType.EPathTypeSubDomain]: undefined,
-            [EPathType.EPathTypeTableIndex]: () => <TableIndexInfo data={currentItem} />,
+            [EPathType.EPathTypeTableIndex]: () => <TableIndexInfo data={data} />,
             [EPathType.EPathTypeExtSubDomain]: undefined,
             [EPathType.EPathTypeColumnStore]: undefined,
             [EPathType.EPathTypeColumnTable]: undefined,
             [EPathType.EPathTypeCdcStream]: () => (
-                <ChangefeedInfo data={currentItem} childrenPaths={mergedChildrenPaths} />
+                <ChangefeedInfo data={data} topic={additionalData?.[0]} />
             ),
-            [EPathType.EPathTypePersQueueGroup]: () => <TopicInfo data={currentItem} />,
+            [EPathType.EPathTypePersQueueGroup]: () => <TopicInfo data={data} />,
         };
 
         return (
             (type && pathTypeToComponent[type]?.()) || (
-                <TableInfo data={currentItem} type={type} olapStats={olapStats} />
+                <TableInfo data={data} type={type} olapStats={olapStats} />
             )
         );
     };
 
-    if ((loading && !wasLoaded) || (isEntityWithMergedImpl && !mergedChildrenPaths)) {
+    if (entityLoading || entityNotReady) {
         return <Loader size="m" />;
     }
 
-    if (error) {
-        return <ResponseError error={error} />;
+    if (overviewError) {
+        return <ResponseError error={overviewError} />;
     }
 
-    return <div className={className}>{renderContent()}</div>;
+    return <div>{renderContent()}</div>;
 }
 
 export default Overview;

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

@@ -105,6 +105,7 @@ class TenantOverview extends React.Component {
             PoolStats,
             StateStats = [],
             MemoryUsed,
+            Name,
             CoresUsed,
             StorageGroups,
             StorageAllocatedSize,
@@ -159,7 +160,7 @@ class TenantOverview extends React.Component {
                 <div className={b('system-tablets')}>
                     {SystemTablets &&
                         SystemTablets.map((tablet, tabletIndex) => (
-                            <Tablet key={tabletIndex} tablet={tablet} />
+                            <Tablet key={tabletIndex} tablet={tablet} tenantName={Name} />
                         ))}
                 </div>
                 <div className={b('common-info')}>

package/dist/containers/Tenant/Diagnostics/TopQueries/TopQueries.tsx

@@ -4,7 +4,7 @@ import {useHistory, useLocation} from 'react-router';
 import qs from 'qs';
 import cn from 'bem-cn-lite';
 
-import DataTable, {Column, Settings} from '@gravity-ui/react-data-table';
+import DataTable, {Column} from '@gravity-ui/react-data-table';
 import {Loader} from '@gravity-ui/uikit';
 
 import {DateRange, DateRangeValues} from '../../../../components/DateRange';
@@ -24,27 +24,24 @@ import type {ITopQueriesFilters} from '../../../../types/store/executeTopQueries
 import type {IQueryResult} from '../../../../types/store/query';
 import type {TenantGeneralTab} from '../../../../store/reducers/tenant/types';
 
-import {TENANT_GENERAL_TABS_IDS} from '../../../../store/reducers/tenant/constants';
+import {
+    TENANT_GENERAL_TABS_IDS,
+    TENANT_QUERY_TABS_ID,
+} from '../../../../store/reducers/tenant/constants';
 import {formatDateTime, formatNumber} from '../../../../utils';
-import {DEFAULT_TABLE_SETTINGS, HOUR_IN_SECONDS} from '../../../../utils/constants';
+import {HOUR_IN_SECONDS} from '../../../../utils/constants';
 import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
 import {prepareQueryError} from '../../../../utils/query';
-import routes, {createHref} from '../../../../routes';
 
+import {MAX_QUERY_HEIGHT, QUERY_TABLE_SETTINGS} from '../../utils/constants';
 import {isColumnEntityType} from '../../utils/schema';
-import {TenantTabsGroups} from '../../TenantPages';
+import {TenantTabsGroups, getTenantPath} from '../../TenantPages';
 
 import i18n from './i18n';
 import './TopQueries.scss';
 
 const b = cn('kv-top-queries');
 
-const TABLE_SETTINGS: Settings = {
-    ...DEFAULT_TABLE_SETTINGS,
-    dynamicRenderType: 'variable',
-};
-
-const MAX_QUERY_HEIGHT = 10;
 const COLUMNS: Column<KeyValueRow>[] = [
     {
         name: 'CPUTimeUs',
@@ -178,9 +175,10 @@ export const TopQueries = ({path, type}: TopQueriesProps) => {
                 ignoreQueryPrefix: true,
             });
 
-            const queryPath = createHref(routes.tenant, undefined, {
+            const queryPath = getTenantPath({
                 ...queryParams,
                 [TenantTabsGroups.general]: TENANT_GENERAL_TABS_IDS.query,
+                [TenantTabsGroups.queryTab]: TENANT_QUERY_TABS_ID.newQuery,
             });
 
             history.push(queryPath);
@@ -222,7 +220,7 @@ export const TopQueries = ({path, type}: TopQueriesProps) => {
                 <DataTable
                     columns={COLUMNS}
                     data={data}
-                    settings={TABLE_SETTINGS}
+                    settings={QUERY_TABLE_SETTINGS}
                     onRowClick={handleRowClick}
                     theme="yandex-cloud"
                 />

package/dist/containers/Tenant/Diagnostics/TopShards/TopShards.tsx

@@ -16,7 +16,7 @@ import {
     setShardsState,
     setShardsQueryFilters,
 } from '../../../../store/reducers/shardsWorkload';
-import {setCurrentSchemaPath, getSchema} from '../../../../store/reducers/schema';
+import {setCurrentSchemaPath, getSchema} from '../../../../store/reducers/schema/schema';
 import {EShardsWorkloadMode, IShardsWorkloadFilters} from '../../../../types/store/shardsWorkload';
 
 import type {EPathType} from '../../../../types/api/schema';

package/dist/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx

@@ -7,7 +7,7 @@ import {useThemeValue} from '@gravity-ui/uikit';
 import type {EPathType} from '../../../types/api/schema';
 import {TENANT_GENERAL_TABS_IDS} from '../../../store/reducers/tenant/constants';
 
-import QueryEditor from '../QueryEditor/QueryEditor';
+import {Query} from '../Query/Query';
 import Diagnostics from '../Diagnostics/Diagnostics';
 
 import './ObjectGeneral.scss';
@@ -35,7 +35,7 @@ function ObjectGeneral(props: ObjectGeneralProps) {
         const {type, additionalTenantInfo, additionalNodesInfo} = props;
         switch (generalTab) {
             case TENANT_GENERAL_TABS_IDS.query: {
-                return <QueryEditor path={tenantName as string} theme={theme} type={type} />;
+                return <Query path={tenantName as string} theme={theme} type={type} />;
             }
             default: {
                 return (

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -46,9 +46,12 @@ import {
     paneVisibilityToggleReducerCreator,
     PaneVisibilityToggleButtons,
 } from '../utils/paneVisibilityToggleHelpers';
-import {setShowPreview} from '../../../store/reducers/schema';
-import {setTopLevelTab} from '../../../store/reducers/tenant/tenant';
-import {TENANT_GENERAL_TABS_IDS} from '../../../store/reducers/tenant/constants';
+import {setShowPreview} from '../../../store/reducers/schema/schema';
+import {setQueryTab, setTopLevelTab} from '../../../store/reducers/tenant/tenant';
+import {
+    TENANT_GENERAL_TABS_IDS,
+    TENANT_QUERY_TABS_ID,
+} from '../../../store/reducers/tenant/constants';
 
 import './ObjectSummary.scss';
 
@@ -276,6 +279,7 @@ function ObjectSummary(props: ObjectSummaryProps) {
     const onOpenPreview = () => {
         dispatch(setShowPreview(true));
         dispatch(setTopLevelTab(TENANT_GENERAL_TABS_IDS.query));
+        dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
     };
 
     const renderCommonInfoControls = () => {

package/dist/containers/Tenant/Preview/Preview.js

@@ -15,7 +15,7 @@ import {prepareQueryError} from '../../../utils/query';
 import {isTableType} from '../utils/schema';
 import {AutoFetcher} from '../../../utils/autofetcher';
 import EnableFullscreenButton from '../../../components/EnableFullscreenButton/EnableFullscreenButton';
-import {setShowPreview} from '../../../store/reducers/schema';
+import {setShowPreview} from '../../../store/reducers/schema/schema';
 
 import './Preview.scss';
 

package/dist/containers/Tenant/{QueryEditor/QueryResult/QueryResult.js → Query/ExecuteResult/ExecuteResult.js}

@@ -20,9 +20,9 @@ import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpe
 import ResultIssues from '../Issues/Issues';
 import {QueryDuration} from '../QueryDuration/QueryDuration';
 
-import './QueryResult.scss';
+import './ExecuteResult.scss';
 
-const b = cn('kv-query-result');
+const b = cn('ydb-query-execute-result');
 
 const resultOptionsIds = {
     result: 'result',
@@ -34,7 +34,7 @@ const resultOptions = [
     {value: resultOptionsIds.stats, content: 'Stats'},
 ];
 
-function QueryResult(props) {
+export function ExecuteResult(props) {
     const [activeSection, setActiveSection] = useState(resultOptionsIds.result);
     const isFullscreen = useSelector((state) => state.fullscreen);
     const dispatch = useDispatch();
@@ -162,5 +162,3 @@ function QueryResult(props) {
         </React.Fragment>
     );
 }
-
-export default QueryResult;

package/dist/containers/Tenant/{QueryEditor/QueryResult/QueryResult.scss → Query/ExecuteResult/ExecuteResult.scss}

@@ -1,6 +1,6 @@
 @import '../../../../styles/mixins.scss';
 
-.kv-query-result {
+.ydb-query-execute-result {
     &__result {
         display: flex;
         overflow: auto;

package/dist/containers/Tenant/{QueryEditor/QueryExplain/QueryExplain.js → Query/ExplainResult/ExplainResult.js}

@@ -21,9 +21,9 @@ import {LANGUAGE_S_EXPRESSION_ID} from '../../../../utils/monaco';
 
 import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';
 
-import './QueryExplain.scss';
+import './ExplainResult.scss';
 
-const b = cn('kv-query-explain');
+const b = cn('ydb-query-explain-result');
 
 const EDITOR_OPTIONS = {
     automaticLayout: true,
@@ -90,7 +90,7 @@ function GraphRoot(props) {
     return <div id="graphRoot" style={{height: '100vh'}} />;
 }
 
-function QueryExplain(props) {
+export function ExplainResult(props) {
     const dispatch = useDispatch();
     const [activeOption, setActiveOption] = useState(ExplainOptionIds.schema);
 
@@ -287,5 +287,3 @@ function QueryExplain(props) {
         </React.Fragment>
     );
 }
-
-export default QueryExplain;

package/dist/containers/Tenant/{QueryEditor/QueryExplain/QueryExplain.scss → Query/ExplainResult/ExplainResult.scss}

@@ -1,6 +1,6 @@
 @import '../../../../styles/mixins.scss';
 
-.kv-query-explain {
+.ydb-query-explain-result {
     &__result {
         display: flex;
         overflow: auto;

package/dist/containers/Tenant/Query/QueriesHistory/QueriesHistory.scss

@@ -0,0 +1,20 @@
+@import '../../../../styles/mixins.scss';
+
+.ydb-queries-history {
+    overflow: auto;
+
+    height: 100%;
+    padding: 0 16px;
+
+    @include flex-container();
+    @include table-styles;
+
+    &__query {
+        overflow: hidden;
+        flex-grow: 1;
+
+        cursor: pointer;
+        white-space: pre;
+        text-overflow: ellipsis;
+    }
+}

package/dist/containers/Tenant/Query/QueriesHistory/QueriesHistory.tsx

@@ -0,0 +1,60 @@
+import {useDispatch} from 'react-redux';
+import block from 'bem-cn-lite';
+
+import DataTable, {Column} from '@gravity-ui/react-data-table';
+
+import TruncatedQuery from '../../../../components/TruncatedQuery/TruncatedQuery';
+import {setQueryTab} from '../../../../store/reducers/tenant/tenant';
+import {TENANT_QUERY_TABS_ID} from '../../../../store/reducers/tenant/constants';
+import {useTypedSelector} from '../../../../utils/hooks';
+import {MAX_QUERY_HEIGHT, QUERY_TABLE_SETTINGS} from '../../utils/constants';
+
+import i18n from '../i18n';
+
+import './QueriesHistory.scss';
+
+const b = block('ydb-queries-history');
+
+interface QueriesHistoryProps {
+    changeUserInput: (value: {input: string}) => void;
+}
+
+function QueriesHistory({changeUserInput}: QueriesHistoryProps) {
+    const dispatch = useDispatch();
+
+    const queriesHistory = useTypedSelector((state) => state.executeQuery.history.queries) ?? [];
+    const reversedHistory = [...queriesHistory].reverse();
+
+    const onQueryClick = (queryText: string) => {
+        changeUserInput({input: queryText});
+        dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
+    };
+
+    const columns: Column<string>[] = [
+        {
+            name: 'queryText',
+            header: 'Query Text',
+            render: ({row: query}) => (
+                <div className={b('query')}>
+                    <TruncatedQuery value={query} maxQueryHeight={MAX_QUERY_HEIGHT} />
+                </div>
+            ),
+            sortable: false,
+        },
+    ];
+
+    return (
+        <div className={b()}>
+            <DataTable
+                theme="yandex-cloud"
+                columns={columns}
+                data={reversedHistory}
+                settings={QUERY_TABLE_SETTINGS}
+                emptyDataMessage={i18n('history.empty')}
+                onRowClick={(row) => onQueryClick(row)}
+            />
+        </div>
+    );
+}
+
+export default QueriesHistory;

package/dist/containers/Tenant/Query/Query.scss

@@ -0,0 +1,16 @@
+@import '../../../styles/mixins.scss';
+
+.ydb-query {
+    max-height: 100%;
+    @include flex-container();
+
+    &__tabs {
+        padding: 13px 20px 16px;
+    }
+
+    &__content {
+        overflow: hidden;
+
+        height: 100%;
+    }
+}

package/dist/containers/Tenant/Query/Query.tsx

@@ -0,0 +1,73 @@
+import {useDispatch} from 'react-redux';
+import block from 'bem-cn-lite';
+
+import type {EPathType} from '../../../types/api/schema';
+import type {SavedQuery} from '../../../types/store/query';
+import {changeUserInput} from '../../../store/reducers/executeQuery';
+import {TENANT_QUERY_TABS_ID} from '../../../store/reducers/tenant/constants';
+import {useSetting, useTypedSelector} from '../../../utils/hooks';
+import {SAVED_QUERIES_KEY} from '../../../utils/constants';
+
+import {QueryTabs} from './QueryTabs/QueryTabs';
+import {SavedQueries} from './SavedQueries/SavedQueries';
+import QueriesHistory from './QueriesHistory/QueriesHistory';
+import QueryEditor from './QueryEditor/QueryEditor';
+
+import './Query.scss';
+
+const b = block('ydb-query');
+
+interface QueryProps {
+    theme: string;
+    path?: string;
+    type?: EPathType;
+}
+
+export const Query = (props: QueryProps) => {
+    const dispatch = useDispatch();
+
+    const {queryTab = TENANT_QUERY_TABS_ID.newQuery} = useTypedSelector((state) => state.tenant);
+
+    const [savedQueries, setSavedQueries] = useSetting<SavedQuery[]>(SAVED_QUERIES_KEY, []);
+
+    const handleDeleteQuery = (queryName: string) => {
+        const newSavedQueries = savedQueries.filter(
+            (el) => el.name.toLowerCase() !== queryName.toLowerCase(),
+        );
+        setSavedQueries(newSavedQueries);
+    };
+
+    const handleUserInputChange = (value: {input: string}) => {
+        dispatch(changeUserInput(value));
+    };
+
+    const renderContent = () => {
+        switch (queryTab) {
+            case TENANT_QUERY_TABS_ID.newQuery: {
+                return <QueryEditor changeUserInput={handleUserInputChange} {...props} />;
+            }
+            case TENANT_QUERY_TABS_ID.history: {
+                return <QueriesHistory changeUserInput={handleUserInputChange} />;
+            }
+            case TENANT_QUERY_TABS_ID.saved: {
+                return (
+                    <SavedQueries
+                        changeUserInput={handleUserInputChange}
+                        savedQueries={savedQueries}
+                        onDeleteQuery={handleDeleteQuery}
+                    />
+                );
+            }
+            default: {
+                return null;
+            }
+        }
+    };
+
+    return (
+        <div className={b()}>
+            <QueryTabs className={b('tabs')} activeTab={queryTab} />
+            <div className={b('content')}>{renderContent()}</div>
+        </div>
+    );
+};