Skip to content

Commit 82ecfec

Browse files
asthamohtaasthamohta
authored
feat: Support for UUID UI (#819)
* feat: uuid changes * changes * linting * test cases * fixes tests tests tests test fix * fixes * changes * changes * changes * merge changes * changes * changes * changes * changes
1 parent 2995e95 commit 82ecfec

18 files changed

+209
-23
lines changed

‎ui/dist/ui/index.html

+1-1
Large diffs are not rendered by default.

‎ui/dist/ui/main.e05c00d26c028177.js

-1
This file was deleted.

‎ui/dist/ui/main.e121cee446134240.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ui/package-lock.json

+6-6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ui/src/app/components/add-new-column/add-new-column.component.html

+22
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,28 @@ <h2>Column Details</h2>
2121
</mat-form-field>
2222
<br>
2323
</div>
24+
<div *ngIf="selectedDatatype != '' && autoGenMap[selectedDatatype].length > 1 && autGenSupported">
25+
<mat-form-field class="full-width" appearance="outline">
26+
<mat-label>Auto Generated</mat-label>
27+
<mat-select [(ngModel)]="selectedAutoGen" class="input-field" formControlName="autoGen">
28+
<ng-container *ngFor="let autoGen of autoGenMap[selectedDatatype]">
29+
<mat-option *ngIf="autoGen.GenerationType === ''" [value]="autoGen">
30+
{{ autoGen.Name !== '' ? autoGen.Name : 'None' }}
31+
</mat-option>
32+
</ng-container>
33+
<ng-container *ngIf="processedAutoGenMap[selectedDatatype] as types">
34+
<ng-container *ngFor="let type of types | keyvalue">
35+
<mat-optgroup *ngIf="type.key !== ''" [label]="type.key">
36+
<mat-option *ngFor="let autoGen of type.value" [value]="autoGen">
37+
{{ autoGen.Name }}
38+
</mat-option>
39+
</mat-optgroup>
40+
</ng-container>
41+
</ng-container>
42+
</mat-select>
43+
</mat-form-field>
44+
<br>
45+
</div>
2446
<mat-form-field appearance="outline">
2547
<mat-label>IsNullable</mat-label>
2648
<mat-select [(ngModel)]="selectedNull" formControlName="isNullable" required="true">

‎ui/src/app/components/add-new-column/add-new-column.component.ts

+28-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
import { Component, Inject, OnInit } from '@angular/core';
1+
import { Component, Inject, OnInit, Input } from '@angular/core';
22
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
33
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
4-
import { ColLength, DataTypes, Dialect } from 'src/app/app.constants';
5-
import { IAddColumnProps } from 'src/app/model/edit-table';
4+
import { ColLength, DataTypes, Dialect, StorageKeys } from 'src/app/app.constants';
5+
import { AutoGen, IAddColumnProps } from 'src/app/model/edit-table';
66
import { IAddColumn } from 'src/app/model/update-table';
77
import { DataService } from 'src/app/services/data/data.service';
8+
import { FetchService } from 'src/app/services/fetch/fetch.service'
9+
import { GroupedAutoGens, processAutoGens } from 'src/app/utils/utils';
810
@Component({
911
selector: 'app-add-new-column',
1012
templateUrl: './add-new-column.component.html',
@@ -19,9 +21,19 @@ export class AddNewColumnComponent implements OnInit {
1921
tableId: string = ""
2022
selectedNull: boolean = true
2123
dataTypesWithColLen: string[] = ColLength.DataTypes
24+
autoGenMap : any = {}
25+
selectedAutoGen: AutoGen = {
26+
Name: '',
27+
GenerationType: ''
28+
}
29+
processedAutoGenMap: GroupedAutoGens = {};
30+
srcDbName: string = localStorage.getItem(StorageKeys.SourceDbName) as string
31+
autoGenSupportedDbs: string[] = ['MySQL']
32+
autGenSupported: boolean = false
2233
constructor(
2334
private formBuilder: FormBuilder,
2435
private dataService: DataService,
36+
private fetchSerice: FetchService,
2537
private dialogRef: MatDialogRef<AddNewColumnComponent>,
2638
@Inject(MAT_DIALOG_DATA) public data: IAddColumnProps) {
2739
this.dialect = data.dialect
@@ -31,7 +43,18 @@ export class AddNewColumnComponent implements OnInit {
3143
datatype: ['', Validators.required],
3244
length: ['',Validators.pattern('^[0-9]+$')],
3345
isNullable: [],
46+
autoGen: [{
47+
Name: "",
48+
GenerationType: ""
49+
}],
3450
})
51+
this.fetchSerice.getAutoGenMap().subscribe(
52+
(autoGen: any) => {
53+
this.autoGenMap = autoGen;
54+
this.processedAutoGenMap = processAutoGens(this.autoGenMap)
55+
}
56+
);
57+
this.autGenSupported = this.autoGenSupportedDbs.includes(this.srcDbName)
3558
}
3659

3760

@@ -65,7 +88,8 @@ export class AddNewColumnComponent implements OnInit {
6588
Name: formValue.name,
6689
Datatype: this.selectedDatatype,
6790
Length: parseInt(formValue.length),
68-
IsNullable: this.selectedNull
91+
IsNullable: this.selectedNull,
92+
AutoGen: this.selectedAutoGen
6993
}
7094
this.dataService.addColumn(this.tableId, payload)
7195
this.dialogRef.close()

‎ui/src/app/components/object-detail/object-detail.component.html

+31-1
Original file line numberDiff line numberDiff line change
@@ -224,6 +224,36 @@ <h3 class="title">
224224
</td>
225225
</ng-container>
226226

227+
<ng-container matColumnDef="spAutoGen" *ngIf="autGenSupported">
228+
<th mat-header-cell class="table_header" *matHeaderCellDef>Auto-Generated</th>
229+
<td mat-cell *matCellDef="let element; let i = index">
230+
<div class="sp-autogen-data-cells">
231+
<ng-container *ngIf="isEditMode && element.get('srcId').value !== ''">
232+
<mat-form-field appearance="outline" class="w-100">
233+
<mat-select #matSelectsAutoGen [formControl]="element.get('spAutoGen')" [compareWith]="compareAutoGen">
234+
<ng-container *ngFor="let autoGen of autoGenMap[element.get('spDataType').value]">
235+
<mat-option *ngIf="autoGen.GenerationType === ''" [value]="autoGen">
236+
{{ autoGen.Name !== '' ? autoGen.Name : 'None' }}
237+
</mat-option>
238+
</ng-container>
239+
<ng-container *ngIf="element.get('spDataType').value as spDataType">
240+
<ng-container *ngFor="let typeGroup of (processedAutoGenMap[spDataType] | keyvalue)">
241+
<mat-optgroup *ngIf="typeGroup.key !== ''" [label]="typeGroup.key">
242+
<mat-option *ngFor="let autoGen of typeGroup.value" [value]="autoGen">
243+
{{ autoGen.Name }}
244+
</mat-option>
245+
</mat-optgroup>
246+
</ng-container>
247+
</ng-container>
248+
</mat-select>
249+
</mat-form-field>
250+
</ng-container>
251+
<ng-container *ngIf="!isEditMode">
252+
<p>{{ element.get('spAutoGen').value.Name !== '' ? element.get('spAutoGen').value.Name : 'None' }}</p>
253+
</ng-container>
254+
</div>
255+
</td>
256+
</ng-container>
227257
<ng-container matColumnDef="spColMaxLength">
228258
<th mat-header-cell class="table_header" *matHeaderCellDef>Max Length</th>
229259
<td mat-cell *matCellDef="let element">
@@ -333,7 +363,7 @@ <h3 class="title">
333363
</ng-container>
334364

335365
<ng-container matColumnDef="spDatabase">
336-
<th mat-header-cell *matHeaderCellDef class="db_name" colspan="6">
366+
<th mat-header-cell *matHeaderCellDef class="db_name" colspan=spColspan>
337367
<div class="spanner_edit-button">
338368
<span>Spanner</span>
339369
<div *ngIf="

‎ui/src/app/components/object-detail/object-detail.component.spec.ts

+10-2
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,11 @@ describe('ObjectDetailComponent', () => {
5151
srcId: '1',
5252
spId: '1',
5353
srcColMaxLength: 50,
54-
spColMaxLength: 50
54+
spColMaxLength: 50,
55+
spAutoGen: {
56+
Name: '',
57+
GenerationType: ''
58+
}
5559
},
5660
{
5761
spOrder: 2,
@@ -67,7 +71,11 @@ describe('ObjectDetailComponent', () => {
6771
srcId: '2',
6872
spId: '2',
6973
srcColMaxLength: 50,
70-
spColMaxLength: 50
74+
spColMaxLength: 50,
75+
spAutoGen: {
76+
Name: '',
77+
GenerationType: ''
78+
}
7179
},
7280
]
7381
component.fkData = [

‎ui/src/app/components/object-detail/object-detail.component.ts

+40-5
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ import IUpdateTable from '../../model/update-table'
44
import { DataService } from 'src/app/services/data/data.service'
55
import { MatDialog } from '@angular/material/dialog'
66
import { InfodialogComponent } from '../infodialog/infodialog.component'
7-
import IColumnTabData, { IIndexData } from '../../model/edit-table'
7+
import IColumnTabData, { AutoGen, IIndexData } from '../../model/edit-table'
88
import { SnackbarService } from 'src/app/services/snackbar/snackbar.service'
99
import IFkTabData from 'src/app/model/fk-tab-data'
10-
import { ColLength, Dialect, ObjectDetailNodeType, ObjectExplorerNodeType, StorageKeys } from 'src/app/app.constants'
10+
import { ColLength, Dialect, ObjectDetailNodeType, ObjectExplorerNodeType, SourceDbNames, StorageKeys } from 'src/app/app.constants'
1111
import FlatNode from 'src/app/model/schema-object-node'
1212
import { Subscription, take } from 'rxjs'
1313
import { MatTabChangeEvent } from '@angular/material/tabs/'
@@ -22,6 +22,7 @@ import { DropIndexOrTableDialogComponent } from '../drop-index-or-table-dialog/d
2222
import { SidenavService } from 'src/app/services/sidenav/sidenav.service'
2323
import { TableUpdatePubSubService } from 'src/app/services/table-update-pub-sub/table-update-pub-sub.service'
2424
import { AddNewColumnComponent } from '../add-new-column/add-new-column.component'
25+
import { GroupedAutoGens, processAutoGens } from 'src/app/utils/utils'
2526

2627
@Component({
2728
selector: 'app-object-detail',
@@ -43,12 +44,13 @@ export class ObjectDetailComponent implements OnInit {
4344
@Input() currentObject: FlatNode | null = null
4445
@Input() typeMap: any = {}
4546
@Input() defaultTypeMap: any = {}
47+
@Input() autoGenMap: any = {}
4648
@Input() ddlStmts: any = {}
4749
@Input() fkData: IFkTabData[] = []
4850
@Input() tableData: IColumnTabData[] = []
4951
@Input() currentDatabase: string = 'spanner'
5052
@Input() indexData: IIndexData[] = []
51-
@Input() srcDbName: String = localStorage.getItem(StorageKeys.SourceDbName) as string
53+
@Input() srcDbName: string = localStorage.getItem(StorageKeys.SourceDbName) as string
5254
@Output() updateSidebar = new EventEmitter<boolean>()
5355
ObjectExplorerNodeType = ObjectExplorerNodeType
5456
conv: IConv = {} as IConv
@@ -59,13 +61,17 @@ export class ObjectDetailComponent implements OnInit {
5961
localIndexData: IIndexData[] = []
6062
isMiddleColumnCollapse: boolean = false
6163
isPostgreSQLDialect: boolean = false
64+
processedAutoGenMap: GroupedAutoGens = {};
65+
autoGenSupportedDbs: string[] = ['MySQL']
66+
autGenSupported: boolean = false
6267
ngOnInit(): void {
6368
this.data.conv.subscribe({
6469
next: (res: IConv) => {
6570
this.conv = res
6671
this.isPostgreSQLDialect = this.conv.SpDialect === Dialect.PostgreSQLDialect
6772
},
6873
})
74+
this.autGenSupported = this.autoGenSupportedDbs.includes(this.srcDbName)
6975
}
7076

7177
srcDisplayedColumns = ['srcOrder', 'srcColName', 'srcDataType', 'srcColMaxLength', 'srcIsPk', 'srcIsNotNull']
@@ -141,6 +147,7 @@ export class ObjectDetailComponent implements OnInit {
141147
})
142148
pkObj: IPrimaryKey = {} as IPrimaryKey
143149
dataTypesWithColLen: string[] = ColLength.DataTypes
150+
spColspan : number = 6
144151

145152
ngOnChanges(changes: SimpleChanges): void {
146153
this.fkData = changes['fkData']?.currentValue || this.fkData
@@ -167,6 +174,11 @@ export class ObjectDetailComponent implements OnInit {
167174
this.localTableData = JSON.parse(JSON.stringify(this.tableData))
168175
this.localIndexData = JSON.parse(JSON.stringify(this.indexData))
169176

177+
if (this.srcDbName == SourceDbNames.MySQL && !this.spDisplayedColumns.includes("spAutoGen")) {
178+
this.spDisplayedColumns.splice(2, 0, "spAutoGen");
179+
this.spColspan++;
180+
}
181+
170182
if (this.currentObject?.type === ObjectExplorerNodeType.Table) {
171183
this.checkIsInterleave()
172184

@@ -183,6 +195,7 @@ export class ObjectDetailComponent implements OnInit {
183195
this.setFkRows()
184196
this.updateSpTableSuggestion()
185197
this.setShardIdColumn()
198+
this.processedAutoGenMap = processAutoGens(this.autoGenMap)
186199
} else if (this.currentObject?.type === ObjectExplorerNodeType.Index) {
187200
this.indexOrderValidation()
188201
this.setIndexRows()
@@ -213,6 +226,7 @@ export class ObjectDetailComponent implements OnInit {
213226
srcId: new FormControl(row.srcId),
214227
spColMaxLength: new FormControl(row.spColMaxLength, [
215228
Validators.required]),
229+
spAutoGen: new FormControl(row.spAutoGen),
216230
})
217231
if (this.dataTypesWithColLen.indexOf(row.spDataType.toString()) > -1) {
218232
fb.get('spColMaxLength')?.setValidators([Validators.required, Validators.pattern('([1-9][0-9]*|MAX)')])
@@ -259,6 +273,7 @@ export class ObjectDetailComponent implements OnInit {
259273
spId: new FormControl(col.spId),
260274
srcId: new FormControl(col.srcId),
261275
spColMaxLength: new FormControl(col.spColMaxLength),
276+
spAutoGen: new FormControl(col.spAutoGen),
262277
})
263278
)
264279
} else {
@@ -278,6 +293,7 @@ export class ObjectDetailComponent implements OnInit {
278293
spIsPk: new FormControl(col.srcIsPk),
279294
spIsNotNull: new FormControl(col.srcIsNotNull),
280295
spColMaxLength: new FormControl(col.srcColMaxLength),
296+
spAutoGen: new FormControl(col.spAutoGen)
281297
})
282298
)
283299
}
@@ -340,7 +356,8 @@ export class ObjectDetailComponent implements OnInit {
340356
NotNull: col.spIsNotNull ? 'ADDED' : 'REMOVED',
341357
Removed: false,
342358
ToType: (this.conv.SpDialect === Dialect.PostgreSQLDialect) ? (standardDataType === undefined ? col.spDataType : standardDataType) : col.spDataType,
343-
MaxColLength: col.spColMaxLength
359+
MaxColLength: col.spColMaxLength,
360+
AutoGen: col.spAutoGen
344361
}
345362
break
346363
}
@@ -351,7 +368,8 @@ export class ObjectDetailComponent implements OnInit {
351368
NotNull: col.spIsNotNull ? 'ADDED' : 'REMOVED',
352369
Removed: false,
353370
ToType: (this.conv.SpDialect === Dialect.PostgreSQLDialect) ? (standardDataType === undefined ? col.spDataType : standardDataType) : col.spDataType,
354-
MaxColLength: col.spColMaxLength
371+
MaxColLength: col.spColMaxLength,
372+
AutoGen: col.spAutoGen
355373
}
356374
}
357375
}
@@ -365,6 +383,10 @@ export class ObjectDetailComponent implements OnInit {
365383
Removed: true,
366384
ToType: '',
367385
MaxColLength: '',
386+
AutoGen: {
387+
Name : '',
388+
GenerationType : ''
389+
}
368390
}
369391
})
370392

@@ -418,6 +440,7 @@ export class ObjectDetailComponent implements OnInit {
418440
this.localTableData[index].spIsPk = this.droppedColumns[addedRowIndex].spIsPk
419441
this.localTableData[index].spIsNotNull = this.droppedColumns[addedRowIndex].spIsNotNull
420442
this.localTableData[index].spColMaxLength = this.droppedColumns[addedRowIndex].spColMaxLength
443+
this.localTableData[index].spAutoGen = this.droppedColumns[addedRowIndex].spAutoGen
421444
let ind = this.droppedColumns
422445
.map((col: IColumnTabData) => col.spColName)
423446
.indexOf(this.addedColumnName)
@@ -512,6 +535,10 @@ export class ObjectDetailComponent implements OnInit {
512535
col.spIsPk = false
513536
col.spOrder = ''
514537
col.spColMaxLength = ''
538+
col.spAutoGen = {
539+
Name : '',
540+
GenerationType : ''
541+
}
515542
}
516543
})
517544
this.setSpTableRows()
@@ -541,6 +568,10 @@ export class ObjectDetailComponent implements OnInit {
541568
this.spTableSuggestion[index] = brief
542569
}
543570

571+
compareAutoGen(t1: any, t2: any): boolean {
572+
return t1 && t2 ? t1.Name === t2.Name && t1.GenerationType === t2.GenerationType : t1 === t2;
573+
}
574+
544575
setPkRows() {
545576
this.pkArray = this.fb.array([])
546577
this.pkOrderValidation()
@@ -565,6 +596,7 @@ export class ObjectDetailComponent implements OnInit {
565596
spIsPk: row.spIsPk,
566597
spOrder: row.spOrder,
567598
spId: row.spId,
599+
spAutoGen: row.spAutoGen
568600
})
569601
}
570602
})
@@ -590,6 +622,7 @@ export class ObjectDetailComponent implements OnInit {
590622
spIsPk: new FormControl(spArr[i].spIsPk),
591623
spIsNotNull: new FormControl(spArr[i].spIsNotNull),
592624
spId: new FormControl(spArr[i].spId),
625+
spAutoGen: new FormControl(spArr[i].spAutoGen),
593626
})
594627
)
595628
}
@@ -609,6 +642,7 @@ export class ObjectDetailComponent implements OnInit {
609642
spIsPk: new FormControl(false),
610643
spIsNotNull: new FormControl(false),
611644
spId: new FormControl(''),
645+
spAutoGen: new FormControl(spArr[i].spAutoGen),
612646
})
613647
)
614648
}
@@ -628,6 +662,7 @@ export class ObjectDetailComponent implements OnInit {
628662
spIsPk: new FormControl(spArr[i].spIsPk),
629663
spIsNotNull: new FormControl(spArr[i].spIsNotNull),
630664
spId: new FormControl(spArr[i].spId),
665+
spAutoGenGen: new FormControl(spArr[i].spAutoGen)
631666
})
632667
)
633668
}

‎ui/src/app/components/workspace/workspace.component.html

+1
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@
8080
[tableData]="tableData"
8181
[indexData]="indexData"
8282
[typeMap]="typeMap"
83+
[autoGenMap]="autoGenMap"
8384
[ddlStmts]="ddlStmts"
8485
[fkData]="fkData"
8586
[currentDatabase]="currentDatabase"

0 commit comments

Comments
 (0)