Skip to content

Commit

Permalink
Changes to ISV view in UI to show current status of the service template
Browse files Browse the repository at this point in the history
  • Loading branch information
@WangLiNaruto
WangLiNaruto committed Dec 9, 2024
1 parent d34bfb5 commit ce97006
Show file tree
Hide file tree
Showing 13 changed files with 1,328 additions and 1,047 deletions.
12 changes: 5 additions & 7 deletions src/components/content/catalog/services/delete/DeleteService.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,19 @@ import { CloseCircleOutlined } from '@ant-design/icons';
import { Button, Popconfirm } from 'antd';
import React from 'react';
import catalogStyles from '../../../../../styles/catalog.module.css';
import { serviceTemplateRegistrationState } from '../../../../../xpanse-api/generated';
import { useGetReRegisterMutationState } from '../re-register/ReRegisterMutation';
import { ServiceTemplateDetailVo } from '../../../../../xpanse-api/generated';
import { useDeleteRequest } from './DeleteServiceMutation';

function DeleteService({
id,
setIsViewDisabled,
serviceRegistrationStatus,
activeServiceDetail,
}: {
id: string;
setIsViewDisabled: (isViewDisabled: boolean) => void;
serviceRegistrationStatus: serviceTemplateRegistrationState;
activeServiceDetail: ServiceTemplateDetailVo;
}): React.JSX.Element {
const deleteRequest = useDeleteRequest(id);
const reRegisterState = useGetReRegisterMutationState(id);

const deleteService = () => {
setIsViewDisabled(true);
Expand All @@ -45,8 +43,8 @@ function DeleteService({
className={catalogStyles.catalogManageBtnClass}
disabled={
deleteRequest.isSuccess ||
(reRegisterState.length > 0 && reRegisterState[0].status === 'success') ||
serviceRegistrationStatus !== serviceTemplateRegistrationState.IN_REVIEW
activeServiceDetail.availableInCatalog ||
activeServiceDetail.serviceTemplateRegistrationState === 'approved'
}
>
Delete
Expand Down
122 changes: 91 additions & 31 deletions src/components/content/catalog/services/details/ServiceProvider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@
* SPDX-FileCopyrightText: Huawei Inc.
*/

import { EnvironmentOutlined } from '@ant-design/icons';
import { Empty, Image, Tabs } from 'antd';
import { Badge, Empty, Image, Tabs } from 'antd';
import { Tab } from 'rc-tabs/lib/interface';
import React, { useMemo } from 'react';
import { createSearchParams, useNavigate, useSearchParams } from 'react-router-dom';
Expand All @@ -29,16 +28,14 @@ import {
import { cspMap } from '../../../common/csp/CspLogo';
import { DeleteResult } from '../delete/DeleteResult';
import DeleteService from '../delete/DeleteService';
import { ServicePolicies } from '../policies/ServicePolicies';
import { useReRegisterRequest } from '../re-register/ReRegisterMutation';
import { ReRegisterResult } from '../re-register/ReRegisterResult';
import ReRegisterService from '../re-register/ReRegisterService';
import { UnregisterResult } from '../unregister/UnregisterResult';
import UnregisterService from '../unregister/UnregisterService';
import UpdateService from '../update/UpdateService';
import ServiceDetail from './ServiceDetail';
import { ServiceHostingOptions } from './ServiceHostingOptions';
import { ServiceProviderSkeleton } from './ServiceProviderSkeleton';
import ServiceTemplateDetails from './ServiceTemplateDetails';

function ServiceProvider({
categoryOclData,
Expand Down Expand Up @@ -209,46 +206,109 @@ function ServiceProvider({
id={activeServiceDetail.serviceTemplateId}
category={category}
isViewDisabled={isViewDisabled}
activeServiceDetail={activeServiceDetail}
/>
<UnregisterService
id={activeServiceDetail.serviceTemplateId}
setIsViewDisabled={setIsViewDisabled}
serviceRegistrationStatus={
activeServiceDetail.serviceTemplateRegistrationState as serviceTemplateRegistrationState
}
availableInCatalog={activeServiceDetail.availableInCatalog}
/>
<ReRegisterService
id={activeServiceDetail.serviceTemplateId}
setIsViewDisabled={setIsViewDisabled}
reRegisterRequest={reRegisterRequest}
serviceRegistrationStatus={
activeServiceDetail.serviceTemplateRegistrationState as serviceTemplateRegistrationState
}
activeServiceDetail={activeServiceDetail}
/>
<DeleteService
id={activeServiceDetail.serviceTemplateId}
setIsViewDisabled={setIsViewDisabled}
serviceRegistrationStatus={
activeServiceDetail.serviceTemplateRegistrationState as serviceTemplateRegistrationState
}
activeServiceDetail={activeServiceDetail}
/>
</div>
<h3 className={catalogStyles.catalogDetailsH3}>
<EnvironmentOutlined />
&nbsp;Service Hosting Options
</h3>
<ServiceHostingOptions
serviceTemplateDetailVos={groupServiceTemplatesByCsp.get(serviceCspInQuery) ?? []}
defaultDisplayedService={activeServiceDetail}
serviceHostingTypeInQuery={serviceHostingTypeInQuery}
updateServiceHostingType={onChangeServiceHostingType}
/>
<ServiceDetail serviceDetails={activeServiceDetail} />
<ServicePolicies
key={activeServiceDetail.serviceTemplateId}
serviceDetails={activeServiceDetail}
isViewDisabled={isViewDisabled}
/>
{(activeServiceDetail.serviceTemplateRegistrationState === 'in-review' ||
activeServiceDetail.serviceTemplateRegistrationState === 'approved') &&
!activeServiceDetail.availableInCatalog ? (
<Badge.Ribbon
placement={'start'}
text={<div className={catalogStyles.serviceTemplateState}>Review In-Progress</div>}
color='#e67300'
>
<ServiceTemplateDetails
isViewDisabled={isViewDisabled}
serviceDetails={activeServiceDetail}
groupServiceTemplatesByCsp={groupServiceTemplatesByCsp}
serviceCspInQuery={serviceCspInQuery}
serviceHostingTypeInQuery={serviceHostingTypeInQuery}
onChangeServiceHostingType={onChangeServiceHostingType}
/>
</Badge.Ribbon>
) : activeServiceDetail.serviceTemplateRegistrationState === 'approved' &&
activeServiceDetail.availableInCatalog ? (
<Badge.Ribbon
placement={'start'}
text={<div>Available In Catalog</div>}
color='#87d068'
>
<ServiceTemplateDetails
isViewDisabled={isViewDisabled}
serviceDetails={activeServiceDetail}
groupServiceTemplatesByCsp={groupServiceTemplatesByCsp}
serviceCspInQuery={serviceCspInQuery}
serviceHostingTypeInQuery={serviceHostingTypeInQuery}
onChangeServiceHostingType={onChangeServiceHostingType}
/>
</Badge.Ribbon>
) : activeServiceDetail.serviceTemplateRegistrationState === 'approved' &&
!activeServiceDetail.availableInCatalog &&
!activeServiceDetail.isUpdatePending ? (
<Badge.Ribbon
placement={'start'}
text={<div>Not Available in Catalog</div>}
color='#cd201f'
>
<ServiceTemplateDetails
isViewDisabled={isViewDisabled}
serviceDetails={activeServiceDetail}
groupServiceTemplatesByCsp={groupServiceTemplatesByCsp}
serviceCspInQuery={serviceCspInQuery}
serviceHostingTypeInQuery={serviceHostingTypeInQuery}
onChangeServiceHostingType={onChangeServiceHostingType}
/>
</Badge.Ribbon>
) : activeServiceDetail.serviceTemplateRegistrationState === 'rejected' &&
!activeServiceDetail.availableInCatalog &&
activeServiceDetail.isUpdatePending ? (
<Badge.Ribbon
placement={'start'}
text={<div className={catalogStyles.serviceTemplateState}>Review In-Progress</div>}
color='#e67300'
>
<ServiceTemplateDetails
isViewDisabled={isViewDisabled}
serviceDetails={activeServiceDetail}
groupServiceTemplatesByCsp={groupServiceTemplatesByCsp}
serviceCspInQuery={serviceCspInQuery}
serviceHostingTypeInQuery={serviceHostingTypeInQuery}
onChangeServiceHostingType={onChangeServiceHostingType}
/>
</Badge.Ribbon>
) : activeServiceDetail.serviceTemplateRegistrationState === 'approved' &&
activeServiceDetail.availableInCatalog &&
activeServiceDetail.isUpdatePending ? (
<Badge.Ribbon
placement={'start'}
text={<div>Available In Catalog</div>}
color='#87d068'
>
<ServiceTemplateDetails
isViewDisabled={isViewDisabled}
serviceDetails={activeServiceDetail}
groupServiceTemplatesByCsp={groupServiceTemplatesByCsp}
serviceCspInQuery={serviceCspInQuery}
serviceHostingTypeInQuery={serviceHostingTypeInQuery}
onChangeServiceHostingType={onChangeServiceHostingType}
/>
</Badge.Ribbon>
) : null}
</>
) : (
// Necessary when user manually enters wrong details in the URL query parameters.
Expand Down
17 changes: 6 additions & 11 deletions ...atalog/services/details/ServiceDetail.tsx → ...es/details/ServiceTemplateBasicDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,9 @@ import {
DeployedService,
serviceDeploymentState,
ServiceTemplateDetailVo,
serviceTemplateRegistrationState,
} from '../../../../../xpanse-api/generated';
import { useCurrentUserRoleStore } from '../../../../layouts/header/useCurrentRoleStore';
import { reportsRoute } from '../../../../utils/constants';
import { ServiceTemplateRegisterStatus } from '../../../common/catalog/ServiceTemplateRegisterStatus.tsx';
import { ApiDoc } from '../../../common/doc/ApiDoc';
import { AgreementText } from '../../../common/ocl/AgreementText';
import { BillingText } from '../../../common/ocl/BillingText';
Expand All @@ -32,7 +30,11 @@ import DeploymentManagement from '../../../deployment/DeploymentManagement';
import ServiceConfigManagement from '../../../serviceConfigurationManage/ServiceConfigManagement';
import { ShowIcon } from './ShowIcon';

function ServiceDetail({ serviceDetails }: { serviceDetails: ServiceTemplateDetailVo }): React.JSX.Element {
function ServiceTemplateBasicDetail({
serviceDetails,
}: {
serviceDetails: ServiceTemplateDetailVo;
}): React.JSX.Element {
const currentRole = useCurrentUserRoleStore((state) => state.currentUserRole);
const navigate = useNavigate();
let numberOfActiveServiceDeployments: number = 0;
Expand Down Expand Up @@ -121,13 +123,6 @@ function ServiceDetail({ serviceDetails }: { serviceDetails: ServiceTemplateDeta
</Descriptions.Item>
<Descriptions.Item label='Register Time'>{serviceDetails.createTime}</Descriptions.Item>
<Descriptions.Item label='Update Time'>{serviceDetails.lastModifiedTime}</Descriptions.Item>
<Descriptions.Item label='Status'>
<ServiceTemplateRegisterStatus
serviceRegistrationStatus={
serviceDetails.serviceTemplateRegistrationState as serviceTemplateRegistrationState
}
/>
</Descriptions.Item>
<Descriptions.Item label='CredentialType'>{serviceDetails.deployment.credentialType}</Descriptions.Item>
<Descriptions.Item label='Billing Modes'>
<BillingText billing={serviceDetails.billing} />
Expand Down Expand Up @@ -164,4 +159,4 @@ function ServiceDetail({ serviceDetails }: { serviceDetails: ServiceTemplateDeta
);
}

export default ServiceDetail;
export default ServiceTemplateBasicDetail;
48 changes: 48 additions & 0 deletions src/components/content/catalog/services/details/ServiceTemplateDetails.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import { EnvironmentOutlined } from '@ant-design/icons';
import { Card } from 'antd';
import React from 'react';
import catalogStyles from '../../../../../styles/catalog.module.css';
import { ServiceTemplateDetailVo } from '../../../../../xpanse-api/generated';
import { ServicePolicies } from '../policies/ServicePolicies';
import { ServiceHostingOptions } from './ServiceHostingOptions';
import ServiceTemplateBasicDetail from './ServiceTemplateBasicDetail';

function serviceTemplateDetails({
isViewDisabled,
serviceDetails,
groupServiceTemplatesByCsp,
serviceCspInQuery,
serviceHostingTypeInQuery,
onChangeServiceHostingType,
}: {
isViewDisabled: boolean;
serviceDetails: ServiceTemplateDetailVo;
groupServiceTemplatesByCsp: Map<string, ServiceTemplateDetailVo[]>;
serviceCspInQuery: string;
serviceHostingTypeInQuery: string;
onChangeServiceHostingType: (serviceTemplateDetailVo: ServiceTemplateDetailVo) => void;
}): React.JSX.Element {
return (
<>
<Card className={catalogStyles.serviceTemplateCard}>
<div className={catalogStyles.catalogDetailsH3}>
<EnvironmentOutlined />
&nbsp;Service Hosting Options
</div>
<ServiceHostingOptions
serviceTemplateDetailVos={groupServiceTemplatesByCsp.get(serviceCspInQuery) ?? []}
defaultDisplayedService={serviceDetails}
serviceHostingTypeInQuery={serviceHostingTypeInQuery}
updateServiceHostingType={onChangeServiceHostingType}
/>
<ServiceTemplateBasicDetail serviceDetails={serviceDetails} />
<ServicePolicies
key={serviceDetails.serviceTemplateId}
serviceDetails={serviceDetails}
isViewDisabled={isViewDisabled}
/>
</Card>
</>
);
}
export default serviceTemplateDetails;
14 changes: 5 additions & 9 deletions src/components/content/catalog/services/re-register/ReRegisterService.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,17 @@ import { UseMutationResult } from '@tanstack/react-query';
import { Button, Popconfirm } from 'antd';
import React from 'react';
import catalogStyles from '../../../../../styles/catalog.module.css';
import { ServiceTemplateDetailVo, serviceTemplateRegistrationState } from '../../../../../xpanse-api/generated';
import { useGetDeleteMutationState } from '../delete/DeleteServiceMutation';
import { ServiceTemplateDetailVo } from '../../../../../xpanse-api/generated';

function ReRegisterService({
id,
setIsViewDisabled,
reRegisterRequest,
serviceRegistrationStatus,
activeServiceDetail,
}: {
id: string;
setIsViewDisabled: (isViewDisabled: boolean) => void;
reRegisterRequest: UseMutationResult<ServiceTemplateDetailVo, Error, void>;
serviceRegistrationStatus: serviceTemplateRegistrationState;
activeServiceDetail: ServiceTemplateDetailVo;
}): React.JSX.Element {
const deleteState = useGetDeleteMutationState(id);
const reRegister = () => {
setIsViewDisabled(true);
reRegisterRequest.mutate();
Expand All @@ -45,8 +41,8 @@ function ReRegisterService({
className={catalogStyles.catalogManageBtnClass}
disabled={
reRegisterRequest.isSuccess ||
(deleteState.length > 0 && deleteState[0].status === 'success') ||
serviceRegistrationStatus !== serviceTemplateRegistrationState.IN_REVIEW
activeServiceDetail.availableInCatalog ||
activeServiceDetail.serviceTemplateRegistrationState !== 'approved'
}
>
Re-register
Expand Down
10 changes: 3 additions & 7 deletions src/components/content/catalog/services/unregister/UnregisterService.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,16 @@ import { MinusCircleOutlined } from '@ant-design/icons';
import { Button, Popconfirm } from 'antd';
import React from 'react';
import catalogStyles from '../../../../../styles/catalog.module.css';
import { serviceTemplateRegistrationState } from '../../../../../xpanse-api/generated';
import { useUnregisterRequest } from './UnregisterMutation';

function UnregisterService({
id,
setIsViewDisabled,
serviceRegistrationStatus,
availableInCatalog,
}: {
id: string;
setIsViewDisabled: (isViewDisabled: boolean) => void;
serviceRegistrationStatus: serviceTemplateRegistrationState;
availableInCatalog: boolean;
}): React.JSX.Element {
const unregisterRequest = useUnregisterRequest(id);

Expand All @@ -41,10 +40,7 @@ function UnregisterService({
icon={<MinusCircleOutlined />}
type='primary'
className={catalogStyles.catalogManageBtnClass}
disabled={
unregisterRequest.isSuccess ||
serviceRegistrationStatus === serviceTemplateRegistrationState.IN_REVIEW
}
disabled={unregisterRequest.isSuccess || !availableInCatalog}
>
Unregister
</Button>
Expand Down
Loading

0 comments on commit ce97006

Please sign in to comment.