Skip to content

Commit

Permalink
Merge branch 'eclipse-xpanse:main' into main
Browse files Browse the repository at this point in the history
  • Loading branch information
@WangLiNaruto
WangLiNaruto authored Dec 11, 2024
2 parents 269f43f + 9001edf commit c9bdfaf
Show file tree
Hide file tree
Showing 15 changed files with 1,494 additions and 1,218 deletions.
222 changes: 91 additions & 131 deletions package-lock.json
View file

Large diffs are not rendered by default.

16 changes: 8 additions & 8 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"dependencies": {
"@ant-design/icons": "^5.5.2",
"@axa-fr/react-oidc": "^7.23.1",
"@tanstack/react-query": "^5.62.1",
"@tanstack/react-query": "^5.62.3",
"antd": "^5.22.3",
"echarts": "5.5.1",
"echarts-for-react": "^3.0.2",
Expand All @@ -15,7 +15,7 @@
"rc-tabs": "^15.4.0",
"react": "^18.2.0",
"react-dom": "^18.3.1",
"react-router-dom": "^7.0.1",
"react-router-dom": "^7.0.2",
"react-timer-hook": "^3.0.8",
"yaml": "^2.6.1",
"zustand": "^5.0.1"
Expand Down Expand Up @@ -46,15 +46,15 @@
"@eslint/compat": "^1.2.3",
"@eslint/eslintrc": "^3.2.0",
"@eslint/js": "^9.16.0",
"@hey-api/openapi-ts": "^0.58.0",
"@hey-api/openapi-ts": "^0.59.1",
"playwright-core": "^1.49.0",
"@playwright/test": "^1.49.0",
"@tanstack/eslint-plugin-query": "^5.62.1",
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"@types/uuid": "^10.0.0",
"@typescript-eslint/eslint-plugin": "^8.17.0",
"@typescript-eslint/parser": "^8.17.0",
"@typescript-eslint/eslint-plugin": "^8.18.0",
"@typescript-eslint/parser": "^8.18.0",
"@vitejs/plugin-react": "^4.3.4",
"env-cmd": "^10.1.0",
"eslint": "^9.16.0",
Expand All @@ -64,16 +64,16 @@
"eslint-plugin-import": "^2.31.0",
"eslint-plugin-prettier": "^5.2.1",
"eslint-plugin-react": "^7.37.2",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-hooks": "^5.1.0",
"eslint-plugin-require-explicit-generics": "^1.0.0",
"knip": "^5.39.1",
"prettier": "3.4.1",
"prettier-plugin-organize-imports": "^4.1.0",
"release-it": "^17.10.0",
"typescript": "5.7.2",
"uuid": "^11.0.3",
"vite": "^6.0.2",
"typescript-eslint": "^8.17.0"
"vite": "^6.0.3",
"typescript-eslint": "^8.18.0"
},
"overrides": {
"react-scripts": {
Expand Down
203 changes: 141 additions & 62 deletions src/components/content/deployedServices/myServices/MyServiceHistory.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,87 +3,131 @@
* SPDX-FileCopyrightText: Huawei Inc.
*/

import { CheckCircleOutlined, MinusCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import { Table, Tag, Tooltip, Typography } from 'antd';
import { CheckCircleOutlined, ClockCircleOutlined, CloseCircleOutlined, SyncOutlined } from '@ant-design/icons';
import { Button, Popover, Table, Tag, Typography } from 'antd';
import { ColumnsType } from 'antd/es/table';
import { ColumnFilterItem } from 'antd/es/table/interface';
import React from 'react';
import serviceModifyStyles from '../../../../styles/service-modify.module.css';
import {
DeployRequest,
DeployedServiceDetails,
ErrorResponse,
ServiceOrderDetails,
VendorHostedDeployedServiceDetails,
taskStatus,
taskType,
VendorHostedDeployedServiceDetails,
} from '../../../../xpanse-api/generated';
import useListServiceModifyHistoryQuery from './query/useListServiceModifyHistoryQuery';
import { MyServiceHistoryDetails } from './MyServiceHistoryDetails.tsx';
import useListServiceOrdersHistoryQuery from './query/useListServiceModifyHistoryQuery.ts';

const { Text } = Typography;
const { Paragraph } = Typography;

export const MyServiceHistory = ({
deployedService,
}: {
deployedService: DeployedServiceDetails | VendorHostedDeployedServiceDetails;
}): React.JSX.Element => {
let serviceModificationAuditHistoryList: ServiceOrderDetails[] = [];
const listServiceModifyHistoryQuery = useListServiceModifyHistoryQuery(deployedService.serviceId);
let orderIdFilters: ColumnFilterItem[] = [];
let taskTypeFilters: ColumnFilterItem[] = [];
let taskStatusFilters: ColumnFilterItem[] = [];
let serviceOrdersHistoryList: ServiceOrderDetails[] = [];
const listServiceOrdersHistoryQuery = useListServiceOrdersHistoryQuery(deployedService.serviceId);

if (listServiceOrdersHistoryQuery.isSuccess && listServiceOrdersHistoryQuery.data.length > 0) {
serviceOrdersHistoryList = listServiceOrdersHistoryQuery.data;
updateOrderIdFilters(listServiceOrdersHistoryQuery.data);
updateTaskTypeFilters();
updateTaskStatusFilters();
}

function updateOrderIdFilters(resp: ServiceOrderDetails[]): void {
const filters: ColumnFilterItem[] = [];
resp.forEach((respItem) => {
const filter = {
text: respItem.orderId,
value: respItem.orderId,
};
filters.push(filter);
});
orderIdFilters = filters;
}

function updateTaskTypeFilters(): void {
const filters: ColumnFilterItem[] = [];
Object.values(taskType).forEach((taskTypeItem) => {
const filter = {
text: taskTypeItem,
value: taskTypeItem,
};
filters.push(filter);
});
taskTypeFilters = filters;
}

if (listServiceModifyHistoryQuery.isSuccess && listServiceModifyHistoryQuery.data.length > 0) {
serviceModificationAuditHistoryList = listServiceModifyHistoryQuery.data;
function updateTaskStatusFilters(): void {
const filters: ColumnFilterItem[] = [];
Object.values(taskStatus).forEach((taskStatusItem) => {
const filter = {
text: taskStatusItem,
value: taskStatusItem,
};
filters.push(filter);
});
taskStatusFilters = filters;
}

const columns: ColumnsType<ServiceOrderDetails> = [
{
title: 'ModifyId',
title: 'OrderId',
dataIndex: 'orderId',
align: 'center',
width: 100,
className: serviceModifyStyles.modifyHistoryValue,
},
{
title: 'Previous',
dataIndex: 'previousDeployRequest',
width: 300,
className: serviceModifyStyles.modifyHistoryValue,
align: 'center',
render: (value: DeployRequest) => {
filters: orderIdFilters,
filterMode: 'tree',
filterSearch: true,
onFilter: (value: React.Key | boolean, record) => record.orderId.startsWith(value.toString()),
render: (value: string) => {
return (
<ul className={serviceModifyStyles.modifyHistoryValueLi}>
<li>
<Text strong>Customer Service Name:</Text>&nbsp;{value.customerServiceName}
</li>
{value.serviceRequestProperties ? (
<li>
<Text strong>Service Request Properties:</Text>&nbsp;
{JSON.stringify(value.serviceRequestProperties)}
</li>
) : (
<></>
)}
</ul>
<div className={serviceModifyStyles.serviceHistoryValue}>
<Paragraph
className={serviceModifyStyles.serviceHistoryOrderIdClass}
ellipsis={true}
copyable={{ tooltips: value }}
>
{value}
</Paragraph>
</div>
);
},
},
{
title: 'New',
dataIndex: 'newDeployRequest',
className: serviceModifyStyles.modifyHistoryValue,
title: 'TaskType',
dataIndex: 'taskType',
align: 'center',
width: 300,
render: (value: DeployRequest) => {
width: 100,
filters: taskTypeFilters,
filterMode: 'tree',
filterSearch: true,
onFilter: (value: React.Key | boolean, record) => record.taskType.startsWith(value.toString()),
},
{
title: 'Details',
dataIndex: 'details',
width: 100,
align: 'center',
render: (_, record) => {
return (
<ul className={serviceModifyStyles.modifyHistoryValueLi}>
<li>
<Text strong>Customer Service Name:</Text>&nbsp;{value.customerServiceName}
</li>
{value.serviceRequestProperties ? (
<li>
<Text strong>Service Request Properties:</Text>&nbsp;
{JSON.stringify(value.serviceRequestProperties)}
</li>
) : (
<></>
)}
</ul>
<div>
<Popover
content={<MyServiceHistoryDetails record={record} />}
title={'Details'}
trigger='hover'
>
<Button className={serviceModifyStyles.serviceOrderErrorDataHover} type={'link'}>
{'details'}
</Button>
</Popover>
</div>
);
},
},
Expand All @@ -92,22 +136,45 @@ export const MyServiceHistory = ({
dataIndex: 'startedTime',
align: 'center',
width: 150,
defaultSortOrder: 'descend',
sorter: (serviceOrderDetailsA, serviceOrderDetailsB): number => {
if (serviceOrderDetailsA.startedTime && serviceOrderDetailsB.startedTime) {
return (
new Date(serviceOrderDetailsA.startedTime).getTime() -
new Date(serviceOrderDetailsB.startedTime).getTime()
);
}
return 0;
},
},
{
title: 'CompletedTime',
dataIndex: 'completedTime',
align: 'center',
width: 150,
sorter: (serviceOrderDetailsA, serviceOrderDetailsB): number => {
if (serviceOrderDetailsA.completedTime && serviceOrderDetailsB.completedTime) {
return (
new Date(serviceOrderDetailsA.completedTime).getTime() -
new Date(serviceOrderDetailsB.completedTime).getTime()
);
}
return 0;
},
},
{
title: 'Status',
title: 'TaskStatus',
dataIndex: 'taskStatus',
align: 'center',
width: 50,
filters: taskStatusFilters,
filterMode: 'tree',
filterSearch: true,
onFilter: (value: React.Key | boolean, record) => record.taskStatus.startsWith(value.toString()),
render: (value) => {
if (value === taskStatus.FAILED) {
return (
<Tag icon={<QuestionCircleOutlined />} color={'error'}>
<Tag icon={<CloseCircleOutlined />} color={'error'}>
{value}
</Tag>
);
Expand All @@ -117,9 +184,15 @@ export const MyServiceHistory = ({
{value}
</Tag>
);
} else if (value === taskStatus.IN_PROGRESS) {
return (
<Tag icon={<SyncOutlined />} color={'orange'}>
{value}
</Tag>
);
} else {
return (
<Tag icon={<MinusCircleOutlined />} color={'default'}>
<Tag icon={<ClockCircleOutlined />} color={'default'}>
{value}
</Tag>
);
Expand All @@ -128,15 +201,21 @@ export const MyServiceHistory = ({
},
{
title: 'Failure Reason',
dataIndex: 'errorMsg',
dataIndex: 'errorResponse',
align: 'center',
width: 150,
render: (value: string | undefined) => {
width: 100,
render: (value: ErrorResponse | undefined) => {
if (value) {
return (
<Tooltip title={value}>
<span className={serviceModifyStyles.modifyHistoryErrorMsgValue}>{value}</span>
</Tooltip>
<Popover
content={<pre className={serviceModifyStyles.serviceOrderErrorText}>{value.details}</pre>}
title={value.errorType}
trigger='hover'
>
<Button className={serviceModifyStyles.serviceOrderErrorDataHover} type={'link'}>
{'failure reason'}
</Button>
</Popover>
);
}
},
Expand All @@ -147,8 +226,8 @@ export const MyServiceHistory = ({
<div className={serviceModifyStyles.modifyContainer}>
<Table
columns={columns}
dataSource={serviceModificationAuditHistoryList}
loading={listServiceModifyHistoryQuery.isPending || listServiceModifyHistoryQuery.isRefetching}
dataSource={serviceOrdersHistoryList}
loading={listServiceOrdersHistoryQuery.isPending || listServiceOrdersHistoryQuery.isRefetching}
rowKey={'id'}
scroll={{ x: 'max-content' }}
/>
Expand Down
Loading

0 comments on commit c9bdfaf

Please sign in to comment.