kubeflow
/
notebooks
mirror of https://github.com/kubeflow/notebooks.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(ws): Add advanced pod configurations in Workspace Edit (#468) 

Signed-off-by: Charles Thao <cthao@redhat.com>
This commit is contained in:
Charles Thao 2025-07-10 12:49:53 -04:00 committed by Bhakti Narvekar
parent 5e9c88f582
commit 0e90e5da65
18 changed files with 639 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
workspaces/frontend/src/app/components/ValidationErrorAlert.tsx
View File

@ -1,10 +1,11 @@
import React from 'react';
import { Alert, List, ListItem } from '@patternfly/react-core';
import { ValidationError } from '~/shared/api/backendApiTypes';
import { ErrorEnvelopeException } from '~/shared/api/apiUtils';
interface ValidationErrorAlertProps {
title: string;
errors: ValidationError[];
errors: (ValidationError | ErrorEnvelopeException)[];
}
export const ValidationErrorAlert: React.FC<ValidationErrorAlertProps> = ({ title, errors }) => {

22
workspaces/frontend/src/app/pages/WorkspaceKinds/Form/EditableLabels.tsx
View File

@ -71,9 +71,18 @@ type ColumnNames<T> = { [K in keyof T]: string };
interface EditableLabelsProps {
rows: WorkspaceOptionLabel[];
setRows: (value: WorkspaceOptionLabel[]) => void;
title?: string;
description?: string;
buttonLabel?: string;
}
export const EditableLabels: React.FC<EditableLabelsProps> = ({ rows, setRows }) => {
export const EditableLabels: React.FC<EditableLabelsProps> = ({
rows,
setRows,
title = 'Labels',
description,
buttonLabel = 'Label',
}) => {
const columnNames: ColumnNames<WorkspaceOptionLabel> = {
key: 'Key',
value: 'Value',
@ -86,12 +95,15 @@ export const EditableLabels: React.FC<EditableLabelsProps> = ({ rows, setRows })
header={
<FormFieldGroupHeader
titleText={{
text: 'Labels',
id: 'workspace-kind-image-ports',
text: title,
id: `${title}-labels`,
}}
titleDescription={
<>
<div>Labels are key/value pairs that are attached to Kubernetes objects.</div>
<div>
{description ||
'Labels are key/value pairs that are attached to Kubernetes objects.'}
</div>
<div className="pf-u-font-size-sm">
<strong>{rows.length} added</strong>
</div>
@ -141,7 +153,7 @@ export const EditableLabels: React.FC<EditableLabelsProps> = ({ rows, setRows })
]);
}}
>
Add Label
{`Add ${buttonLabel}`}
</Button>
</FormFieldGroupExpandable>
);

97
workspaces/frontend/src/app/pages/WorkspaceKinds/Form/WorkspaceKindForm.tsx
View File

@ -1,8 +1,10 @@
import React, { useCallback, useMemo, useState } from 'react';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import {
Button,
Content,
ContentVariants,
EmptyState,
EmptyStateBody,
Flex,
FlexItem,
PageGroup,
@ -11,18 +13,22 @@ import {
StackItem,
} from '@patternfly/react-core';
import { t_global_spacer_sm as SmallPadding } from '@patternfly/react-tokens';
import { ExclamationCircleIcon } from '@patternfly/react-icons';
import { ValidationErrorAlert } from '~/app/components/ValidationErrorAlert';
import { useTypedNavigate } from '~/app/routerHelper';
import useWorkspaceKindByName from '~/app/hooks/useWorkspaceKindByName';
import { WorkspaceKind, ValidationError } from '~/shared/api/backendApiTypes';
import { useTypedNavigate, useTypedParams } from '~/app/routerHelper';
import { useCurrentRouteKey } from '~/app/hooks/useCurrentRouteKey';
import useGenericObjectState from '~/app/hooks/useGenericObjectState';
import { useNotebookAPI } from '~/app/hooks/useNotebookAPI';
import { WorkspaceKindFormData } from '~/app/types';
import { ErrorEnvelopeException } from '~/shared/api/apiUtils';
import { ValidationError } from '~/shared/api/backendApiTypes';
import { WorkspaceKindFileUpload } from './fileUpload/WorkspaceKindFileUpload';
import { WorkspaceKindFormProperties } from './properties/WorkspaceKindFormProperties';
import { WorkspaceKindFormImage } from './image/WorkspaceKindFormImage';
import { WorkspaceKindFormPodConfig } from './podConfig/WorkspaceKindFormPodConfig';
import { WorkspaceKindFormPodTemplate } from './podTemplate/WorkspaceKindFormPodTemplate';
import { EMPTY_WORKSPACE_KIND_FORM_DATA } from './helpers';
export enum WorkspaceKindFormView {
Form,
@ -30,6 +36,19 @@ export enum WorkspaceKindFormView {
}
export type ValidationStatus = 'success' | 'error' | 'default';
export type FormMode = 'edit' | 'create';
const convertToFormData = (initialData: WorkspaceKind): WorkspaceKindFormData => {
const { podTemplate, ...properties } = initialData;
const { options, ...spec } = podTemplate;
const { podConfig, imageConfig } = options;
return {
properties,
podConfig,
imageConfig,
podTemplate: spec,
};
};
export const WorkspaceKindForm: React.FC = () => {
const navigate = useTypedNavigate();
@ -38,28 +57,23 @@ export const WorkspaceKindForm: React.FC = () => {
const [yamlValue, setYamlValue] = useState('');
const [isSubmitting, setIsSubmitting] = useState(false);
const [validated, setValidated] = useState<ValidationStatus>('default');
const mode = useCurrentRouteKey() === 'workspaceKindCreate' ? 'create' : 'edit';
const [specErrors, setSpecErrors] = useState<ValidationError[]>([]);
const mode: FormMode = useCurrentRouteKey() === 'workspaceKindCreate' ? 'create' : 'edit';
const [specErrors, setSpecErrors] = useState<(ValidationError | ErrorEnvelopeException)[]>([]);
const [data, setData, resetData] = useGenericObjectState<WorkspaceKindFormData>({
properties: {
displayName: '',
description: '',
deprecated: false,
deprecationMessage: '',
hidden: false,
icon: { url: '' },
logo: { url: '' },
},
imageConfig: {
default: '',
values: [],
},
podConfig: {
default: '',
values: [],
},
});
const { kind } = useTypedParams<'workspaceKindEdit'>();
const [initialFormData, initialFormDataLoaded, initialFormDataError] =
useWorkspaceKindByName(kind);
const [data, setData, resetData, replaceData] = useGenericObjectState<WorkspaceKindFormData>(
initialFormData ? convertToFormData(initialFormData) : EMPTY_WORKSPACE_KIND_FORM_DATA,
);
useEffect(() => {
if (!initialFormDataLoaded || initialFormData === null || mode === 'create') {
return;
}
replaceData(convertToFormData(initialFormData));
}, [initialFormData, initialFormDataLoaded, mode, replaceData]);
const handleSubmit = useCallback(async () => {
setIsSubmitting(true);
@ -71,14 +85,20 @@ export const WorkspaceKindForm: React.FC = () => {
console.info('New workspace kind created:', JSON.stringify(newWorkspaceKind));
navigate('workspaceKinds');
}
// TODO: Finish when WSKind API is finalized
// const updatedWorkspace = await api.updateWorkspaceKind({}, kind, { data: {} });
// console.info('Workspace Kind updated:', JSON.stringify(updatedWorkspace));
// navigate('workspaceKinds');
} catch (err) {
if (err instanceof ErrorEnvelopeException) {
const validationErrors = err.envelope.error?.cause?.validation_errors;
if (validationErrors && validationErrors.length > 0) {
setSpecErrors(validationErrors);
setSpecErrors((prev) => [...prev, ...validationErrors]);
setValidated('error');
return;
}
setSpecErrors((prev) => [...prev, err]);
setValidated('error');
}
// TODO: alert user about error
console.error(`Error ${mode === 'edit' ? 'editing' : 'creating'} workspace kind: ${err}`);
@ -88,14 +108,26 @@ export const WorkspaceKindForm: React.FC = () => {
}, [navigate, mode, api, yamlValue]);
const canSubmit = useMemo(
() => !isSubmitting && yamlValue.length > 0 && validated === 'success',
[yamlValue, isSubmitting, validated],
() => !isSubmitting && validated === 'success',
[isSubmitting, validated],
);
const cancel = useCallback(() => {
navigate('workspaceKinds');
}, [navigate]);
if (mode === 'edit' && initialFormDataError) {
return (
<EmptyState
titleText="Error loading Workspace Kind data"
headingLevel="h4"
icon={ExclamationCircleIcon}
status="danger"
>
<EmptyStateBody>{initialFormDataError.message}</EmptyStateBody>
</EmptyState>
);
}
return (
<>
<PageGroup isFilled={false} stickyOnBreakpoint={{ default: 'top' }}>
@ -159,6 +191,12 @@ export const WorkspaceKindForm: React.FC = () => {
setData('podConfig', podConfig);
}}
/>
<WorkspaceKindFormPodTemplate
podTemplate={data.podTemplate}
updatePodTemplate={(podTemplate) => {
setData('podTemplate', podTemplate);
}}
/>
</>
)}
</PageSection>
@ -169,9 +207,10 @@ export const WorkspaceKindForm: React.FC = () => {
variant="primary"
ouiaId="Primary"
onClick={handleSubmit}
isDisabled={!canSubmit}
// TODO: button is always disabled on edit mode. Need to modify when WorkspaceKind edit is finalized
isDisabled={!canSubmit || mode === 'edit'}
>
{mode === 'create' ? 'Create' : 'Edit'}
{mode === 'create' ? 'Create' : 'Save'}
</Button>
</FlexItem>
<FlexItem>

142
workspaces/frontend/src/app/pages/WorkspaceKinds/Form/WorkspaceKindFormPaginatedTable.tsx Normal file
View File

@ -0,0 +1,142 @@
import React, { useMemo, useState } from 'react';
import { Table, Thead, Tr, Td, Tbody, Th } from '@patternfly/react-table';
import {
Dropdown,
DropdownItem,
getUniqueId,
Label,
MenuToggle,
PageSection,
Pagination,
PaginationVariant,
Radio,
} from '@patternfly/react-core';
import { EllipsisVIcon } from '@patternfly/react-icons';
import { WorkspaceKindImageConfigValue } from '~/app/types';
import { WorkspacePodConfigValue } from '~/shared/api/backendApiTypes';
interface PaginatedTableProps {
rows: WorkspaceKindImageConfigValue[] | WorkspacePodConfigValue[];
defaultId: string;
setDefaultId: (id: string) => void;
handleEdit: (index: number) => void;
openDeleteModal: (index: number) => void;
ariaLabel: string;
}
export const WorkspaceKindFormPaginatedTable: React.FC<PaginatedTableProps> = ({
rows,
defaultId,
setDefaultId,
handleEdit,
openDeleteModal,
ariaLabel,
}) => {
const [dropdownOpen, setDropdownOpen] = useState<number | null>(null);
const [page, setPage] = useState(1);
const [perPage, setPerPage] = useState(10);
const rowPages = useMemo(() => {
const pages = [];
for (let i = 0; i < rows.length; i += perPage) {
pages.push(rows.slice(i, i + perPage));
}
return pages;
}, [perPage, rows]);
const onSetPage = (
_event: React.MouseEvent | React.KeyboardEvent | MouseEvent,
newPage: number,
) => {
setPage(newPage);
};
const onPerPageSelect = (
_event: React.MouseEvent | React.KeyboardEvent | MouseEvent,
newPerPage: number,
newPage: number,
) => {
setPerPage(newPerPage);
setPage(newPage);
};
return (
<PageSection>
<Table aria-label={ariaLabel}>
<Thead>
<Tr>
<Th>Display Name</Th>
<Th>ID</Th>
<Th screenReaderText="Row select">Default</Th>
<Th>Labels</Th>
<Th aria-label="Actions" />
</Tr>
</Thead>
<Tbody>
{rowPages[page - 1].map((row, index) => (
<Tr key={row.id}>
<Td>{row.displayName}</Td>
<Td>{row.id}</Td>
<Td>
<Radio
className="workspace-kind-form-radio"
id={`default-${ariaLabel}-${index}`}
name={`default-${ariaLabel}-${index}-radio`}
isChecked={defaultId === row.id}
onChange={() => {
console.log(row.id);
setDefaultId(row.id);
}}
aria-label={`Select ${row.id} as default`}
/>
</Td>
<Td>
{row.labels.length > 0 &&
row.labels.map((label) => (
<Label
style={{ marginRight: '4px', marginTop: '4px' }}
key={getUniqueId()}
>{`${label.key}: ${label.value}`}</Label>
))}
</Td>
<Td isActionCell>
<Dropdown
toggle={(toggleRef) => (
<MenuToggle
ref={toggleRef}
isExpanded={dropdownOpen === index}
onClick={() => setDropdownOpen(dropdownOpen === index ? null : index)}
variant="plain"
aria-label="plain kebab"
>
<EllipsisVIcon />
</MenuToggle>
)}
isOpen={dropdownOpen === index}
onSelect={() => setDropdownOpen(null)}
popperProps={{ position: 'right' }}
>
<DropdownItem onClick={() => handleEdit(perPage * (page - 1) + index)}>
Edit
</DropdownItem>
<DropdownItem onClick={() => openDeleteModal(perPage * (page - 1) + index)}>
Remove
</DropdownItem>
</Dropdown>
</Td>
</Tr>
))}
</Tbody>
</Table>
<Pagination
itemCount={rows.length}
widgetId="pagination-bottom"
perPage={perPage}
page={page}
variant={PaginationVariant.bottom}
isCompact
onSetPage={onSetPage}
onPerPageSelect={onPerPageSelect}
/>
</PageSection>
);
};

39
workspaces/frontend/src/app/pages/WorkspaceKinds/Form/helpers.ts
View File

@ -104,6 +104,45 @@ export const emptyPodConfig: WorkspacePodConfigValue = {
to: '',
},
};
export const EMPTY_WORKSPACE_KIND_FORM_DATA = {
properties: {
displayName: '',
description: '',
deprecated: false,
deprecationMessage: '',
hidden: false,
icon: { url: '' },
logo: { url: '' },
},
imageConfig: {
default: '',
values: [],
},
podConfig: {
default: '',
values: [],
},
podTemplate: {
podMetadata: {
labels: {},
annotations: {},
},
volumeMounts: {
home: '',
},
extraVolumeMounts: [],
culling: {
enabled: false,
maxInactiveSeconds: 86400,
activityProbe: {
jupyter: {
lastActivity: true,
},
},
},
},
};
// convert from k8s resource object {limits: {}, requests{}} to array of {type: '', limit: '', request: ''} for each type of resource (e.g. CPU, memory, nvidia.com/gpu)
export const getResources = (currConfig: WorkspaceKindPodConfigValue): PodResourceEntry[] => {
const grouped = new Map<string, { request: string; limit: string }>([

86
workspaces/frontend/src/app/pages/WorkspaceKinds/Form/image/WorkspaceKindFormImage.tsx
View File

@ -2,9 +2,6 @@ import React, { useCallback, useState } from 'react';
import {
Button,
Content,
Dropdown,
MenuToggle,
DropdownItem,
Modal,
ModalHeader,
ModalFooter,
@ -13,14 +10,13 @@ import {
EmptyStateFooter,
EmptyStateActions,
EmptyStateBody,
Label,
getUniqueId,
ExpandableSection,
} from '@patternfly/react-core';
import { Table, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
import { PlusCircleIcon, EllipsisVIcon, CubesIcon } from '@patternfly/react-icons';
import { PlusCircleIcon, CubesIcon } from '@patternfly/react-icons';
import { WorkspaceKindImageConfigData, WorkspaceKindImageConfigValue } from '~/app/types';
import { emptyImage } from '~/app/pages/WorkspaceKinds/Form/helpers';
import { WorkspaceKindFormPaginatedTable } from '~/app/pages/WorkspaceKinds/Form/WorkspaceKindFormPaginatedTable';
import { WorkspaceKindFormImageModal } from './WorkspaceKindFormImageModal';
interface WorkspaceKindFormImageProps {
@ -38,7 +34,6 @@ export const WorkspaceKindFormImage: React.FC<WorkspaceKindFormImageProps> = ({
const [defaultId, setDefaultId] = useState(imageConfig.default || '');
const [isModalOpen, setIsModalOpen] = useState(false);
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [dropdownOpen, setDropdownOpen] = useState<number | null>(null);
const [editIndex, setEditIndex] = useState<number | null>(null);
const [deleteIndex, setDeleteIndex] = useState<number | null>(null);
const [image, setImage] = useState<WorkspaceKindImageConfigValue>({ ...emptyImage });
@ -125,70 +120,17 @@ export const WorkspaceKindFormImage: React.FC<WorkspaceKindFormImageProps> = ({
)}
{imageConfig.values.length > 0 && (
<div>
<Table aria-label="Images table">
<Thead>
<Tr>
<Th>Display Name</Th>
<Th>ID</Th>
<Th screenReaderText="Row select">Default</Th>
<Th>Hidden</Th>
<Th>Labels</Th>
<Th aria-label="Actions" />
</Tr>
</Thead>
<Tbody>
{imageConfig.values.map((img, index) => (
<Tr key={img.id}>
<Td>{img.displayName}</Td>
<Td>{img.id}</Td>
<Td>
<input
type="radio"
name="default-image"
checked={defaultId === img.id}
onChange={() => {
setDefaultId(img.id);
updateImageConfig({ ...imageConfig, default: img.id });
}}
aria-label={`Select ${img.id} as default`}
/>
</Td>
<Td>{img.hidden ? 'Yes' : 'No'}</Td>
<Td>
{img.labels.length > 0 &&
img.labels.map((label) => (
<Label
style={{ marginRight: '4px', marginTop: '4px' }}
key={getUniqueId()}
>{`${label.key}: ${label.value}`}</Label>
))}
</Td>
<Td isActionCell>
<Dropdown
toggle={(toggleRef) => (
<MenuToggle
ref={toggleRef}
isExpanded={dropdownOpen === index}
onClick={() => setDropdownOpen(dropdownOpen === index ? null : index)}
variant="plain"
aria-label="plain kebab"
>
<EllipsisVIcon />
</MenuToggle>
)}
isOpen={dropdownOpen === index}
onSelect={() => setDropdownOpen(null)}
popperProps={{ position: 'right' }}
>
<DropdownItem onClick={() => handleEdit(index)}>Edit</DropdownItem>
<DropdownItem onClick={() => openDeleteModal(index)}>Remove</DropdownItem>
</Dropdown>
</Td>
</Tr>
))}
</Tbody>
</Table>
<WorkspaceKindFormPaginatedTable
ariaLabel="Images table"
rows={imageConfig.values}
defaultId={defaultId}
setDefaultId={(id) => {
updateImageConfig({ ...imageConfig, default: id });
setDefaultId(id);
}}
handleEdit={handleEdit}
openDeleteModal={openDeleteModal}
/>
{addImageBtn}
</div>
)}

2
workspaces/frontend/src/app/pages/WorkspaceKinds/Form/image/WorkspaceKindFormImageModal.tsx
View File

@ -138,7 +138,7 @@ export const WorkspaceKindFormImageModal: React.FC<WorkspaceKindFormImageModalPr
</FormSelect>
</FormGroup>
<WorkspaceKindFormImagePort
ports={image.ports}
ports={image.ports || []}
setPorts={(ports) => setImage({ ...image, ports })}
/>
{mode === 'edit' && (

81
workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/ResourceInputWrapper.tsx
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect, useCallback, useMemo } from 'react';
import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
import {
FormSelect,
FormSelectOption,
@ -6,13 +6,18 @@ import {
Split,
SplitItem,
} from '@patternfly/react-core';
import { CPU_UNITS, MEMORY_UNITS_FOR_SELECTION, UnitOption } from '~/shared/utilities/valueUnits';
import {
CPU_UNITS,
MEMORY_UNITS_FOR_SELECTION,
TIME_UNIT_FOR_SELECTION,
UnitOption,
} from '~/shared/utilities/valueUnits';
import { parseResourceValue } from '~/shared/utilities/WorkspaceUtils';
interface ResourceInputWrapperProps {
value: string;
onChange: (value: string) => void;
type: 'cpu' | 'memory' | 'custom';
type: 'cpu' | 'memory' | 'time' | 'custom';
min?: number;
max?: number;
step?: number;
@ -26,6 +31,7 @@ const unitMap: {
} = {
memory: MEMORY_UNITS_FOR_SELECTION,
cpu: CPU_UNITS,
time: TIME_UNIT_FOR_SELECTION,
};
const DEFAULT_STEP = 1;
@ -34,7 +40,6 @@ const DEFAULT_UNITS = {
memory: 'Mi',
cpu: '',
};
export const ResourceInputWrapper: React.FC<ResourceInputWrapperProps> = ({
value,
onChange,
@ -48,22 +53,47 @@ export const ResourceInputWrapper: React.FC<ResourceInputWrapperProps> = ({
}) => {
const [inputValue, setInputValue] = useState(value);
const [unit, setUnit] = useState<string>('');
const isTimeInitialized = useRef(false);
useEffect(() => {
if (type === 'custom') {
setInputValue(value);
return;
if (type === 'time') {
// Initialize time only once
if (!isTimeInitialized.current) {
const seconds = parseFloat(value) || 0;
let defaultUnit = 60; // Default to minutes
if (seconds >= 86400) {
defaultUnit = 86400; // Days
} else if (seconds >= 3600) {
defaultUnit = 3600; // Hours
} else if (seconds >= 60) {
defaultUnit = 60; // Minutes
} else {
defaultUnit = 1; // Seconds
}
setUnit(defaultUnit.toString());
setInputValue((seconds / defaultUnit).toString());
isTimeInitialized.current = true;
}
} else {
if (type === 'custom') {
setInputValue(value);
return;
}
const [numericValue, extractedUnit] = parseResourceValue(value, type);
setInputValue(String(numericValue || ''));
setUnit(extractedUnit?.unit || DEFAULT_UNITS[type]);
}
const [numericValue, extractedUnit] = parseResourceValue(value, type);
setInputValue(String(numericValue || ''));
setUnit(extractedUnit?.unit || DEFAULT_UNITS[type]);
}, [value, type]);
}, [type, value]);
const handleInputChange = useCallback(
(newValue: string) => {
setInputValue(newValue);
if (type === 'custom') {
onChange(newValue);
} else if (type === 'time') {
const numericValue = parseFloat(newValue) || 0;
const unitMultiplier = parseFloat(unit) || 1;
onChange(String(numericValue * unitMultiplier));
} else {
onChange(newValue ? `${newValue}${unit}` : '');
}
@ -73,12 +103,24 @@ export const ResourceInputWrapper: React.FC<ResourceInputWrapperProps> = ({
const handleUnitChange = useCallback(
(newUnit: string) => {
setUnit(newUnit);
if (inputValue) {
onChange(`${inputValue}${newUnit}`);
if (type === 'time') {
const currentValue = parseFloat(inputValue) || 0;
const oldUnitMultiplier = parseFloat(unit) || 1;
const newUnitMultiplier = parseFloat(newUnit) || 1;
// Convert the current value to the new unit
const valueInSeconds = currentValue * oldUnitMultiplier;
const valueInNewUnit = valueInSeconds / newUnitMultiplier;
setUnit(newUnit);
setInputValue(valueInNewUnit.toString());
onChange(String(valueInSeconds));
} else {
setUnit(newUnit);
if (inputValue) {
onChange(`${inputValue}${newUnit}`);
}
}
},
[inputValue, onChange],
[inputValue, onChange, type, unit],
);
const handleIncrement = useCallback(() => {
@ -104,7 +146,13 @@ export const ResourceInputWrapper: React.FC<ResourceInputWrapperProps> = ({
const unitOptions = useMemo(
() =>
type !== 'custom'
? unitMap[type].map((u) => <FormSelectOption label={u.name} key={u.name} value={u.unit} />)
? unitMap[type].map((u) => (
<FormSelectOption
label={u.name}
key={u.name}
value={type === 'time' ? u.weight : u.unit}
/>
))
: [],
[type],
);
@ -136,6 +184,7 @@ export const ResourceInputWrapper: React.FC<ResourceInputWrapperProps> = ({
onChange={(_, v) => handleUnitChange(v)}
id={`${ariaLabel}-unit-select`}
isDisabled={isDisabled}
className="workspace-kind-unit-select"
>
{unitOptions}
</FormSelect>

85
workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/WorkspaceKindFormPodConfig.tsx
View File

@ -2,9 +2,6 @@ import React, { useCallback, useState } from 'react';
import {
Button,
Content,
Dropdown,
MenuToggle,
DropdownItem,
Modal,
ModalHeader,
ModalFooter,
@ -14,14 +11,11 @@ import {
EmptyStateActions,
ExpandableSection,
EmptyStateBody,
Label,
getUniqueId,
} from '@patternfly/react-core';
import { Table, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
import { PlusCircleIcon, EllipsisVIcon, CubesIcon } from '@patternfly/react-icons';
import { PlusCircleIcon, CubesIcon } from '@patternfly/react-icons';
import { emptyPodConfig } from '~/app/pages/WorkspaceKinds/Form/helpers';
import { WorkspaceKindPodConfigValue, WorkspaceKindPodConfigData } from '~/app/types';
import { WorkspaceKindFormPaginatedTable } from '~/app/pages/WorkspaceKinds/Form/WorkspaceKindFormPaginatedTable';
import { WorkspaceKindFormPodConfigModal } from './WorkspaceKindFormPodConfigModal';
interface WorkspaceKindFormPodConfigProps {
@ -37,7 +31,6 @@ export const WorkspaceKindFormPodConfig: React.FC<WorkspaceKindFormPodConfigProp
const [defaultId, setDefaultId] = useState(podConfig.default || '');
const [isModalOpen, setIsModalOpen] = useState(false);
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [dropdownOpen, setDropdownOpen] = useState<number | null>(null);
const [editIndex, setEditIndex] = useState<number | null>(null);
const [deleteIndex, setDeleteIndex] = useState<number | null>(null);
const [currConfig, setCurrConfig] = useState<WorkspaceKindPodConfigValue>({ ...emptyPodConfig });
@ -128,69 +121,17 @@ export const WorkspaceKindFormPodConfig: React.FC<WorkspaceKindFormPodConfigProp
)}
{podConfig.values.length > 0 && (
<>
<Table aria-label="pod configs table">
<Thead>
<Tr>
<Th>Display Name</Th>
<Th>ID</Th>
<Th screenReaderText="Row select">Default</Th>
<Th>Hidden</Th>
<Th>Labels</Th>
<Th aria-label="Actions" />
</Tr>
</Thead>
<Tbody>
{podConfig.values.map((config, index) => (
<Tr key={config.id}>
<Td>{config.displayName}</Td>
<Td>{config.id}</Td>
<Td>
<input
type="radio"
name="default-podConfig"
checked={defaultId === config.id}
onChange={() => {
setDefaultId(config.id);
updatePodConfig({ ...podConfig, default: config.id });
}}
aria-label={`Select ${config.id} as default`}
/>
</Td>
<Td>{config.hidden ? 'Yes' : 'No'}</Td>
<Td>
{config.labels.length > 0 &&
config.labels.map((label) => (
<Label
style={{ marginRight: '4px', marginTop: '4px' }}
key={getUniqueId()}
>{`${label.key}: ${label.value}`}</Label>
))}
</Td>
<Td isActionCell>
<Dropdown
toggle={(toggleRef) => (
<MenuToggle
ref={toggleRef}
isExpanded={dropdownOpen === index}
onClick={() => setDropdownOpen(dropdownOpen === index ? null : index)}
variant="plain"
aria-label="plain kebab"
>
<EllipsisVIcon />
</MenuToggle>
)}
isOpen={dropdownOpen === index}
onSelect={() => setDropdownOpen(null)}
popperProps={{ position: 'right' }}
>
<DropdownItem onClick={() => handleEdit(index)}>Edit</DropdownItem>
<DropdownItem onClick={() => openDeleteModal(index)}>Remove</DropdownItem>
</Dropdown>
</Td>
</Tr>
))}
</Tbody>
</Table>
<WorkspaceKindFormPaginatedTable
ariaLabel="Pod Configs Table"
rows={podConfig.values}
defaultId={defaultId}
setDefaultId={(id) => {
updatePodConfig({ ...podConfig, default: id });
setDefaultId(id);
}}
handleEdit={handleEdit}
openDeleteModal={openDeleteModal}
/>
{addConfigBtn}
</>
)}

1
workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/WorkspaceKindFormResource.tsx
View File

@ -312,6 +312,7 @@ export const WorkspaceKindFormResource: React.FC<WorkspaceKindFormResourceProps>
onChange={(_event, value) => handleChange(res.id, 'type', value)}
/>
</GridItem>
<GridItem span={2}>
<Button
variant="link"

197
workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podTemplate/WorkspaceKindFormPodTemplate.tsx Normal file
View File

@ -0,0 +1,197 @@
import {
ExpandableSection,
Form,
FormFieldGroup,
FormFieldGroupHeader,
FormGroup,
HelperText,
HelperTextItem,
Switch,
} from '@patternfly/react-core';
import React, { useCallback, useState } from 'react';
import { WorkspaceKindPodTemplateData } from '~/app/types';
import { EditableLabels } from '~/app/pages/WorkspaceKinds/Form/EditableLabels';
import { WorkspacePodVolumeMount } from '~/shared/api/backendApiTypes';
import { ResourceInputWrapper } from '~/app/pages/WorkspaceKinds/Form/podConfig/ResourceInputWrapper';
import { WorkspaceFormPropertiesVolumes } from '~/app/pages/Workspaces/Form/properties/WorkspaceFormPropertiesVolumes';
interface WorkspaceKindFormPodTemplateProps {
podTemplate: WorkspaceKindPodTemplateData;
updatePodTemplate: (template: WorkspaceKindPodTemplateData) => void;
}
export const WorkspaceKindFormPodTemplate: React.FC<WorkspaceKindFormPodTemplateProps> = ({
podTemplate,
updatePodTemplate,
}) => {
const [isExpanded, setIsExpanded] = useState(false);
const [volumes, setVolumes] = useState<WorkspacePodVolumeMount[]>([]);
const toggleCullingEnabled = useCallback(
(checked: boolean) => {
if (podTemplate.culling) {
updatePodTemplate({
...podTemplate,
culling: {
...podTemplate.culling,
enabled: checked,
},
});
}
},
[podTemplate, updatePodTemplate],
);
const handleVolumes = useCallback(
(newVolumes: WorkspacePodVolumeMount[]) => {
setVolumes(newVolumes);
updatePodTemplate({
...podTemplate,
extraVolumeMounts: volumes,
});
},
[podTemplate, updatePodTemplate, volumes],
);
return (
<div className="pf-u-mb-0">
<ExpandableSection
toggleText="Pod Lifecycle & Customization"
onToggle={() => setIsExpanded((prev) => !prev)}
isExpanded={isExpanded}
isIndented
>
<Form>
<FormFieldGroup
aria-label="Pod Metadata"
header={
<FormFieldGroupHeader
titleText={{
text: 'Pod Metadata',
id: 'workspace-kind-pod-metadata',
}}
titleDescription={
<HelperText>
Edit mutable metadata of all pods created with this Workspace Kind.
</HelperText>
}
/>
}
>
<EditableLabels
rows={Object.entries(podTemplate.podMetadata.labels).map((entry) => ({
key: entry[0],
value: entry[1],
}))}
setRows={(newLabels) => {
updatePodTemplate({
...podTemplate,
podMetadata: {
...podTemplate.podMetadata,
labels: newLabels.reduce((acc: { [k: string]: string }, { key, value }) => {
acc[key] = value;
return acc;
}, {}),
},
});
}}
/>
<EditableLabels
title="Annotations"
description="Use annotations to attach arbitrary non-identifying metadata to Kubernetes objects."
buttonLabel="Annotation"
rows={Object.entries(podTemplate.podMetadata.annotations).map((entry) => ({
key: entry[0],
value: entry[1],
}))}
setRows={(newAnnotations) => {
updatePodTemplate({
...podTemplate,
podMetadata: {
...podTemplate.podMetadata,
annotations: newAnnotations.reduce(
(acc: { [k: string]: string }, { key, value }) => {
acc[key] = value;
return acc;
},
{},
),
},
});
}}
/>
</FormFieldGroup>
{/* podTemplate.culling is currently not developed in the backend */}
{podTemplate.culling && (
<FormFieldGroup
aria-label="Pod Culling"
header={
<FormFieldGroupHeader
titleText={{
text: 'Pod Culling',
id: 'workspace-kind-pod-culling',
}}
titleDescription={
<HelperText>
<HelperTextItem variant="warning">
Warning: Only for JupyterLab deployments
</HelperTextItem>
Culling scales the number of pods in a Workspace to zero based on its last
activity by polling Jupyter&apos;s status endpoint.
</HelperText>
}
/>
}
>
<FormGroup>
<Switch
isChecked={podTemplate.culling.enabled || false}
label="Enabled"
aria-label="pod template enable culling controlled check"
onChange={(_, checked) => toggleCullingEnabled(checked)}
id="workspace-kind-pod-template-culling-enabled"
name="culling-enabled"
/>
</FormGroup>
<FormGroup label="Max Inactive Period">
<ResourceInputWrapper
value={String(podTemplate.culling.maxInactiveSeconds || 86400)}
type="time"
onChange={(value) =>
podTemplate.culling &&
updatePodTemplate({
...podTemplate,
culling: {
...podTemplate.culling,
maxInactiveSeconds: Number(value),
},
})
}
step={1}
aria-label="max inactive period input"
isDisabled={!podTemplate.culling.enabled}
/>
</FormGroup>
</FormFieldGroup>
)}
<FormFieldGroup
aria-label="Additional Volumes"
header={
<FormFieldGroupHeader
titleText={{
text: 'Additional Volumes',
id: 'workspace-kind-extra-volume',
}}
titleDescription={
<HelperText>Configure the paths to mount additional PVCs.</HelperText>
}
/>
}
>
<WorkspaceFormPropertiesVolumes volumes={volumes} setVolumes={handleVolumes} />
</FormFieldGroup>
</Form>
</ExpandableSection>
</div>
);
};

11
workspaces/frontend/src/app/pages/WorkspaceKinds/WorkspaceKinds.tsx
View File

@ -430,8 +430,17 @@ export const WorkspaceKinds: React.FunctionComponent = () => {
title: 'View Details',
onClick: () => viewDetailsClick(workspaceKind),
},
{
id: 'edit-workspace-kind',
title: 'Edit',
onClick: () =>
navigate('workspaceKindEdit', {
params: { kind: workspaceKind.name },
state: { workspaceKindName: workspaceKind.name },
}),
},
],
[viewDetailsClick],
[navigate, viewDetailsClick],
);
const workspaceDetailsContent = (

9
workspaces/frontend/src/app/pages/Workspaces/Form/properties/WorkspaceFormPropertiesSecrets.tsx
View File

@ -1,5 +1,5 @@
import React, { useCallback, useState } from 'react';
import { EllipsisVIcon } from '@patternfly/react-icons';
import { EllipsisVIcon, PlusCircleIcon } from '@patternfly/react-icons';
import { Table, Thead, Tbody, Tr, Th, Td, TableVariant } from '@patternfly/react-table';
import {
Button,
@ -152,7 +152,12 @@ export const WorkspaceFormPropertiesSecrets: React.FC<WorkspaceFormPropertiesSec
</Tbody>
</Table>
)}
<Button variant="primary" onClick={() => setIsModalOpen(true)} style={{ marginTop: '1rem' }}>
<Button
variant="primary"
icon={<PlusCircleIcon />}
onClick={() => setIsModalOpen(true)}
style={{ marginTop: '1rem', width: 'fit-content' }}
>
Create Secret
</Button>
<Modal isOpen={isModalOpen} onClose={clearForm} variant={ModalVariant.small}>

7
workspaces/frontend/src/app/pages/Workspaces/Form/properties/WorkspaceFormPropertiesVolumes.tsx
View File

@ -14,7 +14,7 @@ import {
Switch,
TextInput,
} from '@patternfly/react-core';
import { EllipsisVIcon } from '@patternfly/react-icons';
import { EllipsisVIcon, PlusCircleIcon } from '@patternfly/react-icons';
import { Table, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
import { WorkspacePodVolumeMount } from '~/shared/api/backendApiTypes';
@ -126,9 +126,10 @@ export const WorkspaceFormPropertiesVolumes: React.FC<WorkspaceFormPropertiesVol
</Table>
)}
<Button
variant="primary"
variant="link"
icon={<PlusCircleIcon />}
onClick={() => setIsModalOpen(true)}
style={{ marginTop: '1rem' }}
style={{ marginTop: '1rem', width: 'fit-content' }}
className="pf-u-mt-md"
>
Create Volume

25
workspaces/frontend/src/app/types.ts
View File

@ -6,6 +6,8 @@ import {
WorkspacePodSecretMount,
Workspace,
WorkspaceImageRef,
WorkspacePodVolumeMounts,
WorkspaceKindPodMetadata,
} from '~/shared/api/backendApiTypes';
export interface WorkspaceColumnDefinition {
@ -54,9 +56,9 @@ export interface WorkspaceKindProperties {
}
export interface WorkspaceKindImageConfigValue extends WorkspaceImageConfigValue {
imagePullPolicy: ImagePullPolicy.IfNotPresent | ImagePullPolicy.Always | ImagePullPolicy.Never;
ports: WorkspaceKindImagePort[];
image: string;
imagePullPolicy?: ImagePullPolicy.IfNotPresent | ImagePullPolicy.Always | ImagePullPolicy.Never;
ports?: WorkspaceKindImagePort[];
image?: string;
}
export enum ImagePullPolicy {
@ -92,9 +94,26 @@ export interface WorkspaceKindPodConfigData {
default: string;
values: WorkspaceKindPodConfigValue[];
}
export interface WorkspaceKindPodCulling {
enabled: boolean;
maxInactiveSeconds: number;
activityProbe: {
jupyter: {
lastActivity: boolean;
};
};
}
export interface WorkspaceKindPodTemplateData {
podMetadata: WorkspaceKindPodMetadata;
volumeMounts: WorkspacePodVolumeMounts;
culling?: WorkspaceKindPodCulling;
extraVolumeMounts?: WorkspacePodVolumeMount[];
}
export interface WorkspaceKindFormData {
properties: WorkspaceKindProperties;
imageConfig: WorkspaceKindImageConfigData;
podConfig: WorkspaceKindPodConfigData;
podTemplate: WorkspaceKindPodTemplateData;
}

7
workspaces/frontend/src/shared/api/apiUtils.ts
View File

@ -233,6 +233,10 @@ export const isErrorEnvelope = (e: unknown): e is ErrorEnvelope =>
typeof (e as { error: { message: unknown } }).error.message === 'string';
export function extractNotebookResponse<T>(response: unknown): T {
// Check if this is an error envelope first
if (isErrorEnvelope(response)) {
throw new ErrorEnvelopeException(response);
}
if (isNotebookResponse<T>(response)) {
return response.data;
}
@ -260,6 +264,9 @@ export async function wrapRequest<T>(promise: Promise<T>, extractData = true): P
const res = await handleRestFailures<T>(promise);
return extractData ? extractNotebookResponse<T>(res) : res;
} catch (error) {
if (error instanceof ErrorEnvelopeException) {
throw error;
}
throw new ErrorEnvelopeException(extractErrorEnvelope(error));
}
}

24
workspaces/frontend/src/shared/style/MUI-theme.scss
View File

@ -259,6 +259,28 @@
z-index: 1;
}
// Form controls with number inputs - specific styling overrides
.mui-theme .pf-v6-c-form__group:has(.pf-v6-c-number-input) {
.pf-v6-c-form__label {
top: 30%;
font-size: 16px;
left: 0;
}
.pf-v6-c-form-control {
// Override default form control padding to match button padding in this context
--pf-v6-c-form-control--PaddingBlockStart: var(--mui-spacing-8px);
--pf-v6-c-form-control--PaddingBlockEnd: var(--mui-spacing-8px);
&.workspace-kind-unit-select {
--pf-v6-c-form-control--PaddingInlineEnd: calc(
var(--pf-v6-c-form-control__select--PaddingInlineEnd) +
var(--pf-v6-c-form-control__icon--FontSize)
);
}
}
}
.mui-theme .pf-v6-c-form-control input::placeholder {
--pf-v6-c-form-control--m-placeholder--Color: var(--mui-palette-grey-600);
}
@ -614,7 +636,7 @@
--pf-v6-c-progress-stepper__step-icon--Color: var(--mui-palette-success-main);
}
.mui-theme .pf-v6-c-radio.pf-m-standalone .pf-v6-c-radio__input {
.mui-theme .pf-v6-c-radio.pf-m-standalone:not(.workspace-kind-form-radio) .pf-v6-c-radio__input {
display: none;
}

7
workspaces/frontend/src/shared/utilities/valueUnits.ts
View File

@ -40,6 +40,13 @@ export const MEMORY_UNITS_FOR_PARSING: UnitOption[] = [
{ name: 'KiB', unit: 'Ki', weight: 1024 },
{ name: 'B', unit: '', weight: 1 },
];
export const TIME_UNIT_FOR_SELECTION: UnitOption[] = [
{ name: 'Minutes', unit: 'Minutes', weight: 60 },
{ name: 'Hours', unit: 'Hours', weight: 60 * 60 },
{ name: 'Days', unit: 'Days', weight: 60 * 60 * 24 },
];
export const OTHER: UnitOption[] = [{ name: '', unit: '', weight: 1 }];
export const splitValueUnit = (