show billingmode and region for myservices.

src/components/content/deployedServices/common/DeployedBillingMode.tsx

@@ -0,0 +1,44 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ * SPDX-FileCopyrightText: Huawei Inc.
+ */
+
+import { Tag } from 'antd';
+import React from 'react';
+import myServicesStyle from '../../../../styles/my-services.module.css';
+import { billingMode } from '../../../../xpanse-api/generated';
+
+export function DeployedBillingMode({
+    currentBillingMode,
+    className,
+}: {
+    currentBillingMode: billingMode;
+    className?: string | undefined;
+}): React.JSX.Element {
+    switch (currentBillingMode) {
+        case billingMode.PAY_PER_USE:
+            return (
+                <div className={className}>
+                    <Tag bordered={false} color='magenta' className={myServicesStyle.myServiceStatusSize}>
+                        {currentBillingMode.valueOf()}
+                    </Tag>
+                </div>
+            );
+        case billingMode.FIXED:
+            return (
+                <div className={className}>
+                    <Tag bordered={false} color='cyan' className={myServicesStyle.myServiceStatusSize}>
+                        {currentBillingMode.valueOf()}
+                    </Tag>
+                </div>
+            );
+        default:
+            return (
+                <div className={className}>
+                    <Tag color='warning' className={myServicesStyle.myServiceStatusSize}>
+                        {currentBillingMode}
+                    </Tag>
+                </div>
+            );
+    }
+}

src/components/content/deployedServices/common/DeployedRegion.tsx

@@ -0,0 +1,25 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ * SPDX-FileCopyrightText: Huawei Inc.
+ */
+
+import { Tag } from 'antd';
+import React from 'react';
+import myServicesStyle from '../../../../styles/my-services.module.css';
+import { Region } from '../../../../xpanse-api/generated';
+
+export function DeployedRegion({
+    currentRegion,
+    className,
+}: {
+    currentRegion: Region;
+    className?: string | undefined;
+}): React.JSX.Element {
+    return (
+        <div className={className}>
+            <Tag bordered={false} color='magenta' className={myServicesStyle.myServiceStatusSize}>
+                {currentRegion.area + '(' + currentRegion.name + currentRegion.site + ')'}
+            </Tag>
+        </div>
+    );
+}

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

@@ -28,17 +28,19 @@ import appStyles from '../../../../styles/app.module.css';
 import myServicesStyles from '../../../../styles/my-services.module.css';
 import tableStyles from '../../../../styles/table.module.css';
 import {
-    DeployedService,
-    DeployedServiceDetails,
-    ServiceProviderContactDetails,
-    VendorHostedDeployedServiceDetails,
+    billingMode,
     category,
     csp,
+    DeployedService,
+    DeployedServiceDetails,
     name,
+    Region,
     serviceDeploymentState,
     serviceHostingType,
+    ServiceProviderContactDetails,
     serviceState,
     taskStatus,
+    VendorHostedDeployedServiceDetails,
 } from '../../../../xpanse-api/generated';
 import { sortVersionNum } from '../../../utils/Sort';
 import { serviceIdQuery, serviceStateQuery } from '../../../utils/constants';
@@ -70,6 +72,8 @@ import StopServiceStatusAlert from '../../order/serviceState/stop/StopServiceSta
 import { useServiceStateStopQuery } from '../../order/serviceState/stop/useServiceStateStopQuery';
 import { useServiceDetailsByServiceStatePollingQuery } from '../../order/serviceState/useServiceDetailsByServiceStatePollingQuery';
 import { useOrderFormStore } from '../../order/store/OrderFormStore';
+import { DeployedBillingMode } from '../common/DeployedBillingMode.tsx';
+import { DeployedRegion } from '../common/DeployedRegion.tsx';
 import DeployedServicesError from '../common/DeployedServicesError';
 import { DeployedServicesHostingType } from '../common/DeployedServicesHostingType';
 import { DeployedServicesRunningStatus } from '../common/DeployedServicesRunningStatus';
@@ -87,6 +91,7 @@ function MyServices(): React.JSX.Element {
     let serviceVoList: DeployedService[] = [];
     let versionFilters: ColumnFilterItem[] = [];
     let serviceHostingTypeFilters: ColumnFilterItem[] = [];
+    let serviceBillingModeFilters: ColumnFilterItem[] = [];
     let nameFilters: ColumnFilterItem[] = [];
     let customerServiceNameFilters: ColumnFilterItem[] = [];
     let categoryFilters: ColumnFilterItem[] = [];
@@ -206,6 +211,7 @@ function MyServices(): React.JSX.Element {
         updateServiceStateFilters();
         updateCustomerServiceNameFilters(listDeployedServicesQuery.data);
         updateServiceHostingFilters();
+        updateBillingModeFilters();
     }
 
     const getTooltipWhenDetailsDisabled = (
@@ -853,6 +859,22 @@ function MyServices(): React.JSX.Element {
                 <DeployedServicesHostingType currentServiceHostingType={serviceHostingType} />
             ),
         },
+        {
+            title: 'BillingMode',
+            dataIndex: 'billingMode',
+            filters: serviceBillingModeFilters,
+            filterMode: 'tree',
+            filterSearch: true,
+            onFilter: (value: React.Key | boolean, record) => record.billingMode.startsWith(value.toString()),
+            align: 'center',
+            render: (billingMode: billingMode) => <DeployedBillingMode currentBillingMode={billingMode} />,
+        },
+        {
+            title: 'Region',
+            dataIndex: 'region',
+            align: 'center',
+            render: (region: Region) => <DeployedRegion currentRegion={region} />,
+        },
         {
             title: 'Csp',
             dataIndex: 'csp',
@@ -1221,6 +1243,18 @@ function MyServices(): React.JSX.Element {
         serviceHostingTypeFilters = filters;
     }
 
+    function updateBillingModeFilters(): void {
+        const filters: ColumnFilterItem[] = [];
+        Object.values(billingMode).forEach((billingMode) => {
+            const filter = {
+                text: billingMode,
+                value: billingMode,
+            };
+            filters.push(filter);
+        });
+        serviceBillingModeFilters = filters;
+    }
+
     function refreshData(): void {
         clearFormVariables();
         setIsPurgeRequestSubmitted(false);