From 8f0aba44ff1ea8ac51d0451652832e21bf66a5b6 Mon Sep 17 00:00:00 2001 From: WangLiNaruto <122504203+WangLiNaruto@users.noreply.github.com> Date: Mon, 6 Jan 2025 15:54:14 +0800 Subject: [PATCH] Add service template history view to the ISV view (#1402) --- .../services/details/ServiceProvider.tsx | 3 + .../history/ServiceTemplateHistory.tsx | 64 +++++++ .../history/ServiceTemplateHistoryTable.tsx | 167 ++++++++++++++++++ .../useRequestedServiceTemplateQuery.ts | 24 +++ .../history/useServiceTemplateHistoryQuery.ts | 23 +++ .../catalog/ServiceTemplateRegisterStatus.tsx | 8 +- src/styles/catalog.module.css | 3 + 7 files changed, 288 insertions(+), 4 deletions(-) create mode 100644 src/components/content/catalog/services/history/ServiceTemplateHistory.tsx create mode 100644 src/components/content/catalog/services/history/ServiceTemplateHistoryTable.tsx create mode 100644 src/components/content/catalog/services/history/useRequestedServiceTemplateQuery.ts create mode 100644 src/components/content/catalog/services/history/useServiceTemplateHistoryQuery.ts diff --git a/src/components/content/catalog/services/details/ServiceProvider.tsx b/src/components/content/catalog/services/details/ServiceProvider.tsx index 313227737..931d8c66c 100644 --- a/src/components/content/catalog/services/details/ServiceProvider.tsx +++ b/src/components/content/catalog/services/details/ServiceProvider.tsx @@ -23,6 +23,7 @@ import { import { cspMap } from '../../../common/csp/CspLogo'; import { DeleteResult } from '../delete/DeleteResult'; import DeleteService from '../delete/DeleteService'; +import ServiceTemplateHistory from '../history/ServiceTemplateHistory'; import { useRepublishRequest } from '../republish/RepublishMutation'; import { RepublishResult } from '../republish/RepublishResult.tsx'; import RepublishService from '../republish/RepublishService.tsx'; @@ -32,6 +33,7 @@ import UnpublishService from '../unpublish/UnpublishService.tsx'; import UpdateService from '../update/UpdateService'; import { ServiceProviderSkeleton } from './ServiceProviderSkeleton'; import ServiceTemplateDetails from './serviceTemplateDetails'; + function ServiceProvider({ categoryOclData, selectedServiceNameInTree, @@ -197,6 +199,7 @@ function ServiceProvider({ serviceDetail={activeServiceDetail} setIsViewDisabled={setIsViewDisabled} /> + { + setIsServiceTemplateHistoryModalOpen(true); + }; + + const handleServiceTemplateHistoryModalClose = () => { + setIsServiceTemplateHistoryModalOpen(false); + }; + + return ( +
+ {isServiceTemplateHistoryModalOpen && serviceTemplateRequestHistoryList.length > 0 ? ( + + + + ) : null} + {serviceTemplateHistoryQuery.isSuccess && serviceTemplateHistoryQuery.data.length > 0 ? ( + + ) : null} +
+ ); +} + +export default ServiceTemplateHistory; diff --git a/src/components/content/catalog/services/history/ServiceTemplateHistoryTable.tsx b/src/components/content/catalog/services/history/ServiceTemplateHistoryTable.tsx new file mode 100644 index 000000000..f000c22c5 --- /dev/null +++ b/src/components/content/catalog/services/history/ServiceTemplateHistoryTable.tsx @@ -0,0 +1,167 @@ +/* + * SPDX-License-Identifier: Apache-2.0 + * SPDX-FileCopyrightText: Huawei Inc. + */ + +import { InfoCircleOutlined } from '@ant-design/icons'; +import { Alert, Button, Modal, Skeleton, Table, Tag } from 'antd'; +import { ColumnsType } from 'antd/es/table'; +import React, { useState } from 'react'; +import catalogStyles from '../../../../../styles/catalog.module.css'; +import { ServiceTemplateRequestHistory } from '../../../../../xpanse-api/generated'; +import { isHandleKnownErrorResponse } from '../../../common/error/isHandleKnownErrorResponse'; +import DisplayOclData from '../../../common/ocl/DisplayOclData'; +import useRequestedServiceTemplateQuery from './useRequestedServiceTemplateQuery'; + +function ServiceTemplateHistoryTable({ data }: { data: ServiceTemplateRequestHistory[] }): React.JSX.Element { + const [isRequestedServiceTemplateQuery, setIsRequestedServiceTemplateQuery] = useState(false); + const [serviceTemplateRequestId, setServiceTemplateRequestHistoryId] = useState(undefined); + const requestedServiceTemplateQuery = useRequestedServiceTemplateQuery(serviceTemplateRequestId); + + const columns: ColumnsType = [ + { + title: 'RequestId', + dataIndex: 'requestId', + align: 'center', + }, + { + title: 'RequestType', + dataIndex: 'requestType', + align: 'center', + render: (_text, record) => { + if (record.requestType === 'register') { + return {record.requestType}; + } else if (record.requestType === 'republish') { + return {record.requestType}; + } else if (record.requestType === 'unpublish') { + return {record.requestType}; + } else { + return {record.requestType}; + } + }, + }, + { + title: 'Status', + dataIndex: 'status', + align: 'center', + render: (_text, record) => { + if (record.status === 'in-review') { + return {record.status}; + } else if (record.status === 'accepted') { + return {record.status}; + } else if (record.status === 'rejected') { + return {record.status}; + } else { + return {record.status}; + } + }, + }, + { + title: 'ReviewComment', + dataIndex: 'reviewComment', + align: 'center', + }, + { + title: 'CreatedTime', + dataIndex: 'createTime', + align: 'center', + }, + { + title: 'LastModifiedTime', + dataIndex: 'lastModifiedTime', + align: 'center', + }, + { + title: 'Service Template', + dataIndex: 'service template', + render: (_text: string, record) => { + return ( + <> + + + ); + }, + align: 'center', + }, + ]; + + const handleRequestedServiceTemplateOpenModal = (record: ServiceTemplateRequestHistory) => { + setIsRequestedServiceTemplateQuery(true); + setServiceTemplateRequestHistoryId(record.requestId); + }; + + const handleRequestedServiceTemplateModalClose = () => { + setIsRequestedServiceTemplateQuery(false); + setServiceTemplateRequestHistoryId(undefined); + }; + + return ( +
+ {requestedServiceTemplateQuery.isLoading ? ( + + + + ) : requestedServiceTemplateQuery.isSuccess ? ( + + + + ) : requestedServiceTemplateQuery.isError ? ( +
+ {isHandleKnownErrorResponse(requestedServiceTemplateQuery.error) ? ( + + Request Service Template with requestId {serviceTemplateRequestId}{' '} + error + + } + description={String(requestedServiceTemplateQuery.error.body.details)} + showIcon + type={'error'} + closable={true} + onClose={handleRequestedServiceTemplateModalClose} + /> + ) : ( + + Request Service Template with requestId {serviceTemplateRequestId}{' '} + error + + } + description={requestedServiceTemplateQuery.error.message} + showIcon + type={'error'} + closable={true} + onClose={handleRequestedServiceTemplateModalClose} + /> + )} +
+ ) : null} + + + + ); +} + +export default ServiceTemplateHistoryTable; diff --git a/src/components/content/catalog/services/history/useRequestedServiceTemplateQuery.ts b/src/components/content/catalog/services/history/useRequestedServiceTemplateQuery.ts new file mode 100644 index 000000000..1b048cb19 --- /dev/null +++ b/src/components/content/catalog/services/history/useRequestedServiceTemplateQuery.ts @@ -0,0 +1,24 @@ +/* + * SPDX-License-Identifier: Apache-2.0 + * SPDX-FileCopyrightText: Huawei Inc. + */ + +import { useQuery } from '@tanstack/react-query'; +import { + getRequestedServiceTemplateByRequestId, + GetRequestedServiceTemplateByRequestIdData, +} from '../../../../../xpanse-api/generated'; + +export default function useRequestedServiceTemplateQuery(requestId: string | undefined) { + return useQuery({ + queryKey: ['getRequestedServiceTemplateByRequestId', requestId], + queryFn: () => { + const data: GetRequestedServiceTemplateByRequestIdData = { + requestId: requestId ?? '', + }; + return getRequestedServiceTemplateByRequestId(data); + }, + refetchOnWindowFocus: false, + enabled: requestId !== undefined, + }); +} diff --git a/src/components/content/catalog/services/history/useServiceTemplateHistoryQuery.ts b/src/components/content/catalog/services/history/useServiceTemplateHistoryQuery.ts new file mode 100644 index 000000000..94befbb56 --- /dev/null +++ b/src/components/content/catalog/services/history/useServiceTemplateHistoryQuery.ts @@ -0,0 +1,23 @@ +/* + * SPDX-License-Identifier: Apache-2.0 + * SPDX-FileCopyrightText: Huawei Inc. + */ + +import { useQuery } from '@tanstack/react-query'; +import { + getServiceTemplateRequestHistoryByServiceTemplateId, + GetServiceTemplateRequestHistoryByServiceTemplateIdData, +} from '../../../../../xpanse-api/generated'; + +export default function useServiceTemplateHistoryQuery(serviceTemplateId: string) { + return useQuery({ + queryKey: ['getServiceTemplateRequestHistoryByServiceTemplateId', serviceTemplateId], + queryFn: () => { + const data: GetServiceTemplateRequestHistoryByServiceTemplateIdData = { + serviceTemplateId: serviceTemplateId, + }; + return getServiceTemplateRequestHistoryByServiceTemplateId(data); + }, + refetchOnWindowFocus: false, + }); +} diff --git a/src/components/content/common/catalog/ServiceTemplateRegisterStatus.tsx b/src/components/content/common/catalog/ServiceTemplateRegisterStatus.tsx index 749ddc0ec..aedefd9a0 100644 --- a/src/components/content/common/catalog/ServiceTemplateRegisterStatus.tsx +++ b/src/components/content/common/catalog/ServiceTemplateRegisterStatus.tsx @@ -20,7 +20,7 @@ export function ServiceTemplateRegisterStatus({ } - color='processing' + color='#ffa366' className={serviceReviewStyles.serviceTemplateStateSize} > {serviceRegistrationStatus.valueOf()} @@ -31,7 +31,7 @@ export function ServiceTemplateRegisterStatus({ } - color='magenta' + color='#ff6666' className={serviceReviewStyles.serviceTemplateStateSize} > {serviceRegistrationStatus.valueOf()} @@ -42,7 +42,7 @@ export function ServiceTemplateRegisterStatus({ } - color='success' + color='#87d068' className={serviceReviewStyles.serviceTemplateStateSize} > {serviceRegistrationStatus.valueOf()} @@ -53,7 +53,7 @@ export function ServiceTemplateRegisterStatus({ } - color='warning' + color='default' className={serviceReviewStyles.serviceTemplateStateSize} > {serviceRegistrationStatus as unknown as string} diff --git a/src/styles/catalog.module.css b/src/styles/catalog.module.css index 8387230b5..b3653bdd8 100644 --- a/src/styles/catalog.module.css +++ b/src/styles/catalog.module.css @@ -133,3 +133,6 @@ height: 26px; display: inline-block; } +.requested-service-template-history-error { + margin-bottom: 10px; +}