ydb-embedded-ui 3.1.0 → 3.2.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [3.2.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.1.0...v3.2.0) (2023-01-09)
+
+
+### Features
+
+* **Nodes:** display rack in table ([3b8cdd5](https://github.com/ydb-platform/ydb-embedded-ui/commit/3b8cdd5b472f98132b2faaa9b71b8911750545a6))
+* **StorageNodes:** display datacenter in table ([4507bfd](https://github.com/ydb-platform/ydb-embedded-ui/commit/4507bfde839b0aafa3722828b7528885c6ac8f84))
+* **TopQueries:** date range filter ([b9a8e95](https://github.com/ydb-platform/ydb-embedded-ui/commit/b9a8e9504fa68556a724b214ee91b73ec900d37e))
+* **TopQueries:** filter by query text ([2c8ea97](https://github.com/ydb-platform/ydb-embedded-ui/commit/2c8ea97dd215ea59165cf05315bc5809cf7fafd7))
+
+
+### Bug Fixes
+
+* **InfoViewer:** min width for values ([64a4fd4](https://github.com/ydb-platform/ydb-embedded-ui/commit/64a4fd4de16738a9e2fac9cb4fba94eafc938762))
+* **Nodes:** open external link in new tab ([b7c3ddd](https://github.com/ydb-platform/ydb-embedded-ui/commit/b7c3ddd1e611f2b61466e3eda51f3341f8407588))
+* **TopQueries:** proper table dynamic render type ([9add6ca](https://github.com/ydb-platform/ydb-embedded-ui/commit/9add6ca9fbfe0475caf1586070a800210320cee6))
+* **TopShards:** rename to overloaded shards ([d9978bd](https://github.com/ydb-platform/ydb-embedded-ui/commit/d9978bdd84b9a883e4eefcac7f85f856da55d770))
+* **UserSettings:** treat invertedDisks settings as string ([ad7742a](https://github.com/ydb-platform/ydb-embedded-ui/commit/ad7742a6bf0be59c2b9cbbf947aaa66f79d748be))
+
 ## [3.1.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.0.1...v3.1.0) (2022-12-13)
 
 

package/README.md

@@ -15,6 +15,8 @@ Local viewer for YDB clusters
 3) Open [http://localhost:3000](http://localhost:3000) to view it in the browser. The page will reload if you make edits.\
    You will also see any lint errors in the console.
 
+For API reference, open Swagger UI on http://localhost:8765/viewer/api/.
+
 ### Making a production bundle.
 
 Base command `npm run build` builds the app for production to the `build` folder.\

package/dist/components/DateRange/DateRange.scss

@@ -0,0 +1,11 @@
+.date-range {
+    &__input {
+        min-width: 190px;
+        padding: 5px 8px;
+
+        color: var(--yc-color-text-primary);
+        border: 1px solid var(--yc-color-line-generic);
+        border-radius: var(--yc-border-radius-m);
+        background: transparent;
+    }
+}

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

@@ -1,9 +1,9 @@
-import cn from 'bem-cn-lite';
 import {ChangeEventHandler} from 'react';
+import cn from 'bem-cn-lite';
 
 import './DateRange.scss';
 
-const b = cn('top-shards');
+const b = cn('date-range');
 
 export interface DateRangeValues {
     /** ms from epoch */
@@ -54,21 +54,21 @@ export const DateRange = ({from, to, className, onChange}: DateRangeProps) => {
     const endISO = toTimezonelessISOString(to);
 
     return (
-        <div className={b('date-range', className)}>
+        <div className={b(null, className)}>
             <input
                 type="datetime-local"
-                value={startISO}
+                value={startISO || ''}
                 max={endISO}
                 onChange={handleFromChange}
-                className={b('date-range-input')}
+                className={b('input')}
             />
             —
             <input
                 type="datetime-local"
                 min={startISO}
-                value={endISO}
+                value={endISO || ''}
                 onChange={handleToChange}
-                className={b('date-range-input')}
+                className={b('input')}
             />
         </div>
     );

package/dist/components/Illustration/Illustration.tsx

@@ -1,8 +1,8 @@
-import {useEffect, useState} from 'react';
+import {ImgHTMLAttributes, useEffect, useState} from 'react';
 import cn from 'bem-cn-lite';
 import {useThemeValue} from '@gravity-ui/uikit';
 
-export interface IllustrationProps {
+export interface IllustrationProps extends ImgHTMLAttributes<HTMLImageElement> {
     name: string;
     className?: string;
 }
@@ -38,12 +38,5 @@ export const Illustration = ({name, className, ...props}: IllustrationProps) =>
         }
     }, [srcGetter]);
 
-    return (
-        <img
-            alt={name}
-            src={src}
-            className={b(null, className)}
-            {...props}
-        />
-    );
-}
+    return <img alt={name} src={src} className={b(null, className)} {...props} />;
+};

package/dist/components/InfoViewer/InfoViewer.scss

@@ -54,6 +54,8 @@
     &__value {
         display: flex;
 
+        min-width: 120px;
+
         word-break: break-all;
     }
 

package/dist/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.tsx

@@ -27,7 +27,7 @@ function DiskStateProgressBar({
     diskAllocatedPercent = -1,
     severity,
 }: DiskStateProgressBarProps) {
-    const inverted = useSelector((state) => getSettingValue(state, INVERTED_DISKS_KEY));
+    const inverted = useSelector((state) => JSON.parse(getSettingValue(state, INVERTED_DISKS_KEY)));
 
     const renderAllocatedPercent = () => {
         return (

package/dist/containers/Storage/StorageNodes/StorageNodes.tsx

@@ -16,6 +16,8 @@ import './StorageNodes.scss';
 enum TableColumnsIds {
     NodeId = 'NodeId',
     FQDN = 'FQDN',
+    DataCenter = 'DataCenter',
+    Rack = 'Rack',
     uptime = 'uptime',
     PDisks = 'PDisks',
     Missing = 'Missing',
@@ -36,6 +38,8 @@ interface StorageNodesProps {
 const tableColumnsNames: Record<TableColumnsIdsValues, string> = {
     NodeId: 'Node ID',
     FQDN: 'FQDN',
+    DataCenter: 'DC',
+    Rack: 'Rack',
     uptime: 'Uptime',
     PDisks: 'PDisks',
     Missing: 'Missing',
@@ -96,6 +100,18 @@ function StorageNodes({
             },
             align: DataTable.LEFT,
         },
+        {
+            name: TableColumnsIds.DataCenter,
+            header: tableColumnsNames[TableColumnsIds.DataCenter],
+            render: ({row}) => row.DataCenter || '—',
+            align: DataTable.LEFT,
+        },
+        {
+            name: TableColumnsIds.Rack,
+            header: tableColumnsNames[TableColumnsIds.Rack],
+            render: ({row}) => row.Rack || '—',
+            align: DataTable.LEFT,
+        },
         {
             name: TableColumnsIds.uptime,
             header: tableColumnsNames[TableColumnsIds.uptime],

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
@@ -130,8 +129,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 (

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/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/UserSettings/UserSettings.tsx

@@ -67,7 +67,7 @@ const mapStateToProps = (state: any) => {
 
     return {
         theme,
-        invertedDisks,
+        invertedDisks: JSON.parse(invertedDisks),
     };
 };
 

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;
     };
 }