ydb-embedded-ui 3.2.0 → 3.2.1

package/dist/types/api/schema.ts

@@ -1,3 +1,5 @@
+import {TMetrics} from './tenant';
+
 export interface TEvDescribeSchemeResult {
     Status?: EStatus;
     Reason?: string;
@@ -50,8 +52,10 @@ export interface TPathDescription {
     // for table
     Table?: TTableDescription;
     TableStats?: TTableStats;
-    TabletMetrics?: unknown;
-    TablePartitions?: unknown[];
+    TabletMetrics?: TMetrics;
+    TablePartitions?: TTablePartition[];
+    TablePartitionStats?: TTableStats[];
+    TablePartitionMetrics?: TMetrics[];
 
     ColumnStoreDescription?: TColumnStoreDescription;
     ColumnTableDescription?: TColumnTableDescription;
@@ -254,7 +258,7 @@ export interface TFollowerGroup {
     AllowedDataCenters?: string[];
 }
 
-interface TTableStats {
+export interface TTableStats {
     /** uint64 */
     DataSize?: string;
     /** uint64 */
@@ -791,3 +795,12 @@ interface TColumnTableSchemaPreset {
     Name?: string;
     Schema?: TColumnTableSchema;
 }
+
+interface TTablePartition {
+    /** bytes */
+    EndOfRangeKeyPrefix?: unknown;
+    IsPoint?: boolean;
+    IsInclusive?: boolean;
+    /** uint64 */
+    DatashardId?: string;
+}

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/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')} target="_blank">
+                            <Button
+                                size="s"
+                                href={nodeRef}
+                                className={b('external-button')}
+                                target="_blank"
+                            >
                                 <Icon name="external" />
                             </Button>
                         )}

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.2.0",
+  "version": "3.2.1",
   "files": [
     "dist"
   ],
@@ -11,6 +11,7 @@
   "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": "^1.0.2",
     "axios": "0.19.2",

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