diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx index 27db4f87cc0..468d27e1af2 100644 --- a/apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx +++ b/apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx @@ -148,12 +148,10 @@ export const DestinationRow = ({ destinationId }: DestinationRowProps) => { ) : (
-

- {destinationName} -

-

+

{type} (ID: {pipeline?.id})

+

{destinationName}

)} diff --git a/apps/studio/components/interfaces/Database/Replication/ReadReplicas/ReadReplicaRow.tsx b/apps/studio/components/interfaces/Database/Replication/ReadReplicas/ReadReplicaRow.tsx index 38d83bbebf4..e16620fa92f 100644 --- a/apps/studio/components/interfaces/Database/Replication/ReadReplicas/ReadReplicaRow.tsx +++ b/apps/studio/components/interfaces/Database/Replication/ReadReplicas/ReadReplicaRow.tsx @@ -1,15 +1,8 @@ +import { useParams } from 'common' +import { Database as DatabaseIcon } from 'icons' import { Loader2, Minus, MoreVertical, RotateCcw, Trash } from 'lucide-react' import Link from 'next/link' import { useMemo, useState } from 'react' - -import { DropReplicaConfirmationModal } from '@/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DropReplicaConfirmationModal' -import { REPLICA_STATUS } from '@/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.constants' -import { RestartReplicaConfirmationModal } from '@/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/RestartReplicaConfirmationModal' -import { useReplicationLagQuery } from '@/data/read-replicas/replica-lag-query' -import { type Database } from '@/data/read-replicas/replicas-query' -import { formatDatabaseID } from '@/data/read-replicas/replicas.utils' -import { useParams } from 'common' -import { Database as DatabaseIcon } from 'icons' import { AWS_REGIONS } from 'shared-data' import { Badge, @@ -21,9 +14,19 @@ import { DropdownMenuTrigger, TableCell, TableRow, + Tooltip, + TooltipContent, + TooltipTrigger, } from 'ui' import { ShimmeringLoader } from 'ui-patterns' + import { getIsInTransition, getStatusLabel } from './ReadReplicas.utils' +import { DropReplicaConfirmationModal } from '@/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DropReplicaConfirmationModal' +import { REPLICA_STATUS } from '@/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.constants' +import { RestartReplicaConfirmationModal } from '@/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/RestartReplicaConfirmationModal' +import { useReplicationLagQuery } from '@/data/read-replicas/replica-lag-query' +import { type Database } from '@/data/read-replicas/replicas-query' +import { formatDatabaseID } from '@/data/read-replicas/replicas.utils' interface ReadReplicaRow { replica: Database @@ -51,7 +54,7 @@ export const ReadReplicaRow = ({ replica, onUpdateReplica }: ReadReplicaRow) => const [showConfirmRestart, setShowConfirmRestart] = useState(false) const [showConfirmDrop, setShowConfirmDrop] = useState(false) - const regionLabel = Object.values(AWS_REGIONS).find((x) => x.code === region)?.displayName + const regionMeta = Object.values(AWS_REGIONS).find((x) => x.code === region) const isInTransition = useMemo(() => getIsInTransition({ status }), [status]) const statusLabel = useMemo(() => getStatusLabel({ status }), [status]) @@ -65,8 +68,13 @@ export const ReadReplicaRow = ({ replica, onUpdateReplica }: ReadReplicaRow) =>
-

{regionLabel}

-

Read Replica (ID: {formattedId})

+

Read Replica (ID: {formattedId})

+ + +

{regionMeta?.displayName}

+
+ {regionMeta?.code} +
diff --git a/apps/studio/components/interfaces/Database/Replication/ReplicationDiagram/Nodes.tsx b/apps/studio/components/interfaces/Database/Replication/ReplicationDiagram/Nodes.tsx index a5c28954ea3..ff6b33dfad3 100644 --- a/apps/studio/components/interfaces/Database/Replication/ReplicationDiagram/Nodes.tsx +++ b/apps/studio/components/interfaces/Database/Replication/ReplicationDiagram/Nodes.tsx @@ -1,6 +1,13 @@ +import { useParams } from 'common' +import { AnalyticsBucket, BigQuery, Database } from 'icons' import { PropsWithChildren, useMemo } from 'react' import { Handle, Position } from 'reactflow' +import { AWS_REGIONS } from 'shared-data' +import { cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui' +import { getStatusName } from '../Pipeline.utils' +import { getStatusLabel } from '../ReadReplicas/ReadReplicas.utils' +import { STATUS_REFRESH_FREQUENCY_MS } from '../Replication.constants' import { useReadReplicasQuery } from '@/data/read-replicas/replicas-query' import { formatDatabaseID } from '@/data/read-replicas/replicas.utils' import { useReplicationDestinationsQuery } from '@/data/replication/destinations-query' @@ -8,13 +15,6 @@ import { useReplicationPipelineStatusQuery } from '@/data/replication/pipeline-s import { useReplicationPipelinesQuery } from '@/data/replication/pipelines-query' import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject' import { BASE_PATH } from '@/lib/constants' -import { useParams } from 'common' -import { AnalyticsBucket, BigQuery, Database } from 'icons' -import { AWS_REGIONS } from 'shared-data' -import { cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui' -import { getStatusName } from '../Pipeline.utils' -import { getStatusLabel } from '../ReadReplicas/ReadReplicas.utils' -import { STATUS_REFRESH_FREQUENCY_MS } from '../Replication.constants' export const NODE_WIDTH = 480 @@ -42,18 +42,15 @@ export const PrimaryDatabaseNode = () => { const { data: destinationsData } = useReplicationDestinationsQuery({ projectRef }) const hasDestinations = (destinationsData?.destinations ?? []).length > 0 - const regionLabel = Object.values(AWS_REGIONS).find( - (x) => x.code === project?.region - )?.displayName + const region = Object.values(AWS_REGIONS).find((x) => x.code === project?.region) const hasReplication = hasReadReplicas || hasDestinations return ( -
-

Primary Database

-

- {project?.cloud_provider} • {regionLabel} -

+
+

Primary Database

+

{region?.displayName}

+

{region?.code}

{!!project && ( { ) : type === 'Analytics Bucket' ? ( ) : null} -
+
-

{destination?.name}

+

{type}

@@ -117,9 +114,8 @@ export const ReplicationNode = ({ id }: { id: string }) => {
-

- {type} (ID: {destination?.id}) -

+

{destination?.name}

+

ID: {destination?.id}

@@ -131,9 +127,7 @@ export const ReadReplicaNode = ({ id }: { id: string }) => { const { data: databases = [] } = useReadReplicasQuery({ projectRef }) const database = databases.find((x) => x.identifier === id) - const regionLabel = Object.values(AWS_REGIONS).find( - (x) => x.code === database?.region - )?.displayName + const region = Object.values(AWS_REGIONS).find((x) => x.code === database?.region) const formattedId = formatDatabaseID(database?.identifier ?? '') const statusLabel = useMemo( () => getStatusLabel({ status: database?.status }), @@ -145,7 +139,7 @@ export const ReadReplicaNode = ({ id }: { id: string }) => {
-

{regionLabel}

+

Read Replica

@@ -160,7 +154,12 @@ export const ReadReplicaNode = ({ id }: { id: string }) => { {statusLabel}
-

Read Replica (ID: {formattedId})

+

{region?.displayName}

+
+ ID: {formattedId} + • + {region?.code} +
diff --git a/apps/studio/components/interfaces/Database/Replication/ReplicationDiagram/ReplicationDiagram.utils.ts b/apps/studio/components/interfaces/Database/Replication/ReplicationDiagram/ReplicationDiagram.utils.ts index 0f3afe5a47c..7dbfd8cb873 100644 --- a/apps/studio/components/interfaces/Database/Replication/ReplicationDiagram/ReplicationDiagram.utils.ts +++ b/apps/studio/components/interfaces/Database/Replication/ReplicationDiagram/ReplicationDiagram.utils.ts @@ -1,9 +1,10 @@ import dagre from '@dagrejs/dagre' import { Edge, Node, Position } from 'reactflow' + import { NODE_WIDTH } from './Nodes' const NODE_SEP = 0 -const NODE_ROW_HEIGHT = 160 +const NODE_ROW_HEIGHT = 200 export const getDagreGraphLayout = (nodes: Node[], edges: Edge[]) => { const dagreGraph = new dagre.graphlib.Graph() diff --git a/apps/studio/components/interfaces/Database/Replication/ReplicationDiagram/index.tsx b/apps/studio/components/interfaces/Database/Replication/ReplicationDiagram/index.tsx index 6a91cff53ad..a2bfaf9d4d9 100644 --- a/apps/studio/components/interfaces/Database/Replication/ReplicationDiagram/index.tsx +++ b/apps/studio/components/interfaces/Database/Replication/ReplicationDiagram/index.tsx @@ -116,7 +116,7 @@ const ReplicationDiagramContent = () => { // [Joshen] Odd fix to ensure that react flow snaps back to center when adding nodes await timeout(1) - reactFlow.fitView({ maxZoom: 0.9, minZoom: 0.9 }) + reactFlow.fitView({ minZoom: 0.8, maxZoom: 0.9 }) } useEffect(() => { @@ -127,7 +127,7 @@ const ReplicationDiagramContent = () => {
) => { {region.name}

- {providerLabel} + {region.region} {projectHomepageShowInstanceSize && ( <> • @@ -183,13 +183,11 @@ export const PrimaryNode = ({ data }: NodeProps) => { export const ReplicaNode = ({ data }: NodeProps) => { const { id, - provider, region, computeSize, status, inserted_at, onSelectRestartReplica, - onSelectResizeReplica, onSelectDropReplica, } = data const { ref } = useParams() @@ -234,9 +232,6 @@ export const ReplicaNode = ({ data }: NodeProps) => { ] as string[] ).includes(status) || initStatus === ReplicaInitializationStatus.InProgress - const { infraAwsNimbusLabel } = useCustomContent(['infra:aws_nimbus_label']) - const providerLabel = provider === 'AWS_NIMBUS' ? infraAwsNimbusLabel : provider - return ( <> @@ -303,7 +298,7 @@ export const ReplicaNode = ({ data }: NodeProps) => {

{region.name}

- {providerLabel} + {region.region} {projectHomepageShowInstanceSize && !!computeSize && ( <> • diff --git a/packages/icons/src/icons/big-query.ts b/packages/icons/src/icons/big-query.ts index 828306e8fa4..5eac32c358d 100644 --- a/packages/icons/src/icons/big-query.ts +++ b/packages/icons/src/icons/big-query.ts @@ -15,7 +15,7 @@ const BigQuery = createSupabaseIcon('BigQuery', [ 'path', { d: 'M7.48981 17.898L7.48981 9.65308M10.8368 18.7552L10.8368 7.53063M14.1837 18.0205V12.0204M21 21.0817L16.4286 16.5103M18.7552 10.8776C18.7552 15.2282 15.2282 18.7552 10.8776 18.7552C6.52691 18.7552 3 15.2282 3 10.8776C3 6.52691 6.52691 3 10.8776 3C15.2282 3 18.7552 6.52691 18.7552 10.8776Z', - stroke: 'black', + stroke: 'currentColor', 'stroke-width': '0.975299', 'stroke-linecap': 'round', key: 't3k65m',