Skip to content

Commit

Permalink
Add functionality for preprocess step.
Browse files Browse the repository at this point in the history
  • Loading branch information
Dmitriy Borzenko committed Jul 13, 2023
1 parent d527b1d commit 8619f30
Show file tree
Hide file tree
Showing 9 changed files with 111 additions and 173 deletions.
7 changes: 6 additions & 1 deletion ...ponents/metadata-component/components/add-polling-source/add-polling-source-form.types.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Transform } from "src/app/api/kamu.graphql.interface";
import { SqlQueryStep, Transform } from "src/app/api/kamu.graphql.interface";

/* eslint-disable @typescript-eslint/no-explicit-any */
export interface JsonFormValidators {
Expand Down Expand Up @@ -131,3 +131,8 @@ export interface NameValue {
name: string;
value: string;
}

export interface PreprocessStepValue {
engine: string;
queries: Omit<SqlQueryStep, "__typename">[];
}
38 changes: 3 additions & 35 deletions ...onents/metadata-component/components/add-polling-source/add-polling-source.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,5 @@
<div class="layout" *ngIf="history && datasetKind === 'ROOT'; else errorBlock">
<div class="mt-4">
<!-- <ng-container *ngIf="currentStep === steps.FETCH">
<div class="row">
<div class="col mt-4">
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
[(ngModel)]="isAddPrepareStep"
(change)="onCheckedPrepareStep($event)"
data-test-id="read-isAddPrepareStep"
/>
<label class="form-check-label">
Add PREPARE step
</label>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col">
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
[(ngModel)]="isAddPreprocessStep"
(change)="onCheckedPreprocessStep($event)"
data-test-id="read-isAddPreprocessStep"
/>
<label class="form-check-label">
Add PREPROCESS step
</label>
</div>
</div>
</div>
</ng-container> -->
<div class="border border-1 mt-4 px-2 py-4 rounded-3">
<form [formGroup]="pollingSourceForm">
<ng-container *ngIf="currentStep === steps.FETCH">
Expand Down Expand Up @@ -81,6 +47,9 @@
<app-preprocess-step
[pollingSourceForm]="pollingSourceForm"
[eventYamlByHash]="eventYamlByHash"
[preprocessValue]="preprocessStepValue"
[isShowPreprocessStep]="isShowPreprocessStep"
(showPreprcessStepEmitter)="onShowPreprcessStep($event)"
></app-preprocess-step>
<app-stepper-navigation
[prevStep]="steps.READ"
Expand Down Expand Up @@ -119,7 +88,6 @@
</form>
</div>
</div>
<pre>{{ pollingSourceForm.value | json }}</pre>
</div>
<ng-template #errorBlock>
<app-page-not-found *ngIf="datasetKind"></app-page-not-found>
Expand Down
53 changes: 14 additions & 39 deletions ...mponents/metadata-component/components/add-polling-source/add-polling-source.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
MergeKind,
PrepareKind,
PreprocessKind,
PreprocessStepValue,
} from "./add-polling-source-form.types";
import { FinalYamlModalComponent } from "../final-yaml-modal/final-yaml-modal.component";
import {
Expand Down Expand Up @@ -51,12 +52,16 @@ import { SupportedEvents } from "src/app/dataset-block/metadata-block/components
export class AddPollingSourceComponent extends BaseComponent implements OnInit {
public currentStep: SetPollingSourceSection = SetPollingSourceSection.FETCH;
public steps: typeof SetPollingSourceSection = SetPollingSourceSection;
public isAddPrepareStep = false;
public isAddPreprocessStep = false;

public isShowPreprocessStep = false;
public errorMessage = "";
public history: DatasetHistoryUpdate;
public eventYamlByHash: MaybeNull<string>;
public datasetKind: DatasetKind;
public preprocessStepValue: PreprocessStepValue = {
engine: "",
queries: [],
};

// --------------------------------
private readonly DEFAULT_PREPARE_KIND = PrepareKind.PIPE;
Expand All @@ -81,11 +86,6 @@ export class AddPollingSourceComponent extends BaseComponent implements OnInit {
read: this.fb.group({
kind: [this.READ_DEFAULT_KIND],
}),
preprocess: this.fb.group({
kind: [this.DEFAULT_PREPROCESS_KIND],
engine: [],
queries: this.fb.array([]),
}),
merge: this.fb.group({
kind: [this.MERGE_DEFAULT_KIND],
}),
Expand All @@ -109,38 +109,6 @@ export class AddPollingSourceComponent extends BaseComponent implements OnInit {
) as FormGroup;
}

// public onCheckedPrepareStep(event: Event): void {
// const input = event.target as HTMLInputElement;
// if (input.checked) {
// this.pollingSourceForm.addControl(
// SetPollingSourceSection.PREPARE,
// this.fb.group({
// kind: this.DEFAULT_PREPARE_KIND,
// }),
// );
// } else {
// this.pollingSourceForm.removeControl(
// SetPollingSourceSection.PREPARE,
// );
// }
// }

// public onCheckedPreprocessStep(event: Event): void {
// const input = event.target as HTMLInputElement;
// if (input.checked) {
// this.pollingSourceForm.addControl(
// SetPollingSourceSection.PREPROCESS,
// this.fb.group({
// kind: this.DEFAULT_PREPROCESS_KIND,
// }),
// );
// } else {
// this.pollingSourceForm.removeControl(
// SetPollingSourceSection.PREPROCESS,
// );
// }
// }

constructor(
private fb: FormBuilder,
private createDatasetService: AppDatasetCreateService,
Expand Down Expand Up @@ -194,6 +162,9 @@ export class AddPollingSourceComponent extends BaseComponent implements OnInit {
SetPollingSource,
"__typename"
>,
this.isShowPreprocessStep
? this.preprocessStepValue
: null,
),
)
.subscribe(),
Expand Down Expand Up @@ -224,11 +195,15 @@ export class AddPollingSourceComponent extends BaseComponent implements OnInit {
SetPollingSource,
"__typename"
>,
this.isShowPreprocessStep ? this.preprocessStepValue : null,
);
(modalRef.componentInstance as FinalYamlModalComponent).datasetInfo =
this.getDatasetInfoFromUrl();
}

public onShowPreprcessStep(showPreprocessStep: boolean): void {
this.isShowPreprocessStep = showPreprocessStep;
}
private getDatasetKind(): void {
this.trackSubscription(
this.editService.onKindChanges.subscribe((kind: DatasetKind) => {
Expand Down
8 changes: 4 additions & 4 deletions ...ponent/components/add-polling-source/steps/preprocess-step/preprocess-step.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,24 @@ <h2 class="text-center">Preprocess</h2>
<input
class="form-check-input"
type="checkbox"
[(ngModel)]="isAddPreprocessStep"
[(ngModel)]="isShowPreprocessStep"
(change)="onCheckedPreprocessStep($event)"
data-test-id="read-isAddPreprocessStep"
/>
<label class="form-check-label"> Use Preprocess step </label>
</div>
</div>
<ng-container *ngIf="isAddPreprocessStep">
<ng-container *ngIf="isShowPreprocessStep">
<div class="d-flex justify-content-center mb-4">
<app-engine-section
[currentSetTransformEvent]="setPollingSourceEvent?.preprocess"
[selectedEngine]="preprocessValue.engine"
(onEmitSelectedEngine)="onSelectEngine($event)"
></app-engine-section>
</div>
<div class="container-queries">
<app-queries-section
[preprocessQueries]="preprocessQueries"
[queries]="queries"
[queries]="preprocessValue.queries"
></app-queries-section>
</div>
</ng-container>
Expand Down
107 changes: 47 additions & 60 deletions ...omponent/components/add-polling-source/steps/preprocess-step/preprocess-step.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,22 @@
import {
ChangeDetectionStrategy,
Component,
EventEmitter,
Input,
OnInit,
Output,
} from "@angular/core";
import {
ControlContainer,
FormArray,
FormBuilder,
FormGroup,
FormGroupDirective,
} from "@angular/forms";
import { SetPollingSourceSection } from "src/app/shared/shared.types";
import { FormGroup } from "@angular/forms";
import {
EditFormType,
PreprocessKind,
PreprocessStepValue,
} from "../../add-polling-source-form.types";
import { MaybeNull } from "src/app/common/app.types";
import { EditPollingSourceService } from "../../edit-polling-source.service";
import { SqlQueryStep } from "src/app/api/kamu.graphql.interface";
import { ActivatedRoute, ParamMap } from "@angular/router";
import { requireValue } from "src/app/common/app.helpers";
import { DatasetInfo } from "src/app/interface/navigation.interface";
import ProjectLinks from "src/app/project-links";

@Component({
selector: "app-preprocess-step",
Expand All @@ -27,87 +25,76 @@ import { SqlQueryStep } from "src/app/api/kamu.graphql.interface";
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PreprocessStepComponent implements OnInit {
public isAddPreprocessStep = false;
@Input() public isShowPreprocessStep: boolean;
@Input() public pollingSourceForm: FormGroup;
@Input() public eventYamlByHash: MaybeNull<string> = null;
public selectedEngine: string;
@Input() public preprocessValue: PreprocessStepValue;
@Output() public showPreprcessStepEmitter = new EventEmitter<boolean>();
public setPollingSourceEvent: MaybeNull<EditFormType> = null;
public queries: Omit<SqlQueryStep, "__typename">[] = [];
private readonly DEFAULT_PREPROCESS_KIND = PreprocessKind.SQL;

constructor(
private fb: FormBuilder,
private editService: EditPollingSourceService,
private activatedRoute: ActivatedRoute,
) {}

ngOnInit(): void {
if (this.eventYamlByHash) {
this.setPollingSourceEvent = this.editService.parseEventFromYaml(
this.eventYamlByHash,
);
if (this.setPollingSourceEvent.preprocess?.engine) {
this.isAddPreprocessStep = true;
this.initDefaultQueriesSection(
this.setPollingSourceEvent.preprocess.query,
);
this.preprocessForm.patchValue({
engine: this.setPollingSourceEvent.preprocess.engine,
});

if (this.preprocessQueries.length == 0) {
this.preprocessQueries.push(
this.fb.group({
alias: "",
query: this.setPollingSourceEvent.preprocess.query,
}),
);
}
if (this.setPollingSourceEvent.preprocess) {
this.showPreprcessStepEmitter.emit(true);
this.initExistingQueries();
} else {
this.initDefaultQueriesSection();
}
}
}

public get preprocessForm(): FormGroup {
return this.pollingSourceForm.get(
SetPollingSourceSection.PREPROCESS,
) as FormGroup;
public onSelectEngine(engine: string): void {
this.preprocessValue.engine = engine;
}

public get preprocessQueries(): FormArray {
return this.pollingSourceForm.get("preprocess.queries") as FormArray;
public getDatasetInfoFromUrl(): DatasetInfo {
const paramMap: ParamMap = this.activatedRoute.snapshot.paramMap;
return {
accountName: requireValue(
paramMap.get(ProjectLinks.URL_PARAM_ACCOUNT_NAME),
),
datasetName: requireValue(
paramMap.get(ProjectLinks.URL_PARAM_DATASET_NAME),
),
};
}

public onCheckedPreprocessStep(event: Event): void {
const input = event.target as HTMLInputElement;
if (input.checked) {
this.pollingSourceForm.addControl(
SetPollingSourceSection.PREPROCESS,
this.fb.group({
kind: this.DEFAULT_PREPROCESS_KIND,
engine: "",
}),
);
if (this.setPollingSourceEvent?.preprocess) {
this.preprocessForm.patchValue({
engine: this.setPollingSourceEvent.preprocess.engine,
});
}
this.showPreprcessStepEmitter.emit(true);
} else {
this.pollingSourceForm.removeControl(
SetPollingSourceSection.PREPROCESS,
);
this.showPreprcessStepEmitter.emit(false);
}
}

public onSelectEngine(engine: string): void {
this.selectedEngine = engine.toUpperCase();
this.preprocessForm.patchValue({
engine: engine.toLowerCase(),
});
private initDefaultQueriesSection(query = ""): void {
if (!this.preprocessValue.queries.length) {
this.preprocessValue.queries.push({
alias: this.getDatasetInfoFromUrl().datasetName,
query,
});
}
}

private initDefaultQueriesSection(query = ""): void {
this.queries = [...this.queries, { alias: "", query }];
private initExistingQueries(): void {
if (this.preprocessValue.queries.length === 0) {
if (this.setPollingSourceEvent?.preprocess?.query) {
this.initDefaultQueriesSection(
this.setPollingSourceEvent.preprocess.query,
);
} else if (this.setPollingSourceEvent?.preprocess?.queries.length) {
this.preprocessValue.queries =
this.setPollingSourceEvent.preprocess.queries;
}
}
}
}
20 changes: 10 additions & 10 deletions ...onent/components/set-transform/components/engine-section/engine-section.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,14 +54,14 @@ describe("EngineSectionComponent", () => {
flush();
}));

// it("should check init engine and image when currentSetTransformEvent is not null", fakeAsync(() => {
// component.currentSetTransformEvent = mockCurrentSetTransform;
// fixture.detectChanges();
// component.ngOnInit();
// tick();
// expect(component.selectedEngine).toBe(
// mockCurrentSetTransform.transform.engine.toUpperCase(),
// );
// flush();
// }));
it("should check init engine and image when currentSetTransformEvent is not null", fakeAsync(() => {
// component.currentSetTransformEvent = mockCurrentSetTransform;
fixture.detectChanges();
component.ngOnInit();
tick();
expect(component.selectedEngine).toBe(
mockCurrentSetTransform.transform.engine.toUpperCase(),
);
flush();
}));
});
Loading

0 comments on commit 8619f30

Please sign in to comment.