Details

    • Type: Sub-task
    • Status: In Progress
    • Priority: Major
    • Resolution: Unresolved
    • Affects Version/s: None
    • Fix Version/s: None
    • Component/s: None
    • Labels:
      None

      Description

      Based on the discussion with Wangda Tan, current implementation of Queue is not easy to use if number of nodes is large, and visualization is not very straightforward in terms of node hierarchy and details. Therefore, we want to refactor queue visualization to be more user friendly for different use cases.

      Screen Shot 2017-09-24 at 8.19.36 PM.png

      The image above is the mockup for the new queue visualization, basically it should have the following features:
      1. Each node would be visualized by a horizontal bar, and hierarchy would be distinguished by indentation of each node. (e.g. If one node is a child node of another parent node, there would be indentation before the child node.)
      2. Each node would show usage info on its bar, e.g. displaying used usage like a progress bar along with the percentage.
      3. Click +/- to expand/collapse the tree to show/hide nodes.
      4. Click on bar would show detail charts on the bottom.
      5. A filter on the top-right would filter the nodes based on options.

      Screen Shot 2017-09-24 at 8.50.29 PM.png

      Currently I finished feature 1 and feature 2. See screenshot.

      Since this ticket is relatively big and would take a while to complete, I will keep the ticket updated. Don't hesitate to comment your idea or suggestion. Thanks!

      Design see: https://docs.google.com/document/d/1QaQQEwp-_ZMUo8pNjPjjdRMSTWKNLe-36JICGUpvWFo/edit?usp=sharing
      Please feel free to leave your comments on the design.

        Attachments

          Activity

            People

            • Assignee:
              dingda6 Da Ding
              Reporter:
              dingda6 Da Ding
            • Votes:
              0 Vote for this issue
              Watchers:
              5 Start watching this issue

              Dates

              • Created:
                Updated: