Dashboards

• Introduction
• Line chart
• Pie chart
• Table
• Wildcards and attributes
• Send dashboards API

Zafira provides possibility to to generate custom dashboards using combinations of widgets. It uses external [D3 charts library](http://n3-charts.github.io/line-chart/#/home) to draw the graphs. In general widget represents JSON model and SQL which is executed every time when graph should be displayed. Currently we support the following widget types: * Line chart * Pie chart * Table

### Line chart 

SQL

set schema 'zafira';
SELECT 
	sum( case when TESTS.STATUS = 'PASSED' then 1 else 0 end ) AS "PASSED",  
	sum( case when TESTS.STATUS = 'FAILED' then 1 else 0 end ) AS "FAILED", 
	sum( case when TESTS.STATUS = 'SKIPPED' then 1 else 0 end ) AS "SKIPPED", 
	sum( case when TESTS.STATUS = 'IN_PROGRESS' then 1 else 0 end ) AS "INCOMPLETE",
	TESTS.CREATED_AT::date AS "CREATED_AT"  
FROM 
	TESTS INNER JOIN 
TEST_RUNS ON TESTS.TEST_RUN_ID = TEST_RUNS.ID INNER JOIN
PROJECTS ON TEST_RUNS.PROJECT_ID = PROJECTS.ID
WHERE 
	TESTS.CREATED_AT::date >= (current_date - 30) AND PROJECTS.NAME LIKE '#{project}%'
GROUP BY TESTS.CREATED_AT::date 
ORDER BY TESTS.CREATED_AT::date;

Model

{
  "series": [
    {
      "axis": "y",
      "dataset": "dataset",
      "key": "PASSED",
      "label": "PASSED",
      "color": "#5cb85c",
      "thickness": "10px",
      "type": [
        "line",
        "dot",
        "area"
      ],
      "id": "PASSED"
    },
    {
      "axis": "y",
      "dataset": "dataset",
      "key": "FAILED",
      "label": "FAILED",
      "color": "#d9534f",
	  "thickness": "10px",
      "type": [
        "line",
        "dot",
        "area"
      ],
      "id": "FAILED"
    },
    {
      "axis": "y",
      "dataset": "dataset",
      "key": "SKIPPED",
      "label": "SKIPPED",
      "color": "#f0ad4e",
	  "thickness": "10px",
      "type": [
        "line",
        "dot",
        "area"
      ],
      "id": "SKIPPED"
    },
    {
      "axis": "y",
      "dataset": "dataset",
      "key": "INCOMPLETE",
      "label": "INCOMPLETE",
      "color": "#3a87ad",
      "type": [
        "line",
        "dot",
        "area"
      ],
      "id": "INCOMPLETE"
    }
  ],
  "axes": {
    "x": {
      "key": "CREATED_AT",
      "type": "date",
      "ticks": "functions(value) {return 'wow!'}"
    }
  }
}

### Line chart (columns) 

SQL

set schema 'zafira';
SELECT 
	TEST_CASES.CREATED_AT::date AS "CREATED_AT", 
	COUNT(*) AS "AMOUNT"
FROM 
	TEST_CASES INNER JOIN 
PROJECTS ON TEST_CASES.PROJECT_ID = PROJECTS.ID
WHERE 
	TEST_CASES.CREATED_AT::date >= (current_date - 30) AND PROJECTS.NAME LIKE '#{project}%'
GROUP BY TEST_CASES.CREATED_AT::date
ORDER BY TEST_CASES.CREATED_AT::date ASC;

Model

{
  "series": [
    {
      "axis": "y",
      "dataset": "dataset",
      "key": "AMOUNT",
      "label": "AMOUNT",
      "color": "#3a87ad",
      "type": [
        "column"
      ],
      "id": "AMOUNT"
    }
  ],
  "axes": {
    "x": {
      "key": "CREATED_AT",
      "type": "date"
    }
  }
}

### Pie chart 

SQL

set schema 'zafira';
SELECT 
	USERS.USERNAME AS "label",
	COUNT(*) AS "value",
	CONCAT('#', floor(random()*(999-100+1))+100) AS "color"
FROM 
	TEST_CASES INNER JOIN 
USERS ON USERS.ID = TEST_CASES.USER_ID INNER JOIN 
PROJECTS ON TEST_CASES.PROJECT_ID = PROJECTS.ID
WHERE 
	PROJECTS.NAME LIKE '#{project}%'
GROUP BY USERS.USERNAME
ORDER BY "value" DESC
LIMIT 8;

Model

{}

### Table 

SQL

set schema 'zafira';
SELECT 
       username AS "USERNAME", 
       email    AS "EMAIL" 
FROM   users 
WHERE  id < 5;

Model

{
   "columns":[
      "USERNAME",
      "EMAIL"
   ]
}

### Wildcards and attributes In dashboard edit modal you may add attributes that will be shared between widgets located on current dashboard. 

SQL

select username from zafira.USERS where USERNAME = '#{userNameAttr}'

Also there are some global wildcharts that may be used everywhere.

• #{project}

... PROJECTS.NAME LIKE '#{project}%' ...

• #{currentUserId}

... USERS.ID = #{currentUserId} ...

• #{currentUserName}

... USERS.USERNAME = #{currentUserName} ...

... TEST_RUNS.ENV = #{dashboardName} ...

### Send dashboards API

http://127.0.0.1:8081/zafira-ws/dashboards/email

Authorization: Basic YWRtaW46YXZhdGVpMTY= 

{
  "subject": "Zafira Dashboards",
  "recipients": "[email protected] [email protected]",
  "text": "This is auto-generated email, please do not reply!",
  "dimension": "1920x1080",
  "urls": [
    "http:\/\/127.0.0.1:8081\/zafira-ws\/#!\/dashboards?id=1",
     "http:\/\/127.0.0.1:8081\/zafira-ws\/#!\/dashboards?id=3"
  ]
}

Note: make sure you use /#!/ after application URL!