From 8b1bb9f733a0300f13c1f7a3f1e890b4cbd5c3d4 Mon Sep 17 00:00:00 2001 From: tomsun28 Date: Thu, 7 Sep 2023 14:22:48 +0800 Subject: [PATCH] add hertzbeat about msg card (#1229) --- README.md | 2 +- README_CN.md | 2 +- .../src/app/layout/basic/basic.component.ts | 2 +- .../basic/widgets/clear-storage.component.ts | 2 +- .../basic/widgets/fullscreen.component.ts | 2 +- .../layout/basic/widgets/i18n.component.ts | 4 +- .../layout/basic/widgets/user.component.ts | 106 ++++++++++++++++-- web-app/src/app/layout/layout.module.ts | 8 +- .../layout/passport/passport.component.less | 2 +- web-app/src/assets/i18n/en-US.json | 17 ++- web-app/src/assets/i18n/zh-CN.json | 17 ++- web-app/src/assets/i18n/zh-TW.json | 17 ++- 12 files changed, 160 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index 6bfd9d41d4b..6e7d6fb7e69 100644 --- a/README.md +++ b/README.md @@ -43,7 +43,7 @@ * Provides flexible alarm threshold rules and timely notifications delivered via `Discord` `Slack` `Telegram` `Email` `Dingtalk` `WeChat` `FeiShu` `Webhook` `SMS` `ServerChan`. -> HertzBeat's powerful customization, multi-type support, high performance, easy expansion, and low coupling, aims to help developers and teams quickly build their own monitoring system. +> HertzBeat's powerful customization, multi-type support, high performance, easy expansion, and low coupling, aims to help users quickly build their own monitoring system. > We also provide **[SaaS Monitoring Cloud](https://console.tancloud.cn)**, users no longer need to deploy a cumbersome monitoring system to monitor their resources. **[Get started online for free](https://console.tancloud.cn)**. ---- diff --git a/README_CN.md b/README_CN.md index b6a8998868b..cb7268d6c25 100644 --- a/README_CN.md +++ b/README_CN.md @@ -43,7 +43,7 @@ - 自由的告警阈值规则，`邮件` `Discord` `Slack` `Telegram` `钉钉` `微信` `飞书` `短信` `Webhook` `Server酱` 等方式消息及时送达。 -> `HertzBeat`的强大自定义，多类型支持，高性能，易扩展，低耦合，希望能帮助开发者和团队快速搭建自有监控系统。 +> `HertzBeat`的强大自定义，多类型支持，高性能，易扩展，低耦合，希望能帮助用户快速搭建自有监控系统。 > 当然我们也提供了对应的 **[SAAS版本监控云服务](https://console.tancloud.cn)**，中小团队和个人无需再为监控自有资源而去部署一套监控系统，**[登录即可免费开始](https://console.tancloud.cn)**。 ---- diff --git a/web-app/src/app/layout/basic/basic.component.ts b/web-app/src/app/layout/basic/basic.component.ts index 44eabaa04f1..8a506eff4b1 100644 --- a/web-app/src/app/layout/basic/basic.component.ts +++ b/web-app/src/app/layout/basic/basic.component.ts @@ -49,7 +49,7 @@ import { CONSTS } from 'src/app/shared/consts';
- + {{ 'menu.extras.tags' | i18n }}
diff --git a/web-app/src/app/layout/basic/widgets/clear-storage.component.ts b/web-app/src/app/layout/basic/widgets/clear-storage.component.ts index 00ea0a30c5f..9e6259de93f 100644 --- a/web-app/src/app/layout/basic/widgets/clear-storage.component.ts +++ b/web-app/src/app/layout/basic/widgets/clear-storage.component.ts @@ -7,7 +7,7 @@ import { NzModalService } from 'ng-zorro-antd/modal'; @Component({ selector: 'header-clear-storage', template: ` - + {{ 'menu.clear.local.storage' | i18n }} `, host: { diff --git a/web-app/src/app/layout/basic/widgets/fullscreen.component.ts b/web-app/src/app/layout/basic/widgets/fullscreen.component.ts index 379fa94c15f..00ca95bf9e3 100644 --- a/web-app/src/app/layout/basic/widgets/fullscreen.component.ts +++ b/web-app/src/app/layout/basic/widgets/fullscreen.component.ts @@ -4,7 +4,7 @@ import screenfull from 'screenfull'; @Component({ selector: 'header-fullscreen', template: ` - + {{ (status ? 'menu.fullscreen.exit' : 'menu.fullscreen') | i18n }} `, host: { diff --git a/web-app/src/app/layout/basic/widgets/i18n.component.ts b/web-app/src/app/layout/basic/widgets/i18n.component.ts index ec7685b61ca..bb71561dcc9 100644 --- a/web-app/src/app/layout/basic/widgets/i18n.component.ts +++ b/web-app/src/app/layout/basic/widgets/i18n.component.ts @@ -8,14 +8,14 @@ import { BooleanInput, InputBoolean } from '@delon/util/decorator'; selector: 'header-i18n', template: `
- + {{ 'menu.lang' | i18n }}
    -
  • +
  • {{ item.abbr }} {{ item.text }}
    • diff --git a/web-app/src/app/layout/basic/widgets/user.component.ts b/web-app/src/app/layout/basic/widgets/user.component.ts index 28c4577b35b..5e94ab6ea50 100644 --- a/web-app/src/app/layout/basic/widgets/user.component.ts +++ b/web-app/src/app/layout/basic/widgets/user.component.ts @@ -3,41 +3,129 @@ import { Router } from '@angular/router'; import { SettingsService, User } from '@delon/theme'; import { LocalStorageService } from '../../../service/local-storage.service'; +import { CONSTS } from '../../../shared/consts'; @Component({ selector: 'header-user', template: ` -
    - - {{ 'menu.account.logout' | i18n }} -
    - + +
    +
    + +
    +
    + {{ 'about.title' | i18n }} +
    +
    + +
    + +
    + +
    + +
    + +
    +
    +
    + {{ 'about.help' | i18n }} +
    + +
    + Copyright © 2021-{{ currentYear }} + + hertzbeat.com + + tancloud.cn +
    + + +
    +     `, - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.Default }) export class HeaderUserComponent { + isAboutModalVisible = false; + version = CONSTS.VERSION; + currentYear = new Date().getFullYear(); get user(): User { return this.settings.user; } - constructor(private settings: SettingsService, private router: Router, private localStorageSvc: LocalStorageService) {} + constructor(private settings: SettingsService, private router: Router, private localStorageSvc: LocalStorageService) { + // @ts-ignore + if (router.getCurrentNavigation()?.previousNavigation?.finalUrl.toString() === '/passport/login') { + this.showAndCloseAboutModal(); + } + } logout(): void { this.localStorageSvc.clear(); this.router.navigateByUrl('/passport/login'); } + + showAboutModal() { + this.isAboutModalVisible = true; + } + + disAboutModal() { + this.isAboutModalVisible = false; + } + + showAndCloseAboutModal() { + this.isAboutModalVisible = true; + setTimeout(() => (this.isAboutModalVisible = false), 12000); + } } diff --git a/web-app/src/app/layout/layout.module.ts b/web-app/src/app/layout/layout.module.ts index 673355659d4..cd3e5aff71e 100644 --- a/web-app/src/app/layout/layout.module.ts +++ b/web-app/src/app/layout/layout.module.ts @@ -41,6 +41,9 @@ const HEADER_COMPONENTS = [ // passport import { LayoutPassportComponent } from './passport/passport.component'; +import { NzModalModule } from 'ng-zorro-antd/modal'; +import { NzTagModule } from 'ng-zorro-antd/tag'; +import { NzDividerModule } from 'ng-zorro-antd/divider'; const PASSPORT = [LayoutPassportComponent]; @NgModule({ @@ -62,7 +65,10 @@ const PASSPORT = [LayoutPassportComponent]; NzSpinModule, NzBadgeModule, NzAvatarModule, - NzIconModule + NzIconModule, + NzModalModule, + NzTagModule, + NzDividerModule ], declarations: [...COMPONENTS, ...HEADER_COMPONENTS, ...PASSPORT], exports: [...COMPONENTS, ...PASSPORT] diff --git a/web-app/src/app/layout/passport/passport.component.less b/web-app/src/app/layout/passport/passport.component.less index e095f70cae6..4cabc8903d6 100644 --- a/web-app/src/app/layout/passport/passport.component.less +++ b/web-app/src/app/layout/passport/passport.component.less @@ -52,7 +52,7 @@ } } .logo { - height: 44px; + height: 55px; margin-right: 16px; } .title { diff --git a/web-app/src/assets/i18n/en-US.json b/web-app/src/assets/i18n/en-US.json index dd1a7d7c082..e8c90dc2e91 100644 --- a/web-app/src/assets/i18n/en-US.json +++ b/web-app/src/assets/i18n/en-US.json @@ -41,7 +41,8 @@ "define": "Monitor Template", "help": "Help Center", "setting": "Setting", - "settings": "Settings" + "settings": "Settings", + "about": "About" }, "more": "More" }, @@ -504,6 +505,20 @@ "collector.node": "Node Name", "collector.pinned": "Pinned", "collector.dispatched": "Dispatched", + "about.title": "HertzBeat is an open source, real-time monitoring system with custom, performance and agentless.", + "about.point.1": "Monitor, alarm, notify all in one, supports web, database, os, middleware, cloud-native, network etc.", + "about.point.2": "Easy to use, full web-based operations with just a click of a mouse.", + "about.point.3": "Powerful monitoring template capabilities, custom monitoring any metrics you want.", + "about.point.4": "High performance, supports collector cluster, multi-isolated network and cloud-edge collaboration.", + "about.point.5": "Flexible alarm threshold rules, timely notification via discord, slack, telegram, webhook etc.", + "about.help": "HertzBeat's powerful customization, multi-type support, high performance and easy expansion, aims to help users quickly build their own monitoring system.", + "about.github": "Github", + "about.gitee": "Gitee", + "about.issue": "Feedback", + "about.pr": "Contribution", + "about.discuss": "Discussion", + "about.doc": "Document", + "about.star": "Star", "validation.email.required": "Please enter your email!", "validation.email.wrong-format": "The email address is in the wrong format!", "validation.password.required": "Please enter your password!", diff --git a/web-app/src/assets/i18n/zh-CN.json b/web-app/src/assets/i18n/zh-CN.json index d78c074e15e..5a7750a457a 100644 --- a/web-app/src/assets/i18n/zh-CN.json +++ b/web-app/src/assets/i18n/zh-CN.json @@ -41,7 +41,8 @@ "define": "监控模版", "help": "帮助中心", "setting": "设置", - "settings": "系统设置" + "settings": "系统设置", + "about": "关于" }, "more": "更多" }, @@ -500,6 +501,20 @@ "collector.node": "节点名称", "collector.pinned": "固定任务", "collector.dispatched": "调度任务", + "about.title": "HertzBeat(赫兹跳动) 是一个拥有强大自定义监控能力，高性能集群，无需 Agent 的开源实时监控告警系统。", + "about.point.1": "一站式监控告警通知，支持应用服务，数据库，操作系统，中间件，云原生，网络等。", + "about.point.2": "易用友好，无需 Agent，全页面操作，鼠标点一点就能监控告警。", + "about.point.3": "强大监控模版能力，自定义监控任何您想要的指标。", + "about.point.4": "高性能，采集器集群横向扩展，支持多隔离网络监控，云边协同。", + "about.point.5": "自由的阈值规则，邮件钉钉微信飞书短信等消息及时送达。", + "about.help": "HertzBeat 的强大自定义，多类型支持，高性能，易扩展，希望能帮助用户快速构建自有监控系统。", + "about.github": "Github仓库", + "about.gitee": "Gitee仓库", + "about.issue": "反馈问题", + "about.pr": "贡献代码", + "about.discuss": "讨论交流", + "about.doc": "文档中心", + "about.star": "点赞支持", "validation.email.required": "请输入邮箱地址！", "validation.email.wrong-format": "邮箱地址格式错误！", "validation.email.invalid": "无效的邮箱地址！", diff --git a/web-app/src/assets/i18n/zh-TW.json b/web-app/src/assets/i18n/zh-TW.json index 8d8b0301fe2..4e05a50c9f3 100644 --- a/web-app/src/assets/i18n/zh-TW.json +++ b/web-app/src/assets/i18n/zh-TW.json @@ -41,7 +41,8 @@ "define": "監控模版", "help": "幫助中心", "setting": "設置", - "settings": "系統設置" + "settings": "系統設置", + "about": "關於" }, "more": "更多" }, @@ -499,6 +500,20 @@ "collector.node": "節點名稱", "collector.pinned": "固定任務", "collector.dispatched": "調度任務", + "about.title": "HertzBeat(赫茲跳動) 是一個擁有強大自定義監控能力，高性能集群，無需 Agent 的開源實時監控告警系統。", + "about.point.1": "一站式監控告警通知，支持應用服務，數據庫，操作系統，中間件，雲原生，網絡等。", + "about.point.2": "易用友好，無需 Agent，全頁面操作，鼠標點一點就能監控告警。", + "about.point.3": "強大監控模版能力，自定義監控任何您想要的指標。", + "about.point.4": "高性能，採集器集群橫向擴展，支持多隔離網絡監控，雲邊協同。", + "about.point.5": "自由的閾值規則，郵件釘釘微信飛書短信等消息及時送達。", + "about.help": "HertzBeat 的強大自定義，多類型支持，高性能，易擴展，希望能幫助用戶快速構建自有監控系統。", + "about.github": "Github倉庫", + "about.gitee": "Gitee倉庫", + "about.issue": "反饋問題", + "about.pr": "貢獻代碼", + "about.discuss": "討論交流", + "about.doc": "文檔中心", + "about.star": "點贊支持", "validation.email.required": "請輸入郵箱地址！", "validation.email.wrong-format": "郵箱地址格式錯誤！", "validation.email.invalid": "無效的郵箱地址！",