#79 :: Dynamic Filter :: Apply DataSource State History.

AbsaOSS · Jul 26, 2021 · e7082a8 · e7082a8
1 parent 70f54fd
commit e7082a8
Show file tree

Hide file tree

Showing 16 changed files with 81 additions and 146 deletions.
diff --git a/...e-common/dynamic-filter/filter-controls/src/date-range/df-control-date-range.component.ts b/...e-common/dynamic-filter/filter-controls/src/date-range/df-control-date-range.component.ts
@@ -24,7 +24,7 @@ import { DfControlDateRange } from './df-control-date-range.models'
     selector: 'df-control-date-range',
     templateUrl: './df-control-date-range.component.html',
 })
-export class DfControlDateRangeComponent<TId extends keyof any = keyof any>
+export class DfControlDateRangeComponent<TId extends keyof any = any>
     extends BaseDynamicFilterControlComponent<DfControlDateRange.Value, DfControlDateRange.Options, TId> {
 
     readonly defaultIcon = 'schedule'

diff --git a/...ine-common/dynamic-filter/filter-controls/src/date-range/df-control-date-range.factory.ts b/...ine-common/dynamic-filter/filter-controls/src/date-range/df-control-date-range.factory.ts
@@ -32,7 +32,7 @@ export class DfControlDateRangeFactory implements IDynamicFilterControlFactory<D
 
     createModelFromSchema<TFilterValue extends DfControlDateRange.Value = DfControlDateRange.Value,
         TFilterOptions extends DfControlDateRange.Options = DfControlDateRange.Options,
-        TId extends keyof any = keyof any>(
+        TId extends keyof any = any>(
         schema: DfControlDateRange.Schema<TId>,
         defaultValue?: DfControlDateRange.Value): Observable<DfControlDateRange.Model<TId>> {
 

diff --git a/...line-common/dynamic-filter/filter-controls/src/date-range/df-control-date-range.models.ts b/...line-common/dynamic-filter/filter-controls/src/date-range/df-control-date-range.models.ts
@@ -27,7 +27,7 @@ export namespace DfControlDateRange {
 
     export type Options = {}
 
-    export type Schema<TId extends keyof any = keyof any> =
+    export type Schema<TId extends keyof any = any> =
         & DynamicFilterControlSchema<Value, Options, TId>
         &
         {
@@ -36,7 +36,7 @@ export namespace DfControlDateRange {
             bounds?: SplineDateRangeValue | null
         }
 
-    export function getSchema<TId extends keyof any = keyof any>(
+    export function getSchema<TId extends keyof any = any>(
         label?: string,
         icon?: string,
         bounds?: SplineDateRangeValue | null): Partial<Schema> {
@@ -51,7 +51,7 @@ export namespace DfControlDateRange {
 
     export type Config = Omit<Schema, 'id' | 'type'>
 
-    export class Model<TId extends keyof any = keyof any> extends BaseDynamicFilterControlModel<Value, Options, TId> {
+    export class Model<TId extends keyof any = any> extends BaseDynamicFilterControlModel<Value, Options, TId> {
 
         readonly type = TYPE
 

diff --git a/...er/filter-controls/src/select/components/df-control-select/df-control-select.component.ts b/...er/filter-controls/src/select/components/df-control-select/df-control-select.component.ts
@@ -28,7 +28,7 @@ import { DfControlSelect } from '../../models'
     templateUrl: './df-control-select.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class DfControlSelectComponent<TId extends keyof any = keyof any>
+export class DfControlSelectComponent<TId extends keyof any = any>
     extends BaseDynamicFilterControlComponent<DfControlSelect.Value, DfControlSelect.Options, TId>
     implements OnInit {
 

diff --git a/...pline-common/dynamic-filter/filter-controls/src/select/models/df-control-select.models.ts b/...pline-common/dynamic-filter/filter-controls/src/select/models/df-control-select.models.ts
@@ -30,7 +30,7 @@ export namespace DfControlSelect {
         valueLabelAllSelected?: string
     }
 
-    export type Schema<TId extends keyof any = keyof any, TRecord = unknown, TSelectValue = TRecord> =
+    export type Schema<TId extends keyof any = any, TRecord = unknown, TSelectValue = TRecord> =
         & DynamicFilterControlSchema<Value<TSelectValue>, Options<TRecord, TSelectValue>, TId>
         &
         {
@@ -42,7 +42,7 @@ export namespace DfControlSelect {
     export type Config<TRecord = unknown, TValue = TRecord> =
         Omit<Schema<keyof any, TRecord, TValue>, 'id' | 'type'>
 
-    export class Model<TId extends keyof any = keyof any, TRecord = unknown, TSelectValue = TRecord>
+    export class Model<TId extends keyof any = any, TRecord = unknown, TSelectValue = TRecord>
         extends BaseDynamicFilterControlModel<Value<TSelectValue>, Options<TRecord, TSelectValue>, TId> {
         readonly type = TYPE
 

diff --git a/...ne-common/dynamic-filter/filter-controls/src/select/services/df-control-select.factory.ts b/...ne-common/dynamic-filter/filter-controls/src/select/services/df-control-select.factory.ts
@@ -32,7 +32,7 @@ export class DfControlSelectFactory implements IDynamicFilterControlFactory<DfCo
 
     createModelFromSchema<TFilterValue extends DfControlSelect.Value = DfControlSelect.Value,
         TFilterOptions extends DfControlSelect.Options = DfControlSelect.Options,
-        TId extends keyof any = keyof any>(
+        TId extends keyof any = any>(
         schema: DfControlSelect.Schema<TId>,
         defaultValue?: DfControlSelect.Value): Observable<DfControlSelect.Model<TId>> {
 

diff --git a/...mon/dynamic-filter/main/src/core/components/base/base-dynamic-filter-control.component.ts b/...mon/dynamic-filter/main/src/core/components/base/base-dynamic-filter-control.component.ts
@@ -24,7 +24,7 @@ import { BaseComponent, GenericEvent, SplineRecord } from 'spline-utils'
     template: ''
 })
 export abstract class BaseDynamicFilterControlComponent<TValue = any, TOptions extends SplineRecord = SplineRecord,
-    TId extends keyof any = keyof any>
+    TId extends keyof any = any>
     extends BaseComponent
     implements IDynamicFilterControlComponent<TValue, TOptions, TId> {
 

diff --git a/...ojects/spline-common/dynamic-filter/main/src/core/models/dynamic-filter-control.models.ts b/...ojects/spline-common/dynamic-filter/main/src/core/models/dynamic-filter-control.models.ts
@@ -26,7 +26,7 @@ export type DynamicFilterItemValue<T = any, TOptions extends SplineRecord = Spli
 }
 
 export interface IDynamicFilterControlModel<TValue = unknown,
-    TOptions extends SplineRecord = SplineRecord, TId extends keyof any = keyof any> {
+    TOptions extends SplineRecord = SplineRecord, TId extends keyof any = any> {
     readonly id: TId
     readonly type: string
     readonly options: TOptions
@@ -41,7 +41,7 @@ export type DynamicFilterControlModelConfig<TValue, TOptions extends SplineRecor
 }
 
 export type DynamicFilterControlSchema<TValue = unknown, TOptions extends SplineRecord = SplineRecord,
-    TId extends keyof any = keyof any> =
+    TId extends keyof any = any> =
     & SplineRecord
     &
     {
@@ -54,7 +54,7 @@ export type DynamicFilterSchema<TFilter extends SplineRecord = SplineRecord, TId
     = DynamicFilterControlSchema<TFilter[TId], any, TId>[]
 
 
-export abstract class BaseDynamicFilterControlModel<TValue, TOptions extends SplineRecord = SplineRecord, TId extends keyof any = keyof any>
+export abstract class BaseDynamicFilterControlModel<TValue, TOptions extends SplineRecord = SplineRecord, TId extends keyof any = any>
 implements IDynamicFilterControlModel<TValue, TOptions, TId> {
 
     readonly id: TId
@@ -114,7 +114,7 @@ export type DynamicFilterControlsCollection<TFilter extends SplineRecord, TKey e
     = IDynamicFilterControlModel<TFilter[TKey], any, TKey>[]
 
 export interface IDynamicFilterControlComponent<TValue = unknown, TOptions extends SplineRecord = SplineRecord,
-    TId extends keyof any = keyof any> {
+    TId extends keyof any = any> {
 
     model: IDynamicFilterControlModel<TValue, TOptions, TId>
     event$: EventEmitter<GenericEvent>
@@ -124,7 +124,7 @@ export interface IDynamicFilterControlFactory<TValue = unknown, TOptions extends
     extends IDynamicComponentFactory<IDynamicFilterControlComponent<TValue, TOptions>> {
 
     createModelFromSchema<TFilterValue extends TValue = TValue,
-        TFilterOptions extends TOptions = TOptions, TId extends keyof any = keyof any>(
+        TFilterOptions extends TOptions = TOptions, TId extends keyof any = any>(
         schema: DynamicFilterControlSchema<TValue, TOptions, TId>, defaultValue?: TValue
     ): Observable<IDynamicFilterControlModel<TValue, TOptions, TId>>
 }

diff --git a/ui/projects/spline-common/dynamic-table/src/cells/link/dt-cell-link.component.html b/ui/projects/spline-common/dynamic-table/src/cells/link/dt-cell-link.component.html
@@ -16,7 +16,7 @@
 
 <ng-container *ngIf="options$ | async as options">
     <div *ngIf="value$ | async as value"
-         class="dt-cell dt-cell-link--style-{{ options?.style ? options.style : defaultLinkStyle }}">
+         class="dt-cell dt-cell-link dt-cell-link--style-{{ options?.style ? options.style : defaultLinkStyle }}">
 
         <spline-long-text [tooltip]="value.title">
             <ng-container *ngIf="value?.routerLink || value?.onClick || value?.emitCellEvent; else invalidRouterLink">

diff --git a/ui/projects/spline-common/dynamic-table/styles/cells/_dt-cell-link.component.scss b/ui/projects/spline-common/dynamic-table/styles/cells/_dt-cell-link.component.scss
@@ -17,11 +17,20 @@
 @import 'vars';
 
 .dt-cell-link {
+    a {
+        text-decoration: none;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
     &--style-main {
         a {
             color: $color-black;
             font-size: 16px;
             font-weight: 500;
+            text-decoration: underline;
         }
     }
 }
diff --git a/ui/projects/spline-shared/main/assets/i18n/shared/en.json b/ui/projects/spline-shared/main/assets/i18n/shared/en.json
@@ -1,4 +1,6 @@
 {
     "SHARED": {
+        "EXECUTION_EVENTS__DF__EXECUTED_AT": "Executed At",
+        "EXECUTION_EVENTS__DF__WRITE_MODE": "Write Mode"
     }
 }
diff --git a/ui/projects/spline-shared/main/src/common/models/execution-events-dynamic-filter.models.ts b/ui/projects/spline-shared/main/src/common/models/execution-events-dynamic-filter.models.ts
@@ -32,19 +32,19 @@ export namespace ExecutionEventsDynamicFilter {
         [FilterId.executedAtDataRange]: DfControlDateRange.Value
     }
 
-    export function getExecutedAtFilterSchema(): DfControlDateRange.Schema<FilterId.executedAtDataRange> {
+    export function getExecutedAtFilterSchema(): DfControlDateRange.Schema<any> {
         return {
             id: FilterId.executedAtDataRange,
             type: DfControlDateRange.TYPE,
-            label: 'EVENTS.EVENTS_LIST__DF__EXECUTED_AT'
+            label: 'SHARED.EXECUTION_EVENTS__DF__EXECUTED_AT'
         }
     }
 
     export function getWriteModeFilterSchema(): DfControlSelect.Schema<FilterId.writeMode> {
         return {
             id: FilterId.writeMode,
             type: DfControlSelect.TYPE,
-            label: 'EVENTS.EVENTS_LIST__DF__WRITE_MODE',
+            label: 'SHARED.EXECUTION_EVENTS__DF__WRITE_MODE',
             icon: 'save',
             records: getDataSourceWriteModeInfoList()
                 .map(item => ({

diff --git a/ui/src/modules/data-sources/pages/overview/history/ds-overview-history.page.component.html b/ui/src/modules/data-sources/pages/overview/history/ds-overview-history.page.component.html
@@ -27,16 +27,9 @@ <h2 class="text-center mt-4">
                 [dataMap]="dataMap"
                 [dataSource]="dataSource">
 
-            <div class="d-flex">
-                <spline-date-filter (valueChanged$)="onDateFilterChanged($event)"
-                                    *ngIf="!!state.dateRangeFilter?.bounds"
-                                    [maxDate]="state.dateRangeFilter.bounds?.dateTo"
-                                    [minDate]="state.dateRangeFilter.bounds?.dateFrom"
-                                    [showIcon]="false"
-                                    [value]="state.dateRangeFilter?.value"
-                                    [label]="'DATA_SOURCES.DS_STATE_HISTORY__FILTER__CREATED_AT' | translate">
-                </spline-date-filter>
-            </div>
+            <dynamic-filter-container *ngIf="filterModel"
+                                      [model]="filterModel">
+            </dynamic-filter-container>
 
         </spline-search-dynamic-table>
 

diff --git a/ui/src/modules/data-sources/pages/overview/history/ds-overview-history.page.component.ts b/ui/src/modules/data-sources/pages/overview/history/ds-overview-history.page.component.ts
@@ -15,23 +15,21 @@
  */
 
 import { Component, OnInit } from '@angular/core'
-import { ActivatedRoute, Router } from '@angular/router'
-import { isEqual } from 'lodash-es'
 import { Observable } from 'rxjs'
-import { distinctUntilChanged, filter, map, skip, takeUntil, withLatestFrom } from 'rxjs/operators'
-import { ExecutionEvent, ExecutionEventFacade, ExecutionEventField, ExecutionEventsQuery, SplineDataSourceInfo } from 'spline-api'
-import { SplineDateRangeFilter } from 'spline-common'
+import { filter, map, takeUntil, withLatestFrom } from 'rxjs/operators'
+import { ExecutionEvent, ExecutionEventFacade, ExecutionEventsQuery, SplineDataSourceInfo } from 'spline-api'
+import { DynamicFilterFactory, DynamicFilterModel } from 'spline-common/dynamic-filter'
 import { DtCellCustomEvent } from 'spline-common/dynamic-table'
-import { BaseLocalStateComponent, SearchQuery, SplineDateRangeValue } from 'spline-utils'
+import { DataSourceWithDynamicFilter } from 'spline-shared'
+import { BaseLocalStateComponent } from 'spline-utils'
 
 import { DsStateHistoryDataSource } from '../../../data-sources'
 import { DsStateHistoryDtSchema } from '../../../dynamic-table'
 import { DsOverviewStoreFacade } from '../../../services'
 
 import { DsOverviewHistoryPage } from './ds-overview-history.page.models'
-import SearchParams = SearchQuery.SearchParams
 
-// TODO: Replace redundant filter logic with some generic filter model.
+
 @Component({
     selector: 'data-sources-overview-history-page',
     templateUrl: './ds-overview-history.page.component.html',
@@ -51,19 +49,17 @@ export class DsOverviewHistoryPageComponent extends BaseLocalStateComponent<DsOv
 
     readonly dataMap = DsStateHistoryDtSchema.getSchema()
     readonly dataSourceInfo$: Observable<SplineDataSourceInfo>
+    filterModel: DynamicFilterModel<DsOverviewHistoryPage.Filter>
 
     constructor(readonly dataSource: DsStateHistoryDataSource,
-                private readonly activatedRoute: ActivatedRoute,
-                private readonly router: Router,
+                private readonly dynamicFilterFactory: DynamicFilterFactory,
                 private readonly store: DsOverviewStoreFacade) {
         super()
 
         this.updateState(
             DsOverviewHistoryPage.getDefaultState()
         )
 
-        this.initDateRangeFilter()
-
         this.dataSourceInfo$ = this.store.isInitialized$
             .pipe(
                 withLatestFrom(this.store.dataSourceInfo$),
@@ -85,6 +81,18 @@ export class DsOverviewHistoryPageComponent extends BaseLocalStateComponent<DsOv
     }
 
     ngOnInit(): void {
+        this.dynamicFilterFactory
+            .schemaToModel<DsOverviewHistoryPage.Filter>(
+                DsOverviewHistoryPage.getDynamicFilterSchema()
+            )
+            .subscribe(model => {
+                this.filterModel = model
+                DataSourceWithDynamicFilter.bindDynamicFilter<ExecutionEventsQuery.QueryFilter, DsOverviewHistoryPage.Filter>(
+                    this.dataSource,
+                    this.filterModel,
+                    DsOverviewHistoryPage.getFiltersMapping()
+                )
+            })
     }
 
     onCellEvent($event: DtCellCustomEvent<ExecutionEvent>): void {
@@ -97,98 +105,11 @@ export class DsOverviewHistoryPageComponent extends BaseLocalStateComponent<DsOv
         }
     }
 
-    onDateFilterChanged(value: SplineDateRangeFilter.Value): void {
-        this.updateDateRangeFilterValue(value)
-    }
-
     onSideDialogClosed(): void {
         this.updateState(
             DsOverviewHistoryPage.reduceSelectDsState(
                 this.state, null
             )
         )
     }
-
-    private updateDateRangeFilterValue(value: SplineDateRangeFilter.Value): void {
-        this.updateState(
-            DsOverviewHistoryPage.reduceDateRangeFilterChanged(
-                this.state, value
-            )
-        )
-    }
-
-    private initDateRangeFilter(): void {
-        //
-        // [ACTION] :: FilterValue changed
-        //      => fetch data
-        //
-        this.state$
-            .pipe(
-                map(state => state.dateRangeFilter.value),
-                skip(1),
-                takeUntil(this.destroyed$),
-                distinctUntilChanged((left, right) => isEqual(left, right)),
-                filter(filterValue => {
-                    const searchParams = this.dataSource.searchParams
-                    const currentDsFilterValue: SplineDateRangeValue = searchParams.filter.executedAtFrom
-                        ? {
-                            dateFrom: searchParams.filter.executedAtFrom,
-                            dateTo: searchParams.filter.executedAtTo,
-                        }
-                        : null
-
-                    return !isEqual(filterValue, currentDsFilterValue)
-                })
-            )
-            .subscribe(filterValue => {
-                this.dataSource.setFilter({
-                    ...this.dataSource.searchParams.filter,
-                    executedAtFrom: filterValue?.dateFrom ?? undefined,
-                    executedAtTo: filterValue?.dateTo ?? undefined,
-                })
-            })
-
-        //
-        // [ACTION] :: SearchParams changed
-        //      => update current date range filter value
-        //
-        this.dataSource.searchParams$
-            .pipe(
-                takeUntil(this.destroyed$),
-                map((searchParams: SearchParams<ExecutionEventsQuery.QueryFilter, ExecutionEventField>) => {
-
-                    if (!searchParams.filter?.executedAtFrom || !searchParams.filter?.executedAtTo) {
-                        return null
-                    }
-
-                    return {
-                        dateFrom: searchParams.filter.executedAtFrom,
-                        dateTo: searchParams.filter.executedAtTo,
-                    }
-                }),
-                filter(filterValue => !isEqual(filterValue, this.state.dateRangeFilter.value)),
-            )
-            .subscribe(
-                filterValue => this.updateDateRangeFilterValue(filterValue),
-            )
-
-        //
-        // [ACTION] :: DateRange Bounds changed (from the fetched data)
-        //      => update current date range filter bounds value
-        //
-        this.dataSource.dataState$
-            .pipe(
-                takeUntil(this.destroyed$),
-                map(dataState => dataState?.data?.dateRangeBounds),
-                distinctUntilChanged((left, right) => isEqual(left, right)),
-                filter(dateRangeBounds => !isEqual(dateRangeBounds, this.state.dateRangeFilter.bounds))
-            )
-            .subscribe(dateRangeBounds => {
-                this.updateState(
-                    DsOverviewHistoryPage.reduceDateRangeFilterBoundsChanged(
-                        this.state, dateRangeBounds
-                    )
-                )
-            })
-    }
 }