member_webapp/src/packages/infra/component/map/map.component.html

<div class="ui-g">
  <h1>Map</h1>
  <p-dialog header="Discovery" [width]="800" [(visible)]="display">
      <of-discovery-setting (close)="closeDialog()"></of-discovery-setting>
  </p-dialog>
  <div class="ui-g-12 ui-g-nopad">
    <div class="ui-g">
      <div class="ui-g-6 ui-g-nopad" style="padding-bottom:10px;">
        <button pButton type="button" class="ui-button-large" icon="ui-icon-play-arrow" label="Discovery" style="width:auto" (click)="showDialog()"></button>
      </div>
      <div class="ui-g-6 ui-g-nopad ui-rtl" dir="rtl">
        <button pButton type="button" class="ui-button-secondary" label="Expand all" style="width:auto; margin-top: 16px;" (click)="expandAll()"></button>
        <button pButton type="button" class="ui-button-secondary" label="Collapse all" style="width:auto;" (click)="collapseAll()"></button>
      </div>
    </div>
  </div>
  <div class="ui-g-12 ui-g-nopad">
    <p-tree [value]="infraTree" selectionMode="single" [(selection)]="selectedTree" ></p-tree>
  </div>
</div>


























<!-- <div fxLayoutAlign="end" [style.margin]="'10px 10px'">
  <form class="form">
    <mat-form-field class="full-width">
      <input matInput placeholder="Search" [(ngModel)]="searchWord" (ngModelChange)="handleSearch($event)" [ngModelOptions]="{standalone: true}">
      <mat-icon matSuffix>search</mat-icon>
    </mat-form-field>
  </form>
</div>
<div fxLayoutAlign="end" [style.margin]="'10px 10px'">
  ** probe가 설치된 host와 그 probe가 가장 상위에 나와야 함 **
  <div class="box up"></div>Up
  <div class="box down"></div>Down
  <div class="box warn"></div>Warn
  <div class="box error"></div>Error
</div>

<div *ngIf="loading" fxLayoutAlign="center">
  <mat-spinner></mat-spinner>
</div>
<div *ngIf="!loading" class="search-result" infinite-scroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50" (scrolled)="onScroll()" [scrollWindow]="false">
  <div class="infra-list mat-elevation-z4 " *ngFor="let infra of hostDataList">
    <mat-toolbar>
      <mat-toolbar-row>
        <span matTooltip="showHostInfo(infra)">IP : {{infra.host.ip}}</span>
        <span class="pull-right"></span>
        <span style="margin-right: 20px">
        </span>
        <button mat-raised-button color="primary" fxLayoutAlign="end" (click)="addSensor(infra)">Add Sensor</button>
      </mat-toolbar-row>
    </mat-toolbar>

    <mat-card-content *ngFor="let service of infra.services">
      <mat-grid-list cols="6" rowHeight="9:1">
        <mat-grid-tile [rowspan]="2"  style="background-color: lightcoral">
          {{service.vendor.name}}
        </mat-grid-tile>
        <mat-grid-tile [colspan]="3" style="background-color: lightblue">
          <div class="grid-left-align">
            Port : {{service.port}} | {{service.portType}} {{service.tlsType ? '| TLS' : ''}}
          </div>
        </mat-grid-tile>
        <mat-grid-tile [rowspan]="2" style="background-color: lightgray">
          <span class="pull-right"></span>
          <button mat-button fxLayoutAlign="end" (click)="addSensor(infra)">Add Sensor</button>
        </mat-grid-tile>
        <mat-grid-tile [colspan]="3" style="background-color: lightgreen">
          <div class="grid-left-align">
          </div>
        </mat-grid-tile>
      </mat-grid-list>
    </mat-card-content>
  </div>
</div> -->