ydb-embedded-ui 3.1.0 → 3.2.1

package/dist/types/store/heatmap.ts

@@ -0,0 +1,51 @@
+import type {ApiRequestAction} from '../../store/utils';
+import {FETCH_HEATMAP, setHeatmapOptions} from '../../store/reducers/heatmap';
+
+import type {IResponseError} from '../api/error';
+import type {TTabletStateInfo} from '../api/tablet';
+import type {TTableStats} from '../api/schema';
+import type {TMetrics} from '../api/tenant';
+
+export interface IHeatmapTabletData extends TTabletStateInfo {
+    metrics?: TTableStats & TMetrics;
+}
+
+export type IHeatmapMetricValue = keyof TTableStats | keyof TMetrics;
+
+interface IHeatmapMetric {
+    value: IHeatmapMetricValue;
+    content: IHeatmapMetricValue;
+}
+
+export interface IHeatmapState {
+    loading: boolean;
+    wasLoaded: boolean;
+    currentMetric?: IHeatmapMetricValue;
+    sort: boolean;
+    heatmap: boolean;
+    data?: IHeatmapTabletData[];
+    metrics?: IHeatmapMetric[];
+    error?: IResponseError;
+}
+
+export interface IHeatmapApiRequestParams {
+    nodes?: string[];
+    path: string;
+}
+
+interface IHeatmapHandledResponse {
+    data: IHeatmapTabletData[];
+    metrics?: IHeatmapMetric[];
+}
+
+type IHeatmapApiRequestAction = ApiRequestAction<
+    typeof FETCH_HEATMAP,
+    IHeatmapHandledResponse,
+    IResponseError
+>;
+
+export type IHeatmapAction = IHeatmapApiRequestAction | ReturnType<typeof setHeatmapOptions>;
+
+export interface IHeatmapRootStateSlice {
+    heatmap: IHeatmapState;
+}

package/dist/types/store/schema.ts

@@ -25,9 +25,9 @@ export interface ISchemaState {
 }
 
 export interface ISchemaHandledResponse {
-    path: string | undefined;
-    currentSchema: TEvDescribeSchemeResult | undefined;
-    data: ISchemaData | undefined;
+    path?: string;
+    currentSchema?: TEvDescribeSchemeResult;
+    data?: ISchemaData;
 }
 
 type ISchemaApiRequestAction = ApiRequestAction<

package/dist/types/store/shardsWorkload.ts

@@ -1,4 +1,4 @@
-import {SEND_SHARD_QUERY, setShardQueryOptions, setTopShardFilters} from '../../store/reducers/shardsWorkload';
+import {SEND_SHARD_QUERY, setShardsState, setShardsQueryFilters} from '../../store/reducers/shardsWorkload';
 import type {ApiRequestAction} from '../../store/utils';
 import type {IResponseError} from '../api/error';
 import type {IQueryResult} from './query';
@@ -20,8 +20,8 @@ export interface IShardsWorkloadState {
 
 export type IShardsWorkloadAction =
     | ApiRequestAction<typeof SEND_SHARD_QUERY, IQueryResult, IResponseError>
-    | ReturnType<typeof setShardQueryOptions>
-    | ReturnType<typeof setTopShardFilters>;
+    | ReturnType<typeof setShardsState>
+    | ReturnType<typeof setShardsQueryFilters>;
 
 export interface IShardsWorkloadRootStateSlice {
     shardsWorkload: IShardsWorkloadState;

package/dist/types/store/tablets.ts

@@ -0,0 +1,42 @@
+import type {ApiRequestAction} from '../../store/utils';
+import {
+    clearWasLoadingFlag,
+    FETCH_TABLETS,
+    setStateFilter,
+    setTypeFilter,
+} from '../../store/reducers/tablets';
+
+import type {IResponseError} from '../api/error';
+import type {TEvTabletStateResponse, EType, ETabletState} from '../api/tablet';
+
+export interface ITabletsState {
+    loading: boolean;
+    wasLoaded: boolean;
+    stateFilter: ETabletState[];
+    typeFilter: EType[];
+    data?: TEvTabletStateResponse;
+    error?: IResponseError;
+}
+
+export interface ITabletsApiRequestParams {
+    nodes?: string[];
+    path?: string;
+}
+
+type ITabletsApiRequestAction = ApiRequestAction<
+    typeof FETCH_TABLETS,
+    TEvTabletStateResponse,
+    IResponseError
+>;
+
+export type ITabletsAction =
+    | ITabletsApiRequestAction
+    | (
+          | ReturnType<typeof clearWasLoadingFlag>
+          | ReturnType<typeof setStateFilter>
+          | ReturnType<typeof setTypeFilter>
+      );
+
+export interface ITabletsRootStateSlice {
+    tablets: ITabletsState;
+}

package/dist/utils/constants.ts

@@ -39,39 +39,6 @@ export const TABLET_COLORS = {
     Active: 'lightgreen',
 };
 
-export const TABLET_COLOR_TO_STATES = {
-    Red: [
-        'Created',
-        'ResolveStateStorage',
-        'Candidate',
-        'BlockBlobStorage',
-        'WriteZeroEntry',
-        'Restored',
-        'Discover',
-        'Lock',
-        'Dead',
-    ],
-    Orange: ['RebuildGraph'],
-    Yellow: ['ResolveMaster', 'ResolveLeader'],
-    Green: ['Deleted', 'Active'],
-};
-
-export const TABLETS_STATES = [
-    'Active',
-    'Deleted',
-    'Created',
-    'ResolveStateStorage',
-    'Candidate',
-    'BlockBlobStorage',
-    'WriteZeroEntry',
-    'Restored',
-    'Discover',
-    'Lock',
-    'Dead',
-    'RebuildGraph',
-    'ResolveLeader',
-];
-
 export const TxAllocator = 'TxAllocator';
 
 export const TABLET_SYMBOLS = {
@@ -123,13 +90,10 @@ 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';
+export const ASIDE_HEADER_COMPACT_KEY = 'asideHeaderCompact';
 export const QUERIES_HISTORY_KEY = 'queries_history';
 export const DATA_QA_TUNE_COLUMNS_POPUP = 'tune-columns-popup';
 
-export const defaultUserSettings = {
-    [THEME_KEY]: 'light',
-    [INVERTED_DISKS_KEY]: false,
-};
 export const DEFAULT_SIZE_RESULT_PANE_KEY = 'default-size-result-pane';
 export const DEFAULT_SIZE_TENANT_SUMMARY_KEY = 'default-size-tenant-summary-pane';
 export const DEFAULT_SIZE_TENANT_KEY = 'default-size-tenant-pane';

package/dist/utils/getNodesColumns.js

@@ -6,7 +6,7 @@ import Icon from '../components/Icon/Icon';
 import EntityStatus from '../components/EntityStatus/EntityStatus';
 import PoolsGraph from '../components/PoolsGraph/PoolsGraph';
 import ProgressViewer from '../components/ProgressViewer/ProgressViewer';
-import TabletsStatistic from '../components/TabletsStatistic/TabletsStatistic';
+import {TabletsStatistic} from '../components/TabletsStatistic';
 
 import {getDefaultNodePath} from '../containers/Node/NodePages';
 import {formatBytes} from './index';
@@ -41,7 +41,12 @@ export function getNodesColumns({showTooltip, hideTooltip, tabletsPath, getNodeR
                             className={b('host-name')}
                         />
                         {nodeRef && (
-                            <Button size="s" href={nodeRef} className={b('external-button')}>
+                            <Button
+                                size="s"
+                                href={nodeRef}
+                                className={b('external-button')}
+                                target="_blank"
+                            >
                                 <Icon name="external" />
                             </Button>
                         )}
@@ -58,6 +63,13 @@ export function getNodesColumns({showTooltip, hideTooltip, tabletsPath, getNodeR
             render: ({value}) => (value ? value : '—'),
             width: '60px',
         },
+        {
+            name: 'Rack',
+            header: 'Rack',
+            align: DataTable.LEFT,
+            render: ({value}) => (value ? value : '—'),
+            width: '80px',
+        },
         {
             name: 'Version',
             width: '200px',

package/dist/utils/tablet.ts

@@ -0,0 +1,53 @@
+import {EFlag} from '../types/api/enums';
+import {ETabletState} from '../types/api/tablet';
+
+const tabletStateToColorState: Record<ETabletState, EFlag> = {
+    [ETabletState.Active]: EFlag.Green,
+    [ETabletState.Deleted]: EFlag.Green,
+
+    [ETabletState.RebuildGraph]: EFlag.Orange,
+    [ETabletState.ResolveLeader]: EFlag.Yellow,
+
+    [ETabletState.Created]: EFlag.Red,
+    [ETabletState.ResolveStateStorage]: EFlag.Red,
+    [ETabletState.Candidate]: EFlag.Red,
+    [ETabletState.BlockBlobStorage]: EFlag.Red,
+    [ETabletState.WriteZeroEntry]: EFlag.Red,
+    [ETabletState.Restored]: EFlag.Red,
+    [ETabletState.Discover]: EFlag.Red,
+    [ETabletState.Lock]: EFlag.Red,
+    [ETabletState.Dead]: EFlag.Red,
+    [ETabletState.Stopped]: EFlag.Red,
+};
+
+export const tabletStates = Object.keys(ETabletState);
+
+export const tabletColorToTabletState = Object.entries(tabletStateToColorState).reduce(
+    (acc, [state, color]) => {
+        if (acc[color]) {
+            acc[color].push(state as ETabletState);
+        } else {
+            acc[color] = [state as ETabletState];
+        }
+
+        return acc;
+    },
+    {} as Record<EFlag, ETabletState[]>,
+);
+
+// Tablet State in different versions or in different endpoint
+// could be represented as ETabletState of EFlag
+export const mapTabletStateToColorState = (state?: ETabletState | EFlag): EFlag => {
+    if (!state) {
+        return EFlag.Grey;
+    }
+
+    const isEFlag = (value: ETabletState | EFlag): value is EFlag =>
+        Object.values(EFlag).includes(value as EFlag);
+
+    if (isEFlag(state)) {
+        return state;
+    }
+
+    return tabletStateToColorState[state];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "3.1.0",
+  "version": "3.2.1",
   "files": [
     "dist"
   ],
@@ -11,8 +11,9 @@
   "dependencies": {
     "@gravity-ui/axios-wrapper": "^1.3.0",
     "@gravity-ui/i18n": "^1.0.0",
+    "@gravity-ui/navigation": "^0.3.1",
     "@yandex-cloud/paranoid": "^1.3.0",
-    "@yandex-cloud/react-data-table": "0.2.1",
+    "@yandex-cloud/react-data-table": "^1.0.2",
     "axios": "0.19.2",
     "bem-cn-lite": "4.0.0",
     "history": "4.10.1",
@@ -37,7 +38,7 @@
     "reselect": "4.1.6",
     "sass": "1.32.8",
     "web-vitals": "1.1.2",
-    "ydb-ui-components": "3.0.1"
+    "ydb-ui-components": "^3.0.2"
   },
   "scripts": {
     "start": "react-app-rewired start",

package/dist/components/AsideNavigation/AsideHeader.scss

@@ -1,147 +0,0 @@
-.nv-aside-header {
-    $class: &;
-    --nv-aside-header-min-width: 56px;
-    position: relative;
-
-    width: 100%;
-    height: 100%;
-
-    background-color: var(--yc-color-base-background);
-
-    &__aside {
-        position: sticky;
-        z-index: 100;
-        top: 0;
-        left: 0;
-
-        display: flex;
-        flex-direction: column;
-
-        width: inherit;
-        height: 100vh;
-
-        border-right: 1px solid var(--yc-color-line-generic);
-        background-color: var(--yc-color-base-background);
-
-        &-popup-anchor {
-            position: absolute;
-            z-index: 1;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-        }
-
-        &-content {
-            position: relative;
-            z-index: 2;
-
-            display: flex;
-            overflow-x: hidden;
-            flex-direction: column;
-
-            width: inherit;
-            height: inherit;
-
-            user-select: none;
-        }
-    }
-
-    &__footer {
-        display: flex;
-        flex-direction: column;
-        flex-shrink: 0;
-
-        width: 100%;
-        margin: 8px 0;
-
-        &::before {
-            position: relative;
-            top: -8px;
-
-            content: '';
-
-            border-top: 1px solid var(--yc-color-line-generic);
-        }
-    }
-
-    &__drawer {
-        position: fixed;
-        z-index: 98;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-
-        overflow: auto;
-    }
-
-    &__panel {
-        height: 100%;
-    }
-
-    &__content-container {
-        height: 100%;
-    }
-
-    &__pane-container {
-        display: flex;
-        overflow: visible;
-        flex: 1 1 0;
-        flex-direction: row;
-
-        user-select: text;
-
-        outline: none;
-    }
-
-    &__content {
-        z-index: 90;
-
-        width: calc(100% - var(--nv-aside-header-size));
-    }
-
-    &__all-services-button {
-        &_top {
-            box-sizing: border-box;
-
-            border-bottom: 1px solid var(--yc-color-line-generic);
-        }
-    }
-
-    &__collapse-button {
-        position: absolute;
-        z-index: 3;
-        right: 14px;
-        bottom: 14px;
-
-        width: 28px;
-        height: 28px;
-
-        transition: none;
-        &_compact {
-            right: -29px;
-
-            border: 1px solid var(--yc-color-line-generic);
-            border-left: none;
-            border-radius: 0 4px 4px 0;
-            background-color: inherit;
-
-            &.yc-button::before {
-                border-radius: 0 3px 3px 0;
-            }
-        }
-
-        &:not(#{&}_compact) {
-            transform: rotate(180deg);
-        }
-
-        &:hover {
-            color: var(--yc-color-text-misc);
-        }
-    }
-
-    &__collapse-icon {
-        color: var(--yc-color-text-misc);
-    }
-}