feat(Navigation/Table): add remount option [YTFRONT-3593]

packages/ui/src/shared/yt-types.d.ts

@@ -313,6 +313,10 @@ export type PipelineParams = {
     pipeline_path: string;
 };
 
+export type TableParams = {
+    path: string;
+};
+
 export type ExpectedVersion = {
     expected_version?: string | number;
 };

packages/ui/src/ui/pages/navigation/content/Table/RemountAlert/RemountAlert.scss

@@ -0,0 +1,5 @@
+.remount-alert {
+    &__button {
+        width: fit-content;
+    }
+}

packages/ui/src/ui/pages/navigation/content/Table/RemountAlert/RemountAlert.tsx

@@ -0,0 +1,56 @@
+import React, {useState} from 'react';
+import b from 'bem-cn-lite';
+import {useDispatch, useSelector} from 'react-redux';
+import {Alert, Button} from '@gravity-ui/uikit';
+import ypath from '../../../../../common/thor/ypath';
+
+import {remountTable} from '../../../../../store/actions/navigation/content/table/remount-table';
+import {getAttributesWithTypes} from '../../../../../store/selectors/navigation';
+
+import './RemountAlert.scss';
+
+const block = b('remount-alert');
+
+export function RemountAlert() {
+    const dispatch = useDispatch();
+    const attributesWithTypes = useSelector(getAttributesWithTypes);
+    const [pending, setPending] = useState(false);
+
+    const handleOnRemount = async () => {
+        setPending(true);
+        await dispatch(remountTable());
+        setPending(false);
+    };
+
+    const remountNeededTabletCount = ypath.getValue(
+        attributesWithTypes,
+        '/remount_needed_tablet_count',
+    );
+    const tabletCount = ypath.getValue(attributesWithTypes, '/tablet_count');
+
+    const showDiffInfo = remountNeededTabletCount !== tabletCount;
+    const diffInfo = `(${remountNeededTabletCount} of ${tabletCount} tablets pending)`;
+
+    const message = `Some settings are not applied to tablets ${showDiffInfo && diffInfo}. 
+        See Mount config tab for details. Note: this action will not cause any downtime`;
+
+    return (
+        <Alert
+            theme="warning"
+            title="Remount needed"
+            message={message}
+            className={block('')}
+            actions={
+                <Button
+                    onClick={handleOnRemount}
+                    disabled={pending}
+                    className={block('button')}
+                    view="normal-contrast"
+                    size="s"
+                >
+                    Remount
+                </Button>
+            }
+        ></Alert>
+    );
+}

packages/ui/src/ui/pages/navigation/content/Table/TableMeta/TableMeta.tsx

@@ -1,27 +1,31 @@
 import React, {useMemo} from 'react';
 import cn from 'bem-cn-lite';
 import {connect, useSelector} from 'react-redux';
+import ypath from '../../../../../common/thor/ypath';
 
 import {makeMetaItems} from '../../../../../components/MetaTable/presets/presets';
 import CollapsibleSection from '../../../../../components/CollapsibleSection/CollapsibleSection';
 import MetaTable from '../../../../../components/MetaTable/MetaTable';
+import {RemountAlert} from '../RemountAlert/RemountAlert';
 
 import {getTableType} from '../../../../../store/selectors/navigation/content/table';
 import {getIsDynamic} from '../../../../../store/selectors/navigation/content/table-ts';
-import {getAttributes} from '../../../../../store/selectors/navigation';
+import {getAttributes, getAttributesWithTypes} from '../../../../../store/selectors/navigation';
 import {getTabletErrorsBackgroundCount} from '../../../../../store/selectors/navigation/tabs/tablet-errors-background';
 import {Props as AutomaticModeSwitchProps} from './AutomaticModeSwitch';
 
+import {RootState} from '../../../../../store/reducers';
 import {getCluster} from '../../../../../store/selectors/global';
 
-import './TableMeta.scss';
-import {RootState} from '../../../../../store/reducers';
 import {UI_COLLAPSIBLE_SIZE} from '../../../../../constants/global';
 
+import './TableMeta.scss';
+
 const block = cn('navigation-meta-table');
 
 interface Props {
     attributes: any;
+    attributesWithTypes: any;
     mediumList: string[];
     isDynamic: boolean;
     tableType: string;
@@ -30,6 +34,7 @@ interface Props {
 
 function TableMeta({
     attributes,
+    attributesWithTypes,
     tableType,
     mediumList,
     isDynamic,
@@ -58,9 +63,13 @@ function TableMeta({
         onEditEnableReplicatedTableTracker,
     ]);
 
+    const remountNeeded =
+        !!Number(ypath.getValue(attributesWithTypes, '/remount_needed_tablet_count')) && isDynamic;
+
     return (
         <CollapsibleSection name="Metadata" size={UI_COLLAPSIBLE_SIZE}>
             <MetaTable className={block()} items={items} />
+            {remountNeeded && <RemountAlert />}
         </CollapsibleSection>
     );
 }
@@ -71,9 +80,11 @@ const mapStateToProps = (state: RootState) => {
     const isDynamic = getIsDynamic(state);
     const tableType = getTableType(state);
     const attributes = getAttributes(state);
+    const attributesWithTypes = getAttributesWithTypes(state);
 
     return {
         attributes,
+        attributesWithTypes,
         mediumList,
         isDynamic,
         tableType,

packages/ui/src/ui/rum/rum-wrap-api.ts

@@ -15,6 +15,7 @@ import {
     OutputFormat,
     PathParams,
     PipelineParams,
+    TableParams,
 } from '../../shared/yt-types';
 import {YTApiId} from '../../shared/constants/yt-api-id';
 
@@ -102,6 +103,8 @@ type YTApiV4 = {
     getPipelineState(...args: ApiMethodParameters<PipelineParams>): Promise<GetPipelineStateData>;
     getFlowView(...args: ApiMethodParameters<PipelineParams>): Promise<GetFlowViewData>;
 
+    remountTable(...args: ApiMethodParameters<TableParams>): Promise<void>;
+
     [method: string]: (...args: ApiMethodParameters<any>) => Promise<any>;
 };
 

packages/ui/src/ui/store/actions/navigation/content/table/remount-table.ts

@@ -0,0 +1,25 @@
+import {ThunkAction} from 'redux-thunk';
+import {UnknownAction} from '@reduxjs/toolkit';
+
+import {RootState} from '../../../../reducers';
+import {updateView} from '../..';
+
+import {wrapApiPromiseByToaster} from '../../../../../utils/utils';
+import {ytApiV4} from '../../../../../rum/rum-wrap-api';
+
+type AsyncAction<R = void> = ThunkAction<R, RootState, unknown, UnknownAction>;
+
+export function remountTable(): AsyncAction<Promise<void>> {
+    return async (dispatch, getState) => {
+        await new Promise((res) => setTimeout(res, 3000));
+        const state = getState();
+        const path = state.navigation.navigation.path;
+
+        return wrapApiPromiseByToaster(ytApiV4.remountTable({path}), {
+            toasterName: 'remount_tabe',
+            skipSuccessToast: false,
+        }).finally(() => {
+            dispatch(updateView());
+        });
+    };
+}

packages/ui/src/ui/store/actions/navigation/index.js

@@ -307,6 +307,7 @@ const attributesToLoad = [
     'effective_expiration',
     'replicated_table_options',
     'replica_path',
+    'remount_needed_tablet_count',
     'erasure_codec',
     'id',
     'in_memory_mode',
@@ -333,6 +334,7 @@ const attributesToLoad = [
     'sorted_by',
     'start_time',
     'state',
+    'tablet_count',
     'tablet_cell_bundle',
     'tablet_error_count',
     'tablet_state',