ydb-embedded-ui 0.1.0 → 0.2.0

package/dist/containers/Tenant/Acl/Acl.js

@@ -5,65 +5,66 @@ import _ from 'lodash';
 import {connect} from 'react-redux';
 import {Loader} from '@yandex-cloud/uikit';
 import DataTable from '@yandex-cloud/react-data-table';
+import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
 
 import './Acl.scss';
 
 const b = cn('kv-acl');
 
-const TABLE_SETTINGS = {
-    displayIndices: false,
-    syncHeadOnResize: true,
-    stickyHead: DataTable.MOVING,
-};
 const COLUMN_WIDTH = 140;
-const COLUMNS = [
-    {
-        name: 'AccessType',
-        header: 'Access Type',
-        sortable: false,
-        width: COLUMN_WIDTH,
-    },
-    {
-        name: 'AccessRights',
-        header: 'Access Rights',
-        render: ({value}) => {
-            return _.map(value, (item, index) => {
-                return <div key={index}>{item}</div>;
-            });
-        },
-        width: COLUMN_WIDTH,
-        sortable: false,
-    },
-    {
-        name: 'Subject',
-        sortable: false,
-        // eslint-disable-next-line react/display-name
-        render: ({value}) => {
-            return Acl.prepareLogin(value);
-        },
-        width: COLUMN_WIDTH,
-    },
-    {
-        name: 'InheritanceType',
-        header: 'Inheritance Type',
-        render: ({value}) => {
-            return _.map(value, (item, index) => {
-                return <div key={index}>{item}</div>;
-            });
-        },
-        width: COLUMN_WIDTH,
-        sortable: false,
-    },
-];
 
 class Acl extends React.Component {
     static propTypes = {
         error: PropTypes.string,
         acl: PropTypes.array,
         loading: PropTypes.bool,
+        additionalTenantInfo: PropTypes.object,
     };
 
-    static prepareLogin = (value) => {
+    COLUMNS = [
+        {
+            name: 'AccessType',
+            header: 'Access Type',
+            sortable: false,
+            width: COLUMN_WIDTH,
+        },
+        {
+            name: 'AccessRights',
+            header: 'Access Rights',
+            render: ({value}) => {
+                return _.map(value, (item, index) => {
+                    return <div key={index}>{item}</div>;
+                });
+            },
+            width: COLUMN_WIDTH,
+            sortable: false,
+        },
+        {
+            name: 'Subject',
+            sortable: false,
+            // eslint-disable-next-line react/display-name
+            render: ({value}) => {
+                return this.prepareLogin(value);
+            },
+            width: COLUMN_WIDTH,
+        },
+        {
+            name: 'InheritanceType',
+            header: 'Inheritance Type',
+            render: ({value}) => {
+                return _.map(value, (item, index) => {
+                    return <div key={index}>{item}</div>;
+                });
+            },
+            width: COLUMN_WIDTH,
+            sortable: false,
+        },
+    ];
+
+    prepareLogin = (value) => {
+        if (this.props.prepareLogin) {
+            return this.props.additionalTenantInfo?.prepareLogin(value);
+        }
         if (value && value.endsWith('@staff') && !value.startsWith('svc_')) {
             const login = value.split('@')[0];
             return login;
@@ -79,7 +80,13 @@ class Acl extends React.Component {
             return null;
         }
 
-        return <DataTable columns={COLUMNS} data={acl} settings={TABLE_SETTINGS} />;
+        return (
+            <DataTable
+                columns={this.COLUMNS}
+                data={acl}
+                settings={{...DEFAULT_TABLE_SETTINGS, stickyTop: 36}}
+            />
+        );
     };
 
     renderOwner = () => {
@@ -92,7 +99,7 @@ class Acl extends React.Component {
         return (
             <div className={b('owner-container')}>
                 <span className={b('owner-label')}>Owner: </span>
-                {Acl.prepareLogin(owner)}
+                {this.prepareLogin(owner)}
             </div>
         );
     };

package/dist/containers/Tenant/Acl/Acl.scss

@@ -1,22 +1,28 @@
 @import '../../../styles/mixins.scss';
 
 .kv-acl {
+    padding: 0 12px 16px;
+    @include query-data-table;
     &__message-container {
-        padding: 15px 0;
+        padding: 0 12px 16px;
     }
 
     &__loader-container {
         display: flex;
         justify-content: center;
         align-items: center;
+
         height: 100%;
     }
 
-    @include query-data-table;
-
     &__owner-container {
-        margin: 10px;
+        position: sticky;
+        z-index: 2;
+        top: 0;
 
+        padding-bottom: 16px;
+
+        background-color: var(--yc-color-base-background);
         .yc-staff-card {
             display: inline-block;
         }
@@ -25,10 +31,15 @@
     &__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 {
             color: var(--yc-color-text-danger);
         }
     }
+
+    &__result {
+        overflow: auto;
+    }
 }

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

@@ -7,14 +7,14 @@ import qs from 'qs';
 
 import {Loader} from '@yandex-cloud/uikit';
 
-import NodesViewer from '../../../components/NodesViewer/NodesViewer';
+import NodesViewer from '../../../../components/NodesViewer/NodesViewer';
 
-import {backend} from '../../../store';
-import {hideTooltip, showTooltip} from '../../../store/reducers/tooltip';
-import {getNodes, clearNodes} from '../../../store/reducers/nodes';
-import {AUTO_RELOAD_INTERVAL} from '../../../utils/constants';
+import {backend} from '../../../../store';
+import {hideTooltip, showTooltip} from '../../../../store/reducers/tooltip';
+import {getNodes, clearNodes} from '../../../../store/reducers/nodes';
 
 import './Compute.scss';
+import {AutoFetcher} from '../../../../utils/autofetcher';
 
 const b = cn('compute');
 
@@ -25,6 +25,7 @@ class Compute extends React.Component {
         tenantName: PropTypes.string,
         nodes: PropTypes.object,
         loading: PropTypes.bool,
+        autorefresh: PropTypes.bool,
         error: PropTypes.object,
         wasLoaded: PropTypes.bool,
         getNodes: PropTypes.func,
@@ -33,30 +34,50 @@ class Compute extends React.Component {
         timeoutForRequest: PropTypes.number,
     };
 
+    autofetcher;
+
     componentDidMount() {
-        const {getNodes, tenantName} = this.props;
+        const {getNodes, tenantName, autorefresh} = this.props;
+
+        this.autofetcher = new AutoFetcher();
 
         if (tenantName) {
             getNodes(tenantName);
-            this.reloadDescriptor = setInterval(() => getNodes(tenantName), AUTO_RELOAD_INTERVAL);
+            if (autorefresh) {
+                this.autofetcher.start();
+                this.autofetcher.fetch(() => getNodes(tenantName));
+            }
+        }
+    }
+
+    componentDidUpdate(prevProps) {
+        const {autorefresh, getNodes, tenantName} = this.props;
+
+        if (autorefresh && !prevProps.autorefresh) {
+            getNodes(tenantName);
+            this.autofetcher.start();
+            this.autofetcher.fetch(() => getNodes(tenantName));
+        }
+        if (!autorefresh && prevProps.autorefresh) {
+            this.autofetcher.stop();
         }
     }
 
     componentWillUnmount() {
         this.props.clearNodes();
-        clearInterval(this.reloadDescriptor);
+        this.autofetcher.stop();
     }
 
     renderLoader() {
         return (
-            <div className="loader">
-                <Loader size="l" />
+            <div className={b('loader')}>
+                <Loader size="m" />
             </div>
         );
     }
 
     render() {
-        const {nodes, loading, wasLoaded, error, tenantName} = this.props;
+        const {nodes, error, tenantName, wasLoaded, loading} = this.props;
         if (!tenantName) {
             return <div className="error">no tenant name in the query string</div>;
         } else if (loading && !wasLoaded) {
@@ -82,12 +103,13 @@ class Compute extends React.Component {
 
 function mapStateToProps(state, ownProps) {
     const {data, loading, wasLoaded, error, timeoutForRequest} = state.nodes;
+    const {autorefresh} = state.schema;
     const {search} = ownProps.location;
     const queryParams = qs.parse(search, {
         ignoreQueryPrefix: true,
     });
     const {name: tenantName} = queryParams;
-    const nodes = (data && data.Tenants && data.Tenants[0] && data.Tenants[0].Nodes) || {};
+    const nodes = (data && data.Tenants && data.Tenants[0] && data.Tenants[0].Nodes) || [];
     return {
         nodes,
         tenantName,
@@ -95,6 +117,7 @@ function mapStateToProps(state, ownProps) {
         loading,
         wasLoaded,
         error,
+        autorefresh,
     };
 }
 

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

@@ -0,0 +1,14 @@
+@import '../../../../styles/mixins.scss';
+
+.compute {
+    overflow: auto;
+
+    height: 100%;
+    max-height: 100%;
+    @include flex-container();
+
+    &__loader {
+        display: flex;
+        justify-content: center;
+    }
+}

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

@@ -5,8 +5,11 @@ import {connect} from 'react-redux';
 import {Loader} from '@yandex-cloud/uikit';
 import JSONTree from 'react-json-inspector';
 
+import {getDescribe} from '../../../../store/reducers/describe';
+
 import './Describe.scss';
 import 'react-json-inspector/json-inspector.css';
+import {AutoFetcher} from '../../../../utils/autofetcher';
 
 const b = cn('kv-describe');
 
@@ -17,8 +20,47 @@ class Describe extends React.Component {
         error: PropTypes.string,
         data: PropTypes.array,
         loading: PropTypes.bool,
+        wasLoaded: PropTypes.bool,
+        autorefresh: PropTypes.bool,
+        tenant: PropTypes.string,
     };
 
+    autofetcher;
+
+    componentDidMount() {
+        const {autorefresh} = this.props;
+        this.autofetcher = new AutoFetcher();
+        this.fetchData();
+        if (autorefresh) {
+            this.autofetcher.start();
+            this.autofetcher.fetch(() => this.fetchData);
+        }
+    }
+
+    componentDidUpdate(prevProps) {
+        const {autorefresh} = this.props;
+
+        if (autorefresh && !prevProps.autorefresh) {
+            this.fetchData();
+            this.autofetcher.stop();
+            this.autofetcher.start();
+            this.autofetcher.fetch(() => this.fetchData());
+        }
+        if (!autorefresh && prevProps.autorefresh) {
+            this.autofetcher.stop();
+        }
+    }
+
+    componentWillUnmount() {
+        this.autofetcher.stop();
+    }
+
+    fetchData() {
+        const {getDescribe, tenant, currentSchemaPath} = this.props;
+        const path = currentSchemaPath || tenant;
+        getDescribe({path});
+    }
+
     renderDescribeJson = () => {
         const {data} = this.props;
 
@@ -69,13 +111,20 @@ class Describe extends React.Component {
 
 const mapStateToProps = (state) => {
     const {loading, error, currentDescribe, wasLoaded} = state.describe;
+    const {autorefresh, currentSchemaPath} = state.schema;
 
     return {
         data: currentDescribe,
         loading,
         error,
         wasLoaded,
+        autorefresh,
+        currentSchemaPath,
     };
 };
 
-export default connect(mapStateToProps)(Describe);
+const mapDispatchToProps = {
+    getDescribe,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Describe);

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

@@ -1,4 +1,4 @@
-@import '../../../styles/mixins.scss';
+@import '../../../../styles/mixins.scss';
 
 .kv-describe {
     &__message-container {
@@ -6,16 +6,18 @@
     }
 
     &__result {
-        padding: 10px 20px 20px 0;
         display: flex;
-        flex: 0 0 auto;
         overflow: auto;
+        flex: 0 0 auto;
+
+        padding: 10px 20px 20px 0;
     }
 
     &__loader-container {
         display: flex;
         justify-content: center;
         align-items: center;
+
         height: 100%;
     }
 

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

@@ -0,0 +1,27 @@
+.kv-detailed-overview {
+    display: flex;
+    gap: 10px;
+    &__section {
+        display: flex;
+        flex: 0 0 50%;
+        flex-direction: column;
+    }
+
+    &__modal {
+        & .yc-modal__content {
+            position: relative;
+        }
+    }
+
+    &__close-modal-button {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+
+        & .yc-button__text {
+            display: flex;
+
+            margin: 0 4px;
+        }
+    }
+}

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

@@ -0,0 +1,88 @@
+import React, {useState} from 'react';
+import {useSelector} from 'react-redux';
+import cn from 'bem-cn-lite';
+
+import {Button, Modal} from '@yandex-cloud/uikit';
+//@ts-ignore
+import Icon from '../../../../components/Icon/Icon';
+import Overview from '../Overview/Overview';
+//@ts-ignore
+import Healthcheck from '../Healthcheck/Healthcheck';
+//@ts-ignore
+import TenantOverview from '../TenantOverview/TenantOverview';
+
+import './DetailedOverview.scss';
+
+interface DetailedOverviewProps {
+    type: string;
+    className?: string;
+    tenantName: string;
+    additionalTenantInfo?: any;
+}
+
+const b = cn('kv-detailed-overview');
+
+function DetailedOverview(props: DetailedOverviewProps) {
+    const [isModalVisible, setIsModalVisible] = useState(false);
+
+    const {
+        currentSchemaPath,
+    } = useSelector((state: any) => state.schema);
+
+    const openModalHandler = () => {
+        setIsModalVisible(true);
+    };
+
+    const closeModalHandler = () => {
+        setIsModalVisible(false);
+    };
+
+    const renderModal = () => {
+        return (
+            <Modal open={isModalVisible} onClose={closeModalHandler} className={b('modal')}>
+                <Healthcheck tenant={props.tenantName} />
+                <Button
+                    className={b('close-modal-button')}
+                    onClick={closeModalHandler}
+                    view="flat-secondary"
+                    title='Close'
+                >
+                    <Icon name="close" viewBox={'0 0 16 16 '} height={20} width={20} />
+                </Button>
+            </Modal>
+        );
+    };
+
+    const renderContent = () => {
+        const {type, tenantName, additionalTenantInfo} = props;
+        const isTenant = tenantName === currentSchemaPath;
+        return (
+            <div className={b()}>
+                <div className={b('section')}>
+                    {!isTenant && (
+                        <Overview type={type} tenantName={tenantName} />
+                    )}
+                    {isTenant && <TenantOverview tenantName={tenantName} additionalTenantInfo={additionalTenantInfo}/>}
+                </div>
+                {isTenant && (
+                    <div className={b('section')}>
+                        <Healthcheck
+                            tenant={tenantName}
+                            preview={true}
+                            showMoreHandler={openModalHandler}
+                        />
+                    </div>
+                )}
+            </div>
+        );
+    };
+
+    return (
+        <React.Fragment>
+            {renderContent()}
+            {renderModal()}
+        </React.Fragment>
+    );
+}
+
+export default DetailedOverview;

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

@@ -0,0 +1,50 @@
+.kv-tenant-diagnostics {
+    overflow: hidden;
+
+    height: 100%;
+    &__header-wrapper {
+        position: sticky;
+        z-index: 2;
+        top: 0;
+        left: 0;
+
+        padding: 13px 20px 16px;
+
+        background-color: var(--yc-color-base-background);
+    }
+
+    &__tabs {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        box-shadow: inset 0 -1px 0 0 var(--yc-color-line-generic);
+        & .yc-tabs_direction_horizontal {
+            box-shadow: unset;
+        }
+    }
+
+    &__tab {
+        margin-right: 40px;
+
+        text-decoration: none;
+
+        &:first-letter {
+            text-transform: uppercase;
+        }
+    }
+
+    &__page-wrapper {
+        overflow: auto;
+
+        width: 100%;
+        height: calc(100% - 69px);
+        padding: 0 20px;
+
+        & .global-storage {
+            height: calc(100% + 16px);
+            max-height: calc(100% + 16px);
+            margin-top: -16px;
+        }
+    }
+}