From df291d2b3d0f1660e840ed48d7ff3ad9c4915396 Mon Sep 17 00:00:00 2001 From: yadhap Dahal Date: Mon, 25 Nov 2024 17:06:28 -0500 Subject: [PATCH 1/3] The expected start and completion time were cleared when the component load. This was causing issue while a user tries to update a JM. User might not want to edit the expected end and start time, but these fields are cleared forcing user to re-enter these values. The new changes will only clear those 2 fields if a user touched the run window values --- .../application/jobMonitoring/JobMonitoringTab.jsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/Tombolo/client-reactjs/src/components/application/jobMonitoring/JobMonitoringTab.jsx b/Tombolo/client-reactjs/src/components/application/jobMonitoring/JobMonitoringTab.jsx index d5e53474..343f1f76 100644 --- a/Tombolo/client-reactjs/src/components/application/jobMonitoring/JobMonitoringTab.jsx +++ b/Tombolo/client-reactjs/src/components/application/jobMonitoring/JobMonitoringTab.jsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useRef } from 'react'; import { useSelector } from 'react-redux'; import { Card, Form, TimePicker, Row, Col, Select } from 'antd'; @@ -26,6 +26,7 @@ function JobMonitoringTab({ setSelectedDomain, }) { const [clusterOffset, setClusterOffset] = useState(null); + const isMounted = useRef(false); // Track if the component has mounted // Generating cluster offset string to display in time picker useEffect(() => { @@ -40,7 +41,11 @@ function JobMonitoringTab({ // When intermediate scheduling is changed clear Expected start and end time useEffect(() => { - form.setFieldsValue({ expectedStartTime: null, expectedCompletionTime: null }); + if (isMounted.current) { + form.setFieldsValue({ expectedStartTime: null, expectedCompletionTime: null }); + } else { + isMounted.current = true; // Set to true after the first render + } }, [intermittentScheduling]); // Function to disable specific hours From d8a943a8bfcb49bc90a6a825105af3992f495b08 Mon Sep 17 00:00:00 2001 From: yadhap Dahal Date: Tue, 26 Nov 2024 09:32:52 -0500 Subject: [PATCH 2/3] Replaced useRef with useState in the JM Scheduling Tab to track component loading. This ensures the expected start and end time input fields are properly updated. The change simplifies the codebase without altering functionality --- .../application/jobMonitoring/JobMonitoringTab.jsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/Tombolo/client-reactjs/src/components/application/jobMonitoring/JobMonitoringTab.jsx b/Tombolo/client-reactjs/src/components/application/jobMonitoring/JobMonitoringTab.jsx index 343f1f76..59f85a8e 100644 --- a/Tombolo/client-reactjs/src/components/application/jobMonitoring/JobMonitoringTab.jsx +++ b/Tombolo/client-reactjs/src/components/application/jobMonitoring/JobMonitoringTab.jsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useRef } from 'react'; +import React, { useState, useEffect } from 'react'; import { useSelector } from 'react-redux'; import { Card, Form, TimePicker, Row, Col, Select } from 'antd'; @@ -26,7 +26,7 @@ function JobMonitoringTab({ setSelectedDomain, }) { const [clusterOffset, setClusterOffset] = useState(null); - const isMounted = useRef(false); // Track if the component has mounted + const [firstTimeLoading, setFirstTimeLoading] = useState(true); // Generating cluster offset string to display in time picker useEffect(() => { @@ -39,12 +39,11 @@ function JobMonitoringTab({ } }, [selectedCluster]); - // When intermediate scheduling is changed clear Expected start and end time useEffect(() => { - if (isMounted.current) { + if (!firstTimeLoading) { form.setFieldsValue({ expectedStartTime: null, expectedCompletionTime: null }); } else { - isMounted.current = true; // Set to true after the first render + setFirstTimeLoading(false); // Set to true after the first render } }, [intermittentScheduling]); From 8f1b8223028e89c5b1cce434340f6ef3a5596ca0 Mon Sep 17 00:00:00 2001 From: yadhap Dahal Date: Tue, 26 Nov 2024 13:28:41 -0500 Subject: [PATCH 3/3] used useRef hook to track component rendering. using usestate added re-render --- .../application/jobMonitoring/JobMonitoringTab.jsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/Tombolo/client-reactjs/src/components/application/jobMonitoring/JobMonitoringTab.jsx b/Tombolo/client-reactjs/src/components/application/jobMonitoring/JobMonitoringTab.jsx index 59f85a8e..41a43646 100644 --- a/Tombolo/client-reactjs/src/components/application/jobMonitoring/JobMonitoringTab.jsx +++ b/Tombolo/client-reactjs/src/components/application/jobMonitoring/JobMonitoringTab.jsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useRef } from 'react'; import { useSelector } from 'react-redux'; import { Card, Form, TimePicker, Row, Col, Select } from 'antd'; @@ -26,7 +26,7 @@ function JobMonitoringTab({ setSelectedDomain, }) { const [clusterOffset, setClusterOffset] = useState(null); - const [firstTimeLoading, setFirstTimeLoading] = useState(true); + const isFirstRender = useRef(true); // Generating cluster offset string to display in time picker useEffect(() => { @@ -39,11 +39,12 @@ function JobMonitoringTab({ } }, [selectedCluster]); + // When intermittent scheduling is changed, clear Expected start and end time useEffect(() => { - if (!firstTimeLoading) { - form.setFieldsValue({ expectedStartTime: null, expectedCompletionTime: null }); + if (isFirstRender.current) { + isFirstRender.current = false; // Set to false after the first render } else { - setFirstTimeLoading(false); // Set to true after the first render + form.setFieldsValue({ expectedStartTime: null, expectedCompletionTime: null }); } }, [intermittentScheduling]);