ydb-embedded-ui 1.8.7 → 1.10.0

package/dist/types/api/storage.ts

@@ -0,0 +1,54 @@
+enum EFlag {
+    Grey = 'Grey',
+    Green = 'Green',
+    Yellow = 'Yellow',
+    Orange = 'Orange',
+    Red = 'Red',
+}
+
+export enum TPDiskState {
+    Initial = 'Initial',
+    InitialFormatRead = 'InitialFormatRead',
+    InitialFormatReadError = 'InitialFormatReadError',
+    InitialSysLogRead = 'InitialSysLogRead',
+    InitialSysLogReadError = 'InitialSysLogReadError',
+    InitialSysLogParseError = 'InitialSysLogParseError',
+    InitialCommonLogRead = 'InitialCommonLogRead',
+    InitialCommonLogReadError = 'InitialCommonLogReadError',
+    InitialCommonLogParseError = 'InitialCommonLogParseError',
+    CommonLoggerInitError = 'CommonLoggerInitError',
+    Normal = 'Normal',
+    OpenFileError = 'OpenFileError',
+    ChunkQuotaError = 'ChunkQuotaError',
+    DeviceIoError = 'DeviceIoError',
+
+    Missing = 'Missing',
+    Timeout = 'Timeout',
+    NodeDisconnected = 'NodeDisconnected',
+    Unknown = 'Unknown',
+}
+
+export interface TPDiskStateInfo {
+    PDiskId?: number;
+    /** uint64 */
+    CreateTime?: string;
+    /** uint64 */
+    ChangeTime?: string;
+    Path?: string;
+    /** uint64 */
+    Guid?: string;
+    /** uint64 */
+    Category?: string;
+    /** uint64 */
+    AvailableSize?: string;
+    /** uint64 */
+    TotalSize?: string;
+    State?: TPDiskState;
+    NodeId?: number;
+    Count?: number;
+    Device?: EFlag;
+    Realtime?: EFlag;
+    StateFlag?: EFlag;
+    Overall?: EFlag;
+    SerialNumber?: string;
+}

package/dist/utils/getNodesColumns.js

@@ -33,6 +33,8 @@ export function getNodesColumns({showTooltip, hideTooltip, tabletsPath, getNodeR
                     <div className={b('host-name-wrapper')}>
                         <EntityStatus
                             name={row.Host}
+                            onNameMouseEnter={(e) => showTooltip(e.target, row, 'nodeEndpoints')}
+                            onNameMouseLeave={hideTooltip}
                             status={row.Overall}
                             path={getDefaultNodePath(row.NodeId)}
                             hasClipboardButton

package/dist/utils/pdisk.ts

@@ -0,0 +1,74 @@
+import type {TPDiskStateInfo} from "../types/api/storage";
+
+// TODO: move to utils or index after converting them to TS
+/**
+ * Parses a binary string containing a bit field into an object with binary values.
+ * This is an implementation based on string manipulation, since JS can only perform
+ * bitwise operations with 32-bits integers, and YDB sends uint64.
+ * @see https://en.cppreference.com/w/c/language/bit_field
+ * @param binaryString - binary string representing a bit field
+ * @param bitFieldStruct - bit field description, <field => size in bits>, in order starting from the rightmost bit
+ * @returns object with binary values
+ */
+export const parseBitField = <T extends Record<string, number>>(
+    binaryString: string,
+    bitFieldStruct: T,
+): Record<keyof T, string> => {
+    const fields: Partial<Record<keyof T, string>> = {};
+
+    Object.entries(bitFieldStruct).reduce((prefixSize, [field, size]: [keyof T, number]) => {
+        const end = binaryString.length - prefixSize;
+        const start = end - size;
+        fields[field] = binaryString.substring(start, end) || '0';
+
+        return prefixSize + size;
+    }, 0);
+
+    return fields as Record<keyof T, string>;
+};
+
+export enum IPDiskType {
+    ROT = 'ROT',
+    SSD = 'SSD',
+    MVME = 'NVME',
+}
+
+// Bear with me.
+// Disk type is determined by the field Category.
+// Category is a bit field defined as follows:
+// struct {
+//     ui64 IsSolidState : 1;
+//     ui64 Kind : 55;
+//     ui64 TypeExt : 8;
+// }
+// For compatibility TypeExt is not used for old types (ROT, SSD), so the following scheme is used:
+// ROT  -> IsSolidState# 0, TypeExt# 0
+// SSD  -> IsSolidState# 1, TypeExt# 0
+// NVME -> IsSolidState# 1, TypeExt# 2
+// Reference on bit fields: https://en.cppreference.com/w/c/language/bit_field
+export const getPDiskType = (data: TPDiskStateInfo): IPDiskType | undefined => {
+    if (!data.Category) {
+        return undefined;
+    }
+
+    // Category is uint64, too big for Number or bitwise operators, thus BigInt and a custom parser
+    const categotyBin = BigInt(data.Category).toString(2);
+    const categoryBitField = parseBitField(categotyBin, {
+        isSolidState: 1,
+        kind: 55,
+        typeExt: 8,
+    });
+
+    if (categoryBitField.isSolidState === '1') {
+        switch (parseInt(categoryBitField.typeExt, 2)) {
+            case 0:
+                return IPDiskType.SSD;
+            case 2:
+                return IPDiskType.MVME;
+        }
+    } else if (categoryBitField.typeExt === '0') {
+        return IPDiskType.ROT;
+    }
+
+    return undefined;
+};

package/dist/utils/tooltip.js

@@ -109,6 +109,32 @@ const NodeTooltip = (props) => {
     );
 };
 
+const NodeEndpointsTooltip = (props) => {
+    const {data} = props;
+    return (
+        data && (
+            <div className={nodeB()}>
+                <table>
+                    <tbody>
+                        {data.Rack && (
+                            <tr>
+                                <td className={nodeB('label')}>Rack</td>
+                                <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>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+        )
+    );
+};
+
 const tabletsOverallB = cn('tabletsOverall-tooltip');
 
 const TabletsOverallTooltip = (props) => {
@@ -175,6 +201,7 @@ export const tooltipTemplates = {
     tablet: (data, additionalData) => <TabletTooltip data={data} additionalData={additionalData} />,
     // eslint-disable-next-line react/display-name
     node: (data) => <NodeTooltip data={data} />,
+    nodeEndpoints: (data) => <NodeEndpointsTooltip data={data} />,
     // eslint-disable-next-line react/display-name
     tabletsOverall: (data) => <TabletsOverallTooltip data={data} />,
     // eslint-disable-next-line react/display-name

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "1.8.7",
+  "version": "1.10.0",
   "files": [
     "dist"
   ],
@@ -40,7 +40,7 @@
     "reselect": "4.0.0",
     "sass": "1.32.8",
     "web-vitals": "1.1.2",
-    "ydb-ui-components": "2.3.0"
+    "ydb-ui-components": "2.4.1"
   },
   "scripts": {
     "start": "react-app-rewired start",