ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-01-19 03:06:31 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'master' into e2e

Browse Source
This commit is contained in:
piotrpekala7 2020-02-26 17:21:33 +01:00
commit 2e82ed8ebf
37 changed files with 187 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app-routing.module.ts
View File

@ -149,7 +149,7 @@ const routes: Routes = [
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
imports: [RouterModule.forRoot(routes, { anchorScrolling: 'enabled', scrollPositionRestoration: 'enabled'})],
exports: [RouterModule]
})
export class AppRoutingModule {}

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

@ -1,5 +1,5 @@
import * as Raven from 'raven-js';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserModule, Title } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CdkTableModule } from '@angular/cdk/table';
@ -538,7 +538,8 @@ if (environment.production) {
NotificationService,
Gns3vmService,
ThemeService,
GoogleAnalyticsService
GoogleAnalyticsService,
Title
],
entryComponents: [
AddServerDialogComponent,
@ -580,7 +581,8 @@ if (environment.production) {
NavigationDialogComponent,
ScreenshotDialogComponent,
ConfirmationBottomSheetComponent,
ConfigDialogComponent
ConfigDialogComponent,
AdbutlerComponent
],
bootstrap: [AppComponent]
})

3
src/app/common/progress-dialog/progress-dialog.service.ts
View File

@ -9,7 +9,8 @@ export class ProgressDialogService {
public open() {
const ref = this.dialog.open(ProgressDialogComponent, {
width: '250px',
autoFocus: false
autoFocus: false,
disableClose: true
});
return ref;
}

7
src/app/components/adbutler/adbutler.component.ts
View File

@ -11,13 +11,12 @@ import { ToasterService } from '../../services/toaster.service';
})
export class AdbutlerComponent implements OnInit {
@ViewChild('ad', {static: false}) ad: ElementRef;
@Input() theme: string;
@Output() onLoad = new EventEmitter();
theme: string;
onLoad = new EventEmitter();
htmlCode: string;
constructor(
private httpClient: HttpClient,
private toasterService: ToasterService
private httpClient: HttpClient
) {}
ngOnInit() {

2
src/app/components/notification-box/notification-box.component.html
View File

@ -2,7 +2,7 @@
<mat-progress-bar mode="determinate" [value]="progress"></mat-progress-bar>
<div style="display: flex; height: 102px;">
<div class="content" [ngClass]="{lightTheme: isLightThemeEnabled}">
<app-adbutler (onLoad)="onLoadingAdbutler($event)" theme="dark"></app-adbutler>
<template #dynamicComponentContainer></template>
<mat-icon (click)="closeNotification()" class="close-button">close</mat-icon>
</div>
</div>

23
src/app/components/notification-box/notification-box.component.ts
View File

@ -1,6 +1,7 @@
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Component, OnInit, OnDestroy, ComponentFactoryResolver, ViewContainerRef, ViewChild } from '@angular/core';
import { timer, Observable, Subscription } from 'rxjs';
import { ThemeService } from '../../services/theme.service';
import { AdbutlerComponent } from '../adbutler/adbutler.component';
@Component({
selector: 'app-notification-box',
@ -8,6 +9,8 @@ import { ThemeService } from '../../services/theme.service';
styleUrls: ['./notification-box.component.scss']
})
export class NotificationBoxComponent implements OnInit, OnDestroy {
@ViewChild('dynamicComponentContainer', {read: ViewContainerRef, static: false}) dynamicComponentContainer;
timer: Observable<number>;
viewTimer: Observable<number>;
timerSubscription: Subscription;
@ -26,7 +29,9 @@ export class NotificationBoxComponent implements OnInit, OnDestroy {
isLightThemeEnabled: boolean = false;
constructor(
private themeService: ThemeService
private themeService: ThemeService,
private componentFactoryResolver: ComponentFactoryResolver,
private viewContainerRef: ViewContainerRef
){}
ngOnInit() {
@ -34,6 +39,20 @@ export class NotificationBoxComponent implements OnInit, OnDestroy {
this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false;
}
ngAfterViewInit() {
this.createDynamicAdComponent();
}
createDynamicAdComponent() : void {
const factory = this.componentFactoryResolver.resolveComponentFactory(AdbutlerComponent);
const componentRef = this.dynamicComponentContainer.createComponent(factory);
componentRef.instance.theme = this.themeService.getActualTheme() === 'light';
componentRef.instance.onLoad.subscribe(event => {
this.onLoadingAdbutler(event);
})
componentRef.changeDetectorRef.detectChanges();
}
startTimer() {
this.timer = timer(this.delayTime, 1000);

3
src/app/components/preferences/common/delete-template-component/delete-template.component.ts
View File

@ -27,7 +27,8 @@ export class DeleteTemplateComponent {
data: {
templateName: templateName
},
autoFocus: false
autoFocus: false,
disableClose: true
});
dialogRef.afterClosed().subscribe((answer: boolean) => {

3
src/app/components/project-map/context-menu/actions/change-symbol/change-symbol-action.component.ts
View File

@ -20,7 +20,8 @@ export class ChangeSymbolActionComponent implements OnInit {
const dialogRef = this.dialog.open(ChangeSymbolDialogComponent, {
width: '1000px',
height: '500px',
autoFocus: false
autoFocus: false,
disableClose: true
});
let instance = dialogRef.componentInstance;
instance.server = this.server;

3
src/app/components/project-map/context-menu/actions/config-action/config-action.component.ts
View File

@ -27,7 +27,8 @@ export class ConfigActionComponent {
@Input() node: Node;
private conf = {
autoFocus: false,
width: '800px'
width: '800px',
disableClose: true
};
dialogRef;

3
src/app/components/project-map/context-menu/actions/edit-config/edit-config-action.component.ts
View File

@ -20,7 +20,8 @@ export class EditConfigActionComponent {
const dialogRef = this.dialog.open(ConfigEditorDialogComponent, {
width: '600px',
height: '500px',
autoFocus: false
autoFocus: false,
disableClose: true
});
let instance = dialogRef.componentInstance;
instance.server = this.server;

3
src/app/components/project-map/context-menu/actions/edit-style-action/edit-style-action.component.ts
View File

@ -25,7 +25,8 @@ export class EditStyleActionComponent implements OnChanges {
editStyle() {
const dialogRef = this.dialog.open(StyleEditorDialogComponent, {
width: '800px',
autoFocus: false
autoFocus: false,
disableClose: true
});
let instance = dialogRef.componentInstance;
instance.server = this.server;

3
src/app/components/project-map/context-menu/actions/edit-text-action/edit-text-action.component.ts
View File

@ -29,7 +29,8 @@ export class EditTextActionComponent implements OnInit {
editText() {
const dialogRef = this.dialog.open(TextEditorDialogComponent, {
width: '300px',
autoFocus: false
autoFocus: false,
disableClose: true
});
let instance = dialogRef.componentInstance;
instance.server = this.server;

3
src/app/components/project-map/context-menu/actions/export-config/export-config-action.component.ts
View File

@ -26,7 +26,8 @@ export class ExportConfigActionComponent {
} else {
const dialogRef = this.dialog.open(ConfigDialogComponent, {
width: '500px',
autoFocus: false
autoFocus: false,
disableClose: true
});
let instance = dialogRef.componentInstance;
dialogRef.afterClosed().subscribe((configType: string) => {

3
src/app/components/project-map/context-menu/actions/import-config/import-config-action.component.ts
View File

@ -27,7 +27,8 @@ export class ImportConfigActionComponent {
if (this.node.node_type !== 'vpcs') {
const dialogRef = this.dialog.open(ConfigDialogComponent, {
width: '500px',
autoFocus: false
autoFocus: false,
disableClose: true
});
let instance = dialogRef.componentInstance;
dialogRef.afterClosed().subscribe((configType: string) => {

3
src/app/components/project-map/context-menu/actions/packet-filters-action/packet-filters-action.component.ts
View File

@ -20,7 +20,8 @@ export class PacketFiltersActionComponent {
const dialogRef = this.dialog.open(PacketFiltersDialogComponent, {
width: '900px',
height: '400px',
autoFocus: false
autoFocus: false,
disableClose: true
});
let instance = dialogRef.componentInstance;
instance.server = this.server;

3
src/app/components/project-map/context-menu/actions/show-node-action/show-node-action.component.ts
View File

@ -17,7 +17,8 @@ export class ShowNodeActionComponent {
showNode() {
const dialogRef = this.dialog.open(InfoDialogComponent, {
width: '600px',
autoFocus: false
autoFocus: false,
disableClose: true
});
let instance = dialogRef.componentInstance;
instance.node = this.node;

3
src/app/components/project-map/context-menu/actions/start-capture/start-capture-action.component.ts
View File

@ -19,7 +19,8 @@ export class StartCaptureActionComponent {
startCapture() {
const dialogRef = this.dialog.open(StartCaptureDialogComponent, {
width: '400px',
autoFocus: false
autoFocus: false,
disableClose: true
});
let instance = dialogRef.componentInstance;
instance.server = this.server;

3
src/app/components/project-map/node-editors/configurator/qemu/configurator-qemu.component.ts
View File

@ -35,7 +35,8 @@ export class ConfiguratorDialogQemuComponent implements OnInit {
private conf = {
autoFocus: false,
width: '800px'
width: '800px',
disableClose: true
};
dialogRefQemuImageCreator;

5
src/app/components/project-map/nodes-menu/nodes-menu.component.ts
View File

@ -1,4 +1,4 @@
import { Component, Input } from "@angular/core";
import { Component, Input, ChangeDetectionStrategy } from "@angular/core";
import { Project } from '../../../models/project';
import { Server } from '../../../models/server';
import { NodeService } from '../../../services/node.service';
@ -11,7 +11,8 @@ import { ServerService } from '../../../services/server.service';
@Component({
selector: 'app-nodes-menu',
templateUrl: './nodes-menu.component.html',
styleUrls: ['./nodes-menu.component.scss']
styleUrls: ['./nodes-menu.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class NodesMenuComponent {
@Input('project') project: Project;

3
src/app/components/project-map/packet-capturing/packet-filters/packet-filters.component.ts
View File

@ -80,7 +80,8 @@ export class PacketFiltersDialogComponent implements OnInit{
onHelpClick() {
const dialogRef = this.dialog.open(HelpDialogComponent, {
width: '500px',
autoFocus: false
autoFocus: false,
disableClose: true
});
let instance = dialogRef.componentInstance;
instance.title = 'Help for filters';

6
src/app/components/project-map/project-map-menu/project-map-menu.component.html
View File

@ -3,7 +3,7 @@
mat-icon-button
class="menu-button"
(click)="addDrawing('text')">
<mat-icon [ngClass]="{unmarkedLight: !drawTools.isTextChosen && isLightThemeEnabled, marked: drawTools.isTextChosen}">create</mat-icon>
<mat-icon [ngClass]="getCssClassForIcon('text')">create</mat-icon>
</button>
<input
type="file"
@ -23,14 +23,14 @@
mat-icon-button
class="menu-button"
(click)="addDrawing('rectangle')">
<mat-icon [ngClass]="{unmarkedLight: !drawTools.isRectangleChosen && isLightThemeEnabled, marked: drawTools.isRectangleChosen}">crop_3_2</mat-icon>
<mat-icon [ngClass]="getCssClassForIcon('rectangle')">crop_3_2</mat-icon>
</button>
<button
matTooltip="Draw an ellipse"
mat-icon-button
class="menu-button"
(click)="addDrawing('ellipse')">
<mat-icon [ngClass]="{unmarkedLight: !drawTools.isEllipseChosen && isLightThemeEnabled, marked: drawTools.isEllipseChosen}">panorama_fish_eye</mat-icon>
<mat-icon [ngClass]="getCssClassForIcon('ellipse')">panorama_fish_eye</mat-icon>
</button>
<button *ngIf="!isLightThemeEnabled"
matTooltip="Draw a line"

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

@ -1,4 +1,4 @@
import { Component, OnInit, OnDestroy, Input } from '@angular/core';
import { Component, OnInit, OnDestroy, Input, ChangeDetectionStrategy } from '@angular/core';
import { Project } from '../../../models/project';
import { Server } from '../../../models/server';
import { ToolsService } from '../../../services/tools.service';
@ -14,11 +14,11 @@ import { ScreenshotDialogComponent, Screenshot } from '../screenshot-dialog/scre
import { saveAsPng, saveAsJpeg } from 'save-html-as-image';
import { ThemeService } from '../../../services/theme.service';
@Component({
selector: 'app-project-map-menu',
templateUrl: './project-map-menu.component.html',
styleUrls: ['./project-map-menu.component.scss']
styleUrls: ['./project-map-menu.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProjectMapMenuComponent implements OnInit, OnDestroy {
@Input() project: Project;
@ -47,10 +47,29 @@ export class ProjectMapMenuComponent implements OnInit, OnDestroy {
this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false;
}
getCssClassForIcon(type: string) {
if (type === 'text') {
return {
'unmarkedLight': !this.drawTools.isTextChosen && this.isLightThemeEnabled,
'marked': this.drawTools.isTextChosen
};
} else if (type === 'rectangle') {
return {
'unmarkedLight': !this.drawTools.isRectangleChosen && this.isLightThemeEnabled,
'marked': this.drawTools.isRectangleChosen
};
}
return {
'unmarkedLight': !this.drawTools.isEllipseChosen && this.isLightThemeEnabled,
'marked': this.drawTools.isEllipseChosen
};
}
public takeScreenshot() {
const dialogRef = this.dialog.open(ScreenshotDialogComponent, {
width: '400px',
autoFocus: false
autoFocus: false,
disableClose: true
});
dialogRef.afterClosed().subscribe((result: Screenshot) => {
if (result) this.saveImage(result);

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

@ -66,6 +66,7 @@ import { ConfirmationBottomSheetComponent } from '../projects/confirmation-botto
import { NodeAddedEvent } from '../template/template-list-dialog/template-list-dialog.component';
import { NotificationService } from '../../services/notification.service';
import { ThemeService } from '../../services/theme.service';
import { Title } from '@angular/platform-browser';
@Component({
@ -109,7 +110,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
@ViewChild(D3MapComponent, {static: false}) mapChild: D3MapComponent;
@ViewChild(ProjectMapMenuComponent, {static: false}) projectMapMenuComponent: ProjectMapMenuComponent;
private subscriptions: Subscription[] = [];
private projectMapSubscription: Subscription = new Subscription();
constructor(
private route: ActivatedRoute,
@ -153,7 +154,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
private serialLinkWidget: SerialLinkWidget,
private bottomSheet: MatBottomSheet,
private notificationService: NotificationService,
private themeService: ThemeService
private themeService: ThemeService,
private title: Title
) {}
ngOnInit() {
@ -178,6 +180,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
}),
mergeMap((project: Project) => {
this.project = project;
this.title.setTitle(this.project.name);
if (this.mapSettingsService.interfaceLabels.has(project.project_id)) {
this.isInterfaceLabelVisible = this.mapSettingsService.interfaceLabels.get(project.project_id);
@ -210,22 +213,22 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
);
});
this.subscriptions.push(routeSub);
this.projectMapSubscription.add(routeSub);
this.subscriptions.push(
this.projectMapSubscription.add(
this.mapSettingsService.mapRenderedEmitter.subscribe((value: boolean) => {
if (this.scrollEnabled) this.centerCanvas();
})
);
this.subscriptions.push(
this.projectMapSubscription.add(
this.drawingsDataSource.changes.subscribe((drawings: Drawing[]) => {
this.drawings = drawings;
this.mapChangeDetectorRef.detectChanges();
})
);
this.subscriptions.push(
this.projectMapSubscription.add(
this.nodesDataSource.changes.subscribe((nodes: Node[]) => {
if (!this.server) return;
nodes.forEach((node: Node) => {
@ -237,21 +240,21 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
})
);
this.subscriptions.push(
this.projectMapSubscription.add(
this.linksDataSource.changes.subscribe((links: Link[]) => {
this.links = links;
this.mapChangeDetectorRef.detectChanges();
})
);
this.subscriptions.push(this.projectWebServiceHandler.errorNotificationEmitter.subscribe((message) => {
this.projectMapSubscription.add(this.projectWebServiceHandler.errorNotificationEmitter.subscribe((message) => {
this.showMessage({
type: 'error',
message: message
});
}));
this.subscriptions.push(this.projectWebServiceHandler.warningNotificationEmitter.subscribe((message) => {
this.projectMapSubscription.add(this.projectWebServiceHandler.warningNotificationEmitter.subscribe((message) => {
this.showMessage({
type: 'warning',
message: message
@ -323,7 +326,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
this.progressService.deactivate();
});
this.subscriptions.push(subscription);
this.projectMapSubscription.add(subscription);
}
setUpProjectWS(project: Project) {
@ -408,14 +411,14 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
this.contextMenu.openMenuForListOfElements(drawings, nodes, labels, links, event.pageY, event.pageX);
});
this.subscriptions.push(onLinkContextMenu);
this.subscriptions.push(onEthernetLinkContextMenu);
this.subscriptions.push(onSerialLinkContextMenu);
this.subscriptions.push(onNodeContextMenu);
this.subscriptions.push(onDrawingContextMenu);
this.subscriptions.push(onContextMenu);
this.subscriptions.push(onLabelContextMenu);
this.subscriptions.push(onInterfaceLabelContextMenu);
this.projectMapSubscription.add(onLinkContextMenu);
this.projectMapSubscription.add(onEthernetLinkContextMenu);
this.projectMapSubscription.add(onSerialLinkContextMenu);
this.projectMapSubscription.add(onNodeContextMenu);
this.projectMapSubscription.add(onDrawingContextMenu);
this.projectMapSubscription.add(onContextMenu);
this.projectMapSubscription.add(onLabelContextMenu);
this.projectMapSubscription.add(onInterfaceLabelContextMenu);
this.mapChangeDetectorRef.detectChanges();
}
@ -424,10 +427,10 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
return;
}
this.nodeService.createFromTemplate(this.server, this.project, nodeAddedEvent.template, nodeAddedEvent.x, nodeAddedEvent.y, nodeAddedEvent.server).subscribe((node: Node) => {
if (nodeAddedEvent.name !== nodeAddedEvent.template.name) {
node.name = nodeAddedEvent.name;
this.nodeService.updateNode(this.server, node).subscribe(()=>{});
}
// if (nodeAddedEvent.name !== nodeAddedEvent.template.name) {
// node.name = nodeAddedEvent.name;
// this.nodeService.updateNode(this.server, node).subscribe(()=>{});
// }
this.projectService.nodes(this.server, this.project.project_id).subscribe((nodes: Node[]) => {
nodes.filter((node) => node.label.style === null).forEach((node) => {
@ -702,7 +705,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
addNewProject() {
const dialogRef = this.dialog.open(AddBlankProjectDialogComponent, {
width: '400px',
autoFocus: false
autoFocus: false,
disableClose: true
});
let instance = dialogRef.componentInstance;
instance.server = this.server;
@ -711,7 +715,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
saveProject() {
const dialogRef = this.dialog.open(SaveProjectDialogComponent, {
width: '400px',
autoFocus: false
autoFocus: false,
disableClose: true
});
let instance = dialogRef.componentInstance;
instance.server = this.server;
@ -721,7 +726,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
editProject() {
const dialogRef = this.dialog.open(EditProjectDialogComponent, {
width: '600px',
autoFocus: false
autoFocus: false,
disableClose: true
});
let instance = dialogRef.componentInstance;
instance.server = this.server;
@ -732,7 +738,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
let uuid: string = '';
const dialogRef = this.dialog.open(ImportProjectDialogComponent, {
width: '400px',
autoFocus: false
autoFocus: false,
disableClose: true
});
let instance = dialogRef.componentInstance;
instance.server = this.server;
@ -819,6 +826,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
}
public ngOnDestroy() {
this.title.setTitle('GNS3 Web UI');
this.drawingsDataSource.clear();
this.nodesDataSource.clear();
this.linksDataSource.clear();
@ -829,7 +837,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
if (this.ws) {
if (this.ws.OPEN) this.ws.close();
}
this.subscriptions.forEach((subscription: Subscription) => subscription.unsubscribe());
this.projectMapSubscription.unsubscribe();
}
}

3
src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.ts
View File

@ -87,7 +87,8 @@ export class AddBlankProjectDialogComponent implements OnInit {
data: {
existingProject: existingProject
},
autoFocus: false
autoFocus: false,
disableClose: true
});
dialogRef.afterClosed().subscribe((answer: boolean) => {

3
src/app/components/projects/import-project-dialog/import-project-dialog.component.ts
View File

@ -110,7 +110,8 @@ export class ImportProjectDialogComponent implements OnInit {
data: {
existingProject: existingProject
},
autoFocus: false
autoFocus: false,
disableClose: true
});
dialogRef.afterClosed().subscribe((answer: boolean) => {

12
src/app/components/projects/projects.component.ts
View File

@ -78,7 +78,8 @@ export class ProjectsComponent implements OnInit {
const dialogRef = this.dialog.open(ConfigureGns3VMDialogComponent, {
width: '350px',
height: '120px',
autoFocus: false
autoFocus: false,
disableClose: true
});
dialogRef.afterClosed().subscribe((answer: boolean) => {
@ -149,7 +150,8 @@ export class ProjectsComponent implements OnInit {
duplicate(project: Project) {
const dialogRef = this.dialog.open(ChooseNameDialogComponent, {
width: '400px',
autoFocus: false
autoFocus: false,
disableClose: true
});
let instance = dialogRef.componentInstance;
instance.server = this.server;
@ -162,7 +164,8 @@ export class ProjectsComponent implements OnInit {
addBlankProject() {
const dialogRef = this.dialog.open(AddBlankProjectDialogComponent, {
width: '400px',
autoFocus: false
autoFocus: false,
disableClose: true
});
let instance = dialogRef.componentInstance;
instance.server = this.server;
@ -172,7 +175,8 @@ export class ProjectsComponent implements OnInit {
let uuid: string = '';
const dialogRef = this.dialog.open(ImportProjectDialogComponent, {
width: '400px',
autoFocus: false
autoFocus: false,
disableClose: true
});
let instance = dialogRef.componentInstance;
instance.server = this.server;

3
src/app/components/servers/servers.component.ts
View File

@ -94,7 +94,8 @@ export class ServersComponent implements OnInit, OnDestroy {
createModal() {
const dialogRef = this.dialog.open(AddServerDialogComponent, {
width: '350px',
autoFocus: false
autoFocus: false,
disableClose: true
});
dialogRef.afterClosed().subscribe(server => {

3
src/app/components/snapshots/snapshot-menu-item/snapshot-menu-item.component.ts
View File

@ -35,7 +35,8 @@ export class SnapshotMenuItemComponent implements OnInit {
server: this.server,
project: this.project
},
autoFocus: false
autoFocus: false,
disableClose: true
});
dialogRef.afterClosed().subscribe(snapshot => {

14
src/app/components/system-status/status-chart/status-chart.component.html
View File

@ -13,7 +13,7 @@
[unitsFontSize]="20"
[titleColor]="'#C0C0C0'"
[titleFontSize]="30"
[subtitle]="'CPU usage percent'"
[subtitle]="'CPU usage'"
[subtitleColor]="'#C0C0C0'"
[subtitleFontSize]="15"
></circle-progress>
@ -31,7 +31,7 @@
[unitsFontSize]="20"
[titleColor]="'#C0C0C0'"
[titleFontSize]="30"
[subtitle]="'Disk usage percent'"
[subtitle]="'Disk usage'"
[subtitleColor]="'#C0C0C0'"
[subtitleFontSize]="15"
></circle-progress>
@ -49,7 +49,7 @@
[unitsFontSize]="20"
[titleColor]="'#C0C0C0'"
[titleFontSize]="30"
[subtitle]="'Memory usage percent'"
[subtitle]="'Memory usage'"
[subtitleColor]="'#C0C0C0'"
[subtitleFontSize]="15"
></circle-progress>
@ -67,7 +67,7 @@
[unitsFontSize]="20"
[titleColor]="'#C0C0C0'"
[titleFontSize]="30"
[subtitle]="'SWAP usage percent'"
[subtitle]="'SWAP usage'"
[subtitleColor]="'#C0C0C0'"
[subtitleFontSize]="15"
></circle-progress>
@ -87,7 +87,7 @@
[unitsFontSize]="20"
[titleColor]="'#C0C0C0'"
[titleFontSize]="30"
[subtitle]="['Load average percent', '(last 1 minute)']"
[subtitle]="['Load average', '(last 1 minute)']"
[subtitleColor]="'#C0C0C0'"
[subtitleFontSize]="15"
></circle-progress>
@ -105,7 +105,7 @@
[unitsFontSize]="20"
[titleColor]="'#C0C0C0'"
[titleFontSize]="30"
[subtitle]="['Load average percent', '(last 5 minutes)']"
[subtitle]="['Load average', '(last 5 minutes)']"
[subtitleColor]="'#C0C0C0'"
[subtitleFontSize]="15"
></circle-progress>
@ -123,7 +123,7 @@
[unitsFontSize]="20"
[titleColor]="'#C0C0C0'"
[titleFontSize]="30"
[subtitle]="['Load average percent', '(last 15 minutes)']"
[subtitle]="['Load average', '(last 15 minutes)']"
[subtitleColor]="'#C0C0C0'"
[subtitleFontSize]="15"
></circle-progress>

2
src/app/components/system-status/status-chart/status-chart.component.scss
View File

@ -2,5 +2,5 @@
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 20px;
margin-bottom: 40px;
}

4
src/app/components/template/template-list-dialog/template-list-dialog.component.html
View File

@ -39,9 +39,9 @@
<h6>Configuration</h6>
</div>
<form [formGroup]="configurationForm">
<mat-form-field class="form-field">
<!-- <mat-form-field class="form-field">
<input type="text" matInput formControlName="name" placeholder="Enter name (default is taken from template)" />
</mat-form-field>
</mat-form-field> -->
<mat-form-field class="form-field">
<input type="number" matInput formControlName="numberOfNodes" placeholder="Enter number of nodes (default value is 1)" />
</mat-form-field>

16
src/app/components/template/template-list-dialog/template-list-dialog.component.ts
View File

@ -9,6 +9,7 @@ import { Template } from '../../../models/template';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
import { ToasterService } from '../../../services/toaster.service';
import { Project } from '../../../models/project';
import { NonNegativeValidator } from '../../../validators/non-negative-validator';
@Component({
selector: 'app-template-list-dialog',
@ -34,13 +35,14 @@ export class TemplateListDialogComponent implements OnInit {
private templateService: TemplateService,
private formBuilder: FormBuilder,
@Inject(MAT_DIALOG_DATA) public data: any,
private toasterService: ToasterService
private toasterService: ToasterService,
private nonNegativeValidator: NonNegativeValidator,
) {
this.server = data['server'];
this.project = data['project'];
this.configurationForm = this.formBuilder.group({
name: new FormControl('new node', Validators.required),
numberOfNodes: new FormControl(1, Validators.required)
// name: new FormControl('new node', Validators.required),
numberOfNodes: new FormControl(1, [Validators.required, nonNegativeValidator.get])
});
this.positionForm = this.formBuilder.group({
top: new FormControl(0, Validators.required),
@ -68,13 +70,13 @@ export class TemplateListDialogComponent implements OnInit {
chooseTemplate(event) {
this.selectedTemplate = event.value;
this.configurationForm.controls['name'].setValue(this.selectedTemplate.default_name_format);
// this.configurationForm.controls['name'].setValue(this.selectedTemplate.default_name_format);
}
onAddClick(): void {
if (!this.selectedTemplate || this.filteredTemplates.length === 0) {
this.toasterService.error('Please firstly choose template.');
} else if (!this.positionForm.valid || !this.configurationForm.valid) {
} else if (!this.positionForm.valid || !this.configurationForm.valid || !this.selectedTemplate.compute_id) {
this.toasterService.error('Please fill all required fields.');
} else {
let x: number = this.positionForm.get('left').value;
@ -85,7 +87,7 @@ export class TemplateListDialogComponent implements OnInit {
let event: NodeAddedEvent = {
template: this.selectedTemplate,
server: this.selectedTemplate.compute_id,
name: this.configurationForm.get('name').value,
// name: this.configurationForm.get('name').value,
numberOfNodes: this.configurationForm.get('numberOfNodes').value,
x: x,
y: y
@ -99,7 +101,7 @@ export class TemplateListDialogComponent implements OnInit {
export interface NodeAddedEvent {
template: Template,
server: string,
name: string,
name?: string,
numberOfNodes: number;
x: number;
y: number;

3
src/app/components/template/template.component.ts
View File

@ -27,7 +27,8 @@ export class TemplateComponent implements OnInit {
server: this.server,
project: this.project
},
autoFocus: false
autoFocus: false,
disableClose: true
});
dialogRef.afterClosed().subscribe((nodeAddedEvent: NodeAddedEvent) => {

5
src/app/components/topology-summary/topology-summary.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit, OnDestroy, Input, AfterViewInit, Output, EventEmitter } from '@angular/core';
import { Component, OnInit, OnDestroy, Input, AfterViewInit, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
import { Project } from '../../models/project';
import { Server } from '../../models/server';
import { NodesDataSource } from '../../cartography/datasources/nodes-datasource';
@ -16,7 +16,8 @@ import { ThemeService } from '../../services/theme.service';
@Component({
selector: 'app-topology-summary',
templateUrl: './topology-summary.component.html',
styleUrls: ['./topology-summary.component.scss']
styleUrls: ['./topology-summary.component.scss'],
changeDetection: ChangeDetectionStrategy.Default
})
export class TopologySummaryComponent implements OnInit, OnDestroy {
@Input() server: Server;

7
src/app/services/node.service.ts
View File

@ -46,6 +46,13 @@ export class NodeService {
}
createFromTemplate(server: Server, project: Project, template: Template, x: number, y: number, compute_id: string): Observable<Node> {
if (!compute_id) {
return this.httpServer.post(server, `/projects/${project.project_id}/templates/${template.template_id}`, {
x: Math.round(x),
y: Math.round(y),
compute_id: 'local'
});
}
return this.httpServer.post(server, `/projects/${project.project_id}/templates/${template.template_id}`, {
x: Math.round(x),
y: Math.round(y),

9
src/app/services/qemu-configuration.service.ts
View File

@ -7,7 +7,7 @@ export class QemuConfigurationService {
}
getDiskInterfaces() {
return ['ide', 'sata', 'scsi', 'sd', 'mtd', 'floppy', 'pflash', 'virtio', 'none'];
return ['ide', 'sata', 'scsi', 'sd', 'mtd', 'floppy', 'pflash', 'virtio', 'nvme', 'none'];
}
getNetworkTypes() {
@ -33,7 +33,12 @@ export class QemuConfigurationService {
// ["virtio-net-pci", "Paravirtualized Network I/O"],
// ["vmxnet3", "VMWare Paravirtualized Ethernet v3"]];
let networkTypes = ["e1000", "Intel Gigabit Ethernet",
let networkTypes = ["e1000",
"e1000-82544gc",
"e1000-82545em",
"e1000e",
"rocker",
"Intel Gigabit Ethernet",
"i82550",
"i82551",
"i82557a",

14
src/main.ts
View File

@ -1,14 +1,20 @@
import 'hammerjs';
import { enableProdMode } from '@angular/core';
import { enableProdMode, ApplicationRef } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { enableDebugTools } from '@angular/platform-browser';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch(err => console.error(err));
platformBrowserDynamic().bootstrapModule(AppModule)
.then(moduleRef => {
const applicationRef = moduleRef.injector.get(ApplicationRef);
const componentRef = applicationRef.components[0];
// allows to run `ng.profiler.timeChangeDetection();`
enableDebugTools(componentRef);
})
.catch(err => console.log(err));