Create solver page; add Dockerfile

relog-web/src/solver/FilesBlock.js

@@ -0,0 +1,47 @@
+import { useState } from "react";
+import { useEffect } from "react";
+import Section from "../common/Section";
+import Card from "../common/Card";
+import styles from "./FilesBlock.module.css";
+import { useRef } from "react";
+
+const FilesBlock = (props) => {
+  const [filesFound, setFilesFound] = useState(false);
+
+  const fetchFiles = async () => {
+    const response = await fetch(`/jobs/${props.job}/output.json`);
+    if (response.ok) {
+      setFilesFound(true);
+    }
+  };
+
+  // Fetch files periodically from the server
+  useEffect(() => {
+    fetchFiles();
+    console.log(filesFound);
+    if (!filesFound) {
+      const interval = setInterval(() => {
+        fetchFiles();
+      }, 1000);
+      return () => clearInterval(interval);
+    }
+  }, [filesFound]);
+
+  let content = <div className={styles.nodata}>No files available</div>;
+  if (filesFound) {
+    content = (
+      <div className={styles.files}>
+        <a href={`/jobs/${props.job}/output.zip`}>output.zip</a>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <Section title="Output Files" />
+      <Card>{content}</Card>
+    </>
+  );
+};
+
+export default FilesBlock;

relog-web/src/solver/FilesBlock.module.css

@@ -0,0 +1,19 @@
+.files a {
+  display: block;
+  padding: 16px;
+  text-decoration: none;
+  color: var(--primary);
+}
+
+.files a:hover {
+  background-color: var(--primary);
+  color: white;
+  border-radius: var(--border-radius);
+}
+
+.nodata {
+  text-align: center;
+  padding: 24px 0;
+  color: #888;
+  margin: 0;
+}

relog-web/src/solver/LogBlock.js

@@ -0,0 +1,46 @@
+import { useState } from "react";
+import { useEffect } from "react";
+import Section from "../common/Section";
+import Card from "../common/Card";
+import styles from "./LogBlock.module.css";
+import { useRef } from "react";
+
+const LogBlock = (props) => {
+  const [log, setLog] = useState();
+  const preRef = useRef(null);
+
+  const fetchLog = async () => {
+    const response = await fetch(`/jobs/${props.job}/solve.log`);
+    const data = await response.text();
+    if (log !== data) {
+      setLog(data);
+    }
+  };
+
+  // Fetch log periodically from the server
+  useEffect(() => {
+    fetchLog();
+    const interval = setInterval(() => {
+      fetchLog();
+    }, 1000);
+    return () => clearInterval(interval);
+  }, []);
+
+  // Scroll to bottom whenever the log is updated
+  useEffect(() => {
+    preRef.current.scrollTop = preRef.current.scrollHeight;
+  }, [log]);
+
+  return (
+    <>
+      <Section title="Optimization Log" />
+      <Card>
+        <pre ref={preRef} className={styles.log}>
+          {log}
+        </pre>
+      </Card>
+    </>
+  );
+};
+
+export default LogBlock;

relog-web/src/solver/LogBlock.module.css

@@ -0,0 +1,8 @@
+.log {
+  max-height: 500px;
+  min-height: 500px;
+  border: 0;
+  margin: 0;
+  overflow: auto;
+  line-height: 1.4em;
+}

relog-web/src/solver/SolverPage.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { useParams } from "react-router-dom";
+import Footer from "../common/Footer";
+import Header from "../common/Header";
+import LogBlock from "./LogBlock";
+import FilesBlock from "./FilesBlock";
+
+const SolverPage = () => {
+  const params = useParams();
+
+  return (
+    <>
+      <Header title="Solver"></Header>
+      <div id="contentBackground">
+        {" "}
+        <div id="content">
+          <LogBlock job={params.job_id} />
+          <FilesBlock job={params.job_id} />
+        </div>
+      </div>
+      <Footer />
+    </>
+  );
+};
+
+export default SolverPage;