move deployment information from basic information block.

eclipse-xpanse · Oct 11, 2024 · 1be91fe · 1be91fe
1 parent 12ac07b
commit 1be91fe
Show file tree

Hide file tree

Showing 14 changed files with 492 additions and 38 deletions.
diff --git a/public/openTofu.png b/public/openTofu.png
diff --git a/public/terraform.svg b/public/terraform.svg
diff --git a/src/components/content/catalog/services/details/ServiceDetail.tsx b/src/components/content/catalog/services/details/ServiceDetail.tsx
@@ -3,7 +3,7 @@
  * SPDX-FileCopyrightText: Huawei Inc.
  */
 
-import { GlobalOutlined, InfoCircleOutlined } from '@ant-design/icons';
+import { GlobalOutlined, InfoCircleOutlined, ProfileOutlined } from '@ant-design/icons';
 import { Descriptions, Tag } from 'antd';
 import React from 'react';
 import { createSearchParams, useNavigate } from 'react-router-dom';
@@ -25,10 +25,12 @@ import { AgreementText } from '../../../common/ocl/AgreementText';
 import { BillingText } from '../../../common/ocl/BillingText';
 import { ContactDetailsShowType } from '../../../common/ocl/ContactDetailsShowType';
 import { ContactDetailsText } from '../../../common/ocl/ContactDetailsText';
+import { DeploymentScriptText } from '../../../common/ocl/DeploymentScript.tsx';
 import { DeploymentText } from '../../../common/ocl/DeploymentText';
 import { FlavorsText } from '../../../common/ocl/FlavorsText';
 import { RegionText } from '../../../common/ocl/RegionText.tsx';
 import useDeployedServicesByIsvQuery from '../../../deployedServices/myServices/query/useDeployedServiceByIsvQuery';
+import DeploymentVariables from '../../../deploymentVariables/DeploymentVariables.tsx';
 import { ShowIcon } from './ShowIcon';
 
 function ServiceDetail({ serviceDetails }: { serviceDetails: ServiceTemplateDetailVo }): React.JSX.Element {
@@ -126,9 +128,6 @@ function ServiceDetail({ serviceDetails }: { serviceDetails: ServiceTemplateDeta
                     />
                 </Descriptions.Item>
                 <Descriptions.Item label='CredentialType'>{serviceDetails.deployment.credentialType}</Descriptions.Item>
-                <Descriptions.Item label='Deployment'>
-                    <DeploymentText deployment={serviceDetails.deployment} />
-                </Descriptions.Item>
                 <Descriptions.Item label='Billing Modes'>
                     <BillingText billing={serviceDetails.billing} />
                 </Descriptions.Item>
@@ -155,6 +154,33 @@ function ServiceDetail({ serviceDetails }: { serviceDetails: ServiceTemplateDeta
                     <></>
                 )}
             </Descriptions>
+            <h3 className={catalogStyles.catalogDetailsH3}>
+                <ProfileOutlined />
+                &nbsp;Deployment Information
+            </h3>
+            <Descriptions column={2} bordered className={catalogStyles.catalogDeploymentInfoTable}>
+                <Descriptions.Item label='Kind'>
+                    {
+                        <img
+                            src={
+                                serviceDetails.deployment.deployerTool.kind.valueOf() === 'terraform'
+                                    ? '/terraform.svg'
+                                    : '/openTofu.png'
+                            }
+                            alt={serviceDetails.deployment.deployerTool.kind}
+                            className={catalogStyles.catalogDisplayDeploymentKind}
+                        />
+                    }
+                </Descriptions.Item>
+                <Descriptions.Item label='Version'>{serviceDetails.deployment.deployerTool.version}</Descriptions.Item>
+                <Descriptions.Item label='Service Availability Configs'>
+                    <DeploymentText deployment={serviceDetails.deployment} />
+                </Descriptions.Item>
+                <Descriptions.Item label='Deployment Script'>
+                    <DeploymentScriptText deployment={serviceDetails.deployment} />
+                </Descriptions.Item>
+            </Descriptions>
+            <DeploymentVariables variables={serviceDetails.deployment.variables} />
             <FlavorsText flavors={serviceDetails.flavors.serviceFlavors} />
         </>
     );

diff --git a/src/components/content/common/ocl/DeploymentScript.tsx b/src/components/content/common/ocl/DeploymentScript.tsx
@@ -0,0 +1,32 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ * SPDX-FileCopyrightText: Huawei Inc.
+ */
+
+import { Button, Popover } from 'antd';
+import React from 'react';
+import YAML from 'yaml';
+import oclDisplayStyles from '../../../../styles/ocl-display.module.css';
+import { Deployment } from '../../../../xpanse-api/generated';
+
+export function DeploymentScriptText({ deployment }: { deployment: Deployment }): React.JSX.Element {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (deployment) {
+        const yamlDocument = new YAML.Document();
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        yamlDocument.contents = deployment.deployer;
+        return (
+            <Popover
+                content={<pre className={oclDisplayStyles.oclDeploymentScript}>{yamlDocument.toString()}</pre>}
+                title={'Deployment Script'}
+                trigger='hover'
+            >
+                <Button className={oclDisplayStyles.oclDataHover} type={'link'}>
+                    {'scripts'}
+                </Button>
+            </Popover>
+        );
+    }
+    return <></>;
+}
diff --git a/src/components/content/common/ocl/DeploymentText.tsx b/src/components/content/common/ocl/DeploymentText.tsx
@@ -15,15 +15,15 @@ export function DeploymentText({ deployment }: { deployment: Deployment }): Reac
         const yamlDocument = new YAML.Document();
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-expect-error
-        yamlDocument.contents = deployment;
+        yamlDocument.contents = deployment.serviceAvailabilityConfigs;
         return (
             <Popover
                 content={<pre className={oclDisplayStyles.oclDeploymentScript}>{yamlDocument.toString()}</pre>}
-                title={'Deployment'}
+                title={'Service Availability Configs'}
                 trigger='hover'
             >
                 <Button className={oclDisplayStyles.oclDataHover} type={'link'}>
-                    {deployment.deployerTool.kind}
+                    {`configs`}
                 </Button>
             </Popover>
         );

diff --git a/src/components/content/common/ocl/DisplayOclData.tsx b/src/components/content/common/ocl/DisplayOclData.tsx
@@ -3,19 +3,21 @@
  * SPDX-FileCopyrightText: Huawei Inc.
  */
 
-import { GlobalOutlined } from '@ant-design/icons';
+import { GlobalOutlined, ProfileOutlined } from '@ant-design/icons';
 import { InfoCircleOutlined } from '@ant-design/icons/lib/icons';
 import { Descriptions, Image, Tag, Tooltip, Typography } from 'antd';
 import React from 'react';
 import catalogStyles from '../../../../styles/catalog.module.css';
 import oclDisplayStyles from '../../../../styles/ocl-display.module.css';
 import { Ocl, serviceHostingType } from '../../../../xpanse-api/generated';
 import { DeployedServicesHostingType } from '../../deployedServices/common/DeployedServicesHostingType';
+import DeploymentVariables from '../../deploymentVariables/DeploymentVariables.tsx';
 import { cspMap } from '../csp/CspLogo';
 import { AgreementText } from './AgreementText';
 import { BillingText } from './BillingText';
 import { ContactDetailsShowType } from './ContactDetailsShowType';
 import { ContactDetailsText } from './ContactDetailsText';
+import { DeploymentScriptText } from './DeploymentScript.tsx';
 import { DeploymentText } from './DeploymentText';
 import { FlavorsText } from './FlavorsText.tsx';
 import { RegionText } from './RegionText.tsx';
@@ -105,9 +107,6 @@ function DisplayOclData({ ocl }: { ocl: Ocl }): React.JSX.Element | string {
                             <Descriptions.Item label='CredentialType'>
                                 {ocl.deployment.credentialType ? ocl.deployment.credentialType.valueOf() : ''}
                             </Descriptions.Item>
-                            <Descriptions.Item label='Deployment'>
-                                <DeploymentText deployment={ocl.deployment} />
-                            </Descriptions.Item>
                             <Descriptions.Item label='Contact Details'>
                                 <ContactDetailsText
                                     serviceProviderContactDetails={ocl.serviceProviderContactDetails}
@@ -118,6 +117,33 @@ function DisplayOclData({ ocl }: { ocl: Ocl }): React.JSX.Element | string {
                                 {ocl.eula ? <AgreementText eula={ocl.eula} /> : <span>Not Provided</span>}
                             </Descriptions.Item>
                         </Descriptions>
+                        <h3 className={catalogStyles.catalogDetailsH3}>
+                            <ProfileOutlined />
+                            &nbsp;Deployment Information
+                        </h3>
+                        <Descriptions column={2} bordered className={oclDisplayStyles.oclDataInfoTable}>
+                            <Descriptions.Item label='Kind'>
+                                {
+                                    <img
+                                        src={
+                                            ocl.deployment.deployerTool.kind.valueOf() === 'terraform'
+                                                ? '/terraform.svg'
+                                                : '/openTofu.png'
+                                        }
+                                        alt={ocl.deployment.deployerTool.kind}
+                                        className={oclDisplayStyles.oclDataDisplayDeploymentKind}
+                                    />
+                                }
+                            </Descriptions.Item>
+                            <Descriptions.Item label='Version'>{ocl.deployment.deployerTool.version}</Descriptions.Item>
+                            <Descriptions.Item label='Service Availability Configs'>
+                                <DeploymentText deployment={ocl.deployment} />
+                            </Descriptions.Item>
+                            <Descriptions.Item label='Deployment Script'>
+                                <DeploymentScriptText deployment={ocl.deployment} />
+                            </Descriptions.Item>
+                        </Descriptions>
+                        <DeploymentVariables variables={ocl.deployment.variables} />
                         <FlavorsText flavors={ocl.flavors.serviceFlavors} />
                     </div>
                 </div>