yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-10-17 11:43:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

ui: fixed feedback 1.0.1 (#11452)

Browse Source
This commit is contained in:
Shailesh Parmar 2023-05-05 19:18:04 +05:30 committed by GitHub
parent c7902344cb
commit df257c54e2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 92 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
openmetadata-ui/src/main/resources/ui/src/components/EntityTable/EntityTable.component.tsx
View File

@ -611,6 +611,7 @@ const EntityTable = ({
<>
<Table
bordered
className="vertical-top-align-td"
columns={columns}
data-testid="entity-table"
dataSource={data}

22
openmetadata-ui/src/main/resources/ui/src/components/cardlist/CardListItem/CardWithListItem.tsx
View File

@ -16,7 +16,7 @@ import Icon from '@ant-design/icons/lib/components/Icon';
import { Button } from 'antd';
import classNames from 'classnames';
import { t } from 'i18next';
import React, { FunctionComponent } from 'react';
import React, { FunctionComponent, useEffect, useState } from 'react';
import { ReactComponent as IconRemove } from '../../../assets/svg/ic-remove.svg';
import RichTextEditorPreviewer from '../../common/rich-text-editor/RichTextEditorPreviewer';
import Loader from '../../Loader/Loader';
@ -34,6 +34,12 @@ const CardListItem: FunctionComponent<Props> = ({
className,
onRemove,
}: Props) => {
const [isExpanded, setIsExpanded] = useState(isActive);
useEffect(() => {
setIsExpanded(isActive);
}, [isActive]);
const getCardBodyStyle = () => {
const activeStyle = isActive ? cardStyle.active : cardStyle.default;
@ -126,10 +132,16 @@ const CardListItem: FunctionComponent<Props> = ({
)}>
<div className="tw-flex">
<div className="tw-self-start tw-mr-2">
{isActive ? (
<DownOutlined className="tw-text-xs" />
{isExpanded ? (
<DownOutlined
className="tw-text-xs"
onClick={() => setIsExpanded(false)}
/>
) : (
<RightOutlined className="tw-text-xs" />
<RightOutlined
className="tw-text-xs"
onClick={() => setIsExpanded(true)}
/>
)}
</div>
<div className="tw-flex tw-flex-col">
@ -144,7 +156,7 @@ const CardListItem: FunctionComponent<Props> = ({
<div
className={classNames(
cardStyle.body.base,
isActive ? cardStyle.body.active : cardStyle.body.default
isExpanded ? cardStyle.body.active : cardStyle.body.default
)}>
<RichTextEditorPreviewer
enableSeeMoreVariant={false}

3
openmetadata-ui/src/main/resources/ui/src/components/common/TierCard/TierCard.tsx
View File

@ -24,7 +24,7 @@ import { EntityReference } from '../../../generated/type/entityReference';
import { showErrorToast } from '../../../utils/ToastUtils';
import CardListItem from '../../cardlist/CardListItem/CardWithListItem';
import { CardWithListItems } from '../../cardlist/CardListItem/CardWithListItem.interface';
import './tier-card.css';
import './tier-card.style.less';
export interface TierCardProps {
currentTier?: string;
@ -161,6 +161,7 @@ const TierCard = ({
</Card>
}
data-testid="tier-card-container"
overlayClassName="tier-card-container"
placement="bottomRight"
showArrow={false}
trigger="click"

7
openmetadata-ui/src/main/resources/ui/src/components/common/TierCard/tier-card.css → openmetadata-ui/src/main/resources/ui/src/components/common/TierCard/tier-card.style.less
View File

@ -17,3 +17,10 @@
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
border-radius: 4px !important;
}
.tier-card-container {
padding: 0;
.ant-popover-inner-content {
padding: 0;
}
}

10
openmetadata-ui/src/main/resources/ui/src/enums/service.enum.ts
View File

@ -21,6 +21,16 @@ export enum ServiceCategory {
STORAGE_SERVICES = 'storageServices',
}
export enum ServiceCategoryPlural {
databaseService = 'databaseServices',
messagingService = 'messagingServices',
dashboardService = 'dashboardServices',
pipelineService = 'pipelineServices',
mlmodelService = 'mlmodelServices',
metadataService = 'metadataServices',
storageService = 'storageServices',
}
export enum IngestionType {
BIGQUERY = 'bigquery',
BIGQUERY_USAGE = 'bigquery-usage',

91
openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx
View File

@ -100,7 +100,6 @@ import {
getCurrentServiceTab,
getDeleteEntityMessage,
getResourceEntityFromServiceCategory,
getServiceCategoryFromType,
getServicePageTabs,
getServiceRouteFromServiceType,
servicePageTabs,
@ -133,18 +132,17 @@ const tableComponent = {
const ServicePage: FunctionComponent = () => {
const { t } = useTranslation();
const { isAirflowAvailable } = useAirflowStatus();
const { serviceFQN, serviceType, serviceCategory, tab } =
useParams() as Record<string, string>;
const { serviceFQN, serviceCategory, tab } = useParams<{
serviceFQN: string;
serviceCategory: ServiceTypes;
tab: string;
}>();
const isOpenMetadataService = useMemo(
() => serviceFQN === OPEN_METADATA,
[serviceFQN]
);
const [serviceName, setServiceName] = useState<ServiceTypes>(
(serviceCategory as ServiceTypes) || getServiceCategoryFromType(serviceType)
);
const { getEntityPermissionByFqn } = usePermissionProvider();
const history = useHistory();
const [slashedTableName, setSlashedTableName] = useState<
@ -160,7 +158,7 @@ const ServicePage: FunctionComponent = () => {
const [dataModelPaging, setDataModelPaging] = useState<Paging>(pagingObject);
const [paging, setPaging] = useState<Paging>(pagingObject);
const [activeTab, setActiveTab] = useState(
getCurrentServiceTab(tab, serviceName)
getCurrentServiceTab(tab, serviceCategory)
);
const [isError, setIsError] = useState(isOpenMetadataService);
const [ingestions, setIngestions] = useState<IngestionPipeline[]>([]);
@ -179,8 +177,8 @@ const ServicePage: FunctionComponent = () => {
useState<OperationPermission>(DEFAULT_ENTITY_PERMISSION);
const allowTestConn = useMemo(() => {
return shouldTestConnection(serviceType);
}, [serviceType]);
return shouldTestConnection(serviceCategory);
}, [serviceCategory]);
const fetchServicePermission = async () => {
setIsLoading(true);
@ -200,13 +198,19 @@ const ServicePage: FunctionComponent = () => {
const tabs = useMemo(
() =>
getServicePageTabs(
serviceName,
serviceCategory,
paging.total,
ingestionPaging.total,
servicePermission,
dataModelPaging.total
),
[serviceName, paging, ingestionPaging, servicePermission, dataModelPaging]
[
serviceCategory,
paging,
ingestionPaging,
servicePermission,
dataModelPaging,
]
);
const extraInfo: Array<ExtraInfo> = [
@ -237,7 +241,9 @@ const ServicePage: FunctionComponent = () => {
);
const goToEditConnection = () => {
history.push(getEditConnectionPath(serviceName || '', serviceFQN || ''));
history.push(
getEditConnectionPath(serviceCategory || '', serviceFQN || '')
);
};
const handleDelete = () => {
@ -248,19 +254,20 @@ const ServicePage: FunctionComponent = () => {
setActiveTab(tabValue);
const currentTabIndex = tabValue - 1;
if (
servicePageTabs(getCountLabel(serviceName))[currentTabIndex].path !== tab
servicePageTabs(getCountLabel(serviceCategory))[currentTabIndex].path !==
tab
) {
setActiveTab(
getCurrentServiceTab(
servicePageTabs(getCountLabel(serviceName))[currentTabIndex].path,
serviceName
servicePageTabs(getCountLabel(serviceCategory))[currentTabIndex].path,
serviceCategory
)
);
history.push({
pathname: getServiceDetailsPath(
serviceFQN,
serviceCategory,
servicePageTabs(getCountLabel(serviceName))[currentTabIndex].path
servicePageTabs(getCountLabel(serviceCategory))[currentTabIndex].path
),
});
}
@ -555,7 +562,7 @@ const ServicePage: FunctionComponent = () => {
};
const getOtherDetails = (paging?: PagingWithoutTotal) => {
switch (serviceName) {
switch (serviceCategory) {
case ServiceCategory.DATABASE_SERVICES: {
fetchDatabases(paging);
@ -593,7 +600,7 @@ const ServicePage: FunctionComponent = () => {
};
const getLinkForFqn = (fqn: string) => {
switch (serviceName) {
switch (serviceCategory) {
case ServiceCategory.MESSAGING_SERVICES:
return getEntityLink(SearchIndex.TOPIC, fqn);
@ -616,7 +623,7 @@ const ServicePage: FunctionComponent = () => {
};
const getOptionalTableCells = (data: ServicePageData) => {
switch (serviceName) {
switch (serviceCategory) {
case ServiceCategory.DATABASE_SERVICES: {
const database = data as Database;
@ -678,17 +685,10 @@ const ServicePage: FunctionComponent = () => {
}
};
useEffect(() => {
setServiceName(
(serviceCategory as ServiceTypes) ||
getServiceCategoryFromType(serviceType)
);
}, [serviceCategory, serviceType]);
useEffect(() => {
if (servicePermission.ViewAll || servicePermission.ViewBasic) {
setIsLoading(true);
getServiceByFQN(serviceName, serviceFQN, 'owner')
getServiceByFQN(serviceCategory, serviceFQN, 'owner')
.then((resService) => {
if (resService) {
const { description } = resService;
@ -699,10 +699,10 @@ const ServicePage: FunctionComponent = () => {
setDescription(description ?? '');
setSlashedTableName([
{
name: startCase(serviceName || ''),
name: startCase(serviceCategory || ''),
url: getSettingPath(
GlobalSettingsMenuCategory.SERVICES,
getServiceRouteFromServiceType(serviceName)
getServiceRouteFromServiceType(serviceCategory)
),
},
]);
@ -729,11 +729,11 @@ const ServicePage: FunctionComponent = () => {
})
.finally(() => setIsLoading(false));
}
}, [serviceFQN, serviceName, servicePermission, serviceType]);
}, [serviceFQN, serviceCategory, servicePermission]);
useEffect(() => {
if (servicePermission.ViewAll || servicePermission.ViewBasic) {
const currentTab = getCurrentServiceTab(tab, serviceName);
const currentTab = getCurrentServiceTab(tab, serviceCategory);
const currentTabIndex = currentTab - 1;
if (tabs[currentTabIndex]?.isProtected) {
@ -758,7 +758,11 @@ const ServicePage: FunctionComponent = () => {
const jsonPatch = compare(serviceDetails, updatedData);
try {
const response = await updateOwnerService(serviceName, id, jsonPatch);
const response = await updateOwnerService(
serviceCategory,
id,
jsonPatch
);
setDescription(response.description ?? '');
setServiceDetails(response);
} catch (error) {
@ -780,7 +784,7 @@ const ServicePage: FunctionComponent = () => {
const jsonPatch = compare(serviceDetails || {}, updatedData);
try {
const res = await updateOwnerService(
serviceName,
serviceCategory,
serviceDetails?.id ?? '',
jsonPatch
);
@ -823,7 +827,7 @@ const ServicePage: FunctionComponent = () => {
ingestionList={ingestions}
paging={ingestionPaging}
permissions={servicePermission}
serviceCategory={serviceName as ServiceCategory}
serviceCategory={serviceCategory as ServiceCategory}
serviceDetails={serviceDetails}
serviceList={serviceList}
serviceName={serviceFQN}
@ -843,7 +847,7 @@ const ServicePage: FunctionComponent = () => {
ingestions,
ingestionPaging,
servicePermission,
serviceName,
serviceCategory,
serviceList,
serviceFQN,
triggerIngestionById,
@ -919,9 +923,10 @@ const ServicePage: FunctionComponent = () => {
useEffect(() => {
if (
servicePageTabs(getCountLabel(serviceName))[activeTab - 1].path !== tab
servicePageTabs(getCountLabel(serviceCategory))[activeTab - 1].path !==
tab
) {
setActiveTab(getCurrentServiceTab(tab, serviceName));
setActiveTab(getCurrentServiceTab(tab, serviceCategory));
}
}, [tab]);
@ -933,7 +938,7 @@ const ServicePage: FunctionComponent = () => {
const tableColumn: ColumnsType<ServicePageData> = useMemo(() => {
const lastColumn =
ServiceCategory.DATABASE_SERVICES === serviceName
ServiceCategory.DATABASE_SERVICES === serviceCategory
? t('label.usage')
: t('label.tag-plural');
@ -995,7 +1000,7 @@ const ServicePage: FunctionComponent = () => {
),
},
];
}, [serviceName]);
}, [serviceCategory]);
const entityServiceTab = useMemo(() => {
if (isServiceLoading) {
@ -1056,7 +1061,7 @@ const ServicePage: FunctionComponent = () => {
<PageContainerV1>
{isError ? (
<ErrorPlaceHolder>
{getEntityMissingError(serviceName as string, serviceFQN)}
{getEntityMissingError(serviceCategory as string, serviceFQN)}
</ErrorPlaceHolder>
) : (
<PageLayoutV1
@ -1174,14 +1179,14 @@ const ServicePage: FunctionComponent = () => {
}
allowSoftDelete={false}
deleteMessage={getDeleteEntityMessage(
serviceName || '',
serviceCategory || '',
paging.total,
schemaCount,
tableCount
)}
entityId={serviceDetails?.id}
entityName={serviceDetails?.name || ''}
entityType={serviceName?.slice(0, -1)}
entityType={serviceCategory?.slice(0, -1)}
visible={deleteWidgetVisible}
onCancel={() => setDeleteWidgetVisible(false)}
/>

13
openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx
View File

@ -52,7 +52,7 @@ import {
} from '../constants/constants';
import { AssetsType, EntityType, FqnPart } from '../enums/entity.enum';
import { SearchIndex } from '../enums/search.enum';
import { ServiceCategory } from '../enums/service.enum';
import { ServiceCategory, ServiceCategoryPlural } from '../enums/service.enum';
import { PrimaryTableDataTypes } from '../enums/table.enum';
import { Dashboard } from '../generated/entity/data/dashboard';
import { Pipeline } from '../generated/entity/data/pipeline';
@ -948,16 +948,17 @@ export const getBreadcrumbForEntitiesWithServiceOnly = (
includeCurrent = false
) => {
const { service } = entity;
const serviceType =
service?.type === 'objectStoreService'
? ServiceCategory.STORAGE_SERVICES
: service?.type;
return [
{
name: getEntityName(service),
url: service?.name
? getServiceDetailsPath(service?.name, serviceType)
? getServiceDetailsPath(
service?.name,
ServiceCategoryPlural[
service?.type as keyof typeof ServiceCategoryPlural
]
)
: '',
},
...(includeCurrent