Issue #3269811 by Ryo Yamashita, yas: Add the function to scale K8s Deployment in the SPA (f40dadf7) · Commits · project / cloud

modules/cloud_dashboard/cloud_dashboard/src/molecules/DataTableRowWithOperationLinks.tsx

+14 −1

Changes for modules/cloud_dashboard/cloud_dashboard/src/molecules/DataTableRowWithOperationLinks.tsx: 14 added lines, 1 removed line.
Original line number	Diff line number	Diff line
		@@ -140,6 +140,15 @@ const editData = (dataRecord: DataRecord) => {
		window.location.href = `${ROUTE_URL}/${urlParts}/${dataRecord.id}?mode=edit`;
		}

		const scaleData = (dataRecord: DataRecord) => {
		let urlParts = dataRecord.entityTypeId;
		const modules = ['aws_cloud', 'k8s'];
		for (const module of modules) {
		urlParts = urlParts.replace(`${module}_`, `${module}/`);
		}
		window.location.href = `${ROUTE_URL}/${urlParts}/${dataRecord.id}?mode=scale`;
		}

		/**
		* Row data of DataTable.
		* Note: The OperationLinks column is added.
		@@ -196,7 +205,11 @@ const DataTableRowWithOperationLinks = ({ dataRecord, dataColumnList, className,
		getOperations(dataRecord).map((menuInfo) => {
		return <li role="presentation" key={menuInfo[0]}>
		{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
		<a role="menuitem" href="#">
		<a role="menuitem" href="#" onClick={() => {
		if (menuInfo[0] === 'Scale') {
		scaleData(dataRecord);
		}
		}}>
		{menuInfo[1] !== '' ? <GlyphIcon iconName={menuInfo[1]} /> : <></>}
		{' '}
		{menuInfo[0]}

modules/cloud_dashboard/cloud_dashboard/src/pages/EntityInfoPage.tsx

+7 −0

Changes for modules/cloud_dashboard/cloud_dashboard/src/pages/EntityInfoPage.tsx: 7 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		@@ -7,6 +7,7 @@ import EntityInfoPanelData from 'model/EntityInfoPanelData';
		import EntityInfoTemplate from 'model/EntityInfoTemplate';
		import EntityInfoPanel from 'organisms/EntityInfoPanel';
		import MenuBar from 'organisms/MenuBar';
		import K8sDeploymentScalePage from 'pages/k8s/K8sDeploymentScalePage';
		import K8sEntityEditPage from 'pages/k8s/K8sEntityEditPage';
		import K8sNamespaceEditPage from 'pages/k8s/K8sNamespaceEditPage';
		import K8sPodEditPage from 'pages/k8s/K8sPodEditPage';
		@@ -192,6 +193,12 @@ const EntityInfoPage = ({ entityInfoTemplate }: {
		return <K8sEntityEditPage entityInfoTemplate={entityInfoTemplate} />;
		}
		}
		if (params.has('mode')
		&& params.get('mode') === 'scale'
		&& entityInfoTemplate.cloudServiceProvider === 'k8s'
		&& entityInfoTemplate.entityName === 'deployment') {
		return <K8sDeploymentScalePage entityInfoTemplate={entityInfoTemplate} />;
		}

		return <FluidContainer className="px-0">
		<Row className="mx-0">

modules/cloud_dashboard/cloud_dashboard/src/pages/k8s/K8sDeploymentCreatePage.tsx

+1 −3

Changes for modules/cloud_dashboard/cloud_dashboard/src/pages/k8s/K8sDeploymentCreatePage.tsx: 1 added line, 3 removed lines.
Original line number	Diff line number	Diff line
		@@ -9,12 +9,10 @@ import FieldSelect from 'molecules/FieldSelect';
		import K8sDetailPropertyTextArea from 'molecules/K8sDetailPropertyTextArea';
		import TimeSelect from 'molecules/TimeSelect';
		import MenuBar from 'organisms/MenuBar';
		import React, { useState } from 'react';
		import { useState } from 'react';
		import { useTranslation } from 'react-i18next';
		import { useEntityData } from 'service/state';

		type SchedulerType = 'cloud_orchestrator_scheduler' \| 'cronjob_scheduler';

		const TimeSchedulerForm = ({
		startHour,
		setStartHour,

modules/cloud_dashboard/cloud_dashboard/src/pages/k8s/K8sDeploymentScalePage.tsx

0 → 100644

+60 −0

Changes for modules/cloud_dashboard/cloud_dashboard/src/pages/k8s/K8sDeploymentScalePage.tsx: 60 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		import Button from 'bootstrap3-components/Button';
		import Col from 'bootstrap3-components/Col';
		import FluidContainer from 'bootstrap3-components/FluidContainer';
		import Form from 'bootstrap3-components/Form';
		import GlyphIcon from 'bootstrap3-components/GlyphIcon';
		import Row from 'bootstrap3-components/Row';
		import EntityInfoTemplate from 'model/EntityInfoTemplate';
		import MenuBar from 'organisms/MenuBar';
		import LoadingEntityDataPage from 'pages/LoadingEntityDataPage';
		import { useState } from 'react';
		import { useTranslation } from 'react-i18next';
		import { useEntityData } from 'service/state';

		/**
		* Page of scaling K8s Deployment.
		*
		* @param entityInfoTemplate Template for viewing this entity data.
		*/
		const K8sDeploymentScalePage = ({ entityInfoTemplate }: {
		entityInfoTemplate: EntityInfoTemplate
		}) => {

		const { entityData, cxud } = useEntityData(entityInfoTemplate);
		const [podNumber, setPodNumber] = useState('1');
		const { t } = useTranslation();

		return entityData === null
		? <LoadingEntityDataPage />
		: <>
		<MenuBar />
		<FluidContainer className="px-0">
		<Row className="mx-0">
		<Col>
		<Form>
		<Form.Group>
		<Form.Label className="form-required">Desire number of pods</Form.Label>
		<Form.Input type="number" value={podNumber} onChange={(e) => {
		setPodNumber(e.currentTarget.value);
		}} />
		</Form.Group>
		<Button className="icon-before btn-success"
		onClick={() => {
		cxud({
		'k8s_deployment': entityData.attributes['drupal_internal__id'],
		'podNumber': podNumber,
		}, 'scale');
		}}>
		<GlyphIcon iconName="ok" />{' ' + t('Scale')}
		</Button>
		{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
		<a href="#" className="button button--danger">{t('Cancel')}</a>
		</Form>
		</Col>
		</Row>
		</FluidContainer>
		</>;

		}

		export default K8sDeploymentScalePage;

modules/cloud_dashboard/cloud_dashboard/src/service/state.ts

+28 −0

Changes for modules/cloud_dashboard/cloud_dashboard/src/service/state.ts: 28 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		@@ -175,12 +175,40 @@ export const useEntityData = (entityInfoTemplate: EntityInfoTemplate) => {
		window.location.href = `${ROUTE_URL}/${entityInfoTemplate.cloudServiceProvider}/${entityInfoTemplate.entityName}`;
		}

		const cxud = async (parameter: {
		[key: string]: string,
		}, command: string) => {
		if (entityData === null) {
		return;
		}
		const formData = new FormData();
		for (const pair of Object.entries(parameter)) {
		formData.append(pair[0], pair[1]);
		}

		const response = await fetch(`/cloud_dashboard/${entityInfoTemplate.cloudServiceProvider}/${entityData.attributes['cloud_context']}/${entityInfoTemplate.entityName}/${command}`, {
		method: 'POST',
		body: formData,
		});
		if (!response.ok) {
		console.log(command + ' Request : No');
		console.error(command + ' failed.');
		console.groupEnd();
		console.error(await response.json());
		window.alert(command + ' failed.');
		}
		console.log(command + ' Request : Yes');
		console.log(await response.json());
		window.location.href = `${ROUTE_URL}/${entityInfoTemplate.cloudServiceProvider}/${entityInfoTemplate.entityName}`;
		}

		return {
		entityData,
		titleKey,
		title,
		create,
		update,
		cxud
		};
		}