Skip to content

Commit

Permalink
created new layout
Browse files Browse the repository at this point in the history
  • Loading branch information
Dmitriy Borzenko committed Dec 13, 2024
1 parent 55b59d0 commit baf569e
Show file tree
Hide file tree
Showing 5 changed files with 138 additions and 111 deletions.
8 changes: 0 additions & 8 deletions src/app/api/gql/flows-dataset/fragments/fragment-dataset-flow.graphql
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,14 +118,6 @@ fragment FlowSummaryData on Flow {

configSnapshot {
... on FlowConfigurationIngest {
# schedule {
# ... on TimeDelta {
# ...TimeDeltaData
# }
# ... on Cron5ComponentExpression {
# cron5ComponentExpression
# }
# }
fetchUncacheable
}

Expand Down
2 changes: 1 addition & 1 deletion ...set-view/additional-components/dataset-settings-component/dataset-settings.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ p {

.custom-container {
display: grid;
grid-template-columns: 300px 1fr;
grid-template-columns: 275px 1fr;
}

.content-container {
Expand Down
2 changes: 1 addition & 1 deletion ...p/dataset-view/additional-components/dataset-settings-component/dataset-settings.model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export const datasetSettingsSidePanelData: DatasetSettingsSidePanelItem[] = [
id: "general",
},
{
name: "Scheduling",
name: "Scheduled updates",
iconName: "clock",
showDivider: false,
activeTab: SettingsTabsEnum.SCHEDULING,
Expand Down
223 changes: 127 additions & 96 deletions ...dataset-settings-component/tabs/scheduling/dataset-settings-scheduling-tab.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,105 +1,141 @@
<div class="w-75 custom-container">
<h2>Schedule</h2>
<div class="custom-container">
<h2>Scheduled updates</h2>
<mat-divider class="mt-1 mb-2" />
<form [formGroup]="pollingForm">
<div class="box p-4 mt-3">
<h4>Enable/Disable updates</h4>
<h4>Enable/Disable update schedule</h4>
<mat-slide-toggle color="primary" class="mat-elevation-z0" formControlName="updatesState">
<span class="ps-2"> {{ pollingForm.controls.updatesState.value ? "enabled" : "disabled" }}</span>
</mat-slide-toggle>
</div>
<div formGroupName="pollingGroup" class="box p-4 mt-3">
<h4>Root polling source</h4>

<mat-radio-group
class="d-flex flex-column row-gap-4"
formControlName="__typename"
aria-label="Select an option"
color="primary"
>
<mat-radio-button disableRipple="true" [value]="pollingGroupEnum.TIME_DELTA">
<div class="d-flex align-items-center" data-test-id="button-time-delta">
<span class="form-control-label">Update every:</span>
<select
formControlName="unit"
class="form-select form-control-width me-3"
data-test-id="polling-group-unit"
>
<option [value]="timeUnit.Minutes">Minutes</option>
<option [value]="timeUnit.Hours">Hours</option>
<option [value]="timeUnit.Days">Days</option>
<option [value]="timeUnit.Weeks">Weeks</option>
</select>
<input
type="number"
formControlName="every"
min="1"
class="form-control form-control-width"
data-test-id="polling-group-every"
/>
<ng-container
*ngIf="
pollingGroup?.get('every')?.errors?.range &&
(pollingGroup.get('every')?.touched || pollingGroup.get('every')?.dirty)
"
>
<div class="text-danger fs-12 ms-4 text-break" data-test-id="range-error">
{{ pollingGroup.get("every")?.errors?.range.message }}
<div formGroupName="pollingGroup" class="box mt-3 p-4" *ngIf="isRootDataset">
<div class="d-flex flex-row gap-4">
<div class="position-relative border border-1 rounded-3 w-50">
<div>
<span class="position-absolute text-muted group-box-label text-uppercase">Triggers</span>
<div class="p-4">
<mat-radio-group
class="d-flex flex-column row-gap-4"
formControlName="__typename"
aria-label="Select an option"
color="primary"
>
<mat-radio-button disableRipple="true" [value]="pollingGroupEnum.TIME_DELTA">
<div class="d-flex align-items-center" data-test-id="button-time-delta">
<span class="form-control-label">Launch every:</span>
<select
formControlName="unit"
class="form-select form-control-width me-3"
data-test-id="polling-group-unit"
>
<option [value]="timeUnit.Minutes">Minutes</option>
<option [value]="timeUnit.Hours">Hours</option>
<option [value]="timeUnit.Days">Days</option>
<option [value]="timeUnit.Weeks">Weeks</option>
</select>
<input
type="number"
formControlName="every"
min="1"
class="form-control form-control-width"
data-test-id="polling-group-every"
/>
<ng-container
*ngIf="
pollingGroup?.get('every')?.errors?.range &&
(pollingGroup.get('every')?.touched || pollingGroup.get('every')?.dirty)
"
>
<div class="text-danger fs-12 ms-4 text-break" data-test-id="range-error">
{{ pollingGroup.get("every")?.errors?.range.message }}
</div>
</ng-container>
</div>
</mat-radio-button>
<mat-radio-button [value]="pollingGroupEnum.CRON_5_COMPONENT_EXPRESSION">
<div class="d-flex align-items-center" data-test-id="button-cron-expression">
<div class="d-flex align-middle">
<span class="form-control-label d-block"> Cron expression : </span>
</div>
<input
type="text"
formControlName="cronExpression"
placeholder="Example: * * * * ?"
class="form-control form-control-expression"
data-test-id="cron-expression-input"
data-test-id="polling-group-cron-expression"
/>

<ng-container
*ngIf="
pollingGroup?.get('cronExpression')?.errors?.invalidCronExpression &&
(pollingGroup.get('cronExpression')?.touched ||
pollingGroup.get('cronExpression')?.dirty);
else nextTimeTemplate
"
>
<div
class="text-danger fs-12 ms-4 text-break"
data-test-id="cronExpression-error"
>
Invalid expression
</div>
</ng-container>
<ng-template #nextTimeTemplate>
<span *ngIf="pollingGroup?.get('cronExpression')?.valid" class="fs-12 ms-4"
>Next time: {{ nextTime }}</span
>
</ng-template>
</div>
</mat-radio-button>
</mat-radio-group>
<div class="text-muted fs-12 border-top border-bottom px-4 py-4 mt-4">
Cron expression accepted values
<div class="fs-12">1. minutes: 0-59 * , -</div>
<div class="fs-12">2. hours: 0-23 * , -</div>
<div class="fs-12">3. day of month: 1-31 * , - ?</div>
<div class="fs-12">4. months: (JAN-DEC or 1-12) * , -</div>
<div class="fs-12">5. day of week: (SUN-SAT or 1-7) * , - ?</div>
</div>
</ng-container>
</div>
</mat-radio-button>
<mat-radio-button [value]="pollingGroupEnum.CRON_5_COMPONENT_EXPRESSION">
<div class="d-flex align-items-center" data-test-id="button-cron-expression">
<div class="d-flex align-middle">
<span class="form-control-label d-block"> Cron expression : </span>
</div>
<input
type="text"
formControlName="cronExpression"
placeholder="Example: * * * * ?"
class="form-control form-control-expression"
data-test-id="cron-expression-input"
data-test-id="polling-group-cron-expression"
/>
</div>

<ng-container
*ngIf="
pollingGroup?.get('cronExpression')?.errors?.invalidCronExpression &&
(pollingGroup.get('cronExpression')?.touched ||
pollingGroup.get('cronExpression')?.dirty);
else nextTimeTemplate
"
<div class="mb-4 mt-2 d-flex justify-content-end me-4">
<button
type="button"
class="btn btn-success"
(click)="onSubmit()"
data-test-id="save-config-options"
>
<div class="text-danger fs-12 ms-4 text-break" data-test-id="cronExpression-error">
Invalid expression
</div>
</ng-container>
<ng-template #nextTimeTemplate>
<span *ngIf="pollingGroup?.get('cronExpression')?.valid" class="fs-12 ms-4"
>Next time: {{ nextTime }}</span
>
</ng-template>
Trigger flow
</button>
</div>
</mat-radio-button>
</mat-radio-group>
<div class="text-muted box fs-12 px-4 py-2 mt-4">
Cron expression accepted values
<div class="fs-12">1. minutes: 0-59 * , -</div>
<div class="fs-12">2. hours: 0-23 * , -</div>
<div class="fs-12">3. day of month: 1-31 * , - ?</div>
<div class="fs-12">4. months: (JAN-DEC or 1-12) * , -</div>
<div class="fs-12">5. day of week: (SUN-SAT or 1-7) * , - ?</div>
</div>
<div class="d-flex align-items-center mt-4">
<input class="checkbox-uncacheable me-3" type="checkbox" formControlName="fetchUncacheable" />
<span class="d-inline-block">Fetch uncacheable</span>
</div>
<div class="position-relative border border-1 rounded-3 w-50 align-self-start px-4 pb-4">
<span class="position-absolute text-muted group-box-label text-uppercase">Configuration</span>

<div class="d-flex align-items-center mt-4">
<input class="checkbox-uncacheable me-3" type="checkbox" formControlName="fetchUncacheable" />
<span class="d-inline-block">Fetch uncacheable</span>
</div>
<div class="border-top mt-4"></div>
<div class="mt-4 d-flex justify-content-end">
<button
type="button"
class="btn btn-success"
(click)="onSubmit()"
data-test-id="save-config-options"
>
Set configuration
</button>
</div>
</div>
</div>
</div>
</form>
<form [formGroup]="batchingForm">
<form [formGroup]="batchingForm" *ngIf="!isRootDataset">
<div class="box p-4 mt-3">
<h4>Derivative (batching configuration)</h4>
<div class="d-flex flex-column gap-4">
<div class="d-flex align-items-center gap-3">
<span class="form-control-label">Max batching interval:</span>
Expand Down Expand Up @@ -151,17 +187,12 @@ <h4>Derivative (batching configuration)</h4>
</ng-container>
</div>
</div>
<div class="border-top mt-4"></div>
<div class="mt-4 d-flex justify-content-end">
<button type="button" class="btn btn-success" (click)="onSubmit()" data-test-id="save-config-options">
Trigger flow
</button>
</div>
</div>
</form>
<div class="my-4 d-flex justify-content-end">
<button
type="button"
class="btn btn-success"
[disabled]="pollingForm.invalid || batchingForm.invalid"
(click)="onSubmit()"
data-test-id="save-config-options"
>
Save
</button>
</div>
</div>
14 changes: 9 additions & 5 deletions ...s/dataset-settings-component/tabs/scheduling/dataset-settings-scheduling-tab.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,11 @@ export class DatasetSettingsSchedulingTabComponent extends BaseComponent impleme
updatesState: new FormControl<boolean>(false, { nonNullable: true }),
pollingGroup: new FormGroup<PollingGroupType>({
__typename: new FormControl(PollingGroupEnum.TIME_DELTA, [Validators.required]),
every: new FormControl<MaybeNull<number>>({ value: null, disabled: true }, [
every: new FormControl<MaybeNull<number>>({ value: null, disabled: false }, [
Validators.required,
Validators.min(1),
]),
unit: new FormControl<MaybeNull<TimeUnit>>({ value: null, disabled: true }, [Validators.required]),
unit: new FormControl<MaybeNull<TimeUnit>>({ value: null, disabled: false }, [Validators.required]),
cronExpression: new FormControl<MaybeNull<string>>({ value: "", disabled: true }, [
Validators.required,
cronExpressionValidator(),
Expand All @@ -50,12 +50,12 @@ export class DatasetSettingsSchedulingTabComponent extends BaseComponent impleme
});

public batchingForm = new FormGroup<BatchingFormType>({
every: new FormControl<MaybeNull<number>>({ value: null, disabled: true }, [
every: new FormControl<MaybeNull<number>>({ value: null, disabled: false }, [
Validators.required,
Validators.min(1),
]),
unit: new FormControl<MaybeNull<TimeUnit>>({ value: null, disabled: true }, [Validators.required]),
minRecordsToAwait: new FormControl<MaybeNull<number>>({ value: null, disabled: true }, [
unit: new FormControl<MaybeNull<TimeUnit>>({ value: null, disabled: false }, [Validators.required]),
minRecordsToAwait: new FormControl<MaybeNull<number>>({ value: null, disabled: false }, [
Validators.required,
Validators.min(1),
]),
Expand Down Expand Up @@ -107,6 +107,10 @@ export class DatasetSettingsSchedulingTabComponent extends BaseComponent impleme
return cronExpressionNextTime(this.cronExpression.value as string);
}

public get isRootDataset(): boolean {
return this.datasetBasics.kind === DatasetKind.Root;
}

public ngOnInit() {
if (!this.datasetPermissions.permissions.canSchedule) {
this.pollingForm.disable();
Expand Down

0 comments on commit baf569e

Please sign in to comment.