ydb-embedded-ui 0.1.0

package/dist/utils/prepareQueryExplain.ts

@@ -0,0 +1,101 @@
+import {
+    Link,
+    GraphNode,
+    TopologyNodeDataStats,
+    TopologyNodeDataStatsSection,
+    ExplainPlanNodeData,
+} from '@yandex-cloud/paranoid';
+
+interface PlanOperator {
+    Name: string;
+    [key: string]: any;
+}
+
+export interface Plan {
+    PlanNodeId: number;
+    'Node Type': string;
+    Plans?: Plan[];
+    Operators?: PlanOperator[];
+    Tables?: string[];
+    PlanNodeType?: string;
+    [key: string]: any;
+}
+
+export interface RootPlan {
+    Plan: Plan;
+}
+
+function prepareStats(plan: Plan) {
+    const stats: TopologyNodeDataStats[] = [];
+
+    if (plan.Operators) {
+        const operatorsSections: TopologyNodeDataStatsSection[] = [];
+
+        for (const operator of plan.Operators) {
+            const section: TopologyNodeDataStatsSection = {name: operator.Name, items: []};
+
+            for (const [name, data] of Object.entries(operator)) {
+                if (name === 'Name') {
+                    continue;
+                }
+
+                const value = Array.isArray(data) ? data.join(', ') : data;
+                section.items.push({name, value});
+            }
+
+            operatorsSections.push(section);
+        }
+
+        stats.push({
+            group: 'Operators',
+            stats: operatorsSections,
+        });
+    }
+
+    return stats;
+}
+
+export function preparePlan(plan: Plan) {
+    const nodes: GraphNode[] = [];
+    const links: Link[] = [];
+
+    let graphDepth = 0;
+
+    function parsePlans(plans: Plan[] = [], from: string, curDepth: number) {
+        const depth = curDepth + 1;
+        plans.forEach((p) => {
+            const node: GraphNode<ExplainPlanNodeData> = {
+                name: String(p.PlanNodeId),
+                data: {
+                    id: p.PlanNodeId,
+                    type: p.PlanNodeType === 'Connection' ? 'connection' : 'stage',
+                    name: p['Node Type'],
+                    operators: p.Operators?.map((o) => o.Name),
+                    stats: prepareStats(p),
+                    tables: p.Tables,
+                },
+            };
+            nodes.push(node);
+            links.push({from, to: node.name});
+            graphDepth = Math.max(graphDepth, depth);
+            parsePlans(p.Plans, node.name, depth);
+        });
+    }
+
+    const rootPlan = plan;
+    const rootNode: GraphNode<ExplainPlanNodeData> = {
+        name: String(rootPlan.PlanNodeId),
+        data: {
+            id: rootPlan.PlanNodeId,
+            type: 'stage',
+            name: rootPlan['Node Type'],
+        },
+    };
+    nodes.push(rootNode);
+    parsePlans(rootPlan.Plans, rootNode.name, 0);
+    return {
+        nodes,
+        links,
+        graphDepth,
+    };
+}

package/dist/utils/tooltip.js

@@ -0,0 +1,197 @@
+import cn from 'bem-cn-lite';
+import {calcUptime} from '.';
+import JSONTree from 'react-json-inspector';
+
+const poolB = cn('pool-tooltip');
+
+const PoolTooltip = (props) => {
+    const {data} = props;
+    const usage = (data.Usage * 100).toFixed(2);
+    return (
+        data && (
+            <div className={poolB()}>
+                <table>
+                    <tbody>
+                        <tr>
+                            <td className={poolB('label')}>Pool</td>
+                            <td>{data.Name}</td>
+                        </tr>
+                        <tr>
+                            <td className={poolB('label')}>Usage</td>
+                            <td>{usage} %</td>
+                        </tr>
+                        <tr>
+                            <td className={poolB('label')}>Threads</td>
+                            <td>{data.Threads}</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        )
+    );
+};
+
+const tabletB = cn('tablet-tooltip');
+
+const TabletTooltip = (props) => {
+    const {data, additionalData} = props;
+    return (
+        data && (
+            <div className={tabletB()}>
+                <table>
+                    <tbody>
+                        <tr>
+                            <td className={tabletB('label')}>Tablet</td>
+                            <td className={tabletB('value')}>{data.TabletId}</td>
+                        </tr>
+                        <tr>
+                            <td className={tabletB('label')}>NodeID</td>
+                            <td className={tabletB('value')}>{data.NodeId}</td>
+                        </tr>
+                        <tr>
+                            <td className={tabletB('label')}>State</td>
+                            <td className={tabletB('value')}>{data.State}</td>
+                        </tr>
+                        <tr>
+                            <td className={tabletB('label')}>Type</td>
+                            <td className={tabletB('value')}>{data.Type}</td>
+                        </tr>
+                        <tr>
+                            <td className={tabletB('label')}>Uptime</td>
+                            <td className={tabletB('value')}>{calcUptime(data.ChangeTime)}</td>
+                        </tr>
+                        <tr>
+                            <td className={tabletB('label')}>Generation</td>
+                            <td className={tabletB('value')}>{data.Generation}</td>
+                        </tr>
+                        {additionalData && (
+                            <tr>
+                                <td className={tabletB('label')}>{additionalData.name}</td>
+                                <td className={tabletB('value')}>{additionalData.value}</td>
+                            </tr>
+                        )}
+                    </tbody>
+                </table>
+            </div>
+        )
+    );
+};
+
+const nodeB = cn('node-tootltip');
+
+const NodeTooltip = (props) => {
+    const {data} = props;
+    return (
+        data && (
+            <div className={nodeB()}>
+                <table>
+                    <tbody>
+                        <tr>
+                            <td className={nodeB('label')}>ID</td>
+                            <td className={nodeB('value')}>{data.nodeId || '?'}</td>
+                        </tr>
+                        <tr>
+                            <td className={nodeB('label')}>Rack</td>
+                            <td className={nodeB('value')}>{data.rack || '?'}</td>
+                        </tr>
+                        {data.connected && data.capacity && (
+                            <tr>
+                                <td className={nodeB('label')}>Net</td>
+                                <td className={nodeB('value')}>
+                                    {`${data.connected} / ${data.capacity}`}
+                                </td>
+                            </tr>
+                        )}
+                    </tbody>
+                </table>
+            </div>
+        )
+    );
+};
+
+const tabletsOverallB = cn('tabletsOverall-tooltip');
+
+const TabletsOverallTooltip = (props) => {
+    const {data} = props;
+    return (
+        data && (
+            <div className={tabletsOverallB()}>
+                <table>
+                    <tbody>
+                        {data.map((colorInfo, key) => {
+                            return (
+                                <tr key={key}>
+                                    <td className={tabletsOverallB('label')}>{colorInfo.color}:</td>
+                                    <td className={tabletsOverallB('value')}>
+                                        {`${colorInfo.value}/${
+                                            colorInfo.total
+                                        } (${colorInfo.percents.toFixed(2)}%)`}
+                                    </td>
+                                </tr>
+                            );
+                        })}
+                    </tbody>
+                </table>
+            </div>
+        )
+    );
+};
+
+const histogramB = cn('histogram-tooltip');
+
+const HistogramTooltip = (props) => {
+    const {data} = props;
+    return (
+        data && (
+            <div className={histogramB()}>
+                <table>
+                    <tbody>
+                        <tr>
+                            <td className={histogramB('label')}>Count</td>
+                            <td className={histogramB('value')}>{data.count || '?'}</td>
+                        </tr>
+                        <tr>
+                            <td className={histogramB('label')}>From</td>
+                            <td className={histogramB('value')}>{data.leftBound || '?'}</td>
+                        </tr>
+                        <tr>
+                            <td className={histogramB('label')}>To</td>
+                            <td className={histogramB('value')}>{data.rightBound || '?'}</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        )
+    );
+};
+
+const cellB = cn('cell-tooltip');
+const jsonB = cn('json-tooltip');
+
+export const tooltipTemplates = {
+    // eslint-disable-next-line react/display-name
+    pool: (data) => <PoolTooltip data={data} />,
+    // eslint-disable-next-line react/display-name
+    tablet: (data, additionalData) => <TabletTooltip data={data} additionalData={additionalData} />,
+    // eslint-disable-next-line react/display-name
+    node: (data) => <NodeTooltip data={data} />,
+    // eslint-disable-next-line react/display-name
+    tabletsOverall: (data) => <TabletsOverallTooltip data={data} />,
+    // eslint-disable-next-line react/display-name
+    histogram: (data) => <HistogramTooltip data={data} />,
+    // eslint-disable-next-line react/display-name
+    cell: (data) => <div className={cellB()}>{data}</div>,
+    // eslint-disable-next-line react/display-name
+    json: (data) => {
+        return (
+            <div className={jsonB()}>
+                <JSONTree
+                    data={data}
+                    search={false}
+                    isExpanded={() => true}
+                    className={jsonB('inspector')}
+                />
+            </div>
+        );
+    },
+};

package/dist/utils/utils.js

@@ -0,0 +1,75 @@
+export function parseJson(value) {
+    if (!value) {
+        return;
+    }
+    try {
+        return JSON.parse(value);
+    } catch (err) {
+        console.log(err);
+        return value;
+    }
+}
+
+export function getValueFromLS(key, defaultValue) {
+    try {
+        return localStorage.getItem(key) ?? defaultValue;
+    } catch (err) {
+        console.log(err);
+    }
+    return;
+}
+
+const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB'];
+const base = 1000;
+
+export function bytesToSize(bytes) {
+    if (isNaN(bytes)) {
+        return '';
+    }
+    if (bytes < base) return String(bytes);
+    let i = parseInt(Math.floor(Math.log(bytes) / Math.log(base)));
+    if (i >= sizes.length) {
+        i = sizes.length - 1;
+    }
+    let val = bytes / Math.pow(base, i);
+    if (val > 999) {
+        val = val / base;
+        i++;
+    }
+    return val.toPrecision(3) + sizes[i];
+}
+
+function bytesToMB(bytes) {
+    if (isNaN(bytes)) {
+        return '';
+    }
+    const val = bytes / base ** 2;
+    if (val < 10) {
+        return val.toFixed(2) + sizes[2];
+    } else if (val < 100) {
+        return val.toFixed(1) + sizes[2];
+    } else {
+        return val.toFixed() + sizes[2];
+    }
+}
+
+export function bytesToSpeed(bytes) {
+    return `${bytesToMB(bytes)}${bytes ? 'ps' : ''}`;
+}
+
+export function bytesToGB(bytes, shouldRound) {
+    if (isNaN(bytes)) {
+        return 'N/A';
+    }
+    const val = bytes / 1000000000;
+    if (shouldRound) {
+        return val.toFixed() + sizes[3];
+    }
+    if (val < 10) {
+        return val.toFixed(2) + sizes[3];
+    } else if (val < 100) {
+        return val.toFixed(1) + sizes[3];
+    } else {
+        return val.toFixed() + sizes[3];
+    }
+}

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "ydb-embedded-ui",
+  "version": "0.1.0",
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:ydb-platform/ydb-embedded-ui.git"
+  },
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.15.0",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/user-event": "^12.8.3",
+    "@yandex-cloud/i18n": "^0.2.0",
+    "@yandex-cloud/paranoid": "^1.0.0",
+    "@yandex-cloud/react-data-table": "^0.2.1",
+    "axios": "^0.19.2",
+    "bem-cn-lite": "^4.0.0",
+    "history": "^4.9.0",
+    "js-cookie": "^2.2.1",
+    "keymaster": "^1.6.2",
+    "lodash": "^4.17.11",
+    "monaco-editor": "^0.24.0",
+    "numeral": "^2.0.6",
+    "path-to-regexp": "^3.0.0",
+    "react-json-inspector": "^7.1.1",
+    "react-list": "^0.8.11",
+    "react-monaco-editor": "^0.30.1",
+    "react-redux": "^7.0.3",
+    "react-router": "^5.0.1",
+    "react-router-dom": "^5.0.1",
+    "react-scripts": "^4.0.3",
+    "react-transition-group": "^4.4.2",
+    "react-treeview": "^0.4.7",
+    "react-use": "^15.3.4",
+    "redux": "^4.0.1",
+    "redux-location-state": "^2.6.0",
+    "redux-thunk": "^2.3.0",
+    "reselect": "^4.0.0",
+    "sass": "^1.32.8",
+    "web-vitals": "^1.1.2"
+  },
+  "scripts": {
+    "start": "react-app-rewired start",
+    "dev": "REACT_APP_BACKEND=http://localhost:8765 npm start",
+    "build": "react-app-rewired build",
+    "build:embedded": "rm -rf build && REACT_APP_BACKEND=http://localhost:8765 npm run build && ./prepare-build.sh",
+    "package": "rm -rf dist && copyfiles -u 1 'src/**/*' dist",
+    "test": "react-app-rewired test",
+    "eject": "react-scripts eject",
+    "prepublishOnly": "npm run package"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^15.0.0",
+    "@commitlint/config-conventional": "^15.0.0",
+    "@types/lodash": "^4.14.178",
+    "@types/react-dom": "^17.0.11",
+    "@types/react-router": "^5.1.17",
+    "@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",
+    "@yandex-cloud/eslint-config": "^1.0.0",
+    "@yandex-cloud/prettier-config": "^1.0.0",
+    "@yandex-cloud/stylelint-config": "^1.1.0",
+    "@yandex-cloud/tsconfig": "^1.0.0",
+    "@yandex-cloud/uikit": "^1.7.0",
+    "copyfiles": "^2.4.1",
+    "eslint-config-prettier": "^8.3.0",
+    "prettier": "^2.5.1",
+    "react": "^17.0.2",
+    "react-app-rewired": "^2.1.11",
+    "react-dom": "^17.0.2",
+    "typescript": "^4.5.4"
+  }
+}