update request body for order history.

Author: Alice1319

src/components/content/deployedServices/myServices/MyServiceHistory.tsx

@@ -8,7 +8,7 @@ import { Button, Popover, Table, Tag, Typography } from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import { ColumnFilterItem } from 'antd/es/table/interface';
 import React from 'react';
-import serviceModifyStyles from '../../../../styles/service-modify.module.css';
+import serviceOperationStyles from '../../../../styles/service-operation.module.css';
 import {
     DeployedServiceDetails,
     ErrorResponse,
@@ -88,9 +88,9 @@ export const MyServiceHistory = ({
             onFilter: (value: React.Key | boolean, record) => record.orderId.startsWith(value.toString()),
             render: (value: string) => {
                 return (
-                    <div className={serviceModifyStyles.serviceHistoryValue}>
+                    <div className={serviceOperationStyles.serviceHistoryValue}>
                         <Paragraph
-                            className={serviceModifyStyles.serviceHistoryOrderIdClass}
+                            className={serviceOperationStyles.serviceHistoryOrderIdClass}
                             ellipsis={true}
                             copyable={{ tooltips: value }}
                         >
@@ -123,7 +123,7 @@ export const MyServiceHistory = ({
                             title={'Details'}
                             trigger='hover'
                         >
-                            <Button className={serviceModifyStyles.serviceOrderErrorDataHover} type={'link'}>
+                            <Button className={serviceOperationStyles.serviceOrderErrorDataHover} type={'link'}>
                                 {'details'}
                             </Button>
                         </Popover>
@@ -208,11 +208,13 @@ export const MyServiceHistory = ({
                 if (value) {
                     return (
                         <Popover
-                            content={<pre className={serviceModifyStyles.serviceOrderErrorText}>{value.details}</pre>}
+                            content={
+                                <pre className={serviceOperationStyles.serviceOrderErrorText}>{value.details}</pre>
+                            }
                             title={value.errorType}
                             trigger='hover'
                         >
-                            <Button className={serviceModifyStyles.serviceOrderErrorDataHover} type={'link'}>
+                            <Button className={serviceOperationStyles.serviceOrderErrorDataHover} type={'link'}>
                                 {'failure reason'}
                             </Button>
                         </Popover>
@@ -223,7 +225,7 @@ export const MyServiceHistory = ({
     ];
 
     return (
-        <div className={serviceModifyStyles.modifyContainer}>
+        <div className={serviceOperationStyles.orderOperationContainer}>
             <Table
                 columns={columns}
                 dataSource={serviceOrdersHistoryList}

src/components/content/deployedServices/myServices/MyServiceHistoryDetails.tsx

@@ -4,16 +4,25 @@
  */
 
 import { Typography } from 'antd';
-import serviceModifyStyles from '../../../../styles/service-modify.module.css';
+import serviceOperationStyles from '../../../../styles/service-operation.module.css';
 import { ServiceOrderDetails } from '../../../../xpanse-api/generated';
 const { Text } = Typography;
 export const MyServiceHistoryDetails = ({ record }: { record: ServiceOrderDetails }) => {
-    const requestBodyContent = <pre>{JSON.stringify(record.requestBody, null, 2)}</pre>;
+    const requestBodyContent =
+        record.requestBody && Object.keys(record.requestBody).length > 0 ? (
+            <>
+                <div className={serviceOperationStyles.orderHistoryRequestContent}>
+                    <pre>{JSON.stringify(record.requestBody, null, 2)}</pre>
+                </div>
+            </>
+        ) : (
+            <Text>Empty Requests</Text>
+        );
 
     const resultPropertiesContent =
         record.resultProperties && Object.keys(record.resultProperties).length > 0 ? (
             <>
-                <ul className={serviceModifyStyles.modifyHistoryValueLi}>
+                <ul className={serviceOperationStyles.orderHistoryValueLi}>
                     {Object.entries(record.resultProperties).map(([key, value]) => (
                         <li key={key}>
                             <Text strong>{key}:</Text>

src/components/content/order/common/FlavorFeatures.tsx

@@ -7,7 +7,7 @@ import { CheckOutlined } from '@ant-design/icons';
 import { List } from 'antd';
 import React from 'react';
 import flavorStyles from '../../../../styles/flavor.module.css';
-import serviceModifyStyles from '../../../../styles/service-modify.module.css';
+import serviceOperationStyles from '../../../../styles/service-operation.module.css';
 import { ServiceFlavor } from '../../../../xpanse-api/generated';
 
 export const FlavorFeatures = ({ flavor }: { flavor: ServiceFlavor }): React.JSX.Element => {
@@ -22,7 +22,7 @@ export const FlavorFeatures = ({ flavor }: { flavor: ServiceFlavor }): React.JSX
                 renderItem={(item, _) => (
                     <List.Item className={flavorStyles.flavorFeatureItemName}>
                         <div>
-                            <CheckOutlined className={serviceModifyStyles.flavorFeaturesItemIcon} />
+                            <CheckOutlined className={serviceOperationStyles.flavorFeaturesItemIcon} />
                             &nbsp;{item}
                         </div>
                     </List.Item>

src/components/content/order/common/FlavorPrice.tsx

@@ -6,7 +6,7 @@
 import { Tag, Typography } from 'antd';
 import React from 'react';
 import flavorStyles from '../../../../styles/flavor.module.css';
-import serviceModifyStyles from '../../../../styles/service-modify.module.css';
+import serviceOperationStyles from '../../../../styles/service-operation.module.css';
 import { ServiceFlavor } from '../../../../xpanse-api/generated';
 import { convertToFlavorMap, getMappedPeriod } from '../formDataHelpers/flavorHelper.ts';
 import { ServiceFlavorWithPriceResult } from '../types/ServiceFlavorWithPrice.ts';
@@ -36,7 +36,7 @@ export const FlavorPrice = ({
                     {flavor.name && flavorMap[flavor.name].price.successful ? (
                         <>
                             {flavorMap[flavor.name].price.recurringPrice ? (
-                                <Tag color={'blue'} className={serviceModifyStyles.flavorPriceContent}>
+                                <Tag color={'blue'} className={serviceOperationStyles.flavorPriceContent}>
                                     {flavorMap[flavor.name].price.recurringPrice?.cost
                                         .toString()
                                         .concat(' ')

src/components/content/order/modify/Modify.tsx

@@ -8,7 +8,7 @@ import { useMutation } from '@tanstack/react-query';
 import { Button, Form, Input, Popconfirm, PopconfirmProps, Tooltip, Typography } from 'antd';
 import React, { useState } from 'react';
 import appStyles from '../../../../styles/app.module.css';
-import serviceModifyStyles from '../../../../styles/service-modify.module.css';
+import serviceOperationStyles from '../../../../styles/service-operation.module.css';
 import serviceOrderStyles from '../../../../styles/service-order.module.css';
 import {
     csp,
@@ -176,8 +176,8 @@ export const Modify = ({
     };
 
     return (
-        <div className={serviceModifyStyles.modifySelectClass}>
-            <div className={`${serviceModifyStyles.modifyTitleClass} ${appStyles.contentTitle}`}>
+        <div className={serviceOperationStyles.serviceSelectClass}>
+            <div className={`${serviceOperationStyles.serviceTitleClass} ${appStyles.contentTitle}`}>
                 Modify Parameters:
             </div>
             {isShowModifyingResult ? (
@@ -199,7 +199,7 @@ export const Modify = ({
                 autoComplete='off'
                 initialValues={useOrderFormStore.getState().deployParams}
                 onFinish={onFinish}
-                className={serviceModifyStyles.modifyContainer}
+                className={serviceOperationStyles.orderOperationContainer}
                 validateTrigger={['onSubmit', 'onBlur', 'onChange']}
                 key='scale'
                 disabled={modifyServiceRequest.isPending || modifyServiceRequest.isSuccess}
@@ -247,13 +247,13 @@ export const Modify = ({
                     )}
                 </div>
                 <div className={serviceOrderStyles.orderParamItemLeft} />
-                <div className={serviceModifyStyles.serviceModifySubmitResetContainer}>
-                    <div className={serviceModifyStyles.serviceModifySubmitClass}>
+                <div className={serviceOperationStyles.serviceUpdateSubmitResetContainer}>
+                    <div className={serviceOperationStyles.serviceUpdateSubmitClass}>
                         <Popconfirm
                             placement='top'
                             title='Modify parameters'
                             description={
-                                <div className={serviceModifyStyles.serviceModifyWarningsContent}>
+                                <div className={serviceOperationStyles.serviceModifyWarningsContent}>
                                     <Paragraph>{modifyWarning}</Paragraph>
                                 </div>
                             }

src/components/content/order/scale/Scale.tsx

@@ -9,7 +9,7 @@ import { Badge, Button, Flex, Form, Input, Popconfirm, PopconfirmProps, Radio, S
 import React, { useState } from 'react';
 import appStyles from '../../../../styles/app.module.css';
 import flavorStyles from '../../../../styles/flavor.module.css';
-import serviceModifyStyles from '../../../../styles/service-modify.module.css';
+import serviceOperationStyles from '../../../../styles/service-operation.module.css';
 import serviceOrderStyles from '../../../../styles/service-order.module.css';
 import {
     csp,
@@ -151,8 +151,10 @@ export const Scale = ({
     };
 
     return (
-        <div className={serviceModifyStyles.modifySelectClass}>
-            <div className={`${serviceModifyStyles.modifyTitleClass} ${appStyles.contentTitle}`}>Change Flavor:</div>
+        <div className={serviceOperationStyles.serviceSelectClass}>
+            <div className={`${serviceOperationStyles.serviceTitleClass} ${appStyles.contentTitle}`}>
+                Change Flavor:
+            </div>
             {isShowModifyingResult ? (
                 <ScaleOrModifySubmitStatusAlert
                     modifyServiceRequest={modifyServiceRequest}
@@ -173,7 +175,7 @@ export const Scale = ({
                 autoComplete='off'
                 initialValues={useOrderFormStore.getState().deployParams}
                 onFinish={onFinish}
-                className={serviceModifyStyles.modifyContainer}
+                className={serviceOperationStyles.orderOperationContainer}
                 validateTrigger={['onSubmit', 'onBlur', 'onChange']}
                 key='scale'
                 disabled={
@@ -248,7 +250,7 @@ export const Scale = ({
                                                     <div className={flavorStyles.ribbonContainer}>
                                                         <Badge.Ribbon
                                                             text='current'
-                                                            className={serviceModifyStyles.flavorCardCustomRibbon}
+                                                            className={serviceOperationStyles.flavorCardCustomRibbon}
                                                             color={'#b5b5b5'}
                                                         >
                                                             {radioButton}
@@ -308,8 +310,8 @@ export const Scale = ({
                     )}
                 </div>
                 <div className={serviceOrderStyles.orderParamItemLeft} />
-                <div className={serviceModifyStyles.serviceModifySubmitResetContainer}>
-                    <div className={serviceModifyStyles.serviceModifySubmitClass}>
+                <div className={serviceOperationStyles.serviceUpdateSubmitResetContainer}>
+                    <div className={serviceOperationStyles.serviceUpdateSubmitClass}>
                         <Popconfirm
                             placement='top'
                             title='Scale'

src/styles/service-modify.module.css src/styles/service-operation.module.css

@@ -3,16 +3,11 @@
  * SPDX-FileCopyrightText: Huawei Inc.
  */
 
-.modify-select-class {
+.service-select-class {
     height: 80%;
 }
 
-.modify-select-flavor-billing {
-    width: 100%;
-    margin-bottom: 20px;
-}
-
-.modify-title-class {
+.service-title-class {
     margin-left: 24px;
     margin-bottom: 8px;
 }
@@ -64,27 +59,17 @@
     align-items: center;
 }
 
-.modify-container {
+.order-operation-container {
     margin-left: 5px;
     max-width: 1600px;
 }
 
-.modify-history-value {
-    white-space: normal;
-    word-break: break-word;
-    vertical-align: top;
-}
-
-.modify-history-error-msg-value {
-    display: inline-block;
-    max-width: 145px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    vertical-align: middle;
+.order-history-request-content {
+    text-align: left;
+    margin-left: 30px;
 }
 
-.modify-history-value-li {
+.order-history-value-li {
     text-align: left;
 }
 
@@ -98,7 +83,7 @@
     left: 70%;
 }
 
-.service-modify-submit-reset-container {
+.service-update-submit-reset-container {
     display: flex;
     gap: 20px;
     flex-direction: row;
@@ -107,7 +92,7 @@
     width: 600px;
 }
 
-.service-modify-submit-class {
+.service-update-submit-class {
     display: flex;
     flex-direction: row;
     text-align: right;