feature #177 Create component search with custom filter tokens

ui/angular.json

@@ -197,8 +197,6 @@
                             "browserTarget": "spline-ui:build:production"
                         },
                         "localhost": {
-                            "sourceMap": true,
-                            "optimization": false,
                             "browserTarget": "spline-ui:build:localhost"
                         }
                     }

ui/projects/spline-api/src/lib/execution-event/models/entities/execution-event/execution-events-query.models.ts

@@ -15,7 +15,15 @@
  */
 
 import { HttpParams } from '@angular/common/http'
-import { DEFAULT_PAGE_LIMIT, PageQueryParams, QueryPager, QuerySorter, SearchQuery } from 'spline-utils'
+import {
+    DEFAULT_PAGE_LIMIT,
+    LabelPageQueryParams,
+    LabelValuesPageQueryParams,
+    PageQueryParams,
+    QueryPager,
+    QuerySorter,
+    SearchQuery
+} from 'spline-utils'
 
 import { DataSourceWriteMode } from '../data-source'
 
@@ -28,6 +36,7 @@ export namespace ExecutionEventsQuery {
         executedAtFrom?: Date
         executedAtTo?: Date
         searchTerm?: string
+        label?: string[],
         dataSourceUri?: string
         asAtTime?: number
         applicationId?: string
@@ -42,6 +51,7 @@ export namespace ExecutionEventsQuery {
         sortOrder?: string
         sortField?: string
         searchTerm?: string
+        label?: string[]
         pageSize?: number
         pageNum?: number
         dataSourceUri?: string
@@ -54,11 +64,11 @@ export namespace ExecutionEventsQuery {
         return {
             ...(queryParams?.filter ? toQueryFilterDto(queryParams.filter) : {}),
             ...(queryParams?.pager ? toQueryPagerDto(queryParams.pager) : {}),
-            ...(queryParams?.sortBy?.length ? toSortingDto(queryParams.sortBy) : {}),
+            ...(queryParams?.sortBy?.length ? toSortingDto(queryParams.sortBy) : {})
         }
     }
 
-    export function queryParamsDtoToHttpParams(queryParamsDto: QueryParamsDto): HttpParams {
+    export function queryParamsDtoToHttpParams(queryParamsDto: QueryParamsDto | LabelPageQueryParams | LabelValuesPageQueryParams): HttpParams {
         let httpParams = new HttpParams()
         Object.keys(queryParamsDto)
             .filter(key => queryParamsDto[key] !== undefined)
@@ -68,37 +78,52 @@ export namespace ExecutionEventsQuery {
         return httpParams
     }
 
+    export function labelQueryParamsToHttpParams(queryParams: LabelPageQueryParams | LabelValuesPageQueryParams): HttpParams {
+        return queryParamsDtoToHttpParams(queryParams)
+    }
+
     export function queryParamsToHttpParams(queryParams: QueryParams): HttpParams {
         const queryParamsDto = toQueryParamsDto(queryParams)
         return queryParamsDtoToHttpParams(queryParamsDto)
     }
 
     export function toQueryParams(
-        searchParams: SearchQuery.SearchParams<QueryFilter, ExecutionEventField>,
+        searchParams: SearchQuery.SearchParams<QueryFilter, ExecutionEventField>
     ): QueryParams {
         const queryFilter = {
             ...searchParams.filter,
             ...searchParams.alwaysOnFilter,
-            searchTerm: searchParams.searchTerm,
+            searchTerm: searchParams.searchTerm
         }
         return {
             filter: queryFilter,
             pager: searchParams.pager,
-            sortBy: searchParams.sortBy,
+            sortBy: searchParams.sortBy
         }
     }
 
+    export function toLabelQueryParams(
+        searchString: string, labelName?: string
+    ): LabelPageQueryParams | LabelValuesPageQueryParams {
+        return {
+            length: -1,
+            offset: 0,
+            search: searchString,
+            labelName
+        }
+    }
 
     function toQueryFilterDto(queryFilter: QueryFilter): Partial<QueryParamsDto> {
         return {
             timestampStart: queryFilter?.executedAtFrom ? queryFilter?.executedAtFrom.getTime() : undefined,
             timestampEnd: queryFilter?.executedAtTo ? queryFilter?.executedAtTo.getTime() : undefined,
             searchTerm: queryFilter?.searchTerm?.length ? queryFilter?.searchTerm : undefined,
+            label: queryFilter?.label.length ? queryFilter?.label : undefined,
             dataSourceUri: queryFilter?.dataSourceUri,
             asAtTime: queryFilter?.asAtTime,
             applicationId: queryFilter?.applicationId,
             append: queryFilter?.writeMode?.length
-                ? queryFilter?.writeMode.map(m => {
+                    ? queryFilter?.writeMode.map(m => {
                     switch (m) {
                         case DataSourceWriteMode.Append:
                             return true
@@ -108,7 +133,7 @@ export namespace ExecutionEventsQuery {
                             return null // (append === null) means no writes, i.e. read-only items.
                     }
                 })
-                : undefined
+                    : undefined
         }
     }
 
@@ -117,14 +142,14 @@ export namespace ExecutionEventsQuery {
         const offset = queryPager?.offset ?? 0
         return {
             pageSize: limit,
-            pageNum: offset / limit + 1,
+            pageNum: offset / limit + 1
         }
     }
 
     function toSortingDto(sortBy: QuerySorter.FieldSorter<ExecutionEventField>[]): Partial<QueryParamsDto> {
         return {
             sortField: sortBy[0].field,
-            sortOrder: sortBy[0].dir.toLowerCase(),
+            sortOrder: sortBy[0].dir.toLowerCase()
         }
     }
 }

ui/projects/spline-api/src/lib/execution-event/services/index.ts

@@ -17,14 +17,16 @@
 import { AttributeApiService } from './attribute-api.service'
 import { ExecutionEventApiService } from './execution-event-api.service'
 import { ExecutionPlanApiService } from './execution-plan-api.service'
+import { LabelApiService } from './label-api.service'
 import { SplineDataSourceApiService } from './spline-data-source-api.service'
 
 
-export const executionEventServices: any[] = [
+export const commonServiceProvider: any[] = [
     ExecutionEventApiService,
     ExecutionPlanApiService,
     AttributeApiService,
-    SplineDataSourceApiService
+    SplineDataSourceApiService,
+    LabelApiService
 ]
 
 export * from './public-api'

ui/projects/spline-api/src/lib/execution-event/services/label-api.service.ts

@@ -0,0 +1,49 @@
+/*
+ * Copyright 2021 ABSA Group Limited
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { HttpClient, HttpErrorResponse } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { Observable, throwError } from 'rxjs'
+import { catchError } from 'rxjs/operators'
+import { LabelPageQueryParams, LabelValuesPageQueryParams } from 'spline-utils'
+
+import { ExecutionEventsQuery } from '../models'
+
+import { BaseApiService } from './base-api.service'
+
+
+@Injectable()
+export class LabelApiService extends BaseApiService {
+
+    constructor(protected readonly http: HttpClient) {
+        super(http)
+    }
+
+    fetchList(queryParams: LabelPageQueryParams | LabelValuesPageQueryParams): Observable<string[]> {
+        // Apadter LabelQuery to LabelHttpParams
+        const params = ExecutionEventsQuery.labelQueryParamsToHttpParams(queryParams)
+        const url = this.getConsumerApiResourceURL(`labels/names${ ('labelName' in queryParams) && queryParams.labelName
+                                                                   ? `/${ queryParams.labelName }/values`
+                                                                   : '' }`)
+        return this.http.get<string[]>(url, { params: params })
+            .pipe(
+                catchError((error: HttpErrorResponse) => {
+                    console.error(error)
+                    return throwError(error)
+                })
+            )
+    }
+}

ui/projects/spline-api/src/lib/execution-event/services/public-api.ts

@@ -19,3 +19,4 @@ export * from './base-api.service'
 export * from './execution-event-api.service'
 export * from './spline-data-source-api.service'
 export * from './execution-plan-api.service'
+export * from './label-api.service'

ui/projects/spline-api/src/lib/execution-event/spline-api-execution-event.module.ts

@@ -20,15 +20,15 @@ import { SplineApiCoreModule } from '../core'
 
 import * as fromServices from './services'
 
-
+// TODO: Rename this module, due to not correspondent content to name convention
 @NgModule({
     providers: [
-        ...fromServices.executionEventServices,
+        ...fromServices.commonServiceProvider
     ],
     imports: [
-        SplineApiCoreModule,
+        SplineApiCoreModule
     ],
-    exports: [],
+    exports: []
 })
 export class SplineApiExecutionEventModule {
 }

ui/projects/spline-common/main/src/common/component/search-box-with-filter/spline-search-box-with-filter.component.html

@@ -14,20 +14,44 @@
   ~ limitations under the License.
   -->
 
-<spline-search-box class="table-search"
-                   theme="grey"
-                   [matAutocomplete]="matAutocomplete"
-                   [searchTerm]="lastSearchInput$ | async"
-                   (search$)="changeSearch($event)">
-</spline-search-box>
+<div class="table-search" theme="grey">
+    <form [formGroup]="formGroup">
+        <div [class.spline-search-box--focused]="isSearchFocused" class="spline-search-box">
+
+            <!-- SEARCH ICON -->
+            <mat-icon class="spline-search-box__search-icon">search</mat-icon>
+            <!-- ./SEARCH ICON -->
+            <input
+                #inputRef
+                matInput
+                class="spline-search-box__input"
+                (focusin)="isSearchFocused = true"
+                (focusout)="isSearchFocused = false"
+                formControlName="searchControl"
+                [matAutocomplete]="matAutocomplete"
+                [placeholder]="placeholder | translate"
+                type="text">
+
+            <!-- CLEAR ICON -->
+            <mat-icon class="spline-search-box__clear-icon"
+                      *ngIf="formGroup.get('searchControl').value?.length"
+                      [matTooltip]="'COMMON.CLEAR' | translate"
+                      (click)="onClearBtnClicked()">
+                close
+            </mat-icon>
+            <!-- ./CLEAR ICON -->
+
+        </div>
+    </form>
+</div>
 
 <mat-autocomplete #matAutocomplete="matAutocomplete"
                   (opened)="onAutocompleteOpened()"
                   [displayWith]="displayWithFn"
                   (optionSelected)="onAutocompleteOptionSelected($event)">
-    <ng-container *ngIf="dataSource.autocompleteFilters$ | async as filters">
+    <ng-container *ngIf="autocompleteFilters$ | async as filters">
 
-        <ng-container>
+        <ng-container *ngIf="(autocompleteProcessing$ | async) === autocompleteStateEnum.LOADED">
             <mat-option *ngFor="let option of filters" [value]="option">
                 <div class="spline-search-attribute__option">
                     <div class="spline-search-attribute__option-name-container">
@@ -40,14 +64,14 @@
         </ng-container>
 
         <!-- NO RESULT -->
-        <mat-option *ngIf="filters.length === 0" [value]="null"
+        <mat-option *ngIf="(autocompleteProcessing$ | async) !== autocompleteStateEnum.LOADING && filters.length === 0" [value]="null"
                     disabled="true">
             <h4 class="my-0">{{'COMMON.NO_OPTIONS_FOUND' | translate }}</h4>
         </mat-option>
         <!-- ./NO RESULT -->
 
         <!-- LOADING -->
-        <mat-option *ngIf="false" [value]="null" disabled="true">
+        <mat-option *ngIf="(autocompleteProcessing$ | async) === autocompleteStateEnum.LOADING" [value]="null" disabled="true">
             <h4 class="my-0 d-flex align-items-center">
                 <spline-loader mode="inline" size="xs"></spline-loader>
                 <span class="pl-3">{{'COMMON.LOADING' | translate }}</span>