Skip to content

Commit

Permalink
Merge pull request eclipse-xpanse#747 from WangLiNaruto/bug/style_dep…
Browse files Browse the repository at this point in the history
…loyment_page

Styling issues between deployment page service name and version
  • Loading branch information
swaroopar authored Apr 29, 2024
2 parents 9718230 + f2a709b commit 7f5438a
Show file tree
Hide file tree
Showing 10 changed files with 101 additions and 37 deletions.
10 changes: 8 additions & 2 deletions src/components/content/catalog/services/details/ShowIcon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,19 @@

import { ServiceTemplateDetailVo } from '../../../../../xpanse-api/generated';
import React from 'react';
import { Tooltip, Typography } from 'antd';

export function ShowIcon({ serviceDetails }: { serviceDetails: ServiceTemplateDetailVo }): React.JSX.Element {
const { Paragraph } = Typography;
return (
<div className={'catalog-service-icon'}>
<img width={25} height={25} src={serviceDetails.icon} alt='Service Icon' referrerPolicy='no-referrer' />
<img width={20} height={20} src={serviceDetails.icon} alt='Service Icon' referrerPolicy='no-referrer' />
&nbsp;
{serviceDetails.name}
<Tooltip placement='topLeft' title={serviceDetails.name}>
<Paragraph ellipsis={true} className={'catalog-service-name'}>
{serviceDetails.name}
</Paragraph>
</Tooltip>
</div>
);
}
11 changes: 9 additions & 2 deletions src/components/content/catalog/services/tree/CategoryCatalog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import '../../../../../styles/catalog.css';
import { DataNode } from 'antd/es/tree';
import { TagOutlined } from '@ant-design/icons';
import { ApiError, DeployedService, Response, ServiceTemplateDetailVo } from '../../../../../xpanse-api/generated';
import { Alert, Empty, Skeleton } from 'antd';
import { Alert, Empty, Skeleton, Tooltip, Typography } from 'antd';
import { convertStringArrayToUnorderedList } from '../../../../utils/generateUnorderedList';
import {
groupServiceTemplatesByName,
Expand All @@ -19,6 +19,7 @@ import { CatalogFullView } from './CatalogFullView';

function CategoryCatalog({ category }: { category: DeployedService.category }): React.JSX.Element {
const treeData: DataNode[] = [];
const { Paragraph } = Typography;
let categoryOclData: Map<string, ServiceTemplateDetailVo[]> = new Map<string, ServiceTemplateDetailVo[]>();

const availableServiceTemplatesQuery = useAvailableServiceTemplatesQuery(category);
Expand All @@ -28,7 +29,13 @@ function CategoryCatalog({ category }: { category: DeployedService.category }):
categoryOclData = groupServiceTemplatesByName(userAvailableServiceList);
categoryOclData.forEach((_value: ServiceTemplateDetailVo[], serviceName: string) => {
const dataNode: DataNode = {
title: serviceName,
title: (
<Tooltip placement='topLeft' title={serviceName}>
<Paragraph ellipsis={true} className={'catalog-tree-node'}>
{serviceName}
</Paragraph>
</Tooltip>
),
key: serviceName || '',
children: [],
};
Expand Down
12 changes: 7 additions & 5 deletions src/components/content/common/ocl/DisplayOclData.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

import React from 'react';
import { Ocl } from '../../../../xpanse-api/generated';
import { Descriptions, Image, Tag } from 'antd';
import { Descriptions, Image, Tag, Tooltip, Typography } from 'antd';
import { DeploymentText } from './DeploymentText';
import { BillingText } from './BillingText';
import { cspMap } from '../csp/CspLogo';
Expand All @@ -16,7 +16,7 @@ import { AgreementText } from './AgreementText';

function DisplayOclData({ ocl }: { ocl: Ocl }): React.JSX.Element | string {
const PLACE_HOLDER_UNKNOWN_VALUE: string = 'NOT PROVIDED';

const { Paragraph } = Typography;
try {
return (
<>
Expand All @@ -40,9 +40,11 @@ function DisplayOclData({ ocl }: { ocl: Ocl }): React.JSX.Element | string {
<br />
<b>Service Name</b>
<br />
<Tag className={'ocl-display-tag'} color='blue'>
{ocl.name}
</Tag>
<Tooltip placement='topLeft' title={ocl.name}>
<Paragraph ellipsis={true} className={'ocl-data-display-service-register-name'}>
{ocl.name}
</Paragraph>
</Tooltip>
<br />
<br />
</div>
Expand Down
19 changes: 13 additions & 6 deletions src/components/content/order/create/OrderSubmit.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import NavigateOrderSubmission from './NavigateOrderSubmission';
import '../../../../styles/service_order.css';
import { Navigate, To, useLocation, useNavigate } from 'react-router-dom';
import React, { useRef, useState } from 'react';
import { Button, Form, Input, Tooltip } from 'antd';
import { Button, Col, Form, Input, Row, Tooltip, Typography } from 'antd';
import { DeployedServiceDetails, DeployRequest } from '../../../../xpanse-api/generated';
import { createServicePageRoute, CUSTOMER_SERVICE_NAME_FIELD, homePageRoute } from '../../../utils/constants';
import { InfoCircleOutlined } from '@ant-design/icons';
Expand All @@ -22,6 +22,7 @@ import { OrderItem } from '../common/utils/OrderItem';
import { EulaInfo } from '../common/EulaInfo';

function OrderSubmit(state: OrderSubmitProps): React.JSX.Element {
const { Paragraph } = Typography;
const [form] = Form.useForm();
const [isEulaAccepted, setIsEulaAccepted] = useState<boolean>(false);
const [isShowDeploymentResult, setIsShowDeploymentResult] = useState<boolean>(false);
Expand Down Expand Up @@ -87,12 +88,18 @@ function OrderSubmit(state: OrderSubmitProps): React.JSX.Element {
<NavigateOrderSubmission text={'<< Back'} to={createServicePageUrl as To} props={state} />
<div className={'Line'} />
<div className={'generic-table-container'}>
<div className={'content-title'}>
<div className={'content-title-order'}>
Service: {state.name}@{state.version}
<Row>
<Col span={4}>
<Tooltip placement='topLeft' title={state.name + '@' + state.version}>
<Paragraph ellipsis={true} className={'content-title'}>
Service: {state.name + '@' + state.version}
</Paragraph>
</Tooltip>
</Col>
<Col span={4}>
<ApiDoc id={state.id} styleClass={'content-title-api'}></ApiDoc>
</div>
</div>
</Col>
</Row>
</div>
</div>
{isShowDeploymentResult ? (
Expand Down
29 changes: 16 additions & 13 deletions src/components/content/order/create/SelectServiceForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import { getFlavorList } from '../formDataHelpers/flavorHelper';
import { convertAreasToTabs } from '../formDataHelpers/areaHelper';
import { getRegionDropDownValues } from '../formDataHelpers/regionHelper';
import { getBilling } from '../formDataHelpers/billingHelper';
import { Button, Col, Form, Row, Select, Tabs } from 'antd';
import { Button, Col, Form, Row, Select, Tabs, Tooltip, Typography } from 'antd';
import NavigateOrderSubmission from './NavigateOrderSubmission';
import { ContactDetailsText } from '../../common/ocl/ContactDetailsText';
import { ContactDetailsShowType } from '../../common/ocl/ContactDetailsShowType';
Expand All @@ -40,6 +40,7 @@ import { getEulaByCsp } from '../formDataHelpers/eulaHelper';
import { getDeployParams } from '../formDataHelpers/deployParamsHelper';

export function SelectServiceForm({ services }: { services: UserOrderableServiceVo[] }): React.JSX.Element {
const { Paragraph } = Typography;
const [form] = Form.useForm();
const [urlParams] = useSearchParams();
const location = useLocation();
Expand Down Expand Up @@ -268,19 +269,12 @@ export function SelectServiceForm({ services }: { services: UserOrderableService
</div>
<div className={'generic-table-container'}>
<Row justify='start' gutter={10}>
<Col span={4}>
<div className={'content-title'}>Service: {serviceName}</div>
</Col>
<Col span={6}>
<div className={'content-title'}>
Version:&nbsp;
<Select
value={selectVersion}
className={'version-drop-down'}
onChange={onChangeVersion}
options={versionList}
/>
</div>
<Tooltip placement='topLeft' title={serviceName}>
<Paragraph ellipsis={true} className={'content-title'}>
Service: {serviceName}
</Paragraph>
</Tooltip>
</Col>
{currentServiceProviderContactDetails !== undefined ? (
<Col span={4}>
Expand All @@ -293,6 +287,15 @@ export function SelectServiceForm({ services }: { services: UserOrderableService
<></>
)}
</Row>
<div className={'cloud-provider-tab-class'}>
Version:&nbsp;
<Select
value={selectVersion}
className={'version-drop-down'}
onChange={onChangeVersion}
options={versionList}
/>
</div>

<br />
<CspSelect
Expand Down
14 changes: 12 additions & 2 deletions src/components/content/order/services/Services.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import '../../../../styles/service_order.css';
import React, { useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { createServicePageRoute } from '../../../utils/constants';
import { Col, Empty, Row } from 'antd';
import { Col, Empty, Row, Tooltip, Typography } from 'antd';
import { Badge, Space } from 'antd';
import { sortVersion } from '../../../utils/Sort';
import { DeployedService, UserOrderableServiceVo } from '../../../../xpanse-api/generated';
Expand All @@ -20,6 +20,7 @@ import userOrderableServicesQuery from '../query/userOrderableServicesQuery';
import { UserServiceDisplayType } from './UserServiceDisplayType';

function Services(): React.JSX.Element {
const { Paragraph } = Typography;
const navigate = useNavigate();
const location = useLocation();
const [clearFormVariables] = useOrderFormStore((state) => [state.clearFormVariables]);
Expand Down Expand Up @@ -108,7 +109,16 @@ function Services(): React.JSX.Element {
/>
</div>
<div className='service-type-option-info'>
<span className='service-type-option'>{item.name}</span>
<span className='service-type-option'>
<Tooltip placement='topLeft' title={item.name}>
<Paragraph
className={'service-type-option-service-name'}
ellipsis={true}
>
{item.name}
</Paragraph>
</Tooltip>
</span>
<span className='service-type-option-description'>{item.content}</span>
</div>
</div>
Expand Down
11 changes: 7 additions & 4 deletions src/components/content/review/ServiceReviewsDetails.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
*/

import React, { useState } from 'react';
import { Button, Descriptions, Image, Tag } from 'antd';
import { Button, Descriptions, Image, Tag, Tooltip, Typography } from 'antd';
import { cspMap } from '../common/csp/CspLogo';
import { FlavorsText } from '../common/ocl/FlavorsText';
import { BillingText } from '../common/ocl/BillingText';
Expand All @@ -30,6 +30,7 @@ export const ServiceReviewsDetails = ({
const [isApproved, setIsApproved] = useState<boolean | undefined>(undefined);
const getRegistrationDetailsQuery = useGetRegistrationDetails(currentServiceTemplateVo.id);
const useReviewRequestState = useApproveOrRejectMutationState(currentServiceTemplateVo.id);
const { Paragraph } = Typography;

const onClickApprove = () => {
setIsApproved(true);
Expand Down Expand Up @@ -100,9 +101,11 @@ export const ServiceReviewsDetails = ({
<br />
<b>Service Name</b>
<br />
<Tag className={'ocl-display-tag'} color='blue' key={currentServiceTemplateVo.name}>
{currentServiceTemplateVo.name}
</Tag>
<Tooltip placement='topLeft' title={currentServiceTemplateVo.name}>
<Paragraph ellipsis={true} className={'ocl-data-display-service-review-name'}>
{currentServiceTemplateVo.name}
</Paragraph>
</Tooltip>
<br />
<br />
</div>
Expand Down
11 changes: 10 additions & 1 deletion src/styles/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,15 @@
margin-top: 10px;
overflow-x: auto;
}
.ocl-data-display-service-review-name {
width: 400px;
margin-top: 15px;
}

.ocl-data-display-service-register-name {
width: 800px;
margin-top: 15px;
}

.home-data-display {
padding: 24px;
Expand All @@ -91,7 +100,7 @@
.content-title {
font-size: 20px;
font-weight: bold;
width: 600px;
width: 400px;
}

.menu-loading {
Expand Down
8 changes: 8 additions & 0 deletions src/styles/catalog.css
Original file line number Diff line number Diff line change
Expand Up @@ -57,11 +57,19 @@
width: 80%;
}

.catalog-tree-node {
width: 200px;
}

.catalog-service-icon {
display: flex;
align-items: center;
}

.catalog-service-name {
width: 200px;
margin-top: 15px;
}
.catalog-service-status-size {
font-size: 14px;
}
Expand Down
13 changes: 11 additions & 2 deletions src/styles/service_order.css
Original file line number Diff line number Diff line change
Expand Up @@ -191,11 +191,20 @@
font-weight: 700;
}

.service-type-option-name {
width: 200px;
margin-top: 10px;
}

.service-type-option-service-name {
width: 200px;
}

.service-type-option-description {
font-size: 12px;
color: #5e6366;
min-height: 35px;
margin-top: 5px;
//margin-top: 5px;
word-break: normal;
width: auto;
display: block;
Expand Down Expand Up @@ -252,12 +261,12 @@
.content-title-api {
font-size: 13px;
font-weight: bold;
float: right;
background-color: transparent;
border: none;
cursor: pointer;
display: inline;
padding: 0;
margin-left: 155px;
margin-top: 10px;
}

Expand Down

0 comments on commit 7f5438a

Please sign in to comment.