ydb-embedded-ui 0.1.0

package/dist/styles/react-treeview.scss

@@ -0,0 +1,45 @@
+/* the tree node's style */
+
+.tree-view {
+    overflow-y: hidden;
+}
+
+.tree-view_item {
+    display: flex;
+    align-items: center;
+
+    margin: 10px 0;
+
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.tree-view_children {
+    margin-left: 35px;
+
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.tree-view_children-collapsed {
+    height: 0px;
+}
+
+.tree-view_arrow {
+    display: inline-block;
+
+    margin-right: 6px;
+
+    cursor: pointer;
+    user-select: none;
+}
+
+.tree-view_arrow:after {
+    content: '▾';
+}
+
+/* rotate the triangle to close it */
+
+.tree-view_arrow-collapsed {
+    transform: rotate(-90deg);
+}

package/dist/types/assets.d.ts

@@ -0,0 +1,12 @@
+declare module '*.svg' {
+    const content: SVGIconData;
+    export default content;
+}
+
+declare module '*.png';
+declare module '*.jpg';
+declare module '*.jpeg';
+declare module '*.ico';
+
+declare type SVGIconData =
+    import('@yandex-cloud/uikit/build/esm/components/Icon/types').SVGIconData;

package/dist/types/react-list.d.ts

@@ -0,0 +1,4 @@
+declare module 'react-list' {
+    const ReactList: any;
+    export default ReactList;
+}

package/dist/types/window.d.ts

@@ -0,0 +1,33 @@
+enum RumErrorLevel {
+    DEBUG = 'debug',
+    ERROR = 'error',
+    FATAL = 'fatal',
+    INFO = 'info',
+    WARN = 'warn',
+}
+
+interface RumLogData {
+    message?: string;
+    block?: string;
+    method?: string;
+    source?: string;
+    sourceMethod?: string;
+    type?: string;
+    page?: string;
+    service?: string;
+    level?: RumErrorLevel;
+    additional?: {
+        [key: string]: string;
+    };
+}
+
+interface RumCounter {
+    ERROR_LEVEL: typeof RumErrorLevel;
+    logError: (data: RumLogData, error?: Error) => void;
+}
+
+interface Window {
+    Ya?: {
+        Rum?: RumCounter;
+    };
+}

package/dist/utils/actionsConstants.js

@@ -0,0 +1,4 @@
+export const toolTipConstants = {
+    UPDATE_REF: 'UPDATE_REF',
+    HIDE_TOOLTIP: 'HIDE_TOOLTIP',
+};

package/dist/utils/constants.js

@@ -0,0 +1,126 @@
+const SECOND = 1000;
+
+export const CLUSTER_AUTO_RELOAD_INTERVAL = 10 * SECOND;
+export const TENANT_AUTO_RELOAD_INTERVAL = 10 * SECOND;
+export const TENANTS_AUTO_RELOAD_INTERVAL = 10 * SECOND;
+export const STORAGE_AUTO_RELOAD_INTERVAL = 10 * SECOND;
+export const GROUP_AUTO_RELOAD_INTERVAL = 10 * SECOND;
+export const NODE_AUTO_RELOAD_INTERVAL = 10 * SECOND;
+export const PDISK_AUTO_RELOAD_INTERVAL = 10 * SECOND;
+export const VDISK_AUTO_RELOAD_INTERVAL = 10 * SECOND;
+export const AUTO_RELOAD_INTERVAL = 10 * SECOND;
+export const HEALTHCHECK_RELOAD_INTERVAL = 10 * SECOND;
+export const MEGABYTE = 1000000;
+export const TERABYTE = 1000000000000;
+export const GROUP = 'group';
+
+export const DAY_IN_SECONDS = 24 * 60 * 60;
+
+export const TABLET_STATES = {
+    TABLET_VOLATILE_STATE_UNKNOWN: 'unknown',
+    TABLET_VOLATILE_STATE_STOPPED: 'stopped',
+    TABLET_VOLATILE_STATE_BOOTING: 'booting',
+    TABLET_VOLATILE_STATE_STARTING: 'starting',
+    TABLET_VOLATILE_STATE_RUNNING: 'running',
+    TABLET_VOLATILE_STATE_BLOCKED: 'blocked',
+};
+
+export const TABLET_COLORS = {
+    Created: 'gray',
+    ResolveStateStorage: 'lightgray',
+    Candidate: 'lightgray',
+    BlockBlobStorage: 'lightgray',
+    RebuildGraph: 'yellow',
+    Restored: 'yellow',
+    Discover: 'orange',
+    Lock: 'lightblue',
+    Dead: 'black',
+    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 = {
+    OldTxProxy: 'P',
+    TxProxy: 'P',
+    BSController: 'BS',
+    Dummy: 'DY',
+    RTMRPartition: 'RP',
+    PersQueueReadBalancer: 'PB',
+    Cms: 'CM',
+    BlockStorePartition: 'BP',
+    BlockStoreVolume: 'BV',
+    Console: 'CN',
+    TenantSlotBroker: 'TB',
+};
+
+export const getTabletLabel = (type) => {
+    if (!type) {
+        return;
+    }
+    const defaultValue = type.match(/[A-Z]/g).join('');
+
+    return TABLET_SYMBOLS[type] || defaultValue;
+};
+
+export const LOAD_AVERAGE_TIME_INTERVALS = ['1 min', '5 min', '15 min'];
+
+export const PDISK_CATEGORIES = {
+    0: 'HDD',
+    1: 'SSD',
+};
+
+export const COLORS_PRIORITY = {
+    green: 5,
+    yellow: 4,
+    orange: 3,
+    red: 2,
+    black: 1,
+    gray: 1,
+};
+
+export const ALL = 'All';
+export const PROBLEMS = 'Problems';
+
+export const THEME_KEY = 'theme';
+export const SAVED_QUERIES_KEY = 'saved_queries';
+export const DATA_QA_TUNE_COLUMNS_POPUP = 'tune-columns-popup';
+export const SELECTED_COLUMNS_KEY = 'selectedColumns';
+export const defaultUserSettings = {
+    [THEME_KEY]: 'light',
+};
+export const DEFAULT_SIZE_RESULT_PANE_KEY = 'default-size-result-pane';
+export const DEFAULT_SIZE_SHEMA_TREE_PANE_KEY = 'default-size-schema-tree-pane';

package/dist/utils/getNodesColumns.js

@@ -0,0 +1,156 @@
+import _ from 'lodash';
+import DataTable from '@yandex-cloud/react-data-table';
+import {Link as ExternalLink, Tooltip} from '@yandex-cloud/uikit';
+
+import Icon from '../components/Icon/Icon';
+import EntityStatus from '../components/EntityStatus/EntityStatus';
+import {STORAGE_ROLE} from '../containers/Node/Node';
+import PoolsGraph from '../components/PoolsGraph/PoolsGraph';
+import ProgressViewer from '../components/ProgressViewer/ProgressViewer';
+import TabletsStatistic from '../components/TabletsStatistic/TabletsStatistic';
+
+import routes, {createHref} from '../routes';
+import {STORAGE, TABLETS} from '../containers/Node/NodePages';
+import {formatBytes} from './index';
+
+export function getNodesColumns({showTooltip, hideTooltip, tabletsPath, getNodeRef}) {
+    const columns = [
+        {
+            name: 'NodeId',
+            header: '#',
+            width: '80px',
+            align: DataTable.RIGHT,
+        },
+        {
+            name: 'NodeRef',
+            header: '',
+            sortable: false,
+            render: ({row}) => {
+                const nodeRef = getNodeRef ? getNodeRef(row) : undefined;
+                return (
+                    nodeRef && (
+                        <ExternalLink href={nodeRef}>
+                            <Icon name="external" />
+                        </ExternalLink>
+                    )
+                );
+            },
+            width: '40px',
+            align: DataTable.LEFT,
+        },
+        {
+            name: 'Host',
+            render: ({row, value}) => {
+                const hasStorage = _.find(row?.Roles, (el) => el === STORAGE_ROLE);
+                if (typeof value === 'undefined') {
+                    return <span>—</span>;
+                }
+                return (
+                    <EntityStatus
+                        name={row.Host}
+                        status={row.Overall}
+                        path={createHref(routes.node, {
+                            id: row.NodeId,
+                            activeTab: hasStorage ? STORAGE : TABLETS,
+                        })}
+                        hasClipboardButton
+                    />
+                );
+            },
+            width: '350px',
+            align: DataTable.LEFT,
+        },
+        {
+            name: 'DataCenter',
+            header: 'DC',
+            align: DataTable.LEFT,
+            render: ({value}) => (value ? value : '—'),
+            width: '60px',
+        },
+        {
+            name: 'Version',
+            width: '200px',
+            align: DataTable.LEFT,
+            render: ({value}) => {
+                return <Tooltip content={value}>{value}</Tooltip>;
+            },
+        },
+        {
+            name: 'uptime',
+            header: 'Uptime',
+            sortAccessor: ({StartTime}) => -StartTime,
+            align: DataTable.LEFT,
+            width: '110px',
+        },
+        {
+            name: 'MemoryUsed',
+            header: 'Memory',
+            sortAccessor: ({MemoryUsed = 0}) => Number(MemoryUsed),
+            defaultOrder: DataTable.DESCENDING,
+            render: ({value, row}) => {
+                if (value) {
+                    return formatBytes(value);
+                }
+                if (row.Metrics) {
+                    return formatBytes(row.Metrics.Memory);
+                } else {
+                    return '—';
+                }
+            },
+            align: DataTable.RIGHT,
+            width: '120px',
+        },
+        {
+            name: 'PoolStats',
+            header: 'CPU',
+            sortAccessor: ({PoolStats = []}) =>
+                PoolStats.reduce((acc, item) => acc + item.Usage, 0),
+            defaultOrder: DataTable.DESCENDING,
+            render: ({value}) =>
+                value ? (
+                    <PoolsGraph
+                        onMouseEnter={showTooltip}
+                        onMouseLeave={hideTooltip}
+                        pools={value}
+                    />
+                ) : (
+                    '—'
+                ),
+            align: DataTable.LEFT,
+            width: '120px',
+        },
+        {
+            name: 'LoadAverage',
+            header: 'Load average',
+            sortAccessor: ({LoadAverage = []}) =>
+                LoadAverage.slice(0, 1).reduce((acc, item) => acc + item, 0),
+            defaultOrder: DataTable.DESCENDING,
+            render: ({value}) =>
+                value && value.length > 0 ? (
+                    <ProgressViewer value={value[0]} percents={true} colorizeProgress={true} />
+                ) : (
+                    '—'
+                ),
+            align: DataTable.LEFT,
+            width: '140px',
+        },
+        {
+            name: 'Tablets',
+            width: '330px',
+            render: ({row}) => {
+                return row.Tablets ? (
+                    <TabletsStatistic
+                        path={tabletsPath ?? row.TenantName}
+                        nodeIds={[row.NodeId]}
+                        tablets={row.Tablets}
+                    />
+                ) : (
+                    '—'
+                );
+            },
+            align: DataTable.LEFT,
+        },
+    ];
+
+    return columns;
+}

package/dist/utils/i18n/i18n.ts

@@ -0,0 +1,7 @@
+import {I18N} from '@yandex-cloud/i18n';
+
+export type Lang = keyof typeof I18N.LANGS;
+
+export const i18n = new I18N();
+
+export {I18N} from '@yandex-cloud/i18n';

package/dist/utils/i18n/index.ts

@@ -0,0 +1 @@
+export * from './i18n';

package/dist/utils/index.js

@@ -0,0 +1,136 @@
+import numeral from 'numeral';
+import _ from 'lodash';
+
+import {MEGABYTE, TERABYTE, DAY_IN_SECONDS} from './constants';
+
+import locales from 'numeral/locales'; // eslint-disable-line no-unused-vars
+numeral.locale('ru');
+numeral.localeData().delimiters.decimal = '.';
+
+export const formatBytes = (bytes) => {
+    return numeral(bytes).format('0 ib').replace('i', '');
+};
+
+export const stringifyVdiskId = (id) => {
+    return Object.values(id).join('-');
+};
+export const getPDiskId = (info) => {
+    return `${info.NodeId}-${info.PDiskId}`;
+};
+
+export const formatUptime = (seconds) => {
+    const days = Math.floor(seconds / DAY_IN_SECONDS);
+    const remain = seconds % DAY_IN_SECONDS;
+
+    const uptime = [days && `${days}d`, numeral(remain).format('00:00:00')]
+        .filter(Boolean)
+        .join(' ');
+
+    return uptime;
+};
+
+export const formatIOPS = (value, capacity) => {
+    return [Math.floor(value), Math.floor(capacity) + ' IOPS'];
+};
+
+export const formatStorageValues = (value, total) => {
+    return [Math.floor(value / TERABYTE), `${Math.floor(total / TERABYTE)} TB`];
+};
+export const formatStorageValuesToGb = (value, total) => {
+    return [Math.floor(value / 1000000000), `${Math.floor(total / 1000000000)} GB`];
+};
+
+export const formatThroughput = (value, total) => {
+    return [(value / MEGABYTE).toFixed(2), (total / MEGABYTE).toFixed(1) + ' MB/s'];
+};
+
+export const formatNumber = (number) => {
+    return numeral(number).format();
+};
+
+export const formatCPU = (value) => {
+    return numeral(value / 1000000).format('0.00');
+};
+
+export const calcUptime = (milliseconds) => {
+    const currentDate = new Date();
+    return formatUptime((currentDate - Number(milliseconds)) / 1000);
+};
+
+// функция определяет, сколько нод имеют статус Connected "true"
+export const getConnectedNodesCount = (nodeStateInfo) => {
+    return nodeStateInfo?.reduce((acc, item) => (item.Connected ? acc + 1 : acc), 0);
+};
+
+export const renderExplainNode = (node) => {
+    const parts = node.name.split('|');
+    return parts.length > 1 ? parts[1] : node.name;
+};
+
+export const getExplainNodeId = (...values) => {
+    return values.join('|');
+};
+
+const getStringFromProps = (props) => {
+    return props
+        .map(([name, value]) => {
+            return value && `${name}: ${Array.isArray(value) ? value.join(', ') : value}`;
+        })
+        .filter(Boolean)
+        .join('\n');
+};
+
+export const getMetaForExplainNode = (node) => {
+    switch (node.type) {
+        case 'MultiLookup':
+        case 'Lookup': {
+            return getStringFromProps([
+                ['lookup by', node.lookup_by],
+                ['columns', node.columns],
+            ]);
+        }
+        case 'FullScan':
+        case 'Scan': {
+            return getStringFromProps([
+                ['scan by', node.scan_by],
+                ['limit', node.limit],
+                ['columns', node.columns],
+            ]);
+        }
+        case 'Upsert':
+        case 'MultiUpsert': {
+            return getStringFromProps([
+                ['key', node.key],
+                ['columns', node.columns],
+            ]);
+        }
+        case 'Erase':
+        case 'MultiErase': {
+            return getStringFromProps([
+                ['key', node.key],
+                ['columns', node.columns],
+            ]);
+        }
+        default:
+            return '';
+    }
+};
+
+export const prepareQueryResponse = (data) => {
+    return _.map(data, (item) => {
+        const formattedData = {};
+
+        for (const field in item) {
+            if (Object.prototype.hasOwnProperty.call(item, field)) {
+                const type = typeof item[field];
+                if (type === 'object' || type === 'boolean' || Array.isArray(item[field])) {
+                    formattedData[field] = JSON.stringify(item[field]);
+                } else {
+                    formattedData[field] = item[field];
+                }
+            }
+        }
+
+        return formattedData;
+    });
+};

package/dist/utils/monaco.js

@@ -0,0 +1,69 @@
+import * as monaco from 'monaco-editor';
+
+export const LANGUAGE_S_EXPRESSION_ID = 's-expression';
+
+function registerSExpressionLanguage() {
+    monaco.languages.register({id: LANGUAGE_S_EXPRESSION_ID});
+    monaco.languages.setMonarchTokensProvider(LANGUAGE_S_EXPRESSION_ID, {
+        defaultToken: 'text',
+        ignoreCase: true,
+        tokenPostfix: '.yql',
+
+        brackets: [
+            {open: '[', close: ']', token: 'delimiter.square'},
+            {open: '(', close: ')', token: 'delimiter.parenthesis'},
+            {open: '{', close: '}', token: 'delimiter.curly'},
+        ],
+
+        keywordControl: 'bind|block|declare|export|import|lambda|let|quote|return'.split('|'),
+
+        escapes: /\\(?:[abfnrtv\\"']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,
+
+        tokenizer: {
+            root: [
+                {include: '@whitespace'},
+                {include: '@comment'},
+                [/(#)((?:\w|[\\+-=<>'"&#])+)/, ['delimiter', 'constant']],
+                [
+                    /(?:\b(?:(defun|defmethod|defmacro))\b)(\s+)((?:\w|-|\?)*)/,
+                    ['type.function', 'text', 'entity.name'],
+                ],
+                [/(\*)(\S*)(\*)/, ['delimiter', 'variable', 'delimiter']],
+                {include: '@strings'},
+                [/'[^#\s)(]+/, 'variable.parameter'],
+                [/[(){}[\]]/, '@brackets'],
+                // identifiers and keywords
+                [
+                    /(?:(?:<=?|>=?|==|!=|[-+*/%])|[a-zA-Z][a-zA-Z0-9!]*)/,
+                    {
+                        cases: {
+                            '@keywordControl': {token: 'keyword.operator'},
+                            '@default': 'identifier',
+                        },
+                    },
+                ],
+            ],
+            whitespace: [[/\s+/, 'white']],
+            comment: [[/#.*/, 'comment']],
+            strings: [
+                [/'?"(?=.)/, {token: 'string', next: '@qqstring'}],
+                [/'?[@]{2}/, {token: 'string', next: '@multiline'}],
+                [/'?x"(?:[0-9A-Fa-f]{2})*"/, 'string'],
+            ],
+            qqstring: [
+                [/\\(?:[0-3][0-7][0-7]|x[0-9A-Fa-f]{2}|["tnrbfav\\])/, 'string.escape'],
+                [/[^"\\]+/, 'string'],
+                [/"|$/, {token: 'string', next: '@pop'}],
+            ],
+            multiline: [
+                [/[^@]+/, 'string'],
+                [/[@]{2}/, {token: 'string', next: '@pop'}],
+                [/./, {token: 'string'}],
+            ],
+        },
+    });
+}
+
+export function registerLanguages() {
+    registerSExpressionLanguage();
+}