ydb-embedded-ui 0.1.0

package/dist/components/ClusterInfo/ClusterInfo.scss

@@ -0,0 +1,65 @@
+@import '../../styles/mixins';
+
+.cluster-info {
+    margin: 15px 0 0;
+    padding-bottom: 15px;
+
+    &__common {
+        display: flex;
+        align-items: center;
+        margin-bottom: 20px;
+    }
+
+    &__title {
+        font-size: var(--yc-text-body2-font-size);
+        line-height: var(--yc-text-body2-line-height);
+        font-weight: 500;
+        text-transform: uppercase;
+        margin-right: 16px;
+    }
+
+    &__url {
+        margin-right: 14px;
+    }
+
+    &__metric-field {
+        margin-top: -8px;
+    }
+
+    &__system-tablets {
+        margin-left: 15px;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+
+        & .tablet {
+            margin-bottom: 2px;
+        }
+    }
+
+    &__metrics {
+        padding: 0 15px !important;
+        margin: 0 -15px;
+
+        .info-viewer__items {
+            grid-template-columns: repeat(2, minmax(auto, 250px));
+        }
+
+        .info-viewer__label {
+            width: 50px;
+        }
+        .info-viewer__value {
+            width: 130px;
+        }
+    }
+
+    &__tablets {
+        padding: 0 !important;
+        margin-left: 15px;
+    }
+    &__clipboard-button {
+        margin-left: 5px;
+        display: flex;
+        align-items: center;
+    }
+}

package/dist/components/ClusterInfo/ClusterInfo.tsx

@@ -0,0 +1,157 @@
+import React, {ReactNode} from 'react';
+import cn from 'bem-cn-lite';
+
+import EntityStatus from '../EntityStatus/EntityStatus';
+import ProgressViewer from '../ProgressViewer/ProgressViewer';
+import InfoViewer from '../InfoViewer/InfoViewer';
+import Tags from '../Tags/Tags';
+import Tablet from '../Tablet/Tablet';
+
+import {formatStorageValues} from '../../utils';
+import {TxAllocator} from '../../utils/constants';
+
+import './ClusterInfo.scss';
+
+const b = cn('cluster-info');
+
+export interface IClusterInfoItem {
+    label: string;
+    value: ReactNode;
+}
+
+interface ICluster {
+    StorageTotal: string;
+    StorageUsed: string;
+    NodesAlive: number;
+    NodesTotal: number;
+    LoadAverage: number;
+    NumberOfCpus: number;
+    Versions: string[];
+    Name?: string;
+    Overall: string;
+    DataCenters?: string[];
+    SystemTablets?: ITablet[];
+}
+
+interface ClusterInfoProps {
+    className: string;
+    cluster?: ICluster;
+    hideTooltip: VoidFunction;
+    showTooltip: VoidFunction;
+    clusterTitle: string;
+    additionalInfo?: IClusterInfoItem[];
+}
+
+interface ITablet {
+    Type: string;
+}
+
+class ClusterInfo extends React.Component<ClusterInfoProps> {
+    static compareTablets(tablet1: ITablet, tablet2: ITablet) {
+        if (tablet1.Type === TxAllocator) {
+            return 1;
+        }
+
+        if (tablet2.Type === TxAllocator) {
+            return -1;
+        }
+
+        return 0;
+    }
+
+    shouldComponentUpdate(nextProps: ClusterInfoProps) {
+        const {cluster = {}} = nextProps;
+        return !(Object.keys(cluster).length === 0);
+    }
+
+    render() {
+        return this.renderContent();
+    }
+
+    private getInfo() {
+        const {cluster = {} as ICluster, additionalInfo = []} = this.props;
+        const {StorageTotal, StorageUsed} = cluster;
+
+        const info: IClusterInfoItem[] = [
+            {
+                label: 'Nodes',
+                value: (
+                    <ProgressViewer
+                        className={b('metric-field')}
+                        value={cluster.NodesAlive}
+                        capacity={cluster.NodesTotal}
+                    />
+                ),
+            },
+            {
+                label: 'Load',
+                value: (
+                    <ProgressViewer
+                        className={b('metric-field')}
+                        value={cluster.LoadAverage}
+                        capacity={cluster.NumberOfCpus}
+                    />
+                ),
+            },
+            {
+                label: 'Storage',
+                value: (
+                    <ProgressViewer
+                        className={b('metric-field')}
+                        value={StorageUsed}
+                        capacity={StorageTotal}
+                        formatValues={formatStorageValues}
+                    />
+                ),
+            },
+            {
+                label: 'Versions',
+                value: <div>{cluster.Versions?.join(', ')}</div>,
+            },
+            ...additionalInfo,
+        ];
+
+        return info;
+    }
+
+    private renderContent = () => {
+        const {cluster = {} as ICluster, showTooltip, hideTooltip, clusterTitle} = this.props;
+        const {Name: clusterName = 'Unknown cluster'} = cluster;
+
+        const info = this.getInfo();
+
+        return (
+            <div className={b()}>
+                <div className={b('common')}>
+                    <span className={b('title')}>cluster</span>
+                    <div className={b('url')}>
+                        <EntityStatus
+                            size="m"
+                            status={cluster.Overall}
+                            name={clusterTitle ?? clusterName}
+                        />
+                    </div>
+
+                    {cluster.DataCenters && <Tags tags={cluster.DataCenters} />}
+
+                    <div className={b('system-tablets')}>
+                        {cluster.SystemTablets &&
+                            cluster.SystemTablets.sort(ClusterInfo.compareTablets).map(
+                                (tablet, tabletIndex) => (
+                                    <Tablet
+                                        onMouseEnter={showTooltip}
+                                        onMouseLeave={hideTooltip}
+                                        key={tabletIndex}
+                                        tablet={tablet}
+                                    />
+                                ),
+                            )}
+                    </div>
+                </div>
+                <InfoViewer dots={true} info={info} />
+            </div>
+        );
+    };
+}
+
+export default ClusterInfo;

package/dist/components/Collapse/Collapse.js

@@ -0,0 +1,84 @@
+import {useState, useEffect, useRef} from 'react';
+import block from 'bem-cn-lite';
+import {ArrowToggle, Button} from '@yandex-cloud/uikit';
+
+import './Collapse.scss';
+
+const b = block('yc-collapse');
+
+function useEffectSkipFirst(fn, arr) {
+    const isFirst = useRef(true);
+
+    useEffect(() => {
+        if (isFirst.current) {
+            isFirst.current = false;
+            return;
+        }
+
+        return fn();
+    }, arr);
+}
+
+export const Collapse = ({
+    title,
+    children,
+    arrowView = 'icon',
+    emptyState = 'No data',
+    titleSize = 'l',
+    contentMarginTop = 12,
+    defaultIsExpand,
+    onChange,
+}) => {
+    const [isExpand, setIsExpand] = useState(defaultIsExpand);
+
+    const arrowDirection = isExpand ? 'top' : 'bottom';
+
+    const arrowComponent =
+        arrowView === 'button' ? (
+            <Button view="flat" className={b('arrow-button')}>
+                <ArrowToggle className={b('arrow')} direction={arrowDirection} size={20} />
+            </Button>
+        ) : (
+            <ArrowToggle className={b('arrow')} direction={arrowDirection} size={20} />
+        );
+
+    useEffectSkipFirst(onChange, [isExpand]);
+
+    return (
+        <div className={b()}>
+            <div
+                className={b('panel', {
+                    'no-data': !children,
+                })}
+                onClick={() => {
+                    setIsExpand(!isExpand);
+                }}
+            >
+                {typeof title === 'string' ? (
+                    <h2
+                        className={b('title', {
+                            size: titleSize,
+                        })}
+                    >
+                        {title}
+                    </h2>
+                ) : (
+                    title
+                )}
+
+                {children && <div className={b('arrow-wrapper')}>{arrowComponent}</div>}
+            </div>
+
+            {!children && <h4 className={b('empty-state-title')}>{emptyState}</h4>}
+
+            {children && (
+                <div
+                    className={b('content', {visible: isExpand})}
+                    style={{marginTop: contentMarginTop}}
+                >
+                    {children}
+                </div>
+            )}
+        </div>
+    );
+};

package/dist/components/Collapse/Collapse.scss

@@ -0,0 +1,70 @@
+.yc-collapse {
+    &__panel {
+        display: inline-flex;
+        align-items: center;
+
+        cursor: pointer;
+
+        &_no-data {
+            cursor: default;
+        }
+    }
+
+    &__title {
+        margin: 0;
+    }
+
+    &__title_secondary {
+        color: var(--yc-color-text-secondary);
+    }
+
+    &__title_size {
+        &_s {
+            font-size: var(--yc-text-body-font-size);
+            line-height: var(--yc-text-body-line-height);
+        }
+
+        &_m {
+            font-size: var(--yc-text-body2-font-size);
+            line-height: var(--yc-text-body2-line-height);
+        }
+
+        &_l {
+            font-size: var(--yc-text-body3-font-size);
+            line-height: var(--yc-text-body3-line-height);
+        }
+    }
+
+    &__arrow-wrapper {
+        margin-left: 8px;
+    }
+
+    &__arrow-wrapper_secondary {
+        color: var(--yc-color-text-secondary);
+        .button2__text {
+            color: var(--yc-color-text-secondary);
+        }
+    }
+
+    &__content {
+        display: none;
+
+        &_visible {
+            display: block;
+        }
+    }
+
+    &__empty-state-title {
+        font-size: var(--yc-text-body-font-size);
+        font-weight: normal;
+        line-height: var(--yc-text-body-line-height);
+
+        opacity: 0.5;
+    }
+
+    &__arrow-button {
+        .button2__text {
+            margin: 0 4px;
+        }
+    }
+}

package/dist/components/CriticalActionDialog/CriticalActionDialog.js

@@ -0,0 +1,53 @@
+import {useState} from 'react';
+import PropTypes from 'prop-types';
+import cn from 'bem-cn-lite';
+import {Dialog} from '@yandex-cloud/uikit';
+import Icon from '../Icon/Icon';
+
+import './CriticalActionDialog.scss';
+
+const b = cn('km-critical-dialog');
+
+export default function CriticalActionDialog({visible, onClose, onConfirm, text}) {
+    const [progress, setProgress] = useState(false);
+
+    const onSubmit = (e) => {
+        e.preventDefault();
+        setProgress(true);
+
+        return onConfirm().then(() => {
+            setProgress(false);
+            onClose();
+        });
+    };
+
+    return (
+        <Dialog open={visible} hasCloseButton={false} className={b()} size="s" onClose={onClose}>
+            <form onSubmit={onSubmit}>
+                <Dialog.Body className={b('body')}>
+                    <span className={b('warning-icon')}>
+                        <Icon name="dialog-warning" width="24" height="22" viewBox="0 0 24 22" />
+                    </span>
+                    {text}
+                </Dialog.Body>
+
+                <Dialog.Footer
+                    progress={progress}
+                    preset="default"
+                    textButtonApply="Confirm"
+                    textButtonCancel="Cancel"
+                    propsButtonApply={{type: 'submit'}}
+                    onClickButtonCancel={onClose}
+                    onClickButtonApply={() => {}}
+                />
+            </form>
+        </Dialog>
+    );
+}
+
+CriticalActionDialog.propTypes = {
+    visible: PropTypes.bool,
+    onClose: PropTypes.func,
+    onConfirm: PropTypes.func,
+    text: PropTypes.string,
+};

package/dist/components/CriticalActionDialog/CriticalActionDialog.scss

@@ -0,0 +1,31 @@
+.km-critical-dialog {
+    width: 252px !important;
+
+    &__warning-icon {
+        margin-right: 16px;
+    }
+
+    &__body {
+        display: flex;
+        align-items: center;
+        padding: 16px 16px 0 16px;
+    }
+
+    & .yc-dialog-footer {
+        padding: 20px 4px 4px 4px;
+    }
+
+    & .yc-dialog-footer__children {
+        display: none;
+    }
+
+    & .yc-dialog-footer__button {
+        margin: 0;
+        min-width: 120px;
+        box-sizing: border-box;
+    }
+
+    & .yc-dialog-footer__button_action_cancel {
+        margin-right: 4px;
+    }
+}

package/dist/components/EmptyState/EmptyState.js

@@ -0,0 +1,48 @@
+import PropTypes from 'prop-types';
+import cn from 'bem-cn-lite';
+import Icon from '../Icon/Icon';
+
+import './EmptyState.scss';
+
+const block = cn('empty-state');
+
+const sizes = {
+    s: 150,
+    m: 250,
+    l: 350,
+};
+
+export default function EmptyState({image, title, description, actions, size}) {
+    return (
+        <div className={block({size})}>
+            <div className={block('wrapper', {size})}>
+                {image ? (
+                    image
+                ) : (
+                    <Icon
+                        viewBox="0 0 383 396"
+                        name="emptyState"
+                        width={sizes[size]}
+                        height={sizes[size]}
+                    />
+                )}
+
+                <div className={block('title', {size})}>{title}</div>
+                <div className={block('description')}>{description}</div>
+                <div className={block('actions')}>{actions}</div>
+            </div>
+        </div>
+    );
+}
+
+EmptyState.propTypes = {
+    title: PropTypes.string.isRequired,
+    image: PropTypes.node,
+    description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    actions: PropTypes.arrayOf(PropTypes.node),
+    size: PropTypes.string,
+};
+
+EmptyState.defaultProps = {
+    size: 'm',
+};

package/dist/components/EmptyState/EmptyState.scss

@@ -0,0 +1,70 @@
+.empty-state {
+    padding: 20px;
+
+    &_size_m {
+        height: 400px;
+    }
+
+    &__wrapper {
+        &_size_s {
+            width: 460px;
+            height: 120px;
+        }
+
+        &_size_m {
+            width: 800px;
+            height: 240px;
+            margin: 0 auto;
+            position: relative;
+            top: 20%;
+        }
+
+        display: grid;
+        grid-template-areas:
+            'image title'
+            'image description'
+            'image description'
+            'image actions';
+    }
+
+    &__image {
+        grid-area: image;
+        justify-self: end;
+        margin-right: 60px;
+        color: var(--yc-color-base-info-hover);
+
+        .yc-root_theme_dark & {
+            color: var(--yc-color-base-generic);
+        }
+    }
+
+    &__title {
+        grid-area: title;
+        align-self: center;
+        font-weight: 500;
+
+        &_size_s {
+            font-size: var(--yc-text-lead-font-size);
+            line-height: var(--yc-text-lead-line-height);
+        }
+
+        &_size_m {
+            font-size: var(--yc-text-title-font-size);
+            line-height: var(--yc-text-title-line-height);
+        }
+    }
+
+    &__description {
+        grid-area: description;
+        font-size: var(--yc-text-body2-font-size);
+        line-height: var(--yc-text-body2-line-height);
+    }
+
+    &__actions {
+        grid-area: actions;
+
+        & > * {
+            margin-right: 8px;
+        }
+    }
+}

package/dist/components/EntityStatus/EntityStatus.js

@@ -0,0 +1,96 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'bem-cn-lite';
+import {Link} from 'react-router-dom';
+import {ClipboardButton, Link as ExternalLink} from '@yandex-cloud/uikit';
+
+import './EntityStatus.scss';
+
+const b = cn('entity-status');
+
+class EntityStatus extends React.Component {
+    static propTypes = {
+        status: PropTypes.string,
+        name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        path: PropTypes.string,
+        size: PropTypes.string,
+        label: PropTypes.string,
+        iconPath: PropTypes.string,
+        hasClipboardButton: PropTypes.bool,
+        showStatus: PropTypes.bool,
+        externalLink: PropTypes.bool,
+        className: PropTypes.string,
+    };
+
+    static defaultProps = {
+        status: 'gray',
+        text: '',
+        size: 'm',
+        label: '',
+        showStatus: true,
+        externalLink: false,
+    };
+    renderIcon() {
+        const {status, size, showStatus} = this.props;
+
+        if (!showStatus) {
+            return null;
+        }
+
+        return <div className={b('status-icon', {state: status.toLowerCase(), size})} />;
+    }
+    renderStatusLink() {
+        const {iconPath} = this.props;
+
+        return (
+            <ExternalLink target="_blank" href={iconPath}>
+                {this.renderIcon()}
+            </ExternalLink>
+        );
+    }
+    renderLink() {
+        const {externalLink, name, path} = this.props;
+
+        if (externalLink) {
+            return <ExternalLink href={path}>{name}</ExternalLink>;
+        }
+
+        return path ? (
+            <Link title={name} to={path}>
+                {name}
+            </Link>
+        ) : (
+            name && (
+                <span className={b('name')} title={name}>
+                    {name}
+                </span>
+            )
+        );
+    }
+    render() {
+        const {name, label, iconPath, hasClipboardButton, className} = this.props;
+
+        return (
+            <div className={b(null, className)}>
+                {iconPath ? this.renderStatusLink() : this.renderIcon()}
+                {label && (
+                    <span title={label} className={b('label')}>
+                        {label}
+                    </span>
+                )}
+                {this.renderLink()}
+                {hasClipboardButton && (
+                    <span
+                        className={b('clipboard-button', {
+                            visible: false,
+                        })}
+                    >
+                        <ClipboardButton text={name} size={16} />
+                    </span>
+                )}
+            </div>
+        );
+    }
+}
+
+export default EntityStatus;