diff --git a/querybook/webapp/components/DataTableViewOverview/DataTableViewOverview.tsx b/querybook/webapp/components/DataTableViewOverview/DataTableViewOverview.tsx
index eb6677a08..fd81bab1a 100644
--- a/querybook/webapp/components/DataTableViewOverview/DataTableViewOverview.tsx
+++ b/querybook/webapp/components/DataTableViewOverview/DataTableViewOverview.tsx
@@ -56,6 +56,26 @@ const dataTableDetailsRows = [
'column_count',
];
+/**
+ * Any custom properties in this array will be shown on top following the order of the array
+ */
+const pinnedCustomProperties = ['channels'];
+
+function createKeyContentDisplayElement(key: string, value: string | number) {
+ const valueStr = value?.toString() ?? '';
+ return (
+
+ {valueStr && /https?:\/\/[^\s]+/.test(valueStr.trim()) ? (
+
+ {valueStr}
+
+ ) : (
+ valueStr
+ )}
+
+ );
+}
+
function useRefreshMetastore(table: IDataTable) {
const dispatch = useDispatch();
const isMounted = useMounted();
@@ -82,20 +102,6 @@ function useRefreshMetastore(table: IDataTable) {
return [handleRefreshTable, isRefreshing] as const;
}
-function createChannelLinkDOM(customProperties) {
- const channelsKey = 'channels';
- const channelsValue = customProperties[channelsKey]?.toString() ?? '';
-
- return channelsValue === '' ? null : (
-
- {channelsValue}
-
- );
-}
-
export interface IQuerybookTableViewOverviewProps {
table: IDataTable;
tableName: string;
@@ -165,30 +171,22 @@ export const DataTableViewOverview: React.FC<
);
});
- const customProperties = table.custom_properties ?? {};
- const channelsDOM = createChannelLinkDOM(customProperties);
+ const customProperties = Object.entries(table.custom_properties ?? {});
- const customPropertiesDOM = Object.entries(customProperties)
- .filter(([key, value]) => {
- return key !== 'channels';
+ // Get pinned custom properties and display based on order of pinnedCustomProperties
+ const pinnedPropertiesDOM = customProperties
+ .filter(([key]) => pinnedCustomProperties.includes(key))
+ .sort(([key1], [key2]) => {
+ const aIndex = pinnedCustomProperties.indexOf(key1);
+ const bIndex = pinnedCustomProperties.indexOf(key2);
+ return aIndex - bIndex;
})
- .map(([key, value]) => {
- const valueStr = value?.toString() ?? '';
- return (
-
- {valueStr && /https?:\/\/[^\s]+/.test(valueStr.trim()) ? (
-
- {valueStr}
-
- ) : (
- valueStr
- )}
-
- );
- });
+ .map(([key, value]) => createKeyContentDisplayElement(key, value));
+
+ // Get unpinned custom properties
+ const unpinnedPropertiesDOM = customProperties
+ .filter(([key]) => !pinnedCustomProperties.includes(key))
+ .map(([key, value]) => createKeyContentDisplayElement(key, value));
const rawMetastoreInfoDOM = table.hive_metastore_description ? (
@@ -231,9 +229,9 @@ export const DataTableViewOverview: React.FC<
);
const detailsSection = (
- {channelsDOM}
+ {pinnedPropertiesDOM}
{detailsDOM}
- {customPropertiesDOM}
+ {unpinnedPropertiesDOM}
);