hertzbeat/web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.html

<nz-divider></nz-divider>
<nz-breadcrumb>
  <nz-breadcrumb-item>
    <a [routerLink]="['/']">
      <i nz-icon nzType="home"></i>
      <span>仪表盘</span>
    </a>
  </nz-breadcrumb-item>
  <nz-breadcrumb-item>
    <a [routerLink]="['/monitors']" [queryParams]="{app: app ? app : ''}">
      <i nz-icon nzType="monitor"></i>
      <span>监控列表</span>
    </a>
  </nz-breadcrumb-item>
  <nz-breadcrumb-item>
    <i nz-icon nzType="pie-chart"></i>
    <span>{{'monitor.app.' + app | i18n}} 监控详情</span>
  </nz-breadcrumb-item>
</nz-breadcrumb>
<nz-divider></nz-divider>

<nz-layout>
  <nz-sider nzWidth="19%" nzTheme="light">
    <nz-card nzHoverable style="width:100%;height:100%" [nzBordered]="true" [nzTitle]="monitor_basic_card_title" >
      <div nz-row nzGutter="16">
        <div nz-col nzSpan="8"><p style="text-align: right">ID</p></div>
        <div nz-col nzSpan="16"><p style="text-align: left">{{monitorId}}</p></div>
      </div>
      <div nz-row nzGutter="16">
        <div nz-col nzSpan="8"><p style="text-align: right">名称</p></div>
        <div nz-col nzSpan="16"><p style="text-align: left">{{monitor?.name}}</p></div>
      </div>
      <div nz-row nzGutter="16">
        <div nz-col nzSpan="8"><p style="text-align: right">HOST</p></div>
        <div nz-col nzSpan="16"><p style="text-align: left">{{monitor?.host}}</p></div>
      </div>
      <div nz-row nzGutter="16">
        <div nz-col nzSpan="8"><p style="text-align: right">端口</p></div>
        <div nz-col nzSpan="16"><p style="text-align: left">{{port}}</p></div>
      </div>
      <div nz-row nzGutter="16">
        <div nz-col nzSpan="8"><p style="text-align: right">描述</p></div>
        <div nz-col nzSpan="16"><p style="text-align: left">{{monitor?.description}}</p></div>
      </div>
      <div nz-row nzGutter="16">
        <div nz-col nzSpan="8"><p style="text-align: right">状态</p></div>
        <div nz-col nzSpan="16">
          <nz-tag *ngIf="monitor?.status == 0" nzColor="default">
            <i nz-icon nzType="robot" nzTheme="outline"></i>
            <span>未监控</span>
          </nz-tag>
          <nz-tag *ngIf="monitor?.status == 1" nzColor="success">
            <i nz-icon nzType="smile" nzTheme="outline"></i>
            <span>正常监控</span>
          </nz-tag>
          <nz-tag *ngIf="monitor?.status == 2" nzColor="warning">
            <i nz-icon nzType="meh" nzTheme="outline"></i>
            <span>监控不可用</span>
          </nz-tag>
          <nz-tag *ngIf="monitor?.status == 3" nzColor="error">
            <i nz-icon nzType="frown" nzTheme="outline"></i>
            <span>监控不可达</span>
          </nz-tag>
          <nz-tag *ngIf="monitor?.status == 4" nzColor="default">
            <i nz-icon nzType="sync"></i>
            <span>监控已挂起</span>
          </nz-tag>
        </div>
      </div>
      <div nz-row nzGutter="16">
        <div nz-col nzSpan="8"><p style="text-align: right">采集间隔</p></div>
        <div nz-col nzSpan="16"><p style="text-align: left">{{monitor?.intervals}}s</p></div>
      </div>
      <div nz-row nzGutter="16">
        <div nz-col nzSpan="8"><p style="text-align: right">创建时间</p></div>
        <div nz-col nzSpan="16"><p style="text-align: left">{{monitor?.gmtCreate}}</p></div>
      </div>
      <div nz-row nzGutter="16">
        <div nz-col nzSpan="8"><p style="text-align: right">最近更新时间</p></div>
        <div nz-col nzSpan="16"><p style="text-align: left">{{monitor?.gmtUpdate}}</p></div>
      </div>
    </nz-card>
  </nz-sider>
  <nz-layout>
    <nz-content>
      <nz-tabset nzType="card">
        <nz-tab [nzTitle]="titleTemplate">
          <ng-template #titleTemplate>
            <i nz-icon nzType="pic-right" style="margin-left: 10px"></i>
            监控数据报告详情
          </ng-template>
          <div style="display: flex;justify-content:flex-start;flex-wrap: wrap;">
            <div *ngFor="let metric of metrics; let i = index">
              <app-monitor-data-chart [metrics]="metric" [monitorId]="monitorId"></app-monitor-data-chart>
            </div>
          </div>
        </nz-tab>
      </nz-tabset>
    </nz-content>
  </nz-layout>
</nz-layout>

<ng-template #monitor_basic_card_title>
  <p style="font-size: small; text-align: left; margin-bottom: 3px; color: #0c0c0c">监控基本属性</p>
</ng-template>