ydb-embedded-ui 1.8.7 → 1.8.8

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # 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)
 
 

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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "1.8.7",
+  "version": "1.8.8",
   "files": [
     "dist"
   ],