ydb-embedded-ui 3.0.0 → 3.1.0

package/dist/store/reducers/shardsWorkload.ts

@@ -0,0 +1,182 @@
+import type {Reducer} from 'redux';
+
+import '../../services/api';
+import type {
+    IShardsWorkloadAction,
+    IShardsWorkloadFilters,
+    IShardsWorkloadState,
+} from '../../types/store/shardsWorkload';
+
+import {parseQueryAPIExecuteResponse} from '../../utils/query';
+
+import {createRequestActionTypes, createApiRequest} from '../utils';
+
+export const SEND_SHARD_QUERY = createRequestActionTypes('query', 'SEND_SHARD_QUERY');
+const SET_SHARD_QUERY_OPTIONS = 'query/SET_SHARD_QUERY_OPTIONS';
+const SET_TOP_SHARDS_FILTERS = 'shardsWorkload/SET_TOP_SHARDS_FILTERS';
+
+const initialState = {
+    loading: false,
+    wasLoaded: false,
+    filters: {},
+};
+
+export interface SortOrder {
+    columnId: string;
+    order: string;
+}
+
+function formatSortOrder({columnId, order}: SortOrder) {
+    return `${columnId} ${order}`;
+}
+
+function getFiltersConditions(filters?: IShardsWorkloadFilters) {
+    const conditions: string[] = [];
+
+    if (filters?.from && filters?.to && filters.from > filters.to) {
+        throw new Error('Invalid date range');
+    }
+
+    if (filters?.from) {
+        // matching `from` & `to` is an edge case
+        // other cases should not include the starting point, since intervals are stored using the ending time
+        const gt = filters.to === filters.from ? '>=' : '>';
+        conditions.push(`IntervalEnd ${gt} Timestamp('${new Date(filters.from).toISOString()}')`);
+    }
+
+    if (filters?.to) {
+        conditions.push(`IntervalEnd <= Timestamp('${new Date(filters.to).toISOString()}')`);
+    }
+
+    return conditions.join(' AND ');
+}
+
+function createShardQuery(
+    path: string,
+    filters?: IShardsWorkloadFilters,
+    sortOrder?: SortOrder[],
+    tenantName?: string,
+) {
+    const pathSelect = tenantName
+        ? `CAST(SUBSTRING(CAST(Path AS String), ${tenantName.length}) AS Utf8) AS Path`
+        : 'Path';
+
+    let where = `Path='${path}' OR Path LIKE '${path}/%'`;
+
+    const filterConditions = getFiltersConditions(filters);
+    if (filterConditions.length) {
+        where = `(${where}) AND ${filterConditions}`;
+    }
+
+    const orderBy = sortOrder ? `ORDER BY ${sortOrder.map(formatSortOrder).join(', ')}` : '';
+
+    return `SELECT
+    ${pathSelect},
+    TabletId,
+    CPUCores,
+    DataSize,
+    NodeId,
+    PeakTime,
+    InFlightTxCount
+FROM \`.sys/top_partitions_one_hour\`
+WHERE ${where}
+${orderBy}
+LIMIT 20`;
+}
+
+const queryAction = 'execute-scan';
+
+const shardsWorkload: Reducer<IShardsWorkloadState, IShardsWorkloadAction> = (
+    state = initialState,
+    action,
+) => {
+    switch (action.type) {
+        case SEND_SHARD_QUERY.REQUEST: {
+            return {
+                ...state,
+                loading: true,
+                error: undefined,
+            };
+        }
+        case SEND_SHARD_QUERY.SUCCESS: {
+            return {
+                ...state,
+                data: action.data,
+                loading: false,
+                error: undefined,
+                wasLoaded: true,
+            };
+        }
+        // 401 Unauthorized error is handled by GenericAPI
+        case SEND_SHARD_QUERY.FAILURE: {
+            return {
+                ...state,
+                error: action.error || 'Unauthorized',
+                loading: false,
+            };
+        }
+        case SET_SHARD_QUERY_OPTIONS:
+            return {
+                ...state,
+                ...action.data,
+            };
+        case SET_TOP_SHARDS_FILTERS:
+            return {
+                ...state,
+                filters: {
+                    ...state.filters,
+                    ...action.filters,
+                },
+            };
+        default:
+            return state;
+    }
+};
+
+interface SendShardQueryParams {
+    database?: string;
+    path?: string;
+    sortOrder?: SortOrder[];
+    filters?: IShardsWorkloadFilters;
+}
+
+export const sendShardQuery = ({database, path = '', sortOrder, filters}: SendShardQueryParams) => {
+    try {
+        return createApiRequest({
+            request: window.api.sendQuery(
+                {
+                    schema: 'modern',
+                    query: createShardQuery(path, filters, sortOrder, database),
+                    database,
+                    action: queryAction,
+                },
+                {
+                    concurrentId: 'topShards',
+                },
+            ),
+            actions: SEND_SHARD_QUERY,
+            dataHandler: parseQueryAPIExecuteResponse,
+        });
+    } catch (error) {
+        return {
+            type: SEND_SHARD_QUERY.FAILURE,
+            error,
+        };
+    }
+};
+
+export function setShardQueryOptions(options: Partial<IShardsWorkloadState>) {
+    return {
+        type: SET_SHARD_QUERY_OPTIONS,
+        data: options,
+    } as const;
+}
+
+export function setTopShardFilters(filters: Partial<IShardsWorkloadFilters>) {
+    return {
+        type: SET_TOP_SHARDS_FILTERS,
+        filters,
+    } as const;
+}
+
+export default shardsWorkload;

package/dist/store/reducers/{tooltip.js → tooltip.ts}

@@ -1,8 +1,19 @@
-import {toolTipConstants} from '../../utils/actionsConstants';
+import isEqual from 'lodash/isEqual';
+import type {Reducer} from 'redux';
+
 import {tooltipTemplates} from '../../utils/tooltip';
-import _ from 'lodash';
 
-const initialState = {
+import {
+    ITooltipAction,
+    ITooltipPositions,
+    ITooltipState,
+    ITooltipTemplateType,
+} from '../../types/store/tooltip';
+
+const HIDE_TOOLTIP = 'tooltip/HIDE_TOOLTIP';
+const UPDATE_REF = 'tooltip/UPDATE_REF';
+
+const initialState: ITooltipState = {
     toolTipVisible: false,
     currentHoveredRef: undefined,
     data: undefined,
@@ -10,9 +21,9 @@ const initialState = {
     template: tooltipTemplates['pool'],
 };
 
-const tooltip = (state = initialState, action) => {
+const tooltip: Reducer<ITooltipState, ITooltipAction> = (state = initialState, action) => {
     switch (action.type) {
-        case toolTipConstants.HIDE_TOOLTIP: {
+        case HIDE_TOOLTIP: {
             return {
                 ...state,
                 currentHoveredRef: undefined,
@@ -20,8 +31,8 @@ const tooltip = (state = initialState, action) => {
             };
         }
 
-        case toolTipConstants.UPDATE_REF: {
-            if (action.templateType === 'cell' && _.isEqual(action.node, state.currentHoveredRef)) {
+        case UPDATE_REF: {
+            if (action.templateType === 'cell' && isEqual(action.node, state.currentHoveredRef)) {
                 return {
                     ...state,
                     currentHoveredRef: undefined,
@@ -36,7 +47,7 @@ const tooltip = (state = initialState, action) => {
                 positions: action.positions,
                 data: action.data,
                 additionalData: action.additionalData,
-                type: action.templateType,
+                templateType: action.templateType,
                 template: tooltipTemplates[action.templateType],
             };
         }
@@ -47,12 +58,18 @@ const tooltip = (state = initialState, action) => {
 };
 
 export const hideTooltip = () => {
-    return {type: toolTipConstants.HIDE_TOOLTIP};
+    return {type: HIDE_TOOLTIP} as const;
 };
 
-export const showTooltip = (node, data, templateType, additionalData, positions) => {
+export const showTooltip = (
+    node: EventTarget,
+    data: any,
+    templateType: ITooltipTemplateType,
+    additionalData?: any,
+    positions?: ITooltipPositions,
+) => {
     return {
-        type: toolTipConstants.UPDATE_REF,
+        type: UPDATE_REF,
         node,
         data,
         templateType,

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

@@ -48,6 +48,14 @@ const paramSetup = {
         generalTab: {
             stateKey: 'tenant.diagnosticsTab',
         },
+        topShardsFrom: {
+            stateKey: 'shardsWorkload.filters.from',
+            type: 'number',
+        },
+        topShardsTo: {
+            stateKey: 'shardsWorkload.filters.to',
+            type: 'number',
+        },
     },
 };
 

package/dist/types/api/nodes.ts

@@ -12,14 +12,14 @@ export interface TNodesInfo {
     FoundNodes: string;
 }
 
-interface TNodeInfo {
+export interface TNodeInfo {
     NodeId: number;
     SystemState: TSystemStateInfo;
     PDisks?: TPDiskStateInfo[];
     Tablets?: TTabletStateInfo[];
 }
 
-interface TSystemStateInfo {
+export interface TSystemStateInfo {
     /** uint64 */
     StartTime?: string;
     /** uint64 */
@@ -57,7 +57,7 @@ interface TSystemStateInfo {
     Location?: TNodeLocation;
 }
 
-interface TPoolStats {
+export interface TPoolStats {
     Name?: string;
     /** double */
     Usage?: number;

package/dist/types/api/schema.ts

@@ -38,7 +38,7 @@ enum EStatus {
 }
 
 // incomplete interface, only currently used fields are covered
-interface TPathDescription {
+export interface TPathDescription {
     /** info about the path itself */
     Self?: TDirEntry;
     DomainDescription?: TDomainDescription;

package/dist/types/api/tenant.ts

@@ -0,0 +1,131 @@
+import {EFlag} from './enums';
+import {TPoolStats, TSystemStateInfo} from './nodes';
+import {TTabletStateInfo} from './tablet';
+
+export interface TTenants {
+    Tenants?: TTenant[];
+}
+
+export interface TTenantInfo {
+    TenantInfo?: TTenant[];
+    Errors?: string[];
+}
+
+export interface TTenant {
+    Name: string;
+    Id: string;
+    Type: ETenantType;
+    State: State;
+    StateStats?: THiveDomainStatsStateCount[];
+    Metrics: TMetrics;
+    NodeIds?: number[];
+    AliveNodes: number;
+    Resources: TTenantResources;
+    /** uint64 */
+    CreateTime: string;
+    Owner: string;
+    Users?: string[];
+    PoolStats?: TPoolStats[];
+    UserAttributes: Record<string, string>;
+    Overall: EFlag;
+    SystemTablets?: TTabletStateInfo[];
+    ResourceId: string;
+    Tablets?: TTabletStateInfo[];
+    /** uint64 */
+    StorageAllocatedSize: string;
+    /** uint64 */
+    StorageMinAvailableSize: string;
+    Nodes?: TSystemStateInfo[];
+    /** uint64 */
+    MemoryUsed: string;
+    /** uint64 */
+    MemoryLimit: string;
+    /** double */
+    CoresUsed: number;
+    /** uint64 */
+    StorageGroups: string;
+}
+
+interface THiveDomainStatsStateCount {
+    VolatileState?: ETabletVolatileState;
+    Count?: number;
+}
+
+interface TMetrics {
+    /** uint64 */
+    CPU?: string;
+    /** uint64 */
+    Memory?: string;
+    /** uint64 */
+    Network?: string;
+    /** uint64 */
+    Counter?: string;
+    /** uint64 */
+    Storage?: string;
+    /** uint64 */
+    ReadThroughput?: string;
+    /** uint64 */
+    WriteThroughput?: string;
+    /** uint64 */
+    ReadIops?: string;
+    /** uint64 */
+    WriteIops?: string;
+
+    GroupReadThroughput?: TThroughputRecord[];
+    GroupWriteThroughput?: TThroughputRecord[];
+
+    GroupReadIops?: TIopsRecord[];
+    GroupWriteIops?: TIopsRecord[];
+}
+
+interface TThroughputRecord {
+    GroupID?: number;
+    Channel?: number;
+    /** uint64 */
+    Throughput?: string;
+}
+
+interface TIopsRecord {
+    GroupID?: number;
+    Channel?: number;
+    /** uint64 */
+    Iops?: string;
+}
+
+interface TTenantResources {
+    Required?: TTenantResource[];
+    Allocated?: TTenantResource[];
+}
+
+interface TTenantResource {
+    Type: string;
+    Zone: string;
+    Kind: string;
+    Count: number;
+}
+
+export enum ETenantType {
+    'UnknownTenantType' = 'UnknownTenantType',
+    'Domain' = 'Domain',
+    'Dedicated' = 'Dedicated',
+    'Shared' = 'Shared',
+    'Serverless' = 'Serverless',
+}
+
+enum State {
+    'STATE_UNSPECIFIED' = 'STATE_UNSPECIFIED',
+    'CREATING' = 'CREATING',
+    'RUNNING' = 'RUNNING',
+    'REMOVING' = 'REMOVING',
+    'PENDING_RESOURCES' = 'PENDING_RESOURCES',
+    'CONFIGURING' = 'CONFIGURING',
+}
+
+enum ETabletVolatileState {
+    'TABLET_VOLATILE_STATE_UNKNOWN' = 'TABLET_VOLATILE_STATE_UNKNOWN',
+    'TABLET_VOLATILE_STATE_STOPPED' = 'TABLET_VOLATILE_STATE_STOPPED',
+    'TABLET_VOLATILE_STATE_BOOTING' = 'TABLET_VOLATILE_STATE_BOOTING',
+    'TABLET_VOLATILE_STATE_STARTING' = 'TABLET_VOLATILE_STATE_STARTING',
+    'TABLET_VOLATILE_STATE_RUNNING' = 'TABLET_VOLATILE_STATE_RUNNING',
+    '_TABLET_VOLATILE_STATE_BLOCKED' = '_TABLET_VOLATILE_STATE_BLOCKED',
+}

package/dist/types/store/nodes.ts

@@ -0,0 +1,32 @@
+import {NodesUptimeFilterValues} from '../../utils/nodes';
+import {
+    FETCH_NODES,
+    clearNodes,
+    setDataWasNotLoaded,
+    setNodesUptimeFilter,
+} from '../../store/reducers/nodes';
+import {ApiRequestAction} from '../../store/utils';
+import {IResponseError} from '../api/error';
+import {TNodesInfo} from '../api/nodes';
+
+export interface INodesState {
+    loading: boolean;
+    wasLoaded: boolean;
+    nodesUptimeFilter: NodesUptimeFilterValues;
+    data?: TNodesInfo;
+    error?: IResponseError;
+}
+
+type INodesApiRequestAction = ApiRequestAction<typeof FETCH_NODES, TNodesInfo, IResponseError>;
+
+export type INodesAction =
+    | INodesApiRequestAction
+    | (
+          | ReturnType<typeof clearNodes>
+          | ReturnType<typeof setDataWasNotLoaded>
+          | ReturnType<typeof setNodesUptimeFilter>
+      );
+
+export interface INodesRootStateSlice {
+    nodes: INodesState;
+}

package/dist/types/store/shardsWorkload.ts

@@ -0,0 +1,28 @@
+import {SEND_SHARD_QUERY, setShardQueryOptions, setTopShardFilters} from '../../store/reducers/shardsWorkload';
+import type {ApiRequestAction} from '../../store/utils';
+import type {IResponseError} from '../api/error';
+import type {IQueryResult} from './query';
+
+export interface IShardsWorkloadFilters {
+    /** ms from epoch */
+    from?: number;
+    /** ms from epoch */
+    to?: number;
+}
+
+export interface IShardsWorkloadState {
+    loading: boolean;
+    wasLoaded: boolean;
+    data?: IQueryResult;
+    error?: IResponseError;
+    filters: IShardsWorkloadFilters;
+}
+
+export type IShardsWorkloadAction =
+    | ApiRequestAction<typeof SEND_SHARD_QUERY, IQueryResult, IResponseError>
+    | ReturnType<typeof setShardQueryOptions>
+    | ReturnType<typeof setTopShardFilters>;
+
+export interface IShardsWorkloadRootStateSlice {
+    shardsWorkload: IShardsWorkloadState;
+}

package/dist/types/store/tooltip.ts

@@ -0,0 +1,25 @@
+import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
+import {tooltipTemplates} from '../../utils/tooltip';
+
+export type ITooltipTemplateType = keyof typeof tooltipTemplates;
+
+export interface ITooltipPositions {
+    left: number;
+    top: number;
+}
+
+export interface ITooltipState {
+    toolTipVisible: boolean;
+    positions?: ITooltipPositions;
+    currentHoveredRef?: EventTarget;
+    template: (data: any) => JSX.Element;
+    templateType: ITooltipTemplateType;
+    data?: any;
+    additionalData?: any;
+}
+
+export type ITooltipAction = ReturnType<typeof hideTooltip> | ReturnType<typeof showTooltip>;
+
+export interface ITooltipRootStateSlice {
+    tooltip: ITooltipState;
+}

package/dist/utils/constants.ts

@@ -118,6 +118,8 @@ export const COLORS_PRIORITY = {
 export const ALL = 'All';
 export const PROBLEMS = 'With problems';
 
+export type IProblemFilterValues = typeof ALL | typeof PROBLEMS;
+
 export const THEME_KEY = 'theme';
 export const INVERTED_DISKS_KEY = 'invertedDisks';
 export const SAVED_QUERIES_KEY = 'saved_queries';

package/dist/utils/nodes.ts

@@ -1,7 +1,7 @@
-export const NodesUptimeFilterValues = {
-    All: 'All',
-    SmallUptime: 'SmallUptime',
-};
+export enum NodesUptimeFilterValues {
+    'All' = 'All',
+    'SmallUptime' = 'SmallUptime',
+}
 
 export const NodesUptimeFilterTitles = {
     [NodesUptimeFilterValues.All]: 'All',

package/dist/utils/query.ts

@@ -186,5 +186,5 @@ export const prepareQueryResponse = (data?: KeyValueRow[]) => {
 };
 
 export function prepareQueryError(error: any) {
-    return error.data?.error?.message || error.data || error.statusText || JSON.stringify(error);
+    return error.data?.error?.message || error.message || error.data || error.statusText || JSON.stringify(error);
 }

package/dist/utils/tooltip.js

@@ -122,12 +122,14 @@ const NodeEndpointsTooltip = (props) => {
                                 <td className={nodeB('value')}>{data.Rack}</td>
                             </tr>
                         )}
-                        {data.Endpoints && data.Endpoints.length && data.Endpoints.map(({Name, Address}) => (
-                            <tr key={Name}>
-                                <td className={nodeB('label')}>{Name}</td>
-                                <td className={nodeB('value')}>{Address}</td>
-                            </tr>
-                        ))}
+                        {data.Endpoints &&
+                            data.Endpoints.length &&
+                            data.Endpoints.map(({Name, Address}) => (
+                                <tr key={Name}>
+                                    <td className={nodeB('label')}>{Name}</td>
+                                    <td className={nodeB('value')}>{Address}</td>
+                                </tr>
+                            ))}
                     </tbody>
                 </table>
             </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "files": [
     "dist"
   ],
@@ -9,6 +9,7 @@
     "url": "git@github.com:ydb-platform/ydb-embedded-ui.git"
   },
   "dependencies": {
+    "@gravity-ui/axios-wrapper": "^1.3.0",
     "@gravity-ui/i18n": "^1.0.0",
     "@yandex-cloud/paranoid": "^1.3.0",
     "@yandex-cloud/react-data-table": "0.2.1",
@@ -112,7 +113,6 @@
     "@types/react-router-dom": "^5.3.2",
     "@types/react-transition-group": "^4.4.4",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
-    "@yandex-cloud/axios-wrapper": "^1.0.2",
     "copyfiles": "^2.4.1",
     "eslint-config-prettier": "^8.3.0",
     "husky": "^7.0.4",

package/dist/components/ProblemFilter/ProblemFilter.js

@@ -1,24 +0,0 @@
-import PropTypes from 'prop-types';
-
-import {RadioButton} from '@gravity-ui/uikit';
-
-import {ALL, PROBLEMS} from '../../utils/constants';
-
-export default function ProblemFilter(props) {
-    const {value, onChange, className} = props;
-
-    return (
-        <RadioButton value={value} onUpdate={(value) => onChange(value)} className={className}>
-            <RadioButton.Option value={ALL}>{ALL}</RadioButton.Option>
-            <RadioButton.Option value={PROBLEMS}>{PROBLEMS}</RadioButton.Option>
-        </RadioButton>
-    );
-}
-
-export const problemFilterType = PropTypes.oneOf([ALL, PROBLEMS]);
-
-ProblemFilter.propTypes = {
-    value: problemFilterType,
-    onChange: PropTypes.func,
-    className: PropTypes.string,
-};