References

Checkmark component shows a simple checkbox (read only)

CopyToClipboardButton component shows a simple copy icon and on click action it copies prop - text to clipboard

Dropdown is a component which extends Dropdown component from Semantic-UI-React framework.

EditableLabel component shows an editable label.

ErrorMessage is a component which uses Message component from Semantic-UI-React to display error message.

ExecutionStatus is a component which shows execution status as icon with optional status and workflow ID strings.

HighlightText component displays code with language-specific keyword highlighting

KeyIndicator - a simple component showing a counter along with an icon

Loading is a component which uses Loader component from Semantic-UI-React to display loader in center of parent component.

MessageContainer is a component which uses Grid and Segment components from Semantic-UI-React to display message box.

NodeFilter - a component showing dropdowns for filtering blueprints, deployments, nodes and nodes instances.

NodeInstancesFilter - a component showing dropdown with nodes instances of specified deployment.

NodesTree is a tree component, it wraps rc-tree component.

ParameterValue is a component which shows parameters (e.g.

Popup is a component which wraps Popup used to display additional information popup.

PopupHelp is a component which uses Popup component to display help popup

PopupMenu is a component which uses Popup component to create dropdown menu triggered by Icon button.

ResourceVisibility - an icon representing resource visibility.

RevertToDefaultIcon is a component showing undo icon.

TimeFilter is a component showing time range

TimePicker is a component showing datetime picker

VisibilityField - allowing the user to choose visibilities for resources by showing the visibility icon and clicking on it to switch.

VisibilityIcon - a component showing an visibility icon depending on resource visibility.

DataSegment component enables fetching data using predefined function and showing segmented data in a simple manner.

SegmentAction is a component showing action bar including buttons displayed above the segments

SegmentItem is a component showing content item for DataSegment component

DataTable component enables fetching data using predefined function and showing tabular data in a simple manner.

Defines action bar including buttons which are displayed above the table

Defines table columns, renders <th> elements.

Defines content of expandable row in data table.

Defines filter bar including filter fields which are displayed above the table

Defines table rows, renders <tr> elements.

Defines expandable row in data table.

ColorPicker is a component showing CompactPicker component from react-color library

EdiTable is a component used in forms to get tabular data input

Form is a component to present HTML forms

FormCheckbox is just a wrapper of Semantic-UI-React's Checkbox component to add help description near Checkbox label. See Checkbox

Access

Stage.Basic.Form.Checkbox

Usage

<Form.Checkbox label="Run install workflow" toggle name="installWorkflow"
               help='Run install lifecycle operations'
               checked={this.state.installWorkflow} onChange={this._handleInputChange.bind(this)}/>

FormDivider is a component to divide form fields using horizontal line in Form component

FormField is a component to present field and is used in Form component

FormGroup is a component to group FormField components and is used in Form component

GenericField is a generic component which can be used as different input fields in Form component

InputDate is a component showing calendar picker using react-datepicker library

InputJson is a component providing text or rich editor for JSON-like data

InputTime is a component showing time picker in form of hours/minutes input field

InputUrlOrFile is a component showing URL and file input field

Gauge is a component to present value in graphical form

Graph is a component to present data in form of line or bar charts.

PieGraph is a component to present data in form of pie chart

Alert is component to present simple message in modal window with OK button.

Confirm is a wrapper component to present simple Yes/No confirmation modal window.

ApproveButton is a component to present confirmation button in Modal component.

CancelButton is a component to present cancellation button in Modal component.

ReadmeModal is a component to present HTML content in Modal component.

StepContent component is interface for components implementing step content for WizardModal

WizardModal component allows you to present step-by-step process in modal window providing convenient way to navigate between steps and store step's data during the process.

Steps have to be constructed using createWizardStep function.

Access

Stage.Basic.Wizard.Modal

Usage

const wizardTitle = 'Hello World Wizard';
const helloWorldWizardSteps = [
    InfrastructureStep, PluginsStep, SecretsStep, InputsStep, ConfirmationStep, InstallStep
];

<Wizard.Modal header={wizardTitle} open={this.state.open} steps={helloWorldWizardSteps}
              onClose={this.closeWizard.bind(this)} toolbox={toolbox} />

Function creating step object.