Merge pull request #10 from ABI-Deployment-Thesis/ruiar/support-new-d…

…b-design feat(ui): support new db design
ABI-Deployment-Thesis · Aug 31, 2024 · 9f1db97 · 9f1db97
2 parents bd7b543 + 29d3d19
commit 9f1db97
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 33 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -23,8 +23,9 @@ COPY --from=build /app/dist /usr/share/nginx/html
 # Copy custom NGINX configuration file
 COPY default.conf /etc/nginx/conf.d/default.conf
 
-COPY env.docker.sh /docker-entrypoint.d/env.docker.sh
-RUN chmod +x /docker-entrypoint.d/env.docker.sh
+COPY env.docker.sh /docker-entrypoint.d/env.sh
+RUN dos2unix /docker-entrypoint.d/env.sh \
+    && chmod +x /docker-entrypoint.d/env.sh
 
 EXPOSE 80
 CMD ["nginx", "-g", "daemon off;"]
diff --git a/src/components/AddModelModal/AddModelModal.jsx b/src/components/AddModelModal/AddModelModal.jsx
@@ -9,12 +9,12 @@ function AddModelModal({ show, handleClose, refreshModels }) {
   const [type, setType] = useState('predictive');
   const [engine, setEngine] = useState('docker');
   const [language, setLanguage] = useState('Python3');
-  const [dockerTag, setDockerTag] = useState('3.9.6');
+  const [languageVersion, setLanguageVersion] = useState('3.9.6');
+  const [memLimit, setMemLimit] = useState('256M');
+  const [cpuPercentage, setCpuPercentage] = useState(50);
   const [serialization, setSerialization] = useState('joblib');
   const [features, setFeatures] = useState([{ name: '', type: 'int' }]);
   const [dependencies, setDependencies] = useState([{ library: '', version: '' }]);
-  const [memLimit, setMemLimit] = useState('256M');
-  const [cpuPercentage, setCpuPercentage] = useState(50);
   const [file, setFile] = useState(null);
   const [formError, setFormError] = useState(null);
 
@@ -43,9 +43,9 @@ function AddModelModal({ show, handleClose, refreshModels }) {
     setLanguage(selectedLanguage);
 
     if (selectedLanguage === 'R') {
-      setDockerTag('4.1.3');
+      setLanguageVersion('4.1.3');
     } else if (selectedLanguage === 'Python3') {
-      setDockerTag('3.9');
+      setLanguageVersion('3.9.6');
     }
   };
 
@@ -59,7 +59,7 @@ function AddModelModal({ show, handleClose, refreshModels }) {
 
     if (engine === 'docker') {
       formData.append('language', language);
-      formData.append('docker_tag', dockerTag);
+      formData.append('language_version', languageVersion);
       formData.append('mem_limit', memLimit);
       formData.append('cpu_percentage', cpuPercentage);
     }
@@ -128,11 +128,11 @@ function AddModelModal({ show, handleClose, refreshModels }) {
               </Form.Group>
 
               <Form.Group className="mb-3">
-                <Form.Label>Docker Tag</Form.Label>
+                <Form.Label>Language Version</Form.Label>
                 <Form.Control
                   type="text"
-                  value={dockerTag}
-                  onChange={(e) => setDockerTag(e.target.value)}
+                  value={languageVersion}
+                  onChange={(e) => setLanguageVersion(e.target.value)}
                   required
                 />
               </Form.Group>

diff --git a/src/components/ModelRunDetailsModal/ModelRunDetailsModal.jsx b/src/components/ModelRunDetailsModal/ModelRunDetailsModal.jsx
@@ -62,25 +62,14 @@ const ModelRunDetailsModal = ({ show, handleClose, runId }) => {
           <>
             <strong>Model ID:</strong> {runDetails.model_id}<br />
             <strong>State: <span className={stateClass}>{runDetails.state}</span></strong><br />
-            <strong>Created At:</strong> {new Date(runDetails.createdAt).toLocaleString()}<br />
-            <strong>Updated At:</strong> {new Date(runDetails.updatedAt).toLocaleString()}<br />
-            {runDetails.container_id !== undefined && runDetails.container_id !== null && runDetails.container_id !== '' && (
-              <>
-                <strong>Container ID:</strong> {runDetails.container_id}<br />
-              </>
-            )}
-
-            {(runDetails.state == 'failed' || runDetails.state == 'finished') && (
-              <>
-                <strong>Container Exit Code:</strong> {runDetails.container_exit_code}<br />
-              </>
-            )}
+            <strong>Created At:</strong> {new Date(runDetails.created_at).toLocaleString()}<br />
+            <strong>Updated At:</strong> {new Date(runDetails.updated_at).toLocaleString()}<br />
             <br />
 
-            {(runDetails.state == 'failed' || runDetails.state == 'finished') && (
+            {(runDetails.state == 'finished' || runDetails.state == 'failed') && (
               <>
-                <strong>{runDetails.state === 'failed' ? 'Logs:' : 'Result:'}</strong>
-                <pre>{runDetails.result}</pre>
+                <strong>{runDetails.state === 'finished' ? 'Result:' : 'Logs:'}</strong>
+                <pre>{runDetails.state === 'finished' ? runDetails.result : runDetails.logs}</pre>
               </>
             )}
 

diff --git a/src/pages/ModelRunner/ModelRunner.jsx b/src/pages/ModelRunner/ModelRunner.jsx
@@ -15,7 +15,7 @@ function ModelRunner() {
   const [showDetailsModal, setShowDetailsModal] = useState(false);
   const [selectedRunId, setSelectedRunId] = useState(null);
   const [selectedModelId, setSelectedModelId] = useState(null);
-  const [sortConfig, setSortConfig] = useState({ key: 'updatedAt', direction: 'desc' });
+  const [sortConfig, setSortConfig] = useState({ key: 'updated_at', direction: 'desc' });
   const location = useLocation();
 
   const fetchModelRuns = async (modelId = '') => {
@@ -29,7 +29,7 @@ function ModelRunner() {
       });
 
       const runsWithDuration = response.data.map(run => {
-        const durationMs = new Date(run.updatedAt) - new Date(run.createdAt);
+        const durationMs = new Date(run.updated_at) - new Date(run.created_at);
         return { ...run, durationMs };
       });
 
@@ -134,8 +134,8 @@ function ModelRunner() {
             <th onClick={() => handleSort('model_engine')}>
               Engine {getSortArrow('model_engine')}
             </th>
-            <th onClick={() => handleSort('updatedAt')}>
-              Last Updated On {getSortArrow('updatedAt')}
+            <th onClick={() => handleSort('updated_at')}>
+              Last Updated On {getSortArrow('updated_at')}
             </th>
             <th onClick={() => handleSort('duration')}>
               Duration {getSortArrow('duration')}
@@ -151,8 +151,8 @@ function ModelRunner() {
               <td>{run.model_name}</td>
               <td>{run.model_type}</td>
               <td>{run.model_engine}</td>
-              <td>{new Date(run.updatedAt).toLocaleString()}</td>
-              <td>{formatDuration(run.createdAt, run.updatedAt)}</td>
+              <td>{new Date(run.updated_at).toLocaleString()}</td>
+              <td>{formatDuration(run.created_at, run.updated_at)}</td>
               <td>{getStateIcon(run.state)}</td>
             </tr>
           ))}