show billingmode and region for myservices table.

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='volcano' className={myServicesStyle.myServiceStatusSize}>
+                        {currentBillingMode.valueOf()}
+                    </Tag>
+                </div>
+            );
+        case billingMode.FIXED:
+            return (
+                <div className={className}>
+                    <Tag bordered={false} color='blue' 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,42 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ * SPDX-FileCopyrightText: Huawei Inc.
+ */
+
+import { GlobalOutlined } from '@ant-design/icons';
+import { Popover, 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 {
+    const content = (
+        <div className={myServicesStyle.regionDisplayInline}>
+            <div className={myServicesStyle.regionSite}>
+                <h5>site: </h5>
+                &nbsp;&nbsp; <Tag color='purple'> {currentRegion.site}</Tag>
+            </div>
+            <div className={myServicesStyle.regionArea}>
+                <h5>area: </h5>
+                &nbsp;&nbsp; <Tag color='geekblue'>{currentRegion.area}</Tag>
+            </div>
+        </div>
+    );
+    return (
+        <div className={className}>
+            <Tag bordered={false} color='gold' className={myServicesStyle.myServiceStatusSize}>
+                {currentRegion.name}
+                {'  '}
+                <Popover content={content} trigger='hover'>
+                    <GlobalOutlined />
+                </Popover>
+            </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,8 @@ function MyServices(): React.JSX.Element {
     let serviceVoList: DeployedService[] = [];
     let versionFilters: ColumnFilterItem[] = [];
     let serviceHostingTypeFilters: ColumnFilterItem[] = [];
+    let serviceBillingModeFilters: ColumnFilterItem[] = [];
+    let serviceRegionNameFilters: ColumnFilterItem[] = [];
     let nameFilters: ColumnFilterItem[] = [];
     let customerServiceNameFilters: ColumnFilterItem[] = [];
     let categoryFilters: ColumnFilterItem[] = [];
@@ -206,6 +212,8 @@ function MyServices(): React.JSX.Element {
         updateServiceStateFilters();
         updateCustomerServiceNameFilters(listDeployedServicesQuery.data);
         updateServiceHostingFilters();
+        updateBillingModeFilters();
+        updateRegionFilters(listDeployedServicesQuery.data);
     }
 
     const getTooltipWhenDetailsDisabled = (
@@ -853,6 +861,26 @@ 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',
+            filters: serviceRegionNameFilters,
+            filterMode: 'tree',
+            filterSearch: true,
+            onFilter: (value: React.Key | boolean, record) => record.region.name.startsWith(value.toString()),
+            align: 'center',
+            render: (region: Region) => <DeployedRegion currentRegion={region} />,
+        },
         {
             title: 'Csp',
             dataIndex: 'csp',
@@ -1221,6 +1249,36 @@ 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 updateRegionFilters(resp: DeployedService[]): void {
+        const filters: ColumnFilterItem[] = [];
+        const regionNameSet = new Set<string>('');
+        resp.forEach((v) => {
+            if (v.region.name) {
+                regionNameSet.add(v.region.name);
+            }
+        });
+        regionNameSet.forEach((name) => {
+            const filter = {
+                text: name,
+                value: name,
+            };
+            filters.push(filter);
+        });
+        serviceRegionNameFilters = filters;
+    }
+
     function refreshData(): void {
         clearFormVariables();
         setIsPurgeRequestSubmitted(false);

src/styles/my-services.module.css

@@ -102,3 +102,15 @@
 .resource-properties-key {
     padding-top: 7px;
 }
+
+.region-display-inline {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+.region-area,
+.region-site {
+    display: flex;
+    align-items: center;
+}