Examples of Script Based Widgets for Incident Layouts

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:

Recommended For You