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.css | 57 +++++++ .../app/ms-add-change/ms-add-change.component.html | 109 +++++++++++++ .../ms-add-change/ms-add-change.component.spec.ts | 67 ++++++++ .../app/ms-add-change/ms-add-change.component.ts | 180 +++++++++++++++++++++ 4 files changed, 413 insertions(+) create mode 100644 mod2/ui/src/app/ms-add-change/ms-add-change.component.css create mode 100644 mod2/ui/src/app/ms-add-change/ms-add-change.component.html create mode 100644 mod2/ui/src/app/ms-add-change/ms-add-change.component.spec.ts create mode 100644 mod2/ui/src/app/ms-add-change/ms-add-change.component.ts (limited to 'mod2/ui/src/app/ms-add-change') diff --git a/mod2/ui/src/app/ms-add-change/ms-add-change.component.css b/mod2/ui/src/app/ms-add-change/ms-add-change.component.css new file mode 100644 index 0000000..f256b2f --- /dev/null +++ b/mod2/ui/src/app/ms-add-change/ms-add-change.component.css @@ -0,0 +1,57 @@ +/* + * # ============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========================================================= + */ + +.input { + padding-top: 10px; +} + +.inputLabel { + font-weight: 600; + margin-left: 20px; + width: 150px; +} + +.inputFieldSm { + width: 200px; + height: 35px; + padding-left: 6px; +} +.inputFieldMed { + width: 300px; + height: 35px; + padding-left: 6px; +} +.inputFieldLg { + width: 400px; + height: 35px; + padding-left: 6px; +} + +.validationMsg { + padding-left: 175px; + color: red; + font-size: 11px; + font-weight: 550; +} + +.validationMsgWarning { + padding-left: 175px; + color: rgb(255, 81, 0); + font-size: 11px; + font-weight: 550; +} \ No newline at end of file diff --git a/mod2/ui/src/app/ms-add-change/ms-add-change.component.html b/mod2/ui/src/app/ms-add-change/ms-add-change.component.html new file mode 100644 index 0000000..2fd19d7 --- /dev/null +++ b/mod2/ui/src/app/ms-add-change/ms-add-change.component.html @@ -0,0 +1,109 @@ + + + + + + + + +
+ +
+ + +
+ +
+ + + + + +
+ Format: lowercase alphanumeric with embedded dashes (5-50 characters) +
+ +
+ MS Tag cannot exceed 50 chars +
+
+ +
+ + + +
+ Format: lowercase alpha with embedded dashes +
+ +
+ Warning! Only Global Site short names can exceed 12 chars (max 25) +
+ +
+ Global Site short names cannot exceed 25 chars +
+
+ +
+ + +
+ + +
+ + + +
+ Format: lowercase alphanumeric with embedded dashes +
+
+ +
+ + +
+ (Separate labels with a space) + +
+ + +
+ +
+ + +
+
+ + diff --git a/mod2/ui/src/app/ms-add-change/ms-add-change.component.spec.ts b/mod2/ui/src/app/ms-add-change/ms-add-change.component.spec.ts new file mode 100644 index 0000000..4ba7ae9 --- /dev/null +++ b/mod2/ui/src/app/ms-add-change/ms-add-change.component.spec.ts @@ -0,0 +1,67 @@ +/* + * # ============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 { HttpClientTestingModule } from '@angular/common/http/testing'; +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { RouterTestingModule } from '@angular/router/testing'; +import { JwtHelperService, JWT_OPTIONS } from '@auth0/angular-jwt'; +import { MessageService } from 'primeng/api'; +import { ButtonModule } from 'primeng/button'; +import { DialogModule } from 'primeng/dialog'; +import { DropdownModule } from 'primeng/dropdown'; +import { ToastModule } from 'primeng/toast'; + +import { MsAddChangeComponent } from './ms-add-change.component'; + +describe('MsAddChangeComponent', () => { + let component: MsAddChangeComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [MsAddChangeComponent], + imports: [ + DialogModule, + DropdownModule, + ToastModule, + FormsModule, + ReactiveFormsModule, + ButtonModule, + HttpClientTestingModule, + RouterTestingModule + ], + providers: [ + MessageService, + { provide: JWT_OPTIONS, useValue: JWT_OPTIONS }, + JwtHelperService + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MsAddChangeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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