[webapp,doc] monitor detail support basic panel hide (#619)

[collector] bugfix oracle query error: ORA-01000 happen [webapp,doc] monitor detail support basic panel hide
apache · Feb 6, 2023 · 4214e4f · 4214e4f
1 parent 55f1ecd
commit 4214e4f
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 12 deletions.
diff --git a/home/blog/2023-02-02-monitor-dynamic-tp.md b/home/blog/2023-02-02-monitor-dynamic-tp.md
@@ -125,8 +125,8 @@ management:
 
 路径：菜单 -> 告警阈值 -> 新增阈值  
 
-- 选择配置的指标对象，DynamicTp监控主要是一些线程池相关指标，我们举例对 `运行超时线程数量` `thread_pool` -> `run_timeout_count` 这个指标进行阈值设置， 当线程运行超时数量大于1时发出告警。       
-- 这里我们就配置当此指标`thread_pool` 的 `run_timeout_count>3000` 时发出告警，告警级别为**严重告警**，三次即触发，具体如下图。  
+- 选择配置的指标对象，DynamicTp监控主要是一些线程池相关指标，我们举例对 `运行超时线程数量` `thread_pool_running` -> `run_timeout_count` 这个指标进行阈值设置， 当线程运行超时数量大于1时发出告警。       
+- 这里我们就配置当此指标`thread_pool_running` 的 `run_timeout_count>1` 时发出告警，告警级别为**严重告警**，三次即触发，具体如下图。  
 
 ![hertzbeat](/img/blog/monitor-dynamic-tp-6.png)   
 
@@ -157,7 +157,7 @@ management:
 
 ```
 [HertzBeat告警通知]
-告警目标对象 : dynamic_tp.thread_pool.run_timeout_count
+告警目标对象 : dynamic_tp.thread_pool_running.run_timeout_count
 所属监控ID : 205540620349493
 所属监控名称 : DynamicTp_localhost
 告警级别 : 严重告警
@@ -168,7 +168,7 @@ management:
 ## 小结   
 
 :::tip
-这篇实践文章带我们体验了如何使用 HertzBeat 监控 DynamicTp线程池 指标数据，可以发现将 `监控-告警-通知` 集一体的 HertzBeat 在操作与使用方面更加的便捷，在页面上简单点一点就能把 DynamicTp线程池 纳入监控，再也不需要部署多个组件，写多个有门槛的YML配置文件了。  
+这篇实践文章带我们体验了如何使用 HertzBeat 监控 DynamicTp线程池 指标数据，可以发现集 `监控-告警-通知` 的 HertzBeat 在操作与使用方面更加的便捷，只需页面上简单点一点就能把 DynamicTp线程池 纳入监控并告警通知，再也不需要部署多个组件写YML配置文件那些繁琐操作了。  
 :::
 
 DynamicTp Github: https://github.com/dromara/dynamic-tp           

diff --git a/home/i18n/en/docusaurus-plugin-content-blog/2023-02-02-monitor-dynamic-tp.md b/home/i18n/en/docusaurus-plugin-content-blog/2023-02-02-monitor-dynamic-tp.md
@@ -125,8 +125,8 @@ management:
 
 路径：菜单 -> 告警阈值 -> 新增阈值  
 
-- 选择配置的指标对象，DynamicTp监控主要是一些线程池相关指标，我们举例对 `运行超时线程数量` `thread_pool` -> `run_timeout_count` 这个指标进行阈值设置， 当线程运行超时数量大于1时发出告警。       
-- 这里我们就配置当此指标`thread_pool` 的 `run_timeout_count>3000` 时发出告警，告警级别为**严重告警**，三次即触发，具体如下图。  
+- 选择配置的指标对象，DynamicTp监控主要是一些线程池相关指标，我们举例对 `运行超时线程数量` `thread_pool_running` -> `run_timeout_count` 这个指标进行阈值设置， 当线程运行超时数量大于1时发出告警。       
+- 这里我们就配置当此指标`thread_pool_running` 的 `run_timeout_count>1` 时发出告警，告警级别为**严重告警**，三次即触发，具体如下图。  
 
 ![hertzbeat](/img/blog/monitor-dynamic-tp-6.png)   
 
@@ -157,7 +157,7 @@ management:
 
 ```
 [HertzBeat告警通知]
-告警目标对象 : dynamic_tp.thread_pool.run_timeout_count
+告警目标对象 : dynamic_tp.thread_pool_running.run_timeout_count
 所属监控ID : 205540620349493
 所属监控名称 : DynamicTp_localhost
 告警级别 : 严重告警
@@ -168,7 +168,7 @@ management:
 ## 小结   
 
 :::tip
-这篇实践文章带我们体验了如何使用 HertzBeat 监控 DynamicTp线程池 指标数据，可以发现将 `监控-告警-通知` 集一体的 HertzBeat 在操作与使用方面更加的便捷，在页面上简单点一点就能把 DynamicTp线程池 纳入监控，再也不需要部署多个组件，写多个有门槛的YML配置文件了。  
+这篇实践文章带我们体验了如何使用 HertzBeat 监控 DynamicTp线程池 指标数据，可以发现集 `监控-告警-通知` 的 HertzBeat 在操作与使用方面更加的便捷，只需页面上简单点一点就能把 DynamicTp线程池 纳入监控并告警通知，再也不需要部署多个组件写YML配置文件那些繁琐操作了。  
 :::
 
 DynamicTp Github: https://github.com/dromara/dynamic-tp           

diff --git a/home/static/img/blog/monitor-dynamic-tp-4.png b/home/static/img/blog/monitor-dynamic-tp-4.png
diff --git a/home/static/img/blog/monitor-dynamic-tp-6.png b/home/static/img/blog/monitor-dynamic-tp-6.png
diff --git a/web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.html b/web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.html
@@ -29,8 +29,14 @@
 <nz-divider></nz-divider>
 
 <nz-layout>
-  <nz-sider class="mobile-hide" nzWidth="19%" nzTheme="light">
-    <nz-card nzHoverable style="width: 100%; height: 100%" [nzBordered]="true" [nzTitle]="monitor_basic_card_title">
+  <nz-sider *ngIf="showBasic" class="mobile-hide" nzWidth="19%" nzTheme="light">
+    <nz-card
+      nzHoverable
+      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"
@@ -158,8 +164,23 @@
   <p style="font-size: small; text-align: left; margin-bottom: 3px">{{ 'monitors.detail.basic' | i18n }}</p>
 </ng-template>
 
+<ng-template #monitor_basic_card_extra>
+  <a nz-icon nzType="close-circle" nzTheme="outline" (click)="showBasicStatus(false)"></a>
+</ng-template>
+
 <ng-template #tab_extra_template>
-  <nz-button-group>
+  <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>

diff --git a/web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.ts b/web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.ts
@@ -38,6 +38,7 @@ export class MonitorDetailComponent implements OnInit, OnDestroy {
   countDownTime: number = 0;
   interval$!: any;
   whichTabIndex = 0;
+  showBasic = true;
 
   ngOnInit(): void {
     this.loadRealTimeMetric();
@@ -139,6 +140,10 @@ export class MonitorDetailComponent implements OnInit, OnDestroy {
       );
   }
 
+  showBasicStatus(show: boolean) {
+    this.showBasic = show;
+  }
+
   countDown() {
     if (this.deadline > 0) {
       this.countDownTime = Math.max(0, this.countDownTime - 1);

diff --git a/web-app/src/assets/i18n/en-US.json b/web-app/src/assets/i18n/en-US.json
@@ -229,9 +229,10 @@
   "monitors.detect.tip": "Detect monitor available before apply",
   "monitors.detail.time-series.unavailable": "Unable to provide historical chart, please configure time series database",
   "monitors.detail": "Monitor Detail",
-  "monitors.detail.auto-refresh": "Auto Refresh For {{time}} s",
+  "monitors.detail.auto-refresh": "Auto Refresh After {{time}} s",
   "monitors.detail.config-refresh": "Set Auto Refresh For {{time}} s",
   "monitors.detail.close-refresh": "Close Auto Refresh",
+  "monitors.detail.show-basic": "Show Monitor Basic",
   "monitors.detail.name": "Name",
   "monitors.detail.port": "Port",
   "monitors.detail.description": "Desc",

diff --git a/web-app/src/assets/i18n/zh-CN.json b/web-app/src/assets/i18n/zh-CN.json
@@ -231,6 +231,7 @@
   "monitors.detail.auto-refresh": "自动刷新 {{time}} 秒",
   "monitors.detail.config-refresh": "设置 {{time}} 秒自动刷新",
   "monitors.detail.close-refresh": "关闭自动刷新",
+  "monitors.detail.show-basic": "显示监控基本属性",
   "monitors.detail.name": "名称",
   "monitors.detail.port": "端口",
   "monitors.detail.description": "描述",

diff --git a/web-app/src/assets/i18n/zh-TW.json b/web-app/src/assets/i18n/zh-TW.json
@@ -231,6 +231,7 @@
   "monitors.detail.auto-refresh": "自動刷新 {{time}} 秒",
   "monitors.detail.config-refresh": "設置 {{time}} 秒自動刷新",
   "monitors.detail.close-refresh": "關閉自動刷新",
+  "monitors.detail.show-basic": "顯示監控基本屬性",
   "monitors.detail.name": "名稱",
   "monitors.detail.port": "端口",
   "monitors.detail.description": "描述",