yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-08-29 03:16:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI : Fix alignment and spacing issue (#9379)

Browse Source 
* Fix alignment and spacing issue

* fix spacing issue while adding and editing ingestion

* added center support in PageLayoutV1
This commit is contained in:
Ashish Gupta 2022-12-19 19:09:11 +05:30 committed by GitHub
parent a3495c67f0
commit cfcddf13c8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 201 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

141
openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx
View File

@ -11,6 +11,7 @@
* limitations under the License. * limitations under the License.
*/ */
import { Col, Row } from 'antd';
import { AxiosError } from 'axios'; import { AxiosError } from 'axios';
import classNames from 'classnames'; import classNames from 'classnames';
import { isEqual, isNil, isUndefined } from 'lodash'; import { isEqual, isNil, isUndefined } from 'lodash';
@ -665,75 +666,77 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
/> />
<div className="tw-flex-grow tw-flex tw-flex-col tw-py-4"> <div className="tw-flex-grow tw-flex tw-flex-col tw-py-4">
{activeTab === 1 && ( {activeTab === 1 && (
<div <div className="tab-details-container">
className="tab-details-container tw-grid tw-grid-cols-4 tw-gap-4 tw-w-full" <Row id="schemaDetails">
id="schemaDetails"> <Col span={17}>
<div className="tw-col-span-3"> <Description
<Description description={description}
description={description} entityFieldTasks={getEntityFieldThreadCounts(
entityFieldTasks={getEntityFieldThreadCounts( EntityField.DESCRIPTION,
EntityField.DESCRIPTION, entityFieldTaskCount
entityFieldTaskCount )}
)} entityFieldThreads={getEntityFieldThreadCounts(
entityFieldThreads={getEntityFieldThreadCounts( EntityField.DESCRIPTION,
EntityField.DESCRIPTION, entityFieldThreadCount
entityFieldThreadCount )}
)} entityFqn={datasetFQN}
entityFqn={datasetFQN} entityName={entityName}
entityName={entityName} entityType={EntityType.TABLE}
entityType={EntityType.TABLE} hasEditAccess={
hasEditAccess={ tablePermissions.EditAll ||
tablePermissions.EditAll || tablePermissions.EditDescription
tablePermissions.EditDescription }
} isEdit={isEdit}
isEdit={isEdit} isReadOnly={deleted}
isReadOnly={deleted} owner={owner}
owner={owner} onCancel={onCancel}
onCancel={onCancel} onDescriptionEdit={onDescriptionEdit}
onDescriptionEdit={onDescriptionEdit} onDescriptionUpdate={onDescriptionUpdate}
onDescriptionUpdate={onDescriptionUpdate} onEntityFieldSelect={onEntityFieldSelect}
onEntityFieldSelect={onEntityFieldSelect} onThreadLinkSelect={onThreadLinkSelect}
onThreadLinkSelect={onThreadLinkSelect} />
/> </Col>
</div> <Col offset={1} span={6}>
<div className="tw-col-span-1 tw-border tw-border-main tw-rounded-md"> <div className="border-1 border-main rounded-6">
<FrequentlyJoinedTables <FrequentlyJoinedTables
header="Frequently Joined Tables" header="Frequently Joined Tables"
tableList={getFrequentlyJoinedWithTables()} tableList={getFrequentlyJoinedWithTables()}
/> />
</div> </div>
<div className="tw-col-span-full"> </Col>
<SchemaTab <Col className="m-t-md" span={24}>
columnName={getPartialNameFromTableFQN( <SchemaTab
datasetFQN, columnName={getPartialNameFromTableFQN(
[FqnPart['Column']], datasetFQN,
FQN_SEPARATOR_CHAR [FqnPart['Column']],
)} FQN_SEPARATOR_CHAR
columns={columns} )}
entityFieldTasks={getEntityFieldThreadCounts( columns={columns}
EntityField.COLUMNS, entityFieldTasks={getEntityFieldThreadCounts(
entityFieldTaskCount EntityField.COLUMNS,
)} entityFieldTaskCount
entityFieldThreads={getEntityFieldThreadCounts( )}
EntityField.COLUMNS, entityFieldThreads={getEntityFieldThreadCounts(
entityFieldThreadCount EntityField.COLUMNS,
)} entityFieldThreadCount
entityFqn={datasetFQN} )}
hasDescriptionEditAccess={ entityFqn={datasetFQN}
tablePermissions.EditAll || hasDescriptionEditAccess={
tablePermissions.EditDescription tablePermissions.EditAll ||
} tablePermissions.EditDescription
hasTagEditAccess={ }
tablePermissions.EditAll || tablePermissions.EditTags hasTagEditAccess={
} tablePermissions.EditAll || tablePermissions.EditTags
isReadOnly={deleted} }
joins={tableJoinData.columnJoins as ColumnJoins[]} isReadOnly={deleted}
tableConstraints={tableDetails.tableConstraints} joins={tableJoinData.columnJoins as ColumnJoins[]}
onEntityFieldSelect={onEntityFieldSelect} tableConstraints={tableDetails.tableConstraints}
onThreadLinkSelect={onThreadLinkSelect} onEntityFieldSelect={onEntityFieldSelect}
onUpdate={onColumnsUpdate} onThreadLinkSelect={onThreadLinkSelect}
/> onUpdate={onColumnsUpdate}
</div> />
</Col>
</Row>
</div> </div>
)} )}
{activeTab === 2 && ( {activeTab === 2 && (

14
openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayoutV1.tsx
View File

@ -12,6 +12,7 @@
*/ */
import { Col, Row } from 'antd'; import { Col, Row } from 'antd';
import classNames from 'classnames';
import React, { FC, HTMLAttributes, ReactNode } from 'react'; import React, { FC, HTMLAttributes, ReactNode } from 'react';
import './../../styles/layout/page-layout.less'; import './../../styles/layout/page-layout.less';
@ -19,6 +20,7 @@ interface PageLayoutProp extends HTMLAttributes<HTMLDivElement> {
leftPanel?: ReactNode; leftPanel?: ReactNode;
header?: ReactNode; header?: ReactNode;
rightPanel?: ReactNode; rightPanel?: ReactNode;
center?: boolean;
} }
export const pageContainerStyles = { export const pageContainerStyles = {
@ -33,6 +35,7 @@ const PageLayoutV1: FC<PageLayoutProp> = ({
children, children,
rightPanel, rightPanel,
className, className,
center = false,
}: PageLayoutProp) => { }: PageLayoutProp) => {
return ( return (
<Row className={className} gutter={[16, 16]} style={pageContainerStyles}> <Row className={className} gutter={[16, 16]} style={pageContainerStyles}>
@ -45,14 +48,21 @@ const PageLayoutV1: FC<PageLayoutProp> = ({
</Col> </Col>
)} )}
<Col <Col
className="page-layout-v1-center page-layout-v1-vertical-scroll" className={classNames(
'page-layout-v1-center page-layout-v1-vertical-scroll',
{
'flex justify-center': center,
}
)}
flex={ flex={
leftPanel && rightPanel leftPanel && rightPanel
? 'calc(100% - 568px)' ? 'calc(100% - 568px)'
: leftPanel || rightPanel : leftPanel || rightPanel
? 'calc(100% - 284px)' ? 'calc(100% - 284px)'
: '100%' : '100%'
}> }
offset={center ? 3 : 0}
span={center ? 18 : 24}>
{children} {children}
</Col> </Col>
{rightPanel && ( {rightPanel && (

80
openmetadata-ui/src/main/resources/ui/src/pages/AddIngestionPage/AddIngestionPage.component.tsx
View File

@ -11,6 +11,7 @@
* limitations under the License. * limitations under the License.
*/ */
import { Space } from 'antd';
import { AxiosError } from 'axios'; import { AxiosError } from 'axios';
import { capitalize, startCase } from 'lodash'; import { capitalize, startCase } from 'lodash';
import { ServiceTypes } from 'Models'; import { ServiceTypes } from 'Models';
@ -29,7 +30,7 @@ import ErrorPlaceHolder from '../../components/common/error-with-placeholder/Err
import TitleBreadcrumb from '../../components/common/title-breadcrumb/title-breadcrumb.component'; import TitleBreadcrumb from '../../components/common/title-breadcrumb/title-breadcrumb.component';
import { TitleBreadcrumbProps } from '../../components/common/title-breadcrumb/title-breadcrumb.interface'; import { TitleBreadcrumbProps } from '../../components/common/title-breadcrumb/title-breadcrumb.interface';
import PageContainerV1 from '../../components/containers/PageContainerV1'; import PageContainerV1 from '../../components/containers/PageContainerV1';
import PageLayout from '../../components/containers/PageLayout'; import PageLayoutV1 from '../../components/containers/PageLayoutV1';
import Loader from '../../components/Loader/Loader'; import Loader from '../../components/Loader/Loader';
import { import {
DEPLOYED_PROGRESS_VAL, DEPLOYED_PROGRESS_VAL,
@ -40,7 +41,6 @@ import {
import { GlobalSettingsMenuCategory } from '../../constants/GlobalSettings.constants'; import { GlobalSettingsMenuCategory } from '../../constants/GlobalSettings.constants';
import { FormSubmitType } from '../../enums/form.enum'; import { FormSubmitType } from '../../enums/form.enum';
import { IngestionActionMessage } from '../../enums/ingestion.enum'; import { IngestionActionMessage } from '../../enums/ingestion.enum';
import { PageLayoutType } from '../../enums/layout.enum';
import { ServiceCategory } from '../../enums/service.enum'; import { ServiceCategory } from '../../enums/service.enum';
import { CreateIngestionPipeline } from '../../generated/api/services/ingestionPipelines/createIngestionPipeline'; import { CreateIngestionPipeline } from '../../generated/api/services/ingestionPipelines/createIngestionPipeline';
import { PipelineType } from '../../generated/entity/services/ingestionPipelines/ingestionPipeline'; import { PipelineType } from '../../generated/entity/services/ingestionPipelines/ingestionPipeline';
@ -258,43 +258,47 @@ const AddIngestionPage = () => {
} else { } else {
return ( return (
<div className="self-center"> <div className="self-center">
<PageLayout <PageLayoutV1 center>
classes="w-max-1080 h-full p-t-md" <Space direction="vertical" size="middle">
header={<TitleBreadcrumb titleLinks={slashedBreadcrumb} />} <TitleBreadcrumb titleLinks={slashedBreadcrumb} />
layout={PageLayoutType['2ColRTL']} <div className="form-container">
rightPanel={getServiceIngestionStepGuide( <AddIngestion
activeIngestionStep, activeIngestionStep={activeIngestionStep}
true, handleCancelClick={goToService}
`${serviceData?.name || ''}_${ingestionType}`, handleViewServiceClick={goToService}
'', heading={`Add ${capitalize(ingestionType)} Ingestion`}
ingestionType as PipelineType, ingestionAction={ingestionAction}
isDeployed(), ingestionProgress={ingestionProgress}
false, isAirflowSetup={isAirflowRunning}
isAirflowRunning isIngestionCreated={isIngestionCreated}
)}> isIngestionDeployed={isIngestionDeployed}
<div className="form-container"> pipelineType={ingestionType as PipelineType}
<AddIngestion serviceCategory={serviceCategory as ServiceCategory}
activeIngestionStep={activeIngestionStep} serviceData={serviceData as DataObj}
handleCancelClick={goToService} setActiveIngestionStep={(step) =>
handleViewServiceClick={goToService} setActiveIngestionStep(step)
heading={`Add ${capitalize(ingestionType)} Ingestion`} }
ingestionAction={ingestionAction} showDeployButton={showIngestionButton}
ingestionProgress={ingestionProgress} status={FormSubmitType.ADD}
isAirflowSetup={isAirflowRunning} onAddIngestionSave={onAddIngestionSave}
isIngestionCreated={isIngestionCreated} onAirflowStatusCheck={onAirflowStatusCheck}
isIngestionDeployed={isIngestionDeployed} onIngestionDeploy={onIngestionDeploy}
pipelineType={ingestionType as PipelineType} />
serviceCategory={serviceCategory as ServiceCategory} </div>
serviceData={serviceData as DataObj} </Space>
setActiveIngestionStep={(step) => setActiveIngestionStep(step)} <div className="m-t-xlg p-x-lg w-800" data-testid="right-panel">
showDeployButton={showIngestionButton} {getServiceIngestionStepGuide(
status={FormSubmitType.ADD} activeIngestionStep,
onAddIngestionSave={onAddIngestionSave} true,
onAirflowStatusCheck={onAirflowStatusCheck} `${serviceData?.name || ''}_${ingestionType}`,
onIngestionDeploy={onIngestionDeploy} '',
/> ingestionType as PipelineType,
isDeployed(),
false,
isAirflowRunning
)}
</div> </div>
</PageLayout> </PageLayoutV1>
</div> </div>
); );
} }

49
openmetadata-ui/src/main/resources/ui/src/pages/EditConnectionFormPage/EditConnectionFormPage.component.tsx
View File

@ -11,7 +11,7 @@
* limitations under the License. * limitations under the License.
*/ */
import { Typography } from 'antd'; import { Space, Typography } from 'antd';
import { AxiosError } from 'axios'; import { AxiosError } from 'axios';
import { startCase } from 'lodash'; import { startCase } from 'lodash';
import { ServiceOption, ServicesData, ServiceTypes } from 'Models'; import { ServiceOption, ServicesData, ServiceTypes } from 'Models';
@ -22,13 +22,12 @@ import ErrorPlaceHolder from '../../components/common/error-with-placeholder/Err
import TitleBreadcrumb from '../../components/common/title-breadcrumb/title-breadcrumb.component'; import TitleBreadcrumb from '../../components/common/title-breadcrumb/title-breadcrumb.component';
import { TitleBreadcrumbProps } from '../../components/common/title-breadcrumb/title-breadcrumb.interface'; import { TitleBreadcrumbProps } from '../../components/common/title-breadcrumb/title-breadcrumb.interface';
import PageContainerV1 from '../../components/containers/PageContainerV1'; import PageContainerV1 from '../../components/containers/PageContainerV1';
import PageLayout from '../../components/containers/PageLayout'; import PageLayoutV1 from '../../components/containers/PageLayoutV1';
import Loader from '../../components/Loader/Loader'; import Loader from '../../components/Loader/Loader';
import ServiceConfig from '../../components/ServiceConfig/ServiceConfig'; import ServiceConfig from '../../components/ServiceConfig/ServiceConfig';
import { GlobalSettingsMenuCategory } from '../../constants/GlobalSettings.constants'; import { GlobalSettingsMenuCategory } from '../../constants/GlobalSettings.constants';
import { addServiceGuide } from '../../constants/service-guide.constant'; import { addServiceGuide } from '../../constants/service-guide.constant';
import { OPENMETADATA } from '../../constants/Services.constant'; import { OPENMETADATA } from '../../constants/Services.constant';
import { PageLayoutType } from '../../enums/layout.enum';
import { ServiceCategory } from '../../enums/service.enum'; import { ServiceCategory } from '../../enums/service.enum';
import { ConfigData, ServicesType } from '../../interface/service.interface'; import { ConfigData, ServicesType } from '../../interface/service.interface';
import jsonData from '../../jsons/en'; import jsonData from '../../jsons/en';
@ -150,28 +149,28 @@ function EditConnectionFormPage() {
{getEntityMissingError(serviceCategory, serviceFQN)} {getEntityMissingError(serviceCategory, serviceFQN)}
</ErrorPlaceHolder> </ErrorPlaceHolder>
) : ( ) : (
<PageLayout <PageLayoutV1 center>
classes="w-max-1080 h-full p-t-xss" <Space direction="vertical" size="middle">
header={<TitleBreadcrumb titleLinks={slashedBreadcrumb} />} <TitleBreadcrumb titleLinks={slashedBreadcrumb} />
layout={PageLayoutType['2ColRTL']} <div className="form-container">
rightPanel={fetchRightPanel()}> <Typography.Title level={5}>
<div className="form-container"> {`Edit ${serviceFQN} Service Connection`}
<Typography.Title level={5}> </Typography.Title>
{`Edit ${serviceFQN} Service Connection`} <ServiceConfig
</Typography.Title> data={serviceDetails as ServicesData}
<ServiceConfig disableTestConnection={
data={serviceDetails as ServicesData} ServiceCategory.METADATA_SERVICES === serviceCategory &&
disableTestConnection={ OPENMETADATA === serviceFQN
ServiceCategory.METADATA_SERVICES === serviceCategory && }
OPENMETADATA === serviceFQN handleUpdate={handleConfigUpdate}
} serviceCategory={serviceCategory as ServiceCategory}
handleUpdate={handleConfigUpdate} serviceFQN={serviceFQN}
serviceCategory={serviceCategory as ServiceCategory} serviceType={serviceDetails?.serviceType || ''}
serviceFQN={serviceFQN} />
serviceType={serviceDetails?.serviceType || ''} </div>
/> </Space>
</div> <div className="m-t-xlg p-x-lg w-800">{fetchRightPanel()}</div>
</PageLayout> </PageLayoutV1>
); );
}; };

84
openmetadata-ui/src/main/resources/ui/src/pages/EditIngestionPage/EditIngestionPage.component.tsx
View File

@ -11,6 +11,7 @@
* limitations under the License. * limitations under the License.
*/ */
import { Space } from 'antd';
import { AxiosError } from 'axios'; import { AxiosError } from 'axios';
import { capitalize, startCase } from 'lodash'; import { capitalize, startCase } from 'lodash';
import { ServiceTypes } from 'Models'; import { ServiceTypes } from 'Models';
@ -28,7 +29,7 @@ import ErrorPlaceHolder from '../../components/common/error-with-placeholder/Err
import TitleBreadcrumb from '../../components/common/title-breadcrumb/title-breadcrumb.component'; import TitleBreadcrumb from '../../components/common/title-breadcrumb/title-breadcrumb.component';
import { TitleBreadcrumbProps } from '../../components/common/title-breadcrumb/title-breadcrumb.interface'; import { TitleBreadcrumbProps } from '../../components/common/title-breadcrumb/title-breadcrumb.interface';
import PageContainerV1 from '../../components/containers/PageContainerV1'; import PageContainerV1 from '../../components/containers/PageContainerV1';
import PageLayout from '../../components/containers/PageLayout'; import PageLayoutV1 from '../../components/containers/PageLayoutV1';
import Loader from '../../components/Loader/Loader'; import Loader from '../../components/Loader/Loader';
import { import {
DEPLOYED_PROGRESS_VAL, DEPLOYED_PROGRESS_VAL,
@ -39,7 +40,6 @@ import {
import { GlobalSettingsMenuCategory } from '../../constants/GlobalSettings.constants'; import { GlobalSettingsMenuCategory } from '../../constants/GlobalSettings.constants';
import { FormSubmitType } from '../../enums/form.enum'; import { FormSubmitType } from '../../enums/form.enum';
import { IngestionActionMessage } from '../../enums/ingestion.enum'; import { IngestionActionMessage } from '../../enums/ingestion.enum';
import { PageLayoutType } from '../../enums/layout.enum';
import { ServiceCategory } from '../../enums/service.enum'; import { ServiceCategory } from '../../enums/service.enum';
import { CreateIngestionPipeline } from '../../generated/api/services/ingestionPipelines/createIngestionPipeline'; import { CreateIngestionPipeline } from '../../generated/api/services/ingestionPipelines/createIngestionPipeline';
import { import {
@ -288,45 +288,49 @@ const EditIngestionPage = () => {
} else { } else {
return ( return (
<div className="self-center"> <div className="self-center">
<PageLayout <PageLayoutV1 center>
classes="w-max-1080 h-full p-t-xss" <Space direction="vertical" size="middle">
header={<TitleBreadcrumb titleLinks={slashedBreadcrumb} />} <TitleBreadcrumb titleLinks={slashedBreadcrumb} />
layout={PageLayoutType['2ColRTL']} <div className="form-container">
rightPanel={getServiceIngestionStepGuide( <AddIngestion
activeIngestionStep, activeIngestionStep={activeIngestionStep}
true, data={ingestionData}
ingestionData?.name || '', handleCancelClick={goToService}
'', handleViewServiceClick={goToService}
ingestionType as PipelineType, heading={`Edit ${capitalize(ingestionType)} Ingestion`}
isDeployed(), ingestionAction={ingestionAction}
true, ingestionProgress={ingestionProgress}
isAirflowRunning isAirflowSetup={isAirflowRunning}
)}> isIngestionCreated={isIngestionCreated}
<div className="form-container"> isIngestionDeployed={isIngestionDeployed}
<AddIngestion pipelineType={ingestionType as PipelineType}
activeIngestionStep={activeIngestionStep} serviceCategory={serviceCategory as ServiceCategory}
data={ingestionData} serviceData={serviceData as DataObj}
handleCancelClick={goToService} setActiveIngestionStep={(step) =>
handleViewServiceClick={goToService} setActiveIngestionStep(step)
heading={`Edit ${capitalize(ingestionType)} Ingestion`} }
ingestionAction={ingestionAction} showDeployButton={showIngestionButton}
ingestionProgress={ingestionProgress} status={FormSubmitType.EDIT}
isAirflowSetup={isAirflowRunning} onAirflowStatusCheck={onAirflowStatusCheck}
isIngestionCreated={isIngestionCreated} onIngestionDeploy={onIngestionDeploy}
isIngestionDeployed={isIngestionDeployed} onSuccessSave={goToService}
pipelineType={ingestionType as PipelineType} onUpdateIngestion={onEditIngestionSave}
serviceCategory={serviceCategory as ServiceCategory} />
serviceData={serviceData as DataObj} </div>
setActiveIngestionStep={(step) => setActiveIngestionStep(step)} </Space>
showDeployButton={showIngestionButton} <div className="m-t-xlg p-x-lg w-800" data-testid="right-panel">
status={FormSubmitType.EDIT} {getServiceIngestionStepGuide(
onAirflowStatusCheck={onAirflowStatusCheck} activeIngestionStep,
onIngestionDeploy={onIngestionDeploy} true,
onSuccessSave={goToService} ingestionData?.name || '',
onUpdateIngestion={onEditIngestionSave} '',
/> ingestionType as PipelineType,
isDeployed(),
true,
isAirflowRunning
)}
</div> </div>
</PageLayout> </PageLayoutV1>
</div> </div>
); );
} }

3
openmetadata-ui/src/main/resources/ui/src/styles/components/size.less
View File

@ -47,6 +47,9 @@
.w-48 { .w-48 {
width: 12rem; width: 12rem;
} }
.w-800 {
width: 800px;
}
.w-11-12 { .w-11-12 {
width: 91.666667%; width: 91.666667%;
} }

4
openmetadata-ui/src/main/resources/ui/src/styles/spacing.less
View File

@ -140,6 +140,10 @@
.m-t-lg { .m-t-lg {
margin-top: @margin-lg; margin-top: @margin-lg;
} }
.m-t-xlg {
margin-top: @margin-xlg;
}
.mt-44 { .mt-44 {
margin-top: 11rem /* 176px */; margin-top: 11rem /* 176px */;
} }