Fixed filter edge by type. Added edge to entity-filer/subtype

Artem Babak
1 parent 91c4affb
Showing 7 changed files with 66 additions and 9 deletions
ui-ngx/src/app/modules/home/components/entity/entity-filter-view.component.ts
ui-ngx/src/app/modules/home/components/entity/entity-filter.component.html
ui-ngx/src/app/modules/home/components/entity/entity-filter.component.ts
ui-ngx/src/app/modules/home/pages/edge/edges-table-config.resolver.ts
ui-ngx/src/app/shared/components/entity/entity-subtype-list.component.ts
ui-ngx/src/app/shared/models/id/public-api.ts
ui-ngx/src/assets/locale/locale.constant-en_US.json
--- a/ui-ngx/src/app/modules/home/components/entity/entity-filter-view.component.ts
View file @cf2da5c
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-filter-view.component.ts
View file @cf2da5c
@@ -14,11 +14,11 @@
 /// limitations under the License.
 ///
-import { Component, forwardRef } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { AliasFilterType, EntityAliasFilter } from '@shared/models/alias.models';
-import { AliasEntityType, EntityType, entityTypeTranslations } from '@shared/models/entity-type.models';
-import { TranslateService } from '@ngx-translate/core';
+import {Component, forwardRef} from '@angular/core';
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
+import {AliasFilterType, EntityAliasFilter} from '@shared/models/alias.models';
+import {AliasEntityType, EntityType, entityTypeTranslations} from '@shared/models/entity-type.models';
+import {TranslateService} from '@ngx-translate/core';
 @Component({
   selector: 'tb-entity-filter-view',
@@ -101,6 +101,17 @@ export class EntityFilterViewComponent implements ControlValueAccessor {
               {deviceType});
           }
           break;
+        case AliasFilterType.edgeType:
+          const edgeType = this.filter.edgeType;
+          prefix = this.filter.edgeNameFilter;
+          if (prefix && prefix.length) {
+            this.filterDisplayValue = this.translate.instant('alias.filter-type-edge-type-and-name-description',
+              {edgeType, prefix});
+          } else {
+            this.filterDisplayValue = this.translate.instant('alias.filter-type-edge-type-description',
+              {edgeType});
+          }
+          break;
         case AliasFilterType.entityViewType:
           const entityView = this.filter.entityViewType;
           prefix = this.filter.entityViewNameFilter;
@@ -166,6 +177,7 @@ export class EntityFilterViewComponent implements ControlValueAccessor {
           break;
         case AliasFilterType.assetSearchQuery:
         case AliasFilterType.deviceSearchQuery:
+        case AliasFilterType.edgeSearchQuery:
         case AliasFilterType.entityViewSearchQuery:
           allEntitiesText = this.translate.instant('alias.all-entities');
           anyRelationText = this.translate.instant('alias.any-relation');
@@ -207,6 +219,16 @@ export class EntityFilterViewComponent implements ControlValueAccessor {
             this.filterDisplayValue = this.translate.instant('alias.filter-type-device-search-query-description',
               translationValues
             );
+          } else if (this.filter.type === AliasFilterType.edgeSearchQuery) {
+            const edgeTypesQuoted = [];
+            this.filter.edgeTypes.forEach((filterEdgeType) => {
+              edgeTypesQuoted.push(`'${filterEdgeType}'`);
+            });
+            const edgeTypesText = edgeTypesQuoted.join(', ');
+            translationValues.edgeTypes = edgeTypesText;
+            this.filterDisplayValue = this.translate.instant('alias.filter-type-edge-search-query-description',
+              translationValues
+            );
           } else if (this.filter.type === AliasFilterType.entityViewSearchQuery) {
             const entityViewTypesQuoted = [];
             this.filter.entityViewTypes.forEach((filterEntityViewType) => {
--- a/ui-ngx/src/app/modules/home/components/entity/entity-filter.component.html
View file @cf2da5c
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-filter.component.html
View file @cf2da5c
@@ -103,6 +103,16 @@
         <input matInput formControlName="entityViewNameFilter">
       </mat-form-field>
     </ng-template>
+    <ng-template [ngSwitchCase]="aliasFilterType.edgeType">
+      <tb-entity-subtype-autocomplete required
+                                      formControlName="edgeType"
+                                      [entityType]="entityType.EDGE">
+      </tb-entity-subtype-autocomplete>
+      <mat-form-field class="mat-block">
+        <mat-label translate>edge.name-starts-with</mat-label>
+        <input matInput formControlName="edgeNameFilter">
+      </mat-form-field>
+    </ng-template>
     <ng-template [ngSwitchCase]="aliasFilterType.relationsQuery">
       <section fxLayout="column" id="relationsQueryFilter">
         <label class="tb-small">{{ 'alias.root-entity' | translate }}</label>
@@ -169,6 +179,7 @@
     </ng-template>
     <ng-template [ngSwitchCase]="entityFilterFormGroup.get('type').value === aliasFilterType.assetSearchQuery ||
                                  entityFilterFormGroup.get('type').value === aliasFilterType.deviceSearchQuery ||
+                                 entityFilterFormGroup.get('type').value === aliasFilterType.edgeSearchQuery ||
                                  entityFilterFormGroup.get('type').value === aliasFilterType.entityViewSearchQuery ?
                                  entityFilterFormGroup.get('type').value : ''">
       <label class="tb-small">{{ 'alias.root-entity' | translate }}</label>
@@ -248,6 +259,14 @@
         formControlName="deviceTypes">
       </tb-entity-subtype-list>
     </ng-template>
+    <ng-template [ngSwitchCase]="aliasFilterType.edgeSearchQuery">
+      <div class="mat-caption tb-required" style="color: rgba(0,0,0,0.57);" translate>edge.edge-types</div>
+      <tb-entity-subtype-list
+        required
+        [entityType]="entityType.EDGE"
+        formControlName="edgeTypes">
+      </tb-entity-subtype-list>
+    </ng-template>
     <ng-template [ngSwitchCase]="aliasFilterType.entityViewSearchQuery">
       <div class="mat-caption tb-required" style="color: rgba(0,0,0,0.57);" translate>entity-view.entity-view-types</div>
       <tb-entity-subtype-list
--- a/ui-ngx/src/app/modules/home/components/entity/entity-filter.component.ts
View file @cf2da5c
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-filter.component.ts
View file @cf2da5c
@@ -141,6 +141,12 @@ export class EntityFilterComponent implements ControlValueAccessor, OnInit {
           deviceNameFilter: [filter ? filter.deviceNameFilter : '', []],
         });
         break;
+      case AliasFilterType.edgeType:
+        this.filterFormGroup = this.fb.group({
+          edgeType: [filter ? filter.edgeType : null, [Validators.required]],
+          edgeNameFilter: [filter ? filter.edgeNameFilter : '', []],
+        });
+        break;
       case AliasFilterType.entityViewType:
         this.filterFormGroup = this.fb.group({
           entityViewType: [filter ? filter.entityViewType : null, [Validators.required]],
@@ -150,6 +156,7 @@ export class EntityFilterComponent implements ControlValueAccessor, OnInit {
       case AliasFilterType.relationsQuery:
       case AliasFilterType.assetSearchQuery:
       case AliasFilterType.deviceSearchQuery:
+      case AliasFilterType.edgeSearchQuery:
       case AliasFilterType.entityViewSearchQuery:
         this.filterFormGroup = this.fb.group({
           rootStateEntity: [filter ? filter.rootStateEntity : false, []],
@@ -176,6 +183,9 @@ export class EntityFilterComponent implements ControlValueAccessor, OnInit {
           } else if (type === AliasFilterType.deviceSearchQuery) {
             this.filterFormGroup.addControl('deviceTypes',
               this.fb.control(filter ? filter.deviceTypes : [], [Validators.required]));
+          } else if (type === AliasFilterType.edgeSearchQuery) {
+            this.filterFormGroup.addControl('edgeTypes',
+              this.fb.control(filter ? filter.edgeTypes : [], [Validators.required]));
           } else if (type === AliasFilterType.entityViewSearchQuery) {
             this.filterFormGroup.addControl('entityViewTypes',
               this.fb.control(filter ? filter.entityViewTypes : [], [Validators.required]));
--- a/ui-ngx/src/app/modules/home/pages/edge/edges-table-config.resolver.ts
View file @cf2da5c
+++ b/ui-ngx/src/app/modules/home/pages/edge/edges-table-config.resolver.ts
View file @cf2da5c
@@ -103,7 +103,8 @@ export class EdgesTableConfigResolver implements Resolve<EntityTableConfig<EdgeI
   resolve(route: ActivatedRouteSnapshot): Observable<EntityTableConfig<EdgeInfo>> {
     const routeParams = route.params;
     this.config.componentsData = {
-      edgeScope: route.data.edgesType
+      edgeScope: route.data.edgesType,
+      edgeType: ''
     };
     this.customerId = routeParams.customerId;
     return this.store.pipe(select(selectAuthUser), take(1)).pipe(
@@ -161,7 +162,7 @@ export class EdgesTableConfigResolver implements Resolve<EntityTableConfig<EdgeI
   configureEntityFunctions(edgeScope: string): void {
     if (edgeScope === 'tenant') {
       this.config.entitiesFetchFunction = pageLink =>
-        this.edgeService.getTenantEdgeInfos(pageLink);
+        this.edgeService.getTenantEdgeInfos(pageLink, this.config.componentsData.edgeType);
       this.config.deleteEntity = id => this.edgeService.deleteEdge(id.id);
     }
     if (edgeScope === 'customer') {
--- a/ui-ngx/src/app/shared/components/entity/entity-subtype-list.component.ts
View file @cf2da5c
+++ b/ui-ngx/src/app/shared/components/entity/entity-subtype-list.component.ts
View file @cf2da5c
@@ -143,9 +143,10 @@ export class EntitySubTypeListComponent implements ControlValueAccessor, OnInit,
         break;
       case EntityType.EDGE:
         this.placeholder = this.required ? this.translate.instant('edge.enter-edge-type')
-          : this.translate.instant('edge.edge-any-edge');
+          : this.translate.instant('edge.any-edge');
         this.secondaryPlaceholder = '+' + this.translate.instant('edge.edge-type');
         this.noSubtypesMathingText = 'edge.no-edge-types-matching';
+        this.subtypeListEmptyText = 'edge.edge-type-list-empty';
         this.broadcastSubscription = this.broadcast.on('edgeSaved', () => {
           this.entitySubtypes = null;
         });
--- a/ui-ngx/src/app/shared/models/id/public-api.ts
View file @cf2da5c
+++ b/ui-ngx/src/app/shared/models/id/public-api.ts
View file @cf2da5c
@@ -33,3 +33,4 @@ export * from './tenant-profile-id';
 export * from './user-id';
 export * from './widget-type-id';
 export * from './widgets-bundle-id';
+export * from './edge-id';
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
View file @cf2da5c
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
View file @cf2da5c
@@ -213,6 +213,7 @@
         "filter-type-entity-view-type-and-name-description": "Entity Views of type '{{entityView}}' and with name starting with '{{prefix}}'",
         "filter-type-edge-type": "Edge type",
         "filter-type-edge-type-description": "Edges of type '{{edgeType}}'",
+        "filter-type-edge-type-and-name-description": "Edges of type '{{edgeType}}' and with name starting with '{{prefix}}'",
         "filter-type-relations-query": "Relations query",
         "filter-type-relations-query-description": "{{entities}} that have {{relationType}} relation {{direction}} {{rootEntity}}",
         "filter-type-asset-search-query": "Asset search query",
@@ -1002,7 +1003,9 @@
       "selected-edges": "{ count, plural, 1 {1 edge} other {# edges} } selected",
       "enter-edge-type": "Enter entity view type",
       "any-edge": "Any edge",
-      "no-edge-types-matching": "No edge types matching '{{entitySubtype}}' were found."
+      "no-edge-types-matching": "No edge types matching '{{entitySubtype}}' were found.",
+      "edge-type-list-empty": "No device types selected.",
+      "edge-types": "Edge types"
     },
     "error": {
         "unable-to-connect": "Unable to connect to the server! Please check your internet connection.",