[ZEPPELIN-1766] Improve Interpreter Binding UI better (frontend)

[1ambda]

What is this PR for?

Current Interpreter Binding UI

• is too long so that users should scroll down to just close binding UI
• doesn't have filter
• hard to find the default interpreter
• has restart button which can be designed better

As the result of this PR the, binding UI would be better due to

• small size, not distracted UI
• well noticed the default binding (green color)
• simplicity by hiding restart button. even we can utilise the dropbox buttons to add more features for bindings (e.g adding link to go to a specific interpreter)

What type of PR is it?

[Improvement | Feature]

Todos

• - Improve binding UI
• - Add binding filter
• - Highlight default binding
• - Remove useless text and stress important message in binding usage
• - DON'T Highlight when filtering bindings

What is the Jira issue?

ZEPPELIN-1766

How should this be tested?

Open interpreter binding UI and manipulate it.

• insert filter keyword
• click restart buttons

Screenshots (if appropriate)

Questions:

• Does the licenses files need update? - NO
• Is there breaking changes for older versions? - NO
• Does this needs documentation? - NO

[Leemoonsoo]

Thanks @1ambda for working on UX improvement.

Personally, i'd prefer keep items in 1 column. Because it displays interpreter names (e.g. %spark, %pyspark, etc) at predictable location. i.e. beginning of each rows.

This change doesn't newline after each item and each item has variable length and it's hard to quickly read interpreter through eyes, even though there's filter. IMO.

Scrollbar will be there anyway when user have enough numbers of interpreter settings. Or when user have small screen size.

For this reason, how about think other way to help user easily find 'save' button?

[1ambda]

@Leemoonsoo Thanks for your opinion!

That's true there will be scrollbar anyway if we have many bindings.
So What about adding scroll bar to the binding list? so that users can find save, close button easily (I attached GIF)

[Leemoonsoo]

@1ambda that looks more make sense to me.
fyi, a related PR #423

[1ambda]

@Leemoonsoo

1. I'v just fixed code like commented above and updated GIF in the PR description
2. I also read Fix/fix notebook settings #423 you mentioned. It is about proportional height as i understand.

• I cannot guess how it is hard since i don't have experienced in such CSS work, but there are many resources we can refer :) (e.g a SO thread). Thus we can proceed the stopped PR by creating new separated PR if we need
• Regarding to binding UI, I don't see it is urgent because we have fixed size binding buttons. (maybe that's the reason why you mentioned it as fyi, i think)

Thanks again!

[cloverhearts]

I like a green button for default interpreter feedback.
especially, it seems to be a good choice for separating roles of interpreter.

[AhyoungRyu]

@1ambda Great initiative for improving interpreter binding page UI! I also agree that current binding page is getting longer (thanks to the Zeppelin contributors :D) and getting hard to find. Definitely needs to be improved. I tested this branch and checked the improvement. Let me share my thought about this patch in here.

• Currently the restart button is exposed so that ppl can know "I can restart this interpreter by clicking this button" by instinct. But \w this patch, ppl need to click "Carrot" button to open the dropdown menu and need to click "Restart" button to restart interpreter. And the user need to click at least one time to know about this.

• Seems don't need another tooltip in here since there is already the text "Restart"
  

• The color change for default interpreter is good idea i think! But the color is gone when it comes out as a result.
  

• Shirking overall size also good idea. Was quite verbose. But the thing that interpreter button has smaller height than dropdown menu is quite awkward to me.
  

• How about "Search bindable interpreters(?)" instead of "Search interpreter Bindings"? :D

Most of them in the above are just my personal opinion. So surely you don't need to apply all of them. And thanks again for your effort to improve the UI!

[1ambda]

Thanks for detailed review @AhyoungRyu :)

1. Fixed Inputbox placeholder

2. Fixed dropdown button size, Removed tooltip

3. Applied the green color to binding even when filtered

[1ambda]

• Selenium tests passed by fixing c377cf8
• The profile 3 (scala 2.10, spark 1.6.3) failed but irrelevant with this PR

// https://api.travis-ci.org/jobs/183520147/log.txt?deansi=true
Tests run: 4, Failures: 0, Errors: 1, Skipped: 0, Time elapsed: 0.646 sec <<< FAILURE! - in org.apache.zeppelin.dep.DependencyResolverTest
testLoad(org.apache.zeppelin.dep.DependencyResolverTest) Time elapsed: 0.633 sec <<< ERROR!
org.sonatype.aether.RepositoryException: Cannot fetch dependencies for com.databricks:spark-csv_2.10:1.3.0
at org.apache.zeppelin.dep.DependencyResolver.getArtifactsWithDep(DependencyResolver.java:181)
at org.apache.zeppelin.dep.DependencyResolver.loadFromMvn(DependencyResolver.java:131)
at org.apache.zeppelin.dep.DependencyResolver.load(DependencyResolver.java:79)
at org.apache.zeppelin.dep.DependencyResolver.load(DependencyResolver.java:96)
at org.apache.zeppelin.dep.DependencyResolver.load(DependencyResolver.java:88)
at org.apache.zeppelin.dep.DependencyResolverTest.testLoad(DependencyResolverTest.java:77)
Results :
Tests in error: DependencyResolverTest.testLoad:77 » Repository Cannot fetch dependencies for ...

@AhyoungRyu@Leemoonsoo please let me know if there is anything to be fixed. Thanks!

[zjffdu]

I also notice this failed test in travis. I think there're several jiras tracking the flaky test. The flaky test waste every developer's time. I think we should spend some time to fix them. What do you think ? \cc @Leemoonsoo@AhyoungRyu@1ambda

[1ambda]

Totally agree with @zjffdu's opinion. Here are unresolved flaky tests

I will work on 1739, 1749 first that i reported before.

[AhyoungRyu]

Thanks @1ambda. Seems it much better! Let me test again.
So true. Currently the CI test result makes us more confused and really hard to find what the problem is :(

[bzz]

Guys, if I may, I would suggest keep the discussion in PR focused on the subject of the PR and move general topics of project's CI stability to the public dev@ mailing list and appropriate JIRA issues. Main reason beeing that people in community, who are interested in the subject of CI stability have hirer chanced on collaborating and fixing it together that way.

Here is JIRA for the CI failing on spark-csv - ZEPPELIN-1797, \w some logs and failure examples.

[1ambda]

Hi all, Let me know if anything needed to be changed from code style to design!

Thanks :)

[1ambda]

Hi all, This PR looks like unbacked from the point of view design. I will close this issue. :)