Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

update monitor detail table ui layout #1352

Merged
merged 4 commits into from
Nov 23, 2023
Merged

update monitor detail table ui layout #1352

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
09540ab
update monitor detail table ui layout
tomsun28 Nov 23, 2023
53f5ab2
update monitor detail table ui layout
tomsun28 Nov 23, 2023
a71e0a1
update monitor detail table ui layout
tomsun28 Nov 23, 2023
d100d2a
Merge branch 'master' into detail-ui
tomsun28 Nov 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 11 additions & 9 deletions web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
18 changes: 15 additions & 3 deletions web-app/src/app/routes/monitor/monitor-data-table/monitor-data-table.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
259 changes: 125 additions & 134 deletions web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</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>
<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-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>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion web-app/src/assets/i18n/en-US.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion web-app/src/assets/i18n/zh-CN.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": "采集时间",
Expand Down
2 changes: 1 addition & 1 deletion web-app/src/assets/i18n/zh-TW.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": "采集時間",
Expand Down
Loading