ydb-embedded-ui 1.8.5 → 1.8.8

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## [1.8.8](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.8.7...v1.8.8) (2022-07-21)
+
+
+### Bug Fixes
+
+* **TabletsFilters:** display tablets grid full-height ([0dde809](https://github.com/ydb-platform/ydb-embedded-ui/commit/0dde8097fe026248aade97f034fa35c56b28e903))
+* **TabletsOverall:** properly hide tooltip on mouseleave ([df36eba](https://github.com/ydb-platform/ydb-embedded-ui/commit/df36ebaf44d8966bc419f3720d51390dfd767a87))
+* **Tablets:** properly display tablets in grid ([f3b64fa](https://github.com/ydb-platform/ydb-embedded-ui/commit/f3b64fae3a1e1a46ababd2d2f04ddff488698676))
+* **Tenant:** align info in overview ([acb39fa](https://github.com/ydb-platform/ydb-embedded-ui/commit/acb39fab70b7b4e0e78124fd887b2f1b76815221))
+* **Tenant:** display tenant name in single line ([301e391](https://github.com/ydb-platform/ydb-embedded-ui/commit/301e3911330024f80ebfda6d1a16823b64d94b36))
+* **Tenant:** move tablets under tenant name ([b7e4b8f](https://github.com/ydb-platform/ydb-embedded-ui/commit/b7e4b8f7027f1481a7c1baff77bf8ad5e2ed467c))
+
+## [1.8.7](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.8.6...v1.8.7) (2022-07-18)
+
+
+### Bug Fixes
+
+* **Preview:** sort numbers as numbers, not string ([6c42a62](https://github.com/ydb-platform/ydb-embedded-ui/commit/6c42a62d077fcb9419ceb680906d4cef78a0134f))
+
+## [1.8.6](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.8.5...v1.8.6) (2022-07-14)
+
+
+### Bug Fixes
+
+* **Tenant:** fix switching between groups and nodes on storage tab ([6923885](https://github.com/ydb-platform/ydb-embedded-ui/commit/6923885336fa21ac985879e41685137adbf8159a))
+
 ## [1.8.5](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.8.4...v1.8.5) (2022-07-11)
 
 

package/dist/components/TabletsOverall/TabletsOverall.tsx

@@ -93,7 +93,7 @@ function TabletsOverall({tablets}: TabletsOverallProps) {
         <div className={b('row', {overall: true})}>
             <span className={b('label', {overall: true})}>Overall:</span>
             <div
-                onMouseLeave={dispatch(hideTooltip)}
+                onMouseLeave={() => dispatch(hideTooltip())}
                 onMouseEnter={(e) => dispatch(showTooltip(e.target, tooltipData, 'tabletsOverall'))}
             >
                 <Progress value={memoryProgress} stack={stack} />

package/dist/containers/App/App.js

@@ -3,7 +3,7 @@ import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
 
 import {configure as configureUiKit} from '@yandex-cloud/uikit';
-import {i18n as YDBComponentsI18N} from 'ydb-ui-components';
+import {configure as configureYdbUiComponents} from 'ydb-ui-components';
 import {i18n, Lang} from '../../utils/i18n';
 
 import ContentWrapper, {Content} from './Content';
@@ -27,10 +27,8 @@ class App extends React.Component {
     constructor(props) {
         super(props);
         i18n.setLang(Lang.En);
-        YDBComponentsI18N.setLang(Lang.En);
-        configureUiKit({
-            lang: Lang.En,
-        });
+        configureYdbUiComponents({lang: Lang.En});
+        configureUiKit({lang: Lang.En});
     }
 
     componentDidMount() {

package/dist/containers/ReduxTooltip/ReduxTooltip.js

@@ -11,7 +11,7 @@ const propTypes = {
     className: PropTypes.string,
     toolTipVisible: PropTypes.bool,
     currentHoveredRef: PropTypes.object,
-    data: PropTypes.object,
+    data: PropTypes.any,
     template: PropTypes.func,
     hideTooltip: PropTypes.func,
 };

package/dist/containers/Storage/Storage.js

@@ -115,7 +115,9 @@ class Storage extends React.Component {
                 filter: FILTER_OPTIONS[visibleEntities],
                 type: storageType,
             });
+        };
 
+        const restartAutorefresh = () => {
             this.autofetcher.stop();
             this.autofetcher.start();
             this.autofetcher.fetch(() =>
@@ -131,14 +133,15 @@ class Storage extends React.Component {
         }
         if (database && autorefresh && !prevProps.autorefresh) {
             startFetch();
+            restartAutorefresh();
         }
 
-        if (
-            (storageType !== prevProps.storageType ||
-                visibleEntities !== prevProps.visibleEntities) &&
-            (!database || (database && autorefresh))
-        ) {
+        if (storageType !== prevProps.storageType || visibleEntities !== prevProps.visibleEntities) {
             startFetch();
+
+            if (!database || (database && autorefresh)) {
+                restartAutorefresh();
+            }
         }
     }
 

package/dist/containers/Tablets/Tablets.js

@@ -150,7 +150,7 @@ class Tablets extends React.Component {
         const {stateFilter, typeFilter, className} = this.props;
 
         return (
-            <div className={(b(), className)}>
+            <div className={b(null, className)}>
                 <div className={b('header')}>
                     <Select
                         className={b('filter-control')}

package/dist/containers/Tablets/Tablets.scss

@@ -13,13 +13,7 @@
     }
 
     &__items {
-        display: flex;
         flex: 1 1 auto;
-        flex-wrap: wrap;
-    }
-
-    &__items-wrapper {
-        overflow: auto;
     }
 
     &__filters {

package/dist/containers/TabletsFilters/TabletsFilters.scss

@@ -3,7 +3,6 @@
 .tablets-filters {
     overflow: auto;
 
-    max-height: 400px;
     @include flex-container();
 
     &__node {
@@ -19,18 +18,12 @@
     }
 
     &__items {
-        display: flex;
         overflow: auto;
         flex: 1 1 auto;
-        flex-wrap: wrap;
 
         padding: 5px 20px;
     }
 
-    &__items-wrapper {
-        overflow: auto;
-    }
-
     &__filters {
         display: flex;
         align-items: center;

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

@@ -1,9 +1,13 @@
+$section-title-margin: 20px;
+$section-title-line-height: 24px;
+
 .kv-detailed-overview {
     display: flex;
-    gap: 10px;
+    gap: 20px;
     &__section {
         display: flex;
-        flex: 0 0 50%;
+        overflow-x: hidden;
+        flex: 0 0 calc(50% - 10px);
         flex-direction: column;
     }
 

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

@@ -97,10 +97,14 @@ class Healthcheck extends React.Component {
                     </div>
                     {this.renderUpdateButton()}
                 </div>
-                <div>
+                <div className={b('preview-content')}>
                     {text}
                     {!statusOk && (
-                        <Button view="flat-info" onClick={showMoreHandler}>
+                        <Button
+                            view="flat-info"
+                            onClick={showMoreHandler}
+                            size="s"
+                        >
                             Show details
                         </Button>
                     )}

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

@@ -1,3 +1,4 @@
+@use '../DetailedOverview/DetailedOverview.scss' as detailedOverview;
 @import '../../../../styles/mixins.scss';
 
 .healthcheck {
@@ -37,14 +38,17 @@
 
     &__status-wrapper {
         display: flex;
-        align-items: baseline;
 
-        margin-bottom: 15px;
+        margin-bottom: detailedOverview.$section-title-margin;
         gap: 8px;
     }
 
     &__preview-title {
         font-weight: 600;
+        line-height: detailedOverview.$section-title-line-height;
+    }
+
+    &__preview-content {
         line-height: 24px;
     }
 

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

@@ -25,9 +25,11 @@ const renderName = (tenant) => {
     if (tenant) {
         const {Name} = tenant;
         return (
-            <div className={b('tenant-name')}>
+            <div className={b('tenant-name-wrapper')}>
                 <EntityStatus status={tenant.State} />
-                <span>{Name}</span>
+                <span className={b('tenant-name-trim')}>
+                    <span className={b('tenant-name')}>{Name}</span>
+                </span>
             </div>
         );
     }
@@ -139,17 +141,17 @@ class TenantOverview extends React.Component {
                             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('system-tablets')}>
+                    {SystemTablets &&
+                        SystemTablets.map((tablet, tabletIndex) => (
+                            <Tablet
+                                onMouseEnter={showTooltip}
+                                onMouseLeave={hideTooltip}
+                                key={tabletIndex}
+                                tablet={tablet}
+                            />
+                        ))}
                 </div>
                 <div className={b('common-info')}>
                     {PoolStats ? (

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

@@ -1,30 +1,46 @@
+@use '../DetailedOverview/DetailedOverview.scss' as detailedOverview;
+
 .tenant-overview {
     padding-bottom: 20px;
     &__loader {
         display: flex;
         justify-content: center;
     }
-    &__tenant-name {
+    &__tenant-name-wrapper {
         display: flex;
+        overflow: hidden;
         align-items: center;
 
         & .yc-link {
             display: flex;
         }
     }
+    &__tenant-name-trim {
+        overflow: hidden;
+
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        direction: rtl;
+    }
+
+    &__tenant-name {
+        unicode-bidi: plaintext;
+    }
 
     &__top {
         display: flex;
         align-items: center;
 
-        margin-bottom: 20px;
+        margin-bottom: 10px;
+
+        line-height: 24px;
     }
 
     &__top-label {
-        margin-bottom: 20px;
+        margin-bottom: detailedOverview.$section-title-margin;
 
         font-weight: 600;
-        line-height: 24px;
+        line-height: detailedOverview.$section-title-line-height;
         gap: 10px;
     }
 
@@ -42,7 +58,7 @@
         flex-wrap: wrap;
         align-items: center;
 
-        margin-left: 15px;
+        margin-bottom: 35px;
     }
 
     &__collapse-title {
@@ -76,7 +92,7 @@
         margin-bottom: 20px;
 
         font-size: var(--yc-text-body-2-font-size);
-        font-weight: 500;
+        font-weight: 600;
         line-height: var(--yc-text-body-2-line-height);
     }
 }

package/dist/containers/Tenant/Preview/Preview.js

@@ -12,6 +12,7 @@ import Fullscreen from '../../../components/Fullscreen/Fullscreen';
 import {sendQuery, setQueryOptions} from '../../../store/reducers/preview';
 import {showTooltip, hideTooltip} from '../../../store/reducers/tooltip';
 import {prepareQueryError, prepareQueryResponse} from '../../../utils/index';
+import {isNumeric} from '../../../utils/utils';
 
 import {isTableType} from '../utils/schema';
 import {AutoFetcher} from '../../../utils/autofetcher';
@@ -127,6 +128,8 @@ class Preview extends React.Component {
         if (data && data.length > 0) {
             columns = Object.keys(data[0]).map((key) => ({
                 name: key,
+                align: isNumeric(data[0][key]) ? DataTable.RIGHT : DataTable.LEFT,
+                sortAccessor: (row) => isNumeric(row[key]) ? Number(row[key]) : row[key],
                 render: ({value}) => {
                     return (
                         <span

package/dist/utils/utils.js

@@ -81,4 +81,11 @@ export function pad9(val) {
         result = "0" + result;
     }
     return result;
-}
+}
+
+export function isNumeric(value) {
+    // need both isNaN and isNaN(parseFloat):
+    // - isNaN treats true/false/''/etc. as numbers, parseFloat fixes this
+    // - parseFloat treats '123qwe' as number, isNaN fixes this
+    return !isNaN(value) && !isNaN(parseFloat(value));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "1.8.5",
+  "version": "1.8.8",
   "files": [
     "dist"
   ],
@@ -40,7 +40,7 @@
     "reselect": "4.0.0",
     "sass": "1.32.8",
     "web-vitals": "1.1.2",
-    "ydb-ui-components": "2.2.0"
+    "ydb-ui-components": "2.3.0"
   },
   "scripts": {
     "start": "react-app-rewired start",