ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-02-20 17:52:46 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Appliance table added

Browse Source
This commit is contained in:
piotrpekala7 2020-05-28 03:19:59 +02:00
parent 4992eae284
commit b37b5c7134
7 changed files with 122 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/app.module.ts
View File

@ -276,6 +276,7 @@ import { HttpConsoleNewTabActionComponent } from './components/project-map/conte
import { WebConsoleFullWindowComponent } from './components/web-console-full-window/web-console-full-window.component';
import { ConsoleGuard } from './guards/console-guard';
import { NewTemplateDialogComponent } from './components/project-map/new-template-dialog/new-template-dialog.component';
import { ApplianceService } from './services/appliances.service';
if (environment.production) {
Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@ -559,7 +560,8 @@ if (environment.production) {
ServerResolve,
ProjectMapGuard,
ConsoleGuard,
Title
Title,
ApplianceService
],
entryComponents: [
AddServerDialogComponent,

52
src/app/components/project-map/new-template-dialog/new-template-dialog.component.html
View File

@ -4,9 +4,9 @@
<mat-step [stepControl]="firstFormGroup">
<ng-template matStepLabel>Please select how you want to create new template</ng-template>
<mat-radio-group class="radio-group" aria-label="Sorting">
<mat-radio-button value="1" (click)="setFiletype('svg')" checked>SVG</mat-radio-button>
<mat-radio-button [disabled]="!isPngAvailable" value="2" (click)="setFiletype('png')">PNG</mat-radio-button>
<mat-radio-group class="radio-group">
<mat-radio-button class="radio-button" value="1" (click)="setAction('install')" checked>Install new appliance from the GNS server</mat-radio-button><br/>
<mat-radio-button class="radio-button" value="2" (click)="setAction('import')">Import an appliance file</mat-radio-button>
</mat-radio-group>
<div>
@ -15,7 +15,51 @@
</mat-step>
<mat-step [stepControl]="secondFormGroup">
<ng-template matStepLabel>Appliances from server</ng-template>
<ng-template matStepLabel>{{actionTitle}}</ng-template>
<mat-card>
<mat-form-field class="filter-field">
<input matInput [(ngModel)]="searchText" placeholder="Filter">
</mat-form-field>
<mat-table
class="mat-table"
#table
matSort
(matSortChange)= "sortData($event)"
[dataSource]="appliances | namefilter: searchText">
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
</ng-container>
<ng-container matColumnDef="emulator">
<mat-header-cell *matHeaderCellDef mat-sort-header> Emulator </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.emulator}} </mat-cell>
</ng-container>
<ng-container matColumnDef="vendor">
<mat-header-cell *matHeaderCellDef mat-sort-header> Vendor </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.vendor_name}} </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 matTooltip="Restore snapshot" (click)="restoreSnapshot(row)">
<mat-icon aria-label="Restore snapshot">restore</mat-icon>
</button>
<button mat-icon-button matTooltip="Delete snapshot" (click)="deleteSnapshot(row)">
<mat-icon aria-label="Delete snapshot">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>
</mat-card>
</mat-step>
<mat-step>

3
src/app/components/project-map/new-template-dialog/new-template-dialog.component.scss
View File

@ -0,0 +1,3 @@
.radio-button {
margin-bottom: 30px;
}

38
src/app/components/project-map/new-template-dialog/new-template-dialog.component.ts
View File

@ -1,8 +1,10 @@
import { Component, Input, OnInit } from '@angular/core';
import { Component, Input, OnInit, ChangeDetectorRef } from '@angular/core';
import { MatDialogRef } from '@angular/material';
import { Server } from '../../../models/server';
import { Node } from '../../../cartography/models/node';
import { Project } from '../../../models/project';
import { ApplianceService } from '../../../services/appliances.service';
import { Appliance } from '../../../models/appliance';
@Component({
selector: 'app-new-template-dialog',
@ -13,11 +15,41 @@ export class NewTemplateDialogComponent implements OnInit {
@Input() server: Server;
@Input() project: Project;
public action: string = 'install';
public actionTitle: string = 'Install appliance from server';
public searchText: string = '';
public appliances: Appliance[] = [];
public categories: string[] = ['router', 'multilayer_switch', 'guest', 'firewall'];
public displayedColumns: string[] = ['name', 'emulator', 'vendor'];
constructor(
public dialogRef: MatDialogRef<NewTemplateDialogComponent>
public dialogRef: MatDialogRef<NewTemplateDialogComponent>,
private applianceService: ApplianceService,
private changeDetector: ChangeDetectorRef
) {}
ngOnInit() {}
ngOnInit() {
this.applianceService.getAppliances(this.server).subscribe((appliances) => {
this.appliances = appliances;
this.appliances.forEach(appliance => {
if (appliance.docker) appliance.emulator = 'Docker';
if (appliance.dynamips) appliance.emulator = 'Dynamips';
if (appliance.iou) appliance.emulator = 'Iou';
if (appliance.qemu) appliance.emulator = 'Qemu';
});
});
}
setAction(action: string) {
this.action = action;
if (action === 'install') {
this.actionTitle = 'Install appliance from server';
} else if (action === 'import') {
this.actionTitle = 'Import an appliance file';
}
}
onCloseClick() {
this.dialogRef.close();

2
src/app/components/project-map/project-map.component.ts
View File

@ -854,7 +854,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
public addNewTemplate() {
const dialogRef = this.dialog.open(NewTemplateDialogComponent, {
width: '1000px',
height: '500px',
maxHeight: '500px',
autoFocus: false,
disableClose: true
});

32
src/app/models/appliance.ts
View File

@ -17,6 +17,29 @@ export interface Qemu {
ram: number;
}
export interface Docker {
adapters: number;
console_type: string;
image: string;
}
export interface Dynamips {
chassis: string;
nvram: number;
platform: string;
ram: number;
slot0: string;
startup_config: string;
}
export interface Iou {
ethernet_adapters: number;
nvram: number;
ram: number;
serial_adapters: number;
startup_config: string;
}
export interface Images {
hda_disk_image: string;
}
@ -27,6 +50,7 @@ export interface Version {
}
export interface Appliance {
availability: string;
builtin: boolean;
category: string;
description: string;
@ -39,7 +63,6 @@ export interface Appliance {
port_name_format: string;
product_name: string;
product_url: string;
qemu: Qemu;
registry_version: number;
status: string;
symbol: string;
@ -47,4 +70,11 @@ export interface Appliance {
vendor_name: string;
vendor_url: string;
versions: Version[];
docker: Docker;
dynamips: Dynamips;
iou: Iou;
qemu: Qemu;
emulator?: string;
}

2
src/app/services/appliances.service.ts
View File

@ -7,7 +7,7 @@ import { ComputeStatistics } from '../models/computeStatistics';
import { Appliance } from '../models/appliance';
@Injectable()
export class ComputeService {
export class ApplianceService {
constructor(private httpServer: HttpServer) {}
getAppliances(server: Server): Observable<Appliance[]> {