disables cancel button when reconciliation is not in progress. (#355)

web/src/components/organisms/treeview/TerminateReconcile.tsx

@@ -1,25 +1,36 @@
 import { Environment } from 'models/entity.type';
 import { ReactComponent as TerminateIcon } from 'assets/images/icons/card-status/sync/Not Sync.svg';
 import { AuditService } from 'services/audit/audit.service';
-import { useContext } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { Context } from 'context/argo/ArgoUi';
 import { NotificationType } from 'components/argo-core';
 import { ZSyncStatus } from 'models/argo.models';
+import { ArgoStreamService } from 'services/argo/ArgoStream.service';
 
 export type TerminateReconcileProps = {
 	environment: Environment;
 };
 export const TerminateReconcile: React.FC<TerminateReconcileProps> = ({ environment }) => {
 	const notifications = useContext(Context)?.notifications;
-	const inProgress = [ZSyncStatus.Initializing, ZSyncStatus.Destroying, ZSyncStatus.Provisioning].includes(
-		environment.status as ZSyncStatus
-	);
+	const [reconciling, setReconciling] = useState<boolean>(false);
+
+	useEffect(() => {
+		const ecd = ArgoStreamService.streamEnvironment(environment.argoId);
+		const watcherSub = ecd.listen().subscribe((e: any) => {
+			const healthStatus = e?.data?.result?.application?.status?.health?.status;
+			setReconciling(healthStatus === 'Progressing');
+		});
+
+		return () => {
+			watcherSub.unsubscribe();
+		}
+	}, [environment]);
 	return (
 		<button
-			disabled={!inProgress}
+			disabled={!reconciling}
 			className="dag-controls-terminate"
 			onClick={async (e: any) => {
-				if (!inProgress) return;
+				if (!reconciling) return;
 				e.stopPropagation();
 				if (!window.confirm('Are you sure you want to cancel the reconcile?')) return;
 				const response = await AuditService.getInstance().terminate(environment.latestEnvRecon.reconcileId);