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 --- mod2/ui/src/app/app.component.ts | 218 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 218 insertions(+) create mode 100644 mod2/ui/src/app/app.component.ts (limited to 'mod2/ui/src/app/app.component.ts') diff --git a/mod2/ui/src/app/app.component.ts b/mod2/ui/src/app/app.component.ts new file mode 100644 index 0000000..87d29b4 --- /dev/null +++ b/mod2/ui/src/app/app.component.ts @@ -0,0 +1,218 @@ +/* + * # ============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, HostBinding, OnInit } from '@angular/core'; +import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout'; +import { Observable } from 'rxjs'; +import { map, shareReplay } from 'rxjs/operators'; +import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree'; +import { FlatTreeControl } from '@angular/cdk/tree'; +import { Event, Router, RouterOutlet, NavigationStart, NavigationEnd, RouterEvent } from '@angular/router'; +import { AuthService } from './services/auth.service'; +import { BreadcrumbService } from './services/breadcrumb.service'; +import { environment } from '../environments/environment'; +import { FormGroup, FormBuilder, Validators } from '@angular/forms'; +import { UserService } from './services/user.service'; +import { User } from './models/User'; +import { Authority } from './models/Authority.enum'; + +interface TreeNode { + name: string; + children?: TreeNode[]; +} + +const TREE_DATA: TreeNode[] = [ + { + name: 'Microservices', + children: [ + { name: 'Microservices' }, + { name: 'MS Instances' }, + { name: 'Blueprints' }, + { name: 'MOD APIs' } + ] + } +]; + +interface ExampleFlatNode { + expandable: boolean; + name: string; + level: number; +} + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) +export class AppComponent implements OnInit{ + + @HostBinding('@.disabled') + public animationsDisabled = true; + activeNode: any; + resetPasswordFlag: boolean = false; + resetPasswordForm: FormGroup; + hidePassword: boolean = true; + hideConfirmPassword: boolean = true; + breadcrumbs: any[] = []; + + prepareRoute(outlet: RouterOutlet) { + return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation']; + } + + title = 'mod-fe'; + right: boolean = true; + down: boolean = false; + + menu_tree(){ + this.right = !this.right; + this.down = !this.down; + } + + isHandset$: Observable = this.breakpointObserver.observe(Breakpoints.Handset) + .pipe( + map(result => result.matches), + shareReplay() + ); + + redirectTo(link){ + window.open(link, "_blank"); + } + + redirectToAPIs() { + window.open(`http://${environment.api_baseURL}:31001/swagger-ui.html#/`, "_blank"); + } + + constructor(private breakpointObserver: BreakpointObserver, private router: Router, public authService: AuthService, + private bread: BreadcrumbService, private fb: FormBuilder, private userService: UserService) { + this.dataSource.data = TREE_DATA; + } + + ngOnInit() { + this.resetPasswordForm = this.fb.group( + { + password: ['', [Validators.minLength(6)]], + confirm_password: '' + }, + {validators: [this.passwordValidator]} + ); + + // Subscribe to breadcrumb changes + this.bread.breadcrumbs$.subscribe( (crumbArray) => {this.breadcrumbs = crumbArray}); + } + + setCrumbs(component, action) { + this.bread.setBreadcrumbs(component, action) + } + + passwordValidator(group: FormGroup) { + if(group.value.password === group.value.confirm_password){ + return null; + } else { + return {errMsg: 'Passwords do not match!'}; + } + } + + private _transformer = (node: TreeNode, level: number) => { + return { + expandable: !!node.children && node.children.length > 0, + name: node.name, + level: level, + }; + } + + tree_handler(name, treenode) { + if (name == "MOD APIs") { + window.open(`http://${environment.api_baseURL}:31001/swagger-ui.html#/`, "_blank"); + } else if (name == "MS Instances") { + this.router.navigate(["ms-instances"]); + this.activeNode = treenode; + } else if(name == "Microservices") { + this.router.navigate(["base-microservices"]); + this.activeNode = treenode; + } else if(name == "Blueprints") { + this.router.navigate(["blueprints"]); + this.activeNode = treenode; + } + + } + + treeControl = new FlatTreeControl( + node => node.level, node => node.expandable); + + treeFlattener = new MatTreeFlattener( + this._transformer, node => node.level, node => node.expandable, node => node.children); + + dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); + + hasChild = (_: number, node: ExampleFlatNode) => node.expandable; + + showMsMenu = false; + msMenuIconRight = true; + msMenu() { + this.showMsMenu = !this.showMsMenu + this.msMenuIconRight = !this.msMenuIconRight + } + + showUtilitiesMenu = false; + utilitiesMenuIconRight = true; + utilitiesMenu(){ + this.showUtilitiesMenu = !this.showUtilitiesMenu + this.utilitiesMenuIconRight = !this.utilitiesMenuIconRight + } + + onConfirm() { + this.authService.reLoginMsg = false; + } + + handleLogout() { + this.showMsMenu = false + this.authService.logout() + } + + handleProfile() { + console.log(this.authService.getUser().roles); + this.resetPasswordFlag = true; + } + + closeResetDialog() { + this.resetPasswordForm.reset(); + this.resetPasswordFlag = false; + } + + submitReset() { + if(this.authService.getUser().roles.includes(Authority.ADMIN)){ + this.userService.editUser(this.authService.getUser().username, this.resetPasswordForm.value as User).subscribe(res=>{ + alert("Password reset successful. Please login in using the new credentials."); + this.authService.logout(); + }, (err)=>{ + alert(err.error.message); + + }); + } else { + this.userService.editProfile(this.authService.getUser().username, this.resetPasswordForm.value as User).subscribe(res=>{ + alert("Password reset successful. Please login in using the new credentials."); + this.authService.logout(); + }, (err)=>{ + alert(err.error.message); + }); + } + this.resetPasswordForm.reset(); + this.resetPasswordFlag = false; + } + +} -- cgit 1.2.3-korg