member_webapp/@overflow/discovery/component/discovery-infra-tree.component.html

<of-error-message [error]="error$ | async" [closable]="false"></of-error-message>
<of-block-progressbar [target]="content" [pending]="pending$ | async"></of-block-progressbar>

<p-panel #content [showHeader]="false" class="block-panel">

    <p-messages [(value)]="msgs"></p-messages>

    <p-tree [value]="zoneNode" layout="vertical">
        <!-- ZONE node template -->
        <ng-template let-node pTemplate="ZONE">
            <!-- 이미 저장된 Infra인 Node-->
            <div *ngIf="node.data.date">
                <p-card>
                    <div class="ui-discovery-new">NEW</div>
                    <div class="ui-discovery-title">{{node.label}}</div>
                    <div class="ui-discovery-date">{{node.data.date | date: 'yy/MM/dd'}}</div>
                </p-card>
                <!--p-toggleButton [disabled]="node.data.target" 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>
        </ng-template>

        <!-- HOST node template -->
        <ng-template let-node pTemplate="HOST">
            <!-- 이미 저장된 Infra인 Node-->
            <div *ngIf="node.data.date">
                <p-card class="ui-discovery-selected">
                    <div class="ui-discovery-title">{{node.label}}</div>
                    <div class="ui-discovery-date">{{node.data.date | date: 'yy/MM/dd'}}</div>
                </p-card>
                <!--p-toggleButton [style]="checkHighlight(node.label, 0) ? {'width':'200px'} : {'width':'200px','opacity':'0.2'}" [disabled]="node.data.target"
                    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>

            <!-- 새로 Discovery된 Host -->
            <div *ngIf="!node.data.date" @discoveryResultAnim>
                <p-card>
                    <div class="ui-discovery-new">NEW</div>
                    <div class="ui-discovery-title">{{node.label}}</div>
                    <div class="ui-discovery-date">{{node.data.date | date: 'yy/MM/dd'}}</div>
                </p-card>
                <!--p-toggleButton [style]="checkHighlight(node.label, 0) ? {'width':'200px'} : {'width':'200px','opacity':'0.2'}" onLabel="{{node.label}}"
                    offLabel="{{node.label}}" onIcon="fa-check" offIcon="fa-square" [style]="{'width':'200px'}" (onChange)="onTargetSelect($event, node)"></p-toggleButton> New!!-->
            </div>
        </ng-template>

        <!-- SERVICE node template -->
        <ng-template let-node pTemplate="SERVICE">
            <!-- 이미 저장된 Infra인 Node-->
            <div *ngIf="node.data.date">
                <p-card class="ui-discovery-disable">
                    <div class="ui-discovery-title">{{node.label}}</div>
                    <div class="ui-discovery-date">{{node.data.date | date: 'yy/MM/dd'}}</div>
                </p-card>
                <!--p-toggleButton [style]="checkHighlight(node.label, 0) ? {'width':'200px'} : {'width':'200px','opacity':'0.2'}" [disabled]="node.data.target"
                    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>

            <!-- 새로 Discovery된 Service -->
            <div *ngIf="!node.data.date" @discoveryResultAnim>
                <p-card>
                    <div class="ui-discovery-new">NEW</div>
                    <div class="ui-discovery-title">{{node.label}}</div>
                    <div class="ui-discovery-date">{{node.data.date | date: 'yy/MM/dd'}}</div>
                </p-card>
                <!--p-toggleButton [style]="checkHighlight(node.label, 0) ? {'width':'200px'} : {'width':'200px','opacity':'0.2'}" onLabel="{{node.label}}"
                    offLabel="{{node.label}}" onIcon="fa-check" offIcon="fa-square" [style]="{'width':'200px'}" (onChange)="onTargetSelect($event, node)"></p-toggleButton> New!! -->
            </div>
        </ng-template>
    </p-tree>

    <button class="ui-button-width-fit ui-float-right ui-top-space-10" [disabled]="selectedItems.length === 0" type="button"
        label="Save" icon="ui-icon-close" pButton (click)="saveTargets()"></button>

</p-panel>


<p-dialog header="Title" [(visible)]="targetSaved" [modal]="true" [responsive]="true" [width]="600" [minWidth]="200" [minY]="70"
    [closeOnEscape]="false">
    <span>Target 지정이 완료되었습니다. 이어서 Sensor를 등록하시면 좋겠다능</span>
    <p-footer>
        <button type="button" pButton label="메인으로"></button>
        <button type="button" pButton label="Target으로"></button>
        <button type="button" pButton label="InfraMap으로"></button>
    </p-footer>
</p-dialog>