Component structure

What is a component made of?

Note that when we say component, we mean a logic component like an API or Client

Every component is made of at least 2 things (and 4 files). These are:

• The logic class of the component itself.
• The Angular component that represents the UI of the component.

The logic of the component

Ports

This is the Typescript class that is in /src/models folder. Every logic component needs to implement the IDataOperator interface that is in /src/interfaces and extend the LogicComponent class.

Components can also have ports that can be of either input or output type. It is important to keep the property naming convention with these ports, that is inputPort for input port and outputPort for output port

export class LoadBalancer extends LogicComponent implements IDataOperator {
  inputPort: Port;
  outputPort: Port;
}

Options

Every component can have different options that can do different things. Components need options that are or extend type Options. These can be things like endpoints etc. To know if something goes to options, tell yourself if it is important that the property will stay the same when you refresh the page.

export class LoadBalancerOptions extends Options {
    type: LoadBalancerType = LoadBalancerType["Layer 7"];
    algorithm: BalancingAlgorithm = BalancingAlgorithm["Round Robin"];
}

If you have options like BalancingAlgorithm that can be one of many given values, you can create enum in the /src/models/enums folder

Creating Angular component

After you've created the logic component, it's time to add UI (sometimes Angular components need to implement some logic too)

$ ng g c board/components <name>

The template

Every component needs a container that holds everything together. Inside it is icon of component and template with #conn reference that is used to dynamically create ports and titles.

<div #anchorRef
[style.left.px]="[Logic Component Name].options.X "
[style.top.px]="[Logic Component Name].options.Y">
    <template #conn></template>
    <div class="img-container" (mousedown)="handleMousedown($event)"
    (click)="handleClick($event)">
        <img src="./assets/[icon].svg">
    </div>    
</div>

Last part of the template is #options div and #actions div. This is where the options and actions section will go. A lot of inputs are made with Angular Material components (though most of the styles are then re-made in styles.scss).

The component class

The Angular component should extend OperatorComponent class that's in /board/components/Shared.

@Component({
  	selector: 'loadbalancer',
	templateUrl: './loadbalancer.component.html',
  	styleUrls: ['./loadbalancer.component.scss']
})
export class LoadbalancerComponent extends OperatorComponent implements OnInit {
...

The styles

The last file is scss file with styles that apply only to given component. More on that in Angular styles documentation

More details on how to create a new component are in Setting up a new component section.