add hertzbeat about msg card

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)**.
 
 ----

README_CN.md

@@ -43,7 +43,7 @@
 - 自由的告警阈值规则，`邮件` `Discord` `Slack` `Telegram` `钉钉` `微信` `飞书` `短信` `Webhook` `Server酱` 等方式消息及时送达。             
 
 
-> `HertzBeat`的强大自定义，多类型支持，高性能，易扩展，低耦合，希望能帮助开发者和团队快速搭建自有监控系统。    
+> `HertzBeat`的强大自定义，多类型支持，高性能，易扩展，低耦合，希望能帮助用户快速搭建自有监控系统。    
 > 当然我们也提供了对应的 **[SAAS版本监控云服务](https://console.tancloud.cn)**，中小团队和个人无需再为监控自有资源而去部署一套监控系统，**[登录即可免费开始](https://console.tancloud.cn)**。
 
 ----   

web-app/src/app/layout/basic/basic.component.ts

@@ -49,7 +49,7 @@ import { CONSTS } from 'src/app/shared/consts';
               <header-clear-storage></header-clear-storage>
             </div>
             <div nz-menu-item routerLink="/setting/tags">
-              <i nz-icon nzType="tag"></i>
+              <i nz-icon nzType="tag" class="mr-sm"></i>
               <span style="margin-left: 4px">{{ 'menu.extras.tags' | i18n }}</span>
             </div>
             <div nz-menu-item>

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: `
-    <i nz-icon nzType="tool"></i>
+    <i nz-icon class="mr-sm" nzType="tool"></i>
     {{ 'menu.clear.local.storage' | i18n }}
   `,
   host: {

web-app/src/app/layout/basic/widgets/fullscreen.component.ts

@@ -4,7 +4,7 @@ import screenfull from 'screenfull';
 @Component({
   selector: 'header-fullscreen',
   template: `
-    <i nz-icon [nzType]="status ? 'fullscreen-exit' : 'fullscreen'"></i>
+    <i nz-icon class="mr-sm" [nzType]="status ? 'fullscreen-exit' : 'fullscreen'"></i>
     {{ (status ? 'menu.fullscreen.exit' : 'menu.fullscreen') | i18n }}
   `,
   host: {

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: `
     <div *ngIf="showLangText" nz-dropdown [nzDropdownMenu]="langMenu" nzPlacement="bottomRight">
-      <i nz-icon nzType="global"></i>
+      <i nz-icon class="mr-sm" nzType="global"></i>
       {{ 'menu.lang' | i18n }}
       <i nz-icon nzType="down"></i>
     </div>
     <i *ngIf="!showLangText" nz-dropdown [nzDropdownMenu]="langMenu" nzPlacement="bottomRight" nz-icon nzType="global"></i>
     <nz-dropdown-menu #langMenu="nzDropdownMenu">
       <ul nz-menu>
-        <li nz-menu-item *ngFor="let item of langs" [nzSelected]="item.code === curLangCode" (click)="change(item.code)">
+        <li nz-menu-item class="mr-sm" *ngFor="let item of langs" [nzSelected]="item.code === curLangCode" (click)="change(item.code)">
           <span role="img" [attr.aria-label]="item.text" class="pr-xs">{{ item.abbr }}</span>
           {{ item.text }}
         </li>

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: `
-    <div class="alain-default__nav-item d-flex align-items-center px-sm" (click)="logout()">
-      <i nz-icon nzType="logout" class="mr-sm"></i>
-      {{ 'menu.account.logout' | i18n }}
-    </div>
-    <!--
     <div class="alain-default__nav-item d-flex align-items-center px-sm" nz-dropdown nzPlacement="bottomRight" [nzDropdownMenu]="userMenu">
       <nz-avatar [nzSrc]="user.avatar" nzSize="small" class="mr-sm"></nz-avatar>
       {{ user.name }}
     </div>
     <nz-dropdown-menu #userMenu="nzDropdownMenu">
       <div nz-menu class="width-sm">
-        <li nz-menu-divider></li>
+        <div nz-menu-item routerLink="/setting/settings/config">
+          <i nz-icon nzType="tool" class="mr-sm"></i>
+          {{ 'menu.extras.setting' | i18n }}
+        </div>
         <div nz-menu-item (click)="logout()">
           <i nz-icon nzType="logout" class="mr-sm"></i>
           {{ 'menu.account.logout' | i18n }}
         </div>
+        <div nz-menu-item (click)="showAboutModal()">
+          <i nz-icon nzType="environment" class="mr-sm"></i>
+          {{ 'menu.extras.about' | i18n }}
+        </div>
       </div>
     </nz-dropdown-menu>
--->
+    <nz-modal
+      [(nzVisible)]="isAboutModalVisible"
+      [nzTitle]=""
+      [nzFooter]="null"
+      (nzOnCancel)="disAboutModal()"
+      nzClosable="false"
+      nzWidth="44%"
+    >
+      <div *nzModalContent class="-inner-content">
+        <div style="text-align: center">
+          <img style="height: 33px" src="./assets/brand.svg" alt="" />
+        </div>
+        <div style="margin-top: 10px; font-weight: bolder; font-size: small;">
+          {{ 'about.title' | i18n }}
+        </div>
+        <div style="margin-top: 10px; font-weight: normal; font-size: small;">
+          <nz-badge nzStatus="processing" [nzText]="'about.point.1' | i18n"></nz-badge>
+          <br />
+          <nz-badge nzStatus="processing" [nzText]="'about.point.2' | i18n"></nz-badge>
+          <br />
+          <nz-badge nzStatus="processing" [nzText]="'about.point.3' | i18n"></nz-badge>
+          <br />
+          <nz-badge nzStatus="processing" [nzText]="'about.point.4' | i18n"></nz-badge>
+          <br />
+          <nz-badge nzStatus="processing" [nzText]="'about.point.5' | i18n"></nz-badge>
+          <br />
+        </div>
+        <div style="margin-top: 10px; font-weight: normal; font-size: small;">
+          {{ 'about.help' | i18n }}
+        </div>
+        <div style="margin-top: 10px; font-weight: bolder; font-size: medium;">
+          <a [href]="'https://github.com/dromara/hertzbeat/releases/tag/' + version" target="_blank"> HertzBeat {{ version }} </a>
+        </div>
+        <div style="margin-top: 10px; font-weight: normal; font-size: small;">
+          Copyright &copy; 2021-{{ currentYear }}
+          <nz-divider nzType="vertical"></nz-divider>
+          <a href="https://hertzbeat.com" target="_blank">hertzbeat.com</a>
+          <nz-divider nzType="vertical"></nz-divider>
+          <a href="https://tancloud.cn" target="_blank">tancloud.cn</a>
+        </div>
+        <nz-divider></nz-divider>
+        <div style="margin-top: 10px; font-weight: bolder">
+          <span nz-icon nzType="github"></span>
+          <a href="//github.com/dromara/hertzbeat" target="_blank"> {{ 'about.github' | i18n }} </a>
+          <nz-divider nzType="vertical"></nz-divider>
+          <span nz-icon nzIconfont="icon-gitee"></span>
+          <a href="//gitee.com/dromara/hertzbeat" target="_blank"> {{ 'about.gitee' | i18n }} </a>
+          <nz-divider nzType="vertical"></nz-divider>
+          <span nz-icon nzType="bug"></span>
+          <a href="//github.com/dromara/hertzbeat/issues" target="_blank"> {{ 'about.issue' | i18n }} </a>
+          <nz-divider nzType="vertical"></nz-divider>
+          <span nz-icon nzType="fork"></span>
+          <a href="//github.com/dromara/hertzbeat/pulls" target="_blank"> {{ 'about.pr' | i18n }} </a>
+          <nz-divider nzType="vertical"></nz-divider>
+          <span nz-icon nzType="message"></span>
+          <a href="//discord.com/invite/Fb6M73htGr" target="_blank"> {{ 'about.discuss' | i18n }} </a>
+          <nz-divider nzType="vertical"></nz-divider>
+          <span nz-icon nzType="read"></span>
+          <a href="https://hertzbeat.com/docs/" target="_blank"> {{ 'about.doc' | i18n }} </a>
+          <a style="float: right" href="//github.com/dromara/hertzbeat" target="_blank"> {{ 'about.star' | i18n }} </a>
+          <span style="float: right" nz-icon nzType="star" nzTheme="twotone"></span>
+          <nz-divider style="float: right" nzType="vertical"></nz-divider>
+        </div>
+      </div>
+    </nz-modal>
   `,
-  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);
+  }
 }

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]

web-app/src/app/layout/passport/passport.component.less

@@ -52,7 +52,7 @@
     }
   }
   .logo {
-    height: 44px;
+    height: 55px;
     margin-right: 16px;
   }
   .title {

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!",

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": "无效的邮箱地址！",

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": "無效的郵箱地址！",