Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CADC-13596 Addressed requests #90

Merged
merged 3 commits into from
Nov 25, 2024
Merged

CADC-13596 Addressed requests #90

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
77d6370
CADC-13596 Addressed QA requests
zss1980 Nov 22, 2024
a3e311a
CADC-13596 Updated sorting utils and tests
zss1980 Nov 23, 2024
8acac11
CADC-13596 Addressed qa
zss1980 Nov 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 39 additions & 20 deletions src/react/SciencePortalForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,22 +14,27 @@ import {faQuestionCircle} from "@fortawesome/free-solid-svg-icons";

// Utils
import {getProjectImagesMap, getProjectNames} from "./utilities/utils";
import {
DEFAULT_CORES_NUMBER, DEFAULT_IMAGE_NAMES,
DEFAULT_RAM_NUMBER, SKAHA_PROJECT
} from "./utilities/constants";

class SciencePortalForm extends React.Component {

constructor(props) {
super(props)
this.selectedRAM = ""
this.selectedCores = ""
this.selectedRAM = DEFAULT_RAM_NUMBER
this.selectedCores = DEFAULT_CORES_NUMBER
if (typeof props.fData.contextData !== "undefined") {
this.selectedRAM = props.fData.contextData.defaultRAM
this.selectedCores = props.fData.contextData.defaultCores
this.selectedRAM = Math.max(props.fData.contextData.defaultRAM, DEFAULT_RAM_NUMBER)
this.selectedCores = Math.max(props.fData.contextData.defaultCores, DEFAULT_CORES_NUMBER)
}
this.state = {
fData:props.fData,
selectedRAM: this.selectedRAM,
selectedCores: this.selectedCores,
selectedProject: undefined
selectedProject: undefined,
selectedImageId: undefined
}
this.handleChange = this.handleChange.bind(this);
this.resetForm = this.resetForm.bind(this);
Expand All @@ -39,7 +44,7 @@ class SciencePortalForm extends React.Component {
// Entire session form state data object needs to be put back
// into the form on session name input change or the
// form can't render
var tmpData = this.state.fData
let tmpData = this.state.fData
tmpData.sessionName = event.target.value
this.setState({fData: tmpData});
}
Expand All @@ -60,9 +65,10 @@ class SciencePortalForm extends React.Component {
event.stopPropagation();

this.setState({
selectedCores : this.state.fData.contextData.defaultCores,
selectedRAM : this.state.fData.contextData.defaultRAM,
selectedProject: ''
selectedCores : Math.max(this.props.fData.contextData.defaultCores, DEFAULT_CORES_NUMBER),
selectedRAM : Math.max(this.props.fData.contextData.defaultRAM, DEFAULT_RAM_NUMBER),
selectedProject: '',
selectedImageId: '',
});
this.state.fData.resetHandler();
}
Expand Down Expand Up @@ -138,9 +144,12 @@ 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] : []
const defaultImages = projectsOfType[SKAHA_PROJECT] || []
const imagesOfProject = this.state.selectedProject ? projectsOfType[this.state.selectedProject] : defaultImages
const defaultImageName = this.state.fData.selectedType ? DEFAULT_IMAGE_NAMES[this.state.fData.selectedType] : undefined
const defaultImageId = defaultImageName ? imagesOfProject.find(mObj => mObj.name === defaultImageName)?.id : imagesOfProject[0]?.id

return (
return (
<>
{Object.keys(this.state.fData).length !== 0 &&
this.state.fData.imageList &&
Expand Down Expand Up @@ -168,15 +177,15 @@ class SciencePortalForm extends React.Component {
<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.")}
{this.renderPopover("Image Project","The project for which the image is used. Default: Use the Skaha project to access the default CANFAR image list.")}
</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}
value={this.state.selectedProject || SKAHA_PROJECT}
>
<option className="sp-form" value="">Select project</option>
{availableProjects?.map(project => (
Expand All @@ -195,6 +204,8 @@ class SciencePortalForm extends React.Component {
<Form.Select
name="image"
className="sp-form-cursor"
onChange={(e) => this.setState({selectedImageId: e.target.value || undefined})}
value={this.state.selectedImageId || defaultImageId}
>
{imagesOfProject?.map(mapObj => (
<option className="sp-form" key={mapObj.id} value={mapObj.id}>{mapObj.name}</option>
Expand All @@ -204,7 +215,7 @@ class SciencePortalForm extends React.Component {
</Row>
<Row className="sp-form-row">
<Col sm={4}>
<Form.Label className="sp-form-label" column="sm">name
<Form.Label className="sp-form-label" column="sm">session name
{this.renderPopover("Session Name","Name for the session. Alphanumeric and '-' characters only.")}
</Form.Label>
</Col>
Expand Down Expand Up @@ -244,7 +255,7 @@ class SciencePortalForm extends React.Component {
<Row className="sp-form-row">
<Col sm={4}>
<Form.Label className="sp-form-label" column="sm"># cores
{this.renderPopover("# of Cores", "Number of cores used by the session. Default: 2")}
{this.renderPopover("# of Cores", "Number of cores used by the session.")}
</Form.Label>
</Col>
<Col sm={7}>
Expand All @@ -265,7 +276,7 @@ class SciencePortalForm extends React.Component {
{/* placeholder column so buttons line up with form entry elements */}
</Col>
<Col sm={7}>
<Button disabled={!this.state.selectedProject} variant="primary" type="submit" size="sm" className="sp-form-button">Launch</Button>
<Button 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>
Expand All @@ -282,17 +293,25 @@ class SciencePortalForm extends React.Component {
</Col>
{this.renderPlaceholder()}
</Row>
<Row className="sp-form-row">
<Col className="sp-placeholder" sm={3}>
<Form.Label className="sp-form-label" column="sm">project
{this.renderPopover("Image Project","The project for which the image is used.")}
</Form.Label>
</Col>
{this.renderPlaceholder()}
</Row>
<Row className="sp-form-row">
<Col className="sp-placeholder" sm={3}>
<Form.Label className="sp-form-label" column="sm">container image
{this.renderPopover("Container Image","Reference to an image to use to start the session container")}
{this.renderPopover("Container Image","Reference to an image to use to start the session container. Default: use skaha project access the default CANFAR image list.")}
</Form.Label>
</Col>
{this.renderPlaceholder()}
</Row>
<Row className="sp-form-row">
<Col className="sp-placeholder" sm={3}>
<Form.Label className="sp-form-label" column="sm">name
<Form.Label className="sp-form-label" column="sm">session name
{this.renderPopover("Session Name","Name for the session. Default name reflects the current number of sessions of the selected type.\n" +
"Alphanumeric characters only. 15 character maximum.")}
</Form.Label>
Expand All @@ -302,15 +321,15 @@ class SciencePortalForm extends React.Component {
<Row className="sp-form-row">
<Col className="sp-placeholder" sm={3}>
<Form.Label className="sp-form-label" column="sm">memory
{this.renderPopover("Memory","System memory (RAM) to be used for the session. Default: 16G")}
{this.renderPopover("Memory","System memory (RAM) to be used for the session.")}
</Form.Label>
</Col>
{this.renderPlaceholder()}
</Row>
<Row className="sp-form-row">
<Col className="sp-placeholder" sm={3}>
<Form.Label className="sp-form-label" column="sm"># cores
{this.renderPopover("# of Cores","Number of cores used by the session. Default: 2")}
{this.renderPopover("# of Cores","Number of cores used by the session.")}
</Form.Label>
</Col>
{this.renderPlaceholder()}
Expand Down
25 changes: 14 additions & 11 deletions src/react/SciencePortalPrivateForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,19 @@ import Popover from 'react-bootstrap/Popover';
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faQuestionCircle} from "@fortawesome/free-solid-svg-icons";

// Constants
import {DEFAULT_CORES_NUMBER, DEFAULT_RAM_NUMBER} from "./utilities/constants";

class SciencePortalPrivateForm extends React.Component {

constructor(props) {
super(props)
this.selectedRAM = ""
this.selectedCores = ""
this.selectedRAM = DEFAULT_RAM_NUMBER
this.selectedCores = DEFAULT_CORES_NUMBER
this.repositoryUsername = props.authenticatedUsername && props.authenticatedUsername !== "Login" ? props.authenticatedUsername : ""
if (typeof props.fData.contextData !== "undefined") {
this.selectedRAM = props.fData.contextData.defaultRAM
this.selectedCores = props.fData.contextData.defaultCores
this.selectedRAM = Math.max(props.fData.contextData.defaultRAM, DEFAULT_RAM_NUMBER)
this.selectedCores = Math.max(props.fData.contextData.defaultCores, DEFAULT_CORES_NUMBER)
}

const repositoryHostArray = props.fData.repositoryHosts
Expand Down Expand Up @@ -84,8 +87,8 @@ class SciencePortalPrivateForm extends React.Component {
const formProps = this.props;

this.setState({
selectedCores : this.state.fData.contextData.defaultCores,
selectedRAM : this.state.fData.contextData.defaultRAM,
selectedCores : Math.max(this.props.fData.contextData.defaultCores, DEFAULT_CORES_NUMBER),
selectedRAM : Math.max(this.props.fData.contextData.defaultRAM, DEFAULT_RAM_NUMBER),
repositoryUsername: formProps.authenticatedUsername && formProps.authenticatedUsername !== "Login"
? formProps.authenticatedUsername : ""
});
Expand Down Expand Up @@ -185,7 +188,7 @@ class SciencePortalPrivateForm extends React.Component {
<Form onSubmit={this.state.fData.submitHandler} className="sp-form">
<fieldset className="mt-3">
<div className="ps-4 pe-4 pt-4 w-75">
<legend className="fs-6">Image access details</legend>
<legend className="fs-6">Image access</legend>
<hr />
</div>
<Row className="sp-form-row">
Expand Down Expand Up @@ -245,7 +248,7 @@ class SciencePortalPrivateForm extends React.Component {
</fieldset>
<fieldset>
<div className="ps-4 pe-4 pt-4 w-75">
<legend className="fs-6">Execution details</legend>
<legend className="fs-6">Launch session</legend>
<hr/>
</div>
<Row className="sp-form-row">
Expand All @@ -270,7 +273,7 @@ class SciencePortalPrivateForm extends React.Component {
</Row>
<Row className="sp-form-row">
<Col sm={4}>
<Form.Label className="sp-form-label" column="sm">name
<Form.Label className="sp-form-label" column="sm">session name
{this.renderPopover("Session Name", "Name for the session. Alphanumeric and '-' characters only.")}
</Form.Label>
</Col>
Expand Down Expand Up @@ -310,7 +313,7 @@ class SciencePortalPrivateForm extends React.Component {
<Row className="sp-form-row">
<Col sm={4}>
<Form.Label className="sp-form-label" column="sm"># cores
{this.renderPopover("# of Cores", "Number of cores used by the session. Default: 2")}
{this.renderPopover("# of Cores", "Number of cores used by the session.")}
</Form.Label>
</Col>
<Col sm={7}>
Expand Down Expand Up @@ -360,7 +363,7 @@ class SciencePortalPrivateForm extends React.Component {
</Row>
<Row className="sp-form-row">
<Col className="sp-placeholder" sm={3}>
<Form.Label className="sp-form-label" column="sm">name
<Form.Label className="sp-form-label" column="sm">session name
{this.renderPopover("Session Name","Name for the session. Default name reflects the current number of sessions of the selected type.\n" +
"Alphanumeric characters only. 15 character maximum.")}
</Form.Label>
Expand Down
20 changes: 20 additions & 0 deletions src/react/utilities/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
// Defaults
export const DEFAULT_CORES_NUMBER = 2
export const DEFAULT_RAM_NUMBER = 8
export const DEFAULT_NOTEBOOK_SKAHA_IMAGE = 'astroml-notebook:latest'
export const DEFAULT_DESKTOP_SKAHA_IMAGE = 'desktop:latest'
export const DEFAULT_CARTA_SKAHA_IMAGE = 'carta:latest'
export const DEFAULT_CONTRIBUTED_SKAHA_IMAGE = 'astroml-vscode:latest'
export const NOTEBOOK_TYPE = 'notebook'
export const CARTA_TYPE = 'carta'
export const CONTRIBUTED_TYPE = 'contributed'
export const DESKTOP_TYPE = 'desktop'
export const SKAHA_PROJECT = 'skaha'

export const DEFAULT_IMAGE_NAMES = {
[CARTA_TYPE]: DEFAULT_CARTA_SKAHA_IMAGE,
[CONTRIBUTED_TYPE]: DEFAULT_CONTRIBUTED_SKAHA_IMAGE,
[DESKTOP_TYPE]: DEFAULT_DESKTOP_SKAHA_IMAGE,
[NOTEBOOK_TYPE]: DEFAULT_NOTEBOOK_SKAHA_IMAGE,

}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We're incurring some technical debt here as the defaults are all hard-coded. The default number of cores and memory is fine, but the default Images could be removed or added to/from the Harbor repository, which means re-releasing the Science Portal each time. Oh well, we'll live with it for now.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agree, but I did not find a better way to target a requested image. However, if something changed, we still can relay on the first image in the sorted list
Screenshot 2024-11-25 at 3 27 25 PM

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In addition, a decoupled version of the front-end will be easily (and fast) deployable

68 changes: 48 additions & 20 deletions src/react/utilities/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,48 +41,76 @@ const getImageName = (image) => {
return parts?.[2];
};

const isValidImageId = (id) => {
if (!id || typeof id !== 'string') return false;
const parts = id.split('/');
if (parts.length !== 3) return false;
const [registry, project, imageWithVersion] = parts;
if (!registry || !project || !imageWithVersion) return false;
const [imageName, version] = imageWithVersion.split(':');
return Boolean(imageName && version);
};

const getImagesNamesSorted = (images) => {
if (!Array.isArray(images)) return [];

return images
.filter(image => image?.id)
.map(image => ({
...image,
imageName: image.id.split('/')?.[2] || ''
}))
.map(image => {
const parts = image.id.split('/');
const imageWithVersion = parts[2] || '';
const [imageName, version] = imageWithVersion.split(':');

return {
...image,
name: imageWithVersion,
imageName,
version: version || ''
};
})
.filter(image => image.imageName)
.sort((a, b) =>
a.imageName.localeCompare(b.imageName, undefined, {
.sort((a, b) => {
if (a.imageName === b.imageName) {
// Handle version comparison for same image names
if (a.version === 'latest') return -1;
if (b.version === 'latest') return 1;
return b.version.localeCompare(a.version, undefined, {
numeric: true,
sensitivity: 'base'
});
}
// Sort image names alphabetically
return a.imageName.localeCompare(b.imageName, undefined, {
sensitivity: 'base',
})
);
});
});
};

const getProjectImagesMap = (images) => {
if (!Array.isArray(images)) return {};

return images.reduce((acc, image) => {
// First group images by project
const projectGroups = images.reduce((acc, image) => {
if (!image?.id) return acc;

const projectName = getImageProject(image);
if (!projectName) return acc;
// Skip invalid project names or malformed IDs
if (!projectName || !isValidImageId(image.id)) return acc;

if (!acc[projectName]) {
acc[projectName] = [];
}

const imageName = getImageName(image)
acc[projectName].push({
...image,
name: imageName,
});

acc[projectName].sort((a, b) =>
a.name.localeCompare(b.name, undefined, { sensitivity: 'base' })
);

acc[projectName].push(image);
return acc;
}, {});

// Then sort images within each project
Object.keys(projectGroups).forEach(projectName => {
projectGroups[projectName] = getImagesNamesSorted(projectGroups[projectName]);
});

return projectGroups;
};

const getProjectNames = (keyedProjects) => {
Expand Down
Loading