Installed software link in application menu when in electron

src/app/app-routing.module.ts

@@ -7,6 +7,7 @@ import { ProjectsComponent } from "./components/projects/projects.component";
 import { DefaultLayoutComponent } from "./layouts/default-layout/default-layout.component";
 import { SettingsComponent } from "./components/settings/settings.component";
 import { LocalServerComponent } from "./components/local-server/local-server.component";
+import { InstalledSoftwareComponent } from './components/installed-software/installed-software.component';
 
 
 const routes: Routes = [
@@ -17,6 +18,7 @@ const routes: Routes = [
       { path: 'local', component: LocalServerComponent },
       { path: 'server/:server_id/projects', component: ProjectsComponent },
       { path: 'settings', component: SettingsComponent },
+      { path: 'installed-software', component: InstalledSoftwareComponent },
     ]
   },
   { path: 'server/:server_id/project/:project_id', component: ProjectMapComponent },

src/app/app.module.ts

@@ -74,6 +74,7 @@ import { ProjectNameValidator } from './components/projects/models/projectNameVa
 import { MatSidenavModule } from '@angular/material';
 import { NodeSelectInterfaceComponent } from './components/project-map/node-select-interface/node-select-interface.component';
 import { DrawLinkToolComponent } from './components/project-map/draw-link-tool/draw-link-tool.component';
+import { InstalledSoftwareComponent } from './components/installed-software/installed-software.component';
 
 
 if (environment.production) {
@@ -116,7 +117,8 @@ if (environment.production) {
     ProgressComponent,
     ServerDiscoveryComponent,
     NodeSelectInterfaceComponent,
-    DrawLinkToolComponent
+    DrawLinkToolComponent,
+    InstalledSoftwareComponent
   ],
   imports: [
     BrowserModule,

src/app/components/installed-software/installed-software.component.html

@@ -0,0 +1,48 @@
+<div class="content">
+    <div class="default-header">
+      <h1>Installed software</h1>
+    </div>
+    <div class="default-content">
+      <!-- <div class="example-container mat-elevation-z8">
+        <mat-table #table [dataSource]="dataSource">
+  
+          <ng-container matColumnDef="id">
+            <mat-header-cell *matHeaderCellDef> ID </mat-header-cell>
+            <mat-cell *matCellDef="let row;"> {{row.id}} </mat-cell>
+          </ng-container>
+  
+          <ng-container matColumnDef="name">
+            <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
+            <mat-cell *matCellDef="let row;"> <a [routerLink]="['/server', row.id, 'projects']" class="table-link">{{row.name}}</a></mat-cell>
+          </ng-container>
+  
+          <ng-container matColumnDef="ip">
+            <mat-header-cell *matHeaderCellDef> IP </mat-header-cell>
+            <mat-cell *matCellDef="let row;"> {{row.ip}} </mat-cell>
+          </ng-container>
+  
+          <ng-container matColumnDef="port">
+            <mat-header-cell *matHeaderCellDef> Port </mat-header-cell>
+            <mat-cell *matCellDef="let row;"> {{row.port}} </mat-cell>
+          </ng-container>
+  
+          <ng-container matColumnDef="actions">
+            <mat-header-cell *matHeaderCellDef> Actions </mat-header-cell>
+            <mat-cell *matCellDef="let row;" style="text-align: right">
+              <button mat-icon-button (click)="deleteServer(row)">
+                <mat-icon aria-label="Remove server">delete</mat-icon>
+              </button>
+            </mat-cell>
+          </ng-container>
+  
+          <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+          <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+        </mat-table>
+      </div>
+  
+      <div class="buttons-bar">
+        <button mat-raised-button color="primary" (click)="createModal()">Add server</button>
+      </div> -->
+    </div>
+  </div>
+  

src/app/components/installed-software/installed-software.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InstalledSoftwareComponent } from './installed-software.component';
+
+describe('InstalledSoftwareComponent', () => {
+  let component: InstalledSoftwareComponent;
+  let fixture: ComponentFixture<InstalledSoftwareComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ InstalledSoftwareComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InstalledSoftwareComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/installed-software/installed-software.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-installed-software',
+  templateUrl: './installed-software.component.html',
+  styleUrls: ['./installed-software.component.scss']
+})
+export class InstalledSoftwareComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/settings/settings.component.html

@@ -35,4 +35,5 @@
       <button mat-raised-button color="primary" (click)="save()">Save settings</button>
     </div>
   </div>
+
 </div>

src/app/layouts/default-layout/default-layout.component.html

@@ -8,9 +8,22 @@
 
     <span class="fill-space"></span>
 
-    <button mat-button routerLink="/settings" >
+    <button mat-button [matMenuTriggerFor]="menu" >
-      <mat-icon>settings</mat-icon>
+      <mat-icon>more_vert</mat-icon>
     </button>
+
+    <mat-menu #menu="matMenu">
+      <button mat-menu-item routerLink="/settings">
+        <mat-icon>settings</mat-icon>
+        <span>Settings</span>
+      </button>
+      <button mat-menu-item routerLink="/installed-software" [disabled]="!isInstalledSoftwareAvailable">
+        <mat-icon>cloud_download</mat-icon>
+        <span>Installed software</span>
+      </button>
+    </mat-menu>
+
+
   </mat-toolbar>
 </header>
 
@@ -21,6 +34,6 @@
 <app-progress></app-progress>
 
 <footer class="footer mat-app-background">
-  GNS3 Web UI demo &copy; 2018
+  GNS3 Web UI &copy; 2019
 </footer>
 

src/app/layouts/default-layout/default-layout.component.ts

@@ -1,4 +1,5 @@
 import {Component, OnInit, ViewEncapsulation} from '@angular/core';
+import { ElectronService } from 'ngx-electron';
 
 @Component({
   selector: 'app-default-layout',
@@ -7,10 +8,14 @@ import {Component, OnInit, ViewEncapsulation} from '@angular/core';
   styleUrls: ['./default-layout.component.css']
 })
 export class DefaultLayoutComponent implements OnInit {
+  public isInstalledSoftwareAvailable = false;
 
-  constructor() { }
+  constructor(
+    private electronService: ElectronService
+  ) { }
 
   ngOnInit() {
+    this.isInstalledSoftwareAvailable = this.electronService.isElectronApp;
   }
 
 }

src/app/services/installed-software.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { InstalledSoftwareService } from './installed-software.service';
+
+describe('InstalledSoftwareService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: InstalledSoftwareService = TestBed.get(InstalledSoftwareService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/installed-software.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class InstalledSoftwareService {
+
+  constructor() { }
+}