Merge pull request #1365 from GNS3/enhancement/1355

Enhancement/1355

src/app/app-routing.module.ts

@@ -215,7 +215,7 @@ const routes: Routes = [
       },
       { path: 'controller/:controller_id/preferences/docker/addtemplate', component: AddDockerTemplateComponent, canActivate: [LoginGuard] },
       { path: 'controller/:controller_id/preferences/iou/templates', component: IouTemplatesComponent, canActivate: [LoginGuard] },
-      { path: 'controller/:controller_id//preferences/iou/templates/:template_id', component: IouTemplateDetailsComponent, canActivate: [LoginGuard] },
+      { path: 'controller/:controller_id/preferences/iou/templates/:template_id', component: IouTemplateDetailsComponent, canActivate: [LoginGuard] },
       {
         path: 'controller/:controller_id/preferences/iou/templates/:template_id/copy',
         component: CopyIouTemplateComponent,

src/app/components/preferences/built-in/built-in-preferences.component.html

@@ -1,22 +1,26 @@
 <div class="content">
   <div class="default-header">
     <div class="row">
-      <h1 class="col">Built-in preferences</h1>
-      <button class="top-button" class="cancel-button" routerLink="/controller/{{ controllerId }}/preferences" mat-button>
-        Back
-      </button>
+      <div class=" col col-md-1">
+        <button class="top-button" class="cancel-button" routerLink="/controller/{{ controllerId }}/preferences" mat-button>
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+      </div>
+      <div class="col-md-11">
+        <h1 class="col">Built-in templates</h1>
+      </div>
     </div>
   </div>
   <div class="default-content">
     <div class="listcontainer mat-elevation-z8">
       <mat-nav-list>
         <mat-list-item routerLink="/controller/{{ controllerId }}/preferences/builtin/ethernet-hubs">
-          Ethernet hubs
+          Ethernet hub templates
         </mat-list-item>
         <mat-list-item routerLink="/controller/{{ controllerId }}/preferences/builtin/ethernet-switches">
-          Ethernet switches
+          Ethernet switch templates
         </mat-list-item>
-        <mat-list-item routerLink="/controller/{{ controllerId }}/preferences/builtin/cloud-nodes"> Cloud nodes </mat-list-item>
+        <mat-list-item routerLink="/controller/{{ controllerId }}/preferences/builtin/cloud-nodes"> Cloud node templates </mat-list-item>
       </mat-nav-list>
     </div>
   </div>

src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.html

@@ -1,7 +1,14 @@
 <div class="content">
   <div class="default-header">
     <div class="row">
-      <h1 class="col">New cloud node template</h1>
+      <div class="col col-md-1">
+        <button *ngIf="controller" class="top-button" class="cancel-button col" (click)="goBack()" mat-button>
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+      </div>
+      <div class="col-md-11">
+        <h1 class="col">New cloud node template</h1>
+      </div>
     </div>
   </div>
   <div class="default-content">

src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component.html

@@ -1,26 +1,34 @@
 <div class="content">
   <div class="default-header">
     <div class="row">
-      <h1 class="col">Cloud nodes templates</h1>
-      <button
-        *ngIf="controller"
-        class="top-button"
-        class="cancel-button"
-        routerLink="/controller/{{ controller.id }}/preferences/builtin"
-        mat-button
-      >
-        Back
-      </button>
-      <button
-        *ngIf="controller"
-        class="top-button"
-        routerLink="/controller/{{ controller.id }}/preferences/builtin/cloud-nodes/addtemplate"
-        mat-raised-button
-        color="primary"
-      >
-        Add cloud node template
-      </button>
+      <div class="col-md-1">
+        <button
+          *ngIf="controller"
+          class="top-button"
+          class="cancel-button"
+          routerLink="/controller/{{ controller.id }}/preferences/builtin"
+          mat-button
+        >
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+      </div>
+      <div class="col-md-10">
+        <h1 class="col">Cloud nodes templates</h1>
+      </div>
+      <div class="col-md-1">
+        <button
+          *ngIf="controller"
+          class="top-button cancel-button"
+          matTooltip=" Add cloud node template"
+          matTooltipClass="custom-tooltip"
+          routerLink="/controller/{{ controller.id }}/preferences/builtin/cloud-nodes/addtemplate"
+          mat-button
+        >
+          <mat-icon>add_circle_outline</mat-icon>
+        </button>
+      </div>
     </div>
+
   </div>
   <app-empty-templates-list *ngIf="!cloudNodesTemplates.length"></app-empty-templates-list>
   <div class="default-content" *ngIf="cloudNodesTemplates.length">
@@ -37,6 +45,9 @@
             <button mat-menu-item (click)="deleteTemplate(template)">
               <mat-icon>delete</mat-icon><span>Delete</span>
             </button>
+            <button mat-menu-item routerLink="{{ template.template_id }}">
+              <mat-icon>edit</mat-icon><span>Edit</span>
+            </button>
           </mat-menu>
         </div>
       </mat-nav-list>

src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.html

@@ -1,7 +1,21 @@
 <div class="content">
   <div class="default-header">
     <div class="row">
-      <h1 class="col">New Ethernet hub template</h1>
+      <div class="col-md-1">
+          <button
+          *ngIf="controller"
+          class="top-button"
+          class="cancel-button"
+          (click)="goBack()"
+          mat-button
+        >
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+      </div>
+      <div class="col-md-11">
+        <h1 class="col">New Ethernet hub template</h1>
+
+      </div>
     </div>
   </div>
   <div class="default-content">

src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component.html

@@ -1,7 +1,20 @@
 <div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened }">
   <div class="default-header">
     <div class="row">
-      <h1 class="col">Ethernet hub settings</h1>
+      <div class="col-md-1">
+        <button
+        *ngIf="controller"
+        class="top-button"
+        class="cancel-button"
+        (click)="goBack()"
+        mat-button
+      >
+        <mat-icon>arrow_back</mat-icon>
+      </button>
+      </div>
+      <div class="col-md-11">
+        <h1 class="col">Ethernet hub settings</h1>
+      </div>
     </div>
   </div>
   <div class="default-content" *ngIf="ethernetHubTemplate">

src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component.html

@@ -1,25 +1,32 @@
 <div class="content">
   <div class="default-header">
     <div class="row">
-      <h1 class="col">Ethernet hubs templates</h1>
-      <button
-        *ngIf="controller"
-        class="top-button"
-        class="cancel-button"
-        routerLink="/controller/{{ controller.id }}/preferences/builtin"
-        mat-button
-      >
-        Back
-      </button>
-      <button
-        *ngIf="controller"
-        class="top-button"
-        routerLink="/controller/{{ controller.id }}/preferences/builtin/ethernet-hubs/addtemplate"
-        mat-raised-button
-        color="primary"
-      >
-        Add Ethernet hub template
-      </button>
+      <div class="col-md-1">
+        <button
+          *ngIf="controller"
+          class="top-button"
+          class="cancel-button"
+          routerLink="/controller/{{ controller.id }}/preferences/builtin"
+          mat-button
+        >
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+      </div>
+      <div class="col-md-10">
+        <h1 class="col">Ethernet hubs templates</h1>
+      </div>
+      <div class="col-md-1">
+        <button
+          *ngIf="controller"
+          class="top-button cancel-button"
+          matTooltip="Add Ethernet hub template"
+          matTooltipClass="custom-tooltip"
+          routerLink="/controller/{{ controller.id }}/preferences/builtin/ethernet-hubs/addtemplate"
+          mat-button
+        >
+          <mat-icon>add_circle_outline</mat-icon>
+        </button>
+      </div>
     </div>
   </div>
   <app-empty-templates-list *ngIf="!ethernetHubsTemplates.length"></app-empty-templates-list>
@@ -37,6 +44,9 @@
             <button mat-menu-item (click)="deleteTemplate(template)">
               <mat-icon>delete</mat-icon><span>Delete</span>
             </button>
+            <button mat-menu-item  routerLink="{{ template.template_id }}">
+              <mat-icon>edit</mat-icon><span>Edit</span>
+            </button>
           </mat-menu>
         </div>
       </mat-nav-list>

src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.html

@@ -1,8 +1,21 @@
 <div class="content">
   <div class="default-header">
     <div class="row">
+    <div class="col col-md-1">
+      <button
+      *ngIf="controller"
+      class="top-button"
+      class="cancel-button col"
+      (click)="goBack()"
+      mat-button
+    >
+      <mat-icon>arrow_back</mat-icon>
+    </button>
+    </div>
+    <div class="col-md-11">
       <h1 class="col">New Ethernet switch template</h1>
     </div>
+    </div>
   </div>
   <div class="default-content">
     <mat-card class="matCard">

src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.html

@@ -1,7 +1,14 @@
 <div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened }">
   <div class="default-header">
     <div class="row">
-      <h1 class="col">Ethernet switch configuration</h1>
+      <div class="col col-md-1">
+        <button *ngIf="controller" class="top-button" class="cancel-button col" (click)="goBack()" mat-button>
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+      </div>
+      <div class="col-md-11">
+        <h1 class="col">Ethernet switch configuration</h1>
+      </div>
     </div>
   </div>
   <div class="default-content" *ngIf="ethernetSwitchTemplate">

src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component.html

@@ -1,26 +1,34 @@
 <div class="content">
   <div class="default-header">
     <div class="row">
-      <h1 class="col">Ethernet switches templates</h1>
-      <button
-        *ngIf="controller"
-        class="top-button"
-        class="cancel-button"
-        routerLink="/controller/{{ controller.id }}/preferences/builtin"
-        mat-button
-      >
-        Back
-      </button>
-      <button
-        *ngIf="controller"
-        class="top-button"
-        routerLink="/controller/{{ controller.id }}/preferences/builtin/ethernet-switches/addtemplate"
-        mat-raised-button
-        color="primary"
-      >
-        Add Ethernet switch template
-      </button>
+      <div class="col-md-1">
+        <button
+          *ngIf="controller"
+          class="top-button"
+          class="cancel-button"
+          routerLink="/controller/{{ controller.id }}/preferences/builtin"
+          mat-button
+        >
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+      </div>
+      <div class="col-md-10">
+        <h1 class="col">Ethernet switches templates</h1>
+      </div>
+      <div class="col-md-1">
+        <button
+          *ngIf="controller"
+          class="top-button cancel-button"
+          matTooltip="Add Ethernet switch template"
+          matTooltipClass="custom-tooltip"
+          routerLink="/controller/{{ controller.id }}/preferences/builtin/ethernet-switches/addtemplate"
+          mat-button
+        >
+          <mat-icon>add_circle_outline</mat-icon>
+        </button>
+      </div>
     </div>
+
   </div>
   <app-empty-templates-list *ngIf="!ethernetSwitchesTemplates.length"></app-empty-templates-list>
   <div class="default-content" *ngIf="ethernetSwitchesTemplates.length">
@@ -37,6 +45,9 @@
             <button mat-menu-item (click)="deleteTemplate(template)">
               <mat-icon>delete</mat-icon><span>Delete</span>
             </button>
+            <button mat-menu-item  routerLink="{{ template.template_id }}">
+              <mat-icon>edit</mat-icon><span>Edit</span>
+            </button>
           </mat-menu>
         </div>
       </mat-nav-list>

src/app/components/preferences/docker/copy-docker-template/copy-docker-template.component.html

@@ -1,7 +1,14 @@
 <div class="content">
   <div class="default-header">
     <div class="row">
+      <div class="col col-md-1">
+        <button class="top-button" *ngIf="controller" class="cancel-button" (click)="goBack()" mat-button>
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+      </div>
+      <div class="col col-md-11">
       <h1 class="col">Copy Docker container template</h1>
+      </div>
     </div>
   </div>
   <div class="default-content">

src/app/components/preferences/docker/docker-template-details/docker-template-details.component.html

@@ -1,7 +1,14 @@
 <div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened }">
   <div class="default-header">
     <div class="row">
-      <h1 class="col">Docker image configuration</h1>
+      <div class="col col-md-1">
+        <button class="top-button" *ngIf="controller" class="cancel-button" (click)="goBack()" mat-button>
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+      </div>
+      <div class="col col-md-11">
+        <h1 class="col">Docker image configuration</h1>
+      </div>
     </div>
   </div>
   <div class="default-content" *ngIf="dockerTemplate">

src/app/components/preferences/docker/docker-templates/docker-templates.component.html

@@ -1,26 +1,34 @@
 <div class="content">
   <div class="default-header">
     <div class="row">
-      <h1 class="col">Docker container templates</h1>
-      <button
-        *ngIf="controller"
-        class="top-button"
-        class="cancel-button"
-        routerLink="/controller/{{ controller.id }}/preferences"
-        mat-button
-      >
-        Back
-      </button>
-      <button
-        *ngIf="controller"
-        class="top-button"
-        routerLink="/controller/{{ controller.id }}/preferences/docker/addtemplate"
-        mat-raised-button
-        color="primary"
-      >
-        Add Docker container template
-      </button>
+      <div class="col col-md-1">
+        <button
+          class="top-button"
+          *ngIf="controller"
+          class="cancel-button"
+          mat-button
+          routerLink="/controller/{{ controller.id }}/preferences"
+          >
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+      </div>
+      <div class="col col-md-10">
+        <h1 class="col">Docker container templates</h1>
+      </div>
+      <div class="col col-md-1">
+        <button
+          *ngIf="controller"
+          class="top-button cancel-button"
+          matTooltip="Add Docker container template"
+          matTooltipClass="custom-tooltip"
+          routerLink="/controller/{{ controller.id }}/preferences/docker/addtemplate"
+          mat-button
+        >
+          <mat-icon>add_circle_outline</mat-icon>
+        </button>
+      </div>
     </div>
+
   </div>
   <app-empty-templates-list *ngIf="!dockerTemplates.length"></app-empty-templates-list>
   <div class="default-content" *ngIf="dockerTemplates.length">
@@ -34,12 +42,15 @@
             <mat-icon>more_vert</mat-icon>
           </button>
           <mat-menu #menu="matMenu">
-            <button mat-menu-item (click)="deleteTemplate(template)">
-              <mat-icon>delete</mat-icon><span>Delete</span>
+            <button mat-menu-item routerLink="{{ template.template_id }}">
+              <mat-icon>edit</mat-icon><span>Edit</span>
             </button>
             <button mat-menu-item (click)="copyTemplate(template)">
               <mat-icon>content_copy</mat-icon><span>Copy</span>
             </button>
+            <button mat-menu-item (click)="deleteTemplate(template)">
+              <mat-icon>delete</mat-icon><span>Delete</span>
+            </button>
           </mat-menu>
         </div>
       </mat-nav-list>

src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.html

@@ -1,7 +1,20 @@
 <div class="content">
   <div class="default-header">
     <div class="row">
-      <h1 class="col">New IOS router template</h1>
+      <div class="col col-md-1">
+        <button
+          class="top-button"
+          *ngIf="controller"
+          class="cancel-button"
+          mat-button
+          (click)="goBack()"
+        >
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+      </div>
+      <div class="col col-md-11">
+        <h1 class="col">New IOS router template</h1>
+      </div>
     </div>
   </div>
   <div class="default-content" *ngIf="iosTemplate">

src/app/components/preferences/dynamips/copy-ios-template/copy-ios-template.component.html

@@ -1,7 +1,14 @@
 <div class="content">
   <div class="default-header">
     <div class="row">
-      <h1 class="col">Copy IOS router template</h1>
+      <div class="col col-md-1">
+        <button class="top-button" *ngIf="controller" class="cancel-button" mat-button (click)="goBack()">
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+      </div>
+      <div class="col col-md-11">
+        <h1 class="col">Copy IOS router template</h1>
+      </div>
     </div>
   </div>
   <div class="default-content">

src/app/components/preferences/dynamips/ios-templates/ios-templates.component.html

@@ -1,25 +1,32 @@
 <div class="content">
   <div class="default-header">
     <div class="row">
-      <h1 class="col">IOS router templates</h1>
-      <button
-        *ngIf="controller"
-        class="top-button"
-        class="cancel-button"
-        routerLink="/controller/{{ controller.id }}/preferences"
-        mat-button
-      >
-        Back
-      </button>
-      <button
-        *ngIf="controller"
-        class="top-button"
-        routerLink="/controller/{{ controller.id }}/preferences/dynamips/templates/addtemplate"
-        mat-raised-button
-        color="primary"
-      >
-        Add IOS router template
-      </button>
+      <div class="col col-md-1">
+        <button
+          class="top-button"
+          *ngIf="controller"
+          class="cancel-button"
+          mat-button
+          routerLink="/controller/{{ controller.id }}/preferences"
+        >
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+      </div>
+      <div class="col col-md-10">
+        <h1 class="col">IOS router templates</h1>
+      </div>
+      <div class="col col-md-1">
+        <button
+          *ngIf="controller"
+          class="top-button cancel-button"
+          matTooltip="Add IOS router template"
+          matTooltipClass="custom-tooltip"
+          routerLink="/controller/{{ controller.id }}/preferences/dynamips/templates/addtemplate"
+          mat-button
+        >
+          <mat-icon>add_circle_outline</mat-icon>
+        </button>
+      </div>
     </div>
   </div>
   <app-empty-templates-list *ngIf="!iosTemplates.length"></app-empty-templates-list>
@@ -40,6 +47,9 @@
             <button mat-menu-item (click)="copyTemplate(template)">
               <mat-icon>content_copy</mat-icon><span>Copy</span>
             </button>
+            <button mat-menu-item routerLink="{{ template.template_id }}">
+              <mat-icon>edit</mat-icon><span>Edit</span>
+            </button>
           </mat-menu>
         </div>
       </mat-nav-list>

src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.html

@@ -1,7 +1,20 @@
 <div class="content">
   <div class="default-header">
     <div class="row">
-      <h1 class="col">New IOU device template</h1>
+      <div class="col col-md-1">
+        <button
+          class="top-button"
+          *ngIf="controller"
+          class="cancel-button"
+          mat-button
+          (click)="goBack()"
+        >
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+      </div>
+      <div class="col col-md-11">
+        <h1 class="col">New IOU device template</h1>
+      </div>
     </div>
   </div>
   <div class="default-content">

src/app/components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component.html

@@ -1,7 +1,20 @@
 <div class="content">
   <div class="default-header">
     <div class="row">
-      <h1 class="col">Copy IOU device template</h1>
+      <div class="col col-md-1">
+        <button
+          class="top-button"
+          *ngIf="controller"
+          class="cancel-button"
+          mat-button
+          (click)="goBack()"
+          >
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+      </div>
+      <div class="col col-md-11">
+        <h1 class="col">Copy IOU device template</h1>
+      </div>
     </div>
   </div>
   <div class="default-content">

src/app/components/preferences/ios-on-unix/iou-template-details/iou-template-details.component.html

@@ -1,7 +1,16 @@
 <div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened }">
   <div class="default-header">
     <div class="form-field">
-      <h1 class="col">IOU device configuration</h1>
+      <div class="row">
+        <div class="col col-md-1">
+          <button *ngIf="controller" class="top-button" class="cancel-button" mat-button (click)="goBack()">
+            <mat-icon>arrow_back</mat-icon>
+          </button>
+        </div>
+        <div class="col col-md-11">
+          <h1 class="col">IOU device configuration</h1>
+        </div>
+      </div>
     </div>
   </div>
   <div class="default-content" *ngIf="iouTemplate">

src/app/components/preferences/ios-on-unix/iou-templates/iou-templates.component.html

@@ -1,25 +1,31 @@
 <div class="content">
   <div class="default-header">
     <div class="row">
-      <h1 class="col">IOU device templates</h1>
-      <button
-        *ngIf="controller"
-        class="top-button"
-        class="cancel-button"
-        routerLink="/controller/{{ controller.id }}/preferences"
-        mat-button
-      >
-        Back
-      </button>
-      <button
-        *ngIf="controller"
-        class="top-button"
-        routerLink="/controller/{{ controller.id }}/preferences/iou/addtemplate"
-        mat-raised-button
-        color="primary"
-      >
-        Add IOU device template
-      </button>
+      <div class="col col-md-1">
+        <button
+          class="top-button"
+          class="cancel-button"
+          routerLink="/controller/{{ controller?.id }}/preferences"
+          mat-button
+        >
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+      </div>
+      <div class="col col-md-10">
+        <h1 class="col">IOU device templates</h1>
+      </div>
+      <div class="col col-md-1">
+        <button
+          *ngIf="controller"
+          class="top-button cancel-button"
+          matTooltip="Add IOU device template"
+          matTooltipClass="custom-tooltip"
+          routerLink="/controller/{{ controller?.id }}/preferences/iou/addtemplate"
+          mat-button
+        >
+          <mat-icon>add_circle_outline</mat-icon>
+        </button>
+      </div>
     </div>
   </div>
   <app-empty-templates-list *ngIf="!iouTemplates.length"></app-empty-templates-list>
@@ -40,6 +46,9 @@
             <button mat-menu-item (click)="copyTemplate(template)">
               <mat-icon>content_copy</mat-icon><span>Copy</span>
             </button>
+            <button mat-menu-item routerLink="{{ template.template_id }}">
+              <mat-icon>edit</mat-icon><span>Edit</span>
+            </button>
           </mat-menu>
         </div>
       </mat-nav-list>

src/app/components/preferences/preferences.component.html

@@ -1,18 +1,36 @@
 <div class="content">
   <div class="default-header">
     <div class="row">
-      <h1 class="col">Preferences</h1>
+      <div class="col-md-1">
+        <button
+          class="top-button"
+          class="cancel-button"
+          routerLink="/controller/{{ controllerId }}/projects"
+          mat-button
+        >
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+      </div>
+      <div class="col-md-11">
+        <h1 class="col">Template preferences</h1>
+      </div>
     </div>
   </div>
   <div class="default-content">
     <div class="listcontainer mat-elevation-z8">
       <mat-nav-list>
         <mat-list-item routerLink="/controller/{{ controllerId }}/preferences/builtin"> Built-in </mat-list-item>
-        <mat-list-item routerLink="/controller/{{ controllerId }}/preferences/dynamips/templates"> Dynamips </mat-list-item>
-        <mat-list-item routerLink="/controller/{{ controllerId }}/preferences/iou/templates"> IOS on Unix </mat-list-item>
+        <mat-list-item routerLink="/controller/{{ controllerId }}/preferences/dynamips/templates">
+          Dynamips
+        </mat-list-item>
+        <mat-list-item routerLink="/controller/{{ controllerId }}/preferences/iou/templates">
+          IOS on Unix
+        </mat-list-item>
         <mat-list-item routerLink="/controller/{{ controllerId }}/preferences/vpcs/templates"> VPCS </mat-list-item>
         <mat-list-item routerLink="/controller/{{ controllerId }}/preferences/qemu/templates"> QEMU </mat-list-item>
-        <mat-list-item routerLink="/controller/{{ controllerId }}/preferences/virtualbox/templates"> VirtualBox </mat-list-item>
+        <mat-list-item routerLink="/controller/{{ controllerId }}/preferences/virtualbox/templates">
+          VirtualBox
+        </mat-list-item>
         <mat-list-item routerLink="/controller/{{ controllerId }}/preferences/vmware/templates"> VMware </mat-list-item>
         <mat-list-item routerLink="/controller/{{ controllerId }}/preferences/docker/templates"> Docker </mat-list-item>
       </mat-nav-list>

src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.html

@@ -1,7 +1,14 @@
 <div class="content">
   <div class="default-header">
     <div class="row">
-      <h1 class="col">New QEMU VM template</h1>
+      <div class="col col-md-1">
+        <button class="top-button" *ngIf="controller" class="cancel-button" mat-button (click)="goBack()">
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+      </div>
+      <div class="col col-md-11">
+        <h1 class="col">New QEMU VM template</h1>
+      </div>
     </div>
   </div>
   <div class="default-content">
@@ -32,12 +39,8 @@
         <mat-step label="Platform and memory" [completed]="memoryForm.get('ramMemory').value && selectedPlatform">
           <form [formGroup]="memoryForm">
             <mat-form-field class="form-field">
-              <mat-select
-                placeholder="Platform"
-                [(ngModel)]="selectedPlatform"
-                [ngModelOptions]="{ standalone: true }"
-              >
-                <mat-option *ngFor="let platform of selectPlatform " [value]="platform">
+              <mat-select placeholder="Platform" [(ngModel)]="selectedPlatform" [ngModelOptions]="{ standalone: true }">
+                <mat-option *ngFor="let platform of selectPlatform" [value]="platform">
                   {{ platform }}
                 </mat-option>
               </mat-select> </mat-form-field
@@ -103,7 +106,7 @@
                   placeholder="Please enter name"
                 />
               </mat-form-field>
-             <!-- here removed the processbar and common processbar -->
+              <!-- here removed the processbar and common processbar -->
             </div>
           </form>
         </mat-step>

src/app/components/preferences/qemu/copy-qemu-vm-template/copy-qemu-vm-template.component.html

@@ -1,7 +1,14 @@
 <div class="content">
   <div class="default-header">
     <div class="row">
-      <h1 class="col">Copy QEMU VM template</h1>
+      <div class="col col-md-1">
+        <button class="top-button" *ngIf="controller" class="cancel-button" mat-button (click)="goBack()">
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+      </div>
+      <div class="col col-md-11">
+        <h1 class="col">Copy QEMU VM template</h1>
+      </div>
     </div>
   </div>
   <div class="default-content">

src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.html

@@ -1,7 +1,14 @@
 <div class="content" [ngClass]="{ shadowed: isConfiguratorOpened || isSymbolSelectionOpened }">
   <div class="default-header">
     <div class="row">
-      <h1 class="col">QEMU VM configuration</h1>
+      <div class="col col-md-1">
+        <button class="top-button" *ngIf="controller" class="cancel-button" mat-button (click)="goBack()">
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+      </div>
+      <div class="col col-md-11">
+        <h1 class="col">QEMU VM configuration</h1>
+      </div>
     </div>
   </div>
   <div class="default-content" *ngIf="qemuTemplate">

src/app/components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component.html

@@ -1,25 +1,33 @@
 <div class="content">
   <div class="default-header">
+
     <div class="row">
-      <h1 class="col">QEMU VM templates</h1>
-      <button
-        *ngIf="controller"
-        class="top-button"
-        class="cancel-button"
-        routerLink="/controller/{{ controller.id }}/preferences"
-        mat-button
-      >
-        Back
-      </button>
-      <button
-        *ngIf="controller"
-        class="top-button"
-        routerLink="/controller/{{ controller.id }}/preferences/qemu/addtemplate"
-        mat-raised-button
-        color="primary"
-      >
-        Add QEMU VM template
-      </button>
+      <div class="col col-md-1">
+        <button
+          class="top-button"
+          *ngIf="controller"
+          class="cancel-button"
+          mat-button
+          routerLink="/controller/{{ controller.id }}/preferences"
+          >
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+      </div>
+      <div class="col col-md-10">
+        <h1 class="col">QEMU VM templates</h1>
+      </div>
+      <div class="col col-md-1">
+        <button
+          *ngIf="controller"
+          class="top-button cancel-button"
+          matTooltip="Add QEMU VM template"
+          matTooltipClass="custom-tooltip"
+          routerLink="/controller/{{ controller.id }}/preferences/qemu/addtemplate"
+          mat-button
+        >
+          <mat-icon>add_circle_outline</mat-icon>
+        </button>
+      </div>
     </div>
   </div>
   <app-empty-templates-list *ngIf="!qemuTemplates.length"></app-empty-templates-list>
@@ -34,12 +42,16 @@
             <mat-icon>more_vert</mat-icon>
           </button>
           <mat-menu #menu="matMenu">
-            <button mat-menu-item (click)="deleteTemplate(template)">
-              <mat-icon>delete</mat-icon><span>Delete</span>
+            <button mat-menu-item routerLink="{{ template.template_id }}">
+              <mat-icon>edit</mat-icon><span>Edit</span>
             </button>
             <button mat-menu-item (click)="copyTemplate(template)">
               <mat-icon>content_copy</mat-icon><span>Copy</span>
             </button>
+            <button mat-menu-item (click)="deleteTemplate(template)">
+              <mat-icon>delete</mat-icon><span>Delete</span>
+            </button>
+            
           </mat-menu>
         </div>
       </mat-nav-list>

src/app/components/preferences/virtual-box/add-virtual-box-template/add-virtual-box-template.component.html

@@ -1,7 +1,20 @@
 <div class="content">
   <div class="default-header">
     <div class="row">
-      <h1 class="col">New VirtualBox VM template</h1>
+      <div class="col col-md-1">
+        <button
+          class="top-button"
+          *ngIf="controller"
+          class="cancel-button"
+          mat-button
+          (click)="goBack()"
+        >
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+      </div>
+      <div class="col col-md-11">
+        <h1 class="col">New VirtualBox VM template</h1>
+      </div>
     </div>
   </div>
   <div class="default-content" *ngIf="virtualBoxTemplate">

src/app/components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component.html

@@ -1,7 +1,14 @@
 <div class="content" [ngClass]="{ shadowed: isConfiguratorOpened || isSymbolSelectionOpened }">
   <div class="default-header">
     <div class="row">
-      <h1 class="col">VirtualBox VM configuration</h1>
+      <div class="col col-md-1">
+        <button class="top-button" *ngIf="controller" class="cancel-button" mat-button (click)="goBack()">
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+      </div>
+      <div class="col col-md-11">
+        <h1 class="col">VirtualBox VM configuration</h1>
+      </div>
     </div>
   </div>
   <div class="default-content" *ngIf="virtualBoxTemplate">

src/app/components/preferences/virtual-box/virtual-box-templates/virtual-box-templates.component.html

@@ -1,26 +1,34 @@
 <div class="content">
   <div class="default-header">
     <div class="row">
-      <h1 class="col">VirtualBox VM templates</h1>
-      <button
-        *ngIf="controller"
-        class="top-button"
-        class="cancel-button"
-        routerLink="/controller/{{ controller.id }}/preferences"
-        mat-button
-      >
-        Back
-      </button>
-      <button
-        *ngIf="controller"
-        class="top-button"
-        routerLink="/controller/{{ controller.id }}/preferences/virtualbox/addtemplate"
-        mat-raised-button
-        color="primary"
-      >
-        Add Virtual Box VM template
-      </button>
+      <div class="col col-md-1">
+        <button
+          class="top-button"
+          *ngIf="controller"
+          class="cancel-button"
+          mat-button
+          routerLink="/controller/{{ controller.id }}/preferences"
+          >
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+      </div>
+      <div class="col col-md-10">
+        <h1 class="col">VirtualBox VM templates</h1>
+      </div>
+      <div class="col col-md-1">
+        <button
+          *ngIf="controller"
+          class="top-button cancel-button"
+          matTooltip="Add Virtual Box VM template"
+          matTooltipClass="custom-tooltip"
+          routerLink="/controller/{{ controller.id }}/preferences/virtualbox/addtemplate"
+          mat-button
+        >
+          <mat-icon>add_circle_outline</mat-icon>
+        </button>
+      </div>
     </div>
+
   </div>
   <app-empty-templates-list *ngIf="!virtualBoxTemplates.length"></app-empty-templates-list>
   <div class="default-content" *ngIf="virtualBoxTemplates.length">

src/app/components/preferences/vmware/add-vmware-template/add-vmware-template.component.html

@@ -1,7 +1,14 @@
 <div class="content">
   <div class="default-header">
     <div class="row">
-      <h1 class="col">New VMware VM template</h1>
+      <div class="col col-md-1">
+        <button class="top-button" *ngIf="controller" class="cancel-button" mat-button (click)="goBack()">
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+      </div>
+      <div class="col col-md-11">
+        <h1 class="col">New VMware VM template</h1>
+      </div>
     </div>
   </div>
   <div class="default-content" *ngIf="vmwareTemplate">

src/app/components/preferences/vmware/vmware-template-details/vmware-template-details.component.html

@@ -1,7 +1,14 @@
 <div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened || isConfiguratorOpened }">
   <div class="default-header">
     <div class="row">
+      <div class="col col-md-1">
+        <button class="top-button" *ngIf="controller" class="cancel-button" mat-button (click)="goBack()">
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+      </div>
+      <div class="col col-md-11">
       <h1 class="col">VMware VM configuration</h1>
+      </div>
     </div>
   </div>
   <div class="default-content" *ngIf="vmwareTemplate">

src/app/components/preferences/vmware/vmware-templates/vmware-templates.component.html

@@ -1,25 +1,33 @@
 <div class="content">
   <div class="default-header">
+
     <div class="row">
-      <h1 class="col">VMware VM templates</h1>
-      <button
-        *ngIf="controller"
-        class="top-button"
-        class="cancel-button"
-        routerLink="/controller/{{ controller.id }}/preferences"
-        mat-button
-      >
-        Back
-      </button>
-      <button
-        *ngIf="controller"
-        class="top-button"
-        routerLink="/controller/{{ controller.id }}/preferences/vmware/addtemplate"
-        mat-raised-button
-        color="primary"
-      >
-        Add VMware template
-      </button>
+      <div class="col col-md-1">
+        <button
+          class="top-button"
+          *ngIf="controller"
+          class="cancel-button"
+          mat-button
+          routerLink="/controller/{{ controller.id }}/preferences"
+          >
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+      </div>
+      <div class="col col-md-10">
+        <h1 class="col">VMware VM templates</h1>
+      </div>
+      <div class="col col-md-1">
+        <button
+          *ngIf="controller"
+          class="top-button cancel-button"
+          matTooltip="Add VMware template"
+          matTooltipClass="custom-tooltip"
+          routerLink="/controller/{{ controller.id }}/preferences/vmware/addtemplate"
+          mat-button
+        >
+          <mat-icon>add_circle_outline</mat-icon>
+        </button>
+      </div>
     </div>
   </div>
   <app-empty-templates-list *ngIf="!vmwareTemplates.length"></app-empty-templates-list>

src/app/components/preferences/vpcs/add-vpcs-template/add-vpcs-template.component.html

@@ -1,7 +1,20 @@
 <div class="content">
   <div class="default-header">
     <div class="row">
-      <h1 class="col">New VPCS node template</h1>
+      <div class="col col-md-1">
+        <button
+          class="top-button"
+          *ngIf="controller"
+          class="cancel-button"
+          mat-button
+          (click)="goBack()"
+        >
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+      </div>
+      <div class="col col-md-11">
+        <h1 class="col">New VPCS node template</h1>
+      </div>
     </div>
   </div>
   <div class="default-content">

src/app/components/preferences/vpcs/vpcs-templates/vpcs-templates.component.html

@@ -1,26 +1,34 @@
 <div class="content">
   <div class="default-header">
     <div class="row">
-      <h1 class="col">VPCS node templates</h1>
-      <button
-        *ngIf="controller"
-        class="top-button"
-        class="cancel-button"
-        routerLink="/controller/{{ controller.id }}/preferences"
-        mat-button
-      >
-        Back
-      </button>
-      <button
-        *ngIf="controller"
-        class="top-button"
-        routerLink="/controller/{{ controller.id }}/preferences/vpcs/addtemplate"
-        mat-raised-button
-        color="primary"
-      >
-        Add VPCS template
-      </button>
+      <div class="col col-md-1">
+        <button
+          class="top-button"
+          *ngIf="controller"
+          class="cancel-button"
+          mat-button
+          routerLink="/controller/{{ controller.id }}/preferences"
+          >
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+      </div>
+      <div class="col col-md-10">
+        <h1 class="col">VPCS node templates</h1>
+      </div>
+      <div class="col col-md-1">
+        <button
+          *ngIf="controller"
+          class="top-button cancel-button"
+          matTooltip="Add VPCS template"
+          matTooltipClass="custom-tooltip"
+          routerLink="/controller/{{ controller.id }}/preferences/vpcs/addtemplate"
+          mat-button
+        >
+          <mat-icon>add_circle_outline</mat-icon>
+        </button>
+      </div>
     </div>
+
   </div>
   <app-empty-templates-list *ngIf="!vpcsTemplates.length"></app-empty-templates-list>
   <div class="default-content" *ngIf="vpcsTemplates.length">
@@ -34,6 +42,9 @@
             <mat-icon>more_vert</mat-icon>
           </button>
           <mat-menu #menu="matMenu">
+            <button mat-menu-item routerLink="{{ template.template_id }}">
+              <mat-icon>edit</mat-icon><span>Edit</span>
+            </button>
             <button mat-menu-item (click)="deleteTemplate(template)">
               <mat-icon>delete</mat-icon><span>Delete</span>
             </button>