A10 GUI Common Library

Introduction

A10Container is an abstract class that all A10 containers implement. It is based on A10 GUI Framework and aids in maximizing modularity and maintainability.

Repository path:

https://github.com/a10networks/a10-gui-common.git

Install

1. Add a10-gui-common to your package.json.

   "a10-gui-common": "git+https://github.com/a10networks/a10-gui-common.git"

2. Execute npm i a10-gui-common

   $ npm i a10-gui-common

   NOTE: a10-gui-common requires a10-gui-framework and a10-gui-widgets

How to use

Usage of Auto-Config Form

import { AutoForm } from 'a10-gui-common'

const yourComponent = () => {
  return (
    <AutoForm
      schemaPath="config/form/virtual-server"
      apiPrefix="/hccapi/v3"
      defaultParams={{ provider: 'root', tenant: 't1' }}
      interceptor={{
        onSubmitSuccess: (sformUtils, response) => {
          // TODO
        },
        onCancel: (sformUtils, error) => {
          // TODO
        },
      }}
    />
  )
}

​

Containers

A10Container

A10Container is abstract class for all containers. It extends A10Component and implements IA10Container interface.

Use case

export default interface IA10Container {

}

// A10 abstract container
export default Class A10Container extends React.Component<IA10Container> {

}
export default setupA10Container(A10Container)

THObjectExplorerContainer

THObjectExplorerContainer extends A10Container and implements the interface ITHObjectExplorerProps.

use case

export default interface ITHObjectExplorerContainerProps {

}

export default Class THObjectExplorerContainer extends A10Container<ITHObjectExplorerContainerProps> {

}

AutoForm

AutoForm has a consistent look and feel across multiple product line such as Harmony Controller, Thunder, and development teams. We can auto generate React GUI forms pages using UI JSON schema files provided by the CM team.

use case

import { AutoForm } from 'a10-gui-common'
onClickNewRuleset = (event: React.SyntheticEvent) => {
  const { actions } = this.props
  event.preventDefault()
  event.stopPropagation()
  this.context.openSlidingPage(
    <AutoForm
      showSectionIcon={true}
      schemaPath="config/form/rule-set"
      params={{
        afterActivate: actions.getActiveRuleset,
      }}
      interceptor={this.handleInterceptorRuleset()}
    />,
  )
}

SForm

Auto-config form (SForm) uses the UI JSON schema to generate a React form. This form includes layout, sections, fields, buttons, and create/update functionalities. However, compared to form mockups, certain fields might not exist in UI JSON schema. These fields are called customized fields.

use case

import { SForm } from 'a10-gui-common'

export default SForm.customize({
  onInitSchema: (schemaFields: IObject) => {
    schemaFields['class-list.type']['cm-meta'].allowed = [
      {
        label: 'IPv4',
        value: 'ipv4',
        help: 'Make class-list type IPv4',
      },
      {
        label: 'IPv6',
        value: 'ipv6',
        help: 'Make class-list type IPv6',
      },
    ]
  },
  onRenderSection: (interceptors: any, title: string): any => {
    const { getFieldValue } = interceptors
    if (title !== 'IPv4' && title !== 'IPv6' && title !== 'Basic') {
      return null
    } else {
      if (getFieldValue('class-list.type') !== 'ipv4' && title === 'IPv4') {
        return null
      }
      if (getFieldValue('class-list.type') !== 'ipv6' && title === 'IPv6') {
        return null
      }
    }
  },
})

To do list

WAF form

​FAQ​