LogPanels (deprecated)

Log Panels

Props

Name	Type	Default Value	Required	Description
name	string	--	Yes	The name of the visualization
type	Support 4 values: waf ssli pr gifw	--	Yes	The type of the visualization
labels	{label: string; value: string | number}[]	--	Yes	The labels shown in the header
data	{ chart: IObject; dataSource: IObject[]; totalCount: number; filters: IObject[]; label: string }	{}	No	Render data

Data Structure

 chart: IObject; dataSource: IObject[]; totalCount: number; filters: IObject[]; label: string }

Usage Example (type 'gifw')

Usage of Log PAnel with type 'gifw'.

Replace dataSource with respective types to generate the panels you want! (dataSource formats listed below).

Viz Props

import React from 'react'

import { Viz } from 'a10-gui-dgp-viz'

const { LogPanel} = Viz
export const MyDashboard = () => {
  return (
    <LogPanel
      type="gifw"
      data={
        chart: {
          series: [ // react highcharts chart data
            {
              name: "Server 1", 
              data: [
                [1552373653774, 75],
                [1552373753774, 52],
                [1552373853774, 54],
                ...
              ]
            },
            {
              name: "Server 2", 
              data: [
                [1552373653774, 75],
                [1552373753774, 52],
                [1552373853774, 54],
                ...
              ]
            },
            ... // more servers
          ]
        }
      }
      dataSource=[
        {
          timestamp: '2019/1/3',
          protocol: 'ICMP',
          subscriber: '4.32.3.3',
          destination: '4.32.3.2',
          dstPort: 8080,
          dstZone: 'Server',
          inIntrfce: 'ethernet8',
          outIntrfce: 'ethernet8',
          rule: 'RuleName1',
        },
        ...
      ]
      filters=[
        {
          name: "Chrome",
          total-count: 10
        },
        {
          name: "Firefox",
          total-count: 15
        },
        ...
      ]
      isLoading={false} // or true!
      labels={
        label: "LOGS",
        value: "220"
      }
    />
  )
}

Props Interface

UI JSON

type is gifw

Chart

Use highcharts config format.

dataSource and totalCount

totalCount is number of all list data.

This is an example of dataSource.

[
  {
    timestamp: '2019/1/3',
    protocol: 'ICMP',
    subscriber: '4.32.3.3',
    destination: '4.32.3.2',
    dstPort: 8080,
    dstZone: 'Server',
    inIntrfce: 'ethernet8',
    outIntrfce: 'ethernet8',
    rule: 'RuleName1',
  },
]

type is pr

Chart

Use highcharts config format.

dataSource and totalCount

totalCount is number of all list data.

This is an example of dataSource.

[
  {
    timestamp: '2019/1/3',
    clientIp: '123.67.55.4',
    uri: '/index.html',
    request: 'GET',
    response: 304,
    size: '66B',
    endToEnd: '0 ms',
    cached: 'Yes',
  },
]

type is ssli

Chart

Use highcharts config format.

dataSource and totalCount

totalCount is number of all list data.

This is an example of dataSource.

[
  {
    status: '',
    timestamp: '2019/1/3',
    vipName: 'VIP_name1',
    action: 'POST',
    sourceIp: '22.2.2.2',
    sourcePort: 3220,
    destinationIp: '22.2.2.1',
    destinationPort: 3992,
  },
]

type is waf

Chart

Use highcharts config format.

dataSource and totalCount

totalCount is number of all list data.

This is an example of dataSource.

[
  {
    id: '123445',
    timestamp: '2019/1/3',
    severity: 'High',
    sourceIp: '22.2.2.2',
    county: 'CN',
    url: '/user/login.php',
    dataIndex: 'Blocked',
  },
]

This is an example of the Sub table when expand waf table row.

;[
  {
    enable: true,
    rule: '233213',
    type: 'Signature Violation',
    description: 'SQL Ingection on POST parameter',
  },
]

filters have some format for different type.

The filters support two formats, one is checkbox filter, one is scoll range filter. This is an example for the two formats.

[
  {
    label: 'IP Version',
    filters: [
      {
        name: 'Chrome',
        'total-count': 10,
      },
      {
        name: 'IE/Edge',
        'total-count': 20,
      },
      {
        name: 'Firefox',
        'total-count': 15,
      },
      {
        name: 'Safari',
        'total-count': 4,
      },
      {
        name: 'Opera',
        'total-count': 3,
      },
    ],
    orderInfo: {},
    'total-count': 10,
  },
  {
    label: 'Protocol',
    filters: [],
    type: 'scroll',
    min: 0,
    max: 10,
    orderInfo: {},
    'total-count': 10,
  },
]

Actions

VIZ.LOG.LOAD.EXPANDROW

Name	Type	Description
type	string	The action type
logType	string	The type of LogPanel
record	IObject	The row object
callback	(data: IObject, totalCount?: number): void	The update the viz with new data

VIZ.LOG.LOAD.EXPANDROW.SUB

Name	Type	Description
type	string	The action type
options	string	The type of LogPanel
callback	(data: IObject, totalCount?: number): void	The update the viz with new data

VIZ.LOG.LOADMORE

Name	Type	Description
type	string	The action type
options	{page: number; pageSize: number; type: string}	The options for loading more
callback	(dataSouce: IObject[], totalCount: number): void	The update the viz with new data

VIZ.LOG.LOADMORE.SUB

Name	Type	Description
type	string	The action type
options	{page: number; pageSize: number; type: string, record: IObject}	The options for loading more
callback	(dataSouce: IObject[], totalCount: number): void	The update the viz with new data

VIZ.LOG.CHANGE.FILTERS

Name	Type	Description
type	string	The action type
filters	IObject[]	The selected filters

VIZ.LOG.CHANGE.LABEL

Name	Type	Description
type	string	The action type
label	string	The label in the header

VIZ.LOG.CHANGE.LABEL

Name	Type	Description
type	string	The action type
value	string	The search value which input in the header

VIZ.LOG.CLICK.DOWNLOAD

Call the action when click the download icon in the header

Name	Type	Description
type	string	The action type

VIZ.LOG.CLICK.HELP

Call the action when click the help icon in the header

Name	Type	Description
type	string	The action type