[FLINK-14270][web] Support to display more metrics at once (apache#10689

)

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

@@ -22,6 +22,7 @@ import { combineLatest, Subject } from 'rxjs';
 import { map, takeUntil } from 'rxjs/operators';
 import { JobService } from 'services';
 import { trigger, animate, style, transition } from '@angular/animations';
+import { JobChartService } from 'share/customize/job-chart/job-chart.service';
 
 @Component({
  selector: 'flink-job-overview-drawer',
@@ -62,16 +63,23 @@ export class JobOverviewDrawerComponent implements OnInit, OnDestroy {
  closeDrawer() {
  if (this.fullScreen) {
  this.fullScreen = false;
+ this.jobChartService.resize();
  } else {
  this.router.navigate(['../../'], { relativeTo: this.activatedRoute }).then();
  }
  }
 
  fullDrawer() {
  this.fullScreen = true;
+ this.jobChartService.resize();
  }
 
- constructor(private activatedRoute: ActivatedRoute, private router: Router, private jobService: JobService) {}
+ constructor(
+ private activatedRoute: ActivatedRoute,
+ private router: Router,
+ private jobService: JobService,
+ private jobChartService: JobChartService
+ ) {}
 
  ngOnInit() {
  const nodeId$ = this.activatedRoute.params.pipe(map(item => item.vertexId));

flink-runtime-web/web-dashboard/src/app/share/common/resize/resize.component.ts

@@ -78,7 +78,7 @@ export class ResizeComponent implements OnInit, OnDestroy {
  return innerOffsetTop;
  };
  const offsetTop = getOffsetTop(this.baseElement.nativeElement);
- const maxResize = 560;
+ const maxResize = 900;
  let newTop = e.pageY - offsetTop;
  if (newTop > maxResize) {
  newTop = maxResize;

flink-runtime-web/web-dashboard/src/app/share/customize/job-chart/job-chart.component.html

@@ -18,7 +18,7 @@
 
 <div class="chart">
  <div class="title">
- <div class="text">{{title}}</div>
+ <div class="text" [attr.title]="title">{{title}}</div>
  <div class="operate">
  <nz-button-group [nzSize]="'small'">
  <button nz-button [nzType]="size === 'big' ? 'primary' : 'default'" (click)="resize('big')">Big</button>

flink-runtime-web/web-dashboard/src/app/share/customize/job-chart/job-chart.component.less

@@ -21,7 +21,7 @@
  padding: 12px;
  margin-bottom: 12px;
  float: left;
- width: 50%;
+ width: 33.33%;
 
  &.big {
  width: 100%;

flink-runtime-web/web-dashboard/src/app/share/customize/job-chart/job-chart.component.ts

@@ -33,6 +33,9 @@ import {
 } from '@angular/core';
 import { Chart } from '@antv/g2';
 import * as G2 from '@antv/g2';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { JobChartService } from 'share/customize/job-chart/job-chart.service';
 
 @Component({
  selector: 'flink-job-chart',
@@ -49,6 +52,7 @@ export class JobChartComponent implements AfterViewInit, OnDestroy {
  chartInstance: Chart;
  data: Array<{ time: number; value: number; type: string }> = [];
  latestValue: number;
+ destroy$ = new Subject();
 
  @HostBinding('class.big')
  get isBig() {
@@ -89,7 +93,7 @@ export class JobChartComponent implements AfterViewInit, OnDestroy {
  this.closed.emit(this.title);
  }
 
- constructor(private cdr: ChangeDetectorRef) {}
+ constructor(private cdr: ChangeDetectorRef, private jobChartService: JobChartService) {}
 
  ngAfterViewInit() {
  this.cdr.detach();
@@ -124,9 +128,18 @@ export class JobChartComponent implements AfterViewInit, OnDestroy {
  }
  });
  this.chartInstance.render();
+ this.jobChartService.resize$.pipe(takeUntil(this.destroy$)).subscribe(() => {
+ if (this.chartInstance) {
+ setTimeout(() => {
+ this.chartInstance.forceFit();
+ });
+ }
+ });
  }
 
  ngOnDestroy() {
+ this.destroy$.next();
+ this.destroy$.complete();
  if (this.chartInstance) {
  this.chartInstance.destroy();
  }

flink-runtime-web/web-dashboard/src/app/share/customize/job-chart/job-chart.service.ts

@@ -0,0 +1,28 @@
+/*
+ * 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
+ *
+ * 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 { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Injectable({ providedIn: 'root' })
+export class JobChartService {
+ resize$ = new Subject();
+ resize() {
+ this.resize$.next();
+ }
+}