Environments List search bar changes

components/automate-ui/src/app/entities/environments/environment.action.ts

@@ -8,7 +8,10 @@ export enum EnvironmentActionTypes {
   GET_ALL_FAILURE = 'ENVIRONMENTS::GET_ALL::FAILURE',
   GET = 'ENVIRONMENTS::GET',
   GET_SUCCESS = 'ENVIRONMENTS::GET::SUCCESS',
-  GET_FAILURE = 'ENVIRONMENTS::GET::FAILURE'
+  GET_FAILURE = 'ENVIRONMENTS::GET::FAILURE',
+  SEARCH = 'ENVIRONMENTS::SEARCH',
+  SEARCH_SUCCESS = 'ENVIRONMENTS::SEARCH::SUCCESS',
+  SEARCH_FAILURE = 'ENVIRONMENTS::SEARCH::FAILURE'
 }
 
 export interface EnvironmentsSuccessPayload {
@@ -45,10 +48,40 @@ export class GetEnvironmentFailure implements Action {
   constructor(public payload: HttpErrorResponse) { }
 }
 
+export interface EnvironmentSearchPayload {
+  environmentId: string;
+  server_id: string;
+  org_id: string;
+  name: string;
+  query: string;
+}
+
+export class EnvironmentSearch implements Action {
+  readonly type = EnvironmentActionTypes.SEARCH;
+  constructor(public payload: EnvironmentSearchPayload) { }
+}
+
+export interface EnvironmentSearchSuccessPayload {
+  environments: Environment[];
+}
+
+export class EnvironmentSearchSuccess implements Action {
+  readonly type = EnvironmentActionTypes.SEARCH_SUCCESS;
+  constructor(public payload: EnvironmentSearchSuccessPayload) { }
+}
+
+export class EnvironmentSearchFailure implements Action {
+  readonly type = EnvironmentActionTypes.SEARCH_FAILURE;
+  constructor(public payload: HttpErrorResponse) { }
+}
+
 export type EnvironmentActions =
   | GetEnvironments
   | GetEnvironmentsSuccess
   | GetEnvironmentsFailure
   | GetEnvironment
   | GetEnvironmentSuccess
-  | GetEnvironmentFailure;
+  | GetEnvironmentFailure
+  | EnvironmentSearch
+  | EnvironmentSearchSuccess
+  | EnvironmentSearchFailure;

components/automate-ui/src/app/entities/environments/environment.effects.ts

@@ -14,7 +14,11 @@ import {
   EnvironmentActionTypes,
   GetEnvironment,
   GetEnvironmentSuccess,
-  GetEnvironmentFailure
+  GetEnvironmentFailure,
+  EnvironmentSearch,
+  EnvironmentSearchSuccess,
+  EnvironmentSearchSuccessPayload,
+  EnvironmentSearchFailure
 } from './environment.action';
 
 import { EnvironmentRequests } from './environment.requests';
@@ -65,4 +69,24 @@ export class EnvironmentEffects {
         message: `Could not get environment: ${msg || payload.error}`
       });
     }));
+
+    @Effect()
+    getEnvironmentSearch$ = this.actions$.pipe(
+      ofType(EnvironmentActionTypes.SEARCH),
+      mergeMap((action: EnvironmentSearch) =>
+        this.requests.getEnvironmentSearch(action.payload).pipe(
+          map((resp: EnvironmentSearchSuccessPayload) => new EnvironmentSearchSuccess(resp)),
+          catchError((error: HttpErrorResponse) =>
+            observableOf(new EnvironmentSearchFailure(error))))));
+
+    @Effect()
+    getEnvironmentSearchFailure$ = this.actions$.pipe(
+      ofType(EnvironmentActionTypes.SEARCH_FAILURE),
+      map(({ payload }: EnvironmentSearchFailure) => {
+        const msg = payload.error.error;
+        return new CreateNotification({
+          type: Type.error,
+          message: `Could not get infra Environment details: ${msg || payload.error}`
+        });
+      }));
 }

components/automate-ui/src/app/entities/environments/environment.reducer.ts

@@ -7,9 +7,11 @@ import { Environment } from './environment.model';
 export interface EnvironmentEntityState extends EntityState<Environment> {
   environmentsStatus: EntityStatus;
   getAllStatus: EntityStatus;
+  getSearchStatus: EntityStatus;
 }
 
 const GET_ALL_STATUS = 'getAllStatus';
+const GET_SEARCH_STATUS = 'getSearchStatus';
 
 export const environmentEntityAdapter: EntityAdapter<Environment> =
   createEntityAdapter<Environment>({
@@ -38,6 +40,19 @@ export function environmentEntityReducer(
     case EnvironmentActionTypes.GET_ALL_FAILURE:
       return set(GET_ALL_STATUS, EntityStatus.loadingFailure, state);
 
+    case EnvironmentActionTypes.SEARCH:
+      return set(GET_SEARCH_STATUS, EntityStatus.loading, environmentEntityAdapter
+        .removeAll(state));
+
+    case EnvironmentActionTypes.SEARCH_SUCCESS:
+      return pipe(
+        set(GET_SEARCH_STATUS, EntityStatus.loadingSuccess))
+        (environmentEntityAdapter
+          .setAll(action.payload.environments, state)) as EnvironmentEntityState;
+
+    case EnvironmentActionTypes.SEARCH_FAILURE:
+      return set(GET_SEARCH_STATUS, EntityStatus.loadingFailure, state);
+
     default:
       return state;
   }

components/automate-ui/src/app/entities/environments/environment.requests.ts

@@ -2,12 +2,17 @@ import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { environment as env } from 'environments/environment';
-import { EnvironmentsSuccessPayload } from './environment.action';
+import { EnvironmentsSuccessPayload, EnvironmentSearchPayload } from './environment.action';
 import { Environment } from './environment.model';
 import { InterceptorSkipHeader } from 'app/services/http/http-client-auth.interceptor';
 
 const headers = new HttpHeaders().set(InterceptorSkipHeader, '');
 
+export interface EnvironmentSearchResponse {
+  environments: any[];
+  total: number;
+}
+
 @Injectable()
 export class EnvironmentRequests {
 
@@ -24,4 +29,12 @@ export class EnvironmentRequests {
     return this.http.get<Environment>(
       `${env.infra_proxy_url}/servers/${server_id}/orgs/${org_id}/environments/${name}`, {headers});
   }
+
+  public getEnvironmentSearch(payload: EnvironmentSearchPayload)
+  : Observable<EnvironmentSearchResponse> {
+    return this.http.get<EnvironmentSearchResponse>(
+      `${env.infra_proxy_url}/servers/${payload.server_id}/orgs/${payload.org_id}/environments?search_query.${payload.query}=name:*${payload.environmentId}*`,
+      {headers}
+    );
+  }
 }

components/automate-ui/src/app/entities/environments/environment.selectors.ts

@@ -16,3 +16,8 @@ export const getAllStatus = createSelector(
   environmentState,
   (state) => state.getAllStatus
 );
+
+export const getSearchStatus = createSelector(
+  environmentState,
+  (state) => state.getSearchStatus
+);

components/automate-ui/src/app/modules/infra-proxy/environments/environments.component.html

@@ -2,7 +2,15 @@
   <chef-loading-spinner *ngIf="environmentsListLoading" size="50"></chef-loading-spinner>
   <app-empty-state *ngIf="authFailure" moduleTitle="environments" (resetKeyRedirection)="resetKeyTabRedirection($event)"></app-empty-state>
   <ng-container *ngIf="!environmentsListLoading && !authFailure">
-    <chef-table>
+    <div class="search-items">
+      <app-infra-search-bar (searchButtonClick)="toggleFilters($event)" placeHolder="environments"></app-infra-search-bar>
+    </div> 
+    <chef-loading-spinner class="full-screen-spinner" *ngIf="searchItems && !environments.length" size="50" fixed></chef-loading-spinner>   
+    <div class="empty-section" *ngIf="!searchItems && !environments.length">
+      <img alt="No preview" src="/assets/img/no_preview.gif" />
+      <p>No results found for "{{searchText}}".</p>
+    </div>
+    <chef-table *ngIf="environments.length">
       <chef-thead>
         <chef-tr>
           <chef-th>Environments Name</chef-th>

components/automate-ui/src/app/modules/infra-proxy/environments/environments.component.scss

@@ -33,3 +33,18 @@ chef-loading-spinner {
   width: 100px;
   z-index: 199;
 }
+
+.full-screen-spinner {
+  display: flex;
+  margin: auto;
+  width: initial;
+}
+
+.empty-section {
+  margin-top: 50px;
+  text-align: center;
+}
+
+img {
+  width: 122px;
+}

components/automate-ui/src/app/modules/infra-proxy/environments/environments.component.ts

@@ -3,15 +3,16 @@ import { Store } from '@ngrx/store';
 import { combineLatest, Subject } from 'rxjs';
 import { NgrxStateAtom } from 'app/ngrx.reducers';
 import { LayoutFacadeService, Sidebar } from 'app/entities/layout/layout.facade';
-import { takeUntil } from 'rxjs/operators';
+import { filter, takeUntil } from 'rxjs/operators';
 import { isNil } from 'lodash/fp';
 
 import { EntityStatus } from 'app/entities/entities';
-import { GetEnvironments } from 'app/entities/environments/environment.action';
+import { GetEnvironments, EnvironmentSearch } from 'app/entities/environments/environment.action';
 import { Environment } from 'app/entities/environments/environment.model';
 import {
   allEnvironments,
-  getAllStatus as getAllEnvironmentsForOrgStatus
+  getAllStatus as getAllEnvironmentsForOrgStatus,
+  getSearchStatus
 } from 'app/entities/environments/environment.selectors';
 
 
@@ -30,6 +31,10 @@ export class EnvironmentsComponent implements OnInit, OnDestroy {
   public environments: Environment[] = [];
   public environmentsListLoading = true;
   public authFailure = false;
+  public environmentsSearch: Environment[];
+  public environmentsName: string;
+  public searchItems = false;
+  public searchText: string;
 
   constructor(
     private store: Store<NgrxStateAtom>,
@@ -56,12 +61,63 @@ export class EnvironmentsComponent implements OnInit, OnDestroy {
         this.authFailure = true;
       }
     });
+
+    combineLatest([
+      this.store.select(getSearchStatus),
+      this.store.select(allEnvironments)
+    ]).pipe(
+      filter(([getEnvironmentsSt, _EnvironmentsState]) =>
+      getEnvironmentsSt === EntityStatus.loadingSuccess),
+      filter(([_getEnvironmentsSt, EnvironmentsState]) =>
+        !isNil(EnvironmentsState)),
+      takeUntil(this.isDestroyed))
+    .subscribe(([_getEnvironmentsSt, EnvironmentsState]) => {
+      this.environmentsSearch = EnvironmentsState;
+    });
   }
 
   resetKeyTabRedirection(resetLink: boolean) {
     this.resetKeyRedirection.emit(resetLink);
   }
 
+  toggleFilters(currentText: string) {
+    this.searchItems = true;
+    if (currentText) {
+      this.searchText = currentText;
+      const payload = {
+        environmentId: currentText,
+        page: 0,
+        per_page: this.environments.length,
+        server_id: this.serverId,
+        org_id: this.orgId,
+        name: this.environmentsName,
+        query: 'q'
+      };
+      combineLatest([
+        this.store.select(getSearchStatus),
+        this.store.select(allEnvironments)
+      ]).pipe(
+        filter(([getEnvironmentsSt, _EnvironmentsState]) =>
+        getEnvironmentsSt === EntityStatus.loadingSuccess),
+        filter(([_getEnvironmentsSt, EnvironmentsState]) =>
+          !isNil(EnvironmentsState)),
+        takeUntil(this.isDestroyed))
+      .subscribe(([_getEnvironmentsSt, EnvironmentsState]) => {
+        this.environmentsSearch = EnvironmentsState;
+      });
+      this.store.dispatch(new EnvironmentSearch(payload));
+
+      setTimeout(() => {
+        this.searchItems = false;
+      }, 2000);
+    } else {
+      this.store.dispatch(new GetEnvironments({
+        server_id: this.serverId, org_id: this.orgId
+      }));
+    }
+  }
+
+
   ngOnDestroy(): void {
     this.isDestroyed.next(true);
     this.isDestroyed.complete();

components/automate-ui/src/app/modules/infra-proxy/infra-proxy.module.ts

@@ -19,6 +19,7 @@ import { EnvironmentsComponent } from './environments/environments.component';
 import { EnvironmentDetailsComponent } from './environment-details/environment-details.component';
 import { InfraRolesComponent } from './infra-roles/infra-roles.component';
 import { InfraRoleDetailsComponent } from './infra-role-details/infra-role-details.component';
+import { InfraSearchBarComponent } from './infra-search-bar/infra-search-bar.component';
 import { JsonTreeTableComponent } from './json-tree-table/json-tree-table.component';
 import { OrgDetailsComponent } from './org-details/org-details.component';
 import { OrgEditComponent } from './org-edit/org-edit.component';
@@ -27,6 +28,7 @@ import { ResetAdminKeyComponent } from './reset-admin-key/reset-admin-key.compon
 import { TreeTableModule } from './tree-table/tree-table.module';
 import { EmptyStateComponent } from './empty-state/empty-state.component';
 
+
 @NgModule({
   declarations: [
     ChefServersListComponent,
@@ -45,6 +47,7 @@ import { EmptyStateComponent } from './empty-state/empty-state.component';
     JsonTreeTableComponent,
     InfraRolesComponent,
     InfraRoleDetailsComponent,
+    InfraSearchBarComponent,
     OrgDetailsComponent,
     OrgEditComponent,
     PolicyFilesComponent,

components/automate-ui/src/app/modules/infra-proxy/infra-search-bar/infra-search-bar.component.html

@@ -0,0 +1,16 @@
+<div class="search-wrapper" tabindex="0">
+    <div class="search-input-wrapper">      
+      <input #search_box chefInput
+            id="search_box"
+            aria-label="Search"  
+            (keyup)="handleInput($event.key, search_box.value)"                     
+            [value]="inputText"
+            type="text"
+            class="search-input"
+            placeholder="{{ getFilterText() }}"
+            autocomplete="off">
+      <button chef-button class="search-button primary" primary (click)="handleFiltersClick(search_box.value)">
+        <chef-icon>search</chef-icon>
+      </button>        
+    </div>        
+</div>

components/automate-ui/src/app/modules/infra-proxy/infra-search-bar/infra-search-bar.component.scss

@@ -0,0 +1,42 @@
+@import "~styles/variables";
+@import "~styles/mixins";
+
+.search-wrapper {
+  width: 100%;
+  font-size: 1em;
+  color: $chef-primary-dark;
+  padding-bottom: 25px;
+}
+
+.search-input-wrapper {
+  position: relative;
+
+  .search-button {
+    box-shadow: 0 1px 14px #E6EBEE;
+    border: 1px solid #E5E5E5;
+    border-left: none;
+    border-radius: 0px 4px 4px 0px;
+    background: #E6EBEE;
+    cursor: pointer;
+    width: 45px;
+    height: 43px;
+    position: absolute;
+    right: 1px;
+    top: 1px;
+  }
+
+  .chef-input {
+    border-radius: 4px 0px 0px 4px;
+    // border-right: none;
+    width: 100%;
+  }
+
+  .search-items {
+    margin-bottom: 25px;
+    width: 100%;
+  }
+}
+
+.hidden-label {
+  padding: 0;
+}