UI Widgets¶

AIT provides a number of UI widgets out of the box to use when constructing your operations GUI. The default widgets are meant to cover the majority of functionality you would expect to find in an operations UI. Below we’ll document each of the widgets, what they do, how to include them in your UI, and how to configure their functionality to meet your needs.

Telemetry¶

Field¶

Display a given packet’s telemetry point value in the display.

Required Attributes:

packet: The packet name where the telemetry point is located
name: The name of the field in the packet to display

Optional Attributes:

raw: Toggle whether the field should be displayed as a raw value instead of the default of displaying a DN-to-EU value. (default: false)
disable-tlm-popover: Toggle whether a popover should be placed on the field value displaying telemetry dictionary information for the displayed field. (default: false)
format: Format string to use when displaying the value. The value for the field is passed through either strftime or sprintf depending on type if format is specified. If the field is an array type the format attribute is ignored. By default, a field is displayed as a 5 digit precision number. (default: none)

MnemonicSearch¶

Search for a Packets’s telemetry fields by name and display dictionary data and data snapshot of selected value in a modal.

Requires that ait-modal is included in the page for modal functionality to work. Default styling via the display-border and invert-colors attributes is set for display as part of the default Bootstrap navbar. You should consider adjusting these settings if you plan to display the component in a different part of the UI.

Required Attributes:

packet: The name of the packet in the telemetry dictionary that should be searched for fields

Optional Attributes:

result-count: The number of results to show when autocompleting (default: 20)
display-border: Adds the ‘no-borders’ css class to the component display. This drops borders from the displayed input field. (default: false)
invert-colors: Adds the ‘inverse-colors’ class to the component display. When included this displays the component as a black background with white foreground / icons when unfocused. (default: true)

Examples:

<ait-mnemonic-search packet="1553_HS_Packet"></ait-mnemonic-search>

<ait-mnemonic-search packet="1553_HS_Packet"
    result-count="10"
    display-border="true"
    invert-colors="false">
</ait-mnemonic-search>

Plot¶

Display a plot of telemetry data

Plot configuration can be done with a number of children tags and attributes. A plot must have at least one ait-plot-series child so that it has something to plot

The Plot component supports graphing with Dygraphs (default) and HighCharts. If you want to use HighCharts instead of Dygraphs you need to include the Highcharts JS file in your page. If the window.Highcharts object is defined then Highcharts will be used.

Optional Attributes:

redraw-frequency: The frequency, in seconds, that the plot should be redrawn. (default: 10)
redraw-frequency-variation: Toggle whether plot redraw frequency should be affected by random variation. If enabled, the redraw frequency of the plot will vary by [redraw-frequency-var-min, redraw-frequency-variation-max] seconds each refresh. This is useful if you have a large number of plots and need to avoid all of them attempting to redraw at the same time. (default: false)
redraw-frequency-variation-min (-2): The minimum variation in seconds to add to the redraw frequency
redraw-frequency-variation-max (2): The maximum variation in seconds to add to the redraw frequency

ait-plot-series:

Configure the series of data that should be plotted. At least 1 series of data is required for the plot to function.

Required attributes:

packet: The packet in which the series telemetry point is located.
field: The name of the field in the packet that defines this series.

Optional attributes:

type: The type of series being displayed. This is not relevant for all plot backends. For instance, Highcharts would use this to define the type of plot to show whereas Dygraphs does not support this value. If you’re using Highcharts this attribute is required and would most commonly be set to line.
plot-range: The number of data points that should be stored and used for plotting. Defaults to 600. Data received beyond this maximum causes the oldest point to be removed from the queue. This is only used by the Dygraphs backend.
raw: If the raw parameter is true, the raw value will be returned. DN to EU conversions will be skipped. (Default: raw=false)

<ait-plot-series packet="1553_HS_Packet" field="Voltage_A" raw=true></ait-plot-series>

ait-plot-config:

Allows the passing of a JSON object for configuration of the current backend into the plot. Any setting that is valid for the backend being used can be included in the JSON object. Please consult the relevant backend’s documentation for information on valid settings.

<ait-plot-config>
  {
     "title": "Plot title",
     "xlabel": "X label",
     "ylabel": "Y label"
  }
</ait-plot-config>

ait-plot-time:

Facilitates setting the name of a telemetry field defining the timestamp used when plotting data. If the evaluation of the specified telemetry field does not result in a number of Date() object the current time is used instead. If no ait-plot-time tag is specified the current time is used.

<ait-plot-time packet="1553_HS_Packet" field="FSWTimeField"></ait-plot-time>

Examples:

<ait-plot redraw-frequency="1">
  <ait-plot-config>
    {
      "width": 600,
      "height": 300
    }
  </ait-plot-config>
  <ait-plot-series packet="1553_HS_Packet" name="Voltage_A" raw=true></ait-plot-series>
  <ait-plot-series packet="1553_HS_Packet" name="Voltage_B" raw=true></ait-plot-series>
  <ait-plot-series packet="1553_HS_Packet" name="Voltage_C" raw=true></ait-plot-series>
  <ait-plot-series packet="1553_HS_Packet" name="Voltage_D" raw=true></ait-plot-series>
</ait-plot>

TelemetryQuery¶

Generate and run queries against captured telemetry data in PCAP files and retrieve a CSV of the resulting data.

Optional Attributes:

data-dir
The data directory key specifying which directory should be used when gathering telemetry data PCAPs.

packet
The name of the packet definition in the telemetry dictionary from which fields will be selected for the query.

time-field
The telemetry field name that will be used as the time baseline in the query.

Note

Specifying one or more of these optional attributes will remove the corresponding input field from the UI.

Examples:

<ait-telemetryquery></ait-telemetryquery>

<ait-telemetryquery
  data-dir='/tmp/fakepcapdir'
  packet='1553_EHS_Packet'
  time-field='time_coarse'>
</ait-telemetryquery>

Commanding¶

CommandInput¶

Search input field for locating, verifying, and submitting commands.

Searches over the command dictionary and command history. The component will be automatically disabled when a sequence is being run. Responds to the cmd:hist, seq:exec, seq:done, and seq:err events.

Examples:

<ait-command-input></ait-command-input>

CommandSearch¶

Command Browser Search sub-component

Handles command searching / filtering for the Command Browser component. Displays commands by subsystem and filters choices based on user input.

Examples:

<ait-command-search></ait-command-search>

CommandConfigure¶

Command Browser Configure sub-component

Handles command configuration, validation, and submission. This command to be configured is set in CommandSelectionData.activeCommand.

CommandSelectionData.activeCommand Format:

{
    name: <command name>,
    desc: <command description>
}

Examples:

<ait-command-configure></ait-command-configure>

CommandHistory¶

Command History file display component

Displays command history data and auto-refreshes on receipt of cmd:hist or seq:done events.

Examples:

<ait-command-history></ait-command-history>

Scripts¶

Script display, state management, and execution control.

Examples:

<ait-scripts></ait-scripts>

Sequence¶

Sequence selection and execution component

Optional Attributes:

action: The form action attribute to POST. (default: ‘/seq’)

Layout¶

TabSet¶

AIT TabSet

AIT TabSet is a Mithril UI component for a <ait-tabset>, which manages a set of children <ait-tab>’s. Tabs have a title attribute and their own child content. When a TabSet is rendered to the DOM via its view() method, it:

Uses <ait-tabset> and <ait-tab> HTML5 custom tags for targeted CSS styling and customization, and

Uses Bootstrap HTML structure and CSS classes

A AIT TabSet is signficantly more succinct than Bootstrap tabs. For example, compare creating a AIT TabSet directly in HTML:

<ait-tabset class="nav-tabs">
    <ait-tab title="Foo"> ... </ait-tab>
    <ait-tab title="Bar"> ... </ait-tab>
    <ait-tab title="Baz"> ... </ait-tab>
</ait-tab>

To the corresponding Bootstrap HTML and CSS:

<ul class="nav nav-tabs">
    <li> <a href="#">Foo</a> </li>
    <li> <a href="#">Bar</a> </li>
    <li> <a href="#">Baz</a> </li>
</ul>

<div class="tab-content">
    <div class="tab-pane active"> ... </div>
</div>
<!-- Repeat for the contents of all three tabs -->

Tabs may also be rendered as Bootstrap pills, stacked, justified, etc. by adding the appropriate CSS classes to a <ait-tabset>.

Tabs may be reordered programmatically via TabSet.move(from, to) or by interactively via drag-and-drop.

Misc.¶

Clock¶

AIT Clock UI Widget

The AIT Clock UI Widget displays a clock with date and time that updates every second. The display is configurable at initialization time or by clicking on specific parts of the time / date display.

Configurable / Toggleable options include:

12-hour or 24-hour time

Date (month and day) or Day of Year (DOY)

GPS, UTC, or localtime

Optional Attributes:

h24: Display clock in 24 hour time instead of 12 hour time. (default: true)
gps: Display clock in GPS time. This value overrides UTC time display if both are true. (default: true)
utc: Display clock in UTC time. (defaut: false)
doy: Display date as Day of Year. (default: false)

Examples:

<ait-clock></ait-clock>

<ait-clock h24='true' utc='true'></ait-clock>

Messages¶

Component for displaying log messages

Examples:

<ait-messages></ait-messages>

LED¶

Displays internal state information via styled Glyphicon and tracks transitions through its’ states via monitoring of the system event queue.

Allows for configuration of 4 state event handlers (‘on’, ‘off’, ‘pending’, and ‘error’) via attributes on the ait-led tag.

You can specify multiple triggers for a single state by separating the event names with a ‘,’

Examples:

<ait-led on="seq:exec,seq:sent" off="seq:done"></ait-led>

// If you want to start the LED in a state besides 'off' set
// it via the 'default' attribute
<ait-led on="seq:exec,seq:sent" default="pending"></ait-led>

SimStatus¶

An expansion of the base LED object for controlling the state of simulators and displaying state information with regards to their operation.

Allows for configuration of 4 state event handlers for displaying information about the state of the simulator. You can configure these states (‘on’, ‘off’, ‘pending’, and ‘error’) via attributes on the tag.

You can specify multiple triggers for a single state by separating the event names with a ‘,’.

The ‘default’ attribute specifies the state of the monitored sim on bootup. If you start your sim in a particular state you should update ‘default’ accordingly so the component can properly track the sim. The ‘off’ state is the default.

The ‘action’ attribute is the URL for POSTs to be made for starting and stopping the monitored Sim. SimStatus expects the following interface with the sim:

POST 'action' + '/start' to start the sim.
POST 'action' + '/stop' to stop the sim.

Modal¶

An event toggle-able Modal Component

A customizable Modal component that is toggled and configured via events. The Modal component will smoothly handle multiple simultaneous modal requests by queueing additional ‘show’ calls behind the currently displayed modal.

Events:

modal:show: Display a modal to the user. Modal configuration should be included in the body of the event.
modal:hide: Stop displaying the current active modal.

Modal configuration is passed via the ‘modal:show’ event body. The following values are valid configuration values.

header
Contains the content to be displayed as the modal’s title.

body
Contains the content to display as the modal’s body

footer
Contains the content to display as the modal’s footer

insertHeaderCloseBtn
Toggles whether a close button should be inserted into the modal header for the caller. Defaults to true.

insertFooterCloseBtn
Toggles whether a close button should be inserted into the modal footer for the caller. Defaults to true.

displayBackground
Toggles whether the modal background should be inserted when rendering the modal. Defaults to true.

Note

The Modal component is automatically injected into the UI by default. If you wish to use the Modal functionality you can do so without adding anything to your UI.

Prompt¶

Customizable component for prompting the user via a modal

Supported Prompt types:

confirm
Display a prompt to the user asking them to confirm/deny a supplied message.

Prompt state is managed via events:

prompt:init: Initialize and display the prompt to the user. The event data should contain.
prompt:timeout: Expected to be called when the user takes too long to respond to the prompt so cleanup can be handled
prompt:done: Expected to be called when the prompt no long needs displayed to the user so cleanup can be handled.

Prompt Type Configuration:

confirm

A confirm type prompt asks the user to confirm/deny a given message

msg: The message to display in the modal body

Note

The Prompt component is automatically injected into the UI by default. If you wish to use the Modal functionality you can do so without adding anything to your UI.