Examples of automations for script based widgets for incident layouts in Cortex XSOAR.
The following are examples of the script based widgets that are supported in incident layouts.
Charts
A valid result for a chart widget is a list of groups. Each group points to a single entity. For example, in bar charts each group is a bar. A group consists of the following:
Name - A string.
Data - An array of integers.
Color - A string representing a color that will be used as a default color for that group. It can be the name of the color, a hexadecimal representation of the color, or an rgb color value (optional).
Groups - A nested list of groups (optional).
Horizontal Bar
In this example, create a script in Python that displays a horizontal bar of the indicators by severity.
data = {
"Type": 17,
"ContentsFormat": "bar",
"Contents": {
"stats": [
{
"data": [
1
],
"groups": None,
"name": "high",
"label": "incident.severity.high",
"color": "rgb(255, 23, 68)"
},
{
"data": [
1
],
"groups": None,
"name": "medium",
"label": "incident.severity.medium",
"color": "rgb(255, 144, 0)"
},
{
"data": [
2
],
"groups": None,
"name": "low",
"label": "incident.severity.low",
"color": "rgb(0, 205, 51)"
},
{
"data": [
8
],
"groups": None,
"name": "unknown",
"label": "incident.severity.unknown",
"color": "rgb(197, 197, 197)"
}
],
"params": {
"layout": "horizontal"
}
}
}
demisto.results(data)After you have uploaded the script and created the widget, you can add the widget to an incident layout. The following widget displays:
Vertical Bar
In this example, create a script in Python that displays a vertical bar of the indicators by severity.
data = {
"Type": 17,
"ContentsFormat": "bar",
"Contents": {
"stats": [
{
"data": [
1
],
"groups": None,
"name": "high",
"label": "incident.severity.high",
"color": "rgb(255, 23, 68)"
},
{
"data": [
1
],
"groups": None,
"name": "medium",
"label": "incident.severity.medium",
"color": "rgb(255, 144, 0)"
},
{
"data": [
2
],
"groups": None,
"name": "low",
"label": "incident.severity.low",
"color": "rgb(0, 205, 51)"
},
{
"data": [
8
],
"groups": None,
"name": "unknown",
"label": "incident.severity.unknown",
"color": "rgb(197, 197, 197)"
}
],
"params": {
"layout": "vertical"
}
}
}
demisto.results(data)After you have uploaded the script and created the widget, you can add the widget to an incident layout. The following widget displays:
Stacked Bar
In this example, create a script in Python that displays a stacked bar showing the success and failures on specific dates.
data = {
"Type": 17,
"ContentsFormat": "bar",
"Contents": {
"stats": [
{
'name': 'time1',
'groups':
[
{
'name': 'Successes',
'data': [7],
'color': 'rgb(0, 205, 51)'
},
{
'name': 'Failures',
'data': [3],
'color': 'rgb(255, 144, 0)'
}
]
},
{
'name': 'time2',
'groups':
[
{
'name': 'Successes',
'data': [9],
'color': 'rgb(0, 205, 51)'
},
{
'name': 'Failures',
'data': [4],
'color': 'rgb(255, 144, 0)'
}
]
}
],
"params": {
"layout": "horizontal"
}
}
}
demisto.results(data)After you have uploaded the script and created the widget, you can add the widget to an incident layout. The following widget displays:
Line Chart
In this example, we create a JavaScript that displays how many GitHub issues were created each week for Content, Documentation, and Platform in a line chart.
content = 'red',
platform = 'yellow'
documentation = 'blue'
data = {
"Type": 17,
"ContentsFormat": "line",
"Contents": {
"stats": [
{
"count": 3,
"data": [
3
],
"floatData": [
3
],
"groups": [
{
"count": 3,
"data": [
3
],
"floatData": [
3
],
"groups": null,
"name": "Content",
color: content
}
],
"name": "2020-35"
},
{
"count": 32,
"data": [
32
],
"floatData": [
32
],
"groups": [
{
"count": 11,
"data": [
11
],
"floatData": [
11
],
"groups": null,
"name": "Content",
color: content
},
{
"count": 20,
"data": [
20
],
"floatData": [
20
],
"groups": null,
"name": "Platform",
color: platform
},
{
"count": 1,
"data": [
1
],
"floatData": [
1
],
"groups": null,
"name": "Documentation",
color: documentation
}
],
"name": "2020-36"
},
{
"count": 25,
"data": [
25
],
"floatData": [
25
],
"groups": [
{
"count": 15,
"data": [
15
],
"floatData": [
15
],
"groups": null,
"name": "Platform",
color: platform
},
{
"count": 10,
"data": [
10
],
"floatData": [
10
],
"groups": null,
"name": "Content",
color: content
}
],
"name": "2020-37"
},
{
"count": 38,
"data": [
38
],
"floatData": [
38
],
"groups": [
{
"count": 18,
"data": [
18
],
"floatData": [
18
],
"groups": null,
"name": "Platform",
color: platform
},
{
"count": 20,
"data": [
20
],
"floatData": [
20
],
"groups": null,
"name": "Content",
color: content
}
],
"name": "2020-38"
},
{
"count": 48,
"data": [
48
],
"floatData": [
48
],
"groups": [
{
"count": 23,
"data": [
23
],
"floatData": [
23
],
"groups": null,
"name": "Content",
color: content
},
{
"count": 25,
"data": [
25
],
"floatData": [
25
],
"groups": null,
"name": "Platform",
color: platform
}
],
"name": "2020-39"
},
{
"count": 59,
"data": [
59
],
"floatData": [
59
],
"groups": [
{
"count": 29,
"data": [
29
],
"floatData": [
29
],
"groups": null,
"name": "Platform",
color: platform
},
{
"count": 30,
"data": [
30
],
"floatData": [
30
],
"groups": null,
"name": "Content",
color: content
}
],
"name": "2020-40"
},
{
"count": 41,
"data": [
41
],
"floatData": [
41
],
"groups": [
{
"count": 20,
"data": [
20
],
"floatData": [
20
],
"groups": null,
"name": "Content",
color: content
},
{
"count": 21,
"data": [
21
],
"floatData": [
21
],
"groups": null,
"name": "Platform",
color: platform
}
],
"name": "2020-41"
},
{
"count": 41,
"data": [
41
],
"floatData": [
41
],
"groups": [
{
"count": 23,
"data": [
23
],
"floatData": [
23
],
"groups": null,
"name": "Content",
color: content
},
{
"count": 18,
"data": [
18
],
"floatData": [
18
],
"groups": null,
"name": "Platform",
color: platform
}
],
"name": "2020-42"
},
{
"count": 48,
"data": [
48
],
"floatData": [
48
],
"groups": [
{
"count": 18,
"data": [
18
],
"floatData": [
18
],
"groups": null,
"name": "Content",
color: content
},
{
"count": 30,
"data": [
30
],
"floatData": [
30
],
"groups": null,
"name": "Platform",
color: platform
}
],
"name": "2020-43"
},
{
"count": 34,
"data": [
34
],
"floatData": [
34
],
"groups": [
{
"count": 19,
"data": [
19
],
"floatData": [
19
],
"groups": null,
"name": "Content",
color: content
},
{
"count": 15,
"data": [
15
],
"floatData": [
15
],
"groups": null,
"name": "Platform",
color: platform
}
],
"name": "2020-44"
},
{
"count": 32,
"data": [
32
],
"floatData": [
32
],
"groups": [
{
"count": 12,
"data": [
12
],
"floatData": [
12
],
"groups": null,
"name": "Platform",
color: platform
},
{
"count": 20,
"data": [
20
],
"floatData": [
20
],
"groups": null,
"name": "Content",
color: content
}
],
"name": "2020-45"
},
{
"count": 34,
"data": [
34
],
"floatData": [
34
],
"groups": [
{
"count": 16,
"data": [
16
],
"floatData": [
16
],
"groups": null,
"name": "Platform",
color: platform
},
{
"count": 18,
"data": [
18
],
"floatData": [
18
],
"groups": null,
"name": "Content",
color: content
}
],
"name": "2020-46"
},
{
"count": 22,
"data": [
22
],
"floatData": [
22
],
"groups": [
{
"count": 12,
"data": [
12
],
"floatData": [
12
],
"groups": null,
"name": "Platform",
color: platform
},
{
"count": 10,
"data": [
10
],
"floatData": [
10
],
"groups": null,
"name": "Content",
color: content
}
],
"name": "2020-47"
},
{
"count": 21,
"data": [
21
],
"floatData": [
21
],
"groups": [
{
"count": 11,
"data": [
11
],
"floatData": [
11
],
"groups": null,
"name": "Platform",
color: platform
},
{
"count": 10,
"data": [
10
],
"floatData": [
10
],
"groups": null,
"name": "Content",
color: content
}
],
"name": "2020-48"
}
],
"params": {
"groupBy": [
"gitcreated(w)",
"gitteam"
],
"timeFrame": "weeks"
}
}
}
return data;After you have uploaded the script and created the widget, you can add the widget to an incident layout. The following widget displays:
Pie
In this example, create a script in Python that queries and returns a pie chart.
data = {
"Type": 17,
"ContentsFormat": "pie",
"Contents": {
"stats": [
{
"data": [
1
],
"groups": None,
"name": "high",
"label": "incident.severity.high",
"color": "rgb(255, 23, 68)"
},
{
"data": [
1
],
"groups": None,
"name": "medium",
"label": "incident.severity.medium",
"color": "rgb(255, 144, 0)"
},
{
"data": [
2
],
"groups": None,
"name": "low",
"label": "incident.severity.low",
"color": "rgb(0, 205, 51)"
},
{
"data": [
8
],
"groups": None,
"name": "unknown",
"label": "incident.severity.unknown",
"color": "rgb(197, 197, 197)"
}
],
"params": {
"layout": "horizontal"
}
}
}
demisto.results(data)After you have uploaded the script and created the widget, you can add the widget an incident layout. The following widget displays indicator severity as a pie chart:
Duration
In this example, create a script in Python that queries and returns a time duration (specified in seconds), and displays the data as a countdown clock.
data = {
"Type": 17,
"ContentsFormat": "duration",
"Contents": {
"stats": 60 * (30 + 10 * 60 + 3 * 60 * 24),
"params": {
"layout": "horizontal",
"name": "Lala",
"sign": "@",
"colors": {
"items": {
"#00CD33": {
"value": 10
},
"#FAC100": {
"value": 20
},
"green": {
"value": 40
}
}
},
"type": "above"
}
}
}
demisto.results(data)After you have uploaded the script and created the widget, you can add the widget to an incident layout. The following widget displays the time duration:
Number
This example shows how to create a single item widget that displays a number.
data = {
"Type": 17,
"ContentsFormat": "number",
"Contents": {
"stats": 53,
"params": {
"layout": "horizontal",
"name": "Lala",
"sign": "@",
"colors": {
"items": {
"#00CD33": {
"value": 10
},
"#FAC100": {
"value": 20
},
"green": {
"value": 40
}
}
},
"type": "above"
}
}
}
demisto.results(data)After you have uploaded the script and created the widget, you can add the widget to an incident layout. The following widget displays:
 |
Number Trend
This example shows how to create a single item widget that displays a number trend.
data = {
"Type": 17,
"ContentsFormat": "number",
"Contents": {
"stats": { "prevSum": 53, "currSum": 60 },
"params": {
"layout": "horizontal",
"name": "Lala",
"sign": "@",
"colors": {
"items": {
"#00CD33": {
"value": 10
},
"#FAC100": {
"value": 20
},
"green": {
"value": 40
}
}
},
"type": "above"
}
}
}
demisto.results(data)After you have uploaded the script and created the widget, you can add the widget to an incident layout. The following widget displays: