Kamu UI 513 modify scheduled updates view (#517)

* modified scheduled updates view

* fixed unit tests

* changed CHANGELOG.md

* removed unnecessary error handling

---------

Co-authored-by: Dmitriy Borzenko <[email protected]>

Author: dmitriy-borzenko

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 - Query explainer: improved `INPUT DATA` section view
   - added `Run` and `Copy` buttons for a sql code
+- Modified "Scheduled updates" view
 ### Fixed
 - Flows table: fixed broken filters in pagination
 

src/app/common/app.values.ts

@@ -18,7 +18,7 @@ export default class AppValues {
 
     public static readonly DISPLAY_DATE_FORMAT = "DD MMM YYYY";
     public static readonly DISPLAY_TOOLTIP_DATE_FORMAT = "MMM D, YYYY, HH:mm A";
-    public static readonly CRON_EXPRESSION_DATE_FORMAT = "MMM Do YYYY, h:mm:ss A";
+    public static readonly CRON_EXPRESSION_DATE_FORMAT = "MMM Do YYYY, h:mm:ss A ZZ";
     public static readonly DISPLAY_FLOW_DATE_FORMAT = "y-MM-dd, h:mm:ss a";
     public static readonly TIME_FORMAT = "h:mm:ss A";
     public static readonly UNIMPLEMENTED_MESSAGE = "Feature coming soon";

src/app/common/components/flows-table/flows-table.component.html

@@ -80,7 +80,7 @@
                     </a>
                     <div class="d-flex flex-row truncate-sub-message pe-4">
                         <div
-                            class="text-small d-block"
+                            class="text-small d-block truncate-sub-message"
                             [innerHTML]="
                                 descriptionDatasetFlowSubMessage(element, element.description.datasetId) | safeHtml
                             "

src/app/common/components/flows-table/flows-table.component.scss

@@ -128,7 +128,7 @@ td.mat-cell {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    width: 370px;
+    max-width: 370px;
 }
 
 .dynamic-icon {

src/app/common/components/flows-table/flows-table.helpers.mock.ts

@@ -428,14 +428,14 @@ export const durationBlockTextResults: string[] = [
 ];
 
 export const tooltipTextResults: string[] = [
-    "waiting for: Mar 14th 2024, 12:24:29 PM",
-    "Wake up time: Mar 14th 2024, 2:24:29 PM",
-    "Wake up time: Mar 14th 2024, 3:24:29 PM",
-    "Deadline time: Mar 14th 2024, 2:24:29 PM",
-    "Start running time: Mar 14th 2024, 12:34:29 PM",
-    "Completed time: Mar 14th 2024, 2:24:29 PM",
-    "Aborted time: Mar 14th 2024, 11:24:29 AM",
-    "Start running time: Mar 14th 2024, 11:24:29 AM",
+    "waiting for: Mar 14th 2024, 12:24:29 PM +0200",
+    "Wake up time: Mar 14th 2024, 2:24:29 PM +0200",
+    "Wake up time: Mar 14th 2024, 3:24:29 PM +0200",
+    "Deadline time: Mar 14th 2024, 2:24:29 PM +0200",
+    "Start running time: Mar 14th 2024, 12:34:29 PM +0200",
+    "Completed time: Mar 14th 2024, 2:24:29 PM +0200",
+    "Aborted time: Mar 14th 2024, 11:24:29 AM +0200",
+    "Start running time: Mar 14th 2024, 11:24:29 AM +0200",
 ];
 
 export const mockDatasets: DatasetListFlowsDataFragment[] = [

src/app/dataset-flow/dataset-flow-details/tabs/flow-details-history-tab/flow-details-history-tab.helpers.mock.ts

@@ -311,13 +311,13 @@ export const flowEventSubMessageResults: string[] = [
     "",
     "Task #1",
     "",
-    "Wake up time at Feb 12th 2024, 8:22:30 PM, shifted from 8:22:29 PM",
-    "Activating at Mar 13th 2024, 4:54:30 PM",
+    "Wake up time at Feb 12th 2024, 8:22:30 PM +0200, shifted from 8:22:29 PM",
+    "Activating at Mar 13th 2024, 4:54:30 PM +0200",
     "Triggered by kamu",
     "Input dataset: kamu/alberta.case-details",
-    "Accumulated 100/500 records. Watermark modified. Deadline at Aug 6th 2022, 12:17:30 AM", //1
+    "Accumulated 100/500 records. Watermark modified. Deadline at Aug 6th 2022, 12:17:30 AM +0300", //1
     "Task #5",
-    "Wake up time at Mar 13th 2024, 5:54:30 PM",
+    "Wake up time at Mar 13th 2024, 5:54:30 PM +0200",
     "An error occurred, see logs for more details",
     "Dataset is up-to-date",
     "Ingested 100 new records in 10 new blocks",

src/app/dataset-view/additional-components/dataset-settings-component/tabs/scheduling/batching-trigger-form/batching-trigger-form.component.html

@@ -63,11 +63,11 @@
             <button
                 type="button"
                 class="btn btn-success"
-                [disabled]="batchingForm.invalid"
+                [disabled]="batchingForm.invalid || !batchingUpdatesState.value"
                 (click)="saveBatchingTriggers()"
                 data-test-id="save-batching-triggers"
             >
-                Save Trigger
+                Save
             </button>
         </div>
     </div>

src/app/dataset-view/additional-components/dataset-settings-component/tabs/scheduling/batching-trigger-form/batching-trigger-form.component.spec.ts

@@ -38,9 +38,24 @@ describe("BatchingTriggerFormComponent", () => {
 
     it("should check save batching triggers", () => {
         const saveTriggerEmitSpy = spyOn(component.saveTriggerEmit, "emit");
+        component.batchingForm.patchValue({ updatesState: true });
+        fixture.detectChanges();
 
         emitClickOnElementByDataTestId(fixture, "save-batching-triggers");
 
         expect(saveTriggerEmitSpy).toHaveBeenCalledTimes(1);
     });
+
+    it("should check disable all controls", () => {
+        const disableBatchingEveryTimeSpy = spyOn(component.batchingEveryTime, "disable");
+        const disableBatchingUnitTimeSpy = spyOn(component.batchingUnitTime, "disable");
+        const disableBatchingMinRecordsToAwaitSpy = spyOn(component.batchingMinRecordsToAwait, "disable");
+
+        component.batchingForm.patchValue({ updatesState: false });
+        fixture.detectChanges();
+
+        expect(disableBatchingEveryTimeSpy).toHaveBeenCalledTimes(1);
+        expect(disableBatchingUnitTimeSpy).toHaveBeenCalledTimes(1);
+        expect(disableBatchingMinRecordsToAwaitSpy).toHaveBeenCalledTimes(1);
+    });
 });

src/app/dataset-view/additional-components/dataset-settings-component/tabs/scheduling/batching-trigger-form/batching-trigger-form.component.ts

@@ -40,6 +40,10 @@ export class BatchingTriggerFormComponent extends BaseComponent implements OnIni
 
     private datasetSchedulingService = inject(DatasetSchedulingService);
 
+    public get batchingUpdatesState(): AbstractControl {
+        return this.batchingForm.controls.updatesState;
+    }
+
     public get batchingEveryTime(): AbstractControl {
         return this.batchingForm.controls.every;
     }
@@ -48,6 +52,10 @@ export class BatchingTriggerFormComponent extends BaseComponent implements OnIni
         return this.batchingForm.controls.unit;
     }
 
+    public get batchingMinRecordsToAwait(): AbstractControl {
+        return this.batchingForm.controls.minRecordsToAwait;
+    }
+
     public saveBatchingTriggers(): void {
         this.saveTriggerEmit.emit(this.batchingForm);
     }
@@ -63,6 +71,11 @@ export class BatchingTriggerFormComponent extends BaseComponent implements OnIni
     public ngOnInit(): void {
         this.setBatchingEveryTimeValidator();
         this.initBatchingForm();
+        this.batchingUpdatesState.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((enableUpdates: boolean) => {
+                enableUpdates ? this.enableControls() : this.disableControls();
+            });
     }
 
     public initBatchingForm(): void {
@@ -78,7 +91,21 @@ export class BatchingTriggerFormComponent extends BaseComponent implements OnIni
                         minRecordsToAwait: batching.minRecordsToAwait,
                         updatesState: !flowTriggers.paused,
                     });
+                } else {
+                    this.disableControls();
                 }
             });
     }
+
+    private disableControls(): void {
+        this.batchingEveryTime.disable();
+        this.batchingUnitTime.disable();
+        this.batchingMinRecordsToAwait.disable();
+    }
+
+    private enableControls(): void {
+        this.batchingEveryTime.enable();
+        this.batchingUnitTime.enable();
+        this.batchingMinRecordsToAwait.enable();
+    }
 }

src/app/dataset-view/additional-components/dataset-settings-component/tabs/scheduling/dataset-settings-scheduling-tab.component.html

@@ -2,22 +2,35 @@
     <h2>Scheduled updates</h2>
     <mat-divider class="mt-1 mb-2" />
     <div class="box mt-3 p-4" *ngIf="isRootDataset">
-        <div class="d-flex flex-row gap-4">
+        <div class="d-flex flex-column gap-4">
             <div class="w-100">
                 <app-ingest-trigger-form
                     [datasetBasics]="datasetBasics"
                     [updateStateToggleLabel]="'Enable/Disable updates'"
-                    (saveTriggerEmit)="savePollingTriggers($event)"
+                    (changeTriggerEmit)="changePollingTriggers($event)"
                 />
             </div>
 
-            <div class="w-75">
+            <div class="w-100">
                 <app-ingest-configuration-form
+                    *ngIf="pollingForm"
                     [datasetBasics]="datasetBasics"
-                    (saveConfigurationEmit)="saveIngestConfiguration($event)"
+                    [disabled]="pollingForm.controls.updatesState.value"
+                    (changeConfigurationEmit)="changeIngestConfiguration($event)"
                 />
             </div>
         </div>
+        <div class="mt-4 d-flex justify-content-end">
+            <button
+                type="button"
+                class="btn btn-success"
+                (click)="saveScheduledUpdates()"
+                [disabled]="invalidPollingForm || !enablePollingUpdates"
+                data-test-id="save-polling-triggers"
+            >
+                Save
+            </button>
+        </div>
     </div>
 
     <div *ngIf="!isRootDataset">