[FLINK-13386][web]: Fix frictions in the new default Web Frontend

[vthinkxie]

Fix frictions in the new default Web Frontend

https://issues.apache.org/jira/browse/FLINK-13386

What is the purpose of the change

Fix below bugs

• the jobmanager configuration is not sorted
• different sorting of the operators (the old UI showed the sources first)
• the drop-down list for choosing operator/tasks metrics is not sorted, which makes it super hard to screen through available metrics

There are also some views missing in the new UI that I personally found useful in the old UI:

• can't see watermarks for all operators at once
• no numeric metrics (only graphs)

Does this pull request potentially affect one of the following parts:

• Dependencies (does it add or upgrade a dependency): (yes / no)
• The public API, i.e., is any changed class annotated with @Public(Evolving): (yes / no)
• The serializers: (yes / no / don't know)
• The runtime per-record code paths (performance sensitive): (yes / no / don't know)
• Anything that affects deployment or recovery: JobManager (and its components), Checkpointing, Yarn/Mesos, ZooKeeper: (yes / no / don't know)
• The S3 file system connector: (yes / no / don't know)

Documentation

• Does this pull request introduce a new feature? (yes / no)
• If yes, how is the feature documented? (not applicable / docs / JavaDocs / not documented)

[flinkbot]

Thanks a lot for your contribution to the Apache Flink project. I'm the @flinkbot. I help the community
to review your pull request. We will use this comment to track the progress of the review.

Automated Checks

Last check on commit 89e02cd (Wed Oct 16 08:32:27 UTC 2019)

Warnings:

• No documentation files were touched! Remember to keep the Flink docs up to date!

_{Mention the bot in a comment to re-run the automated checks.}

Review Progress

• ❓ 1. The [description] looks good.
• ❓ 2. There is [consensus] that the contribution should go into to Flink.
• ❓ 3. Needs [attention] from.
• ❓ 4. The change fits into the overall [architecture].
• ❓ 5. Overall code [quality] is good.

Please see the Pull Request Review Guide for a full explanation of the review process.

The Bot is tracking the review progress through labels. Labels are applied according to the order of the review items. For consensus, approval by a Flink committer of PMC member is required

Bot commands

The @flinkbot bot supports the following commands:

• @flinkbot approve description to approve one or more aspects (aspects: description, consensus, architecture and quality)
• @flinkbot approve all to approve all aspects
• @flinkbot approve-until architecture to approve everything until architecture
• @flinkbot attention @username1 [@username2 ..] to require somebody's attention
• @flinkbot disapprove architecture to remove an approval you gave earlier

[flinkbot]

CI report:

• dbe883c : SUCCESS Build
• 706ebbe : FAILURE Build
• 12fa022 : SUCCESS Build
• 314bdcc : FAILURE Build
• b56ba2a : FAILURE Build
• cbe85dd : SUCCESS Build
• 89e02cd : FAILURE Build

[dawidwys]

Hi @vthinkxie
Thank you for the PR and really sorry it took me so long to check it.

All points beside can't see watermarks for all operators at once works as expected.
What I meant is I missed a view like this one in old frontend:

This is not a pressing issue though. We might just see if users complain about this view.

I can't really check the PR contents as I am not very familiar with the frontend technology. Will try to ask a friend for that.

[vthinkxie]

Hi @dawidwys
I got your point, I will fix it later, thanks for your check!

[vthinkxie]

@dawidwys
I have added watermarks in the graph and the subtask watermark in the tab

could you check this, and when there are too many vertexes, the web ui will request too many requests to the REST API, I have created another jira here https://issues.apache.org/jira/browse/FLINK-14147, I think we can merge this PR first, since it may need long time to resolve the jira.

[sorahn]

Codewise this looks good to me.

@dawidwys could you verify the functionality then we can call this good?

[dawidwys]

I verified the ui and it looks good... merging.