diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index ffb82749f..a6ca79a92 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -124,7 +124,7 @@
{{navigationTabs[tab].caption}} diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index 4111158da..1afbc3bf7 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -272,6 +272,10 @@ export class AppComponent { return this._connections.currentConnection?.isTestConnection || false; } + get isHostedConnection() { + return this._connections.isHostedConnection; + } + get visibleTabs() { return this._connections.visibleTabs; } diff --git a/frontend/src/app/components/connections-list/hosted-database-plan-dialog/hosted-database-plan-dialog.component.css b/frontend/src/app/components/connections-list/hosted-database-plan-dialog/hosted-database-plan-dialog.component.css index d1ffbe50b..0e46dbd4f 100644 --- a/frontend/src/app/components/connections-list/hosted-database-plan-dialog/hosted-database-plan-dialog.component.css +++ b/frontend/src/app/components/connections-list/hosted-database-plan-dialog/hosted-database-plan-dialog.component.css @@ -18,7 +18,8 @@ text-align: left; transition: border-color 0.15s, - background 0.15s; + background 0.15s, + box-shadow 0.15s; } .plan-dialog__option:hover { @@ -49,7 +50,7 @@ font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; - color: rgba(0, 0, 0, 0.48); + color: var(--color-accentedPalette-500); } @media (prefers-color-scheme: dark) { @@ -58,8 +59,8 @@ } .plan-dialog__option:hover { - border-color: var(--color-accentedPalette-500); - background: var(--color-accentedPalette-700); + border-color: color-mix(in srgb, var(--color-accentedPalette-500), transparent 65%); + background: color-mix(in srgb, var(--color-accentedPalette-500), transparent 92%); } .plan-dialog__option-description { @@ -67,6 +68,6 @@ } .plan-dialog__option-price { - color: rgba(255, 255, 255, 0.48); + color: var(--color-accentedPalette-400); } } diff --git a/frontend/src/app/components/connections-list/hosted-database-rename-dialog/hosted-database-rename-dialog.component.css b/frontend/src/app/components/connections-list/hosted-database-rename-dialog/hosted-database-rename-dialog.component.css new file mode 100644 index 000000000..7a4e4cf86 --- /dev/null +++ b/frontend/src/app/components/connections-list/hosted-database-rename-dialog/hosted-database-rename-dialog.component.css @@ -0,0 +1,21 @@ +.rename-dialog__content { + display: flex; + flex-direction: column; + gap: 16px; + min-width: min(100%, 28rem); +} + +.rename-dialog__description { + margin: 0; + opacity: 0.65; + font-size: 14px; +} + +.rename-dialog__field { + width: 100%; +} + +.rename-dialog__actions { + gap: 8px; + padding-top: 8px; +} diff --git a/frontend/src/app/components/connections-list/hosted-database-rename-dialog/hosted-database-rename-dialog.component.html b/frontend/src/app/components/connections-list/hosted-database-rename-dialog/hosted-database-rename-dialog.component.html new file mode 100644 index 000000000..ada2b6f54 --- /dev/null +++ b/frontend/src/app/components/connections-list/hosted-database-rename-dialog/hosted-database-rename-dialog.component.html @@ -0,0 +1,16 @@ +

Name your connection

+ + +

Give your hosted database a friendly name so you can find it easily.

+ + Connection name + + + + + + + + diff --git a/frontend/src/app/components/connections-list/hosted-database-rename-dialog/hosted-database-rename-dialog.component.ts b/frontend/src/app/components/connections-list/hosted-database-rename-dialog/hosted-database-rename-dialog.component.ts new file mode 100644 index 000000000..84e92a159 --- /dev/null +++ b/frontend/src/app/components/connections-list/hosted-database-rename-dialog/hosted-database-rename-dialog.component.ts @@ -0,0 +1,52 @@ +import { Component, Inject, inject } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { MatButtonModule } from '@angular/material/button'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatInputModule } from '@angular/material/input'; +import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog'; +import { firstValueFrom } from 'rxjs'; +import { CreatedHostedDatabase } from 'src/app/models/hosted-database'; +import { ConnectionsService } from 'src/app/services/connections.service'; + +export interface HostedDatabaseRenameDialogData { + connectionId: string; + hostedDatabase: CreatedHostedDatabase; +} + +@Component({ + selector: 'app-hosted-database-rename-dialog', + templateUrl: './hosted-database-rename-dialog.component.html', + styleUrls: ['./hosted-database-rename-dialog.component.css'], + imports: [MatDialogModule, MatButtonModule, MatFormFieldModule, MatInputModule, FormsModule], +}) +export class HostedDatabaseRenameDialogComponent { + private _connectionsService = inject(ConnectionsService); + + title = ''; + saving = false; + + constructor( + @Inject(MAT_DIALOG_DATA) public data: HostedDatabaseRenameDialogData, + private _dialogRef: MatDialogRef, + ) { + this.title = data.hostedDatabase.databaseName || ''; + } + + async save(): Promise { + const title = this.title.trim(); + if (!title || this.saving) return; + + this.saving = true; + try { + await firstValueFrom( + this._connectionsService.updateConnectionTitle(this.data.connectionId, title), + ); + this._connectionsService.fetchConnections().subscribe(); + this._dialogRef.close(title); + } catch { + this._dialogRef.close(); + } finally { + this.saving = false; + } + } +} diff --git a/frontend/src/app/components/connections-list/hosted-database-success-dialog/hosted-database-success-dialog.component.css b/frontend/src/app/components/connections-list/hosted-database-success-dialog/hosted-database-success-dialog.component.css index 9096e2c22..98f49958f 100644 --- a/frontend/src/app/components/connections-list/hosted-database-success-dialog/hosted-database-success-dialog.component.css +++ b/frontend/src/app/components/connections-list/hosted-database-success-dialog/hosted-database-success-dialog.component.css @@ -49,9 +49,33 @@ overflow-wrap: anywhere; } -.hosted-dialog__hint { - color: rgba(0, 0, 0, 0.64); +.hosted-dialog__warning { + display: flex; + align-items: center; + gap: 10px; + padding: 10px 14px; + border-radius: 8px; + border-left: 3px solid var(--warning-color); + background: var(--warning-background-color); font-size: 13px; + color: inherit; +} + +.hosted-dialog__warning-icon { + flex-shrink: 0; + color: var(--warning-color); + font-size: 20px; + width: 20px; + height: 20px; +} + +.hosted-dialog__copy-check { + font-size: 18px; + width: 18px; + height: 18px; + margin-right: 4px; + vertical-align: middle; + line-height: 1; } .hosted-dialog__actions { @@ -62,11 +86,11 @@ @media (prefers-color-scheme: dark) { .hosted-dialog__credentials { background: transparent; - border-color: var(--color-accentedPalette-400); + border-color: rgba(255, 255, 255, 0.12); } .hosted-dialog__credentials code { - background: var(--color-accentedPalette-600); + background: rgba(255, 255, 255, 0.06); } .hosted-dialog__hint { diff --git a/frontend/src/app/components/connections-list/hosted-database-success-dialog/hosted-database-success-dialog.component.html b/frontend/src/app/components/connections-list/hosted-database-success-dialog/hosted-database-success-dialog.component.html index 2aa57e0da..45bc545a3 100644 --- a/frontend/src/app/components/connections-list/hosted-database-success-dialog/hosted-database-success-dialog.component.html +++ b/frontend/src/app/components/connections-list/hosted-database-success-dialog/hosted-database-success-dialog.component.html @@ -21,6 +21,11 @@

} +
+ warning + Copy the connection string before closing. +
+
Database @@ -43,40 +48,26 @@

{{ data.hostedDatabase.password }}

- -

- The generated password cannot be recovered from this screen later. -

- + @if (canClose) { + + } - @if (data.connectionId) { - - Open tables - - - Set up dashboard - - } diff --git a/frontend/src/app/components/connections-list/hosted-database-success-dialog/hosted-database-success-dialog.component.ts b/frontend/src/app/components/connections-list/hosted-database-success-dialog/hosted-database-success-dialog.component.ts index 3e40316b5..7ff6241ea 100644 --- a/frontend/src/app/components/connections-list/hosted-database-success-dialog/hosted-database-success-dialog.component.ts +++ b/frontend/src/app/components/connections-list/hosted-database-success-dialog/hosted-database-success-dialog.component.ts @@ -1,8 +1,8 @@ import { CdkCopyToClipboard } from '@angular/cdk/clipboard'; import { Component, Inject } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; +import { MatIconModule } from '@angular/material/icon'; import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog'; -import { RouterModule } from '@angular/router'; import posthog from 'posthog-js'; import { CreatedHostedDatabase } from 'src/app/models/hosted-database'; import { NotificationsService } from 'src/app/services/notifications.service'; @@ -17,9 +17,12 @@ export interface HostedDatabaseSuccessDialogData { selector: 'app-hosted-database-success-dialog', templateUrl: './hosted-database-success-dialog.component.html', styleUrl: './hosted-database-success-dialog.component.css', - imports: [MatDialogModule, MatButtonModule, RouterModule, CdkCopyToClipboard], + imports: [MatDialogModule, MatButtonModule, MatIconModule, CdkCopyToClipboard], }) export class HostedDatabaseSuccessDialogComponent { + public copied = false; + public canClose = false; + constructor( @Inject(MAT_DIALOG_DATA) public data: HostedDatabaseSuccessDialogData, private _notifications: NotificationsService, @@ -33,13 +36,8 @@ export class HostedDatabaseSuccessDialogComponent { handleCredentialsCopied(): void { posthog.capture('Connections: hosted PostgreSQL credentials copied'); this._notifications.showSuccessSnackbar('Hosted database credentials were copied to clipboard.'); - } - - handlePrimaryActionClick(): void { - posthog.capture('Connections: hosted PostgreSQL setup dashboard opened'); - } - - handleSecondaryActionClick(): void { - posthog.capture('Connections: hosted PostgreSQL tables opened'); + this.copied = true; + this.canClose = true; + setTimeout(() => { this.copied = false; }, 2000); } } diff --git a/frontend/src/app/components/connections-list/own-connections/own-connections.component.html b/frontend/src/app/components/connections-list/own-connections/own-connections.component.html index ff3d3c17e..2006b0464 100644 --- a/frontend/src/app/components/connections-list/own-connections/own-connections.component.html +++ b/frontend/src/app/components/connections-list/own-connections/own-connections.component.html @@ -47,23 +47,36 @@

{{ $any(connectionItem).displayTitle @if (showHostedDatabaseEntry) {
Hosted by Rocketadmin - + @if (hostedDbLimitReached) { + +
+ +
+
+ Upgrade to host more + You've reached the limit of 3 hosted databases +
+ ✦ Upgrade + + } @else { + + }
} @@ -97,17 +110,24 @@

{{ $any(connectionItem).displayTitle @if (connections?.length) {
@if (showHostedDatabaseEntry) { - + @if (hostedDbLimitReached) { + + cloud_queue + Upgrade to host more + + } @else { + + } } @if (currentUser?.role === 'ADMIN' || currentUser?.role === 'DB_ADMIN') { = 3; + } + ngOnChanges(changes: SimpleChanges) { if (changes.companyId && this.companyId) { this._companyService.fetchCompanyMembers(this.companyId).subscribe((members: CompanyMember[]) => { this.hasMultipleMembers = members && members.length > 1; }); + + if (this.isSaas) { + this._hostedDatabaseService.listHostedDatabases(this.companyId).then((dbs) => { + this.hostedDbCount = dbs?.length || 0; + }); + } } if (changes.connections && this.connections && !this.connectionsListCollapsed) { @@ -115,6 +130,11 @@ export class OwnConnectionsComponent implements OnInit, OnChanges { return; } + if (this.hostedDbLimitReached) { + this._router.navigate(['/upgrade']); + return; + } + const subscriptionLevel = this.currentUser.subscriptionLevel; const isFreePlan = !subscriptionLevel || subscriptionLevel === SubscriptionPlans.free; console.log('[HostedDB] subscriptionLevel:', subscriptionLevel, 'isFreePlan:', isFreePlan); @@ -136,6 +156,11 @@ export class OwnConnectionsComponent implements OnInit, OnChanges { this.creatingHostedDatabase.set(true); posthog.capture('Connections: hosted PostgreSQL creation started'); + // Remember existing connection IDs before creation + const existingIds = new Set( + (this._connectionsService.ownConnectionsList || []).map((c: any) => c.connection?.id || c.id), + ); + try { const hostedDatabase = await this._hostedDatabaseService.createHostedDatabase(companyId); @@ -144,11 +169,31 @@ export class OwnConnectionsComponent implements OnInit, OnChanges { } posthog.capture('Connections: hosted PostgreSQL provisioned successfully'); - this._connectionsService.fetchConnections().subscribe(); this._notifications.showSuccessSnackbar('Hosted PostgreSQL database is ready.'); + this.hostedDbCount++; + + // Fetch connections and find the newly created one by diffing + let connectionId: string | null = null; + try { + await new Promise((resolve) => { + this._connectionsService.fetchConnections().subscribe({ + next: () => { + const list = this._connectionsService.ownConnectionsList || []; + const newConn = list.find((c: any) => { + const id = c.connection?.id || c.id; + return !existingIds.has(id); + }); + connectionId = (newConn as any)?.connection?.id || newConn?.id || null; + resolve(); + }, + error: () => resolve(), + }); + }); + } catch {} + this._openHostedDatabaseDialog({ hostedDatabase, - connectionId: null, + connectionId, }); } catch (error) { const errorMessage = this._getErrorMessage(error); @@ -177,12 +222,29 @@ export class OwnConnectionsComponent implements OnInit, OnChanges { } private _openHostedDatabaseDialog(data: HostedDatabaseSuccessDialogData): void { - this._dialog.open(HostedDatabaseSuccessDialogComponent, { + const dialogRef = this._dialog.open(HostedDatabaseSuccessDialogComponent, { width: '42em', maxWidth: '95vw', data, disableClose: true, }); + + dialogRef.afterClosed().subscribe(() => { + if (data.connectionId) { + this._openRenameDialog({ + connectionId: data.connectionId, + hostedDatabase: data.hostedDatabase, + }); + } + }); + } + + private _openRenameDialog(data: HostedDatabaseRenameDialogData): void { + this._dialog.open(HostedDatabaseRenameDialogComponent, { + width: '28em', + maxWidth: '95vw', + data, + }); } private _getErrorMessage(error: unknown): string { diff --git a/frontend/src/app/components/hosted-databases/hosted-database-reset-password-dialog/hosted-database-reset-password-dialog.component.css b/frontend/src/app/components/hosted-databases/hosted-database-reset-password-dialog/hosted-database-reset-password-dialog.component.css index 48b944db6..03a283c2f 100644 --- a/frontend/src/app/components/hosted-databases/hosted-database-reset-password-dialog/hosted-database-reset-password-dialog.component.css +++ b/frontend/src/app/components/hosted-databases/hosted-database-reset-password-dialog/hosted-database-reset-password-dialog.component.css @@ -46,6 +46,12 @@ padding-top: 8px; } +.reset-dialog__copy-check { + font-size: 18px; + width: 18px; + height: 18px; +} + @media (prefers-color-scheme: dark) { .reset-dialog__credentials { background: transparent; diff --git a/frontend/src/app/components/hosted-databases/hosted-database-reset-password-dialog/hosted-database-reset-password-dialog.component.html b/frontend/src/app/components/hosted-databases/hosted-database-reset-password-dialog/hosted-database-reset-password-dialog.component.html index 0088d17dd..dc18b2e5a 100644 --- a/frontend/src/app/components/hosted-databases/hosted-database-reset-password-dialog/hosted-database-reset-password-dialog.component.html +++ b/frontend/src/app/components/hosted-databases/hosted-database-reset-password-dialog/hosted-database-reset-password-dialog.component.html @@ -40,11 +40,18 @@

New password for {{ result()!.databaseName }} - + @if (canClose()) { + + } } diff --git a/frontend/src/app/components/hosted-databases/hosted-database-reset-password-dialog/hosted-database-reset-password-dialog.component.ts b/frontend/src/app/components/hosted-databases/hosted-database-reset-password-dialog/hosted-database-reset-password-dialog.component.ts index fdf865699..6137d4be3 100644 --- a/frontend/src/app/components/hosted-databases/hosted-database-reset-password-dialog/hosted-database-reset-password-dialog.component.ts +++ b/frontend/src/app/components/hosted-databases/hosted-database-reset-password-dialog/hosted-database-reset-password-dialog.component.ts @@ -2,6 +2,7 @@ import { CdkCopyToClipboard } from '@angular/cdk/clipboard'; import { Component, computed, inject, signal } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog'; +import { MatIconModule } from '@angular/material/icon'; import posthog from 'posthog-js'; import { CreatedHostedDatabase, FoundHostedDatabase } from 'src/app/models/hosted-database'; import { HostedDatabaseService } from 'src/app/services/hosted-database.service'; @@ -11,7 +12,7 @@ import { NotificationsService } from 'src/app/services/notifications.service'; selector: 'app-hosted-database-reset-password-dialog', templateUrl: './hosted-database-reset-password-dialog.component.html', styleUrls: ['./hosted-database-reset-password-dialog.component.css'], - imports: [MatDialogModule, MatButtonModule, CdkCopyToClipboard], + imports: [MatDialogModule, MatButtonModule, MatIconModule, CdkCopyToClipboard], }) export class HostedDatabaseResetPasswordDialogComponent { private _hostedDatabaseService = inject(HostedDatabaseService); @@ -21,6 +22,8 @@ export class HostedDatabaseResetPasswordDialogComponent { protected submitting = signal(false); protected result = signal(null); protected phase = computed(() => (this.result() ? 'result' : 'confirm')); + protected copied = signal(false); + protected canClose = signal(false); get credentialsText(): string { const r = this.result(); @@ -45,5 +48,8 @@ export class HostedDatabaseResetPasswordDialogComponent { handleCredentialsCopied(): void { this._notifications.showSuccessSnackbar('New credentials were copied to clipboard.'); + this.copied.set(true); + this.canClose.set(true); + setTimeout(() => { this.copied.set(false); }, 2000); } } diff --git a/frontend/src/app/components/hosted-databases/hosted-databases.component.css b/frontend/src/app/components/hosted-databases/hosted-databases.component.css index 3c9495df1..ec8bbcb35 100644 --- a/frontend/src/app/components/hosted-databases/hosted-databases.component.css +++ b/frontend/src/app/components/hosted-databases/hosted-databases.component.css @@ -149,9 +149,10 @@ .db-card__details { display: flex; flex-wrap: wrap; - gap: 16px; + gap: 0 16px; color: rgba(0, 0, 0, 0.64); font-size: 13px; + margin-top: 8px; } @media (prefers-color-scheme: dark) { diff --git a/frontend/src/app/components/hosted-databases/hosted-databases.component.html b/frontend/src/app/components/hosted-databases/hosted-databases.component.html index 717ff9961..323cf074a 100644 --- a/frontend/src/app/components/hosted-databases/hosted-databases.component.html +++ b/frontend/src/app/components/hosted-databases/hosted-databases.component.html @@ -26,7 +26,7 @@

Hosted Databases

@for (db of databases(); track db.id) {
-
{{ db.databaseName }}
+
{{ db.title || db.databaseName }}
Host: @@ -36,6 +36,10 @@

Hosted Databases

Port: {{ db.port }} + + Database name: + {{ db.databaseName }} + User: {{ db.username }} diff --git a/frontend/src/app/components/hosted-databases/hosted-databases.component.ts b/frontend/src/app/components/hosted-databases/hosted-databases.component.ts index 5f500344d..c076e8d6a 100644 --- a/frontend/src/app/components/hosted-databases/hosted-databases.component.ts +++ b/frontend/src/app/components/hosted-databases/hosted-databases.component.ts @@ -8,6 +8,7 @@ import { Title } from '@angular/platform-browser'; import posthog from 'posthog-js'; import { FoundHostedDatabase } from 'src/app/models/hosted-database'; import { CompanyService } from 'src/app/services/company.service'; +import { ConnectionsService } from 'src/app/services/connections.service'; import { HostedDatabaseService } from 'src/app/services/hosted-database.service'; import { UserService } from 'src/app/services/user.service'; @@ -24,6 +25,7 @@ import { HostedDatabaseResetPasswordDialogComponent } from './hosted-database-re }) export class HostedDatabasesComponent implements OnInit { private _hostedDatabaseService = inject(HostedDatabaseService); + private _connectionsService = inject(ConnectionsService); private _userService = inject(UserService); private _company = inject(CompanyService); private _dialog = inject(MatDialog); @@ -56,6 +58,7 @@ export class HostedDatabasesComponent implements OnInit { dialogRef.afterClosed().subscribe(async (action) => { if (action === 'delete') { posthog.capture('Hosted Databases: database deleted successfully'); + this._connectionsService.invalidateConnections(); await this._loadDatabases(); } }); @@ -66,6 +69,7 @@ export class HostedDatabasesComponent implements OnInit { width: '32em', maxWidth: '95vw', data: db, + disableClose: true, }); } diff --git a/frontend/src/app/components/page-loader/page-loader.component.css b/frontend/src/app/components/page-loader/page-loader.component.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/frontend/src/app/components/page-loader/page-loader.component.html b/frontend/src/app/components/page-loader/page-loader.component.html deleted file mode 100644 index e69de29bb..000000000 diff --git a/frontend/src/app/components/page-loader/page-loader.component.spec.ts b/frontend/src/app/components/page-loader/page-loader.component.spec.ts deleted file mode 100644 index 55cac08a1..000000000 --- a/frontend/src/app/components/page-loader/page-loader.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { provideRouter } from '@angular/router'; -import { PageLoaderComponent } from './page-loader.component'; - -describe('LoaderComponent', () => { - let component: PageLoaderComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [PageLoaderComponent], - providers: [provideRouter([])], - }).compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(PageLoaderComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/frontend/src/app/components/page-loader/page-loader.component.ts b/frontend/src/app/components/page-loader/page-loader.component.ts deleted file mode 100644 index d4dd37473..000000000 --- a/frontend/src/app/components/page-loader/page-loader.component.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Component, NgZone, OnInit } from '@angular/core'; - -import { Router } from '@angular/router'; - -@Component({ - selector: 'app-page-loader', - templateUrl: './page-loader.component.html', - styleUrls: ['./page-loader.component.css'], -}) -export class PageLoaderComponent implements OnInit { - constructor( - public router: Router, - _ngZone: NgZone, - ) {} - - ngOnInit() {} -} diff --git a/frontend/src/app/components/upgrade/upgrade.component.css b/frontend/src/app/components/upgrade/upgrade.component.css index af9c7bf30..6818ec139 100644 --- a/frontend/src/app/components/upgrade/upgrade.component.css +++ b/frontend/src/app/components/upgrade/upgrade.component.css @@ -336,6 +336,34 @@ margin-bottom: 20px; } +.plansTable--hosted { + width: 100%; + border-collapse: collapse; +} + +.plansTable--hosted td { + padding: 12px 16px; + font-size: 14px; + border-bottom: 1px solid rgba(0, 0, 0, 0.08); +} + +.hosted-pricing-details { + font-size: 12px; + opacity: 0.65; +} + +.hosted-pricing-note { + font-size: 12px; + opacity: 0.45; + font-style: italic; +} + +@media (prefers-color-scheme: dark) { + .plansTable--hosted td { + border-bottom-color: rgba(255, 255, 255, 0.08); + } +} + @media (prefers-color-scheme: dark) { .plansTable { --mat-table-header-headline-color: rgba(255, 255, 255, 0.64); diff --git a/frontend/src/app/components/upgrade/upgrade.component.html b/frontend/src/app/components/upgrade/upgrade.component.html index 178dda1bd..138a866d0 100644 --- a/frontend/src/app/components/upgrade/upgrade.component.html +++ b/frontend/src/app/components/upgrade/upgrade.component.html @@ -112,25 +112,22 @@

Databases

Hosted Instances

- +
- - + - - - - - + + + + + + +
- {{element[plan.key]}} - - - {{element[plan.key]}} - -
Hosted PostgreSQLTiny node (0.1 CPU, 100 MB) + Scalable node
+ $0.04/CPU/min · $0.2/GB/mo · $0.04/M IOPS +

Users

diff --git a/frontend/src/app/components/upgrade/upgrade.component.ts b/frontend/src/app/components/upgrade/upgrade.component.ts index 36ed25ee8..87e5abe21 100644 --- a/frontend/src/app/components/upgrade/upgrade.component.ts +++ b/frontend/src/app/components/upgrade/upgrade.component.ts @@ -46,8 +46,8 @@ export class UpgradeComponent implements OnInit { { title: 'Hosted PostgreSQL', free: 'Tiny node (0.1 CPU, 100 MB)', - team: 'Scalable (pay as you go)', - enterprise: 'Scalable (pay as you go)', + team: 'Scalable node — $0.04/CPU/min, $0.2/GB/mo, $0.04/M IOPS', + enterprise: 'Scalable node — $0.04/CPU/min, $0.2/GB/mo, $0.04/M IOPS', }, ]; diff --git a/frontend/src/app/models/hosted-database.ts b/frontend/src/app/models/hosted-database.ts index 4c018d405..818717807 100644 --- a/frontend/src/app/models/hosted-database.ts +++ b/frontend/src/app/models/hosted-database.ts @@ -17,4 +17,5 @@ export interface FoundHostedDatabase { port: number; username: string; createdAt: string; + title?: string; } diff --git a/frontend/src/app/services/connections.service.spec.ts b/frontend/src/app/services/connections.service.spec.ts index 24edf4416..5057f329f 100644 --- a/frontend/src/app/services/connections.service.spec.ts +++ b/frontend/src/app/services/connections.service.spec.ts @@ -9,8 +9,10 @@ import { AlertActionType, AlertType } from '../models/alert'; import { ConnectionType, DBtype } from '../models/connection'; import { AccessLevel } from '../models/user'; import { ConnectionsService } from './connections.service'; +import { HostedDatabaseService } from './hosted-database.service'; import { MasterPasswordService } from './master-password.service'; import { NotificationsService } from './notifications.service'; +import { UserService } from './user.service'; describe('ConnectionsService', () => { let httpMock: HttpTestingController; @@ -18,6 +20,8 @@ describe('ConnectionsService', () => { let fakeNotifications; let fakeMasterPassword; + let fakeHostedDatabaseService; + let fakeUserService; const connectionCredsApp = { title: 'Test connection via SSH tunnel to mySQL', @@ -102,6 +106,12 @@ describe('ConnectionsService', () => { showMasterPasswordDialog: vi.fn(), checkMasterPassword: vi.fn(), }; + fakeHostedDatabaseService = { + listHostedDatabases: vi.fn().mockResolvedValue([]), + }; + fakeUserService = { + cast: of({ company: { id: 'test-company-id' } }), + }; TestBed.configureTestingModule({ imports: [MatSnackBarModule, MatDialogModule], @@ -118,6 +128,14 @@ describe('ConnectionsService', () => { provide: MasterPasswordService, useValue: fakeMasterPassword, }, + { + provide: HostedDatabaseService, + useValue: fakeHostedDatabaseService, + }, + { + provide: UserService, + useValue: fakeUserService, + }, ], }); diff --git a/frontend/src/app/services/connections.service.ts b/frontend/src/app/services/connections.service.ts index aa3414889..da2f9177a 100644 --- a/frontend/src/app/services/connections.service.ts +++ b/frontend/src/app/services/connections.service.ts @@ -2,13 +2,15 @@ import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { NavigationEnd, Router } from '@angular/router'; import { IColorConfig, NgxThemeService } from '@brumeilde/ngx-theme'; -import { BehaviorSubject, EMPTY, throwError } from 'rxjs'; +import { BehaviorSubject, EMPTY, firstValueFrom, throwError } from 'rxjs'; import { catchError, filter, map } from 'rxjs/operators'; import { AlertActionType, AlertType } from '../models/alert'; import { Connection, ConnectionSettings, ConnectionType, DBtype } from '../models/connection'; import { AccessLevel } from '../models/user'; +import { HostedDatabaseService } from './hosted-database.service'; import { MasterPasswordService } from './master-password.service'; import { NotificationsService } from './notifications.service'; +import { UserService } from './user.service'; interface LogParams { connectionID: string; @@ -69,6 +71,8 @@ export class ConnectionsService { public defaultDisplayTable: string; public ownConnections: Connection[] = null; public testConnections: Connection[] = null; + public isHostedConnection: boolean = false; + private hostedDatabaseHostnames: Set = new Set(); private connectionNameSubject: BehaviorSubject = new BehaviorSubject('Rocketadmin'); private connectionSigningKeySubject: BehaviorSubject = new BehaviorSubject(null); @@ -76,12 +80,18 @@ export class ConnectionsService { public cast = this.connectionsSubject.asObservable(); + invalidateConnections(): void { + this.connectionsSubject.next(null); + } + constructor( private _http: HttpClient, private router: Router, private _notifications: NotificationsService, private _masterPassword: MasterPasswordService, public _themeService: NgxThemeService>, + private _hostedDatabaseService: HostedDatabaseService, + private _userService: UserService, ) { this.connection = { ...this.connectionInitialState }; this.router = router; @@ -157,6 +167,7 @@ export class ConnectionsService { setConnectionInfo(id: string) { this.defaultDisplayTable = null; + this.isHostedConnection = false; if (id) { this.fetchConnection(id).subscribe((res) => { this.connection = res.connection; @@ -194,6 +205,7 @@ export class ConnectionsService { }, }); } + this.checkIfHostedConnection(res.connection.host); }); } else { this.connection = { ...this.connectionInitialState }; @@ -556,6 +568,21 @@ export class ConnectionsService { ); } + updateConnectionTitle(connectionID: string, title: string) { + return this._http.put(`/connection/title/${connectionID}`, { title }).pipe( + map((res) => { + this._notifications.showSuccessSnackbar('Connection title has been updated successfully.'); + return res; + }), + catchError((err) => { + console.log(err); + const errorMessage = err.error?.message || 'Unknown error'; + this._notifications.showErrorSnackbar(`${errorMessage}.`); + return EMPTY; + }), + ); + } + deleteConnectionSettings(connectionID: string) { return this._http.delete(`/connection/properties/${connectionID}`).pipe( map(() => { @@ -569,4 +596,30 @@ export class ConnectionsService { }), ); } + + private async checkIfHostedConnection(connectionHost: string) { + if (!connectionHost) { + this.isHostedConnection = false; + return; + } + if (this.hostedDatabaseHostnames.size === 0) { + await this.loadHostedDatabaseHostnames(); + } + this.isHostedConnection = this.hostedDatabaseHostnames.has(connectionHost); + } + + private async loadHostedDatabaseHostnames() { + try { + const user = await firstValueFrom(this._userService.cast.pipe(filter((u) => !!u?.company?.id))); + const databases = await this._hostedDatabaseService.listHostedDatabases(user.company.id); + this.hostedDatabaseHostnames.clear(); + if (databases) { + for (const db of databases) { + this.hostedDatabaseHostnames.add(db.hostname); + } + } + } catch { + // Silently fail - non-hosted path will be used + } + } }