From 457685063fd4b960441e482cc8b88fa8c972a7d2 Mon Sep 17 00:00:00 2001 From: Nicholas Soteropoulos Date: Mon, 14 Sep 2020 17:19:10 -0400 Subject: Fix mod ui build issues Change-Id: I4d002645240852a3a5f1964d9ffa2cac11c45b47 Signed-off-by: Nicholas Soteropoulos Issue-ID: DCAEGEN2-2317 Signed-off-by: Nicholas Soteropoulos --- .../app/ms-add-change/ms-add-change.component.ts | 180 +++++++++++++++++++++ 1 file changed, 180 insertions(+) create mode 100644 mod2/ui/src/app/ms-add-change/ms-add-change.component.ts (limited to 'mod2/ui/src/app/ms-add-change/ms-add-change.component.ts') diff --git a/mod2/ui/src/app/ms-add-change/ms-add-change.component.ts b/mod2/ui/src/app/ms-add-change/ms-add-change.component.ts new file mode 100644 index 0000000..6991104 --- /dev/null +++ b/mod2/ui/src/app/ms-add-change/ms-add-change.component.ts @@ -0,0 +1,180 @@ +/* + * # ============LICENSE_START======================================================= + * # Copyright (c) 2020 AT&T Intellectual Property. All rights reserved. + * # ================================================================================ + * # Licensed under the Apache License, Version 2.0 (the "License"); + * # you may not use this file except in compliance with the License. + * # You may obtain a copy of the License at + * # + * # http://www.apache.org/licenses/LICENSE-2.0 + * # + * # Unless required by applicable law or agreed to in writing, software + * # distributed under the License is distributed on an "AS IS" BASIS, + * # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * # See the License for the specific language governing permissions and + * # limitations under the License. + * # ============LICENSE_END========================================================= + */ + +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { InputTextModule } from 'primeng/inputtext'; +import { DropdownModule } from 'primeng/dropdown'; +import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms'; +import { AuthService } from '../services/auth.service'; + +interface Type { + type: string; +} +interface Location { + location: string; +} + +@Component({ + selector: 'app-ms-add-change', + templateUrl: './ms-add-change.component.html', + styleUrls: ['./ms-add-change.component.css'] +}) + +export class MsAddChangeComponent implements OnInit { + + guiHeader: string = "Microservice ADD" + // Used for the Add/Update button label + addOrUpdate: string = "Add"; + + msAddForm: FormGroup; + // The loggged in user + username: string; + + // Input form fields + name: string; + tag: string; + serviceName: string = ""; + type: string; + location: string; + namespace: string; + labels: string; + notes: string; + + // Dropdowns + types: Type[]; + locations: Location[]; + + // Return JSON to parent component + msAddChangeString: any; + msAddChangeJson: any; + + constructor(private fb: FormBuilder, private authService: AuthService) { + } + + @Input() visible: boolean; + @Input() currentRow: any; + @Output() handler: EventEmitter = new EventEmitter(); + + ngOnInit() { + // The logged in user + this.username = this.authService.getUser().username; + + this.msAddForm = new FormGroup({ + name: new FormControl(), + tag: new FormControl(), + serviceName: new FormControl(), + type: new FormControl(), + //location: new FormControl(), + namespace: new FormControl(), + labels: new FormControl(), + notes: new FormControl() + }); + + // FORM fields and validations + this.msAddForm = this.fb.group({ + name: ['', [Validators.required]], + tag: ['', [Validators.required, Validators.pattern('^([a-z0-9](-[a-z0-9])*)+$'), Validators.minLength(5), Validators.maxLength(50)]], + serviceName: ['', [Validators.pattern('^([a-z](-[a-z])*)+$'), Validators.maxLength(25)]], + type: ['', [Validators.required]], + //location: ['', [Validators.required]], + namespace: ['', [Validators.pattern('^([a-z0-9](-[a-z0-9])*)+$')]], + labels: ['', []], + notes: ['', []] + }, + {updateOn: "blur"} + ); + + // TYPE Dropdown + this.types = [ + { type: 'FM_COLLECTOR' }, + { type: 'PM_COLLECTOR' }, + { type: 'ANALYTIC' }, + { type: 'TICK' }, + { type: 'OTHER' } + ]; + // LOCATION Dropdown + this.locations = [ + { location: 'EDGE' }, + { location: 'CENTRAL' }, + { location: 'UNSPECIFIED' } + ]; + + // "Update" was selected, so populate the current row data in the GUI + if (this.currentRow) { + this.guiHeader = "Microservice Update"; + this.addOrUpdate = "Update"; + this.populateFields(); + } + + } + + populateFields() { + let labelsStr: string; + if (this.currentRow['metadata']['labels']) { + labelsStr = this.currentRow['metadata']['labels'].join(' ') + } + + // Prevent validation (length check) from failing in the html + if (this.currentRow['serviceName']) { + this.serviceName = this.currentRow['serviceName'] + } + + this.msAddForm.patchValue({ + name: this.currentRow['name'], + tag: this.currentRow['tag'], + serviceName: this.serviceName, + type: {type: this.currentRow['type']}, + //location: {location: this.currentRow['location']}, + namespace: this.currentRow['namespace'], + labels: labelsStr, + notes: this.currentRow['metadata']['notes'] + }) + } + + // The handler emits 'null' back to parent to close dialog and make it available again when clicked + closeDialog() { + this.visible = false; + this.handler.emit(null); + } + + // Create the JSON to be sent to the parent component + // The "labels" functions below take into account leading/trailing spaces, multiple spaces between labels, and conversion into an array + createOutputJson() { + this.msAddChangeString = { + name: this.msAddForm.value['name'].trim(), + tag: this.msAddForm.value['tag'], + serviceName: this.msAddForm.value['serviceName'], + type: this.msAddForm.value['type'].type, + location: 'UNSPECIFIED', + //location: this.msAddForm.value['location'].location, + namespace: this.msAddForm.value['namespace'].trim(), + metadata: { + labels: this.msAddForm.value['labels'].trim().replace(/\s{2,}/g, ' ').split(" "), + notes: this.msAddForm.value['notes'] + }, + user: this.username + }; + } + + saveMs() { + this.createOutputJson(); + this.msAddChangeJson = JSON.stringify(this.msAddChangeString); + this.handler.emit(this.msAddChangeJson); + } + +} -- cgit 1.2.3-korg