Uploaded image for project: 'Percona Monitoring and Management'
  1. Percona Monitoring and Management
  2. PMM-6365

UI. Make an Overlay component (lib)

    XMLWordPrintable

    Details

    • Type: New Feature
    • Status: Done
    • Priority: Medium
    • Resolution: Done
    • Affects Version/s: None
    • Fix Version/s: 2.9.1
    • Component/s: PMM UI
    • Labels:
    • Story Points:
      2
    • Sprint:
      Platform Sprint 22
    • Needs Review:
      Yes
    • Needs QA:
      No

      Description

      Goal
      We want to deliver a consistent UX in cases where the users calls a BE API expecting to see some results on the screen different from what is already displayed on the UI. Example: as a User I press the `Run DB Checks` button expecting PMM to run the database checks and to display the DB check results.

      Implementation
      The component is essentially a wrapper around the content that we need to blur when the API is being called. It should have two states:
      1. isPending=false - the component just renders its children
      2. isPending=true - the component displays an overlay which should cover all the children, showing a spinner until the API is done responding or until it bails out with an error. Then the component transitions to state 1.

      To consider: should we have a second parameter allowing us to pass an async function (promise) which would set the component to state 1 once it resolves?

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              Unassigned
              Reporter:
              alexander.tymchuk Alexander Tymchuk
              Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:

                  Time Tracking

                  Estimated:
                  Original Estimate - Not Specified
                  Not Specified
                  Remaining:
                  Remaining Estimate - Not Specified
                  Not Specified
                  Logged:
                  Time Spent - 1 day, 30 minutes
                  1d 30m

                    Smart Checklist