Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Changes to ISV view in UI to show current status of the service template #1345

Closed
wants to merge 2 commits into from
+312 −142
Closed

Changes to ISV view in UI to show current status of the service template #1345

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1155580
Changes to ISV view in UI to show current status of the service template
WangLiNaruto Dec 10, 2024
21b3b44
Merge branch 'eclipse-xpanse:main' into feature/current_service_status
WangLiNaruto Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 5 additions & 7 deletions src/components/content/catalog/services/delete/DeleteService.tsx
View file
Open in desktop
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
143 changes: 111 additions & 32 deletions src/components/content/catalog/services/details/ServiceProvider.tsx
View file
Open in desktop
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 @@ -208,47 +205,129 @@ function ServiceProvider({
<UpdateService
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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

still the display is wrong when update review is in progress and the original template is still available in catalog. I see only 'review in progress'.

And more over, re-register button is enabled in this case. Which is also wrong.

image

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.isUpdatePending && activeServiceDetail.availableInCatalog ? (
<Badge.Ribbon
placement={'start'}
text={
<div className={catalogStyles.serviceTemplateState}>
Available in catalog <br />
Updated template review in progress.
</div>
}
color='#e67300'
>
<ServiceTemplateDetails
isViewDisabled={isViewDisabled}
serviceDetails={activeServiceDetail}
groupServiceTemplatesByCsp={groupServiceTemplatesByCsp}
serviceCspInQuery={serviceCspInQuery}
serviceHostingTypeInQuery={serviceHostingTypeInQuery}
onChangeServiceHostingType={onChangeServiceHostingType}
/>
</Badge.Ribbon>
) : activeServiceDetail.serviceTemplateRegistrationState === 'approved' &&
WangLiNaruto marked this conversation as resolved.
Show resolved Hide resolved
!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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading
Loading