[FLINK-28314][runtime-web] make modules depend on a common config abs…

…traction

flink-runtime-web/web-dashboard/src/app/core/module-config.ts

@@ -0,0 +1,36 @@
+/*
+ * 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 { Type } from '@angular/core';
+
+import { EditorOptions } from 'ng-zorro-antd/code-editor/typings';
+
+type RouterFactory = (...args: string[]) => string | string[];
+
+export interface RouterTab {
+ title: string;
+ path: string;
+}
+
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+export interface ModuleConfig<T extends keyof any = string, P extends keyof any = string> {
+ editorOptions?: EditorOptions; // customize editor options
+ routerTabs?: RouterTab[];
+ routerFactories?: Record<T, RouterFactory>; // customize router navigation
+ customComponents?: Record<P, Type<unknown>>; // customize component
+}

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

@@ -95,7 +95,7 @@ export interface VerticesItemRange extends VerticesItem {
  range: number[];
 }
 
-interface TasksStatus {
+export interface TasksStatus {
  FINISHED: number;
  SCHEDULED: number;
  CANCELED: number;

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

@@ -16,24 +16,30 @@
  ~ limitations under the License.
  -->
 
-<nz-table
+<nz-descriptions
+ nzBordered
  nzSize="small"
- [nzData]="listOfConfig"
- [nzFrontPagination]="false"
- [nzShowPagination]="false"
+ [nzColumn]="1"
+ *ngIf="listOfConfig.length; else noDataTemplate"
 >
- <thead>
- <tr>
-  <th nzWidth="50%">Key</th>
-  <th nzWidth="50%">Value</th>
- </tr>
- </thead>
- <tbody>
- <tr *ngFor="let config of listOfConfig">
- <td>
- <strong>{{ config.key }}</strong>
+ <nz-descriptions-item
+ *ngFor="let config of listOfConfig; trackBy: trackByConfig"
+ [nzTitle]="itemTitle"
+ >
+ <span>
+  {{ config.value }}
+  </span>
+ <ng-template #itemTitle>
+ <td class="ant-descriptions-item-label">
+ {{ config.key }}
  </td>
- <td>{{ config.value }}</td>
- </tr>
- </tbody>
-</nz-table>
+ </ng-template>
+ </nz-descriptions-item>
+</nz-descriptions>
+
+<ng-template #noDataTemplate>
+ <div class="empty">
+ <nz-spin *ngIf="loading"></nz-spin>
+ <nz-empty [nzNotFoundContent]="null" *ngIf="!loading"></nz-empty>
+ </div>
+</ng-template>

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

@@ -15,3 +15,31 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import "theme";
+
+:host {
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ overflow: auto;
+
+ nz-descriptions {
+ ::ng-deep {
+ .ant-descriptions-view {
+ border: none;
+ }
+
+ .ant-descriptions-item-label,
+ .ant-descriptions-item-content {
+ font-size: @font-size-sm;
+ }
+ }
+ }
+
+ .empty {
+ display: flex;
+ flex: 1;
+ align-items: center;
+ justify-content: center;
+ }
+}

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

@@ -16,8 +16,11 @@
  * limitations under the License.
  */
 
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { of, Subject } from 'rxjs';
+import { catchError, takeUntil } from 'rxjs/operators';
 
+import { JobManagerConfig } from '@flink-runtime-web/interfaces';
 import { JobManagerService } from '@flink-runtime-web/services';
 
 @Component({
@@ -26,15 +29,33 @@ import { JobManagerService } from '@flink-runtime-web/services';
  styleUrls: ['./job-manager-configuration.component.less'],
  changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class JobManagerConfigurationComponent implements OnInit {
+export class JobManagerConfigurationComponent implements OnInit, OnDestroy {
  public listOfConfig: Array<{ key: string; value: string }> = [];
+ public loading = true;
+ private destroy$ = new Subject<void>();
+
+ public readonly trackByConfig = (_: number, value: JobManagerConfig): string => {
+ return value.key;
+ };
 
  constructor(private readonly jobManagerService: JobManagerService, private readonly cdr: ChangeDetectorRef) {}
 
  public ngOnInit(): void {
- this.jobManagerService.loadConfig().subscribe(data => {
- this.listOfConfig = data.sort((pre, next) => (pre.key > next.key ? 1 : -1));
- this.cdr.markForCheck();
- });
+ this.jobManagerService
+ .loadConfig()
+ .pipe(
+ catchError(() => of([] as JobManagerConfig[])),
+ takeUntil(this.destroy$)
+ )
+ .subscribe(data => {
+ this.listOfConfig = data.sort((pre, next) => (pre.key > next.key ? 1 : -1));
+ this.loading = false;
+ this.cdr.markForCheck();
+ });
+ }
+
+ public ngOnDestroy(): void {
+ this.destroy$.next();
+ this.destroy$.complete();
  }
 }

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

@@ -0,0 +1,38 @@
+/*
+ * 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 { InjectionToken } from '@angular/core';
+
+import { ModuleConfig } from '@flink-runtime-web/core/module-config';
+import { flinkEditorOptions } from '@flink-runtime-web/share/common/editor/editor-config';
+
+type routerKeys = 'jobManager';
+
+export type JobManagerModuleConfig = Omit<ModuleConfig<routerKeys>, 'customComponents'>;
+
+export const JOB_MANAGER_MODULE_DEFAULT_CONFIG: Required<JobManagerModuleConfig> = {
+ editorOptions: flinkEditorOptions,
+ routerFactories: {
+ jobManager: (jobManagerName: string) => [jobManagerName]
+ }
+};
+
+export const JOB_MANAGER_MODULE_CONFIG = new InjectionToken<JobManagerModuleConfig>('job-manager-module-config', {
+ providedIn: 'root',
+ factory: () => JOB_MANAGER_MODULE_DEFAULT_CONFIG
+});

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

@@ -24,9 +24,12 @@ import { ShareModule } from '@flink-runtime-web/share/share.module';
 import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
 import { NzCardModule } from 'ng-zorro-antd/card';
 import { NzCodeEditorModule } from 'ng-zorro-antd/code-editor';
+import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
+import { NzEmptyModule } from 'ng-zorro-antd/empty';
 import { NzGridModule } from 'ng-zorro-antd/grid';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzProgressModule } from 'ng-zorro-antd/progress';
+import { NzSpinModule } from 'ng-zorro-antd/spin';
 import { NzTableModule } from 'ng-zorro-antd/table';
 import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 
@@ -53,7 +56,10 @@ import { JobManagerThreadDumpComponent } from './thread-dump/job-manager-thread-
  NzToolTipModule,
  NzBreadCrumbModule,
  NzCodeEditorModule,
- FormsModule
+ FormsModule,
+ NzDescriptionsModule,
+ NzSpinModule,
+ NzEmptyModule
  ],
  declarations: [
  JobManagerComponent,

flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-detail/job-manager-log-detail.component.html

@@ -28,13 +28,13 @@
  {{ logName }}
  </nz-breadcrumb-item>
  </nz-breadcrumb>
- <flink-refresh-download
+ <flink-addon-inline
  [isLoading]="isLoading"
  [downloadHref]="downloadUrl"
  [downloadName]="logName"
  (reload)="reload()"
  (fullScreen)="toggleFullScreen($event)"
- ></flink-refresh-download>
+ ></flink-addon-inline>
 </div>
 <div class="editor-container">
  <nz-code-editor

flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-detail/job-manager-log-detail.component.less

@@ -54,7 +54,7 @@
  border-bottom: 1px solid @border-color-split;
  background: @component-background;
 
- flink-refresh-download {
+ flink-addon-inline {
  position: absolute;
  top: 0;
  right: 12px;

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

@@ -16,13 +16,17 @@
  * limitations under the License.
  */
 
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Subject } from 'rxjs';
 import { finalize, takeUntil } from 'rxjs/operators';
 
+import {
+ JOB_MANAGER_MODULE_CONFIG,
+ JOB_MANAGER_MODULE_DEFAULT_CONFIG,
+ JobManagerModuleConfig
+} from '@flink-runtime-web/pages/job-manager/job-manager.config';
 import { JobManagerService } from '@flink-runtime-web/services';
-import { flinkEditorOptions } from '@flink-runtime-web/share/common/editor/editor-config';
 import { EditorOptions } from 'ng-zorro-antd/code-editor/typings';
 
 @Component({
@@ -40,15 +44,18 @@ export class JobManagerLogDetailComponent implements OnInit, OnDestroy {
  public downloadUrl = '';
  public isLoading = false;
  public isFullScreen = false;
- public editorOptions: EditorOptions = flinkEditorOptions;
+ public editorOptions: EditorOptions;
 
  private readonly destroy$ = new Subject<void>();
 
  constructor(
  private readonly jobManagerService: JobManagerService,
  private readonly cdr: ChangeDetectorRef,
- private readonly activatedRoute: ActivatedRoute
- ) {}
+ private readonly activatedRoute: ActivatedRoute,
+ @Inject(JOB_MANAGER_MODULE_CONFIG) readonly moduleConfig: JobManagerModuleConfig
+ ) {
+ this.editorOptions = moduleConfig.editorOptions || JOB_MANAGER_MODULE_DEFAULT_CONFIG.editorOptions;
+ }
 
  public ngOnInit(): void {
  this.logName = this.activatedRoute.snapshot.params.logName;

flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-list/job-manager-log-list.component.html

@@ -16,38 +16,40 @@
  ~ limitations under the License.
  -->
 
-<nz-card [nzBordered]="false">
- <nz-table
- [nzSize]="'small'"
- [nzData]="listOfLog"
- [nzLoading]="isLoading"
- [nzFrontPagination]="false"
- [nzShowPagination]="false"
- [nzVirtualItemSize]="39"
- [nzVirtualForTrackBy]="trackByName"
- [nzVirtualMinBufferPx]="480"
- [nzVirtualMaxBufferPx]="480"
- [nzScroll]="{ y: '650px' }"
- >
- <thead>
- <tr>
- <th nzWidth="50%">Log Name</th>
- <th [nzSortFn]="sortLastModifiedTimeFn">Last Modified Time</th>
- <th [nzSortFn]="sortSizeFn">Size (KB)</th>
- </tr>
- </thead>
- <tbody>
- <ng-template nz-virtual-scroll let-data>
- <ng-container *ngIf="narrowLogData(data) as narrowData">
- <tr>
- <td>
- <a [routerLink]="[narrowData.name]">{{ narrowData.name }}</a>
- </td>
- <td>{{ narrowData.mtime | humanizeDate: 'yyyy-MM-dd HH:mm:ss' }}</td>
- <td>{{ narrowData.size / 1024 | number: '1.0-2' }}</td>
- </tr>
- </ng-container>
- </ng-template>
- </tbody>
- </nz-table>
-</nz-card>
+<nz-table
+ nzBordered
+ nzSize="small"
+ [nzData]="listOfLog"
+ [nzLoading]="isLoading"
+ [nzFrontPagination]="false"
+ [nzShowPagination]="false"
+ [nzVirtualItemSize]="36"
+ [nzVirtualForTrackBy]="trackByName"
+ [nzVirtualMinBufferPx]="480"
+ [nzVirtualMaxBufferPx]="480"
+ [nzWidthConfig]="['50%', '25%', '25%']"
+ [nzScroll]="{ y: 'calc( 100% - 36px )' }"
+>
+ <thead>
+ <tr>
+ <th>Log Name</th>
+ <th [nzSortFn]="sortLastModifiedTimeFn">Last Modified Time</th>
+ <th [nzSortFn]="sortSizeFn">Size (KB)</th>
+ </tr>
+ </thead>
+ <tbody>
+ <ng-template nz-virtual-scroll let-data>
+ <ng-container *ngIf="narrowLogData(data) as narrowData">
+ <tr>
+ <td>
+ <a [queryParamsHandling]="'preserve'" [routerLink]="logRouterFactory(narrowData.name)">
+ {{ narrowData.name }}
+ </a>
+ </td>
+ <td>{{ narrowData.mtime | humanizeDate: 'yyyy-MM-dd HH:mm:ss' }}</td>
+ <td>{{ narrowData.size / 1024 | number: '1.0-2' }}</td>
+ </tr>
+ </ng-container>
+ </ng-template>
+ </tbody>
+</nz-table>