ydb-embedded-ui 3.1.0 → 3.2.1

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

@@ -9,11 +9,10 @@ import {Switch, Tabs} from '@gravity-ui/uikit';
 
 import {Loader} from '../../../components/Loader';
 
-//@ts-ignore
-import TopQueries from './TopQueries/TopQueries';
+import {TopQueries} from './TopQueries';
 //@ts-ignore
 import DetailedOverview from './DetailedOverview/DetailedOverview';
-import {TopShards} from './TopShards';
+import {OverloadedShards} from './OverloadedShards';
 //@ts-ignore
 import Storage from '../../Storage/Storage';
 //@ts-ignore
@@ -23,11 +22,11 @@ import Describe from './Describe/Describe';
 //@ts-ignore
 import HotKeys from './HotKeys/HotKeys';
 //@ts-ignore
-import Heatmap from '../../Heatmap/Heatmap';
+import {Heatmap} from '../../Heatmap';
 //@ts-ignore
 import Compute from './Compute/Compute';
 //@ts-ignore
-import Tablets from '../../Tablets/Tablets';
+import {Tablets} from '../../Tablets';
 import {Consumers} from './Consumers';
 
 import routes, {createHref} from '../../../routes';
@@ -51,11 +50,7 @@ const b = cn('kv-tenant-diagnostics');
 
 function Diagnostics(props: DiagnosticsProps) {
     const dispatch = useDispatch();
-    const {
-        currentSchemaPath,
-        currentSchema: currentItem = {},
-        autorefresh,
-    } = useSelector((state: any) => state.schema);
+    const {currentSchemaPath, autorefresh} = useSelector((state: any) => state.schema);
     const {diagnosticsTab = GeneralPagesIds.overview, wasLoaded} = useSelector(
         (state: any) => state.tenant,
     );
@@ -130,8 +125,8 @@ function Diagnostics(props: DiagnosticsProps) {
                     />
                 );
             }
-            case GeneralPagesIds.topShards: {
-                return <TopShards tenantPath={tenantNameString} type={type} />;
+            case GeneralPagesIds.overloadedShards: {
+                return <OverloadedShards tenantPath={tenantNameString} type={type} />;
             }
             case GeneralPagesIds.nodes: {
                 return (
@@ -157,7 +152,7 @@ function Diagnostics(props: DiagnosticsProps) {
                 return <HotKeys type={type} />;
             }
             case GeneralPagesIds.graph: {
-                return <Heatmap path={currentItem.Path} />;
+                return <Heatmap path={currentSchemaPath} />;
             }
             case GeneralPagesIds.consumers: {
                 return <Consumers path={currentSchemaPath} type={type} />;

package/dist/containers/Tenant/Diagnostics/DiagnosticsPages.ts

@@ -3,7 +3,7 @@ import {EPathType} from '../../../types/api/schema';
 export enum GeneralPagesIds {
     'overview' = 'Overview',
     'topQueries' = 'topQueries',
-    'topShards' = 'topShards',
+    'overloadedShards' = 'overloadedShards',
     'nodes' = 'Nodes',
     'tablets' = 'Tablets',
     'storage' = 'Storage',
@@ -29,9 +29,9 @@ const topQueries = {
     title: 'Top queries',
 };
 
-const topShards = {
-    id: GeneralPagesIds.topShards,
-    title: 'Top shards',
+const overloadedShards = {
+    id: GeneralPagesIds.overloadedShards,
+    title: 'Overloaded shards',
 };
 
 const nodes = {
@@ -75,7 +75,7 @@ const consumers = {
 export const DATABASE_PAGES = [
     overview,
     topQueries,
-    topShards,
+    overloadedShards,
     nodes,
     tablets,
     storage,
@@ -83,9 +83,9 @@ export const DATABASE_PAGES = [
     describe,
 ];
 
-export const TABLE_PAGES = [overview, topShards, graph, tablets, hotKeys, describe];
+export const TABLE_PAGES = [overview, overloadedShards, graph, tablets, hotKeys, describe];
 
-export const DIR_PAGES = [overview, topShards, describe];
+export const DIR_PAGES = [overview, overloadedShards, describe];
 
 export const CDC_STREAM_PAGES = [overview, consumers, describe];
 export const TOPIC_PAGES = [overview, consumers, describe];

package/dist/containers/Tenant/Diagnostics/{TopShards/TopShards.scss → OverloadedShards/OverloadedShards.scss}

@@ -1,4 +1,4 @@
-.top-shards {
+.overloaded-shards {
     display: flex;
     flex-direction: column;
 

package/dist/containers/Tenant/Diagnostics/{TopShards/TopShards.tsx → OverloadedShards/OverloadedShards.tsx}

@@ -5,6 +5,7 @@ import cn from 'bem-cn-lite';
 import DataTable, {Column, Settings, SortOrder} from '@yandex-cloud/react-data-table';
 import {Loader} from '@gravity-ui/uikit';
 
+import {DateRange, DateRangeValues} from '../../../../components/DateRange';
 import InternalLink from '../../../../components/InternalLink/InternalLink';
 
 import HistoryContext from '../../../../contexts/HistoryContext';
@@ -13,8 +14,8 @@ import routes, {createHref} from '../../../../routes';
 
 import {
     sendShardQuery,
-    setShardQueryOptions,
-    setTopShardFilters,
+    setShardsState,
+    setShardsQueryFilters,
 } from '../../../../store/reducers/shardsWorkload';
 import {setCurrentSchemaPath, getSchema} from '../../../../store/reducers/schema';
 import type {IShardsWorkloadFilters} from '../../../../types/store/shardsWorkload';
@@ -30,12 +31,10 @@ import {getDefaultNodePath} from '../../../Node/NodePages';
 
 import {isColumnEntityType} from '../../utils/schema';
 
-import {DateRange, DateRangeValues} from './DateRange';
-
 import i18n from './i18n';
-import './TopShards.scss';
+import './OverloadedShards.scss';
 
-const b = cn('top-shards');
+const b = cn('overloaded-shards');
 const bLink = cn('yc-link');
 
 const TABLE_SETTINGS: Settings = {
@@ -83,12 +82,12 @@ function dataTableToStringSortOrder(value: SortOrder | SortOrder[] = []) {
     return sortOrders.map(({columnId}) => columnId).join(',');
 }
 
-interface TopShardsProps {
+interface OverloadedShardsProps {
     tenantPath: string;
     type?: EPathType;
 }
 
-export const TopShards = ({tenantPath, type}: TopShardsProps) => {
+export const OverloadedShards = ({tenantPath, type}: OverloadedShardsProps) => {
     const dispatch = useDispatch();
 
     const {autorefresh, currentSchemaPath} = useTypedSelector((state) => state.schema);
@@ -134,7 +133,7 @@ export const TopShards = ({tenantPath, type}: TopShardsProps) => {
     // don't show loader for requests triggered by table sort, only for path change
     useEffect(() => {
         dispatch(
-            setShardQueryOptions({
+            setShardsState({
                 wasLoaded: false,
                 data: undefined,
             }),
@@ -144,14 +143,14 @@ export const TopShards = ({tenantPath, type}: TopShardsProps) => {
     const history = useContext(HistoryContext);
 
     const onSort = (newSortOrder?: SortOrder | SortOrder[]) => {
-        // omit information about sort order to disable ASC order, only DESC makes sense for top shards
+        // omit information about sort order to disable ASC order, only DESC makes sense for overloaded shards
         // use a string (and not the DataTable default format) to prevent reference change,
         // which would cause an excess state change, to avoid repeating requests
         setSortOrder(dataTableToStringSortOrder(newSortOrder));
     };
 
     const handleDateRangeChange = (value: DateRangeValues) => {
-        dispatch(setTopShardFilters(value));
+        dispatch(setShardsQueryFilters(value));
         setFilters(value);
     };
 

package/dist/containers/Tenant/Diagnostics/OverloadedShards/i18n/index.ts

@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-diagnostics-overloaded-shards';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

package/dist/containers/Tenant/Diagnostics/OverloadedShards/index.ts

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

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

@@ -171,18 +171,18 @@ class TenantOverview extends React.Component {
                         ))}
                 </div>
                 <div className={b('common-info')}>
-                    {PoolStats ? (
-                        <div>
-                            <div className={b('section-title')}>Pools</div>
+                    <div>
+                        <div className={b('section-title')}>Pools</div>
+                        {PoolStats ? (
                             <div className={b('section', {pools: true})}>
                                 {PoolStats.map((pool, poolIndex) => (
                                     <PoolUsage key={poolIndex} data={pool} />
                                 ))}
                             </div>
-                        </div>
-                    ) : (
-                        <div className="error">no pools data</div>
-                    )}
+                        ) : (
+                            <div className="error">no pools data</div>
+                        )}
+                    </div>
                     <InfoViewer
                         title="Metrics"
                         className={b('section', {metrics: true})}

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

@@ -1,43 +1,40 @@
 @import '../../../../styles/mixins.scss';
 
 .kv-top-queries {
+    display: flex;
+    flex-direction: column;
+
     height: 100%;
 
     @include query-data-table;
-    &__message-container {
-        padding: 15px 0;
-    }
 
     &__loader {
         display: flex;
         justify-content: center;
     }
 
-    &__owner-container {
-        margin: 10px;
+    &__controls {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 16px;
 
-        .yc-staff-card {
-            display: inline-block;
-        }
+        margin-bottom: 10px;
     }
 
-    &__text {
-        font-size: var(--yc-text-body-1-font-size);
-        line-height: var(--yc-text-body-1-line-height);
-
-        color: var(--yc-color-text-primary);
-
-        &::first-letter {
-            color: var(--yc-color-text-danger);
-        }
+    &__search {
+        @include search();
     }
 
-    &__result &__table-content {
-        & .data-table {
+    &__result {
+        overflow: auto;
+        flex-grow: 1;
+
+        .data-table {
             &,
             &__table {
                 width: 100%;
             }
+
             &__td {
                 vertical-align: top;
                 white-space: pre;

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

@@ -0,0 +1,202 @@
+import {useCallback, useEffect, useRef, useState} from 'react';
+import {useDispatch} from 'react-redux';
+import cn from 'bem-cn-lite';
+
+import DataTable, {Column, Settings} from '@yandex-cloud/react-data-table';
+import {Loader} from '@gravity-ui/uikit';
+
+import {DateRange, DateRangeValues} from '../../../../components/DateRange';
+import {Search} from '../../../../components/Search';
+import TruncatedQuery from '../../../../components/TruncatedQuery/TruncatedQuery';
+
+import {changeUserInput} from '../../../../store/reducers/executeQuery';
+import {
+    fetchTopQueries,
+    setTopQueriesFilters,
+    setTopQueriesState,
+} from '../../../../store/reducers/executeTopQueries';
+
+import type {KeyValueRow} from '../../../../types/api/query';
+import type {EPathType} from '../../../../types/api/schema';
+import type {ITopQueriesFilters} from '../../../../types/store/executeTopQueries';
+import type {IQueryResult} from '../../../../types/store/query';
+
+import {DEFAULT_TABLE_SETTINGS, HOUR_IN_SECONDS} from '../../../../utils/constants';
+import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
+import {prepareQueryError} from '../../../../utils/query';
+
+import {isColumnEntityType} from '../../utils/schema';
+import {TenantGeneralTabsIds} 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',
+        width: 140,
+        sortAccessor: (row) => Number(row['CPUTimeUs']),
+    },
+    {
+        name: 'QueryText',
+        width: 500,
+        sortable: false,
+        render: ({value}) => <TruncatedQuery value={value} maxQueryHeight={MAX_QUERY_HEIGHT} />,
+    },
+];
+
+interface TopQueriesProps {
+    path: string;
+    changeSchemaTab: (tab: TenantGeneralTabsIds) => void;
+    type?: EPathType;
+}
+
+export const TopQueries = ({path, type, changeSchemaTab}: TopQueriesProps) => {
+    const dispatch = useDispatch();
+
+    const {autorefresh} = useTypedSelector((state) => state.schema);
+
+    const {
+        loading,
+        wasLoaded,
+        error,
+        data: {result: data = undefined} = {},
+        filters: storeFilters,
+    } = useTypedSelector((state) => state.executeTopQueries);
+
+    const preventFetch = useRef(false);
+
+    // some filters sync between redux state and URL
+    // component state is for default values,
+    // default values are determined from the query response, and should not propagate to URL
+    const [filters, setFilters] = useState<ITopQueriesFilters>(storeFilters);
+
+    useEffect(() => {
+        dispatch(setTopQueriesFilters(filters));
+    }, [dispatch, filters]);
+
+    const setDefaultFiltersFromResponse = (responseData?: IQueryResult) => {
+        const intervalEnd = responseData?.result?.[0]?.IntervalEnd;
+
+        if (intervalEnd) {
+            const to = new Date(intervalEnd).getTime();
+            const from = new Date(to - HOUR_IN_SECONDS * 1000).getTime();
+
+            setFilters((currentFilters) => {
+                // request without filters returns the latest interval with data
+                // only in this case should update filters in ui
+                // also don't update if user already interacted with controls
+                const shouldUpdateFilters = !currentFilters.from && !currentFilters.to;
+
+                if (!shouldUpdateFilters) {
+                    return currentFilters;
+                }
+
+                preventFetch.current = true;
+
+                return {...currentFilters, from, to};
+            });
+        }
+    };
+
+    useAutofetcher(
+        (isBackground) => {
+            if (preventFetch.current) {
+                preventFetch.current = false;
+                return;
+            }
+
+            if (!isBackground) {
+                dispatch(
+                    setTopQueriesState({
+                        wasLoaded: false,
+                        data: undefined,
+                    }),
+                );
+            }
+
+            // @ts-expect-error
+            // typed dispatch required, remove error expectation after adding it
+            dispatch(fetchTopQueries({database: path, filters})).then(
+                setDefaultFiltersFromResponse,
+            );
+        },
+        [dispatch, filters, path],
+        autorefresh,
+    );
+
+    const handleRowClick = useCallback(
+        (row) => {
+            const {QueryText: input} = row;
+
+            dispatch(changeUserInput({input}));
+            changeSchemaTab(TenantGeneralTabsIds.query);
+        },
+        [changeSchemaTab, dispatch],
+    );
+
+    const handleTextSearchUpdate = (text: string) => {
+        setFilters((currentFilters) => ({...currentFilters, text}));
+    };
+
+    const handleDateRangeChange = (value: DateRangeValues) => {
+        setFilters((currentFilters) => ({...currentFilters, ...value}));
+    };
+
+    const renderLoader = () => {
+        return (
+            <div className={b('loader')}>
+                <Loader size="m" />
+            </div>
+        );
+    };
+
+    const renderContent = () => {
+        if (loading && !wasLoaded) {
+            return renderLoader();
+        }
+
+        if (error && !error.isCancelled) {
+            return <div className="error">{prepareQueryError(error)}</div>;
+        }
+
+        if (!data || isColumnEntityType(type)) {
+            return i18n('no-data');
+        }
+
+        return (
+            <div className={b('result')}>
+                <DataTable
+                    columns={COLUMNS}
+                    data={data}
+                    settings={TABLE_SETTINGS}
+                    onRowClick={handleRowClick}
+                    theme="yandex-cloud"
+                />
+            </div>
+        );
+    };
+
+    return (
+        <div className={b()}>
+            <div className={b('controls')}>
+                <Search
+                    value={filters.text}
+                    onChange={handleTextSearchUpdate}
+                    placeholder={i18n('filter.text.placeholder')}
+                    className={b('search')}
+                />
+                <DateRange from={filters.from} to={filters.to} onChange={handleDateRangeChange} />
+            </div>
+            {renderContent()}
+        </div>
+    );
+};

package/dist/containers/Tenant/Diagnostics/TopQueries/i18n/en.json

@@ -0,0 +1,4 @@
+{
+  "no-data": "No data",
+  "filter.text.placeholder": "Search by query text..."
+}

package/dist/containers/Tenant/Diagnostics/{TopShards → TopQueries}/i18n/index.ts

@@ -3,7 +3,7 @@ import {i18n, Lang} from '../../../../../utils/i18n';
 import en from './en.json';
 import ru from './ru.json';
 
-const COMPONENT = 'ydb-diagnostics-top-shards';
+const COMPONENT = 'ydb-diagnostics-top-queries';
 
 i18n.registerKeyset(Lang.En, COMPONENT, en);
 i18n.registerKeyset(Lang.Ru, COMPONENT, ru);

package/dist/containers/Tenant/Diagnostics/TopQueries/i18n/ru.json

@@ -0,0 +1,4 @@
+{
+  "no-data": "Нет данных",
+  "filter.text.placeholder": "Искать по тексту запроса..."
+}

package/dist/containers/Tenant/Diagnostics/TopQueries/index.ts

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

package/dist/containers/Tenants/Tenants.js

@@ -9,7 +9,7 @@ import {Loader, TextInput, Button} from '@gravity-ui/uikit';
 
 import EntityStatus from '../../components/EntityStatus/EntityStatus';
 import PoolsGraph from '../../components/PoolsGraph/PoolsGraph';
-import TabletsStatistic from '../../components/TabletsStatistic/TabletsStatistic';
+import {TabletsStatistic} from '../../components/TabletsStatistic';
 import {ProblemFilter} from '../../components/ProblemFilter';
 import {Illustration} from '../../components/Illustration';
 import {AutoFetcher} from '../../utils/autofetcher';

package/dist/containers/UserSettings/UserSettings.tsx

@@ -1,12 +1,13 @@
 import {connect} from 'react-redux';
 
 import {RadioButton, Switch} from '@gravity-ui/uikit';
-import {Settings} from '../../components/AsideNavigation/Settings';
+import {Settings} from '@gravity-ui/navigation';
+
 import favoriteFilledIcon from '../../assets/icons/star.svg';
 import flaskIcon from '../../assets/icons/flask.svg';
-//@ts-ignore
+
 import {INVERTED_DISKS_KEY, THEME_KEY} from '../../utils/constants';
-//@ts-ignore
+
 import {setSettingValue} from '../../store/reducers/settings';
 
 enum Theme {
@@ -67,7 +68,7 @@ const mapStateToProps = (state: any) => {
 
     return {
         theme,
-        invertedDisks,
+        invertedDisks: JSON.parse(invertedDisks),
     };
 };
 

package/dist/routes.ts

@@ -28,7 +28,7 @@ export const CLUSTER_PAGES = {
 export function createHref(
     route: string,
     params?: object,
-    query: Record<string | number, string | number> = {},
+    query: Record<string | number, string | number | string[] | number[] | undefined> = {},
 ) {
     let extendedQuery = query;
 

package/dist/services/api.d.ts

@@ -48,6 +48,13 @@ interface Window {
         getTenantInfo: (params: {
             path: string;
         }) => Promise<import('../types/api/tenant').TTenantInfo>;
+        getTabletsInfo: (params: {
+            nodes?: string[];
+            path?: string;
+        }) => Promise<import('../types/api/tablet').TEvTabletStateResponse>;
+        getHeatmapData: (params: {
+            path: string;
+        }) => Promise<import('../types/api/schema').TEvDescribeSchemeResult>;
         [method: string]: Function;
     };
 }

package/dist/store/reducers/describe.ts

@@ -2,7 +2,6 @@ import {createSelector, Selector} from 'reselect';
 import {Reducer} from 'redux';
 
 import '../../services/api';
-import {IConsumer} from '../../types/api/consumers';
 import {
     IDescribeRootStateSlice,
     IDescribeState,
@@ -100,6 +99,10 @@ const selectConsumersNames = (state: IDescribeRootStateSlice, path?: string) =>
         ? state.describe.data[path]?.PathDescription?.PersQueueGroup?.PQTabletConfig?.ReadRules
         : undefined;
 
+interface IConsumer {
+    name: string;
+}
+
 export const selectConsumers: Selector<IDescribeRootStateSlice, IConsumer[], [string | undefined]> =
     createSelector(selectConsumersNames, (names = []) => names.map((name) => ({name})));