add clickhouse db #1480
add clickhouse db #1480
Conversation
There was a problem hiding this comment.
Pull request overview
This PR adds support for ClickHouse database connections to the application. The changes integrate ClickHouse across the frontend codebase, including UI components, type mappings, and form configurations.
- Adds ClickHouse as a supported database type with enum definition and branding
- Creates a new credentials form component for ClickHouse database connections
- Integrates ClickHouse-specific behavior for readonly primary key fields, similar to DynamoDB
Reviewed changes
Copilot reviewed 13 out of 14 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/assets/icons/db-logos/clickhouse_logo.svg | Adds the ClickHouse logo SVG asset for use in the UI |
| frontend/src/app/models/connection.ts | Adds ClickHouse to the DBtype enum |
| frontend/src/app/consts/table-display-types.ts | Defines type-to-component mappings for displaying ClickHouse field types in tables |
| frontend/src/app/consts/record-view-types.ts | Defines type-to-component mappings for viewing ClickHouse records |
| frontend/src/app/consts/record-edit-types.ts | Defines type-to-component mappings for editing ClickHouse records |
| frontend/src/app/consts/databases.ts | Adds ClickHouse to the supported databases list with display title |
| frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.ts | Implements ClickHouse-specific logic to treat primary key fields as readonly, similar to DynamoDB |
| frontend/src/app/components/connect-db/db-credentials-forms/clickhouse-credentials-form/clickhouse-credentials-form.component.ts | Creates the ClickHouse credentials form component extending the base form |
| frontend/src/app/components/connect-db/db-credentials-forms/clickhouse-credentials-form/clickhouse-credentials-form.component.spec.ts | Adds unit tests for the ClickHouse credentials form component |
| frontend/src/app/components/connect-db/db-credentials-forms/clickhouse-credentials-form/clickhouse-credentials-form.component.html | Provides the HTML template for the ClickHouse connection form with standard database fields and SSH/SSL support |
| frontend/src/app/components/connect-db/db-credentials-forms/clickhouse-credentials-form/clickhouse-credentials-form.component.css | Adds responsive styling for the ClickHouse credentials form |
| frontend/src/app/components/connect-db/connect-db.component.ts | Imports the ClickHouse form component and sets the default port to 8443 |
| frontend/src/app/components/connect-db/connect-db.component.html | Adds the ClickHouse credentials form to the connection UI |
| frontend/src/app/app.component.ts | Registers the ClickHouse logo SVG icon for use throughout the application |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| @@ -0,0 +1,40 @@ | |||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | |||
|
|
|||
| import { ClickhouseCredentialsFormComponent } from './clickhouse-credentials-form.component'; | |||
There was a problem hiding this comment.
The import statement should use ClickHouseCredentialsFormComponent (with capital 'H') to match the ClickHouse branding and be consistent with the component naming convention.
| MatCheckboxModule, | ||
| BrowserAnimationsModule, | ||
| Angulartics2Module.forRoot({}), | ||
| ClickhouseCredentialsFormComponent |
There was a problem hiding this comment.
The component reference should be ClickHouseCredentialsFormComponent (with capital 'H') to match the ClickHouse branding and be consistent with the component naming convention.
| <mat-error *ngIf="sshUsername.errors?.required && (sshUsername.invalid && sshUsername.touched)">SSH username should not be empty</mat-error> | ||
| </mat-form-field> | ||
|
|
||
| <mat-checkbox class="checkbox-line advanced-settings__fullLine" name="ssl" #ssh="ngModel" |
There was a problem hiding this comment.
The template reference variable should be #ssl="ngModel" instead of #ssh="ngModel" since this is the SSL checkbox, not SSH. This is a copy-paste error that could cause issues with form validation.
| <mat-checkbox class="checkbox-line advanced-settings__fullLine" name="ssl" #ssh="ngModel" | |
| <mat-checkbox class="checkbox-line advanced-settings__fullLine" name="ssl" #ssl="ngModel" |
| import { provideHttpClient } from '@angular/common/http'; | ||
|
|
||
| describe('ClickhouseCredentialsFormComponent', () => { | ||
| let component: ClickhouseCredentialsFormComponent; |
There was a problem hiding this comment.
The component type reference should be ClickHouseCredentialsFormComponent (with capital 'H') to match the ClickHouse branding and be consistent with the component naming convention.
| }) | ||
| .compileComponents(); | ||
|
|
||
| fixture = TestBed.createComponent(ClickhouseCredentialsFormComponent); |
There was a problem hiding this comment.
The component type reference should be ClickHouseCredentialsFormComponent (with capital 'H') to match the ClickHouse branding and be consistent with the component naming convention.
| import { environment } from 'src/environments/environment'; | ||
| import googlIPsList from 'src/app/consts/google-IP-addresses'; | ||
| import isIP from 'validator/lib/isIP'; | ||
| import { ClickhouseCredentialsFormComponent } from './db-credentials-forms/clickhouse-credentials-form/clickhouse-credentials-form.component'; |
There was a problem hiding this comment.
The import statement should use ClickHouseCredentialsFormComponent (with capital 'H') to match the ClickHouse branding and be consistent with the component naming convention.
| PostgresCredentialsFormComponent, | ||
| RedisCredentialsFormComponent, | ||
| ElasticCredentialsFormComponent, | ||
| ClickhouseCredentialsFormComponent, |
There was a problem hiding this comment.
The component reference in the imports array should be ClickHouseCredentialsFormComponent (with capital 'H') to match the ClickHouse branding and be consistent with the component naming convention.
| Angulartics2Module | ||
| ] | ||
| }) | ||
| export class ClickhouseCredentialsFormComponent extends BaseCredentialsFormComponent { |
There was a problem hiding this comment.
The class name should be ClickHouseCredentialsFormComponent (with capital 'H') to match the ClickHouse branding and be consistent with the DBtype.ClickHouse enum value defined in the connection model.
| export class ClickhouseCredentialsFormComponent extends BaseCredentialsFormComponent { | |
| export class ClickHouseCredentialsFormComponent extends BaseCredentialsFormComponent { |
| import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; | ||
| import { provideHttpClient } from '@angular/common/http'; | ||
|
|
||
| describe('ClickhouseCredentialsFormComponent', () => { |
There was a problem hiding this comment.
The component class name in the describe block should be ClickHouseCredentialsFormComponent (with capital 'H') to match the ClickHouse branding and be consistent with the component naming convention.
| describe('ClickhouseCredentialsFormComponent', () => { | |
| describe('ClickHouseCredentialsFormComponent', () => { |
No description provided.