[feature] add tag word cloud in dashboard

home/docusaurus.config.js

@@ -69,49 +69,49 @@ module.exports = {
         {
           label: 'Docs',
           position: 'left',
-          to: 'docs/',
+          to: '/docs/',
         },
         {
           label: 'blog',
           position: 'left',
-          to: 'blog/',
+          to: '/blog/',
         },
         {
           label: 'enterprise',
           position: 'left',
-          to: 'docs/others/private',
+          to: '/docs/others/private',
         },
         {
           label: 'Others',
           position: 'left',
           items: [
             {
               label: 'discuss',
-              to: 'docs/others/contact',
+              to: '/docs/others/contact',
             },
             {
               label: 'contributors',
-              href: 'docs/others/developer',
+              to: '/docs/others/developer',
             },
             {
               label: 'contributing',
-              to: 'docs/others/contributing',
+              to: '/docs/others/contributing',
             },
             {
               label: 'kanban',
               href: 'https://github.com/orgs/dromara/projects/6',
             },
             {
               label: 'design',
-              to: 'docs/others/design',
+              to: '/docs/others/design',
             },
             {
               label: 'sponsor',
-              to: 'docs/others/sponsor',
+              to: '/docs/others/sponsor',
             },
             {
               label: 'resource',
-              to: 'docs/others/resource',
+              to: '/docs/others/resource',
             }
           ],
         },
@@ -123,7 +123,7 @@ module.exports = {
         {
           label: '华为云开源活动',
           position: 'left',
-          to: 'docs/others/huaweicloud',
+          to: '/docs/others/huaweicloud',
         },
         {
           type: 'docsVersionDropdown',
@@ -151,19 +151,19 @@ module.exports = {
           items: [
             {
               label: 'use',
-              to: 'docs/',
+              to: '/docs/',
             },
             {
               label: 'quickstart',
-              to: 'docs/start/quickstart',
+              to: '/docs/start/quickstart',
             },
             {
               label: 'custom',
-              to: 'docs/advanced/extend-point',
+              to: '/docs/advanced/extend-point',
             },
             {
               label: 'help',
-              to: 'docs/help/guide',
+              to: '/docs/help/guide',
             },
           ],
         },
@@ -176,7 +176,7 @@ module.exports = {
             },
             {
               label: 'discuss',
-              to: 'docs/others/contact',
+              to: '/docs/others/contact',
             },
             {
               label: 'team',
@@ -201,7 +201,7 @@ module.exports = {
             },
             {
               label: 'relate',
-              to: 'docs/others/resource',
+              to: '/docs/others/resource',
             },
           ],
         },

home/src/css/hero.css

@@ -18,15 +18,19 @@ html[data-theme=dark] .hero--primary {
 }
 
 .hero__subtitle {
-    font-size: 2em;
-    max-width: 600px;
+    font-size: 3em;
+    font-weight: bolder;
+    font-family: monospace;
+    color: #d97700;
+    max-width: 900px;
     width: 100%;
     margin: 0 auto;
 }
 
 @media (max-width: 400px) {
     .hero__subtitle {
         font-size: 1.3em;
+        font-weight: bolder;
     }
 }
 

home/src/pages/index.js

@@ -45,47 +45,6 @@ function Home() {
               <p className="hero__subtitle">
                 <Translate>slogan</Translate>
               </p>
-              <div className={styles.social}>
-                <a href="https://gitter.im/hertzbeat/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge">
-                  <img
-                      src={'https://badges.gitter.im/hertzbeat/community.svg'}
-                      alt={''}
-                  />
-                </a>
-                <a href="https://github.com/dromara/hertzbeat">
-                  <img src={cdnTransfer('/img/badge/web-monitor.svg')} alt={''} />
-                </a>
-                <a href="https://github.com/dromara/hertzbeat">
-                  <img src={cdnTransfer('/img/badge/ping-connect.svg')} alt={''} />
-                </a>
-                <a href="https://github.com/dromara/hertzbeat">
-                  <img
-                      src={cdnTransfer('/img/badge/port-available.svg')}
-                      alt={''}
-                  />
-                </a>
-                <a href="https://github.com/dromara/hertzbeat">
-                  <img
-                      src={cdnTransfer('/img/badge/database-monitor.svg')}
-                      alt={''}
-                  />
-                </a>
-                <a href="https://github.com/dromara/hertzbeat">
-                  <img src={cdnTransfer('/img/badge/os-monitor.svg')} alt={''} />
-                </a>
-                <a href="https://github.com/dromara/hertzbeat">
-                  <img src={cdnTransfer('/img/badge/network-monitor.svg')} alt={''} />
-                </a>
-                <a href="https://github.com/dromara/hertzbeat">
-                  <img
-                      src={cdnTransfer('/img/badge/custom-monitor.svg')}
-                      alt={''}
-                  />
-                </a>
-                <a href="https://github.com/dromara/hertzbeat">
-                  <img src={cdnTransfer('/img/badge/alert.svg')} alt={''} />
-                </a>
-              </div>
               <div className={styles.buttons}>
                 <Link
                     to="/docs/"

web-app/package.json

@@ -58,16 +58,17 @@
     "@delon/util": "^15.2.1",
     "ajv": "^8.6.2",
     "ajv-formats": "^2.1.1",
+    "angular-tag-cloud-module": "~15.0.0",
+    "echarts": "^5.2.2",
+    "jquery": "~3.7.1",
     "monaco-editor": "0.36.1",
     "ng-zorro-antd": "^15.1.0",
     "ngx-color-picker": "~12.0.1",
-    "echarts": "^5.2.2",
     "ngx-echarts": "~15.0.3",
     "ngx-slick-carousel": "~15.0.0",
-    "jquery": "~3.7.1",
-    "slick-carousel": "~1.8.1",
     "rxjs": "~7.8.0",
     "screenfull": "^6.0.2",
+    "slick-carousel": "~1.8.1",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
   },

web-app/src/app/app.module.ts

@@ -50,7 +50,7 @@ const INTERCEPTOR_PROVIDES = [{ provide: HTTP_INTERCEPTORS, useClass: DefaultInt
 // #endregion
 
 // #region global third module
-const GLOBAL_THIRD_MODULES: Array<Type<void>> = [SlickCarouselModule];
+const GLOBAL_THIRD_MODULES: Array<Type<void>> = [SlickCarouselModule, TagCloudComponent];
 // #endregion
 
 // #region Startup Service
@@ -79,6 +79,7 @@ import { STWidgetModule } from './shared/st-widget/st-widget.module';
 import { ReactiveFormsModule } from '@angular/forms';
 import { NgxEchartsModule } from 'ngx-echarts';
 import { SlickCarouselModule } from 'ngx-slick-carousel';
+import { TagCloudComponent } from 'angular-tag-cloud-module';
 
 @NgModule({
   declarations: [AppComponent],

web-app/src/app/routes/dashboard/dashboard.component.html

@@ -292,7 +292,26 @@
 </div>
 
 <div nz-row nzGutter="16" style="margin-top: 25px; height: 400px">
-  <div nz-col [nzXs]="{ span: 24 }" [nzSm]="{ span: 24 }" [nzMd]="{ span: 12, offset: 6 }" style="height: 100%">
+  <div nz-col [nzXs]="{ span: 24 }" [nzSm]="{ span: 24 }" [nzMd]="{ span: 6 }" style="height: 100%">
+    <angular-tag-cloud
+      style="border-radius: 4px"
+      (clicked)="onTagCloudClick($event)"
+      [font]="'italic bold 6px monospace'"
+      [data]="wordCloudData"
+      [width]="1"
+      [height]="1"
+      [step]="2"
+      [strict]="true"
+      [randomizeAngle]="true"
+      [realignOnResize]="true"
+      [delay]="300"
+      [zoomOnHover]="{ scale: 1.4, transitionTime: 0.6, delay: 0.4 }"
+      [overflow]="false"
+      [background]="'white no-repeat fixed center'"
+    >
+    </angular-tag-cloud>
+  </div>
+  <div nz-col [nzXs]="{ span: 24 }" [nzSm]="{ span: 24 }" [nzMd]="{ span: 12 }" style="height: 100%">
     <div
       echarts
       [options]="appsCountEChartOption"

web-app/src/app/routes/dashboard/dashboard.component.ts

@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnDestro
 import { Router } from '@angular/router';
 import { I18NService } from '@core';
 import { ALAIN_I18N_TOKEN } from '@delon/theme';
+import { CloudData } from 'angular-tag-cloud-module';
 import { EChartsOption } from 'echarts';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { fromEvent } from 'rxjs';
@@ -12,6 +13,8 @@ import { CollectorSummary } from '../../pojo/CollectorSummary';
 import { AlertService } from '../../service/alert.service';
 import { CollectorService } from '../../service/collector.service';
 import { MonitorService } from '../../service/monitor.service';
+import { TagService } from '../../service/tag.service';
+import { formatTagName } from '../../shared/utils/common-util';
 
 @Component({
   selector: 'app-dashboard',
@@ -24,11 +27,84 @@ export class DashboardComponent implements OnInit, OnDestroy {
     private msg: NzMessageService,
     private monitorSvc: MonitorService,
     private alertSvc: AlertService,
+    private tagSvc: TagService,
     private collectorSvc: CollectorService,
     @Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService,
     private router: Router,
     private cdr: ChangeDetectorRef
   ) {}
+
+  // Tag Word Cloud
+  wordCloudData: CloudData[] = [];
+  defaultWordCloudData: CloudData[] = [
+    { text: 'HertzBeat', weight: 5 },
+    { text: 'Env:Prod', weight: 8 },
+    { text: 'Mysql', weight: 7 },
+    { text: 'Ping', weight: 5 },
+    { text: 'Product', weight: 6 },
+    { text: 'Env:Test', weight: 4 },
+    { text: 'TanCloud', weight: 3 },
+    { text: 'Bigdata', weight: 6 },
+    { text: 'Prod', weight: 4 },
+    { text: 'Dev', weight: 5 },
+    { text: 'Cache', weight: 7 },
+    { text: 'Region:US', weight: 7 },
+    { text: 'Region:CN', weight: 8 },
+    { text: 'Region:UK', weight: 7 },
+    { text: 'Localhost', weight: 6 },
+    { text: 'Cloud', weight: 8 },
+    { text: 'Network', weight: 5 },
+    { text: 'Custom', weight: 6 }
+  ];
+
+  refreshWordCloudContent(): void {
+    let tagsInit$ = this.tagSvc.loadTags(undefined, 1, 0, 10000).subscribe(
+      message => {
+        if (message.code === 0) {
+          let page = message.data;
+          let tags = page.content;
+          if (tags != null && tags.length != 0) {
+            let tmpData: CloudData[] = [];
+            tags.forEach(item => {
+              tmpData.push({
+                text: formatTagName(item),
+                weight: Math.random() * (10 - 5) + 5
+              });
+            });
+            this.wordCloudData = tmpData;
+          } else {
+            this.wordCloudData = this.defaultWordCloudData;
+          }
+          this.cdr.detectChanges();
+        } else {
+          console.warn(message.msg);
+        }
+        tagsInit$.unsubscribe();
+      },
+      error => {
+        tagsInit$.unsubscribe();
+        console.error(error.msg);
+      }
+    );
+  }
+
+  onTagCloudClick(data: CloudData): void {
+    this.router.navigate(['/monitors'], { queryParams: { tag: data.text } });
+  }
+
+  // start 大类别数量信息
+  appCountService: AppCount = new AppCount();
+  appCountOs: AppCount = new AppCount();
+  appCountDb: AppCount = new AppCount();
+  appCountMid: AppCount = new AppCount();
+  appCountCustom: AppCount = new AppCount();
+  appCountProgram: AppCount = new AppCount();
+  appCountCache: AppCount = new AppCount();
+  appCountBigdata: AppCount = new AppCount();
+  appCountWebserver: AppCount = new AppCount();
+  appCountCn: AppCount = new AppCount();
+  appCountNetwork: AppCount = new AppCount();
+
   slideConfig = {
     infinite: true,
     speed: 1200,
@@ -58,19 +134,6 @@ export class DashboardComponent implements OnInit, OnDestroy {
     ]
   };
 
-  // start 大类别数量信息
-  appCountService: AppCount = new AppCount();
-  appCountOs: AppCount = new AppCount();
-  appCountDb: AppCount = new AppCount();
-  appCountMid: AppCount = new AppCount();
-  appCountCustom: AppCount = new AppCount();
-  appCountProgram: AppCount = new AppCount();
-  appCountCache: AppCount = new AppCount();
-  appCountBigdata: AppCount = new AppCount();
-  appCountWebserver: AppCount = new AppCount();
-  appCountCn: AppCount = new AppCount();
-  appCountNetwork: AppCount = new AppCount();
-
   // start 数量全局概览
   interval$!: any;
   appsCountLoading: boolean = true;
@@ -298,6 +361,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
   }
 
   refresh(): void {
+    this.refreshWordCloudContent();
     this.refreshAppsCount();
     this.refreshAlertContentList();
     this.refreshCollectorContentList();

web-app/src/app/routes/routes.module.ts

@@ -3,6 +3,7 @@ import { NgModule, Type } from '@angular/core';
 import { SharedModule } from '@shared';
 
 // dashboard pages
+import { TagCloudComponent } from 'angular-tag-cloud-module';
 import { NzTagModule } from 'ng-zorro-antd/tag';
 import { NzTimelineModule } from 'ng-zorro-antd/timeline';
 import { NgxEchartsModule } from 'ngx-echarts';
@@ -24,7 +25,7 @@ const COMPONENTS: Array<Type<void>> = [
 ];
 
 @NgModule({
-  imports: [SharedModule, RouteRoutingModule, NgxEchartsModule, NzTagModule, NzTimelineModule, SlickCarouselModule],
+  imports: [SharedModule, RouteRoutingModule, NgxEchartsModule, NzTagModule, NzTimelineModule, SlickCarouselModule, TagCloudComponent],
   declarations: COMPONENTS
 })
 export class RoutesModule {}