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
2024-09-18
Last date published
2025-02-16
Category
Administrator Guide
Solution
Cloud
Retire_Doc
Retiring
Link_to_new_Doc
/r/Cortex-XSOAR/8/Cortex-XSOAR-Cloud-Documentation
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