Page MenuHomePhabricator

Create new UI elements: ‘Download report’ menu, 'Popup format selector', Animated 'Working' Indicator'
Closed, ResolvedPublic3 Story Points

Description

This ticket tells you how to create three basic UI elements that will enable users to download reports (in one of two formats) and get feedback when reports are in the process of being updated or downloaded. The elements are:

  1. A Download menu
  2. A Popup format selector
  3. An animating 'Working" indicator
  • Pages these are found on: These three elements will be available on two pages: the Event Summary page and the All Edits page.
  • Highly related ticket: This ticket is about creation of the UI elements only. How these elements integrate with and control the Updating and Downloading processes is described in T213470
  • Here is a prototype that shows some of these tools in action (the mockup is not 100% up to date): to see the download sequence select Pages Improved

Download menu—labeling and behavior

The download menu enables users to select from among various reports on offer.

  • Download button label "Download reports" [with a downward-facing menu triangle]
  • Download button states 1) available= blue 2) hover =a darker shade of blue, 3) click= an even darker shade of blue
  • Download Menu contents The menu will eventually contain 6 or 7 reports. To begin with it will contain three reports, as follows:
    • Event summary [defined at T205561 and T206692]
    • Pages created [defined at T205502 and T206058]
    • All edits [this is the existing "all data" report]
  • Download Menu states 1) available = white background, 2) hover = menu item buttons turn gray (use the available Bootstrap style), 3) unavailable = menu item text grayed out and no hover
The Download menu

Popup Selector—labeling and behavior

The Popup Format Selector appears after a user has requested a report download and allows the user to select a format.

  • Title: the popup has a title in the following format: 'Reportname' report (e.g., 'Pages improved' report) [yes, please include the single quotes]
  • Instruction text: Instruction text in the middle area reads: Please select a format for the report
  • Button labels:
    • Get Wikitext
    • Download CSV
  • Timestamp shows the same time as on the page (as described in T213470 ) and is in same format: Last updated yyyy-mm-dd hh:mm (timezone)
  • Button hover: Buttons turn a darker shade of gray
  • X function the X in the upper-right corner of the dialog closes the panel and aborts the download.
The Popup Selector menu

Animated 'Working' Indicator—labeling and behavior

During Updating and Fetching processes (see T213136 and T213470), the 'Working' indicator tells users that their process is ongoing and not stalled.

  • Placement: The Indicator appears in the position of the Update button. It will appear to users to be a state of that button.
  • Label: the label of the Update button changes to "Updating..."
  • Button state when the Working indicator is displayed, the Update button is unavailable.
  • Animation: a gif of the three-dot animation can fe found at https://phabricator.wikimedia.org/F27853296
Animated 'Working' Indicator

Related Objects

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Prtksxna updated the task description. (Show Details)Oct 29 2018, 10:23 AM

@Prtksxna, please switch mockup image back to existing time format. I explain th[[ https://phabricator.wikimedia.org/T207911#4754819 | e reasons for this here ]]. If we have time we'll update later. Thanks.

jmatazzoni updated the task description. (Show Details)
jmatazzoni updated the task description. (Show Details)
Prtksxna updated the task description. (Show Details)Nov 20 2018, 4:52 AM

@Prtksxna, this does not need the change we spoke about earlier. See my rewrite above. I realized that what we need to do here is shut down download during the UPDATING state. But during the LOCKOUT state, not only can we let people download (as we knew) but their download will be current. So there is no need for the "...as of last update" language you and I discussed.

jmatazzoni updated the task description. (Show Details)

Navigating to the Edit List or the Event Summary pages does NOT update the data (as it does currently in Grant Metrics). [MusikAnimal Mooeypoo, this change simplifies and clarifies the UX, now that we have more reports than we used to. It also stops people from having to wait for what might be many minutes in order to navigate to a page. Is this OK?]

Yes I think so. That makes it simpler. I was thinking we could invoke a full update after some time (30 mins or so) to make sure the page IDs are fresh, but that sort of complicates things. Let's just use the page IDs that are already stored. They'll have to "Update Data" as needed.

If the user clicks the Update button during the approx 10-minute interval after a previous update, during which all data is deemed to be still "fresh," the system [Does what? MusikAnimal Mooeypoo]

Right now, it does a full update again. I think this is fine for the time being. We're not caching any queries, either (not those queries, anyway).

During Updating, if the user clicks browser controls to close or navigate away from the page [what happens? MusikAnimal Mooeypoo, I seem to remember we said the update would complete anyway?

Yes, you can browse away and the update will continue to run.

So, a) if the user clicks Back to go to another page in the tool, will the 'Updating" dialog continue to show on that page while update is in progress?

I'm glad you asked about this. With T207776 I was inferring how it should behave based on the designs. All the progress modals (e.g. F27003678) are dismissible. This is okay because you're allowed to do browse around. It will stay dismissed and refresh once the data is ready. But, if you reload the page (or navigate away and return) before the update is complete, the modal is shown as soon as the page loads. You again are able to dismiss it and do other things, as long as those things don't start a new job: the "Update Data" button itself, download reports, and the Edit List. Let me quickly explain the last bit -- per above "Edit List" doesn't update all the data, but it still performs slow queries so they need to go through the job queue. Hence you shouldn't be able to view it while an update is in progress.

b) if the user closes Event Metrics, the next time he comes back will the update time reflect the update that was in progress or the previous update (i.e., will that in-progress update complete)?]

Same as above; If an update is still running they'll be shown the modal, but they can dismiss it. If the update finished while they were away, there's no indication of this except the "Updated at" timestamp, which I think is fine.

Now, what if the job failed? In this scenario it is similar to if it is still updating. If they navigate away and return, and the last job failed, they are shown the F26981409 modal. There is also one other state, remind you, the "unknown failure". Copy for that to be determined. Same situation, they're shown the modal when they browse back. I suppose after they are shown it once, it should never show it again... haven't coded that part yet.

jmatazzoni renamed this task from Implement ‘Download report’ menu and a popup for selecting wikitext vs. csv file to The Updating process, the ‘Download report’ menu, and the popup wikitext vs. csv selector.Jan 8 2019, 9:12 PM
jmatazzoni removed a project: Grant-Metrics.
jmatazzoni updated the task description. (Show Details)
jmatazzoni updated the task description. (Show Details)
jmatazzoni renamed this task from The Updating process, the ‘Download report’ menu, and the popup wikitext vs. csv selector to Implement the ‘Download report’ menu and the popup wikitext vs. csv selector.Jan 10 2019, 7:17 PM
jmatazzoni updated the task description. (Show Details)
jmatazzoni updated the task description. (Show Details)
jmatazzoni renamed this task from Implement the ‘Download report’ menu and the popup wikitext vs. csv selector to Create new UI elements: ‘Download report’ menu, 'Popup format selector', 'Working Indicator'.Jan 12 2019, 12:40 AM
jmatazzoni updated the task description. (Show Details)
jmatazzoni removed the point value for this task.

I've changed this ticket so that it's just about created the UI elements (not implementing them), and I've added a new element: the Animated 'Working' Indicator. So I'm putting this back for re-estimation (it was 3, FWIW).

jmatazzoni renamed this task from Create new UI elements: ‘Download report’ menu, 'Popup format selector', 'Working Indicator' to Create new UI elements: ‘Download report’ menu, 'Popup format selector', Animated 'Working' Indicator'.Jan 12 2019, 12:46 AM
jmatazzoni updated the task description. (Show Details)
jmatazzoni updated the task description. (Show Details)
jmatazzoni set the point value for this task to 3.Feb 13 2019, 12:28 AM
jmatazzoni updated the task description. (Show Details)
MusikAnimal moved this task from Ready to In Development on the Community-Tech-Sprint board.
MusikAnimal removed MusikAnimal as the assignee of this task.Mar 8 2019, 12:43 AM
MusikAnimal moved this task from In Development to Ready on the Community-Tech-Sprint board.
Samwilson claimed this task.Mar 8 2019, 4:02 AM
Samwilson moved this task from Ready to In Development on the Community-Tech-Sprint board.

A first draft of the first part of this: https://github.com/wikimedia/eventmetrics/pull/214 It adds the reports to the menu (and adds the menu to the event summary page), where it's always visible (but has the reports disabled if the update hasn't been done yet).

At @MusikAnimal's suggestion, I changed the Description above so that the menu item that was "All edits list" is now just "All edits" (because it is an existing message, and will be simpler to do).

Thanks Joe, patch updated.

The PR for this is actually https://github.com/wikimedia/eventmetrics/pull/215 not 214 as above.

PR for this: https://github.com/wikimedia/eventmetrics/pull/221

It's slightly different from the mock: no ellipsis after 'Updating' (because it wasn't there already, and it seems redundant with the animated dots); and the animated dots are aligned in the middle instead of slightly high. The animation sequence (timing and sizes) can be tweaked — I tried to match what's in the demo, but it might not be quite right.

This is all merged now (for all parts of this task). Ready for QA.

UI elements look good 👍🏽

Samwilson closed this task as Resolved.Mar 15 2019, 4:23 AM
Samwilson moved this task from QA to Q3 2018-19 on the Community-Tech-Sprint board.

Any remaining QA for this will be caught by T213470 (the parent of this task).