ydb-embedded-ui 4.16.1 → 4.17.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## [4.17.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.16.2...v4.17.0) (2023-09-18)
+
+
+### Features
+
+* add sorting of issues in issues tree ([#532](https://github.com/ydb-platform/ydb-embedded-ui/issues/532)) ([9f7837c](https://github.com/ydb-platform/ydb-embedded-ui/commit/9f7837c95bd1132dd287011e1aadc96c0819b40d))
+* move healthcheck to tabs ([#531](https://github.com/ydb-platform/ydb-embedded-ui/issues/531)) ([1879d3d](https://github.com/ydb-platform/ydb-embedded-ui/commit/1879d3d8f717a0baaec0d506ad354d81a226fa62))
+* update TenantOverview design ([#527](https://github.com/ydb-platform/ydb-embedded-ui/issues/527)) ([8a752e0](https://github.com/ydb-platform/ydb-embedded-ui/commit/8a752e0def3dc4317fd18519aed210bdc23fefa2))
+
+
+### Bug Fixes
+
+* fix Healthcheck blinking ([#528](https://github.com/ydb-platform/ydb-embedded-ui/issues/528)) ([0fc6c46](https://github.com/ydb-platform/ydb-embedded-ui/commit/0fc6c46eb15aeb73a984ba2c2cbe18ef7116382e))
+* **Tenants:** use blob storage ([#530](https://github.com/ydb-platform/ydb-embedded-ui/issues/530)) ([8a546a1](https://github.com/ydb-platform/ydb-embedded-ui/commit/8a546a1ab2f812acc1523c1c35738f4c605c32a5))
+
+## [4.16.2](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.16.1...v4.16.2) (2023-08-28)
+
+
+### Bug Fixes
+
+* fix topic templates ([#524](https://github.com/ydb-platform/ydb-embedded-ui/issues/524)) ([f593b57](https://github.com/ydb-platform/ydb-embedded-ui/commit/f593b575fb64d0c69b56e743fd4cd6faba1e9d0e))
+* rename additionalInfo params to additionalProps ([#525](https://github.com/ydb-platform/ydb-embedded-ui/issues/525)) ([dd2b040](https://github.com/ydb-platform/ydb-embedded-ui/commit/dd2b04039cd80072fe11744f3490c176fe21b16b))
+
 ## [4.16.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.16.0...v4.16.1) (2023-08-25)
 
 

package/dist/components/BasicNodeViewer/BasicNodeViewer.tsx

@@ -13,13 +13,13 @@ const b = cn('basic-node-viewer');
 
 interface BasicNodeViewerProps {
     node: TSystemStateInfo;
-    additionalNodesInfo?: AdditionalNodesProps;
+    additionalNodesProps?: AdditionalNodesProps;
     className?: string;
 }
 
-export const BasicNodeViewer = ({node, additionalNodesInfo, className}: BasicNodeViewerProps) => {
-    const nodeHref = additionalNodesInfo?.getNodeRef
-        ? additionalNodesInfo.getNodeRef(node) + 'internal'
+export const BasicNodeViewer = ({node, additionalNodesProps, className}: BasicNodeViewerProps) => {
+    const nodeHref = additionalNodesProps?.getNodeRef
+        ? additionalNodesProps.getNodeRef(node) + 'internal'
         : undefined;
 
     return (

package/dist/components/CircularProgressBar/CircularProgressBar.scss

@@ -0,0 +1,42 @@
+.ydb-circular-progress-bar {
+    display: block;
+
+    max-width: 100%;
+
+    transform: rotate(90deg);
+
+    &__wrapper {
+        position: relative;
+    }
+    &__content {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+
+        overflow: hidden;
+
+        max-width: 100%;
+
+        transform: translate(-50%, -50%);
+    }
+
+    &__circle-bg {
+        stroke: var(--yc-color-base-simple-hover);
+
+        fill: none;
+    }
+
+    &__circle {
+        fill: none;
+
+        &_status_good {
+            stroke: var(--yc-color-private-green-550);
+        }
+        &_status_warning {
+            stroke: var(--yc-color-private-yellow-550);
+        }
+        &_status_danger {
+            stroke: var(--yc-color-private-red-550);
+        }
+    }
+}

package/dist/components/CircularProgressBar/CircularProgressBar.tsx

@@ -0,0 +1,59 @@
+import cn from 'bem-cn-lite';
+import type {ReactNode} from 'react';
+
+import type {MetricStatus} from '../../store/reducers/tenants/types';
+import {normalizeProgress} from '../../store/reducers/tenants/utils';
+
+import './CircularProgressBar.scss';
+
+const b = cn('ydb-circular-progress-bar');
+
+interface CircularProgressBarProps {
+    size?: number;
+    progress?: number;
+    strokeWidth?: number;
+    content?: ReactNode;
+    status?: MetricStatus;
+    circleBgClassName?: string;
+}
+
+export function CircularProgressBar({
+    size = 100,
+    progress = 0,
+    strokeWidth = 10,
+    content,
+    status,
+    circleBgClassName,
+}: CircularProgressBarProps) {
+    const center = size / 2;
+
+    const radius = size / 2 - strokeWidth / 2;
+    const circumference = 2 * Math.PI * radius;
+
+    const normalizedProgress = normalizeProgress(progress);
+
+    const offset = ((100 - normalizedProgress) / 100) * circumference;
+    return (
+        <div className={b('wrapper')}>
+            {content && <div className={b('content')}>{content}</div>}
+            <svg className={b()} width={size} height={size}>
+                <circle
+                    className={b('circle-bg', circleBgClassName)}
+                    cx={center}
+                    cy={center}
+                    r={radius}
+                    strokeWidth={strokeWidth}
+                />
+                <circle
+                    className={b('circle', {status: status?.toLocaleLowerCase()})}
+                    cx={center}
+                    cy={center}
+                    r={radius}
+                    strokeWidth={strokeWidth}
+                    strokeDasharray={circumference}
+                    strokeDashoffset={offset}
+                />
+            </svg>
+        </div>
+    );
+}

package/dist/components/DiagnosticCard/DiagnosticCard.scss

@@ -1,5 +1,22 @@
-.diagnostic-card {
-    min-width: 200px;
-    max-width: 350px;
+.ydb-diagnostic-card {
+    flex-shrink: 0;
+
+    width: 206px;
     padding: 16px;
+    padding-bottom: 28px;
+
+    border: 1px solid var(--yc-color-line-generic);
+    border-radius: 8px;
+    background-color: transparent;
+
+    &_active {
+        border-color: var(--yc-color-base-info-heavy);
+        background-color: var(--yc-color-base-selection);
+    }
+
+    &:hover {
+        cursor: pointer;
+
+        box-shadow: 0px 1px 5px var(--yc-color-sfx-shadow);
+    }
 }

package/dist/components/DiagnosticCard/DiagnosticCard.tsx

@@ -1,17 +1,16 @@
-import {ReactNode} from 'react';
+import type {ReactNode} from 'react';
 import cn from 'bem-cn-lite';
 
-import {Card} from '@gravity-ui/uikit';
-
 import './DiagnosticCard.scss';
 
-const b = cn('diagnostic-card');
+const b = cn('ydb-diagnostic-card');
 
 interface DiagnosticCardProps {
     children?: ReactNode;
     className?: string;
+    active?: boolean;
 }
 
-export function DiagnosticCard({children, className}: DiagnosticCardProps) {
-    return <Card className={b(null, className)}>{children}</Card>;
+export function DiagnosticCard({children, className, active}: DiagnosticCardProps) {
+    return <div className={b({active}, className)}>{children}</div>;
 }

package/dist/containers/Cluster/Cluster.tsx

@@ -35,7 +35,7 @@ const b = cn('cluster');
 
 interface ClusterProps {
     additionalTenantsProps?: AdditionalTenantsProps;
-    additionalNodesInfo?: AdditionalNodesProps;
+    additionalNodesProps?: AdditionalNodesProps;
     additionalClusterProps?: AdditionalClusterProps;
     additionalVersionsProps?: AdditionalVersionsProps;
 }
@@ -43,7 +43,7 @@ interface ClusterProps {
 function Cluster({
     additionalClusterProps,
     additionalTenantsProps,
-    additionalNodesInfo,
+    additionalNodesProps,
     additionalVersionsProps,
 }: ClusterProps) {
     const dispatch = useDispatch();
@@ -104,10 +104,10 @@ function Cluster({
                 return <Tenants additionalTenantsProps={additionalTenantsProps} />;
             }
             case clusterTabsIds.nodes: {
-                return <Nodes additionalNodesInfo={additionalNodesInfo} />;
+                return <Nodes additionalNodesProps={additionalNodesProps} />;
             }
             case clusterTabsIds.storage: {
-                return <Storage additionalNodesInfo={additionalNodesInfo} />;
+                return <Storage additionalNodesProps={additionalNodesProps} />;
             }
             case clusterTabsIds.versions: {
                 return <Versions versionToColor={versionToColor} />;

package/dist/containers/Node/Node.tsx

@@ -34,7 +34,7 @@ export const STORAGE_ROLE = 'Storage';
 const autofetcher = new AutoFetcher();
 
 interface NodeProps {
-    additionalNodesInfo?: AdditionalNodesProps;
+    additionalNodesProps?: AdditionalNodesProps;
     className?: string;
 }
 
@@ -115,7 +115,7 @@ function Node(props: NodeProps) {
         );
     };
     const renderTabContent = () => {
-        const {additionalNodesInfo} = props;
+        const {additionalNodesProps} = props;
 
         switch (activeTab) {
             case STORAGE: {
@@ -138,7 +138,7 @@ function Node(props: NodeProps) {
                     <NodeStructure
                         className={b('node-page-wrapper')}
                         nodeId={nodeId}
-                        additionalNodesInfo={additionalNodesInfo}
+                        additionalNodesProps={additionalNodesProps}
                     />
                 );
             }
@@ -157,7 +157,7 @@ function Node(props: NodeProps) {
                 <div className={b(null, props.className)}>
                     <BasicNodeViewer
                         node={node}
-                        additionalNodesInfo={props.additionalNodesInfo}
+                        additionalNodesProps={props.additionalNodesProps}
                         className={b('header')}
                     />
 

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

@@ -32,12 +32,12 @@ function generateId({type, id}: {type: 'pdisk' | 'vdisk'; id: string}) {
 interface NodeStructureProps {
     nodeId: string;
     className?: string;
-    additionalNodesInfo?: AdditionalNodesProps;
+    additionalNodesProps?: AdditionalNodesProps;
 }
 
 const autofetcher = new AutoFetcher();
 
-function NodeStructure({nodeId, className, additionalNodesInfo}: NodeStructureProps) {
+function NodeStructure({nodeId, className, additionalNodesProps}: NodeStructureProps) {
     const dispatch = useDispatch();
 
     const nodeStructure = useTypedSelector(selectNodeStructure);
@@ -46,10 +46,10 @@ function NodeStructure({nodeId, className, additionalNodesInfo}: NodeStructurePr
     const nodeData = useTypedSelector((state) => state.node?.data?.SystemStateInfo?.[0]);
 
     const nodeHref = useMemo(() => {
-        return additionalNodesInfo?.getNodeRef
-            ? additionalNodesInfo.getNodeRef(nodeData)
+        return additionalNodesProps?.getNodeRef
+            ? additionalNodesProps.getNodeRef(nodeData)
             : undefined;
-    }, [nodeData, additionalNodesInfo]);
+    }, [nodeData, additionalNodesProps]);
 
     const {pdiskId: pdiskIdFromUrl, vdiskId: vdiskIdFromUrl} = url.parse(
         window.location.href,

package/dist/containers/Nodes/Nodes.tsx

@@ -54,10 +54,10 @@ const b = cn('ydb-nodes');
 interface NodesProps {
     path?: string;
     type?: EPathType;
-    additionalNodesInfo?: AdditionalNodesProps;
+    additionalNodesProps?: AdditionalNodesProps;
 }
 
-export const Nodes = ({path, type, additionalNodesInfo = {}}: NodesProps) => {
+export const Nodes = ({path, type, additionalNodesProps = {}}: NodesProps) => {
     const dispatch = useDispatch();
 
     const isClusterNodes = !path;
@@ -154,7 +154,7 @@ export const Nodes = ({path, type, additionalNodesInfo = {}}: NodesProps) => {
 
     const renderTable = () => {
         const columns = getNodesColumns({
-            getNodeRef: additionalNodesInfo.getNodeRef,
+            getNodeRef: additionalNodesProps.getNodeRef,
         });
 
         if (nodes && nodes.length === 0) {

package/dist/containers/Storage/Storage.tsx

@@ -60,12 +60,12 @@ import './Storage.scss';
 const b = cn('global-storage');
 
 interface StorageProps {
-    additionalNodesInfo?: AdditionalNodesProps;
+    additionalNodesProps?: AdditionalNodesProps;
     tenant?: string;
     nodeId?: string;
 }
 
-export const Storage = ({additionalNodesInfo, tenant, nodeId}: StorageProps) => {
+export const Storage = ({additionalNodesProps, tenant, nodeId}: StorageProps) => {
     const dispatch = useDispatch();
 
     const {autorefresh} = useTypedSelector((state) => state.schema);
@@ -189,7 +189,7 @@ export const Storage = ({additionalNodesInfo, tenant, nodeId}: StorageProps) =>
                         data={storageNodes}
                         tableSettings={DEFAULT_TABLE_SETTINGS}
                         onShowAll={handleShowAllNodes}
-                        additionalNodesInfo={additionalNodesInfo}
+                        additionalNodesProps={additionalNodesProps}
                         sort={nodesSort}
                         handleSort={handleNodesSort}
                     />

package/dist/containers/Storage/StorageNodes/StorageNodes.tsx

@@ -40,7 +40,7 @@ interface StorageNodesProps {
     visibleEntities: VisibleEntities;
     nodesUptimeFilter: keyof typeof NodesUptimeFilterValues;
     onShowAll?: VoidFunction;
-    additionalNodesInfo?: AdditionalNodesProps;
+    additionalNodesProps?: AdditionalNodesProps;
     sort?: SortOrder;
     handleSort?: HandleSort;
 }
@@ -63,11 +63,11 @@ export function StorageNodes({
     visibleEntities,
     onShowAll,
     nodesUptimeFilter,
-    additionalNodesInfo,
+    additionalNodesProps,
     sort,
     handleSort,
 }: StorageNodesProps) {
-    const getNodeRef = additionalNodesInfo?.getNodeRef;
+    const getNodeRef = additionalNodesProps?.getNodeRef;
 
     const rawColumns: Column<PreparedStorageNode>[] = [
         {

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

@@ -1,6 +1,3 @@
-$section-title-margin: 20px;
-$section-title-line-height: 24px;
-
 .kv-detailed-overview {
     display: flex;
 
@@ -10,8 +7,7 @@ $section-title-line-height: 24px;
 
     &__section {
         display: flex;
-        overflow-x: hidden;
-        flex: 0 0 calc(50% - 10px);
+        flex: 1 0 calc(50% - 10px);
         flex-direction: column;
 
         min-width: 300px;

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

@@ -7,9 +7,12 @@ import {Button, Modal} from '@gravity-ui/uikit';
 import type {EPathType} from '../../../../types/api/schema';
 import type {AdditionalTenantsProps} from '../../../../types/additionalProps';
 import {Icon} from '../../../../components/Icon';
+import {useSetting} from '../../../../utils/hooks';
+import {ENABLE_NEW_TENANT_DIAGNOSTICS_DESIGN} from '../../../../utils/constants';
 import Overview from '../Overview/Overview';
-import {Healthcheck} from '../Healthcheck';
+import {Healthcheck} from '../OldHealthcheck';
 import {TenantOverview} from '../TenantOverview/TenantOverview';
+import {OldTenantOverview} from '../TenantOverview/OldTenantOverview';
 
 import './DetailedOverview.scss';
 
@@ -17,16 +20,20 @@ interface DetailedOverviewProps {
     type?: EPathType;
     className?: string;
     tenantName: string;
-    additionalTenantInfo?: AdditionalTenantsProps;
+    additionalTenantProps?: AdditionalTenantsProps;
 }
 
 const b = cn('kv-detailed-overview');
 
 function DetailedOverview(props: DetailedOverviewProps) {
+    const {type, tenantName, additionalTenantProps} = props;
+
     const [isModalVisible, setIsModalVisible] = useState(false);
 
     const {currentSchemaPath} = useSelector((state: any) => state.schema);
 
+    const [newTenantDiagnostics] = useSetting(ENABLE_NEW_TENANT_DIAGNOSTICS_DESIGN);
+
     const openModalHandler = () => {
         setIsModalVisible(true);
     };
@@ -51,27 +58,43 @@ function DetailedOverview(props: DetailedOverviewProps) {
         );
     };
 
+    const renderTenantOverview = () => {
+        if (newTenantDiagnostics) {
+            return (
+                <div className={b('section')}>
+                    <TenantOverview
+                        tenantName={tenantName}
+                        additionalTenantProps={additionalTenantProps}
+                    />
+                </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 {type, tenantName, additionalTenantInfo} = props;
         const isTenant = tenantName === currentSchemaPath;
         return (
             <div className={b()}>
                 {isTenant ? (
-                    <>
-                        <div className={b('section')}>
-                            <TenantOverview
-                                tenantName={tenantName}
-                                additionalTenantInfo={additionalTenantInfo}
-                            />
-                        </div>
-                        <div className={b('section')}>
-                            <Healthcheck
-                                tenant={tenantName}
-                                preview={true}
-                                showMoreHandler={openModalHandler}
-                            />
-                        </div>
-                    </>
+                    renderTenantOverview()
                 ) : (
                     <Overview type={type} tenantName={tenantName} />
                 )}

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

@@ -42,8 +42,8 @@ import './Diagnostics.scss';
 
 interface DiagnosticsProps {
     type?: EPathType;
-    additionalTenantInfo?: AdditionalTenantsProps;
-    additionalNodesInfo?: AdditionalNodesProps;
+    additionalTenantProps?: AdditionalTenantsProps;
+    additionalNodesProps?: AdditionalNodesProps;
 }
 
 const b = cn('kv-tenant-diagnostics');
@@ -108,7 +108,7 @@ function Diagnostics(props: DiagnosticsProps) {
                     <DetailedOverview
                         type={type}
                         tenantName={tenantNameString}
-                        additionalTenantInfo={props.additionalTenantInfo}
+                        additionalTenantProps={props.additionalTenantProps}
                     />
                 );
             }
@@ -123,7 +123,7 @@ function Diagnostics(props: DiagnosticsProps) {
                     <Nodes
                         path={currentSchemaPath}
                         type={type}
-                        additionalNodesInfo={props.additionalNodesInfo}
+                        additionalNodesProps={props.additionalNodesProps}
                     />
                 );
             }

package/dist/containers/Tenant/Diagnostics/{Healthcheck → OldHealthcheck}/Details/Details.tsx

@@ -8,11 +8,11 @@ import type {IResponseError} from '../../../../../types/api/error';
 import type {IIssuesTree} from '../../../../../types/store/healthcheck';
 import {ResponseError} from '../../../../../components/Errors/ResponseError';
 
-import IssueTree from '../IssuesViewer/IssueTree';
+import IssueTree from '../../TenantOverview/Healthcheck/IssuesViewer/IssueTree';
 
-import i18n from '../i18n';
+import i18n from '../../TenantOverview/Healthcheck/i18n';
 
-const b = cn('healthcheck');
+const b = cn('old-healthcheck');
 
 interface DetailsProps {
     issueTrees?: IIssuesTree[];

package/dist/containers/Tenant/Diagnostics/{Healthcheck → OldHealthcheck}/Healthcheck.scss

@@ -1,8 +1,7 @@
-@use '../DetailedOverview/DetailedOverview.scss' as detailedOverview;
 @import '../../../../styles/mixins.scss';
 @import '@gravity-ui/uikit/styles/mixins.scss';
 
-.healthcheck {
+.old-healthcheck {
     display: flex;
 
     &_expanded {
@@ -12,6 +11,7 @@
     }
 
     &__details {
+        width: 860px;
         padding: 25px 20px 20px;
     }
 
@@ -27,11 +27,6 @@
         max-height: 70vh;
     }
 
-    &__loader {
-        display: flex;
-        justify-content: center;
-    }
-
     &__message-container {
         padding: 15px 0;
     }
@@ -53,34 +48,52 @@
         margin-left: 10px;
     }
 
-    &__status-wrapper {
-        display: flex;
+    &__preview {
+        width: 206px;
+        padding: 16px;
+        padding-bottom: 28px;
 
-        margin-bottom: detailedOverview.$section-title-margin;
+        border: 1px solid var(--yc-color-line-generic);
+        border-radius: 8px;
+        background-color: transparent;
+    }
+
+    &__preview-header {
+        margin-bottom: var(--diagnostics-section-title-margin);
         gap: 8px;
     }
 
     &__preview-title {
         font-weight: 600;
-        line-height: detailedOverview.$section-title-line-height;
+        @include lead-typography();
     }
 
     &__preview-content {
         line-height: 24px;
     }
 
+    &__preview-title-wrapper {
+        display: flex;
+        align-items: center;
+
+        margin-bottom: 4px;
+
+        gap: 8px;
+    }
+
     &__issues-statistics {
         display: flex;
         flex-wrap: wrap;
         align-items: center;
 
-        margin: 10px 0;
+        margin: 8px 0;
 
-        column-gap: 26px;
-        row-gap: 16px;
+        gap: 10px;
     }
 
     &__self-check-status-indicator {
+        display: inline-block;
+
         padding: 0 8px;
 
         font-size: 13px;

package/dist/containers/Tenant/Diagnostics/{Healthcheck → OldHealthcheck}/Healthcheck.tsx

@@ -12,7 +12,6 @@ import {
     selectIssuesTrees,
     setDataWasNotLoaded,
 } from '../../../../store/reducers/healthcheckInfo';
-import {DiagnosticCard} from '../../../../components/DiagnosticCard/DiagnosticCard';
 
 import {Details} from './Details';
 import {Preview} from './Preview';
@@ -26,7 +25,7 @@ interface HealthcheckProps {
     showMoreHandler?: VoidFunction;
 }
 
-const b = cn('healthcheck');
+const b = cn('old-healthcheck');
 
 export const Healthcheck = (props: HealthcheckProps) => {
     const {tenant, preview, fetchData = true, showMoreHandler} = props;
@@ -34,12 +33,12 @@ export const Healthcheck = (props: HealthcheckProps) => {
     const dispatch = useDispatch();
 
     const {data, loading, wasLoaded, error} = useTypedSelector((state) => state.healthcheckInfo);
-    const selfCheckResult = data?.self_check_result || SelfCheckResult.UNSPECIFIED;
-
     const issuesStatistics = useTypedSelector(selectIssuesStatistics);
     const issueTrees = useTypedSelector(selectIssuesTrees);
     const {autorefresh} = useTypedSelector((state) => state.schema);
 
+    const selfCheckResult = data?.self_check_result || SelfCheckResult.UNSPECIFIED;
+
     const fetchHealthcheck = useCallback(
         (isBackground = true) => {
             if (!isBackground) {
@@ -64,11 +63,12 @@ export const Healthcheck = (props: HealthcheckProps) => {
     const renderContent = () => {
         if (loading && !wasLoaded) {
             return (
-                <DiagnosticCard className={b('loader')}>
+                <div className={b('old-preview', {loader: true})}>
                     <Loader size="m" />
-                </DiagnosticCard>
+                </div>
             );
         }
+
         return preview ? (
             <Preview
                 issuesStatistics={issuesStatistics}