Merge pull request #79 from szautkin/CADC-13596

CADC-13596 Added a project dropdown
opencadc · Nov 20, 2024 · b6f16ff · b6f16ff
2 parents a6f0d85 + 91a04b9
commit b6f16ff
Show file tree

Hide file tree

Showing 4 changed files with 2,724 additions and 8 deletions.
diff --git a/src/react/SciencePortalForm.js b/src/react/SciencePortalForm.js
@@ -12,6 +12,9 @@ import Popover from 'react-bootstrap/Popover';
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faQuestionCircle} from "@fortawesome/free-solid-svg-icons";
 
+// Utils
+import {getProjectImagesMap, getProjectNames} from "./utilities/utils";
+
 class SciencePortalForm extends React.Component {
 
   constructor(props) {
@@ -25,7 +28,8 @@ class SciencePortalForm extends React.Component {
     this.state = {
       fData:props.fData,
       selectedRAM: this.selectedRAM,
-      selectedCores: this.selectedCores
+      selectedCores: this.selectedCores,
+      selectedProject: undefined
     }
     this.handleChange = this.handleChange.bind(this);
     this.resetForm = this.resetForm.bind(this);
@@ -57,7 +61,8 @@ class SciencePortalForm extends React.Component {
 
     this.setState({
       selectedCores : this.state.fData.contextData.defaultCores,
-      selectedRAM : this.state.fData.contextData.defaultRAM
+      selectedRAM : this.state.fData.contextData.defaultRAM,
+      selectedProject: ''
     });
     this.state.fData.resetHandler();
   }
@@ -131,6 +136,10 @@ class SciencePortalForm extends React.Component {
       }
     }
 
+    const projectsOfType = getProjectImagesMap(this.state.fData.imageList)
+    const availableProjects = getProjectNames(projectsOfType) || []
+    const imagesOfProject = this.state.selectedProject ? projectsOfType[this.state.selectedProject] : []
+
     return (
       <>
         {Object.keys(this.state.fData).length !== 0 && 
@@ -156,6 +165,26 @@ class SciencePortalForm extends React.Component {
                 </Form.Select>
               </Col>
             </Row>
+            <Row className="sp-form-row">
+              <Col sm={4}>
+                <Form.Label className="sp-form-label" column="sm">project
+                  {this.renderPopover("Image Project","The project for which the image is used.")}
+                </Form.Label>
+              </Col>
+              <Col sm={7}>
+                <Form.Select
+                    name="project"
+                    className="sp-form-cursor"
+                    onChange={(e) => this.setState({selectedProject: e.target.value || undefined})}
+                    value={this.state.selectedProject}
+                >
+                  <option className="sp-form" value="">Select project</option>
+                  {availableProjects?.map(project => (
+                      <option className="sp-form" key={project} value={project}>{project}</option>
+                  ))}
+                </Form.Select>
+              </Col>
+            </Row>
             <Row className="sp-form-row">
               <Col sm={4}>
                 <Form.Label className="sp-form-label" column="sm">container image
@@ -164,11 +193,11 @@ class SciencePortalForm extends React.Component {
               </Col>
               <Col sm={7}>
                 <Form.Select
-                  name="image"
-                  className="sp-form-cursor"
-                  >
-                  {this.state.fData.imageList?.map(mapObj => (
-                    <option className="sp-form" key={mapObj.id} value={mapObj.id}>{mapObj.name}</option>
+                    name="image"
+                    className="sp-form-cursor"
+                >
+                  {imagesOfProject?.map(mapObj => (
+                      <option className="sp-form" key={mapObj.id} value={mapObj.id}>{mapObj.name}</option>
                   ))}
                 </Form.Select>
               </Col>
@@ -236,7 +265,7 @@ class SciencePortalForm extends React.Component {
               {/* placeholder column so buttons line up with form entry elements */}
               </Col>
               <Col sm={7}>
-                <Button variant="primary" type="submit"  size="sm" className="sp-form-button">Launch</Button>
+                <Button disabled={!this.state.selectedProject} variant="primary" type="submit"  size="sm" className="sp-form-button">Launch</Button>
                 <Button variant="secondary" size="sm" onClick={this.resetForm} className="sp-reset-button">Reset</Button>
               </Col>
             </Row>