diff --git a/catalog-rest-service/src/main/resources/ui/src/components/my-data-details/SampleDataTable.tsx b/catalog-rest-service/src/main/resources/ui/src/components/my-data-details/SampleDataTable.tsx index 88c84f72a02..2d1b19bfd98 100644 --- a/catalog-rest-service/src/main/resources/ui/src/components/my-data-details/SampleDataTable.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/components/my-data-details/SampleDataTable.tsx @@ -15,52 +15,36 @@ * limitations under the License. */ +import classNames from 'classnames'; +import { lowerCase } from 'lodash'; import React, { FunctionComponent } from 'react'; import { isEven } from '../../utils/CommonUtils'; - -// type Column = { -// columnConstraint?: string; -// columnDataType: string; -// description: string; -// name: string; -// ordinalPosition: number; -// piiTags?: Array; -// }; - -type MockColumn = { - columnId: number; - name: string; - columnDataType: string; - description?: string; - selected?: boolean; - piiTags?: Array; -}; +type Columns = { name: string; dataType: string }; type Props = { - columns: Array; - data: Array>; + sampleData: { + columns: Array; + rows: Array>; + }; }; -const SampleDataTable: FunctionComponent = ({ - columns, - data, -}: Props) => { +const SampleDataTable: FunctionComponent = ({ sampleData }: Props) => { return (
- - {columns.map((column) => { + + {sampleData.columns.map((column) => { return ( ); @@ -68,21 +52,22 @@ const SampleDataTable: FunctionComponent = ({ - {data.map((row, rowIndex) => { + {sampleData.rows.map((row, rowIndex) => { return ( - {columns.map((column) => { + {row.map((data) => { return ( ); })} diff --git a/catalog-rest-service/src/main/resources/ui/src/components/my-data-details/SchemaTab.tsx b/catalog-rest-service/src/main/resources/ui/src/components/my-data-details/SchemaTab.tsx index 575fbac6c68..855fac4bbf7 100644 --- a/catalog-rest-service/src/main/resources/ui/src/components/my-data-details/SchemaTab.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/components/my-data-details/SchemaTab.tsx @@ -16,9 +16,8 @@ */ import { lowerCase } from 'lodash'; -import { ColumnJoins, MockColumn, TableColumn } from 'Models'; -import React, { FunctionComponent, useEffect, useState } from 'react'; -import { fetchData } from '../../pages/my-data-details/index.mock'; +import { ColumnJoins, SampleData, TableColumn } from 'Models'; +import React, { FunctionComponent, useState } from 'react'; import Searchbar from '../common/searchbar/Searchbar'; import SampleDataTable from './SampleDataTable'; import SchemaTable from './SchemaTable'; @@ -27,55 +26,69 @@ type Props = { columns: Array; joins: Array; onUpdate: (columns: Array) => void; + sampleData: SampleData; }; const SchemaTab: FunctionComponent = ({ columns, joins, onUpdate, + sampleData, }: Props) => { - const [data, setData] = useState>>([]); const [searchText, setSearchText] = useState(''); - const [checkedValue] = useState('schema'); - const [mockColumns, setMockColumns] = useState>([]); - - useEffect(() => { - const schemaDetails = fetchData(); - setData(schemaDetails.data); - // TODO remove this to show actual columns from tables api - setMockColumns(schemaDetails.columns); - }, []); + const [checkedValue, setCheckedValue] = useState('schema'); const handleSearchAction = (searchValue: string) => { setSearchText(searchValue); }; - // const handleToggleChange = (value: string) => { - // setCheckedValue(value); - // }; + const handleToggleChange = (value: string) => { + setCheckedValue(value); + }; - // const getToggleButtonClasses = (type: string): string => { - // return ( - // 'tw-flex-1 tw-text-primary tw-font-medium tw-border tw-border-transparent - // tw-rounded-md tw-py-1 tw-px-2 focus:tw-outline-none' + - // (type === checkedValue ? ' tw-bg-blue-100 tw-border-blue-100' : '') - // ); - // }; + const getToggleButtonClasses = (type: string): string => { + return ( + 'tw-flex-1 tw-text-primary tw-font-medium tw-border tw-border-transparent tw-rounded tw-py-1 tw-px-2 focus:tw-outline-none' + + (type === checkedValue ? ' tw-bg-primary-hover-lite tw-border-main' : '') + ); + }; + + const getSampleDataWithType = () => { + const updatedColumns = sampleData.columns.map((column) => { + const matchedColumn = columns.find((col) => col.name === column); + + if (matchedColumn) { + return { + name: matchedColumn.name, + dataType: matchedColumn.columnDataType, + }; + } else { + return { + name: column, + dataType: '', + }; + } + }); + + return { columns: updatedColumns, rows: sampleData.rows }; + }; return (
- + {checkedValue === 'schema' && ( + + )}
- {/*
-
+
-
*/} +
@@ -102,20 +117,7 @@ const SchemaTab: FunctionComponent = ({ onUpdate={onUpdate} /> ) : ( - { - return column; - }) - .map((column) => { - return { - columnId: column.columnId, - name: column.name, - columnDataType: column.columnDataType, - }; - })} - data={data} - /> + )}
diff --git a/catalog-rest-service/src/main/resources/ui/src/components/my-data-details/SchemaTable.tsx b/catalog-rest-service/src/main/resources/ui/src/components/my-data-details/SchemaTable.tsx index 903bd1a7af8..cbd1566f64f 100644 --- a/catalog-rest-service/src/main/resources/ui/src/components/my-data-details/SchemaTable.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/components/my-data-details/SchemaTable.tsx @@ -231,177 +231,182 @@ const SchemaTable: FunctionComponent = ({ return ( <> -
-

{column.name}

- - {column.columnDataType} + key={column.name}> + {column.name} + + ({lowerCase(column.dataType)})
- {row[column.name]} + key={data}> + {data}
- - - - - - - - - - {searchedColumns.map((column, index) => { - return ( - - +
+
Column NameData TypeDescriptionTags
- {getConstraintIcon(column.columnConstraint)} - {column.name} -
+ + + + + + + + + + {searchedColumns.map((column, index) => { + return ( + + - - + - + - - ); - })} - -
Column NameData TypeDescriptionTags
+ {getConstraintIcon(column.columnConstraint)} + {column.name} + - - {column.columnDataType - ? lowerCase(getDataTypeString(column.columnDataType)) - : ''} - - -
-
handleEditColumn(column, index)}> -
- {column.description ? ( - + + {column.columnDataType + ? lowerCase(getDataTypeString(column.columnDataType)) + : ''} + +
+
+
handleEditColumn(column, index)}> +
+ {column.description ? ( + + ) : ( + + No description added + + )} +
+ +
+ + {checkIfJoinsAvailable(column.name) && ( +
+ + Frequently joined columns: - )} -
- -
- {checkIfJoinsAvailable(column.name) && ( -
- - Frequently joined columns: - - {getFrequentlyJoinedWithColumns(column.name) - .slice(0, 3) - .map((columnJoin, index) => ( - - {index > 0 && ,} - ( + + {index > 0 && ( + , + )} + + {getPartialNameFromFQN( columnJoin.fullyQualifiedName, - ['column'] - ) - )} - onClick={handleClick}> - {getPartialNameFromFQN( - columnJoin.fullyQualifiedName, - ['database', 'table', 'column'] - )} - - - ))} - {getFrequentlyJoinedWithColumns(column.name).length > - 3 && ( - - {getFrequentlyJoinedWithColumns(column.name) - ?.slice(3) - .map((columnJoin, index) => ( - - + + ))} + {getFrequentlyJoinedWithColumns(column.name).length > + 3 && ( + + {getFrequentlyJoinedWithColumns(column.name) + ?.slice(3) + .map((columnJoin, index) => ( + + + {getPartialNameFromFQN( columnJoin.fullyQualifiedName, - ['column'] - ) - )} - onClick={handleClick}> - {getPartialNameFromFQN( - columnJoin.fullyQualifiedName, - ['database', 'table', 'column'] - )} - - - ))} -
- } - position="bottom" - theme="light" - trigger="click"> - ... - - )} - - )} - - 		{ - if (!editColumnTag) { - handleEditColumnTag(column, index); - } - }}> - { - handleTagSelection(); - }} - onSelectionChange={(tags) => { - handleTagSelection(tags); + ['database', 'table', 'column'] + )} + + + ))} + + } + position="bottom" + theme="light" + trigger="click"> + ... + + )} + + )} + + { + if (!editColumnTag) { + handleEditColumnTag(column, index); + } }}> - {column.tags.length ? ( - - ) : ( - - - - )} - -
+ { + handleTagSelection(); + }} + onSelectionChange={(tags) => { + handleTagSelection(tags); + }}> + {column.tags.length ? ( + + ) : ( + + + + )} + + + + ); + })} + + +
{editColumn && ( ; + rows: Array>; + }; } diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/my-data-details/index.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/my-data-details/index.tsx index 8688c53a6f8..97d54a59c19 100644 --- a/catalog-rest-service/src/main/resources/ui/src/pages/my-data-details/index.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/pages/my-data-details/index.tsx @@ -20,7 +20,13 @@ import classNames from 'classnames'; import { compare } from 'fast-json-patch'; import { isEqual, isNil } from 'lodash'; import { observer } from 'mobx-react'; -import { ColumnTags, TableColumn, TableDetail, TableJoinsData } from 'Models'; +import { + ColumnTags, + SampleData, + TableColumn, + TableDetail, + TableJoinsData, +} from 'Models'; import React, { useEffect, useState } from 'react'; import { useParams } from 'react-router-dom'; import { getDatabase } from '../../axiosAPIs/databaseAPI'; @@ -89,6 +95,10 @@ const MyDataDetailsPage = () => { const [usage, setUsage] = useState(''); const [weeklyUsageCount, setWeeklyUsageCount] = useState(''); const [columns, setColumns] = useState>([]); + const [sampleData, setSampleData] = useState({ + columns: [], + rows: [], + }); const [tableTags, setTableTags] = useState>([]); const [isEdit, setIsEdit] = useState(false); const [owner, setOwner] = useState(); @@ -108,7 +118,7 @@ const MyDataDetailsPage = () => { useEffect(() => { getTableDetailsByFQN( tableFQN, - 'columns, database, usageSummary, followers, joins, tags, owner' + 'columns, database, usageSummary, followers, joins, tags, owner,sampleData' ).then((res: AxiosResponse) => { const { description, @@ -122,6 +132,7 @@ const MyDataDetailsPage = () => { followers, joins, tags, + sampleData, } = res.data; setTableDetails(res.data); setTableId(id); @@ -162,6 +173,7 @@ const MyDataDetailsPage = () => { setDescription(description); setColumns(columns || []); + setSampleData(sampleData); setTableTags(getTableTags(columns || [])); if (!isNil(usageSummary?.weeklyStats.percentileRank)) { const percentile = getUsagePercentile( @@ -529,6 +541,7 @@ const MyDataDetailsPage = () => {