diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/section-line-large.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/section-line-large.svg new file mode 100644 index 00000000000..4d49c2a16f0 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/section-line-large.svg @@ -0,0 +1,3 @@ + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/section-line-medium.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/section-line-medium.svg new file mode 100644 index 00000000000..1209412f56a --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/section-line-medium.svg @@ -0,0 +1,3 @@ + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/straight-line.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/straight-line.svg new file mode 100644 index 00000000000..fde88bde599 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/straight-line.svg @@ -0,0 +1,3 @@ + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json index 818b32dc265..a0e09bbd21f 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json +++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json @@ -876,6 +876,7 @@ "synonym-lowercase-plural": "synonyms", "synonym-plural": "Synonyms", "table": "Table", + "table-constraint": "Table Constraint", "table-entity-text": "Table {{entityText}}", "table-lowercase": "table", "table-lowercase-plural": "tables", diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json index 054fbc5b196..9fa021c77ba 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json +++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json @@ -876,6 +876,7 @@ "synonym-lowercase-plural": "sinónimos", "synonym-plural": "Sinónimos", "table": "Tabla", + "table-constraint": "Table Constraint", "table-entity-text": "Tabla {{entityText}}", "table-lowercase": "tabla", "table-lowercase-plural": "tablas", diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json index 2f64da3e12b..a6ac70c09a3 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json +++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json @@ -876,6 +876,7 @@ "synonym-lowercase-plural": "synonymes", "synonym-plural": "Synonymes", "table": "Table", + "table-constraint": "Table Constraint", "table-entity-text": "Table {{entityText}}", "table-lowercase": "table", "table-lowercase-plural": "tables", diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json index ff601c5c6f1..f23ea7fcb30 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json +++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json @@ -876,6 +876,7 @@ "synonym-lowercase-plural": "シノニム", "synonym-plural": "シノニム", "table": "テーブル", + "table-constraint": "Table Constraint", "table-entity-text": "テーブル {{entityText}}", "table-lowercase": "テーブル", "table-lowercase-plural": "tables", diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json index 9e407d7fa36..f590cae1b38 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json +++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json @@ -876,6 +876,7 @@ "synonym-lowercase-plural": "sinônimos", "synonym-plural": "Sinônimos", "table": "Tabela", + "table-constraint": "Table Constraint", "table-entity-text": "Tabela {{entityText}}", "table-lowercase": "tabela", "table-lowercase-plural": "tables", diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json index e36d1c9f40e..5ccb3b656c2 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json +++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json @@ -876,6 +876,7 @@ "synonym-lowercase-plural": "同义词", "synonym-plural": "同义词", "table": "数据表", + "table-constraint": "Table Constraint", "table-entity-text": "数据表{{entityText}}", "table-lowercase": "数据表", "table-lowercase-plural": "数据表", diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableConstraints/ForeignKeyConstraint.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableConstraints/ForeignKeyConstraint.tsx new file mode 100644 index 00000000000..32bf4a8495d --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableConstraints/ForeignKeyConstraint.tsx @@ -0,0 +1,44 @@ +/* + * Copyright 2023 Collate. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import Icon from '@ant-design/icons/lib/components/Icon'; +import { Tooltip } from 'antd'; +import { ReactComponent as IconForeignKey } from 'assets/svg/foriegnKey.svg'; +import SectionLine from 'assets/svg/section-line-medium.svg'; +import React from 'react'; +import { useTranslation } from 'react-i18next'; + +const ForeignKeyConstraint = () => { + const { t } = useTranslation(); + + return ( +
+ + + + +
+ ); +}; + +export default ForeignKeyConstraint; diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableConstraints/PrimaryKeyConstraint.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableConstraints/PrimaryKeyConstraint.tsx new file mode 100644 index 00000000000..e2435282740 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableConstraints/PrimaryKeyConstraint.tsx @@ -0,0 +1,31 @@ +/* + * Copyright 2023 Collate. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import Icon from '@ant-design/icons/lib/components/Icon'; +import { ReactComponent as IconKey } from 'assets/svg/icon-key.svg'; +import StraightLine from 'assets/svg/straight-line.svg'; +import React from 'react'; + +const PrimaryKeyConstraint = () => { + return ( +
+ + +
+ ); +}; + +export default PrimaryKeyConstraint; diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableConstraints/TableConstraints.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableConstraints/TableConstraints.tsx new file mode 100644 index 00000000000..ed935d3cbd0 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableConstraints/TableConstraints.tsx @@ -0,0 +1,77 @@ +/* + * Copyright 2023 Collate. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { Space, Typography } from 'antd'; +import { ConstraintType, Table } from 'generated/entity/data/table'; +import { isUndefined, map } from 'lodash'; +import React, { FC, Fragment } from 'react'; +import { useTranslation } from 'react-i18next'; +import ForeignKeyConstraint from './ForeignKeyConstraint'; +import PrimaryKeyConstraint from './PrimaryKeyConstraint'; +import './table-constraints.less'; + +interface TableConstraintsProps { + constraints: Table['tableConstraints']; +} + +const TableConstraints: FC = ({ constraints }) => { + const { t } = useTranslation(); + + if (isUndefined(constraints)) { + return null; + } + + return ( + + + {t('label.table-constraint')} + + {constraints.map(({ constraintType, columns, referredColumns }) => { + if (constraintType === ConstraintType.PrimaryKey) { + const columnsLength = (columns?.length ?? 0) - 1; + + return ( + + {columns?.map((column, index) => ( + + {column} + {index < columnsLength ? : null} + + ))} + + ); + } + if (constraintType === ConstraintType.ForeignKey) { + return ( + + + + {columns?.join(', ')} +
+ {map(referredColumns, (referredColumn) => ( + + {referredColumn} + + ))} +
+ + + ); + } + + return null; + })} + + ); +}; + +export default TableConstraints; diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableConstraints/table-constraints.less b/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableConstraints/table-constraints.less new file mode 100644 index 00000000000..d65c011d9ed --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableConstraints/table-constraints.less @@ -0,0 +1,54 @@ +/* + * Copyright 2023 Collate. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +@import url('../../../styles/variables.less'); + +.constraint-columns { + border-radius: 5px; + background: @grey-1; + padding: 16px; + max-width: 300px; +} +.referred-column-name { + display: block; + max-width: 250px; +} + +.constraint-primary-key { + position: relative; + .primary-key-icon { + position: absolute; + transform: translate(36px, -8px); + background: white; + height: 20px; + width: 20px; + border-radius: 50%; + border: @global-border; + padding: 2px; + } +} + +.constraint-foreign-key { + position: relative; + .foreign-key-section-line { + margin-top: 20px; + } + .foreign-key-icon { + background: white; + height: 20px; + width: 20px; + border-radius: 50%; + border: @global-border; + padding: 2px; + transform: translate(-7px, -31px); + } +} diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableDetailsPageV1.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableDetailsPageV1.tsx index 8a7983e881e..9d2af7a7ffe 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableDetailsPageV1.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableDetailsPageV1.tsx @@ -87,6 +87,7 @@ import { getTagsWithoutTier, getTierTags } from 'utils/TableUtils'; import { showErrorToast, showSuccessToast } from 'utils/ToastUtils'; import { FrequentlyJoinedTables } from './FrequentlyJoinedTables/FrequentlyJoinedTables.component'; import './table-details-page-v1.less'; +import TableConstraints from './TableConstraints/TableConstraints'; const TableDetailsPageV1 = () => { const { isTourOpen, activeTabForTourDatasetPage, isTourPage } = @@ -519,6 +520,7 @@ const TableDetailsPageV1 = () => { onSelectionChange={handleTagSelection} onThreadLinkSelect={onThreadLinkSelect} /> + diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/app.less b/openmetadata-ui/src/main/resources/ui/src/styles/app.less index 783241757e0..737311dfcf1 100644 --- a/openmetadata-ui/src/main/resources/ui/src/styles/app.less +++ b/openmetadata-ui/src/main/resources/ui/src/styles/app.less @@ -434,6 +434,8 @@ a[href].link-text-grey, } } .entity-tag-right-panel-container { + height: calc(100vh - 236px); + overflow-y: scroll; border-left: @global-border; margin-left: 20px; padding: 12px 8px 0 8px;