yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-07-30 12:49:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed misc issues (#178)

Browse Source 
* Fixed misc issues

* Tags usage fixed

* Fixed owner and tier issues
This commit is contained in:
darth-coder00 2021-08-15 23:30:06 +05:30 committed by GitHub
parent 88c95f5c26
commit 7aeffc8e8c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 213 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
catalog-rest-service/src/main/resources/ui/src/auth-provider/AuthProvider.tsx
View File

@ -121,6 +121,7 @@ const AuthProvider: FunctionComponent<AuthProviderProps> = ({
.then((res: AxiosResponse) => {
if (res.data) {
appState.userDetails = res.data;
fetchAllUsers();
handledVerifiedUser();
} else {
cookieStorage.removeItem(oidcTokenKey);

105
catalog-rest-service/src/main/resources/ui/src/components/Modals/FirstTimeUserModal/FirstTimeUserModal.tsx Normal file
View File

@ -0,0 +1,105 @@
import classNames from 'classnames';
import React, { FunctionComponent, useState } from 'react';
import { Button } from '../../buttons/Button/Button';
type Props = {
onSave: () => void;
onCancel: () => void;
};
const description = [
'OpenMetadata is a Centralized Metadata Store.',
'Discover all your data assets in a single place, collaborate with your co-workers.',
'Understand your data assets and contribute to make it richer.',
];
export const FirstTimeUserModal: FunctionComponent<Props> = ({
onCancel,
}: Props) => {
const [active, setActive] = useState<number>(0);
const [lastSlide, setLastSlide] = useState<boolean>(false);
const previousClick = () => {
if (lastSlide) {
// to somthing
} else {
setActive((pre) => pre - 1);
}
};
const nextClick = () => {
if (lastSlide) {
onCancel();
} else {
setActive((pre) => {
const newVal = pre + 1;
description.length - 1 === newVal && setLastSlide(true);
return newVal;
});
}
};
return (
<dialog className="tw-modal">
<div className="tw-modal-backdrop tw-opacity-80" />
<div className="tw-modal-container tw-max-w-xl tw-max-h-90vh tw-bg-gradient-to-bl tw-to-primary-lite tw-from-secondary-lite">
<div className="tw-modal-header tw-border-0 tw-justify-center tw-pt-8">
<p className="tw-modal-title tw-text-h4 tw-font-semibold tw-text-primary-active">
Welcome to OpenMetadata
</p>
</div>
<div className="tw-modal-body tw-relative tw-h-64 tw-justify-center tw-items-center">
{description.map((d, i) => (
<p
className={classNames(
i === active
? 'tw-opacity-100 tw-relative tw-transition-opacity tw-delay-200'
: 'tw-opacity-0 tw-absolute',
'tw-text-xl tw-font-medium tw-text-center'
)}
key={i}>
{d}
</p>
))}
</div>
<div className="tw-modal-footer tw-border-0 tw-justify-between">
<Button
className={classNames(
'tw-bg-primary-active tw-text-white',
active === 0 ? 'tw-invisible' : null
)}
size="regular"
theme="primary"
variant="contained"
onClick={previousClick}>
{lastSlide ? (
'Take a Tour'
) : (
<>
<i className="fas fa-arrow-left tw-text-sm tw-align-middle tw-pr-1.5" />{' '}
<span>Previous</span>
</>
)}
</Button>
<Button
className="tw-bg-primary-active tw-text-white"
size="regular"
theme="primary"
variant="contained"
onClick={nextClick}>
{lastSlide ? (
'Skip and go to landing page'
) : (
<>
<span>Next</span>
<i className="fas fa-arrow-right tw-text-sm tw-align-middle tw-pl-1.5" />
</>
)}
</Button>
</div>
</div>
</dialog>
);
};

13
catalog-rest-service/src/main/resources/ui/src/components/my-data-details/ManageTab.tsx
View File

@ -20,6 +20,7 @@ import { TableDetail } from 'Models';
import React, { FunctionComponent, useEffect, useState } from 'react';
import appState from '../../AppState';
import cardData from '../../jsons/tiersData.json';
import { getUserTeams } from '../../utils/CommonUtils';
import SVGIcons from '../../utils/SvgUtils';
import { Button } from '../buttons/Button/Button';
import CardListItem from '../card-list/CardListItem/CardWithListItems';
@ -53,13 +54,11 @@ const ManageTab: FunctionComponent<Props> = ({
: appState.users.length
? appState.users[0]
: undefined;
const teams = (appState.userDetails.teams || appState.userTeams).map(
(team) => ({
name: team.name,
value: team.id,
group: 'Teams',
})
);
const teams = getUserTeams().map((team) => ({
name: team?.displayName || team.name,
value: team.id,
group: 'Teams',
}));
return user
? [{ name: user.displayName, value: user.id }, ...teams]

15
catalog-rest-service/src/main/resources/ui/src/components/searched-data/SearchedData.tsx
View File

@ -20,6 +20,10 @@ import PropTypes from 'prop-types';
import React, { ReactNode } from 'react';
import { PAGE_SIZE } from '../../constants/constants';
import { pluralize } from '../../utils/CommonUtils';
import {
getOwnerFromId,
getTierFromSearchTableTags,
} from '../../utils/TableUtils';
import ErrorPlaceHolder from '../common/error-with-placeholder/ErrorPlaceHolder';
import TableDataCard from '../common/table-data-card/TableDataCard';
import PageContainer from '../containers/PageContainer';
@ -74,12 +78,17 @@ const SearchedData: React.FC<SearchedDataProp> = ({
description={table.description}
fullyQualifiedName={table.fullyQualifiedName}
name={table.name}
owner={table.tableEntity.owner?.name}
owner={getOwnerFromId(table.owner)?.name}
serviceType={table.serviceType || '--'}
tableType={table.tableType}
tags={table.tags}
tier={table.tier?.split('.')[1]}
usage={table.weeklyStats}
tier={
(
table.tier ||
getTierFromSearchTableTags(table.tags)
)?.split('.')[1]
}
usage={table.weeklyPercentileRank}
/>
</div>
))}

2
catalog-rest-service/src/main/resources/ui/src/components/tags-container/tags-container.tsx
View File

@ -159,7 +159,7 @@ const TagsContainer: FunctionComponent<TagsContainerProps> = ({
className={classNames(
editable
? 'tw-bg-white tw-p-1 tw-border-2 tw-border-primary tw-cursor-text'
: null
: 'tw-cursor-pointer'
)}
onClick={(event) => {
if (editable) {

2
catalog-rest-service/src/main/resources/ui/src/components/tags/tags.styles.ts
View File

@ -17,7 +17,7 @@
export const tagStyles = {
base: `tw-relative tw-inline-flex tw-text-xs tw-font-medium
tw-mr-2 tw-my-0.5 tw-cursor-pointer tw-rounded tw-whitespace-nowrap`,
tw-mr-2 tw-my-0.5 tw-rounded tw-whitespace-nowrap`,
contained: 'tw-bg-tag',
outlined: 'tw-bg-transparent',

2
catalog-rest-service/src/main/resources/ui/src/components/tags/tags.tsx
View File

@ -39,7 +39,7 @@ const Tags: FunctionComponent<TagProps> = ({
<span className={classNames(textBaseStyle, textLayoutStyles)}>{tag}</span>
{editable && (
<span
className="tw-py-1 tw-px-2 tw-rounded"
className="tw-py-1 tw-px-2 tw-rounded tw-cursor-pointer"
onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
e.preventDefault();
e.stopPropagation();

3
catalog-rest-service/src/main/resources/ui/src/interface/types.d.ts vendored
View File

@ -169,6 +169,7 @@ declare module 'Models' {
export type UserTeam = {
description: string;
displayName?: string;
href: string;
id: string;
name: string;
@ -197,7 +198,9 @@ declare module 'Models' {
tags: string[];
tableEntity: TableEntity;
dailyStats: number;
dailyPercentileRank: number;
weeklyStats: number;
weeklyPercentileRank: number;
service?: string;
serviceType?: string;
tier: string;

3
catalog-rest-service/src/main/resources/ui/src/pages/my-data-details/index.tsx
View File

@ -60,6 +60,7 @@ import {
import { serviceTypeLogo } from '../../utils/ServiceUtils';
import SVGIcons from '../../utils/SvgUtils';
import {
getOwnerFromId,
getTagsWithoutTier,
getTierFromTableTags,
getUsagePercentile,
@ -125,7 +126,7 @@ const MyDataDetailsPage = () => {
setTableDetails(res.data);
setTableId(id);
setTier(getTierFromTableTags(tags));
setOwner(owner);
setOwner(getOwnerFromId(owner?.id));
// need to check if already following or not with logedIn user id
setIsFollowing(
!!followers.filter(({ id }: { id: string }) => id === USERId).length

18
catalog-rest-service/src/main/resources/ui/src/pages/tags/index.tsx
View File

@ -320,14 +320,20 @@ const TagsPage = () => {
</button>
</div>
<div className="tw-mt-1">
<span className="tw-text-gray-400 tw-mr-1">
<span className="tw-text-grey-muted tw-mr-1">
Usage:
</span>
<Link
className="link-text tw-align-middle"
to={`/explore?tags=${tag.fullyQualifiedName}`}>
{tag.usageCount}
</Link>
{tag.usageCount ? (
<Link
className="link-text tw-align-middle"
to={`/explore?tags=${tag.fullyQualifiedName}`}>
{tag.usageCount}
</Link>
) : (
<span className="tw-no-description">
Not used
</span>
)}
</div>
</td>
<td

2
catalog-rest-service/src/main/resources/ui/src/styles/tailwind.css
View File

@ -285,7 +285,7 @@
}
.signup-box {
@apply tw-m-auto tw-w-120;
@apply tw-m-auto tw-w-120 tw-bg-white;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}

4
catalog-rest-service/src/main/resources/ui/src/utils/APIUtils.js
View File

@ -13,10 +13,14 @@ export const formatDataResponse = (hits) => {
newData.tableType = hit._source.table_type;
newData.tags = hit._source.tags;
newData.dailyStats = hit._source.daily_stats;
newData.dailyPercentileRank = hit._source.daily_percentile_rank;
newData.weeklyStats = hit._source.weekly_stats;
newData.weeklyPercentileRank = hit._source.weekly_percentile_rank;
newData.service = hit._source.service;
newData.serviceType = hit._source.service_type;
newData.tableEntity = hit._source.table_entity;
newData.tier = hit._source.tier;
newData.owner = hit._source.owner;
return newData;
});

16
catalog-rest-service/src/main/resources/ui/src/utils/CommonUtils.ts
View File

@ -1,4 +1,5 @@
import { isEmpty } from 'lodash';
import { UserTeam } from 'Models';
import AppState from '../AppState';
export const arraySorterByKey = (
@ -68,3 +69,18 @@ export const pluralize = (count: number, noun: string, suffix = 's') => {
count !== 1 && count !== 0 ? suffix : ''
}`;
};
export const getUserTeams = (): Array<UserTeam> => {
let retVal: Array<UserTeam>;
if (AppState.userDetails.teams) {
retVal = AppState.userDetails.teams.map((item) => {
const team = AppState.userTeams.find((obj) => obj.id === item.id);
return { ...item, displayName: team?.displayName };
});
} else {
retVal = AppState.userTeams;
}
return retVal;
};

49
catalog-rest-service/src/main/resources/ui/src/utils/TableUtils.tsx
View File

@ -1,7 +1,9 @@
import { ColumnTags } from 'Models';
import { ColumnTags, TableDetail } from 'Models';
import React from 'react';
import AppState from '../AppState';
import PopOver from '../components/common/popover/PopOver';
import { ConstraintTypes } from '../enums/table.enum';
import { getUserTeams } from './CommonUtils';
import { ordinalize } from './StringsUtils';
import SVGIcons from './SvgUtils';
@ -57,6 +59,51 @@ export const getTagsWithoutTier = (
);
};
export const getTierFromSearchTableTags = (tags: Array<string>): string => {
const tierTag = tags.find(
(item) =>
item.startsWith('Tier.Tier') && !isNaN(parseInt(item.substring(9).trim()))
);
return tierTag || '';
};
export const getSearchTableTagsWithoutTier = (
tags: Array<string>
): Array<string> => {
return tags.filter(
(item) =>
!item.startsWith('Tier.Tier') || isNaN(parseInt(item.substring(9).trim()))
);
};
export const getOwnerFromId = (
id?: string
): TableDetail['owner'] | undefined => {
let retVal: TableDetail['owner'];
if (id) {
const user = AppState.users.find((item) => item.id === id);
if (user) {
retVal = {
name: user.displayName,
id: user.id,
type: 'user',
};
} else {
const team = getUserTeams().find((item) => item.id === id);
if (team) {
retVal = {
name: team.displayName || team.name,
id: team.id,
type: 'team',
};
}
}
}
return retVal;
};
export const getConstraintIcon = (constraint = '') => {
let title: string, icon: string;
switch (constraint) {