Examples of Script Based Widgets for Incident Layouts - Administrator Guide - 8 - Cortex XSOAR - Cortex - Security Operations

Cortex XSOAR Administrator Guide

Product
Cortex XSOAR
Version
8
Creation date
2023-11-02
Last date published
2024-02-21
Category
Administrator Guide
Abstract

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-graph.png

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:

horizontal-bar-graph3.png

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:

horizontal-bar-graph2.png

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:

widget-line.png
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:

pie-chart.png
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:

duration.png
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.png
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:

number-trend.png