Issue #3298732 by Ryo Yamashita, yas: Add the function to create AWS Cloud image in the SPA (9f89bea5) · Commits · project / cloud

modules/cloud_dashboard/cloud_dashboard/src/constant/form_template/aws_cloud/image.ts

0 → 100644

+23 −0

Changes for modules/cloud_dashboard/cloud_dashboard/src/constant/form_template/aws_cloud/image.ts: 23 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		import EntityFormTemplate from 'model/EntityFormTemplate';

		const AWS_CLOUD_IMAGE_TEMPLATE: EntityFormTemplate[] = [
		{
		cloudServiceProvider: 'aws_cloud',
		entityName: 'image',
		actionType: 'create',
		entityRecords: [
		{
		type: 'panel',
		panelName: 'Image',
		keyValueRecords: [
		{ type: 'default', labelName: 'Name', name: 'name', defaultValue: '' },
		{ type: 'default', labelName: 'Instance ID', name: 'instance_id', defaultValue: '', required: true },
		{ type: 'default', labelName: 'Description', name: 'description', defaultValue: '' },
		{ type: 'array', labelName: 'AWS account IDs', name: 'launch_permission_account_ids', defaultValue: [''] },
		]
		}
		]
		},
		]

		export default AWS_CLOUD_IMAGE_TEMPLATE;

modules/cloud_dashboard/cloud_dashboard/src/constant/form_template/entity_form_template.ts

+2 −0

Changes for modules/cloud_dashboard/cloud_dashboard/src/constant/form_template/entity_form_template.ts: 2 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		import AWS_CLOUD_IMAGE_TEMPLATE from 'constant/form_template/aws_cloud/image';
		import AWS_CLOUD_INSTANCE_TEMPLATE from 'constant/form_template/aws_cloud/instance';
		import AWS_CLOUD_SECURITY_GROUP_TEMPLATE from 'constant/form_template/aws_cloud/security_group';
		import K8S_DEPLOYMENT_TEMPLATE from 'constant/form_template/k8s/deployment';
		@@ -15,6 +16,7 @@ import OPENSTACK_SNAPSHOT_TEMPLATE from 'constant/form_template/openstack/snapsh
		import VMWARE_VM_TEMPLATE from 'constant/form_template/vmware/vm';

		const ENTITY_FORM_LIST = [
		...AWS_CLOUD_IMAGE_TEMPLATE,
		...AWS_CLOUD_INSTANCE_TEMPLATE,
		...AWS_CLOUD_SECURITY_GROUP_TEMPLATE,
		...K8S_DEPLOYMENT_TEMPLATE,

modules/cloud_dashboard/cloud_dashboard/src/model/EntityFormColumn.ts

+4 −1

Changes for modules/cloud_dashboard/cloud_dashboard/src/model/EntityFormColumn.ts: 4 added lines, 1 removed line.
Original line number	Diff line number	Diff line
		@@ -16,8 +16,11 @@ type EntityFormColumnInfo = {
		type: 'default' \| 'textarea',
		defaultValue: string,
		} \| {
		type: 'number-array'\| 'array',
		type: 'number-array',
		defaultValue: number[],
		} \| {
		type: 'array',
		defaultValue: string[],
		} \| {
		type: 'number' \| 'datetime',
		defaultValue: number,

modules/cloud_dashboard/cloud_dashboard/src/molecules/EntityFormBlock.tsx

+10 −2

Changes for modules/cloud_dashboard/cloud_dashboard/src/molecules/EntityFormBlock.tsx: 10 added lines, 2 removed lines.
Original line number	Diff line number	Diff line
		@@ -5,6 +5,7 @@ import JoinSelectBlock from 'molecules/JoinSelectBlock';
		import KeyValueTableBlock from 'molecules/KeyValueTableBlock';
		import LabelBlock from 'molecules/LabelBlock';
		import MultiNumberInputBlock from 'molecules/MultiNumberInputBlock';
		import MultiStringInputBlock from 'molecules/MultiStringInputBlock';
		import NumberInputBlock from 'molecules/NumberInputBlock';
		import PermissionInputBlock from 'molecules/PermissionInputBlock';
		import RadioSelectBlock from 'molecules/RadioSelectBlock';
		@@ -167,9 +168,16 @@ const EntityFormBlock = ({ keyValueRecord, cloudContext, formData, setFormData }
		required={!!keyValueRecord.required}
		readOnly={!!keyValueRecord.readOnly} />;
		case 'array':
		return <LabelBlock
		return !!keyValueRecord.readOnly
		? <LabelBlock
		name={keyValueRecord.labelName}
		value={(value as string[]).join(', ')} />;
		value={(value as string[]).join(', ')} />
		: <MultiStringInputBlock
		label={keyValueRecord.labelName}
		value={value}
		setValue={setValue}
		required={!!keyValueRecord.required}
		readOnly={!!keyValueRecord.readOnly} />;
		case 'sg_permission':
		return <PermissionInputBlock
		label={keyValueRecord.labelName}

modules/cloud_dashboard/cloud_dashboard/src/molecules/MultiStringInputBlock.tsx

0 → 100644

+94 −0

Changes for modules/cloud_dashboard/cloud_dashboard/src/molecules/MultiStringInputBlock.tsx: 94 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		import { Button, ButtonGroup, Form, Table } from 'react-bootstrap';
		import { useTranslation } from 'react-i18next';
		import { BsTrashFill } from 'react-icons/bs';

		/**
		* Block of key-value input view.
		*
		* @param
		*/
		const MultiStringInputBlock = ({ label, value, setValue, required, readOnly }: {
		label: string,
		value: string[],
		setValue: (n: string[]) => void,
		required: boolean,
		readOnly: boolean,
		}) => {

		const { t } = useTranslation();

		if (!Array.isArray(value)) {
		return <></>;
		}

		return <Form.Group className="form-item js-form-item">
		<Form.Label className={'control-label' + (required ? ' form-required' : '')}>{label}</Form.Label>
		<Table striped>
		<tbody>
		{
		value.map((v, index) => {
		return <tr key={index}>
		<td>
		<input className="form-text form-control" type="text" value={v} onChange={(e) => {
		const newValue: string[] = JSON.parse(JSON.stringify(value));
		newValue[index] = e.currentTarget.value;
		setValue(newValue);
		}} readOnly={readOnly} />
		</td>
		<td>
		<ButtonGroup>
		<Button onClick={() => {
		const newValue: string[] = [];
		for (let index2 = 0; index2 < value.length; index2 += 1) {
		newValue.push(value[index2]);
		if (index2 === index) {
		newValue.push('');
		}
		}
		setValue(newValue);
		}} disabled={readOnly}>＋</Button>
		<Button onClick={() => {
		if (index === 0) {
		return;
		}
		const newValue: string[] = JSON.parse(JSON.stringify(value));
		newValue[index] = value[index - 1];
		newValue[index - 1] = value[index];
		setValue(newValue);
		}} disabled={readOnly}>↑</Button>
		<Button onClick={() => {
		if (index === value.length - 1) {
		return;
		}
		const newValue: string[] = JSON.parse(JSON.stringify(value));
		newValue[index] = value[index + 1];
		newValue[index + 1] = value[index];
		setValue(newValue);
		}} disabled={readOnly}>↓</Button>
		<Button onClick={() => {
		if (value.length === 1) {
		return;
		}
		const newValue: string[] = [];
		for (let index2 = 0; index2 < value.length; index2 += 1) {
		if (index2 !== index) {
		newValue.push(value[index2]);
		}
		}
		setValue(newValue);
		}} disabled={readOnly}>
		<BsTrashFill />
		{' ' + t('Delete')}
		</Button>
		</ButtonGroup>
		</td>
		</tr>;
		})
		}
		</tbody>
		</Table>
		</Form.Group>;

		}

		export default MultiStringInputBlock;