Skip to content

Commit

Permalink
frontend: Add create resource UI
Browse files Browse the repository at this point in the history
These changes introduce a new UI feature that allows users to create
resources from the associated list view. Clicking the 'Create' button
opens up the EditorDialog used in the generic 'Create / Apply' button,
now accepting generic YAML/JSON text rather than explicitly expecting an
item that looks like a Kubernetes resource. The dialog box also includes
a generic template for each resource.

Fixes: #1820

Signed-off-by: Evangelos Skopelitis <[email protected]>
  • Loading branch information
skoeva committed Jul 2, 2024
1 parent c309b09 commit 51b00c8
Show file tree
Hide file tree
Showing 22 changed files with 422 additions and 50 deletions.
39 changes: 39 additions & 0 deletions frontend/src/components/common/CreateResourceButton.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';
import { Provider } from 'react-redux';
import store from '../../redux/stores/store';
import { CreateResourceButton, CreateResourceButtonProps } from './CreateResourceButton';

export default {
title: 'CreateResourceButton',
component: CreateResourceButton,
decorators: [
Story => (
<Provider store={store}>
<Story />
</Provider>
),
],
} as Meta;

const Template: StoryFn<CreateResourceButtonProps> = args => <CreateResourceButton {...args} />;

export const ConfigMap = Template.bind({});
ConfigMap.args = {
resource: 'Config Map',
};

export const Secret = Template.bind({});
Secret.args = {
resource: 'Secret',
};

export const Lease = Template.bind({});
Lease.args = {
resource: 'Lease',
};

export const RuntimeClass = Template.bind({});
RuntimeClass.args = {
resource: 'RuntimeClass',
};
210 changes: 210 additions & 0 deletions frontend/src/components/common/CreateResourceButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,210 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { useDispatch } from 'react-redux';
import { getCluster } from '../../lib/cluster';
import { apply } from '../../lib/k8s/apiProxy';
import { KubeObjectInterface } from '../../lib/k8s/cluster';
import { KubeConfigMap } from '../../lib/k8s/configMap';
import { KubeRuntimeClass } from '../../lib/k8s/runtime';
import { KubeSecret } from '../../lib/k8s/secret';
import { clusterAction } from '../../redux/clusterActionSlice';
import { EventStatus, HeadlampEventType, useEventCallback } from '../../redux/headlampEventSlice';
import { ActionButton, EditorDialog } from '../common';

const creationTimestamp = new Date('2022-01-01').toISOString();
const BASE_EMPTY_CONFIG_MAP: KubeConfigMap = {
apiVersion: 'v1',
kind: 'ConfigMap',
metadata: {
creationTimestamp: '2023-04-27T20:31:27Z',
name: 'my-pvc',
namespace: 'default',
resourceVersion: '1234',
uid: 'abc-1234',
},
data: {},
};
const LEASE_DUMMY_DATA = [
{
apiVersion: 'coordination.k8s.io/v1',
kind: 'Lease',
metadata: {
name: 'lease',
namespace: 'default',
creationTimestamp,
uid: '123',
},
spec: {
holderIdentity: 'holder',
leaseDurationSeconds: 10,
leaseTransitions: 1,
renewTime: '2021-03-01T00:00:00Z',
},
},
];
const BASE_RC: KubeRuntimeClass = {
apiVersion: 'node.k8s.io/v1',
kind: 'RuntimeClass',
metadata: {
name: 'runtime-class',
namespace: 'default',
creationTimestamp,
uid: '123',
},
handler: 'handler',
overhead: {
cpu: '100m',
memory: '128Mi',
},
scheduling: {
nodeSelector: {
key: 'value',
},
tolerations: [
{
key: 'key',
operator: 'Equal',
value: 'value',
effect: 'NoSchedule',
tolerationSeconds: 10,
},
],
},
};
const BASE_EMPTY_SECRET: KubeSecret = {
apiVersion: 'v1',
kind: 'Secret',
metadata: {
creationTimestamp: '2023-04-27T20:31:27Z',
name: 'my-pvc',
namespace: 'default',
resourceVersion: '1234',
uid: 'abc-1234',
},
data: {},
type: 'bla',
};

export interface CreateResourceButtonProps {
resource: string;
}

export function CreateResourceButton(props: CreateResourceButtonProps) {
const { resource } = props;
const { t } = useTranslation(['glossary', 'translation']);
const [openDialog, setOpenDialog] = React.useState(false);
const [errorMessage, setErrorMessage] = React.useState('');
const dispatchCreateEvent = useEventCallback(HeadlampEventType.CREATE_RESOURCE);
const dispatch = useDispatch();

const applyFunc = async (newItems: KubeObjectInterface[], clusterName: string) => {
await Promise.allSettled(newItems.map(newItem => apply(newItem, clusterName))).then(
(values: any) => {
values.forEach((value: any, index: number) => {
if (value.status === 'rejected') {
let msg;
const kind = newItems[index].kind;
const name = newItems[index].metadata.name;
const apiVersion = newItems[index].apiVersion;
if (newItems.length === 1) {
msg = t('translation|Failed to create {{ kind }} {{ name }}.', { kind, name });
} else {
msg = t('translation|Failed to create {{ kind }} {{ name }} in {{ apiVersion }}.', {
kind,
name,
apiVersion,
});
}
setErrorMessage(msg);
setOpenDialog(true);
throw msg;
}
});
}
);
};

function handleSave(newItemDefs: KubeObjectInterface[]) {
let massagedNewItemDefs = newItemDefs;
const cancelUrl = location.pathname;

// check if all yaml objects are valid
for (let i = 0; i < massagedNewItemDefs.length; i++) {
if (massagedNewItemDefs[i].kind === 'List') {
// flatten this List kind with the items that it has which is a list of valid k8s resources
const deletedItem = massagedNewItemDefs.splice(i, 1);
massagedNewItemDefs = massagedNewItemDefs.concat(deletedItem[0].items);
}
if (!massagedNewItemDefs[i].metadata?.name) {
setErrorMessage(
t(`translation|Invalid: One or more of resources doesn't have a name property`)
);
return;
}
if (!massagedNewItemDefs[i].kind) {
setErrorMessage(t('translation|Invalid: Please set a kind to the resource'));
return;
}
}
// all resources name
const resourceNames = massagedNewItemDefs.map(newItemDef => newItemDef.metadata.name);
setOpenDialog(false);

const clusterName = getCluster() || '';

dispatch(
clusterAction(() => applyFunc(massagedNewItemDefs, clusterName), {
startMessage: t('translation|Applying {{ newItemName }}…', {
newItemName: resourceNames.join(','),
}),
cancelledMessage: t('translation|Cancelled applying {{ newItemName }}.', {
newItemName: resourceNames.join(','),
}),
successMessage: t('translation|Applied {{ newItemName }}.', {
newItemName: resourceNames.join(','),
}),
errorMessage: t('translation|Failed to apply {{ newItemName }}.', {
newItemName: resourceNames.join(','),
}),
cancelUrl,
})
);

dispatchCreateEvent({
status: EventStatus.CONFIRMED,
});
}

const defaultContentMap: { [key: string]: any } = {
'Config Map': BASE_EMPTY_CONFIG_MAP,
Secret: BASE_EMPTY_SECRET,
Lease: LEASE_DUMMY_DATA,
RuntimeClass: BASE_RC,
};

const getDefaultContent = () => defaultContentMap[resource] || '';

return (
<React.Fragment>
<ActionButton
color="primary"
description={t('translation|Create {{ resource }}', { resource })}
icon={'mdi:plus-circle'}
onClick={() => {
setOpenDialog(true);
}}
/>

<EditorDialog
item={getDefaultContent()}
open={openDialog}
onClose={() => setOpenDialog(false)}
onSave={handleSave}
saveLabel={t('translation|Apply')}
errorMessage={errorMessage}
onEditorChanged={() => setErrorMessage('')}
title={t('translation|Create {{ resource }}', { resource })}
/>
</React.Fragment>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<DocumentFragment>
<button
aria-label="Create Config Map"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-whz9ym-MuiButtonBase-root-MuiIconButton-root"
data-mui-internal-clone-element="true"
tabindex="0"
type="button"
>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</DocumentFragment>
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<DocumentFragment>
<button
aria-label="Create Lease"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-whz9ym-MuiButtonBase-root-MuiIconButton-root"
data-mui-internal-clone-element="true"
tabindex="0"
type="button"
>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</DocumentFragment>
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<DocumentFragment>
<button
aria-label="Create RuntimeClass"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-whz9ym-MuiButtonBase-root-MuiIconButton-root"
data-mui-internal-clone-element="true"
tabindex="0"
type="button"
>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</DocumentFragment>
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<DocumentFragment>
<button
aria-label="Create Secret"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-whz9ym-MuiButtonBase-root-MuiIconButton-root"
data-mui-internal-clone-element="true"
tabindex="0"
type="button"
>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</DocumentFragment>
1 change: 1 addition & 0 deletions frontend/src/components/common/index.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ const checkExports = [
'Chart',
'ConfirmDialog',
'ConfirmButton',
'CreateResourceButton',
'Dialog',
'EmptyContent',
'ErrorPage',
Expand Down
1 change: 1 addition & 0 deletions frontend/src/components/common/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -50,3 +50,4 @@ export { default as ConfirmButton } from './ConfirmButton';
export * from './NamespacesAutocomplete';
export * from './Table/Table';
export { default as Table } from './Table';
export * from './CreateResourceButton';
4 changes: 4 additions & 0 deletions frontend/src/components/configmap/List.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { useTranslation } from 'react-i18next';
import ConfigMap from '../../lib/k8s/configMap';
import { CreateResourceButton } from '../common/CreateResourceButton';
import ResourceListView from '../common/Resource/ResourceListView';

export default function ConfigMapList() {
Expand All @@ -8,6 +9,9 @@ export default function ConfigMapList() {
return (
<ResourceListView
title={t('glossary|Config Maps')}
headerProps={{
titleSideActions: [<CreateResourceButton resource="Config Map" />],
}}
resourceClass={ConfigMap}
columns={[
'name',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -195,13 +195,13 @@
style="display: flex; position: relative; text-align: initial; width: 100%; height: 100%;"
>
<div
data-keybinding-context="8"
data-keybinding-context="12"
data-mode-id="plaintext"
style="width: 100%;"
>
<div
class="monaco-editor showUnused showDeprecated vs"
data-uri="inmemory://model/8"
data-uri="inmemory://model/12"
role="code"
style="width: 5px; height: 3vh;"
>
Expand Down Expand Up @@ -442,13 +442,13 @@
style="display: flex; position: relative; text-align: initial; width: 100%; height: 100%;"
>
<div
data-keybinding-context="9"
data-keybinding-context="13"
data-mode-id="plaintext"
style="width: 100%;"
>
<div
class="monaco-editor showUnused showDeprecated vs"
data-uri="inmemory://model/9"
data-uri="inmemory://model/13"
role="code"
style="width: 5px; height: 3vh;"
>
Expand Down Expand Up @@ -689,13 +689,13 @@
style="display: flex; position: relative; text-align: initial; width: 100%; height: 100%;"
>
<div
data-keybinding-context="10"
data-keybinding-context="14"
data-mode-id="plaintext"
style="width: 100%;"
>
<div
class="monaco-editor showUnused showDeprecated vs"
data-uri="inmemory://model/10"
data-uri="inmemory://model/14"
role="code"
style="width: 5px; height: 3vh;"
>
Expand Down
Loading

0 comments on commit 51b00c8

Please sign in to comment.