ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2024-12-20 13:33:06 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Capturing packets visible on map

Browse Source
This commit is contained in:
Piotr Pekala 2019-03-18 06:40:06 -07:00
parent e507e26cda
commit 2997d1ff66
21 changed files with 167 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -169,10 +169,14 @@ import { DateFilter } from './filters/dateFilter.pipe';
import { NameFilter } from './filters/nameFilter.pipe';
import { CustomAdaptersComponent } from './components/preferences/common/custom-adapters/custom-adapters.component';
import { NodesMenuComponent } from './components/project-map/nodes-menu/nodes-menu.component';
import { PacketFiltersActionComponent } from './components/project-map/context-menu/actions/packet-filters-action/packet-filters-action.component';
import { PacketFiltersDialogComponent } from './components/project-map/packet-capturing/packet-filters/packet-filters.component';
import { HelpDialogComponent } from './components/project-map/help-dialog/help-dialog.component';
import { StartCaptureActionComponent } from './components/project-map/context-menu/actions/start-capture/start-capture-action.component';
import { StartCaptureDialogComponent } from './components/project-map/packet-capturing/start-capture/start-capture.component';
import { SuspendLinkActionComponent } from './components/project-map/context-menu/actions/suspend-link/suspend-link-action.component';
import { ResumeLinkActionComponent } from './components/project-map/context-menu/actions/resume-link-action/resume-link-action.component';
import { StopCaptureActionComponent } from './components/project-map/context-menu/actions/stop-capture/stop-capture-action.component';
if (environment.production) {
Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@ -209,6 +213,9 @@ if (environment.production) {
DeleteActionComponent,
PacketFiltersActionComponent,
StartCaptureActionComponent,
StopCaptureActionComponent,
ResumeLinkActionComponent,
SuspendLinkActionComponent,
ProjectMapShortcutsComponent,
SettingsComponent,
PreferencesComponent,

1
src/app/cartography/converters/map/link-to-map-link-converter.ts
View File

@ -19,6 +19,7 @@ export class LinkToMapLinkConverter implements Converter<Link, MapLink> {
mapLink.linkType = link.link_type;
mapLink.nodes = link.nodes.map(linkNode => this.linkNodeToMapLinkNode.convert(linkNode, { link_id: link.link_id }));
mapLink.projectId = link.project_id;
mapLink.suspend = link.suspend;
return mapLink;
}
}

1
src/app/cartography/converters/map/map-link-to-link-converter.ts
View File

@ -19,6 +19,7 @@ export class MapLinkToLinkConverter implements Converter<MapLink, Link> {
link.link_type = mapLink.linkType;
link.nodes = mapLink.nodes.map(mapLinkNode => this.mapLinkNodeToMapLinkNode.convert(mapLinkNode));
link.project_id = mapLink.projectId;
link.suspend = mapLink.suspend;
return link;
}
}

1
src/app/cartography/models/map/map-link.ts
View File

@ -12,6 +12,7 @@ export class MapLink implements Indexed {
linkType: string;
nodes: MapLinkNode[];
projectId: string;
suspend: boolean;
distance: number; // this is not from server
length: number; // this is not from server

6
src/app/cartography/widgets/link.ts
View File

@ -32,12 +32,12 @@ export class LinkWidget implements Widget {
return `translate (${translation.dx}, ${translation.dy})`;
});
link_body.select('.svg-icon').remove();
link_body.select('.capture-icon').remove();
link_body
.filter(l => { return l.filters.frequency_drop })
.filter(l => { return l.capturing })
.append<SVGGElement>('g')
.attr('class', 'svg-icon')
.attr('class', 'capture-icon')
.attr('transform', link => {
return `translate (${(link.source.x + link.target.x)/2}, ${(link.source.y + link.target.y)/2})`
})

4
src/app/components/project-map/context-menu/actions/resume-link-action/resume-link-action.component.html Normal file
View File

@ -0,0 +1,4 @@
<button mat-menu-item *ngIf="link.suspend" (click)="resumeLink()">
<mat-icon>play_arrow</mat-icon>
<span>Resume</span>
</button>

0
src/app/components/project-map/context-menu/actions/resume-link-action/resume-link-action.component.spec.ts Normal file
View File

22
src/app/components/project-map/context-menu/actions/resume-link-action/resume-link-action.component.ts Normal file
View File

@ -0,0 +1,22 @@
import { Component, Input } from '@angular/core';
import { Server } from '../../../../../models/server';
import { Link } from '../../../../../models/link';
import { LinkService } from '../../../../../services/link.service';
@Component({
selector: 'app-resume-link-action',
templateUrl: './resume-link-action.component.html'
})
export class ResumeLinkActionComponent {
@Input() server: Server;
@Input() link: Link;
constructor(
private linkService: LinkService
) {}
resumeLink() {
this.link.suspend = false;
this.linkService.updateLink(this.server, this.link).subscribe(() => {});
}
}

4
src/app/components/project-map/context-menu/actions/stop-capture/stop-capture-action.component.html Normal file
View File

@ -0,0 +1,4 @@
<button mat-menu-item *ngIf="link.capturing" (click)="stopCapture()">
<mat-icon>pause_circle_filled</mat-icon>
<span>Stop capture</span>
</button>

0
src/app/components/project-map/context-menu/actions/stop-capture/stop-capture-action.component.spec.ts Normal file
View File

21
src/app/components/project-map/context-menu/actions/stop-capture/stop-capture-action.component.ts Normal file
View File

@ -0,0 +1,21 @@
import { Component, Input } from '@angular/core';
import { Server } from '../../../../../models/server';
import { Link } from '../../../../../models/link';
import { LinkService } from '../../../../../services/link.service';
@Component({
selector: 'app-stop-capture-action',
templateUrl: './stop-capture-action.component.html'
})
export class StopCaptureActionComponent {
@Input() server: Server;
@Input() link: Link;
constructor(
private linkService: LinkService
) {}
stopCapture() {
this.linkService.stopCaptureOnLink(this.server, this.link).subscribe(() => {});
}
}

4
src/app/components/project-map/context-menu/actions/suspend-link/suspend-link-action.component.html Normal file
View File

@ -0,0 +1,4 @@
<button mat-menu-item *ngIf="!link.suspend" (click)="suspendLink()">
<mat-icon>pause</mat-icon>
<span>Suspend</span>
</button>

0
src/app/components/project-map/context-menu/actions/suspend-link/suspend-link-action.component.spec.ts Normal file
View File

22
src/app/components/project-map/context-menu/actions/suspend-link/suspend-link-action.component.ts Normal file
View File

@ -0,0 +1,22 @@
import { Component, Input } from '@angular/core';
import { Server } from '../../../../../models/server';
import { Link } from '../../../../../models/link';
import { LinkService } from '../../../../../services/link.service';
@Component({
selector: 'app-suspend-link-action',
templateUrl: './suspend-link-action.component.html'
})
export class SuspendLinkActionComponent {
@Input() server: Server;
@Input() link: Link;
constructor(
private linkService: LinkService
) {}
suspendLink() {
this.link.suspend = true;
this.linkService.updateLink(this.server, this.link).subscribe(() => {});
}
}

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

@ -31,12 +31,27 @@
[server]="server"
[link]="links[0]"
></app-start-capture-action>
<app-stop-capture-action
*ngIf="!projectService.isReadOnly(project) && drawings.length===0 && nodes.length===0 && links.length===1"
[server]="server"
[link]="links[0]"
></app-stop-capture-action>
<app-packet-filters-action
*ngIf="!projectService.isReadOnly(project) && drawings.length===0 && nodes.length===0 && links.length===1"
[server]="server"
[project]="project"
[link]="links[0]"
></app-packet-filters-action>
<app-resume-link-action
*ngIf="!projectService.isReadOnly(project) && drawings.length===0 && nodes.length===0 && links.length===1"
[server]="server"
[link]="links[0]"
></app-resume-link-action>
<app-suspend-link-action
*ngIf="!projectService.isReadOnly(project) && drawings.length===0 && nodes.length===0 && links.length===1"
[server]="server"
[link]="links[0]"
></app-suspend-link-action>
<app-delete-action
*ngIf="!projectService.isReadOnly(project)"
[server]="server"

18
src/app/components/project-map/packet-capturing/packet-filters/packet-filters.component.html
View File

@ -1,6 +1,6 @@
<h1 mat-dialog-title>Packet filters</h1>
<div class="modal-form-container">
<div class="modal-form-container" class="content">
<mat-tab-group *ngIf="this.filters">
<mat-tab label="Frequency drop">
<mat-form-field class="input-field">
@ -32,11 +32,13 @@
</mat-tab>
</mat-tab-group>
</div>
<div mat-dialog-actions>
<button mat-button (click)="onNoClick()" color="accent">Cancel</button>
<button mat-button (click)="onResetClick()" color="accent">Reset</button>
<button mat-button (click)="onYesClick()" tabindex="2" mat-raised-button color="primary">Apply</button>
<div class="divider"></div>
<button mat-button (click)="onHelpClick()" color="accent">Help</button>
<div class="bottom-bar">
<div class="spacer"></div>
<div mat-dialog-actions layout="row" class="dialog-actions">
<button mat-button (click)="onNoClick()" color="accent">Cancel</button>
<button mat-button (click)="onResetClick()" color="accent">Reset</button>
<button mat-button (click)="onYesClick()" tabindex="2" mat-raised-button color="primary">Apply</button>
<div class="divider"></div>
<button mat-button (click)="onHelpClick()" color="accent">Help</button>
</div>
</div>

8
src/app/components/project-map/packet-capturing/packet-filters/packet-filters.component.scss
View File

@ -1,3 +1,11 @@
.spacer {
flex-grow: 1;
}
.content {
height: 260px;
}
.item {
height: 25px;
font-size: 10pt;

32
src/app/components/project-map/packet-capturing/start-capture/start-capture.component.html
View File

@ -1,21 +1,23 @@
<h1 mat-dialog-title>Packet capture</h1>
<div class="modal-form-container">
<mat-form-field class="input-field">
<mat-select
placeholder="Link type"
[(ngModel)]="linkType">
<mat-option *ngFor="let type of linkTypes" [value]="type[1]">
{{type[0]}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="input-field">
<input
placeholder="File name"
matInput type="text"
[(ngModel)]="filename" >
</mat-form-field>
<form [formGroup]="inputForm">
<mat-form-field class="input-field">
<mat-select
placeholder="Link type"
formControlName="linkType">
<mat-option *ngFor="let type of linkTypes" [value]="type[1]">
{{type[0]}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="input-field">
<input
placeholder="File name"
formControlName="fileName"
matInput type="text">
</mat-form-field>
</form>
</div>
<div mat-dialog-actions>

3
src/app/components/project-map/packet-capturing/start-capture/start-capture.component.scss
View File

@ -0,0 +1,3 @@
.input-field {
width: 100%;
}

35
src/app/components/project-map/packet-capturing/start-capture/start-capture.component.ts
View File

@ -5,6 +5,8 @@ import { MatDialogRef } from '@angular/material';
import { PacketFiltersDialogComponent } from '../packet-filters/packet-filters.component';
import { LinkService } from '../../../../services/link.service';
import { CapturingSettings } from '../../../../models/capturingSettings';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
import { ToasterService } from '../../../../services/toaster.service';
@Component({
selector: 'app-start-capture',
@ -15,14 +17,19 @@ export class StartCaptureDialogComponent implements OnInit {
server: Server;
link: Link;
linkTypes = [];
linkType: string;
fileName: string;
inputForm: FormGroup;
constructor(
private dialogRef: MatDialogRef<PacketFiltersDialogComponent>,
private linkService: LinkService
) {}
private linkService: LinkService,
private formBuilder: FormBuilder,
private toasterService: ToasterService
) {
this.inputForm = this.formBuilder.group({
linkType: new FormControl('', Validators.required),
fileName: new FormControl('', Validators.required)
});
}
ngOnInit() {
if (this.link.link_type === 'ethernet') {
@ -40,14 +47,18 @@ export class StartCaptureDialogComponent implements OnInit {
}
onYesClick() {
let captureSettings: CapturingSettings = {
capture_file_name: this.fileName,
data_link_type: this.linkType
};
if (this.inputForm.invalid) {
this.toasterService.error(`Fill all required fields`);
} else {
let captureSettings: CapturingSettings = {
capture_file_name: this.inputForm.get('fileName').value,
data_link_type: this.inputForm.get('linkType').value
};
this.linkService.startCaptureOnLink(this.server, this.link, captureSettings).subscribe(() => {
this.dialogRef.close();
});
this.linkService.startCaptureOnLink(this.server, this.link, captureSettings).subscribe(() => {
this.dialogRef.close();
});
}
}
onNoClick() {

1
src/app/models/link.ts
View File

@ -11,6 +11,7 @@ export class Link {
link_type: string;
nodes: LinkNode[];
project_id: string;
suspend: boolean;
distance: number; // this is not from server
length: number; // this is not from server