Story #14660

[Workbench 2] Investigate feature parity with Workbench 1

Added by Tom Morris 21 days ago. Updated 7 days ago.

Status:
Resolved
Priority:
Normal
Assigned To:
Category:
-
Target version:
Start date:
01/08/2019
Due date:
% Done:

100%

Estimated time:
(Total: 0.00 h)
Story points:
3.0

wb2-error.png (226 KB) wb2-error.png Workbench2 error Lucas Di Pentima, 01/08/2019 02:38 PM
sso-log.txt (4.43 KB) sso-log.txt Lucas Di Pentima, 01/08/2019 02:42 PM
chromes network activity.png (46.1 KB) chromes network activity.png Lucas Di Pentima, 01/08/2019 03:14 PM

Subtasks

Task #14666: ReportResolvedPeter Amstutz

Task #14690: Review 14660-arvbox-workbench2ResolvedPeter Amstutz

Associated revisions

Revision 51c1daf8
Added by Peter Amstutz 14 days ago

Merge branch '14660-arvbox-workbench2' refs #14660

Arvados-DCO-1.1-Signed-off-by: Peter Amstutz <>

History

#1 Updated by Tom Morris 21 days ago

  • Status changed from New to In Progress

#2 Updated by Tom Morris 21 days ago

  • Status changed from In Progress to New

#3 Updated by Peter Amstutz 21 days ago

  • Assigned To set to Peter Amstutz

#4 Updated by Lucas Di Pentima 21 days ago

Found what seems to be a bug on wb2, filed it as #14671

#5 Updated by Peter Amstutz 19 days ago

Workbench2 UI notes

Double clicking on list items to enter them → not a fan, also no affordance (like changing mouse cursor to an arrow) to indicate you can do that.

Can't filter by "status"

#6 Updated by Peter Amstutz 19 days ago

Paging updates the display (XXX-YYY of ZZZZ) before the actual list has updated.

Should allow more than 50 rows per page. (How about 500 rows per page?)

"Details" view the columns are too narrow, UUIDS and PDHs are wrapped over two lines.

Clicking on "UUID" in details unexpectedly loads a new tab... Which doesn't successfully load the right page for the UUID.

Can't copy and paste UUIDs from "Details" view. Also no copy-to-clipboard button.

I can't paste a UUID into the search bar to go directly to it.

In projects view, the rows are too wide, they horizontal scrolling is necessary even with a full screen browser window.

"Actions" is pushed way over to the right side, have to scroll to get to it (although there is a context menu).

Can't select multiple things and operate over all of them.

#7 Updated by Peter Amstutz 19 days ago

What happens to the left nav if a user has 1000 subprojects?

If I visit a collection, why are "details" still hidden in a right pop-out?

#8 Updated by Peter Amstutz 19 days ago

The popping/fading/swooshing effects are eye-catching but mostly serve to delay using the component while it is being animated.

#9 Updated by Peter Amstutz 16 days ago

"Link to process" link on collection page that doesn't link to anything?

#10 Updated by Peter Amstutz 15 days ago

Workbench1 features + Workbench2 feature coverage

✓ - feature works
✗ - feature is missing, incomplete or buggy

  • Log in screen ✓
  • Responsive layout, reflows based on window width ✗ horizontal layout is very bad
  • Title bar
    • Identify current user ✓
    • Breadcrumbs to current/parent project ✓
    • Keyword search ✗ there's UI for it but it doesn't seem to work as expected
    • Go directly to page by pasting UUID or PDH into search ✗
    • Create project ✓
    • Browse projects ✓
    • Browse public projects ✗ has "shared with me" but not public projects as such
    • Browse favorites ✓
    • Link to Composer ✗
    • Link to manage login VMs ✓ missing icon in the menu
    • Link to manage git repos ✗ incorrectly located on the admin menu
    • Link to manage ssh keys ✓
    • "Link accounts" feature ✗
    • Link to admin manage users ✓
    • Link to admin manage groups ✓
    • See trash contents ✓
    • Log out ✓
  • Dashboard ✗ there is no dashboard
    • List of things currently running and recently finished ✗
  • Project page
    • Edit name ✓ technically possible, but no affordance for editing current project, can access actions through context menu on parent project or sidebar, updating name fails to update sidebar and breadcrumbs
    • Textile formatted description, display and edit ✗ offers HTML rich text editor, doesn't support textile
    • Page (scroll) through list of items ✓
    • Browse specific item type (collection, process, workflow, subproject, "other") ✓ doesn't have "other", but we don't want it either
    • For each item
      • Display/edit name ✓
      • Link to details page ✓
      • Trash item ✓
      • Additional details (eg process status: complete/failed) ✓
      • Visit item page ✓ Must double click which is not a typical web app gesture
    • Select individual items, select all/unselect all ✗ no multi-selection
    • Combine selected collections ✗
    • Copy selected item(s) to another project ✓ single item only
    • Move selected item(s) to another project ✓ single item only
    • Trash selected item(s) ✓ single item only
    • Create new collection in current project ✓
    • Run a process in current project ✗ new process button appears to ignore current project
    • Only show top level processes ✗
    • Create a subproject ✓
    • Manage sharing with users ✓ sharing popup is confusing, though
    • Manage sharing with groups ✗ only searches users, not groups?
    • Add "favorite" star ✓
    • Show most recent things first ✗
    • Advanced view (API response) ✓
  • Collection page
    • Display/edit collection name ✓
    • Display/edit textile-formatted description ✗ Doesn't support textile, and doesn't offer the rich-text HTML editor either
    • Display collection uuid, easy to copy ✓
    • Display collection PDH, easy to copy ✗
    • Display collection size ✓
    • Create sharing link ✗
    • Browse file listing ✓
    • Delete a file ✗ Got "TypeError: fileViewers.filter is not a function"
    • Rename a file ✗
    • Upload files ✓
    • Download file ✗ Doesn't pass token to keep-web
    • View file in browser ✗ Supposed to use "file viewers" feature but that feature is incomplete?
    • Select individual items ✓
    • select all/unselect all ✗
    • Deleted selected files ✗ Confusing, can select files but not sure what action to use
    • Extract selected files to a new collection ✗
    • Edit properties ✓
    • Provenance/used by graphs ✗
    • Advanced view (API response) ✗ a bunch of fields are undefined or null that should be filled in
  • Navigate to collection by PDH, or show menu of collections with same PDH ✗ I tried this and it just spun in a circle
  • Work unit page
    • Display/edit process name ✓
    • Display/edit textile-formatted description ✗ Doesn't support textile, and doesn't offer the rich-text HTML editor either
    • Run summary (start/stop time) ✗ Doesn't calculate run time, queued time
    • Status (completed/running/failed) ✓
    • request uuid ✗ Available under "Details" sidebar, but sidebar is buggy, doesn't track currently viewed item
    • who it ran as (legacy code is using modified_by_user_uuid but this should be runtime_user_uuid) ✗
    • created/started/finished time ✓
    • container uuid ✗ has a link, but broken when you try to visit it
    • Link to output collection ✓
    • priority ✓
    • runtime constraints ✗ keys are mangled by capitalizing the first letter
    • Link to Docker image ✗ incorrectly linked (output_path is also incorrectly linked)
    • command line ✓ mangled with backslash quoting, no line breaks
    • cwl.input.json with links to collections ✗ opens a modal but display is broken
    • live logs ✗ live log is unreadable, rendered black-on-black
    • See logs from collection ✗ "Go to Log collection" text doesn't link to anything
    • provenance, parent workflow (for child containers) ✗
    • Advanced view (API response) ✗ Mangles keys so mounts like "/var/lib/cwl/cwl.input.json" display as "varLibCwlCwlInputJson"
    • Child processes with summary name, status, runtime ✗ Layout is too compressed, can't read the name
    • Get details of child processes ✗ Cannot expand or visit child process from parent view
    • Re-run, enable/disable container reuse ✗ There's a re-run button but it doesn't seem to do anything
  • Workflow page
    • Display/edit workflow name ✗
    • Display/edit textile-formatted description ✗
    • Display hints, inputs, outputs ✓
    • Run this workflow ✓ but layout is terrible, run action is scrolled off the right side
    • Copy, move this workflow ✗ no action or context menu
    • Advanced view (API response) ✗
  • Multi-site search
    • Manage remote sites ✓ _Page exists but I haven't tested it
    • Keyword search across multiple clusters ? Untested
  • Manage ssh keys
    • Add key ✓
    • Use the "comment" part of the key for the default name ✗
    • List keys by name, key fingerprint ✗ No key fingerprint
    • Delete key ✓
  • Virtual machines
    • List VMs the user has access with hostname, login name, webshell link ✓
    • Explain how to configure ssh to go through switchyard ✗ Uses ardev.roche.com in the example
  • Manage git repositories ✗ is under the "admin" menu not the "user" menu
    • List repos by name, access URL ✓
    • Link to individual git repository page ✗ Only "attributes" popup. uuid is blank ?!
    • Add a new repo ✓
    • Delete repo ✓
  • Git repository page
    • Rename repository ✗
    • Manage sharing with users/groups ✓
    • Advanced view (API response) ✓
  • Current token
    • Easy copy and paste of token / environment to use Arvados ✓
  • Link accounts ✗ does not appear to be implemented
    • Add another login to this account, or use this login to access another account ✗
    • Log in as 2nd user ✗
    • Confirmation ✗
  • Links to documentation ✓
  • Show current version ✗
  • Group page
    • Rename group ✗
    • Advanced view (API response) ✓
    • (workbench1 does not have user management on the groups page)
  • Users list for admins
    • List name, uuid, email, is active, is admin, username, redirect ✓
    • Admin can visit user "home" ✓
  • User page for admins ✗ There's a "manage" action but doesn't seem to go anywhere
    • Log in as user ✗
    • Set up shell account for user (general "set up" feature) ✗
    • Deactivate (unsetup) user ✗
    • Assign group membership ✗
    • Advanced view (API response) ✓
  • Admin keep services list
    • List uuid, ready_only, service_host, service_port, ssl_flag, service type ✓
    • Delete service ✓
    • Show generic keep service page ✓
  • Admin keep disks list
    • this is obsolete ✓
  • Compute nodes list
    • list info, uuid, domain, first_ping_at, hostname, ip_address, job, last_ping_at, slot_number ✓
    • Delete node record ✓
    • Show generic node detail page ✓
    • ("nodes" is only used in conjunction with nodemanager, will become obsolete)
  • Links list
    • name, link_class, tail, head, uuid ✓
    • Delete link ✓
    • Show generic link detail page ✓
  • Trash page
    • Show trashed collections with name, parent project, date of trash/deletion, uuid/PDH, untrash button ✓ Missing parent project
    • Show trashed projects with name, parent project, date of trash/deletion, uuid, untrash button ✓ Missing parent project
    • Can select multiple and untrash all selected ✗
  • 404 page
    • Offer to untrash target if it wasn't found because it was trashed ✗ Seems like the /collections endpoints just spins forever if you try to navigate to a UUID it can't find, wonder about other error handling

#11 Updated by Peter Amstutz 15 days ago

More UI notes:

Can't resize the Details sidebar like you can with the left nav sidebar

"View details" context menu toggles the details bar visibility instead of ensuring it is visible, so if I right-click and say "view details" it will open, but then I right-click on a different list item and select view details again, instead of changing what is being viewed, it closes instead.

I don't understand why there are two search bars. One at the top and one on the project page.

Project page includes an "owner" column which is redundant.

For cases where an "owner" column makes sense, it should be the owner name (and a link) not the UUID.

Workflows can be organized into projects alongside anything else, but this UI has them separated out.

I don't know what the "Authorization" column for workflows means.

#12 Updated by Peter Amstutz 15 days ago

The UI feels sluggish. I don't know if that's because I'm running in developer mode.

#13 Updated by Lucas Di Pentima 15 days ago

Sorry for taking so long to review the arvbox addition.

I'm having trouble making arvbox work on my Debian Virtualbox VM, not only this branch but also master

I've tried many things and in the end deleted all docker images and the ~/.arvbox/ directory to start from scratch and I'm not being able to log in with WB 1. As a reference, the SSO's log is attached. I'm getting the following message on the browser: Not found. Authentication passthru. - The URL is https://172.17.0.2:8900/users/auth/local

Also, I rebuilt the arvbox docker image and tried to access WB2's URL, getting the error displayed on the attached screenshot.

Any tips to further test this will be appreciated.

#14 Updated by Lucas Di Pentima 15 days ago

  • File sso-log added

Oops, forgot to attach SSO's log.

#15 Updated by Lucas Di Pentima 15 days ago

  • File deleted (sso-log)

#16 Updated by Lucas Di Pentima 15 days ago

#17 Updated by Lucas Di Pentima 15 days ago

Workbench's log when accessing:

2019-01-08_15:04:59.34384 {"method":"GET","path":"/users/welcome","format":"html","controller":"UsersController","action":"welcome","status":200,"duration":265.53,"view":201.64,"db":0.0,"request_id":"req-1vxuc8llxvlnkjdf4y83","params":{"return_to":"/"},"@timestamp":"2019-01-08T15:04:59.343Z","@version":"1","message":"[200] GET /users/welcome (UsersController#welcome)"}

Attached is the browser's network activity screenshot (I was not sure how to properly copy&paste dev tools window)

#18 Updated by Peter Amstutz 15 days ago

Found the bug, was introduced in #14441

sso-devise-omniauth-provider/app/controllers/sessions_controller.rb L6 should have a clause like "if User.omniauth_providers == [:local]"
previously it relied on "if User.omniauth_providers.empty?" for the local database case

#19 Updated by Peter Amstutz 14 days ago

Peter Amstutz wrote:

Found the bug, was introduced in #14441

sso-devise-omniauth-provider/app/controllers/sessions_controller.rb L6 should have a clause like "if User.omniauth_providers == [:local]"
previously it relied on "if User.omniauth_providers.empty?" for the local database case

Fixed in #14703

#20 Updated by Lucas Di Pentima 14 days ago

Alright, with #14703 out of the way, I could make arvbox start correctly.

I'm seeing an issue after restarting the workbench2 service, seems that the service keeps reloading itself. The following keeps repeating:

2019-01-08_19:25:00.25666 $ react-scripts-ts start
2019-01-08_19:25:02.85559 Something is already running on port 3000.
2019-01-08_19:25:02.87222 Done in 2.82s.
2019-01-08_19:25:02.90013 + . /usr/local/lib/arvbox/common.sh
2019-01-08_19:25:02.90015 ++ export PATH=/usr/local/bin:/usr/local/sbin:/bin:/sbin:/usr/bin:/usr/sbin:/usr/X11R6/bin:/us
r/local/go/bin:/var/lib/gems/bin
2019-01-08_19:25:02.90015 ++ PATH=/usr/local/bin:/usr/local/sbin:/bin:/sbin:/usr/bin:/usr/sbin:/usr/X11R6/bin:/usr/local
/go/bin:/var/lib/gems/bin
2019-01-08_19:25:02.90015 ++ export GEM_HOME=/var/lib/gems
2019-01-08_19:25:02.90016 ++ GEM_HOME=/var/lib/gems
2019-01-08_19:25:02.90017 ++ export GEM_PATH=/var/lib/gems
2019-01-08_19:25:02.90017 ++ GEM_PATH=/var/lib/gems
2019-01-08_19:25:02.90018 ++ export npm_config_cache=/var/lib/npm
2019-01-08_19:25:02.90018 ++ npm_config_cache=/var/lib/npm
2019-01-08_19:25:02.90018 ++ export npm_config_cache_min=Infinity
2019-01-08_19:25:02.90018 ++ npm_config_cache_min=Infinity
2019-01-08_19:25:02.90018 ++ export R_LIBS=/var/lib/Rlibs
2019-01-08_19:25:02.90019 ++ R_LIBS=/var/lib/Rlibs
2019-01-08_19:25:02.90019 ++ test -s /var/run/localip_override
2019-01-08_19:25:02.90116 +++ /sbin/ip route
2019-01-08_19:25:02.90132 +++ awk '/default/ { print $5 }'
2019-01-08_19:25:02.90287 ++ defaultdev=eth0
2019-01-08_19:25:02.90347 +++ ip addr show eth0
2019-01-08_19:25:02.90355 +++ grep 'inet '
2019-01-08_19:25:02.90367 +++ sed 's/ *inet \(.*\)\/.*/\1/'
2019-01-08_19:25:02.90552 ++ localip=172.17.0.2
2019-01-08_19:25:02.90553 ++ declare -A services
2019-01-08_19:25:02.90553 ++ services=([workbench]=443 [workbench2]=3000 [workbench2-ssl]=3001 [api]=8004 [controller]=8
003 [controller-ssl]=8000 [sso]=8900 [composer]=4200 [arv-git-httpd]=9001 [keep-web]=9003 [keep-web-ssl]=9002 [keepproxy
]=25100 [keepstore0]=25107 [keepstore1]=25108 [ssh]=22 [doc]=8001 [websockets]=8005 [websockets-ssl]=8002)
2019-01-08_19:25:02.90599 +++ id arvbox -u
2019-01-08_19:25:02.90801 ++ test 1000 = 0
2019-01-08_19:25:02.90802 ++ PGUSER=arvbox
2019-01-08_19:25:02.90802 ++ PGGROUP=arvbox
2019-01-08_19:25:02.90819 + cd /usr/src/workbench2
2019-01-08_19:25:02.90820 + npm -d install --prefix /usr/local --global yarn
2019-01-08_19:25:03.15538 npm info it worked if it ends with ok
2019-01-08_19:25:03.15588 npm info using npm@3.10.10
2019-01-08_19:25:03.15593 npm info using node@v6.11.4
2019-01-08_19:25:03.52968 npm info addNameTag [ 'yarn', 'latest' ]
2019-01-08_19:25:03.79259 npm info lifecycle yarn@1.12.3~preinstall: yarn@1.12.3
2019-01-08_19:25:03.80065 npm info lifecycle yarn@1.12.3~preuninstall: yarn@1.12.3
2019-01-08_19:25:03.80212 npm info lifecycle yarn@1.12.3~uninstall: yarn@1.12.3
2019-01-08_19:25:03.81105 npm info lifecycle yarn@1.12.3~postuninstall: yarn@1.12.3
2019-01-08_19:25:03.82127 npm info linkStuff yarn@1.12.3
2019-01-08_19:25:03.82630 /usr/local/bin/yarn -> /usr/local/lib/node_modules/yarn/bin/yarn.js
2019-01-08_19:25:03.82638 /usr/local/bin/yarnpkg -> /usr/local/lib/node_modules/yarn/bin/yarn.js
2019-01-08_19:25:03.82834 npm info lifecycle yarn@1.12.3~install: yarn@1.12.3
2019-01-08_19:25:03.82995 npm info lifecycle yarn@1.12.3~postinstall: yarn@1.12.3
2019-01-08_19:25:03.83728 /usr/local/lib
2019-01-08_19:25:03.83730 `-- yarn@1.12.3 
2019-01-08_19:25:03.83730 
2019-01-08_19:25:03.83883 npm info ok 
2019-01-08_19:25:03.84555 + yarn install
2019-01-08_19:25:04.06335 yarn install v1.12.3
2019-01-08_19:25:04.21027 [1/4] Resolving packages...
2019-01-08_19:25:05.23661 success Already up-to-date.
2019-01-08_19:25:05.25486 Done in 1.20s.
2019-01-08_19:25:05.26469 + test '' = --only-deps
2019-01-08_19:25:05.26470 + echo '{"API_HOST": "172.17.0.2:8000"}'
2019-01-08_19:25:05.26490 + export HTTPS=false
2019-01-08_19:25:05.26491 + HTTPS=false
2019-01-08_19:25:05.26491 + exec yarn start
2019-01-08_19:25:05.58047 yarn run v1.12.3
2019-01-08_19:25:05.70108 $ react-scripts-ts start

#21 Updated by Lucas Di Pentima 14 days ago

After stopping workbench2 service, it keeps active on the 3000 port.
When trying to load it on the browser it the UI is not displayed, and the JS console shows:

xhr.js:178 GET http://172.17.0.2:8000/discovery/v1/apis/arvados/v1/rest 400 (Bad Request)
dispatchXhrRequest @ xhr.js:178
xhrAdapter @ xhr.js:12
dispatchRequest @ dispatchRequest.js:59
Promise.then (async)
request @ Axios.js:51
Axios.(anonymous function) @ Axios.js:61
wrap @ bind.js:9
(anonymous) @ config.ts:64
Promise.then (async)
fetchConfig @ config.ts:63
./src/index.tsx @ index.tsx:90
__webpack_require__ @ bootstrap 6a11701b75016bdfd4c8:678
fn @ bootstrap 6a11701b75016bdfd4c8:88
0 @ websocket.ts:38
__webpack_require__ @ bootstrap 6a11701b75016bdfd4c8:678
(anonymous) @ bootstrap 6a11701b75016bdfd4c8:724
(anonymous) @ bootstrap 6a11701b75016bdfd4c8:724
(index):1 Access to XMLHttpRequest at 'http://172.17.0.2:8000/discovery/v1/apis/arvados/v1/rest' from origin 'http://172.17.0.2:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
createError.js:16 Uncaught (in promise) Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:87)
createError @ createError.js:16
handleError @ xhr.js:87
Promise.then (async)
./src/index.tsx @ index.tsx:91
__webpack_require__ @ bootstrap 6a11701b75016bdfd4c8:678
fn @ bootstrap 6a11701b75016bdfd4c8:88
0 @ websocket.ts:38
__webpack_require__ @ bootstrap 6a11701b75016bdfd4c8:678
(anonymous) @ bootstrap 6a11701b75016bdfd4c8:724
(anonymous) @ bootstrap 6a11701b75016bdfd4c8:724

#22 Updated by Lucas Di Pentima 14 days ago

Doing a arvbox sv stop workbench2 does not work, that's why when trying to restart the service, the second instance keeps retrying because the port is already being used. Oddly, after restarting the workbench2 service, and then running sv stop workbench2, the 2nd wb2 instance seems to be correctly stopped.

#23 Updated by Lucas Di Pentima 14 days ago

One last detail: It would be nice to show a message with WB2's URL like we do with WB1 when starting arvbox. The rest LGTM.

#24 Updated by Peter Amstutz 14 days ago

Lucas Di Pentima wrote:

One last detail: It would be nice to show a message with WB2's URL like we do with WB1 when starting arvbox. The rest LGTM.

Fixed & merged in 51c1daf863f3e1920f758f73b4e5d70ff2c706d6

#25 Updated by Peter Amstutz 12 days ago

Workbench2 TODO for feature parity with Workbench1

Moved to Workbench2 feature parity

#26 Updated by Peter Amstutz 7 days ago

  • Status changed from New to Resolved

#27 Updated by Tom Morris 7 days ago

  • Story points set to 3.0

Also available in: Atom PDF