diff --git a/docker_scripts/http/dashboard/src/App.jsx b/docker_scripts/http/dashboard/src/App.jsx index f9bcf08..86ee5de 100755 --- a/docker_scripts/http/dashboard/src/App.jsx +++ b/docker_scripts/http/dashboard/src/App.jsx @@ -1,7 +1,7 @@ import React, { useState, useEffect, useCallback } from 'react' const statusColors = { - todo: 'bg-gray-700', + todo: 'bg-gray-300', // Changed to a light grey running: 'bg-blue-700', done: 'bg-green-700', failed: 'bg-red-700' @@ -11,7 +11,7 @@ const StatusIcon = ({ status }) => { switch (status) { case 'todo': return ( - + ); @@ -38,20 +38,48 @@ const StatusIcon = ({ status }) => { } }; +const ProgressBar = ({ jobsByStatus }) => { + const total = Object.values(jobsByStatus).reduce((acc, jobs) => acc + Object.keys(jobs).length, 0); + const widths = { + todo: (Object.keys(jobsByStatus.todo).length / total) * 100, + running: (Object.keys(jobsByStatus.running).length / total) * 100, + done: (Object.keys(jobsByStatus.done).length / total) * 100, + failed: (Object.keys(jobsByStatus.failed).length / total) * 100 + }; + + return ( +
+ {Object.entries(widths).map(([status, width]) => ( +
+ {status === 'running' && ( +
+
+
+ )} +
+ ))} +
+ ); +}; + const JobCard = ({ job }) => (
-
+
-

{job.name}

+

{job.name}

-

{job.name}

+

{job.name}

-

{job.description}

+

{job.description}

); @@ -91,7 +119,7 @@ const Dashboard = () => { useEffect(() => { fetchJobs(); - const intervalId = setInterval(fetchJobs, 5000); // Refresh every 5 seconds + const intervalId = setInterval(fetchJobs, 1000); // Refresh every second return () => clearInterval(intervalId); }, [fetchJobs]); @@ -111,11 +139,14 @@ const Dashboard = () => { } return ( -
- - - - +
+ +
+ + + + +
); }; @@ -129,3 +160,4 @@ const App = () => { } export default App; + diff --git a/docker_scripts/http/dashboard/src/index.css b/docker_scripts/http/dashboard/src/index.css index 6405f67..1d18c8c 100755 --- a/docker_scripts/http/dashboard/src/index.css +++ b/docker_scripts/http/dashboard/src/index.css @@ -2,4 +2,18 @@ @tailwind components; @tailwind utilities; -/* You can add any additional global styles below this line */ +@keyframes progress-mac { + 0% { + transform: translateX(-100%); + } + 50% { + transform: translateX(0); + } + 100% { + transform: translateX(100%); + } +} + +.animate-progress-mac { + animation: progress-mac 2s linear infinite; +} diff --git a/docker_scripts/http/dashboard/tailwind.config.js b/docker_scripts/http/dashboard/tailwind.config.js index dca8ba0..3daec51 100755 --- a/docker_scripts/http/dashboard/tailwind.config.js +++ b/docker_scripts/http/dashboard/tailwind.config.js @@ -5,7 +5,11 @@ export default { "./src/**/*.{js,ts,jsx,tsx}", ], theme: { - extend: {}, + extend: { + animation: { + 'progress-mac': 'progress-mac 2s linear infinite', + }, + }, }, plugins: [], } diff --git a/docker_scripts/http/dashboard/vite.config.js b/docker_scripts/http/dashboard/vite.config.js index 10af4ef..69b4764 100755 --- a/docker_scripts/http/dashboard/vite.config.js +++ b/docker_scripts/http/dashboard/vite.config.js @@ -11,7 +11,7 @@ export default defineConfig({ }, server: { proxy: { - '/api': 'http://localhost:3000' + '/api': 'http://localhost:8888' } } }) diff --git a/docker_scripts/http/src/App.jsx b/docker_scripts/http/src/App.jsx deleted file mode 100755 index 7a34341..0000000 --- a/docker_scripts/http/src/App.jsx +++ /dev/null @@ -1,126 +0,0 @@ -import React, { useState, useEffect } from 'react' - -const statusColors = { - todo: 'bg-gray-700', - running: 'bg-blue-700', - done: 'bg-green-700', - failed: 'bg-red-700' -}; - -const statusOptions = ['todo', 'running', 'done', 'failed']; - -const JobCard = ({ job, onStatusChange }) => ( -
-

{job.name}

-

{job.description}

- -
-); - -const StatusColumn = ({ title, jobs, onStatusChange }) => ( -
-

{title}

-
- {jobs.map(job => ( - - ))} -
-
-); - -const Dashboard = () => { - const [jobs, setJobs] = useState([]); - const [loading, setLoading] = useState(true); - const [error, setError] = useState(null); - - useEffect(() => { - const fetchJobs = async () => { - try { - const response = await fetch('http://localhost:3001/api/jobs'); - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } - const data = await response.json(); - setJobs(data); - setLoading(false); - } catch (e) { - console.error("Failed to fetch jobs:", e); - setError("Failed to load jobs. Please try again later."); - setLoading(false); - } - }; - - fetchJobs(); - - const intervalId = setInterval(fetchJobs, 30000); - - return () => clearInterval(intervalId); - }, []); - - const handleStatusChange = async (id, newStatus) => { - try { - const response = await fetch(`http://localhost:3001/api/jobs/${id}`, { - method: 'PUT', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ status: newStatus }), - }); - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } - setJobs(jobs.map(job => - job.id === id ? { ...job, status: newStatus } : job - )); - } catch (e) { - console.error("Failed to update job status:", e); - // Handle the error appropriately in your UI - } - }; - - const jobsByStatus = { - todo: jobs.filter(job => job.status === 'todo'), - running: jobs.filter(job => job.status === 'running'), - done: jobs.filter(job => job.status === 'done'), - failed: jobs.filter(job => job.status === 'failed') - }; - - if (loading) { - return
Loading...
; - } - - if (error) { - return
{error}
; - } - - return ( -
- - - - -
- ); -}; - -function App() { - return ( -
- -
- ); -} - -export default App;