Feature/149 jobs frontend

Adds an overview of currently running jobs to the frontend

src/components/jobs/JobList.jsx

+import { faRefresh } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import axios from "axios";
+import React, { useContext, useEffect, useState } from "react";
+import { Button, Col, Container, Row } from "react-bootstrap";
+import Table from "react-bootstrap/Table";
+import { GlobalContext } from "../../contexts/GlobalContext";
+import JobListItem from "./JobListItem";
+
+const EMPTY_JOB_LIST = (<div>There are no jobs</div>);
+const LOADING_JOBS = (<div>Loading jobs</div>);
+
+const JOB_PAGE_SIZE = 10;
+
+const JobList = () => {
+
+    const { api_host } = useContext(GlobalContext);
+
+
+    const [state, setState] = useState({
+        jobs: [],
+        count: 0,
+        page: 0,
+        pages: 1,
+        loading: true
+    });
+
+    function loadJobs(api_host) {
+        setState(prev => ({ ...prev, loading: true }))
+        axios.get(`${api_host}uws/jobs/?page_size=${JOB_PAGE_SIZE}`)
+            .then((res) => {
+
+                const data = res.data;
+                setState(prev => ({
+                    ...prev,
+                    jobs: data.results,
+                    count: data.count,
+                    page: 1,
+                    pages: data.pages,
+                    loading: false
+                }));
+            })
+            .catch(error => {
+                console.log(error);
+                setState(prev => ({ ...prev, loading: false }))
+                // TODO: show warning pop-up
+            });
+    }
+
+    function loadPage(api_host, page) {
+        setState(prev => ({ ...prev, loading: true }))
+        axios.get(`${api_host}uws/jobs/?page_size=${JOB_PAGE_SIZE}&page=${page}`)
+            .then((res) => {
+                const data = res.data;
+                setState(prev => ({
+                    ...prev,
+                    jobs: data.results,
+                    count: data.count,
+                    page: page,
+                    pages: data.pages,
+                    loading: false
+                }));
+            })
+            .catch(error => {
+                console.log(error);
+                setState(prev => ({ ...prev, loading: false }))
+                // TODO: show warning pop-up
+            });
+    }
+
+
+    // Load Jobs from API
+    useEffect(() => { loadJobs(api_host) }, [api_host]);
+
+    function handleListRefresh() {
+        loadPage(api_host, state.page);
+    }
+
+    function handlePage(idx) {
+        const page = parseInt(idx); // is a string
+        loadPage(api_host, page);
+    }
+
+    return (
+        state.loading ? LOADING_JOBS : (
+            state.jobs.length > 0 ?
+                (
+                    <Container>
+                        <Row style={{ marginTop: "1rem", marginBottom: "1rem" }}>
+                            <Col>
+                                Jobs: {state.count}
+                            </Col>
+                            <Col style={{ textAlign: "center" }}>
+                                Page: <select value={state.page} onChange={e => handlePage(e.target.value)}>
+                                    {
+                                        Array.from({ length: state.pages }).map(
+                                            (_, idx) => (<option key={idx} value={idx + 1}>{idx + 1}</option>)
+                                        )
+                                    }
+                                </select>
+                            </Col>
+                            <Col style={{ textAlign: "right" }}>
+                                <Button
+                                    onClick={() => handleListRefresh()}
+                                    variant="primary"
+                                    size="sm">
+
+                                    <FontAwesomeIcon icon={faRefresh} />
+                                    <span style={{ marginLeft: '0.5rem' }}>REFRESH</span>
+                                </Button>
+                            </Col>
+                        </Row>
+                        <Row>
+                            <Table>
+                                <thead>
+                                    <tr>
+                                        <th>Run ID</th>
+                                        <th>Phase</th>
+                                        <th>Creation date</th>
+                                        <th>Parameters</th>
+                                        <th>Results</th>
+                                        <th>Action</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {state.jobs.map((job) => <JobListItem
+                                        key={job.url}
+                                        job={job}
+                                        refreshJobList={handleListRefresh} />
+                                    )}
+                                </tbody>
+                            </Table>
+                        </Row>
+                    </Container>
+                )
+                : EMPTY_JOB_LIST
+        )
+    )
+}
+
+export default JobList;