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

[issues-5528] UI improvements (#5629)

Browse Source
This commit is contained in:
yug-shah0106 2022-06-24 21:05:51 +05:30 committed by GitHub
parent 3e18f842e1
commit d7da180503
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 150 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
openmetadata-ui/src/main/resources/ui/src/components/AddService/AddService.component.tsx
View File

@ -265,38 +265,41 @@ const AddService = ({
}; };
return ( return (
<PageLayout <div className="tw-self-center">
classes="tw-max-w-full-hd tw-h-full tw-pt-4" {' '}
header={<TitleBreadcrumb titleLinks={slashedBreadcrumb} />} <PageLayout
layout={PageLayoutType['2ColRTL']} classes="tw-max-w-full-hd tw-h-full tw-pt-4"
rightPanel={fetchRightPanel()}> header={<TitleBreadcrumb titleLinks={slashedBreadcrumb} />}
<div className="tw-form-container"> layout={PageLayoutType['2ColRTL']}
{addIngestion ? ( rightPanel={fetchRightPanel()}>
<AddIngestion <div className="tw-form-container">
isAirflowSetup {addIngestion ? (
activeIngestionStep={activeIngestionStep} <AddIngestion
handleCancelClick={() => handleAddIngestion(false)} isAirflowSetup
handleViewServiceClick={handleViewServiceClick} activeIngestionStep={activeIngestionStep}
heading={`Add ${capitalize(PipelineType.Metadata)} Ingestion`} handleCancelClick={() => handleAddIngestion(false)}
ingestionAction={ingestionAction} handleViewServiceClick={handleViewServiceClick}
ingestionProgress={ingestionProgress} heading={`Add ${capitalize(PipelineType.Metadata)} Ingestion`}
isIngestionCreated={isIngestionCreated} ingestionAction={ingestionAction}
isIngestionDeployed={isIngestionDeployed} ingestionProgress={ingestionProgress}
pipelineType={PipelineType.Metadata} isIngestionCreated={isIngestionCreated}
serviceCategory={serviceCategory} isIngestionDeployed={isIngestionDeployed}
serviceData={newServiceData as DataObj} pipelineType={PipelineType.Metadata}
setActiveIngestionStep={(step) => setActiveIngestionStep(step)} serviceCategory={serviceCategory}
showDeployButton={showDeployButton} serviceData={newServiceData as DataObj}
status={FormSubmitType.ADD} setActiveIngestionStep={(step) => setActiveIngestionStep(step)}
onAddIngestionSave={onAddIngestionSave} showDeployButton={showDeployButton}
onAirflowStatusCheck={onAirflowStatusCheck} status={FormSubmitType.ADD}
onIngestionDeploy={onIngestionDeploy} onAddIngestionSave={onAddIngestionSave}
/> onAirflowStatusCheck={onAirflowStatusCheck}
) : ( onIngestionDeploy={onIngestionDeploy}
addNewService() />
)} ) : (
</div> addNewService()
</PageLayout> )}
</div>
</PageLayout>
</div>
); );
}; };

63
openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx
View File

@ -657,38 +657,37 @@ const Explore: React.FC<ExploreProps> = ({
const fetchLeftPanel = () => { const fetchLeftPanel = () => {
return ( return (
<div className="tw-h-full"> <Card
<Card className="tw-h-full"
data-testid="data-summary-container" data-testid="data-summary-container"
style={{ ...leftPanelAntCardStyle, marginTop: '16px' }}> style={{ ...leftPanelAntCardStyle, marginTop: '16px' }}>
<Fragment> <Fragment>
<div className="tw-w-64 tw-mr-5 tw-flex-shrink-0"> <div className="tw-w-64 tw-mr-5 tw-flex-shrink-0">
<Button <Button
className={classNames('tw-underline tw-pb-4')} className={classNames('tw-underline tw-pb-4')}
disabled={!getFilterCount(filters)} disabled={!getFilterCount(filters)}
size="custom" size="custom"
theme="primary" theme="primary"
variant="link" variant="link"
onClick={() => resetFilters(true)}> onClick={() => resetFilters(true)}>
Clear All Clear All
</Button> </Button>
</div> </div>
<div className="tw-filter-seperator" /> <div className="tw-filter-seperator" />
{!error && ( {!error && (
<FacetFilter <FacetFilter
aggregations={getAggrWithDefaultValue( aggregations={getAggrWithDefaultValue(
aggregations, aggregations,
visibleFilters visibleFilters
)} )}
filters={getFacetedFilter()} filters={getFacetedFilter()}
showDeletedOnly={showDeleted} showDeletedOnly={showDeleted}
onSelectDeleted={handleShowDeleted} onSelectDeleted={handleShowDeleted}
onSelectHandler={handleSelectedFilter} onSelectHandler={handleSelectedFilter}
/> />
)} )}
</Fragment> </Fragment>
</Card> </Card>
</div>
); );
}; };

2
openmetadata-ui/src/main/resources/ui/src/components/ServiceConfig/ServiceConfig.tsx
View File

@ -87,7 +87,7 @@ const ServiceConfig = ({
return ( return (
<div className="tw-bg-white tw-h-full"> <div className="tw-bg-white tw-h-full">
<div <div
className="tw-max-w-xl tw-mx-auto tw-pb-6" className="tw-max-w-xl tw-pb-6"
data-testid="service-config" data-testid="service-config"
id="serviceConfig"> id="serviceConfig">
<div className="tw-mx-auto">{getDynamicFields()}</div> <div className="tw-mx-auto">{getDynamicFields()}</div>

2
openmetadata-ui/src/main/resources/ui/src/components/ServiceConnectionDetails/ServiceConnectionDetails.component.tsx
View File

@ -95,7 +95,7 @@ const ServiceConnectionDetails = ({
return ( return (
<div className="tw-w-1/2 tw-flex tw-nowrap tw-mb-3" key={key}> <div className="tw-w-1/2 tw-flex tw-nowrap tw-mb-3" key={key}>
<div className="tw-w-1/3 tw-flex"> <div className="tw-w-1/3 tw-flex">
<p className="tw-text-gray-400 tw-m-0">{title || key}:</p> <p className="tw-text-gray-500 tw-m-0">{title || key}:</p>
<PopOver <PopOver
delay={0} delay={0}
position="bottom" position="bottom"

4
openmetadata-ui/src/main/resources/ui/src/components/TeamsAndUsers/TeamsAndUsers.component.tsx
View File

@ -132,7 +132,7 @@ const TeamsAndUsers = ({
currentTeam?.name currentTeam?.name
)}`}> )}`}>
<p <p
className="tag-category label-category tw-self-center tw-truncate tw-w-52" className="tag-category label-category tw-self-center tw-truncate"
data-testid="team-name" data-testid="team-name"
title={team.displayName ?? team.name}> title={team.displayName ?? team.name}>
{team.displayName ?? team.name} {team.displayName ?? team.name}
@ -185,7 +185,7 @@ const TeamsAndUsers = ({
activeUserTab activeUserTab
)}`}> )}`}>
<p <p
className="tag-category label-category tw-self-center tw-truncate tw-w-52" className="tag-category label-category tw-self-center tw-truncate"
data-testid="user-type" data-testid="user-type"
title={capitalize(user.name)}> title={capitalize(user.name)}>
{capitalize(user.name)} {capitalize(user.name)}

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

@ -241,43 +241,45 @@ const AddIngestionPage = () => {
); );
} else { } else {
return ( return (
<PageLayout <div className="tw-self-center">
classes="tw-max-w-full-hd tw-h-full tw-pt-4" <PageLayout
header={<TitleBreadcrumb titleLinks={slashedBreadcrumb} />} classes="tw-max-w-full-hd tw-h-full tw-pt-4"
layout={PageLayoutType['2ColRTL']} header={<TitleBreadcrumb titleLinks={slashedBreadcrumb} />}
rightPanel={getServiceIngestionStepGuide( layout={PageLayoutType['2ColRTL']}
activeIngestionStep, rightPanel={getServiceIngestionStepGuide(
true, activeIngestionStep,
`${serviceData?.name || ''}_${ingestionType}`, true,
'', `${serviceData?.name || ''}_${ingestionType}`,
ingestionType as PipelineType, '',
isDeployed(), ingestionType as PipelineType,
false, isDeployed(),
isAirflowRunning false,
)}> isAirflowRunning
<div className="tw-form-container"> )}>
<AddIngestion <div className="tw-form-container">
activeIngestionStep={activeIngestionStep} <AddIngestion
handleCancelClick={goToService} activeIngestionStep={activeIngestionStep}
handleViewServiceClick={goToService} handleCancelClick={goToService}
heading={`Add ${capitalize(ingestionType)} Ingestion`} handleViewServiceClick={goToService}
ingestionAction={ingestionAction} heading={`Add ${capitalize(ingestionType)} Ingestion`}
ingestionProgress={ingestionProgress} ingestionAction={ingestionAction}
isAirflowSetup={isAirflowRunning} ingestionProgress={ingestionProgress}
isIngestionCreated={isIngestionCreated} isAirflowSetup={isAirflowRunning}
isIngestionDeployed={isIngestionDeployed} isIngestionCreated={isIngestionCreated}
pipelineType={ingestionType as PipelineType} isIngestionDeployed={isIngestionDeployed}
serviceCategory={serviceCategory as ServiceCategory} pipelineType={ingestionType as PipelineType}
serviceData={serviceData as DataObj} serviceCategory={serviceCategory as ServiceCategory}
setActiveIngestionStep={(step) => setActiveIngestionStep(step)} serviceData={serviceData as DataObj}
showDeployButton={showIngestionButton} setActiveIngestionStep={(step) => setActiveIngestionStep(step)}
status={FormSubmitType.ADD} showDeployButton={showIngestionButton}
onAddIngestionSave={onAddIngestionSave} status={FormSubmitType.ADD}
onAirflowStatusCheck={onAirflowStatusCheck} onAddIngestionSave={onAddIngestionSave}
onIngestionDeploy={onIngestionDeploy} onAirflowStatusCheck={onAirflowStatusCheck}
/> onIngestionDeploy={onIngestionDeploy}
</div> />
</PageLayout> </div>
</PageLayout>
</div>
); );
} }
}; };

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

@ -274,45 +274,47 @@ const EditIngestionPage = () => {
return <ErrorPlaceHolder>{errorMsg}</ErrorPlaceHolder>; return <ErrorPlaceHolder>{errorMsg}</ErrorPlaceHolder>;
} else { } else {
return ( return (
<PageLayout <div className="tw-self-center">
classes="tw-max-w-full-hd tw-h-full tw-pt-4" <PageLayout
header={<TitleBreadcrumb titleLinks={slashedBreadcrumb} />} classes="tw-max-w-full-hd tw-h-full tw-pt-4"
layout={PageLayoutType['2ColRTL']} header={<TitleBreadcrumb titleLinks={slashedBreadcrumb} />}
rightPanel={getServiceIngestionStepGuide( layout={PageLayoutType['2ColRTL']}
activeIngestionStep, rightPanel={getServiceIngestionStepGuide(
true, activeIngestionStep,
ingestionData?.name || '', true,
'', ingestionData?.name || '',
ingestionType as PipelineType, '',
isDeployed(), ingestionType as PipelineType,
true, isDeployed(),
isAirflowRunning true,
)}> isAirflowRunning
<div className="tw-form-container"> )}>
<AddIngestion <div className="tw-form-container">
activeIngestionStep={activeIngestionStep} <AddIngestion
data={ingestionData} activeIngestionStep={activeIngestionStep}
handleCancelClick={goToService} data={ingestionData}
handleViewServiceClick={goToService} handleCancelClick={goToService}
heading={`Edit ${capitalize(ingestionType)} Ingestion`} handleViewServiceClick={goToService}
ingestionAction={ingestionAction} heading={`Edit ${capitalize(ingestionType)} Ingestion`}
ingestionProgress={ingestionProgress} ingestionAction={ingestionAction}
isAirflowSetup={isAirflowRunning} ingestionProgress={ingestionProgress}
isIngestionCreated={isIngestionCreated} isAirflowSetup={isAirflowRunning}
isIngestionDeployed={isIngestionDeployed} isIngestionCreated={isIngestionCreated}
pipelineType={ingestionType as PipelineType} isIngestionDeployed={isIngestionDeployed}
serviceCategory={serviceCategory as ServiceCategory} pipelineType={ingestionType as PipelineType}
serviceData={serviceData as DataObj} serviceCategory={serviceCategory as ServiceCategory}
setActiveIngestionStep={(step) => setActiveIngestionStep(step)} serviceData={serviceData as DataObj}
showDeployButton={showIngestionButton} setActiveIngestionStep={(step) => setActiveIngestionStep(step)}
status={FormSubmitType.EDIT} showDeployButton={showIngestionButton}
onAirflowStatusCheck={onAirflowStatusCheck} status={FormSubmitType.EDIT}
onIngestionDeploy={onIngestionDeploy} onAirflowStatusCheck={onAirflowStatusCheck}
onSuccessSave={goToService} onIngestionDeploy={onIngestionDeploy}
onUpdateIngestion={onEditIngestionSave} onSuccessSave={goToService}
/> onUpdateIngestion={onEditIngestionSave}
</div> />
</PageLayout> </div>
</PageLayout>
</div>
); );
} }
}; };