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

Merge branch 'notebooks-v2' into workspaceKindSummary 

Signed-off-by: Dominik Kawka  <31955648+dominikkawka@users.noreply.github.com>
This commit is contained in:
Dominik Kawka 2025-07-24 15:30:25 +01:00 committed by GitHub
parent dcf488596d a721c5073d
commit aa3f270e54
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
84 changed files with 1572 additions and 1035 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
workspaces/frontend/.eslintrc.js
View File

@ -208,6 +208,28 @@ module.exports = {
name: 'react-router',
message: 'Use react-router-dom instead.',
},
{
name: '@patternfly/react-core',
message:
'Use specific component imports: @patternfly/react-core/dist/esm/components/ComponentName',
},
{
name: '@patternfly/react-table',
message:
'Use specific component imports: @patternfly/react-table/dist/esm/components/ComponentName',
},
{
name: '@patternfly/react-icons',
message: 'Use specific icon imports: @patternfly/react-icons/dist/esm/icons/IconName',
},
{
name: 'date-fns',
message: 'Use specific function imports: date-fns/functionName',
},
{
name: 'lodash',
message: 'Use specific function imports: lodash/functionName',
},
],
},
],

21
workspaces/frontend/package-lock.json generated
View File

@ -10372,13 +10372,15 @@
}
},
"node_modules/es-set-tostringtag": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz",
"integrity": "sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==",
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
"integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
"license": "MIT",
"dependencies": {
"get-intrinsic": "^1.2.4",
"es-errors": "^1.3.0",
"get-intrinsic": "^1.2.6",
"has-tostringtag": "^1.0.2",
"hasown": "^2.0.1"
"hasown": "^2.0.2"
},
"engines": {
"node": ">= 0.4"
@ -12229,13 +12231,16 @@
}
},
"node_modules/form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"version": "4.0.4",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
"integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
"dev": true,
"license": "MIT",
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"es-set-tostringtag": "^2.1.0",
"hasown": "^2.0.2",
"mime-types": "^2.1.12"
},
"engines": {

2
workspaces/frontend/src/__tests__/cypress/cypress/pages/home.ts
View File

@ -4,7 +4,7 @@ class Home {
}
findButton() {
return cy.get('button:contains("Create Workspace")');
return cy.get('button:contains("Create workspace")');
}
}

13
workspaces/frontend/src/app/App.tsx
View File

@ -2,20 +2,19 @@ import React, { useEffect } from 'react';
import '@patternfly/patternfly/patternfly-addons.css';
import '@patternfly/react-core/dist/styles/base.css';
import './app.css';
import { Brand } from '@patternfly/react-core/dist/esm/components/Brand';
import { Flex } from '@patternfly/react-core/dist/esm/layouts/Flex';
import {
Brand,
Flex,
Masthead,
MastheadBrand,
MastheadContent,
MastheadLogo,
MastheadMain,
MastheadToggle,
Page,
PageToggleButton,
Title,
} from '@patternfly/react-core';
import { BarsIcon } from '@patternfly/react-icons';
} from '@patternfly/react-core/dist/esm/components/Masthead';
import { Page, PageToggleButton } from '@patternfly/react-core/dist/esm/components/Page';
import { Title } from '@patternfly/react-core/dist/esm/components/Title';
import { BarsIcon } from '@patternfly/react-icons/dist/esm/icons/bars-icon';
import ErrorBoundary from '~/app/error/ErrorBoundary';
import NamespaceSelector from '~/shared/components/NamespaceSelector';
import logoDarkTheme from '~/images/logo-dark-theme.svg';

4
workspaces/frontend/src/app/AppRoutes.tsx
View File

@ -43,7 +43,7 @@ export const useAdminDebugSettings = (): NavDataItem[] => {
children: [{ label: 'Notebooks', path: '/notebookDebugSettings' }],
},
{
label: 'Workspace Kinds',
label: 'Workspace kinds',
path: AppRoutePaths.workspaceKinds,
},
];
@ -51,7 +51,7 @@ export const useAdminDebugSettings = (): NavDataItem[] => {
export const useNavData = (): NavDataItem[] => [
{
label: 'Notebooks',
label: 'Workspaces',
path: AppRoutePaths.workspaces,
},
...useAdminDebugSettings(),

3
workspaces/frontend/src/app/EnsureAPIAvailability.tsx
View File

@ -1,5 +1,6 @@
import React from 'react';
import { Bullseye, Spinner } from '@patternfly/react-core';
import { Bullseye } from '@patternfly/react-core/dist/esm/layouts/Bullseye';
import { Spinner } from '@patternfly/react-core/dist/esm/components/Spinner';
import { useNotebookAPI } from './hooks/useNotebookAPI';
interface EnsureAPIAvailabilityProps {

7
workspaces/frontend/src/app/NavSidebar.tsx
View File

@ -1,14 +1,13 @@
import React, { useState } from 'react';
import { NavLink } from 'react-router-dom';
import { Brand } from '@patternfly/react-core/dist/esm/components/Brand';
import {
Brand,
Nav,
NavExpandable,
NavItem,
NavList,
PageSidebar,
PageSidebarBody,
} from '@patternfly/react-core';
} from '@patternfly/react-core/dist/esm/components/Nav';
import { PageSidebar, PageSidebarBody } from '@patternfly/react-core/dist/esm/components/Page';
import { useTypedLocation } from '~/app/routerHelper';
import { useNavData, isNavDataGroup, NavDataHref, NavDataGroup } from './AppRoutes';
import { isMUITheme, LOGO_LIGHT } from './const';

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

@ -1,5 +1,6 @@
import * as React from 'react';
import { Alert, Bullseye } from '@patternfly/react-core';
import { Alert } from '@patternfly/react-core/dist/esm/components/Alert';
import { Bullseye } from '@patternfly/react-core/dist/esm/layouts/Bullseye';
interface LoadErrorProps {
error: Error;

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

@ -1,5 +1,6 @@
import * as React from 'react';
import { Bullseye, Spinner } from '@patternfly/react-core';
import { Bullseye } from '@patternfly/react-core/dist/esm/layouts/Bullseye';
import { Spinner } from '@patternfly/react-core/dist/esm/components/Spinner';
// TODO: simple LoadingSpinner component -- we should improve this later

6
workspaces/frontend/src/app/components/ThemeAwareSearchInput.tsx
View File

@ -1,5 +1,9 @@
import React from 'react';
import { SearchInput, SearchInputProps, TextInput } from '@patternfly/react-core';
import {
SearchInput,
SearchInputProps,
} from '@patternfly/react-core/dist/esm/components/SearchInput';
import { TextInput } from '@patternfly/react-core/dist/esm/components/TextInput';
import FormFieldset from 'app/components/FormFieldset';
import { isMUITheme } from 'app/const';

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

@ -1,10 +1,12 @@
import React from 'react';
import { Alert, List, ListItem } from '@patternfly/react-core';
import { Alert } from '@patternfly/react-core/dist/esm/components/Alert';
import { List, ListItem } from '@patternfly/react-core/dist/esm/components/List';
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 }) => {

34
workspaces/frontend/src/app/components/WorkspaceTable.tsx
View File

@ -1,17 +1,19 @@
import React, { useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
import { PageSection } from '@patternfly/react-core/dist/esm/components/Page';
import {
PageSection,
TimestampTooltipVariant,
Timestamp,
Label,
} from '@patternfly/react-core/dist/esm/components/Timestamp';
import { Label } from '@patternfly/react-core/dist/esm/components/Label';
import {
PaginationVariant,
Pagination,
Content,
Tooltip,
Bullseye,
Button,
Icon,
} from '@patternfly/react-core';
} from '@patternfly/react-core/dist/esm/components/Pagination';
import { Content } from '@patternfly/react-core/dist/esm/components/Content';
import { Tooltip } from '@patternfly/react-core/dist/esm/components/Tooltip';
import { Bullseye } from '@patternfly/react-core/dist/esm/layouts/Bullseye';
import { Button } from '@patternfly/react-core/dist/esm/components/Button';
import { Icon } from '@patternfly/react-core/dist/esm/components/Icon';
import {
Table,
Thead,
@ -22,14 +24,12 @@ import {
ThProps,
ActionsColumn,
IActions,
} from '@patternfly/react-table';
import {
InfoCircleIcon,
ExclamationTriangleIcon,
TimesCircleIcon,
QuestionCircleIcon,
} from '@patternfly/react-icons';
import { formatDistanceToNow } from 'date-fns';
} from '@patternfly/react-table/dist/esm/components/Table';
import { InfoCircleIcon } from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
import { TimesCircleIcon } from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
import { QuestionCircleIcon } from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
import { formatDistanceToNow } from 'date-fns/formatDistanceToNow';
import { Workspace, WorkspaceState } from '~/shared/api/backendApiTypes';
import {
DataFieldKey,
@ -394,7 +394,7 @@ const WorkspaceTable = React.forwardRef<WorkspaceTableRef, WorkspaceTableProps>(
toolbarActions={
canCreateWorkspaces && (
<Button variant="primary" ouiaId="Primary" onClick={createWorkspace}>
Create Workspace
Create workspace
</Button>
)
}

8
workspaces/frontend/src/app/context/WorkspaceActionsContext.tsx
View File

@ -1,5 +1,9 @@
import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
import { Drawer, DrawerContent, DrawerContentBody } from '@patternfly/react-core';
import {
Drawer,
DrawerContent,
DrawerContentBody,
} from '@patternfly/react-core/dist/esm/components/Drawer';
import { useNamespaceContext } from '~/app/context/NamespaceContextProvider';
import { useNotebookAPI } from '~/app/hooks/useNotebookAPI';
import { WorkspaceDetails } from '~/app/pages/Workspaces/Details/WorkspaceDetails';
@ -209,7 +213,7 @@ export const WorkspaceActionsContextProvider: React.FC<WorkspaceActionsContextPr
isOpen
resourceName={activeWsAction.workspace.name}
namespace={activeWsAction.workspace.namespace}
title="Delete Workspace?"
title="Delete workspace?"
onClose={() => setActiveWsAction(null)}
onDelete={async () => executeDeleteAction()}
/>

6
workspaces/frontend/src/app/error/ErrorBoundary.tsx
View File

@ -1,7 +1,9 @@
import React from 'react';
import { Link } from 'react-router-dom';
import { Button, Split, SplitItem, Title } from '@patternfly/react-core';
import { TimesIcon } from '@patternfly/react-icons';
import { Button } from '@patternfly/react-core/dist/esm/components/Button';
import { Split, SplitItem } from '@patternfly/react-core/dist/esm/layouts/Split';
import { Title } from '@patternfly/react-core/dist/esm/components/Title';
import { TimesIcon } from '@patternfly/react-icons/dist/esm/icons/times-icon';
import { AppRoutePaths } from '~/app/routes';
import ErrorDetails from '~/app/error/ErrorDetails';
import UpdateState from '~/app/error/UpdateState';

6
workspaces/frontend/src/app/error/ErrorDetails.tsx
View File

@ -2,12 +2,14 @@ import React from 'react';
import {
ClipboardCopy,
ClipboardCopyVariant,
} from '@patternfly/react-core/dist/esm/components/ClipboardCopy';
import {
DescriptionList,
DescriptionListDescription,
DescriptionListGroup,
DescriptionListTerm,
Title,
} from '@patternfly/react-core';
} from '@patternfly/react-core/dist/esm/components/DescriptionList';
import { Title } from '@patternfly/react-core/dist/esm/components/Title';
type ErrorDetailsProps = {
title: string;

12
workspaces/frontend/src/app/error/UpdateState.tsx
View File

@ -1,14 +1,14 @@
import React from 'react';
import { Button } from '@patternfly/react-core/dist/esm/components/Button';
import {
Button,
EmptyState,
EmptyStateActions,
EmptyStateBody,
EmptyStateFooter,
EmptyStateVariant,
PageSection,
} from '@patternfly/react-core';
import { PathMissingIcon } from '@patternfly/react-icons';
EmptyStateActions,
EmptyStateFooter,
} from '@patternfly/react-core/dist/esm/components/EmptyState';
import { PageSection } from '@patternfly/react-core/dist/esm/components/Page';
import { PathMissingIcon } from '@patternfly/react-icons/dist/esm/icons/path-missing-icon';
type Props = {
onClose: () => void;

2
workspaces/frontend/src/app/hooks/useWorkspaceRowActions.ts
View File

@ -1,5 +1,5 @@
import { useCallback } from 'react';
import { IActions } from '@patternfly/react-table';
import { IActions } from '@patternfly/react-table/dist/esm/components/Table';
import { Workspace } from '~/shared/api/backendApiTypes';
import { useWorkspaceActionsContext, WorkspaceAction } from '~/app/context/WorkspaceActionsContext';

10
workspaces/frontend/src/app/pages/Debug/Debug.tsx
View File

@ -1,13 +1,13 @@
import React from 'react';
import { CubesIcon } from '@patternfly/react-icons';
import { CubesIcon } from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
import { Button } from '@patternfly/react-core/dist/esm/components/Button';
import {
Button,
EmptyState,
EmptyStateBody,
EmptyStateFooter,
EmptyStateVariant,
PageSection,
} from '@patternfly/react-core';
EmptyStateFooter,
} from '@patternfly/react-core/dist/esm/components/EmptyState';
import { PageSection } from '@patternfly/react-core/dist/esm/components/Page';
const Debug: React.FunctionComponent = () => (
<PageSection>

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

@ -1,15 +1,16 @@
/* eslint-disable @typescript-eslint/no-unused-expressions */
import React, { useRef } from 'react';
import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table/dist/esm/components/Table';
import { Button } from '@patternfly/react-core/dist/esm/components/Button';
import {
Button,
FormFieldGroupExpandable,
FormFieldGroupHeader,
TextInput,
} from '@patternfly/react-core';
} from '@patternfly/react-core/dist/esm/components/Form';
import { TextInput } from '@patternfly/react-core/dist/esm/components/TextInput';
import inlineEditStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit';
import { css } from '@patternfly/react-styles';
import { PlusCircleIcon, TrashAltIcon } from '@patternfly/react-icons';
import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
import { TrashAltIcon } from '@patternfly/react-icons/dist/esm/icons/trash-alt-icon';
import { WorkspaceOptionLabel } from '~/shared/api/backendApiTypes';
interface EditableRowInterface {
@ -71,9 +72,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 +96,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 +154,7 @@ export const EditableLabels: React.FC<EditableLabelsProps> = ({ rows, setRows })
]);
}}
>
Add Label
{`Add ${buttonLabel}`}
</Button>
</FormFieldGroupExpandable>
);

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

@ -1,28 +1,27 @@
import React, { useCallback, useMemo, useState } from 'react';
import {
Button,
Content,
ContentVariants,
Flex,
FlexItem,
PageGroup,
PageSection,
Stack,
StackItem,
} from '@patternfly/react-core';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Button } from '@patternfly/react-core/dist/esm/components/Button';
import { Content, ContentVariants } from '@patternfly/react-core/dist/esm/components/Content';
import { Flex, FlexItem } from '@patternfly/react-core/dist/esm/layouts/Flex';
import { PageGroup, PageSection } from '@patternfly/react-core/dist/esm/components/Page';
import { Stack, StackItem } from '@patternfly/react-core/dist/esm/layouts/Stack';
import { t_global_spacer_sm as SmallPadding } from '@patternfly/react-tokens';
import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
import { EmptyState, EmptyStateBody } from '@patternfly/react-core/dist/esm/components/EmptyState';
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 +29,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,47 +50,48 @@ 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);
// TODO: Complete handleCreate with API call to create a new WS kind
try {
if (mode === 'create') {
const newWorkspaceKind = await api.createWorkspaceKind({}, yamlValue);
const newWorkspaceKind = await api.createWorkspaceKind({ directYAML: true }, yamlValue);
// TODO: alert user about success
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 +101,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 +184,12 @@ export const WorkspaceKindForm: React.FC = () => {
setData('podConfig', podConfig);
}}
/>
<WorkspaceKindFormPodTemplate
podTemplate={data.podTemplate}
updatePodTemplate={(podTemplate) => {
setData('podTemplate', podTemplate);
}}
/>
</>
)}
</PageSection>
@ -169,9 +200,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>

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

@ -0,0 +1,141 @@
import React, { useMemo, useState } from 'react';
import { Table, Thead, Tr, Td, Tbody, Th } from '@patternfly/react-table/dist/esm/components/Table';
import { getUniqueId } from '@patternfly/react-core/helpers';
import { Label } from '@patternfly/react-core/dist/esm/components/Label';
import { MenuToggle } from '@patternfly/react-core/dist/esm/components/MenuToggle';
import { PageSection } from '@patternfly/react-core/dist/esm/components/Page';
import {
Pagination,
PaginationVariant,
} from '@patternfly/react-core/dist/esm/components/Pagination';
import { Radio } from '@patternfly/react-core/dist/esm/components/Radio';
import { Dropdown, DropdownItem } from '@patternfly/react-core/dist/esm/components/Dropdown';
import { EllipsisVIcon } from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
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>
);
};

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

@ -2,13 +2,12 @@ import React, { useCallback, useState } from 'react';
import yaml, { YAMLException } from 'js-yaml';
import {
FileUpload,
DropEvent,
FileUploadHelperText,
HelperText,
HelperTextItem,
Content,
DropzoneErrorCode,
} from '@patternfly/react-core';
FileUploadHelperText,
} from '@patternfly/react-core/dist/esm/components/FileUpload';
import { DropEvent } from '@patternfly/react-core/dist/esm/helpers/typeUtils';
import { HelperText, HelperTextItem } from '@patternfly/react-core/dist/esm/components/HelperText';
import { Content } from '@patternfly/react-core/dist/esm/components/Content';
import { isValidWorkspaceKindYaml } from '~/app/pages/WorkspaceKinds/Form/helpers';
import { ValidationStatus } from '~/app/pages/WorkspaceKinds/Form/WorkspaceKindForm';

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 }>([

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

@ -1,26 +1,24 @@
import React, { useCallback, useState } from 'react';
import { Button } from '@patternfly/react-core/dist/esm/components/Button';
import { Content } from '@patternfly/react-core/dist/esm/components/Content';
import {
Button,
Content,
Dropdown,
MenuToggle,
DropdownItem,
Modal,
ModalHeader,
ModalFooter,
ModalVariant,
EmptyState,
} from '@patternfly/react-core/dist/esm/components/Modal';
import {
EmptyStateFooter,
EmptyStateActions,
EmptyState,
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';
} from '@patternfly/react-core/dist/esm/components/EmptyState';
import { ExpandableSection } from '@patternfly/react-core/dist/esm/components/ExpandableSection';
import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
import { CubesIcon } from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
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 +36,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 +122,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>
)}

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

@ -4,15 +4,16 @@ import {
ModalHeader,
ModalBody,
ModalFooter,
Button,
Form,
FormGroup,
TextInput,
} from '@patternfly/react-core/dist/esm/components/Modal';
import { Button } from '@patternfly/react-core/dist/esm/components/Button';
import { Form, FormGroup } from '@patternfly/react-core/dist/esm/components/Form';
import { TextInput } from '@patternfly/react-core/dist/esm/components/TextInput';
import {
FormSelect,
FormSelectOption,
Switch,
HelperText,
} from '@patternfly/react-core';
} from '@patternfly/react-core/dist/esm/components/FormSelect';
import { Switch } from '@patternfly/react-core/dist/esm/components/Switch';
import { HelperText } from '@patternfly/react-core/dist/esm/components/HelperText';
import { WorkspaceKindImageConfigValue, ImagePullPolicy } from '~/app/types';
import { EditableLabels } from '~/app/pages/WorkspaceKinds/Form/EditableLabels';
import { emptyImage } from '~/app/pages/WorkspaceKinds/Form/helpers';
@ -138,7 +139,7 @@ export const WorkspaceKindFormImageModal: React.FC<WorkspaceKindFormImageModalPr
</FormSelect>
</FormGroup>
<WorkspaceKindFormImagePort
ports={image.ports}
ports={image.ports || []}
setPorts={(ports) => setImage({ ...image, ports })}
/>
{mode === 'edit' && (

9
workspaces/frontend/src/app/pages/WorkspaceKinds/Form/image/WorkspaceKindFormImagePort.tsx
View File

@ -1,12 +1,11 @@
import React from 'react';
import {
FormGroup,
FormFieldGroupExpandable,
FormFieldGroupHeader,
FormGroup,
Grid,
GridItem,
TextInput,
} from '@patternfly/react-core';
} from '@patternfly/react-core/dist/esm/components/Form';
import { Grid, GridItem } from '@patternfly/react-core/dist/esm/layouts/Grid';
import { TextInput } from '@patternfly/react-core/dist/esm/components/TextInput';
import { WorkspaceKindImagePort } from '~/app/types';
interface WorkspaceKindFormImagePortProps {

8
workspaces/frontend/src/app/pages/WorkspaceKinds/Form/image/WorkspaceKindFormImageRedirect.tsx
View File

@ -1,12 +1,14 @@
import React from 'react';
import {
FormGroup,
FormFieldGroupExpandable,
FormFieldGroupHeader,
FormGroup,
} from '@patternfly/react-core/dist/esm/components/Form';
import {
FormSelect,
FormSelectOption,
TextInput,
} from '@patternfly/react-core';
} from '@patternfly/react-core/dist/esm/components/FormSelect';
import { TextInput } from '@patternfly/react-core/dist/esm/components/TextInput';
import {
WorkspaceOptionRedirect,
WorkspaceRedirectMessageLevel,

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

@ -1,18 +1,22 @@
import React, { useState, useEffect, useCallback, useMemo } from 'react';
import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
import {
FormSelect,
FormSelectOption,
NumberInput,
Split,
SplitItem,
} from '@patternfly/react-core';
import { CPU_UNITS, MEMORY_UNITS_FOR_SELECTION, UnitOption } from '~/shared/utilities/valueUnits';
} from '@patternfly/react-core/dist/esm/components/FormSelect';
import { NumberInput } from '@patternfly/react-core/dist/esm/components/NumberInput';
import { Split, SplitItem } from '@patternfly/react-core/dist/esm/layouts/Split';
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 +30,7 @@ const unitMap: {
} = {
memory: MEMORY_UNITS_FOR_SELECTION,
cpu: CPU_UNITS,
time: TIME_UNIT_FOR_SELECTION,
};
const DEFAULT_STEP = 1;
@ -34,7 +39,6 @@ const DEFAULT_UNITS = {
memory: 'Mi',
cpu: '',
};
export const ResourceInputWrapper: React.FC<ResourceInputWrapperProps> = ({
value,
onChange,
@ -48,22 +52,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 +102,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 +145,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 +183,7 @@ export const ResourceInputWrapper: React.FC<ResourceInputWrapperProps> = ({
onChange={(_, v) => handleUnitChange(v)}
id={`${ariaLabel}-unit-select`}
isDisabled={isDisabled}
className="workspace-kind-unit-select"
>
{unitOptions}
</FormSelect>

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

@ -1,27 +1,24 @@
import React, { useCallback, useState } from 'react';
import { Button } from '@patternfly/react-core/dist/esm/components/Button';
import { Content } from '@patternfly/react-core/dist/esm/components/Content';
import {
Button,
Content,
Dropdown,
MenuToggle,
DropdownItem,
Modal,
ModalHeader,
ModalFooter,
ModalVariant,
} from '@patternfly/react-core/dist/esm/components/Modal';
import {
EmptyState,
EmptyStateBody,
EmptyStateFooter,
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';
} from '@patternfly/react-core/dist/esm/components/EmptyState';
import { ExpandableSection } from '@patternfly/react-core/dist/esm/components/ExpandableSection';
import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
import { CubesIcon } from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
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 +34,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 +124,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}
</>
)}

13
workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/WorkspaceKindFormPodConfigModal.tsx
View File

@ -4,13 +4,12 @@ import {
ModalHeader,
ModalBody,
ModalFooter,
Button,
Form,
FormGroup,
TextInput,
Switch,
HelperText,
} from '@patternfly/react-core';
} from '@patternfly/react-core/dist/esm/components/Modal';
import { Button } from '@patternfly/react-core/dist/esm/components/Button';
import { Form, FormGroup } from '@patternfly/react-core/dist/esm/components/Form';
import { TextInput } from '@patternfly/react-core/dist/esm/components/TextInput';
import { Switch } from '@patternfly/react-core/dist/esm/components/Switch';
import { HelperText } from '@patternfly/react-core/dist/esm/components/HelperText';
import { WorkspaceKindPodConfigValue } from '~/app/types';
import { WorkspaceOptionLabel } from '~/shared/api/backendApiTypes';
import { EditableLabels } from '~/app/pages/WorkspaceKinds/Form/EditableLabels';

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

@ -1,17 +1,16 @@
import React, { useCallback, useEffect, useState, useMemo } from 'react';
import { Button } from '@patternfly/react-core/dist/esm/components/Button';
import { Grid, GridItem } from '@patternfly/react-core/dist/esm/layouts/Grid';
import { Title } from '@patternfly/react-core/dist/esm/components/Title';
import {
Button,
Grid,
GridItem,
Title,
FormFieldGroupExpandable,
FormFieldGroupHeader,
TextInput,
Checkbox,
HelperText,
HelperTextItem,
} from '@patternfly/react-core';
import { PlusCircleIcon, TrashAltIcon } from '@patternfly/react-icons';
} from '@patternfly/react-core/dist/esm/components/Form';
import { TextInput } from '@patternfly/react-core/dist/esm/components/TextInput';
import { Checkbox } from '@patternfly/react-core/dist/esm/components/Checkbox';
import { HelperText, HelperTextItem } from '@patternfly/react-core/dist/esm/components/HelperText';
import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
import { TrashAltIcon } from '@patternfly/react-icons/dist/esm/icons/trash-alt-icon';
import { generateUniqueId } from '~/app/pages/WorkspaceKinds/Form/helpers';
import { isMemoryLimitLarger } from '~/shared/utilities/valueUnits';
import { ResourceInputWrapper } from './ResourceInputWrapper';
@ -312,6 +311,7 @@ export const WorkspaceKindFormResource: React.FC<WorkspaceKindFormResourceProps>
onChange={(_event, value) => handleChange(res.id, 'type', value)}
/>
</GridItem>
<GridItem span={2}>
<Button
variant="link"

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

@ -0,0 +1,196 @@
import React, { useCallback, useState } from 'react';
import {
Form,
FormFieldGroup,
FormFieldGroupHeader,
FormGroup,
} from '@patternfly/react-core/dist/esm/components/Form';
import { ExpandableSection } from '@patternfly/react-core/dist/esm/components/ExpandableSection';
import { HelperText, HelperTextItem } from '@patternfly/react-core/dist/esm/components/HelperText';
import { Switch } from '@patternfly/react-core/dist/esm/components/Switch';
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>
);
};

19
workspaces/frontend/src/app/pages/WorkspaceKinds/Form/properties/WorkspaceKindFormProperties.tsx
View File

@ -1,13 +1,10 @@
import React, { useState } from 'react';
import {
Content,
ExpandableSection,
Form,
FormGroup,
HelperText,
Switch,
TextInput,
} from '@patternfly/react-core';
import { Content } from '@patternfly/react-core/dist/esm/components/Content';
import { ExpandableSection } from '@patternfly/react-core/dist/esm/components/ExpandableSection';
import { Form, FormGroup } from '@patternfly/react-core/dist/esm/components/Form';
import { HelperText } from '@patternfly/react-core/dist/esm/components/HelperText';
import { Switch } from '@patternfly/react-core/dist/esm/components/Switch';
import { TextInput } from '@patternfly/react-core/dist/esm/components/TextInput';
import { WorkspaceKindProperties } from '~/app/types';
interface WorkspaceKindFormPropertiesProps {
@ -79,9 +76,9 @@ export const WorkspaceKindFormProperties: React.FC<WorkspaceKindFormPropertiesPr
<TextInput
isDisabled={!properties.deprecated}
type="text"
label="Deprecation Message"
label="Deprecation message"
value={properties.deprecationMessage}
placeholder="Deprecation Message"
placeholder="Deprecation message"
onChange={(_, value) => updateField({ ...properties, deprecationMessage: value })}
id="workspace-kind-deprecated-msg"
/>

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

@ -3,25 +3,29 @@ import {
Drawer,
DrawerContent,
DrawerContentBody,
PageSection,
Content,
Tooltip,
Label,
} from '@patternfly/react-core/dist/esm/components/Drawer';
import { PageSection } from '@patternfly/react-core/dist/esm/components/Page';
import { Content } from '@patternfly/react-core/dist/esm/components/Content';
import { Tooltip } from '@patternfly/react-core/dist/esm/components/Tooltip';
import { Label } from '@patternfly/react-core/dist/esm/components/Label';
import {
Toolbar,
ToolbarContent,
ToolbarItem,
ToolbarGroup,
ToolbarFilter,
ToolbarToggleGroup,
} from '@patternfly/react-core/dist/esm/components/Toolbar';
import {
Menu,
MenuContent,
MenuList,
MenuItem,
MenuToggle,
Popper,
ToolbarGroup,
ToolbarFilter,
ToolbarToggleGroup,
Bullseye,
Button,
} from '@patternfly/react-core';
} from '@patternfly/react-core/dist/esm/components/Menu';
import { MenuToggle } from '@patternfly/react-core/dist/esm/components/MenuToggle';
import { Popper } from '@patternfly/react-core/helpers';
import { Bullseye } from '@patternfly/react-core/dist/esm/layouts/Bullseye';
import { Button } from '@patternfly/react-core/dist/esm/components/Button';
import {
Table,
Thead,
@ -32,8 +36,8 @@ import {
ThProps,
ActionsColumn,
IActions,
} from '@patternfly/react-table';
import { FilterIcon } from '@patternfly/react-icons';
} from '@patternfly/react-table/dist/esm/components/Table';
import { FilterIcon } from '@patternfly/react-icons/dist/esm/icons/filter-icon';
import { WorkspaceKind } from '~/shared/api/backendApiTypes';
import useWorkspaceKinds from '~/app/hooks/useWorkspaceKinds';
import { useWorkspaceCountPerKind } from '~/app/hooks/useWorkspaceCountPerKind';
@ -58,9 +62,9 @@ export const WorkspaceKinds: React.FunctionComponent = () => {
description: { name: 'Description', label: 'Description', id: 'description' },
deprecated: { name: 'Status', label: 'Status', id: 'status' },
numberOfWorkspaces: {
name: 'Number of workspaces',
label: 'Number of workspaces',
id: 'number-of-workspaces',
name: 'Workspaces',
label: 'Workspaces',
id: 'workspaces',
},
}),
[],
@ -430,8 +434,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 = (
@ -465,7 +478,7 @@ export const WorkspaceKinds: React.FunctionComponent = () => {
<DrawerContentBody>
<PageSection isFilled>
<Content>
<h1>Kubeflow Workspace Kinds</h1>
<h1>Workspace kinds</h1>
<p>View your existing workspace kinds.</p>
</Content>
<br />
@ -486,9 +499,9 @@ export const WorkspaceKinds: React.FunctionComponent = () => {
<ThemeAwareSearchInput
value={searchNameValue}
onChange={onSearchNameChange}
placeholder="Filter by Name"
fieldLabel="Find by Name"
aria-label="Filter by Name"
placeholder="Filter by name"
fieldLabel="Find by name"
aria-label="Filter by name"
/>
</ToolbarItem>
</ToolbarFilter>
@ -507,9 +520,9 @@ export const WorkspaceKinds: React.FunctionComponent = () => {
<ThemeAwareSearchInput
value={searchDescriptionValue}
onChange={onSearchDescriptionChange}
placeholder="Filter by Description"
fieldLabel="Find by Description"
aria-label="Filter by Description"
placeholder="Filter by description"
fieldLabel="Find by description"
aria-label="Filter by description"
/>
</ToolbarItem>
</ToolbarFilter>
@ -524,7 +537,7 @@ export const WorkspaceKinds: React.FunctionComponent = () => {
</ToolbarFilter>
<ToolbarItem>
<Button variant="primary" ouiaId="Primary" onClick={createWorkspaceKind}>
Create Workspace Kind
Create workspace kind
</Button>
</ToolbarItem>
</ToolbarGroup>
@ -595,6 +608,7 @@ export const WorkspaceKinds: React.FunctionComponent = () => {
<Td dataLabel={columns.numberOfWorkspaces.name}>
<Button
variant="link"
className="workspace-kind-summary-button"
isInline
onClick={() =>
navigate('workspaceKindSummary', {

12
workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetails.tsx
View File

@ -3,15 +3,17 @@ import {
DrawerActions,
DrawerCloseButton,
DrawerHead,
DrawerPanelBody,
DrawerPanelContent,
DrawerPanelBody,
} from '@patternfly/react-core/dist/esm/components/Drawer';
import {
Tabs,
Tab,
TabTitleText,
Title,
TabContentBody,
TabContent,
} from '@patternfly/react-core';
} from '@patternfly/react-core/dist/esm/components/Tabs';
import { Title } from '@patternfly/react-core/dist/esm/components/Title';
import { WorkspaceKind } from '~/shared/api/backendApiTypes';
import { WorkspaceCountPerKind } from '~/app/hooks/useWorkspaceCountPerKind';
import { WorkspaceKindDetailsNamespaces } from '~/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsNamespaces';
@ -45,7 +47,7 @@ export const WorkspaceKindDetails: React.FunctionComponent<WorkspaceKindDetailsP
};
return (
<DrawerPanelContent data-testid="workspaceDetails">
<DrawerPanelContent minSize="45%" isResizable data-testid="workspaceDetails">
<DrawerHead>
<Title headingLevel="h6">{workspaceKind.name}</Title>
<DrawerActions>
@ -69,7 +71,7 @@ export const WorkspaceKindDetails: React.FunctionComponent<WorkspaceKindDetailsP
/>
<Tab
eventKey={podConfigsTabKey}
title={<TabTitleText>Pod Configs</TabTitleText>}
title={<TabTitleText>Pod configs</TabTitleText>}
tabContentId="podConfigsTabContent"
aria-label="Pod Configs"
/>

54
workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsImages.tsx
View File

@ -1,8 +1,7 @@
import React from 'react';
import { Button, List, ListItem } from '@patternfly/react-core';
import { WorkspaceKind } from '~/shared/api/backendApiTypes';
import { WorkspaceCountPerKind } from '~/app/hooks/useWorkspaceCountPerKind';
import { useTypedNavigate } from '~/app/routerHelper';
import { WorkspaceKindDetailsTable } from './WorkspaceKindDetailsTable';
type WorkspaceDetailsImagesProps = {
workspaceKind: WorkspaceKind;
@ -12,36 +11,21 @@ type WorkspaceDetailsImagesProps = {
export const WorkspaceKindDetailsImages: React.FunctionComponent<WorkspaceDetailsImagesProps> = ({
workspaceKind,
workspaceCountPerKind,
}) => {
const navigate = useTypedNavigate();
return (
<List isPlain>
{workspaceKind.podTemplate.options.imageConfig.values.map((image, rowIndex) => (
<ListItem key={rowIndex}>
{image.displayName}:{' '}
<Button
variant="link"
isInline
onClick={() =>
navigate('workspaceKindSummary', {
params: { kind: workspaceKind.name },
state: {
imageId: image.id,
},
})
}
>
{
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
workspaceCountPerKind[workspaceKind.name]
? workspaceCountPerKind[workspaceKind.name].countByImage[image.id] ?? 0
: 0
}
{' Workspaces'}
</Button>
</ListItem>
))}
</List>
);
};
}) => (
<WorkspaceKindDetailsTable
rows={workspaceKind.podTemplate.options.imageConfig.values.map((image) => ({
id: image.id,
displayName: image.displayName,
kindName: workspaceKind.name,
workspaceCountRouteState: {
imageId: image.id,
},
workspaceCount:
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
workspaceCountPerKind[workspaceKind.name]
? workspaceCountPerKind[workspaceKind.name].countByImage[image.id] ?? 0
: 0,
}))}
tableKind="image"
/>
);

63
workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsNamespaces.tsx
View File

@ -1,8 +1,7 @@
import React from 'react';
import { Button, List, ListItem } from '@patternfly/react-core';
import { WorkspaceKind } from '~/shared/api/backendApiTypes';
import { WorkspaceCountPerKind } from '~/app/hooks/useWorkspaceCountPerKind';
import { useTypedNavigate } from '~/app/routerHelper';
import { WorkspaceKindDetailsTable } from './WorkspaceKindDetailsTable';
type WorkspaceDetailsNamespacesProps = {
workspaceKind: WorkspaceKind;
@ -11,41 +10,25 @@ type WorkspaceDetailsNamespacesProps = {
export const WorkspaceKindDetailsNamespaces: React.FunctionComponent<
WorkspaceDetailsNamespacesProps
> = ({ workspaceKind, workspaceCountPerKind }) => {
const navigate = useTypedNavigate();
return (
<List isPlain>
{Object.keys(
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
workspaceCountPerKind[workspaceKind.name]
? workspaceCountPerKind[workspaceKind.name].countByNamespace
: [],
).map((namespace, rowIndex) => (
<ListItem key={rowIndex}>
{namespace}:{' '}
<Button
variant="link"
isInline
onClick={() =>
navigate('workspaceKindSummary', {
params: { kind: workspaceKind.name },
state: {
namespace,
},
})
}
>
{
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
workspaceCountPerKind[workspaceKind.name]
? workspaceCountPerKind[workspaceKind.name].countByNamespace[namespace]
: 0
}
{' Workspaces'}
</Button>
</ListItem>
))}
</List>
);
};
> = ({ workspaceKind, workspaceCountPerKind }) => (
<WorkspaceKindDetailsTable
rows={Object.keys(
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
workspaceCountPerKind[workspaceKind.name]
? workspaceCountPerKind[workspaceKind.name].countByNamespace
: [],
).map((namespace, rowIndex) => ({
id: String(rowIndex),
displayName: namespace,
kindName: workspaceKind.name,
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
workspaceCount: workspaceCountPerKind[workspaceKind.name]
? workspaceCountPerKind[workspaceKind.name].countByNamespace[namespace]
: 0,
workspaceCountRouteState: {
namespace,
},
}))}
tableKind="namespace"
/>
);

6
workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsOverview.tsx
View File

@ -4,8 +4,8 @@ import {
DescriptionListTerm,
DescriptionListGroup,
DescriptionListDescription,
Divider,
} from '@patternfly/react-core';
} from '@patternfly/react-core/dist/esm/components/DescriptionList';
import { Divider } from '@patternfly/react-core/dist/esm/components/Divider';
import { WorkspaceKind } from '~/shared/api/backendApiTypes';
import ImageFallback from '~/shared/components/ImageFallback';
import WithValidImage from '~/shared/components/WithValidImage';
@ -42,7 +42,7 @@ export const WorkspaceKindDetailsOverview: React.FunctionComponent<
</DescriptionListGroup>
<Divider />
<DescriptionListGroup>
<DescriptionListTerm>Deprecation Message</DescriptionListTerm>
<DescriptionListTerm>Deprecation message</DescriptionListTerm>
<DescriptionListDescription>{workspaceKind.deprecationMessage}</DescriptionListDescription>
</DescriptionListGroup>
<Divider />

53
workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsPodConfigs.tsx
View File

@ -1,8 +1,7 @@
import React from 'react';
import { Button, List, ListItem } from '@patternfly/react-core';
import { WorkspaceKind } from '~/shared/api/backendApiTypes';
import { WorkspaceCountPerKind } from '~/app/hooks/useWorkspaceCountPerKind';
import { useTypedNavigate } from '~/app/routerHelper';
import { WorkspaceKindDetailsTable } from './WorkspaceKindDetailsTable';
type WorkspaceDetailsPodConfigsProps = {
workspaceKind: WorkspaceKind;
@ -11,36 +10,20 @@ type WorkspaceDetailsPodConfigsProps = {
export const WorkspaceKindDetailsPodConfigs: React.FunctionComponent<
WorkspaceDetailsPodConfigsProps
> = ({ workspaceKind, workspaceCountPerKind }) => {
const navigate = useTypedNavigate();
return (
<List isPlain>
{workspaceKind.podTemplate.options.podConfig.values.map((podConfig, rowIndex) => (
<ListItem key={rowIndex}>
{podConfig.displayName}:{' '}
<Button
variant="link"
isInline
onClick={() =>
navigate('workspaceKindSummary', {
params: { kind: workspaceKind.name },
state: {
podConfigId: podConfig.id,
},
})
}
>
{
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
workspaceCountPerKind[workspaceKind.name]
? workspaceCountPerKind[workspaceKind.name].countByPodConfig[podConfig.id] ?? 0
: 0
}
{' Workspaces'}
</Button>
</ListItem>
))}
</List>
);
};
> = ({ workspaceKind, workspaceCountPerKind }) => (
<WorkspaceKindDetailsTable
rows={workspaceKind.podTemplate.options.podConfig.values.map((podConfig) => ({
id: podConfig.id,
displayName: podConfig.displayName,
kindName: workspaceKind.name,
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
workspaceCount: workspaceCountPerKind[workspaceKind.name]
? workspaceCountPerKind[workspaceKind.name].countByPodConfig[podConfig.id] ?? 0
: 0,
workspaceCountRouteState: {
podConfigId: podConfig.id,
},
}))}
tableKind="podConfig"
/>
);

100
workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsTable.tsx Normal file
View File

@ -0,0 +1,100 @@
import React, { useMemo, useState } from 'react';
import { Table, Thead, Tr, Td, Tbody, Th } from '@patternfly/react-table/dist/esm/components/Table';
import {
Pagination,
PaginationVariant,
} from '@patternfly/react-core/dist/esm/components/Pagination';
import { Content } from '@patternfly/react-core/dist/esm/components/Content';
import { Button } from '@patternfly/react-core/dist/esm/components/Button';
import { useTypedNavigate } from '~/app/routerHelper';
import { RouteStateMap } from '~/app/routes';
export interface WorkspaceKindDetailsTableRow {
id: string;
displayName: string;
kindName: string;
workspaceCount: number;
workspaceCountRouteState: RouteStateMap['workspaceKindSummary'];
}
interface WorkspaceKindDetailsTableProps {
rows: WorkspaceKindDetailsTableRow[];
tableKind: 'image' | 'podConfig' | 'namespace';
}
export const WorkspaceKindDetailsTable: React.FC<WorkspaceKindDetailsTableProps> = ({
rows,
tableKind,
}) => {
const navigate = useTypedNavigate();
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 (
<Content>
<Table aria-label={`workspace-kind-details-${tableKind}`}>
<Thead>
<Tr>
<Th>Name</Th>
<Th>Workspaces</Th>
</Tr>
</Thead>
<Tbody>
{rowPages[page - 1].map((row) => (
<Tr key={row.id}>
<Td>{row.displayName}</Td>
<Td>
<Button
variant="link"
isInline
className="workspace-kind-summary-button"
onClick={() =>
navigate('workspaceKindSummary', {
params: { kind: row.kindName },
state: row.workspaceCountRouteState,
})
}
>
{row.workspaceCount} Workspaces
</Button>
</Td>
</Tr>
))}
</Tbody>
</Table>
<Pagination
itemCount={rows.length}
widgetId="pagination-bottom"
perPage={perPage}
page={page}
variant={PaginationVariant.bottom}
isCompact
onSetPage={onSetPage}
onPerPageSelect={onPerPageSelect}
/>
</Content>
);
};

6
workspaces/frontend/src/app/pages/WorkspaceKinds/summary/WorkspaceKindSummary.tsx
View File

@ -1,10 +1,10 @@
import React, { useCallback, useRef, useState } from 'react';
import { Button } from '@patternfly/react-core/dist/esm/components/Button';
import { Content, ContentVariants } from '@patternfly/react-core/dist/esm/components/Content';
import { PageSection } from '@patternfly/react-core/dist/esm/components/Page';
import { Stack, StackItem } from '@patternfly/react-core/dist/esm/layouts/Stack';
import { Breadcrumb } from '@patternfly/react-core/dist/esm/components/Breadcrumb';
import { BreadcrumbItem } from '@patternfly/react-core/dist/esm/components/Breadcrumb/BreadcrumbItem';
import { useTypedLocation, useTypedParams } from '~/app/routerHelper';
import { ArrowLeftIcon } from '@patternfly/react-icons/dist/esm/icons/arrow-left-icon';
import { useTypedLocation, useTypedNavigate, useTypedParams } from '~/app/routerHelper';
import WorkspaceTable, {
WorkspaceTableFilteredColumn,
WorkspaceTableRef,

17
workspaces/frontend/src/app/pages/Workspaces/DataVolumesList.tsx
View File

@ -2,18 +2,19 @@ import React from 'react';
import {
ClipboardCopy,
ClipboardCopyVariant,
Content,
} from '@patternfly/react-core/dist/esm/components/ClipboardCopy';
import { Content } from '@patternfly/react-core/dist/esm/components/Content';
import {
DescriptionList,
DescriptionListGroup,
DescriptionListTerm,
DescriptionListDescription,
Flex,
FlexItem,
List,
ListItem,
Tooltip,
} from '@patternfly/react-core';
import { DatabaseIcon, LockedIcon } from '@patternfly/react-icons';
} from '@patternfly/react-core/dist/esm/components/DescriptionList';
import { Flex, FlexItem } from '@patternfly/react-core/dist/esm/layouts/Flex';
import { List, ListItem } from '@patternfly/react-core/dist/esm/components/List';
import { Tooltip } from '@patternfly/react-core/dist/esm/components/Tooltip';
import { DatabaseIcon } from '@patternfly/react-icons/dist/esm/icons/database-icon';
import { LockedIcon } from '@patternfly/react-icons/dist/esm/icons/locked-icon';
import { Workspace } from '~/shared/api/backendApiTypes';
interface DataVolumesListProps {

8
workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetails.tsx
View File

@ -3,15 +3,17 @@ import {
DrawerActions,
DrawerCloseButton,
DrawerHead,
DrawerPanelBody,
DrawerPanelContent,
DrawerPanelBody,
} from '@patternfly/react-core/dist/esm/components/Drawer';
import {
Tabs,
Tab,
TabTitleText,
Title,
TabContentBody,
TabContent,
} from '@patternfly/react-core';
} from '@patternfly/react-core/dist/esm/components/Tabs';
import { Title } from '@patternfly/react-core/dist/esm/components/Title';
import { Workspace } from '~/shared/api/backendApiTypes';
import { WorkspaceDetailsOverview } from '~/app/pages/Workspaces/Details/WorkspaceDetailsOverview';
import { WorkspaceDetailsActions } from '~/app/pages/Workspaces/Details/WorkspaceDetailsActions';

9
workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsActions.tsx
View File

@ -1,12 +1,11 @@
import React, { useState } from 'react';
import {
Dropdown,
DropdownList,
MenuToggle,
DropdownItem,
Flex,
FlexItem,
} from '@patternfly/react-core';
DropdownList,
} from '@patternfly/react-core/dist/esm/components/Dropdown';
import { MenuToggle } from '@patternfly/react-core/dist/esm/components/MenuToggle';
import { Flex, FlexItem } from '@patternfly/react-core/dist/esm/layouts/Flex';
interface WorkspaceDetailsActionsProps {
// TODO: Uncomment when edit action is fully supported

14
workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsActivity.tsx
View File

@ -1,12 +1,12 @@
import React from 'react';
import { format } from 'date-fns';
import { format } from 'date-fns/format';
import {
DescriptionList,
DescriptionListTerm,
DescriptionListGroup,
DescriptionListDescription,
Divider,
} from '@patternfly/react-core';
} from '@patternfly/react-core/dist/esm/components/DescriptionList';
import { Divider } from '@patternfly/react-core/dist/esm/components/Divider';
import { Workspace } from '~/shared/api/backendApiTypes';
const DATE_FORMAT = 'PPpp';
@ -23,28 +23,28 @@ export const WorkspaceDetailsActivity: React.FunctionComponent<WorkspaceDetailsA
return (
<DescriptionList isHorizontal>
<DescriptionListGroup>
<DescriptionListTerm>Last Activity</DescriptionListTerm>
<DescriptionListTerm>Last activity</DescriptionListTerm>
<DescriptionListDescription data-testid="lastActivity">
{format(activity.lastActivity, DATE_FORMAT)}
</DescriptionListDescription>
</DescriptionListGroup>
<Divider />
<DescriptionListGroup>
<DescriptionListTerm>Last Update</DescriptionListTerm>
<DescriptionListTerm>Last update</DescriptionListTerm>
<DescriptionListDescription data-testid="lastUpdate">
{format(activity.lastUpdate, DATE_FORMAT)}
</DescriptionListDescription>
</DescriptionListGroup>
<Divider />
<DescriptionListGroup>
<DescriptionListTerm>Pause Time</DescriptionListTerm>
<DescriptionListTerm>Pause time</DescriptionListTerm>
<DescriptionListDescription data-testid="pauseTime">
{format(pausedTime, DATE_FORMAT)}
</DescriptionListDescription>
</DescriptionListGroup>
<Divider />
<DescriptionListGroup>
<DescriptionListTerm>Pending Restart</DescriptionListTerm>
<DescriptionListTerm>Pending restart</DescriptionListTerm>
<DescriptionListDescription data-testid="pendingRestart">
{pendingRestart ? 'Yes' : 'No'}
</DescriptionListDescription>

4
workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsOverview.tsx
View File

@ -4,8 +4,8 @@ import {
DescriptionListTerm,
DescriptionListGroup,
DescriptionListDescription,
Divider,
} from '@patternfly/react-core';
} from '@patternfly/react-core/dist/esm/components/DescriptionList';
import { Divider } from '@patternfly/react-core/dist/esm/components/Divider';
import { Workspace } from '~/shared/api/backendApiTypes';
type WorkspaceDetailsOverviewProps = {

2
workspaces/frontend/src/app/pages/Workspaces/ExpandedWorkspaceRow.tsx
View File

@ -1,5 +1,5 @@
import React from 'react';
import { Tr, Td, ExpandableRowContent } from '@patternfly/react-table';
import { Tr, Td, ExpandableRowContent } from '@patternfly/react-table/dist/esm/components/Table';
import { Workspace } from '~/shared/api/backendApiTypes';
import { WorkspaceTableColumnKeys } from '~/app/components/WorkspaceTable';
import { WorkspaceStorage } from './WorkspaceStorage';

429
workspaces/frontend/src/app/pages/Workspaces/Form/WorkspaceForm.tsx
View File

@ -1,16 +1,24 @@
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Button } from '@patternfly/react-core/dist/esm/components/Button';
import { Content } from '@patternfly/react-core/dist/esm/components/Content';
import { Flex, FlexItem } from '@patternfly/react-core/dist/esm/layouts/Flex';
import { PageSection } from '@patternfly/react-core/dist/esm/components/Page';
import {
Button,
Content,
Flex,
FlexItem,
PageGroup,
PageSection,
ProgressStep,
ProgressStepper,
Stack,
StackItem,
} from '@patternfly/react-core';
} from '@patternfly/react-core/dist/esm/components/ProgressStepper';
import { Stack } from '@patternfly/react-core/dist/esm/layouts/Stack';
import {
Drawer,
DrawerActions,
DrawerCloseButton,
DrawerContent,
DrawerContentBody,
DrawerHead,
DrawerPanelBody,
DrawerPanelContent,
} from '@patternfly/react-core/dist/esm/components/Drawer';
import { Title } from '@patternfly/react-core/dist/esm/components/Title';
import useGenericObjectState from '~/app/hooks/useGenericObjectState';
import { useNotebookAPI } from '~/app/hooks/useNotebookAPI';
import { WorkspaceFormImageSelection } from '~/app/pages/Workspaces/Form/image/WorkspaceFormImageSelection';
@ -18,10 +26,18 @@ import { WorkspaceFormKindSelection } from '~/app/pages/Workspaces/Form/kind/Wor
import { WorkspaceFormPodConfigSelection } from '~/app/pages/Workspaces/Form/podConfig/WorkspaceFormPodConfigSelection';
import { WorkspaceFormPropertiesSelection } from '~/app/pages/Workspaces/Form/properties/WorkspaceFormPropertiesSelection';
import { WorkspaceFormData } from '~/app/types';
import { WorkspaceCreate } from '~/shared/api/backendApiTypes';
import {
WorkspaceCreate,
WorkspaceKind,
WorkspaceImageConfigValue,
WorkspacePodConfigValue,
} from '~/shared/api/backendApiTypes';
import useWorkspaceFormData from '~/app/hooks/useWorkspaceFormData';
import { useTypedNavigate } from '~/app/routerHelper';
import { useWorkspaceFormLocationData } from '~/app/hooks/useWorkspaceFormLocationData';
import { WorkspaceFormKindDetails } from '~/app/pages/Workspaces/Form/kind/WorkspaceFormKindDetails';
import { WorkspaceFormImageDetails } from '~/app/pages/Workspaces/Form/image/WorkspaceFormImageDetails';
import { WorkspaceFormPodConfigDetails } from '~/app/pages/Workspaces/Form/podConfig/WorkspaceFormPodConfigDetails';
enum WorkspaceFormSteps {
KindSelection,
@ -52,6 +68,7 @@ const WorkspaceForm: React.FC = () => {
const [isSubmitting, setIsSubmitting] = useState(false);
const [currentStep, setCurrentStep] = useState(WorkspaceFormSteps.KindSelection);
const [drawerExpanded, setDrawerExpanded] = useState(false);
const [data, setData, resetData, replaceData] =
useGenericObjectState<WorkspaceFormData>(initialFormData);
@ -76,30 +93,46 @@ const WorkspaceForm: React.FC = () => {
[currentStep],
);
const isStepValid = useCallback(
(step: WorkspaceFormSteps) => {
switch (step) {
case WorkspaceFormSteps.KindSelection:
return !!data.kind;
case WorkspaceFormSteps.ImageSelection:
return !!data.image;
case WorkspaceFormSteps.PodConfigSelection:
return !!data.podConfig;
case WorkspaceFormSteps.Properties:
return !!data.properties.workspaceName.trim();
default:
return false;
}
},
[data.kind, data.image, data.podConfig, data.properties.workspaceName],
);
const showDrawer = useCallback(
(step: WorkspaceFormSteps) =>
// Only show drawer for steps that have drawer content
step !== WorkspaceFormSteps.Properties && isStepValid(step),
[isStepValid],
);
const previousStep = useCallback(() => {
setCurrentStep(currentStep - 1);
}, [currentStep]);
const newStep = currentStep - 1;
setCurrentStep(newStep);
setDrawerExpanded(showDrawer(newStep));
}, [currentStep, showDrawer]);
const nextStep = useCallback(() => {
setCurrentStep(currentStep + 1);
}, [currentStep]);
const newStep = currentStep + 1;
setCurrentStep(newStep);
setDrawerExpanded(showDrawer(newStep));
}, [currentStep, showDrawer]);
const canGoToPreviousStep = useMemo(() => currentStep > 0, [currentStep]);
const isCurrentStepValid = useMemo(() => {
switch (currentStep) {
case WorkspaceFormSteps.KindSelection:
return !!data.kind;
case WorkspaceFormSteps.ImageSelection:
return !!data.image;
case WorkspaceFormSteps.PodConfigSelection:
return !!data.podConfig;
case WorkspaceFormSteps.Properties:
return !!data.properties.workspaceName.trim();
default:
return false;
}
}, [currentStep, data]);
const isCurrentStepValid = useMemo(() => isStepValid(currentStep), [isStepValid, currentStep]);
const canGoToNextStep = useMemo(
() => currentStep < Object.keys(WorkspaceFormSteps).length / 2 - 1,
@ -168,6 +201,63 @@ const WorkspaceForm: React.FC = () => {
navigate('workspaces');
}, [navigate]);
const handleKindSelect = useCallback(
(kind: WorkspaceKind | undefined) => {
if (kind) {
resetData();
setData('kind', kind);
setDrawerExpanded(true);
}
},
[resetData, setData],
);
const handleImageSelect = useCallback(
(image: WorkspaceImageConfigValue | undefined) => {
if (image) {
setData('image', image);
setDrawerExpanded(true);
}
},
[setData],
);
const handlePodConfigSelect = useCallback(
(podConfig: WorkspacePodConfigValue | undefined) => {
if (podConfig) {
setData('podConfig', podConfig);
setDrawerExpanded(true);
}
},
[setData],
);
const getDrawerContent = () => {
switch (currentStep) {
case WorkspaceFormSteps.KindSelection:
return <WorkspaceFormKindDetails workspaceKind={data.kind} />;
case WorkspaceFormSteps.ImageSelection:
return <WorkspaceFormImageDetails workspaceImage={data.image} />;
case WorkspaceFormSteps.PodConfigSelection:
return <WorkspaceFormPodConfigDetails workspacePodConfig={data.podConfig} />;
default:
return null;
}
};
const getDrawerTitle = () => {
switch (currentStep) {
case WorkspaceFormSteps.KindSelection:
return 'Workspace Kind';
case WorkspaceFormSteps.ImageSelection:
return 'Image';
case WorkspaceFormSteps.PodConfigSelection:
return 'Pod Config';
default:
return '';
}
};
if (initialFormDataError) {
return <p>Error loading workspace data: {initialFormDataError.message}</p>; // TODO: UX for error state
}
@ -176,137 +266,160 @@ const WorkspaceForm: React.FC = () => {
return <p>Loading...</p>; // TODO: UX for loading state
}
const panelContent = (
<DrawerPanelContent>
<DrawerHead>
<Title headingLevel="h1">{getDrawerTitle()}</Title>
<DrawerActions>
<DrawerCloseButton onClick={() => setDrawerExpanded(false)} />
</DrawerActions>
</DrawerHead>
<DrawerPanelBody className="workspace-form__drawer-panel-body">
{getDrawerContent()}
</DrawerPanelBody>
</DrawerPanelContent>
);
return (
<>
<PageGroup isFilled={false} stickyOnBreakpoint={{ default: 'top' }}>
<PageSection>
<Stack hasGutter>
<Flex direction={{ default: 'column' }} rowGap={{ default: 'rowGapXl' }}>
<FlexItem>
<Content>
<h1>{`${mode === 'create' ? 'Create' : 'Edit'} workspace`}</h1>
</Content>
</FlexItem>
<FlexItem>
<ProgressStepper aria-label="Workspace form stepper">
<ProgressStep
variant={getStepVariant(WorkspaceFormSteps.KindSelection)}
isCurrent={currentStep === WorkspaceFormSteps.KindSelection}
id="kind-selection-step"
titleId="kind-selection-step-title"
aria-label="Kind selection step"
>
Workspace Kind
</ProgressStep>
<ProgressStep
variant={getStepVariant(WorkspaceFormSteps.ImageSelection)}
isCurrent={currentStep === WorkspaceFormSteps.ImageSelection}
id="image-selection-step"
titleId="image-selection-step-title"
aria-label="Image selection step"
>
Image
</ProgressStep>
<ProgressStep
variant={getStepVariant(WorkspaceFormSteps.PodConfigSelection)}
isCurrent={currentStep === WorkspaceFormSteps.PodConfigSelection}
id="pod-config-selection-step"
titleId="pod-config-selection-step-title"
aria-label="Pod config selection step"
>
Pod Config
</ProgressStep>
<ProgressStep
variant={getStepVariant(WorkspaceFormSteps.Properties)}
isCurrent={currentStep === WorkspaceFormSteps.Properties}
id="properties-step"
titleId="properties-step-title"
aria-label="Properties step"
>
Properties
</ProgressStep>
</ProgressStepper>
</FlexItem>
</Flex>
<StackItem>
<p>{stepDescriptions[currentStep]}</p>
</StackItem>
</Stack>
</PageSection>
</PageGroup>
<PageSection isFilled>
{currentStep === WorkspaceFormSteps.KindSelection && (
<WorkspaceFormKindSelection
selectedKind={data.kind}
onSelect={(kind) => {
resetData();
setData('kind', kind);
}}
/>
)}
{currentStep === WorkspaceFormSteps.ImageSelection && (
<WorkspaceFormImageSelection
selectedImage={data.image}
onSelect={(image) => setData('image', image)}
images={data.kind?.podTemplate.options.imageConfig.values ?? []}
/>
)}
{currentStep === WorkspaceFormSteps.PodConfigSelection && (
<WorkspaceFormPodConfigSelection
selectedPodConfig={data.podConfig}
onSelect={(podConfig) => setData('podConfig', podConfig)}
podConfigs={data.kind?.podTemplate.options.podConfig.values ?? []}
/>
)}
{currentStep === WorkspaceFormSteps.Properties && (
<WorkspaceFormPropertiesSelection
selectedProperties={data.properties}
onSelect={(properties) => setData('properties', properties)}
selectedImage={data.image}
/>
)}
</PageSection>
<PageSection isFilled={false} stickyOnBreakpoint={{ default: 'bottom' }}>
<Flex>
<FlexItem>
<Button
variant="secondary"
ouiaId="Secondary"
onClick={previousStep}
isDisabled={!canGoToPreviousStep}
>
Previous
</Button>
</FlexItem>
<FlexItem>
{canGoToNextStep ? (
<Button
variant="primary"
ouiaId="Primary"
onClick={nextStep}
isDisabled={!isCurrentStepValid}
>
Next
</Button>
) : (
<Button
variant="primary"
ouiaId="Primary"
onClick={handleSubmit}
isDisabled={!canSubmit}
>
{mode === 'create' ? 'Create' : 'Save'}
</Button>
)}
</FlexItem>
<FlexItem>
<Button variant="link" isInline onClick={cancel}>
Cancel
</Button>
</FlexItem>
</Flex>
</PageSection>
</>
<Drawer isInline isExpanded={drawerExpanded}>
<DrawerContent panelContent={panelContent}>
<DrawerContentBody>
<Flex
direction={{ default: 'column' }}
flexWrap={{ default: 'nowrap' }}
style={{ height: '100%' }}
>
<FlexItem>
<PageSection>
<Stack hasGutter>
<Flex direction={{ default: 'column' }} rowGap={{ default: 'rowGapXl' }}>
<FlexItem>
<Content>
<h1>{`${mode === 'create' ? 'Create' : 'Edit'} workspace`}</h1>
<p>{stepDescriptions[currentStep]}</p>
</Content>
</FlexItem>
<FlexItem>
<ProgressStepper aria-label="Workspace form stepper">
<ProgressStep
variant={getStepVariant(WorkspaceFormSteps.KindSelection)}
isCurrent={currentStep === WorkspaceFormSteps.KindSelection}
id="kind-selection-step"
titleId="kind-selection-step-title"
aria-label="Kind selection step"
>
Workspace Kind
</ProgressStep>
<ProgressStep
variant={getStepVariant(WorkspaceFormSteps.ImageSelection)}
isCurrent={currentStep === WorkspaceFormSteps.ImageSelection}
id="image-selection-step"
titleId="image-selection-step-title"
aria-label="Image selection step"
>
Image
</ProgressStep>
<ProgressStep
variant={getStepVariant(WorkspaceFormSteps.PodConfigSelection)}
isCurrent={currentStep === WorkspaceFormSteps.PodConfigSelection}
id="pod-config-selection-step"
titleId="pod-config-selection-step-title"
aria-label="Pod config selection step"
>
Pod Config
</ProgressStep>
<ProgressStep
variant={getStepVariant(WorkspaceFormSteps.Properties)}
isCurrent={currentStep === WorkspaceFormSteps.Properties}
id="properties-step"
titleId="properties-step-title"
aria-label="Properties step"
>
Properties
</ProgressStep>
</ProgressStepper>
</FlexItem>
</Flex>
</Stack>
</PageSection>
</FlexItem>
<FlexItem flex={{ default: 'flex_1' }}>
<PageSection isFilled>
{currentStep === WorkspaceFormSteps.KindSelection && (
<WorkspaceFormKindSelection
selectedKind={data.kind}
onSelect={handleKindSelect}
/>
)}
{currentStep === WorkspaceFormSteps.ImageSelection && (
<WorkspaceFormImageSelection
selectedImage={data.image}
onSelect={handleImageSelect}
images={data.kind?.podTemplate.options.imageConfig.values ?? []}
/>
)}
{currentStep === WorkspaceFormSteps.PodConfigSelection && (
<WorkspaceFormPodConfigSelection
selectedPodConfig={data.podConfig}
onSelect={handlePodConfigSelect}
podConfigs={data.kind?.podTemplate.options.podConfig.values ?? []}
/>
)}
{currentStep === WorkspaceFormSteps.Properties && (
<WorkspaceFormPropertiesSelection
selectedProperties={data.properties}
onSelect={(properties) => setData('properties', properties)}
selectedImage={data.image}
/>
)}
</PageSection>
</FlexItem>
<FlexItem>
<PageSection>
<Flex>
<FlexItem>
<Button
variant="secondary"
ouiaId="Secondary"
onClick={previousStep}
isDisabled={!canGoToPreviousStep}
>
Previous
</Button>
</FlexItem>
<FlexItem>
{canGoToNextStep ? (
<Button
variant="primary"
ouiaId="Primary"
onClick={nextStep}
isDisabled={!isCurrentStepValid}
>
Next
</Button>
) : (
<Button
variant="primary"
ouiaId="Primary"
onClick={handleSubmit}
isDisabled={!canSubmit}
>
{mode === 'create' ? 'Create' : 'Save'}
</Button>
)}
</FlexItem>
<FlexItem>
<Button variant="link" isInline onClick={cancel}>
Cancel
</Button>
</FlexItem>
</Flex>
</PageSection>
</FlexItem>
</Flex>
</DrawerContentBody>
</DrawerContent>
</Drawer>
);
};

4
workspaces/frontend/src/app/pages/Workspaces/Form/WorkspaceFormDrawer.tsx
View File

@ -7,8 +7,8 @@ import {
DrawerHead,
DrawerActions,
DrawerCloseButton,
Title,
} from '@patternfly/react-core';
} from '@patternfly/react-core/dist/esm/components/Drawer';
import { Title } from '@patternfly/react-core/dist/esm/components/Title';
interface WorkspaceFormDrawerProps {
children: React.ReactNode;

8
workspaces/frontend/src/app/pages/Workspaces/Form/image/WorkspaceFormImageDetails.tsx
View File

@ -4,8 +4,8 @@ import {
DescriptionListTerm,
DescriptionListGroup,
DescriptionListDescription,
Title,
} from '@patternfly/react-core';
} from '@patternfly/react-core/dist/esm/components/DescriptionList';
import { Title } from '@patternfly/react-core/dist/esm/components/Title';
import { WorkspacePodConfigValue } from '~/shared/api/backendApiTypes';
import { formatLabelKey } from '~/shared/utilities/WorkspaceUtils';
@ -16,7 +16,7 @@ type WorkspaceFormImageDetailsProps = {
export const WorkspaceFormImageDetails: React.FunctionComponent<WorkspaceFormImageDetailsProps> = ({
workspaceImage,
}) => (
<div style={{ marginLeft: 'var(--pf-t--global--spacer--md)' }}>
<>
{workspaceImage && (
<>
<Title headingLevel="h3">{workspaceImage.displayName}</Title>
@ -38,5 +38,5 @@ export const WorkspaceFormImageDetails: React.FunctionComponent<WorkspaceFormIma
))}
</>
)}
</div>
</>
);

9
workspaces/frontend/src/app/pages/Workspaces/Form/image/WorkspaceFormImageList.tsx
View File

@ -1,14 +1,13 @@
import React, { useCallback, useMemo, useRef, useState } from 'react';
import {
CardTitle,
Gallery,
PageSection,
Toolbar,
ToolbarContent,
Card,
CardHeader,
CardBody,
} from '@patternfly/react-core';
} from '@patternfly/react-core/dist/esm/components/Card';
import { Gallery } from '@patternfly/react-core/dist/esm/layouts/Gallery';
import { PageSection } from '@patternfly/react-core/dist/esm/components/Page';
import { Toolbar, ToolbarContent } from '@patternfly/react-core/dist/esm/components/Toolbar';
import Filter, { FilteredColumn, FilterRef } from '~/shared/components/Filter';
import { WorkspaceImageConfigValue } from '~/shared/api/backendApiTypes';
import CustomEmptyState from '~/shared/components/CustomEmptyState';

62
workspaces/frontend/src/app/pages/Workspaces/Form/image/WorkspaceFormImageSelection.tsx
View File

@ -1,10 +1,9 @@
import React, { useCallback, useMemo, useRef, useState } from 'react';
import { Content, Split, SplitItem } from '@patternfly/react-core';
import { WorkspaceFormImageDetails } from '~/app/pages/Workspaces/Form/image/WorkspaceFormImageDetails';
import React, { useMemo, useState } from 'react';
import { Content } from '@patternfly/react-core/dist/esm/components/Content';
import { Split, SplitItem } from '@patternfly/react-core/dist/esm/layouts/Split';
import { WorkspaceFormImageList } from '~/app/pages/Workspaces/Form/image/WorkspaceFormImageList';
import { FilterByLabels } from '~/app/pages/Workspaces/Form/labelFilter/FilterByLabels';
import { WorkspaceImageConfigValue } from '~/shared/api/backendApiTypes';
import { WorkspaceFormDrawer } from '~/app/pages/Workspaces/Form/WorkspaceFormDrawer';
interface WorkspaceFormImageSelectionProps {
images: WorkspaceImageConfigValue[];
@ -18,26 +17,6 @@ const WorkspaceFormImageSelection: React.FunctionComponent<WorkspaceFormImageSel
onSelect,
}) => {
const [selectedLabels, setSelectedLabels] = useState<Map<string, Set<string>>>(new Map());
const [isExpanded, setIsExpanded] = useState(false);
const drawerRef = useRef<HTMLSpanElement>(undefined);
const onExpand = useCallback(() => {
if (drawerRef.current) {
drawerRef.current.focus();
}
}, []);
const onClick = useCallback(
(image?: WorkspaceImageConfigValue) => {
setIsExpanded(true);
onSelect(image);
},
[onSelect],
);
const onCloseClick = useCallback(() => {
setIsExpanded(false);
}, []);
const imageFilterContent = useMemo(
() => (
@ -50,32 +29,19 @@ const WorkspaceFormImageSelection: React.FunctionComponent<WorkspaceFormImageSel
[images, selectedLabels, setSelectedLabels],
);
const imageDetailsContent = useMemo(
() => <WorkspaceFormImageDetails workspaceImage={selectedImage} />,
[selectedImage],
);
return (
<Content style={{ height: '100%' }}>
<WorkspaceFormDrawer
title="Image"
info={imageDetailsContent}
isExpanded={isExpanded}
onCloseClick={onCloseClick}
onExpand={onExpand}
>
<Split hasGutter>
<SplitItem style={{ minWidth: '200px' }}>{imageFilterContent}</SplitItem>
<SplitItem isFilled>
<WorkspaceFormImageList
images={images}
selectedLabels={selectedLabels}
selectedImage={selectedImage}
onSelect={onClick}
/>
</SplitItem>
</Split>
</WorkspaceFormDrawer>
<Split hasGutter>
<SplitItem style={{ minWidth: '200px' }}>{imageFilterContent}</SplitItem>
<SplitItem isFilled>
<WorkspaceFormImageList
images={images}
selectedLabels={selectedLabels}
selectedImage={selectedImage}
onSelect={onSelect}
/>
</SplitItem>
</Split>
</Content>
);
};

6
workspaces/frontend/src/app/pages/Workspaces/Form/kind/WorkspaceFormKindDetails.tsx
View File

@ -1,5 +1,5 @@
import React from 'react';
import { Title } from '@patternfly/react-core';
import { Title } from '@patternfly/react-core/dist/esm/components/Title';
import { WorkspaceKind } from '~/shared/api/backendApiTypes';
type WorkspaceFormKindDetailsProps = {
@ -9,12 +9,12 @@ type WorkspaceFormKindDetailsProps = {
export const WorkspaceFormKindDetails: React.FunctionComponent<WorkspaceFormKindDetailsProps> = ({
workspaceKind,
}) => (
<div style={{ marginLeft: 'var(--pf-t--global--spacer--md)' }}>
<>
{workspaceKind && (
<>
<Title headingLevel="h3">{workspaceKind.displayName}</Title>
<p>{workspaceKind.description}</p>
</>
)}
</div>
</>
);

9
workspaces/frontend/src/app/pages/Workspaces/Form/kind/WorkspaceFormKindList.tsx
View File

@ -2,13 +2,12 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
import {
CardBody,
CardTitle,
Gallery,
PageSection,
Toolbar,
ToolbarContent,
Card,
CardHeader,
} from '@patternfly/react-core';
} from '@patternfly/react-core/dist/esm/components/Card';
import { Gallery } from '@patternfly/react-core/dist/esm/layouts/Gallery';
import { PageSection } from '@patternfly/react-core/dist/esm/components/Page';
import { Toolbar, ToolbarContent } from '@patternfly/react-core/dist/esm/components/Toolbar';
import { WorkspaceKind } from '~/shared/api/backendApiTypes';
import Filter, { FilteredColumn, FilterRef } from '~/shared/components/Filter';
import CustomEmptyState from '~/shared/components/CustomEmptyState';

49
workspaces/frontend/src/app/pages/Workspaces/Form/kind/WorkspaceFormKindSelection.tsx
View File

@ -1,10 +1,8 @@
import React, { useCallback, useMemo, useRef, useState } from 'react';
import { Content } from '@patternfly/react-core';
import React from 'react';
import { Content } from '@patternfly/react-core/dist/esm/components/Content';
import { WorkspaceKind } from '~/shared/api/backendApiTypes';
import useWorkspaceKinds from '~/app/hooks/useWorkspaceKinds';
import { WorkspaceFormKindDetails } from '~/app/pages/Workspaces/Form/kind/WorkspaceFormKindDetails';
import { WorkspaceFormKindList } from '~/app/pages/Workspaces/Form/kind/WorkspaceFormKindList';
import { WorkspaceFormDrawer } from '~/app/pages/Workspaces/Form/WorkspaceFormDrawer';
interface WorkspaceFormKindSelectionProps {
selectedKind: WorkspaceKind | undefined;
@ -16,31 +14,6 @@ const WorkspaceFormKindSelection: React.FunctionComponent<WorkspaceFormKindSelec
onSelect,
}) => {
const [workspaceKinds, loaded, error] = useWorkspaceKinds();
const [isExpanded, setIsExpanded] = useState(false);
const drawerRef = useRef<HTMLSpanElement>(undefined);
const onExpand = useCallback(() => {
if (drawerRef.current) {
drawerRef.current.focus();
}
}, []);
const onClick = useCallback(
(kind?: WorkspaceKind) => {
setIsExpanded(true);
onSelect(kind);
},
[onSelect],
);
const onCloseClick = useCallback(() => {
setIsExpanded(false);
}, []);
const kindDetailsContent = useMemo(
() => <WorkspaceFormKindDetails workspaceKind={selectedKind} />,
[selectedKind],
);
if (error) {
return <p>Error loading workspace kinds: {error.message}</p>; // TODO: UX for error state
@ -52,19 +25,11 @@ const WorkspaceFormKindSelection: React.FunctionComponent<WorkspaceFormKindSelec
return (
<Content style={{ height: '100%' }}>
<WorkspaceFormDrawer
title="Workspace kind"
info={kindDetailsContent}
isExpanded={isExpanded}
onCloseClick={onCloseClick}
onExpand={onExpand}
>
<WorkspaceFormKindList
allWorkspaceKinds={workspaceKinds}
selectedKind={selectedKind}
onSelect={onClick}
/>
</WorkspaceFormDrawer>
<WorkspaceFormKindList
allWorkspaceKinds={workspaceKinds}
selectedKind={selectedKind}
onSelect={onSelect}
/>
</Content>
);
};

12
workspaces/frontend/src/app/pages/Workspaces/Form/podConfig/WorkspaceFormPodConfigDetails.tsx
View File

@ -4,9 +4,9 @@ import {
DescriptionListTerm,
DescriptionListGroup,
DescriptionListDescription,
Title,
Divider,
} from '@patternfly/react-core';
} from '@patternfly/react-core/dist/esm/components/DescriptionList';
import { Title } from '@patternfly/react-core/dist/esm/components/Title';
import { Divider } from '@patternfly/react-core/dist/esm/components/Divider';
import { WorkspacePodConfigValue } from '~/shared/api/backendApiTypes';
import { formatLabelKey } from '~/shared/utilities/WorkspaceUtils';
@ -19,10 +19,12 @@ export const WorkspaceFormPodConfigDetails: React.FunctionComponent<
> = ({ workspacePodConfig }) => (
<>
{workspacePodConfig && (
<div style={{ marginLeft: 'var(--pf-t--global--spacer--md)' }}>
<>
<Title headingLevel="h3">{workspacePodConfig.displayName}</Title>{' '}
<p>{workspacePodConfig.description}</p>
<br />
<Divider />
<br />
{workspacePodConfig.labels.map((label) => (
<DescriptionList
key={label.key}
@ -37,7 +39,7 @@ export const WorkspaceFormPodConfigDetails: React.FunctionComponent<
</DescriptionListGroup>
</DescriptionList>
))}
</div>
</>
)}
</>
);

9
workspaces/frontend/src/app/pages/Workspaces/Form/podConfig/WorkspaceFormPodConfigList.tsx
View File

@ -1,14 +1,13 @@
import React, { useCallback, useMemo, useRef, useState } from 'react';
import {
CardTitle,
Gallery,
PageSection,
Toolbar,
ToolbarContent,
Card,
CardHeader,
CardBody,
} from '@patternfly/react-core';
} from '@patternfly/react-core/dist/esm/components/Card';
import { Gallery } from '@patternfly/react-core/dist/esm/layouts/Gallery';
import { PageSection } from '@patternfly/react-core/dist/esm/components/Page';
import { Toolbar, ToolbarContent } from '@patternfly/react-core/dist/esm/components/Toolbar';
import { WorkspacePodConfigValue } from '~/shared/api/backendApiTypes';
import Filter, { FilteredColumn, FilterRef } from '~/shared/components/Filter';
import CustomEmptyState from '~/shared/components/CustomEmptyState';

62
workspaces/frontend/src/app/pages/Workspaces/Form/podConfig/WorkspaceFormPodConfigSelection.tsx
View File

@ -1,9 +1,8 @@
import React, { useCallback, useMemo, useRef, useState } from 'react';
import { Content, Split, SplitItem } from '@patternfly/react-core';
import { WorkspaceFormPodConfigDetails } from '~/app/pages/Workspaces/Form/podConfig/WorkspaceFormPodConfigDetails';
import React, { useMemo, useState } from 'react';
import { Content } from '@patternfly/react-core/dist/esm/components/Content';
import { Split, SplitItem } from '@patternfly/react-core/dist/esm/layouts/Split';
import { WorkspaceFormPodConfigList } from '~/app/pages/Workspaces/Form/podConfig/WorkspaceFormPodConfigList';
import { FilterByLabels } from '~/app/pages/Workspaces/Form/labelFilter/FilterByLabels';
import { WorkspaceFormDrawer } from '~/app/pages/Workspaces/Form/WorkspaceFormDrawer';
import { WorkspacePodConfigValue } from '~/shared/api/backendApiTypes';
interface WorkspaceFormPodConfigSelectionProps {
@ -16,26 +15,6 @@ const WorkspaceFormPodConfigSelection: React.FunctionComponent<
WorkspaceFormPodConfigSelectionProps
> = ({ podConfigs, selectedPodConfig, onSelect }) => {
const [selectedLabels, setSelectedLabels] = useState<Map<string, Set<string>>>(new Map());
const [isExpanded, setIsExpanded] = useState(false);
const drawerRef = useRef<HTMLSpanElement>(undefined);
const onExpand = useCallback(() => {
if (drawerRef.current) {
drawerRef.current.focus();
}
}, []);
const onClick = useCallback(
(podConfig?: WorkspacePodConfigValue) => {
setIsExpanded(true);
onSelect(podConfig);
},
[onSelect],
);
const onCloseClick = useCallback(() => {
setIsExpanded(false);
}, []);
const podConfigFilterContent = useMemo(
() => (
@ -48,32 +27,19 @@ const WorkspaceFormPodConfigSelection: React.FunctionComponent<
[podConfigs, selectedLabels, setSelectedLabels],
);
const podConfigDetailsContent = useMemo(
() => <WorkspaceFormPodConfigDetails workspacePodConfig={selectedPodConfig} />,
[selectedPodConfig],
);
return (
<Content style={{ height: '100%' }}>
<WorkspaceFormDrawer
title="Pod config"
info={podConfigDetailsContent}
isExpanded={isExpanded}
onCloseClick={onCloseClick}
onExpand={onExpand}
>
<Split hasGutter>
<SplitItem style={{ minWidth: '200px' }}>{podConfigFilterContent}</SplitItem>
<SplitItem isFilled>
<WorkspaceFormPodConfigList
podConfigs={podConfigs}
selectedLabels={selectedLabels}
selectedPodConfig={selectedPodConfig}
onSelect={onClick}
/>
</SplitItem>
</Split>
</WorkspaceFormDrawer>
<Split hasGutter>
<SplitItem style={{ minWidth: '200px' }}>{podConfigFilterContent}</SplitItem>
<SplitItem isFilled>
<WorkspaceFormPodConfigList
podConfigs={podConfigs}
selectedLabels={selectedLabels}
selectedPodConfig={selectedPodConfig}
onSelect={onSelect}
/>
</SplitItem>
</Split>
</Content>
);
};

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

@ -1,23 +1,29 @@
import React, { useCallback, useState } from 'react';
import { EllipsisVIcon } from '@patternfly/react-icons';
import { Table, Thead, Tbody, Tr, Th, Td, TableVariant } from '@patternfly/react-table';
import { EllipsisVIcon } from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
import {
Table,
Thead,
Tbody,
Tr,
Th,
Td,
TableVariant,
} from '@patternfly/react-table/dist/esm/components/Table';
import { Button } from '@patternfly/react-core/dist/esm/components/Button';
import {
Button,
Modal,
ModalVariant,
TextInput,
Dropdown,
DropdownItem,
MenuToggle,
ModalBody,
ModalFooter,
Form,
FormGroup,
ModalHeader,
ValidatedOptions,
HelperText,
HelperTextItem,
} from '@patternfly/react-core';
ModalVariant,
} from '@patternfly/react-core/dist/esm/components/Modal';
import { ValidatedOptions } from '@patternfly/react-core/helpers';
import { TextInput } from '@patternfly/react-core/dist/esm/components/TextInput';
import { Dropdown, DropdownItem } from '@patternfly/react-core/dist/esm/components/Dropdown';
import { MenuToggle } from '@patternfly/react-core/dist/esm/components/MenuToggle';
import { Form, FormGroup } from '@patternfly/react-core/dist/esm/components/Form';
import { HelperText, HelperTextItem } from '@patternfly/react-core/dist/esm/components/HelperText';
import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
import { WorkspacePodSecretMount } from '~/shared/api/backendApiTypes';
interface WorkspaceFormPropertiesSecretsProps {
@ -152,7 +158,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}>

18
workspaces/frontend/src/app/pages/Workspaces/Form/properties/WorkspaceFormPropertiesSelection.tsx
View File

@ -1,15 +1,11 @@
import React, { useMemo, useState } from 'react';
import {
Checkbox,
Content,
Divider,
ExpandableSection,
Form,
FormGroup,
Split,
SplitItem,
TextInput,
} from '@patternfly/react-core';
import { Checkbox } from '@patternfly/react-core/dist/esm/components/Checkbox';
import { Content } from '@patternfly/react-core/dist/esm/components/Content';
import { Divider } from '@patternfly/react-core/dist/esm/components/Divider';
import { ExpandableSection } from '@patternfly/react-core/dist/esm/components/ExpandableSection';
import { Form, FormGroup } from '@patternfly/react-core/dist/esm/components/Form';
import { Split, SplitItem } from '@patternfly/react-core/dist/esm/layouts/Split';
import { TextInput } from '@patternfly/react-core/dist/esm/components/TextInput';
import { WorkspaceFormImageDetails } from '~/app/pages/Workspaces/Form/image/WorkspaceFormImageDetails';
import { WorkspaceFormPropertiesVolumes } from '~/app/pages/Workspaces/Form/properties/WorkspaceFormPropertiesVolumes';
import { WorkspaceFormProperties } from '~/app/types';

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

@ -1,21 +1,28 @@
import React, { useCallback, useState } from 'react';
import { Button } from '@patternfly/react-core/dist/esm/components/Button';
import { Dropdown, DropdownItem } from '@patternfly/react-core/dist/esm/components/Dropdown';
import { Form, FormGroup } from '@patternfly/react-core/dist/esm/components/Form';
import { MenuToggle } from '@patternfly/react-core/dist/esm/components/MenuToggle';
import {
Button,
Dropdown,
DropdownItem,
Form,
FormGroup,
MenuToggle,
Modal,
ModalBody,
ModalFooter,
ModalHeader,
ModalVariant,
Switch,
TextInput,
} from '@patternfly/react-core';
import { EllipsisVIcon } from '@patternfly/react-icons';
import { Table, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
} from '@patternfly/react-core/dist/esm/components/Modal';
import { Switch } from '@patternfly/react-core/dist/esm/components/Switch';
import { TextInput } from '@patternfly/react-core/dist/esm/components/TextInput';
import { EllipsisVIcon } from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
import {
Table,
TableVariant,
Tbody,
Td,
Th,
Thead,
Tr,
} from '@patternfly/react-table/dist/esm/components/Table';
import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
import { WorkspacePodVolumeMount } from '~/shared/api/backendApiTypes';
interface WorkspaceFormPropertiesVolumesProps {
@ -126,9 +133,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

2
workspaces/frontend/src/app/pages/Workspaces/WorkspaceConfigDetails.tsx
View File

@ -4,7 +4,7 @@ import {
DescriptionListTerm,
DescriptionListGroup,
DescriptionListDescription,
} from '@patternfly/react-core';
} from '@patternfly/react-core/dist/esm/components/DescriptionList';
import { Workspace } from '~/shared/api/backendApiTypes';
import { formatResourceFromWorkspace } from '~/shared/utilities/WorkspaceUtils';

4
workspaces/frontend/src/app/pages/Workspaces/WorkspaceConnectAction.tsx
View File

@ -3,10 +3,12 @@ import {
Dropdown,
DropdownItem,
DropdownList,
} from '@patternfly/react-core/dist/esm/components/Dropdown';
import {
MenuToggle,
MenuToggleElement,
MenuToggleAction,
} from '@patternfly/react-core';
} from '@patternfly/react-core/dist/esm/components/MenuToggle';
import { Workspace, WorkspaceState } from '~/shared/api/backendApiTypes';
type WorkspaceConnectActionProps = {

5
workspaces/frontend/src/app/pages/Workspaces/WorkspacePackageDetails.tsx
View File

@ -3,10 +3,9 @@ import {
DescriptionList,
DescriptionListTerm,
DescriptionListDescription,
ListItem,
List,
DescriptionListGroup,
} from '@patternfly/react-core';
} from '@patternfly/react-core/dist/esm/components/DescriptionList';
import { ListItem, List } from '@patternfly/react-core/dist/esm/components/List';
import { Workspace } from '~/shared/api/backendApiTypes';
import { extractPackageLabels, formatLabelKey } from '~/shared/utilities/WorkspaceUtils';

2
workspaces/frontend/src/app/pages/Workspaces/WorkspaceStorage.tsx
View File

@ -4,7 +4,7 @@ import {
DescriptionListTerm,
DescriptionListGroup,
DescriptionListDescription,
} from '@patternfly/react-core';
} from '@patternfly/react-core/dist/esm/components/DescriptionList';
import { Workspace } from '~/shared/api/backendApiTypes';
import { DataVolumesList } from '~/app/pages/Workspaces/DataVolumesList';

6
workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx
View File

@ -1,5 +1,7 @@
import * as React from 'react';
import { Content, ContentVariants, PageSection, Stack, StackItem } from '@patternfly/react-core';
import { Content, ContentVariants } from '@patternfly/react-core/dist/esm/components/Content';
import { PageSection } from '@patternfly/react-core/dist/esm/components/Page';
import { Stack, StackItem } from '@patternfly/react-core/dist/esm/layouts/Stack';
import WorkspaceTable from '~/app/components/WorkspaceTable';
import { useNamespaceContext } from '~/app/context/NamespaceContextProvider';
import { useWorkspacesByNamespace } from '~/app/hooks/useWorkspaces';
@ -52,7 +54,7 @@ export const Workspaces: React.FunctionComponent = () => {
<PageSection isFilled>
<Stack hasGutter>
<StackItem>
<Content component={ContentVariants.h1}>Kubeflow Workspaces</Content>
<Content component={ContentVariants.h1}>Workspaces</Content>
</StackItem>
<StackItem>
<Content component={ContentVariants.p}>

17
workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceRedirectInformationView.tsx
View File

@ -1,10 +1,11 @@
import React, { useEffect, useState } from 'react';
import { ExpandableSection, Icon, Tab, Tabs, TabTitleText, Content } from '@patternfly/react-core';
import {
ExclamationCircleIcon,
ExclamationTriangleIcon,
InfoCircleIcon,
} from '@patternfly/react-icons';
import { ExpandableSection } from '@patternfly/react-core/dist/esm/components/ExpandableSection';
import { Icon } from '@patternfly/react-core/dist/esm/components/Icon';
import { Tab, Tabs, TabTitleText } from '@patternfly/react-core/dist/esm/components/Tabs';
import { Content } from '@patternfly/react-core/dist/esm/components/Content';
import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
import { InfoCircleIcon } from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
import useWorkspaceKindByName from '~/app/hooks/useWorkspaceKindByName';
import { WorkspaceKind } from '~/shared/api/backendApiTypes';
@ -92,7 +93,7 @@ export const WorkspaceRedirectInformationView: React.FC<WorkspaceRedirectInforma
eventKey={0}
title={
<TabTitleText>
Image Config {getLevelIcon(getMaxLevel(imageConfigRedirects))}
Image config {getLevelIcon(getMaxLevel(imageConfigRedirects))}
</TabTitleText>
}
>
@ -110,7 +111,7 @@ export const WorkspaceRedirectInformationView: React.FC<WorkspaceRedirectInforma
<Tab
eventKey={1}
title={
<TabTitleText>Pod Config {getLevelIcon(getMaxLevel(podConfigRedirects))}</TabTitleText>
<TabTitleText>Pod config {getLevelIcon(getMaxLevel(podConfigRedirects))}</TabTitleText>
}
>
{podConfigRedirects.map((redirect, index) => (

12
workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceRestartActionModal.tsx
View File

@ -1,13 +1,13 @@
import React from 'react';
import { Button } from '@patternfly/react-core/dist/esm/components/Button';
import { Content } from '@patternfly/react-core/dist/esm/components/Content';
import {
Button,
Content,
Modal,
ModalBody,
ModalFooter,
ModalHeader,
TabTitleText,
} from '@patternfly/react-core';
} from '@patternfly/react-core/dist/esm/components/Modal';
import { TabTitleText } from '@patternfly/react-core/dist/esm/components/Tabs';
import { Workspace } from '~/shared/api/backendApiTypes';
import { WorkspaceRedirectInformationView } from '~/app/pages/Workspaces/workspaceActions/WorkspaceRedirectInformationView';
@ -38,7 +38,7 @@ export const WorkspaceRestartActionModal: React.FC<RestartActionAlertProps> = ({
aria-labelledby="title-icon-modal-title"
onClose={onClose}
>
<ModalHeader title="Restart Workspace" />
<ModalHeader title="Restart workspace" />
<ModalBody>
{workspacePendingUpdate ? (
<>
@ -54,7 +54,7 @@ export const WorkspaceRestartActionModal: React.FC<RestartActionAlertProps> = ({
</ModalBody>
<ModalFooter>
{workspacePendingUpdate && (
<Button onClick={() => handleClick(true)}>Update and Restart</Button>
<Button onClick={() => handleClick(true)}>Update and restart</Button>
)}
<Button
onClick={() => handleClick(false)}

6
workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceStartActionModal.tsx
View File

@ -1,12 +1,12 @@
import React, { useCallback, useState } from 'react';
import { Button } from '@patternfly/react-core/dist/esm/components/Button';
import {
Button,
Modal,
ModalBody,
ModalFooter,
ModalHeader,
TabTitleText,
} from '@patternfly/react-core';
} from '@patternfly/react-core/dist/esm/components/Modal';
import { TabTitleText } from '@patternfly/react-core/dist/esm/components/Tabs';
import { WorkspaceRedirectInformationView } from '~/app/pages/Workspaces/workspaceActions/WorkspaceRedirectInformationView';
import { Workspace, WorkspacePauseState } from '~/shared/api/backendApiTypes';
import { ActionButton } from '~/shared/components/ActionButton';

14
workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceStopActionModal.tsx
View File

@ -1,13 +1,13 @@
import React, { useCallback, useState } from 'react';
import { Button } from '@patternfly/react-core/dist/esm/components/Button';
import { Content } from '@patternfly/react-core/dist/esm/components/Content';
import {
Button,
Content,
Modal,
ModalBody,
ModalFooter,
ModalHeader,
TabTitleText,
} from '@patternfly/react-core';
} from '@patternfly/react-core/dist/esm/components/Modal';
import { TabTitleText } from '@patternfly/react-core/dist/esm/components/Tabs';
import { WorkspaceRedirectInformationView } from '~/app/pages/Workspaces/workspaceActions/WorkspaceRedirectInformationView';
import { Workspace, WorkspacePauseState } from '~/shared/api/backendApiTypes';
import { ActionButton } from '~/shared/components/ActionButton';
@ -86,7 +86,7 @@ export const WorkspaceStopActionModal: React.FC<StopActionAlertProps> = ({
aria-labelledby="title-icon-modal-title"
onClose={onClose}
>
<ModalHeader title="Stop Workspace" />
<ModalHeader title="Stop workspace" />
<ModalBody>
{workspacePendingUpdate ? (
<>
@ -103,11 +103,11 @@ export const WorkspaceStopActionModal: React.FC<StopActionAlertProps> = ({
<ModalFooter>
{shouldShowActionButton('updateAndStop') && workspacePendingUpdate && (
<ActionButton
action="Update and Stop"
action="Update and stop"
titleOnLoading="Stopping ..."
onClick={() => handleUpdateAndStop()}
>
Update and Stop
Update and stop
</ActionButton>
)}

8
workspaces/frontend/src/app/pages/notFound/NotFound.tsx
View File

@ -1,12 +1,12 @@
import React from 'react';
import { ExclamationTriangleIcon } from '@patternfly/react-icons';
import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
import { Button } from '@patternfly/react-core/dist/esm/components/Button';
import {
Button,
EmptyState,
EmptyStateBody,
EmptyStateFooter,
PageSection,
} from '@patternfly/react-core';
} from '@patternfly/react-core/dist/esm/components/EmptyState';
import { PageSection } from '@patternfly/react-core/dist/esm/components/Page';
import { useTypedNavigate } from '~/app/routerHelper';
const NotFound: React.FunctionComponent = () => {

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;
}

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

@ -19,6 +19,7 @@ export const mergeRequestInit = (
type CallRestJSONOptions = {
queryParams?: Record<string, unknown>;
parseJSON?: boolean;
directYAML?: boolean;
} & EitherOrNone<
{
fileContents: string;
@ -32,7 +33,7 @@ const callRestJSON = <T>(
host: string,
path: string,
requestInit: RequestInit,
{ data, fileContents, queryParams, parseJSON = true }: CallRestJSONOptions,
{ data, fileContents, queryParams, parseJSON = true, directYAML = false }: CallRestJSONOptions,
): Promise<T> => {
const { method, ...otherOptions } = requestInit;
@ -54,12 +55,17 @@ const callRestJSON = <T>(
let contentType: string | undefined;
let formData: FormData | undefined;
if (fileContents) {
formData = new FormData();
formData.append(
'uploadfile',
new Blob([fileContents], { type: 'application/x-yaml' }),
'uploadedFile.yml',
);
if (directYAML) {
requestData = fileContents;
contentType = 'application/yaml';
} else {
formData = new FormData();
formData.append(
'uploadfile',
new Blob([fileContents], { type: 'application/x-yaml' }),
'uploadedFile.yml',
);
}
} else if (data) {
// It's OK for contentType and requestData to BOTH be undefined for e.g. a GET request or POST with no body.
contentType = 'application/json;charset=UTF-8';
@ -122,6 +128,7 @@ export const restFILE = <T>(
fileContents,
queryParams,
parseJSON: options?.parseJSON,
directYAML: options?.directYAML,
});
/** POST -- but no body data -- targets simple endpoints */
@ -173,48 +180,6 @@ export const restDELETE = <T>(
parseJSON: options?.parseJSON,
});
/** POST -- but with YAML content directly in body */
export const restYAML = <T>(
host: string,
path: string,
yamlContent: string,
queryParams?: Record<string, unknown>,
options?: APIOptions,
): Promise<T> => {
const { method, ...otherOptions } = mergeRequestInit(options, { method: 'POST' });
const sanitizedQueryParams = queryParams
? Object.entries(queryParams).reduce((acc, [key, value]) => {
if (value) {
return { ...acc, [key]: value };
}
return acc;
}, {})
: null;
const searchParams = sanitizedQueryParams
? new URLSearchParams(sanitizedQueryParams).toString()
: null;
return fetch(`${host}${path}${searchParams ? `?${searchParams}` : ''}`, {
...otherOptions,
headers: {
...otherOptions.headers,
...(DEV_MODE && { [AUTH_HEADER]: localStorage.getItem(AUTH_HEADER) }),
'Content-Type': 'application/vnd.kubeflow-notebooks.manifest+yaml',
},
method,
body: yamlContent,
}).then((response) =>
response.text().then((fetchedData) => {
if (options?.parseJSON !== false) {
return JSON.parse(fetchedData);
}
return fetchedData;
}),
);
};
export const isNotebookResponse = <T>(response: unknown): response is ResponseBody<T> => {
if (typeof response === 'object' && response !== null) {
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
@ -233,6 +198,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 +229,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));
}
}

4
workspaces/frontend/src/shared/api/notebookService.ts
View File

@ -1,10 +1,10 @@
import {
restCREATE,
restDELETE,
restFILE,
restGET,
restPATCH,
restUPDATE,
restYAML,
wrapRequest,
} from '~/shared/api/apiUtils';
import {
@ -72,7 +72,7 @@ export const getWorkspaceKind: GetWorkspaceKindAPI = (hostPath) => (opts, kind)
wrapRequest(restGET(hostPath, `/workspacekinds/${kind}`, {}, opts));
export const createWorkspaceKind: CreateWorkspaceKindAPI = (hostPath) => (opts, data) =>
wrapRequest(restYAML(hostPath, `/workspacekinds`, data, {}, opts));
wrapRequest(restFILE(hostPath, `/workspacekinds`, data, {}, opts));
export const updateWorkspaceKind: UpdateWorkspaceKindAPI = (hostPath) => (opts, kind, data) =>
wrapRequest(restUPDATE(hostPath, `/workspacekinds/${kind}`, data, {}, opts));

1
workspaces/frontend/src/shared/api/types.ts
View File

@ -3,6 +3,7 @@ export type APIOptions = {
signal?: AbortSignal;
parseJSON?: boolean;
headers?: Record<string, string>;
directYAML?: boolean;
};
export type APIState<T> = {

2
workspaces/frontend/src/shared/components/ActionButton.tsx
View File

@ -1,5 +1,5 @@
import React, { useCallback, useState } from 'react';
import { Button } from '@patternfly/react-core';
import { Button } from '@patternfly/react-core/dist/esm/components/Button';
type ActionButtonProps = {
action: string;

6
workspaces/frontend/src/shared/components/CustomEmptyState.tsx
View File

@ -4,9 +4,9 @@ import {
EmptyStateBody,
EmptyStateFooter,
EmptyStateActions,
Button,
} from '@patternfly/react-core';
import { SearchIcon } from '@patternfly/react-icons';
} from '@patternfly/react-core/dist/esm/components/EmptyState';
import { Button } from '@patternfly/react-core/dist/esm/components/Button';
import { SearchIcon } from '@patternfly/react-icons/dist/esm/icons/search-icon';
interface CustomEmptyStateProps {
onClearFilters: () => void;

14
workspaces/frontend/src/shared/components/DeleteModal.tsx
View File

@ -5,14 +5,12 @@ import {
ModalFooter,
ModalHeader,
ModalVariant,
Button,
TextInput,
Stack,
StackItem,
FlexItem,
HelperText,
HelperTextItem,
} from '@patternfly/react-core';
} from '@patternfly/react-core/dist/esm/components/Modal';
import { Button } from '@patternfly/react-core/dist/esm/components/Button';
import { TextInput } from '@patternfly/react-core/dist/esm/components/TextInput';
import { Stack, StackItem } from '@patternfly/react-core/dist/esm/layouts/Stack';
import { FlexItem } from '@patternfly/react-core/dist/esm/layouts/Flex';
import { HelperText, HelperTextItem } from '@patternfly/react-core/dist/esm/components/HelperText';
import { default as ExclamationCircleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
import { ActionButton } from '~/shared/components/ActionButton';

24
workspaces/frontend/src/shared/components/Filter.tsx
View File

@ -11,17 +11,21 @@ import {
MenuContent,
MenuItem,
MenuList,
} from '@patternfly/react-core/dist/esm/components/Menu';
import {
MenuToggle,
MenuToggleElement,
Popper,
} from '@patternfly/react-core/dist/esm/components/MenuToggle';
import { Popper } from '@patternfly/react-core/helpers';
import {
Toolbar,
ToolbarContent,
ToolbarFilter,
ToolbarGroup,
ToolbarItem,
ToolbarFilter,
ToolbarToggleGroup,
} from '@patternfly/react-core';
import { FilterIcon } from '@patternfly/react-icons';
} from '@patternfly/react-core/dist/esm/components/Toolbar';
import { FilterIcon } from '@patternfly/react-icons/dist/esm/icons/filter-icon';
import ThemeAwareSearchInput from '~/app/components/ThemeAwareSearchInput';
export interface FilterProps {
@ -61,6 +65,11 @@ const Filter = React.forwardRef<FilterRef, FilterProps>(
[activeFilter.columnKey, columnDefinition],
);
const textInputActiveFilterLabel = useMemo(
() => activeFilterLabel.toLowerCase(),
[activeFilterLabel],
);
const handleFilterMenuKeys = useCallback(
(event: KeyboardEvent) => {
if (!isFilterMenuOpen) {
@ -170,7 +179,6 @@ const Filter = React.forwardRef<FilterRef, FilterProps>(
columnKey: Object.keys(columnDefinition)[0],
value: '',
});
setFilters([]);
}, [columnDefinition, setFilters]);
useImperativeHandle(ref, () => ({
@ -258,9 +266,9 @@ const Filter = React.forwardRef<FilterRef, FilterProps>(
data-testid={`${id}-search-input`}
value={searchValue}
onChange={onSearchChange}
placeholder={`Filter by ${activeFilterLabel}`}
fieldLabel={`Find by ${activeFilterLabel}`}
aria-label={`Filter by ${activeFilterLabel}`}
placeholder={`Filter by ${textInputActiveFilterLabel}`}
fieldLabel={`Find by ${textInputActiveFilterLabel}`}
aria-label={`Filter by ${textInputActiveFilterLabel}`}
/>
</ToolbarItem>
{filters.map(

6
workspaces/frontend/src/shared/components/ImageFallback.tsx
View File

@ -1,6 +1,8 @@
import React from 'react';
import { ExclamationCircleIcon } from '@patternfly/react-icons';
import { Content, ContentVariants, Flex, FlexItem, Tooltip } from '@patternfly/react-core';
import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
import { Content, ContentVariants } from '@patternfly/react-core/dist/esm/components/Content';
import { Flex, FlexItem } from '@patternfly/react-core/dist/esm/layouts/Flex';
import { Tooltip } from '@patternfly/react-core/dist/esm/components/Tooltip';
type ImageFallbackProps = {
extended?: boolean;

17
workspaces/frontend/src/shared/components/NamespaceSelector.tsx
View File

@ -2,18 +2,15 @@ import React, { FC, useEffect, useMemo, useState } from 'react';
import {
Dropdown,
DropdownItem,
MenuToggle,
DropdownList,
DropdownProps,
MenuSearch,
MenuSearchInput,
InputGroup,
InputGroupItem,
SearchInput,
Button,
ButtonVariant,
Divider,
} from '@patternfly/react-core';
} from '@patternfly/react-core/dist/esm/components/Dropdown';
import { MenuToggle } from '@patternfly/react-core/dist/esm/components/MenuToggle';
import { MenuSearch, MenuSearchInput } from '@patternfly/react-core/dist/esm/components/Menu';
import { InputGroup, InputGroupItem } from '@patternfly/react-core/dist/esm/components/InputGroup';
import { SearchInput } from '@patternfly/react-core/dist/esm/components/SearchInput';
import { Button, ButtonVariant } from '@patternfly/react-core/dist/esm/components/Button';
import { Divider } from '@patternfly/react-core/dist/esm/components/Divider';
import { SearchIcon } from '@patternfly/react-icons/dist/esm/icons/search-icon';
import { useNamespaceContext } from '~/app/context/NamespaceContextProvider';

2
workspaces/frontend/src/shared/components/WithValidImage.tsx
View File

@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import { Skeleton, SkeletonProps } from '@patternfly/react-core';
import { Skeleton, SkeletonProps } from '@patternfly/react-core/dist/esm/components/Skeleton';
type WithValidImageProps = {
imageSrc: string | undefined | null;

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

@ -122,7 +122,9 @@
}
.mui-theme .pf-v6-c-alert {
--pf-v6-c-alert--m-warning__title--Color: var(--pf-t--global--text--color--status--warning--default);
--pf-v6-c-alert--m-warning__title--Color: var(
--pf-t--global--text--color--status--warning--default
);
--pf-v6-c-alert__icon--MarginInlineEnd: var(--mui-alert__icon--MarginInlineEnd);
--pf-v6-c-alert__icon--MarginBlockStart: var(--mui-alert__icon--MarginBlockStart);
--pf-v6-c-alert__icon--FontSize: var(--mui-alert__icon--FontSize);
@ -152,8 +154,6 @@
--pf-v6-c-button--PaddingInlineStart: var(--mui-button--PaddingInlineStart);
--pf-v6-c-button--PaddingInlineEnd: var(--mui-button--PaddingInlineEnd);
--pf-v6-c-button--LineHeight: var(--mui-button--LineHeight);
text-transform: var(--mui-text-transform);
letter-spacing: 0.02857em;
}
@ -164,6 +164,10 @@
&:hover {
text-decoration-color: initial;
}
&.workspace-kind-summary-button {
text-transform: none;
}
}
.mui-theme .pf-v6-c-button.pf-m-link.pf-m-inline .pf-v6-c-button__icon {
@ -182,7 +186,8 @@
--pf-v6-c-card--BorderColor: var(--mui-palette-divider);
}
.pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__label, .pf-v6-c-radio__label, .pf-v6-c-card__clickable-action):hover {
.pf-v6-c-card__selectable-actions
:is(.pf-v6-c-check__label, .pf-v6-c-radio__label, .pf-v6-c-card__clickable-action):hover {
--pf-v6-c-card--BorderColor: var(--mui-palette-grey-300);
}
@ -210,7 +215,9 @@
}
.mui-theme .pf-v6-c-drawer {
--pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(--mui-drawer-BorderLeft);
--pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(
--mui-drawer-BorderLeft
);
}
.mui-theme .pf-v6-c-form__group {
@ -259,6 +266,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);
}
@ -273,13 +302,13 @@
resize: none;
--pf-v6-c-form-control--PaddingBlockStart: var(--mui-spacing-16px);
--pf-v6-c-form-control--PaddingBlockEnd: var(--mui-spacing-16px);
#text-file-simple-filename {
--pf-v6-c-form-control--PaddingBlockStart: var(--mui-spacing-8px);
--pf-v6-c-form-control--PaddingBlockEnd: var(--mui-spacing-8px);;
--pf-v6-c-form-control--PaddingBlockEnd: var(--mui-spacing-8px);
}
}
.mui-theme .pf-v6-c-form__section {
--pf-v6-c-form__section--Gap: 0px;
}
@ -316,7 +345,7 @@
box-sizing: border-box;
}
.mui-theme .pf-v6-c-form-control> :is(input, select, textarea):focus {
.mui-theme .pf-v6-c-form-control > :is(input, select, textarea):focus {
--pf-v6-c-form-control--OutlineOffset: none;
outline: none;
}
@ -365,7 +394,7 @@
border-color: black;
}
.form-fieldset-wrapper:hover span.pf-v6-c-form-control.pf-m-disabled~.form-fieldset {
.form-fieldset-wrapper:hover span.pf-v6-c-form-control.pf-m-disabled ~ .form-fieldset {
border-color: rgba(0, 0, 0, 0.23);
}
@ -453,7 +482,6 @@
.tr-fieldset-wrapper .pf-v6-c-form-control,
.toolbar-fieldset-wrapper .pf-v6-c-form-control,
.form-fieldset-wrapper .pf-v6-c-form-control {
--pf-v6-c-form-control--before--BorderColor: transparent !important;
--pf-v6-c-form-control--after--BorderColor: transparent !important;
}
@ -462,8 +490,8 @@
--pf-v6-c-form__field-group-body--PaddingBlockStart: 8px;
}
.pf-v6-c-form__group .pf-v6-c-form-control:focus-within+.pf-v6-c-form__label,
.pf-v6-c-form__group .pf-v6-c-form-control:not(:placeholder-shown)+.pf-v6-c-form__label {
.pf-v6-c-form__group .pf-v6-c-form-control:focus-within + .pf-v6-c-form__label,
.pf-v6-c-form__group .pf-v6-c-form-control:not(:placeholder-shown) + .pf-v6-c-form__label {
color: var(--mui-palette-primary-main);
}
@ -496,7 +524,9 @@
.mui-theme .pf-v6-c-menu-toggle {
--pf-v6-c-menu-toggle__toggle-icon--MinHeight: var(--mui-menu-toggle__toggle-icon--MinHeight);
--pf-v6-c-menu-toggle__controls--MinWidth: var(--mui-menu-toggle__controls--MinWidth);
--pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--mui-menu-toggle--expanded--BackgroundColor);
--pf-v6-c-menu-toggle--expanded--BackgroundColor: var(
--mui-menu-toggle--expanded--BackgroundColor
);
--pf-v6-c-menu-toggle--expanded--BorderColor: var(--mui-menu-toggle--expanded--BorderColor);
--pf-v6-c-menu-toggle--PaddingInlineStart: var(--mui-menu-toggle--PaddingInlineStart);
--pf-v6-c-menu-toggle--PaddingInlineEnd: var(--mui-menu-toggle--PaddingInlineEnd);
@ -504,17 +534,21 @@
--pf-v6-c-menu-toggle--expanded--Color: var(--mui-palette-common-black);
--pf-v6-c-menu-toggle--hover--BorderColor: var(--mui-menu-toggle--hover--BorderColor);
--pf-v6-c-menu-toggle--BorderColor: var(--mui-menu-toggle--BorderColor);
--pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
--pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--default);
--pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderInlineStartColor: var(--mui-palette-primary-dark);
--pf-v6-c-menu-toggle--hover--BackgroundColor: var(
--pf-t--global--background--color--action--plain--hover
);
--pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--expanded--child--BackgroundColor: var(
--pf-t--global--color--brand--default
);
--pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderInlineStartColor: var(
--mui-palette-primary-dark
);
text-transform: var(--mui-text-transform);
font-weight: var(--mui-button-font-weight);
letter-spacing: 0.02857em;
}
.mui-theme .pf-v6-c-menu-toggle__button {
text-transform: var(--mui-text-transform);
font-weight: var(--mui-button-font-weight);
letter-spacing: 0.02857em;
align-self: stretch;
@ -530,8 +564,12 @@
--pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
}
.mui-theme .pf-v6-c-menu-toggle.pf-m-primary.pf-m-split-button .pf-v6-c-menu-toggle__button[aria-expanded='true'] {
--pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--mui-palette-primary-dark);
.mui-theme
.pf-v6-c-menu-toggle.pf-m-primary.pf-m-split-button
.pf-v6-c-menu-toggle__button[aria-expanded='true'] {
--pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(
--mui-palette-primary-dark
);
}
.pf-v6-c-menu-toggle.pf-m-secondary.pf-m-split-button {
@ -595,7 +633,6 @@
row-gap: none;
}
.mui-theme .pf-v6-c-page__sidebar {
--pf-v6-c-page__sidebar--BackgroundColor: var(--kf-central-primary-background-color);
}
@ -603,18 +640,17 @@
.mui-theme .pf-v6-c-page__sidebar-body {
--pf-v6-c-page__sidebar-body--PaddingInlineStart: 0px;
--pf-v6-c-page__sidebar-body--PaddingInlineEnd: 0px;
}
.mui-theme .pf-v6-c-progress-stepper__step.pf-m-info {
.mui-theme .pf-v6-c-progress-stepper__step.pf-m-info {
--pf-v6-c-progress-stepper__step-icon--Color: var(--mui-palette-primary-main);
}
}
.mui-theme .pf-v6-c-progress-stepper__step.pf-m-success {
.mui-theme .pf-v6-c-progress-stepper__step.pf-m-success {
--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;
}
@ -634,11 +670,15 @@
--pf-v6-c-table--cell--PaddingInlineEnd: var(--mui-table--cell--PaddingInlineEnd);
--pf-v6-c-table--cell--PaddingBlockStart: var(--mui-table--cell--PaddingBlockStart);
--pf-v6-c-table--cell--PaddingBlockEnd: var(--mui-table--cell--PaddingBlockEnd);
--pf-v6-c-table--cell--first-last-child--PaddingInline: var(--mui-table--cell--first-last-child--PaddingInline);
--pf-v6-c-table--cell--first-last-child--PaddingInline: var(
--mui-table--cell--first-last-child--PaddingInline
);
--pf-v6-c-table__thead--cell--FontWeight: var(--mui-button-font-weight);
--pf-v6-c-table__thead--cell--FontSize: var(--mui-table__thead--cell--FontSize);
--pf-v6-c-table__tr--BorderBlockEndColor: var(--mui-palette-grey-300);
--pf-v6-c-table__sort-indicator--MarginInlineStart: var(--mui-table__sort-indicator--MarginInlineStart);
--pf-v6-c-table__sort-indicator--MarginInlineStart: var(
--mui-table__sort-indicator--MarginInlineStart
);
letter-spacing: 0.01071em;
}
@ -656,10 +696,12 @@
transform-origin: center center;
align-self: start;
}
/* CSS workaround for spacing in labels in Workspace Kind */
.form-label-field-group .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) {
padding-block-start: 0px;
}
/* CSS workaround to use MUI icon for sort icon */
.mui-theme .pf-v6-c-table__sort-indicator::before {
display: block;
@ -712,12 +754,13 @@
--pf-v6-c-tabs__link--PaddingInlineStart: var(--mui-tabs__link--PaddingInlineStart);
--pf-v6-c-tabs__link--PaddingInlineEnd: var(--mui-tabs__link--PaddingInlineEnd);
--pf-v6-c-tabs__item--m-current__link--Color: var(--pf-t--global--text--color--brand--default);
--pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--mui-tabs__item--m-current__link--after--BorderWidth);
--pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(
--mui-tabs__item--m-current__link--after--BorderWidth
);
--pf-v6-c-tabs__link--FontSize: 0.875rem;
}
.mui-theme .pf-v6-c-tabs__link {
text-transform: var(--mui-text-transform);
font-weight: var(--mui-button-font-weight);
line-height: var(--mui-button-line-height);
letter-spacing: 0.02857em;
@ -862,12 +905,9 @@
}
.mui-theme .pf-v6-c-toolbar__group.pf-m-filter-group .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);
}
// Fix hover state margin issue by removing problematic padding
@ -881,6 +921,7 @@
.workspacekind-file-upload {
height: 100%;
.pf-v6-c-file-upload__file-details {
flex-grow: 1;
}
@ -888,6 +929,6 @@
/* Workaround for Toggle group header in Workspace Kind Form */
.workspace-kind-form-header .pf-v6-c-toggle-group__button.pf-m-selected {
background-color: #E0F0FF;
background-color: #e0f0ff;
color: var(--pf-t--color--black);
}

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 = (