diff --git a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ListConnectedDatabases/ListConnectedDatabases.tsx b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ListConnectedDatabases/ListConnectedDatabases.tsx index f9ede47a0be..3546ae7bcf2 100644 --- a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ListConnectedDatabases/ListConnectedDatabases.tsx +++ b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ListConnectedDatabases/ListConnectedDatabases.tsx @@ -1,69 +1,32 @@ -import { CardedTable } from '../../../../new-components/CardedTable'; -import { Button } from '../../../../new-components/Button'; -import { - FaCheck, - FaEdit, - FaExclamationTriangle, - FaMinusCircle, - FaTrash, - FaUndo, - FaRedoAlt, - FaExternalLinkAlt, -} from 'react-icons/fa'; -import { useMetadata } from '../../../MetadataAPI'; -import _push from '../../../../components/Services/Data/push'; -import { useReloadSource } from '../../hooks/useReloadSource'; -import { useDropSource } from '../../hooks/useDropSource'; -import { IndicatorCard } from '../../../../new-components/IndicatorCard'; -import Skeleton from 'react-loading-skeleton'; -import { useInconsistentSources } from '../../hooks/useInconsistentSources'; -import { Details } from './parts/Details'; -import { useState } from 'react'; -import { useDatabaseVersion } from '../../hooks/useDatabaseVersion'; -import { useDatabaseLatencyCheck } from '../../hooks/useDatabaseLatencyCheck'; +import to from 'await-to-js'; +import React, { useState } from 'react'; import { BiTimer } from 'react-icons/bi'; -import { hasuraToast } from '../../../../new-components/Toasts'; -import { Latency } from '../../types'; -import { Badge } from '../../../../new-components/Badge'; -import { LearnMoreLink } from '../../../../new-components/LearnMoreLink'; -import { getProjectId, isCloudConsole } from '../../../../utils/cloudConsole'; +import { FaEdit, FaTrash, FaUndo } from 'react-icons/fa'; +import Skeleton from 'react-loading-skeleton'; import globals from '../../../../Globals'; -import { useUpdateProjectRegion } from '../../hooks/useUpdateProjectRegion'; -import { useAppDispatch } from '../../../../storeHooks'; +import _push from '../../../../components/Services/Data/push'; import { exportMetadata } from '../../../../metadata/actions'; +import { MetadataDataSource } from '../../../../metadata/types'; +import { useDestructiveAlert } from '../../../../new-components/Alert'; +import { Button } from '../../../../new-components/Button'; +import { CardedTable } from '../../../../new-components/CardedTable'; +import { IndicatorCard } from '../../../../new-components/IndicatorCard'; +import { hasuraToast } from '../../../../new-components/Toasts'; +import { useAppDispatch } from '../../../../storeHooks'; +import { getProjectId, isCloudConsole } from '../../../../utils/cloudConsole'; +import { useMetadata } from '../../../MetadataAPI'; +import { useDatabaseLatencyCheck } from '../../hooks/useDatabaseLatencyCheck'; +import { useDatabaseVersion } from '../../hooks/useDatabaseVersion'; +import { useDropSource } from '../../hooks/useDropSource'; +import { useInconsistentSources } from '../../hooks/useInconsistentSources'; +import { useReloadSource } from '../../hooks/useReloadSource'; +import { useUpdateProjectRegion } from '../../hooks/useUpdateProjectRegion'; +import { Latency } from '../../types'; +import { AccelerateProject, Details, LatencyBadge } from './parts'; -const LatencyBadge = ({ - latencies, - dataSourceName, -}: { - latencies: Latency[]; - dataSourceName: string; -}) => { - const currentDataSourceLatencyInfo = latencies.find( - latencyInfo => latencyInfo.dataSourceName === dataSourceName - ); - - if (!currentDataSourceLatencyInfo) return null; - - if (currentDataSourceLatencyInfo.avgLatency < 100) - return ( - - Connection - - ); - - if (currentDataSourceLatencyInfo.avgLatency < 200) - return ( - - Acceptable - - ); - - return ( - - Elevated Latency - - ); +type DatabaseItem = { + dataSourceName: MetadataDataSource['name']; + driver: MetadataDataSource['kind']; }; export const ListConnectedDatabases = (props?: { className?: string }) => { @@ -77,7 +40,6 @@ export const ListConnectedDatabases = (props?: { className?: string }) => { } = useDatabaseLatencyCheck({ enabled: false, onSuccess: data => { - console.log('on success', data); const result = (data as any).latencies as Latency[]; const isAnyLatencyHigh = result.find(latency => latency.avgLatency > 200); setShowAccelerateProjectSection(!!isAnyLatencyHigh); @@ -91,19 +53,18 @@ export const ListConnectedDatabases = (props?: { className?: string }) => { }, }); - const { - mutate: updateProjectRegionForRowId, - // isLoading: isUpdatingProjectRegion, - } = useUpdateProjectRegion(); - const dispatch = useAppDispatch(); + const [activeRow, setActiveRow] = useState(); + const { reloadSource, isLoading: isSourceReloading } = useReloadSource(); + const { dropSource, isLoading: isSourceRemovalInProgress } = useDropSource({ onSuccess: () => { dispatch(exportMetadata()); }, }); + const { data: inconsistentSources, isLoading: isInconsistentFetchCallLoading, @@ -128,81 +89,124 @@ export const ListConnectedDatabases = (props?: { className?: string }) => { const isCurrentRow = (rowIndex: number) => rowIndex === activeRow; - if (isLoading) return <>Loading...; - const columns = ['database', 'driver', '', '']; - const rowData = (databaseList ?? []).map((databaseItem, index) => [ -
{databaseItem.dataSourceName}
, - databaseItem.driver, - isDatabaseVersionLoading || isInconsistentFetchCallLoading ? ( - - ) : ( -
entry.dataSourceName === databaseItem.dataSourceName - )?.version ?? '', - }} - dataSourceName={databaseItem.dataSourceName} - /> - ), -
- -
, -
{ - console.log('parent event captured'); - setActiveRow(index); - }} - > - - - -
, - ]); + const handleEdit = React.useCallback((databaseItem: DatabaseItem) => { + dispatch( + _push( + `/data/v2/manage/database/edit?driver=${databaseItem.driver}&database=${databaseItem.dataSourceName}` + ) + ); + }, []); - const openUpdateProjectRegionPage = (_rowId?: string) => { + const { destructivePrompt } = useDestructiveAlert(); + + const handleRemove = React.useCallback( + (databaseItem: DatabaseItem) => { + destructivePrompt({ + resourceName: databaseItem.dataSourceName, + resourceType: 'Data Source', + destroyTerm: 'remove', + onConfirm: async () => { + let success = true; + + const [err] = await to( + dropSource({ + driver: databaseItem.driver, + dataSourceName: databaseItem.dataSourceName, + }) + ); + + if (err) { + success = false; + } + + return success; + }, + }); + }, + [dropSource] + ); + + const rowData = React.useMemo( + () => + (databaseList ?? []).map((databaseItem, index) => [ +
{databaseItem.dataSourceName}
, + databaseItem.driver, + isDatabaseVersionLoading || isInconsistentFetchCallLoading ? ( + + ) : ( +
entry.dataSourceName === databaseItem.dataSourceName + )?.version ?? '', + }} + dataSourceName={databaseItem.dataSourceName} + /> + ), +
+ +
, +
{ + setActiveRow(index); + }} + > + + + +
, + ]), + [ + databaseList, + databaseVersions, + inconsistentSources, + isCurrentRow, + isDatabaseVersionLoading, + isInconsistentFetchCallLoading, + isSourceReloading, + isSourceRemovalInProgress, + latencies, + reloadSource, + ] + ); + + const { + mutate: updateProjectRegionForRowId, + // isLoading: isUpdatingProjectRegion, + } = useUpdateProjectRegion(); + + const openUpdateProjectRegionPage = React.useCallback((_rowId?: string) => { if (!_rowId) { hasuraToast({ type: 'error', @@ -224,7 +228,9 @@ export const ListConnectedDatabases = (props?: { className?: string }) => { const cloudDetailsPage = `${window.location.protocol}//${window.location.host}/project/${projectId}/details?open_update_region_drawer=true`; window.open(cloudDetailsPage, '_blank'); - }; + }, []); + + if (isLoading) return <>Loading...; return (
@@ -242,47 +248,15 @@ export const ListConnectedDatabases = (props?: { className?: string }) => { )} {showAccelerateProjectSection ? ( -
- -
- - Databases marked with “Elevated Latency” indicate that it took - us over 200 ms for this Hasura project to communicate with your - database. These conditions generally happen when databases and - projects are in geographically distant regions. This can cause - API and subsequently application performance issues. We want - your GraphQL APIs to be lightning fast, therefore we - recommend that you either deploy your Hasura project in the same - region as your database or select a database instance - that's closer to where you've deployed Hasura. - - -
- - -
-
- -
+ { + refetch(); + }} + onUpdateRegionClick={() => { + openUpdateProjectRegionPage(rowId); + }} + /> ) : ( isCloudConsole(globals) && ( + +
+ + + + ); +} diff --git a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ListConnectedDatabases/parts/Details.tsx b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ListConnectedDatabases/parts/Details.tsx index 40093d3f2c6..01139232906 100644 --- a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ListConnectedDatabases/parts/Details.tsx +++ b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ListConnectedDatabases/parts/Details.tsx @@ -23,9 +23,9 @@ export const DisplayDetails = ({
{ + const currentDataSourceLatencyInfo = latencies.find( + latencyInfo => latencyInfo.dataSourceName === dataSourceName + ); + + if (!currentDataSourceLatencyInfo) return null; + + if (currentDataSourceLatencyInfo.avgLatency < 100) + return ( + + Connection + + ); + + if (currentDataSourceLatencyInfo.avgLatency < 200) + return ( + + Acceptable + + ); + + return ( + + Elevated Latency + + ); +}; diff --git a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ListConnectedDatabases/parts/index.ts b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ListConnectedDatabases/parts/index.ts new file mode 100644 index 00000000000..8e7bbfeff29 --- /dev/null +++ b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ListConnectedDatabases/parts/index.ts @@ -0,0 +1,4 @@ +export { AccelerateProject } from './AccelerateProject'; +export { DisplayDetails, Details } from './Details'; +export { InconsistentSourceDetails } from './InconsistentSourceDetails'; +export { LatencyBadge } from './LatencyBadge';