[FLINK-25372] Add thread dump feature for jobmanager on Web UI

This closes apache#18148

flink-runtime-web/web-dashboard/src/app/interfaces/job-manager.ts

@@ -21,3 +21,11 @@ export interface JobManagerLogItem {
   size: number;
   mtime: number;
 }
+export interface JobManagerThreadDump {
+  threadInfos: JobManagerThreadInfo[];
+}
+
+interface JobManagerThreadInfo {
+  threadName: string;
+  stringifiedThreadInfo: string;
+}

flink-runtime-web/web-dashboard/src/app/pages/job-manager/job-manager-routing.module.ts

@@ -26,6 +26,7 @@ import { JobManagerLogListComponent } from './log-list/job-manager-log-list.comp
 import { JobManagerLogsComponent } from './logs/job-manager-logs.component';
 import { JobManagerMetricsComponent } from './metrics/job-manager-metrics.component';
 import { JobManagerStdoutComponent } from './stdout/job-manager-stdout.component';
+import { JobManagerThreadDumpComponent } from './thread-dump/job-manager-thread-dump.component';
 
 const routes: Routes = [
   {
@@ -74,6 +75,13 @@ const routes: Routes = [
           path: 'log'
         }
       },
+      {
+        path: 'thread-dump',
+        component: JobManagerThreadDumpComponent,
+        data: {
+          path: 'thread-dump'
+        }
+      },
       {
         path: '**',
         redirectTo: 'metrics',

flink-runtime-web/web-dashboard/src/app/pages/job-manager/job-manager.component.ts

@@ -30,6 +30,7 @@ export class JobManagerComponent {
     { path: 'config', title: 'Configuration' },
     { path: 'logs', title: 'Logs' },
     { path: 'stdout', title: 'Stdout' },
-    { path: 'log', title: 'Log List' }
+    { path: 'log', title: 'Log List' },
+    { path: 'thread-dump', title: 'Thread Dump' }
   ];
 }

flink-runtime-web/web-dashboard/src/app/pages/job-manager/job-manager.module.ts

@@ -38,6 +38,7 @@ import { JobManagerLogListComponent } from './log-list/job-manager-log-list.comp
 import { JobManagerLogsComponent } from './logs/job-manager-logs.component';
 import { JobManagerMetricsComponent } from './metrics/job-manager-metrics.component';
 import { JobManagerStdoutComponent } from './stdout/job-manager-stdout.component';
+import { JobManagerThreadDumpComponent } from './thread-dump/job-manager-thread-dump.component';
 
 @NgModule({
   imports: [
@@ -61,7 +62,8 @@ import { JobManagerStdoutComponent } from './stdout/job-manager-stdout.component
     JobManagerLogListComponent,
     JobManagerLogDetailComponent,
     JobManagerLogsComponent,
-    JobManagerStdoutComponent
+    JobManagerStdoutComponent,
+    JobManagerThreadDumpComponent
   ]
 })
 export class JobManagerModule {}

flink-runtime-web/web-dashboard/src/app/pages/job-manager/thread-dump/job-manager-thread-dump.component.html

@@ -0,0 +1,30 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<nz-code-editor
+  flinkAutoResize
+  [nzLoading]="loading"
+  [ngModel]="dump"
+  [nzEditorOption]="editorOptions"
+></nz-code-editor>
+<flink-refresh-download
+  [compactMode]="true"
+  [downloadHref]="'jobmanager' + '/thread-dump'"
+  [downloadName]="'jobmanager_thread_dump'"
+  (reload)="reload()"
+></flink-refresh-download>

flink-runtime-web/web-dashboard/src/app/pages/job-manager/thread-dump/job-manager-thread-dump.component.less

@@ -0,0 +1,30 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+:host {
+  position: relative;
+  flex: 1;
+
+  nz-code-editor {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+}

flink-runtime-web/web-dashboard/src/app/pages/job-manager/thread-dump/job-manager-thread-dump.component.ts

@@ -0,0 +1,73 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ChangeDetectorRef, Component, OnInit, ChangeDetectionStrategy, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import { EditorOptions } from 'ng-zorro-antd/code-editor/typings';
+import { flinkEditorOptions } from 'share/common/editor/editor-config';
+
+import { JobManagerService } from 'services';
+
+@Component({
+  selector: 'flink-job-manager-thread-dump',
+  templateUrl: './job-manager-thread-dump.component.html',
+  styleUrls: ['./job-manager-thread-dump.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class JobManagerThreadDumpComponent implements OnInit, OnDestroy {
+  public readonly editorOptions: EditorOptions = flinkEditorOptions;
+
+  public dump = '';
+  public loading = true;
+
+  private readonly destroy$ = new Subject<void>();
+
+  constructor(private readonly jobManagerService: JobManagerService, private readonly cdr: ChangeDetectorRef) {}
+
+  public ngOnInit(): void {
+    this.reload();
+  }
+
+  public ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  public reload(): void {
+    this.loading = true;
+    this.cdr.markForCheck();
+    if (this.jobManagerService) {
+      this.jobManagerService
+        .loadThreadDump()
+        .pipe(takeUntil(this.destroy$))
+        .subscribe(
+          data => {
+            this.loading = false;
+            this.dump = data;
+            this.cdr.markForCheck();
+          },
+          () => {
+            this.loading = false;
+            this.cdr.markForCheck();
+          }
+        );
+    }
+  }
+}

flink-runtime-web/web-dashboard/src/app/services/job-manager.service.ts

@@ -22,7 +22,7 @@ import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 import { BASE_URL } from 'config';
-import { JobManagerLogItem } from 'interfaces';
+import { JobManagerLogItem, JobManagerThreadDump } from 'interfaces';
 
 @Injectable({
   providedIn: 'root'
@@ -68,6 +68,14 @@ export class JobManagerService {
       );
   }
 
+  public loadThreadDump(): Observable<string> {
+    return this.httpClient.get<JobManagerThreadDump>(`${BASE_URL}/jobmanager/thread-dump`).pipe(
+      map(JobManagerThreadDump => {
+        return JobManagerThreadDump.threadInfos.map(threadInfo => threadInfo.stringifiedThreadInfo).join('');
+      })
+    );
+  }
+
   public getMetricsName(): Observable<string[]> {
     return this.httpClient
       .get<Array<{ id: string }>>(`${BASE_URL}/jobmanager/metrics`)