awx/docs/networking/README.md

Finite State Machine Designs

This directory contains the finite state machine designs that were used to generate the skeleton of the javascript implementations and can be used to check that the implementations still match the designs.

Machine Readable FSM Schema

The machine readable FSM schema contains three top-level elements: name, states, and transitions.

• The name element is a string.
• The states element contains a list of state elements which have attributes id, label, and x, and y.
• The transitions element contains a list of transition elements which have attributes from_state, to_state, and label.

Design Diagrams

The diagrams below are visual representations of the finite state machine designs in this directory. The equivalent machine readable representations are linked as well.

---

Button FSM

• See: button.yml

The button FSM describes how a button works. The key insight here is that a button is not clicked if the mouse is not over the button on both the MouseDown and MouseUp events. Moving the mouse off the button before MouseUp is not a click.

---

Buttons FSM

• See: buttons.yml

The buttons FSM distributes events to the buttons which each have their own FSM.

---

Hot Keys FSM

• See: hotkeys.yml

The hot keys FSM handles key events and generates new events like NewLink to implement hot keys.

---

Mode FSM

• See: mode.yml

The mode FSM controls the overall mode of the network UI application.

---

Move FSM

• See: move.yml

The move FSM controls placement of devices as well as editing the device labels.

---

Time FSM

• See: time.yml

The time FSM controls undo/redo functionality of the network UI.

---

Toolbox FSM

• See: toolbox.yml

The toolbox FSM controls the drag-and-drop toolboxes and allow placement of new devices, applications, racks, and sites onto the canvas.

---

View FSM

• See: view.yml

The view FSM controls the panning and scaling of the the virtual canvas through clicking-and-dragging of the background and scrolling the mousewheel.