fix(Tablet): fetch data on action finish (#405)

Author: artemmufazalov

src/components/CriticalActionDialog/CriticalActionDialog.tsx

@@ -13,13 +13,15 @@ interface CriticalActionDialogProps {
     text: string;
     onClose: VoidFunction;
     onConfirm: () => Promise<unknown>;
+    onConfirmActionFinish: VoidFunction;
 }
 
 export const CriticalActionDialog = ({
     visible,
     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();
         });

src/containers/Tablet/Tablet.scss

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

src/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} />

src/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,41 +47,27 @@ 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);
     };
 
     const hasHiveId = () => {
         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,15 +128,17 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
                     <Button
                         onClick={showStopDialog}
                         view="action"
-                        disabled={isDisabledStop()}
+                        disabled={isDisabledStop}
+                        loading={!isDisabledStop && isTabletActionLoading}
                         className={b('control')}
                     >
                         {i18n('controls.stop')}
                     </Button>
                     <Button
                         onClick={showResumeDialog}
                         view="action"
-                        disabled={isDisabledResume()}
+                        disabled={isDisabledResume}
+                        loading={!isDisabledResume && isTabletActionLoading}
                         className={b('control')}
                     >
                         {i18n('controls.resume')}

src/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) => {