VTAdmin(web): Refetch workflows after performing workflow actions

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

Author: beingnoble03

web/vtadmin/src/components/routes/Workflows.tsx

@@ -37,10 +37,12 @@ import { QueryLoadingPlaceholder } from '../placeholders/QueryLoadingPlaceholder
 import { UseQueryResult } from 'react-query';
 import { ReadOnlyGate } from '../ReadOnlyGate';
 import WorkflowActions from './workflows/WorkflowActions';
+import { isReadOnlyMode } from '../../util/env';
 
 export const ThrottleThresholdSeconds = 60;
 
 const COLUMNS = ['Workflow', 'Source', 'Target', 'Streams', 'Last Updated', 'Actions'];
+const READ_ONLY_COLUMNS = ['Workflow', 'Source', 'Target', 'Streams', 'Last Updated'];
 
 export const Workflows = () => {
     useDocumentTitle('Workflows');
@@ -188,6 +190,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}
@@ -212,7 +215,11 @@ export const Workflows = () => {
                     value={filter || ''}
                 />
 
-                <DataTable columns={COLUMNS} data={sortedData} renderRows={renderRows} />
+                <DataTable
+                    columns={isReadOnlyMode() ? READ_ONLY_COLUMNS : COLUMNS}
+                    data={sortedData}
+                    renderRows={renderRows}
+                />
 
                 <QueryLoadingPlaceholder query={workflowsQuery as UseQueryResult} />
             </ContentContainer>

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