Merge pull request #747 from hpcc-systems/yadhap/final-JM

Yadhap/final jm

Author: FancMa01

Diff for: client-reactjs/package-lock.json

@@ -4,8 +4,8 @@
   "private": true,
   "dependencies": {
     "@ant-design/charts": "^2.0.3",
-    "@ant-design/plots": "2.1.14",
     "@ant-design/icons": "^4.7.0",
+    "@ant-design/plots": "2.1.14",
     "@antv/layout": "^0.1.31",
     "@antv/x6": "^2.18.1",
     "@antv/x6-plugin-stencil": "^2.1.5",
@@ -43,6 +43,7 @@
     "yaml": "^2.2.2"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",

Diff for: client-reactjs/package.json

@@ -1,18 +1,17 @@
 import React, { useState } from 'react';
 import { Modal, Tabs, Button, Badge } from 'antd';
 import { LoadingOutlined } from '@ant-design/icons';
-import { v4 as uuidv4 } from 'uuid';
 
 import JobMonitoringBasicTab from './JobMonitoringBasicTab.jsx';
 import JobMonitoringTab from './JobMonitoringTab';
 import JobMonitoringNotificationTab from './JobMonitoringNotificationTab.jsx';
 
 const AddEditJobMonitoringModal = ({
   displayAddJobMonitoringModal,
-  setDisplayAddJobMonitoringModal,
   monitoringScope,
   setMonitoringScope,
   handleSaveJobMonitoring,
+  handleUpdateJobMonitoring,
   intermittentScheduling,
   setIntermittentScheduling,
   setCompleteSchedule,
@@ -25,16 +24,19 @@ const AddEditJobMonitoringModal = ({
   form,
   clusters,
   teamsHooks,
-  setSelectedMonitoring,
   savingJobMonitoring,
   jobMonitorings,
-  setEditingData,
   isEditing,
   erroneousTabs,
-  setErroneousTabs,
-  setErroneousScheduling,
+  resetStates,
+  domains,
+  productCategories,
+  setSelectedDomain,
+  selectedCluster,
+  setSelectedCluster,
+  activeTab,
+  setActiveTab,
 }) => {
-  const [activeTab, setActiveTab] = useState('0');
   // Keep track of visited tabs, some form fields are loaded only when tab is visited. This is to avoid validation errors
   const [visitedTabs, setVisitedTabs] = useState(['0']);
 
@@ -58,12 +60,14 @@ const AddEditJobMonitoringModal = ({
           setMonitoringScope={setMonitoringScope}
           jobMonitorings={jobMonitorings}
           isEditing={isEditing}
+          selectedCluster={selectedCluster}
+          setSelectedCluster={setSelectedCluster}
         />
       ),
       id: 1,
     },
     {
-      label: 'Monitoring Details',
+      label: 'Scheduling Details',
       id: 2,
       component: () => (
         <JobMonitoringTab
@@ -78,6 +82,10 @@ const AddEditJobMonitoringModal = ({
           setCronMessage={setCronMessage}
           erroneousScheduling={erroneousScheduling}
           monitoringScope={monitoringScope}
+          selectedCluster={selectedCluster}
+          domains={domains}
+          productCategories={productCategories}
+          setSelectedDomain={setSelectedDomain}
         />
       ),
     },
@@ -103,18 +111,10 @@ const AddEditJobMonitoringModal = ({
   };
 
   const handleCancel = () => {
-    form.resetFields();
-    setIntermittentScheduling({ schedulingType: 'daily', id: uuidv4() });
-    setCompleteSchedule([]);
-    setDisplayAddJobMonitoringModal(false);
+    resetStates();
     setActiveTab('0');
     setVisitedTabs(['0']);
-    setSelectedMonitoring(null);
-    setEditingData({ isEditing: false });
-    setErroneousTabs([]);
-    setErroneousScheduling(false);
     setActiveTab('0');
-    setMonitoringScope(null);
   };
 
   //Render footer buttons based on active tab
@@ -144,38 +144,34 @@ const AddEditJobMonitoringModal = ({
           <Button type="primary" ghost onClick={handlePrevious}>
             Previous
           </Button>
-          <Button
-            type="primary"
-            // disabled={savingJobMonitoring || visitedTabs.length !== tabs.length}
-            onClick={handleSaveJobMonitoring}
-            icon={savingJobMonitoring ? <LoadingOutlined /> : null}>
-            Submit
-          </Button>
+          {!isEditing && (
+            <Button
+              type="primary"
+              onClick={handleSaveJobMonitoring}
+              icon={savingJobMonitoring ? <LoadingOutlined /> : null}>
+              Submit
+            </Button>
+          )}
+          {isEditing && (
+            <Button
+              type="primary"
+              onClick={handleUpdateJobMonitoring}
+              icon={savingJobMonitoring ? <LoadingOutlined /> : null}>
+              Update
+            </Button>
+          )}
         </>
       );
     }
   };
-  //TODO -- remove tabs.tabpane replace with tabItems
-  // const tabItems = tabs.map((tab, index) => ({
-  //   key: index,
-  //   label: erroneousTabs.includes(index.toString()) ? (
-  //     <span>
-  //       <Badge color="var(--danger)" /> {`${tab.label}`}
-  //     </span>
-  //   ) : (
-  //     `${tab.label}`
-  //   ),
-  //   children: tab.component(),
-  //   forceRender: true,
-  // }));
 
-  // console.log(tabItems);
   return (
     <Modal
       open={displayAddJobMonitoringModal}
       width={800}
       onCancel={handleCancel}
       footer={renderFooter()}
+      destroyOnClose={true}
       maskClosable={false}>
       <Tabs type="card" activeKey={activeTab.toString()} onChange={(key) => handleTabChange(key)}>
         {tabs.map((tab, index) => (

Diff for: client-reactjs/src/components/application/jobMonitoring/AddEditJobMonitoringModal.jsx

@@ -46,7 +46,7 @@ const ApproveRejectModal = ({
     }
 
     if (fromErr) {
-      console.log('Form error');
+      setSavingEvaluation(false);
       return;
     }
 
@@ -132,7 +132,7 @@ const ApproveRejectModal = ({
               </Button>,
             ]
       }>
-      <>
+      <div style={{ padding: '5px' }}>
         {monitoringEvaluated && selectedMonitoring ? (
           <div style={{ marginTop: '15px' }}>
             This monitoring was{' '}
@@ -151,14 +151,14 @@ const ApproveRejectModal = ({
               name="approverComment"
               rules={[
                 { required: true, message: 'Please enter comments' },
-                { min: 3, message: 'Comments must be at least 3 characters' },
+                { min: 4, message: 'Comments must be at least 4 characters' },
                 { max: 200, message: 'Comments cannot exceed 200 characters' },
               ]}>
               <Input.TextArea rows={3} maxLength={200} showCount placeholder="Comments" />
             </Form.Item>
           </Form>
         )}
-      </>
+      </div>
     </Modal>
   );
 };