mirror of
https://github.com/GNS3/gns3-web-ui.git
synced 2025-05-09 12:02:53 +00:00
93a98f1335
# Conflicts: # package.json # src/app/cartography/components/experimental-map/drawing/drawings/rect/rect.component.html # src/app/cartography/converters/map/map-drawing-to-svg-converter.ts # src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.html # src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts # src/app/components/project-map/new-template-dialog/new-template-dialog.component.ts # yarn.lock
446 lines
17 KiB
HTML
446 lines
17 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 controller</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 [hidden]="action !== 'install'" (click)="updateAppliances()">
|
|
Update from online registry
|
|
</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 || applianceToInstall.dynamips)">
|
|
<div *ngIf="applianceToInstall.qemu">
|
|
<div>
|
|
Install required files
|
|
<button
|
|
mat-icon-button
|
|
matTooltip="Refresh list of images"
|
|
matTooltipClass="custom-tooltip"
|
|
(click)="refreshImages()"
|
|
>
|
|
<mat-icon aria-label="Refresh list of images">refresh</mat-icon></button
|
|
><br />
|
|
<div>
|
|
<div *ngFor="let version of applianceToInstall.versions">
|
|
<div class="list-item">
|
|
<span>{{ applianceToInstall.name }} version {{ version.name }}</span>
|
|
|
|
<div>
|
|
<button
|
|
class="button"
|
|
mat-raised-button
|
|
color="primary"
|
|
(click)="createQemuTemplateFromVersion(version)"
|
|
>
|
|
Create
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="list-item-inside" *ngIf="version.images.bios_image">
|
|
<span>
|
|
{{ version.images.bios_image }}
|
|
</span>
|
|
|
|
<div>
|
|
<span *ngIf="checkImageFromVersion(version.images.bios_image)"
|
|
><mat-icon matTooltip="Ready to install" matTooltipClass="custom-tooltip">check</mat-icon></span
|
|
>
|
|
<span *ngIf="!checkImageFromVersion(version.images.bios_image)"
|
|
><mat-icon matTooltip="Missing" matTooltipClass="custom-tooltip">close</mat-icon></span
|
|
>
|
|
|
|
<input
|
|
type="file"
|
|
class="non-visible"
|
|
#fileBios
|
|
(change)="importImage($event, version.images.bios_image)"
|
|
ng2FileSelect
|
|
[uploader]="uploaderImage"
|
|
/>
|
|
<button class="button" mat-raised-button (click)="fileBios.click()">Import</button>
|
|
<button
|
|
class="button"
|
|
mat-raised-button
|
|
(click)="downloadImageFromVersion(version.images.bios_image)"
|
|
>
|
|
Download
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="list-item-inside" *ngIf="version.images.hda_disk_image">
|
|
<span>
|
|
{{ version.images.hda_disk_image }}
|
|
</span>
|
|
|
|
<div>
|
|
<span *ngIf="checkImageFromVersion(version.images.hda_disk_image)"
|
|
><mat-icon matTooltip="Ready to install" matTooltipClass="custom-tooltip">check</mat-icon></span
|
|
>
|
|
<span *ngIf="!checkImageFromVersion(version.images.hda_disk_image)"
|
|
><mat-icon matTooltip="Missing" matTooltipClass="custom-tooltip">close</mat-icon></span
|
|
>
|
|
|
|
<input
|
|
type="file"
|
|
class="non-visible"
|
|
#file2
|
|
(change)="importImage($event, version.images.hda_disk_image)"
|
|
ng2FileSelect
|
|
[uploader]="uploaderImage"
|
|
/>
|
|
<button class="button" mat-raised-button (click)="file2.click()">Import</button>
|
|
|
|
<button
|
|
class="button"
|
|
mat-raised-button
|
|
(click)="downloadImageFromVersion(version.images.hda_disk_image)"
|
|
>
|
|
Download
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="list-item-inside" *ngIf="version.images.hdb_disk_image">
|
|
<span>
|
|
{{ version.images.hdb_disk_image }}
|
|
</span>
|
|
|
|
<div>
|
|
<span *ngIf="checkImageFromVersion(version.images.hdb_disk_image)"
|
|
><mat-icon matTooltip="Ready to install" matTooltipClass="custom-tooltip">check</mat-icon></span
|
|
>
|
|
<span *ngIf="!checkImageFromVersion(version.images.hdb_disk_image)"
|
|
><mat-icon matTooltip="Missing" matTooltipClass="custom-tooltip">close</mat-icon></span
|
|
>
|
|
|
|
<input
|
|
type="file"
|
|
class="non-visible"
|
|
#file3
|
|
(change)="importImage($event, version.images.hdb_disk_image)"
|
|
ng2FileSelect
|
|
[uploader]="uploaderImage"
|
|
/>
|
|
<button class="button" mat-raised-button (click)="file3.click()">Import</button>
|
|
<button
|
|
class="button"
|
|
mat-raised-button
|
|
(click)="downloadImageFromVersion(version.images.hdb_disk_image)"
|
|
>
|
|
Download
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="list-item-inside" *ngIf="version.images.hdc_disk_image">
|
|
<span>
|
|
{{ version.images.hdb_disk_image }}
|
|
</span>
|
|
|
|
<div>
|
|
<span *ngIf="checkImageFromVersion(version.images.hdc_disk_image)"
|
|
><mat-icon matTooltip="Ready to install" matTooltipClass="custom-tooltip">check</mat-icon></span
|
|
>
|
|
<span *ngIf="!checkImageFromVersion(version.images.hdc_disk_image)"
|
|
><mat-icon matTooltip="Missing" matTooltipClass="custom-tooltip">close</mat-icon></span
|
|
>
|
|
|
|
<input
|
|
type="file"
|
|
class="non-visible"
|
|
#file4
|
|
(change)="importImage($event, version.images.hdc_disk_image)"
|
|
ng2FileSelect
|
|
[uploader]="uploaderImage"
|
|
/>
|
|
<button class="button" mat-raised-button (click)="file4.click()">Import</button>
|
|
<button
|
|
class="button"
|
|
mat-raised-button
|
|
(click)="downloadImageFromVersion(version.images.hdc_disk_image)"
|
|
>
|
|
Download
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="list-item-inside" *ngIf="version.images.hdd_disk_image">
|
|
<span>
|
|
{{ version.images.hdd_disk_image }}
|
|
</span>
|
|
|
|
<div>
|
|
<span *ngIf="checkImageFromVersion(version.images.hdd_disk_image)"
|
|
><mat-icon matTooltip="Ready to install" matTooltipClass="custom-tooltip">check</mat-icon></span
|
|
>
|
|
<span *ngIf="!checkImageFromVersion(version.images.hdd_disk_image)"
|
|
><mat-icon matTooltip="Missing" matTooltipClass="custom-tooltip">close</mat-icon></span
|
|
>
|
|
|
|
<input
|
|
type="file"
|
|
class="non-visible"
|
|
#file5
|
|
(change)="importImage($event, version.images.hdd_disk_image)"
|
|
ng2FileSelect
|
|
[uploader]="uploaderImage"
|
|
/>
|
|
<button class="button" mat-raised-button (click)="file5.click()">Import</button>
|
|
<button
|
|
class="button"
|
|
mat-raised-button
|
|
(click)="downloadImageFromVersion(version.images.hdd_disk_image)"
|
|
>
|
|
Download
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="list-item-inside" *ngIf="version.images.cdrom_image">
|
|
<span>
|
|
{{ version.images.cdrom_image}}
|
|
</span>
|
|
|
|
<div>
|
|
<span *ngIf="checkImageFromVersion(version.images.cdrom_image)"
|
|
><mat-icon matTooltip="Ready to install" matTooltipClass="custom-tooltip">check</mat-icon></span
|
|
>
|
|
<span *ngIf="!checkImageFromVersion(version.images.cdrom_image)"
|
|
><mat-icon matTooltip="Missing" matTooltipClass="custom-tooltip">close</mat-icon></span
|
|
>
|
|
|
|
<input
|
|
type="file"
|
|
class="non-visible"
|
|
#file6
|
|
(change)="importImage($event, version.images.cdrom_image)"
|
|
ng2FileSelect
|
|
[uploader]="uploaderImage"
|
|
/>
|
|
<button class="button" mat-raised-button (click)="file6.click()">Import</button>
|
|
<button
|
|
class="button"
|
|
mat-raised-button
|
|
(click)="downloadImageFromVersion(version.images.cdrom_image)"
|
|
>
|
|
Download
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="applianceToInstall.docker">
|
|
|
|
<button mat-raised-button color="primary" (click)="createDockerTemplate()" class="create-button">
|
|
Create docker template
|
|
</button>
|
|
</div>
|
|
|
|
<div *ngIf="applianceToInstall.dynamips">
|
|
<div>
|
|
Install required files
|
|
<button
|
|
mat-icon-button
|
|
matTooltip="Refresh list of images"
|
|
matTooltipClass="custom-tooltip"
|
|
(click)="refreshImages()"
|
|
>
|
|
<mat-icon aria-label="Refresh list of images">refresh</mat-icon></button
|
|
><br />
|
|
<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, image.filename)"
|
|
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>
|
|
Install required files
|
|
<button
|
|
mat-icon-button
|
|
matTooltip="Refresh list of images"
|
|
matTooltipClass="custom-tooltip"
|
|
(click)="refreshImages()"
|
|
>
|
|
<mat-icon aria-label="Refresh list of images">refresh</mat-icon></button
|
|
><br />
|
|
<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, image.filename)"
|
|
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>
|