Automated schema discovery implementation.

package.json

@@ -20,6 +20,7 @@
     "@angular/core": "^17.2.3",
     "@angular/elements": "^17.2.3",
     "@angular/forms": "^17.2.3",
+    "@angular/material": "^17.2.1",
     "@angular/platform-browser": "^17.2.3",
     "@angular/platform-browser-dynamic": "^17.2.3",
     "@angular/router": "^17.2.3",
@@ -59,6 +60,16 @@
     "ngx-markdown": "^17.1.1",
     "ngx-plyr": "^4.0.1",
     "prismjs": "1.29.0",
+    "rete": "^2.0.3",
+    "rete-angular-plugin": "^2.1.1",
+    "rete-area-plugin": "^2.0.4",
+    "rete-auto-arrange-plugin": "^2.0.1",
+    "rete-connection-path-plugin": "^2.0.3",
+    "rete-connection-plugin": "^2.0.1",
+    "rete-context-menu-plugin": "^2.0.3",
+    "rete-engine": "^2.0.1",
+    "rete-readonly-plugin": "^2.0.1",
+    "rete-render-utils": "^2.0.2",
     "rxjs": "^7.8.1",
     "rxjs-compat": "^6.5.5",
     "sass": "^1.26.3",
@@ -67,17 +78,7 @@
     "ts-helpers": "^1.1.2",
     "ts-md5": "^1.2.7",
     "uuid": "^9.0.0",
-    "zone.js": "~0.14.4",
-    "rete": "^2.0.3",
-    "rete-angular-plugin": "^2.1.1",
-    "rete-connection-plugin": "^2.0.1",
-    "rete-auto-arrange-plugin": "^2.0.1",
-    "rete-area-plugin": "^2.0.4",
-    "rete-render-utils": "^2.0.2",
-    "rete-readonly-plugin": "^2.0.1",
-    "rete-connection-path-plugin": "^2.0.3",
-    "rete-context-menu-plugin": "^2.0.3",
-    "rete-engine": "^2.0.1"
+    "zone.js": "~0.14.4"
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "^17.0.1",
@@ -86,6 +87,7 @@
     "@angular/compiler-cli": "^17.2.3",
     "@angular/language-service": "^17.2.3",
     "@ngtools/webpack": "^17.2.2",
+    "@types/d3-shape": "^3.1.6",
     "@types/hammerjs": "^2.0.36",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "^2.0.8",
@@ -108,11 +110,10 @@
     "tslint": "~6.1.0",
     "typescript": "^5.3.3",
     "webpack": "^5.54.0",
-    "webpack-bundle-analyzer": "^4.9.0",
-    "@types/d3-shape": "^3.1.6"
+    "webpack-bundle-analyzer": "^4.9.0"
   },
   "engines": {
     "node": ">= 16.3.0",
     "npm": ">= 5.6.0"
   }
-}
+}

src/app/app-routing.module.ts

@@ -4,6 +4,7 @@ import {DefaultLayoutComponent} from './containers/default-layout';
 import {P404Component} from './views/error/404.component';
 import {P500Component} from './views/error/500.component';
 import {LoginComponent} from './views/login/login.component';
+import {TableSelectionDialogComponent} from './components/table-selection-dialog/table-selection-dialog.component';
 
 
 export const routes: Routes = [
@@ -28,6 +29,13 @@ export const routes: Routes = [
             title: 'Login Page'
         }
     },
+    {
+      path: 'table-selection',
+      component: TableSelectionDialogComponent,
+      data: {
+          title: 'Table Selection'
+      }
+    },
     {
         path: '',
         pathMatch: 'full',

src/app/components/delete-confirm/delete-confirm.component.html

@@ -1,4 +1,4 @@
-<button cButton size="sm" class="bg-transparent border-0">
+<!--<button cButton size="sm" class="bg-transparent border-0">
     <i id="delete" (click)="onClick()" (mouseleave)="confirm = false" class="text-danger"
        [ngClass]="{ 'cil-trash': !confirm, 'fa fa-warning': confirm }"></i>
-</button>
+</button>-->

src/app/components/table-selection-dialog/table-selection-dialog.component.html

@@ -0,0 +1,59 @@
+<div style="display: flex; height: 80vh">
+    <div style="flex: 1; overflow-y: auto; padding: 1rem; border-right: 1px solid #ccc">
+        <h2>Tabellen auswählen</h2>
+
+        <div *ngFor="let db of data">
+            <h3>📦 {{ db.name }}</h3>
+            <div *ngFor="let schema of db.schemas">
+                <h4>📁 {{ schema.name }}</h4>
+                <ul>
+                    <li *ngFor="let table of schema.tables">
+                        <label>
+                            📄 {{ db.name }}.{{ schema.name }}.{{ table.name }}
+                        </label>
+                        <ul>
+                            <li *ngFor="let attr of table.attributes">
+                                <label>
+                                    <input type="checkbox" [(ngModel)]="attr.selected"/>
+                                    🔹 {{ attr.name }} : {{ attr.type }}
+                                </label>
+                            </li>
+                        </ul>
+                    </li>
+                </ul>
+            </div>
+        </div>
+
+        <div style="margin-top: 1rem">
+            <button (click)="close()">Schließen</button>
+            <button (click)="showSelectedMetadata()">Ausgewählte anzeigen</button>
+            <button (click)="sendMetadataInfos()">Sende Metadaten</button>
+        </div>
+    </div>
+
+    <div style="flex: 2.5; padding: 1rem; overflow-x: auto; display: flex; gap: 2rem; border-left: 1px solid #ccc">
+
+        <div *ngFor="let name of getTableNames()">
+            <div *ngIf="tablePreviewAll[name]?.length">
+                <h3>{{ name }}</h3>
+
+                <table border="1" cellpadding="5" cellspacing="0">
+                    <thead>
+                    <tr>
+                        <th *ngFor="let key of getKeys(tablePreviewAll[name])">{{ key }}</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr *ngFor="let row of tablePreviewAll[name]">
+                        <td *ngFor="let key of getKeys(tablePreviewAll[name])">
+                            {{ row[key] }}
+                        </td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+    </div>
+
+</div>

src/app/components/table-selection-dialog/table-selection-dialog.component.spec.ts

@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TableSelectionDialogComponent } from './table-selection-dialog.component';
+
+// @ts-ignore
+describe('TableSelectionDialogComponent', () => {
+  let component: TableSelectionDialogComponent;
+  let fixture: ComponentFixture<TableSelectionDialogComponent>;
+
+  // @ts-ignore
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TableSelectionDialogComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TableSelectionDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  // @ts-ignore
+  it('should create', () => {
+    // @ts-ignore
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/table-selection-dialog/table-selection-dialog.component.ts

@@ -0,0 +1,188 @@
+import {Component, inject} from '@angular/core';
+import {DatabaseInfo, SchemaInfo, TableInfo} from '../../models/databaseInfo.model';
+import {FormsModule} from '@angular/forms';
+import {NgForOf, NgIf} from '@angular/common';
+import {CrudService} from '../../services/crud.service';
+import {AdapterModel, AdapterType, PolyMap} from '../../views/adapters/adapter.model';
+import {DeployMode} from '../../models/catalog.model';
+
+@Component({
+    selector: 'app-table-selection-dialog',
+    imports: [
+        FormsModule,
+        NgForOf,
+        NgIf
+    ],
+    templateUrl: './table-selection-dialog.component.html',
+    standalone: true,
+    styleUrl: './table-selection-dialog.component.scss'
+})
+export class TableSelectionDialogComponent {
+
+    private readonly _crud = inject(CrudService);
+
+    data: DatabaseInfo[] = [];
+    selectedMetadata: string[] = [];
+    adapter: AdapterModel;
+
+    tablePreviewName = '';
+    tablePreview: any[] = [];
+    previewKeys: string[] = [];
+
+    tablePreviewAll: { [tableName: string]: any[] } = {};
+
+
+    close(): void {
+        window.close();
+    }
+
+    ngOnInit(): void {
+        const rawSettings = localStorage.getItem('adapterSettings');
+        const metaRaw = localStorage.getItem('metaRoot');
+        const previewRaw = localStorage.getItem('preview');
+        console.log(metaRaw);
+        console.log(previewRaw);
+
+        const settingsObj = rawSettings ? JSON.parse(rawSettings) as Record<string, string> : {};
+        const adapterSettings = new PolyMap<string, string>();
+        for (const [k, v] of Object.entries(settingsObj)) {
+            adapterSettings.set(k, v as string);
+        }
+
+        if (!metaRaw || !previewRaw) {
+            console.error('No meta or preview data found');
+            return;
+        }
+
+        let rootNode: any = JSON.parse(metaRaw);
+        if (typeof rootNode === 'string') {
+            rootNode = JSON.parse(rootNode);
+        }
+
+        let preview: any = JSON.parse(previewRaw);
+        if (typeof preview === 'string') {
+            preview = JSON.parse(preview);
+        }
+
+        this.tablePreviewAll = preview;
+        const [name, rawRows] = Object.entries(preview)[0];
+        const rows = rawRows as any[];
+
+        this.tablePreviewName = name;
+        this.tablePreview = rows;
+        this.previewKeys = rows.length > 0 ? Object.keys(rows[0]) : [];
+
+
+        this.data = this.buildDatabaseInfo(rootNode, preview);
+
+        const infoRaw = localStorage.getItem('adapterInfo');
+        const info = infoRaw ? JSON.parse(infoRaw) as Partial<{
+            uniqueName: string;
+            adapterName: string;
+            type: AdapterType;
+            mode: DeployMode;
+            persistent: boolean;
+        }> : {};
+
+        this.adapter = new AdapterModel(
+            info.uniqueName ?? adapterSettings.get('uniqueName') ?? 'adapter_' + Date.now(),
+            info.adapterName ?? 'UNKNOWN',
+            adapterSettings,
+            info.persistent ?? true,
+            info.type ?? AdapterType.SOURCE,
+            info.mode ?? DeployMode.REMOTE
+        );
+    }
+
+    private buildDatabaseInfo(root: any, preview: any): DatabaseInfo[] {
+        const db: DatabaseInfo = {name: root.name, schemas: []};
+        for (const schemaNode of root.children ?? []) {
+
+            const schema: SchemaInfo = {name: schemaNode.name, tables: []};
+
+            for (const tableNode of schemaNode.children ?? []) {
+
+                const tableKey = `${schemaNode.name}.${tableNode.name}`;
+                const sampleRows = preview[tableKey] ?? [];
+
+                const table: TableInfo = {name: tableNode.name, attributes: []};
+
+                for (const colNode of tableNode.children ?? []) {
+                    const colName = colNode.name;
+
+                    table.attributes.push({
+                        name: colName,
+                        type: colNode.properties?.type ?? '',
+                        selected: false,
+                        sampleValues: sampleRows.slice(0, 5).map((r: any) => r[colName])
+                    });
+                }
+                schema.tables.push(table);
+            }
+            db.schemas.push(schema);
+        }
+        this.data = [db];
+        return [db];
+    }
+
+    getSelectedAttributeMetadata(): string[] {
+        const selected: string[] = [];
+
+        for (const db of this.data) {
+            for (const schema of db.schemas) {
+                for (const table of schema.tables) {
+                    for (const attr of table.attributes) {
+                        if (attr.selected) {
+                            selected.push(
+                                `${db.name}.${schema.name}.${table.name}.${attr.name} : ${attr.type}`
+                            );
+                        }
+                    }
+                }
+            }
+        }
+
+        return selected;
+    }
+
+    showSelectedMetadata(): void {
+        this.selectedMetadata = this.getSelectedAttributeMetadata();
+        console.log(this.selectedMetadata);
+    }
+
+    getKeys(rows: any[]): string[] {
+        return rows.length > 0 ? Object.keys(rows[0]) : [];
+    }
+
+    getTableNames(): string[] {
+        return Object.keys(this.tablePreviewAll);
+    }
+
+
+    sendMetadataInfos(): void {
+
+
+        (this.adapter as any).metadata = this.selectedMetadata;
+
+        const formdata = new FormData();
+        formdata.set('body', JSON.stringify(this.adapter));
+
+        formdata.forEach((value, key) => {
+            console.log(`${key}: ${value}`);
+        });
+
+        this._crud.createAdapter(this.adapter, formdata).subscribe({
+            next: (res) => {
+                console.log('Adapter + Metadaten erfolgreich gesendet', res);
+                alert('Daten erfolgreich gesendet.');
+            },
+            error: (err) => {
+                console.error(err);
+                alert('Fehler beim Senden!');
+            }
+        });
+    }
+
+
+}
+

src/app/models/databaseInfo.model.ts

@@ -0,0 +1,21 @@
+export interface DatabaseInfo {
+    name: string;
+    schemas: SchemaInfo[];
+}
+
+export interface TableInfo {
+    name: string;
+    attributes: AttributeInfo[];
+}
+
+export interface SchemaInfo {
+    name: string;
+    tables: TableInfo[];
+}
+
+export interface AttributeInfo {
+    name: String;
+    type: String;
+    sampleValues?: string[];
+    selected?: boolean;
+}