ydb-embedded-ui 0.1.0 → 0.2.0

package/dist/containers/Nodes/Nodes.js

@@ -10,10 +10,12 @@ import ProblemFilter, {problemFilterType} from '../../components/ProblemFilter/P
 
 import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
 import {withSearch} from '../../HOCS';
-import {AUTO_RELOAD_INTERVAL, ALL} from '../../utils/constants';
+import {AUTO_RELOAD_INTERVAL, ALL, DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
 import {getFilteredNodes} from '../../store/reducers/clusterNodes';
 import {getNodes} from '../../store/reducers/nodes';
 import {changeFilter} from '../../store/reducers/settings';
+import {setHeader} from '../../store/reducers/header';
+import routes, {CLUSTER_PAGES, createHref} from '../../routes';
 import {calcUptime} from '../../utils';
 import {getNodesColumns} from '../../utils/getNodesColumns';
 
@@ -21,13 +23,6 @@ import './Nodes.scss';
 
 const b = cn('cluster-nodes');
 
-const tableSettings = {
-    displayIndices: false,
-    stickyHead: DataTable.MOVING,
-    syncHeadOnResize: true,
-    dynamicRender: true,
-};
-
 class Nodes extends React.Component {
     static renderLoader() {
         return (
@@ -49,14 +44,22 @@ class Nodes extends React.Component {
         handleSearchQuery: PropTypes.func,
         filter: problemFilterType,
         changeFilter: PropTypes.func,
+        setHeader: PropTypes.func,
         className: PropTypes.string,
         singleClusterMode: PropTypes.bool,
         additionalNodesInfo: PropTypes.object,
     };
 
     componentDidMount() {
-        this.props.getNodesList();
-        this.reloadDescriptor = setInterval(() => this.props.getNodesList(), AUTO_RELOAD_INTERVAL);
+        const {getNodesList, setHeader} = this.props;
+        getNodesList();
+        this.reloadDescriptor = setInterval(() => getNodesList(), AUTO_RELOAD_INTERVAL);
+        setHeader([
+            {
+                text: CLUSTER_PAGES.nodes.title,
+                link: createHref(routes.cluster, {activeTab: CLUSTER_PAGES.nodes.id}),
+            },
+        ]);
     }
 
     componentWillUnmount() {
@@ -76,18 +79,15 @@ class Nodes extends React.Component {
 
         return (
             <div className={b('controls')}>
-                <div className={b('controls-left')}>
-                    <TextInput
-                        className={b('search')}
-                        size="s"
-                        placeholder="Host name…"
-                        text={searchQuery}
-                        onUpdate={this.handleSearchQueryChange}
-                        hasClear
-                    />
-                    <ProblemFilter value={filter} onChange={this.handleFilterChange} />
-                    <Label theme="info" size="m">{`Nodes: ${nodes.length}`}</Label>
-                </div>
+                <TextInput
+                    className={b('search')}
+                    placeholder="Host name"
+                    text={searchQuery}
+                    onUpdate={this.handleSearchQueryChange}
+                    hasClear
+                />
+                <ProblemFilter value={filter} onChange={this.handleFilterChange} />
+                <Label theme="info" size="m">{`Nodes: ${nodes?.length}`}</Label>
             </div>
         );
     }
@@ -123,24 +123,24 @@ class Nodes extends React.Component {
         }));
 
         if (preparedNodes.length === 0) {
-            if (filter === ALL) {
-                return <div className="error">no nodes data</div>;
+            if (filter !== ALL) {
+                return <div className="no-problem" />;
             }
-            return <div className="no-problem" />;
         }
 
         return (
             <div className={b('table-wrapper')}>
                 <div className={b('table-content')}>
                     <DataTable
-                        theme="internal"
+                        theme="yandex-cloud"
                         data={preparedNodes}
                         columns={columns}
-                        settings={tableSettings}
+                        settings={DEFAULT_TABLE_SETTINGS}
                         initialSortOrder={{
                             columnId: 'NodeId',
                             order: DataTable.ASCENDING,
                         }}
+                        emptyDataMessage='No such nodes'
                     />
                 </div>
             </div>
@@ -188,6 +188,7 @@ const mapDispatchToProps = {
     hideTooltip,
     showTooltip,
     changeFilter,
+    setHeader,
 };
 
 export default withSearch(connect(mapStateToProps, mapDispatchToProps)(Nodes));

package/dist/containers/Nodes/Nodes.scss

@@ -2,26 +2,14 @@
 
 .cluster-nodes {
     overflow: auto;
+    @include flex-container();
 
     &__search {
-        width: 255px;
-        margin: 0 15px 0 0;
+        @include search();
     }
 
     &__controls {
-        display: flex;
-        justify-content: space-between;
-
-        margin: 17px 0;
-    }
-
-    &__controls-left {
-        display: flex;
-        align-items: center;
-
-        & > * {
-            margin-right: 25px;
-        }
+        @include controls();
     }
 
     &__show-all-wrapper {
@@ -39,12 +27,12 @@
     &__table-content {
         overflow: auto;
 
+        height: 100%;
+
         @include freeze-nth-column(1);
         @include freeze-nth-column(2, 80px);
-        @include freeze-nth-column(3, 120px);
 
         @include table-styles;
         @include table-sticky-styles;
     }
-    @include flex-container();
 }

package/dist/containers/Pdisk/Pdisk.scss

@@ -1,8 +1,8 @@
 @import '../../styles/mixins.scss';
 
 .pdisk {
-    @include container-fluid();
     padding: 20px;
+    @include container-fluid();
 
     .info-viewer__items {
         grid-template-columns: auto;
@@ -18,11 +18,12 @@
     }
 
     &__title {
+        margin-right: 16px;
+
         font-size: var(--yc-text-body2-font-size);
-        line-height: var(--yc-text-body2-line-height);
         font-weight: 500;
+        line-height: var(--yc-text-body2-line-height);
         text-transform: uppercase;
-        margin-right: 16px;
     }
 
     &__section {
@@ -34,7 +35,8 @@
     }
 
     &__link {
-        color: var(--yc-color-base-special);
         text-decoration: none;
+
+        color: var(--yc-color-base-special);
     }
 }

package/dist/containers/Pool/Pool.scss

@@ -8,11 +8,12 @@
     }
 
     &__title {
+        margin-right: 16px;
+
         font-size: var(--yc-text-body2-font-size);
-        line-height: var(--yc-text-body2-line-height);
         font-weight: 500;
+        line-height: var(--yc-text-body2-line-height);
         text-transform: uppercase;
-        margin-right: 16px;
 
         &_groups {
             margin-right: 32px;
@@ -22,11 +23,13 @@
     &__controls {
         display: flex;
         align-items: center;
-        margin: 25px 0 10px 0;
+
+        margin: 25px 0 10px;
     }
 
     &__breadcrumbs {
-        font-size: var(--yc-text-body2-font-size);
         padding: 20px 0;
+
+        font-size: var(--yc-text-body2-font-size);
     }
 }

package/dist/containers/ReduxTooltip/ReduxTooltip.scss

@@ -1,8 +1,9 @@
 @import '../../styles/mixins.scss';
 
 .popup2 {
-    animation: none !important;
     max-width: 300px;
+
+    animation: none !important;
 }
 
 .pool-tooltip,
@@ -14,6 +15,7 @@
 
     &__label {
         padding-right: 15px;
+
         color: var(--yc-color-text-secondary);
     }
 }
@@ -49,6 +51,7 @@
 
 .cell-tooltip {
     padding: 10px;
+
     word-break: break-word;
 }
 
@@ -56,6 +59,7 @@
     padding: 10px;
     &__label {
         padding-right: 15px;
+
         color: var(--yc-color-text-secondary);
     }
 

package/dist/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.scss

@@ -0,0 +1,77 @@
+.storage-disk-progress-bar {
+    $block: &;
+    position: relative;
+
+    display: inline-block;
+
+    width: 100%;
+    max-width: 200px;
+    height: var(--yc-text-body2-line-height);
+
+    border: 1px solid var(--yc-color-infographics-misc-medium);
+    border-radius: 2px;
+    background-color: var(--yc-color-infographics-misc-light);
+
+    #{$block}__filled {
+        background-color: var(--yc-color-infographics-misc-medium);
+    }
+
+    &_green {
+        border: 1px solid var(--yc-color-infographics-positive-heavy);
+        background-color: var(--yc-color-infographics-positive-light);
+        #{$block}__filled {
+            background-color: var(--yc-color-infographics-positive-heavy);
+        }
+    }
+
+    &_blue {
+        border: 1px solid var(--yc-color-infographics-info-medium);
+        background-color: var(--yc-color-infographics-info-light);
+        #{$block}__filled {
+            background-color: var(--yc-color-infographics-info-medium);
+        }
+    }
+
+    &_yellow {
+        border: 1px solid var(--yc-color-infographics-warning-heavy);
+        background-color: var(--yc-color-infographics-yellow-light);
+        #{$block}__filled {
+            background-color: var(--yc-color-infographics-warning-heavy);
+        }
+    }
+
+    &_orange {
+        border: 1px solid var(--yc-color-base-warning-orange);
+        background-color: var(--yc-color-infographics-warning-light);
+        #{$block}__filled {
+            background-color: var(--yc-color-base-warning-orange);
+        }
+    }
+    &_red {
+        border: 1px solid var(--yc-color-infographics-danger-heavy);
+        background-color: var(--yc-color-infographics-danger-light);
+        #{$block}__filled {
+            background-color: var(--yc-color-infographics-danger-heavy);
+        }
+    }
+
+    &__filled {
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        height: 100%;
+
+        border-radius: 2px 0 0 2px;
+    }
+    &__filled-title {
+        position: absolute;
+        top: 0;
+        left: 5px;
+
+        font-size: var(--yc-text-body-font-size);
+        line-height: inherit;
+
+        color: inherit;
+    }
+}

package/dist/containers/{StorageV2 → Storage}/DiskStateProgressBar/DiskStateProgressBar.tsx

@@ -44,7 +44,7 @@ function DiskStateProgressBar({
             {diskAllocatedPercent >= 0 && (
                 <React.Fragment>
                     <div className={b('filled')} style={{width: `${diskAllocatedPercent}%`}} />
-                    <div className={b('filled-title', {light: diskAllocatedPercent > 7})}>
+                    <div className={b('filled-title')}>
                         {`${Math.round(diskAllocatedPercent)}%`}
                     </div>
                 </React.Fragment>

package/dist/containers/{StorageV2 → Storage}/Pdisk/Pdisk.scss

@@ -1,5 +1,7 @@
 .pdisk-storage {
+    display: flex;
     flex-grow: 1;
+    align-items: center;
 
     margin-right: 10px;
 
@@ -13,18 +15,18 @@
     }
     &__popup-content {
         display: grid;
-        column-gap: 5px;
         justify-items: stretch;
+        column-gap: 5px;
     }
     &__popup-section-name {
+        grid-column: 1 / 3;
+
         margin: 5px 0;
 
+        font-weight: 500;
         text-align: center;
 
         border-bottom: 1px solid var(--yc-color-line-generic);
-
-        font-weight: 500;
-        grid-column: 1 / 3;
     }
     &__property {
         text-align: right;

package/dist/containers/{StorageV2 → Storage}/Pdisk/Pdisk.tsx

@@ -153,8 +153,7 @@ function Pdisk(props: PDiskProps) {
                 <DiskStateProgressBar
                     diskAllocatedPercent={pdiskAllocatedPercent}
                     severity={severity as keyof typeof diskProgressColors}
-                    // href={createHref(routes.pdisk, {id: props.PDiskId}, {node_id: props.NodeId})}
-                    href={createHref(routes.vdisk, null, {
+                    href={createHref(routes.vdisk, undefined, {
                         pdiskId: props.PDiskId,
                         nodeId: props.NodeId,
                     })}

package/dist/containers/{StorageV2 → Storage}/Storage.js

@@ -6,7 +6,7 @@ import DataTable from '@yandex-cloud/react-data-table';
 import {Loader, RadioButton, Label} from '@yandex-cloud/uikit';
 
 import StorageFilter from './StorageFilter/StorageFilter';
-import {AutoFetcher} from '../Cluster/Cluster';
+import {AutoFetcher} from '../../utils/autofetcher';
 
 import {
     getStorageInfo,
@@ -22,6 +22,9 @@ import {
 import {getNodesList} from '../../store/reducers/clusterNodes';
 import StorageGroups from './StorageGroups/StorageGroups';
 import StorageNodes from './StorageNodes/StorageNodes';
+import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
+import {setHeader} from '../../store/reducers/header';
+import routes, {CLUSTER_PAGES, createHref} from '../../routes';
 
 import './Storage.scss';
 
@@ -33,13 +36,9 @@ const FILTER_OPTIONS = {
 };
 
 const tableSettings = {
-    displayIndices: false,
-    stickyHead: DataTable.MOVING,
-    syncHeadOnResize: true,
-    dynamicRender: true,
+    ...DEFAULT_TABLE_SETTINGS,
     defaultOrder: DataTable.DESCENDING,
-    stripedRows: true,
-    stickyTop: 68,
+    stickyTop: 62,
 };
 
 class Storage extends React.Component {
@@ -47,29 +46,53 @@ class Storage extends React.Component {
         loading: PropTypes.bool,
         error: PropTypes.object,
         wasLoaded: PropTypes.bool,
+        autorefresh: PropTypes.bool,
+        database: PropTypes.bool,
         getStorageInfo: PropTypes.func,
         setInitialState: PropTypes.func,
         flatListStorageEntities: PropTypes.array,
         setStorageFilter: PropTypes.func,
         setVisibleEntities: PropTypes.func,
         visibleEntities: PropTypes.string,
+        setHeader: PropTypes.func,
+        tenant: PropTypes.string,
     };
 
     componentDidMount() {
-        const {tenant, nodeId, setVisibleEntities, storageType} = this.props;
+        const {
+            tenant,
+            nodeId,
+            setVisibleEntities,
+            storageType,
+            setHeader,
+            getNodesList,
+            getStorageInfo,
+        } = this.props;
+        setHeader([
+            {
+                text: CLUSTER_PAGES.storage.title,
+                link: createHref(routes.cluster, {activeTab: CLUSTER_PAGES.storage.id}),
+            },
+        ]);
         this.autofetcher = new AutoFetcher();
-        this.props.getNodesList();
+        getNodesList();
         if (tenant || nodeId) {
             setVisibleEntities(VisibleEntities.All);
+            getStorageInfo({
+                tenant,
+                filter: FILTER_OPTIONS.All,
+                nodeId,
+                type: storageType,
+            });
         } else {
-            this.props.getStorageInfo({
+            getStorageInfo({
                 tenant,
                 nodeId,
                 filter: FILTER_OPTIONS.Missing,
                 type: storageType,
             });
             this.autofetcher.fetch(() =>
-                this.props.getStorageInfo({
+                getStorageInfo({
                     tenant,
                     nodeId,
                     filter: FILTER_OPTIONS.Missing,
@@ -80,11 +103,24 @@ class Storage extends React.Component {
     }
 
     componentDidUpdate(prevProps) {
-        const {tenant, visibleEntities, getStorageInfo, nodeId, storageType} = this.props;
-        if (
-            storageType !== prevProps.storageType ||
-            visibleEntities !== prevProps.visibleEntities
-        ) {
+        const {
+            tenant,
+            visibleEntities,
+            getStorageInfo,
+            nodeId,
+            storageType,
+            autorefresh,
+            database,
+        } = this.props;
+
+        const startFetch = () => {
+            getStorageInfo({
+                tenant,
+                filter: FILTER_OPTIONS[visibleEntities],
+                nodeId,
+                type: storageType,
+            });
+
             this.autofetcher.stop();
             this.autofetcher.start();
             this.autofetcher.fetch(() =>
@@ -95,13 +131,21 @@ class Storage extends React.Component {
                     type: storageType,
                 }),
             );
+        };
 
-            getStorageInfo({
-                tenant,
-                filter: FILTER_OPTIONS[visibleEntities],
-                nodeId,
-                type: storageType,
-            });
+        if (database && !autorefresh && prevProps.autorefresh) {
+            this.autofetcher.stop();
+        }
+        if (database && autorefresh && !prevProps.autorefresh) {
+            startFetch();
+        }
+
+        if (
+            (storageType !== prevProps.storageType ||
+                visibleEntities !== prevProps.visibleEntities) &&
+            (!database || (database && autorefresh))
+        ) {
+            startFetch();
         }
     }
 
@@ -113,7 +157,7 @@ class Storage extends React.Component {
     renderLoader() {
         return (
             <div className={b('loader')}>
-                <Loader size="l" />
+                <Loader size="m" />
             </div>
         );
     }
@@ -157,17 +201,13 @@ class Storage extends React.Component {
             this.props;
         return (
             <div className={b('controls')}>
-                <div className={b('filter')}>
+                <div className={b('search')}>
                     <StorageFilter
                         changeReduxStorageFilter={setStorageFilter}
                         storageType={storageType}
                     />
                 </div>
-                <RadioButton
-                    value={visibleEntities}
-                    onUpdate={this.onGroupVisibilityChange}
-                    className={b('control')}
-                >
+                <RadioButton value={visibleEntities} onUpdate={this.onGroupVisibilityChange}>
                     <RadioButton.Option value={VisibleEntities.Missing}>
                         {VisibleEntities.Missing}
                     </RadioButton.Option>
@@ -179,11 +219,7 @@ class Storage extends React.Component {
                     </RadioButton.Option>
                 </RadioButton>
 
-                <RadioButton
-                    value={storageType}
-                    onUpdate={this.onStorageTypeChange}
-                    className={b('control')}
-                >
+                <RadioButton value={storageType} onUpdate={this.onStorageTypeChange}>
                     <RadioButton.Option value={StorageTypes.groups}>
                         {StorageTypes.groups}
                     </RadioButton.Option>
@@ -227,6 +263,7 @@ function mapStateToProps(state) {
 
     return {
         flatListStorageEntities: getFilteredEntities(state),
+        autorefresh: state.schema.autorefresh,
         nodes: getNodesObject(state),
         loading,
         wasLoaded,
@@ -244,6 +281,7 @@ const mapDispatchToProps = {
     setVisibleEntities: setVisibleEntities,
     getNodesList,
     setStorageType,
+    setHeader,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Storage);

package/dist/containers/{StorageV2 → Storage}/Storage.scss

@@ -1,8 +1,10 @@
+@import '../../styles/mixins.scss';
+
 .global-storage {
     display: flex;
     overflow: auto;
-    align-items: flex-start;
     flex-direction: column;
+    align-items: flex-start;
 
     height: 100%;
     max-height: 100%;
@@ -12,29 +14,21 @@
         z-index: 2;
         top: 0;
 
-        display: flex;
-        align-items: center;
-
         width: 100%;
-        padding: 20px 0;
 
         background-color: var(--yc-color-base-background);
+        @include controls();
     }
-    &__filter {
-        display: inline-block;
-
-        width: 300px;
-        margin-right: 15px;
-    }
-    &__control {
-        margin-right: 15px;
+    &__search {
+        @include search();
     }
+
     &__table-wrapper {
         display: flex;
         flex: 1 1 auto;
         flex-direction: column;
 
-        width: 100%;
+        min-width: 100%;
 
         font-size: var(--yc-text-body2-font-size);
         line-height: var(--yc-text-body2-line-height);
@@ -43,6 +37,10 @@
             // stylelint-disable-next-line declaration-no-important
             height: var(--yc-text-body2-line-height) !important;
         }
+
+        table {
+            min-width: 100%;
+        }
     }
 
     &__loader {

package/dist/containers/{StorageV2 → Storage}/StorageFilter/StorageFilter.js

@@ -25,15 +25,7 @@ function StorageFilter(props) {
     const placeholder =
         props.storageType === StorageTypes.groups ? 'Group ID, Pool name' : 'Node ID, FQDN';
 
-    return (
-        <TextInput
-            autoFocus
-            placeholder={placeholder}
-            value={filter}
-            onUpdate={changeFilter}
-            hasClear
-        />
-    );
+    return <TextInput placeholder={placeholder} value={filter} onUpdate={changeFilter} hasClear />;
 }
 
 export default StorageFilter;

package/dist/containers/{StorageV2 → Storage}/StorageGroups/StorageGroups.scss

@@ -4,6 +4,8 @@
         overflow-x: auto;
         overflow-y: hidden;
         justify-content: center;
+
+        min-width: 500px;
     }
     &__pool-name-wrapper {
         display: flex;

package/dist/containers/{StorageV2 → Storage}/StorageGroups/StorageGroups.tsx

@@ -221,7 +221,7 @@ function StorageGroups({data, tableSettings, visibleEntities, nodes}: StorageGro
     return data ? (
         <DataTable
             key={visibleEntities as string}
-            theme="internal"
+            theme="yandex-cloud"
             data={data}
             columns={columns}
             settings={tableSettings}