ydb-embedded-ui 0.1.0

package/dist/containers/AsideNavigation/AsideNavigation.tsx

@@ -0,0 +1,228 @@
+import React, {useState} from 'react';
+import {useHistory} from 'react-router-dom';
+import cn from 'bem-cn-lite';
+import {useLocation} from 'react-router';
+import {connect} from 'react-redux';
+
+import {
+    AsideHeader,
+    AsideHeaderFooterItem,
+    AsideHeaderMenuItem,
+    SlotName,
+} from '../../components/AsideNavigation/AsideHeader';
+import {Icon, Button} from '@yandex-cloud/uikit';
+import signOutIcon from '../../assets/icons/signOut.svg';
+import signInIcon from '../../assets/icons/signIn.svg';
+
+import databaseIcon from '../../assets/icons/server.svg';
+
+import storageIcon from '../../assets/icons/storage.svg';
+import ydbLogoIcon from '../../assets/icons/ydb.svg';
+import databasesIcon from '../../assets/icons/databases.svg';
+import userSecret from '../../assets/icons/user-secret.svg';
+import userChecked from '../../assets/icons/user-check.svg';
+//@ts-ignore
+import UserSettings from '../UserSettings/UserSettings';
+//@ts-ignore
+import routes, {createHref} from '../../routes';
+import {CLUSTER_PAGES} from '../Cluster/Cluster';
+
+//@ts-ignore
+import {logout, setIsNotAuthenticated} from '../../store/reducers/authentication';
+
+import './AsideNavigation.scss';
+
+const b = cn('kv-navigation');
+interface MenuItem {
+    id: string;
+    title: string;
+    icon: SVGIconData;
+    iconSize: string | number;
+    location: string;
+    locationKeys?: string[];
+}
+
+interface YbdInternalUserProps {
+    ydbUser?: string;
+    logout: VoidFunction;
+    setIsNotAuthenticated: VoidFunction;
+}
+
+function YbdInternalUser({ydbUser, logout, setIsNotAuthenticated}: YbdInternalUserProps) {
+    return (
+        <div className={b('internal-user')}>
+            <div className={b('user-info-wrapper')}>
+                <div className={b('ydb-internal-user-title')}>YDB user</div>
+                {ydbUser && <div className={b('username')}>{ydbUser}</div>}
+            </div>
+            {ydbUser ? (
+                <Button view="flat-secondary" onClick={logout} title="logout">
+                    <Icon data={signOutIcon} size={16} />
+                </Button>
+            ) : (
+                <Button view="flat-secondary" onClick={setIsNotAuthenticated} title="login">
+                    <Icon data={signInIcon} size={16} />
+                </Button>
+            )}
+        </div>
+    );
+}
+
+interface YdbUserDropdownProps {
+    isCompact: boolean;
+    ydbUser: {
+        login?: string;
+        logout: VoidFunction;
+        setIsNotAuthenticated: VoidFunction;
+    };
+    popupAnchor: React.RefObject<HTMLDivElement>;
+}
+
+function YdbUserDropdown({isCompact, popupAnchor, ydbUser}: YdbUserDropdownProps) {
+    const [isUserDropdownVisible, setIsUserDropdownVisible] = useState(false);
+    const iconDate = ydbUser?.login ? userChecked : userSecret;
+    return (
+        <AsideHeaderFooterItem
+            isCurrent={isUserDropdownVisible}
+            slot={SlotName.User}
+            renderCustomIcon={() => <Icon data={iconDate} size={22} className={b('user-icon')} />}
+            text={ydbUser?.login ?? 'Account'}
+            isCompact={isCompact}
+            popupAnchor={popupAnchor}
+            popupVisible={isUserDropdownVisible}
+            onClick={() => setIsUserDropdownVisible(true)}
+            onClosePopup={() => setIsUserDropdownVisible(false)}
+            renderPopupContent={() => (
+                <div className={b('ydb-user-wrapper')}>
+                    <YbdInternalUser
+                        ydbUser={ydbUser.login}
+                        logout={ydbUser.logout}
+                        setIsNotAuthenticated={ydbUser.setIsNotAuthenticated}
+                    />
+                </div>
+            )}
+        />
+    );
+}
+
+interface AsideNavigationProps {
+    children: React.ReactNode;
+    ydbUser: string;
+    logout: VoidFunction;
+    setIsNotAuthenticated: VoidFunction;
+}
+
+const items: MenuItem[] = [
+    {
+        id: CLUSTER_PAGES.tenants.id,
+        title: 'Databases',
+        icon: databasesIcon,
+        iconSize: 20,
+        location: createHref(routes.cluster, {
+            activeTab: CLUSTER_PAGES.tenants.id,
+        }),
+        locationKeys: ['/tenant'],
+    },
+    {
+        id: CLUSTER_PAGES.nodes.id,
+        title: 'Nodes',
+        icon: databaseIcon,
+        iconSize: 20,
+        location: createHref(routes.cluster, {activeTab: CLUSTER_PAGES.nodes.id}),
+        locationKeys: ['/node'],
+    },
+    {
+        id: CLUSTER_PAGES.storage.id,
+        title: 'Storage',
+        icon: storageIcon,
+        iconSize: 20,
+        location: createHref(routes.cluster, {
+            activeTab: CLUSTER_PAGES.storage.id,
+        }),
+        locationKeys: ['/storage'],
+    },
+];
+
+function AsideNavigation(props: AsideNavigationProps) {
+    const location = useLocation();
+    const history = useHistory();
+
+    const menuItems: AsideHeaderMenuItem[] = React.useMemo(() => {
+        const {pathname} = location;
+        const isClusterPage = pathname === '/cluster';
+        const menuItems: AsideHeaderMenuItem[] = items.map((item) => {
+            const locationKeysCoincidence = item.locationKeys?.filter((key) =>
+                pathname.startsWith(key),
+            );
+            let current =
+                (locationKeysCoincidence && locationKeysCoincidence.length > 0) ||
+                item.location.startsWith(pathname);
+            if (isClusterPage && item.id !== CLUSTER_PAGES.tenants.id) {
+                current = false;
+            }
+            return {
+                id: item.id,
+                title: item.title,
+                icon: item.icon,
+                iconSize: item.iconSize,
+                current,
+                onItemClick: () => {
+                    history.push(item.location);
+                },
+            };
+        });
+        return menuItems;
+    }, [location, history]);
+
+    return (
+        <React.Fragment>
+            <AsideHeader
+                logoText="YDB"
+                logoIcon={ydbLogoIcon}
+                onLogoIconClick={() => history.push('/')}
+                menuItems={menuItems}
+                settings={<UserSettings />}
+                className={b()}
+                renderContent={() => props.children}
+                renderFooter={({isCompact, asideRef}) => (
+                    <React.Fragment>
+                        <AsideHeaderFooterItem
+                            slot={SlotName.Support}
+                            iconSize={24}
+                            text="Documentation"
+                            isCompact={isCompact}
+                            onClick={() => {
+                                window.open('http://ydb.tech/docs', '_blank', 'noreferrer');
+                            }}
+                        />
+
+                        <YdbUserDropdown
+                            isCompact={isCompact}
+                            popupAnchor={asideRef}
+                            ydbUser={{
+                                login: props.ydbUser,
+                                logout: props.logout,
+                                setIsNotAuthenticated: props.setIsNotAuthenticated,
+                            }}
+                        />
+                    </React.Fragment>
+                )}
+            />
+        </React.Fragment>
+    );
+}
+
+const mapStateToProps = (state: any) => {
+    const {user: ydbUser} = state.authentication;
+
+    return {
+        ydbUser,
+    };
+};
+
+const mapDispatchToProps = {
+    logout,
+    setIsNotAuthenticated,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(AsideNavigation);

package/dist/containers/Authentication/Authentication.scss

@@ -0,0 +1,37 @@
+.authentication {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    height: 100%;
+
+    &__form-wrapper {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        flex-shrink: 0;
+        justify-content: center;
+
+        width: 50%;
+        min-width: 320px;
+        height: 50%;
+        min-height: 170px;
+
+        border-radius: 5px;
+        background-color: var(--yc-color-base-info);
+        box-shadow: 0px 1px 5px var(--yc-color-sfx-shadow);
+    }
+
+    &__field-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        width: 250px;
+        margin-bottom: 10px;
+
+        &:last-child {
+            margin-bottom: 16px;
+        }
+    }
+}

package/dist/containers/Authentication/Authentication.tsx

@@ -0,0 +1,89 @@
+import {KeyboardEvent, useEffect, useState} from 'react';
+import cn from 'bem-cn-lite';
+import {connect} from 'react-redux';
+import {Button, TextInput} from '@yandex-cloud/uikit';
+//@ts-ignore
+import {authenticate} from '../../store/reducers/authentication';
+
+import './Authentication.scss';
+
+const b = cn('authentication');
+
+function Authentication({authenticate, error}: any) {
+    const [login, setLogin] = useState('');
+    const [pass, setPass] = useState('');
+    const [loginError, setLoginError] = useState('');
+    const [passwordError, setPasswordError] = useState('');
+
+    useEffect(() => {
+        if (error?.data?.error?.includes('user')) {
+            setLoginError(error.data.error);
+        }
+        if (error?.data?.error?.includes('password')) {
+            setPasswordError(error.data.error);
+        }
+    }, [error]);
+
+    const onLoginUpdate = (value: string) => {
+        setLogin(value);
+        setLoginError('');
+    };
+
+    const onPassUpdate = (value: string) => {
+        setPass(value);
+        setPasswordError('');
+    };
+
+    const onLoginClick = () => {
+        authenticate(login, pass);
+    };
+
+    const onEnterClick = (e: KeyboardEvent<HTMLInputElement>) => {
+        if (e.keyCode === 13) {
+            onLoginClick();
+        }
+    };
+
+    return (
+        <section className={b()}>
+            <div className={b('form-wrapper')}>
+                <h2>Please sign in:</h2>
+                <div className={b('field-wrapper')}>
+                    <TextInput
+                        value={login}
+                        onUpdate={onLoginUpdate}
+                        placeholder={'Username'}
+                        error={loginError}
+                    />
+                </div>
+                <div className={b('field-wrapper')}>
+                    <TextInput
+                        value={pass}
+                        onUpdate={onPassUpdate}
+                        type="password"
+                        placeholder={'Password'}
+                        error={passwordError}
+                        onKeyDown={onEnterClick}
+                    />
+                </div>
+                <div className={b('field-wrapper')}>
+                    <Button view="action" onClick={onLoginClick} width="max">
+                        Let me in!
+                    </Button>
+                </div>
+            </div>
+        </section>
+    );
+}
+
+function mapStateToProps(state: any) {
+    return {
+        error: state.authentication.error,
+    };
+}
+
+const mapDispatchToProps = {
+    authenticate,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Authentication);

package/dist/containers/Cluster/Cluster.js

@@ -0,0 +1,168 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import cn from 'bem-cn-lite';
+
+import {getClusterInfo} from '../../store/reducers/cluster';
+import {clusterName} from '../../store';
+import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
+
+import {Loader} from '@yandex-cloud/uikit';
+import ClusterInfo from '../../components/ClusterInfo/ClusterInfo';
+import Tenants from '../Tenants/Tenants';
+import Nodes from '../Nodes/Nodes';
+import Storage from '../StorageV2/Storage';
+
+import './Cluster.scss';
+
+const b = cn('cluster');
+
+export const CLUSTER_PAGES = {
+    tenants: {id: 'tenants', name: 'Databases'},
+    nodes: {id: 'nodes', name: 'Nodes'},
+    storage: {id: 'storage', name: 'Storage'},
+};
+
+export class AutoFetcher {
+    constructor() {
+        this.timeout = AutoFetcher.DEFAULT_TIMEOUT;
+        this.active = true;
+        this.timer = undefined;
+    }
+    static DEFAULT_TIMEOUT = 30000;
+    static MIN_TIMEOUT = 30000;
+    wait(ms) {
+        return new Promise((resolve) => {
+            this.timer = setTimeout(resolve, ms);
+            return;
+        });
+    }
+    async fetch(request) {
+        if (!this.active) {
+            return;
+        }
+
+        await this.wait(this.timeout);
+
+        if (this.active) {
+            const startTs = Date.now();
+            await request();
+            const finishTs = Date.now();
+
+            const responseTime = finishTs - startTs;
+            const nextTimeout =
+                responseTime > AutoFetcher.MIN_TIMEOUT ? responseTime : AutoFetcher.MIN_TIMEOUT;
+            this.timeout = nextTimeout;
+
+            this.fetch(request);
+        } else {
+            return;
+        }
+    }
+    stop() {
+        clearTimeout(this.timer);
+        this.active = false;
+    }
+    start() {
+        this.active = true;
+    }
+}
+
+class Cluster extends React.Component {
+    static propTypes = {
+        activeTab: PropTypes.string,
+        getClusterInfo: PropTypes.func,
+        cluster: PropTypes.object,
+        error: PropTypes.object,
+        loading: PropTypes.bool,
+        wasLoaded: PropTypes.bool,
+        showTooltip: PropTypes.func,
+        hideTooltip: PropTypes.func,
+        additionalClusterInfo: PropTypes.array,
+        additionalTenantsInfo: PropTypes.object,
+        additionalNodesInfo: PropTypes.object,
+    };
+    componentDidMount() {
+        this.props.getClusterInfo(clusterName);
+        this.autofetcher = new AutoFetcher();
+        this.autofetcher.fetch(() => this.props.getClusterInfo(clusterName));
+    }
+    componentDidCatch(error, info) {
+        console.log(error);
+        console.log(info);
+    }
+    componentWillUnmount() {
+        this.autofetcher.stop();
+    }
+    renderLoader() {
+        return (
+            <div className="loader">
+                <Loader size="l" />
+            </div>
+        );
+    }
+    renderTabContent() {
+        const {activeTab} = this.props;
+        switch (activeTab) {
+            case CLUSTER_PAGES.tenants.id: {
+                return <Tenants {...this.props} />;
+            }
+            case CLUSTER_PAGES.nodes.id: {
+                return <Nodes {...this.props} />;
+            }
+            case CLUSTER_PAGES.storage.id: {
+                return <Storage {...this.props} />;
+            }
+            default: {
+                return null;
+            }
+        }
+    }
+    renderContent = () => {
+        const {cluster} = this.props;
+
+        return (
+            <div className={b()}>
+                <ClusterInfo
+                    cluster={cluster}
+                    showTooltip={this.props.showTooltip}
+                    hideTooltip={this.props.hideTooltip}
+                    additionalInfo={this.props.additionalClusterInfo}
+                />
+                {this.renderTabContent()}
+            </div>
+        );
+    };
+
+    render() {
+        const {error, loading, wasLoaded} = this.props;
+
+        if (loading && !wasLoaded) {
+            return this.renderLoader();
+        } else if (error) {
+            return <div>{error.statusText}</div>;
+        }
+        return this.renderContent();
+    }
+}
+
+const mapStateToProps = (state, ownProps) => {
+    const {data: cluster, loading, error, wasLoaded} = state.cluster;
+    const {activeTab = CLUSTER_PAGES.tenants.id} = ownProps.match.params;
+
+    return {
+        activeTab,
+        cluster,
+        loading,
+        wasLoaded,
+        error,
+    };
+};
+
+const mapDispatchToProps = {
+    getClusterInfo,
+    hideTooltip,
+    showTooltip,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Cluster);

package/dist/containers/Cluster/Cluster.scss

@@ -0,0 +1,52 @@
+@import '../../styles/mixins.scss';
+
+.cluster {
+    @include flex-container();
+    padding: 0 20px;
+    overflow: auto;
+
+    &__tab {
+        text-decoration: none;
+
+        &:first-letter {
+            text-transform: uppercase;
+        }
+    }
+
+    &__format-label {
+        margin-right: 15px;
+    }
+
+    &__title {
+        text-align: center;
+    }
+
+    &__tooltip {
+        animation: none !important;
+    }
+
+    &__search {
+        width: 255px;
+        margin: 0 15px 0 0;
+    }
+
+    &__tablets {
+        padding: 0 !important;
+
+        .tablets-viewer__grid {
+            grid-template-columns: 125px;
+        }
+    }
+
+    &__controls {
+        display: flex;
+        justify-content: space-between;
+        margin: 17px 0;
+    }
+
+    &__table-wrapper {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+    }
+}

package/dist/containers/Group/Group.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'bem-cn-lite';
+import {connect} from 'react-redux';
+import {getGroupInfo, clearStore} from '../../store/reducers/group';
+import FullGroupViewer from '../../components/FullGroupViewer/FullGroupViewer';
+import {Loader} from '@yandex-cloud/uikit';
+import {GROUP_AUTO_RELOAD_INTERVAL} from '../../utils/constants';
+import './Group.scss';
+
+const b = cn('group');
+
+class Group extends React.Component {
+    static renderLoader() {
+        return (
+            <div className={'loader'}>
+                <Loader size="l" />
+            </div>
+        );
+    }
+
+    static propTypes = {
+        className: PropTypes.string,
+        loading: PropTypes.bool,
+        wasLoaded: PropTypes.bool,
+        error: PropTypes.bool,
+        getGroupInfo: PropTypes.func,
+        clearStore: PropTypes.func,
+        group: PropTypes.object,
+        location: PropTypes.object,
+        match: PropTypes.object,
+    };
+
+    static defaultProps = {
+        className: '',
+    };
+
+    componentDidMount() {
+        const {id} = this.props.match.params;
+        this.props.getGroupInfo(id);
+        this.reloadDescriptor = setInterval(
+            () => this.props.getGroupInfo(id),
+            GROUP_AUTO_RELOAD_INTERVAL,
+        );
+    }
+
+    componentWillUnmount() {
+        this.props.clearStore();
+        clearInterval(this.reloadDescriptor);
+    }
+
+    renderContent = () => {
+        const {className, group} = this.props;
+        return (
+            <div className={`${b()} ${className}`}>
+                <FullGroupViewer group={group} />
+            </div>
+        );
+    };
+
+    render() {
+        const {loading, wasLoaded, error, group} = this.props;
+
+        if (loading && !wasLoaded) {
+            return Group.renderLoader();
+        } else if (error) {
+            return <div>{error.statusText}</div>;
+        } else if (group) {
+            return this.renderContent();
+        } else {
+            return <div className="error">no data</div>;
+        }
+    }
+}
+
+const mapStateToProps = (state) => {
+    const {data, wasLoaded, loading, error} = state.group;
+
+    let group;
+    if (data) {
+        group = data.StoragePools[0].Groups[0];
+    }
+
+    return {
+        group,
+        wasLoaded,
+        loading,
+        error,
+    };
+};
+
+const mapDispatchToProps = {
+    getGroupInfo,
+    clearStore,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Group);

package/dist/containers/Group/Group.scss

@@ -0,0 +1,6 @@
+@import '../../styles/mixins';
+
+.group {
+    @include flex-container();
+    overflow: auto;
+}