Add 'service hosting type' column to review service table

src/components/content/common/ocl/DisplayOclData.tsx

@@ -7,6 +7,7 @@ import { Descriptions, Image, Tag, Tooltip, Typography } from 'antd';
 import React from 'react';
 import oclDisplayStyles from '../../../../styles/ocl-display.module.css';
 import { Ocl } from '../../../../xpanse-api/generated';
+import { DeployedServicesHostingType } from '../../deployedServices/common/DeployedServicesHostingType';
 import { cspMap } from '../csp/CspLogo';
 import { AgreementText } from './AgreementText';
 import { BillingText } from './BillingText';
@@ -76,9 +77,7 @@ function DisplayOclData({ ocl }: { ocl: Ocl }): React.JSX.Element | string {
                             <div>
                                 <b>Service Hosted By</b>
                                 <br />
-                                <Tag className={oclDisplayStyles.oclDisplayTag} color='red'>
-                                    {ocl.serviceHostingType.toString()}
-                                </Tag>
+                                {DeployedServicesHostingType(ocl.serviceHostingType)}
                                 <br />
                                 <br />
                             </div>

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

@@ -18,7 +18,7 @@ export function DeployedServicesHostingType(serviceHostingType: DeployedService.
             );
         case DeployedService.serviceHostingType.SELF:
             return (
-                <Tag bordered={false} color='geekblue' className={myServicesStyle.myServiceStatusSize}>
+                <Tag bordered={false} color='cyan' className={myServicesStyle.myServiceStatusSize}>
                     {serviceHostingType.valueOf()}
                 </Tag>
             );

src/components/content/review/ServiceReviews.tsx

@@ -12,6 +12,7 @@ import serviceReviewStyles from '../../../styles/service-review.module.css';
 import tableStyles from '../../../styles/table.module.css';
 import { Deployment, ServiceTemplateDetailVo } from '../../../xpanse-api/generated';
 import { ServiceTemplateRegisterStatus } from '../common/catalog/ServiceTemplateRegisterStatus.tsx';
+import { DeployedServicesHostingType } from '../deployedServices/common/DeployedServicesHostingType';
 import GetServiceTemplatesListError from './GetServiceTemplatesListError';
 import { ServiceReviewsDetails } from './ServiceReviewsDetails';
 import useListAllServiceTemplatesQuery from './query/useListAllServiceTemplatesQuery';
@@ -21,6 +22,7 @@ export default function ServiceReviews(): React.JSX.Element {
     let versionFilters: ColumnFilterItem[] = [];
     let cspFilters: ColumnFilterItem[] = [];
     let categoryFilters: ColumnFilterItem[] = [];
+    let serviceHostingTypeFilters: ColumnFilterItem[] = [];
     let registrationStatusFilters: ColumnFilterItem[] = [];
     let deployerTypeFilters: ColumnFilterItem[] = [];
     let serviceTemplateList: ServiceTemplateDetailVo[] = [];
@@ -31,6 +33,18 @@ export default function ServiceReviews(): React.JSX.Element {
 
     const allServiceTemplatesListQuery = useListAllServiceTemplatesQuery();
 
+    const getServiceHostingTypeFilters = (): void => {
+        const filters: ColumnFilterItem[] = [];
+        Object.values(ServiceTemplateDetailVo.serviceHostingType).forEach((serviceHostingType) => {
+            const filter = {
+                text: serviceHostingType,
+                value: serviceHostingType,
+            };
+            filters.push(filter);
+        });
+        serviceHostingTypeFilters = filters;
+    };
+
     const getCspFilters = (): void => {
         const filters: ColumnFilterItem[] = [];
         Object.values(ServiceTemplateDetailVo.csp).forEach((csp) => {
@@ -114,6 +128,7 @@ export default function ServiceReviews(): React.JSX.Element {
         serviceTemplateList = allServiceTemplatesListQuery.data;
         getServiceNameFilters(allServiceTemplatesListQuery.data);
         getVersionFilters(allServiceTemplatesListQuery.data);
+        getServiceHostingTypeFilters();
         getCspFilters();
         getCategoryFilters();
         getRegistrationStatusFilters();
@@ -177,6 +192,15 @@ export default function ServiceReviews(): React.JSX.Element {
             },
             align: 'left',
         },
+        {
+            title: 'Category',
+            dataIndex: 'category',
+            filters: categoryFilters,
+            filterMode: 'tree',
+            filterSearch: true,
+            onFilter: (value: React.Key | boolean, record) => record.category.startsWith(value.toString()),
+            align: 'left',
+        },
         {
             title: 'Service Name',
             dataIndex: 'name',
@@ -217,26 +241,14 @@ export default function ServiceReviews(): React.JSX.Element {
             align: 'left',
         },
         {
-            title: 'Category',
-            dataIndex: 'category',
-            filters: categoryFilters,
-            filterMode: 'tree',
-            filterSearch: true,
-            onFilter: (value: React.Key | boolean, record) => record.category.startsWith(value.toString()),
-            align: 'left',
-        },
-        {
-            title: 'Registration Status',
-            dataIndex: 'serviceRegistrationState',
-            filters: registrationStatusFilters,
+            title: 'Service Hosting Type',
+            dataIndex: 'serviceHostingType',
+            filters: serviceHostingTypeFilters,
             filterMode: 'tree',
             filterSearch: true,
-            onFilter: (value: React.Key | boolean, record) =>
-                record.serviceRegistrationState.startsWith(value.toString()),
+            onFilter: (value: React.Key | boolean, record) => record.serviceHostingType.startsWith(value.toString()),
             align: 'left',
-            render: (serviceRegistrationState: ServiceTemplateDetailVo.serviceRegistrationState) => (
-                <ServiceTemplateRegisterStatus serviceRegistrationState={serviceRegistrationState} />
-            ),
+            render: (value: ServiceTemplateDetailVo.serviceHostingType) => DeployedServicesHostingType(value),
         },
         {
             title: 'Deployer Type',
@@ -257,6 +269,19 @@ export default function ServiceReviews(): React.JSX.Element {
                     </Tag>
                 ),
         },
+        {
+            title: 'Registration Status',
+            dataIndex: 'serviceRegistrationState',
+            filters: registrationStatusFilters,
+            filterMode: 'tree',
+            filterSearch: true,
+            onFilter: (value: React.Key | boolean, record) =>
+                record.serviceRegistrationState.startsWith(value.toString()),
+            align: 'left',
+            render: (serviceRegistrationState: ServiceTemplateDetailVo.serviceRegistrationState) => (
+                <ServiceTemplateRegisterStatus serviceRegistrationState={serviceRegistrationState} />
+            ),
+        },
         {
             title: 'Operation',
             dataIndex: 'operation',