VTAdmin(web): Refetch workflows after performing workflow actions

Signed-off-by: Noble Mittal <noblemittal@outlook.com>
vitessio · Aug 29, 2024 · 2c88769 · 2c88769
1 parent 3c77866
commit 2c88769
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 8 deletions.
diff --git a/web/vtadmin/src/components/routes/Workflows.tsx b/web/vtadmin/src/components/routes/Workflows.tsx
@@ -188,6 +188,7 @@ export const Workflows = () => {
                     <ReadOnlyGate>
                         <DataCell>
                             <WorkflowActions
+                                refetchWorkflows={workflowsQuery.refetch}
                                 keyspace={row.keyspace as string}
                                 clusterID={row.clusterID as string}
                                 name={row.name as string}

diff --git a/web/vtadmin/src/components/routes/workflows/WorkflowAction.tsx b/web/vtadmin/src/components/routes/workflows/WorkflowAction.tsx
@@ -14,6 +14,7 @@ interface WorkflowActionProps {
     description?: string;
     body?: JSX.Element;
     successBody?: JSX.Element;
+    refetchWorkflows: Function;
     closeDialog: () => void;
 }
 
@@ -28,6 +29,7 @@ const WorkflowAction: React.FC<WorkflowActionProps> = ({
     successBody,
     loadingText,
     errorText,
+    refetchWorkflows,
     body,
 }) => {
     const onCloseDialog = () => {
@@ -36,12 +38,22 @@ const WorkflowAction: React.FC<WorkflowActionProps> = ({
     };
 
     const hasRun = mutation.data || mutation.error;
+    const onConfirm = () => {
+        mutation.mutate(
+            {},
+            {
+                onSuccess: () => {
+                    refetchWorkflows();
+                },
+            }
+        );
+    };
     return (
         <Dialog
             isOpen={isOpen}
             confirmText={hasRun ? 'Close' : confirmText}
             cancelText="Cancel"
-            onConfirm={hasRun ? onCloseDialog : mutation.mutate}
+            onConfirm={hasRun ? onCloseDialog : onConfirm}
             loadingText={loadingText}
             loading={mutation.isLoading}
             onCancel={onCloseDialog}

diff --git a/web/vtadmin/src/components/routes/workflows/WorkflowActions.tsx b/web/vtadmin/src/components/routes/workflows/WorkflowActions.tsx
@@ -6,12 +6,13 @@ import WorkflowAction from './WorkflowAction';
 import { useStartWorkflow, useStopWorkflow } from '../../../hooks/api';
 
 interface WorkflowActionsProps {
+    refetchWorkflows: Function;
     keyspace: string;
     clusterID: string;
     name: string;
 }
 
-const WorkflowActions: React.FC<WorkflowActionsProps> = ({ keyspace, clusterID, name }) => {
+const WorkflowActions: React.FC<WorkflowActionsProps> = ({ refetchWorkflows, keyspace, clusterID, name }) => {
     const [currentDialog, setCurrentDialog] = useState<string>('');
     const closeDialog = () => setCurrentDialog('');
 
@@ -27,39 +28,49 @@ const WorkflowActions: React.FC<WorkflowActionsProps> = ({ keyspace, clusterID,
             </Dropdown>
             <WorkflowAction
                 title="Start Workflow"
-                description={`Starts a VReplication Workflow`}
                 confirmText="Start"
                 loadingText="Starting"
                 mutation={startWorkflowMutation}
                 successText="Started workflow"
-                errorText="Error starting workflow"
+                errorText={`Error occured while starting workflow ${name}`}
                 closeDialog={closeDialog}
                 isOpen={currentDialog === 'Start Workflow'}
+                refetchWorkflows={refetchWorkflows}
                 successBody={
                     <div className="text-sm">
                         {startWorkflowMutation.data && startWorkflowMutation.data.summary && (
                             <div className="text-sm">{startWorkflowMutation.data.summary}</div>
                         )}
                     </div>
                 }
+                body={
+                    <div className="text-sm mt-3">
+                        Starts the <span className="font-mono bg-gray-300">{name}</span> workflow.
+                    </div>
+                }
             />
             <WorkflowAction
                 title="Stop Workflow"
-                description={`Stops a VReplication Workflow`}
                 confirmText="Stop"
-                loadingText="Stoping"
+                loadingText="Stopping"
                 mutation={stopWorkflowMutation}
-                successText="Stoped workflow"
-                errorText="Error stoping workflow"
+                successText="Stopped workflow"
+                errorText={`Error occured while stopping workflow ${name}`}
                 closeDialog={closeDialog}
                 isOpen={currentDialog === 'Stop Workflow'}
+                refetchWorkflows={refetchWorkflows}
                 successBody={
                     <div className="text-sm">
                         {stopWorkflowMutation.data && stopWorkflowMutation.data.summary && (
                             <div className="text-sm">{stopWorkflowMutation.data.summary}</div>
                         )}
                     </div>
                 }
+                body={
+                    <div className="text-sm mt-3">
+                        Stops the <span className="font-mono bg-gray-300">{name}</span> workflow.
+                    </div>
+                }
             />
         </div>
     );