ydb-embedded-ui 22.1.0 → 22.2.0

package/src/containers/Storage/StorageExpertModePanel/components/renderExpertModeLegend.tsx

@@ -3,6 +3,7 @@ import {PDisksGroupBy, VDisksGroupBy} from '../constants';
 
 import {AllLegend} from './AllLegend';
 import {CompactionLegend} from './CompactionLegend';
+import {DriveTypeLegend} from './DriveTypeLegend';
 import {FrontQueuesLegend} from './FrontQueuesLegend';
 import {PDiskDecommitLegend} from './PDiskDecommitLegend';
 import {PDiskDeviceLegend} from './PDiskDeviceLegend';
@@ -18,6 +19,8 @@ export function renderVDiskLegend(
     selectionScope: SpaceLegendSelectionScope,
 ) {
     switch (vdisksGroupBy) {
+        case VDisksGroupBy.DriveType:
+            return <DriveTypeLegend />;
         case VDisksGroupBy.State:
             return <StateLegend />;
         case VDisksGroupBy.Space:
@@ -38,6 +41,8 @@ export function renderPDiskLegend(
     selectionScope: SpaceLegendSelectionScope,
 ) {
     switch (pdisksGroupBy) {
+        case PDisksGroupBy.DriveType:
+            return <DriveTypeLegend />;
         case PDisksGroupBy.State:
             return <PDiskStateLegend />;
         case PDisksGroupBy.Space:

package/src/containers/Storage/StorageExpertModePanel/constants.ts

@@ -14,6 +14,7 @@ export const PDisksGroupBy = {
     Decommit: 'Decommit',
     Maintenance: 'Maintenance',
     Device: 'Device',
+    DriveType: 'DriveType',
     All: 'All',
 } as const;
 

package/src/containers/Storage/StorageExpertModePanel/i18n/en.json

@@ -1,4 +1,8 @@
 {
+  "value_drive-type": "Drive type",
+  "value_ssd": "SSD",
+  "value_hdd": "HDD",
+  "value_nvme": "NVMe",
   "label_vdisks": "VDisks:",
   "label_pdisks": "PDisks:",
   "value_state": "State",

package/src/containers/Storage/useStoragePDiskDisplayStateGetter.ts

@@ -12,6 +12,7 @@ import type {
     PDiskDisplayStateGetter,
 } from '../../utils/disks/displayState';
 import {getDefaultPDiskDisplayState} from '../../utils/disks/displayState';
+import {getDriveTypeDisplayState} from '../../utils/disks/driveType';
 import {calculateFlagPairIcon, calculateSpaceIcon} from '../../utils/disks/iconCalculators';
 import {
     getPDiskDecommitDisplayState,
@@ -205,6 +206,13 @@ function usePDiskDisplayStateGetter(
                 return getDefaultPDiskDisplayState(pDisk);
             }
 
+            if (pdisksGroupBy === PDisksGroupBy.DriveType) {
+                return {
+                    ...getDriveTypeDisplayState(pDisk),
+                    width: EXPERT_MODE_PDISK_WIDTH,
+                };
+            }
+
             const mode = getMode(pdisksGroupBy);
             const hasWhiteboardData = pDisk.HasWhiteboardData ?? pDisk.WhiteboardSize !== undefined;
 

package/src/containers/Storage/useStorageVDiskDisplayStateGetter.ts

@@ -16,6 +16,7 @@ import type {
     VDiskDisplayStateGetter,
 } from '../../utils/disks/displayState';
 import {getDefaultDiskDisplayState} from '../../utils/disks/displayState';
+import {getDriveTypeDisplayState} from '../../utils/disks/driveType';
 import {getIconCalculator} from '../../utils/disks/getIconStrategy';
 import {getSeverityCalculator} from '../../utils/disks/getSeverityStrategy';
 import type {VDisksGroupByValue} from '../../utils/disks/groupBy';
@@ -170,8 +171,17 @@ function getExpertVDiskDisplayState({
     vDisk,
     vdisksGroupBy,
 }: GetExpertVDiskDisplayStateParams): VDiskDisplayState {
+    const hasWhiteboardData = vDisk.HasWhiteboardData ?? Boolean(vDisk.VDiskId);
+    if (vdisksGroupBy === VDisksGroupBy.DriveType) {
+        return {
+            ...getDriveTypeDisplayState(hasWhiteboardData ? vDisk.PDisk : undefined),
+            striped: false,
+            iconPlacement: 'inline',
+        };
+    }
+
     const mode = getMode(vdisksGroupBy);
-    if (!(vDisk.HasWhiteboardData ?? Boolean(vDisk.VDiskId))) {
+    if (!hasWhiteboardData) {
         return getMissingVDiskDisplayState(vDisk, isDonor, mode, selectionScope !== 'nodes-vdisks');
     }
 

package/src/containers/VDiskPage/VDiskPage.tsx

@@ -23,6 +23,7 @@ import {vDiskApi} from '../../store/reducers/vdisk/vdisk';
 import {cn} from '../../utils/cn';
 import {parseVdiskId} from '../../utils/dataFormatters/dataFormatters';
 import {VDISK_LABEL_CONFIG} from '../../utils/disks/constants';
+import {formatPDiskType} from '../../utils/disks/getPDiskType';
 import {getDataSeverityColor} from '../../utils/disks/helpers';
 import {useAutoRefreshInterval, useTypedDispatch} from '../../utils/hooks';
 import {useAppTitle} from '../App/AppTitleContext';
@@ -122,7 +123,14 @@ export function VDiskPage() {
             <PageMetaWithAutorefresh
                 className={vDiskPageCn('meta')}
                 loading={loading}
-                items={[hostItem, nodeIdItem, NodeType, NodeDC, pDiskIdItem, PDiskType]}
+                items={[
+                    hostItem,
+                    nodeIdItem,
+                    NodeType,
+                    NodeDC,
+                    pDiskIdItem,
+                    formatPDiskType(PDiskType),
+                ]}
             />
         );
     };

package/src/store/reducers/table/table.ts

@@ -1,5 +1,6 @@
 import type {SchemaPathParam} from '../../../types/api/common';
 import type {TEvDescribeSchemeResult} from '../../../types/api/schema/schema';
+import {reachObjectCreationGoal} from '../../../utils/objectCreationMetrics';
 import {isQueryErrorResponse, parseQueryAPIResponse} from '../../../utils/query';
 import {api} from '../api';
 
@@ -42,6 +43,8 @@ export const tableApi = api.injectEndpoints({
                 database: string;
                 formValues: TableFormValues;
             }) => {
+                const objectType = formValues.type === 'row' ? 'row_table' : 'column_table';
+                reachObjectCreationGoal('createObject', objectType);
                 try {
                     const {
                         type,
@@ -79,12 +82,15 @@ export const tableApi = api.injectEndpoints({
                     });
 
                     if (isQueryErrorResponse(response)) {
+                        reachObjectCreationGoal('createObjectError', objectType, response);
                         return {error: response};
                     }
 
                     const data = parseQueryAPIResponse(response);
+                    reachObjectCreationGoal('createObjectSuccess', objectType);
                     return {data};
                 } catch (error) {
+                    reachObjectCreationGoal('createObjectError', objectType, error);
                     return {error};
                 }
             },

package/src/store/reducers/topic/topic.ts

@@ -4,6 +4,7 @@ import {createSelector} from '@reduxjs/toolkit';
 import type {IProtobufTimeObject} from '../../../types/api/common';
 import type {TopicDataRequest} from '../../../types/api/topic';
 import {convertBytesObjectToSpeed} from '../../../utils/bytesParsers';
+import {reachObjectCreationGoal} from '../../../utils/objectCreationMetrics';
 import {isQueryErrorResponse, parseQueryAPIResponse} from '../../../utils/query';
 import {parseLag, parseTimestampToIdleTime} from '../../../utils/timeParsers';
 import type {RootState} from '../../defaultStore';
@@ -82,6 +83,7 @@ export const topicApi = api.injectEndpoints({
                 database: string;
                 formData: TopicFormValues;
             }) => {
+                reachObjectCreationGoal('createObject', 'topic');
                 try {
                     const query = buildCreateTopicQuery(formData);
 
@@ -92,11 +94,15 @@ export const topicApi = api.injectEndpoints({
                     });
 
                     if (isQueryErrorResponse(response)) {
+                        reachObjectCreationGoal('createObjectError', 'topic', response);
                         return {error: response};
                     }
 
-                    return {data: parseQueryAPIResponse(response)};
+                    const data = parseQueryAPIResponse(response);
+                    reachObjectCreationGoal('createObjectSuccess', 'topic');
+                    return {data};
                 } catch (error) {
+                    reachObjectCreationGoal('createObjectError', 'topic', error);
                     return {error};
                 }
             },

package/src/uiFactory/types.ts

@@ -216,6 +216,12 @@ export type RenderHealthcheckAssistantAction = (
 ) => React.ReactNode;
 
 export interface UiMetricaGoals {
+    /** Creation attempt after form validation. Params: objectType (row_table, column_table, topic). */
+    createObject?: string;
+    /** Successful creation response. Params: objectType. */
+    createObjectSuccess?: string;
+    /** Failed creation. Params: objectType, errorType (ydb, http, network, timeout, cancelled, unknown), httpStatus (HTTP errors only). */
+    createObjectError?: string;
     runQuery?: string;
     explainAnalyzeQuery?: string;
     stopQuery?: string;

package/src/utils/disks/displayState.ts

@@ -2,13 +2,14 @@ import type {IconData} from '@gravity-ui/uikit';
 
 import {DATA_SEVERITY, DISK_COLOR_STATE_TO_NUMERIC_SEVERITY} from './constants';
 import type {IconWithColor} from './iconCalculators';
-import type {DisplaySeverity, PreparedPDisk, PreparedVDisk} from './types';
+import type {DisplaySeverity, PDiskType, PreparedPDisk, PreparedVDisk} from './types';
 
 export type DiskDisplayMode =
     | 'state'
     | 'space'
     | 'frontQueues'
     | 'compaction'
+    | 'driveType'
     | 'all'
     | 'drive'
     | 'decommit'
@@ -42,6 +43,7 @@ export interface PDiskAllModeDisplayState {
 }
 
 export interface BaseDiskDisplayState {
+    driveType?: PDiskType;
     severity: DisplaySeverity;
     icon: DiskIndicatorValue | undefined;
     mode: DiskDisplayMode | undefined;

package/src/utils/disks/driveType.ts

@@ -0,0 +1,30 @@
+import {CircleQuestionFill} from '@gravity-ui/icons';
+
+import {NOT_AVAILABLE_SEVERITY} from './constants';
+import type {BaseDiskDisplayState} from './displayState';
+import {formatPDiskType} from './getPDiskType';
+import type {PDiskType, PreparedPDisk} from './types';
+
+export function getDriveTypeDisplayState(pDisk: PreparedPDisk = {}): BaseDiskDisplayState {
+    const hasWhiteboardData = pDisk.HasWhiteboardData ?? pDisk.WhiteboardSize !== undefined;
+    const isNoData = !hasWhiteboardData;
+    let driveType: PDiskType | undefined;
+    if (hasWhiteboardData) {
+        switch (pDisk.Type) {
+            case 'SSD':
+            case 'HDD':
+            case 'NVME':
+                driveType = pDisk.Type;
+        }
+    }
+
+    return {
+        mode: 'driveType',
+        driveType,
+        severity: NOT_AVAILABLE_SEVERITY,
+        icon: isNoData ? undefined : (formatPDiskType(driveType) ?? CircleQuestionFill),
+        isNoData,
+        borderless: true,
+        showNoDataPlaceholder: isNoData,
+    };
+}

package/src/utils/disks/getDiskBarTone.ts

@@ -5,9 +5,10 @@ import {EFlag} from '../../types/api/enums';
 import {DONOR_COLOR, NOT_AVAILABLE_SEVERITY} from './constants';
 import type {DiskIndicatorValue} from './displayState';
 import {getDisplaySeverityColor} from './helpers';
-import type {DiskBarTone} from './types';
+import type {DiskBarTone, PDiskType} from './types';
 
 interface GetDiskBarToneParams {
+    driveType?: PDiskType;
     severity?: number;
     isDonor?: boolean;
     showIndicator?: boolean;
@@ -24,12 +25,17 @@ function hasMissingDataIndicator(indicator: DiskIndicatorValue | undefined) {
 }
 
 export function getDiskBarTone({
+    driveType,
     severity,
     isDonor,
     showIndicator,
     indicator,
     isNoData,
 }: GetDiskBarToneParams): DiskBarTone {
+    if (driveType) {
+        return driveType;
+    }
+
     if (isDonor) {
         return DONOR_COLOR;
     }

package/src/utils/disks/getPDiskType.ts

@@ -32,6 +32,10 @@ export const PDISK_TYPES = {
     MVME: 'NVME',
 } as const;
 
+export function formatPDiskType(type?: string) {
+    return type === 'NVME' ? 'NVMe' : type;
+}
+
 // Bear with me.
 // Disk type is determined by the field Category.
 // Category is a bit field defined as follows:

package/src/utils/disks/groupBy.ts

@@ -3,6 +3,7 @@ export const VDisksGroupBy = {
     Space: 'Space',
     FrontQueues: 'FrontQueues',
     Compaction: 'Compaction',
+    DriveType: 'DriveType',
     All: 'All',
 } as const;
 

package/src/utils/disks/iconCalculators.ts

@@ -165,7 +165,7 @@ function getFlagIconWithColor(flag: EFlag | undefined): IconWithColor | undefine
     if (!flag || flag === EFlag.Grey) {
         return {
             icon: CircleQuestionFill,
-            color: 'rgba(162, 162, 162, 1)',
+            color: 'var(--g-color-text-hint)',
         };
     }
 
@@ -230,7 +230,7 @@ export function calculateFlagPairIcon(
  * - Yellow: TriangleExclamationFill (text-warning)
  * - Orange: CircleExclamationFill (text-danger)
  * - Red: CircleXmarkFill (text-primary)
- * - Missing: CircleQuestionFill (rgba(162, 162, 162, 1))
+ * - Missing: CircleQuestionFill (text-hint)
  */
 export function calculateCompactionIcon(
     vDisk: PreparedVDisk,

package/src/utils/disks/types.ts

@@ -25,7 +25,7 @@ export type ExtendedDiskColor =
  */
 export type DiskColor = EFlag | ExtendedDiskColor;
 
-export type DiskBarTone = DiskColor | 'DarkGrey' | 'LightGrey';
+export type DiskBarTone = DiskColor | 'DarkGrey' | 'LightGrey' | PDiskType;
 
 /**
  * Basic severity levels for data storage (0-5).

package/src/utils/objectCreationMetrics.ts

@@ -0,0 +1,47 @@
+import {isQueryCancelledError, isQueryErrorResponse} from './query';
+import {isNetworkError, isResponseError} from './response';
+import {reachMetricaGoal} from './yaMetrica';
+
+type ObjectType = 'row_table' | 'column_table' | 'topic';
+type CreationGoal = 'createObject' | 'createObjectSuccess' | 'createObjectError';
+
+export function getObjectCreationErrorParams(error: unknown): Record<string, string | number> {
+    if (isQueryCancelledError(error)) {
+        return {errorType: 'cancelled'};
+    }
+    if (isResponseError(error)) {
+        if (typeof error.status === 'number' && error.status > 0) {
+            return {errorType: 'http', httpStatus: error.status};
+        }
+    }
+    if (isQueryErrorResponse(error)) {
+        return {errorType: 'ydb'};
+    }
+    if (isNetworkError(error)) {
+        return {errorType: 'network'};
+    }
+    if (
+        error &&
+        typeof error === 'object' &&
+        'code' in error &&
+        (error.code === 'ECONNABORTED' || error.code === 'ETIMEDOUT')
+    ) {
+        return {errorType: 'timeout'};
+    }
+    return {errorType: 'unknown'};
+}
+
+export function reachObjectCreationGoal(
+    goal: CreationGoal,
+    objectType: ObjectType,
+    error?: unknown,
+) {
+    try {
+        reachMetricaGoal(goal, {
+            objectType,
+            ...(goal === 'createObjectError' ? getObjectCreationErrorParams(error) : {}),
+        });
+    } catch {
+        // Analytics failures must not affect the creation request or its result.
+    }
+}