Skip to content

Commit

Permalink
[Frontend] 1. Added a django db table. 2. React fetches the results f…
Browse files Browse the repository at this point in the history 
…rom this db table. 3. Added migrations scripts for the newly created task-models.py - django table

Change-Id: I7ae105083c0a5bac884c59b34cd801f5dee23f83
  • Loading branch information
Athithyaa Selvam committed Mar 21, 2024
1 parent 9e65d1d commit 2287ffe
Showing 1 changed file with 43 additions and 203 deletions.
246 changes: 43 additions & 203 deletions desktop/core/src/desktop/js/reactComponents/FallbackComponent.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
//
// export default FallbackComponent;

import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import axios from 'axios';

const tableStyle = {
Expand Down Expand Up @@ -101,19 +101,21 @@ const TaskScheduler = () => {
taskParams,
};

axios.post('/api/handle_submit', payload)
.then(response => {
const taskInfo = {
...response.data,
taskname: taskName,
time: response.data.time,
progress: response.data.progress,
user: response.data.user, // Replace with actual current user
status: response.data.status,
taskId: response.data.taskId, // Assuming the backend returns a unique task ID
};
setScheduledTasks(prevTasks => [...prevTasks, taskInfo]);
})
axios.post('/desktop/api2/handle_submit', payload)
// .then(response => {
// const taskInfo = {
// ...response.data,
// time: response.data.time,
// progress: response.data.progress,
// triggered_by: response.data.triggered_by,
// task_name: response.data.taskName,
// parameters: response.data.taskParams,
// status: response.data.status,
// task_id: response.data.task_id, // Assuming the backend returns a unique task ID
// };
// console.log('task name')
// setScheduledTasks(prevTasks => [...prevTasks, taskInfo]);
// })
.catch(error => {
console.error('Error scheduling task', error);
});
Expand Down Expand Up @@ -150,8 +152,30 @@ const TaskScheduler = () => {
};


export const TaskBrowserTable = ({ tasks }) => {
// export const TaskBrowserTable = ({ tasks }) => {
export const TaskBrowserTable = () => {
// The tasks prop contains the array of scheduled tasks
// logic to fetch tasks from database table

const [tasks, setTasks] = useState([]);

useEffect(() => {
const fetchTasks = () => {
axios.get('/desktop/api2/get_taskserver_tasks/')
.then(response => {
setTasks(response.data);
})
.catch(error => {
console.error('Error fetching tasks', error);
});
};

fetchTasks(); //fetch tasks initially
const interval = setInterval(fetchTasks, 5000);

return () => clearInterval(interval); // Cleanup on unmount

}, []);

// Render the table with the tasks data
return (
Expand All @@ -174,11 +198,11 @@ export const TaskBrowserTable = ({ tasks }) => {
<tr key={index} style={{ borderBottom: '1px solid #ddd', backgroundColor: index % 2 ? '#f9f9f9' : '#fff' }}>
<td style={tdStyle}>{task.time}</td>
<td style={tdStyle}>{task.progress}</td>
<td style={tdStyle}>{task.user}</td>
<td style={tdStyle}>{task.taskName}</td>
<td style={tdStyle}>{JSON.stringify(task.taskParams)}</td>
<td style={tdStyle}>{task.triggered_by}</td>
<td style={tdStyle}>{task.task_name}</td>
<td style={tdStyle}>{JSON.stringify(task.parameters)}</td>
<td style={tdStyle}>{task.status}</td>
<td style={tdStyle}>{task.taskId}</td>
<td style={tdStyle}>{task.task_id}</td>
</tr>
))}
</tbody>
Expand All @@ -190,187 +214,3 @@ export const TaskBrowserTable = ({ tasks }) => {
export default TaskScheduler;























// import React, { useState, useEffect } from 'react';
// import axios from 'axios';
//
// const TasksTable = () => {
// const [tasks, setTasks] = useState([]);
//
// useEffect(() => {
// // Here you would fetch the task data from your backend API
// // For the example, we're using static data
// const fetchedTasks = [
// { id: 1,
// name: 'Task 1',
// parameter: 'Parameter for Task 1',
// schedule: 'Interval for Task 1',
// triggeredBy: 'Triggered by for Task 1',
// isActive: true,
// lastTriggered: 'Last triggered time for Task 1' },
// { id: 2,
// name: 'Task 2',
// parameter: 'Parameter for Task 2',
// schedule: 'Interval for Task 2',
// triggeredBy: 'Triggered by for Task 2',
// isActive: true,
// lastTriggered: 'Last triggered time for Task 2' }
// // ...more tasks
// ];
// setTasks(fetchedTasks);
// }, []);
//
// const triggerTask = (taskId) => {
// console.log(`Triggering task with ID: ${taskId}`);
// // Here you would implement the API call to trigger the task
// };
//
// return (
// <table style={{ borderCollapse: 'collapse', width: '100%' }}>
// <thead>
// <tr>
// <th style={{ border: '1px solid black', padding: '8px', backgroundColor: '#f2f2f2' }}>Tasks</th>
// <th style={{ border: '1px solid black', padding: '8px', backgroundColor: '#f2f2f2' }}>Parameters</th>
// <th style={{ border: '1px solid black', padding: '8px', backgroundColor: '#f2f2f2' }}>Schedule interval</th>
// <th style={{ border: '1px solid black', padding: '8px', backgroundColor: '#f2f2f2' }}>Triggered by</th>
// <th style={{ border: '1px solid black', padding: '8px', backgroundColor: '#f2f2f2' }}>Is active</th>
// <th style={{ border: '1px solid black', padding: '8px', backgroundColor: '#f2f2f2' }}>Last triggered</th>
// <th style={{ border: '1px solid black', padding: '8px', backgroundColor: '#f2f2f2' }}>Actions</th>
// </tr>
// </thead>
// <tbody>
// {tasks.map(task => (
// <>
// <tr key={task.id} style={{ borderBottom: '1px solid #ddd' }}>
// <td style={{ border: '1px solid black', padding: '8px' }}>{task.name}</td>
// <td style={{ border: '1px solid black', padding: '8px' }}>{task.parameter}</td>
// <td style={{ border: '1px solid black', padding: '8px' }}>{task.schedule}</td>
// <td style={{ border: '1px solid black', padding: '8px' }}>{task.triggeredBy}</td>
// <td style={{ border: '1px solid black', padding: '8px' }}>{task.isActive ? '✅' : '❌'}</td>
// <td style={{ border: '1px solid black', padding: '8px' }}>{task.lastTriggered}</td>
// <td>
// <button onClick={() => triggerTask(task.id)}>Trigger Task</button>
// </td>
// </tr>
// </>
// ))}
// </tbody>
// </table>
// );
// };
//
// // export default TasksTable;
//
//
//
//
//
// // UploadProgress Component
// const UploadProgress = ({ uploadUuid }) => {
// const [progress, setProgress] = useState(0);
//
// useEffect(() => {
// const checkUploadProgress = () => {
// // axios.get(`/upload/progress/${uploadUuid}/`)
// axios.get(`/upload/progress/${uploadUuid}/`)
// .then(response => {
// const newProgress = response.data.progress;
// setProgress(response.data.progress);
// if (newProgress >= 100) {
// console.log('Upload complete, stopping progress checks.');
// clearInterval(intervalId);
// }
// })
// .catch(error => {
// console.error('Error getting upload progress', error);
// clearInterval(intervalId);
// });
// };
//
// const intervalId = setInterval(() => {
// console.log('Checking upload progress...');
// checkUploadProgress();
// }, 1000);
// // const intervalId = setInterval(checkUploadProgress, 1000);
//
// return () => {
// console.log('Clearing interval on component unmount.');
// clearInterval(intervalId);
// };
// }, [uploadUuid]);
//
// return (
// <div>
// <h2>Upload Progress</h2>
// <div style={{ width: '100%', backgroundColor: '#ddd' }}>
// <div style={{ width: `${progress}%`, backgroundColor: 'green', height: '20px' }}>
// {progress}%
// </div>
// </div>
// </div>
// );
// };
//
// // UploadManager Component
// const UploadManager = () => {
// const [uploadUuid, setUploadUuid] = useState(null);
//
// const startUpload = () => {
// axios.post('/dummy_upload/')
// .then(response => {
// setUploadUuid(response.data.uuid);
// })
// .catch(error => {
// console.error('Error starting upload', error);
// });
// };
//
// return (
// <div>
// <button onClick={startUpload}>Start Upload</button>
// {uploadUuid && <UploadProgress uploadUuid={uploadUuid} />}
// </div>
// );
// };
//
// // FallbackComponent (or any other name you choose)
// const FallbackComponent = () => {
// const [showUploadManager, setShowUploadManager] = useState(false);
//
// return (
// <div>
// <h1>Tasks Dashboard</h1>
// <TasksTable />
// <button onClick={() => setShowUploadManager(true)}>Show Upload Manager</button>
// {showUploadManager && (
// <div>
// <h1>Upload Manager</h1>
// <UploadManager />
// </div>
// )}
// </div>
// );
// };
//
// export default FallbackComponent;

0 comments on commit 2287ffe

Please sign in to comment.