ydb-embedded-ui 0.1.0 → 1.0.1

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.js

@@ -0,0 +1,200 @@
+import React from 'react';
+import {connect} from 'react-redux';
+import cn from 'bem-cn-lite';
+import PropTypes from 'prop-types';
+
+import EntityStatus from '../../../../components/EntityStatus/EntityStatus';
+import InfoViewer from '../../../../components/InfoViewer/InfoViewer';
+import PoolUsage from '../../../../components/PoolUsage/PoolUsage';
+import Tablet from '../../../../components/Tablet/Tablet';
+
+import {hideTooltip, showTooltip} from '../../../../store/reducers/tooltip';
+import {getTenantInfo} from '../../../../store/reducers/tenant';
+
+import {formatCPU} from '../../../../utils';
+import {bytesToGB} from '../../../../utils/utils';
+import {TABLET_STATES} from '../../../../utils/constants';
+
+import './TenantOverview.scss';
+import {AutoFetcher} from '../../../../utils/autofetcher';
+import {Loader} from '@yandex-cloud/uikit';
+
+const b = cn('tenant-overview');
+
+const renderName = (tenant) => {
+    if (tenant) {
+        const {Name} = tenant;
+        return (
+            <div className={b('tenant-name')}>
+                <EntityStatus status={tenant.State} />
+                <span>{Name}</span>
+            </div>
+        );
+    }
+
+    return <div>no tenant data</div>;
+};
+
+class TenantOverview extends React.Component {
+    static propTypes = {
+        loading: PropTypes.bool,
+        autorefresh: PropTypes.bool,
+        tenant: PropTypes.object,
+        hideTooltip: PropTypes.func,
+        showTooltip: PropTypes.func,
+        systemTablets: PropTypes.array,
+        additionalTenantInfo: PropTypes.func,
+        tenantName: PropTypes.string,
+    };
+
+    autofetcher;
+
+    componentDidMount() {
+        const {tenantName, autorefresh, getTenantInfo} = this.props;
+        this.autofetcher = new AutoFetcher();
+        if (autorefresh) {
+            this.autofetcher.start();
+            this.autofetcher.fetch(() => getTenantInfo({path: tenantName}));
+        }
+    }
+
+    componentDidUpdate(prevProps) {
+        const {autorefresh, tenantName, getTenantInfo} = this.props;
+        if (autorefresh && !prevProps.autorefresh) {
+            getTenantInfo({path: tenantName});
+            this.autofetcher.stop();
+            this.autofetcher.start();
+            this.autofetcher.fetch(() => getTenantInfo({path: tenantName}));
+        }
+        if (!autorefresh && prevProps.autorefresh) {
+            this.autofetcher.stop();
+        }
+    }
+
+    componentWillUnmount() {
+        this.autofetcher.stop();
+    }
+
+    renderLoader = () => {
+        return (
+            <div className={b('loader')}>
+                <Loader size="m" />
+            </div>
+        );
+    };
+
+    render() {
+        const {tenant, hideTooltip, showTooltip, loading} = this.props;
+        const {
+            Metrics = {},
+            PoolStats,
+            StateStats = [],
+            MemoryUsed,
+            CoresUsed,
+            StorageGroups,
+            StorageAllocatedSize,
+            Type,
+            SystemTablets,
+        } = tenant;
+
+        const memoryRaw = MemoryUsed ?? Metrics.Memory;
+
+        const memory = (memoryRaw && bytesToGB(memoryRaw)) || 'no data';
+        const storage = (Metrics.Storage && bytesToGB(Metrics.Storage)) || 'no data';
+        const storageGroups = StorageGroups ?? 'no data';
+        const blobStorage = (StorageAllocatedSize && bytesToGB(StorageAllocatedSize)) || 'no data';
+        const storageEfficiency =
+            Metrics.Storage && StorageAllocatedSize
+                ? `${((Metrics.Storage * 100) / StorageAllocatedSize).toFixed(2)}%`
+                : 'no data';
+
+        const cpuRaw = CoresUsed !== undefined ? Number(CoresUsed) * 1_000_000 : Metrics.CPU;
+
+        const cpu = formatCPU(cpuRaw);
+
+        const metricsInfo = [
+            {label: 'Type', value: Type},
+            {label: 'Memory', value: memory},
+            {label: 'CPU', value: cpu},
+            {label: 'Tablet storage', value: storage},
+            {label: 'Storage groups', value: storageGroups},
+            {label: 'Blob storage', value: blobStorage},
+            {label: 'Storage efficiency', value: storageEfficiency},
+        ];
+
+        const tabletsInfo = StateStats.map((info) => ({
+            label: TABLET_STATES[info.VolatileState],
+            value: info.Count,
+        }));
+
+        return loading ? (
+            this.renderLoader()
+        ) : (
+            <div className={b()}>
+                <div className={b('top-label')}>Database</div>
+                <div className={b('top')}>
+                    {renderName(tenant)}
+                    {this.props.additionalTenantInfo &&
+                        this.props.additionalTenantInfo(
+                            this.props.tenant.Name,
+                            this.props.tenant.Type,
+                        )}
+                    <div className={b('system-tablets')}>
+                        {SystemTablets &&
+                            SystemTablets.map((tablet, tabletIndex) => (
+                                <Tablet
+                                    onMouseEnter={showTooltip}
+                                    onMouseLeave={hideTooltip}
+                                    key={tabletIndex}
+                                    tablet={tablet}
+                                />
+                            ))}
+                    </div>
+                </div>
+                <div className={b('common-info')}>
+                    {PoolStats ? (
+                        <div>
+                            <div className={b('section-title')}>Pools</div>
+                            <div className={b('section', {pools: true})}>
+                                {PoolStats.map((pool, poolIndex) => (
+                                    <PoolUsage key={poolIndex} data={pool} />
+                                ))}
+                            </div>
+                        </div>
+                    ) : (
+                        <div className="error">no pools data</div>
+                    )}
+                    <InfoViewer
+                        title="Metrics"
+                        className={b('section', {metrics: true})}
+                        info={metricsInfo}
+                    />
+
+                    <div className={b('section')}>
+                        <InfoViewer info={tabletsInfo} title="Tablets" />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+function mapStateToProps(state) {
+    const {tenant = {}, loading, data: {status} = {}} = state.tenant;
+    const {autorefresh} = state.schema;
+
+    return {
+        tenant,
+        loading,
+        status,
+        autorefresh,
+    };
+}
+
+const mapDispatchToProps = {
+    hideTooltip,
+    showTooltip,
+    getTenantInfo,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(TenantOverview);

package/dist/{components → containers/Tenant/Diagnostics}/TenantOverview/TenantOverview.scss

@@ -1,35 +1,46 @@
 .tenant-overview {
-    padding: 15px;
+    padding-bottom: 20px;
+    &__loader {
+        display: flex;
+        justify-content: center;
+    }
+    &__tenant-name {
+        display: flex;
+        align-items: center;
+
+        & .yc-link {
+            display: flex;
+        }
+    }
 
     &__top {
         display: flex;
         align-items: center;
 
-        margin-bottom: 10px;
+        margin-bottom: 20px;
     }
 
     &__top-label {
-        margin-right: 16px;
+        gap: 10px;
 
-        text-transform: uppercase;
+        margin-bottom: 20px;
 
-        font-size: var(--yc-text-body2-font-size);
-        font-weight: 500;
-        line-height: var(--yc-text-body2-line-height);
+        font-weight: 600;
     }
 
     &__common-info {
         display: flex;
-        align-items: stretch;
-        justify-content: flex-start;
+        gap: 20px;
 
-        padding-left: 12px;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: stretch;
     }
 
     &__system-tablets {
         display: flex;
-        align-items: center;
         flex-wrap: wrap;
+        align-items: center;
 
         margin-left: 15px;
     }
@@ -42,9 +53,6 @@
     }
 
     &__section {
-        margin-right: 20px;
-        padding: 0 15px 0 0;
-
         border-radius: 10px;
 
         &_metrics {
@@ -58,15 +66,14 @@
 
         &_pools {
             display: grid;
+            grid-gap: 7px 20px;
 
-            padding: 15px 15px 0 0;
             grid-template-columns: 110px 110px;
-            grid-gap: 7px 20px;
         }
     }
 
     &__section-title {
-        margin: 0;
+        margin-bottom: 20px;
 
         font-size: var(--yc-text-body2-font-size);
         font-weight: 500;

package/dist/containers/Tenant/{TopQueries → Diagnostics/TopQueries}/TopQueries.js

@@ -2,26 +2,22 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
 import {connect} from 'react-redux';
-import {Loader} from '@yandex-cloud/uikit';
 import DataTable from '@yandex-cloud/react-data-table';
 
-import {changeUserInput} from '../../../store/reducers/executeQuery';
-import {sendQuery, setQueryOptions} from '../../../store/reducers/executeTopQueries';
-import {QUERY} from '../Schema/SchemaPages';
-import TruncatedQuery from '../../../components/TruncatedQuery/TruncatedQuery';
-import {AutoFetcher} from '../../Cluster/Cluster';
-import {OLAP_STORE_TYPE, OLAP_TABLE_TYPE} from '../Schema/SchemaMain/SchemaMain';
+import {changeUserInput} from '../../../../store/reducers/executeQuery';
+import {sendQuery, setQueryOptions} from '../../../../store/reducers/executeTopQueries';
+import TruncatedQuery from '../../../../components/TruncatedQuery/TruncatedQuery';
+import {AutoFetcher} from '../../../../utils/autofetcher';
+import { OLAP_STORE_TYPE, OLAP_TABLE_TYPE } from '../../Tenant';
 
 import './TopQueries.scss';
+import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
+import {TenantGeneralTabsIds} from '../../TenantPages';
+import {Loader} from '@yandex-cloud/uikit';
+
 
 const b = cn('kv-top-queries');
 
-const TABLE_SETTINGS = {
-    displayIndices: false,
-    syncHeadOnResize: true,
-    stickyHead: DataTable.MOVING,
-    highlightRows: true,
-};
 const MAX_QUERY_HEIGHT = 10;
 const COLUMNS = [
     {
@@ -58,8 +54,11 @@ class TopQueries extends React.Component {
         path: PropTypes.string,
         data: PropTypes.array,
         loading: PropTypes.bool,
+        wasLoaded: PropTypes.bool,
         changeSchemaTab: PropTypes.func,
         currentSchema: PropTypes.object,
+        type: PropTypes.string,
+        className: PropTypes.string,
     };
 
     autofetcher;
@@ -67,6 +66,10 @@ class TopQueries extends React.Component {
     componentDidMount() {
         this.autofetcher = new AutoFetcher();
         this.getTopQueries();
+        if (this.props.autorefresh) {
+            this.autofetcher.start();
+            this.autofetcher.fetch(() => this.getTopQueries());
+        }
     }
 
     componentDidUpdate(prevProps) {
@@ -93,6 +96,14 @@ class TopQueries extends React.Component {
         this.autofetcher.stop();
     }
 
+    renderLoader = () => {
+        return (
+            <div className={b('loader')}>
+                <Loader size="m" />
+            </div>
+        );
+    };
+
     getTopQueries() {
         const {path} = this.props;
         const query = getQueryText(path);
@@ -104,7 +115,7 @@ class TopQueries extends React.Component {
         const {changeUserInput, changeSchemaTab} = this.props;
 
         changeUserInput({input});
-        changeSchemaTab(QUERY);
+        changeSchemaTab(TenantGeneralTabsIds.query);
     };
 
     renderTable = () => {
@@ -118,7 +129,7 @@ class TopQueries extends React.Component {
             <DataTable
                 columns={COLUMNS}
                 data={data}
-                settings={TABLE_SETTINGS}
+                settings={DEFAULT_TABLE_SETTINGS}
                 onRowClick={this.onRowClick}
             />
         );
@@ -133,17 +144,10 @@ class TopQueries extends React.Component {
     };
 
     render() {
-        const {error, loading, data, wasLoaded, type} = this.props;
-
-        if (loading && !wasLoaded) {
-            return (
-                <div className={b('loader-container')}>
-                    <Loader size="m" />
-                </div>
-            );
-        }
+        const {error, loading, data, type, className, wasLoaded} = this.props;
 
         let message;
+
         if (type === OLAP_STORE_TYPE || type === OLAP_TABLE_TYPE) {
             message = 'No data';
         } else if (error && !error.isCancelled) {
@@ -152,13 +156,11 @@ class TopQueries extends React.Component {
             message = 'No data';
         }
 
-        if (message) {
-            return <div className={b('message-container')}>{message}</div>;
-        }
-
-        return (
+        return loading && !wasLoaded ? (
+            this.renderLoader()
+        ) : (
             <div className={b()}>
-                <div className={b('result')}>{this.renderResult()}</div>
+                <div className={b('result', className)}>{message || this.renderResult()}</div>
             </div>
         );
     }

package/dist/containers/Tenant/{TopQueries → Diagnostics/TopQueries}/TopQueries.scss

@@ -1,19 +1,18 @@
-@import '../../../styles/mixins.scss';
+@import '../../../../styles/mixins.scss';
 
 .kv-top-queries {
+    height: 100%;
+
+    @include query-data-table;
     &__message-container {
         padding: 15px 0;
     }
 
-    &__loader-container {
+    &__loader {
         display: flex;
         justify-content: center;
-        align-items: center;
-        height: 100%;
     }
 
-    @include query-data-table;
-
     &__owner-container {
         margin: 10px;
 
@@ -25,6 +24,7 @@
     &__text {
         font-size: var(--yc-text-body-font-size);
         line-height: var(--yc-text-body-line-height);
+
         color: var(--yc-color-text-primary);
 
         &::first-letter {
@@ -39,14 +39,15 @@
                 width: 100%;
             }
             &__td {
-                word-break: break-word;
-                white-space: pre;
                 vertical-align: top;
+                white-space: pre;
+                word-break: break-word;
             }
 
             &__row {
-                cursor: pointer;
                 max-height: 80px;
+
+                cursor: pointer;
             }
         }
     }

package/dist/containers/Tenant/{TopShards → Diagnostics/TopShards}/TopShards.js

@@ -1,28 +1,24 @@
 import {useContext, useEffect, useMemo} from 'react';
 import cn from 'bem-cn-lite';
 import {connect} from 'react-redux';
-import InternalLink from '../../../components/InternalLink/InternalLink';
-import {Loader} from '@yandex-cloud/uikit';
+import InternalLink from '../../../../components/InternalLink/InternalLink';
 import DataTable from '@yandex-cloud/react-data-table';
-import routes, {createHref} from '../../../routes';
+import routes, {createHref} from '../../../../routes';
+
+import {sendShardQuery, setShardQueryOptions} from '../../../../store/reducers/shardsWorkload';
+import {setCurrentSchemaPath, getSchema} from '../../../../store/reducers/schema';
+import {AutoFetcher} from '../../../../utils/autofetcher';
 
-import {sendShardQuery, setShardQueryOptions} from '../../../store/reducers/shardsWorkload';
-import {setCurrentSchemaPath, getSchema} from '../../../store/reducers/schema';
-import {AutoFetcher} from '../../Cluster/Cluster';
+import HistoryContext from '../../../../contexts/HistoryContext';
 
 import './TopShards.scss';
-import {OLAP_STORE_TYPE, OLAP_TABLE_TYPE} from '../Schema/SchemaMain/SchemaMain';
-import HistoryContext from '../../../contexts/HistoryContext';
+import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
+import {Loader} from '@yandex-cloud/uikit';
+import { OLAP_STORE_TYPE, OLAP_TABLE_TYPE } from '../../Tenant';
 
 const b = cn('top-shards');
 const bLink = cn('yc-link');
 
-const TABLE_SETTINGS = {
-    displayIndices: false,
-    syncHeadOnResize: true,
-    stickyHead: DataTable.MOVING,
-};
-
 const tableColumnsNames = {
     TabletId: 'TabletId',
     CPUCores: 'CPUCores',
@@ -69,14 +65,6 @@ function TopShards({
         });
     }, [currentSchemaPath]);
 
-    const renderLoader = () => {
-        return (
-            <div className={b('loader')}>
-                <Loader size="l" />
-            </div>
-        );
-    };
-
     const history = useContext(HistoryContext);
 
     const onSchemaClick = (schemaPath) => {
@@ -122,21 +110,30 @@ function TopShards({
         ];
     }, []);
 
+    const renderLoader = () => {
+        return (
+            <div className={b('loader')}>
+                <Loader size="m" />
+            </div>
+        );
+    };
+
     const renderContent = () => {
         if (type === OLAP_STORE_TYPE || type === OLAP_TABLE_TYPE) {
-            return <div className={b('no-data')}>No data</div>;
+            return 'No data';
         }
         if (error) {
-            return error.data;
+            return error.data || error;
         }
+
         return data && data.length > 0 ? (
             <div className={b('table')}>
                 <DataTable
                     columns={tableColumns}
                     data={data}
-                    settings={TABLE_SETTINGS}
+                    settings={DEFAULT_TABLE_SETTINGS}
                     className={b('table')}
-                    theme="internal"
+                    theme="yandex-cloud"
                 />
             </div>
         ) : (
@@ -144,18 +141,17 @@ function TopShards({
         );
     };
 
-    return <div className={b()}>{loading && !wasLoaded ? renderLoader() : renderContent()}</div>;
+    return loading && !wasLoaded ? renderLoader() : <div className={b()}>{renderContent()}</div>;
 }
 
 const mapStateToProps = (state) => {
     const {loading, data, error, wasLoaded} = state.shardsWorkload;
-    const {Path} = state.schema.currentSchema;
     const {autorefresh} = state.schema;
     return {
         loading,
         data,
         error,
-        currentSchemaPath: Path,
+        currentSchemaPath: state.schema?.currentSchema?.Path,
         autorefresh,
         wasLoaded,
     };

package/dist/containers/Tenant/{TopShards → Diagnostics/TopShards}/TopShards.scss

@@ -1,23 +1,11 @@
 .top-shards {
-    height: 100%;
-    padding-top: 10px;
-
     background-color: var(--yc-color-base-background);
     &__loader {
         display: flex;
-        align-items: center;
         justify-content: center;
-
-        height: 100%;
     }
 
     &__table {
-        overflow: auto;
-
-        margin-top: 5px;
-    }
-
-    &__no-data {
-        margin-top: 5px;
+        height: 100%;
     }
 }

package/dist/containers/Tenant/ObjectGeneral/ObjectGeneral.scss

@@ -0,0 +1,38 @@
+@import '../../../styles/mixins.scss';
+
+.object-general {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+
+    width: 100%;
+    height: 100%;
+    max-height: 100%;
+
+    &__tabs {
+        display: flex;
+        gap: 20px;
+
+        padding: 13px 20px 0;
+
+        box-shadow: inset 0 -1px 0 0 var(--yc-color-line-generic);
+        @include body3-typography();
+        .yc-tabs {
+            box-shadow: unset;
+        }
+    }
+    &__tab {
+        text-decoration: none;
+    }
+
+    &__loader {
+        display: flex;
+    }
+
+    &__tab-label {
+        display: flex;
+        gap: 5px;
+
+        align-items: center;
+    }
+}