ibex-dashboard/docs/splitpanel.md

SplitPanel

A SplitPanel view control consists of a side bar of grouped items which can be selected to load up it's list of items.

Basic properties

Property	Type	Value	Description
id	string		ID of the element on the page
type	string	"SplitPanel"
title	string		Title that will appear at the top of the view
size	{ w: number, h: number}		Width/Height of the view
dependencies	object		Dependencies that will be requested for this element
props	object		Additional properties to define for this element
actions	object		Defined actions for this element

Dependencies

Define dependencies as follows:

Property	Type	Description
groups	string	Reference to collection of grouped values
values	string	Reference to values loaded from a selected group

Dependencies sample:

dependencies: {
  groups: "errors-group",
  values: "errors-selection"
}

Props

Takes same props as Table. Mandatory SplitPanel props are:

Property	Type	Description
cols	object[]	Collection of table column properties
group	object	Dictionary of field names used for displaying the group title, secondary text and badge count

Define props.cols as follows:

Property	Type	Description
header	string	Column header
field	string	Defines the query field
secondaryHeader	string	Secondary column header
secondaryField	string	Defines the secondary query field
width	number	Set column width
type	string	Either 'text', 'time', 'icon', 'button'. Default is 'text'
format	string	If type is time a date format can be applied
value	string	If type is a icon or button this will define the icon to use
click	string	If type is a button this will define the action to trigger when selecting a row

Define props.group as follows:

Property	Type	Description
field	string	Defines the query field
secondaryField	string	Defines the secondary query field
countField	string	Defines the count field

Props sample:

props: {
  cols: [{
    header: "Type",
    field: "type",
    secondaryHeader: "Message",
    secondaryField: "innermostMessage"
  }, {
    header: "Conversation Id",
    field: "conversationId",
    secondaryHeader: "Operation Id",
    secondaryField: "operation_Id"
  }, {
    header: "HandledAt",
    field: "handledAt"
  }, {
    type: "button",
    value: "more",
    click: "openErrorDetail"
  }],
  group: {
    field: "type",
    secondaryField: "innermostMessage",
    countField: "error_count"
  }
}

Actions

Define each action as follows:

Property	Type	Description
action	string	Reference to data source to update
params	object	Dictionary of parameters to be passed

Actions sample:

actions: {
  select: {
    action: "errors-selection:updateDependencies",
    params: {
      title: "args:type",
      type: "args:type",
      innermostMessage: "args:innermostMessage",
      queryspan: "timespan:queryTimespan"
    }
  },
  openErrorDetail: {
    action: "dialog:errordetail",
    params: {
      title: "args:operation_Id",
      type: "args:type",
      innermostMessage: "args:innermostMessage",
      handledAt: "args:handledAt",
      conversationId: "args:conversationId",
      operation_Id: "args:operation_Id",
      queryspan: "timespan:queryTimespan"
    }
  }
}