Fix mod ui build issues

[dcaegen2/platform.git] / 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 (file)
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<boolean> = 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<ExampleFlatNode>(
+    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;
+  }
+
+}