ydb-embedded-ui 4.5.0 → 4.5.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [4.5.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.5.0...v4.5.1) (2023-06-02)
+
+
+### Bug Fixes
+
+* **Tablet:** fetch data on action finish ([#405](https://github.com/ydb-platform/ydb-embedded-ui/issues/405)) ([f1d71c5](https://github.com/ydb-platform/ydb-embedded-ui/commit/f1d71c5af330a0a13246f8d87433e6bba1d3509a))
+
 ## [4.5.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.4.2...v4.5.0) (2023-06-01)
 
 

package/dist/components/CriticalActionDialog/CriticalActionDialog.tsx

@@ -13,6 +13,7 @@ interface CriticalActionDialogProps {
     text: string;
     onClose: VoidFunction;
     onConfirm: () => Promise<unknown>;
+    onConfirmActionFinish: VoidFunction;
 }
 
 export const CriticalActionDialog = ({
@@ -20,6 +21,7 @@ export const CriticalActionDialog = ({
     text,
     onClose,
     onConfirm,
+    onConfirmActionFinish,
 }: CriticalActionDialogProps) => {
     const [isLoading, setIsLoading] = useState(false);
 
@@ -28,6 +30,7 @@ export const CriticalActionDialog = ({
         setIsLoading(true);
 
         return onConfirm().then(() => {
+            onConfirmActionFinish();
             setIsLoading(false);
             onClose();
         });

package/dist/containers/Tablet/Tablet.scss

@@ -52,6 +52,10 @@
         text-transform: uppercase;
     }
 
+    &__loader {
+        width: 25px;
+    }
+
     .info-viewer__items {
         grid-template-columns: auto;
     }

package/dist/containers/Tablet/Tablet.tsx

@@ -108,9 +108,10 @@ export const Tablet = () => {
                             <Icon name="external" />
                         </a>
                         {Leader && <Tag text="Leader" type="blue" />}
+                        <span className={b('loader')}>{loading && <Loader size="s" />}</span>
                     </div>
                     <TabletInfo tablet={tablet} tenantPath={tenantPath} />
-                    <TabletControls tablet={tablet} />
+                    <TabletControls tablet={tablet} fetchData={fetchData} />
                 </div>
                 <div className={b('rigth-pane')}>
                     <TabletTable history={history} />

package/dist/containers/Tablet/TabletControls/TabletControls.tsx

@@ -17,18 +17,19 @@ type VisibleDialogType = EVisibleDialogType | null;
 
 interface TabletControlsProps {
     tablet: TTabletStateInfo;
+    fetchData: VoidFunction;
 }
 
-export const TabletControls = ({tablet}: TabletControlsProps) => {
+export const TabletControls = ({tablet, fetchData}: TabletControlsProps) => {
     const {TabletId, HiveId} = tablet;
 
     const [isDialogVisible, setIsDialogVisible] = useState(false);
     const [visibleDialogType, setVisibleDialogType] = useState<VisibleDialogType>(null);
-    const [isTabletActionsDisabled, setIsTabletActionsDisabled] = useState(false);
+    const [isTabletActionLoading, setIsTabletActionLoading] = useState(false);
 
     // Enable controls after data update
     useEffect(() => {
-        setIsTabletActionsDisabled(false);
+        setIsTabletActionLoading(false);
     }, [tablet]);
 
     const makeShowDialog = (type: VisibleDialogType) => () => {
@@ -46,15 +47,15 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
     };
 
     const _onKillClick = () => {
-        setIsTabletActionsDisabled(true);
+        setIsTabletActionLoading(true);
         return window.api.killTablet(TabletId);
     };
     const _onStopClick = () => {
-        setIsTabletActionsDisabled(true);
+        setIsTabletActionLoading(true);
         return window.api.stopTablet(TabletId, HiveId);
     };
     const _onResumeClick = () => {
-        setIsTabletActionsDisabled(true);
+        setIsTabletActionLoading(true);
         return window.api.resumeTablet(TabletId, HiveId);
     };
 
@@ -62,25 +63,11 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
         return HiveId && HiveId !== '0';
     };
 
-    const isDisabledResume = () => {
-        if (isTabletActionsDisabled) {
-            return true;
-        }
-
-        return tablet.State !== ETabletState.Stopped && tablet.State !== ETabletState.Dead;
-    };
-
-    const isDisabledKill = () => {
-        return isTabletActionsDisabled;
-    };
-
-    const isDisabledStop = () => {
-        if (isTabletActionsDisabled) {
-            return true;
-        }
+    const isDisabledResume =
+        tablet.State !== ETabletState.Stopped && tablet.State !== ETabletState.Dead;
 
-        return tablet.State === ETabletState.Stopped || tablet.State === ETabletState.Deleted;
-    };
+    const isDisabledStop =
+        tablet.State === ETabletState.Stopped || tablet.State === ETabletState.Deleted;
 
     const renderDialog = () => {
         if (!isDialogVisible) {
@@ -95,6 +82,7 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
                         text={i18n('dialog.kill')}
                         onClose={hideDialog}
                         onConfirm={_onKillClick}
+                        onConfirmActionFinish={fetchData}
                     />
                 );
             }
@@ -105,6 +93,7 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
                         text={i18n('dialog.stop')}
                         onClose={hideDialog}
                         onConfirm={_onStopClick}
+                        onConfirmActionFinish={fetchData}
                     />
                 );
             }
@@ -115,6 +104,7 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
                         text={i18n('dialog.resume')}
                         onClose={hideDialog}
                         onConfirm={_onResumeClick}
+                        onConfirmActionFinish={fetchData}
                     />
                 );
             }
@@ -128,7 +118,7 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
             <Button
                 onClick={showKillDialog}
                 view="action"
-                disabled={isDisabledKill()}
+                loading={isTabletActionLoading}
                 className={b('control')}
             >
                 {i18n('controls.kill')}
@@ -138,7 +128,8 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
                     <Button
                         onClick={showStopDialog}
                         view="action"
-                        disabled={isDisabledStop()}
+                        disabled={isDisabledStop}
+                        loading={!isDisabledStop && isTabletActionLoading}
                         className={b('control')}
                     >
                         {i18n('controls.stop')}
@@ -146,7 +137,8 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
                     <Button
                         onClick={showResumeDialog}
                         view="action"
-                        disabled={isDisabledResume()}
+                        disabled={isDisabledResume}
+                        loading={!isDisabledResume && isTabletActionLoading}
                         className={b('control')}
                     >
                         {i18n('controls.resume')}

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

@@ -3,13 +3,13 @@ import block from 'bem-cn-lite';
 import qs from 'qs';
 
 import type {IPreparedConsumerData} from '../../../../../types/store/topic';
+import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
 import {SpeedMultiMeter} from '../../../../../components/SpeedMultiMeter';
 import {InternalLink} from '../../../../../components/InternalLink';
 import {formatMsToUptime} from '../../../../../utils';
 import routes, {createHref} from '../../../../../routes';
 
 import {TenantTabsGroups} from '../../../TenantPages';
-import {GeneralPagesIds} from '../../DiagnosticsPages';
 
 import {
     CONSUMERS_COLUMNS_IDS,
@@ -42,7 +42,7 @@ export const columns: Column<IPreparedConsumerData>[] = [
                 <InternalLink
                     to={createHref(routes.tenant, undefined, {
                         ...queryParams,
-                        [TenantTabsGroups.generalTab]: GeneralPagesIds.partitions,
+                        [TenantTabsGroups.generalTab]: TENANT_DIAGNOSTICS_TABS_IDS.partitions,
                         selectedConsumer: row.name,
                     })}
                 >

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

@@ -7,37 +7,36 @@ import {useLocation} from 'react-router';
 
 import {Switch, Tabs} from '@gravity-ui/uikit';
 
+import type {EPathType} from '../../../types/api/schema';
+
+import {useTypedSelector} from '../../../utils/hooks';
+import routes, {createHref} from '../../../routes';
+import type {TenantDiagnosticsTab, TenantGeneralTab} from '../../../store/reducers/tenant/types';
+import {enableAutorefresh, disableAutorefresh} from '../../../store/reducers/schema';
+import {setTopLevelTab, setDiagnosticsTab} from '../../../store/reducers/tenant/tenant';
+import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../store/reducers/tenant/constants';
+
 import {Loader} from '../../../components/Loader';
 
-import {TopQueries} from './TopQueries';
-//@ts-ignore
-import DetailedOverview from './DetailedOverview/DetailedOverview';
-import {TopShards} from './TopShards';
-//@ts-ignore
-import Storage from '../../Storage/Storage';
-//@ts-ignore
-import Network from './Network/Network';
-//@ts-ignore
-import Describe from './Describe/Describe';
-//@ts-ignore
-import HotKeys from './HotKeys/HotKeys';
-//@ts-ignore
 import {Heatmap} from '../../Heatmap';
 import {Nodes} from '../../Nodes';
-//@ts-ignore
+import Storage from '../../Storage/Storage';
 import {Tablets} from '../../Tablets';
-import {Consumers} from './Consumers';
+
+import Describe from './Describe/Describe';
+import HotKeys from './HotKeys/HotKeys';
+import Network from './Network/Network';
 import {Partitions} from './Partitions/Partitions';
+import {Consumers} from './Consumers';
+import {TopQueries} from './TopQueries';
+import {TopShards} from './TopShards';
+import DetailedOverview from './DetailedOverview/DetailedOverview';
 
-import routes, {createHref} from '../../../routes';
-import type {EPathType} from '../../../types/api/schema';
-import {TenantGeneralTabsIds, TenantTabsGroups} from '../TenantPages';
-import {GeneralPagesIds, DATABASE_PAGES, getPagesByType} from './DiagnosticsPages';
-//@ts-ignore
-import {enableAutorefresh, disableAutorefresh} from '../../../store/reducers/schema';
-import {setTopLevelTab, setDiagnosticsTab} from '../../../store/reducers/tenant';
 import {isDatabaseEntityType} from '../utils/schema';
 
+import {TenantTabsGroups} from '../TenantPages';
+import {DATABASE_PAGES, getPagesByType} from './DiagnosticsPages';
+
 import './Diagnostics.scss';
 
 interface DiagnosticsProps {
@@ -51,8 +50,8 @@ const b = cn('kv-tenant-diagnostics');
 function Diagnostics(props: DiagnosticsProps) {
     const dispatch = useDispatch();
     const {currentSchemaPath, autorefresh} = useSelector((state: any) => state.schema);
-    const {diagnosticsTab = GeneralPagesIds.overview, wasLoaded} = useSelector(
-        (state: any) => state.tenant,
+    const {diagnosticsTab = TENANT_DIAGNOSTICS_TABS_IDS.overview, wasLoaded} = useTypedSelector(
+        (state) => state.tenant,
     );
 
     const location = useLocation();
@@ -73,7 +72,7 @@ function Diagnostics(props: DiagnosticsProps) {
         return getPagesByType(props.type);
     }, [props.type, isDatabase]);
 
-    const forwardToDiagnosticTab = (tab: GeneralPagesIds) => {
+    const forwardToDiagnosticTab = (tab: TenantDiagnosticsTab) => {
         dispatch(setDiagnosticsTab(tab));
     };
     const activeTab = useMemo(() => {
@@ -97,7 +96,7 @@ function Diagnostics(props: DiagnosticsProps) {
         }
     };
 
-    const forwardToGeneralTab = (tab: TenantGeneralTabsIds) => {
+    const forwardToGeneralTab = (tab: TenantGeneralTab) => {
         dispatch(setTopLevelTab(tab));
     };
 
@@ -107,7 +106,7 @@ function Diagnostics(props: DiagnosticsProps) {
         const tenantNameString = tenantName as string;
 
         switch (diagnosticsTab) {
-            case GeneralPagesIds.overview: {
+            case TENANT_DIAGNOSTICS_TABS_IDS.overview: {
                 return (
                     <DetailedOverview
                         type={type}
@@ -116,7 +115,7 @@ function Diagnostics(props: DiagnosticsProps) {
                     />
                 );
             }
-            case GeneralPagesIds.topQueries: {
+            case TENANT_DIAGNOSTICS_TABS_IDS.topQueries: {
                 return (
                     <TopQueries
                         path={tenantNameString}
@@ -125,10 +124,10 @@ function Diagnostics(props: DiagnosticsProps) {
                     />
                 );
             }
-            case GeneralPagesIds.topShards: {
+            case TENANT_DIAGNOSTICS_TABS_IDS.topShards: {
                 return <TopShards tenantPath={tenantNameString} type={type} />;
             }
-            case GeneralPagesIds.nodes: {
+            case TENANT_DIAGNOSTICS_TABS_IDS.nodes: {
                 return (
                     <Nodes
                         path={currentSchemaPath}
@@ -137,28 +136,28 @@ function Diagnostics(props: DiagnosticsProps) {
                     />
                 );
             }
-            case GeneralPagesIds.tablets: {
+            case TENANT_DIAGNOSTICS_TABS_IDS.tablets: {
                 return <Tablets path={currentSchemaPath} />;
             }
-            case GeneralPagesIds.storage: {
+            case TENANT_DIAGNOSTICS_TABS_IDS.storage: {
                 return <Storage tenant={tenantNameString} database={true} />;
             }
-            case GeneralPagesIds.network: {
+            case TENANT_DIAGNOSTICS_TABS_IDS.network: {
                 return <Network path={tenantNameString} />;
             }
-            case GeneralPagesIds.describe: {
+            case TENANT_DIAGNOSTICS_TABS_IDS.describe: {
                 return <Describe tenant={tenantNameString} type={type} />;
             }
-            case GeneralPagesIds.hotKeys: {
+            case TENANT_DIAGNOSTICS_TABS_IDS.hotKeys: {
                 return <HotKeys type={type} />;
             }
-            case GeneralPagesIds.graph: {
+            case TENANT_DIAGNOSTICS_TABS_IDS.graph: {
                 return <Heatmap path={currentSchemaPath} />;
             }
-            case GeneralPagesIds.consumers: {
+            case TENANT_DIAGNOSTICS_TABS_IDS.consumers: {
                 return <Consumers path={currentSchemaPath} type={type} />;
             }
-            case GeneralPagesIds.partitions: {
+            case TENANT_DIAGNOSTICS_TABS_IDS.partitions: {
                 return <Partitions path={currentSchemaPath} />;
             }
             default: {

package/dist/containers/Tenant/Diagnostics/DiagnosticsPages.ts

@@ -1,80 +1,67 @@
+import type {TenantDiagnosticsTab} from '../../../store/reducers/tenant/types';
+import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../store/reducers/tenant/constants';
 import {EPathType} from '../../../types/api/schema';
 
-export enum GeneralPagesIds {
-    'overview' = 'Overview',
-    'topQueries' = 'topQueries',
-    'topShards' = 'topShards',
-    'nodes' = 'Nodes',
-    'tablets' = 'Tablets',
-    'storage' = 'Storage',
-    'network' = 'Network',
-    'describe' = 'Describe',
-    'hotKeys' = 'hotKeys',
-    'graph' = 'graph',
-    'consumers' = 'consumers',
-    'partitions' = 'partitions',
-}
-
 type Page = {
-    id: GeneralPagesIds;
+    id: TenantDiagnosticsTab;
     title: string;
 };
 
 const overview = {
-    id: GeneralPagesIds.overview,
+    id: TENANT_DIAGNOSTICS_TABS_IDS.overview,
     title: 'Info',
 };
 
 const topQueries = {
-    id: GeneralPagesIds.topQueries,
+    id: TENANT_DIAGNOSTICS_TABS_IDS.topQueries,
     title: 'Top queries',
 };
 
 const topShards = {
-    id: GeneralPagesIds.topShards,
+    id: TENANT_DIAGNOSTICS_TABS_IDS.topShards,
     title: 'Top shards',
 };
 
 const nodes = {
-    id: GeneralPagesIds.nodes,
+    id: TENANT_DIAGNOSTICS_TABS_IDS.nodes,
     title: 'Nodes',
 };
 
 const tablets = {
-    id: GeneralPagesIds.tablets,
+    id: TENANT_DIAGNOSTICS_TABS_IDS.tablets,
     title: 'Tablets',
 };
 const storage = {
-    id: GeneralPagesIds.storage,
+    id: TENANT_DIAGNOSTICS_TABS_IDS.storage,
     title: 'Storage',
 };
 const network = {
-    id: GeneralPagesIds.network,
+    id: TENANT_DIAGNOSTICS_TABS_IDS.network,
     title: 'Network',
 };
 
 const describe = {
-    id: GeneralPagesIds.describe,
+    id: TENANT_DIAGNOSTICS_TABS_IDS.describe,
     title: 'Describe',
 };
 
 const hotKeys = {
-    id: GeneralPagesIds.hotKeys,
+    id: TENANT_DIAGNOSTICS_TABS_IDS.hotKeys,
     title: 'Hot keys',
 };
 
 const graph = {
-    id: GeneralPagesIds.graph,
+    id: TENANT_DIAGNOSTICS_TABS_IDS.graph,
     title: 'Graph',
 };
 
 const consumers = {
-    id: GeneralPagesIds.consumers,
+    id: TENANT_DIAGNOSTICS_TABS_IDS.consumers,
     title: 'Consumers',
 };
 
 const partitions = {
-    id: GeneralPagesIds.partitions,
+    id: TENANT_DIAGNOSTICS_TABS_IDS.partitions,
     title: 'Partitions',
 };
 

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.js

@@ -9,7 +9,7 @@ import InfoViewer from '../../../../components/InfoViewer/InfoViewer';
 import PoolUsage from '../../../../components/PoolUsage/PoolUsage';
 import {Tablet} from '../../../../components/Tablet';
 
-import {getTenantInfo} from '../../../../store/reducers/tenant';
+import {getTenantInfo} from '../../../../store/reducers/tenant/tenant';
 
 import {formatCPU} from '../../../../utils';
 import {bytesToGB} from '../../../../utils/utils';
@@ -191,7 +191,7 @@ class TenantOverview extends React.Component {
 }
 
 function mapStateToProps(state) {
-    const {tenant = {}, loading, data: {status} = {}} = state.tenant;
+    const {tenant = {}, loading, error: {status} = {}} = state.tenant;
     const {autorefresh} = state.schema;
 
     return {

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

@@ -22,7 +22,9 @@ import type {KeyValueRow} from '../../../../types/api/query';
 import type {EPathType} from '../../../../types/api/schema';
 import type {ITopQueriesFilters} from '../../../../types/store/executeTopQueries';
 import type {IQueryResult} from '../../../../types/store/query';
+import type {TenantGeneralTab} from '../../../../store/reducers/tenant/types';
 
+import {TENANT_GENERAL_TABS_IDS} from '../../../../store/reducers/tenant/constants';
 import {formatDateTime, formatNumber} from '../../../../utils';
 import {DEFAULT_TABLE_SETTINGS, HOUR_IN_SECONDS} from '../../../../utils/constants';
 import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
@@ -30,7 +32,7 @@ import {prepareQueryError} from '../../../../utils/query';
 import routes, {createHref} from '../../../../routes';
 
 import {isColumnEntityType} from '../../utils/schema';
-import {TenantGeneralTabsIds, TenantTabsGroups} from '../../TenantPages';
+import {TenantTabsGroups} from '../../TenantPages';
 
 import i18n from './i18n';
 import './TopQueries.scss';
@@ -86,7 +88,7 @@ const COLUMNS: Column<KeyValueRow>[] = [
 
 interface TopQueriesProps {
     path: string;
-    changeSchemaTab: (tab: TenantGeneralTabsIds) => void;
+    changeSchemaTab: (tab: TenantGeneralTab) => void;
     type?: EPathType;
 }
 
@@ -178,7 +180,7 @@ export const TopQueries = ({path, type}: TopQueriesProps) => {
 
             const queryPath = createHref(routes.tenant, undefined, {
                 ...queryParams,
-                [TenantTabsGroups.general]: TenantGeneralTabsIds.query,
+                [TenantTabsGroups.general]: TENANT_GENERAL_TABS_IDS.query,
             });
 
             history.push(queryPath);

package/dist/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx

@@ -5,12 +5,11 @@ import cn from 'bem-cn-lite';
 import {useThemeValue} from '@gravity-ui/uikit';
 
 import type {EPathType} from '../../../types/api/schema';
+import {TENANT_GENERAL_TABS_IDS} from '../../../store/reducers/tenant/constants';
 
 import QueryEditor from '../QueryEditor/QueryEditor';
 import Diagnostics from '../Diagnostics/Diagnostics';
 
-import {TenantGeneralTabsIds} from '../TenantPages';
-
 import './ObjectGeneral.scss';
 
 const b = cn('object-general');
@@ -35,7 +34,7 @@ function ObjectGeneral(props: ObjectGeneralProps) {
     const renderTabContent = () => {
         const {type, additionalTenantInfo, additionalNodesInfo} = props;
         switch (generalTab) {
-            case TenantGeneralTabsIds.query: {
+            case TENANT_GENERAL_TABS_IDS.query: {
                 return <QueryEditor path={tenantName as string} theme={theme} type={type} />;
             }
             default: {

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -35,7 +35,6 @@ import {
     DEFAULT_SIZE_TENANT_SUMMARY_KEY,
 } from '../../../utils/constants';
 import {
-    TenantGeneralTabsIds,
     TenantInfoTabsIds,
     TenantTabsGroups,
     TENANT_INFO_TABS,
@@ -48,7 +47,8 @@ import {
     PaneVisibilityToggleButtons,
 } from '../utils/paneVisibilityToggleHelpers';
 import {setShowPreview} from '../../../store/reducers/schema';
-import {setTopLevelTab} from '../../../store/reducers/tenant';
+import {setTopLevelTab} from '../../../store/reducers/tenant/tenant';
+import {TENANT_GENERAL_TABS_IDS} from '../../../store/reducers/tenant/constants';
 
 import './ObjectSummary.scss';
 
@@ -275,7 +275,7 @@ function ObjectSummary(props: ObjectSummaryProps) {
 
     const onOpenPreview = () => {
         dispatch(setShowPreview(true));
-        dispatch(setTopLevelTab(TenantGeneralTabsIds.query));
+        dispatch(setTopLevelTab(TENANT_GENERAL_TABS_IDS.query));
     };
 
     const renderCommonInfoControls = () => {

package/dist/containers/Tenant/Tenant.tsx

@@ -4,28 +4,27 @@ import cn from 'bem-cn-lite';
 import {useLocation} from 'react-router';
 import qs from 'qs';
 
-import {AccessDenied} from '../../components/Errors/403';
+import type {TEvDescribeSchemeResult} from '../../types/api/schema';
 
+import {DEFAULT_IS_TENANT_SUMMARY_COLLAPSED, DEFAULT_SIZE_TENANT_KEY} from '../../utils/constants';
+import {useTypedSelector} from '../../utils/hooks';
+import routes, {CLUSTER_PAGES, createHref} from '../../routes';
 import {setHeader} from '../../store/reducers/header';
+import {disableAutorefresh, getSchema, resetLoadingState} from '../../store/reducers/schema';
+import {getSchemaAcl} from '../../store/reducers/schemaAcl';
+import {getTenantInfo, clearTenant} from '../../store/reducers/tenant/tenant';
+
+import SplitPane from '../../components/SplitPane';
+import {AccessDenied} from '../../components/Errors/403';
+
 import ObjectGeneralTabs from './ObjectGeneralTabs/ObjectGeneralTabs';
 import ObjectSummary from './ObjectSummary/ObjectSummary';
 import ObjectGeneral from './ObjectGeneral/ObjectGeneral';
-//@ts-ignore
-import SplitPane from '../../components/SplitPane';
-//@ts-ignore
-import {DEFAULT_IS_TENANT_SUMMARY_COLLAPSED, DEFAULT_SIZE_TENANT_KEY} from '../../utils/constants';
-//@ts-ignore
-import {disableAutorefresh, getSchema, resetLoadingState} from '../../store/reducers/schema';
-//@ts-ignore
-import {getSchemaAcl} from '../../store/reducers/schemaAcl';
+
 import {
     PaneVisibilityActionTypes,
     paneVisibilityToggleReducerCreator,
 } from './utils/paneVisibilityToggleHelpers';
-//@ts-ignore
-import {getTenantInfo, clearTenant} from '../../store/reducers/tenant';
-import routes, {CLUSTER_PAGES, createHref} from '../../routes';
-import type {TEvDescribeSchemeResult} from '../../types/api/schema';
 
 import './Tenant.scss';
 
@@ -63,8 +62,8 @@ function Tenant(props: TenantProps) {
     const {PathType: currentPathType, PathSubType: currentPathSubType} =
         (currentItem as TEvDescribeSchemeResult).PathDescription?.Self || {};
 
-    const {data: {status: tenantStatus = 200} = {}} = useSelector((state: any) => state.tenant);
-    const {error: {status: schemaStatus = 200} = {}} = useSelector((state: any) => state.schema);
+    const {error: {status: tenantStatus = 200} = {}} = useTypedSelector((state) => state.tenant);
+    const {error: {status: schemaStatus = 200} = {}} = useTypedSelector((state) => state.schema);
 
     const dispatch = useDispatch();
 

package/dist/containers/Tenant/TenantPages.tsx

@@ -1,9 +1,6 @@
 import {Icon} from '../../components/Icon';
+import {TENANT_GENERAL_TABS_IDS} from '../../store/reducers/tenant/constants';
 
-export enum TenantGeneralTabsIds {
-    query = 'query',
-    diagnostics = 'diagnostics',
-}
 export enum TenantInfoTabsIds {
     overview = 'overview',
     acl = 'acl',
@@ -18,12 +15,12 @@ export enum TenantTabsGroups {
 
 export const TENANT_GENERAL_TABS = [
     {
-        id: TenantGeneralTabsIds.query,
+        id: TENANT_GENERAL_TABS_IDS.query,
         title: 'Query',
         icon: <Icon name="query" viewBox="0 0 16 16" />,
     },
     {
-        id: TenantGeneralTabsIds.diagnostics,
+        id: TENANT_GENERAL_TABS_IDS.diagnostics,
         title: 'Diagnostics',
         icon: <Icon name="diagnostics" viewBox="0 0 17 16" />,
     },

package/dist/containers/Tenant/utils/schemaActions.ts

@@ -3,9 +3,9 @@ import type {NavigationTreeNodeType, NavigationTreeProps} from 'ydb-ui-component
 
 import {changeUserInput} from '../../../store/reducers/executeQuery';
 import {setShowPreview} from '../../../store/reducers/schema';
-import {setTopLevelTab} from '../../../store/reducers/tenant';
+import {setTopLevelTab} from '../../../store/reducers/tenant/tenant';
+import {TENANT_GENERAL_TABS_IDS} from '../../../store/reducers/tenant/constants';
 import createToast from '../../../utils/createToast';
-import {TenantGeneralTabsIds} from '../TenantPages';
 
 const createTableTemplate = (path: string) => {
     return `CREATE TABLE \`${path}/my_table\`
@@ -37,7 +37,7 @@ const bindActions = (
 ) => {
     const inputQuery = (tmpl: (path: string) => string) => () => {
         dispatch(changeUserInput({input: tmpl(path)}));
-        dispatch(setTopLevelTab(TenantGeneralTabsIds.query));
+        dispatch(setTopLevelTab(TENANT_GENERAL_TABS_IDS.query));
         setActivePath(path);
     };
 
@@ -66,7 +66,7 @@ const bindActions = (
         },
         openPreview: () => {
             dispatch(setShowPreview(true));
-            dispatch(setTopLevelTab(TenantGeneralTabsIds.query));
+            dispatch(setTopLevelTab(TENANT_GENERAL_TABS_IDS.query));
             setActivePath(path);
         },
     };

package/dist/routes.ts

@@ -1,7 +1,7 @@
 import qs from 'qs';
 import {compile} from 'path-to-regexp';
 import isEmpty from 'lodash/isEmpty';
-//@ts-ignore
+
 import {backend, clusterName, webVersion} from './store';
 
 const routes = {

package/dist/store/reducers/index.ts

@@ -3,7 +3,7 @@ import {combineReducers} from 'redux';
 import nodes from './nodes';
 import cluster from './cluster/cluster';
 import clusterNodes from './clusterNodes/clusterNodes';
-import tenant from './tenant';
+import tenant from './tenant/tenant';
 import storage from './storage';
 import node from './node';
 import tooltip from './tooltip';

package/dist/store/reducers/tenant/constants.ts

@@ -0,0 +1,19 @@
+export const TENANT_GENERAL_TABS_IDS = {
+    query: 'query',
+    diagnostics: 'diagnostics',
+} as const;
+
+export const TENANT_DIAGNOSTICS_TABS_IDS = {
+    overview: 'overview',
+    topQueries: 'topQueries',
+    topShards: 'topShards',
+    nodes: 'nodes',
+    tablets: 'tablets',
+    storage: 'storage',
+    network: 'network',
+    describe: 'describe',
+    hotKeys: 'hotKeys',
+    graph: 'graph',
+    consumers: 'consumers',
+    partitions: 'partitions',
+} as const;

package/dist/store/reducers/{tenant.js → tenant/tenant.ts}

@@ -1,13 +1,20 @@
-import {createRequestActionTypes, createApiRequest} from '../utils';
-import '../../services/api';
-import _ from 'lodash';
+import type {Reducer} from 'redux';
+
+import type {TTenant} from '../../../types/api/tenant';
+import type {TenantAction, TenantDiagnosticsTab, TenantGeneralTab, TenantState} from './types';
+
+import '../../../services/api';
+import {createRequestActionTypes, createApiRequest} from '../../utils';
+
+export const FETCH_TENANT = createRequestActionTypes('tenant', 'FETCH_TENANT');
 
-const FETCH_TENANT = createRequestActionTypes('tenant', 'FETCH_TENANT');
 const SET_TOP_LEVEL_TAB = 'tenant/SET_TOP_LEVEL_TAB';
 const SET_DIAGNOSTICS_TAB = 'tenant/SET_DIAGNOSTICS_TAB';
 const CLEAR_TENANT = 'tenant/CLEAR_TENANT';
 
-const tenantReducer = (state = {loading: false, wasLoaded: false, tenant: {}}, action) => {
+const initialState = {loading: false, wasLoaded: false};
+
+const tenantReducer: Reducer<TenantState, TenantAction> = (state = initialState, action) => {
     switch (action.type) {
         case FETCH_TENANT.REQUEST: {
             return {
@@ -17,12 +24,9 @@ const tenantReducer = (state = {loading: false, wasLoaded: false, tenant: {}}, a
         }
 
         case FETCH_TENANT.SUCCESS: {
-            const {tenant, tenantNodes} = action.data;
-
             return {
                 ...state,
-                tenant,
-                tenantNodes,
+                tenant: action.data,
                 loading: false,
                 wasLoaded: true,
                 error: undefined,
@@ -32,7 +36,7 @@ const tenantReducer = (state = {loading: false, wasLoaded: false, tenant: {}}, a
         case FETCH_TENANT.FAILURE: {
             return {
                 ...state,
-                data: action.error,
+                error: action.error,
                 loading: false,
                 wasLoaded: true,
             };
@@ -41,7 +45,7 @@ const tenantReducer = (state = {loading: false, wasLoaded: false, tenant: {}}, a
         case CLEAR_TENANT: {
             return {
                 ...state,
-                tenant: {},
+                tenant: undefined,
                 loading: true,
             };
         }
@@ -65,45 +69,32 @@ const tenantReducer = (state = {loading: false, wasLoaded: false, tenant: {}}, a
     }
 };
 
-export const clearTenant = () => {
-    return {type: CLEAR_TENANT};
-};
-
-export const getTenantInfo = ({path}) => {
+export const getTenantInfo = ({path}: {path: string}) => {
     return createApiRequest({
-        request: Promise.all([window.api.getTenantInfo({path}), window.api.getCompute(path)]),
+        request: window.api.getTenantInfo({path}),
         actions: FETCH_TENANT,
-        dataHandler: ([tenantData, nodesData]) => {
-            const tenant = tenantData.TenantInfo[0];
-            const tenantNodes = _.map(nodesData?.Tenants[0]?.Nodes, (item) => {
-                if (item.Host && item.Endpoints) {
-                    const address = _.find(item.Endpoints, {Name: 'http-mon'})?.Address;
-                    return {
-                        id: item.NodeId,
-                        backend: `${item.Host}${address ? address : ''}`,
-                    };
-                }
-
-                return undefined;
-            }).filter(Boolean);
-
-            return {tenant, tenantNodes};
+        dataHandler: (tenantData): TTenant | undefined => {
+            return tenantData.TenantInfo?.[0];
         },
     });
 };
 
-export function setTopLevelTab(tab) {
+export const clearTenant = () => {
+    return {type: CLEAR_TENANT} as const;
+};
+
+export function setTopLevelTab(tab: TenantGeneralTab) {
     return {
         type: SET_TOP_LEVEL_TAB,
         data: tab,
-    };
+    } as const;
 }
 
-export function setDiagnosticsTab(tab) {
+export function setDiagnosticsTab(tab: TenantDiagnosticsTab) {
     return {
         type: SET_DIAGNOSTICS_TAB,
         data: tab,
-    };
+    } as const;
 }
 
 export default tenantReducer;

package/dist/store/reducers/tenant/types.ts

@@ -0,0 +1,25 @@
+import type {IResponseError} from '../../../types/api/error';
+import type {TTenant} from '../../../types/api/tenant';
+import type {ValueOf} from '../../../types/common';
+import type {ApiRequestAction} from '../../utils';
+
+import {TENANT_DIAGNOSTICS_TABS_IDS, TENANT_GENERAL_TABS_IDS} from './constants';
+import {FETCH_TENANT, clearTenant, setDiagnosticsTab, setTopLevelTab} from './tenant';
+
+export type TenantGeneralTab = ValueOf<typeof TENANT_GENERAL_TABS_IDS>;
+export type TenantDiagnosticsTab = ValueOf<typeof TENANT_DIAGNOSTICS_TABS_IDS>;
+
+export interface TenantState {
+    loading: boolean;
+    wasLoaded: boolean;
+    topLevelTab?: TenantGeneralTab;
+    diagnosticsTab?: TenantDiagnosticsTab;
+    tenant?: TTenant;
+    error?: IResponseError;
+}
+
+export type TenantAction =
+    | ApiRequestAction<typeof FETCH_TENANT, TTenant | undefined, IResponseError>
+    | ReturnType<typeof clearTenant>
+    | ReturnType<typeof setTopLevelTab>
+    | ReturnType<typeof setDiagnosticsTab>;

package/dist/utils/index.js

@@ -97,7 +97,8 @@ export const formatDateTime = (value) => {
 
 export const calcUptimeInSeconds = (milliseconds) => {
     const currentDate = new Date();
-    return (currentDate - Number(milliseconds)) / 1000;
+    const diff = currentDate - Number(milliseconds);
+    return diff <= 0 ? 0 : diff / 1000;
 };
 
 export const calcUptime = (milliseconds) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "4.5.0",
+  "version": "4.5.1",
   "files": [
     "dist"
   ],
@@ -48,6 +48,7 @@
     "//build:embedded": "echo 'PUBLIC_URL is a setting for create-react-app. Embedded version is built and hosted as is on ydb servers, with no way of knowing the final URL pattern. PUBLIC_URL=. keeps paths to all static relative, allowing servers to handle them as needed'",
     "build:embedded": "rm -rf build && PUBLIC_URL=. REACT_APP_BACKEND=http://localhost:8765 npm run build",
     "lint:styles": "stylelint 'src/**/*.scss'",
+    "unimported": "npx unimported --no-cache",
     "package": "rm -rf dist && copyfiles -u 1 'src/**/*' dist",
     "test": "react-app-rewired test",
     "eject": "react-scripts eject",

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cn from 'bem-cn-lite';
-import {Breadcrumbs as BreadcrumbsUiKit} from '@gravity-ui/uikit';
-
-import './Breadcrumbs.scss';
-
-const b = cn('kv-breadcrumbs');
-
-class Breadcrumbs extends React.Component {
-    static propTypes = {
-        items: PropTypes.array,
-    };
-
-    static defaultProps = {
-        items: [],
-    };
-
-    render() {
-        const {items} = this.props;
-        return <BreadcrumbsUiKit items={items} firstDisplayedItemsCount={1} className={b()} />;
-    }
-}
-
-export default Breadcrumbs;

package/dist/components/Breadcrumbs/Breadcrumbs.scss

@@ -1,5 +0,0 @@
-.kv-breadcrumbs {
-    padding: 20px 0;
-
-    font-size: var(--yc-text-body-2-font-size);
-}

package/dist/components/Collapse/Collapse.js

@@ -1,84 +0,0 @@
-import {useState, useEffect, useRef} from 'react';
-import block from 'bem-cn-lite';
-import {ArrowToggle, Button} from '@gravity-ui/uikit';
-
-import './Collapse.scss';
-
-const b = block('yc-collapse');
-
-function useEffectSkipFirst(fn, arr) {
-    const isFirst = useRef(true);
-
-    useEffect(() => {
-        if (isFirst.current) {
-            isFirst.current = false;
-            return;
-        }
-
-        return fn();
-    }, arr);
-}
-
-export const Collapse = ({
-    title,
-    children,
-    arrowView = 'icon',
-    emptyState = 'No data',
-    titleSize = 'l',
-    contentMarginTop = 12,
-    defaultIsExpand,
-    onChange,
-}) => {
-    const [isExpand, setIsExpand] = useState(defaultIsExpand);
-
-    const arrowDirection = isExpand ? 'top' : 'bottom';
-
-    const arrowComponent =
-        arrowView === 'button' ? (
-            <Button view="flat" className={b('arrow-button')}>
-                <ArrowToggle className={b('arrow')} direction={arrowDirection} size={20} />
-            </Button>
-        ) : (
-            <ArrowToggle className={b('arrow')} direction={arrowDirection} size={20} />
-        );
-
-    useEffectSkipFirst(onChange, [isExpand]);
-
-    return (
-        <div className={b()}>
-            <div
-                className={b('panel', {
-                    'no-data': !children,
-                })}
-                onClick={() => {
-                    setIsExpand(!isExpand);
-                }}
-            >
-                {typeof title === 'string' ? (
-                    <h2
-                        className={b('title', {
-                            size: titleSize,
-                        })}
-                    >
-                        {title}
-                    </h2>
-                ) : (
-                    title
-                )}
-
-                {children && <div className={b('arrow-wrapper')}>{arrowComponent}</div>}
-            </div>
-
-            {!children && <h4 className={b('empty-state-title')}>{emptyState}</h4>}
-
-            {children && (
-                <div
-                    className={b('content', {visible: isExpand})}
-                    style={{marginTop: contentMarginTop}}
-                >
-                    {children}
-                </div>
-            )}
-        </div>
-    );
-};

package/dist/components/Collapse/Collapse.scss

@@ -1,70 +0,0 @@
-.yc-collapse {
-    &__panel {
-        display: inline-flex;
-        align-items: center;
-
-        cursor: pointer;
-
-        &_no-data {
-            cursor: default;
-        }
-    }
-
-    &__title {
-        margin: 0;
-    }
-
-    &__title_secondary {
-        color: var(--yc-color-text-secondary);
-    }
-
-    &__title_size {
-        &_s {
-            font-size: var(--yc-text-body-1-font-size);
-            line-height: var(--yc-text-body-1-line-height);
-        }
-
-        &_m {
-            font-size: var(--yc-text-body-2-font-size);
-            line-height: var(--yc-text-body-2-line-height);
-        }
-
-        &_l {
-            font-size: var(--yc-text-body-3-font-size);
-            line-height: var(--yc-text-body-3-line-height);
-        }
-    }
-
-    &__arrow-wrapper {
-        margin-left: 8px;
-    }
-
-    &__arrow-wrapper_secondary {
-        color: var(--yc-color-text-secondary);
-        .button2__text {
-            color: var(--yc-color-text-secondary);
-        }
-    }
-
-    &__content {
-        display: none;
-
-        &_visible {
-            display: block;
-        }
-    }
-
-    &__empty-state-title {
-        font-size: var(--yc-text-body-1-font-size);
-        font-weight: normal;
-        line-height: var(--yc-text-body-1-line-height);
-
-        opacity: 0.5;
-    }
-
-    &__arrow-button {
-        .button2__text {
-            margin: 0 4px;
-        }
-    }
-}