ydb-embedded-ui 0.1.0 → 1.0.1

package/dist/containers/Tenant/{Schema → Diagnostics}/HotKeys/HotKeys.js

@@ -6,10 +6,11 @@ import DataTable from '@yandex-cloud/react-data-table';
 
 import Icon from '../../../../components/Icon/Icon';
 
-import {AutoFetcher} from '../../../Cluster/Cluster';
+import {AutoFetcher} from '../../../../utils/autofetcher';
 import {getHotKeys, setHotKeysOptions} from '../../../../store/reducers/hotKeys';
 
 import './HotKeys.scss';
+import {TABLE_TYPE} from '../../Tenant';
 
 const b = cn('hot-keys');
 
@@ -37,12 +38,18 @@ function HotKeys({
     autorefresh,
     setHotKeysOptions,
     currentSchema,
+    type,
 }) {
+    const fetchData = () => {
+        if (type === TABLE_TYPE) {
+            getHotKeys(currentSchemaPath);
+        }
+    };
     useEffect(() => {
-        getHotKeys(currentSchemaPath);
         if (autorefresh) {
+            fetchData();
             autofetcher.start();
-            autofetcher.fetch(() => getHotKeys(currentSchemaPath));
+            autofetcher.fetch(() => fetchData());
         } else {
             autofetcher.stop();
         }
@@ -52,7 +59,7 @@ function HotKeys({
     }, [autorefresh]);
 
     useEffect(() => {
-        getHotKeys(currentSchemaPath);
+        fetchData();
         setHotKeysOptions({
             wasLoaded: false,
             data: undefined,
@@ -68,7 +75,7 @@ function HotKeys({
     };
 
     const tableColumns = useMemo(() => {
-        const keyColumnsIds = currentSchema?.PathDescription?.Table?.KeyColumnNames;
+        const keyColumnsIds = currentSchema?.PathDescription?.Table?.KeyColumnNames ?? [];
 
         return [
             {
@@ -106,7 +113,7 @@ function HotKeys({
                     columns={tableColumns}
                     data={data}
                     settings={TABLE_SETTINGS}
-                    theme="internal"
+                    theme="yandex-cloud"
                     initialSortOrder={{
                         columnId: tableColumnsIds.accessSample,
                         order: DataTable.DESCENDING,
@@ -127,9 +134,8 @@ function HotKeys({
 
 const mapStateToProps = (state) => {
     const {loading, data, error, wasLoaded} = state.hotKeys;
-    const {currentSchema = {}} = state.schema;
+    const {currentSchema = {}, autorefresh} = state.schema;
     const {Path} = currentSchema;
-    const {autorefresh} = state.schema;
     return {
         loading,
         data,

package/dist/containers/Tenant/{Schema → Diagnostics}/HotKeys/HotKeys.scss

@@ -3,9 +3,9 @@
 .hot-keys {
     display: flex;
     overflow: auto;
-    align-items: flex-start;
-    flex-direction: column;
     flex-grow: 1;
+    flex-direction: column;
+    align-items: flex-start;
 
     max-height: 100%;
 
@@ -13,8 +13,9 @@
 
     &__table-content {
         overflow: auto;
-        height: 100%;
+
         width: 100%;
+        height: 100%;
         @include freeze-nth-column(1);
     }
 
@@ -31,8 +32,8 @@
     }
     &__loader {
         display: flex;
-        align-items: center;
         justify-content: center;
+        align-items: center;
 
         width: 100%;
         height: 100%;
@@ -42,7 +43,8 @@
     }
     &__primary-key-column {
         display: flex;
-        align-items: center;
         gap: 5px;
+
+        align-items: center;
     }
 }

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

@@ -8,16 +8,17 @@ import {Link} from 'react-router-dom';
 import {Loader, Checkbox} from '@yandex-cloud/uikit';
 
 import NodeNetwork from './NodeNetwork/NodeNetwork';
-import Icon from '../../../components/Icon/Icon';
-import ProblemFilter, {problemFilterType} from '../../../components/ProblemFilter/ProblemFilter';
+import Icon from '../../../../components/Icon/Icon';
+import ProblemFilter, {problemFilterType} from '../../../../components/ProblemFilter/ProblemFilter';
 
-import {getNetworkInfo} from '../../../store/reducers/network';
-import {hideTooltip, showTooltip} from '../../../store/reducers/tooltip';
-import {ALL, PROBLEMS} from '../../../utils/constants';
-import routes, {createHref} from '../../../routes';
-import {changeFilter} from '../../../store/reducers/settings';
+import {getNetworkInfo} from '../../../../store/reducers/network';
+import {hideTooltip, showTooltip} from '../../../../store/reducers/tooltip';
+import {ALL, PROBLEMS} from '../../../../utils/constants';
+import routes, {createHref} from '../../../../routes';
+import {changeFilter} from '../../../../store/reducers/settings';
 
 import './Network.scss';
+import {AutoFetcher} from '../../../../utils/autofetcher';
 
 const b = cn('network');
 
@@ -30,6 +31,7 @@ class Network extends React.Component {
         error: PropTypes.object,
         wasLoaded: PropTypes.bool,
         loading: PropTypes.bool,
+        autorefresh: PropTypes.bool,
         path: PropTypes.string,
         filter: problemFilterType,
         changeFilter: PropTypes.func,
@@ -57,9 +59,35 @@ class Network extends React.Component {
         showRacks: false,
     };
 
+    autofetcher;
+
     componentDidMount() {
-        const {path} = this.props;
-        this.props.getNetworkInfo(path);
+        const {path, autorefresh, getNetworkInfo} = this.props;
+        this.autofetcher = new AutoFetcher();
+
+        if (autorefresh) {
+            this.autofetcher.start();
+            this.autofetcher.fetch(() => getNetworkInfo(path));
+        }
+
+        getNetworkInfo(path);
+    }
+
+    componentDidUpdate(prevProps) {
+        const {autorefresh, path} = this.props;
+
+        if (autorefresh && !prevProps.autorefresh) {
+            getNetworkInfo(path);
+            this.autofetcher.start();
+            this.autofetcher.fetch(() => getNetworkInfo(path));
+        }
+        if (!autorefresh && prevProps.autorefresh) {
+            this.autofetcher.stop();
+        }
+    }
+
+    componentWillUnmount() {
+        this.autofetcher.stop();
     }
 
     onChange = (field, num) => {
@@ -323,11 +351,13 @@ class Network extends React.Component {
 
 const mapStateToProps = (state) => {
     const {wasLoaded, loading, data: netWorkInfo} = state.network;
+    const {autorefresh} = state.schema;
     return {
         netWorkInfo,
         wasLoaded,
         loading,
         filter: state.settings.problemFilter,
+        autorefresh,
     };
 };
 

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

@@ -1,52 +1,52 @@
-@import '../../../styles/mixins.scss';
+@import '../../../../styles/mixins.scss';
 
 .network {
-    @include container-fluid();
-    font-size: var(--yc-text-body2-font-size);
-    line-height: var(--yc-text-body2-line-height);
-    max-width: 1305px;
     display: flex;
-    @include flex-container();
     overflow: auto;
+    flex-grow: 1;
     justify-content: space-between;
 
-    &__problem-filter {
-        margin-right: 15px;
-    }
+    max-width: 1305px;
+    height: 100%;
+
+    font-size: var(--yc-text-body2-font-size);
+    line-height: var(--yc-text-body2-line-height);
 
     &__nodes-row {
         display: flex;
-        @include flex-container();
         overflow: auto;
+        flex-grow: 1;
         flex-direction: row;
-        height: 100%;
         align-items: flex-start;
+
+        height: 100%;
     }
 
     &__inner {
-        @include flex-container();
         overflow: auto;
+        @include flex-container();
     }
 
     &__right {
         width: 100%;
         height: 100%;
-        padding-left: 55px;
+        padding-left: 20px;
     }
 
     &__left {
-        padding-right: 55px;
-        border-right: 1px solid var(--yc-color-base-generic-accent);
         height: 100%;
+
+        border-right: 1px solid var(--yc-color-base-generic-accent);
     }
 
     &__placeholder {
         display: flex;
+        flex-grow: 1;
         flex-direction: column;
-        align-items: center;
         justify-content: center;
+        align-items: center;
+
         width: 100%;
-        flex-grow: 1;
         height: 100%;
     }
 
@@ -72,55 +72,52 @@
     }
 
     &__nodes-title {
-        color: var(--yc-color-text-secondary);
+        margin: 0 0 15px;
+
         font-size: var(--yc-text-body2-font-size);
         line-height: var(--yc-text-body2-line-height);
+
+        color: var(--yc-color-text-secondary);
         border-bottom: 1px solid var(--yc-color-base-generic-accent);
-        margin: 0 0 15px 0;
     }
 
     &__link {
-        color: var(--yc-color-base-special);
         text-decoration: none;
+
+        color: var(--yc-color-base-special);
     }
 
     &__title {
+        margin: 20px 0;
+
         font-size: var(--yc-text-body-font-size);
         font-weight: 500;
         line-height: var(--yc-text-body-line-height);
-        margin: 20px 0;
     }
 
     &__checkbox-wrapper {
         display: flex;
         align-items: center;
-        margin-right: 10px;
         label {
             white-space: nowrap;
         }
     }
 
     &__label {
-        margin: 25px 0 16px 0;
+        margin-bottom: 16px;
     }
 
     &__controls {
         display: flex;
-        align-items: center;
-        margin-bottom: 13px;
-        margin-top: 15px;
-        margin-right: 144px;
+        gap: 12px;
 
-        & .radiobox {
-            margin-right: 15px;
-        }
+        margin-bottom: 16px;
     }
 
     &__controls-wrapper {
         display: flex;
-        align-items: center;
-        @include flex-container();
         flex-direction: row;
+        @include flex-container();
     }
 
     &__select {
@@ -129,14 +126,16 @@
     }
 
     &__rack-column {
-        border-radius: 4px;
-        background-color: rgba(0, 0, 0, 0.07);
         display: flex;
-        align-items: center;
         flex-direction: column;
-        padding: 2px;
+        align-items: center;
+
         margin-right: 5px;
         margin-bottom: 5px;
+        padding: 2px;
+
+        border-radius: 4px;
+        background-color: rgba(0, 0, 0, 0.07);
 
         .node-network {
             margin-right: 0;

package/dist/containers/Tenant/{Network → Diagnostics/Network}/NodeNetwork/NodeNetwork.scss

@@ -1,20 +1,22 @@
 .node-network {
+    display: inline-block;
+
     box-sizing: border-box;
     width: 14px;
     height: 14px;
-    border-radius: 3px;
+    margin-right: 5px;
+    margin-bottom: 5px;
     padding: 0 5px;
-    display: inline-block;
-    border-radius: 4px;
-    text-align: center;
-    color: var(--yc-color-text-complementary);
-    text-transform: uppercase;
+
     font-size: 12px;
     line-height: 14px;
     cursor: pointer;
-    margin-right: 5px;
-    margin-bottom: 5px;
+    text-align: center;
+    text-transform: uppercase;
+
+    color: var(--yc-color-text-complementary);
     border: 1px solid transparent;
+    border-radius: 4px;
 
     &_id {
         width: 42px;
@@ -30,8 +32,8 @@
     }
 
     &_black {
-        background-color: var(--yc-color-text-primary);
         color: var(--yc-color-text-light-primary);
+        background-color: var(--yc-color-text-primary);
     }
 
     &_green {

package/dist/containers/Tenant/Diagnostics/Overview/Overview.scss

@@ -0,0 +1,13 @@
+.kv-tenant-overview {
+    &__title {
+        margin: 0;
+        margin-bottom: 15px;
+
+        font-weight: 600;
+    }
+    &__loader {
+        display: flex;
+        flex-grow: 1;
+        justify-content: center;
+    }
+}

package/dist/containers/Tenant/Diagnostics/Overview/Overview.tsx

@@ -0,0 +1,123 @@
+import {useEffect, useMemo} from 'react';
+import {useDispatch, useSelector} from 'react-redux';
+import cn from 'bem-cn-lite';
+
+import {Loader} from '@yandex-cloud/uikit';
+
+//@ts-ignore
+import SchemaInfoViewer from '../../Schema/SchemaInfoViewer/SchemaInfoViewer';
+
+import {OLAP_TABLE_TYPE} from '../../Tenant';
+import {AutoFetcher} from '../../../../utils/autofetcher';
+//@ts-ignore
+import {getSchema} from '../../../../store/reducers/schema';
+//@ts-ignore
+import {getOlapStats} from '../../../../store/reducers/olapStats';
+
+import './Overview.scss';
+
+function prepareOlapTableGeneral(tableData: any, olapStats: any[]) {
+    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,
+            },
+        },
+    };
+}
+
+interface OverviewProps {
+    type: string;
+    className?: string;
+    tenantName?: string;
+}
+
+const b = cn('kv-tenant-overview');
+
+const autofetcher = new AutoFetcher();
+
+function Overview(props: OverviewProps) {
+    const dispatch = useDispatch();
+    const {
+        currentSchema: currentItem = {},
+        loading,
+        wasLoaded,
+        autorefresh,
+        currentSchemaPath,
+    } = useSelector((state: any) => state.schema);
+
+    const {data: olapStats} = useSelector((state: any) => state.olapStats);
+
+    const fetchOverviewData = () => {
+        const {tenantName, type} = props;
+        const schemaPath = currentSchemaPath || tenantName;
+        dispatch(getSchema({path: schemaPath}));
+
+        if (type === OLAP_TABLE_TYPE) {
+            dispatch(getOlapStats({path: schemaPath}));
+        }
+    };
+
+    useEffect(() => {
+        fetchOverviewData();
+        return () => {
+            autofetcher.stop();
+        };
+    }, []);
+
+    useEffect(() => {
+        if (autorefresh) {
+            fetchOverviewData();
+            autofetcher.stop();
+            autofetcher.start();
+            autofetcher.fetch(() => fetchOverviewData());
+        }
+        if (autorefresh === false) {
+            autofetcher.stop();
+        }
+    }, [autorefresh]);
+
+    const tableSchema =
+        currentItem?.PathDescription?.Table || currentItem?.PathDescription?.OlapTableDescription;
+
+    const schemaData = useMemo(() => {
+        return props.type === OLAP_TABLE_TYPE
+            ? prepareOlapTableGeneral(tableSchema, olapStats)
+            : currentItem;
+    }, [props.type, tableSchema, olapStats, currentItem]);
+
+    const renderLoader = () => {
+        return (
+            <div className={b('loader')}>
+                <Loader size="m" />
+            </div>
+        );
+    };
+
+    return loading && !wasLoaded ? (
+        renderLoader()
+    ) : (
+        <div className={props.className}>
+            <SchemaInfoViewer fullPath={currentItem.Path} data={schemaData} />
+        </div>
+    );
+}
+
+export default Overview;