VTAdmin(web): Refetch workflows after performing workflow actions

Signed-off-by: Noble Mittal <noblemittal@outlook.com>

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}

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}

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>
  );