mirror of
https://github.com/GNS3/gns3-web-ui.git
synced 2025-05-01 00:10:39 +00:00
253 lines
13 KiB
HTML
253 lines
13 KiB
HTML
<h1 mat-dialog-title>Add new template</h1>
|
|
|
|
<mat-horizontal-stepper [linear]="false" #stepper>
|
|
<mat-step>
|
|
<ng-template matStepLabel>Please select how you want to create new template</ng-template>
|
|
|
|
<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>
|
|
<button mat-button matStepperNext>Next</button>
|
|
<button mat-button (click)="onCloseClick()">Cancel</button>
|
|
</div>
|
|
</mat-step>
|
|
|
|
<mat-step>
|
|
<ng-template matStepLabel>{{actionTitle}}</ng-template>
|
|
|
|
<mat-card [hidden]="!(action==='install')">
|
|
<div class="tableHeader">
|
|
<mat-form-field class="filter-field">
|
|
<input matInput [(ngModel)]="searchText" placeholder="Filter">
|
|
</mat-form-field>
|
|
|
|
<mat-select (selectionChange)="filterAppliances($event)" [ngModelOptions]="{standalone: true}" placeholder="Category" [(ngModel)]="category">
|
|
<mat-option *ngFor="let category of categories" [value]="category">
|
|
{{category}}
|
|
</mat-option>
|
|
</mat-select>
|
|
</div>
|
|
|
|
<mat-table
|
|
class="mat-table"
|
|
#table
|
|
matSort
|
|
multiTemplateDataRows
|
|
(matSortChange)= "sortData($event)"
|
|
[dataSource]="dataSource | datasourcefilter: searchText">
|
|
<ng-container matColumnDef="name">
|
|
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
|
|
<mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="emulator">
|
|
<mat-header-cell *matHeaderCellDef> Emulator </mat-header-cell>
|
|
<mat-cell *matCellDef="let row"> {{row.emulator}} </mat-cell>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="vendor">
|
|
<mat-header-cell *matHeaderCellDef> 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="Install" matTooltipClass="custom-tooltip" (click)="install(row)">
|
|
<mat-icon aria-label="Install">archive</mat-icon>
|
|
</button>
|
|
|
|
<button mat-icon-button matTooltip="Show info" matTooltipClass="custom-tooltip" (click)="showInfo(row)">
|
|
<mat-icon aria-label="Show info">info</mat-icon>
|
|
</button>
|
|
</mat-cell>
|
|
</ng-container>
|
|
|
|
<!-- <ng-container matColumnDef="expandedDetail">
|
|
<mat-cell *matCellDef="let detail">
|
|
The symbol for {{detail.element}}
|
|
</mat-cell>
|
|
</ng-container> -->
|
|
|
|
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
|
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
|
|
|
<!-- <mat-row
|
|
*matRowDef="let row; columns: displayedColumns;"
|
|
matRipple
|
|
class="element-row"
|
|
[class.expanded]="expandedElement == row"
|
|
(click)="expandedElement = row">
|
|
</mat-row>
|
|
<mat-row
|
|
*matRowDef="let row; columns: ['expandedDetail']; when: isExpansionDetailRow"
|
|
[@detailExpand]="row.element == expandedElement ? 'expanded' : 'collapsed'"
|
|
style="overflow: hidden">
|
|
</mat-row> -->
|
|
</mat-table>
|
|
|
|
<mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100]" showFirstLastButtons></mat-paginator>
|
|
</mat-card>
|
|
|
|
<mat-card [hidden]="action==='install'">
|
|
<input
|
|
type="file"
|
|
accept=".gns3appliance, .gns3a"
|
|
class="non-visible"
|
|
#file
|
|
(change)="addAppliance($event)"
|
|
ng2FileSelect
|
|
[uploader]="uploader"/>
|
|
<button mat-raised-button color="primary" (click)="file.click()" class="create-button">Click to import appliance</button>
|
|
</mat-card>
|
|
|
|
<div>
|
|
<button mat-button matStepperPrevious>Back</button>
|
|
<button mat-button (click)="onCloseClick()">Cancel</button>
|
|
</div>
|
|
</mat-step>
|
|
|
|
<mat-step *ngIf="applianceToInstall">
|
|
<ng-template matStepLabel>{{secondActionTitle}}</ng-template>
|
|
|
|
<mat-card [hidden]="!(!isLinuxPlatform && !isGns3VmAvailable && !applianceToInstall.dynamips)">
|
|
Please configure GNS3 VM to install selected appliance
|
|
</mat-card>
|
|
|
|
<mat-card [hidden]="!(isLinuxPlatform || isGns3VmAvailable || applianceToInstall.dynamips)">
|
|
<div *ngIf="applianceToInstall.qemu">
|
|
<div>
|
|
Server type<br/>
|
|
<mat-radio-group class="radio-group">
|
|
<mat-radio-button [disabled]="!isLinuxPlatform" [checked]="!isGns3VmChosen" class="radio-button" value="1" (click)="setServerType('local')">Install the appliance locally</mat-radio-button>
|
|
<mat-radio-button [disabled]="!isGns3VmAvailable" [checked]="isGns3VmChosen" class="radio-button" value="2" (click)="setServerType('gns3 vm')">Install the appliance on the GNS3 VM</mat-radio-button>
|
|
</mat-radio-group>
|
|
</div>
|
|
<div>
|
|
Qemu binary<br/>
|
|
<mat-select
|
|
class="selection-group"
|
|
placeholder="Qemu binary"
|
|
[(ngModel)]="selectedBinary"
|
|
[ngModelOptions]="{standalone: true}">
|
|
<mat-option *ngFor="let binary of qemuBinaries" [value]="binary">
|
|
{{binary.path}}
|
|
</mat-option>
|
|
</mat-select>
|
|
</div>
|
|
<div>
|
|
Install required files
|
|
<mat-list>
|
|
<mat-list-item *ngFor="let image of applianceToInstall.images">
|
|
<div class="list-item">
|
|
<div>
|
|
{{image.filename}}
|
|
</div>
|
|
<div>
|
|
<span *ngIf="checkImage(image)"><mat-icon matTooltip="Ready to install" matTooltipClass="custom-tooltip">check</mat-icon></span>
|
|
<span *ngIf="!checkImage(image)"><mat-icon matTooltip="Missing" matTooltipClass="custom-tooltip">close</mat-icon></span>
|
|
<input
|
|
type="file"
|
|
class="non-visible"
|
|
#file2
|
|
(change)="importImage($event)"
|
|
ng2FileSelect
|
|
[uploader]="uploaderImage"/>
|
|
<button class="button" mat-raised-button (click)="file2.click()">Import</button>
|
|
<button class="button" mat-raised-button (click)="downloadImage(image)">Download</button>
|
|
<button *ngIf="checkImage(image)" class="button" mat-raised-button color="primary" (click)="createQemuTemplate(image)">Create</button>
|
|
</div>
|
|
</div>
|
|
</mat-list-item>
|
|
</mat-list>
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="applianceToInstall.docker">
|
|
<div>
|
|
Server type<br/>
|
|
<mat-radio-group class="radio-group">
|
|
<mat-radio-button [disabled]="!isLinuxPlatform" [checked]="!isGns3VmChosen" class="radio-button" value="1" (click)="setServerType('local')">Install the appliance locally</mat-radio-button>
|
|
<mat-radio-button [disabled]="!isGns3VmAvailable" [checked]="isGns3VmChosen" class="radio-button" value="2" (click)="setServerType('gns3 vm')">Install the appliance on the GNS3 VM</mat-radio-button>
|
|
</mat-radio-group>
|
|
</div>
|
|
<button mat-raised-button color="primary" (click)="createDockerTemplate()" class="create-button">Create docker template</button>
|
|
</div>
|
|
|
|
<div *ngIf="applianceToInstall.dynamips">
|
|
<div>
|
|
Server type<br/>
|
|
<mat-radio-group class="radio-group">
|
|
<mat-radio-button [checked]="!isGns3VmChosen" class="radio-button" value="1" (click)="setServerType('local')">Install the appliance locally</mat-radio-button>
|
|
<mat-radio-button [disabled]="!isGns3VmAvailable" [checked]="isGns3VmChosen" class="radio-button" value="2" (click)="setServerType('gns3 vm')">Install the appliance on the GNS3 VM</mat-radio-button>
|
|
</mat-radio-group>
|
|
</div>
|
|
<div>
|
|
Install required files
|
|
<mat-list>
|
|
<mat-list-item *ngFor="let image of applianceToInstall.images">
|
|
<div class="list-item">
|
|
<div>
|
|
{{image.filename}}
|
|
</div>
|
|
<div>
|
|
<input
|
|
type="file"
|
|
class="non-visible"
|
|
#file2
|
|
(change)="importImage($event)"
|
|
ng2FileSelect
|
|
[uploader]="uploaderImage"/>
|
|
<button class="button" mat-raised-button (click)="file2.click()">Import</button>
|
|
<button class="button" mat-raised-button color="primary" (click)="createIosTemplate(image)">Create</button>
|
|
</div>
|
|
</div>
|
|
</mat-list-item>
|
|
</mat-list>
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="applianceToInstall.iou">
|
|
<div>
|
|
Server type<br/>
|
|
<mat-radio-group class="radio-group">
|
|
<mat-radio-button [disabled]="!isLinuxPlatform" [checked]="!isGns3VmChosen" class="radio-button" value="1" (click)="setServerType('local')">Install the appliance locally</mat-radio-button>
|
|
<mat-radio-button [disabled]="!isGns3VmAvailable" [checked]="isGns3VmChosen" class="radio-button" value="2" (click)="setServerType('gns3 vm')">Install the appliance on the GNS3 VM</mat-radio-button>
|
|
</mat-radio-group>
|
|
</div>
|
|
<div>
|
|
Install required files
|
|
<mat-list>
|
|
<mat-list-item *ngFor="let image of applianceToInstall.images">
|
|
<div class="list-item">
|
|
<div>
|
|
{{image.filename}}
|
|
</div>
|
|
<div>
|
|
<input
|
|
type="file"
|
|
class="non-visible"
|
|
#file2
|
|
(change)="importImage($event)"
|
|
ng2FileSelect
|
|
[uploader]="uploaderImage"/>
|
|
<button class="button" mat-raised-button (click)="file2.click()">Import</button>
|
|
<button class="button" mat-raised-button color="primary" (click)="createIouTemplate(image)">Create</button>
|
|
</div>
|
|
</div>
|
|
</mat-list-item>
|
|
</mat-list>
|
|
</div>
|
|
</div>
|
|
</mat-card>
|
|
|
|
<div>
|
|
<button mat-button matStepperPrevious>Back</button>
|
|
<button mat-button (click)="onCloseClick()">Cancel</button>
|
|
</div>
|
|
</mat-step>
|
|
</mat-horizontal-stepper>
|