Dialog for changing hostname added

src/app/app.module.ts

@@ -275,6 +275,8 @@ import { NodeConsoleService } from './services/nodeConsole.service';
 import { HttpConsoleNewTabActionComponent } from './components/project-map/context-menu/actions/http-console-new-tab/http-console-new-tab-action.component';
 import { WebConsoleFullWindowComponent } from './components/web-console-full-window/web-console-full-window.component';
 import { ConsoleGuard } from './guards/console-guard';
+import { ChangeHostnameActionComponent } from './components/project-map/context-menu/actions/change-hostname/change-hostname-action.component';
+import { ChangeHostnameDialogComponent } from './components/project-map/change-hostname-dialog/change-hostname-dialog.component';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -461,7 +463,9 @@ if (environment.production) {
     WebConsoleComponent,
     ConsoleWrapperComponent,
     HttpConsoleNewTabActionComponent,
-    WebConsoleFullWindowComponent
+    WebConsoleFullWindowComponent,
+    ChangeHostnameActionComponent,
+    ChangeHostnameDialogComponent
   ],
   imports: [
     BrowserModule,
@@ -600,7 +604,8 @@ if (environment.production) {
     ScreenshotDialogComponent,
     ConfirmationBottomSheetComponent,
     ConfigDialogComponent,
-    AdbutlerComponent
+    AdbutlerComponent,
+    ChangeHostnameDialogComponent
   ],
   bootstrap: [AppComponent]
 })

src/app/components/project-map/change-hostname-dialog/change-hostname-dialog.component.html

@@ -0,0 +1,24 @@
+<h1 mat-dialog-title>Change hostname for node {{name}}</h1>
+
+<div class="modal-form-container">
+    <div class="content">
+        <div class="default-content">
+            <mat-card class="matCard">
+                <form [formGroup]="inputForm">
+                    <mat-form-field class="form-field">
+                        <input 
+                            matInput type="text" 
+                            [(ngModel)]="node.name" 
+                            formControlName="name"
+                            placeholder="Name">
+                    </mat-form-field>
+                </form>
+            </mat-card>
+        </div>
+    </div>
+</div>
+
+<div mat-dialog-actions>
+  <button mat-button (click)="onCancelClick()" color="accent">Cancel</button>
+  <button mat-button (click)="onSaveClick()" tabindex="2" mat-raised-button color="primary">Apply</button>
+</div>

src/app/components/project-map/change-hostname-dialog/change-hostname-dialog.component.scss

@@ -0,0 +1,3 @@
+.form-field {
+    width: 100%;
+}

src/app/components/project-map/change-hostname-dialog/change-hostname-dialog.component.ts

@@ -0,0 +1,53 @@
+import { Component, OnInit, Input } 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';
+
+
+@Component({
+    selector: 'app-change-hostname-dialog-component',
+    templateUrl: './change-hostname-dialog.component.html',
+    styleUrls: ['./change-hostname-dialog.component.scss']
+})
+export class ChangeHostnameDialogComponent implements OnInit {
+    server: Server;
+    node: Node;
+    inputForm: FormGroup;
+    name: string;
+
+    constructor(
+        public dialogRef: MatDialogRef<ChangeHostnameDialogComponent>,
+        public nodeService: NodeService,
+        private toasterService: ToasterService,
+        private formBuilder: FormBuilder
+    ) {
+        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.name = this.node.name;
+        })
+    }
+
+    onSaveClick() {
+        if (this.inputForm.valid) {
+            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();
+    }
+}

src/app/components/project-map/context-menu/actions/change-hostname/change-hostname-action.component.html

@@ -0,0 +1,4 @@
+<button mat-menu-item (click)="changeHostname()">
+    <mat-icon>edit</mat-icon>
+    <span>Change hostname</span>
+</button>

src/app/components/project-map/context-menu/actions/change-hostname/change-hostname-action.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Server } from '../../../../../models/server';
+import { Node } from '../../../../../cartography/models/node';
+import { MatDialog } from '@angular/material';
+import { ChangeHostnameDialogComponent } from '../../../change-hostname-dialog/change-hostname-dialog.component';
+
+@Component({
+  selector: 'app-change-hostname-action',
+  templateUrl: './change-hostname-action.component.html'
+})
+export class ChangeHostnameActionComponent implements OnInit {
+  @Input() server: Server;
+  @Input() node: Node;
+
+  constructor(private dialog: MatDialog) {}
+
+  ngOnInit() {}
+
+  changeHostname() {
+    const dialogRef = this.dialog.open(ChangeHostnameDialogComponent, {
+        autoFocus: false,
+        disableClose: true
+      });
+      let instance = dialogRef.componentInstance;
+      instance.server = this.server;
+      instance.node = this.node;
+  }
+}

src/app/components/project-map/context-menu/actions/change-symbol/change-symbol-action.component.html

@@ -1,4 +1,4 @@
 <button mat-menu-item (click)="changeSymbol()">
-    <mat-icon>edit</mat-icon>
+    <mat-icon>find_replace</mat-icon>
     <span>Change symbol</span>
 </button>

src/app/components/project-map/context-menu/context-menu.component.html

@@ -40,6 +40,11 @@
       [server]="server"
       [node]="nodes[0]"
     ></app-open-file-explorer-action>
+    <app-change-hostname-action
+      *ngIf="!projectService.isReadOnly(project) && nodes.length===1"
+      [server]="server"
+      [node]="nodes[0]"
+    ></app-change-hostname-action>
     <app-change-symbol-action
       *ngIf="!projectService.isReadOnly(project) && nodes.length===1"
       [server]="server"