You are viewing a plain text version of this content. The canonical link for it is here.
Posted to issues@flink.apache.org by GitBox <gi...@apache.org> on 2022/05/13 07:00:13 UTC
[GitHub] [flink] yangjunhan opened a new pull request, #19712: [FLINK-26207][runtime-web] make web ui's components depend on injected configurable object
yangjunhan opened a new pull request, #19712:
URL: https://github.com/apache/flink/pull/19712
<!--
*Thank you very much for contributing to Apache Flink - we are happy that you want to help us improve Flink. To help the community review your contribution in the best possible way, please go through the checklist below, which will get the contribution into a shape in which it can be best reviewed.*
*Please understand that we do not do this to make contributions to Flink a hassle. In order to uphold a high standard of quality for code contributions, while at the same time managing a large number of contributions, we need contributors to prepare the contributions well, and give reviewers enough contextual information for the review. Please also understand that contributions that do not follow this guide will take longer to review and thus typically be picked up with lower priority by the community.*
## Contribution Checklist
- Make sure that the pull request corresponds to a [JIRA issue](https://issues.apache.org/jira/projects/FLINK/issues). Exceptions are made for typos in JavaDoc or documentation files, which need no JIRA issue.
- Name the pull request in the form "[FLINK-XXXX] [component] Title of the pull request", where *FLINK-XXXX* should be replaced by the actual issue number. Skip *component* if you are unsure about which is the best component.
Typo fixes that have no associated JIRA issue should be named following this pattern: `[hotfix] [docs] Fix typo in event time introduction` or `[hotfix] [javadocs] Expand JavaDoc for PuncuatedWatermarkGenerator`.
- Fill out the template below to describe the changes contributed by the pull request. That will give reviewers the context they need to do the review.
- Make sure that the change passes the automated tests, i.e., `mvn clean verify` passes. You can set up Azure Pipelines CI to do that following [this guide](https://cwiki.apache.org/confluence/display/FLINK/Azure+Pipelines#AzurePipelines-Tutorial:SettingupAzurePipelinesforaforkoftheFlinkrepository).
- Each pull request should address only one issue, not mix up code from multiple issues.
- Each commit in the pull request has a meaningful commit message (including the JIRA id)
- Once all items of the checklist are addressed, remove the above text and this checklist, leaving only the filled out template below.
**(The sections below can be removed for hotfixes of typos)**
-->
## What is the purpose of the change
Further extend the configurability of the Runtime Web.
https://issues.apache.org/jira/browse/FLINK-26207
## Brief change log
- Part of the Angular components now depends on pre-defined config objects. To be more specific, This change involves components in Job Overview, JobManager and TaskManager modules.
- Refine the styles and rxjs pipes in some of these components
## Verifying this change
This change is a trivial rework / code cleanup without any test coverage.
## Does this pull request potentially affect one of the following parts:
- Dependencies (does it add or upgrade a dependency): no
- The public API, i.e., is any changed class annotated with `@Public(Evolving)`: no
- The serializers: no
- The runtime per-record code paths (performance sensitive): no
- Anything that affects deployment or recovery: JobManager (and its components), Checkpointing, Kubernetes/Yarn, ZooKeeper: no
- The S3 file system connector: no
## Documentation
- Does this pull request introduce a new feature? no
- If yes, how is the feature documented? not applicable
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [flink] simplejason commented on a diff in pull request #19712: [FLINK-26207][runtime-web] make web ui's components depend on injected configurable object
Posted by GitBox <gi...@apache.org>.
simplejason commented on code in PR #19712:
URL: https://github.com/apache/flink/pull/19712#discussion_r880399223
##########
flink-runtime-web/web-dashboard/src/app/pages/task-manager/log-detail/task-manager-log-detail.component.ts:
##########
@@ -71,27 +68,17 @@ export class TaskManagerLogDetailComponent implements OnInit, OnDestroy {
}
public reloadLog(): void {
- if (!this.taskManagerDetail) {
- return;
- }
-
this.isLoading = true;
this.cdr.markForCheck();
this.taskManagerService
- .loadLog(this.taskManagerDetail.id, this.logName)
+ .loadLog(this.taskManagerId, this.logName)
.pipe(takeUntil(this.destroy$))
Review Comment:
`takeUntil` same above
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [flink] yangjunhan commented on pull request #19712: [FLINK-26207][runtime-web] make web ui's components depend on injected configurable object
Posted by GitBox <gi...@apache.org>.
yangjunhan commented on PR #19712:
URL: https://github.com/apache/flink/pull/19712#issuecomment-1134499944
> These changes turn the Flink UI into a public API as the changes are clearly intended for outside usage to fully customize Flink UI, not for reusability within the Flink project. As such, I think this requires a FLIP and not just a JIRA issue.
Thank you for the review! I have rearrange the PR into smaller logical commits that are easier to be reviewed :) . I also remove file changes which are irrelevant to the Jira ticket (those issues can be fixed in a separate PR).
The main idea of this PR is to follow Angular's best Dependency Injection practice and refine the technical architecture of flink-runtime-web (make integration or so-called "reused" easily and so better advertisement :) ).
Despite the size of it, this change is essentially related to pure Frontend technical refinement. FLIP should only be raised if one affects available features that user may use, but it won't even be acknowledged by them. As such, it could be a waste of our community resources to discuss a Frontend technical change **that won't affect our users**, so perhaps we can resolve this change here directly.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [flink] yangjunhan commented on a diff in pull request #19712: [FLINK-26207][runtime-web] make web ui's components depend on injected configurable object
Posted by GitBox <gi...@apache.org>.
yangjunhan commented on code in PR #19712:
URL: https://github.com/apache/flink/pull/19712#discussion_r879269798
##########
flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-detail/job-manager-log-detail.component.ts:
##########
@@ -35,20 +40,24 @@ import { EditorOptions } from 'ng-zorro-antd/code-editor/typings';
styleUrls: ['./job-manager-log-detail.component.less']
})
export class JobManagerLogDetailComponent implements OnInit, OnDestroy {
+ public editorOptions: EditorOptions;
public logs = '';
public logName = '';
public downloadUrl = '';
public isLoading = false;
public isFullScreen = false;
- public editorOptions: EditorOptions = flinkEditorOptions;
private readonly destroy$ = new Subject<void>();
constructor(
private readonly jobManagerService: JobManagerService,
private readonly cdr: ChangeDetectorRef,
- private readonly activatedRoute: ActivatedRoute
- ) {}
+ private readonly activatedRoute: ActivatedRoute,
+ private readonly configService: ConfigService,
+ @Inject(JOB_MANAGER_MODULE_CONFIG) readonly moduleConfig: JobManagerModuleConfig
+ ) {
+ this.editorOptions = moduleConfig.editorOptions || JOB_MANAGER_MODULE_DEFAULT_CONFIG.editorOptions;
Review Comment:
This is because `editorOptions` can be omitted if someone overrides the whole `moduleConfig` through the token.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [flink] simplejason commented on a diff in pull request #19712: [FLINK-26207][runtime-web] make web ui's components depend on injected configurable object
Posted by GitBox <gi...@apache.org>.
simplejason commented on code in PR #19712:
URL: https://github.com/apache/flink/pull/19712#discussion_r880383726
##########
flink-runtime-web/web-dashboard/src/app/pages/job-manager/logs/job-manager-logs.component.ts:
##########
@@ -53,7 +67,9 @@ export class JobManagerLogsComponent implements OnInit, OnDestroy {
this.cdr.markForCheck();
this.jobManagerService
.loadLogs()
- .pipe(takeUntil(this.destroy$))
+ .pipe(
+ catchError(() => of('')),
+ takeUntil(this.destroy$))
Review Comment:
`takeUntil` is no need to use since http request will complete by self.(It already implements takeuntil internally)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [flink] simplejason commented on a diff in pull request #19712: [FLINK-26207][runtime-web] make web ui's components depend on injected configurable object
Posted by GitBox <gi...@apache.org>.
simplejason commented on code in PR #19712:
URL: https://github.com/apache/flink/pull/19712#discussion_r880375414
##########
flink-runtime-web/web-dashboard/src/app/share/common/addon/addon-inline/addon-inline.component.html:
##########
@@ -0,0 +1,40 @@
+<!--
+ ~ 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.
+ -->
+<span *ngIf="isLoading; else reloadTpl">Loading...</span>
Review Comment:
Do you think we need to make `Loading...` look like an `A` tag, just like `reload` instead of text with black color?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [flink] simplejason commented on a diff in pull request #19712: [FLINK-26207][runtime-web] make web ui's components depend on injected configurable object
Posted by GitBox <gi...@apache.org>.
simplejason commented on code in PR #19712:
URL: https://github.com/apache/flink/pull/19712#discussion_r880380484
##########
flink-runtime-web/web-dashboard/src/app/pages/job-manager/metrics/job-manager-metrics.component.less:
##########
@@ -18,55 +18,45 @@
@import "theme";
-.wrapper {
- margin: @margin-lg;
-}
-
-.header-icon {
- position: relative;
- top: 1px;
-}
-
-nz-progress {
- display: block;
- width: 90%;
+:host {
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ overflow: auto;
+ padding: @padding-md;
::ng-deep {
- .ant-progress-inner {
- border-radius: 0 !important;
+ .ant-table-cell {
+ font-size: @font-size-sm;
}
}
-}
-
-.flink-memory-model {
- margin-bottom: @margin-md;
- ::ng-deep {
- table {
- border-collapse: collapse;
- }
+ .header-icon {
+ position: relative;
+ top: 1px;
Review Comment:
not necessary
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [flink] simplejason commented on a diff in pull request #19712: [FLINK-26207][runtime-web] make web ui's components depend on injected configurable object
Posted by GitBox <gi...@apache.org>.
simplejason commented on code in PR #19712:
URL: https://github.com/apache/flink/pull/19712#discussion_r880384250
##########
flink-runtime-web/web-dashboard/src/app/pages/job-manager/stdout/job-manager-stdout.component.ts:
##########
@@ -54,7 +67,10 @@ export class JobManagerStdoutComponent implements OnInit, OnDestroy {
this.cdr.markForCheck();
this.jobManagerService
.loadStdout()
- .pipe(takeUntil(this.destroy$))
+ .pipe(
+ catchError(() => of('')),
+ takeUntil(this.destroy$)
Review Comment:
`takeUntil` is no need to use.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [flink] flinkbot commented on pull request #19712: [FLINK-26207][runtime-web] make web ui's components depend on injected configurable object
Posted by GitBox <gi...@apache.org>.
flinkbot commented on PR #19712:
URL: https://github.com/apache/flink/pull/19712#issuecomment-1125721274
<!--
Meta data
{
"version" : 1,
"metaDataEntries" : [ {
"hash" : "845ec0bee1907c20720df4c1789d66f220cae750",
"status" : "UNKNOWN",
"url" : "TBD",
"triggerID" : "845ec0bee1907c20720df4c1789d66f220cae750",
"triggerType" : "PUSH"
} ]
}-->
## CI report:
* 845ec0bee1907c20720df4c1789d66f220cae750 UNKNOWN
<details>
<summary>Bot commands</summary>
The @flinkbot bot supports the following commands:
- `@flinkbot run azure` re-run the last Azure build
</details>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [flink] Airblader commented on pull request #19712: [FLINK-26207][runtime-web] make web ui's components depend on injected configurable object
Posted by GitBox <gi...@apache.org>.
Airblader commented on PR #19712:
URL: https://github.com/apache/flink/pull/19712#issuecomment-1138373653
@xintongsong Thanks for the background. It sounds to me that the changes proposed here should be part of that (future) FLIP then. As a standalone change I don't see the merit of this PR, and rather think in the context of the FLIP the UI changes should be discussed as well.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [flink] xintongsong commented on pull request #19712: [FLINK-26207][runtime-web] make web ui's components depend on injected configurable object
Posted by GitBox <gi...@apache.org>.
xintongsong commented on PR #19712:
URL: https://github.com/apache/flink/pull/19712#issuecomment-1138239988
Hi @Airblader,
I'm not an expert in frontend techniques, thus have not reviewed this PR. But I can share some background on this.
@yangjunhan and I are working together preparing a serial of Flink History Server improvements. History server was not very crucial when Flink mainly focused on streaming workloads, but is becoming a weakness with more and more batch workloads supported. And one of the major aspects that the history server needs to improve is the UI and interactions.
Currently, Flink history server simply reuses the runtime WebUI. This leads to poor experiences.
- Not all information / functions are available after the job finishes. E.g., memory footprints, busy/idle/back-pressure status, flame-graph, etc. Leaving these unavailable information / functions on the WebUI confuses users.
- With the unavailable things taking the page spaces, those users truly care after the job finishes are separated into different pages, requires more clicks or page switchings to access.
On the other hand, history server and runtime WebUIs do share many things in common, which makes re-creating a new WebUI from scratch for history server makes less sense. I believe this is where the idea making WebUI components configurable and customizable comes from.
FYI, the history server improvements are still in preparation and we don't have a FLIP to present at the moment. But I did put it into the [1.16 feature plan](https://cwiki.apache.org/confluence/display/FLINK/1.16+Release).
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [flink] yangjunhan commented on pull request #19712: [FLINK-26207][runtime-web] make web ui's components depend on injected configurable object
Posted by GitBox <gi...@apache.org>.
yangjunhan commented on PR #19712:
URL: https://github.com/apache/flink/pull/19712#issuecomment-1125721477
Hi, @Airblader. There is another PR for you to be reviewed. Thank you in advance for your time.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [flink] xintongsong commented on pull request #19712: [FLINK-26207][runtime-web] make web ui's components depend on injected configurable object
Posted by GitBox <gi...@apache.org>.
xintongsong commented on PR #19712:
URL: https://github.com/apache/flink/pull/19712#issuecomment-1138414598
@Airblader Agreed that the UI changes should definitely be discussed and voted on as a FLIP. I would not consider it as a problem that the non behavior changing refactor may go in parallel to preparing the FLIP for discussion for efficiency. If that troubles you, I'd also be fine to suspend this PR and wait for the FLIP process. Neutral on this.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [flink] Airblader commented on pull request #19712: [FLINK-26207][runtime-web] make web ui's components depend on injected configurable object
Posted by GitBox <gi...@apache.org>.
Airblader commented on PR #19712:
URL: https://github.com/apache/flink/pull/19712#issuecomment-1135488515
> The main idea of this PR is to follow Angular's best Dependency Injection practice
I disagree that having configuration for which components to render in specific locations is about some "DI best practice". Where is this supposed best practice coming from? Why are we doing it only for these specific components and not all other components?
Making things configurable only makes sense when someone can (and wants to) actually change the configuration. The questions that need to be answered here are: who wants to modify this configuration and why? How would they be able to do so (how do you provide a custom component)? How do we ensure that this doesn't break in the future? Where is all of this documented?
> this change is essentially related to pure Frontend technical refinement
If we truly are making this change purely for technical reasons, I would oppose it as I see it as unnecessary complexity to have an indirection of which component to render even though we don't even use different configurations anywhere.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [flink] simplejason commented on a diff in pull request #19712: [FLINK-26207][runtime-web] make web ui's components depend on injected configurable object
Posted by GitBox <gi...@apache.org>.
simplejason commented on code in PR #19712:
URL: https://github.com/apache/flink/pull/19712#discussion_r880399930
##########
flink-runtime-web/web-dashboard/src/app/pages/task-manager/logs/task-manager-logs.component.ts:
##########
@@ -65,21 +69,13 @@ export class TaskManagerLogsComponent implements OnInit, OnDestroy {
public reload() {
this.loading = true;
this.cdr.markForCheck();
- if (this.taskManagerDetail) {
- this.taskManagerService
- .loadLogs(this.taskManagerDetail.id)
- .pipe(takeUntil(this.destroy$))
- .subscribe(
- data => {
- this.loading = false;
- this.logs = data;
- this.cdr.markForCheck();
- },
- () => {
- this.loading = false;
- this.cdr.markForCheck();
- }
- );
- }
+ this.taskManagerService
+ .loadLogs(this.taskManagerId)
+ .pipe(catchError(() => of('')), takeUntil(this.destroy$))
Review Comment:
`takeUntil`
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [flink] simplejason commented on a diff in pull request #19712: [FLINK-26207][runtime-web] make web ui's components depend on injected configurable object
Posted by GitBox <gi...@apache.org>.
simplejason commented on code in PR #19712:
URL: https://github.com/apache/flink/pull/19712#discussion_r880376654
##########
flink-runtime-web/web-dashboard/src/app/share/common/addon/addon-inline/addon-inline.component.less:
##########
@@ -15,19 +15,13 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
:host {
position: absolute;
top: 8px;
right: 32px;
-}
-
-.operate-icon {
- margin-right: 6px;
-}
+ z-index: 1;
-.flex-center {
- display: flex;
- align-items: center;
- justify-content: center;
+ .operate-icon {
+ margin-right: 6px;
Review Comment:
nit: @margin-xss instead of hard code :)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [flink] Airblader commented on a diff in pull request #19712: [FLINK-26207][runtime-web] make web ui's components depend on injected configurable object
Posted by GitBox <gi...@apache.org>.
Airblader commented on code in PR #19712:
URL: https://github.com/apache/flink/pull/19712#discussion_r879062241
##########
flink-runtime-web/web-dashboard/src/app/app.component.less:
##########
@@ -137,9 +137,9 @@ nz-header {
}
nz-content {
+ display: flex;
Review Comment:
These changes are unrelated to the config object change. Given the size of the PR, can you please at least split this (and all other unrelated changes) into logical, unrelated commits?
Edit: This should actually be split into separate PRs. The PR is quite big and most changes are unrelated to the JIRA issue.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [flink] simplejason commented on a diff in pull request #19712: [FLINK-26207][runtime-web] make web ui's components depend on injected configurable object
Posted by GitBox <gi...@apache.org>.
simplejason commented on code in PR #19712:
URL: https://github.com/apache/flink/pull/19712#discussion_r880397712
##########
flink-runtime-web/web-dashboard/src/app/pages/job/overview/taskmanagers/job-overview-drawer-taskmanagers.component.html:
##########
@@ -17,81 +17,81 @@
-->
<nz-table
- #table
- class="small full-height"
- [nzSize]="'small'"
+ nzSize="small"
[nzLoading]="isLoading"
[nzData]="listOfTaskManager"
- [nzScroll]="{ x: '1500px', y: 'calc( 100vh - 35px )' }"
+ [nzScroll]="{ x: '1550px', y: 'calc( 100% - 36px )' }"
[nzFrontPagination]="false"
[nzShowPagination]="false"
+ [nzVirtualItemSize]="virtualItemSize"
+ [nzVirtualMinBufferPx]="300"
+ [nzVirtualMaxBufferPx]="300"
+ [nzVirtualForTrackBy]="trackByHost"
>
<thead>
<tr>
- <th nzWidth="160px" nzLeft="0px" [nzSortFn]="sortHostFn">Host</th>
- <th nzWidth="50px" nzLeft="160px">LOG</th>
+ <th nzWidth="160px" nzLeft [nzSortFn]="sortHostFn">Host</th>
<th nzWidth="150px" [nzSortFn]="sortReadBytesFn">Bytes received</th>
<th nzWidth="150px" [nzSortFn]="sortReadRecordsFn">Records received</th>
<th nzWidth="120px" [nzSortFn]="sortWriteBytesFn">Bytes sent</th>
<th nzWidth="150px" [nzSortFn]="sortWriteRecordsFn">Records sent</th>
<th nzWidth="200px" [nzSortFn]="sortStartTimeFn">Start Time</th>
<th nzWidth="200px" [nzSortFn]="sortEndTimeFn">End Time</th>
- <th nzWidth="100px" [nzSortFn]="sortDurationFn">Duration</th>
+ <th nzWidth="150px" [nzSortFn]="sortDurationFn">Duration</th>
<th nzWidth="120px">Tasks</th>
- <th nzWidth="100px" nzRight="0px" [nzSortFn]="sortStatusFn">Status</th>
+ <th nzWidth="100px" nzRight [nzSortFn]="sortStatusFn">Status</th>
+ <th nzWidth="50px" nzRight>More</th>
</tr>
</thead>
<tbody>
- <tr *ngFor="let taskManager of table.data; trackBy: trackByHost">
- <td nzLeft="0px">{{ taskManager.host }}</td>
- <td nzLeft="160px">
- <span
- *ngIf="
- !taskManager['taskmanager-id'] || taskManager['taskmanager-id'] === '(unassigned)';
- else hrefTpl
- "
- >
- -
- </span>
- <ng-template #hrefTpl>
- <a
- [routerLink]="['/task-manager', taskManager['taskmanager-id'], 'logs']"
- target="_blank"
- >
- LOG
- </a>
- </ng-template>
- </td>
- <td>
- <span *ngIf="taskManager.metrics['read-bytes-complete']; else loadingTemplate">
- {{ taskManager.metrics['read-bytes'] | humanizeBytes }}
- </span>
- </td>
- <td>
- <span *ngIf="taskManager.metrics['read-records-complete']; else loadingTemplate">
- {{ taskManager.metrics['read-records'] | number }}
- </span>
- </td>
- <td>
- <span *ngIf="taskManager.metrics['write-bytes-complete']; else loadingTemplate">
- {{ taskManager.metrics['write-bytes'] | humanizeBytes }}
- </span>
- </td>
- <td>
- <span *ngIf="taskManager.metrics['write-records-complete']; else loadingTemplate">
- {{ taskManager.metrics['write-records'] | number }}
- </span>
- </td>
- <td>{{ taskManager['start-time'] | humanizeDate: 'yyyy-MM-dd HH:mm:ss' }}</td>
- <td>{{ taskManager['end-time'] | humanizeDate: 'yyyy-MM-dd HH:mm:ss' }}</td>
- <td>{{ taskManager['duration'] | humanizeDuration }}</td>
- <td>
- <flink-task-badge [tasks]="taskManager['status-counts']"></flink-task-badge>
- </td>
- <td nzRight="0px">
- <flink-job-badge [state]="taskManager.status"></flink-job-badge>
- </td>
- </tr>
+ <ng-template nz-virtual-scroll let-data>
+ <ng-container *ngIf="narrowLogData(data) as taskManager">
+ <tr>
+ <td nzLeft>{{ taskManager.host }}</td>
Review Comment:
nit: we can display an ellipsis if host is longger than the width
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [flink] simplejason commented on a diff in pull request #19712: [FLINK-26207][runtime-web] make web ui's components depend on injected configurable object
Posted by GitBox <gi...@apache.org>.
simplejason commented on code in PR #19712:
URL: https://github.com/apache/flink/pull/19712#discussion_r880371223
##########
flink-runtime-web/web-dashboard/src/app/pages/job-manager/configuration/job-manager-configuration.component.ts:
##########
@@ -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$)
Review Comment:
I think `takeUntil` is not required because Http-based implementation of loadConfig will complete and only excute once.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [flink] yangjunhan closed pull request #19712: [FLINK-26207][runtime-web] make web ui's components depend on injected configurable object
Posted by GitBox <gi...@apache.org>.
yangjunhan closed pull request #19712: [FLINK-26207][runtime-web] make web ui's components depend on injected configurable object
URL: https://github.com/apache/flink/pull/19712
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [flink] simplejason commented on a diff in pull request #19712: [FLINK-26207][runtime-web] make web ui's components depend on injected configurable object
Posted by GitBox <gi...@apache.org>.
simplejason commented on code in PR #19712:
URL: https://github.com/apache/flink/pull/19712#discussion_r880388686
##########
flink-runtime-web/web-dashboard/src/app/pages/job/overview/backpressure/job-overview-drawer-backpressure.component.html:
##########
@@ -17,14 +17,17 @@
-->
<nz-table
- class="no-border small full-height"
- [nzSize]="'small'"
+ nzSize="small"
[nzLoading]="isLoading"
[nzData]="listOfSubTaskBackpressure"
[nzScroll]="{ y: 'calc( 100vh - 72px )' }"
Review Comment:
`100vh - 72px` may cause scrollbar displaying, maybe we can change it to be `100% - 72px`?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [flink] yangjunhan commented on a diff in pull request #19712: [FLINK-26207][runtime-web] make web ui's components depend on injected configurable object
Posted by GitBox <gi...@apache.org>.
yangjunhan commented on code in PR #19712:
URL: https://github.com/apache/flink/pull/19712#discussion_r881145686
##########
flink-runtime-web/web-dashboard/src/app/pages/job/overview/backpressure/job-overview-drawer-backpressure.component.html:
##########
@@ -17,14 +17,17 @@
-->
<nz-table
- class="no-border small full-height"
- [nzSize]="'small'"
+ nzSize="small"
[nzLoading]="isLoading"
[nzData]="listOfSubTaskBackpressure"
[nzScroll]="{ y: 'calc( 100vh - 72px )' }"
Review Comment:
This is a bug brought by FLINK-27441. I will fix it here.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [flink] yangjunhan commented on pull request #19712: [FLINK-26207][runtime-web] make web ui's components depend on injected configurable object
Posted by GitBox <gi...@apache.org>.
yangjunhan commented on PR #19712:
URL: https://github.com/apache/flink/pull/19712#issuecomment-1136953209
Hi @Airblader. I understand the concerns from your perspectives. Let me elaborate a bit more and talk about the main advantages it brings:
- This change helps to make each involved core module/component more **standardized**, and can be customized via a common high-level configuration abstraction.
- **Increase the potential reusability among the components**. Since the core modules become more extensible and "modular", one can easily reuse and integrate them for the future feature/page implementation if needed.
I'd like to answer your questions as well:
> who wants to modify this configuration and why?
People who are implementing a new feature in the future can save works from implementing components of similar template views. For example, let's assume implementing history server abilities just like the Spark does, it would help a lot if we can reuse some of the existing components (subtasks, taskmanagers and metrics, etc.).
> How would they be able to do so (how do you provide a custom component)?
There are only 2 steps to reuse a component with some customization. First, define a module config factory:
```typescript
const OVERRIDE_JOB_OVERVIEW_MODULE_CONFIG_FACTORY = (): JobOverviewModuleConfig => {
return {
// provide a custom action in the taskManager table
// MyCustomActionComponent and TaskManagerActionComponent share a common abstraction
taskManagerActionComponent: MyCustomActionComponent
};
};
```
Then, provide this factory to the target module inside the `@NgModule`:
```typescript
providers: [
{
provide: JOB_OVERVIEW_MODULE_CONFIG,
useFactory: OVERRIDE_JOB_OVERVIEW_MODULE_CONFIG_FACTORY
},
...
]
```
After doing such, one can then reuse the `JobOverviewDrawerTaskmanagersComponent` in a new module.
> How do we ensure that this doesn't break in the future?
As long as we do not overuse the configurability of components, the complexity is manageable. Moreover, I can provide a README.md to throughly describe how to develop a new configuration which allows others to follow in the future.
> Where is all of this documented?
As mentioned above, I am happy to provide a guideline for this if needed.
Please do rethink about this proposal, thank you :)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [flink] Airblader commented on pull request #19712: [FLINK-26207][runtime-web] make web ui's components depend on injected configurable object
Posted by GitBox <gi...@apache.org>.
Airblader commented on PR #19712:
URL: https://github.com/apache/flink/pull/19712#issuecomment-1138417284
FLIPs can be rejected or heavily modified before being accepted. As I pointed out, as a standalone change I would oppose this PR due to the unnecessary complexity. Whether these changes are needed and are the best approach is something we can discuss in the context of the FLIP. That way these changes are also actually associated with the FLIP.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [flink] Airblader commented on a diff in pull request #19712: [FLINK-26207][runtime-web] make web ui's components depend on injected configurable object
Posted by GitBox <gi...@apache.org>.
Airblader commented on code in PR #19712:
URL: https://github.com/apache/flink/pull/19712#discussion_r879062241
##########
flink-runtime-web/web-dashboard/src/app/app.component.less:
##########
@@ -137,9 +137,9 @@ nz-header {
}
nz-content {
+ display: flex;
Review Comment:
These changes are unrelated to the config object change. Given the size of the PR, can you please at least split this (and all other unrelated changes) into logical, unrelated commits? We can still do it in one PR.
##########
flink-runtime-web/web-dashboard/src/app/pages/job-manager/configuration/job-manager-configuration.component.ts:
##########
@@ -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(listOfConfig => {
+ this.listOfConfig = listOfConfig.sort((a, b) => a.key.localeCompare(b.key));
Review Comment:
I assume `key` can never be undefined/null, correct? Otherwise this could throw an error that it didn't use to throw.
##########
flink-runtime-web/web-dashboard/src/app/pages/job-manager/thread-dump/job-manager-thread-dump.component.ts:
##########
@@ -31,16 +35,26 @@ import { EditorOptions } from 'ng-zorro-antd/code-editor/typings';
changeDetection: ChangeDetectionStrategy.OnPush
})
export class JobManagerThreadDumpComponent implements OnInit, OnDestroy {
- public readonly editorOptions: EditorOptions = flinkEditorOptions;
-
+ public editorOptions: EditorOptions;
public dump = '';
public loading = true;
+ public downloadUrl = '';
+ public downloadName = '';
private readonly destroy$ = new Subject<void>();
- constructor(private readonly jobManagerService: JobManagerService, private readonly cdr: ChangeDetectorRef) {}
+ constructor(
+ private readonly jobManagerService: JobManagerService,
+ private readonly configService: ConfigService,
+ private readonly cdr: ChangeDetectorRef,
+ @Inject(JOB_MANAGER_MODULE_CONFIG) readonly moduleConfig: JobManagerModuleConfig
+ ) {
+ this.editorOptions = moduleConfig.editorOptions || JOB_MANAGER_MODULE_DEFAULT_CONFIG.editorOptions;
+ }
public ngOnInit(): void {
+ this.downloadUrl = `${this.configService.BASE_URL}/jobmanager/thread-dump`;
+ this.downloadName = `jobmanager_thread_dump`;
Review Comment:
These can be assigned at their declaration directly (and could be made `readonly` then).
##########
flink-runtime-web/web-dashboard/src/app/pages/job-manager/job-manager.config.ts:
##########
@@ -0,0 +1,41 @@
+/*
+ * 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 { InjectionToken } from '@angular/core';
+
+import { flinkEditorOptions } from '@flink-runtime-web/share/common/editor/editor-config';
+import { EditorOptions } from 'ng-zorro-antd/code-editor/typings';
+
+export interface JobManagerModuleConfig {
+ editorOptions?: EditorOptions;
+ jobManagerLogRouterFactory?: (...args: string[]) => string | string[];
+}
+
+export const JOB_MANAGER_MODULE_DEFAULT_CONFIG: Required<JobManagerModuleConfig> = {
+ editorOptions: flinkEditorOptions,
+ jobManagerLogRouterFactory: jobManagerName => [jobManagerName]
+};
+
+export const JOB_MANAGER_MODULE_CONFIG = new InjectionToken<JobManagerModuleConfig>('job-manager-module-config', {
+ providedIn: 'root',
+ factory: JOB_MANAGER_MODULE_CONFIG_FACTORY
+});
+
+export function JOB_MANAGER_MODULE_CONFIG_FACTORY(): JobManagerModuleConfig {
Review Comment:
This doesn't need to be exported, I think.
##########
flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-detail/job-manager-log-detail.component.ts:
##########
@@ -35,20 +40,24 @@ import { EditorOptions } from 'ng-zorro-antd/code-editor/typings';
styleUrls: ['./job-manager-log-detail.component.less']
})
export class JobManagerLogDetailComponent implements OnInit, OnDestroy {
+ public editorOptions: EditorOptions;
public logs = '';
public logName = '';
public downloadUrl = '';
public isLoading = false;
public isFullScreen = false;
- public editorOptions: EditorOptions = flinkEditorOptions;
private readonly destroy$ = new Subject<void>();
constructor(
private readonly jobManagerService: JobManagerService,
private readonly cdr: ChangeDetectorRef,
- private readonly activatedRoute: ActivatedRoute
- ) {}
+ private readonly activatedRoute: ActivatedRoute,
+ private readonly configService: ConfigService,
+ @Inject(JOB_MANAGER_MODULE_CONFIG) readonly moduleConfig: JobManagerModuleConfig
+ ) {
+ this.editorOptions = moduleConfig.editorOptions || JOB_MANAGER_MODULE_DEFAULT_CONFIG.editorOptions;
Review Comment:
Why do we need this fallback to the non-injected version?
##########
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'"
Review Comment:
nit: all `[foo]="'bar'"` could just be written as `foo="bar"`.
##########
flink-runtime-web/web-dashboard/src/app/pages/job/overview/accumulators/job-overview-drawer-accumulators.component.html:
##########
@@ -34,11 +38,13 @@
</tr>
</thead>
<tbody>
- <tr *ngFor="let accumulator of listOfAccumulator; trackBy: trackByName">
- <td>{{ accumulator.name }}</td>
- <td>{{ accumulator.type }}</td>
- <td>{{ (accumulator.value | number: '1.0-3') || accumulator.value }}</td>
- </tr>
+ <ng-template nz-virtual-scroll let-data>
+ <tr>
Review Comment:
Can we use a `typDefinition()` here to enforce the types a bit?
##########
flink-runtime-web/web-dashboard/src/app/pages/job/exceptions/job-exceptions.component.less:
##########
@@ -35,8 +40,8 @@
}
nz-code-editor {
- position: relative;
- height: calc(~"100vh - 310px");
+ position: absolute;
Review Comment:
Have you tried this in relevant browsers? I would have expected this to need something like
```
top: 0;
left: 0;
bottom: 0;
right: 0;
```
Or does nz-code-editor detect and handle this?
##########
flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-detail/job-manager-log-detail.component.ts:
##########
@@ -66,6 +75,12 @@ export class JobManagerLogDetailComponent implements OnInit, OnDestroy {
this.jobManagerService
.loadLog(this.logName)
.pipe(
+ catchError(() => {
Review Comment:
What is the reason for this change? What does it have to do with the overall PR?
##########
flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-list/job-manager-log-list.component.less:
##########
@@ -19,7 +19,26 @@
@import "theme";
:host {
- ::ng-deep .ant-card-body {
- padding: 0;
+ display: flex;
+ flex: 1;
+ padding: @padding-md;
+
+ ::ng-deep {
+ ::-webkit-scrollbar {
+ display: none;
+ }
+
+ nz-table,
+ nz-spin,
+ cdk-virtual-scroll-viewport,
+ nz-table-inner-scroll,
+ .ant-spin-container,
+ .ant-table {
+ height: 100%;
+ }
Review Comment:
(This all seems very hacky and fragile. It'd be great of ng-zorro exposed an API to achieve this…)
##########
flink-runtime-web/web-dashboard/src/app/pages/job/overview/accumulators/job-overview-drawer-accumulators.component.html:
##########
@@ -47,28 +53,34 @@
[nzSize]="'small'"
[nzLoading]="isLoading"
[nzData]="listOfSubTaskAccumulator"
- [nzScroll]="{ y: 'calc( 100vh - 72px )' }"
+ [nzScroll]="{ y: '100%' }"
[nzFrontPagination]="false"
[nzShowPagination]="false"
+ [nzVirtualItemSize]="virtualItemSize"
+ [nzVirtualMinBufferPx]="300"
+ [nzVirtualMaxBufferPx]="300"
+ [nzVirtualForTrackBy]="trackByName"
>
<thead>
<tr>
- <th nzWidth="25%" nzLeft="0px">SubTask</th>
+ <th nzWidth="25%" nzLeft>SubTask</th>
<th nzWidth="25%">Name</th>
<th nzWidth="25%">Type</th>
- <th nzWidth="25%" nzRight="0px">Value</th>
+ <th nzWidth="25%" nzRight>Value</th>
</tr>
</thead>
<tbody>
- <tr *ngFor="let data of listOfSubTaskAccumulator; trackBy: trackByName">
- <td nzLeft="0px">
- ({{ data.subtask }}) {{ data.host }}, attempt:
- {{ data.attempt + 1 }}
- </td>
- <td>{{ data.name }}</td>
- <td>{{ data.type }}</td>
- <td nzRight="0px">{{ data.value }}</td>
- </tr>
+ <ng-template nz-virtual-scroll let-data>
+ <tr>
Review Comment:
`typeDefinition()` here, too.
##########
flink-runtime-web/web-dashboard/src/app/pages/job/overview/job-overview.config.ts:
##########
@@ -0,0 +1,56 @@
+/*
+ * 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 { InjectionToken, Type } from '@angular/core';
+
+import {
+ JobOverviewSubtasksTableAction,
+ SubtasksTableActionComponent
+} from '@flink-runtime-web/pages/job/overview/subtasks/table-action/subtasks-table-action.component';
+import {
+ JobOverviewTaskManagersTableAction,
+ TaskmanagersTableActionComponent
+} from '@flink-runtime-web/pages/job/overview/taskmanagers/table-action/taskmanagers-table-action.component';
+import { BackpressureBadgeComponent } from '@flink-runtime-web/share/customize/backpressure-badge/backpressure-badge.component';
+import { JobBadgeComponent } from '@flink-runtime-web/share/customize/job-badge/job-badge.component';
+import { TaskBadgeComponent } from '@flink-runtime-web/share/customize/task-badge/task-badge.component';
+
+export interface JobOverviewModuleConfig {
+ taskManagerActionComponent?: Type<JobOverviewTaskManagersTableAction>;
+ subtaskActionComponent?: Type<JobOverviewSubtasksTableAction>;
+ stateBadgeComponent?: Type<unknown>;
+ taskCountBadgeComponent?: Type<unknown>;
+ backpressureBadgeComponent?: Type<unknown>;
Review Comment:
These configurations add a lot of complexity, but do not improve any reusability within Flink. It essentially turns Flink UI into its own public API.
##########
flink-runtime-web/web-dashboard/src/app/pages/job/overview/job-overview.config.ts:
##########
@@ -0,0 +1,56 @@
+/*
+ * 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 { InjectionToken, Type } from '@angular/core';
+
+import {
+ JobOverviewSubtasksTableAction,
+ SubtasksTableActionComponent
+} from '@flink-runtime-web/pages/job/overview/subtasks/table-action/subtasks-table-action.component';
+import {
+ JobOverviewTaskManagersTableAction,
+ TaskmanagersTableActionComponent
+} from '@flink-runtime-web/pages/job/overview/taskmanagers/table-action/taskmanagers-table-action.component';
+import { BackpressureBadgeComponent } from '@flink-runtime-web/share/customize/backpressure-badge/backpressure-badge.component';
+import { JobBadgeComponent } from '@flink-runtime-web/share/customize/job-badge/job-badge.component';
+import { TaskBadgeComponent } from '@flink-runtime-web/share/customize/task-badge/task-badge.component';
+
+export interface JobOverviewModuleConfig {
+ taskManagerActionComponent?: Type<JobOverviewTaskManagersTableAction>;
+ subtaskActionComponent?: Type<JobOverviewSubtasksTableAction>;
+ stateBadgeComponent?: Type<unknown>;
+ taskCountBadgeComponent?: Type<unknown>;
+ backpressureBadgeComponent?: Type<unknown>;
+}
+
+export const JOB_OVERVIEW_MODULE_DEFAULT_CONFIG: Required<JobOverviewModuleConfig> = {
+ taskManagerActionComponent: TaskmanagersTableActionComponent,
+ subtaskActionComponent: SubtasksTableActionComponent,
+ stateBadgeComponent: JobBadgeComponent,
+ taskCountBadgeComponent: TaskBadgeComponent,
+ backpressureBadgeComponent: BackpressureBadgeComponent
+};
+
+export const JOB_OVERVIEW_MODULE_CONFIG = new InjectionToken<JobOverviewModuleConfig>('job-manager-module-config', {
+ providedIn: 'root',
+ factory: JOB_OVERVIEW_MODULE_CONFIG_FACTORY
+});
+
+export function JOB_OVERVIEW_MODULE_CONFIG_FACTORY(): JobOverviewModuleConfig {
Review Comment:
Doesn't need to be exported.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [flink] Airblader commented on pull request #19712: [FLINK-26207][runtime-web] make web ui's components depend on injected configurable object
Posted by GitBox <gi...@apache.org>.
Airblader commented on PR #19712:
URL: https://github.com/apache/flink/pull/19712#issuecomment-1137172279
> one can easily reuse and integrate them for the future feature/page implementation
And what plans are there to use that in the future? I don't see the point in introducing such complex architecture so that maybe at some point in the future it could be used. As of right now, it is unnecessarily complex. If there are specific plans of what to do in the future, we should be looking at that and deciding based on that whether this architecture is justified or not.
There are several disadvantages to the change introduced in this PR. There's much more complexity, and inputs passed to the components are type-unsafe now. Even if we needed such an architecture, we might need to invest more work to make it a more stable solution.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [flink] simplejason commented on a diff in pull request #19712: [FLINK-26207][runtime-web] make web ui's components depend on injected configurable object
Posted by GitBox <gi...@apache.org>.
simplejason commented on code in PR #19712:
URL: https://github.com/apache/flink/pull/19712#discussion_r880384776
##########
flink-runtime-web/web-dashboard/src/app/pages/job-manager/thread-dump/job-manager-thread-dump.component.ts:
##########
@@ -52,21 +65,16 @@ export class JobManagerThreadDumpComponent implements OnInit, OnDestroy {
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();
- }
- );
- }
+ this.jobManagerService
+ .loadThreadDump()
+ .pipe(
+ catchError(() => of('')),
+ takeUntil(this.destroy$)
Review Comment:
`takeUntil` is no need to use.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [flink] simplejason commented on a diff in pull request #19712: [FLINK-26207][runtime-web] make web ui's components depend on injected configurable object
Posted by GitBox <gi...@apache.org>.
simplejason commented on code in PR #19712:
URL: https://github.com/apache/flink/pull/19712#discussion_r880383506
##########
flink-runtime-web/web-dashboard/src/app/pages/job-manager/metrics/job-manager-metrics.component.ts:
##########
@@ -43,13 +44,19 @@ export class JobManagerMetricsComponent implements OnInit, OnDestroy {
) {}
public ngOnInit(): void {
- this.jobManagerService.loadConfig().subscribe(data => {
- for (const item of data) {
- this.config[item.key] = item.value;
- }
- this.cdr.markForCheck();
- });
- this.statusService.refresh$.pipe(takeUntil(this.destroy$)).subscribe(() => {
+ this.jobManagerService
+ .loadConfig()
+ .pipe(
+ catchError(() => of([] as JobManagerConfig[])),
+ takeUntil(this.destroy$)
Review Comment:
`takeUntil` is no need to use
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [flink] simplejason commented on a diff in pull request #19712: [FLINK-26207][runtime-web] make web ui's components depend on injected configurable object
Posted by GitBox <gi...@apache.org>.
simplejason commented on code in PR #19712:
URL: https://github.com/apache/flink/pull/19712#discussion_r880399930
##########
flink-runtime-web/web-dashboard/src/app/pages/task-manager/logs/task-manager-logs.component.ts:
##########
@@ -65,21 +69,13 @@ export class TaskManagerLogsComponent implements OnInit, OnDestroy {
public reload() {
this.loading = true;
this.cdr.markForCheck();
- if (this.taskManagerDetail) {
- this.taskManagerService
- .loadLogs(this.taskManagerDetail.id)
- .pipe(takeUntil(this.destroy$))
- .subscribe(
- data => {
- this.loading = false;
- this.logs = data;
- this.cdr.markForCheck();
- },
- () => {
- this.loading = false;
- this.cdr.markForCheck();
- }
- );
- }
+ this.taskManagerService
+ .loadLogs(this.taskManagerId)
+ .pipe(catchError(() => of('')), takeUntil(this.destroy$))
Review Comment:
`takeUntil` is no need
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [flink] simplejason commented on a diff in pull request #19712: [FLINK-26207][runtime-web] make web ui's components depend on injected configurable object
Posted by GitBox <gi...@apache.org>.
simplejason commented on code in PR #19712:
URL: https://github.com/apache/flink/pull/19712#discussion_r880401074
##########
flink-runtime-web/web-dashboard/src/app/pages/task-manager/stdout/task-manager-stdout.component.ts:
##########
@@ -67,20 +70,16 @@ export class TaskManagerStdoutComponent implements OnInit, OnDestroy {
public reload(): void {
this.loading = true;
this.cdr.markForCheck();
- if (this.taskManagerDetail) {
- this.taskManagerService
- .loadStdout(this.taskManagerDetail.id)
- .pipe(takeUntil(this.destroy$))
- .subscribe(
- data => {
- this.loading = false;
- this.stdout = data;
- this.cdr.markForCheck();
- },
- () => {
- this.cdr.markForCheck();
- }
- );
- }
+ this.taskManagerService
+ .loadStdout(this.taskManagerId)
+ .pipe(
+ catchError(() => of('')),
+ takeUntil(this.destroy$)
Review Comment:
same above
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org