Use light grey for todo in dashboard

ITISFoundation · Aug 13, 2024 · bd2db8c · bd2db8c
1 parent 06c899c
commit bd2db8c
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 141 deletions.
diff --git 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 (
-        <svg className="w-6 h-6 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <svg className="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l4-4 4 4m0 6l-4 4-4-4" />
         </svg>
       );
@@ -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 (
+    <div className="w-full h-8 flex mb-4">
+      {Object.entries(widths).map(([status, width]) => (
+        <div
+          key={status}
+          className={`${statusColors[status]} relative overflow-hidden`}
+          style={{ width: `${width}%` }}
+        >
+          {status === 'running' && (
+            <div className="absolute inset-0 opacity-50">
+              <div className="animate-progress-mac w-full h-full bg-white" />
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
 const JobCard = ({ job }) => (
   <div className="relative mb-2 group">
-    <div className={`p-3 rounded shadow ${statusColors[job.status]} transition-all duration-300 ease-in-out group-hover:shadow-lg`}>
+    <div className={`p-3 rounded shadow ${statusColors[job.status]} transition-all duration-300 ease-in-out`}>
       <div className="flex justify-between items-center">
-        <h3 className="font-bold text-white truncate">{job.name}</h3>
+        <h3 className={`font-bold ${job.status === 'todo' ? 'text-gray-800' : 'text-white'} truncate`}>{job.name}</h3>
         <StatusIcon status={job.status} />
       </div>
     </div>
     <div className={`absolute top-0 left-0 w-full p-3 rounded shadow ${statusColors[job.status]} opacity-0 group-hover:opacity-100 transition-all duration-300 ease-in-out z-10`}>
       <div className="flex justify-between items-center mb-2">
-        <h3 className="font-bold text-white">{job.name}</h3>
+        <h3 className={`font-bold ${job.status === 'todo' ? 'text-gray-800' : 'text-white'}`}>{job.name}</h3>
         <StatusIcon status={job.status} />
       </div>
-      <p className="text-gray-300 mt-2">{job.description}</p>
+      <p className={job.status === 'todo' ? 'text-gray-700' : 'text-gray-300'}>{job.description}</p>
     </div>
   </div>
 );
@@ -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 (
-    <div className="flex flex-row h-screen bg-gray-900 text-white">
-      <StatusColumn title="To Do" jobs={jobsByStatus.todo} />
-      <StatusColumn title="Running" jobs={jobsByStatus.running} />
-      <StatusColumn title="Done" jobs={jobsByStatus.done} />
-      <StatusColumn title="Failed" jobs={jobsByStatus.failed} />
+    <div className="flex flex-col h-screen bg-gray-900 text-white">
+      <ProgressBar jobsByStatus={jobsByStatus} />
+      <div className="flex-1 flex flex-row overflow-hidden">
+        <StatusColumn title="To Do" jobs={jobsByStatus.todo} />
+        <StatusColumn title="Running" jobs={jobsByStatus.running} />
+        <StatusColumn title="Done" jobs={jobsByStatus.done} />
+        <StatusColumn title="Failed" jobs={jobsByStatus.failed} />
+      </div>
     </div>
   );
 };
@@ -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
@@ -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
@@ -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
@@ -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