add run action to model table

frontend/src/components/ExtractionLog.tsx

@@ -2,6 +2,7 @@ import { Table, TableColumnsType } from "antd";
 import { useContext, useEffect, useState } from "react";
 import { StopOutlined } from "@ant-design/icons";
 import { AppContext } from "../context/AppContext";
+import { ModelContext } from "../context/ModelContext";
 
 type ExtractionLogType = {
  id: string;
@@ -27,40 +28,68 @@ const COLUMNS: TableColumnsType<ExtractionLogType> = [
  },
 ];
 
+function sleep(ms: number) {
+ return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+let interval: number;
+
 const ExtractionLog = () => {
  const { token } = useContext(AppContext);
+ const { run, setRun } = useContext(ModelContext);
  const [extractionLog, setExtractionLog] = useState<ExtractionLogType[]>([]);
- const [loading, setLoading] = useState(false);
 
  useEffect(() => {
- fetch(`https://localhost:5001/extraction-log`, {
- method: "GET",
- headers: new Headers({
- Authorization: `Bearer ${token.accessToken}`,
- }),
- })
- .then((response) => {
- if (response.ok) {
- return response.json();
- }
- throw response;
- })
- .then((data) => {
- setExtractionLog(data);
- })
- .catch((error) => {
- console.error(error);
- alert("Error deleting.");
- })
- .finally(() => {
- setLoading(false);
+ if (run !== undefined) {
+ setExtractionLog((prev) => {
+ const i = prev.length - 1;
+ prev[i] = { ...prev[i], status: "Running" };
+ return prev;
  });
+ const f = async () => {
+ await sleep(5000);
+ setRun(undefined);
+ };
+ f();
+ }
+ }, [run]);
+
+ useEffect(() => {
+ // Polling for extraction-log.
+ interval = setInterval(
+ () =>
+ fetch(`https://localhost:5001/extraction-log`, {
+ method: "GET",
+ headers: new Headers({
+ Authorization: `Bearer ${token.accessToken}`,
+ }),
+ })
+ .then((response) => {
+ if (response.ok) {
+ return response.json();
+ }
+ throw response;
+ })
+ .then((data) => {
+ const next = data.map((o: any) => ({ ...o, status: "Successful" }));
+ setExtractionLog(next);
+ })
+ .catch((error) => {
+ console.error(error);
+ }),
+ 1000
+ );
  }, []);
 
+ const dataSource = extractionLog;
+ if (run !== undefined) {
+ const i = dataSource.length - 1;
+ dataSource[i] = { ...dataSource[i], status: "Running" };
+ }
+
  return (
  <Table
- loading={loading}
- dataSource={extractionLog}
+ dataSource={dataSource}
  columns={COLUMNS}
  pagination={false}
  size="small"

frontend/src/components/ModelTable.tsx

@@ -1,13 +1,17 @@
 import { useContext, useState } from "react";
 import { Table, TableColumnsType } from "antd";
-import { DeleteOutlined, EyeOutlined } from "@ant-design/icons";
+import {
+ DeleteOutlined,
+ EyeOutlined,
+ PlayCircleOutlined,
+} from "@ant-design/icons";
 import { Model, ModelContext } from "../context/ModelContext";
 import { AppContext } from "../context/AppContext";
 import ForgeModelViewModal from "./ForgeModelViewModal";
 
 const ModelTable = () => {
  const { token } = useContext(AppContext);
- const { models, setModels } = useContext(ModelContext);
+ const { models, setModels, setRun } = useContext(ModelContext);
  const [viewModel, setViewModel] = useState<Model>();
  const [loading, setLoading] = useState(false);
 
@@ -47,6 +51,36 @@ const ModelTable = () => {
  }}
  />
  <span style={{ padding: "0 2px" }} />
+ <PlayCircleOutlined
+ alt="Run"
+ onClick={() => {
+ setLoading(true);
+ fetch(
+ `https://localhost:5001/run?operation=${record.type}&modelId=${record.id}`,
+ {
+ method: "POST",
+ headers: new Headers({
+ Authorization: `Bearer ${token.accessToken}`,
+ }),
+ }
+ )
+ .then((response) => {
+ setRun(record.id);
+ if (response.ok) {
+ return response;
+ }
+ throw response;
+ })
+ .catch((error) => {
+ console.error(error);
+ alert("Error with run request.");
+ })
+ .finally(() => {
+ setLoading(false);
+ });
+ }}
+ />
+ <span style={{ padding: "0 2px" }} />
  <DeleteOutlined
  alt="Delete Model"
  onClick={() => {

frontend/src/context/ModelContext.tsx

@@ -42,6 +42,8 @@ type Context = {
  setModelToAdd: Dispatch<SetStateAction<Model | undefined>>;
  derivatives: Map<string, string>;
  setDerivatives: Dispatch<SetStateAction<Map<string, string>>>;
+ run: string | undefined;
+ setRun: Dispatch<SetStateAction<string | undefined>>;
 };
 
 export const ModelContext = createContext<Context>({
@@ -51,6 +53,8 @@ export const ModelContext = createContext<Context>({
  setModelToAdd: () => {},
  derivatives: new Map(),
  setDerivatives: () => {},
+ run: undefined,
+ setRun: () => {},
 });
 
 export const ModelContextProvider = ({ children }: PropsWithChildren) => {
@@ -60,6 +64,7 @@ export const ModelContextProvider = ({ children }: PropsWithChildren) => {
  const [derivatives, setDerivatives] = useState<Map<string, string>>(
  new Map()
  );
+ const [run, setRun] = useState<string>();
 
  useEffect(() => {
  fetch("https://localhost:5001/models", {
@@ -108,6 +113,8 @@ export const ModelContextProvider = ({ children }: PropsWithChildren) => {
  setModelToAdd,
  derivatives,
  setDerivatives,
+ run,
+ setRun,
  }}
  >
  {children}