feat: Cloudformation + RDS

packages/frontend/src/components/ResourceInspector.tsx

@@ -149,7 +149,7 @@ export function ResourceInspector({
         )}
       </section>
       {isDatabase && (
-        <DatabaseConnectionsSection metadata={resource.metadata} />
+        <DatabaseConnectionsSection metadata={resource.metadata} engine={resource.engine} />
       )}
       {isAwsDatabase && <DatabaseLifecycleSection status={resource.status} />}
       {isDatabase && !isAwsDatabase && (
@@ -282,8 +282,10 @@ function ProviderDatabaseSection({ cloud }: { cloud: string }) {
 
 function DatabaseConnectionsSection({
   metadata,
+  engine,
 }: {
   metadata: Record<string, unknown>;
+  engine?: string | null;
 }) {
   const endpoint = getRecordMetadata(metadata.endpoint);
   const subnetGroup = getRecordMetadata(metadata.subnetGroup);
@@ -311,6 +313,7 @@ function DatabaseConnectionsSection({
           value={`${securityGroups.length}`}
         />
       </div>
+      {address && port !== null && engine && <DatabaseConnectionCommand engine={engine} address={address} port={port} database={getStringMetadata(metadata.dbName) ?? (engine.includes('postgres') ? 'postgres' : '')} username={getStringMetadata(metadata.masterUsername) ?? (engine.includes('postgres') ? 'postgres' : 'root')} />}
       {securityGroups.length > 0 && (
         <div className="metadata-tags">
           {securityGroups.map((group) => (
@@ -325,6 +328,16 @@ function DatabaseConnectionsSection({
   );
 }
 
+function DatabaseConnectionCommand({ engine, address, port, database, username }: { engine: string; address: string; port: number; database: string; username: string }) {
+  const host = address.startsWith('172.') ? 'localhost' : address
+  const command = engine.includes('postgres')
+    ? `psql "host=${host} port=${port} dbname=${database} user=${username} password=<password>"`
+    : engine.includes('mysql') || engine.includes('mariadb')
+      ? `mysql --host=${host} --port=${port} --user=${username} --password ${database}`
+      : `sqlcmd -S ${host},${port} -U ${username} -P <password> -d ${database}`
+  return <div className="metadata-block"><p className="metric-label">Terminal connection</p><p className="copy-value mono">{command}<CopyValueButton value={command} label="Connection command" /></p><p className="muted compact-text">Use the endpoint, port, database, and username above in DBeaver or another database client. The password is never retained by the console.</p></div>
+}
+
 function DatabaseLifecycleSection({ status }: { status?: string | null }) {
   return (
     <section className="inspector-section">