ydb-embedded-ui 20.2.0 → 20.3.0

package/src/containers/Clusters/columns.tsx

@@ -0,0 +1,523 @@
+import {Pencil, TrashBin} from '@gravity-ui/icons';
+import DataTable from '@gravity-ui/react-data-table';
+import type {Column} from '@gravity-ui/react-data-table';
+import {
+    ClipboardButton,
+    Link as ExternalLink,
+    Flex,
+    Label,
+    Progress,
+    Text,
+} from '@gravity-ui/uikit';
+
+import type {DropdownMenuItemWithDescription} from '../../components/DropdownMenu';
+import {DropdownMenu} from '../../components/DropdownMenu';
+import {EntityStatus} from '../../components/EntityStatus/EntityStatus';
+import {VersionsBar} from '../../components/VersionsBar/VersionsBar';
+import type {PreparedCluster} from '../../store/reducers/clusters/types';
+import type {ClusterLink} from '../../types/additionalProps';
+import {EFlag} from '../../types/api/enums';
+import {uiFactory} from '../../uiFactory/uiFactory';
+import {CLUSTER_LINK_CONTEXT} from '../../utils/clusterLinks/clusterLinkConstants';
+import {resolveClusterLinks} from '../../utils/clusterLinks/resolveClusterLinks';
+import {EMPTY_DATA_PLACEHOLDER, MONITORING_UI_TITLE} from '../../utils/constants';
+import {formatNumber, formatStorageValuesToTb} from '../../utils/dataFormatters/dataFormatters';
+import {getCleanBalancerValue} from '../../utils/parseBalancer';
+import type {PreparedVersion} from '../../utils/versions/types';
+import {clusterTabsIds} from '../Cluster/utils';
+
+import {COLUMNS_NAMES, COLUMNS_TITLES} from './constants';
+import i18n from './i18n';
+import {b} from './shared';
+import {calculateClusterPath} from './utils';
+export const CLUSTERS_COLUMNS_WIDTH_LS_KEY = 'clustersTableColumnsWidth';
+
+const EMPTY_CELL = <span className={b('empty-cell')}>{EMPTY_DATA_PLACEHOLDER}</span>;
+
+/**
+ * Helper function to get the first version from a list of prepared versions
+ * Strips numeric prefixes (e.g., "1.2.3." -> "2.3.") and sorts the versions
+ * Used as sortAccessor for version columns
+ */
+export function getFirstVersion(preparedVersions: PreparedVersion[]): string | undefined {
+    const versions = preparedVersions
+        .map((item) => item.version.replace(/^\d+\./, ''))
+        .sort((v1, v2) => {
+            // Split versions into components (dots or dashes)
+            const parts1 = v1.split(/[.-]/);
+            const parts2 = v2.split(/[.-]/);
+
+            // Compare each component
+            const maxLength = Math.max(parts1.length, parts2.length);
+            for (let i = 0; i < maxLength; i++) {
+                const part1 = parts1[i] || '';
+                const part2 = parts2[i] || '';
+
+                // Check if both parts are purely numeric
+                const isNum1 = /^\d+$/.test(part1);
+                const isNum2 = /^\d+$/.test(part2);
+
+                // If both are purely numeric, compare numerically
+                if (isNum1 && isNum2) {
+                    const num1 = parseInt(part1, 10);
+                    const num2 = parseInt(part2, 10);
+                    if (num1 !== num2) {
+                        return num1 - num2;
+                    }
+                } else {
+                    // Otherwise, compare lexicographically
+                    const comparison = part1.localeCompare(part2);
+                    if (comparison !== 0) {
+                        return comparison;
+                    }
+                }
+            }
+            return 0;
+        });
+
+    return versions[0] || undefined;
+}
+
+interface ClustersColumnsParams {
+    isEditClusterAvailable?: boolean;
+    isDeleteClusterAvailable?: boolean;
+    onStatusClick?: (row: PreparedCluster) => void;
+}
+
+function getTitleColumn({
+    isEditClusterAvailable,
+    isDeleteClusterAvailable,
+    onStatusClick,
+}: ClustersColumnsParams) {
+    return {
+        name: COLUMNS_NAMES.TITLE,
+        header: COLUMNS_TITLES[COLUMNS_NAMES.TITLE],
+        width: 320,
+        defaultOrder: DataTable.ASCENDING,
+        sortAccessor: (row) => row.title || row.name,
+        render: ({row}) => {
+            const clusterStatus = row.cluster?.Overall;
+
+            const cleanedBalancer = row.balancer ? getCleanBalancerValue(row.balancer) : null;
+
+            const renderActions = () => {
+                const menuItems: (
+                    | DropdownMenuItemWithDescription
+                    | DropdownMenuItemWithDescription[]
+                )[] = [];
+
+                const additionalLinks: ClusterLink[] = [];
+
+                if (row.monitoring) {
+                    const monitoringUrl = uiFactory.getMonitoringClusterLink?.(
+                        row.monitoring,
+                        row.name,
+                    );
+
+                    if (monitoringUrl) {
+                        additionalLinks.push({
+                            title: MONITORING_UI_TITLE,
+                            url: monitoringUrl,
+                            context: CLUSTER_LINK_CONTEXT.MONITORING,
+                        });
+                    }
+                }
+
+                if (uiFactory.getClusterLinks) {
+                    additionalLinks.push(...uiFactory.getClusterLinks({clusterInfo: row}));
+                }
+
+                const clusterLinks = resolveClusterLinks(row, additionalLinks);
+
+                if (clusterLinks.length) {
+                    menuItems.push(
+                        clusterLinks.map((link) => ({
+                            title: link.title,
+                            description: link.description,
+                            iconStart: link.icon,
+                            href: link.url,
+                            target: link.target,
+                        })),
+                    );
+                }
+
+                const {onEditCluster, onDeleteCluster} = uiFactory;
+
+                const manageItems: DropdownMenuItemWithDescription[] = [];
+
+                if (isEditClusterAvailable && onEditCluster) {
+                    manageItems.push({
+                        title: i18n('edit-cluster'),
+                        iconStart: Pencil,
+                        action: () => {
+                            onEditCluster({clusterData: row});
+                        },
+                    });
+                }
+                if (isDeleteClusterAvailable && onDeleteCluster) {
+                    manageItems.push({
+                        title: i18n('remove-cluster'),
+                        iconStart: TrashBin,
+                        action: () => {
+                            onDeleteCluster({clusterData: row});
+                        },
+                        theme: 'danger',
+                    });
+                }
+
+                if (manageItems.length) {
+                    menuItems.push(manageItems);
+                }
+
+                if (!menuItems.length) {
+                    return null;
+                }
+
+                return (
+                    <DropdownMenu
+                        items={menuItems}
+                        defaultSwitcherProps={{view: 'flat-secondary', size: 'xs'}}
+                        size="s"
+                        menuProps={{size: 'l'}}
+                    />
+                );
+            };
+
+            const renderName = () => {
+                return <ClusterName row={row} />;
+            };
+
+            const renderStatus = () => {
+                const statusLabel = clusterStatus ? (
+                    <EntityStatus.Label status={clusterStatus} size="xs" />
+                ) : (
+                    <EntityStatus.Label
+                        status={EFlag.Grey}
+                        note={row.cluster?.error || i18n('tooltip_no-cluster-data')}
+                        size="xs"
+                    />
+                );
+
+                const isHealthcheckSource = row.cluster?.overall_source === 'healthcheck';
+
+                if (!onStatusClick || !clusterStatus || !isHealthcheckSource) {
+                    return statusLabel;
+                }
+
+                return (
+                    <button
+                        type="button"
+                        className={b('status-button')}
+                        onClickCapture={(e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            onStatusClick(row);
+                        }}
+                    >
+                        {statusLabel}
+                    </button>
+                );
+            };
+
+            const renderBalancer = () => {
+                if (!cleanedBalancer) {
+                    return null;
+                }
+
+                return (
+                    <Flex gap={0.5} alignItems={'center'}>
+                        <Text variant="caption-2" color="secondary">
+                            {cleanedBalancer}
+                        </Text>
+                        <ClipboardButton
+                            size="xs"
+                            text={cleanedBalancer}
+                            className={b('balancer-copy-icon')}
+                        />
+                    </Flex>
+                );
+            };
+
+            return (
+                <Flex direction={'column'} gap={0.5}>
+                    <Flex alignItems={'flex-start'} justifyContent={'space-between'} gap={1}>
+                        {renderName()}
+                        <Flex gap={1}>
+                            {renderStatus()}
+                            {renderActions()}
+                        </Flex>
+                    </Flex>
+                    {renderBalancer()}
+                </Flex>
+            );
+        },
+    } satisfies Column<PreparedCluster>;
+}
+
+interface ClusterNameProps {
+    row: PreparedCluster;
+}
+
+function ClusterName({row}: ClusterNameProps) {
+    const clusterPath = calculateClusterPath(row);
+
+    return (
+        <div className={b('cluster-name')}>
+            <ExternalLink href={clusterPath}>{row.title || row.name}</ExternalLink>
+        </div>
+    );
+}
+
+const CLUSTERS_COLUMNS: Column<PreparedCluster>[] = [
+    {
+        name: COLUMNS_NAMES.VERSIONS,
+        header: COLUMNS_TITLES[COLUMNS_NAMES.VERSIONS],
+        width: 400,
+        defaultOrder: DataTable.DESCENDING,
+        sortAccessor: ({preparedVersions}) => getFirstVersion(preparedVersions),
+        render: ({row}) => {
+            return <Versions row={row} preparedVersions={row.preparedVersions} />;
+        },
+    },
+    {
+        name: COLUMNS_NAMES.COMPUTE_NODES_VERSIONS,
+        header: COLUMNS_TITLES[COLUMNS_NAMES.COMPUTE_NODES_VERSIONS],
+        width: 400,
+        defaultOrder: DataTable.DESCENDING,
+        sortAccessor: ({preparedComputeVersions}) => getFirstVersion(preparedComputeVersions),
+        render: ({row}) => {
+            return <Versions row={row} preparedVersions={row.preparedComputeVersions} />;
+        },
+    },
+    {
+        name: COLUMNS_NAMES.STORAGE_NODES_VERSIONS,
+        header: COLUMNS_TITLES[COLUMNS_NAMES.STORAGE_NODES_VERSIONS],
+        width: 400,
+        defaultOrder: DataTable.DESCENDING,
+        sortAccessor: ({preparedStorageVersions}) => getFirstVersion(preparedStorageVersions),
+        render: ({row}) => {
+            return <Versions row={row} preparedVersions={row.preparedStorageVersions} />;
+        },
+    },
+    {
+        name: COLUMNS_NAMES.STATUS,
+        header: COLUMNS_TITLES[COLUMNS_NAMES.STATUS],
+        width: 180,
+        sortable: true,
+        render: ({row}) => {
+            return <Label>{row.status}</Label>;
+        },
+    },
+    {
+        name: COLUMNS_NAMES.SERVICE,
+        header: COLUMNS_TITLES[COLUMNS_NAMES.SERVICE],
+        width: 100,
+        sortable: true,
+    },
+    {
+        name: COLUMNS_NAMES.DOMAIN,
+        header: COLUMNS_TITLES[COLUMNS_NAMES.DOMAIN],
+        width: 170,
+        sortable: true,
+    },
+    {
+        name: COLUMNS_NAMES.GALAXY,
+        header: COLUMNS_TITLES[COLUMNS_NAMES.GALAXY],
+        width: 120,
+        sortable: true,
+        render: ({row}) => {
+            return row.galaxy || EMPTY_CELL;
+        },
+    },
+    {
+        name: COLUMNS_NAMES.DC,
+        header: COLUMNS_TITLES[COLUMNS_NAMES.DC],
+        width: 120,
+        sortable: false,
+        render: ({row}) => {
+            const dc = (row.cluster && row.cluster.DataCenters) || [];
+            return (
+                // For some reason DC list could contain empty strings
+                <div className={b('cluster-dc')}>{dc.filter(Boolean).join(', ') || EMPTY_CELL}</div>
+            );
+        },
+    },
+    {
+        name: COLUMNS_NAMES.NODES,
+        header: COLUMNS_TITLES[COLUMNS_NAMES.NODES],
+        width: 170,
+        resizeMinWidth: 170,
+        defaultOrder: DataTable.DESCENDING,
+        sortAccessor: ({cluster = {}}) => {
+            const {NodesTotal = 0} = cluster;
+
+            return NodesTotal;
+        },
+        render: ({row}) => {
+            const {NodesAlive = 0, NodesTotal = 0, Overall} = row.cluster || {};
+
+            if (!Overall) {
+                return EMPTY_CELL;
+            }
+
+            return (
+                <ClustersTableProgressBar
+                    value={NodesAlive}
+                    capacity={NodesTotal}
+                    description={i18n('entities-count', {
+                        value: formatNumber(NodesAlive),
+                        capacity: formatNumber(NodesTotal),
+                    })}
+                />
+            );
+        },
+    },
+    {
+        name: COLUMNS_NAMES.LOAD,
+        header: COLUMNS_TITLES[COLUMNS_NAMES.LOAD],
+        width: 170,
+        resizeMinWidth: 170,
+        defaultOrder: DataTable.DESCENDING,
+        sortAccessor: ({cluster}) => {
+            return cluster?.NumberOfCpus || 0;
+        },
+        render: ({row}) => {
+            const {
+                LoadAverage = 0,
+                NumberOfCpus = 0,
+                RealNumberOfCpus,
+                Overall,
+            } = row.cluster || {};
+
+            if (!Overall) {
+                return EMPTY_CELL;
+            }
+
+            return (
+                <ClustersTableProgressBar
+                    value={LoadAverage}
+                    capacity={RealNumberOfCpus ?? NumberOfCpus}
+                    description={i18n('entities-count', {
+                        value: formatNumber(Math.round(LoadAverage)),
+                        capacity: formatNumber(RealNumberOfCpus ?? NumberOfCpus),
+                    })}
+                />
+            );
+        },
+    },
+    {
+        name: COLUMNS_NAMES.STORAGE,
+        header: COLUMNS_TITLES[COLUMNS_NAMES.STORAGE],
+        width: 170,
+        resizeMinWidth: 170,
+        defaultOrder: DataTable.DESCENDING,
+        sortAccessor: ({cluster}) => {
+            return Number(cluster?.StorageTotal) || 0;
+        },
+        render: ({row}) => {
+            const {StorageUsed = 0, StorageTotal = 0, Overall} = row.cluster || {};
+
+            if (!Overall) {
+                return EMPTY_CELL;
+            }
+
+            const [valueString, capacityString] = formatStorageValuesToTb(
+                Number(StorageUsed),
+                Number(StorageTotal),
+            );
+
+            return (
+                <ClustersTableProgressBar
+                    value={Number(StorageUsed)}
+                    capacity={Number(StorageTotal)}
+                    description={i18n('entities-count', {
+                        value: valueString,
+                        capacity: capacityString,
+                    })}
+                />
+            );
+        },
+    },
+    {
+        name: COLUMNS_NAMES.HOSTS,
+        header: COLUMNS_TITLES[COLUMNS_NAMES.HOSTS],
+        width: 80,
+        defaultOrder: DataTable.DESCENDING,
+        sortAccessor: ({cluster}) => {
+            return Number(cluster?.Hosts) || 0;
+        },
+        render: ({row}) => {
+            return Number(row.cluster?.Hosts) || EMPTY_CELL;
+        },
+    },
+    {
+        name: COLUMNS_NAMES.TENANTS,
+        header: COLUMNS_TITLES[COLUMNS_NAMES.TENANTS],
+        width: 80,
+        defaultOrder: DataTable.DESCENDING,
+        sortAccessor: ({cluster}) => {
+            return Number(cluster?.Tenants) || 0;
+        },
+        render: ({row}) => {
+            return Number(row.cluster?.Tenants) || EMPTY_CELL;
+        },
+    },
+    {
+        name: COLUMNS_NAMES.DESCRIPTION,
+        header: COLUMNS_TITLES[COLUMNS_NAMES.DESCRIPTION],
+        sortable: false,
+        width: 200,
+        render: ({row}) => {
+            return row.description ? (
+                <div className={b('description')}>{row.description}</div>
+            ) : (
+                EMPTY_CELL
+            );
+        },
+    },
+];
+
+interface VersionsProps {
+    row: PreparedCluster;
+    preparedVersions: PreparedVersion[];
+}
+
+function Versions({row, preparedVersions}: VersionsProps) {
+    const hasErrors = !preparedVersions.length || preparedVersions.some((item) => !item.version);
+
+    if (hasErrors) {
+        return EMPTY_CELL;
+    }
+    const clusterPath = calculateClusterPath(row, clusterTabsIds.versions);
+
+    return (
+        <ExternalLink className={b('cluster-versions')} href={clusterPath}>
+            <VersionsBar preparedVersions={preparedVersions} />
+        </ExternalLink>
+    );
+}
+
+export function getClustersColumns(params: ClustersColumnsParams) {
+    return [getTitleColumn(params), ...CLUSTERS_COLUMNS];
+}
+
+function ClustersTableProgressBar({
+    value,
+    capacity,
+    description,
+}: {
+    value: number;
+    capacity: number;
+    description?: string;
+}) {
+    const usage = capacity ? (value / capacity) * 100 : 0;
+
+    return (
+        <Flex direction={'column'} gap={2}>
+            <div>
+                <Progress theme="success" size="s" value={usage} className={b('progress')} />
+            </div>
+            {description}
+        </Flex>
+    );
+}

package/src/containers/Clusters/constants.ts

@@ -0,0 +1,83 @@
+import i18n from './i18n';
+
+export const CLUSTERS_SELECTED_COLUMNS_KEY = 'selectedColumns';
+
+export const COLUMNS_NAMES = {
+    TITLE: 'title',
+    VERSIONS: 'versions',
+    COMPUTE_NODES_VERSIONS: 'computeNodesVersions',
+    STORAGE_NODES_VERSIONS: 'storageNodesVersions',
+    DC: 'dc',
+    SERVICE: 'service',
+    DOMAIN: 'domain',
+    GALAXY: 'galaxy',
+    STATUS: 'status',
+    NODES: 'nodes',
+    LOAD: 'load',
+    STORAGE: 'storage',
+    HOSTS: 'hosts',
+    TENANTS: 'tenants',
+    DESCRIPTION: 'description',
+} as const;
+
+export const DEFAULT_COLUMNS = [
+    COLUMNS_NAMES.TITLE,
+    COLUMNS_NAMES.VERSIONS,
+    COLUMNS_NAMES.SERVICE,
+    COLUMNS_NAMES.STATUS,
+    COLUMNS_NAMES.NODES,
+    COLUMNS_NAMES.LOAD,
+    COLUMNS_NAMES.STORAGE,
+    COLUMNS_NAMES.HOSTS,
+    COLUMNS_NAMES.TENANTS,
+];
+
+// This code is running when module is initialized and correct language may not be set yet
+// get functions guarantee that i18n fields will be inited on render with current render language
+export const COLUMNS_TITLES = {
+    get [COLUMNS_NAMES.TITLE]() {
+        return i18n('field_cluster');
+    },
+    get [COLUMNS_NAMES.VERSIONS]() {
+        return i18n('field_versions');
+    },
+    get [COLUMNS_NAMES.COMPUTE_NODES_VERSIONS]() {
+        return i18n('field_compute-versions');
+    },
+    get [COLUMNS_NAMES.STORAGE_NODES_VERSIONS]() {
+        return i18n('field_storage-versions');
+    },
+    get [COLUMNS_NAMES.DC]() {
+        return i18n('field_dc');
+    },
+    get [COLUMNS_NAMES.SERVICE]() {
+        return i18n('field_service');
+    },
+    get [COLUMNS_NAMES.DOMAIN]() {
+        return i18n('field_domain');
+    },
+    get [COLUMNS_NAMES.GALAXY]() {
+        return i18n('field_galaxy');
+    },
+    get [COLUMNS_NAMES.STATUS]() {
+        return i18n('field_status');
+    },
+    get [COLUMNS_NAMES.NODES]() {
+        return i18n('field_nodes');
+    },
+    get [COLUMNS_NAMES.LOAD]() {
+        return i18n('field_load');
+    },
+    get [COLUMNS_NAMES.STORAGE]() {
+        return i18n('field_storage');
+    },
+    get [COLUMNS_NAMES.HOSTS]() {
+        return i18n('field_hosts');
+    },
+    get [COLUMNS_NAMES.TENANTS]() {
+        return i18n('field_databases');
+    },
+    get [COLUMNS_NAMES.DESCRIPTION]() {
+        return i18n('field_description');
+    },
+};

package/src/containers/Clusters/i18n/en.json

@@ -0,0 +1,45 @@
+{
+  "controls_status-select-label": "Status:",
+  "controls_service-select-label": "Service:",
+  "controls_version-select-label": "Version:",
+  "controls_galaxy-select-label": "Galaxy:",
+
+  "controls_search-placeholder": "Cluster name, version, domain, host...",
+  "controls_select-placeholder": "All",
+
+  "statistics_clusters": "Clusters",
+  "statistics_hosts": "Hosts",
+  "statistics_nodes": "Nodes",
+  "statistics_load": "Load",
+  "statistics_storage": "Storage",
+
+  "tooltip_no-cluster-data": "No cluster data",
+
+  "clusters-count": {
+    "one": "{{count}} cluster found",
+    "other": "{{count}} clusters found"
+  },
+
+  "entities-count": "{{value}} of {{capacity}}",
+
+  "page_title": "Clusters",
+
+  "edit-cluster": "Edit Cluster",
+  "remove-cluster": "Delete Cluster",
+
+  "field_cluster": "Cluster",
+  "field_versions": "Versions",
+  "field_compute-versions": "Compute versions",
+  "field_storage-versions": "Storage versions",
+  "field_dc": "DC",
+  "field_service": "Service",
+  "field_domain": "Domain",
+  "field_galaxy": "Galaxy",
+  "field_status": "Status",
+  "field_nodes": "Nodes",
+  "field_load": "Load",
+  "field_storage": "Storage",
+  "field_hosts": "Hosts",
+  "field_databases": "Databases",
+  "field_description": "Description"
+}

package/src/containers/Clusters/i18n/index.ts

@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-clusters-page';
+
+export default registerKeysets(COMPONENT, {en});

package/src/containers/Clusters/shared.ts

@@ -0,0 +1,3 @@
+import {cn} from '../../utils/cn';
+
+export const b = cn('ydb-clusters');

package/src/containers/Clusters/utils.ts

@@ -0,0 +1,32 @@
+import {getClusterPath} from '../../routes';
+import type {PreparedCluster} from '../../store/reducers/clusters/types';
+import {createDeveloperUIMonitoringPageHref} from '../../utils/developerUI/developerUI';
+import type {ClusterTab} from '../Cluster/utils';
+
+export function calculateClusterPath(row: PreparedCluster, activeTab?: ClusterTab): string {
+    const {
+        use_embedded_ui: useEmbeddedUi,
+        preparedBackend: backend,
+        name: clusterName,
+        clusterDomain,
+        settings,
+        clusterExternalName,
+    } = row;
+
+    if (useEmbeddedUi && backend) {
+        return createDeveloperUIMonitoringPageHref(backend);
+    }
+
+    return getClusterPath(
+        {
+            activeTab,
+            environment: clusterDomain ? undefined : settings?.auth_service,
+        },
+        {
+            backend: clusterDomain ? undefined : backend,
+            clusterName: clusterDomain && clusterExternalName ? clusterExternalName : clusterName,
+        },
+        {withBasename: true},
+        clusterDomain,
+    );
+}