Skip to content

Commit

Permalink
ISV catalog refresh must bring control back to previously selected se…
Browse files Browse the repository at this point in the history 
…rvice.
  • Loading branch information
@Alice1319
Alice1319 committed Dec 11, 2023
1 parent 2ed8c0e commit 9696aea
Show file tree
Hide file tree
Showing 6 changed files with 228 additions and 17 deletions.
8 changes: 7 additions & 1 deletion src/components/content/catalog/services/details/ServiceHostingOptions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,12 @@ import { EnvironmentOutlined } from '@ant-design/icons';
export function ServiceHostingOptions({
serviceTemplateDetailVos,
defaultDisplayedService,
serviceHostingTypeInQuery,
updateServiceHostingType,
}: {
serviceTemplateDetailVos: ServiceTemplateDetailVo[];
defaultDisplayedService: ServiceTemplateDetailVo;
serviceHostingTypeInQuery: string;
updateServiceHostingType?: (serviceTemplateDetailVo: ServiceTemplateDetailVo) => void;
}): React.JSX.Element {
const serviceHostingTypes: ServiceTemplateDetailVo.serviceHostingType[] = [];
Expand Down Expand Up @@ -45,7 +47,11 @@ export function ServiceHostingOptions({
</h3>
<Radio.Group
disabled={serviceHostingTypes.length === 1}
value={defaultDisplayedService.serviceHostingType}
value={
serviceHostingTypeInQuery.length > 0
? serviceHostingTypeInQuery
: defaultDisplayedService.serviceHostingType
}
onChange={onChange}
>
<Radio value={ServiceTemplateDetailVo.serviceHostingType.SELF}>self</Radio>
Expand Down
67 changes: 58 additions & 9 deletions src/components/content/catalog/services/details/ServiceProvider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ import ServiceDetail from './ServiceDetail';
import {
ApiError,
CloudServiceProvider,
Response,
DeployedService,
Response,
ServiceTemplateDetailVo,
} from '../../../../../xpanse-api/generated';
import { Tab } from 'rc-tabs/lib/interface';
Expand All @@ -21,6 +21,8 @@ import { useQueryClient } from '@tanstack/react-query';
import { getQueryKey } from '../query/useAvailableServiceTemplatesQuery';
import { cspMap } from '../../../common/csp/CspLogo';
import { ServiceHostingOptions } from './ServiceHostingOptions';
import { useSearchParams } from 'react-router-dom';
import { serviceCspQuery, serviceHostingTypeQuery } from '../../../../utils/constants';

let lastServiceName: string = '';

Expand All @@ -29,12 +31,21 @@ function ServiceProvider({
currentServiceName,
confirmUnregister,
category,
getServiceKey,
getCsp,
getHostType,
}: {
categoryOclData: Map<string, ServiceTemplateDetailVo[]>;
currentServiceName: string;
confirmUnregister: (disabled: boolean) => void;
category: DeployedService.category;
getServiceKey: (arg: string) => void;
getCsp: (arg: string) => void;
getHostType: (arg: string) => void;
}): React.JSX.Element {
const [urlParams] = useSearchParams();
const serviceCspInQuery = getServiceCspFormQuery();
const serviceHostingTypeInQuery = getServiceHostingTypeFormQuery();
const [activeKey, setActiveKey] = useState<string>('');
const [serviceDetails, setServiceDetails] = useState<ServiceTemplateDetailVo[] | undefined>(undefined);
const [activeServiceDetail, setActiveServiceDetail] = useState<ServiceTemplateDetailVo | undefined>(undefined);
Expand Down Expand Up @@ -83,23 +94,47 @@ function ServiceProvider({
};

const items: Tab[] = getCspTabs(categoryOclData);

function getServiceCspFormQuery(): string {
const queryInUri = decodeURI(urlParams.get(serviceCspQuery) ?? '');
if (queryInUri.length > 0) {
return queryInUri;
}
return '';
}

function getServiceHostingTypeFormQuery(): string {
const queryInUri = decodeURI(urlParams.get(serviceHostingTypeQuery) ?? '');
if (queryInUri.length > 0) {
return queryInUri;
}
return '';
}

function updateServiceDetails(serviceKey: string): void {
const details = detailMapper.get(serviceKey);
if (details) {
setServiceDetails(details);
setActiveServiceDetail(details[0]);
getHostType(details[0].serviceHostingType);
}
}

useEffect(() => {
if (items.length > 0 && lastServiceName !== currentServiceName) {
if (items.length > 0 && serviceCspInQuery.length > 0) {
setActiveKey(serviceCspInQuery);
getCsp(serviceCspInQuery);
} else if (items.length > 0 && lastServiceName !== currentServiceName) {
updateServiceDetails(currentServiceName + '@' + items[0].key);
setActiveKey(items[0]?.key);
getCsp(items[0]?.key);
} else if (items.length > 0 && lastServiceName === currentServiceName) {
setActiveKey(items[0]?.key);
getCsp(items[0]?.key);
}
lastServiceName = currentServiceName;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [currentServiceName]);
}, [currentServiceName, serviceCspInQuery]);

useEffect(() => {
updateServiceDetails(currentServiceName + '@' + activeKey);
Expand All @@ -108,10 +143,12 @@ function ServiceProvider({

const onChange = (key: string) => {
setActiveKey(key);
getCsp(key);
};

const onChangeServiceHostingType = (serviceTemplateDetailVo: ServiceTemplateDetailVo) => {
setActiveServiceDetail(serviceTemplateDetailVo);
getHostType(serviceTemplateDetailVo.serviceHostingType);
};

function setUnregisterTipsInfo(unregisterResult: boolean, msg: string | Error) {
Expand Down Expand Up @@ -154,16 +191,13 @@ function ServiceProvider({
);
}

const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));

const onConfirmUnregister = async (msg: string | Error, isUnregisterSuccessful: boolean, id: string) => {
const onConfirmUnregister = (msg: string | Error, isUnregisterSuccessful: boolean, id: string) => {
setUnregisterTipsInfo(isUnregisterSuccessful, msg);
setUnregisterServiceId(id);
unregisterStatus.current = isUnregisterSuccessful ? 'completed' : 'error';
confirmUnregister(false);
setUnregisterTabsItemDisabled(true);
if (isUnregisterSuccessful) {
await sleep(5000);
void queryClient.refetchQueries({ queryKey: getQueryKey(category) });
}
};
Expand All @@ -183,6 +217,7 @@ function ServiceProvider({
<ServiceHostingOptions
serviceTemplateDetailVos={serviceDetails}
defaultDisplayedService={activeServiceDetail}
serviceHostingTypeInQuery={serviceHostingTypeInQuery}
updateServiceHostingType={onChangeServiceHostingType}
/>
<ServiceDetail serviceDetails={activeServiceDetail} />
Expand All @@ -191,9 +226,23 @@ function ServiceProvider({
id={activeServiceDetail.id}
unregisterStatus={unregisterStatus}
category={category}
currentServiceName={currentServiceName}
currentCsp={activeKey}
defaultDisplayedService={activeServiceDetail}
getServiceKey={getServiceKey}
getCsp={getCsp}
getHostType={getHostType}
/>
<UnregisterService
id={activeServiceDetail.id}
currentServiceName={currentServiceName}
categoryOclData={categoryOclData}
onConfirmHandler={onConfirmUnregister}
defaultDisplayedService={activeServiceDetail}
getServiceKey={getServiceKey}
getCsp={getCsp}
getHostType={getHostType}
/>
{/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
<UnregisterService id={activeServiceDetail.id} onConfirmHandler={onConfirmUnregister} />
</div>
</>
) : null}
Expand Down
84 changes: 81 additions & 3 deletions src/components/content/catalog/services/tree/CategoryCatalog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,32 @@ import '../../../../../styles/catalog.css';
import { DataNode } from 'antd/es/tree';
import ServiceProvider from '../details/ServiceProvider';
import { HomeOutlined, TagOutlined } from '@ant-design/icons';
import { ApiError, Response, DeployedService, ServiceTemplateDetailVo } from '../../../../../xpanse-api/generated';
import { ApiError, DeployedService, Response, ServiceTemplateDetailVo } from '../../../../../xpanse-api/generated';
import { Alert, Empty, Skeleton, Tree } from 'antd';
import { convertStringArrayToUnorderedList } from '../../../../utils/generateUnorderedList';
import { getServiceMapper, getVersionMapper } from '../../../common/catalog/catalogProps';
import { useAvailableServiceTemplatesQuery } from '../query/useAvailableServiceTemplatesQuery';
import { createSearchParams, useNavigate, useSearchParams } from 'react-router-dom';
import { catalogPageRoute, serviceNameKeyQuery, serviceVersionKeyQuery } from '../../../../utils/constants';

function CategoryCatalog({ category }: { category: DeployedService.category }): React.JSX.Element {
const [urlParams] = useSearchParams();
const serviceNameQuery = getServiceNameFromQuery();
const serviceVersionQuery = getServiceVersionFromQuery();
const [selectKey, setSelectKey] = useState<React.Key>('');
const [expandKeys, setExpandKeys] = useState<React.Key[]>([]);
const [treeData, setTreeData] = useState<DataNode[]>([]);
const [currentServiceName, setCurrentServiceName] = useState<string>('');
const [currentVersion, setCurrentVersion] = useState<string>('');
const [currentCsp, setCurrentCsp] = useState<string>('');
const [currentHostType, setCurrentHostType] = useState<string>('');
const [categoryOclData, setCategoryOclData] = useState<Map<string, ServiceTemplateDetailVo[]>>(
new Map<string, ServiceTemplateDetailVo[]>()
);
const [unregisteredDisabled, setUnregisteredDisabled] = useState<boolean>(false);

const navigate = useNavigate();

const availableServiceTemplatesQuery = useAvailableServiceTemplatesQuery(category);

useEffect(() => {
Expand Down Expand Up @@ -56,15 +67,61 @@ function CategoryCatalog({ category }: { category: DeployedService.category }):
categoryTreeData.push(dataNode);
});
setTreeData(categoryTreeData);
setSelectKey(tExpandKeys[0]);
setSelectKey(
serviceNameQuery.length > 0 && serviceVersionQuery.length > 0
? serviceNameQuery + '@' + serviceVersionQuery
: tExpandKeys[0]
);
setExpandKeys(tExpandKeys);
setCurrentServiceName(
serviceNameQuery.length > 0 ? serviceNameQuery : tExpandKeys[0].toString().split('@')[0]
);
setCurrentVersion(
serviceVersionQuery.length > 0 ? serviceVersionQuery : tExpandKeys[0].toString().split('@')[1]
);
} else {
setTreeData([]);
setSelectKey('');
setExpandKeys([]);
setCategoryOclData(new Map<string, ServiceTemplateDetailVo[]>());
setCurrentServiceName('');
setCurrentVersion('');
}
}, [
availableServiceTemplatesQuery.data,
availableServiceTemplatesQuery.isSuccess,
serviceNameQuery,
serviceVersionQuery,
]);

useEffect(() => {
navigate({
pathname: catalogPageRoute,
hash: '#' + category,
search: createSearchParams({
csp: currentCsp,
serviceName: currentServiceName,
version: currentVersion,
hostingType: currentHostType,
}).toString(),
});
}, [currentServiceName, currentVersion, currentCsp, currentHostType, navigate, category]);

function getServiceNameFromQuery(): string {
const queryInUri = decodeURI(urlParams.get(serviceNameKeyQuery) ?? '');
if (queryInUri.length > 0) {
return queryInUri as DeployedService.serviceDeploymentState;
}
}, [availableServiceTemplatesQuery.data, availableServiceTemplatesQuery.isSuccess]);
return '';
}

function getServiceVersionFromQuery(): string {
const queryInUri = decodeURI(urlParams.get(serviceVersionKeyQuery) ?? '');
if (queryInUri.length > 0) {
return queryInUri as DeployedService.serviceDeploymentState;
}
return '';
}

function isParentTreeSelected(selectKey: React.Key): boolean {
let isParentNode: boolean = false;
Expand All @@ -81,6 +138,8 @@ function CategoryCatalog({ category }: { category: DeployedService.category }):
return;
}
setSelectKey(selectedKeys[0]);
setCurrentServiceName(selectedKeys[0].toString().split('@')[0]);
setCurrentVersion(selectedKeys[0].toString().split('@')[1]);
};

const onConfirmUnregister = (disabled: boolean) => {
Expand Down Expand Up @@ -134,6 +193,22 @@ function CategoryCatalog({ category }: { category: DeployedService.category }):
</div>
);
}
const getServiceKey = (serviceKey: string) => {
if (serviceKey.length > 0) {
setCurrentServiceName(serviceKey.split('@')[0]);
setCurrentVersion(serviceKey.split('@')[1]);
}
};
const getCsp = (csp: string) => {
if (csp.length > 0) {
setCurrentCsp(csp);
}
};
const getHostType = (hostType: string) => {
if (hostType.length > 0) {
setCurrentHostType(hostType);
}
};

return (
<div className={'catalog-middleware'}>
Expand Down Expand Up @@ -162,6 +237,9 @@ function CategoryCatalog({ category }: { category: DeployedService.category }):
currentServiceName={selectKey.toString()}
confirmUnregister={onConfirmUnregister}
category={category}
getServiceKey={getServiceKey}
getCsp={getCsp}
getHostType={getHostType}
/>
</div>
</div>
Expand Down
Loading

0 comments on commit 9696aea

Please sign in to comment.