#326 add search to security group list

src/app/security-group/sg-filter/sg-filter.component.html

@@ -10,3 +10,4 @@
     </md-tab-group>
   </div>
 </cs-top-bar>
+<cs-search [(ngModel)]="query" (ngModelChange)="update()"></cs-search>

src/app/security-group/sg-filter/sg-filter.component.ts

@@ -7,6 +7,7 @@ import { FilterComponent } from '../../shared/interfaces/filter-component';
 
 export interface SecurityGroupFilter {
   viewMode: SecurityGroupViewMode;
+  query: string;
 }
 
 export enum SecurityGroupViewMode {
@@ -23,12 +24,17 @@ export class SgFilterComponent implements FilterComponent<SecurityGroupFilter>,
   @Input() public viewMode: SecurityGroupViewMode;
   @Output() public updateFilters = new EventEmitter<SecurityGroupFilter>();
 
+  public query: string;
+
   private filtersKey = 'securityGroupFilters';
   private filterService = new FilterService(
     {
       viewMode: {
         type: 'string',
         options: [SecurityGroupViewMode.Templates, SecurityGroupViewMode.Shared]
+      },
+      query: {
+        type: 'string'
       }
     },
     this.router,
@@ -59,6 +65,7 @@ export class SgFilterComponent implements FilterComponent<SecurityGroupFilter>,
   public initFilters(): void {
     const params = this.filterService.getParams();
     this.viewMode = params.viewMode;
+    this.query = params.query;
     this.update();
   }
 
@@ -75,11 +82,13 @@ export class SgFilterComponent implements FilterComponent<SecurityGroupFilter>,
 
   public update(): void {
     this.updateFilters.emit({
-      viewMode: this.viewMode
+      viewMode: this.viewMode,
+      query: this.query
     });
 
     this.filterService.update(this.filtersKey, {
-      viewMode: this.viewMode
+      viewMode: this.viewMode,
+      query: this.query
     });
   }
 }

src/app/security-group/sg-template-list/sg-template-list-item.component.html

@@ -4,9 +4,8 @@
       <h2
         class="md-card-title-text"
         [mdTooltip]="securityGroupTemplate.name"
-      >
-        {{ securityGroupTemplate.name }}
-      </h2>
+        [innerHTML]="securityGroupTemplate.name | highlight:query"
+      ></h2>
       <div class="md-card-header-menu">
         <button md-icon-button [mdMenuTriggerFor]="actionsMenu">
           <md-icon>more_vert</md-icon>
@@ -26,10 +25,9 @@
           class="tooltip-position-fix fixed-width-span"
           *ngIf="securityGroupTemplate.description"
           [mdTooltip]="securityGroupTemplate.description"
+          [innerHTML]="securityGroupTemplate.description | highlight:query"
           mdTooltipPosition="above"
-        >
-          {{ securityGroupTemplate.description }}
-        </span>
+        ></span>
       </div>
     </div>
   </md-card-content>

src/app/security-group/sg-template-list/sg-template-list-item.component.ts

@@ -8,4 +8,5 @@ import { SecurityGroup } from '../sg.model';
 })
 export class SgTemplateListItemComponent {
   @Input() public securityGroupTemplate: SecurityGroup;
+  @Input() public query: string;
 }

src/app/security-group/sg-template-list/sg-template-list.component.html

@@ -7,42 +7,45 @@
 
   <ng-container *loading="!loaded" cs-list>
     <ng-container *ngIf="isViewModeTemplates">
-      <ng-container *ngIf="predefinedSecurityGroupList.length">
+      <ng-container *ngIf="visiblePredefinedSecurityGroupList.length">
         <h4 class="section-header">{{ "SECURITY_GROUP_PAGE.LIST.SYSTEM_SECURITY_GROUPS" | translate }}</h4>
         <div class="card-list-container">
           <cs-security-group-template-list-item
-            *ngFor="let group of predefinedSecurityGroupList"
+            *ngFor="let group of visiblePredefinedSecurityGroupList"
             [securityGroupTemplate]="group"
+            [query]="query"
           ></cs-security-group-template-list-item>
         </div>
       </ng-container>
 
-      <ng-container *ngIf="customSecurityGroupList.length">
+      <ng-container *ngIf="visibleCustomSecurityGroupList.length">
         <h4 class="section-header">{{ "SECURITY_GROUP_PAGE.LIST.CUSTOM_SECURITY_GROUPS" | translate }}</h4>
         <div class="card-list-container">
           <cs-security-group-template-list-item
-            *ngFor="let group of customSecurityGroupList"
+            *ngFor="let group of visibleCustomSecurityGroupList"
             [securityGroupTemplate]="group"
+            [query]="query"
           ></cs-security-group-template-list-item>
         </div>
       </ng-container>
 
       <cs-no-results
-        *ngIf="!predefinedSecurityGroupList.length && !customSecurityGroupList.length"
+        *ngIf="!templateSecurityGroupPageHasItems"
       ></cs-no-results>
     </ng-container>
 
     <ng-container *ngIf="isViewModeShared">
-      <ng-container *ngIf="sharedSecurityGroupList.length">
+      <ng-container *ngIf="sharedSecurityGroupPageHasItems">
         <div class="card-list-container">
           <cs-security-group-template-list-item
-            *ngFor="let group of sharedSecurityGroupList"
+            *ngFor="let group of visibleSharedSecurityGroupList"
             [securityGroupTemplate]="group"
+            [query]="query"
           ></cs-security-group-template-list-item>
         </div>
       </ng-container>
 
-      <cs-no-results *ngIf="!sharedSecurityGroupList.length"></cs-no-results>
+      <cs-no-results *ngIf="! sharedSecurityGroupPageHasItems"></cs-no-results>
     </ng-container>
   </ng-container>
 

src/app/security-group/sg-template-list/sg-template-list.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
 import { ListService } from '../../shared/components/list/list.service';
 import { LocalStorageService } from '../../shared/services/local-storage.service';
 import { SecurityGroupService } from '../services/security-group.service';
@@ -18,7 +19,12 @@ export class SgTemplateListComponent implements OnInit {
   public customSecurityGroupList: Array<SecurityGroup>;
   public sharedSecurityGroupList: Array<SecurityGroup>;
 
+  public visiblePredefinedSecurityGroupList: Array<SecurityGroup>;
+  public visibleCustomSecurityGroupList: Array<SecurityGroup>;
+  public visibleSharedSecurityGroupList: Array<SecurityGroup>;
+
   public filterData: any;
+  public query: string;
   public viewMode: SecurityGroupViewMode;
 
   constructor(
@@ -27,45 +33,34 @@ export class SgTemplateListComponent implements OnInit {
     private activatedRoute: ActivatedRoute,
     private storageService: LocalStorageService
   ) {
-    this.securityGroupService.onSecurityGroupCreated.subscribe(newGroup => {
-      this.update();
-    });
-
-    this.securityGroupService.onSecurityGroupUpdate.subscribe(updatedGroup => {
-      this.customSecurityGroupList = this.customSecurityGroupList.map(group => {
-        if (group.id === updatedGroup.id) {
-          return updatedGroup;
-        } else {
-          return group;
-        }
+    this.securityGroupService.onSecurityGroupCreated
+      .switchMap(() => {
+        return this.loadGroups();
+      })
+      .subscribe();
+
+    this.securityGroupService.onSecurityGroupUpdate
+      .subscribe(updatedGroup => {
+        this.customSecurityGroupList = this.customSecurityGroupList.map(group => {
+          if (group.id === updatedGroup.id) {
+            return updatedGroup;
+          } else {
+            return group;
+          }
+        });
       });
-    });
   }
 
   public ngOnInit(): void {
-    this.viewMode =
-      this.storageService.read('securityGroupDisplayMode') as SecurityGroupViewMode
-      || SecurityGroupViewMode.Templates;
-
-    this.update();
-
-    this.securityGroupService.onSecurityGroupDeleted.subscribe(securityGroup => {
-      this.customSecurityGroupList = this.customSecurityGroupList
-        .filter(sg => {
-          return sg.id !== securityGroup.id;
-        });
-
-      this.sharedSecurityGroupList = this.sharedSecurityGroupList
-        .filter(sg => {
-          return sg.id !== securityGroup.id;
-        });
-    });
+    this.setViewMode();
+    this.subscribeToSecurityGroupDeletions();
+    this.loadGroups().subscribe();
   }
 
   public get loaded(): boolean {
-    return !!this.predefinedSecurityGroupList
-      && !!this.customSecurityGroupList
-      && !!this.sharedSecurityGroupList;
+    return !!this.visiblePredefinedSecurityGroupList
+      && !!this.visibleCustomSecurityGroupList
+      && !!this.visibleSharedSecurityGroupList;
   }
 
   public get isViewModeTemplates(): boolean {
@@ -76,34 +71,119 @@ export class SgTemplateListComponent implements OnInit {
     return this.viewMode === SecurityGroupViewMode.Shared;
   }
 
+  public get templateSecurityGroupPageHasItems(): boolean {
+    return (
+      !!this.visiblePredefinedSecurityGroupList.length ||
+      !!this.visibleCustomSecurityGroupList.length
+    );
+  }
+
+  public get sharedSecurityGroupPageHasItems(): boolean {
+    return !!this.visibleSharedSecurityGroupList.length;
+  }
+
   public updateFiltersAndFilter(filterData: any): void {
     this.filterData = filterData;
     this.filter();
   }
 
-  public filter(): void {
-    if (this.filterData.viewMode) {
-      this.viewMode = this.filterData.viewMode;
-    }
-  }
-
   public showCreationDialog(): void {
     this.router.navigate(['./create'], {
       queryParamsHandling: 'preserve',
       relativeTo: this.activatedRoute
     });
   }
 
-  private update(): void {
+  private setViewMode(): void {
+    this.viewMode =
+      this.storageService.read('securityGroupDisplayMode') as SecurityGroupViewMode
+      || SecurityGroupViewMode.Templates;
+  }
+
+  private loadGroups(): Observable<void> {
     this.predefinedSecurityGroupList = this.securityGroupService.getPredefinedTemplates();
-    this.securityGroupService.getList().subscribe(securityGroups => {
-      this.customSecurityGroupList = securityGroups.filter(securityGroup => {
-        return securityGroup.type === SecurityGroupType.CustomTemplate;
-      });
+    return this.securityGroupService.getList()
+      .map(securityGroups => {
+        this.customSecurityGroupList = securityGroups.filter(securityGroup => {
+          return securityGroup.type === SecurityGroupType.CustomTemplate;
+        });
 
-      this.sharedSecurityGroupList = securityGroups.filter(securityGroup => {
-        return securityGroup.type === SecurityGroupType.Shared;
-      });
+        this.sharedSecurityGroupList = securityGroups.filter(securityGroup => {
+          return securityGroup.type === SecurityGroupType.Shared;
+        });
+      })
+      .map(() => this.filter());
+  }
+
+  private filter(): void {
+    if (this.filterData) {
+      if (this.filterData.viewMode) {
+        this.viewMode = this.filterData.viewMode;
+      }
+
+      this.query = this.filterData.query;
+    }
+
+    this.filterPredefinedSecurityGroups();
+    this.filterCustomSecurityGroups();
+    this.filterSharedSecurityGroups()
+  }
+
+  private filterPredefinedSecurityGroups(): void {
+    if (this.predefinedSecurityGroupList) {
+      this.visiblePredefinedSecurityGroupList = this.predefinedSecurityGroupList
+        .filter(securityGroup => {
+          return this.doesSecurityGroupIncludeQuery(securityGroup);
+        });
+    }
+  }
+
+  private filterCustomSecurityGroups(): void {
+    if (this.customSecurityGroupList) {
+      this.visibleCustomSecurityGroupList = this.customSecurityGroupList
+        .filter(securityGroup => {
+          return this.doesSecurityGroupIncludeQuery(securityGroup);
+        });
+    }
+  }
+
+  private filterSharedSecurityGroups(): void {
+    if (this.sharedSecurityGroupList) {
+      this.visibleSharedSecurityGroupList = this.sharedSecurityGroupList
+        .filter(securityGroup => {
+          return this.doesSecurityGroupIncludeQuery(securityGroup);
+        });
+    }
+  }
+
+  private doesSecurityGroupIncludeQuery(securityGroup: SecurityGroup): boolean {
+    if (!this.query) {
+      return true;
+    }
+
+    const nameIncludesQuery = securityGroup.name
+      .toLowerCase()
+      .includes(this.query.toLowerCase());
+
+    const descriptionIncludesQuery = securityGroup.description &&
+      securityGroup.description
+        .toLowerCase()
+        .includes(this.query.toLowerCase());
+
+    return nameIncludesQuery || descriptionIncludesQuery;
+  }
+
+  private subscribeToSecurityGroupDeletions(): void {
+    this.securityGroupService.onSecurityGroupDeleted.subscribe(securityGroup => {
+      this.customSecurityGroupList = this.customSecurityGroupList
+        .filter(sg => {
+          return sg.id !== securityGroup.id;
+        });
+
+      this.sharedSecurityGroupList = this.sharedSecurityGroupList
+        .filter(sg => {
+          return sg.id !== securityGroup.id;
+        });
     });
   }
 }

src/app/shared/shared.module.ts

@@ -111,8 +111,6 @@ import { OsTypeService } from './services/os-type.service';
 import { ResourceLimitService } from './services/resource-limit.service';
 import { ResourceUsageService } from './services/resource-usage.service';
 import { RouterUtilsService } from './services/router-utils.service';
-import { ServiceOfferingFilterService } from './services/service-offering-filter.service';
-import { SecurityGroupService } from './services/security-group.service';
 import { ServiceOfferingService } from './services/service-offering.service';
 import { SessionStorageService } from './services/session-storage.service';
 import { SnapshotService } from './services/snapshot.service';
@@ -132,6 +130,7 @@ import { UserService } from './services/user.service';
 import { VolumeOfferingService } from './services/volume-offering.service';
 import { VolumeService } from './services/volume.service';
 import { ZoneService } from './services/zone.service';
+import { SecurityGroupService } from '../security-group/services/security-group.service';
 
 
 @NgModule({