Issue #3263292 by Ryo Yamashita, yas: Add the function to edit K8s Pod in the SPA (17818aa4) · Commits · project / cloud

modules/cloud_dashboard/cloud_dashboard/src/atoms/PanelWrapper.tsx

0 → 100644

+17 −0

Changes for modules/cloud_dashboard/cloud_dashboard/src/atoms/PanelWrapper.tsx: 17 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		import Panel from 'bootstrap3-components/Panel'
		import PanelHeadingTitle from 'molecules/PanelHeadingTitle';

		const PanelWrapper = ({ children, titleKey, title }: {
		children: React.ReactNode,
		titleKey: string,
		title: string
		}) => {
		return <Panel className="js-form-wrapper form-wrapper form-item js-form-item" id="bootstrap-panel">
		<PanelHeadingTitle titleKey={titleKey} title={title} />
		<Panel.Body id={titleKey} className="panel-collapse collapse fade in">
		{children}
		</Panel.Body>
		</Panel>
		}

		export default PanelWrapper;

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

+56 −12

Changes for modules/cloud_dashboard/cloud_dashboard/src/molecules/DataTableRowWithOperationLinks.tsx: 56 added lines, 12 removed lines.
Original line number	Diff line number	Diff line
		import Button from 'bootstrap3-components/Button';
		import GlyphIcon from 'bootstrap3-components/GlyphIcon';
		import { ROUTE_URL } from 'constant/other';
		import DataColumn from 'model/DataColumn';
		import DataRecord from 'model/DataRecord';
		import React from 'react';
		@@ -36,6 +37,25 @@ const DataTableData = ({ text, link }: {
		</>;
		}

		const DataTableDataWrapper = ({ dataColumn, dataRecord, detailInfo }: {
		dataColumn: DataColumn,
		dataRecord: DataRecord,
		detailInfo?: {
		column: string,
		path: string,
		},
		}) => {
		return <td key={dataColumn.key} className="word-break-all">
		<DataTableData text={
		dataColumn.key in dataRecord.value
		? dataRecord.value[dataColumn.key]
		: ''
		} link={dataColumn.key === detailInfo?.column
		? `${detailInfo.path}/${dataRecord.id}`
		: undefined} />
		</td>;
		}

		/**
		* Find and return the list of items to be added to Operation links.
		*
		@@ -111,6 +131,16 @@ const getOperations = (dataRecord: DataRecord): [string, string][] => {
		return [];
		}

		const editData = (dataRecord: DataRecord) => {
		let urlParts = dataRecord.entityTypeId;
		if (urlParts.startsWith('aws_cloud_')) {
		urlParts = urlParts.replace('aws_cloud_', 'aws_cloud/');
		} else if (urlParts.startsWith('k8s_')) {
		urlParts = urlParts.replace('k8s_', 'k8s/');
		}
		window.location.href = `${ROUTE_URL}/${urlParts}/${dataRecord.id}?mode=edit`;
		}

		/**
		* Row data of DataTable.
		* Note: The OperationLinks column is added.
		@@ -130,21 +160,35 @@ const DataTableRowWithOperationLinks = ({ dataRecord, dataColumnList, className,
		},
		}) => {

		if (['k8s_node', 'k8s_event'].includes(dataRecord.entityTypeId)) {
		return <tr key={dataRecord.id} className={className}>
		{dataColumnList.map((dataColumn) => {
		return <td key={dataColumn.key} className="word-break-all">
		<DataTableData text={
		dataColumn.key in dataRecord.value
		? dataRecord.value[dataColumn.key]
		: ''
		} link={dataColumn.key === detailInfo?.column
		? `${detailInfo.path}/${dataRecord.id}`
		: undefined} />
		</td>;
		})}
		{
		dataColumnList.map((dataColumn) => {
		return <DataTableDataWrapper
		dataColumn={dataColumn}
		dataRecord={dataRecord}
		detailInfo={detailInfo} />;
		})
		}
		</tr>;
		}

		return <tr key={dataRecord.id} className={className}>
		{
		dataColumnList.map((dataColumn) => {
		return <DataTableDataWrapper
		dataColumn={dataColumn}
		dataRecord={dataRecord}
		detailInfo={detailInfo} />;
		})
		}
		<td>
		<Button.Group>
		<Button><GlyphIcon iconName='wrench' /> Edit</Button>
		<Button onClick={() => {
		editData(dataRecord);
		}}>
		<GlyphIcon iconName='wrench' /> Edit
		</Button>
		<Button className='dropdown-toggle' data-toggle="dropdown">
		<span className="caret" />
		</Button>

modules/cloud_dashboard/cloud_dashboard/src/molecules/LabelBlock.tsx

0 → 100644

+10 −0

Changes for modules/cloud_dashboard/cloud_dashboard/src/molecules/LabelBlock.tsx: 10 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		import Form from 'bootstrap3-components/Form';

		const LabelBlock = ({name, value} : {name: string, value: string}) => {
		return <Form.Group>
		<Form.Label>{name}: </Form.Label>
		{' ' + value}
		</Form.Group>;
		}

		export default LabelBlock;

modules/cloud_dashboard/cloud_dashboard/src/molecules/TableBlock.tsx

+1 −1

Changes for modules/cloud_dashboard/cloud_dashboard/src/molecules/TableBlock.tsx: 1 added line, 1 removed line.
Original line number	Diff line number	Diff line
		@@ -56,7 +56,7 @@ const TableBlock = ({ record }: { record: EntityInfoRecordData }) => {
		return <tr className={index % 2 === 0 ? 'odd' : 'even'}>
		{
		keys.map((key, index2) => {
		return <td className="word-break-all">{
		return <td className="word-break-all" key={index2}>{
		r[key].includes('\n')
		? <pre>{r[key]}</pre>
		: <>{r[key]}</>

modules/cloud_dashboard/cloud_dashboard/src/organisms/EntityTable.tsx

+1 −1

Changes for modules/cloud_dashboard/cloud_dashboard/src/organisms/EntityTable.tsx: 1 added line, 1 removed line.
Original line number	Diff line number	Diff line
		@@ -82,7 +82,7 @@ const EntityTable = ({ entityTypeId, entityColumnList, namespace, namespaceName,
		dataRecordList={dataRecordList}
		sortInfo={sortInfo}
		setSortInfo={setSortInfo}
		hasOperationLinks={true}
		hasOperationLinks={!['k8s_node', 'k8s_event'].includes(entityTypeId)}
		detailInfo={detailInfo} />;

		}