[FLINK-13550][ui] Add job vertex FlameGraph UI

flink-runtime-web/web-dashboard/package.json

@@ -22,6 +22,8 @@
  "@antv/g2": "^3.4.10",
  "core-js": "^2.5.4",
  "d3": "^5.9.1",
+ "d3-flame-graph": "^4.0.6",
+ "d3-tip": "^0.9.1",
  "dagre": "^0.8.4",
  "monaco-editor": "^0.16.0",
  "ng-zorro-antd": "^7.2.0",

flink-runtime-web/web-dashboard/src/@types/d3-flame-graph/index.d.ts

@@ -0,0 +1,91 @@
+/*
+ * 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:https://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.
+ */
+
+declare module 'd3-flame-graph' {
+ type ColorMapper = (node: any, originalColor: string) => string;
+
+ export function flamegraph(): FlameGraph;
+ export const offCpuColorMapper: ColorMapper;
+ export function defaultFlamegraphTooltip(): any;
+
+ export interface StackFrame {
+ name: string;
+ value: number;
+ children: StackFrame[];
+ }
+
+ type LabelHandler = (node: any) => string;
+ type ClickHandler = (node: any) => void;
+ type DetailsHandler = (node: any) => void;
+ type SearchHandler = (results: any, sum: any, totalValue: any) => void;
+ type SearchMatch = (node: any, term: string) => boolean;
+
+ interface FlameGraph {
+ (selection: any): any;
+
+ selfValue(val: boolean): FlameGraph;
+ selfValue(): boolean;
+ width(val: number): FlameGraph;
+ width(): number;
+ height(val: number): FlameGraph;
+ height(): number;
+ cellHeight(val: number): FlameGraph;
+ cellHeight(): number;
+ minFrameSize(val: number): FlameGraph;
+ minFrameSize(): number;
+ title(val: string): FlameGraph;
+ title(): string;
+ tooltip(val: boolean): FlameGraph;
+ tooltip(): boolean;
+ tooltip(any: tip): boolean;
+ transitionDuration(val: number): FlameGraph;
+ transitionDuration(): number;
+ transitionEase(val: string): FlameGraph;
+ transitionEase(): string;
+ label(val: LabelHandler): FlameGraph;
+ label(): LabelHandler;
+ sort(val: boolean): FlameGraph;
+ sort(): boolean;
+ inverted(val: boolean): FlameGraph;
+ inverted(): boolean;
+ computeDelta(val: boolean): FlameGraph;
+ computeDelta(): boolean;
+
+ resetZoom(): void;
+ onClick(val: ClickHandler): FlameGraph;
+ onClick(): ClickHandler;
+ setDetailsElement(val: HTMLElement | null): FlameGraph;
+ setDetailsElement(): HTMLElement | null;
+ setDetailsHandler(val: DetailsHandler): FlameGraph;
+ setDetailsHandler(): FlameGraph;
+ setSearchHandler(val: SearchHandler): FlameGraph;
+ setSearchHandler(): FlameGraph;
+ setColorMapper(val: ColorMapper): FlameGraph;
+ setColorMapper(): FlameGraph;
+ setColorHue(val: string): FlameGraph;
+ setColorHue(): FlameGraph;
+ setSearchMatch(val: SearchMatch): FlameGraph;
+ setSearchMatch(): FlameGraph;
+
+ search(term: string): void;
+ clear(): void;
+ merge(node: StackFrame): void;
+ update(node: StackFrame): void;
+ destroy(): void;
+ }
+}

flink-runtime-web/web-dashboard/src/@types/d3-tip/index.d.ts

@@ -0,0 +1 @@
+declare module 'd3-tip';

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

@@ -0,0 +1,29 @@
+/*
+ * 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:https://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.
+ */
+
+export interface JobFlameGraphInterface {
+ endTimestamp: number;
+ data: JobFlameGraphNodeInterface;
+ graphType: string;
+}
+
+export interface JobFlameGraphNodeInterface {
+ name: string;
+ value: number;
+ children: JobFlameGraphNodeInterface[];
+}

flink-runtime-web/web-dashboard/src/app/interfaces/public-api.ts

@@ -27,6 +27,7 @@ export * from './job-vertex-task-manager';
 export * from './job-checkpoint';
 export * from './job-subtask';
 export * from './job-backpressure';
+export * from './job-flamegraph';
 export * from './plan';
 export * from './overview';
 export * from './task-manager';

flink-runtime-web/web-dashboard/src/app/pages/job/overview/drawer/job-overview-drawer.component.less

@@ -16,7 +16,6 @@
  * limitations under the License.
  */
 
-
 @import "theme";
 
 :host {

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

@@ -54,7 +54,8 @@ export class JobOverviewDrawerComponent implements OnInit, OnDestroy {
  { title: 'Watermarks', path: 'watermarks' },
  { title: 'Accumulators', path: 'accumulators' },
  { title: 'BackPressure', path: 'backpressure' },
- { title: 'Metrics', path: 'metrics' }
+ { title: 'Metrics', path: 'metrics' },
+ { title: 'FlameGraph', path: 'flamegraph' }
  ];
  fullScreen = false;
  private cachePath = this.listOfNavigation[0].path;

flink-runtime-web/web-dashboard/src/app/pages/job/overview/flamegraph/job-overview-drawer-flamegraph.component.html

@@ -0,0 +1,46 @@
+<!--
+ ~ 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:https://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.
+ -->
+
+
+<span *ngIf="selectedVertex?.detail?.status !== 'RUNNING'">
+ Operator is not running. Cannot sample back pressure.
+</span>
+
+Type:
+<nz-radio-group [(ngModel)]="graphType" nzButtonStyle="solid">
+ <label nz-radio-button nzValue="on_cpu" (click)="selectFrameGraphType()" title="Includes Thread.State.[RUNNABLE, NEW]">On-CPU</label>
+ <label nz-radio-button nzValue="off_cpu" (click)="selectFrameGraphType()" title="Includes Thread.State.[WAITING, TIMED_WAITING, BLOCKED]">Off-CPU</label>
+ <label nz-radio-button nzValue="full" (click)="selectFrameGraphType()" title="Includes stack traces of threads in all states">Mixed</label>
+</nz-radio-group>
+
+Measurement:
+<span *ngIf="flameGraph.endTimestamp">
+ {{ (now - flameGraph.endTimestamp) | humanizeDuration }} ago
+</span>
+
+<div class="flame-graph-area">
+ <flink-flame-graph [data]="flameGraph['data']" [graphType]="graphType"></flink-flame-graph>
+</div>
+
+<div style="padding-top: 100px">
+ <nz-spin *ngIf="isLoading"></nz-spin>
+</div>
+
+
+
+

flink-runtime-web/web-dashboard/src/app/pages/job/overview/flamegraph/job-overview-drawer-flamegraph.component.less

@@ -0,0 +1,31 @@
+/*
+ * 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:https://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-select {
+ width: 300px;
+}
+
+.metric-selector {
+ text-align: center;
+}
+
+:host {
+ padding: 16px;
+ display: block;
+}

flink-runtime-web/web-dashboard/src/app/pages/job/overview/flamegraph/job-overview-drawer-flamegraph.component.ts

@@ -0,0 +1,82 @@
+/*
+ * 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:https://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 { Component, OnInit, ChangeDetectionStrategy, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { Subject } from 'rxjs';
+import { flatMap, takeUntil, tap } from 'rxjs/operators';
+import { JobFlameGraphInterface, NodesItemCorrectInterface } from 'interfaces';
+import { JobService } from 'services';
+
+@Component({
+ selector: 'flink-job-overview-drawer-flamegraph',
+ templateUrl: './job-overview-drawer-flamegraph.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ styleUrls: ['./job-overview-drawer-flamegraph.component.less']
+})
+export class JobOverviewDrawerFlameGraphComponent implements OnInit, OnDestroy {
+ destroy$ = new Subject();
+ isLoading = true;
+ now = Date.now();
+ selectedVertex: NodesItemCorrectInterface | null;
+ flameGraph = {} as JobFlameGraphInterface;
+
+ graphType = 'on_cpu';
+
+ constructor(private jobService: JobService, private cdr: ChangeDetectorRef) {}
+
+ ngOnInit() {
+ this.requestFlameGraph();
+ }
+
+ private requestFlameGraph() {
+ this.jobService.jobWithVertex$
+ .pipe(
+ takeUntil(this.destroy$),
+ tap(data => (this.selectedVertex = data.vertex)),
+ flatMap(data => this.jobService.loadOperatorFlameGraph(data.job.jid, data.vertex!.id, this.graphType))
+ )
+ .subscribe(
+ data => {
+ this.now = Date.now();
+ if (this.flameGraph.endTimestamp !== data['endTimestamp']) {
+ this.isLoading = false;
+ this.flameGraph = data;
+ this.flameGraph.graphType = this.graphType;
+ }
+ this.cdr.markForCheck();
+ },
+ () => {
+ this.isLoading = false;
+ this.cdr.markForCheck();
+ }
+ );
+ }
+
+ selectFrameGraphType() {
+ this.destroy$.next();
+ this.destroy$.complete();
+ this.destroy$ = new Subject();
+ this.flameGraph = {} as JobFlameGraphInterface;
+ this.requestFlameGraph();
+ }
+
+ ngOnDestroy() {
+ this.destroy$.next();
+ this.destroy$.complete();
+ }
+}

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

@@ -20,6 +20,7 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { JobOverviewDrawerAccumulatorsComponent } from './accumulators/job-overview-drawer-accumulators.component';
 import { JobOverviewDrawerBackpressureComponent } from './backpressure/job-overview-drawer-backpressure.component';
+import { JobOverviewDrawerFlameGraphComponent } from './flamegraph/job-overview-drawer-flamegraph.component';
 import { JobOverviewDrawerChartComponent } from './chart/job-overview-drawer-chart.component';
 import { JobOverviewDrawerDetailComponent } from './detail/job-overview-drawer-detail.component';
 import { JobOverviewDrawerComponent } from './drawer/job-overview-drawer.component';
@@ -85,6 +86,13 @@ const routes: Routes = [
  data: {
  path: 'backpressure'
  }
+ },
+ {
+ path: 'flamegraph',
+ component: JobOverviewDrawerFlameGraphComponent,
+ data: {
+ path: 'flamegraph'
+ }
  }
  ]
  }

flink-runtime-web/web-dashboard/src/app/pages/job/overview/job-overview.component.less

@@ -59,3 +59,4 @@ flink-job-overview-drawer {
  display: block;
  position: relative;
 }
+