ydb-embedded-ui 0.1.0 → 0.2.0

package/dist/containers/{StorageV2 → Storage}/StorageNodes/StorageNodes.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}/StorageNodes/StorageNodes.tsx

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

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

@@ -1,5 +1,7 @@
 .vdisk-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/Tablet/Tablet.scss

@@ -1,11 +1,11 @@
 @import '../../styles/mixins.scss';
 
 .tablet-page {
+    $_: &;
     display: flex;
     flex-direction: column;
-    padding: 20px;
 
-    $_: &;
+    padding: 20px;
 
     &__tenant {
         margin-bottom: 20px;
@@ -19,15 +19,15 @@
         margin-right: 70px;
     }
     &__history-title {
-        @include body2-typography();
         margin-bottom: 15px;
+        @include body2-typography();
     }
 
     &__placeholder {
         display: flex;
         flex: 1 1 auto;
-        align-items: center;
         justify-content: center;
+        align-items: center;
     }
 
     &__row {
@@ -44,11 +44,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;
     }
 
     .info-viewer__items {
@@ -69,8 +70,10 @@
 
     &__links {
         display: flex;
-        margin: 5px 0 10px 0;
+
+        margin: 5px 0 10px;
         padding: 0;
+
         list-style-type: none;
 
         & > * {
@@ -79,10 +82,11 @@
     }
 
     &__top-label {
+        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;
     }
 }

package/dist/containers/Tablets/Tablets.js

@@ -12,16 +12,13 @@ import {
 import {showTooltip, hideTooltip} from '../../store/reducers/tooltip';
 
 import Tablet from '../../components/Tablet/Tablet';
-import {Loader, Progress} from '@yandex-cloud/uikit';
+import {Loader} from '@yandex-cloud/uikit';
 import {Select} from '@yandex-cloud/uikit/build/esm/components/unstable/Select';
 import ReactList from 'react-list';
-import {COLORS_PRIORITY} from '../../utils/constants';
-import {AutoFetcher} from '../Cluster/Cluster';
+import {AutoFetcher} from '../../utils/autofetcher';
 
 import './Tablets.scss';
-
-// чтобы при очень маленьком проценте все равно были видны проблемные места, установим минимальный процент в 3
-const minOverallPercentValue = 3;
+import TabletsOverall from '../../components/TabletsOverall/TabletsOverall';
 
 const b = cn('tablets');
 
@@ -42,14 +39,6 @@ class Tablets extends React.Component {
 
     autofetcher;
 
-    static renderLoader() {
-        return (
-            <div className={b('loader-wrapper')}>
-                <Loader size="m" />
-            </div>
-        );
-    }
-
     state = {
         filteredTablets: [],
     };
@@ -65,6 +54,11 @@ class Tablets extends React.Component {
 
     componentDidUpdate(prevProps) {
         const {autorefresh} = this.props;
+
+        if (!prevProps.path && this.props.path) {
+            this.makeRequestIfPathOrNodeExist();
+        }
+
         if (prevProps.path && this.props.path && prevProps.path !== this.props.path) {
             this.props.clearWasLoadingFlag();
             this.makeRequestIfPathOrNodeExist();
@@ -85,6 +79,14 @@ class Tablets extends React.Component {
         this.autofetcher.stop();
     }
 
+    renderLoader = () => {
+        return (
+            <div className={b('loader-wrapper')}>
+                <Loader size="m" />
+            </div>
+        );
+    };
+
     makeRequestIfPathOrNodeExist = () => {
         const {nodeId, path} = this.props;
         if (typeof nodeId !== 'undefined') {
@@ -136,76 +138,6 @@ class Tablets extends React.Component {
         this.setState({filteredTablets});
     };
 
-    renderOverall = (tablets) => {
-        const {hideTooltip, showTooltip} = this.props;
-        const tabletsCount = tablets.length;
-
-        const substractPercentsFromMaxPercents = (statesForOverallProgress, substractValue) => {
-            Object.keys(statesForOverallProgress).some((key) => {
-                if (statesForOverallProgress[key] > 10) {
-                    statesForOverallProgress[key] -= minOverallPercentValue - substractValue;
-                    return true;
-                }
-                return false;
-            });
-        };
-
-        // определим, сколько таблеток какого цвета имеется в tablets
-        const statesForOverallProgress = tablets.reduce((acc, tablet) => {
-            const color = tablet.Overall.toLowerCase();
-            if (!acc[color]) {
-                acc[color] = 1;
-            } else {
-                acc[color]++;
-            }
-
-            return acc;
-        }, {});
-
-        const tooltipData = [];
-
-        // подсчитаем, сколько процентов составляет каждый цвет в statesForOverallProgress и заодно сгенерируем информацию для тултипа
-        Object.keys(statesForOverallProgress).forEach((key) => {
-            const percents = (statesForOverallProgress[key] / tabletsCount) * 100;
-            const value = statesForOverallProgress[key];
-            statesForOverallProgress[key] = percents;
-            tooltipData.push({color: key, percents, value, total: tablets.length});
-        });
-
-        // заменим все проценты, значения которых меньше 3 на тройку
-        Object.keys(statesForOverallProgress).forEach((key) => {
-            if (statesForOverallProgress[key] < minOverallPercentValue) {
-                substractPercentsFromMaxPercents(
-                    statesForOverallProgress,
-                    statesForOverallProgress[key],
-                );
-                statesForOverallProgress[key] = minOverallPercentValue;
-            }
-        });
-
-        const memoryProgress = 100;
-        const stack = Object.keys(statesForOverallProgress).map((key) => ({
-            color: `var(--color-status-${key}-solid-70)`,
-            colorKey: key,
-            value: statesForOverallProgress[key],
-        }));
-
-        // сортируем наш stack, чтобы цвета были в порядке "зеленый, оранжевый, желтый, красный, черный"
-        stack.sort((a, b) => COLORS_PRIORITY[b.colorKey] - COLORS_PRIORITY[a.colorKey]);
-
-        return (
-            <div className={b('row', {overall: true})}>
-                <span className={b('label', {overall: true})}>Overall</span>
-                <div
-                    onMouseLeave={hideTooltip}
-                    onMouseEnter={(e) => showTooltip(e.target, tooltipData, 'tabletsOverall')}
-                >
-                    <Progress value={memoryProgress} stack={stack} />
-                </div>
-            </div>
-        );
-    };
-
     renderContent = (tablets) => {
         const states = Array.from(new Set(...[tablets.map((tblt) => tblt.State)])).map((item) => ({
             value: item,
@@ -220,13 +152,11 @@ class Tablets extends React.Component {
 
         return (
             <div className={b()}>
-                {this.renderOverall(tablets)}
-
-                <div className={b('filters')}>
+                <div className={b('header')}>
                     <Select
                         className={b('filter-control')}
                         multiple
-                        placeholder="All"
+                        placeholder="All items"
                         label="States:"
                         options={states}
                         value={stateFilter}
@@ -236,13 +166,14 @@ class Tablets extends React.Component {
                     <Select
                         className={b('filter-control')}
                         multiple
-                        placeholder="All"
+                        placeholder="All items"
                         label="Types:"
                         options={types}
                         value={typeFilter}
                         onUpdate={this.handleTypeFilterChange}
                         width="100%"
                     />
+                    <TabletsOverall tablets={tablets} />
                 </div>
 
                 <div className={b('items')}>
@@ -259,7 +190,7 @@ class Tablets extends React.Component {
     render() {
         const {loading, wasLoaded, error, tablets} = this.props;
         if (loading && !wasLoaded) {
-            return Tablets.renderLoader();
+            return this.renderLoader();
         } else if (error) {
             return <div>{error.statusText}</div>;
         } else {

package/dist/containers/Tablets/Tablets.scss

@@ -3,37 +3,19 @@
 .tablets {
     @include flex-container();
 
-    &__row {
+    &__header {
         display: flex;
-        align-items: center;
-
-        &_overall {
-            margin: 15px 20px;
-
-            .yc-progress {
-                width: 300px;
-                margin: 0;
-            }
-        }
-    }
+        gap: 12px;
 
-    &__label {
-        font-size: var(--yc-text-body2-font-size);
-        line-height: var(--yc-text-body2-line-height);
-        font-weight: 500;
-        text-transform: uppercase;
-        margin-right: 16px;
+        align-items: center;
 
-        &_overall {
-            margin-right: 15px;
-        }
+        margin-bottom: 16px;
     }
 
     &__items {
         display: flex;
-        flex-wrap: wrap;
         flex: 1 1 auto;
-        padding: 0 20px;
+        flex-wrap: wrap;
     }
 
     &__items-wrapper {
@@ -43,19 +25,12 @@
     &__filters {
         display: flex;
         align-items: center;
-        margin: 10px 0;
-        padding: 0 20px;
     }
 
     &__filter-control {
-        margin-right: 10px;
+        width: 180px;
         min-width: 100px;
-        width: 200px;
-        max-width: 200px;
-
-        &:last-child {
-            margin-right: 0;
-        }
+        max-width: 180px;
     }
 
     &__tablet {
@@ -64,14 +39,13 @@
 
     .tablet {
         display: inline-block;
-        text-align: center;
+
         line-height: 18px;
+        text-align: center;
     }
 
     &__loader-wrapper {
         display: flex;
         justify-content: center;
-        align-items: center;
-        height: 100%;
     }
 }

package/dist/containers/TabletsFilters/TabletsFilters.js

@@ -5,13 +5,13 @@ import cn from 'bem-cn-lite';
 import qs from 'qs';
 import _ from 'lodash';
 
-import {Loader, Progress} from '@yandex-cloud/uikit';
+import {Loader} from '@yandex-cloud/uikit';
 import {Select} from '@yandex-cloud/uikit/build/esm/components/unstable/Select';
 import ReactList from 'react-list';
 
 import Tablet from '../../components/Tablet/Tablet';
 
-import {COLORS_PRIORITY, TABLET_COLOR_TO_STATES, TABLETS_STATES} from '../../utils/constants';
+import {TABLET_COLOR_TO_STATES, TABLETS_STATES} from '../../utils/constants';
 import {showTooltip, hideTooltip} from '../../store/reducers/tooltip';
 import {
     getTabletsInfo,
@@ -24,9 +24,6 @@ import {
 
 import './TabletsFilters.scss';
 
-// чтобы при очень маленьком проценте все равно были видны проблемные места, установим минимальный процент в 3
-const minOverallPercentValue = 3;
-
 const b = cn('tablets-filters');
 
 class TabletsFilters extends React.Component {
@@ -158,76 +155,6 @@ class TabletsFilters extends React.Component {
         );
     };
 
-    renderOverall = (tablets) => {
-        const {hideTooltip, showTooltip} = this.props;
-        const tabletsCount = tablets.length;
-
-        const substractPercentsFromMaxPercents = (statesForOverallProgress, substractValue) => {
-            Object.keys(statesForOverallProgress).some((key) => {
-                if (statesForOverallProgress[key] > 10) {
-                    statesForOverallProgress[key] -= minOverallPercentValue - substractValue;
-                    return true;
-                }
-                return false;
-            });
-        };
-
-        // определим, сколько таблеток какого цвета имеется в tablets
-        const statesForOverallProgress = tablets.reduce((acc, tablet) => {
-            const color = tablet.Overall.toLowerCase();
-            if (!acc[color]) {
-                acc[color] = 1;
-            } else {
-                acc[color]++;
-            }
-
-            return acc;
-        }, {});
-
-        const tooltipData = [];
-
-        // подсчитаем, сколько процентов составляет каждый цвет в statesForOverallProgress и заодно сгенерируем информацию для тултипа
-        Object.keys(statesForOverallProgress).forEach((key) => {
-            const percents = (statesForOverallProgress[key] / tabletsCount) * 100;
-            const value = statesForOverallProgress[key];
-            statesForOverallProgress[key] = percents;
-            tooltipData.push({color: key, percents, value, total: tablets.length});
-        });
-
-        // заменим все проценты, значения которых меньше 3 на тройку
-        Object.keys(statesForOverallProgress).forEach((key) => {
-            if (statesForOverallProgress[key] < minOverallPercentValue) {
-                substractPercentsFromMaxPercents(
-                    statesForOverallProgress,
-                    statesForOverallProgress[key],
-                );
-                statesForOverallProgress[key] = minOverallPercentValue;
-            }
-        });
-
-        const memoryProgress = 100;
-        const stack = Object.keys(statesForOverallProgress).map((key) => ({
-            color: `var(--color-status-${key}-solid-70)`,
-            colorKey: key,
-            value: statesForOverallProgress[key],
-        }));
-
-        // сортируем наш stack, чтобы цвета были в порядке "зеленый, оранжевый, желтый, красный, черный"
-        stack.sort((a, b) => COLORS_PRIORITY[b.colorKey] - COLORS_PRIORITY[a.colorKey]);
-
-        return (
-            <div className={b('row', {overall: true})}>
-                <span className={b('label', {overall: true})}>Overall</span>
-                <div
-                    onMouseLeave={hideTooltip}
-                    onMouseEnter={(e) => showTooltip(e.target, tooltipData, 'tabletsOverall')}
-                >
-                    <Progress value={memoryProgress} stack={stack} />
-                </div>
-            </div>
-        );
-    };
-
     renderContent = () => {
         const {nodeFilter, tenantPath} = this.state;
         const {tablets, filteredTablets, nodes, stateFilter, typeFilter, error} = this.props;

package/dist/containers/TabletsFilters/TabletsFilters.scss

@@ -1,53 +1,29 @@
 @import '../../styles/mixins';
 
 .tablets-filters {
-    @include flex-container();
     overflow: auto;
+
     max-height: 400px;
-    // max-width: 400px;
+    @include flex-container();
 
     &__node {
-        font-size: var(--yc-text-body-font-size);
-        line-height: var(--yc-text-body-line-height);
         display: flex;
         flex-direction: column;
+
+        font-size: var(--yc-text-body-font-size);
+        line-height: var(--yc-text-body-line-height);
     }
 
     &__node-meta {
         color: var(--yc-color-text-secondary);
     }
 
-    &__row {
-        display: flex;
-        align-items: center;
-
-        &_overall {
-            margin: 15px 20px;
-
-            .yc-progress {
-                width: 300px;
-                margin: 0;
-            }
-        }
-    }
-
-    &__label {
-        font-size: var(--yc-text-body2-font-size);
-        line-height: var(--yc-text-body2-line-height);
-        font-weight: 500;
-        text-transform: uppercase;
-        margin-right: 16px;
-
-        &_overall {
-            margin-right: 15px;
-        }
-    }
-
     &__items {
         display: flex;
-        flex-wrap: wrap;
-        flex: 1 1 auto;
         overflow: auto;
+        flex: 1 1 auto;
+        flex-wrap: wrap;
+
         padding: 5px 20px;
     }
 
@@ -58,25 +34,28 @@
     &__filters {
         display: flex;
         align-items: center;
+
         margin: 10px 0;
         padding: 0 20px;
     }
 
     &__filter-label {
         margin-right: 15px;
+
         white-space: nowrap;
     }
 
     &__filter-wrapper {
         display: flex;
         align-items: center;
+
         margin-right: 15px;
     }
 
     &__filter-control {
-        margin-right: 10px;
         min-width: 100px;
         max-width: 200px;
+        margin-right: 10px;
 
         &:last-child {
             margin-right: 0;
@@ -93,12 +72,13 @@
     }
 
     &__tenant {
-        padding: 20px 20px 10px 20px;
+        padding: 20px 20px 10px;
     }
 
     .tablet {
         display: inline-block;
-        text-align: center;
+
         line-height: 18px;
+        text-align: center;
     }
 }