From bdf8e89dfa2f25bac215d7e0af1db3bf919fa360 Mon Sep 17 00:00:00 2001 From: Piotr Pekala Date: Tue, 10 Sep 2019 03:05:54 -0700 Subject: [PATCH] Support for ethernet switches --- src/app/app.module.ts | 9 ++- ...t-switches-template-details.component.html | 60 +---------------- ...net-switches-template-details.component.ts | 33 ++-------- .../common/ports/ports.component.html | 66 +++++++++++++++++++ .../common/ports/ports.component.scss | 0 .../common/ports/ports.component.spec.ts | 0 .../common/ports/ports.component.ts | 48 ++++++++++++++ .../config-action/config-action.component.ts | 3 +- .../configurator/configurator.component.scss | 20 ++++++ ...onfigurator-ethernet-switch.component.html | 35 ++++++++++ .../configurator-ethernet-switch.component.ts | 63 ++++++++++++++++++ .../vpcs/configurator-vpcs.component.ts | 2 - 12 files changed, 247 insertions(+), 92 deletions(-) create mode 100644 src/app/components/preferences/common/ports/ports.component.html create mode 100644 src/app/components/preferences/common/ports/ports.component.scss create mode 100644 src/app/components/preferences/common/ports/ports.component.spec.ts create mode 100644 src/app/components/preferences/common/ports/ports.component.ts create mode 100644 src/app/components/project-map/node-editors/configurator/ethernet-switch/configurator-ethernet-switch.component.html create mode 100644 src/app/components/project-map/node-editors/configurator/ethernet-switch/configurator-ethernet-switch.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index dc540c2f..a094098b 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -214,6 +214,8 @@ import { SuspendNodeActionComponent } from './components/project-map/context-men import { ConfigActionComponent } from './components/project-map/context-menu/actions/config-action/config-action.component'; import { ConfiguratorDialogVpcsComponent } from './components/project-map/node-editors/configurator/vpcs/configurator-vpcs.component'; import { ConfiguratorDialogEthernetHubComponent } from './components/project-map/node-editors/configurator/ethernet_hub/configurator-ethernet-hub.component'; +import { ConfiguratorDialogEthernetSwitchComponent } from './components/project-map/node-editors/configurator/ethernet-switch/configurator-ethernet-switch.component'; +import { PortsComponent } from './components/preferences/common/ports/ports.component'; if (environment.production) { Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', { @@ -355,7 +357,9 @@ if (environment.production) { SuspendNodeActionComponent, ConfigActionComponent, ConfiguratorDialogVpcsComponent, - ConfiguratorDialogEthernetHubComponent + ConfiguratorDialogEthernetHubComponent, + ConfiguratorDialogEthernetSwitchComponent, + PortsComponent ], imports: [ BrowserModule, @@ -457,7 +461,8 @@ if (environment.production) { ChangeSymbolDialogComponent, EditProjectDialogComponent, ConfiguratorDialogVpcsComponent, - ConfiguratorDialogEthernetHubComponent + ConfiguratorDialogEthernetHubComponent, + ConfiguratorDialogEthernetSwitchComponent ], bootstrap: [AppComponent] }) diff --git a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.html b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.html index f798570b..8089383b 100644 --- a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.html +++ b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.html @@ -57,69 +57,13 @@ - + Port settings - - - - - - - - - - - - - - - - - - - - - - - -
Port number {{element.port_number}} VLAN {{element.vlan}} Type {{element.type}} EtherType {{element.ethertype}}

- - - - - - - - - - {{type}} - - - - - - - {{type}} - - - - +
diff --git a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.ts b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.ts index f3a33a97..6ffd3415 100644 --- a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.ts +++ b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from "@angular/core"; +import { Component, OnInit, ViewChild } from "@angular/core"; import { ActivatedRoute, Router } from '@angular/router'; import { ServerService } from '../../../../../services/server.service'; import { Server } from '../../../../../models/server'; @@ -6,8 +6,8 @@ import { ToasterService } from '../../../../../services/toaster.service'; import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms'; import { BuiltInTemplatesService } from '../../../../../services/built-in-templates.service'; import { EthernetSwitchTemplate } from '../../../../../models/templates/ethernet-switch-template'; -import { PortsMappingEntity } from '../../../../../models/ethernetHub/ports-mapping-enity'; import { BuiltInTemplatesConfigurationService } from '../../../../../services/built-in-templates-configuration.service'; +import { PortsComponent } from '../../../common/ports/ports.component'; @Component({ @@ -16,20 +16,13 @@ import { BuiltInTemplatesConfigurationService } from '../../../../../services/bu styleUrls: ['./ethernet-switches-template-details.component.scss', '../../../preferences.component.scss'] }) export class EthernetSwitchesTemplateDetailsComponent implements OnInit { + @ViewChild(PortsComponent, {static: false}) portsComponent: PortsComponent; server: Server; ethernetSwitchTemplate: EthernetSwitchTemplate; inputForm: FormGroup; - ethernetPorts: PortsMappingEntity[] = []; - dataSource: PortsMappingEntity[] = []; - newPort: PortsMappingEntity; - isSymbolSelectionOpened: boolean = false; - categories = []; consoleTypes: string[] = []; - portTypes: string[] = []; - etherTypes: string[] = []; - displayedColumns: string[] = ['port_number', 'vlan', 'type', 'ethertype']; constructor( private route: ActivatedRoute, @@ -45,11 +38,6 @@ export class EthernetSwitchesTemplateDetailsComponent implements OnInit { defaultName: new FormControl('', Validators.required), symbol: new FormControl('', Validators.required) }); - - this.newPort = { - name: '', - port_number: 0, - }; } ngOnInit() { @@ -61,8 +49,6 @@ export class EthernetSwitchesTemplateDetailsComponent implements OnInit { this.getConfiguration(); this.builtInTemplatesService.getTemplate(this.server, template_id).subscribe((ethernetSwitchTemplate: EthernetSwitchTemplate) => { this.ethernetSwitchTemplate = ethernetSwitchTemplate; - this.ethernetPorts = this.ethernetSwitchTemplate.ports_mapping; - this.dataSource = this.ethernetSwitchTemplate.ports_mapping; }); }); } @@ -70,18 +56,6 @@ export class EthernetSwitchesTemplateDetailsComponent implements OnInit { getConfiguration() { this.categories = this.builtInTemplatesConfigurationService.getCategoriesForEthernetSwitches(); this.consoleTypes = this.builtInTemplatesConfigurationService.getConsoleTypesForEthernetSwitches(); - this.portTypes = this.builtInTemplatesConfigurationService.getPortTypesForEthernetSwitches(); - this.etherTypes = this.builtInTemplatesConfigurationService.getEtherTypesForEthernetSwitches(); - } - - onAdd() { - this.ethernetPorts.push(this.newPort); - this.dataSource = [...this.ethernetPorts]; - - this.newPort = { - name: '', - port_number: 0, - }; } goBack() { @@ -92,6 +66,7 @@ export class EthernetSwitchesTemplateDetailsComponent implements OnInit { if (this.inputForm.invalid) { this.toasterService.error(`Fill all required fields`); } else { + this.ethernetSwitchTemplate.ports_mapping = this.portsComponent.ethernetPorts; this.builtInTemplatesService.saveTemplate(this.server, this.ethernetSwitchTemplate).subscribe((ethernetSwitchTemplate: EthernetSwitchTemplate) => { this.toasterService.success("Changes saved"); }); diff --git a/src/app/components/preferences/common/ports/ports.component.html b/src/app/components/preferences/common/ports/ports.component.html new file mode 100644 index 00000000..2fcc2f00 --- /dev/null +++ b/src/app/components/preferences/common/ports/ports.component.html @@ -0,0 +1,66 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Port number {{element.port_number}} VLAN {{element.vlan}} Type {{element.type}} EtherType {{element.ethertype}} Actions + +

+ + + + + + + + + + {{type}} + + + + + + + {{type}} + + + + diff --git a/src/app/components/preferences/common/ports/ports.component.scss b/src/app/components/preferences/common/ports/ports.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/components/preferences/common/ports/ports.component.spec.ts b/src/app/components/preferences/common/ports/ports.component.spec.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/app/components/preferences/common/ports/ports.component.ts b/src/app/components/preferences/common/ports/ports.component.ts new file mode 100644 index 00000000..efc2d393 --- /dev/null +++ b/src/app/components/preferences/common/ports/ports.component.ts @@ -0,0 +1,48 @@ +import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core"; +import { Server } from '../../../../models/server'; +import { PortsMappingEntity } from '../../../../models/ethernetHub/ports-mapping-enity'; +import { BuiltInTemplatesConfigurationService } from '../../../../services/built-in-templates-configuration.service'; + + +@Component({ + selector: 'app-ports', + templateUrl: './ports.component.html', + styleUrls: ['../../preferences.component.scss'] +}) +export class PortsComponent implements OnInit { + @Input() ethernetPorts: PortsMappingEntity[] = []; + newPort: PortsMappingEntity = { + name: '', + port_number: 0, + }; + + portTypes: string[] = []; + etherTypes: string[] = []; + displayedColumns: string[] = ['port_number', 'vlan', 'type', 'ethertype', 'action']; + + constructor( + private builtInTemplatesConfigurationService: BuiltInTemplatesConfigurationService + ) {} + + ngOnInit() { + this.getConfiguration(); + } + + getConfiguration() { + this.etherTypes = this.builtInTemplatesConfigurationService.getEtherTypesForEthernetSwitches(); + this.portTypes = this.builtInTemplatesConfigurationService.getPortTypesForEthernetSwitches(); + } + + onAdd() { + this.ethernetPorts.push(this.newPort); + + this.newPort = { + name: '', + port_number: 0, + }; + } + + delete(port: PortsMappingEntity) { + this.ethernetPorts = this.ethernetPorts.filter(n => n !== port); + } +} diff --git a/src/app/components/project-map/context-menu/actions/config-action/config-action.component.ts b/src/app/components/project-map/context-menu/actions/config-action/config-action.component.ts index 43cd50cd..c1bccc72 100644 --- a/src/app/components/project-map/context-menu/actions/config-action/config-action.component.ts +++ b/src/app/components/project-map/context-menu/actions/config-action/config-action.component.ts @@ -4,6 +4,7 @@ import { Node } from '../../../../../cartography/models/node'; import { MatDialog, MatDialogRef } from '@angular/material'; import { ConfiguratorDialogVpcsComponent } from '../../../node-editors/configurator/vpcs/configurator-vpcs.component'; import { ConfiguratorDialogEthernetHubComponent } from '../../../node-editors/configurator/ethernet_hub/configurator-ethernet-hub.component'; +import { ConfiguratorDialogEthernetSwitchComponent } from '../../../node-editors/configurator/ethernet-switch/configurator-ethernet-switch.component'; @Component({ @@ -27,7 +28,7 @@ export class ConfigActionComponent { } else if (this.node.node_type === 'ethernet_hub') { this.dialogRef = this.dialog.open(ConfiguratorDialogEthernetHubComponent, this.conf); } else if (this.node.node_type === 'ethernet_switch') { - + this.dialogRef = this.dialog.open(ConfiguratorDialogEthernetSwitchComponent, this.conf); } else if (this.node.node_type === 'cloud') { } else if (this.node.node_type === 'dynamips') { diff --git a/src/app/components/project-map/node-editors/configurator/configurator.component.scss b/src/app/components/project-map/node-editors/configurator/configurator.component.scss index ae93f5c6..d914988c 100644 --- a/src/app/components/project-map/node-editors/configurator/configurator.component.scss +++ b/src/app/components/project-map/node-editors/configurator/configurator.component.scss @@ -5,3 +5,23 @@ .select { width: 100%; } + +.default-content { + max-height: 400px; + overflow-y: scroll; + scrollbar-color: darkgrey #263238; + scrollbar-width: thin; +} + +::-webkit-scrollbar { + width: 0.5em; +} + +::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); +} + +::-webkit-scrollbar-thumb { + background-color: darkgrey; + outline: 1px solid #263238; +} diff --git a/src/app/components/project-map/node-editors/configurator/ethernet-switch/configurator-ethernet-switch.component.html b/src/app/components/project-map/node-editors/configurator/ethernet-switch/configurator-ethernet-switch.component.html new file mode 100644 index 00000000..900d1abd --- /dev/null +++ b/src/app/components/project-map/node-editors/configurator/ethernet-switch/configurator-ethernet-switch.component.html @@ -0,0 +1,35 @@ +

Configurator for node {{node.name}}

+ + + +
+ + +
diff --git a/src/app/components/project-map/node-editors/configurator/ethernet-switch/configurator-ethernet-switch.component.ts b/src/app/components/project-map/node-editors/configurator/ethernet-switch/configurator-ethernet-switch.component.ts new file mode 100644 index 00000000..41e27483 --- /dev/null +++ b/src/app/components/project-map/node-editors/configurator/ethernet-switch/configurator-ethernet-switch.component.ts @@ -0,0 +1,63 @@ +import { Component, OnInit, Input, ViewChild } from "@angular/core"; +import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms'; +import { Node } from '../../../../../cartography/models/node'; +import { Server } from '../../../../../models/server'; +import { NodeService } from '../../../../../services/node.service'; +import { ToasterService } from '../../../../../services/toaster.service'; +import { MatDialogRef } from '@angular/material'; +import { BuiltInTemplatesConfigurationService } from '../../../../../services/built-in-templates-configuration.service'; +import { PortsComponent } from '../../../../../components/preferences/common/ports/ports.component'; + + +@Component({ + selector: 'app-configurator-ethernet-switch', + templateUrl: './configurator-ethernet-switch.component.html', + styleUrls: ['../configurator.component.scss'] +}) +export class ConfiguratorDialogEthernetSwitchComponent implements OnInit { + @ViewChild(PortsComponent, {static: false}) portsComponent: PortsComponent; + server: Server; + node: Node; + + inputForm: FormGroup; + consoleTypes: string[] = []; + + constructor( + public dialogRef: MatDialogRef, + public nodeService: NodeService, + private toasterService: ToasterService, + private formBuilder: FormBuilder, + private ethernetSwitchesConfigurationService: BuiltInTemplatesConfigurationService + ) { + this.inputForm = this.formBuilder.group({ + name: new FormControl('', Validators.required) + }); + } + + ngOnInit() { + this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => { + this.node = node; + this.getConfiguration(); + }) + } + + getConfiguration() { + this.consoleTypes = this.ethernetSwitchesConfigurationService.getConsoleTypesForEthernetSwitches(); + } + + onSaveClick() { + if (this.inputForm.valid) { + this.node.properties.ports_mapping = this.portsComponent.ethernetPorts; + this.nodeService.updateNode(this.server, this.node).subscribe(() => { + this.toasterService.success(`Node ${this.node.name} updated.`); + this.onCancelClick(); + }); + } else { + this.toasterService.error(`Fill all required fields.`); + } + } + + onCancelClick() { + this.dialogRef.close(); + } +} diff --git a/src/app/components/project-map/node-editors/configurator/vpcs/configurator-vpcs.component.ts b/src/app/components/project-map/node-editors/configurator/vpcs/configurator-vpcs.component.ts index 042e60fd..0ff0526b 100644 --- a/src/app/components/project-map/node-editors/configurator/vpcs/configurator-vpcs.component.ts +++ b/src/app/components/project-map/node-editors/configurator/vpcs/configurator-vpcs.component.ts @@ -19,7 +19,6 @@ export class ConfiguratorDialogVpcsComponent implements OnInit { inputForm: FormGroup; consoleTypes: string[] = []; - categories = []; constructor( public dialogRef: MatDialogRef, @@ -42,7 +41,6 @@ export class ConfiguratorDialogVpcsComponent implements OnInit { getConfiguration() { this.consoleTypes = this.vpcsConfigurationService.getConsoleTypes(); - this.categories = this.vpcsConfigurationService.getCategories(); } onSaveClick() {