ydb-embedded-ui 3.3.3 → 3.3.4

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [3.3.4](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.3.3...v3.3.4) (2023-02-16)
+
+
+### Bug Fixes
+
+* **OverloadedShards:** rename to top shards ([ffa4f27](https://github.com/ydb-platform/ydb-embedded-ui/commit/ffa4f27f2cf0a5e12b2800c81bf61b1d3c25912c))
+* **StorageGroups:** display Erasure ([4a7ebc0](https://github.com/ydb-platform/ydb-embedded-ui/commit/4a7ebc08b87fe75af83df70a38ebd486d64d6d4e))
+* **TopShards:** switch between history and immediate data ([eeb9bb0](https://github.com/ydb-platform/ydb-embedded-ui/commit/eeb9bb0911b9e889b633558c9d3c13f986f72bfe))
+
 ## [3.3.3](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.3.2...v3.3.3) (2023-02-08)
 
 

package/dist/containers/Storage/StorageGroups/StorageGroups.tsx

@@ -28,6 +28,7 @@ import './StorageGroups.scss';
 enum TableColumnsIds {
     PoolName = 'PoolName',
     Type = 'Type',
+    ErasureSpecies = 'ErasureSpecies',
     GroupID = 'GroupID',
     Used = 'Used',
     Limit = 'Limit',
@@ -53,6 +54,7 @@ interface StorageGroupsProps {
 const tableColumnsNames: Record<TableColumnsIdsValues, string> = {
     PoolName: 'Pool Name',
     Type: 'Type',
+    ErasureSpecies: 'Erasure',
     GroupID: 'Group ID',
     Used: 'Used',
     Limit: 'Limit',
@@ -146,6 +148,12 @@ function StorageGroups({
                 </>
             ),
         },
+        {
+            name: TableColumnsIds.ErasureSpecies,
+            header: tableColumnsNames[TableColumnsIds.ErasureSpecies],
+            render: ({row}) => (row.ErasureSpecies ? row.ErasureSpecies : '-'),
+            align: DataTable.LEFT,
+        },
         {
             name: TableColumnsIds.Missing,
             header: tableColumnsNames[TableColumnsIds.Missing],

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

@@ -12,7 +12,7 @@ import {Loader} from '../../../components/Loader';
 import {TopQueries} from './TopQueries';
 //@ts-ignore
 import DetailedOverview from './DetailedOverview/DetailedOverview';
-import {OverloadedShards} from './OverloadedShards';
+import {TopShards} from './TopShards';
 //@ts-ignore
 import Storage from '../../Storage/Storage';
 //@ts-ignore
@@ -124,8 +124,8 @@ function Diagnostics(props: DiagnosticsProps) {
                     />
                 );
             }
-            case GeneralPagesIds.overloadedShards: {
-                return <OverloadedShards tenantPath={tenantNameString} type={type} />;
+            case GeneralPagesIds.topShards: {
+                return <TopShards 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',
-    'overloadedShards' = 'overloadedShards',
+    'topShards' = 'topShards',
     'nodes' = 'Nodes',
     'tablets' = 'Tablets',
     'storage' = 'Storage',
@@ -29,9 +29,9 @@ const topQueries = {
     title: 'Top queries',
 };
 
-const overloadedShards = {
-    id: GeneralPagesIds.overloadedShards,
-    title: 'Overloaded shards',
+const topShards = {
+    id: GeneralPagesIds.topShards,
+    title: 'Top shards',
 };
 
 const nodes = {
@@ -75,7 +75,7 @@ const consumers = {
 export const DATABASE_PAGES = [
     overview,
     topQueries,
-    overloadedShards,
+    topShards,
     nodes,
     tablets,
     storage,
@@ -83,9 +83,9 @@ export const DATABASE_PAGES = [
     describe,
 ];
 
-export const TABLE_PAGES = [overview, overloadedShards, graph, tablets, hotKeys, describe];
+export const TABLE_PAGES = [overview, topShards, graph, tablets, hotKeys, describe];
 
-export const DIR_PAGES = [overview, overloadedShards, describe];
+export const DIR_PAGES = [overview, topShards, describe];
 
 export const CDC_STREAM_PAGES = [overview, consumers, describe];
 export const TOPIC_PAGES = [overview, consumers, describe];

package/dist/containers/Tenant/Diagnostics/TopShards/Filters/Filters.scss

@@ -0,0 +1,8 @@
+.top-shards {
+    &__filters {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: baseline;
+        gap: 16px;
+    }
+}

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

@@ -0,0 +1,56 @@
+import {RadioButton} from '@gravity-ui/uikit';
+
+import {DateRange, DateRangeValues} from '../../../../../components/DateRange';
+
+import {
+    EShardsWorkloadMode,
+    IShardsWorkloadFilters,
+} from '../../../../../types/store/shardsWorkload';
+
+import {isEnumMember} from '../../../../../utils/typecheckers';
+
+import i18n from '../i18n';
+import {b} from '../TopShards';
+
+import './Filters.scss';
+
+interface FiltersProps {
+    value: IShardsWorkloadFilters;
+    onChange: (value: Partial<IShardsWorkloadFilters>) => void;
+    className?: string;
+}
+
+export const Filters = ({value, onChange, className}: FiltersProps) => {
+    const handleModeChange = (mode: string) => {
+        if (!isEnumMember(EShardsWorkloadMode, mode)) {
+            const values = Object.values(EShardsWorkloadMode).join(', ');
+            throw new Error(`Unexpected TopShards mode "${mode}". Should be one of: ${values}`);
+        }
+
+        onChange({mode});
+    };
+
+    const handleDateRangeChange = (dateRange: DateRangeValues) => {
+        onChange({
+            mode: EShardsWorkloadMode.History,
+            ...dateRange,
+        });
+    };
+
+    const from = value.mode === EShardsWorkloadMode.Immediate ? undefined : value.from;
+    const to = value.mode === EShardsWorkloadMode.Immediate ? undefined : value.to;
+
+    return (
+        <div className={b('filters', className)}>
+            <RadioButton value={value.mode} onUpdate={handleModeChange}>
+                <RadioButton.Option value={EShardsWorkloadMode.Immediate}>
+                    {i18n('filters.mode.immediate')}
+                </RadioButton.Option>
+                <RadioButton.Option value={EShardsWorkloadMode.History}>
+                    {i18n('filters.mode.history')}
+                </RadioButton.Option>
+            </RadioButton>
+            <DateRange from={from} to={to} onChange={handleDateRangeChange} />
+        </div>
+    );
+};

package/dist/containers/Tenant/Diagnostics/TopShards/Filters/index.ts

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

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

@@ -1,6 +1,7 @@
-.overloaded-shards {
+.top-shards {
     display: flex;
     flex-direction: column;
+    gap: 10px;
 
     height: 100%;
 
@@ -11,15 +12,6 @@
         justify-content: center;
     }
 
-    &__controls {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: baseline;
-        gap: 16px;
-
-        margin-bottom: 10px;
-    }
-
     &__table {
         overflow: auto;
         flex-grow: 1;

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

@@ -5,7 +5,6 @@ import cn from 'bem-cn-lite';
 import DataTable, {Column, Settings, SortOrder} from '@gravity-ui/react-data-table';
 import {Loader} from '@gravity-ui/uikit';
 
-import {DateRange, DateRangeValues} from '../../../../components/DateRange';
 import {InternalLink} from '../../../../components/InternalLink';
 
 import HistoryContext from '../../../../contexts/HistoryContext';
@@ -18,7 +17,7 @@ import {
     setShardsQueryFilters,
 } from '../../../../store/reducers/shardsWorkload';
 import {setCurrentSchemaPath, getSchema} from '../../../../store/reducers/schema';
-import type {IShardsWorkloadFilters} from '../../../../types/store/shardsWorkload';
+import {EShardsWorkloadMode, IShardsWorkloadFilters} from '../../../../types/store/shardsWorkload';
 
 import type {EPathType} from '../../../../types/api/schema';
 
@@ -31,10 +30,12 @@ import {getDefaultNodePath} from '../../../Node/NodePages';
 
 import {isColumnEntityType} from '../../utils/schema';
 
+import {Filters} from './Filters';
+
 import i18n from './i18n';
-import './OverloadedShards.scss';
+import './TopShards.scss';
 
-const b = cn('overloaded-shards');
+export const b = cn('top-shards');
 const bLink = cn('yc-link');
 
 const TABLE_SETTINGS: Settings = {
@@ -83,12 +84,18 @@ function dataTableToStringSortOrder(value: SortOrder | SortOrder[] = []) {
     return sortOrders.map(({columnId}) => columnId).join(',');
 }
 
-interface OverloadedShardsProps {
+function fillDateRangeFor(value: IShardsWorkloadFilters) {
+    value.to = Date.now();
+    value.from = value.to - HOUR_IN_SECONDS * 1000;
+    return value;
+}
+
+interface TopShardsProps {
     tenantPath: string;
     type?: EPathType;
 }
 
-export const OverloadedShards = ({tenantPath, type}: OverloadedShardsProps) => {
+export const TopShards = ({tenantPath, type}: TopShardsProps) => {
     const dispatch = useDispatch();
 
     const {autorefresh, currentSchemaPath} = useTypedSelector((state) => state.schema);
@@ -101,17 +108,20 @@ export const OverloadedShards = ({tenantPath, type}: OverloadedShardsProps) => {
         wasLoaded,
     } = useTypedSelector((state) => state.shardsWorkload);
 
-    // default date range should be the last hour, but shouldn't propagate into URL until user interacts with the control
+    // default filters shouldn't propagate into URL until user interacts with the control
     // redux initial value can't be used, as it synchronizes with URL
     const [filters, setFilters] = useState<IShardsWorkloadFilters>(() => {
-        if (!storeFilters?.from && !storeFilters?.to) {
-            return {
-                from: Date.now() - HOUR_IN_SECONDS * 1000,
-                to: Date.now(),
-            };
+        const defaultValue = {...storeFilters};
+
+        if (!defaultValue.mode) {
+            defaultValue.mode = EShardsWorkloadMode.Immediate;
+        }
+
+        if (!defaultValue.from && !defaultValue.to) {
+            fillDateRangeFor(defaultValue);
         }
 
-        return storeFilters;
+        return defaultValue;
     });
 
     const [sortOrder, setSortOrder] = useState(tableColumnsNames.CPUCores);
@@ -144,18 +154,34 @@ export const OverloadedShards = ({tenantPath, type}: OverloadedShardsProps) => {
     const history = useContext(HistoryContext);
 
     const onSort = (newSortOrder?: SortOrder | SortOrder[]) => {
-        // omit information about sort order to disable ASC order, only DESC makes sense for overloaded shards
+        // omit information about sort order to disable ASC order, only DESC makes sense for top 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) => {
+    const handleFiltersChange = (value: Partial<IShardsWorkloadFilters>) => {
+        const newStateValue = {...value};
+        const isDateRangePristine =
+            !storeFilters.from && !storeFilters.to && !value.from && !value.to;
+
+        if (isDateRangePristine) {
+            switch (value.mode) {
+                case EShardsWorkloadMode.Immediate:
+                    newStateValue.from = newStateValue.to = undefined;
+                    break;
+                case EShardsWorkloadMode.History:
+                    // should default to the current datetime every time history mode activates
+                    fillDateRangeFor(newStateValue);
+                    break;
+            }
+        }
+
         dispatch(setShardsQueryFilters(value));
-        setFilters(value);
+        setFilters((state) => ({...state, ...newStateValue}));
     };
 
-    const tableColumns: Column<any>[] = useMemo(() => {
+    const tableColumns = useMemo(() => {
         const onSchemaClick = (schemaPath: string) => {
             return () => {
                 dispatch(setCurrentSchemaPath(schemaPath));
@@ -164,7 +190,7 @@ export const OverloadedShards = ({tenantPath, type}: OverloadedShardsProps) => {
             };
         };
 
-        return [
+        const columns: Column<any>[] = [
             {
                 name: tableColumnsNames.Path,
                 render: ({value: relativeNodePath}) => {
@@ -217,23 +243,29 @@ export const OverloadedShards = ({tenantPath, type}: OverloadedShardsProps) => {
                 align: DataTable.RIGHT,
                 sortable: false,
             },
-            {
-                name: tableColumnsNames.PeakTime,
-                render: ({value}) => formatDateTime(new Date(value as string).valueOf()),
-                sortable: false,
-            },
             {
                 name: tableColumnsNames.InFlightTxCount,
                 render: ({value}) => formatNumber(value as number),
                 align: DataTable.RIGHT,
                 sortable: false,
             },
-            {
+        ];
+
+        if (filters.mode === EShardsWorkloadMode.History) {
+            // after NodeId
+            columns.splice(5, 0, {
+                name: tableColumnsNames.PeakTime,
+                render: ({value}) => formatDateTime(new Date(value as string).valueOf()),
+                sortable: false,
+            });
+            columns.push({
                 name: tableColumnsNames.IntervalEnd,
                 render: ({value}) => formatDateTime(new Date(value as string).getTime()),
-            }
-        ];
-    }, [dispatch, history, tenantPath]);
+            });
+        }
+
+        return columns;
+    }, [dispatch, filters.mode, history, tenantPath]);
 
     const renderLoader = () => {
         return (
@@ -272,10 +304,8 @@ export const OverloadedShards = ({tenantPath, type}: OverloadedShardsProps) => {
 
     return (
         <div className={b()}>
-            <div className={b('controls')}>
-                {i18n('description')}
-                <DateRange from={filters.from} to={filters.to} onChange={handleDateRangeChange} />
-            </div>
+            <Filters value={filters} onChange={handleFiltersChange} />
+            {filters.mode === EShardsWorkloadMode.History && <div>{i18n('description')}</div>}
             {renderContent()}
         </div>
     );

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

@@ -0,0 +1,6 @@
+{
+  "no-data": "No data",
+  "filters.mode.immediate": "Immediate",
+  "filters.mode.history": "Historical",
+  "description": "Historical data only tracks shards with CPU load over 70%"
+}

package/dist/containers/Tenant/Diagnostics/{OverloadedShards → TopShards}/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-overloaded-shards';
+const COMPONENT = 'ydb-diagnostics-top-shards';
 
 i18n.registerKeyset(Lang.En, COMPONENT, en);
 i18n.registerKeyset(Lang.Ru, COMPONENT, ru);

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

@@ -0,0 +1,6 @@
+{
+  "no-data": "Нет данных",
+  "filters.mode.immediate": "Мгновенные",
+  "filters.mode.history": "Исторические",
+  "description": "Исторические данные хранятся только о шардах с загрузкой CPU выше 70%"
+}

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

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

package/dist/store/reducers/authentication.js

@@ -34,21 +34,6 @@ const authentication = function (state = initialState, action) {
     }
 };
 
-export const setIsNotAuthenticated = () => {
-    return (dispatch) => {
-        dispatch({
-            type: SET_UNAUTHENTICATED.SUCCESS,
-        });
-    };
-};
-export const setIsAuthenticated = () => {
-    return (dispatch) => {
-        dispatch({
-            type: SET_AUTHENTICATED.SUCCESS,
-        });
-    };
-};
-
 export const authenticate = (user, password) => {
     return createApiRequest({
         request: window.api.authenticate(user, password),

package/dist/store/reducers/shardsWorkload.ts

@@ -6,6 +6,7 @@ import type {
     IShardsWorkloadFilters,
     IShardsWorkloadState,
 } from '../../types/store/shardsWorkload';
+import {EShardsWorkloadMode} from '../../types/store/shardsWorkload';
 
 import {parseQueryAPIExecuteResponse} from '../../utils/query';
 
@@ -51,7 +52,7 @@ function getFiltersConditions(filters?: IShardsWorkloadFilters) {
     return conditions.join(' AND ');
 }
 
-function createShardQuery(
+function createShardQueryHistorical(
     path: string,
     filters?: IShardsWorkloadFilters,
     sortOrder?: SortOrder[],
@@ -85,6 +86,28 @@ ${orderBy}
 LIMIT 20`;
 }
 
+function createShardQueryImmediate(path: string, sortOrder?: SortOrder[], tenantName?: string) {
+    const pathSelect = tenantName
+        ? `CAST(SUBSTRING(CAST(Path AS String), ${tenantName.length}) AS Utf8) AS Path`
+        : 'Path';
+
+    const orderBy = sortOrder ? `ORDER BY ${sortOrder.map(formatSortOrder).join(', ')}` : '';
+
+    return `SELECT
+    ${pathSelect},
+    TabletId,
+    CPUCores,
+    DataSize,
+    NodeId,
+    InFlightTxCount
+FROM \`.sys/partition_stats\`
+WHERE
+    Path='${path}'
+    OR Path LIKE '${path}/%'
+${orderBy}
+LIMIT 20`;
+}
+
 const queryAction = 'execute-scan';
 
 const shardsWorkload: Reducer<IShardsWorkloadState, IShardsWorkloadAction> = (
@@ -147,7 +170,10 @@ export const sendShardQuery = ({database, path = '', sortOrder, filters}: SendSh
             request: window.api.sendQuery(
                 {
                     schema: 'modern',
-                    query: createShardQuery(path, filters, sortOrder, database),
+                    query:
+                        filters?.mode === EShardsWorkloadMode.Immediate
+                            ? createShardQueryImmediate(path, sortOrder, database)
+                            : createShardQueryHistorical(path, filters, sortOrder, database),
                     database,
                     action: queryAction,
                 },

package/dist/store/state-url-mapping.js

@@ -48,6 +48,9 @@ const paramSetup = {
         generalTab: {
             stateKey: 'tenant.diagnosticsTab',
         },
+        shardsMode: {
+            stateKey: 'shardsWorkload.filters.mode',
+        },
         shardsDateFrom: {
             stateKey: 'shardsWorkload.filters.from',
             type: 'number',

package/dist/types/store/shardsWorkload.ts

@@ -3,11 +3,17 @@ import type {ApiRequestAction} from '../../store/utils';
 import type {IResponseError} from '../api/error';
 import type {IQueryResult} from './query';
 
+export enum EShardsWorkloadMode {
+    Immediate = 'immediate',
+    History = 'history',
+}
+
 export interface IShardsWorkloadFilters {
     /** ms from epoch */
     from?: number;
     /** ms from epoch */
     to?: number;
+    mode?: EShardsWorkloadMode;
 }
 
 export interface IShardsWorkloadState {

package/dist/utils/typecheckers.ts

@@ -0,0 +1,5 @@
+/**
+ * Intended to typecheck enums, but also checks if the value is any of the arbitrary object values
+ */
+export const isEnumMember = <T extends Object>(object: T, value: any): value is T[keyof T] =>
+    Object.values(object).includes(value);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "3.3.3",
+  "version": "3.3.4",
   "files": [
     "dist"
   ],

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

@@ -1,4 +0,0 @@
-{
-  "no-data": "No data",
-  "description": "Shards with CPU load over 70% are listed"
-}

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

@@ -1,4 +0,0 @@
-{
-  "no-data": "Нет данных",
-  "description": "Отображаются шарды с загрузкой CPU выше 70%"
-}

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

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