Merge pull request #17 from unity-sds/features/update-forms

Features/update forms

Author: rtapella

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.4.0] - 2023-12-13
+- Updated /job/new endpoint so it lists the applications for which jobs may be executed.
+- Moved chirp rebinning job form to /jobs/new/chirp
+- Added job submission forms for L1A and L1B PGEs
+- Added process utility to help facilitate changes listed above.
+
 ## [0.3.1] - 2023-12-12
 - Fixed link associated with logo on mobile platforms
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "unity-ui",
   "private": true,
-  "version": "0.3.1",
+  "version": "0.4.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/Root.tsx

@@ -6,12 +6,19 @@ import {
 import Home from "./routes/home"
 import JobMonitoring from "./routes/jobs/monitoring";
 import NewJob from "./routes/jobs/new";
+
 import Navbar from "./components/Navbar"
 import WebView from "./components/WebView";
 
 import Config from "./Config";
 
+import { getProcesses, getProcessRoute } from "./utils/processes";
+import NotFound from "./routes/errors/not-found";
+
 function Root() {
+
+   const processes = getProcesses();
+
    return (
       <div className="viewWrapper">
          <Navbar />
@@ -21,7 +28,20 @@ function Root() {
                <Route path="/jobs/monitoring" element={<JobMonitoring />} />
                <Route path="/jobs/monitoring/:jobid_param" element={<JobMonitoring />} />
                <Route path="/jobs/new" element={<NewJob />} />
-               <Route path="*" element={<Home />} />
+
+               {
+                  /* Add routes for job execution forms */
+                  processes.map( (item) => {
+                     const path = "/jobs/new/" + item['id'];
+                     const route:JSX.Element | null = getProcessRoute(item['id']);
+                     return (
+                        <Route path={path} element={ (route) ? route : <NotFound />} key={"route_" + item['id']}/>
+                     )
+                  })
+               }
+
+               <Route path="/" element={<Home />} />
+               <Route path="*" element={<NotFound />} />
             </Routes>
          </div>
       </div>

src/components/BackLink/index.tsx

@@ -0,0 +1,18 @@
+import { Link } from "react-router-dom";
+import ChevronLeft from "@nasa-jpl/stellar/icons/chevron_left.svg";
+
+type BackLinkProps = {
+   label:string;
+   path:string;
+};
+
+export const BackLink = (props:BackLinkProps) => {
+
+   const {label, path} = props;
+
+   return(
+      <>
+         <Link to={path}><img src={ChevronLeft} alt={label} style={{ height: '12px', width: '12px' }}/>{label}</Link>
+      </>
+   )
+}

src/components/DocumentMeta/DocumentMeta.tsx

@@ -7,7 +7,7 @@ export type DocumentMetaProps = {
 
 export const DocumentMeta = (props:DocumentMetaProps) => {
 
-  let {title, description} = props;
+  const {title, description} = props;
 
   return (
     <Helmet>

src/routes/errors/not-found/index.tsx

@@ -0,0 +1,19 @@
+import { DocumentMeta } from "../../../components/DocumentMeta/DocumentMeta"
+
+function NotFound() {
+
+   return (
+      <>
+         <DocumentMeta
+            title="Not Found"
+            description="Not Found"
+         />
+         <div className="main-view">
+            <h1>Not Found</h1>
+            The requested resource cannot be found
+         </div>
+      </>
+   )
+}
+
+export default NotFound

src/routes/jobs/monitoring/index.css

@@ -8,4 +8,12 @@
 .job-detail-item {
    padding-bottom: 8px;
    word-wrap: break-word;
+}
+
+.button-bar button {
+   margin-right: 10px;
+}
+
+.button-bar button:last-child {
+   margin-right: 0px;
 }

src/routes/jobs/monitoring/index.tsx

@@ -155,7 +155,9 @@ function JobMonitoring() {
          <PanelGroup autoSaveId="job-monitoring-ui" direction="horizontal">
             <Panel order={1} className='main-view' style={{overflow: "auto"}}>
                <h1>Job Monitoring</h1>
-               <Button onClick={() => navigate("/jobs/new")}>Run New Job or Batch</Button>
+               <div className='button-bar'>
+                  <Button onClick={() => navigate("/jobs/new")}>Run New Job</Button>
+               </div>
                <div className="ag-theme-stellar data-grid-container">
                   <AgGridReact
                      rowData={rowData} // Row Data for Rows