ydb-embedded-ui 3.3.2 → 3.3.4

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## [3.3.4](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.3.3...v3.3.4) (2023-02-16)
+
+
+### Bug Fixes
+
+* **OverloadedShards:** rename to top shards ([ffa4f27](https://github.com/ydb-platform/ydb-embedded-ui/commit/ffa4f27f2cf0a5e12b2800c81bf61b1d3c25912c))
+* **StorageGroups:** display Erasure ([4a7ebc0](https://github.com/ydb-platform/ydb-embedded-ui/commit/4a7ebc08b87fe75af83df70a38ebd486d64d6d4e))
+* **TopShards:** switch between history and immediate data ([eeb9bb0](https://github.com/ydb-platform/ydb-embedded-ui/commit/eeb9bb0911b9e889b633558c9d3c13f986f72bfe))
+
+## [3.3.3](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.3.2...v3.3.3) (2023-02-08)
+
+
+### Bug Fixes
+
+* **Auth:** add a step in history for auth form ([c72d06e](https://github.com/ydb-platform/ydb-embedded-ui/commit/c72d06ecacdba47cac59bd705c1185e1ddf0b20d))
+* format dates with date-utils ([948598b](https://github.com/ydb-platform/ydb-embedded-ui/commit/948598b83c9bdd09268d128e15a42d5a6e0c15cc))
+* **InfoViewer:** add prop renderEmptyState ([44fe28f](https://github.com/ydb-platform/ydb-embedded-ui/commit/44fe28f72ea299b3b5d9b5a33a0a0130d471f7dd))
+* minor fixes in Nodes and Tenants tables ([8dca43a](https://github.com/ydb-platform/ydb-embedded-ui/commit/8dca43a482b0da31dbc618875b416dcfcedac036))
+* **OverloadedShards:** display IntervalEnd ([c7cbd72](https://github.com/ydb-platform/ydb-embedded-ui/commit/c7cbd7215eaf60601941410acb13ffb25d151eb9))
+* **Overview:** display error statusText on schema error ([99b030f](https://github.com/ydb-platform/ydb-embedded-ui/commit/99b030f90e6044e98a151e5128603835c84e1b4e))
+* **PDisk:** calculate severity based on usage ([64c6890](https://github.com/ydb-platform/ydb-embedded-ui/commit/64c6890ac6d5a77aef73da7dfc7f1eaff8a72441))
+* **QueryEditor:** make client request timeout 9 min ([44528a8](https://github.com/ydb-platform/ydb-embedded-ui/commit/44528a865b039003cda4c7b1b1367840da015d09))
+* **QueryEditor:** result status for aborted connection ([4b0d84b](https://github.com/ydb-platform/ydb-embedded-ui/commit/4b0d84b550deb41a140d4a3d215e52084507a558))
+* **QueryResult:** output client error messages ([deef610](https://github.com/ydb-platform/ydb-embedded-ui/commit/deef6103f4d08825837520cab9e8ae5b8c7fd496))
+* **Storage:** replace hasOwn to hasOwnProperty ([2452310](https://github.com/ydb-platform/ydb-embedded-ui/commit/2452310ce8e953d7a9ee4bbaa2bd466396aa0131))
+* **TopQueries:** display IntervalEnd ([e5b2b07](https://github.com/ydb-platform/ydb-embedded-ui/commit/e5b2b07cf1e686c20817dcdc1ae32e0c8912a21a))
+
 ## [3.3.2](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.3.1...v3.3.2) (2023-01-31)
 
 

package/dist/components/Errors/ResponseError/ResponseError.tsx

@@ -0,0 +1,17 @@
+import type {IResponseError} from '../../../types/api/error';
+
+import i18n from '../i18n';
+
+interface ResponseErrorProps {
+    error: IResponseError;
+    className?: string;
+    defaultMessage?: string;
+}
+
+export const ResponseError = ({
+    error,
+    className,
+    defaultMessage = i18n('responseError.defaultMessage'),
+}: ResponseErrorProps) => {
+    return <div className={`error ${className}`}>{error.statusText || defaultMessage}</div>;
+};

package/dist/components/Errors/ResponseError/index.ts

@@ -0,0 +1 @@
+export * from './ResponseError';

package/dist/components/Errors/i18n/en.json

@@ -1,4 +1,5 @@
 {
   "403.title": "Access denied",
-  "403.description": "You don’t have the necessary roles to view this page."
+  "403.description": "You don’t have the necessary roles to view this page.",
+  "responseError.defaultMessage": "Response error"
 }

package/dist/components/Errors/i18n/ru.json

@@ -1,4 +1,5 @@
 {
   "403.title": "Доступ запрещен",
-  "403.description": "У вас недостаточно прав для просмотра данной страницы."
+  "403.description": "У вас недостаточно прав для просмотра данной страницы.",
+  "responseError.defaultMessage": "Ошибка запроса"
 }

package/dist/components/FullGroupViewer/FullGroupViewer.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'bem-cn-lite';
 import PropTypes from 'prop-types';
 
-import DataTable from '@yandex-cloud/react-data-table';
+import DataTable from '@gravity-ui/react-data-table';
 
 import InfoViewer from '../InfoViewer/InfoViewer';
 import EntityStatus from '../EntityStatus/EntityStatus';

package/dist/components/InfoViewer/InfoViewer.scss

@@ -64,7 +64,7 @@
     &__value {
         display: flex;
 
-        min-width: 120px;
+        min-width: 130px;
 
         word-break: break-all;
     }

package/dist/components/InfoViewer/InfoViewer.tsx

@@ -15,6 +15,7 @@ interface InfoViewerProps {
     size?: 's';
     className?: string;
     multilineLabels?: boolean;
+    renderEmptyState?: (props?: Pick<InfoViewerProps, 'title' | 'size'>) => ReactNode;
 }
 
 const b = cn('info-viewer');
@@ -26,28 +27,35 @@ const InfoViewer = ({
     size,
     className,
     multilineLabels,
-}: InfoViewerProps) => (
-    <div className={b({size}, className)}>
-        {title && <div className={b('title')}>{title}</div>}
-        {info && info.length > 0 ? (
-            <div className={b('items')}>
-                {info.map((data, infoIndex) => (
-                    <div className={b('row')} key={data.label + infoIndex}>
-                        <div className={b('label')}>
-                            <div className={b('label-text', {multiline: multilineLabels})}>
-                                {data.label}
+    renderEmptyState,
+}: InfoViewerProps) => {
+    if ((!info || !info.length) && renderEmptyState) {
+        return <>{renderEmptyState({title, size})}</>;
+    }
+
+    return (
+        <div className={b({size}, className)}>
+            {title && <div className={b('title')}>{title}</div>}
+            {info && info.length > 0 ? (
+                <div className={b('items')}>
+                    {info.map((data, infoIndex) => (
+                        <div className={b('row')} key={data.label + infoIndex}>
+                            <div className={b('label')}>
+                                <div className={b('label-text', {multiline: multilineLabels})}>
+                                    {data.label}
+                                </div>
+                                {dots && <div className={b('dots')} />}
                             </div>
-                            {dots && <div className={b('dots')} />}
-                        </div>
 
-                        <div className={b('value')}>{data.value}</div>
-                    </div>
-                ))}
-            </div>
-        ) : (
-            <>No {title} data</>
-        )}
-    </div>
-);
+                            <div className={b('value')}>{data.value}</div>
+                        </div>
+                    ))}
+                </div>
+            ) : (
+                <>No {title} data</>
+            )}
+        </div>
+    );
+};
 
 export default InfoViewer;

package/dist/components/InfoViewer/formatters/index.ts

@@ -3,3 +3,4 @@ export * from './schema';
 export * from './topicStats';
 export * from './pqGroup';
 export * from './cdcStream';
+export * from './table';

package/dist/components/InfoViewer/formatters/table.ts

@@ -0,0 +1,40 @@
+import type {TFollowerGroup, TPartitionConfig, TTableStats} from '../../../types/api/schema';
+import type {TMetrics} from '../../../types/api/tenant';
+import {formatCPU, formatBytes, formatNumber, formatBps, formatDateTime} from '../../../utils';
+
+import {createInfoFormatter} from '../utils';
+
+export const formatTabletMetricsItem = createInfoFormatter<TMetrics>({
+    values: {
+        CPU: formatCPU,
+        Memory: formatBytes,
+        Storage: formatBytes,
+        Network: formatBps,
+        ReadThroughput: formatBps,
+        WriteThroughput: formatBps,
+    },
+    defaultValueFormatter: formatNumber,
+});
+
+export const formatFollowerGroupItem = createInfoFormatter<TFollowerGroup>({
+    values: {
+        FollowerCount: formatNumber,
+    },
+});
+
+export const formatPartitionConfigItem = createInfoFormatter<TPartitionConfig>({
+    values: {
+        FollowerCount: formatNumber,
+        CrossDataCenterFollowerCount: formatNumber,
+    },
+});
+
+export const formatTableStatsItem = createInfoFormatter<TTableStats>({
+    values: {
+        DataSize: formatBytes,
+        IndexSize: formatBytes,
+        LastAccessTime: formatDateTime,
+        LastUpdateTime: formatDateTime,
+    },
+    defaultValueFormatter: formatNumber,
+});

package/dist/components/QueryExecutionStatus/QueryExecutionStatus.tsx

@@ -1,19 +1,32 @@
+import type {ReactNode} from 'react';
+import type {AxiosError} from 'axios';
 import cn from 'bem-cn-lite';
 
+import {Icon as UiKitIcon} from '@gravity-ui/uikit';
+
 import Icon from '../Icon/Icon';
 
+import questionIcon from '../../assets/icons/question.svg';
+
 import './QueryExecutionStatus.scss';
 
 const b = cn('kv-query-execution-status');
 
 interface QueryExecutionStatusProps {
     className?: string;
-    hasError?: boolean;
+    error?: AxiosError | Record<string, any>;
 }
 
-function QueryExecutionStatus({className, hasError}: QueryExecutionStatusProps) {
-    return hasError === undefined ? null : (
-        <div className={b(null, className)}>
+export const QueryExecutionStatus = ({className, error}: QueryExecutionStatusProps) => {
+    let icon: ReactNode;
+    let label: string;
+
+    if (error?.code === 'ECONNABORTED') {
+        icon = <UiKitIcon data={questionIcon} size={16} />;
+        label = 'Connection aborted';
+    } else {
+        const hasError = Boolean(error);
+        icon = (
             <Icon
                 name={hasError ? 'failure' : 'success'}
                 viewBox={hasError ? '0 0 512 512' : '0 0 16 16'}
@@ -21,9 +34,14 @@ function QueryExecutionStatus({className, hasError}: QueryExecutionStatusProps)
                 height={16}
                 className={b('result-status-icon', {error: hasError})}
             />
-            {hasError ? 'Failed' : 'Completed'}
+        );
+        label = hasError ? 'Failed' : 'Completed';
+    }
+
+    return (
+        <div className={b(null, className)}>
+            {icon}
+            {label}
         </div>
     );
-}
-
-export default QueryExecutionStatus;
+};

package/dist/components/QueryExecutionStatus/index.ts

@@ -0,0 +1 @@
+export * from './QueryExecutionStatus';

package/dist/components/QueryResultTable/QueryResultTable.tsx

@@ -1,8 +1,8 @@
 import {useMemo} from 'react';
 import cn from 'bem-cn-lite';
 
-import DataTable from '@yandex-cloud/react-data-table';
-import type {Column, DataTableProps, Settings} from '@yandex-cloud/react-data-table';
+import DataTable from '@gravity-ui/react-data-table';
+import type {Column, DataTableProps, Settings} from '@gravity-ui/react-data-table';
 
 import type {ColumnType, KeyValueRow} from '../../types/api/query';
 import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';

package/dist/containers/App/Content.js

@@ -79,11 +79,18 @@ function ContentWrapper(props) {
         <HistoryContext.Consumer>
             {(history) => (
                 <Router history={history}>
-                    <ThemeProvider theme={theme}>
-                        <div className={!singleClusterMode ? b() : b({embedded: true})}>
-                            {isAuthenticated ? props.children : <Authentication />}
-                        </div>
-                    </ThemeProvider>
+                    <Switch>
+                        <Route path={routes.auth}>
+                            <Authentication closable />
+                        </Route>
+                        <Route>
+                            <ThemeProvider theme={theme}>
+                                <div className={b({embedded: singleClusterMode})}>
+                                    {isAuthenticated ? props.children : <Authentication />}
+                                </div>
+                            </ThemeProvider>
+                        </Route>
+                    </Switch>
                 </Router>
             )}
         </HistoryContext.Consumer>

package/dist/containers/AsideNavigation/AsideNavigation.tsx

@@ -23,7 +23,7 @@ import UserSettings from '../UserSettings/UserSettings';
 
 import routes, {createHref, CLUSTER_PAGES} from '../../routes';
 
-import {logout, setIsNotAuthenticated} from '../../store/reducers/authentication';
+import {logout} from '../../store/reducers/authentication';
 import {getSettingValue, setSettingValue} from '../../store/reducers/settings';
 
 import {ASIDE_HEADER_COMPACT_KEY} from '../../utils/constants';
@@ -43,10 +43,15 @@ interface MenuItem {
 interface YbdInternalUserProps {
     ydbUser?: string;
     logout: VoidFunction;
-    setIsNotAuthenticated: VoidFunction;
 }
 
-function YbdInternalUser({ydbUser, logout, setIsNotAuthenticated}: YbdInternalUserProps) {
+function YbdInternalUser({ydbUser, logout}: YbdInternalUserProps) {
+    const history = useHistory();
+
+    const handleLoginClick = () => {
+        history.push(createHref(routes.auth, undefined, {returnUrl: encodeURI(location.href)}));
+    };
+
     return (
         <div className={b('internal-user')}>
             <div className={b('user-info-wrapper')}>
@@ -58,7 +63,7 @@ function YbdInternalUser({ydbUser, logout, setIsNotAuthenticated}: YbdInternalUs
                     <Icon data={signOutIcon} size={16} />
                 </Button>
             ) : (
-                <Button view="flat-secondary" onClick={setIsNotAuthenticated} title="login">
+                <Button view="flat-secondary" title="login" onClick={handleLoginClick}>
                     <Icon data={signInIcon} size={16} />
                 </Button>
             )}
@@ -71,7 +76,6 @@ interface YdbUserDropdownProps {
     ydbUser: {
         login?: string;
         logout: VoidFunction;
-        setIsNotAuthenticated: VoidFunction;
     };
     popupAnchor: React.RefObject<HTMLDivElement>;
 }
@@ -96,11 +100,7 @@ function YdbUserDropdown({isCompact, popupAnchor, ydbUser}: YdbUserDropdownProps
             onClosePopup={() => setIsUserDropdownVisible(false)}
             renderPopupContent={() => (
                 <div className={b('ydb-user-wrapper')}>
-                    <YbdInternalUser
-                        ydbUser={ydbUser.login}
-                        logout={ydbUser.logout}
-                        setIsNotAuthenticated={ydbUser.setIsNotAuthenticated}
-                    />
+                    <YbdInternalUser ydbUser={ydbUser.login} logout={ydbUser.logout} />
                 </div>
             )}
         />
@@ -112,7 +112,6 @@ interface AsideNavigationProps {
     ydbUser: string;
     compact: boolean;
     logout: VoidFunction;
-    setIsNotAuthenticated: VoidFunction;
     setSettingValue: (name: string, value: string) => void;
 }
 
@@ -260,7 +259,6 @@ function AsideNavigation(props: AsideNavigationProps) {
                             ydbUser={{
                                 login: props.ydbUser,
                                 logout: props.logout,
-                                setIsNotAuthenticated: props.setIsNotAuthenticated,
                             }}
                         />
                     </React.Fragment>
@@ -291,7 +289,6 @@ const mapStateToProps = (state: any) => {
 
 const mapDispatchToProps = {
     logout,
-    setIsNotAuthenticated,
     setSettingValue,
 };
 

package/dist/containers/Authentication/Authentication.scss

@@ -83,4 +83,10 @@
     &__show-password-button {
         margin-left: 4px;
     }
+
+    &__close {
+        position: absolute;
+        top: 40px;
+        right: 40px;
+    }
 }

package/dist/containers/Authentication/Authentication.tsx

@@ -1,19 +1,33 @@
 import {KeyboardEvent, useEffect, useState} from 'react';
+import {useDispatch} from 'react-redux';
+import {useHistory} from 'react-router';
 import cn from 'bem-cn-lite';
-import {connect} from 'react-redux';
+
 import {Button, TextInput, Icon, Link as ExternalLink} from '@gravity-ui/uikit';
-//@ts-ignore
+
 import {authenticate} from '../../store/reducers/authentication';
+import {useTypedSelector} from '../../utils/hooks';
 
 import ydbLogoIcon from '../../assets/icons/ydb.svg';
 import showIcon from '../../assets/icons/show.svg';
 import hideIcon from '../../assets/icons/hide.svg';
+import closeIcon from '../../assets/icons/close.svg';
 
 import './Authentication.scss';
 
 const b = cn('authentication');
 
-function Authentication({authenticate, error}: any) {
+interface AuthenticationProps {
+    returnUrl?: string;
+    closable?: boolean;
+}
+
+function Authentication({returnUrl, closable = false}: AuthenticationProps) {
+    const dispatch = useDispatch();
+    const history = useHistory();
+
+    const {error} = useTypedSelector((state) => state.authentication);
+
     const [login, setLogin] = useState('');
     const [pass, setPass] = useState('');
     const [loginError, setLoginError] = useState('');
@@ -40,7 +54,13 @@ function Authentication({authenticate, error}: any) {
     };
 
     const onLoginClick = () => {
-        authenticate(login, pass);
+        // @ts-expect-error
+        // typed dispatch required, remove error expectation after adding it
+        dispatch(authenticate(login, pass)).then(() => {
+            if (returnUrl) {
+                history.replace(decodeURI(returnUrl));
+            }
+        });
     };
 
     const onEnterClick = (e: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
@@ -49,6 +69,10 @@ function Authentication({authenticate, error}: any) {
         }
     };
 
+    const onClose = () => {
+        history.go(-1);
+    };
+
     const onTogglePasswordVisibility = () => {
         setShowPassword((prev) => !prev);
     };
@@ -106,18 +130,13 @@ function Authentication({authenticate, error}: any) {
                     Sign in
                 </Button>
             </form>
+            {closable && history.length > 1 && (
+                <Button onClick={onClose} className={b('close')}>
+                    <Icon data={closeIcon} size={24} />
+                </Button>
+            )}
         </section>
     );
 }
 
-function mapStateToProps(state: any) {
-    return {
-        error: state.authentication.error,
-    };
-}
-
-const mapDispatchToProps = {
-    authenticate,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(Authentication);
+export default Authentication;

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

@@ -4,7 +4,7 @@ import _ from 'lodash';
 
 import {ArrowToggle, Button, Popover} from '@gravity-ui/uikit';
 
-import DataTable, {Column, Settings} from '@yandex-cloud/react-data-table';
+import DataTable, {Column, Settings} from '@gravity-ui/react-data-table';
 
 import EntityStatus from '../../../components/EntityStatus/EntityStatus';
 import InfoViewer from '../../../components/InfoViewer/InfoViewer';
@@ -295,10 +295,7 @@ export function PDisk(props: PDiskProps) {
                         value={data.PDiskId}
                         className={b('pdisk-title-id')}
                     />
-                    <PDiskTitleBadge
-                        value={getPDiskType(data)}
-                        className={b('pdisk-title-type')}
-                    />
+                    <PDiskTitleBadge value={getPDiskType(data)} className={b('pdisk-title-type')} />
                     <ProgressViewer
                         value={data.TotalSize - data.AvailableSize}
                         capacity={data.TotalSize}
@@ -306,12 +303,12 @@ export function PDisk(props: PDiskProps) {
                         colorizeProgress={true}
                         className={b('pdisk-title-size')}
                     />
-                    <PDiskTitleBadge
-                        label="VDisks"
-                        value={data.vDisks.length}
-                    />
+                    <PDiskTitleBadge label="VDisks" value={data.vDisks.length} />
                 </div>
-                <Button onClick={unfolded ? onClosePDiskDetails : onOpenPDiskDetails} view="flat-secondary">
+                <Button
+                    onClick={unfolded ? onClosePDiskDetails : onOpenPDiskDetails}
+                    view="flat-secondary"
+                >
                     <ArrowToggle direction={unfolded ? 'top' : 'bottom'} />
                 </Button>
             </div>

package/dist/containers/Nodes/Nodes.tsx

@@ -2,7 +2,7 @@ import {useCallback, useEffect} from 'react';
 import cn from 'bem-cn-lite';
 import {useDispatch} from 'react-redux';
 
-import DataTable from '@yandex-cloud/react-data-table';
+import DataTable from '@gravity-ui/react-data-table';
 
 import {AccessDenied} from '../../components/Errors/403';
 import {Illustration} from '../../components/Illustration';

package/dist/containers/Nodes/getNodesColumns.tsx

@@ -1,5 +1,5 @@
 import cn from 'bem-cn-lite';
-import DataTable, {Column} from '@yandex-cloud/react-data-table';
+import DataTable, {Column} from '@gravity-ui/react-data-table';
 import {Button, Popover} from '@gravity-ui/uikit';
 
 import Icon from '../../components/Icon/Icon';
@@ -8,7 +8,7 @@ import PoolsGraph from '../../components/PoolsGraph/PoolsGraph';
 import ProgressViewer from '../../components/ProgressViewer/ProgressViewer';
 import {TabletsStatistic} from '../../components/TabletsStatistic';
 
-import {formatBytes} from '../../utils/index';
+import {formatBytesToGigabyte} from '../../utils/index';
 import {INodesPreparedEntity} from '../../types/store/nodes';
 import {showTooltip as externalShowTooltip} from '../../store/reducers/tooltip';
 
@@ -100,7 +100,7 @@ export function getNodesColumns({
             name: 'Uptime',
             header: 'Uptime',
             sortAccessor: ({StartTime}) => StartTime && -StartTime,
-            align: DataTable.LEFT,
+            align: DataTable.RIGHT,
             width: '110px',
         },
         {
@@ -110,7 +110,7 @@ export function getNodesColumns({
             defaultOrder: DataTable.DESCENDING,
             render: ({row}) => {
                 if (row.MemoryUsed) {
-                    return formatBytes(row.MemoryUsed);
+                    return formatBytesToGigabyte(row.MemoryUsed);
                 } else {
                     return '—';
                 }

package/dist/containers/Storage/PDisk/PDisk.tsx

@@ -17,7 +17,7 @@ import {DiskStateProgressBar, EDiskStateSeverity} from '../DiskStateProgressBar'
 import {PDiskPopup} from '../PDiskPopup';
 import {VDisk} from '../VDisk';
 
-import {NOT_AVAILABLE_SEVERITY} from '../utils';
+import {getUsageSeverityForPDisk, NOT_AVAILABLE_SEVERITY} from '../utils';
 
 import './PDisk.scss';
 
@@ -67,21 +67,6 @@ export const PDisk = ({nodeId, data: rawData = {}}: PDiskProps) => {
 
     const anchor = useRef(null);
 
-    useEffect(() => {
-        const newSeverity = getStateSeverity(data.State);
-        if (severity !== newSeverity) {
-            setSeverity(newSeverity);
-        }
-    }, [data.State]);
-
-    const showPopup = () => {
-        setIsPopupVisible(true);
-    };
-
-    const hidePopup = () => {
-        setIsPopupVisible(false);
-    };
-
     const pdiskAllocatedPercent = useMemo(() => {
         const {AvailableSize, TotalSize} = data;
 
@@ -94,6 +79,29 @@ export const PDisk = ({nodeId, data: rawData = {}}: PDiskProps) => {
             : undefined;
     }, [data]);
 
+    useEffect(() => {
+        const newStateSeverity = getStateSeverity(data.State);
+        const newSpaceSeverityFlag = getUsageSeverityForPDisk(pdiskAllocatedPercent || 0);
+
+        let newSeverity: number;
+
+        if (newStateSeverity === NOT_AVAILABLE_SEVERITY || !newSpaceSeverityFlag) {
+            newSeverity = newStateSeverity;
+        } else {
+            newSeverity = Math.max(newStateSeverity, EDiskStateSeverity[newSpaceSeverityFlag]);
+        }
+
+        setSeverity(newSeverity);
+    }, [data.State, pdiskAllocatedPercent]);
+
+    const showPopup = () => {
+        setIsPopupVisible(true);
+    };
+
+    const hidePopup = () => {
+        setIsPopupVisible(false);
+    };
+
     const renderVDisks = () => {
         if (!vdisks?.length) {
             return null;
@@ -108,7 +116,7 @@ export const PDisk = ({nodeId, data: rawData = {}}: PDiskProps) => {
                         style={{
                             // 1 is small enough for empty disks to be of the minimum width
                             // but if all of them are empty, `flex-grow: 1` would size them evenly
-                            flexGrow: (Number(vdisk.AllocatedSize) || 1),
+                            flexGrow: Number(vdisk.AllocatedSize) || 1,
                         }}
                     >
                         <VDisk data={vdisk} compact />