ydb-embedded-ui 1.8.7 → 1.8.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
 - package/dist/components/TabletsOverall/TabletsOverall.tsx +1 -1
 - package/dist/containers/ReduxTooltip/ReduxTooltip.js +1 -1
 - package/dist/containers/Tablets/Tablets.js +1 -1
 - package/dist/containers/Tablets/Tablets.scss +0 -6
 - package/dist/containers/TabletsFilters/TabletsFilters.scss +0 -7
 - package/dist/containers/Tenant/Diagnostics/DetailedOverview/DetailedOverview.scss +6 -2
 - package/dist/containers/Tenant/Diagnostics/Healthcheck/Healthcheck.js +6 -2
 - package/dist/containers/Tenant/Diagnostics/Healthcheck/Healthcheck.scss +6 -2
 - package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.js +15 -13
 - package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss +22 -6
 - package/package.json +1 -1
 
    
        package/CHANGELOG.md
    CHANGED
    
    | 
         @@ -1,5 +1,17 @@ 
     | 
|
| 
       1 
1 
     | 
    
         
             
            # Changelog
         
     | 
| 
       2 
2 
     | 
    
         | 
| 
      
 3 
     | 
    
         
            +
            ## [1.8.8](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.8.7...v1.8.8) (2022-07-21)
         
     | 
| 
      
 4 
     | 
    
         
            +
             
     | 
| 
      
 5 
     | 
    
         
            +
             
     | 
| 
      
 6 
     | 
    
         
            +
            ### Bug Fixes
         
     | 
| 
      
 7 
     | 
    
         
            +
             
     | 
| 
      
 8 
     | 
    
         
            +
            * **TabletsFilters:** display tablets grid full-height ([0dde809](https://github.com/ydb-platform/ydb-embedded-ui/commit/0dde8097fe026248aade97f034fa35c56b28e903))
         
     | 
| 
      
 9 
     | 
    
         
            +
            * **TabletsOverall:** properly hide tooltip on mouseleave ([df36eba](https://github.com/ydb-platform/ydb-embedded-ui/commit/df36ebaf44d8966bc419f3720d51390dfd767a87))
         
     | 
| 
      
 10 
     | 
    
         
            +
            * **Tablets:** properly display tablets in grid ([f3b64fa](https://github.com/ydb-platform/ydb-embedded-ui/commit/f3b64fae3a1e1a46ababd2d2f04ddff488698676))
         
     | 
| 
      
 11 
     | 
    
         
            +
            * **Tenant:** align info in overview ([acb39fa](https://github.com/ydb-platform/ydb-embedded-ui/commit/acb39fab70b7b4e0e78124fd887b2f1b76815221))
         
     | 
| 
      
 12 
     | 
    
         
            +
            * **Tenant:** display tenant name in single line ([301e391](https://github.com/ydb-platform/ydb-embedded-ui/commit/301e3911330024f80ebfda6d1a16823b64d94b36))
         
     | 
| 
      
 13 
     | 
    
         
            +
            * **Tenant:** move tablets under tenant name ([b7e4b8f](https://github.com/ydb-platform/ydb-embedded-ui/commit/b7e4b8f7027f1481a7c1baff77bf8ad5e2ed467c))
         
     | 
| 
      
 14 
     | 
    
         
            +
             
     | 
| 
       3 
15 
     | 
    
         
             
            ## [1.8.7](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.8.6...v1.8.7) (2022-07-18)
         
     | 
| 
       4 
16 
     | 
    
         | 
| 
       5 
17 
     | 
    
         | 
| 
         @@ -93,7 +93,7 @@ function TabletsOverall({tablets}: TabletsOverallProps) { 
     | 
|
| 
       93 
93 
     | 
    
         
             
                    <div className={b('row', {overall: true})}>
         
     | 
| 
       94 
94 
     | 
    
         
             
                        <span className={b('label', {overall: true})}>Overall:</span>
         
     | 
| 
       95 
95 
     | 
    
         
             
                        <div
         
     | 
| 
       96 
     | 
    
         
            -
                            onMouseLeave={dispatch(hideTooltip)}
         
     | 
| 
      
 96 
     | 
    
         
            +
                            onMouseLeave={() => dispatch(hideTooltip())}
         
     | 
| 
       97 
97 
     | 
    
         
             
                            onMouseEnter={(e) => dispatch(showTooltip(e.target, tooltipData, 'tabletsOverall'))}
         
     | 
| 
       98 
98 
     | 
    
         
             
                        >
         
     | 
| 
       99 
99 
     | 
    
         
             
                            <Progress value={memoryProgress} stack={stack} />
         
     | 
| 
         @@ -150,7 +150,7 @@ class Tablets extends React.Component { 
     | 
|
| 
       150 
150 
     | 
    
         
             
                    const {stateFilter, typeFilter, className} = this.props;
         
     | 
| 
       151 
151 
     | 
    
         | 
| 
       152 
152 
     | 
    
         
             
                    return (
         
     | 
| 
       153 
     | 
    
         
            -
                        <div className={ 
     | 
| 
      
 153 
     | 
    
         
            +
                        <div className={b(null, className)}>
         
     | 
| 
       154 
154 
     | 
    
         
             
                            <div className={b('header')}>
         
     | 
| 
       155 
155 
     | 
    
         
             
                                <Select
         
     | 
| 
       156 
156 
     | 
    
         
             
                                    className={b('filter-control')}
         
     | 
| 
         @@ -3,7 +3,6 @@ 
     | 
|
| 
       3 
3 
     | 
    
         
             
            .tablets-filters {
         
     | 
| 
       4 
4 
     | 
    
         
             
                overflow: auto;
         
     | 
| 
       5 
5 
     | 
    
         | 
| 
       6 
     | 
    
         
            -
                max-height: 400px;
         
     | 
| 
       7 
6 
     | 
    
         
             
                @include flex-container();
         
     | 
| 
       8 
7 
     | 
    
         | 
| 
       9 
8 
     | 
    
         
             
                &__node {
         
     | 
| 
         @@ -19,18 +18,12 @@ 
     | 
|
| 
       19 
18 
     | 
    
         
             
                }
         
     | 
| 
       20 
19 
     | 
    
         | 
| 
       21 
20 
     | 
    
         
             
                &__items {
         
     | 
| 
       22 
     | 
    
         
            -
                    display: flex;
         
     | 
| 
       23 
21 
     | 
    
         
             
                    overflow: auto;
         
     | 
| 
       24 
22 
     | 
    
         
             
                    flex: 1 1 auto;
         
     | 
| 
       25 
     | 
    
         
            -
                    flex-wrap: wrap;
         
     | 
| 
       26 
23 
     | 
    
         | 
| 
       27 
24 
     | 
    
         
             
                    padding: 5px 20px;
         
     | 
| 
       28 
25 
     | 
    
         
             
                }
         
     | 
| 
       29 
26 
     | 
    
         | 
| 
       30 
     | 
    
         
            -
                &__items-wrapper {
         
     | 
| 
       31 
     | 
    
         
            -
                    overflow: auto;
         
     | 
| 
       32 
     | 
    
         
            -
                }
         
     | 
| 
       33 
     | 
    
         
            -
             
     | 
| 
       34 
27 
     | 
    
         
             
                &__filters {
         
     | 
| 
       35 
28 
     | 
    
         
             
                    display: flex;
         
     | 
| 
       36 
29 
     | 
    
         
             
                    align-items: center;
         
     | 
| 
         @@ -1,9 +1,13 @@ 
     | 
|
| 
      
 1 
     | 
    
         
            +
            $section-title-margin: 20px;
         
     | 
| 
      
 2 
     | 
    
         
            +
            $section-title-line-height: 24px;
         
     | 
| 
      
 3 
     | 
    
         
            +
             
     | 
| 
       1 
4 
     | 
    
         
             
            .kv-detailed-overview {
         
     | 
| 
       2 
5 
     | 
    
         
             
                display: flex;
         
     | 
| 
       3 
     | 
    
         
            -
                gap:  
     | 
| 
      
 6 
     | 
    
         
            +
                gap: 20px;
         
     | 
| 
       4 
7 
     | 
    
         
             
                &__section {
         
     | 
| 
       5 
8 
     | 
    
         
             
                    display: flex;
         
     | 
| 
       6 
     | 
    
         
            -
                     
     | 
| 
      
 9 
     | 
    
         
            +
                    overflow-x: hidden;
         
     | 
| 
      
 10 
     | 
    
         
            +
                    flex: 0 0 calc(50% - 10px);
         
     | 
| 
       7 
11 
     | 
    
         
             
                    flex-direction: column;
         
     | 
| 
       8 
12 
     | 
    
         
             
                }
         
     | 
| 
       9 
13 
     | 
    
         | 
| 
         @@ -97,10 +97,14 @@ class Healthcheck extends React.Component { 
     | 
|
| 
       97 
97 
     | 
    
         
             
                                </div>
         
     | 
| 
       98 
98 
     | 
    
         
             
                                {this.renderUpdateButton()}
         
     | 
| 
       99 
99 
     | 
    
         
             
                            </div>
         
     | 
| 
       100 
     | 
    
         
            -
                            <div>
         
     | 
| 
      
 100 
     | 
    
         
            +
                            <div className={b('preview-content')}>
         
     | 
| 
       101 
101 
     | 
    
         
             
                                {text}
         
     | 
| 
       102 
102 
     | 
    
         
             
                                {!statusOk && (
         
     | 
| 
       103 
     | 
    
         
            -
                                    <Button 
     | 
| 
      
 103 
     | 
    
         
            +
                                    <Button
         
     | 
| 
      
 104 
     | 
    
         
            +
                                        view="flat-info"
         
     | 
| 
      
 105 
     | 
    
         
            +
                                        onClick={showMoreHandler}
         
     | 
| 
      
 106 
     | 
    
         
            +
                                        size="s"
         
     | 
| 
      
 107 
     | 
    
         
            +
                                    >
         
     | 
| 
       104 
108 
     | 
    
         
             
                                        Show details
         
     | 
| 
       105 
109 
     | 
    
         
             
                                    </Button>
         
     | 
| 
       106 
110 
     | 
    
         
             
                                )}
         
     | 
| 
         @@ -1,3 +1,4 @@ 
     | 
|
| 
      
 1 
     | 
    
         
            +
            @use '../DetailedOverview/DetailedOverview.scss' as detailedOverview;
         
     | 
| 
       1 
2 
     | 
    
         
             
            @import '../../../../styles/mixins.scss';
         
     | 
| 
       2 
3 
     | 
    
         | 
| 
       3 
4 
     | 
    
         
             
            .healthcheck {
         
     | 
| 
         @@ -37,14 +38,17 @@ 
     | 
|
| 
       37 
38 
     | 
    
         | 
| 
       38 
39 
     | 
    
         
             
                &__status-wrapper {
         
     | 
| 
       39 
40 
     | 
    
         
             
                    display: flex;
         
     | 
| 
       40 
     | 
    
         
            -
                    align-items: baseline;
         
     | 
| 
       41 
41 
     | 
    
         | 
| 
       42 
     | 
    
         
            -
                    margin-bottom:  
     | 
| 
      
 42 
     | 
    
         
            +
                    margin-bottom: detailedOverview.$section-title-margin;
         
     | 
| 
       43 
43 
     | 
    
         
             
                    gap: 8px;
         
     | 
| 
       44 
44 
     | 
    
         
             
                }
         
     | 
| 
       45 
45 
     | 
    
         | 
| 
       46 
46 
     | 
    
         
             
                &__preview-title {
         
     | 
| 
       47 
47 
     | 
    
         
             
                    font-weight: 600;
         
     | 
| 
      
 48 
     | 
    
         
            +
                    line-height: detailedOverview.$section-title-line-height;
         
     | 
| 
      
 49 
     | 
    
         
            +
                }
         
     | 
| 
      
 50 
     | 
    
         
            +
             
     | 
| 
      
 51 
     | 
    
         
            +
                &__preview-content {
         
     | 
| 
       48 
52 
     | 
    
         
             
                    line-height: 24px;
         
     | 
| 
       49 
53 
     | 
    
         
             
                }
         
     | 
| 
       50 
54 
     | 
    
         | 
| 
         @@ -25,9 +25,11 @@ const renderName = (tenant) => { 
     | 
|
| 
       25 
25 
     | 
    
         
             
                if (tenant) {
         
     | 
| 
       26 
26 
     | 
    
         
             
                    const {Name} = tenant;
         
     | 
| 
       27 
27 
     | 
    
         
             
                    return (
         
     | 
| 
       28 
     | 
    
         
            -
                        <div className={b('tenant-name')}>
         
     | 
| 
      
 28 
     | 
    
         
            +
                        <div className={b('tenant-name-wrapper')}>
         
     | 
| 
       29 
29 
     | 
    
         
             
                            <EntityStatus status={tenant.State} />
         
     | 
| 
       30 
     | 
    
         
            -
                            <span 
     | 
| 
      
 30 
     | 
    
         
            +
                            <span className={b('tenant-name-trim')}>
         
     | 
| 
      
 31 
     | 
    
         
            +
                                <span className={b('tenant-name')}>{Name}</span>
         
     | 
| 
      
 32 
     | 
    
         
            +
                            </span>
         
     | 
| 
       31 
33 
     | 
    
         
             
                        </div>
         
     | 
| 
       32 
34 
     | 
    
         
             
                    );
         
     | 
| 
       33 
35 
     | 
    
         
             
                }
         
     | 
| 
         @@ -139,17 +141,17 @@ class TenantOverview extends React.Component { 
     | 
|
| 
       139 
141 
     | 
    
         
             
                                        this.props.tenant.Name,
         
     | 
| 
       140 
142 
     | 
    
         
             
                                        this.props.tenant.Type,
         
     | 
| 
       141 
143 
     | 
    
         
             
                                    )}
         
     | 
| 
       142 
     | 
    
         
            -
             
     | 
| 
       143 
     | 
    
         
            -
             
     | 
| 
       144 
     | 
    
         
            -
             
     | 
| 
       145 
     | 
    
         
            -
             
     | 
| 
       146 
     | 
    
         
            -
             
     | 
| 
       147 
     | 
    
         
            -
             
     | 
| 
       148 
     | 
    
         
            -
             
     | 
| 
       149 
     | 
    
         
            -
             
     | 
| 
       150 
     | 
    
         
            -
                                             
     | 
| 
       151 
     | 
    
         
            -
                                         
     | 
| 
       152 
     | 
    
         
            -
             
     | 
| 
      
 144 
     | 
    
         
            +
                            </div>
         
     | 
| 
      
 145 
     | 
    
         
            +
                            <div className={b('system-tablets')}>
         
     | 
| 
      
 146 
     | 
    
         
            +
                                {SystemTablets &&
         
     | 
| 
      
 147 
     | 
    
         
            +
                                    SystemTablets.map((tablet, tabletIndex) => (
         
     | 
| 
      
 148 
     | 
    
         
            +
                                        <Tablet
         
     | 
| 
      
 149 
     | 
    
         
            +
                                            onMouseEnter={showTooltip}
         
     | 
| 
      
 150 
     | 
    
         
            +
                                            onMouseLeave={hideTooltip}
         
     | 
| 
      
 151 
     | 
    
         
            +
                                            key={tabletIndex}
         
     | 
| 
      
 152 
     | 
    
         
            +
                                            tablet={tablet}
         
     | 
| 
      
 153 
     | 
    
         
            +
                                        />
         
     | 
| 
      
 154 
     | 
    
         
            +
                                    ))}
         
     | 
| 
       153 
155 
     | 
    
         
             
                            </div>
         
     | 
| 
       154 
156 
     | 
    
         
             
                            <div className={b('common-info')}>
         
     | 
| 
       155 
157 
     | 
    
         
             
                                {PoolStats ? (
         
     | 
| 
         @@ -1,30 +1,46 @@ 
     | 
|
| 
      
 1 
     | 
    
         
            +
            @use '../DetailedOverview/DetailedOverview.scss' as detailedOverview;
         
     | 
| 
      
 2 
     | 
    
         
            +
             
     | 
| 
       1 
3 
     | 
    
         
             
            .tenant-overview {
         
     | 
| 
       2 
4 
     | 
    
         
             
                padding-bottom: 20px;
         
     | 
| 
       3 
5 
     | 
    
         
             
                &__loader {
         
     | 
| 
       4 
6 
     | 
    
         
             
                    display: flex;
         
     | 
| 
       5 
7 
     | 
    
         
             
                    justify-content: center;
         
     | 
| 
       6 
8 
     | 
    
         
             
                }
         
     | 
| 
       7 
     | 
    
         
            -
                &__tenant-name {
         
     | 
| 
      
 9 
     | 
    
         
            +
                &__tenant-name-wrapper {
         
     | 
| 
       8 
10 
     | 
    
         
             
                    display: flex;
         
     | 
| 
      
 11 
     | 
    
         
            +
                    overflow: hidden;
         
     | 
| 
       9 
12 
     | 
    
         
             
                    align-items: center;
         
     | 
| 
       10 
13 
     | 
    
         | 
| 
       11 
14 
     | 
    
         
             
                    & .yc-link {
         
     | 
| 
       12 
15 
     | 
    
         
             
                        display: flex;
         
     | 
| 
       13 
16 
     | 
    
         
             
                    }
         
     | 
| 
       14 
17 
     | 
    
         
             
                }
         
     | 
| 
      
 18 
     | 
    
         
            +
                &__tenant-name-trim {
         
     | 
| 
      
 19 
     | 
    
         
            +
                    overflow: hidden;
         
     | 
| 
      
 20 
     | 
    
         
            +
             
     | 
| 
      
 21 
     | 
    
         
            +
                    white-space: nowrap;
         
     | 
| 
      
 22 
     | 
    
         
            +
                    text-overflow: ellipsis;
         
     | 
| 
      
 23 
     | 
    
         
            +
                    direction: rtl;
         
     | 
| 
      
 24 
     | 
    
         
            +
                }
         
     | 
| 
      
 25 
     | 
    
         
            +
             
     | 
| 
      
 26 
     | 
    
         
            +
                &__tenant-name {
         
     | 
| 
      
 27 
     | 
    
         
            +
                    unicode-bidi: plaintext;
         
     | 
| 
      
 28 
     | 
    
         
            +
                }
         
     | 
| 
       15 
29 
     | 
    
         | 
| 
       16 
30 
     | 
    
         
             
                &__top {
         
     | 
| 
       17 
31 
     | 
    
         
             
                    display: flex;
         
     | 
| 
       18 
32 
     | 
    
         
             
                    align-items: center;
         
     | 
| 
       19 
33 
     | 
    
         | 
| 
       20 
     | 
    
         
            -
                    margin-bottom:  
     | 
| 
      
 34 
     | 
    
         
            +
                    margin-bottom: 10px;
         
     | 
| 
      
 35 
     | 
    
         
            +
             
     | 
| 
      
 36 
     | 
    
         
            +
                    line-height: 24px;
         
     | 
| 
       21 
37 
     | 
    
         
             
                }
         
     | 
| 
       22 
38 
     | 
    
         | 
| 
       23 
39 
     | 
    
         
             
                &__top-label {
         
     | 
| 
       24 
     | 
    
         
            -
                    margin-bottom:  
     | 
| 
      
 40 
     | 
    
         
            +
                    margin-bottom: detailedOverview.$section-title-margin;
         
     | 
| 
       25 
41 
     | 
    
         | 
| 
       26 
42 
     | 
    
         
             
                    font-weight: 600;
         
     | 
| 
       27 
     | 
    
         
            -
                    line-height:  
     | 
| 
      
 43 
     | 
    
         
            +
                    line-height: detailedOverview.$section-title-line-height;
         
     | 
| 
       28 
44 
     | 
    
         
             
                    gap: 10px;
         
     | 
| 
       29 
45 
     | 
    
         
             
                }
         
     | 
| 
       30 
46 
     | 
    
         | 
| 
         @@ -42,7 +58,7 @@ 
     | 
|
| 
       42 
58 
     | 
    
         
             
                    flex-wrap: wrap;
         
     | 
| 
       43 
59 
     | 
    
         
             
                    align-items: center;
         
     | 
| 
       44 
60 
     | 
    
         | 
| 
       45 
     | 
    
         
            -
                    margin- 
     | 
| 
      
 61 
     | 
    
         
            +
                    margin-bottom: 35px;
         
     | 
| 
       46 
62 
     | 
    
         
             
                }
         
     | 
| 
       47 
63 
     | 
    
         | 
| 
       48 
64 
     | 
    
         
             
                &__collapse-title {
         
     | 
| 
         @@ -76,7 +92,7 @@ 
     | 
|
| 
       76 
92 
     | 
    
         
             
                    margin-bottom: 20px;
         
     | 
| 
       77 
93 
     | 
    
         | 
| 
       78 
94 
     | 
    
         
             
                    font-size: var(--yc-text-body-2-font-size);
         
     | 
| 
       79 
     | 
    
         
            -
                    font-weight:  
     | 
| 
      
 95 
     | 
    
         
            +
                    font-weight: 600;
         
     | 
| 
       80 
96 
     | 
    
         
             
                    line-height: var(--yc-text-body-2-line-height);
         
     | 
| 
       81 
97 
     | 
    
         
             
                }
         
     | 
| 
       82 
98 
     | 
    
         
             
            }
         
     |