search

apinf / platform

Apinf - Open source API management platform with multi proxy and protocol support
https://apinf.com/
European Union Public License 1.1
74 stars 33 forks source link

Low fidelity wireframes for eMQ dashboard #2995

Closed bajiat closed 7 years ago

bajiat commented 7 years ago

Description

Create low fidelity wireframes based on user / customer needs for eMQ dashboard

Get feedback on the wireframes and make a new version, if needed.

Nazarah commented 7 years ago

From the requirements discussed in HSL meeting, I came up with the following designs. Also I sent those wireframes for review to the responsible personnel back in HSL.

Dashboard

  1. Default View image

The default view has a table with columns for MQTT Topic Tree, Average Bandwidth Utilization, Average Published Messages / Average Subscribed Messages and Clients Published / Clients Subscribed metrics. The default view appears for both incoming and outgoing messages. Each cell contains a value for the related metric(s), an arrow and percentage number. The arrow and percentage number indicated the change in the value of the related metric.

  1. Expanded View image

On clicking a row, it gets expanded and details about the metrics get displayed. You can see that the value and information appearing are for both incoming and outgoing messages. (indicated within green rectangles) To keep the UI simple and clean, trend graphs related to specific metrics are shown in the expanded view. Filtering option allows you to view the dashboard as per incoming, outgoing or both types of messages. (within green rectangle)

  1. Filtered by incoming messages image

When the dashboard is filtered for incoming messages, only the associated metrics, value or trends appear in the table and expanded view. (indicated within green rectangles.) The filtering criteria gets displayed on top of the table, with a clear button for making the default view reappear.

  1. Filtered by Outgoing Messages image

This works in the similar way as that described on 3rd wireframe.

Nazarah commented 7 years ago

Analytics View

emq3alternative

On clicking details for a particular topic tree, the user is redirected to the analytics page for that topic. The overview charts from the Dashboard view are repeated here. In Addition, there are timelines charts to see trends of Bandwidth usage, Average Message publication/delivery, No. of successfully delivered message vs. failed message and clients who published or subscribed to the topic. The default view is for both incoming or outgoing messages. This can be filtered by incoming or outgoing message. (except for the successful vs. failed message chart) The timeline can be rendered for last 24 hours, last 7 days and last 30 days.

Nazarah commented 7 years ago

@phanimahesh can you please review the mockups and give me your feedback? @55 looking for your comments as well.

phanimahesh commented 7 years ago

@Nazarah Looks good to me.

Nazarah commented 7 years ago

@55 and I have both agreed to take the ideas presented here for EMQ Dashboard and start making the actual designs. So closing this issue as it has been reviewed.