Examples of Script Based Widgets for Incident Layouts
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:
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:
