This commit is contained in:
insanity 2018-06-22 12:46:42 +09:00
parent 32b83f52a4
commit 2c24d9dfda
6 changed files with 27 additions and 63 deletions

View File

@ -19,21 +19,14 @@
<ng-template let-node pTemplate="HOST"> <ng-template let-node pTemplate="HOST">
<!-- 이미 저장된 Infra인 Node--> <!-- 이미 저장된 Infra인 Node-->
<div *ngIf="node.data.date"> <div *ngIf="node.data.date">
<p-toggleButton [disabled]="node.data.target" onLabel="{{node.label}}" offLabel="{{node.label}}" onIcon="fa-check" offIcon="fa-square" <p-toggleButton [style]="checkHighlight(node.label, 0) ? {'width':'200px'} : {'width':'200px','opacity':'0.2'}" [disabled]="node.data.target"
[style]="{'width':'200px'}" (onChange)="onTargetSelect($event, node)"></p-toggleButton> {{node.data.date | date: 'yy/MM/dd'}} onLabel="{{node.label}}" offLabel="{{node.label}}" onIcon="fa-check" offIcon="fa-square" (onChange)="onTargetSelect($event, node)"></p-toggleButton> {{node.data.date | date: 'yy/MM/dd'}}
</div> </div>
<!-- 새로 Discovery된 Host --> <!-- 새로 Discovery된 Host -->
<div *ngIf="!node.data.date" @discoveryResultAnim> <div *ngIf="!node.data.date" @discoveryResultAnim>
<div *ngIf="checkHighlight(node.label, 0) else unhighlightHost"> <p-toggleButton [style]="checkHighlight(node.label, 0) ? {'width':'200px'} : {'width':'200px','opacity':'0.2'}" onLabel="{{node.label}}"
<p-toggleButton onLabel="{{node.label}}" offLabel="{{node.label}}" onIcon="fa-check" offIcon="fa-square" [style]="{'width':'200px'}" offLabel="{{node.label}}" onIcon="fa-check" offIcon="fa-square" [style]="{'width':'200px'}" (onChange)="onTargetSelect($event, node)"></p-toggleButton> New!!
(onChange)="onTargetSelect($event, node)"></p-toggleButton> New!!
</div>
<ng-template #unhighlightHost>
<p-toggleButton onLabel="{{node.label}}" offLabel="{{node.label}}" onIcon="fa-check" offIcon="fa-square" [style]="{'width':'200px', 'opacity':'0.2'}"
(onChange)="onTargetSelect($event, node)"></p-toggleButton> New!!
</ng-template>
</div> </div>
</ng-template> </ng-template>
@ -41,21 +34,15 @@
<ng-template let-node pTemplate="SERVICE"> <ng-template let-node pTemplate="SERVICE">
<!-- 이미 저장된 Infra인 Node--> <!-- 이미 저장된 Infra인 Node-->
<div *ngIf="node.data.date"> <div *ngIf="node.data.date">
<p-toggleButton [disabled]="node.data.target" onLabel="{{node.label}}" offLabel="{{node.label}}" onIcon="fa-check" offIcon="fa-square" <p-toggleButton [style]="checkHighlight(node.label, 0) ? {'width':'200px'} : {'width':'200px','opacity':'0.2'}" [disabled]="node.data.target"
[style]="{'width':'200px'}" (onChange)="onTargetSelect($event, node)"></p-toggleButton> {{node.data.date | date: 'yy/MM/dd'}} onLabel="{{node.label}}" offLabel="{{node.label}}" onIcon="fa-check" offIcon="fa-square" [style]="{'width':'200px'}"
(onChange)="onTargetSelect($event, node)"></p-toggleButton> {{node.data.date | date: 'yy/MM/dd'}}
</div> </div>
<!-- 새로 Discovery된 Service --> <!-- 새로 Discovery된 Service -->
<div *ngIf="!node.data.date" @discoveryResultAnim> <div *ngIf="!node.data.date" @discoveryResultAnim>
<div *ngIf="checkHighlight(node.label, 0) else unhighlightHost"> <p-toggleButton [style]="checkHighlight(node.label, 0) ? {'width':'200px'} : {'width':'200px','opacity':'0.2'}" onLabel="{{node.label}}"
<p-toggleButton onLabel="{{node.label}}" offLabel="{{node.label}}" onIcon="fa-check" offIcon="fa-square" [style]="{'width':'200px'}" offLabel="{{node.label}}" onIcon="fa-check" offIcon="fa-square" [style]="{'width':'200px'}" (onChange)="onTargetSelect($event, node)"></p-toggleButton> New!!
(onChange)="onTargetSelect($event, node)"></p-toggleButton> New!!
</div>
<ng-template #unhighlightHost>
<p-toggleButton onLabel="{{node.label}}" offLabel="{{node.label}}" onIcon="fa-check" offIcon="fa-square" [style]="{'width':'200px', 'opacity':'0.2'}"
(onChange)="onTargetSelect($event, node)"></p-toggleButton> New!!
</ng-template>
</div> </div>
</ng-template> </ng-template>
</p-tree> </p-tree>

View File

@ -338,12 +338,12 @@ export class DiscoveryInfraTreeComponent implements OnChanges {
}); });
} }
checkHighlight(label: string, type: number) { checkHighlight(name: string, type: number) {
let highlight = true; let highlight = true;
if (this.filterWord && (label.toUpperCase().indexOf(this.filterWord.toUpperCase()) < 0)) { if (this.filterWord && (name.toUpperCase().indexOf(this.filterWord.toUpperCase()) < 0)) {
highlight = false; highlight = false;
} }
if (type === 1 && this.filterServices[label] === false) { if (type === 1 && this.filterServices[name] === false) {
highlight = false; highlight = false;
} }
return highlight; return highlight;

View File

@ -15,14 +15,13 @@
<of-discovery-request-summary *ngIf="discoverZone" @discoveryFilterAnim [discoverZone]="discoverZone"></of-discovery-request-summary> <of-discovery-request-summary *ngIf="discoverZone" @discoveryFilterAnim [discoverZone]="discoverZone"></of-discovery-request-summary>
</p-accordionTab> </p-accordionTab>
<p-accordionTab header="Filter" [selected]="startDate !== null" [disabled]="startDate === null"> <p-accordionTab header="Filter" [selected]="startDate !== null" [disabled]="startDate === null">
<of-discovery-search-filter #filter (search)="filterWord=$event" (serviceSelect)="filterServices=$event"></of-discovery-search-filter> <of-discovery-search-filter (search)="filterWord=$event" (serviceSelect)="filterServices=$event"></of-discovery-search-filter>
</p-accordionTab> </p-accordionTab>
</p-accordion> </p-accordion>
</div> </div>
<div class="ui-g-12 ui-md-9"> <div class="ui-g-12 ui-md-9">
<of-discovery-infra-tree #infraTree *ngIf="selectedProbe" [probeHost]="selectedProbe" [filterWord]="filterWord" [filterServices]="filterServices"></of-discovery-infra-tree> <of-discovery-infra-tree #infraTree *ngIf="selectedProbe else info" [probeHost]="selectedProbe" [filterWord]="filterWord"></of-discovery-infra-tree>
<!-- <of-discovery-result *ngIf="requested else info" [probeHost]="selectedProbe" [filterWord]="filterWord" [filterServices]="filterServices"></of-discovery-result> -->
</div> </div>
</div> </div>

View File

@ -37,7 +37,6 @@ export class DiscoveryComponent implements OnInit, OnDestroy {
filterServices: Service[]; filterServices: Service[];
@ViewChild('infraTree') infraTree: DiscoveryInfraTreeComponent; @ViewChild('infraTree') infraTree: DiscoveryInfraTreeComponent;
@ViewChild('filter') filter: SearchFilterComponent;
constructor( constructor(
private discoveryService: DiscoveryService, private discoveryService: DiscoveryService,
@ -104,7 +103,6 @@ export class DiscoveryComponent implements OnInit, OnDestroy {
case 'DiscoveryService.discoveredService': { case 'DiscoveryService.discoveredService': {
const service = discoveryNotify.params as Service; const service = discoveryNotify.params as Service;
this.infraTree.addService(service); this.infraTree.addService(service);
this.filter.addService(service);
break; break;
} }
default: { default: {

View File

@ -1,15 +1,12 @@
<div class="ui-g"> <div class="ui-g">
<input type="text" pInputText placeholder="Search..." [(ngModel)]="filterWord" (keyup)="onSearch($event)"> <input type="text" pInputText placeholder="Search..." [(ngModel)]="filterWord" (keyup)="onSearch($event)">
<div class="ui-g"> <!-- <div class="ui-g">
<div *ngFor="let service of services"> <div *ngFor="let service of services">
<p-toggleButton offLabel="{{service.key}}" onLabel="{{service.key}}" [style]="{'width':'100px'}" (onChange)="onServiceFilter($event, service)" <p-toggleButton offLabel="{{service.key}}" onLabel="{{service.key}}" [style]="{'width':'100px'}" (onChange)="onServiceFilter($event, service)"
[(ngModel)]="filterServices[service.key]"></p-toggleButton> [(ngModel)]="filterServices[service.key]"></p-toggleButton>
<!-- <p-checkbox [(ngModel)]="filterServices" label="{{service.serviceName}}" value="{{service.serviceName}}"></p-checkbox> -->
</div> </div>
</div> </div> -->
</div> </div>

View File

@ -16,10 +16,8 @@ export class SearchFilterComponent implements OnInit {
services: Service[] = []; services: Service[] = [];
filterWord: string; filterWord: string;
filterServices = new Map<string, boolean>();
@Output() search = new EventEmitter<string>(); @Output() search = new EventEmitter<string>();
@Output() serviceSelect = new EventEmitter<Map<string, boolean>>();
constructor( constructor(
) { ) {
@ -36,33 +34,18 @@ export class SearchFilterComponent implements OnInit {
} }
addService(service: Service) { addService(service: Service) {
if (service.key.indexOf('Not Supported Service') >= 0) { // let exist = false;
const tempName = service.key.split('Perhaps ')[1].split('[')[0]; // this.services.forEach(value => {
service.key = '*' + tempName; // if (value.key === service.key) {
} // exist = true;
let exist = false; // return;
this.services.forEach(value => { // }
if (value.key === service.key) { // });
exist = true; // if (!exist) {
return; // this.services.push(service);
} // this.filterServices[service.key] = true;
});
if (!exist) {
this.services.push(service);
this.filterServices[service.key] = true;
}
this.serviceSelect.emit(this.filterServices);
}
onServiceFilter(e, service: Service) {
// if (e.checked) {
// this.filterServices.push(service);
// } else {
// const index = this.filterServices.indexOf(service);
// this.filterServices.splice(index, 1);
// } // }
// this.serviceSelect.emit(this.filterServices);
this.serviceSelect.emit(this.filterServices);
} }
} }