Skip to content

Commit 0ec3884

Browse files
lyubov-voloshkolyubov-voloshko
committed
add elasticsearch creds form
1 parent 39a965b commit 0ec3884

File tree

4 files changed

+294
-0
lines changed

4 files changed

+294
-0
lines changed

‎frontend/src/app/components/connect-db/db-credentials-forms/elastic-credentials-form/elastic-credentials-form.component.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.connectForm__hostname,
2+
.connectForm__port {
3+
padding-bottom: 20px;
4+
}
5+
6+
@media (width <= 600px) {
7+
.connectForm__hostname {
8+
padding-bottom: 44px;
9+
}
10+
11+
.connectForm__port {
12+
padding-bottom: 0;
13+
}
14+
}

‎frontend/src/app/components/connect-db/db-credentials-forms/elastic-credentials-form/elastic-credentials-form.component.html‎

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
<mat-form-field appearance="outline" class="connectForm__hostname credentials-fieldset__1-3-columns">
2+
<mat-label>Hostname</mat-label>
3+
<input matInput name="hostname" #hostname="ngModel"
4+
data-testid="connection-hostname-input"
5+
angulartics2On="change"
6+
angularticsAction="Connection creds {{ connection.id ? 'edit' : 'add' }}: hostname is edited"
7+
required hostnameValidator="mongodb"
8+
[readonly]="(accessLevel === 'readonly' || connection.isTestConnection) && connection.id"
9+
[disabled]="submitting"
10+
[(ngModel)]="connection.host">
11+
<mat-hint>
12+
E.g. <strong><code>mongodb+srv://my-test-db.8a8grvb.mongoconnection.net</code></strong><br>
13+
Connections from internal IPs (e.g. localhost) are not supported
14+
</mat-hint>
15+
16+
<mat-error *ngIf="hostname.errors?.isLocalhost && hostname.invalid">
17+
To connect a database to an internal IP, use something like <strong>Pinggy</strong>
18+
(<a [href]="tunnelingServiceLink" target="_blank" class="credentials-fieldset__hint-link">here's a guide</a>),
19+
or <button type="button" (click)="switchToAgent.emit()" class="credentials-fieldset__hint-button">click here</button> to connect through an agent
20+
</mat-error>
21+
<mat-error *ngIf="hostname.errors?.isInvalidHostname && hostname.invalid">Hostname is invalid</mat-error>
22+
</mat-form-field>
23+
24+
<mat-form-field appearance="outline" class="connectForm__port">
25+
<mat-label>Port</mat-label>
26+
<input matInput type="number" name="port" #port="ngModel"
27+
data-testid="connection-port-input"
28+
angulartics2On="change"
29+
angularticsAction="Connection creds {{ connection.id ? 'edit' : 'add' }}: port is edited"
30+
required
31+
[readonly]="(accessLevel === 'readonly' || connection.isTestConnection) && connection.id"
32+
[disabled]="submitting"
33+
[(ngModel)]="connection.port">
34+
<mat-error *ngIf="port.errors?.required && (port.invalid && port.touched)">Port should not be empty</mat-error>
35+
</mat-form-field>
36+
37+
<mat-form-field appearance="outline" class="credentials-fieldset__1-2-columns">
38+
<mat-label>Username</mat-label>
39+
<input matInput name="username" #username="ngModel"
40+
data-testid="connection-username-input"
41+
angulartics2On="change"
42+
angularticsAction="Connection creds {{ connection.id ? 'edit' : 'add' }}: username is edited"
43+
required
44+
[readonly]="readonly"
45+
[disabled]="submitting"
46+
[(ngModel)]="connection.username">
47+
<mat-error *ngIf="username.errors?.required && (username.invalid && username.touched)">Username should not be empty</mat-error>
48+
</mat-form-field>
49+
50+
<mat-form-field appearance="outline" class="credentials-fieldset__3-4-columns">
51+
<mat-label>Password</mat-label>
52+
<input type="password" matInput name="password" #password="ngModel"
53+
data-testid="connection-password-input"
54+
angulartics2On="change"
55+
angularticsAction="Connection creds {{ connection.id ? 'edit' : 'add' }}: password is edited"
56+
[required]="!connection.id || hostname.touched || port.touched"
57+
[readonly]="(accessLevel === 'readonly' || connection.isTestConnection) && connection.id"
58+
[disabled]="submitting"
59+
[(ngModel)]="connection.password">
60+
<mat-hint *ngIf="connection.id && (hostname.pristine && port.pristine)">To keep password the same keep this field blank</mat-hint>
61+
<mat-hint *ngIf="connection.id && (hostname.dirty || port.dirty)">Password needed due to hostname/port change</mat-hint>
62+
</mat-form-field>
63+
64+
<mat-expansion-panel class="credentials-fieldset__1-4-columns">
65+
<mat-expansion-panel-header data-testid="connection-advanced-settings-expansion-panel-header">
66+
<mat-panel-title>
67+
Advanced settings
68+
</mat-panel-title>
69+
</mat-expansion-panel-header>
70+
71+
<div class="advanced-settings">
72+
<app-master-encryption-password class="advanced-settings__fullLine"
73+
[masterKey]="masterKey"
74+
[disabled]="accessLevel === 'readonly' || submitting || connection.isTestConnection"
75+
(onMasterKeyChange)="handleMasterKeyChange($event)">
76+
</app-master-encryption-password>
77+
78+
<mat-form-field appearance="outline" class="advanced-settings__fullLine">
79+
<mat-label>Username</mat-label>
80+
<input matInput name="username" #username="ngModel"
81+
data-testid="connection-username-input"
82+
angulartics2On="change"
83+
angularticsAction="Connection creds {{ connection.id ? 'edit' : 'add' }}: username is edited"
84+
[readonly]="(accessLevel === 'readonly' || connection.isTestConnection) && connection.id"
85+
[disabled]="submitting"
86+
[(ngModel)]="connection.username">
87+
<mat-error *ngIf="username.errors?.required && (username.invalid && username.touched)">Username should not be empty</mat-error>
88+
</mat-form-field>
89+
90+
<mat-form-field appearance="outline" class="advanced-settings__fullLine">
91+
<mat-label>Database name</mat-label>
92+
<input matInput name="database" #database="ngModel"
93+
data-testid="connection-database-input"
94+
angulartics2On="change"
95+
angularticsAction="Connection creds {{ connection.id ? 'edit' : 'add' }}: database name is edited"
96+
[readonly]="(accessLevel === 'readonly' || connection.isTestConnection) && connection.id"
97+
[disabled]="submitting"
98+
[(ngModel)]="connection.database">
99+
<mat-error *ngIf="database.errors?.required && (database.invalid && database.touched)">Name should not be empty</mat-error>
100+
</mat-form-field>
101+
102+
<mat-checkbox class="checkbox-line advanced-settings__fullLine" name="ssh" #ssh="ngModel"
103+
data-testid="connection-ssh-checkbox"
104+
labelPosition="after"
105+
angulartics2On="click"
106+
angularticsAction="Connection creds {{ connection.id ? 'edit' : 'add' }}: SSH is switched"
107+
[angularticsProperties]="{'enable': connection.ssh}"
108+
[disabled]="submitting || connection.isTestConnection"
109+
[(ngModel)]="connection.ssh">
110+
Use SSH tunnel
111+
</mat-checkbox>
112+
113+
<mat-form-field *ngIf="connection.ssh" appearance="outline" floatLabel="always" class="advanced-settings__fullLine">
114+
<mat-label>Private SSH key</mat-label>
115+
<textarea matInput resizeToFitContent rows="8" name="privateSSHKey" #privateSSHKey="ngModel"
116+
placeholder="Sensitive — write-only field"
117+
data-testid="connection-ssh-key-textarea"
118+
angulartics2On="change"
119+
angularticsAction="Connection creds {{ connection.id ? 'edit' : 'add' }}: SSH key is edited"
120+
[required]="connection.ssh && !connection.id" [readonly]="accessLevel === 'readonly' && connection.id"
121+
[disabled]="submitting"
122+
[(ngModel)]="connection.privateSSHKey"
123+
></textarea>
124+
<mat-error *ngIf="privateSSHKey.errors?.required && (privateSSHKey.invalid && privateSSHKey.touched)">Private SSH key should not be empty</mat-error>
125+
</mat-form-field>
126+
127+
<mat-form-field *ngIf="connection.ssh" appearance="outline">
128+
<mat-label>SSH host</mat-label>
129+
<input matInput name="sshHost" #sshHost="ngModel"
130+
data-testid="connection-ssh-host-input"
131+
angulartics2On="change"
132+
angularticsAction="Connection creds {{ connection.id ? 'edit' : 'add' }}: SSH host is edited"
133+
[required]="connection.ssh" [readonly]="accessLevel === 'readonly' && connection.id"
134+
[disabled]="submitting"
135+
[(ngModel)]="connection.sshHost">
136+
<mat-error *ngIf="sshHost.errors?.required && (sshHost.invalid && sshHost.touched)">SSH host should not be empty</mat-error>
137+
</mat-form-field>
138+
139+
<mat-form-field *ngIf="connection.ssh" appearance="outline">
140+
<mat-label>SSH port</mat-label>
141+
<input matInput type="number" name="sshPort" #sshPort="ngModel"
142+
data-testid="connection-ssh-port-input"
143+
angulartics2On="change"
144+
angularticsAction="Connection creds {{ connection.id ? 'edit' : 'add' }}: SSH port is edited"
145+
[required]="connection.ssh" [readonly]="accessLevel === 'readonly' && connection.id"
146+
[disabled]="submitting"
147+
[(ngModel)]="connection.sshPort">
148+
<mat-error *ngIf="sshPort.errors?.required && (sshPort.invalid && sshPort.touched)">SSH port should not be empty</mat-error>
149+
</mat-form-field>
150+
151+
<mat-form-field *ngIf="connection.ssh" appearance="outline" floatLabel="always">
152+
<mat-label>SSH username</mat-label>
153+
<input matInput name="sshUsername" #sshUsername="ngModel"
154+
placeholder="Sensitive — write-only field"
155+
data-testid="connection-ssh-username-input"
156+
angulartics2On="change"
157+
angularticsAction="Connection creds {{ connection.id ? 'edit' : 'add' }}: SSH username is edited"
158+
[required]="connection.ssh" [readonly]="accessLevel === 'readonly' && connection.id"
159+
[disabled]="submitting"
160+
[(ngModel)]="connection.sshUsername">
161+
<mat-error *ngIf="sshUsername.errors?.required && (sshUsername.invalid && sshUsername.touched)">SSH username should not be empty</mat-error>
162+
</mat-form-field>
163+
164+
<mat-checkbox class="checkbox-line advanced-settings__fullLine" name="ssl" #ssh="ngModel"
165+
labelPosition="after"
166+
data-testid="connection-ssl-checkbox"
167+
angulartics2On="click"
168+
angularticsAction="Connection creds {{ connection.id ? 'edit' : 'add' }}: SSL is switched"
169+
[angularticsProperties]="{'enable': connection.ssl}"
170+
[disabled]="submitting || connection.isTestConnection"
171+
[(ngModel)]="connection.ssl">
172+
Check SSL certificate
173+
</mat-checkbox>
174+
175+
<mat-form-field *ngIf="connection.ssl" appearance="outline" class="advanced-settings__fullLine">
176+
<mat-label>SSL certificate</mat-label>
177+
<textarea matInput resizeToFitContent rows="8" name="sslCert" #sslCert="ngModel"
178+
data-testid="connection-ssl-certificate-textarea"
179+
angulartics2On="change"
180+
angularticsAction="Connection creds {{ connection.id ? 'edit' : 'add' }}: SSL certificate is edited"
181+
[required]="connection.ssl" [readonly]="accessLevel === 'readonly' && connection.id"
182+
[disabled]="submitting"
183+
[(ngModel)]="connection.cert"
184+
></textarea>
185+
<mat-error *ngIf="sslCert.errors?.required && (sslCert.invalid && sslCert.touched)">SSL certificate should not be empty</mat-error>
186+
</mat-form-field>
187+
</div>
188+
</mat-expansion-panel>

‎frontend/src/app/components/connect-db/db-credentials-forms/elastic-credentials-form/elastic-credentials-form.component.spec.ts‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { Angulartics2Module } from 'angulartics2';
4+
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
5+
import { FormsModule } from '@angular/forms';
6+
import { MatCheckboxModule } from '@angular/material/checkbox';
7+
import { RedisCredentialsFormComponent } from './redis-credentials-form.component';
8+
import { provideHttpClient } from '@angular/common/http';
9+
10+
describe('RedisCredentialsFormComponent', () => {
11+
let component: RedisCredentialsFormComponent;
12+
let fixture: ComponentFixture<RedisCredentialsFormComponent>;
13+
14+
beforeEach(async () => {
15+
await TestBed.configureTestingModule({
16+
imports: [
17+
FormsModule,
18+
MatCheckboxModule,
19+
BrowserAnimationsModule,
20+
Angulartics2Module.forRoot({}),
21+
RedisCredentialsFormComponent
22+
],
23+
providers: [provideHttpClient()]
24+
})
25+
.compileComponents();
26+
27+
fixture = TestBed.createComponent(RedisCredentialsFormComponent);
28+
component = fixture.componentInstance;
29+
30+
component.connection = {
31+
id: "12345678"
32+
} as any;
33+
34+
// component.connection = {
35+
// "title": "Test connection via SSH tunnel to mySQL",
36+
// "masterEncryption": false,
37+
// "type": DBtype.MySQL,
38+
// "host": "database-2.cvfuxe8nltiq.us-east-2.rds.amazonaws.com",
39+
// "port": "3306",
40+
// "username": "admin",
41+
// "database": "testDB",
42+
// "schema": null,
43+
// "sid": null,
44+
// "id": "9d5f6d0f-9516-4598-91c4-e4fe6330b4d4",
45+
// "ssh": true,
46+
// "sshHost": "3.134.99.192",
47+
// "sshPort": '22',
48+
// "sshUsername": "ubuntu",
49+
// "ssl": false,
50+
// "cert": null,
51+
// "connectionType": ConnectionType.Direct,
52+
// "azure_encryption": false,
53+
// "signing_key": ''
54+
// };
55+
fixture.detectChanges();
56+
});
57+
58+
it('should create', () => {
59+
expect(component).toBeTruthy();
60+
});
61+
});

‎frontend/src/app/components/connect-db/db-credentials-forms/elastic-credentials-form/elastic-credentials-form.component.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { Angulartics2Module } from 'angulartics2';
2+
import { BaseCredentialsFormComponent } from '../base-credentials-form/base-credentials-form.component';
3+
import { Component } from '@angular/core';
4+
import { FormsModule } from '@angular/forms';
5+
import { HostnameValidationDirective } from 'src/app/directives/hostnameValidator.directive';
6+
import { MasterEncryptionPasswordComponent } from '../../master-encryption-password/master-encryption-password.component';
7+
import { MatCheckboxModule } from '@angular/material/checkbox';
8+
import { MatExpansionModule } from '@angular/material/expansion';
9+
import { MatFormFieldModule } from '@angular/material/form-field';
10+
import { MatInputModule } from '@angular/material/input';
11+
import { NgIf } from '@angular/common';
12+
13+
@Component({
14+
selector: 'app-redis-credentials-form',
15+
templateUrl: './redis-credentials-form.component.html',
16+
styleUrls: ['../base-credentials-form/base-credentials-form.component.css', './redis-credentials-form.component.css'],
17+
imports: [
18+
NgIf,
19+
FormsModule,
20+
MatFormFieldModule,
21+
MatInputModule,
22+
MatCheckboxModule,
23+
MatExpansionModule,
24+
HostnameValidationDirective,
25+
MasterEncryptionPasswordComponent,
26+
Angulartics2Module
27+
]
28+
})
29+
export class RedisCredentialsFormComponent extends BaseCredentialsFormComponent {
30+
31+
}

0 commit comments

Comments
 (0)