ydb-embedded-ui 0.1.0 → 0.2.0

package/dist/containers/Header/Header.js

@@ -1,88 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {connect} from 'react-redux';
-import cn from 'bem-cn-lite';
-import {withRouter} from 'react-router-dom';
-
-import Host from '../../containers/Header/Host/Host';
-
-import {backend, clusterName as clusterNameLocation} from '../../store';
-import {getHostInfo} from '../../store/reducers/host';
-import {getClusterInfo} from '../../store/reducers/cluster';
-import {setSettingValue, getSettingValue} from '../../store/reducers/settings';
-import {THEME_KEY} from '../../utils/constants';
-
-import './Header.scss';
-
-const b = cn('header');
-
-const ClusterName = ({name}) => (
-    <div className={b('cluster-info')}>
-        <div className={b('cluster-info-title')}>cluster</div>
-        <div className={b('cluster-info-name')}>{name}</div>
-    </div>
-);
-ClusterName.propTypes = {
-    name: PropTypes.string,
-};
-
-class Header extends React.Component {
-    static propTypes = {
-        getHostInfo: PropTypes.func,
-        host: PropTypes.object,
-        pathname: PropTypes.string,
-        clusterName: PropTypes.string,
-        theme: PropTypes.string,
-        setSettingValue: PropTypes.func,
-        getSettingValue: PropTypes.func,
-        getClusterInfo: PropTypes.func,
-        singleClusterMode: PropTypes.bool,
-    };
-    componentDidMount() {
-        const {pathname, clusterName, singleClusterMode} = this.props;
-        const isClustersPage = pathname.includes('/clusters');
-
-        if (!isClustersPage && !clusterName && !singleClusterMode) {
-            this.props.getClusterInfo(clusterNameLocation);
-        }
-        this.props.getHostInfo();
-    }
-    render() {
-        const {host, clusterName: clusterNameWeb, singleClusterMode} = this.props;
-        const clusterName = singleClusterMode ? host.ClusterName : clusterNameWeb;
-
-        return (
-            <header className={b()}>
-                <div className={b('content')}>
-                    {clusterName && <ClusterName name={clusterName} />}
-                </div>
-                {host.Host && (
-                    <Host host={host} backend={backend} singleClusterMode={singleClusterMode} />
-                )}
-            </header>
-        );
-    }
-}
-
-const mapStateToProps = (state, ownProps) => {
-    const {singleClusterMode} = state;
-    const {data: host} = state.host;
-    const {pathname} = ownProps.location;
-
-    return {
-        singleClusterMode,
-        host,
-        pathname,
-        theme: getSettingValue(state, THEME_KEY),
-        clusterName: state.cluster.data?.Name || state.clusterInfo.title,
-    };
-};
-
-const mapDispatchToProps = {
-    getHostInfo,
-    setSettingValue,
-    getClusterInfo,
-};
-
-const ConnectedHeader = connect(mapStateToProps, mapDispatchToProps)(Header);
-export default withRouter(ConnectedHeader);

package/dist/containers/StorageV2/DiskStateProgressBar/DiskStateProgressBar.scss

@@ -1,81 +0,0 @@
-.storage-disk-progress-bar {
-    $block: &;
-    position: relative;
-
-    display: inline-block;
-
-    width: 100%;
-    height: var(--yc-text-body2-line-height);
-
-    border: 1px solid var(--yc-color-infographics-misc-heavy);
-    border-radius: 5px;
-    background-color: var(--yc-color-infographics-misc-medium);
-
-    #{$block}__filled {
-        filter: brightness(0.3) saturate(3);
-    }
-
-    &_green {
-        border-color: var(--yc-color-text-positive);
-        background-color: var(--yc-color-text-positive);
-        filter: opacity(0.8);
-    }
-
-    &_blue {
-        border-color: var(--yc-color-infographics-info-heavy);
-        background-color: var(--yc-color-infographics-info-medium);
-        #{$block}__filled {
-            filter: brightness(0.2) saturate(3);
-        }
-    }
-
-    &_yellow {
-        border-color: var(--yc-color-base-warning-heavy-hover);
-        background-color: var(--yc-color-base-warning-heavy);
-        filter: opacity(0.8);
-    }
-
-    &_orange {
-        border-color: var(--yc-color-infographics-danger-medium);
-        background-color: var(--yc-color-infographics-warning-medium);
-        filter: opacity(0.8);
-        #{$block}__filled {
-            filter: brightness(0.7) saturate(3);
-        }
-    }
-    &_red {
-        border-color: var(--yc-color-base-danger-heavy-hover);
-        background-color: var(--yc-color-base-danger-heavy);
-        filter: opacity(0.8);
-        #{$block}__filled {
-            filter: brightness(0.3) saturate(4);
-        }
-    }
-
-    &__filled {
-        position: absolute;
-        top: 0;
-        left: 0;
-
-        height: 100%;
-
-        border-radius: 5px 0 0 5px;
-        background-color: inherit;
-        filter: brightness(0.6) saturate(2);
-    }
-    &__filled-title {
-        position: absolute;
-        top: 0;
-        left: 5px;
-
-        color: inherit;
-
-        font-size: var(--yc-text-body-font-size);
-        line-height: inherit;
-        &_light {
-            z-index: 100;
-
-            color: var(--yc-color-text-light-primary);
-        }
-    }
-}

package/dist/containers/Tenant/Compute/Compute.scss

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

package/dist/containers/Tenant/Healthcheck/Healthcheck.js

@@ -1,116 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {connect} from 'react-redux';
-import cn from 'bem-cn-lite';
-
-import {Loader, Button} from '@yandex-cloud/uikit';
-
-import IssuesViewer from './IssuesViewer/IssuesViewer';
-
-import {getHealthcheckInfo} from '../../../store/reducers/healthcheckInfo';
-
-import './Healthcheck.scss';
-
-const b = cn('healthcheck');
-
-class Healthcheck extends React.Component {
-    static propTypes = {
-        data: PropTypes.object,
-        loading: PropTypes.bool,
-        error: PropTypes.object,
-        getHealthcheckInfo: PropTypes.func,
-        tenant: PropTypes.string,
-    };
-
-    componentDidMount() {
-        this.fetchHealthcheck();
-    }
-
-    fetchHealthcheck = () => {
-        const {tenant} = this.props;
-        this.props.getHealthcheckInfo(tenant);
-    };
-
-    renderLoader() {
-        return (
-            <div className="loader">
-                <Loader size="l" />
-            </div>
-        );
-    }
-
-    renderOverviewStatus = () => {
-        const {data} = this.props;
-        const {self_check_result: selfCheckResult} = data;
-        const modifier = selfCheckResult.toLowerCase();
-
-        return (
-            <div className={b('self-check-status')}>
-                <h3 className={b('self-check-status-label')}>Self check status</h3>
-                <div className={b('self-check-status-indicator', {[modifier]: true})} />
-                {selfCheckResult}
-                <div className={b('self-check-update')}>
-                    <Button size="s" onClick={this.fetchHealthcheck}>
-                        Update
-                    </Button>
-                </div>
-            </div>
-        );
-    };
-
-    renderHealthcheckIssues() {
-        const {data, showTooltip, hideTooltip} = this.props;
-        const {issue_log: issueLog} = data;
-
-        if (!issueLog) {
-            return null;
-        }
-
-        return (
-            <div className={b('issues')}>
-                <h3>Issues</h3>
-                <IssuesViewer
-                    issues={issueLog}
-                    showTooltip={showTooltip}
-                    hideTooltip={hideTooltip}
-                />
-            </div>
-        );
-    }
-
-    render() {
-        const {loading, error, data} = this.props;
-
-        if (loading) {
-            return this.renderLoader();
-        } else if (error) {
-            return <div>{error.statusText}</div>;
-        } else if (data && data['self_check_result']) {
-            return (
-                <div className={b()}>
-                    {this.renderOverviewStatus()}
-                    {this.renderHealthcheckIssues()}
-                </div>
-            );
-        } else {
-            return <div className="error">no healthcheck data</div>;
-        }
-    }
-}
-
-function mapStateToProps(state) {
-    const {data, loading, wasLoaded, error} = state.healthcheckInfo;
-
-    return {
-        data,
-        loading,
-        wasLoaded,
-        error,
-    };
-}
-
-const mapDispatchToProps = {
-    getHealthcheckInfo,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(Healthcheck);

package/dist/containers/Tenant/Healthcheck/Healthcheck.scss

@@ -1,64 +0,0 @@
-@import '../../../styles/mixins.scss';
-
-.healthcheck {
-    padding: 25px 20px 20px 20px;
-
-    &__message-container {
-        padding: 15px 0;
-    }
-
-    &__loader-container {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 100%;
-    }
-
-    &__self-check-status {
-        display: flex;
-        align-items: center;
-        margin-bottom: 20px;
-    }
-
-    &__self-check-status-label {
-        margin: 0 10px 0 0;
-    }
-
-    &__self-check-update {
-        margin-left: 20px;
-    }
-
-    &__self-check-status-indicator {
-        width: 16px;
-        height: 16px;
-        border-radius: 4px;
-        margin-right: 4px;
-
-        &_good,
-        &_green {
-            background-color: var(--yc-color-base-positive-heavy);
-        }
-        &_degraded,
-        &_yellow {
-            background-color: var(--yc-color-base-warning-heavy);
-        }
-
-        &_blue {
-            background-color: var(--yc-color-base-info-heavy);
-        }
-
-        &_emergency,
-        &_red {
-            background: var(--yc-color-base-danger-heavy);
-        }
-        &_unspecified,
-        &_gray,
-        &_grey {
-            background: var(--yc-color-text-complementary);
-        }
-        &_maintenance_required,
-        &_orange {
-            background: var(--yc-color-text-warning-heavy);
-        }
-    }
-}

package/dist/containers/Tenant/Schema/Info/Info.js

@@ -1,84 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cn from 'bem-cn-lite';
-import './Info.scss';
-
-import SchemaInfoViewer from '../../../Tenant/Schema/SchemaInfoViewer/SchemaInfoViewer';
-import SchemaViewer from '../../../Tenant/Schema/SchemaViewer/SchemaViewer';
-import {OLAP_TABLE_TYPE} from '../SchemaMain/SchemaMain';
-
-const b = cn('schema-info');
-
-function prepareOlapTableSchema(tableSchema) {
-    const {Name, Schema = {}} = tableSchema;
-    const {Columns, KeyColumnNames} = Schema;
-    const KeyColumnIds = KeyColumnNames?.map((name) => {
-        const column = Columns?.find((el) => el.Name === name);
-        return column.Id;
-    });
-
-    return {
-        Columns,
-        KeyColumnNames,
-        Name,
-        KeyColumnIds,
-    };
-}
-
-function prepareOlapTableGeneral(tableData, olapStats) {
-    const {ColumnShardCount} = tableData;
-    const Bytes = olapStats?.reduce((acc, el) => {
-        acc += parseInt(el.Bytes) ?? 0;
-        return acc;
-    }, 0);
-    const Rows = olapStats?.reduce((acc, el) => {
-        acc += parseInt(el.Rows) ?? 0;
-        return acc;
-    }, 0);
-    const tabletIds = olapStats?.reduce((acc, el) => {
-        acc.add(el.TabletId);
-        return acc;
-    }, new Set());
-
-    return {
-        PathDescription: {
-            TableStats: {
-                ColumnShardCount,
-                Bytes: Bytes?.toLocaleString('ru-RU', {useGrouping: true}) ?? 0,
-                Rows: Rows?.toLocaleString('ru-RU', {useGrouping: true}) ?? 0,
-                Parts: tabletIds?.size ?? 0,
-            },
-        },
-    };
-}
-
-class Info extends React.Component {
-    static propTypes = {
-        fullPath: PropTypes.string,
-        currentItem: PropTypes.string,
-        tableSchema: PropTypes.object,
-        olapStats: PropTypes.array,
-        type: PropTypes.string,
-    };
-    render() {
-        const {currentItem, tableSchema, olapStats} = this.props;
-        const fullPath = currentItem.Path;
-
-        const schema =
-            this.props.type === OLAP_TABLE_TYPE ? prepareOlapTableSchema(tableSchema) : tableSchema;
-
-        const data =
-            this.props.type === OLAP_TABLE_TYPE
-                ? prepareOlapTableGeneral(tableSchema, olapStats)
-                : currentItem;
-
-        return (
-            <div className={b()}>
-                <SchemaInfoViewer fullPath={fullPath} data={data} />
-                {schema && <SchemaViewer data={schema} />}
-            </div>
-        );
-    }
-}
-
-export default Info;

package/dist/containers/Tenant/Schema/Info/Info.scss

@@ -1,3 +0,0 @@
-.schema-info {
-    display: flex;
-}