add output properties in ocl

Author: baixinsui

src/components/content/deployment/DeploymentManagement.tsx

@@ -18,7 +18,7 @@ function DeploymentManagement({ deployment }: { deployment: Deployment }): React
                  Service Deployment Management
             </h3>
             <DeploymentInfomation deployment={deployment} />
-            <DeploymentVariables variables={deployment.variables} />
+            <DeploymentVariables variables={deployment.inputVariables} />
         </>
     );
 }

src/components/content/deployment/DeploymentVariables.tsx

@@ -8,10 +8,10 @@ import { ColumnsType } from 'antd/es/table';
 import React from 'react';
 import catalogStyles from '../../../styles/catalog.module.css';
 import deploymentVariablesStyles from '../../../styles/deployment-variables.module.css';
-import { deployResourceKind, DeployVariable, sensitiveScope } from '../../../xpanse-api/generated';
+import { deployResourceKind, InputVariable, sensitiveScope } from '../../../xpanse-api/generated';
 
-function DeploymentVariables({ variables }: { variables: DeployVariable[] }): React.JSX.Element {
-    const columns: ColumnsType<DeployVariable> = [
+function DeploymentVariables({ variables }: { variables: InputVariable[] }): React.JSX.Element {
+    const columns: ColumnsType<InputVariable> = [
         {
             title: <div className={deploymentVariablesStyles.variablesColumns}>Name</div>,
             dataIndex: 'name',
@@ -43,7 +43,7 @@ function DeploymentVariables({ variables }: { variables: DeployVariable[] }): Re
         {
             title: <div className={deploymentVariablesStyles.variablesColumns}>Description</div>,
             dataIndex: 'description',
-            render: (_text: string, record: DeployVariable) => {
+            render: (_text: string, record: InputVariable) => {
                 return (
                     <Popover
                         content={
@@ -88,7 +88,7 @@ function DeploymentVariables({ variables }: { variables: DeployVariable[] }): Re
         {
             title: <div className={deploymentVariablesStyles.variablesColumns}>ValueSchema</div>,
             dataIndex: 'valueSchema',
-            render: (_text: string, record: DeployVariable) => {
+            render: (_text: string, record: InputVariable) => {
                 if (!record.valueSchema) {
                     return '';
                 }

src/components/content/order/formDataHelpers/deployParamsHelper.ts

@@ -56,7 +56,7 @@ export const getDeployParams = (
     };
 
     if (service !== undefined) {
-        for (const param of service.variables) {
+        for (const param of service.inputVariables) {
             props.params.push({
                 name: param.name,
                 kind: param.kind,

src/components/content/order/formDataHelpers/modifyParamsHelper.ts

@@ -3,10 +3,10 @@
  * SPDX-FileCopyrightText: Huawei Inc.
  */
 
-import { DeployVariable, sensitiveScope } from '../../../../xpanse-api/generated';
+import { InputVariable, sensitiveScope } from '../../../../xpanse-api/generated';
 import { DeployParam } from '../types/DeployParam';
 
-export const getModifyParams = (variables: DeployVariable[]): DeployParam[] => {
+export const getModifyParams = (variables: InputVariable[]): DeployParam[] => {
     const params: DeployParam[] = [];
 
     if (variables.length > 0) {

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

@@ -13,7 +13,7 @@ import serviceOrderStyles from '../../../../styles/service-order.module.css';
 import {
     csp,
     DeployedServiceDetails,
-    DeployVariable,
+    InputVariable,
     modify,
     type ModifyData,
     ModifyRequest,
@@ -40,14 +40,14 @@ export const Modify = ({
     const [form] = Form.useForm();
     const { Paragraph } = Typography;
     let getParams: DeployParam[] = [];
-    let getVariables: DeployVariable[] = [];
+    let getVariables: InputVariable[] = [];
 
     const [modifyWarning, setModifyWarning] = useState<React.JSX.Element[]>([]);
 
     const [isShowModifyingResult, setIsShowModifyingResult] = useState<boolean>(false);
     const [modifyStatus, setModifyStatus] = useState<serviceDeploymentState | undefined>(undefined);
     const [cacheFormVariable] = useOrderFormStore((state) => [state.addDeployVariable]);
-    const [storedDeployVariables] = useOrderFormStore((state) => [state.deployParams]);
+    const [storedInputVariables] = useOrderFormStore((state) => [state.deployParams]);
 
     const orderableServiceDetailsQuery = useGetOrderableServiceDetails(currentSelectedService.serviceTemplateId);
     const modifyServiceRequest = useMutation({
@@ -67,13 +67,13 @@ export const Modify = ({
 
     const hasVariableChanged: () => boolean = () => {
         const prevParamsString = JSON.stringify(getExistingServiceParameters(currentSelectedService));
-        const newParamsString = JSON.stringify(storedDeployVariables);
+        const newParamsString = JSON.stringify(storedInputVariables);
         return prevParamsString !== newParamsString;
     };
 
     if (orderableServiceDetailsQuery.isSuccess) {
-        getParams = getModifyParams(orderableServiceDetailsQuery.data.variables);
-        getVariables = orderableServiceDetailsQuery.data.variables;
+        getParams = getModifyParams(orderableServiceDetailsQuery.data.inputVariables);
+        getVariables = orderableServiceDetailsQuery.data.inputVariables;
     }
 
     const onFinish = () => {
@@ -124,7 +124,7 @@ export const Modify = ({
     const onClickModify = () => {
         const modifiedKeys = getModifiedProperties(
             getExistingServiceParameters(currentSelectedService),
-            storedDeployVariables
+            storedInputVariables
         );
         if (modifiedKeys.length > 0) {
             const warnings: React.JSX.Element[] = [];

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

@@ -80,7 +80,7 @@ export const Scale = ({
             );
             isDowngradeAllowed = orderableServiceDetailsQuery.data.flavors.isDowngradeAllowed;
         }
-        getParams = getModifyParams(orderableServiceDetailsQuery.data.variables);
+        getParams = getModifyParams(orderableServiceDetailsQuery.data.inputVariables);
     }
 
     const onFinish = () => {