ydb-embedded-ui 4.24.0 → 4.26.0

package/dist/containers/Heatmap/Histogram/Histogram.scss

@@ -13,22 +13,22 @@
         margin-top: 30px;
         margin-left: 50px;
 
-        border-bottom: 1px solid var(--yc-color-base-generic);
-        border-left: 1px solid var(--yc-color-base-generic);
+        border-bottom: 1px solid var(--g-color-base-generic);
+        border-left: 1px solid var(--g-color-base-generic);
     }
     &__x-min {
         position: absolute;
         bottom: -25px;
         left: -3px;
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
     }
     &__x-max {
         position: absolute;
         right: 0;
         bottom: -25px;
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
     }
     &__y-min {
         position: absolute;
@@ -39,7 +39,7 @@
 
         text-align: right;
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
     }
     &__y-max {
         position: absolute;
@@ -50,7 +50,7 @@
 
         text-align: right;
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
     }
     &__item {
         width: 1.5%;

package/dist/containers/Node/NodeStructure/NodeStructure.scss

@@ -8,7 +8,7 @@
     flex-direction: column;
     flex-shrink: 0;
     @include flex-container();
-    @include body2-typography();
+    @include body-2-typography();
 
     &__pdisk {
         display: flex;
@@ -18,7 +18,7 @@
         margin-bottom: 8px;
         padding: 0 10px 0 20px;
 
-        border: 1px solid var(--yc-color-line-generic);
+        border: 1px solid var(--g-color-line-generic);
         border-radius: 5px;
     }
 
@@ -54,7 +54,7 @@
         &-label {
             font-weight: 400;
 
-            color: var(--yc-color-text-secondary);
+            color: var(--g-color-text-secondary);
         }
     }
 
@@ -79,7 +79,7 @@
     &__link {
         text-decoration: none;
 
-        color: var(--yc-color-base-special);
+        color: var(--g-color-base-brand);
     }
 
     &__vdisks-header {
@@ -94,6 +94,7 @@
         overflow: auto;
 
         min-width: 200px;
+        max-width: unset;
         max-height: 90vh;
 
         .vdisk-pdisk-node__column {
@@ -109,13 +110,13 @@
         align-items: center;
 
         &_selected {
-            color: var(--yc-color-text-info);
+            color: var(--g-color-text-info);
         }
     }
 
     &__vdisk-details-button {
         &_selected {
-            color: var(--yc-color-text-info);
+            color: var(--g-color-text-info);
         }
     }
 
@@ -127,10 +128,6 @@
 
         transform: translateY(-1px);
 
-        .yc-button__text {
-            margin: 0 4px;
-        }
-
         &_hidden {
             visibility: hidden;
         }
@@ -160,15 +157,15 @@
     &__title {
         margin-right: 16px;
 
-        font-size: var(--yc-text-body-2-font-size);
         font-weight: 500;
-        line-height: var(--yc-text-body-2-line-height);
         text-transform: uppercase;
+
+        @include body-2-typography();
     }
 }
 
 @keyframes onSelectedVdiskAnimation {
     0% {
-        background-color: var(--yc-color-base-info-hover);
+        background-color: var(--g-color-base-info-light-hover);
     }
 }

package/dist/containers/Node/NodeStructure/Pdisk.tsx

@@ -143,7 +143,7 @@ function getColumns({
                     <Popover
                         placement={['right']}
                         content={<Vdisk {...row} />}
-                        contentClassName={b('vdisk-details')}
+                        tooltipContentClassName={b('vdisk-details')}
                     >
                         <Button
                             view="flat-secondary"

package/dist/containers/ReduxTooltip/ReduxTooltip.js

@@ -43,7 +43,7 @@ function ReduxTooltip(props) {
                 <Popup
                     open={visible}
                     placement={['top', 'bottom', 'left', 'right']}
-                    className={popupClassName}
+                    contentClassName={popupClassName}
                     anchorRef={fakeAnchor}
                     onOutsideClick={hideTooltip}
                 >

package/dist/containers/ReduxTooltip/ReduxTooltip.scss

@@ -6,8 +6,6 @@
     animation: none !important;
 }
 
-.pool-tooltip,
-.tablet-tooltip,
 .node-tootltip,
 .tabletsOverall-tooltip,
 .histogram-tooltip {
@@ -16,7 +14,7 @@
     &__label {
         padding-right: 15px;
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
     }
 }
 
@@ -54,18 +52,3 @@
 
     word-break: break-word;
 }
-
-.tablet-tooltip {
-    padding: 10px;
-    &__label {
-        padding-right: 15px;
-
-        color: var(--yc-color-text-secondary);
-    }
-
-    &__value {
-        &_blue {
-            color: var(--yc-color-base-special);
-        }
-    }
-}

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

@@ -10,14 +10,14 @@
     display: block;
 
     min-width: 50px;
-    height: var(--yc-text-body-3-line-height);
+    height: var(--g-text-body-3-line-height);
 
     text-align: center;
 
-    color: var(--yc-color-text-primary);
-    border: $border-width solid var(--yc-color-infographics-misc-heavy);
+    color: var(--g-color-text-primary);
+    border: $border-width solid var(--g-color-base-misc-heavy);
     border-radius: $outer-border-radius;
-    background-color: var(--yc-color-infographics-misc-light);
+    background-color: var(--g-color-base-misc-light);
 
     &_compact {
         min-width: 0;
@@ -31,16 +31,16 @@
     }
 
     #{$block}__filled {
-        background-color: var(--yc-color-infographics-misc-medium);
+        background-color: var(--g-color-base-misc-medium);
     }
 
     &_green {
-        border-color: var(--yc-color-infographics-positive-heavy);
-        background-color: var(--yc-color-infographics-positive-light);
+        border-color: var(--g-color-base-positive-heavy);
+        background-color: var(--g-color-base-positive-light);
         #{$block}__filled {
-            background-color: var(--yc-color-infographics-positive-medium);
+            background-color: var(--g-color-base-positive-medium);
 
-            .yc-root_theme_dark & {
+            .g-root_theme_dark & {
                 // the common medium green is too bright for this case
                 background-color: rgb(124, 227, 121, 0.4);
             }
@@ -48,33 +48,33 @@
     }
 
     &_blue {
-        border-color: var(--yc-color-infographics-info-heavy);
-        background-color: var(--yc-color-infographics-info-light);
+        border-color: var(--g-color-base-info-heavy);
+        background-color: var(--g-color-base-info-light);
         #{$block}__filled {
-            background-color: var(--yc-color-infographics-info-medium);
+            background-color: var(--g-color-base-info-medium);
         }
     }
 
     &_yellow {
-        border-color: var(--yc-color-infographics-warning-heavy);
-        background-color: var(--yc-color-infographics-yellow-light);
+        border-color: var(--g-color-base-warning-heavy);
+        background-color: var(--g-color-base-yellow-light);
         #{$block}__filled {
-            background-color: var(--yc-color-infographics-yellow-medium);
+            background-color: var(--g-color-base-yellow-medium);
         }
     }
 
     &_orange {
-        border-color: var(--yc-color-base-warning-orange);
-        background-color: var(--yc-color-infographics-warning-light);
+        border-color: var(--ydb-color-status-orange);
+        background-color: var(--g-color-base-warning-light);
         #{$block}__filled {
-            background-color: var(--yc-color-infographics-warning-medium);
+            background-color: var(--g-color-base-warning-medium);
         }
     }
     &_red {
-        border-color: var(--yc-color-infographics-danger-heavy);
-        background-color: var(--yc-color-infographics-danger-light);
+        border-color: var(--g-color-base-danger-heavy);
+        background-color: var(--g-color-base-danger-light);
         #{$block}__filled {
-            background-color: var(--yc-color-infographics-danger-medium);
+            background-color: var(--g-color-base-danger-medium);
         }
     }
 
@@ -98,9 +98,9 @@
         position: relative;
         z-index: 2;
 
-        font-size: var(--yc-text-body-1-font-size);
+        font-size: var(--g-text-body-1-font-size);
         // bar height minus borders
-        line-height: calc(var(--yc-text-body-3-line-height) - #{$border-width * 2});
+        line-height: calc(var(--g-text-body-3-line-height) - #{$border-width * 2});
 
         color: inherit;
     }

package/dist/containers/Storage/PDisk/PDisk.scss

@@ -25,7 +25,7 @@
         flex-shrink: 0;
 
         .stack__layer {
-            background: var(--yc-color-base-background);
+            background: var(--g-color-base-background);
 
             .data-table__row:hover & {
                 background: var(--ydb-data-table-color-hover);
@@ -45,9 +45,9 @@
         top: 0;
         right: 4px;
 
-        font-size: var(--yc-text-body-1-font-size);
-        line-height: var(--yc-text-body-3-line-height);
+        font-size: var(--g-text-body-1-font-size);
+        line-height: var(--g-text-body-3-line-height);
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
     }
 }

package/dist/containers/Storage/PDiskPopup/PDiskPopup.tsx

@@ -66,7 +66,7 @@ export const PDiskPopup = ({data, nodes, ...props}: PDiskPopupProps) => {
 
     return (
         <Popup
-            className={b()}
+            contentClassName={b()}
             placement={['top', 'bottom']}
             // bigger offset for easier switching to neighbour nodes
             // matches the default offset for popup with arrow out of a sense of beauty

package/dist/containers/Storage/Storage.scss

@@ -8,7 +8,7 @@
     &__table {
         .yc-tooltip {
             // stylelint-disable-next-line declaration-no-important
-            height: var(--yc-text-body-2-line-height) !important;
+            height: var(--g-text-body-2-line-height) !important;
         }
 
         table {

package/dist/containers/Storage/StorageGroups/StorageGroups.scss

@@ -20,7 +20,7 @@
         }
 
         .stack__layer {
-            background: var(--yc-color-base-background);
+            background: var(--g-color-base-background);
 
             .data-table__row:hover & {
                 background: var(--ydb-data-table-color-hover);

package/dist/containers/Storage/UsageFilter/UsageFilter.scss

@@ -1,3 +1,5 @@
+@import '../../../styles/mixins.scss';
+
 .usage-filter {
     min-width: 100px;
 
@@ -5,10 +7,9 @@
         flex-grow: 1;
 
         &-title {
-            height: var(--yc-text-body-1-line-height);
+            height: var(--g-text-body-1-line-height);
 
-            font-size: var(--yc-text-body-1-font-size);
-            line-height: var(--yc-text-body-1-line-height);
+            @include body-1-typography();
         }
 
         &-meta {
@@ -17,8 +18,8 @@
 
             padding: 0 5px;
 
-            font-size: var(--yc-text-caption-2-font-size);
-            line-height: var(--yc-text-caption-2-line-height);
+            font-size: var(--g-text-caption-2-font-size);
+            line-height: var(--g-text-caption-2-line-height);
 
             border-radius: 3px;
         }
@@ -31,7 +32,7 @@
             left: 0;
 
             border-radius: 3px;
-            background-color: var(--yc-color-infographics-info-medium);
+            background-color: var(--g-color-base-info-medium);
         }
     }
 }

package/dist/containers/Storage/VDiskPopup/VDiskPopup.scss

@@ -5,7 +5,7 @@
         margin-top: 8px;
         padding-top: 8px;
 
-        border-top: 1px solid var(--yc-color-line-generic);
+        border-top: 1px solid var(--g-color-line-generic);
     }
 
     &__donor-label {

package/dist/containers/Storage/VDiskPopup/VDiskPopup.tsx

@@ -147,7 +147,7 @@ export const VDiskPopup = ({data, nodes, ...props}: VDiskPopupProps) => {
 
     return (
         <Popup
-            className={b()}
+            contentClassName={b()}
             placement={['top', 'bottom']}
             // bigger offset for easier switching to neighbour nodes
             // matches the default offset for popup with arrow out of a sense of beauty

package/dist/containers/Tablet/Tablet.scss

@@ -20,7 +20,7 @@
     }
     &__history-title {
         margin-bottom: 15px;
-        @include body2-typography();
+        @include body-2-typography();
     }
 
     &__placeholder {
@@ -46,10 +46,10 @@
     &__title {
         margin-right: 16px;
 
-        font-size: var(--yc-text-body-2-font-size);
         font-weight: 500;
-        line-height: var(--yc-text-body-2-line-height);
         text-transform: uppercase;
+
+        @include body-2-typography();
     }
 
     &__loader {
@@ -88,10 +88,10 @@
     &__top-label {
         margin-right: 16px;
 
-        font-size: var(--yc-text-body-2-font-size);
         font-weight: 500;
-        line-height: var(--yc-text-body-2-line-height);
         text-transform: uppercase;
+
+        @include body-2-typography();
     }
 
     &__host {

package/dist/containers/TabletsFilters/TabletsFilters.scss

@@ -8,8 +8,7 @@
     &__node {
         overflow: hidden;
 
-        font-size: var(--yc-text-body-1-font-size);
-        line-height: var(--yc-text-body-1-line-height);
+        @include body-1-typography();
     }
 
     &__node-meta {
@@ -18,7 +17,7 @@
         white-space: nowrap;
         text-overflow: ellipsis;
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
     }
 
     &__items {

package/dist/containers/Tenant/Acl/Acl.scss

@@ -23,20 +23,6 @@
 
         padding-bottom: 16px;
 
-        background-color: var(--yc-color-base-background);
-        .yc-staff-card {
-            display: inline-block;
-        }
-    }
-
-    &__text {
-        font-size: var(--yc-text-body-1-font-size);
-        line-height: var(--yc-text-body-1-line-height);
-
-        color: var(--yc-color-text-primary);
-
-        &::first-letter {
-            color: var(--yc-color-text-danger);
-        }
+        background-color: var(--g-color-base-background);
     }
 }

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

@@ -16,10 +16,6 @@
         @include search();
     }
 
-    &__table-settings .yc-icon {
-        width: 20px;
-    }
-
     &__table-wrapper {
         overflow: auto;
         @include flex-container();

package/dist/containers/Tenant/Diagnostics/Consumers/TopicStats/ConsumersTopicStats.scss

@@ -1,6 +1,7 @@
+@import '../../../../../styles/mixins.scss';
+
 .ydb-diagnostics-consumers-topic-stats {
-    font-size: var(--yc-text-body-2-font-size);
-    line-height: var(--yc-text-body-2-line-height);
+    @include body-2-typography();
 
     &__wrapper {
         display: flex;
@@ -8,7 +9,7 @@
 
         padding-left: 16px;
 
-        border-left: 1px solid var(--yc-color-line-generic);
+        border-left: 1px solid var(--g-color-line-generic);
     }
 
     &__item {
@@ -20,7 +21,7 @@
     &__label {
         margin-bottom: 4px;
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
     }
     &__value {
         display: flex;

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

@@ -23,11 +23,5 @@
         position: absolute;
         top: 23px;
         right: 13px;
-
-        & .yc-button__text {
-            display: flex;
-
-            margin: 0 4px;
-        }
     }
 }

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

@@ -1,18 +1,10 @@
-import React, {useState} from 'react';
 import {useSelector} from 'react-redux';
 import cn from 'bem-cn-lite';
 
-import {Button, Modal} from '@gravity-ui/uikit';
-
 import type {EPathType} from '../../../../types/api/schema';
 import type {AdditionalNodesProps, AdditionalTenantsProps} from '../../../../types/additionalProps';
-import {Icon} from '../../../../components/Icon';
-import {useSetting} from '../../../../utils/hooks';
-import {DISPLAY_METRICS_CARDS_FOR_TENANT_DIAGNOSTICS} from '../../../../utils/constants';
 import Overview from '../Overview/Overview';
-import {Healthcheck} from '../OldHealthcheck';
 import {TenantOverview} from '../TenantOverview/TenantOverview';
-import {OldTenantOverview} from '../TenantOverview/OldTenantOverview';
 
 import './DetailedOverview.scss';
 
@@ -29,86 +21,26 @@ const b = cn('kv-detailed-overview');
 function DetailedOverview(props: DetailedOverviewProps) {
     const {type, tenantName, additionalTenantProps, additionalNodesProps} = props;
 
-    const [isModalVisible, setIsModalVisible] = useState(false);
-
     const {currentSchemaPath} = useSelector((state: any) => state.schema);
 
-    const [displayMetricsCards] = useSetting(DISPLAY_METRICS_CARDS_FOR_TENANT_DIAGNOSTICS);
-
-    const openModalHandler = () => {
-        setIsModalVisible(true);
-    };
-
-    const closeModalHandler = () => {
-        setIsModalVisible(false);
-    };
-
-    const renderModal = () => {
-        return (
-            <Modal open={isModalVisible} onClose={closeModalHandler} className={b('modal')}>
-                <Healthcheck tenant={props.tenantName} fetchData={false} />
-                <Button
-                    className={b('close-modal-button')}
-                    onClick={closeModalHandler}
-                    view="flat-secondary"
-                    title="Close"
-                >
-                    <Icon name="close" viewBox={'0 0 16 16 '} height={20} width={20} />
-                </Button>
-            </Modal>
-        );
-    };
-
     const renderTenantOverview = () => {
-        if (displayMetricsCards) {
-            return (
-                <div className={b('section')}>
-                    <TenantOverview
-                        tenantName={tenantName}
-                        additionalTenantProps={additionalTenantProps}
-                        additionalNodesProps={additionalNodesProps}
-                    />
-                </div>
-            );
-        }
-
-        return (
-            <>
-                <div className={b('section')}>
-                    <OldTenantOverview
-                        tenantName={tenantName}
-                        additionalTenantProps={additionalTenantProps}
-                    />
-                </div>
-                <div className={b('section')}>
-                    <Healthcheck
-                        tenant={tenantName}
-                        preview={true}
-                        showMoreHandler={openModalHandler}
-                    />
-                </div>
-            </>
-        );
-    };
-
-    const renderContent = () => {
-        const isTenant = tenantName === currentSchemaPath;
         return (
-            <div className={b()}>
-                {isTenant ? (
-                    renderTenantOverview()
-                ) : (
-                    <Overview type={type} tenantName={tenantName} />
-                )}
+            <div className={b('section')}>
+                <TenantOverview
+                    tenantName={tenantName}
+                    additionalTenantProps={additionalTenantProps}
+                    additionalNodesProps={additionalNodesProps}
+                />
             </div>
         );
     };
 
+    const isTenant = tenantName === currentSchemaPath;
+
     return (
-        <React.Fragment>
-            {renderContent()}
-            {renderModal()}
-        </React.Fragment>
+        <div className={b()}>
+            {isTenant ? renderTenantOverview() : <Overview type={type} tenantName={tenantName} />}
+        </div>
     );
 }
 

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

@@ -8,7 +8,7 @@
     &__header-wrapper {
         padding: 13px 20px 16px;
 
-        background-color: var(--yc-color-base-background);
+        background-color: var(--g-color-base-background);
     }
 
     &__tabs {
@@ -16,7 +16,7 @@
         justify-content: space-between;
         align-items: center;
 
-        box-shadow: inset 0 -1px 0 0 var(--yc-color-line-generic);
+        box-shadow: inset 0 -1px 0 0 var(--g-color-line-generic);
         & .yc-tabs_direction_horizontal {
             box-shadow: unset;
         }