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

Jump to bottom

added build from git option #14

Merged
merged 2 commits into from
Jan 23, 2023
Merged

added build from git option #14

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f807b2a
added build from git option
Gkrumbach07 Dec 19, 2022
601b67c
made gitRef optional and added helperText
Gkrumbach07 Jan 9, 2023
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
17 changes: 16 additions & 1 deletion backend/src/routes/api/cre/creUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
CREResource,
CREResourceCreateRequest,
KubeFastifyInstance,
CREGitRepositorySpec,
} from '../../../types';
import { FastifyRequest } from 'fastify';
import { getImageList } from '../images/imageUtils';
Expand Down Expand Up @@ -87,7 +88,7 @@ export const postCRE = async (
return { success: false, error: 'Unable to add CRE resource: ' + body.name };
}

let spec: CREPackageListSpec | CREImageImportSpec;
let spec: CREPackageListSpec | CREImageImportSpec | CREGitRepositorySpec;

if (body.buildType === 'ImageImport') {
if (!body.fromImage) {
Expand All @@ -107,6 +108,20 @@ export const postCRE = async (
name: body.imagePullSecretName,
};
}
}
else if (body.buildType === 'GitRepository') {
if (!body.gitRef || !body.repository) {
return {
success: false,
error: "Parameters 'gitRef' and 'repository' are expected when using buildType: 'GitRepository'",
Gkrumbach07 marked this conversation as resolved.
Show resolved Hide resolved
};
}

spec = {
buildType: 'GitRepository',
repository: body.repository,
gitRef: body.gitRef,
} as CREGitRepositorySpec;
} else if (body.buildType === 'PackageList') {
if (body.baseImage) {
spec = {
Expand Down
12 changes: 10 additions & 2 deletions backend/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -497,6 +497,12 @@ export type CREImageImportSpec = {
}
}

export type CREGitRepositorySpec = {
buildType: 'GitRepository'
repository: string;
gitRef: string;
}

export type CREPackageListSpec = {
buildType: "PackageList";
baseImage: string;
Expand Down Expand Up @@ -553,7 +559,7 @@ export type CREResource = {
annotations?: { [key: string]: string };
creationTimestamp?: Date;
};
spec: CREImageImportSpec | CREPackageListSpec;
spec: CREImageImportSpec | CREPackageListSpec | CREGitRepositorySpec;
status?: {
phase?: CREImageStreamPhase
conditions?: {
Expand All @@ -576,10 +582,12 @@ export type CREImageStreamUpdateRequest = {
}

export type CREResourceCreateRequest = {
buildType: "ImageImport" | "PackageList"
buildType: "ImageImport" | "PackageList" | "GitRepository"
name: string;
description?: string;
user: string;
gitRef?: string,
repository?: string;
fromImage?: string;
imagePullSecretName?: string
runtimeEnvironment?: {
Expand Down
54 changes: 52 additions & 2 deletions frontend/src/pages/CREResources/AddImagePage/AddNewImageForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import './AddNewImageForm.scss';
import ExistingImageForm, { ExistingImageFormType } from './ExisitingImageForm';
import BuildImageForm, { BuildImageFormType } from './BuildImageForm';
import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
import GitImageForm, { GitImageFormType } from './GitImageForm';

export const AddNewImageForm: React.FC = () => {
const userName = useAppSelector((state) => state.user || '');
Expand Down Expand Up @@ -51,6 +52,20 @@ export const AddNewImageForm: React.FC = () => {
name: false,
},
};
// default state for "git image" form
const defaultGitState: GitImageFormType = {
state: {
repository: '',
name: '',
description: '',
gitRef: 'master'
Gkrumbach07 marked this conversation as resolved.
Show resolved Hide resolved
},
valid: {
repository: false,
name: false,
gitRef: true,
},
};
// default state for "build image" form
const defaultBuildState: BuildImageFormType = {
state: {
Expand Down Expand Up @@ -92,11 +107,13 @@ export const AddNewImageForm: React.FC = () => {
...defaultImportState.state,
...defaultBuildState.state,
...defaultExistingState.state,
...defaultGitState.state,
},
valid: {
...defaultImportState.valid,
...defaultBuildState.valid,
...defaultExistingState.valid,
...defaultGitState.valid
},
};

Expand Down Expand Up @@ -125,12 +142,16 @@ export const AddNewImageForm: React.FC = () => {

const [formState, formDispatch] = useReducer(reducer, defaultFormState);

const imageSelectOptions: { key: 'import' | 'existing' | 'build'; value: string }[] = useMemo(
const imageSelectOptions: { key: 'import' | 'git' | 'existing' | 'build'; value: string }[] = useMemo(
() => [
{
key: 'import',
value: 'Import an existing image',
},
{
key: 'git',
value: 'Build a new image from a git repository',
},
{
key: 'existing',
value: 'Create from an an existing image',
Expand Down Expand Up @@ -169,6 +190,28 @@ export const AddNewImageForm: React.FC = () => {
valid = false;
}
break;
case 'git':
if (formState.state.name.length > 0) {
formDispatch({ type: 'validate', key: 'name', value: true });
} else {
formDispatch({ type: 'validate', key: 'name', value: false });
valid = false;
}

if (formState.state.repository.length > 0) {
formDispatch({ type: 'validate', key: 'repository', value: true });
} else {
formDispatch({ type: 'validate', key: 'repository', value: false });
valid = false;
}

if (formState.state.repository.length > 0) {
Gkrumbach07 marked this conversation as resolved.
Show resolved Hide resolved
formDispatch({ type: 'validate', key: 'gitRef', value: true });
} else {
formDispatch({ type: 'validate', key: 'gitRef', value: false });
valid = false;
}
break;
case 'existing':
if (formState.state.name.length > 0) {
formDispatch({ type: 'validate', key: 'name', value: true });
Expand Down Expand Up @@ -244,6 +287,10 @@ export const AddNewImageForm: React.FC = () => {
return (
<ImportImageForm state={formState.state} valid={formState.valid} setValue={setValue} />
);
case 'git':
return (
<GitImageForm state={formState.state} valid={formState.valid} setValue={setValue} />
);
case 'existing':
return (
<ExistingImageForm state={formState.state} valid={formState.valid} setValue={setValue} />
Expand Down Expand Up @@ -281,11 +328,14 @@ export const AddNewImageForm: React.FC = () => {
)?.key;

if (selectedOption) {
const type = selectedOption === 'import' ? 'ImageImport' : selectedOption === 'git' ? "GitRepository" : 'PackageList'
createCREResource({
buildType: selectedOption === 'import' ? 'ImageImport' : 'PackageList',
buildType: type,
name: formState.state.name,
description: formState.state?.description,
user: userName,
gitRef: formState.state.gitRef,
repository: formState.state?.repository,
fromImage: formState.state?.repository,
baseImage: formState.state.source
? `${formState.state?.source?.image?.dockerImageRepo}:${
Expand Down
109 changes: 109 additions & 0 deletions frontend/src/pages/CREResources/AddImagePage/GitImageForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
import React from 'react';
import { FormGroup, TextInput } from '@patternfly/react-core';
import { ExclamationCircleIcon } from '@patternfly/react-icons';
import './ImageForm.scss';

export type GitImageFormType = {
state: {
repository: string;
name: string;
description: string;
gitRef: string
};
valid: {
repository: boolean;
name: boolean;
gitRef: boolean;
};
};

type GitImageFormProps = {
setValue: (key: string, value: unknown) => void;
} & GitImageFormType;

export const GitImageForm: React.FC<GitImageFormProps> = ({ state, valid, setValue }) => {
return (
<React.Fragment>
<FormGroup
label="Repository"
isRequired
fieldId="byon-image-repository-label"
helperText="Git repo where notebook images are stored."
helperTextInvalid="This field is required."
helperTextInvalidIcon={<ExclamationCircleIcon />}
validated={valid.repository || state.repository === '' ? undefined : 'error'}
>
<TextInput
id="byon-image-repository-input"
isRequired
type="text"
data-id="byon-image-repository-input"
name="byon-image-repository-input"
aria-describedby="byon-image-repository-input"
value={state.repository}
onChange={(value) => {
setValue('repository', value);
}}
/>
</FormGroup>
<FormGroup
label="Git Reference"
isRequired
Gkrumbach07 marked this conversation as resolved.
Show resolved Hide resolved
fieldId="git-ref-image-repository-label"
helperText="Git reference of selected git repo."
helperTextInvalid="This field is required."
helperTextInvalidIcon={<ExclamationCircleIcon />}
validated={valid.gitRef || state.gitRef === '' ? undefined : 'error'}
>
<TextInput
id="byon-image-git-ref-input"
isRequired
type="text"
data-id="byon-image-git-ref-input"
name="byon-image-git-ref-input"
aria-describedby="byon-image-git-ref-input"
value={state.gitRef}
onChange={(value) => {
setValue('gitRef', value);
}}
/>
</FormGroup>
<FormGroup
label="Name"
isRequired
fieldId="byon-image-name-label"
helperTextInvalid="This field is required."
helperTextInvalidIcon={<ExclamationCircleIcon />}
validated={valid.name || state.name === '' ? undefined : 'error'}
>
<TextInput
id="byon-image-name-input"
isRequired
type="text"
data-id="byon-image-name-input"
name="byon-image-name-input"
value={state.name}
onChange={(value) => {
setValue('name', value);
}}
/>
</FormGroup>
<FormGroup label="Description" fieldId="byon-image-description">
<TextInput
id="byon-image-description-input"
isRequired
type="text"
data-id="byon-image-description-input"
name="byon-image-description-input"
aria-describedby="byon-image-description-input"
value={state.description}
onChange={(value) => {
setValue('description', value);
}}
/>
</FormGroup>
</React.Fragment>
);
};

export default GitImageForm;
12 changes: 10 additions & 2 deletions frontend/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -393,6 +393,12 @@ export type CREImageImportSpec = {
};
};

export type CREGitRepositorySpec = {
buildType: 'GitRepository'
repository: string;
gitRef: string;
}

export type CREPackageListSpec = {
buildType: 'PackageList';
baseImage: string;
Expand Down Expand Up @@ -449,7 +455,7 @@ export type CREResource = {
annotations?: { [key: string]: string };
creationTimestamp?: Date;
};
spec: CREImageImportSpec | CREPackageListSpec;
spec: CREImageImportSpec | CREPackageListSpec | CREGitRepositorySpec;
status?: {
phase?: CREImageStreamPhase;
conditions?: {
Expand All @@ -472,11 +478,13 @@ export type CREImageStreamUpdateRequest = {
};

export type CREResourceCreateRequest = {
buildType: 'ImageImport' | 'PackageList';
buildType: "ImageImport" | "PackageList" | "GitRepository";
name: string;
description?: string;
user: string;
fromImage?: string;
repository?: string;
gitRef?: string,
imagePullSecretName?: string;
runtimeEnvironment?: {
osName: string;
Expand Down