From 1b7bedf8d25e27654cfa01b1c90d32b45e76e24a Mon Sep 17 00:00:00 2001
From: Daniil Palagin <daniilpalaginjob@gmail.com>
Date: Wed, 30 Oct 2024 13:51:35 +0100
Subject: [PATCH] [#62] Refactor ExecutionsPage

Refactor Executions class component to functional ExecutionsPage component.
Move to folder pages
Replace Bootstrap with Mui
Replace Fortawesome with Mui icons
---
 src/Router.jsx                          |   4 +-
 src/components/Executions.jsx           |  96 -------------------
 src/pages/Executions/ExecutionsPage.jsx | 122 ++++++++++++++++++++++++
 3 files changed, 124 insertions(+), 98 deletions(-)
 delete mode 100644 src/components/Executions.jsx
 create mode 100644 src/pages/Executions/ExecutionsPage.jsx

diff --git a/src/Router.jsx b/src/Router.jsx
index cc1016a..610308a 100644
--- a/src/Router.jsx
+++ b/src/Router.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Routes, BrowserRouter, Route } from "react-router-dom";
 import HomePage from "./pages/Home/HomePage.jsx";
-import Executions from "./components/Executions.jsx";
+import ExecutionsPage from "./pages/Executions/ExecutionsPage.jsx";
 import ScriptsPage from "./pages/Script/ScriptsPage.jsx";
 import Dagre from "./components/dagre/Dagre.jsx";
 import NotFoundPage from "./pages/Error/NotFoundPage.jsx";
@@ -14,7 +14,7 @@ const Router = () => {
         <Route element={<Layout />}>
           <Route path="/" element={<HomePage />} />
           <Route path="scripts" element={<ScriptsPage />} />
-          <Route path="executions" element={<Executions />} />
+          <Route path="executions" element={<ExecutionsPage />} />
           <Route path="script" element={<Dagre />} />
           <Route path="*" element={<NotFoundPage />} />
         </Route>
diff --git a/src/components/Executions.jsx b/src/components/Executions.jsx
deleted file mode 100644
index 4322605..0000000
--- a/src/components/Executions.jsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import React, { Fragment } from "react";
-import {
-  ABSOLUTE_PATH,
-  DISPLAY_NAME,
-  EXECUTION_DURATION,
-  FINISH_DATE_UNIX,
-  Rest,
-  START_DATE_UNIX,
-  TRANSFORMATION,
-} from "./rest/Rest";
-import { Col, Container, Row, Table } from "react-bootstrap";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faMugHot, faTrash, faRunning, faPlayCircle, faEdit, faQuestion } from "@fortawesome/free-solid-svg-icons";
-import { Link } from "react-router-dom";
-
-class Executions extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      data: [],
-    };
-  }
-
-  componentDidMount() {
-    Rest.getExecutions().then((response) => {
-      console.log(response);
-      this.setState({ data: response });
-    });
-  }
-
-  render() {
-    if (this.state.data === []) {
-      return <h3>Loading</h3>;
-    } else {
-      return (
-        <>
-          <h3>Executions</h3>
-          <Table striped bordered hover>
-            <thead>
-              <tr>
-                <th>Status</th>
-                <th>Name</th>
-                <th>Started</th>
-                <th>Finished</th>
-                <th>Duration</th>
-                <th style={{ textAlign: "center" }}>Action</th>
-              </tr>
-            </thead>
-            <tbody>
-              {this.state.data
-                .filter((v) => {
-                  return v !== null;
-                })
-                .map((data, key) => {
-                  return (
-                    <tr key={key}>
-                      <td align={"center"}>
-                        <FontAwesomeIcon icon={faMugHot} />
-                      </td>
-                      <td>{data[DISPLAY_NAME]}</td>
-                      <td>{data[EXECUTION_DURATION]}ms</td>
-                      <td>
-                        <Container>
-                          <Row>
-                            <Col>
-                              <Link to={`/script?file=${data[ABSOLUTE_PATH]}&transformation=${data[TRANSFORMATION]}`}>
-                                <FontAwesomeIcon icon={faEdit} />
-                              </Link>
-                            </Col>
-                            <Col
-                              onClick={() => {
-                                window.open(
-                                  data["http://onto.fel.cvut.cz/ontologies/s-pipes/rdf4j-transformation-id"],
-                                  "_blank",
-                                );
-                              }}
-                            >
-                              <FontAwesomeIcon icon={faQuestion} />
-                            </Col>
-                            {/*<Col><FontAwesomeIcon icon={faPlayCircle} /></Col>*/}
-                            {/*<Col><FontAwesomeIcon icon={faTrash} /></Col>*/}
-                          </Row>
-                        </Container>
-                      </td>
-                    </tr>
-                  );
-                })}
-            </tbody>
-          </Table>
-        </>
-      );
-    }
-  }
-}
-
-export default Executions;
diff --git a/src/pages/Executions/ExecutionsPage.jsx b/src/pages/Executions/ExecutionsPage.jsx
new file mode 100644
index 0000000..9640cb2
--- /dev/null
+++ b/src/pages/Executions/ExecutionsPage.jsx
@@ -0,0 +1,122 @@
+import React, { useEffect, useState } from "react";
+import {
+  ABSOLUTE_PATH,
+  DISPLAY_NAME,
+  EXECUTION_DURATION,
+  FINISH_DATE_UNIX,
+  Rest,
+  START_DATE_UNIX,
+  TRANSFORMATION,
+} from "../../components/rest/Rest.jsx";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography,
+  IconButton,
+  CircularProgress,
+  Box,
+} from "@mui/material";
+import EditIcon from "@mui/icons-material/Edit";
+import HelpIcon from "@mui/icons-material/Help";
+import AccessTimeIcon from "@mui/icons-material/AccessTime";
+import { Link } from "react-router-dom";
+
+const ExecutionsPage = () => {
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await Rest.getExecutions();
+        setData(response);
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchData();
+  }, []);
+
+  if (loading) {
+    return (
+      <Box
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+        height="100vh"
+        width="100vw"
+        overflow="hidden"
+        position="fixed"
+        top={0}
+        left={0}
+      >
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  return (
+    <>
+      <Typography variant="h4" gutterBottom>
+        Executions
+      </Typography>
+      <TableContainer>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell align="center">Status</TableCell>
+              <TableCell>Name</TableCell>
+              <TableCell>Started</TableCell>
+              <TableCell>Finished</TableCell>
+              <TableCell>Duration</TableCell>
+              <TableCell align="center">Action</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {data
+              .filter((v) => v !== null)
+              .map((data, key) => {
+                return (
+                  <TableRow key={key}>
+                    <TableCell align="center">
+                      <AccessTimeIcon />
+                    </TableCell>
+                    <TableCell>{data[DISPLAY_NAME]}</TableCell>
+                    <TableCell>{data[START_DATE_UNIX] || "N/A"}</TableCell>
+                    <TableCell>{data[FINISH_DATE_UNIX] || "N/A"}</TableCell>
+                    <TableCell>{data[EXECUTION_DURATION]} ms</TableCell>
+                    <TableCell align="center">
+                      <IconButton
+                        component={Link}
+                        to={`/script?file=${data[ABSOLUTE_PATH]}&transformation=${data[TRANSFORMATION]}`}
+                      >
+                        <EditIcon />
+                      </IconButton>
+                      <IconButton
+                        onClick={() => {
+                          window.open(
+                            data["http://onto.fel.cvut.cz/ontologies/s-pipes/rdf4j-transformation-id"],
+                            "_blank",
+                          );
+                        }}
+                      >
+                        <HelpIcon />
+                      </IconButton>
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </>
+  );
+};
+
+export default ExecutionsPage;