mirror of
https://github.com/dromara/hertzbeat.git
synced 2026-09-17 09:40:58 +00:00
update monitor detail table ui layout (#1352)
This commit is contained in:
tomsun28
GitHub
+11
-9
@@ -1,9 +1,11 @@
|
||||
<div
|
||||
echarts
|
||||
[options]="eChartOption"
|
||||
theme="default"
|
||||
[autoResize]="true"
|
||||
[loading]="loading"
|
||||
(chartInit)="onChartInit($event)"
|
||||
style="width: 510px; height: 400px; margin-left: 20px"
|
||||
></div>
|
||||
<nz-card style="height: 100%; margin-left: 10px" nzHoverable [nzBordered]="true">
|
||||
<div
|
||||
echarts
|
||||
[options]="eChartOption"
|
||||
theme="default"
|
||||
[autoResize]="true"
|
||||
[loading]="loading"
|
||||
(chartInit)="onChartInit($event)"
|
||||
style="width: 100%; height: 500px"
|
||||
></div>
|
||||
</nz-card>
|
||||
|
||||
+15
-3
@@ -1,4 +1,10 @@
|
||||
<nz-card *ngIf="isTable" nzHoverable style="height: auto; margin-left: 14px" [nzBordered]="true" [nzTitle]="monitor_metrics_card_title">
|
||||
<nz-card
|
||||
*ngIf="isTable"
|
||||
nzHoverable
|
||||
style="height: 100%; margin-left: 10px; overflow: scroll"
|
||||
[nzBordered]="true"
|
||||
[nzTitle]="monitor_metrics_card_title"
|
||||
>
|
||||
<nz-table #smallTable nzSize="small" nzNoResult="No Metrics Data" nzFrontPagination="false" [nzData]="valueRows">
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -19,7 +25,13 @@
|
||||
</nz-table>
|
||||
</nz-card>
|
||||
|
||||
<nz-card *ngIf="!isTable" nzHoverable style="height: auto; margin-left: 14px" [nzBordered]="true" [nzTitle]="monitor_metrics_card_title">
|
||||
<nz-card
|
||||
*ngIf="!isTable"
|
||||
nzHoverable
|
||||
style="height: 100%; margin-left: 10px; overflow: scroll"
|
||||
[nzBordered]="true"
|
||||
[nzTitle]="monitor_metrics_card_title"
|
||||
>
|
||||
<nz-table #smallTable nzSize="small" nzNoResult="No Metrics Data" nzFrontPagination="false" [nzData]="valueRows">
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -50,7 +62,7 @@
|
||||
<a nz-popover [nzPopoverContent]="('monitors.collect.time.tip' | i18n) + ' ' + (time | _date : 'yyyy-MM-dd HH:mm:ss')">
|
||||
<i nz-icon nzType="field-time" nzTheme="outline"></i
|
||||
></a>
|
||||
<i style="font-size: 0.3px; font-weight: normal; color: rgba(112, 112, 112, 0.89)">
|
||||
<i style="font-size: 13px; font-weight: normal; color: rgba(112, 112, 112, 0.89)">
|
||||
{{ 'monitors.collect.time' | i18n }}:{{ time | _date : 'HH:mm:ss' }}
|
||||
</i>
|
||||
</div>
|
||||
|
||||
@@ -31,130 +31,132 @@
|
||||
<nz-divider></nz-divider>
|
||||
|
||||
<nz-layout>
|
||||
<nz-sider *ngIf="showBasic" class="mobile-hide" nzWidth="19%" nzTheme="light">
|
||||
<nz-card
|
||||
style="width: 100%; height: 100%"
|
||||
[nzBordered]="true"
|
||||
[nzTitle]="monitor_basic_card_title"
|
||||
[nzExtra]="monitor_basic_card_extra"
|
||||
>
|
||||
<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">{{ 'monitors.detail.name' | i18n }}</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">{{ 'monitors.detail.port' | i18n }}</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">{{ 'monitors.detail.description' | i18n }}</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">{{ 'monitors.detail.status' | i18n }}</p></div
|
||||
>
|
||||
<div nz-col nzSpan="16">
|
||||
<nz-tag *ngIf="monitor.status == 0" nzColor="default">
|
||||
<i nz-icon nzType="meh" nzTheme="outline"></i>
|
||||
<span>{{ 'monitor.status.un-manage' | i18n }}</span>
|
||||
</nz-tag>
|
||||
<nz-tag *ngIf="monitor.status == 1" nzColor="success">
|
||||
<i nz-icon nzType="smile" nzTheme="outline"></i>
|
||||
<span>{{ 'monitor.status.available' | i18n }}</span>
|
||||
</nz-tag>
|
||||
<nz-tag *ngIf="monitor.status == 2" nzColor="error">
|
||||
<i nz-icon nzType="frown" nzTheme="outline"></i>
|
||||
<span>{{ 'monitor.status.unavailable' | i18n }}</span>
|
||||
</nz-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div nz-row nzGutter="16">
|
||||
<div nz-col nzSpan="8"
|
||||
><p style="text-align: right">{{ 'monitor.intervals' | i18n }}</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">{{ 'common.new-time' | i18n }}</p></div
|
||||
>
|
||||
<div nz-col nzSpan="16"
|
||||
><p style="text-align: left">{{ monitor.gmtCreate | date : 'YYYY-MM-dd HH:mm:ss' }}</p></div
|
||||
>
|
||||
</div>
|
||||
<div nz-row nzGutter="16">
|
||||
<div nz-col nzSpan="8"
|
||||
><p style="text-align: right">{{ 'common.edit-time' | i18n }}</p></div
|
||||
>
|
||||
<div nz-col nzSpan="16"
|
||||
><p style="text-align: left">{{ monitor.gmtUpdate | date : 'YYYY-MM-dd HH:mm:ss' }}</p></div
|
||||
>
|
||||
</div>
|
||||
</nz-card>
|
||||
</nz-sider>
|
||||
<nz-layout>
|
||||
<nz-content>
|
||||
<nz-spin [nzSpinning]="isSpinning" nzTip="Loading..." nzSize="large">
|
||||
<nz-tabset nzType="card" [nzTabBarExtraContent]="tab_extra_template">
|
||||
<nz-tab [nzTitle]="titleTemplate" (nzClick)="loadRealTimeMetric()">
|
||||
<ng-template #titleTemplate>
|
||||
<i nz-icon nzType="pic-right" style="margin-left: 10px"></i>
|
||||
{{ 'monitors.detail.realtime' | i18n }}
|
||||
</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-table [metrics]="metric" [monitorId]="monitorId" [app]="app"></app-monitor-data-table>
|
||||
</div>
|
||||
<nz-content>
|
||||
<nz-spin [nzSpinning]="isSpinning" nzTip="Loading..." nzSize="large">
|
||||
<nz-tabset nzType="card" [nzTabBarExtraContent]="tab_extra_template">
|
||||
<nz-tab [nzTitle]="titleTemplate" (nzClick)="loadRealTimeMetric()">
|
||||
<ng-template #titleTemplate>
|
||||
<i nz-icon nzType="pic-right" style="margin-left: 10px"></i>
|
||||
{{ 'monitors.detail.realtime' | i18n }}
|
||||
</ng-template>
|
||||
<div style="display: flex; justify-content: flex-start; flex-wrap: wrap">
|
||||
<div style="width: 50%; height: 400px; margin-bottom: 6px">
|
||||
<nz-card
|
||||
style="height: 100%; margin-left: 10px; overflow: scroll"
|
||||
[nzBordered]="true"
|
||||
[nzTitle]="monitor_basic_card_title"
|
||||
[nzExtra]="monitor_basic_card_extra"
|
||||
>
|
||||
<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">{{ 'monitors.detail.name' | i18n }}</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">{{ 'monitors.detail.port' | i18n }}</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">{{ 'monitors.detail.description' | i18n }}</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">{{ 'monitors.detail.status' | i18n }}</p></div
|
||||
>
|
||||
<div nz-col nzSpan="16">
|
||||
<nz-tag *ngIf="monitor.status == 0" nzColor="default">
|
||||
<i nz-icon nzType="meh" nzTheme="outline"></i>
|
||||
<span>{{ 'monitor.status.un-manage' | i18n }}</span>
|
||||
</nz-tag>
|
||||
<nz-tag *ngIf="monitor.status == 1" nzColor="success">
|
||||
<i nz-icon nzType="smile" nzTheme="outline"></i>
|
||||
<span>{{ 'monitor.status.available' | i18n }}</span>
|
||||
</nz-tag>
|
||||
<nz-tag *ngIf="monitor.status == 2" nzColor="error">
|
||||
<i nz-icon nzType="frown" nzTheme="outline"></i>
|
||||
<span>{{ 'monitor.status.unavailable' | i18n }}</span>
|
||||
</nz-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div nz-row nzGutter="16">
|
||||
<div nz-col nzSpan="8"
|
||||
><p style="text-align: right">{{ 'monitor.intervals' | i18n }}</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">{{ 'common.new-time' | i18n }}</p></div
|
||||
>
|
||||
<div nz-col nzSpan="16"
|
||||
><p style="text-align: left">{{ monitor.gmtCreate | date : 'YYYY-MM-dd HH:mm:ss' }}</p></div
|
||||
>
|
||||
</div>
|
||||
<div nz-row nzGutter="16">
|
||||
<div nz-col nzSpan="8"
|
||||
><p style="text-align: right">{{ 'common.edit-time' | i18n }}</p></div
|
||||
>
|
||||
<div nz-col nzSpan="16"
|
||||
><p style="text-align: left">{{ monitor.gmtUpdate | date : 'YYYY-MM-dd HH:mm:ss' }}</p></div
|
||||
>
|
||||
</div>
|
||||
</nz-card>
|
||||
</div>
|
||||
</nz-tab>
|
||||
<nz-tab [nzTitle]="title2Template" (nzClick)="loadMetricChart()">
|
||||
<ng-template #title2Template>
|
||||
<i nz-icon nzType="line-chart" style="margin-left: 10px"></i>
|
||||
{{ 'monitors.detail.history' | i18n }}
|
||||
</ng-template>
|
||||
<div style="display: flex; justify-content: flex-start; flex-wrap: wrap; overflow-x: scroll">
|
||||
<div *ngFor="let item of chartMetrics; let i = index">
|
||||
<app-monitor-data-chart
|
||||
[app]="app"
|
||||
[metrics]="item.metrics"
|
||||
[metric]="item.metric"
|
||||
[unit]="item.unit"
|
||||
[monitorId]="monitorId"
|
||||
></app-monitor-data-chart>
|
||||
</div>
|
||||
</div>
|
||||
</nz-tab>
|
||||
</nz-tabset>
|
||||
</nz-spin>
|
||||
</nz-content>
|
||||
</nz-layout>
|
||||
<app-monitor-data-table
|
||||
style="width: 50%; height: 400px; margin-bottom: 6px"
|
||||
*ngFor="let metric of metrics; let i = index"
|
||||
[metrics]="metric"
|
||||
[monitorId]="monitorId"
|
||||
[app]="app"
|
||||
></app-monitor-data-table>
|
||||
</div>
|
||||
</nz-tab>
|
||||
<nz-tab [nzTitle]="title2Template" (nzClick)="loadMetricChart()">
|
||||
<ng-template #title2Template>
|
||||
<i nz-icon nzType="line-chart" style="margin-left: 10px"></i>
|
||||
{{ 'monitors.detail.history' | i18n }}
|
||||
</ng-template>
|
||||
<div style="display: flex; justify-content: flex-start; flex-wrap: wrap">
|
||||
<app-monitor-data-chart
|
||||
style="width: 50%; height: 500px; margin-bottom: 6px"
|
||||
*ngFor="let item of chartMetrics; let i = index"
|
||||
[app]="app"
|
||||
[metrics]="item.metrics"
|
||||
[metric]="item.metric"
|
||||
[unit]="item.unit"
|
||||
[monitorId]="monitorId"
|
||||
></app-monitor-data-chart>
|
||||
</div>
|
||||
</nz-tab>
|
||||
</nz-tabset>
|
||||
</nz-spin>
|
||||
</nz-content>
|
||||
</nz-layout>
|
||||
|
||||
<ng-template #monitor_basic_card_title>
|
||||
@@ -167,17 +169,6 @@
|
||||
|
||||
<ng-template #tab_extra_template>
|
||||
<nz-button-group class="mobile-hide">
|
||||
<button
|
||||
*ngIf="!showBasic"
|
||||
style="margin-right: 20px"
|
||||
nz-button
|
||||
nzType="default"
|
||||
(click)="showBasicStatus(true)"
|
||||
nz-tooltip
|
||||
[nzTooltipTitle]="'monitors.detail.show-basic' | i18n"
|
||||
>
|
||||
<i nz-icon nzType="right-circle" nzTheme="outline"></i>
|
||||
</button>
|
||||
<button nz-button nz-dropdown [nzDropdownMenu]="time_menu" nzPlacement="bottomLeft">
|
||||
<span *ngIf="deadline > 0"> {{ 'monitors.detail.auto-refresh' | i18n : { time: countDownTime } }} </span>
|
||||
<span *ngIf="deadline <= 0"> {{ 'monitors.detail.close-refresh' | i18n }} </span>
|
||||
|
||||
@@ -381,7 +381,7 @@
|
||||
"monitors.detail.port": "Port",
|
||||
"monitors.detail.description": "Desc",
|
||||
"monitors.detail.status": "Status",
|
||||
"monitors.detail.basic": "Monitor Basic",
|
||||
"monitors.detail.basic": "Monitoring Basic",
|
||||
"monitors.detail.realtime": "Monitor Real-Time Detail",
|
||||
"monitors.detail.history": "Monitor Historical Chart Detail",
|
||||
"monitors.collect.time": "Collect Time",
|
||||
|
||||
@@ -381,7 +381,7 @@
|
||||
"monitors.detail.port": "端口",
|
||||
"monitors.detail.description": "描述",
|
||||
"monitors.detail.status": "状态",
|
||||
"monitors.detail.basic": "监控基本属性",
|
||||
"monitors.detail.basic": "监控任务信息",
|
||||
"monitors.detail.realtime": "监控实时数据详情",
|
||||
"monitors.detail.history": "监控历史图表详情",
|
||||
"monitors.collect.time": "采集时间",
|
||||
|
||||
@@ -380,7 +380,7 @@
|
||||
"monitors.detail.port": "端口",
|
||||
"monitors.detail.description": "描述",
|
||||
"monitors.detail.status": "狀態",
|
||||
"monitors.detail.basic": "監控基本屬性",
|
||||
"monitors.detail.basic": "監控任務信息",
|
||||
"monitors.detail.realtime": "監控實時數據詳情",
|
||||
"monitors.detail.history": "監控曆史圖表詳情",
|
||||
"monitors.collect.time": "采集時間",
|
||||
|
||||
Reference in New Issue
Block a user