Uploaded image for project: 'CDAP'
  1. CDAP
  2. CDAP-3086

[CDAP UI] current adapter UI (latest frm 07/24) needs fixes..


    • Type: Bug
    • Status: Resolved
    • Priority: Blocker
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: 3.1.0
    • Component/s: UI
    • Labels:
    • Sprint:
      FE Sprint ending 07/06
    • Rank:


      All issues listed below have been observed in cluster created this afternoon. Cluster name: adaptercluster2187-1000

      1. on the Start screen, Add App button has options in the dropdown that should be changed to the following:

      • Add App => Custom App [in PR stage - AW]
      • Add ETL Batch App => ETL Batch App [in PR stage - AW]
      • Add ETL Realtime App => ETL Realtime App [in PR stage - AW]
      • Un-published Adapters => ETL App Drafts [in PR stage - AW] Andrew, pls call this just Drafts
        - Pls add icons for ETL Batch and ETL App in this dropdown - the same icons we use for Type

      2. On clicking the Add App button, it has a weird inner shadow. Instead it should be changed to similar behavior as dropdown buttons across the UI - see attached Add App button behavior.png [in PR stage - AW]

      3. When I choose Add App > Un-published Adapters, I see a couple of issues in the following screen, listed below:
      3a. the URL should state "ns/default/apps/drafts" instead of "ns/default/apps/adapters"
      3b. This page should be titled All Drafts
      3c. The breadcrumb should say Home > All Drafts
      3d. Alignment issue with breadcrumb and page title - see attached [^ETLApplication Drafts.png]
      3e. This page should have a welcome message - "No Application Drafts. Create one now."

      4. Now I click on Add ETL Batch App.
      4a. The following screen contains the left and right panels that do not reflect the dimensions provided in the mock. Pls compare 'ETL Batch.png' to Sean's mock attached - Adapter_diagram_spec.png. Pls pay close attention to [in PR stage - AW]

      • height
      • width
      • font size
      • font color
      • height of each element
      • height of the block

      4b. The same applies for the panel on the right size as well [in PR stage - AW]

      • font size, general height and width are inconsistent when comparing to the mocks. Dimensions for the right panel have been provided in Adapter_diagram_collapsed_spec.png
      • why are there '>' icons for this panel? they don't belong here - see attached right panel carets.png
      • the right panel has a weird behavior upon expanding/collapsing, it jumps. see attached right panel.gif [still needs to be addressed - AW]

      4c. Tooltips - don't show tooltips if you are not showing any new info. For example on the left panel: [initial solution in PR stage, but tooltip logic needs a bit more work) - AW]

      • Cube shows 'Cube' - not needed
      • Database shows 'Database' - not needed
      • TPFSPar... shows 'TPFSParquet' - this is where it is useful, and should be shown.
      • Obviously always show tooltips when the panel is collapsed, showing only icons.
      • Now on the right panel, there are no tooltips at all! Should show tooltips when the panel is collapsed.

      4d. Icon for Sink needs to be updated.

      4e. On the right panel, I should be able to expand more than one of source/transform/sink - but have atleast one expanded at all time. The 'expand' icon ( > ) next to Source is misleading.

      5. Resizing the browser breaks the arrows and their connection points. See attached Resize browser.png

      6. There is a 1px gap at the top of the background - see attached top gap.png [in PR stage - AW]

      7. It is confusing to edit an element on the screen, vs moving it. Lets enable single click to move the element, and double click to edit the element.

      8. The Adapter name is missing the Edit icon that would tell me to click there to edit name. The design is also missing the white box, as in Sean's mock. [in PR stage, but description still has to be added - AW]

      9. Font size of the icons and text within each element is too large, pls compare to Sean's mock. [in PR stage - AW]

      • The Icon size should be brought down to 200% and font size to 13px.
      • The 'x' mark should be smaller too, and pushed to the bottom. Pls see Sean's mock...

      10. The arrows are too thick - currently 4px thick, reduce to 2px.

      11. When I connect a Source to a Transform, the input schema is not propagated.

      12. Buttons in the edit screen for the elements don't reflect the ones used in the mock - pls look at all mocks, work with Sean and me for any questions.

      13. What does Settings, in the right panel do? The button doesn't work. We should add the Adapter name + metadata to the Settings.

      14. If I click to edit Adapter name and hit the back button, I see attached Back button.png

      15. When you click on an app template that has been published, it takes you back to the old UI.. it should not show the old UI for source/sink/transform, it should show the diagram instead, in a box, similar to workflow diagrams, along with start/stop buttons.. should work with Sean to provide a mock

      16. The Loading icon and text are is too large, when compared to the heading. Pls make it 2px smaller than heading. See attached screenshot loading too big.png

      17. Name and description doesn't show at the top of the adapter screen...

      18. Double clicking on an element/node on the screen open two modals instead of one.

      19. If the Adapter name is too long, it shows the complete name instead of ellipsis-ed version, like we do for everything else.

      20. Error messages don't show always. When they do, they show in a block at the bottom of the screen, instead of a red panel across the screen. This block also doesn't stick to the bottom of the screen, instead it floats in place when you scroll down.
      20a. there also is currently no way to close the red block.

      21. Error message says 'Node is not connected' - why are we calling it node? Should call it Source/Transform/Sink as appropriate.

      22. One error message had 'Adapter Transforms is not ...' - it should be 'Adapter transform is not...'

      23. Should not be able to get exit any modal without an alert for 'You have not saved your changes. Save now?'

      24. The input schemas show a weird '(' before the Type - see attached Input schema.png

      25. On any modal for editing a source/sink/transform, if you add spaces in any field, and hit the refresh button, it preserves the spaces. The same if you do with text instead of spaces, it works fine. But with spaces, the Refresh button preserves the spaces.. weird..

      26. Work with Sean to get different shapes for the elements for ETL Realtime > Sources


        1. Adapter_diagram_collapsed_spec.png
          455 kB
        2. Adapter_diagram_spec.png
          466 kB
        3. Add App button behavior.png
          Add App button behavior.png
          20 kB
        4. Back button.png
          Back button.png
          69 kB
        5. ETL Application Drafts.png
          ETL Application Drafts.png
          45 kB
        6. ETL Batch.png
          ETL Batch.png
          96 kB
        7. Input schema.png
          Input schema.png
          34 kB
        8. loading too big.png
          loading too big.png
          24 kB
        9. Resize browser.png
          Resize browser.png
          88 kB
        10. right panel.gif
          right panel.gif
          58 kB
        11. right panel carets.png
          right panel carets.png
          15 kB
        12. top gap.png
          top gap.png
          107 kB



            • Assignee:
              ajai Ajai Narayan
              priyanka Priyanka Nambiar
            • Votes:
              0 Vote for this issue
              3 Start watching this issue


              • Created: