Test Case Title
Save obtained view as a new dashboard, save on cloud or locally, share it
Monitor the status putting together different views, graphs and maps
Change parameters of view for each widget
Load an already available Dashboard from local disk or cloud
Using a PC or Mobile with a web browser
In general, a Developer Dashboard is based on different kind of panels/widget organized in set of rows on the web-page, thus creating a sort of table. Each row has to be manually added with the menu at the bottom. Once added the row of the table, the user can add into the specific raw a Widget/Panel by selecting from a number of ready to use cases. Rows and Widgets/Panels can be deleted, and the raw defined and populated by Widget/Panels can be moved up and down, to arrange the visualization order, customizing it with the usres’ own preferences. Each single widget/panel has a number of parameters that may interact with those of the other widgets as well. Once a Dashboard is created it can be saved locally on PC or saved on server.
Expected successful result
Please note that some of the following links could be accessible only for registered users.
- Log in the Snap4City portal and click on the “Management” menu item on the left-side bar. A sub-menu opens, in which you can find a list of management tools, including “Traffic Analyzer: AMMA” (Application and MicroService Monitor and Analyser), “Data Analyzer: DevDash” (Development Dashboard) and “Backoffice Resource Analyzer: ResDash” (Resource Dashboard) tools. Click, for example, on the “Data Analyzer: DevDash”:
Equivalently, you can access the DevDash at the following url:
- Create and open a new empty dashboard by clicking on the sheet of paper icon on the top right to open the "New" dialog, and then select “Time-series dashboard”.
- In the Collection Name field write: “sensors-ETL-IOTv3” (without selecting any of the suggested shards or replicas), and in the Time Field write: “date_time_1sec” (later you can change these values if you want) and click the “Create” green button.
- A new dashboard is then created, with a simple event count histogram panel and a table for viewing indexed data.
- Open the editing cog on the top right corner of the HISTOGRAM widget and change the span from 12 to 8. This will reduce the width of the HISTOGRAM widget.
- Click the small PLUS icon on the right of the HISTOGRAM widget (called panel in banana) to fill the available space with a new widget. We will add a TERMS panel, which is useful to display indexed data faceted by a desired field.
- The Row Settings window appears: select the Add panel tab, and here click on the Select Panel Type drop-down menu and click on the terms panel (see the figure below). Now you can configure the newly created terms panel. In the example figure below, the title “Sensors Source” is specified in the Title box (1), the “src” field (that is: source, the label of the index indicating the source of indexed Sensors data, e.g. if it is ingested via ETL or by IOT devices) is specified in the Field box (2). If you scroll down the settings window, you can also choose the type of graphic chart (bars, pie chart etc.), the legend format, as well as customizing some graphical aspects, such as colors, the span size etc. In this example, we have chosen the bar chart.
- Click on the Add panel green button (3) and then click the Close red button.
- Now you have your TERM panel in the same row of the count-event histogram, on the right side.
- Click on the TERM panel name on the right top corner and drag the panel on the left to change the position of the two panels.
- Scroll to the end of the page and click the ADD A ROW button.
- In the Title field write Map and set the Height to 350px. Click the Create Row green button to confirm.
You can see that a new line with the title Map has been added as last row in the list. Click the Move up arrow to move the Map line above the Table line and click the Close red button.
- Scroll up on the page to the empty new row that is above the TABLE PANEL and click on the Add panel to empty row button.
- In the Add Panel Tab, open the Select Panel Type drop down menu and select, for example, smartcitymap and add the following settings (see image below):
- Title: SmartCity Map
- Span: 12
- Coordinate Field: latlon
- Tooltip Field: serviceUri
- Confirm by clicking the Add Panel green button.
- Click the red Close button. A smartcitymap panel has been added.
- In order to fit the dimension of your newly created map panel, you can adjust the size of the whole row on the Row Settings panel.
- You can save the dashboard by clicking the Save button on the top right menu of the page.
- In the same menu you can save locally and share the dashboard by selecting the Export to file item.