1. Home
  2. TC3.10 - AMMA, ResDash, DevDash creating Custom Dashboards and sharing

TC3.10 - AMMA, ResDash, DevDash creating Custom Dashboards and sharing

Test Case Title

TC3.10 - AMMA, ResDash, DevDash creating Custom Dashboards and sharing

Goal

I can

Create a Developer Dashboard (DevDash), AMMA and/or Resource Dashboards (ResDash)

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

Prerequisites

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

Create new Developer Dashboard and save it. The resulting dashboard/view that can be saved locally or on cloud (ProcessLoader, in the future) and shared with other colleagues, also via ProcessLoader.

Steps

  

 

 

Please note that some of the following links could be accessible only for registered users.

  1. 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:
    https://www.snap4city.org/management/iframeApp.php?linkUrl=https://devdash.snap4city.org/&linkId=2mLink&pageTitle=Data%20Analyzer:%20DevDash&fromSubmenu=managLink
  2. 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”.

     
  3. 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.
     

     
  4. A new dashboard is then created, with a simple event count histogram panel and a table for viewing indexed data.
    73BAF694
     
  5. 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.

     
  6. 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.

D3835DC2

 

  1. 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.
    C7F40320
     
  2. 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.

  1. 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.

404EF62E 

  • Click the red Close button. A smartcitymap panel has been added.

D0C2726C 

  1. 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.
  2. 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.

 

 

  1. To save the dashboard click the Save button  on the top right menu of the page and select “Export to File”.
    • A new windows is shown asking to save the dashboard as text/json file locally in your PC. After saving the file, it can be shared and sent to anyone.

       
  2. To load a dashboard, click the Load button  on the top right menu of the page.
    • You can: Load a local file from your PC (for example the file saved before);
    • Select one of the listed Saved Dashboard.

       
  3. A Dashboard can be edited in terms of:
    • Add new rows, by clicking the ADD A ROW button at the end of the page;
    • Add new panels in an available space in a row, by clicking the Add Panel Tab in an empty row (1) or by clicking the small PLUS icon on the top right of an available space in a row (2);

       
    • Drag and drop panels to change the position, by clicking the panel name on the right top corner and moving the panel to change its position;
    • Edit existing panel to change some parameter and setting, by clicking the cog icon on the top right corner of a panel;
    • Delete a panel by clicking the X button on the top right corner of the panel to be deleted.

      The developer dashboard can be created using the tool on cloud referring to the SOLR index of data. Once the dashboard is created it can be saved (i) locally on disk of the users, (ii) on cloud into a SOLR part. The dashboard saved locally can be shared with other colleagues sending them via email, or putting them on the Process Loader for download.
      A couple of Dashboards have been also saved into the directory of download on web.
  • Then click on the right corner menu reported in the following picture. You can choice to export the dashboard and send to a friends, or make them public. Other colleagues can access to public dashboards and use, modify and download, etc.

 

ProcessLoader: can be used to upload processes, and also to publish, search and share developed processes with other cities and among developers. Processes can be developed in ETL, R, Java, etc., and as Snap4City Application in NodeRED.

  • Share