Yadhap/jobmonitoring UI plus apis

client-reactjs/package.json

@@ -35,6 +35,7 @@
     "redux-thunk": "^2.3.0",
     "socket.io-client": "^4.1.3",
     "styled-components": "^5.3.0",
+    "validator": "^13.11.0",
     "yaml": "^2.2.2"
   },
   "devDependencies": {

client-reactjs/src/components/admin/notifications/MsTeams/VewHookDetails.jsx

@@ -1,18 +1,23 @@
 import React from 'react';
-import { Modal, Descriptions } from 'antd';
+import { Modal, Descriptions, Tooltip } from 'antd';
 import { Constants } from '../../../common/Constants';
 
 function VewHookDetails({ showHooksDetailModal, setShowHooksDetailModal, selectedHook }) {
   return (
     <Modal
       visible={showHooksDetailModal}
+      width={800}
       maskClosable={false}
       footer={null}
       onCancel={() => setShowHooksDetailModal(false)}>
       {selectedHook && (
         <Descriptions title="Hook Details" bordered column={1} size="small">
           <Descriptions.Item label="Name">{selectedHook.name}</Descriptions.Item>
-          <Descriptions.Item label="URL">{selectedHook.url}</Descriptions.Item>
+          <Descriptions.Item label="URL">
+            <Tooltip title={selectedHook.url}>
+              {selectedHook.url.length > 80 ? selectedHook.url.substring(0, 80) + '...' : selectedHook.url}
+            </Tooltip>
+          </Descriptions.Item>
           <Descriptions.Item label="Created By">{selectedHook.createdBy}</Descriptions.Item>
           <Descriptions.Item label="Approval Status">
             {selectedHook.approved ? 'Approved' : 'Not Approved'}

client-reactjs/src/components/application/jobMonitoring/AddEditJobMonitoringModal.jsx

@@ -0,0 +1,187 @@
+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,
+  intermittentScheduling,
+  setIntermittentScheduling,
+  setCompleteSchedule,
+  completeSchedule,
+  cron,
+  setCron,
+  cronMessage,
+  setCronMessage,
+  erroneousScheduling,
+  form,
+  clusters,
+  teamsHooks,
+  setSelectedMonitoring,
+  savingJobMonitoring,
+  jobMonitorings,
+  setEditingData,
+  isEditing,
+  erroneousTabs,
+  setErroneousTabs,
+  setErroneousScheduling,
+}) => {
+  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']);
+
+  // Handle tab change
+  const handleTabChange = (key) => {
+    setActiveTab(key);
+    if (!visitedTabs.includes(key)) {
+      setVisitedTabs([...visitedTabs, key]);
+    }
+  };
+
+  //Tabs for modal
+  const tabs = [
+    {
+      label: 'Basic',
+      component: () => (
+        <JobMonitoringBasicTab
+          form={form}
+          clusters={clusters}
+          monitoringScope={monitoringScope}
+          setMonitoringScope={setMonitoringScope}
+          jobMonitorings={jobMonitorings}
+          isEditing={isEditing}
+        />
+      ),
+      id: 1,
+    },
+    {
+      label: 'Monitoring Details',
+      id: 2,
+      component: () => (
+        <JobMonitoringTab
+          form={form}
+          intermittentScheduling={intermittentScheduling}
+          setIntermittentScheduling={setIntermittentScheduling}
+          setCompleteSchedule={setCompleteSchedule}
+          completeSchedule={completeSchedule}
+          cron={cron}
+          setCron={setCron}
+          cronMessage={cronMessage}
+          setCronMessage={setCronMessage}
+          erroneousScheduling={erroneousScheduling}
+          monitoringScope={monitoringScope}
+        />
+      ),
+    },
+    {
+      label: 'Notifications',
+      id: 3,
+      component: () => <JobMonitoringNotificationTab form={form} teamsHooks={teamsHooks} />,
+    },
+  ];
+
+  // When next button is clicked, go to next tab
+  const handleNext = () => {
+    const nextTab = (parseInt(activeTab) + 1).toString();
+    setActiveTab(nextTab);
+    setVisitedTabs([...visitedTabs, nextTab]);
+  };
+
+  // When previous button is clicked, go back to previous tab
+  const handlePrevious = () => {
+    const previousTab = (parseInt(activeTab) - 1).toString();
+    setActiveTab(previousTab);
+    setVisitedTabs([...visitedTabs, previousTab]);
+  };
+
+  const handleCancel = () => {
+    form.resetFields();
+    setIntermittentScheduling({ schedulingType: 'daily', id: uuidv4() });
+    setCompleteSchedule([]);
+    setDisplayAddJobMonitoringModal(false);
+    setActiveTab('0');
+    setVisitedTabs(['0']);
+    setSelectedMonitoring(null);
+    setEditingData({ isEditing: false });
+    setErroneousTabs([]);
+    setErroneousScheduling(false);
+    setActiveTab('0');
+    setMonitoringScope(null);
+  };
+
+  //Render footer buttons based on active tab
+  const renderFooter = () => {
+    if (activeTab === '0') {
+      return (
+        <>
+          <Button type="primary" ghost onClick={handleNext}>
+            Next
+          </Button>
+        </>
+      );
+    } else if (activeTab === '1') {
+      return (
+        <>
+          <Button type="primary" ghost onClick={handlePrevious}>
+            Previous
+          </Button>
+          <Button type="primary" ghost onClick={handleNext}>
+            Next
+          </Button>
+        </>
+      );
+    } else {
+      return (
+        <>
+          <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>
+        </>
+      );
+    }
+  };
+
+  return (
+    <Modal
+      visible={displayAddJobMonitoringModal}
+      width={800}
+      onCancel={handleCancel}
+      footer={renderFooter()}
+      maskClosable={false}>
+      <Tabs activeKey={activeTab.toString()} onChange={(key) => handleTabChange(key)}>
+        {tabs.map((tab, index) => (
+          <Tabs.TabPane
+            key={index}
+            tab={
+              erroneousTabs.includes(index.toString()) ? (
+                <span>
+                  <Badge color="var(--danger)" /> {`${tab.label}`}
+                </span>
+              ) : (
+                `${tab.label}`
+              )
+            }>
+            {tab.component()}
+          </Tabs.TabPane>
+        ))}
+      </Tabs>
+    </Modal>
+  );
+};
+
+export default AddEditJobMonitoringModal;

client-reactjs/src/components/application/jobMonitoring/AddJobMonitoringBtn.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Button } from 'antd';
+import Text from '../../common/Text';
+
+// Add new job monitoring button
+function AddJobMonitoringBtn({ handleAddJobMonitoringButtonClick }) {
+  return (
+    <Button
+      onClick={handleAddJobMonitoringButtonClick}
+      type="primary"
+      style={{ margin: '5px', display: 'block', marginLeft: 'auto' }}>
+      <Text text="Add New Job Monitoring" />
+    </Button>
+  );
+}
+
+export default AddJobMonitoringBtn;