feat(PDisk): add restart button (#766)

Author: artemmufazalov

src/containers/PDisk/PDisk.scss

@@ -16,6 +16,7 @@
     &__meta,
     &__title,
     &__info,
+    &__controls,
     &__groups-title {
         position: sticky;
         left: 0;

src/containers/PDisk/PDisk.tsx

@@ -2,6 +2,9 @@ import {useCallback, useEffect} from 'react';
 import {StringParam, useQueryParams} from 'use-query-params';
 import {Helmet} from 'react-helmet-async';
 
+import {Icon} from '@gravity-ui/uikit';
+import ArrowRotateLeftIcon from '@gravity-ui/icons/svgs/arrow-rotate-left.svg';
+
 import {
     getPDiskData,
     getPDiskStorage,
@@ -17,6 +20,7 @@ import {PageMeta} from '../../components/PageMeta/PageMeta';
 import {StatusIcon} from '../../components/StatusIcon/StatusIcon';
 import {PDiskInfo} from '../../components/PDiskInfo/PDiskInfo';
 import {InfoViewerSkeleton} from '../../components/InfoViewerSkeleton/InfoViewerSkeleton';
+import {ButtonWithConfirmDialog} from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
 
 import {PDiskGroups} from './PDiskGroups';
 import {pdiskPageCn} from './shared';
@@ -46,20 +50,37 @@ export function PDisk() {
     }, [dispatch]);
 
     const fetchData = useCallback(
-        (isBackground: boolean) => {
+        async (isBackground?: boolean) => {
             if (!isBackground) {
                 dispatch(setPDiskDataWasNotLoaded());
             }
+
             if (nodeId && pDiskId) {
-                dispatch(getPDiskData({nodeId, pDiskId}));
-                dispatch(getPDiskStorage({nodeId, pDiskId}));
+                return Promise.all([
+                    dispatch(getPDiskData({nodeId, pDiskId})),
+                    dispatch(getPDiskStorage({nodeId, pDiskId})),
+                ]);
             }
+
+            return undefined;
         },
         [dispatch, nodeId, pDiskId],
     );
 
     useAutofetcher(fetchData, [fetchData], true);
 
+    const handleRestart = async () => {
+        if (nodeId && pDiskId) {
+            return window.api.restartPDisk(nodeId, pDiskId);
+        }
+
+        return undefined;
+    };
+
+    const handleAfterRestart = async () => {
+        return fetchData(true);
+    };
+
     const renderHelmet = () => {
         const pDiskPagePart = pDiskId
             ? `${pDiskPageKeyset('pdisk')} ${pDiskId}`
@@ -97,6 +118,23 @@ export function PDisk() {
         );
     };
 
+    const renderControls = () => {
+        return (
+            <div className={pdiskPageCn('controls')}>
+                <ButtonWithConfirmDialog
+                    onConfirmAction={handleRestart}
+                    onConfirmActionSuccess={handleAfterRestart}
+                    buttonDisabled={!nodeId || !pDiskId}
+                    buttonView="normal"
+                    dialogContent={pDiskPageKeyset('restart-pdisk-dialog')}
+                >
+                    <Icon data={ArrowRotateLeftIcon} />
+                    {pDiskPageKeyset('restart-pdisk-button')}
+                </ButtonWithConfirmDialog>
+            </div>
+        );
+    };
+
     const renderInfo = () => {
         if (pDiskLoading && !pDiskWasLoaded) {
             return <InfoViewerSkeleton className={pdiskPageCn('info')} rows={10} />;
@@ -126,6 +164,7 @@ export function PDisk() {
             {renderHelmet()}
             {renderPageMeta()}
             {renderPageTitle()}
+            {renderControls()}
             {renderInfo()}
             {renderGroupsTable()}
         </div>

src/containers/PDisk/i18n/en.json

@@ -2,5 +2,8 @@
   "fqdn": "FQDN",
   "pdisk": "PDisk",
   "groups": "Groups",
-  "node": "Node"
+  "node": "Node",
+
+  "restart-pdisk-button": "Restart PDisk",
+  "restart-pdisk-dialog": "PDisk will be restarted. Do you want to proceed?"
 }

src/services/api.ts

@@ -38,6 +38,7 @@ import type {JsonHotKeysResponse} from '../types/api/hotkeys';
 
 import {backend as BACKEND, metaBackend as META_BACKEND} from '../store';
 import {prepareSortValue} from '../utils/filters';
+import {createPDiskDeveloperUILink} from '../utils/developerUI/developerUI';
 import {BINARY_DATA_IN_PLAIN_TEXT_DISPLAY} from '../utils/constants';
 import {parseMetaCluster} from './parsers/parseMetaCluster';
 import {parseMetaTenants} from './parsers/parseMetaTenants';
@@ -378,6 +379,24 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
             {concurrentId},
         );
     }
+    restartPDisk(nodeId: number | string, pDiskId: number | string) {
+        const pDiskPath = createPDiskDeveloperUILink({
+            nodeId,
+            pDiskId,
+            host: this.getPath(''),
+        });
+
+        return this.post(
+            pDiskPath,
+            'restartPDisk=',
+            {},
+            {
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
+                },
+            },
+        );
+    }
     killTablet(id?: string) {
         return this.get<string>(this.getPath(`/tablets?KillTabletID=${id}`), {});
     }