From 227a79b812894059b8e0fe9403d2a1fa6a91a0e5 Mon Sep 17 00:00:00 2001 From: eric Date: Wed, 27 Mar 2024 12:32:05 -0400 Subject: [PATCH 1/5] add loading indicator for data warehouse tables --- .../DatabaseTableTree/DatabaseTableTree.tsx | 1 + .../lib/components/DatabaseTableTree/TreeRow.tsx | 11 +++++++++-- .../external/DataWarehouseTables.tsx | 14 ++++++++++++-- .../external/dataWarehouseSceneLogic.ts | 4 ++-- 4 files changed, 24 insertions(+), 6 deletions(-) diff --git a/frontend/src/lib/components/DatabaseTableTree/DatabaseTableTree.tsx b/frontend/src/lib/components/DatabaseTableTree/DatabaseTableTree.tsx index 2d7bfb893150e..95ef3b5e7ae9b 100644 --- a/frontend/src/lib/components/DatabaseTableTree/DatabaseTableTree.tsx +++ b/frontend/src/lib/components/DatabaseTableTree/DatabaseTableTree.tsx @@ -17,6 +17,7 @@ export interface TreeItemFolder { name: string items: TreeItemLeaf[] emptyLabel?: JSX.Element + isLoading?: boolean } export interface TreeItemLeaf { diff --git a/frontend/src/lib/components/DatabaseTableTree/TreeRow.tsx b/frontend/src/lib/components/DatabaseTableTree/TreeRow.tsx index b49167a4f6c67..95e7d79dc5620 100644 --- a/frontend/src/lib/components/DatabaseTableTree/TreeRow.tsx +++ b/frontend/src/lib/components/DatabaseTableTree/TreeRow.tsx @@ -1,6 +1,7 @@ import './TreeRow.scss' import { IconChevronDown } from '@posthog/icons' +import { Spinner } from '@posthog/lemon-ui' import clsx from 'clsx' import { IconChevronRight } from 'lib/lemon-ui/icons' import { useCallback, useState } from 'react' @@ -64,10 +65,16 @@ export function TreeFolderRow({ item, depth, onClick, selectedRow }: TreeFolderR
- {emptyLabel ? emptyLabel : No tables found} + {item.isLoading ? ( + + ) : emptyLabel ? ( + emptyLabel + ) : ( + No tables found + )}
))} diff --git a/frontend/src/scenes/data-warehouse/external/DataWarehouseTables.tsx b/frontend/src/scenes/data-warehouse/external/DataWarehouseTables.tsx index 1c72b31bd011f..92bdf54dee2df 100644 --- a/frontend/src/scenes/data-warehouse/external/DataWarehouseTables.tsx +++ b/frontend/src/scenes/data-warehouse/external/DataWarehouseTables.tsx @@ -17,8 +17,16 @@ import { dataWarehouseSceneLogic } from './dataWarehouseSceneLogic' import SourceModal from './SourceModal' export const DataWarehouseTables = (): JSX.Element => { - const { isSourceModalOpen, externalTables, posthogTables, savedQueriesFormatted, allTables, selectedRow } = - useValues(dataWarehouseSceneLogic) + const { + isSourceModalOpen, + externalTables, + dataWarehouseLoading, + posthogTables, + savedQueriesFormatted, + allTables, + selectedRow, + dataWarehouseSavedQueriesLoading, + } = useValues(dataWarehouseSceneLogic) const { toggleSourceModal, selectRow, deleteDataWarehouseSavedQuery, deleteDataWarehouseTable } = useActions(dataWarehouseSceneLogic) const { featureFlags } = useValues(featureFlagLogic) @@ -82,6 +90,7 @@ export const DataWarehouseTables = (): JSX.Element => { ), + isLoading: dataWarehouseLoading, }, { name: 'PostHog', @@ -99,6 +108,7 @@ export const DataWarehouseTables = (): JSX.Element => { table: table, icon: , })), + isLoading: dataWarehouseSavedQueriesLoading, }) } diff --git a/frontend/src/scenes/data-warehouse/external/dataWarehouseSceneLogic.ts b/frontend/src/scenes/data-warehouse/external/dataWarehouseSceneLogic.ts index db722a37777a1..5cc8809610ace 100644 --- a/frontend/src/scenes/data-warehouse/external/dataWarehouseSceneLogic.ts +++ b/frontend/src/scenes/data-warehouse/external/dataWarehouseSceneLogic.ts @@ -18,9 +18,9 @@ export const dataWarehouseSceneLogic = kea([ userLogic, ['user'], databaseTableListLogic, - ['filteredTables', 'dataWarehouse'], + ['filteredTables', 'dataWarehouse', 'dataWarehouseLoading'], dataWarehouseSavedQueriesLogic, - ['savedQueries'], + ['savedQueries', 'dataWarehouseSavedQueriesLoading'], featureFlagLogic, ['featureFlags'], ], From 5d664f9aed14c01d2b6239001723bea2943f32f3 Mon Sep 17 00:00:00 2001 From: eric Date: Wed, 27 Mar 2024 13:55:34 -0400 Subject: [PATCH 2/5] typing --- frontend/src/lib/components/DatabaseTableTree/TreeRow.tsx | 2 +- .../src/scenes/data-warehouse/external/DataWarehouseTables.tsx | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/lib/components/DatabaseTableTree/TreeRow.tsx b/frontend/src/lib/components/DatabaseTableTree/TreeRow.tsx index 95e7d79dc5620..9cf1d3a015343 100644 --- a/frontend/src/lib/components/DatabaseTableTree/TreeRow.tsx +++ b/frontend/src/lib/components/DatabaseTableTree/TreeRow.tsx @@ -69,7 +69,7 @@ export function TreeFolderRow({ item, depth, onClick, selectedRow }: TreeFolderR }} > {item.isLoading ? ( - + ) : emptyLabel ? ( emptyLabel ) : ( diff --git a/frontend/src/scenes/data-warehouse/external/DataWarehouseTables.tsx b/frontend/src/scenes/data-warehouse/external/DataWarehouseTables.tsx index 92bdf54dee2df..77f54a0404a02 100644 --- a/frontend/src/scenes/data-warehouse/external/DataWarehouseTables.tsx +++ b/frontend/src/scenes/data-warehouse/external/DataWarehouseTables.tsx @@ -108,6 +108,7 @@ export const DataWarehouseTables = (): JSX.Element => { table: table, icon: , })), + emptyLabel: No views found, isLoading: dataWarehouseSavedQueriesLoading, }) } From 80f980395ba63e0aa257fb0537d718da92207cb7 Mon Sep 17 00:00:00 2001 From: eric Date: Wed, 27 Mar 2024 14:22:25 -0400 Subject: [PATCH 3/5] add refresh time on external table info --- .../external/DataWarehouseTables.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/frontend/src/scenes/data-warehouse/external/DataWarehouseTables.tsx b/frontend/src/scenes/data-warehouse/external/DataWarehouseTables.tsx index 77f54a0404a02..593998eb63efb 100644 --- a/frontend/src/scenes/data-warehouse/external/DataWarehouseTables.tsx +++ b/frontend/src/scenes/data-warehouse/external/DataWarehouseTables.tsx @@ -5,6 +5,7 @@ import { DatabaseTableTree, TreeItem } from 'lib/components/DatabaseTableTree/Da import { EmptyMessage } from 'lib/components/EmptyMessage/EmptyMessage' import { FEATURE_FLAGS } from 'lib/constants' import { featureFlagLogic } from 'lib/logic/featureFlagLogic' +import { humanFriendlyDetailedTime } from 'lib/utils' import { DatabaseTable } from 'scenes/data-management/database/DatabaseTable' import { urls } from 'scenes/urls' @@ -160,6 +161,19 @@ export const DataWarehouseTables = (): JSX.Element => { {selectedRow.type == DataWarehouseRowType.ExternalTable && (
+ <> + Last Synced At + + {selectedRow.payload.external_schema?.last_synced_at + ? humanFriendlyDetailedTime( + selectedRow.payload.external_schema?.last_synced_at, + 'MMMM DD, YYYY', + 'h:mm A' + ) + : 'Not yet synced'} + + + <> Files URL pattern {selectedRow.payload.url_pattern} From bb15347bb0d9d761867df0691e91fbe806b2ca23 Mon Sep 17 00:00:00 2001 From: eric Date: Wed, 27 Mar 2024 14:48:07 -0400 Subject: [PATCH 4/5] typing --- .../DatabaseTableTree/DatabaseTableTree.tsx | 4 ++-- .../components/DatabaseTableTree/TreeRow.tsx | 4 ++-- .../external/DataWarehouseTables.tsx | 13 +++++++---- .../external/dataWarehouseSceneLogic.ts | 23 ++++++++++++++++++- frontend/src/scenes/data-warehouse/types.ts | 4 ++-- 5 files changed, 36 insertions(+), 12 deletions(-) diff --git a/frontend/src/lib/components/DatabaseTableTree/DatabaseTableTree.tsx b/frontend/src/lib/components/DatabaseTableTree/DatabaseTableTree.tsx index 95ef3b5e7ae9b..539fae2d81abd 100644 --- a/frontend/src/lib/components/DatabaseTableTree/DatabaseTableTree.tsx +++ b/frontend/src/lib/components/DatabaseTableTree/DatabaseTableTree.tsx @@ -15,7 +15,7 @@ export type TreeItem = TreeItemFolder | TreeItemLeaf export interface TreeItemFolder { name: string - items: TreeItemLeaf[] + items: TreeItem[] emptyLabel?: JSX.Element isLoading?: boolean } @@ -34,7 +34,7 @@ export function DatabaseTableTree({ ...props }: TreeProps): JSX.Element { return ( -
    +
      {items.map((item, index) => { if ('items' in item) { return ( diff --git a/frontend/src/lib/components/DatabaseTableTree/TreeRow.tsx b/frontend/src/lib/components/DatabaseTableTree/TreeRow.tsx index 9cf1d3a015343..d8f46d04adac5 100644 --- a/frontend/src/lib/components/DatabaseTableTree/TreeRow.tsx +++ b/frontend/src/lib/components/DatabaseTableTree/TreeRow.tsx @@ -59,13 +59,13 @@ export function TreeFolderRow({ item, depth, onClick, selectedRow }: TreeFolderR depth={depth + 1} onSelectRow={onClick} selectedRow={selectedRow} - style={{ marginLeft: `${2 * depth}rem`, padding: 0 }} + style={{ marginLeft: `2rem`, padding: 0 }} /> ) : (
      {item.isLoading ? ( diff --git a/frontend/src/scenes/data-warehouse/external/DataWarehouseTables.tsx b/frontend/src/scenes/data-warehouse/external/DataWarehouseTables.tsx index 593998eb63efb..e8ca8afaa85b4 100644 --- a/frontend/src/scenes/data-warehouse/external/DataWarehouseTables.tsx +++ b/frontend/src/scenes/data-warehouse/external/DataWarehouseTables.tsx @@ -20,7 +20,7 @@ import SourceModal from './SourceModal' export const DataWarehouseTables = (): JSX.Element => { const { isSourceModalOpen, - externalTables, + externalTablesBySourceType, dataWarehouseLoading, posthogTables, savedQueriesFormatted, @@ -72,12 +72,15 @@ export const DataWarehouseTables = (): JSX.Element => { } const treeItems = (): TreeItem[] => { - const items = [ + const items: TreeItem[] = [ { name: 'External', - items: externalTables.map((table) => ({ - table: table, - icon: , + items: Object.keys(externalTablesBySourceType).map((source_type) => ({ + name: source_type, + items: externalTablesBySourceType[source_type].map((table) => ({ + table: table, + icon: , + })), })), emptyLabel: ( diff --git a/frontend/src/scenes/data-warehouse/external/dataWarehouseSceneLogic.ts b/frontend/src/scenes/data-warehouse/external/dataWarehouseSceneLogic.ts index 5cc8809610ace..b95ae5d8755b7 100644 --- a/frontend/src/scenes/data-warehouse/external/dataWarehouseSceneLogic.ts +++ b/frontend/src/scenes/data-warehouse/external/dataWarehouseSceneLogic.ts @@ -8,7 +8,13 @@ import { userLogic } from 'scenes/userLogic' import { DataWarehouseTable } from '~/types' import { dataWarehouseSavedQueriesLogic } from '../saved_queries/dataWarehouseSavedQueriesLogic' -import { DatabaseTableListRow, DataWarehouseRowType, DataWarehouseSceneTab, DataWarehouseTableType } from '../types' +import { + DatabaseTableListRow, + DataWarehouseExternalTableType, + DataWarehouseRowType, + DataWarehouseSceneTab, + DataWarehouseTableType, +} from '../types' import type { dataWarehouseSceneLogicType } from './dataWarehouseSceneLogicType' export const dataWarehouseSceneLogic = kea([ @@ -132,6 +138,21 @@ export const dataWarehouseSceneLogic = kea([ return [...externalTables, ...posthogTables, ...savedQueriesFormatted] }, ], + externalTablesBySourceType: [ + (s) => [s.externalTables], + (externalTables): Record => { + return externalTables.reduce((acc: Record, table) => { + table = table as DataWarehouseExternalTableType + if (table.payload.external_data_source) { + if (!acc[table.payload.external_data_source.source_type]) { + acc[table.payload.external_data_source.source_type] = [] + } + acc[table.payload.external_data_source.source_type].push(table) + } + return acc + }, {}) + }, + ], }), listeners(({ actions }) => ({ deleteDataWarehouseSavedQuery: async (view) => { diff --git a/frontend/src/scenes/data-warehouse/types.ts b/frontend/src/scenes/data-warehouse/types.ts index 6f5f375d5ee2c..2b1bb3edef117 100644 --- a/frontend/src/scenes/data-warehouse/types.ts +++ b/frontend/src/scenes/data-warehouse/types.ts @@ -42,7 +42,7 @@ export interface DataWarehousePostHogTableType extends DataWarehouseTableBaseTyp payload: DatabaseTableListRow } -export interface DataWarehouseExternalTablType extends DataWarehouseTableBaseType { +export interface DataWarehouseExternalTableType extends DataWarehouseTableBaseType { type: DataWarehouseRowType.ExternalTable payload: DataWarehouseTable } @@ -54,7 +54,7 @@ export interface DataWarehouseViewType extends DataWarehouseTableBaseType { export type DataWarehouseTableType = | DataWarehousePostHogTableType - | DataWarehouseExternalTablType + | DataWarehouseExternalTableType | DataWarehouseViewType export enum DataWarehouseSceneTab { From 905f96bc5d2d452f94c40ff7d156229aa4d4cb04 Mon Sep 17 00:00:00 2001 From: eric Date: Wed, 27 Mar 2024 15:50:04 -0400 Subject: [PATCH 5/5] add height limit --- .../lib/components/DatabaseTableTree/DatabaseTableTree.tsx | 5 ++++- .../scenes/data-warehouse/external/DataWarehouseTables.tsx | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/frontend/src/lib/components/DatabaseTableTree/DatabaseTableTree.tsx b/frontend/src/lib/components/DatabaseTableTree/DatabaseTableTree.tsx index 539fae2d81abd..8f42f841a8457 100644 --- a/frontend/src/lib/components/DatabaseTableTree/DatabaseTableTree.tsx +++ b/frontend/src/lib/components/DatabaseTableTree/DatabaseTableTree.tsx @@ -34,7 +34,10 @@ export function DatabaseTableTree({ ...props }: TreeProps): JSX.Element { return ( -
        +
          {items.map((item, index) => { if ('items' in item) { return ( diff --git a/frontend/src/scenes/data-warehouse/external/DataWarehouseTables.tsx b/frontend/src/scenes/data-warehouse/external/DataWarehouseTables.tsx index e8ca8afaa85b4..26c90d15f1600 100644 --- a/frontend/src/scenes/data-warehouse/external/DataWarehouseTables.tsx +++ b/frontend/src/scenes/data-warehouse/external/DataWarehouseTables.tsx @@ -123,7 +123,7 @@ export const DataWarehouseTables = (): JSX.Element => { return ( <>
          -
          +
          {selectedRow ? (