Optimize & Consolidate Bundle Sidebar & Bundle View

[leilenah]

Documentation

Bundle View UI Redesign

High-Level Goals

1. Use the same code path for BundleDetailSidebar and BundleView
2. understand the purpose of each field shown in this view
3. create logical groupings, e.g. requests can be grouped together
4. determine the optimal UI for dense technical information
5. look into how sites with similar UI needs handle this
6. create UI mock-ups and present options to the team

Research

Research Tasks

1. Start proposal document
2. Review current bundle view
3. List the different bundle types and their fields
4. What is the purpose of each metadata field?
5. What are the logical groupings of the fields
6. What is most important to the user?
7. UI wireframe
8. UI prototype
9. Present proposal document to Percy

Implementation

1. Add collapsible command above STDOUT
2. Add collapsible failure_message below command
3. Add command copy button w/ confirmation popup
4. When expanded, replace more info button with bundle view button
5. Chance to for editable fields
6. Run Bundle -- sidebar update
7. Run Bundle -- states graphic
   • Processing time is shown as the bundle is running
   • States graphic should be conditional
   • the collapse should be graceful
   • add bundle details to tooltip
8. Update download button UI to use icon
9. Uploaded Bundle Sidebar
10. Make Bundle Sidebar
11. Load BundleDetail in Bundle View
    • Bundle view should be pre-expanded
    • Bundle page link should be hidden
12. Code documentation

[leilenah]

Wikipedia Sidebar Reference

[leilenah]

Percy Meeting Notes

• the bundle detail sidebar and the bundle view should share the same code path
  • this means that they should essentially look the same, but perhaps the bundle view is uncollapsed / fuller width
  • ideally the same components could be used across both views
  • both should have the same logical / visual structure
  • the main point of the bundle view is for sharing single bundles
  • most people use the bundle detail sidebar
• users tend to use the bundle detail sidebar
  • the single bundle view is more for users to share links to a specific bundle if they want to do so (as opposed to sharing a link to a full worksheet which may contain many bundles)
  • the bundle detail sidebar is the more important of the two
• notes on the state graphic
  • the state graphic can be collapsed once the bundle is ready
  • this is only relevant to the user when the bundle is running
  • once the bundle is ready, the graphic is no longer relevant so we can collapse it (or perhaps not even render it) when the run is finalized
• it would be nice if the running time could be shown somewhere inside the graphic next to the state
  • will need to experiment with this
  • look into each time section to determine what is relevant for a particular state
• editable fields
  • Percy would prefer if we continue to allow editing in place
  • I would prefer some sort of modal, but we'll have to experiment
  • perhaps there is a way to make the in-place edit more intuitive
  • will need to research
• stdout is very important as the bundle is running, so that should remain prominent
  • stdout should auto-update on the bundle view (it currently does this in the detail sidebar)
• the command section may need to be larger as some of the commands are quite long
• reference some bundles in the gallery (e.g. the first three) to see what a typical bundle would look like
• consider what the "More Details" button should do
  • right now it opens the bundle view, but perhaps it should show more details about the bundle
  • then we could have another button that opens the bundle view
• deploy to dev to UI testing
  • change codealab_version to branch name or some other test name

[leilenah]

Refactors

• Update all components to use camelCase
• BundlePageLink comment typo bundle
• BundleStateBox use === throughout
• Time Tooltip typo -- amout
• Can we render the time field (which is time spent actually running)?
  • Time since created is also meaningful, but sometimes not the thing you want.
  • Maybe there's a way to render both?
  • In general, maybe the thing to do is to render a total time and the time spent in the current stage?
  • Also, if we have a function for rendering a duration, could we factor this out?
  • Ideally, it would match the one in formatting.py
• UUID maybe should go at the top before name.
• The state tooltip should be static
• When you mouse over the states, they should show the description
  • Might be easiest for just the current state to do this, as state details are grabbed from the backend
• The help icon next to each field is very faint.
• Bundle page could appear in the upper right corner like a NE arrow that looks like it'll expand things.
  • Ashwin suggestion: Make "bundle page" a more prominent button at the bottom
• Add option for user to view full stdout / stderr in new window (mimic current bundle view)
• Store should be after Size, logically
• Allowed Failed, Exclude Patterns can go after all the Request fields.
• Change <enter> back to <none> but potentially make it a different color
• Update the currentState animation -- pulse gently instead of fully disappearing then reappearing
• Add a navbar to the top showing which folder / path you're on
  • Related Issue: Show current file/folder path in the navigation pane #3988
• The fields could better match the rendering when you create a new run (especially the grouping of the resources) - could we share a component?
  • Per the meeting, Percy is willing to split this out
• Update Name field description
• Fix Worksheet snapshot test
• New screenshots
• Resolve Comments

QA

• running large bundles
• uploading bundles
• making bundles
• re-organizing bundles in worksheet view
• editing fields in worksheet view
• editing fields in bundle view
• cross-browser
• responsiveness