Tendrl UI designs

Note: Actual implementation of these UI designs may contain differences as these UI designs are contributed by Tendrl community members.

This serves as a landing page for the Tendrl UI designs that can include wireframes and other design artifacts that cover managing both Ceph and Gluster clusters. We are using InVision for contributors to provide comments.

For information on how to make comments in Invision, please
to: https://support.invisionapp.com/hc/en-us/articles/209192426-How-do-I-comment-on-a-prototype-[How to Comment on a Prototype using Invision].

UI Designs for Gluster-Only Monitoring Release

• List of UI Design Artifacts for Gluster-Only Monitoring for Tendrl 1.6.3 and Earlier

• Design for the embedded grafana dashboards into the Tendrl UI for Tendrl 1.6.3+ [Tendrl-UI RFE 1046]

UI Designs Table of Content

• UX Design Approach and Information Architecture - Tendrl UI design approach and information architecture, covers Gluster-only IA as well

  • Tendrl Navigation for Managing Multiple Clusters - Example of the vertical navigation and expansion behavior (of Admin menu item) and hover treatment

  • [OBSOLETED] Concept A: Single Cluster / Element Manager Concept for Multi-Level Drill Down (leveraging existing Multiple-Cluster Management designs and implementations)

  • Concept B: Single Cluster / Element Manager Concept with Context Switcher Navigation (Optimized UX)

• First Login by admin User - Password reset for first-time login by the default admin user after Tendrl installed using tendrl-ansible

• First Use Experience - Initial landing page and creation or import of a cluster, with a link to access Hosts List (for troubleshooting edge case whereby user previously installed Tendrl agents on the Ceph / Gluster cluster)

• Gluster - Create / Import / Expand trusted storage pool

  • Create Gluster Cluster Workflow - guided experience for creating a Gluster cluster with a demo/data volume at the end of the workflow

  • Import Gluster Cluster Workflow - import an existing Gluster cluster

  • Add Host to Gluster Cluster - add node to existing Gluster cluster (expand cluster)

• Ceph - Create / Import / Expand cluster

  • Create Ceph Cluster Workflow - guided experience for creating a Ceph cluster with a demo/data pool at the end of the workflow

  • Import Ceph Cluster Workflow - import an existing Ceph cluster

  • Add Node to Ceph Cluster - add node to existing Ceph cluster (expand cluster)

• Main/Global Dashboard

  • Ceph Main Dashboard - default or main dashboard for Ceph

  • Gluster Main Dashboard - default or main dashboard for Gluster

• List Views - top-level list views including Clusters, Hosts, Pools, RBDs, and Volumes

• Object Details

  • Ceph Cluster Object Details

    • Overview tab - default dashboard or overview for a single Ceph cluster

    • Hosts tab: Refer to Hosts List View (filtered by the Ceph cluster) - Hosts tab for a single Ceph cluster

    • Pools tab: Refer to Pools List View (filtered by the Ceph cluster) - Pools tab for a single Ceph cluster

    • RBDs tab: Refer to RBDs List View (filtered by the Ceph cluster) - RBDs tab for a single Ceph cluster

    • OSDs tab - OSDs tab for a single Ceph cluster

    • Configuration tab - Configuration tab for a single Ceph cluster

    • Events tab: Refer to Events View (filtered by the Ceph cluster) - Events tab for a single Ceph cluster

  • Gluster Cluster Object Details

    • Overview tab - default dashboard or overview for a single Gluster cluster

    • Hosts tab: Refer to Hosts List View (filtered by the Gluster cluster) - Hosts tab for a single Gluster cluster

    • Volumes tab: Refer to Volumes List View (filtered by the Gluster cluster) - Volumes tab for a single Gluster cluster

    • Bricks tab - Bricks tab for a single Gluster cluster

    • Configuration tab - Configuration tab for a single Gluster cluster

    • Events tab: Refer to Events View (filtered by the Gluster cluster) - Events tab for a single Gluster cluster

  • Host Object Details

    • Overview tab for Ceph host - Overview tab for host in a Ceph cluster

    • Refer to OSD tab (filtered based on the host) - OSDs tab for a host in a Ceph cluster

    • Configuration tab - Configuration tab for a host in a Ceph cluster

    • Overview tab for Gluster host - Overview tab for host in a Gluster cluster

    • Bricks tab - Bricks tab for a host in a Gluster cluster

    • Configuration tab - Configuration tab for a host in a Gluster cluster

    • Overview tab for host not in a cluster (unassigned) - no object details provided, only hover from Host List View

    • Events tab: Refer to Events View (filtered by the host) - Events tab for the given host

  • Pool Object Details

    • Overview tab - Overview tab for a single Ceph pool

    • RBDs tab: Refer to RBDs List View (filtered by the Ceph pool) - RBDs tab for a single Ceph pool

    • OSD tab: Refer to OSD tab (filtered based on the pool) - OSDs tab for a single Ceph pool

    • Events tab: Refer to Events View (filtered by the pool) - Events tab for the given pool

  • Volume Object Details

    • Overview tab - Overview tab for a single Gluster volume

    • Bricks tab - Bricks tab for a single Gluster volume

    • Rebalance tab - Rebalance tab for a single Gluster volume

    • Tuning tab - Tuning tab for a single Gluster volume

    • Permissions tab - Permissions tab for a single Gluster volume

    • Events tab: Refer to Events View (filtered by the volume) - Events tab for the given volume

• CRUD Ceph Pool

  • Create Pool - guided experience for creating a pool

  • Edit Pool - dialog for editing a pool (excludes increasing PG)

  • Rename Pool - dialog for renaming the pool

  • Grow PG - dialog for increasing PG for a pool

  • Delete Pool - guided experience for deleting a pool

• CRUD Ceph RBD

  • Create RBD - guided experience for creating a RBD

  • Resize RBD - dialog for resizing a RBD

  • Delete RBD - guided experience for deleting a RBD

• CRUD Gluster Volume and Bricks

  • Create Bricks - guided experience for creating bricks

  • Create Volume - guided experience for creating a volume

  • Add Bricks - guided experience for adding bricks to a volume

  • Delete Volume - guided experience for deleting a volume

  • Remove Bricks - guided experience for removing bricks from a volume

  • Rebalance Volume - rebalance volume

  • Start / Stop Volume - start and stop volume

• Admin

  • Events and Tasks - Views for examining events, tasks, notifications/alerts, and SMTP Settings

  • Users - User administration and LDAP/AD configuration

• Global Elements / Utilities

  • Masthead Global Elements - Global Elements / Utilities area in Masthead (top right of UI)

  • About Product - "About" dialog that provides summary information about relevant Tendrl components and respective release or build information.

Recordings of the UX design reviews may be found at UX Designs and Design Reviews.