Merge pull request #339 from GNS3/Packet-capture-preferences

Packet capture preferences
2024-12-18 20:47:51 +00:00 · 2019-04-01 10:48:44 +02:00 · 2019-04-01 10:48:44 +02:00 · 5fae9e1db0
commit 5fae9e1db0
parent 12ba435fa6 c694309875
54 changed files with 2322 additions and 19 deletions
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@ -6,7 +6,7 @@ import { ServersComponent } from './components/servers/servers.component';
 import { ProjectsComponent } from './components/projects/projects.component';
 import { DefaultLayoutComponent } from './layouts/default-layout/default-layout.component';
 import { SettingsComponent } from './components/settings/settings.component';
-import { BundledServerFinderComponent } from './components/local-server/bundled-server-finder.component';
+import { BundledServerFinderComponent } from './components/bundled-server-finder/bundled-server-finder.component';
 import { PreferencesComponent } from './components/preferences/preferences.component';
 import { QemuPreferencesComponent } from './components/preferences/qemu/qemu-preferences/qemu-preferences.component';
 import { QemuVmTemplatesComponent } from './components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component';
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@ -58,7 +58,7 @@ import { ProjectMapShortcutsComponent } from './components/project-map/project-m
 import { SettingsComponent } from './components/settings/settings.component';
 import { SettingsService } from './services/settings.service';

-import { BundledServerFinderComponent } from './components/local-server/bundled-server-finder.component';
+import { BundledServerFinderComponent } from './components/bundled-server-finder/bundled-server-finder.component';
 import { ProgressComponent } from './common/progress/progress.component';
 import { ProgressService } from './common/progress/progress.service';
 import { version } from './version';
@ -169,6 +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', {
@ -203,6 +211,11 @@ if (environment.production) {
    EditStyleActionComponent,
    EditTextActionComponent,
    DeleteActionComponent,
+    PacketFiltersActionComponent,
+    StartCaptureActionComponent,
+    StopCaptureActionComponent,
+    ResumeLinkActionComponent,
+    SuspendLinkActionComponent,
    ProjectMapShortcutsComponent,
    SettingsComponent,
    PreferencesComponent,
@ -224,6 +237,7 @@ if (environment.production) {
    InstallSoftwareComponent,
    StyleEditorDialogComponent,
    TextEditorDialogComponent,
+    PacketFiltersDialogComponent,
    QemuPreferencesComponent,
    QemuVmTemplatesComponent,
    AddQemuVmTemplateComponent,
@ -257,6 +271,8 @@ if (environment.production) {
    VmwareTemplateDetailsComponent,
    AddVmwareTemplateComponent,
    DeleteConfirmationDialogComponent,
+    HelpDialogComponent,
+    StartCaptureDialogComponent,
    DeleteTemplateComponent,
    DockerTemplatesComponent,
    AddDockerTemplateComponent,
@ -355,9 +371,12 @@ if (environment.production) {
    ImportProjectDialogComponent,
    ConfirmationDialogComponent,
    StyleEditorDialogComponent,
+    PacketFiltersDialogComponent,
    TextEditorDialogComponent,
    SymbolsComponent,
-    DeleteConfirmationDialogComponent
+    DeleteConfirmationDialogComponent,
+    HelpDialogComponent,
+    StartCaptureDialogComponent
  ],
  bootstrap: [AppComponent]
 })
--- a/src/app/cartography/converters/map/link-to-map-link-converter.ts
+++ b/src/app/cartography/converters/map/link-to-map-link-converter.ts
@ -15,9 +15,11 @@ export class LinkToMapLinkConverter implements Converter<Link, MapLink> {
    mapLink.captureFileName = link.capture_file_name;
    mapLink.captureFilePath = link.capture_file_path;
    mapLink.capturing = link.capturing;
+    mapLink.filters = link.filters;
    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;
  }
 }
--- a/src/app/cartography/converters/map/map-link-to-link-converter.ts
+++ b/src/app/cartography/converters/map/map-link-to-link-converter.ts
@ -15,9 +15,11 @@ export class MapLinkToLinkConverter implements Converter<MapLink, Link> {
    link.capture_file_name = mapLink.captureFileName;
    link.capture_file_path = mapLink.captureFilePath;
    link.capturing = mapLink.capturing;
+    link.filters = mapLink.filters;
    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;
  }
 }
--- a/src/app/cartography/events/event-source.ts
+++ b/src/app/cartography/events/event-source.ts
@ -1,5 +1,6 @@
 import { TextElement } from '../models/drawings/text-element';
 import { MapDrawing } from '../models/map/map-drawing';
+import { MapLink } from '../models/map/map-link';

 export class DataEventSource<T> {
  constructor(public datum: T, public dx: number, public dy: number) {}
@ -30,3 +31,7 @@ export class TextEditedDataEvent {
 export class DrawingContextMenu {
  constructor(public event: any, public drawing: MapDrawing) {}
 }
+
+export class LinkContextMenu {
+  constructor(public event:any, public link: MapLink) {}
+}
--- a/src/app/cartography/models/map/map-link.ts
+++ b/src/app/cartography/models/map/map-link.ts
@ -1,15 +1,18 @@
 import { MapLinkNode } from './map-link-node';
 import { MapNode } from './map-node';
 import { Indexed } from '../../datasources/map-datasource';
+import { Filter } from '../../../models/filter';

 export class MapLink implements Indexed {
  id: string;
  captureFileName: string;
  captureFilePath: string;
  capturing: boolean;
+  filters?: Filter;
  linkType: string;
  nodes: MapLinkNode[];
  projectId: string;
+  suspend: boolean;

  distance: number; // this is not from server
  length: number; // this is not from server
--- a/src/app/cartography/widgets/link.ts
+++ b/src/app/cartography/widgets/link.ts
@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, EventEmitter } from '@angular/core';

 import { Widget } from './widget';
 import { SVGSelection } from '../models/types';
@ -9,9 +9,13 @@ import { InterfaceLabelWidget } from './interface-label';
 import { InterfaceStatusWidget } from './interface-status';
 import { MapLink } from '../models/map/map-link';
 import { SelectionManager } from '../managers/selection-manager';
+import { event } from 'd3-selection';
+import { LinkContextMenu } from '../events/event-source';

@Injectable()
 export class LinkWidget implements Widget {
+  public onContextMenu = new EventEmitter<LinkContextMenu>();
+
  constructor(
    private multiLinkCalculatorHelper: MultiLinkCalculatorHelper,
    private interfaceLabelWidget: InterfaceLabelWidget,
@ -32,6 +36,58 @@ export class LinkWidget implements Widget {
      return `translate (${translation.dx}, ${translation.dy})`;
    });

+    link_body.select('.capture-icon').remove();
+    link_body
+      .filter(l => { return l.capturing && !(l.filters.bpf || l.filters.corrupt || l.filters.delay || l.filters.frequency_drop || l.filters.packet_loss)})
+      .append<SVGGElement>('g')
+      .on('contextmenu', (datum: MapLink) => {
+        const evt = event;
+        this.onContextMenu.emit(new LinkContextMenu(evt, datum));
+      })
+      .attr('class', 'capture-icon')
+      .attr('transform', link => { 
+        return `translate (${(link.source.x + link.target.x)/2 + 24}, ${(link.source.y + link.target.y)/2 + 24}) scale(0.5)`
+      })
+      .attr('viewBox', '0 0 20 20')
+        .append<SVGImageElement>('image')
+        .attr("xlink:href", "assets/resources/images/inspect.svg");
+
+    link_body.select('.filter-capture-icon').remove();
+    link_body
+      .filter(l => { return l.capturing && (l.filters.bpf || l.filters.corrupt || l.filters.delay || l.filters.frequency_drop || l.filters.packet_loss)})
+      .append<SVGGElement>('g')
+      .on('contextmenu', (datum: MapLink) => {
+        const evt = event;
+        this.onContextMenu.emit(new LinkContextMenu(evt, datum));
+      })
+      .attr('class', 'filter-capture-icon')
+      .attr('transform', link => { 
+        return `translate (${(link.source.x + link.target.x)/2 + 24}, ${(link.source.y + link.target.y)/2 + 24}) scale(0.5)`
+      })
+      .attr('viewBox', '0 0 20 20')
+        .append<SVGImageElement>('image')
+        .attr("xlink:href", "assets/resources/images/filter-capture.svg");
+
+    link_body.select('.filter-icon').remove();
+    link_body
+      .filter(l => { return !l.capturing && (l.filters.bpf || l.filters.corrupt || l.filters.delay || l.filters.frequency_drop || l.filters.packet_loss)})
+      .append<SVGGElement>('g')
+      .on('contextmenu', (datum: MapLink) => {
+        const evt = event;
+        this.onContextMenu.emit(new LinkContextMenu(evt, datum));
+      })
+      .attr('class', 'filter-icon')
+      .attr('width', '48px')
+      .attr('height', '48px')
+      .attr('transform', link => { 
+        return `translate (${(link.source.x + link.target.x)/2 + 24}, ${(link.source.y + link.target.y)/2 + 24}) scale(0.5)`
+      })
+      .attr('viewBox', '0 0 20 20')
+        .append<SVGImageElement>('image')
+        .attr('width', '48px')
+        .attr('height', '48px')
+        .attr("xlink:href", "assets/resources/images/filter.svg");
+
    const serial_link_widget = new SerialLinkWidget();
    serial_link_widget.draw(link_body_merge);

--- a/src/app/components/bundled-server-finder/bundled-server-finder.component.html
+++ b/src/app/components/bundled-server-finder/bundled-server-finder.component.html
--- a/src/app/components/bundled-server-finder/bundled-server-finder.component.scss
+++ b/src/app/components/bundled-server-finder/bundled-server-finder.component.scss
--- a/src/app/components/bundled-server-finder/bundled-server-finder.component.spec.ts
+++ b/src/app/components/bundled-server-finder/bundled-server-finder.component.spec.ts
--- a/src/app/components/bundled-server-finder/bundled-server-finder.component.ts
+++ b/src/app/components/bundled-server-finder/bundled-server-finder.component.ts
--- a/src/app/components/project-map/context-menu/actions/packet-filters-action/packet-filters-action.component.html
+++ b/src/app/components/project-map/context-menu/actions/packet-filters-action/packet-filters-action.component.html
@ -0,0 +1,4 @@
+<button mat-menu-item (click)="openPacketFilters()">
+    <mat-icon>filter_list</mat-icon>
+    <span>Packet filters</span>
+</button>
--- a/src/app/components/project-map/context-menu/actions/packet-filters-action/packet-filters-action.component.spec.ts
+++ b/src/app/components/project-map/context-menu/actions/packet-filters-action/packet-filters-action.component.spec.ts
--- a/src/app/components/project-map/context-menu/actions/packet-filters-action/packet-filters-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/packet-filters-action/packet-filters-action.component.ts
@ -0,0 +1,30 @@
+import { Component, Input } from "@angular/core";
+import { Link } from '../../../../../models/link';
+import { Server } from '../../../../../models/server';
+import { Project } from '../../../../../models/project';
+import { MatDialog } from '@angular/material';
+import { PacketFiltersDialogComponent } from '../../../packet-capturing/packet-filters/packet-filters.component';
+
+@Component({
+    selector: 'app-packet-filters-action',
+    templateUrl: './packet-filters-action.component.html'
+})
+export class PacketFiltersActionComponent {
+    @Input() server: Server;
+    @Input() project: Project;
+    @Input() link: Link;
+
+    constructor(private dialog: MatDialog) {}
+
+    openPacketFilters() {
+        const dialogRef = this.dialog.open(PacketFiltersDialogComponent, {
+            width: '900px',
+            height: '400px',
+            autoFocus: false
+        });
+        let instance = dialogRef.componentInstance;
+        instance.server = this.server;
+        instance.project = this.project;
+        instance.link = this.link;
+    }
+}
--- a/src/app/components/project-map/context-menu/actions/resume-link-action/resume-link-action.component.html
+++ b/src/app/components/project-map/context-menu/actions/resume-link-action/resume-link-action.component.html
@ -0,0 +1,4 @@
+<button mat-menu-item *ngIf="link.suspend" (click)="resumeLink()">
+    <mat-icon>play_arrow</mat-icon>
+    <span>Resume</span>
+</button>
--- a/src/app/components/project-map/context-menu/actions/resume-link-action/resume-link-action.component.spec.ts
+++ b/src/app/components/project-map/context-menu/actions/resume-link-action/resume-link-action.component.spec.ts
--- a/src/app/components/project-map/context-menu/actions/resume-link-action/resume-link-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/resume-link-action/resume-link-action.component.ts
@ -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(() => {});
+    }
+}
--- a/src/app/components/project-map/context-menu/actions/start-capture/start-capture-action.component.html
+++ b/src/app/components/project-map/context-menu/actions/start-capture/start-capture-action.component.html
@ -0,0 +1,4 @@
+<button mat-menu-item *ngIf="!link.capturing" (click)="startCapture()">
+    <mat-icon>loupe</mat-icon>
+    <span>Start capture</span>
+</button>
--- a/src/app/components/project-map/context-menu/actions/start-capture/start-capture-action.component.spec.ts
+++ b/src/app/components/project-map/context-menu/actions/start-capture/start-capture-action.component.spec.ts
--- a/src/app/components/project-map/context-menu/actions/start-capture/start-capture-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/start-capture/start-capture-action.component.ts
@ -0,0 +1,26 @@
+import { Component, Input } from '@angular/core';
+import { Server } from '../../../../../models/server';
+import { Link } from '../../../../../models/link';
+import { MatDialog } from '@angular/material';
+import { StartCaptureDialogComponent } from '../../../packet-capturing/start-capture/start-capture.component';
+
+@Component({
+  selector: 'app-start-capture-action',
+  templateUrl: './start-capture-action.component.html'
+})
+export class StartCaptureActionComponent {
+  @Input() server: Server;
+  @Input() link: Link;
+
+  constructor(private dialog: MatDialog) {}
+
+  startCapture() {
+    const dialogRef = this.dialog.open(StartCaptureDialogComponent, {
+        width: '400px',
+        autoFocus: false
+    });
+    let instance = dialogRef.componentInstance;
+    instance.server = this.server;
+    instance.link = this.link;
+  }
+}
--- a/src/app/components/project-map/context-menu/actions/stop-capture/stop-capture-action.component.html
+++ b/src/app/components/project-map/context-menu/actions/stop-capture/stop-capture-action.component.html
@ -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>
--- a/src/app/components/project-map/context-menu/actions/stop-capture/stop-capture-action.component.spec.ts
+++ b/src/app/components/project-map/context-menu/actions/stop-capture/stop-capture-action.component.spec.ts
--- a/src/app/components/project-map/context-menu/actions/stop-capture/stop-capture-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/stop-capture/stop-capture-action.component.ts
@ -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(() => {});
+  }
+}
--- a/src/app/components/project-map/context-menu/actions/suspend-link/suspend-link-action.component.html
+++ b/src/app/components/project-map/context-menu/actions/suspend-link/suspend-link-action.component.html
@ -0,0 +1,4 @@
+<button mat-menu-item *ngIf="!link.suspend" (click)="suspendLink()">
+    <mat-icon>pause</mat-icon>
+    <span>Suspend</span>
+</button>
--- a/src/app/components/project-map/context-menu/actions/suspend-link/suspend-link-action.component.spec.ts
+++ b/src/app/components/project-map/context-menu/actions/suspend-link/suspend-link-action.component.spec.ts
--- a/src/app/components/project-map/context-menu/actions/suspend-link/suspend-link-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/suspend-link/suspend-link-action.component.ts
@ -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(() => {});
+    }
+}
--- a/src/app/components/project-map/context-menu/context-menu.component.html
+++ b/src/app/components/project-map/context-menu/context-menu.component.html
@ -26,6 +26,34 @@
      [nodes]="nodes"
      [drawings]="drawings"
    ></app-move-layer-down-action>
+    <app-start-capture-action
+      *ngIf="!projectService.isReadOnly(project) && isBundledServer 
+      && drawings.length===0 && nodes.length===0 && links.length===1"
+      [server]="server"
+      [link]="links[0]"
+    ></app-start-capture-action>
+    <app-stop-capture-action
+      *ngIf="!projectService.isReadOnly(project) && isBundledServer 
+      && 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"
--- a/src/app/components/project-map/context-menu/context-menu.component.spec.ts
+++ b/src/app/components/project-map/context-menu/context-menu.component.spec.ts
@ -8,6 +8,7 @@ import { MatMenuModule, MatMenuTrigger } from '@angular/material';
 import { Drawing } from '../../../cartography/models/drawing';
 import { RectElement } from '../../../cartography/models/drawings/rect-element';
 import { TextElement } from '../../../cartography/models/drawings/text-element';
+import { Server } from '../../../models/server';

 describe('ContextMenuComponent', () => {
  let component: ContextMenuComponent;
@ -28,6 +29,7 @@ describe('ContextMenuComponent', () => {
  beforeEach(() => {
    fixture = TestBed.createComponent(ContextMenuComponent);
    component = fixture.componentInstance;
+    component.server = {location: 'local'} as Server;
    fixture.detectChanges();
  });

--- a/src/app/components/project-map/context-menu/context-menu.component.ts
+++ b/src/app/components/project-map/context-menu/context-menu.component.ts
@ -31,6 +31,7 @@ export class ContextMenuComponent implements OnInit {
  links: Link[] = [];

  hasTextCapabilities: boolean = false;
+  isBundledServer: boolean = false;

  constructor(
    private sanitizer: DomSanitizer,
@ -40,6 +41,7 @@ export class ContextMenuComponent implements OnInit {

  ngOnInit() {
    this.setPosition(0, 0);
+    this.isBundledServer = this.server.location === 'bundled';
  }

  public setPosition(top: number, left: number) {
--- a/src/app/components/project-map/help-dialog/help-dialog.component.html
+++ b/src/app/components/project-map/help-dialog/help-dialog.component.html
@ -0,0 +1,16 @@
+<h1 mat-dialog-title>{{title}}</h1>
+
+<div class="modal-form-container">
+    <div class="message" *ngFor="let message of messages; let i = index">
+        <h6>
+            {{message.name}}
+        </h6>
+        <span class="description">
+            {{message.description}}
+        </span>
+    </div>
+</div>
+
+<div mat-dialog-actions>
+    <button mat-button (click)="onCloseClick()" color="accent">Close</button>
+</div>
--- a/src/app/components/project-map/help-dialog/help-dialog.component.scss
+++ b/src/app/components/project-map/help-dialog/help-dialog.component.scss
@ -0,0 +1,7 @@
+.message {
+    margin-bottom: 10px;
+}
+
+.description {
+    color: #b0bec5;
+}
--- a/src/app/components/project-map/help-dialog/help-dialog.component.spec.ts
+++ b/src/app/components/project-map/help-dialog/help-dialog.component.spec.ts
--- a/src/app/components/project-map/help-dialog/help-dialog.component.ts
+++ b/src/app/components/project-map/help-dialog/help-dialog.component.ts
@ -0,0 +1,21 @@
+import { Component, Input } from '@angular/core';
+import { MatDialogRef } from '@angular/material';
+import { Message } from '../../../models/message';
+
+@Component({
+    selector: 'app-help-dialog',
+    templateUrl: './help-dialog.component.html',
+    styleUrls: ['./help-dialog.component.scss']
+})
+export class HelpDialogComponent {
+    @Input() title: string;
+    @Input() messages: Message[];
+
+    constructor(
+        public dialogRef: MatDialogRef<HelpDialogComponent>,
+    ) {}
+
+    onCloseClick() {
+        this.dialogRef.close();
+    }
+}
--- a/src/app/components/project-map/packet-capturing/packet-filters/packet-filters.component.html
+++ b/src/app/components/project-map/packet-capturing/packet-filters/packet-filters.component.html
@ -0,0 +1,44 @@
+<h1 mat-dialog-title>Packet filters</h1>
+
+<div class="modal-form-container" class="content">
+    <mat-tab-group *ngIf="this.filters">
+        <mat-tab label="Frequency drop">
+            <mat-form-field class="input-field">
+                <input matInput placeholder="Frequency" type="number" [(ngModel)]="filters.frequency_drop[0]">
+            </mat-form-field>
+        </mat-tab>
+        <mat-tab label="Packet loss">
+            <mat-form-field class="input-field">
+                <input matInput placeholder="Chance" type="number" [(ngModel)]="filters.packet_loss[0]">
+            </mat-form-field>
+        </mat-tab>
+        <mat-tab label="Delay">
+            <mat-form-field class="input-field">
+                <input matInput placeholder="Latency" type="number" [(ngModel)]="filters.delay[0]">
+            </mat-form-field>
+            <mat-form-field class="input-field">
+                <input matInput placeholder="Jitter" type="number" [(ngModel)]="filters.delay[1]">
+            </mat-form-field>
+        </mat-tab>
+        <mat-tab label="Corrupt">
+            <mat-form-field class="input-field">
+                <input matInput placeholder="Latency" type="number" [(ngModel)]="filters.corrupt[0]">
+            </mat-form-field>
+        </mat-tab>
+        <mat-tab label="Berkeley Packet Filter (BPF)">
+            <mat-form-field class="input-field">
+                <textarea matInput type="text" [(ngModel)]="filters.bpf[0]"></textarea>
+            </mat-form-field>
+        </mat-tab>
+    </mat-tab-group>
+</div>
+<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>
--- a/src/app/components/project-map/packet-capturing/packet-filters/packet-filters.component.scss
+++ b/src/app/components/project-map/packet-capturing/packet-filters/packet-filters.component.scss
@ -0,0 +1,67 @@
+.spacer {
+    flex-grow: 1;
+}
+
+.content {
+    height: 260px;
+}
+
+.item {
+    height: 25px;
+    font-size: 10pt;
+    margin-bottom: 10px;
+}
+
+.item-name {
+    margin-bottom: 10px;
+}
+
+.item-value {
+    width: 100%;
+    margin-bottom: 10px;
+}
+
+.input-field {
+    width: 100%;
+    margin-top: 10px;
+}
+
+.divider {
+    width: fit-content;
+    flex: 1 1 auto;
+}
+
+.input-color {
+    padding: 0px;
+    border-width: 0px;
+    width: 100%;
+    background-color: transparent;
+    outline: none;
+}
+
+input:focus {
+    outline: none;
+}
+
+input[type="color"] {
+    -webkit-appearance: none;
+    border: none;
+    height: 25px;
+}
+
+input[type="color"]::-webkit-color-swatch-wrapper {
+    padding: 0;
+}
+
+input[type="color"]::-webkit-color-swatch {
+    border: none;
+}
+
+.modal-form-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.modal-form-container > * {
+    width: 100%;
+}
--- a/src/app/components/project-map/packet-capturing/packet-filters/packet-filters.component.spec.ts
+++ b/src/app/components/project-map/packet-capturing/packet-filters/packet-filters.component.spec.ts
@ -0,0 +1,63 @@
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { CommonModule } from '@angular/common';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { LinkService } from '../../../../services/link.service';
+import { MockedLinkService } from '../../project-map.component.spec';
+import { Link } from '../../../../models/link';
+import { of } from 'rxjs';
+import { PacketFiltersDialogComponent } from './packet-filters.component';
+
+describe('PacketFiltersDialogComponent', () => {
+    let component: PacketFiltersDialogComponent;
+    let fixture: ComponentFixture<PacketFiltersDialogComponent>;
+
+    let mockedLinkService = new MockedLinkService;
+    let dialogRef = {
+        close: jasmine.createSpy('close')
+    };
+    
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+          imports: [MatDialogModule, FormsModule, ReactiveFormsModule, MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule],
+          providers: [
+            { provide: MatDialogRef, useValue: dialogRef },
+            { provide: MAT_DIALOG_DATA, useValue: [] },
+            { provide: LinkService, useValue: mockedLinkService }
+          ],
+          declarations: [
+            PacketFiltersDialogComponent
+          ],
+          schemas: [NO_ERRORS_SCHEMA]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(PacketFiltersDialogComponent);
+        component = fixture.componentInstance;
+        component.link = {link_type: 'ethernet'} as Link;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should call update link when filters applied', () => {
+        spyOn(mockedLinkService, 'updateLink').and.returnValue(of({}));
+
+        component.onYesClick();
+
+        expect(mockedLinkService.updateLink).toHaveBeenCalled();
+    });
+
+    it('should call update link after resetting', () => {
+        spyOn(mockedLinkService, 'updateLink').and.returnValue(of({}));
+
+        component.onResetClick();
+
+        expect(mockedLinkService.updateLink).toHaveBeenCalled();
+    });
+});
--- a/src/app/components/project-map/packet-capturing/packet-filters/packet-filters.component.ts
+++ b/src/app/components/project-map/packet-capturing/packet-filters/packet-filters.component.ts
@ -0,0 +1,96 @@
+import { Component, OnInit } from '@angular/core';
+import { Link } from '../../../../models/link';
+import { Server } from '../../../../models/server';
+import { Project } from '../../../../models/project';
+import { MatDialogRef, MatDialog } from '@angular/material';
+import { LinkService } from '../../../../services/link.service';
+import { FilterDescription } from '../../../../models/filter-description';
+import { HelpDialogComponent } from '../../help-dialog/help-dialog.component';
+import { Message } from '../../../../models/message';
+import { Filter } from '../../../../models/filter';
+
+@Component({
+    selector: 'app-packet-filters',
+    templateUrl: './packet-filters.component.html',
+    styleUrls: ['./packet-filters.component.scss']
+})
+export class PacketFiltersDialogComponent implements OnInit{
+    server: Server;
+    project: Project;
+    link: Link;
+    filters: Filter;
+    availableFilters: FilterDescription[];
+
+    constructor(
+        private dialogRef: MatDialogRef<PacketFiltersDialogComponent>,
+        private linkService: LinkService,
+        private dialog: MatDialog
+    ) {}
+
+    ngOnInit(){
+        this.linkService.getLink(this.server, this.link.project_id, this.link.link_id).subscribe((link: Link) => {
+            this.link = link;
+            this.filters = {
+                bpf: [],
+                corrupt: [0],
+                delay: [0, 0],
+                frequency_drop: [0],
+                packet_loss: [0]
+            };
+
+            if (this.link.filters) {
+                this.filters.bpf = this.link.filters.bpf ? this.link.filters.bpf : [];
+                this.filters.corrupt = this.link.filters.corrupt ? this.link.filters.corrupt : [0];
+                this.filters.delay = this.link.filters.delay ? this.link.filters.delay : [0, 0];
+                this.filters.frequency_drop =  this.link.filters.frequency_drop ? this.link.filters.frequency_drop : [0];
+                this.filters.packet_loss = this.link.filters.packet_loss ? this.link.filters.packet_loss : [0];
+            }
+        });
+
+        this.linkService.getAvailableFilters(this.server, this.link).subscribe((availableFilters: FilterDescription[]) => {
+            this.availableFilters = availableFilters;
+        });
+    }
+
+    onNoClick() {
+        this.dialogRef.close();
+    }
+
+    onResetClick() {
+        this.link.filters = {
+            bpf: [],
+            corrupt: [0],
+            delay: [0, 0],
+            frequency_drop: [0],
+            packet_loss: [0]
+        };
+
+        this.linkService.updateLink(this.server, this.link).subscribe((link: Link) => {
+            this.dialogRef.close();
+        });
+    }
+
+    onYesClick() {
+        this.link.filters = this.filters;
+        this.linkService.updateLink(this.server, this.link).subscribe((link: Link) => {
+            this.dialogRef.close();
+        });
+    }
+
+    onHelpClick() {
+        const dialogRef = this.dialog.open(HelpDialogComponent, {
+            width: '500px',
+            autoFocus: false
+        });
+        let instance = dialogRef.componentInstance;
+        instance.title = 'Help for filters';
+        let messages: Message[] = [];
+        this.availableFilters.forEach((filter: FilterDescription) => {
+            messages.push({
+                name: filter.name,
+                description: filter.description
+            });
+        });
+        instance.messages = messages;
+    }
+}
--- a/src/app/components/project-map/packet-capturing/start-capture/start-capture.component.html
+++ b/src/app/components/project-map/packet-capturing/start-capture/start-capture.component.html
@ -0,0 +1,30 @@
+<h1 mat-dialog-title>Packet capture</h1>
+
+<div class="modal-form-container">
+    <form [formGroup]="inputForm">
+        <mat-form-field class="input-field">
+            <mat-select 
+                placeholder="Link type"
+                formControlName="linkType"
+                ngDefaultControl>
+                <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>
+        <!-- <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="startProgram">
+            Start the capture visualization program
+        </mat-checkbox> -->
+    </form>
+</div>
+
+<div mat-dialog-actions>
+    <button mat-button (click)="onNoClick()" color="accent">Cancel</button>
+    <button mat-button (click)="onYesClick()" tabindex="2" mat-raised-button color="primary">Ok</button>
+</div>
--- a/src/app/components/project-map/packet-capturing/start-capture/start-capture.component.scss
+++ b/src/app/components/project-map/packet-capturing/start-capture/start-capture.component.scss
@ -0,0 +1,3 @@
+.input-field {
+    width: 100%;
+}
--- a/src/app/components/project-map/packet-capturing/start-capture/start-capture.component.spec.ts
+++ b/src/app/components/project-map/packet-capturing/start-capture/start-capture.component.spec.ts
@ -0,0 +1,82 @@
+import { StartCaptureDialogComponent } from "./start-capture.component";
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { CommonModule } from '@angular/common';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ToasterService } from '../../../../services/toaster.service';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { MockedToasterService } from '../../../../services/toaster.service.spec';
+import { LinkService } from '../../../../services/link.service';
+import { MockedLinkService, MockedNodesDataSource } from '../../project-map.component.spec';
+import { Link } from '../../../../models/link';
+import { of } from 'rxjs';
+import { NodesDataSource } from '../../../../cartography/datasources/nodes-datasource';
+
+describe('StartCaptureDialogComponent', () => {
+    let component: StartCaptureDialogComponent;
+    let fixture: ComponentFixture<StartCaptureDialogComponent>;
+
+    let mockedToasterService = new MockedToasterService;
+    let mockedLinkService = new MockedLinkService;
+    let mockedNodesDataSource = new MockedNodesDataSource;
+    let dialogRef = {
+        close: jasmine.createSpy('close')
+    };
+    
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+          imports: [MatDialogModule, FormsModule, ReactiveFormsModule, MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule],
+          providers: [
+            { provide: MatDialogRef, useValue: dialogRef },
+            { provide: MAT_DIALOG_DATA, useValue: [] },
+            { provide: ToasterService, useValue: mockedToasterService },
+            { provide: LinkService, useValue: mockedLinkService },
+            { provide: NodesDataSource, useValue: mockedNodesDataSource }
+          ],
+          declarations: [
+            StartCaptureDialogComponent
+          ],
+          schemas: [NO_ERRORS_SCHEMA]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(StartCaptureDialogComponent);
+        component = fixture.componentInstance;
+        component.link = {link_type: 'ethernet', nodes: [{node_id: '1'}, {node_id: '2'}]} as Link;
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should call link service when input is valid', () => {
+        component.inputForm.controls['linkType'].setValue('Ethernet');
+        component.inputForm.controls['fileName'].setValue('SampleFileName');
+        spyOn(mockedLinkService, 'startCaptureOnLink').and.returnValue(of({}));
+
+        component.onYesClick();
+
+        expect(mockedLinkService.startCaptureOnLink).toHaveBeenCalled();
+    });
+
+    it('should not call link service when link type is not set', () => {
+        component.inputForm.controls['fileName'].setValue('SampleFileName');
+        spyOn(mockedLinkService, 'startCaptureOnLink').and.returnValue(of({}));
+
+        component.onYesClick();
+
+        expect(mockedLinkService.startCaptureOnLink).not.toHaveBeenCalled();
+    });
+
+    it('should not call link service when filename is empty', () => {
+        component.inputForm.controls['linkType'].setValue('Ethernet');
+        component.inputForm.controls['fileName'].setValue('');
+        spyOn(mockedLinkService, 'startCaptureOnLink').and.returnValue(of({}));
+
+        component.onYesClick();
+
+        expect(mockedLinkService.startCaptureOnLink).not.toHaveBeenCalled();
+    });
+});
--- a/src/app/components/project-map/packet-capturing/start-capture/start-capture.component.ts
+++ b/src/app/components/project-map/packet-capturing/start-capture/start-capture.component.ts
@ -0,0 +1,85 @@
+import { Component, OnInit } from '@angular/core';
+import { Server } from '../../../../models/server';
+import { Link } from '../../../../models/link';
+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';
+import { LinkNode } from '../../../../models/link-node';
+import { NodesDataSource } from '../../../../cartography/datasources/nodes-datasource';
+
+@Component({
+    selector: 'app-start-capture',
+    templateUrl: './start-capture.component.html',
+    styleUrls: ['./start-capture.component.scss']
+})
+export class StartCaptureDialogComponent implements OnInit {
+    server: Server;
+    link: Link;
+    linkTypes = [];
+    inputForm: FormGroup;
+    startProgram: boolean;
+
+    constructor(
+        private dialogRef: MatDialogRef<PacketFiltersDialogComponent>,
+        private linkService: LinkService,
+        private formBuilder: FormBuilder, 
+        private toasterService: ToasterService,
+        private nodesDataSource: NodesDataSource
+    ) {
+        this.inputForm = this.formBuilder.group({
+            linkType: new FormControl('', Validators.required),
+            fileName: new FormControl('', Validators.required)
+        });
+    }
+
+    ngOnInit() {
+        if (this.link.link_type === 'ethernet') {
+            this.linkTypes = [
+                ["Ethernet", "DLT_EN10MB"]
+            ];
+        } else {
+            this.linkTypes = [
+                ["Cisco HDLC", "DLT_C_HDLC"],
+                ["Cisco PPP", "DLT_PPP_SERIAL"],
+                ["Frame Relay", "DLT_FRELAY"],
+                ["ATM", "DLT_ATM_RFC1483"]
+            ];
+        }
+
+        const sourceNode = this.nodesDataSource.get(this.link.nodes[0].node_id);
+        const targetNode = this.nodesDataSource.get(this.link.nodes[1].node_id);
+        const sourcePort = sourceNode.ports[this.link.nodes[0].port_number];
+        const targetPort = targetNode.ports[this.link.nodes[1].port_number];
+        this.inputForm.controls['fileName'].setValue(`${sourceNode.name}_${sourcePort.name}_to_${targetNode.name}_${targetPort.name}`);
+    }
+
+    onYesClick() {
+        let isAnyRunningDevice = false;
+        this.link.nodes.forEach((linkNode: LinkNode) => {
+            let node = this.nodesDataSource.get(linkNode.node_id);
+            if (node.status === 'started') isAnyRunningDevice = true;
+        });
+
+        if (!isAnyRunningDevice) {
+            this.toasterService.error(`Cannot capture because there is no running device on this link`);
+        } else 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();
+            });
+        }
+    }
+
+    onNoClick() {
+        this.dialogRef.close();
+    }
+}
--- a/src/app/components/project-map/project-map.component.spec.ts
+++ b/src/app/components/project-map/project-map.component.spec.ts
@ -40,6 +40,8 @@ import { RecentlyOpenedProjectService } from '../../services/recentlyOpenedProje
 import { MapLinkToLinkConverter } from '../../cartography/converters/map/map-link-to-link-converter';
 import { Link } from '../../models/link';
 import { Project } from '../../models/project';
+import { CapturingSettings } from '../../models/capturingSettings';
+import { LinkWidget } from '../../cartography/widgets/link';

 export class MockedProgressService {
  public activate() {}
@ -112,8 +114,16 @@ export class MockedDrawingService {
 export class MockedLinkService {
  constructor() {}

+  getLink(server: Server, projectId: string, linkId: string) {
+    return of({});
+  }
+
  deleteLink(_server: Server, link: Link){
-    return of({})
+    return of({});
+  }
+
+  updateLink(server: Server, link: Link) {
+    return of({});
  }

  createLink() {
@ -123,6 +133,14 @@ export class MockedLinkService {
  updateNodes() {
    return of({});
  }
+
+  startCaptureOnLink(server: Server, link: Link, settings: CapturingSettings) {
+    return of({});
+  }
+
+  getAvailableFilters(server: Server, link: Link) { 
+    return of({});
+  }
 }

 export class MockedDrawingsDataSource {
@ -145,7 +163,7 @@ export class MockedNodesDataSource {
  clear() {}

  get() {
-    return of({});
+    return {status: 'started'};
  }

  update() {
@ -179,6 +197,7 @@ describe('ProjectMapComponent', () => {
        { provide: ProjectWebServiceHandler },
        { provide: MapChangeDetectorRef },
        { provide: NodeWidget },
+        { provide: LinkWidget },
        { provide: DrawingsWidget },
        { provide: MapNodeToNodeConverter },
        { provide: MapDrawingToDrawingConverter },
--- a/src/app/components/project-map/project-map.component.ts
+++ b/src/app/components/project-map/project-map.component.ts
@ -30,7 +30,7 @@ import { MapNodeToNodeConverter } from '../../cartography/converters/map/map-nod
 import { SettingsService, Settings } from '../../services/settings.service';
 import { D3MapComponent } from '../../cartography/components/d3-map/d3-map.component';
 import { ToolsService } from '../../services/tools.service';
-import { DrawingContextMenu } from '../../cartography/events/event-source';
+import { DrawingContextMenu, LinkContextMenu } from '../../cartography/events/event-source';
 import { MapDrawingToDrawingConverter } from '../../cartography/converters/map/map-drawing-to-drawing-converter';
 import { SelectionManager } from '../../cartography/managers/selection-manager';
 import { SelectionTool } from '../../cartography/tools/selection-tool';
@ -42,6 +42,7 @@ import { MapLabelToLabelConverter } from '../../cartography/converters/map/map-l
 import { RecentlyOpenedProjectService } from '../../services/recentlyOpenedProject.service';
 import { MapLink } from '../../cartography/models/map/map-link';
 import { MapLinkToLinkConverter } from '../../cartography/converters/map/map-link-to-link-converter';
+import { LinkWidget } from '../../cartography/widgets/link';


@Component({
@ -95,6 +96,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
    private mapChangeDetectorRef: MapChangeDetectorRef,
    private nodeWidget: NodeWidget,
    private drawingsWidget: DrawingsWidget,
+    private linkWidget: LinkWidget,
    private mapNodeToNode: MapNodeToNodeConverter,
    private mapDrawingToDrawing: MapDrawingToDrawingConverter,
    private mapLabelToLabel: MapLabelToLabelConverter,
@ -219,6 +221,11 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
      this.toolsService.selectionToolActivation(true);
    }

+    const onLinkContextMenu = this.linkWidget.onContextMenu.subscribe((eventLink: LinkContextMenu) => {
+      const link = this.mapLinkToLink.convert(eventLink.link);
+      this.contextMenu.openMenuForListOfElements([], [], [], [link], eventLink.event.pageY, eventLink.event.pageX);
+    });
+
    const onNodeContextMenu = this.nodeWidget.onContextMenu.subscribe((eventNode: NodeContextMenu) => {
      const node = this.mapNodeToNode.convert(eventNode.node);
      this.contextMenu.openMenuForNode(node, eventNode.event.pageY, eventNode.event.pageX);
@ -253,6 +260,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
      this.contextMenu.openMenuForListOfElements(drawings, nodes, labels, links, event.pageY, event.pageX);
    });

+    this.subscriptions.push(onLinkContextMenu);
    this.subscriptions.push(onNodeContextMenu);
    this.subscriptions.push(onDrawingContextMenu);
    this.subscriptions.push(onContextMenu);
--- a/src/app/components/snapshots/snapshot-menu-item/snapshot-menu-item.component.ts
+++ b/src/app/components/snapshots/snapshot-menu-item/snapshot-menu-item.component.ts
@ -48,11 +48,6 @@ export class SnapshotMenuItemComponent implements OnInit {
          (created_snapshot: Snapshot) => {
            this.toaster.success(`Snapshot '${snapshot.name}' has been created.`);
            progress.close();
-          },
-          response => {
-            const error = response.json();
-            this.toaster.error(`Cannot create snapshot: ${error.message}`);
-            progress.close();
          }
        );

--- a/src/app/material.imports.ts
+++ b/src/app/material.imports.ts
@ -19,7 +19,8 @@ import {
  MatTooltipModule,
  MatStepperModule,
  MatRadioModule,
-  MatGridListModule
+  MatGridListModule,
+  MatTabsModule
 } from '@angular/material';

 export const MATERIAL_IMPORTS = [
@ -43,5 +44,6 @@ export const MATERIAL_IMPORTS = [
  MatTooltipModule,
  MatStepperModule,
  MatRadioModule,
-  MatGridListModule
+  MatGridListModule,
+  MatTabsModule
 ];
--- a/src/app/models/capturingSettings.ts
+++ b/src/app/models/capturingSettings.ts
@ -0,0 +1,4 @@
+export class CapturingSettings {
+    capture_file_name: string;
+    data_link_type: string;
+}
--- a/src/app/models/filter-description.ts
+++ b/src/app/models/filter-description.ts
@ -0,0 +1,14 @@
+export class FilterDescription {
+    description: string;
+    name: string;
+    parameters: Parameter[];
+    type: string;
+}
+
+interface Parameter {
+    maximum?: number;
+    minimum?: number;
+    name: string;
+    type: string;
+    unit?: string;
+}
--- a/src/app/models/filter.ts
+++ b/src/app/models/filter.ts
@ -0,0 +1,7 @@
+export class Filter {
+    bpf?: string[];
+    corrupt?: number[];
+    delay?: number[];
+    frequency_drop?: number[];
+    packet_loss?: number[];
+}
--- a/src/app/models/link.ts
+++ b/src/app/models/link.ts
@ -1,14 +1,17 @@
 import { Node } from '../cartography/models/node';
 import { LinkNode } from './link-node';
+import { Filter } from './filter';

 export class Link {
  capture_file_name: string;
  capture_file_path: string;
  capturing: boolean;
+  filters?: Filter;
  link_id: string;
  link_type: string;
  nodes: LinkNode[];
  project_id: string;
+  suspend: boolean;

  distance: number; // this is not from server
  length: number; // this is not from server
--- a/src/app/models/message.ts
+++ b/src/app/models/message.ts
@ -0,0 +1,4 @@
+export class Message {
+    name?: string;
+    description: string;
+}
--- a/src/app/services/link.service.ts
+++ b/src/app/services/link.service.ts
@ -7,16 +7,13 @@ import { HttpServer } from './http-server.service';
 import { Port } from '../models/port';
 import { Link } from '../models/link';
 import { LinkNode } from '../models/link-node';
+import { FilterDescription } from '../models/filter-description';
+import { CapturingSettings } from '../models/capturingSettings';

@Injectable()
 export class LinkService {
  constructor(private httpServer: HttpServer) {}

-  deleteLink(server: Server, link: Link) {
-    //return this.httpServer.delete(server, `/compute/projects/${link.project_id}/vpcs/nodes/${link.nodes[0].node_id}/adapters/0/ports/0/nio`)
-    return this.httpServer.delete(server, `/projects/${link.project_id}/links/${link.link_id}`)
-  }
-
  createLink(server: Server, source_node: Node, source_port: Port, target_node: Node, target_port: Port) {
    return this.httpServer.post(server, `/projects/${source_node.project_id}/links`, {
      nodes: [
@ -34,6 +31,22 @@ export class LinkService {
    });
  }

+  getLink(server: Server, projectId: string, linkId: string) {
+    return this.httpServer.get<Link>(server, `/projects/${projectId}/links/${linkId}`);
+  }
+
+  deleteLink(server: Server, link: Link) {
+    return this.httpServer.delete(server, `/projects/${link.project_id}/links/${link.link_id}`)
+  }
+
+  updateLink(server: Server, link: Link) {
+    return this.httpServer.put<Link>(server, `/projects/${link.project_id}/links/${link.link_id}`, link);
+  }
+
+  getAvailableFilters(server: Server, link: Link) {
+    return this.httpServer.get<FilterDescription[]>(server, `/projects/${link.project_id}/links/${link.link_id}/available_filters`);
+  }
+
  updateNodes(server: Server, link: Link, nodes: LinkNode[]) {
    const requestNodes = nodes.map(linkNode => {
      return {
@ -52,4 +65,16 @@ export class LinkService {

    return this.httpServer.put(server, `/projects/${link.project_id}/links/${link.link_id}`, { nodes: requestNodes });
  }
+
+  startCaptureOnLink(server: Server, link: Link, settings: CapturingSettings) {
+    return this.httpServer.post(server, `/projects/${link.project_id}/links/${link.link_id}/start_capture`, settings);
+  }
+
+  stopCaptureOnLink(server: Server, link: Link) {
+    return this.httpServer.post(server, `/projects/${link.project_id}/links/${link.link_id}/stop_capture`, {});
+  }
+
+  streamPcap(server: Server, link: Link) {
+    return this.httpServer.get(server, `/projects/${link.project_id}/links/${link.link_id}/pcap`)
+  }
 }
--- a/src/assets/resources/images/filter-capture.svg
+++ b/src/assets/resources/images/filter-capture.svg
@ -0,0 +1,428 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   sodipodi:docname="filter-capture.svg"
+   inkscape:version="0.91 r13725"
+   sodipodi:version="0.32"
+   id="svg11300"
+   height="48px"
+   width="48px"
+   inkscape:output_extension="org.inkscape.output.svg.inkscape"
+   version="1.1">
+  <defs
+     id="defs3">
+    <linearGradient
+       id="linearGradient2846">
+      <stop
+         id="stop2848"
+         offset="0.0000000"
+         style="stop-color:#8a8a8a;stop-opacity:1.0000000;" />
+      <stop
+         id="stop2850"
+         offset="1.0000000"
+         style="stop-color:#484848;stop-opacity:1.0000000;" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient2366">
+      <stop
+         id="stop2368"
+         offset="0"
+         style="stop-color:#ffffff;stop-opacity:1;" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0.21904762;"
+         offset="0.50000000"
+         id="stop2374" />
+      <stop
+         id="stop2370"
+         offset="1.0000000"
+         style="stop-color:#ffffff;stop-opacity:1.0000000;" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient4487">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0"
+         id="stop4489" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0;"
+         offset="1"
+         id="stop4491" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient4477">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop4479" />
+      <stop
+         style="stop-color:#000000;stop-opacity:0;"
+         offset="1"
+         id="stop4481" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient4467">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0"
+         id="stop4469" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0.24761905;"
+         offset="1.0000000"
+         id="stop4471" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient4454">
+      <stop
+         style="stop-color:#729fcf;stop-opacity:0.20784314;"
+         offset="0.0000000"
+         id="stop4456" />
+      <stop
+         style="stop-color:#729fcf;stop-opacity:0.67619050;"
+         offset="1.0000000"
+         id="stop4458" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient4440">
+      <stop
+         style="stop-color:#7d7d7d;stop-opacity:1;"
+         offset="0"
+         id="stop4442" />
+      <stop
+         id="stop4448"
+         offset="0.50000000"
+         style="stop-color:#b1b1b1;stop-opacity:1.0000000;" />
+      <stop
+         style="stop-color:#686868;stop-opacity:1.0000000;"
+         offset="1.0000000"
+         id="stop4444" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4440"
+       id="linearGradient4446"
+       x1="30.656250"
+       y1="34.000000"
+       x2="33.218750"
+       y2="31.062500"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1.334593,0.000000,0.000000,1.291292,-6.973842,-7.460658)" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4454"
+       id="radialGradient4460"
+       cx="18.240929"
+       cy="21.817987"
+       fx="18.240929"
+       fy="21.817987"
+       r="8.3085051"
+       gradientUnits="userSpaceOnUse" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4467"
+       id="radialGradient4473"
+       cx="15.414371"
+       cy="13.078408"
+       fx="15.414371"
+       fy="13.078408"
+       r="6.6562500"
+       gradientTransform="matrix(2.592963,-7.746900e-24,-5.714443e-24,2.252104,-25.05975,-18.94100)"
+       gradientUnits="userSpaceOnUse" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4487"
+       id="radialGradient4493"
+       cx="24.130018"
+       cy="37.967922"
+       fx="24.130018"
+       fy="37.967922"
+       r="16.528622"
+       gradientTransform="matrix(0.47747795,0,0,0.17126529,6.9831225,31.643536)"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       gradientUnits="userSpaceOnUse"
+       y2="25.743469"
+       x2="17.500893"
+       y1="13.602121"
+       x1="18.292673"
+       id="linearGradient2372"
+       xlink:href="#linearGradient2366"
+       inkscape:collect="always" />
+    <radialGradient
+       r="16.528622"
+       fy="37.967922"
+       fx="24.130018"
+       cy="37.967922"
+       cx="24.130018"
+       gradientTransform="matrix(1.000000,0.000000,0.000000,0.237968,-2.471981e-16,28.93278)"
+       gradientUnits="userSpaceOnUse"
+       id="radialGradient2842"
+       xlink:href="#linearGradient4477"
+       inkscape:collect="always" />
+    <linearGradient
+       gradientUnits="userSpaceOnUse"
+       y2="30.557772"
+       x2="31.335964"
+       y1="26.580296"
+       x1="27.366341"
+       id="linearGradient2852"
+       xlink:href="#linearGradient2846"
+       inkscape:collect="always" />
+  </defs>
+  <sodipodi:namedview
+     stroke="#3465a4"
+     inkscape:window-y="48"
+     inkscape:window-x="130"
+     inkscape:window-height="1752"
+     inkscape:window-width="3070"
+     inkscape:showpageshadow="false"
+     inkscape:document-units="px"
+     inkscape:grid-bbox="true"
+     showgrid="false"
+     inkscape:current-layer="g1772"
+     inkscape:cy="37.212656"
+     inkscape:cx="23.821561"
+     inkscape:zoom="11.313708"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     borderopacity="0.25490196"
+     bordercolor="#666666"
+     pagecolor="#ffffff"
+     id="base"
+     fill="#729fcf"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:creator>
+          <cc:Agent>
+            <dc:title>Jakub Steiner</dc:title>
+          </cc:Agent>
+        </dc:creator>
+        <dc:source>http://jimmac.musichall.cz</dc:source>
+        <cc:license
+           rdf:resource="http://creativecommons.org/licenses/by-sa/2.0/" />
+      </cc:Work>
+      <cc:License
+         rdf:about="http://creativecommons.org/licenses/by-sa/2.0/">
+        <cc:permits
+           rdf:resource="http://web.resource.org/cc/Reproduction" />
+        <cc:permits
+           rdf:resource="http://web.resource.org/cc/Distribution" />
+        <cc:requires
+           rdf:resource="http://web.resource.org/cc/Notice" />
+        <cc:requires
+           rdf:resource="http://web.resource.org/cc/Attribution" />
+        <cc:permits
+           rdf:resource="http://web.resource.org/cc/DerivativeWorks" />
+        <cc:requires
+           rdf:resource="http://web.resource.org/cc/ShareAlike" />
+      </cc:License>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:groupmode="layer"
+     inkscape:label="Layer 1"
+     id="layer1">
+    <g
+       id="g1772">
+      <path
+         sodipodi:type="arc"
+         style="opacity:0.17112298;color:#000000;fill:url(#radialGradient2842);fill-opacity:1.0000000;fill-rule:evenodd;stroke:none;stroke-width:1.0000000;stroke-linecap:round;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:10.000000;stroke-dasharray:none;stroke-dashoffset:0.0000000;stroke-opacity:1.0000000;visibility:visible;display:inline;overflow:visible;"
+         id="path4475"
+         sodipodi:cx="24.130018"
+         sodipodi:cy="37.967922"
+         sodipodi:rx="16.528622"
+         sodipodi:ry="3.9332814"
+         d="M 40.658640 37.967922 A 16.528622 3.9332814 0 1 1  7.6013966,37.967922 A 16.528622 3.9332814 0 1 1  40.658640 37.967922 z"
+         transform="matrix(1.446431,0.000000,0.000000,1.519990,-10.97453,-17.75168)" />
+      <path
+         sodipodi:nodetypes="csscccscccscczzzz"
+         id="path2844"
+         d="M 18.627569,3.1435548 C 10.488439,3.1435548 3.8827682,9.7492259 3.8827682,17.888356 C 3.8827682,26.027486 10.488439,32.633158 18.627569,32.633158 C 22.107124,32.633158 25.178570,31.248765 27.701292,29.230511 C 27.495915,30.237392 27.623257,31.265879 28.457436,31.990436 L 39.421520,41.517846 C 40.654936,42.589175 42.508982,42.448806 43.580310,41.215389 C 44.651638,39.981971 44.511269,38.127927 43.277853,37.056599 L 32.313769,27.529188 C 31.642242,26.945909 30.820891,26.773219 30.007531,26.886466 C 31.994231,24.374044 33.372370,21.337663 33.372370,17.888356 C 33.372370,9.7492259 26.766699,3.1435548 18.627569,3.1435548 z M 18.551954,4.3697381 C 26.191413,4.3697381 31.843729,9.1586886 31.843729,17.661513 C 31.843729,26.336626 26.027039,30.953288 18.551954,30.953288 C 11.249005,30.953288 5.2601806,25.475196 5.2601806,17.661513 C 5.2601806,9.6774061 11.084819,4.3697380 18.551954,4.3697381 z "
+         style="opacity:1.0000000;color:#000000;fill:#dcdcdc;fill-opacity:1.0000000;fill-rule:evenodd;stroke:url(#linearGradient2852);stroke-width:2.0000010;stroke-linecap:round;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:10.000000;stroke-dasharray:none;stroke-dashoffset:0.0000000;stroke-opacity:1.0000000;visibility:visible;display:inline;overflow:visible;" />
+      <path
+         style="opacity:1.0000000;color:#000000;fill:#dcdcdc;fill-opacity:1.0000000;fill-rule:evenodd;stroke:none;stroke-width:1.0000004;stroke-linecap:round;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:10.000000;stroke-dasharray:none;stroke-dashoffset:0.0000000;stroke-opacity:1.0000000;visibility:visible;display:inline;overflow:visible;"
+         d="M 18.602905,3.0803551 C 10.437465,3.0803551 3.8104408,9.7073791 3.8104408,17.872819 C 3.8104408,26.038259 10.437465,32.665283 18.602905,32.665283 C 22.093708,32.665283 25.175082,31.276416 27.705960,29.251638 C 27.499919,30.261774 27.627672,31.293585 28.464547,32.020484 L 39.464073,41.578691 C 40.701476,42.653483 42.561515,42.512661 43.636306,41.275256 C 44.711097,40.037852 44.570274,38.177814 43.332871,37.103023 L 32.333346,27.544815 C 31.659648,26.959651 30.835642,26.786402 30.019653,26.900016 C 32.012775,24.379472 33.395369,21.333276 33.395369,17.872819 C 33.395369,9.7073791 26.768345,3.0803551 18.602905,3.0803551 z M 18.527046,6.2664243 C 24.808154,6.2664245 29.905864,11.364135 29.905864,17.645243 C 29.905864,23.926351 24.808154,29.024061 18.527046,29.024061 C 12.245938,29.024061 7.1482276,23.926351 7.1482276,17.645243 C 7.1482278,11.364135 12.245938,6.2664243 18.527046,6.2664243 z "
+         id="path4430" />
+      <path
+         style="opacity:1.0000000;color:#000000;fill:url(#linearGradient4446);fill-opacity:1.0000000;fill-rule:evenodd;stroke:none;stroke-width:1.0000000;stroke-linecap:round;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:10.000000;stroke-dasharray:none;stroke-dashoffset:0.0000000;stroke-opacity:1.0000000;visibility:visible;display:inline;overflow:visible;"
+         d="M 39.507004,41.577690 C 39.028332,39.304503 40.904334,36.766268 43.091057,36.789315 C 43.091057,36.789315 32.330690,27.531204 32.330690,27.531204 C 29.385899,27.474498 28.061188,29.803820 28.553876,32.131126 L 39.507004,41.577690 z "
+         id="path4438"
+         sodipodi:nodetypes="ccccc" />
+      <path
+         sodipodi:type="arc"
+         style="opacity:1.0000000;color:#000000;fill:none;fill-opacity:1.0000000;fill-rule:evenodd;stroke:url(#linearGradient2372);stroke-width:0.80273360;stroke-linecap:round;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:10.000000;stroke-dasharray:none;stroke-dashoffset:0.0000000;stroke-opacity:1.0000000;visibility:visible;display:inline;overflow:visible;"
+         id="path4450"
+         sodipodi:cx="17.500893"
+         sodipodi:cy="18.920233"
+         sodipodi:rx="11.048544"
+         sodipodi:ry="11.048544"
+         d="M 28.549437 18.920233 A 11.048544 11.048544 0 1 1  6.4523487,18.920233 A 11.048544 11.048544 0 1 1  28.549437 18.920233 z"
+         transform="matrix(1.245743,0.000000,0.000000,1.245743,-3.425346,-6.177033)" />
+      <ellipse
+         id="path4485"
+         style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:1;fill:url(#radialGradient4493);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none"
+         cx="18.504675"
+         cy="38.146122"
+         rx="7.8920522"
+         ry="2.8307779" />
+      <rect
+         style="opacity:0.43315509;color:#000000;fill:none;fill-opacity:1.0000000;fill-rule:evenodd;stroke:#ffffff;stroke-width:1.0000311;stroke-linecap:round;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:10.000000;stroke-dasharray:none;stroke-dashoffset:0.0000000;stroke-opacity:1.0000000;visibility:visible;display:inline;overflow:visible;"
+         id="rect4495"
+         width="19.048439"
+         height="4.4404783"
+         x="40.373337"
+         y="0.14086054"
+         rx="2.1366608"
+         ry="1.8879365"
+         transform="matrix(0.752986,0.658037,-0.648902,0.760872,0.000000,0.000000)" />
+      <path
+         sodipodi:type="arc"
+         style="color:#000000;fill:url(#radialGradient4460);fill-opacity:1.0000000;fill-rule:evenodd;stroke:#3063a3;stroke-width:0.71499395;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:10.000000;stroke-dashoffset:0.0000000;stroke-opacity:1.0000000;marker:none;marker-start:none;marker-mid:none;marker-end:none;visibility:visible;"
+         id="path4452"
+         sodipodi:cx="17.589281"
+         sodipodi:cy="18.478292"
+         sodipodi:rx="8.3085051"
+         sodipodi:ry="8.3085051"
+         d="M 25.897786 18.478292 A 8.3085051 8.3085051 0 1 1  9.2807760,18.478292 A 8.3085051 8.3085051 0 1 1  25.897786 18.478292 z"
+         transform="matrix(1.398614,0.000000,0.000000,1.398614,-6.224338,-8.298958)" />
+      <path
+         style="opacity:0.83422458;color:#000000;fill:url(#radialGradient4473);fill-opacity:1.0000000;fill-rule:evenodd;stroke:none;stroke-width:1.0000000;stroke-linecap:round;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:10.000000;stroke-dasharray:none;stroke-dashoffset:0.0000000;stroke-opacity:1.0000000;visibility:visible;display:inline;overflow:visible;"
+         d="M 18.156915,7.3966938 C 12.949325,7.3966938 8.7323681,11.613651 8.7323681,16.821241 C 8.7323681,18.325216 9.1526753,19.709014 9.7795400,20.971144 C 11.031920,21.432757 12.362297,21.746827 13.774307,21.746827 C 19.945262,21.746827 24.873589,16.885190 25.254413,10.809698 C 23.523449,8.7641668 21.044374,7.3966938 18.156915,7.3966938 z "
+         id="path4462" />
+      <g
+         transform="matrix(0.02264973,0,0,0.02609408,48.046283,48.655279)"
+         id="g6-3"
+         style="opacity:0.4;fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:1">
+        <g
+           id="g8-6"
+           style="fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:1">
+          <path
+             inkscape:connector-curvature="0"
+             d="m -1627.0838,-595.53083 c 10.4,11.3 16.1,26 16.1,41.3 l 0,449.7 c 0,27.099997 32.7,40.799997 52,21.799997 l 125.5,-143.799997 c 16.8,-20.1 26,-30.1 26,-50.1 l 0,-277.4 c 0,-15.3 5.8,-30 16.1,-41.3 l 360,-390.6 c 27,-29.29997 6.2,-76.79997 -33.7,-76.79997 l -888.3,0 c -39.9,-0.1 -60.7,47.3 -33.7,76.69997 l 360,390.5 z"
+             id="path10-7"
+             style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:82.35282898;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        </g>
+        <g
+           id="g12-5"
+           style="fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
+        <g
+           id="g14-3"
+           style="fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
+        <g
+           id="g16-5"
+           style="fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
+        <g
+           id="g18-6"
+           style="fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
+        <g
+           id="g20-2"
+           style="fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
+        <g
+           id="g22-9"
+           style="fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
+        <g
+           id="g24-1"
+           style="fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
+        <g
+           id="g26-2"
+           style="fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
+        <g
+           id="g28-7"
+           style="fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
+        <g
+           id="g30-0"
+           style="fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
+        <g
+           id="g32-9"
+           style="fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
+        <g
+           id="g34-3"
+           style="fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
+        <g
+           id="g36-6"
+           style="fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
+        <g
+           id="g38-0"
+           style="fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
+        <g
+           id="g40-6"
+           style="fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
+      </g>
+      <g
+         transform="matrix(0.0233822,0,0,0.02642586,47.842749,48.274221)"
+         id="g6"
+         style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-width:70.51978302;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">
+        <g
+           id="g8"
+           style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-width:70.51978302;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">
+          <path
+             inkscape:connector-curvature="0"
+             d="m -1627.0838,-595.53083 c 10.4,11.3 16.1,26 16.1,41.3 l 0,449.7 c 0,27.099997 32.7,40.799997 52,21.799997 l 125.5,-143.799997 c 16.8,-20.1 26,-30.1 26,-50.1 l 0,-277.4 c 0,-15.3 5.8,-30 16.1,-41.3 l 360,-390.6 c 27,-29.29997 6.2,-76.79997 -33.7,-76.79997 l -888.3,0 c -39.9,-0.1 -60.7,47.3 -33.7,76.69997 l 360,390.5 z"
+             id="path10"
+             style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-width:70.51978302;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        </g>
+        <g
+           id="g12"
+           style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-width:70.51978302;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        <g
+           id="g14"
+           style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-width:70.51978302;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        <g
+           id="g16"
+           style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-width:70.51978302;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        <g
+           id="g18"
+           style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-width:70.51978302;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        <g
+           id="g20"
+           style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-width:70.51978302;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        <g
+           id="g22"
+           style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-width:70.51978302;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        <g
+           id="g24"
+           style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-width:70.51978302;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        <g
+           id="g26"
+           style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-width:70.51978302;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        <g
+           id="g28"
+           style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-width:70.51978302;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        <g
+           id="g30"
+           style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-width:70.51978302;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        <g
+           id="g32"
+           style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-width:70.51978302;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        <g
+           id="g34"
+           style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-width:70.51978302;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        <g
+           id="g36"
+           style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-width:70.51978302;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        <g
+           id="g38"
+           style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-width:70.51978302;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        <g
+           id="g40"
+           style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-width:70.51978302;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      </g>
+    </g>
+  </g>
+</svg>
--- a/src/assets/resources/images/filter.svg
+++ b/src/assets/resources/images/filter.svg
@ -0,0 +1,708 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   sodipodi:docname="filter.svg"
+   inkscape:version="0.91 r13725"
+   sodipodi:version="0.32"
+   id="svg11300"
+   height="48px"
+   width="48px"
+   inkscape:output_extension="org.inkscape.output.svg.inkscape"
+   version="1.1">
+  <defs
+     id="defs3">
+    <linearGradient
+       id="linearGradient2846">
+      <stop
+         id="stop2848"
+         offset="0.0000000"
+         style="stop-color:#8a8a8a;stop-opacity:1.0000000;" />
+      <stop
+         id="stop2850"
+         offset="1.0000000"
+         style="stop-color:#484848;stop-opacity:1.0000000;" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient2366">
+      <stop
+         id="stop2368"
+         offset="0"
+         style="stop-color:#ffffff;stop-opacity:1;" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0.21904762;"
+         offset="0.50000000"
+         id="stop2374" />
+      <stop
+         id="stop2370"
+         offset="1.0000000"
+         style="stop-color:#ffffff;stop-opacity:1.0000000;" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient4467">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0"
+         id="stop4469" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0.24761905;"
+         offset="1.0000000"
+         id="stop4471" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient4454">
+      <stop
+         style="stop-color:#729fcf;stop-opacity:0.20784314;"
+         offset="0.0000000"
+         id="stop4456" />
+      <stop
+         style="stop-color:#729fcf;stop-opacity:0.67619050;"
+         offset="1.0000000"
+         id="stop4458" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient4440">
+      <stop
+         style="stop-color:#7d7d7d;stop-opacity:1;"
+         offset="0"
+         id="stop4442" />
+      <stop
+         id="stop4448"
+         offset="0.50000000"
+         style="stop-color:#b1b1b1;stop-opacity:1.0000000;" />
+      <stop
+         style="stop-color:#686868;stop-opacity:1.0000000;"
+         offset="1.0000000"
+         id="stop4444" />
+    </linearGradient>
+    <linearGradient
+       gradientTransform="matrix(1.5770403,0,0,1.4373405,-85.325285,-112.88055)"
+       y2="78.206215"
+       x2="71.53405"
+       y1="124.11652"
+       x1="71.288956"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient2306"
+       xlink:href="#linearGradient5075"
+       inkscape:collect="always" />
+    <linearGradient
+       id="linearGradient3340">
+      <stop
+         id="stop3342"
+         offset="0"
+         style="stop-color:#ffffff;stop-opacity:1;" />
+      <stop
+         id="stop3344"
+         offset="1"
+         style="stop-color:#ffffff;stop-opacity:0.62886596;" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient5075">
+      <stop
+         id="stop5077"
+         offset="0"
+         style="stop-color:#adb0a8;stop-opacity:1;" />
+      <stop
+         id="stop5079"
+         offset="1"
+         style="stop-color:#464744;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient2584">
+      <stop
+         id="stop2586"
+         offset="0"
+         style="stop-color:#000000;stop-opacity:1;" />
+      <stop
+         id="stop2588"
+         offset="1"
+         style="stop-color:#ffffff;stop-opacity:0;" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient2684">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0"
+         id="stop2686" />
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="1"
+         id="stop2688" />
+    </linearGradient>
+    <linearGradient
+       y2="52.510574"
+       x2="14"
+       y1="15.291994"
+       x1="15.089521"
+       gradientTransform="translate(-4e-4,-9.426e-2)"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient2864"
+       xlink:href="#linearGradient3081"
+       inkscape:collect="always" />
+    <linearGradient
+       y2="93.204849"
+       x2="169"
+       y1="110.33805"
+       x1="169"
+       gradientTransform="matrix(1,0,0,1.004384,-145.0004,-71.4625)"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient2862"
+       xlink:href="#linearGradient2697"
+       inkscape:collect="always" />
+    <radialGradient
+       r="11"
+       fy="100.20107"
+       fx="169.77171"
+       cy="100.20107"
+       cx="169.77171"
+       gradientTransform="matrix(3.562309e-6,-1.07205,1.992104,-1.250658e-6,-175.6121,212.6949)"
+       gradientUnits="userSpaceOnUse"
+       id="radialGradient2860"
+       xlink:href="#linearGradient2679"
+       inkscape:collect="always" />
+    <linearGradient
+       y2="105.49083"
+       x2="174.74524"
+       y1="84.263489"
+       x1="174.83363"
+       gradientTransform="matrix(1.103262,0,0,1.054917,-163.1228,-76.31138)"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient2858"
+       xlink:href="#linearGradient2817"
+       inkscape:collect="always" />
+    <radialGradient
+       r="11"
+       fy="100.20107"
+       fx="169.77171"
+       cy="100.20107"
+       cx="169.77171"
+       gradientTransform="matrix(3.562309e-6,-1.07205,1.992104,-1.250658e-6,-175.6121,186.6949)"
+       gradientUnits="userSpaceOnUse"
+       id="radialGradient2831"
+       xlink:href="#linearGradient2679"
+       inkscape:collect="always" />
+    <linearGradient
+       y2="52.510574"
+       x2="14"
+       y1="15.291994"
+       x1="15.089521"
+       gradientTransform="translate(-4e-4,-26.09426)"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient2825"
+       xlink:href="#linearGradient3081"
+       inkscape:collect="always" />
+    <linearGradient
+       y2="105.49083"
+       x2="174.74524"
+       y1="84.263489"
+       x1="174.83363"
+       gradientTransform="matrix(1.103262,0,0,1.054917,-163.1228,-76.31138)"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient2823"
+       xlink:href="#linearGradient2817"
+       inkscape:collect="always" />
+    <radialGradient
+       r="11"
+       fy="100.20107"
+       fx="169.77171"
+       cy="100.20107"
+       cx="169.77171"
+       gradientTransform="matrix(3.562309e-6,-1.07205,1.992104,-1.250658e-6,-175.6121,212.6949)"
+       gradientUnits="userSpaceOnUse"
+       id="radialGradient2809"
+       xlink:href="#linearGradient2679"
+       inkscape:collect="always" />
+    <linearGradient
+       y2="93.204849"
+       x2="169"
+       y1="110.33805"
+       x1="169"
+       gradientTransform="translate(-145.0004,-97.0943)"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient2806"
+       xlink:href="#linearGradient2697"
+       inkscape:collect="always" />
+    <linearGradient
+       y2="93.204849"
+       x2="169"
+       y1="110.33805"
+       x1="169"
+       gradientTransform="matrix(1,0,0,1.004384,-145.0004,-71.4625)"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient2803"
+       xlink:href="#linearGradient2697"
+       inkscape:collect="always" />
+    <linearGradient
+       y2="52.510574"
+       x2="14"
+       y1="15.291994"
+       x1="15.089521"
+       gradientTransform="translate(-4e-4,-9.426e-2)"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient2800"
+       xlink:href="#linearGradient3081"
+       inkscape:collect="always" />
+    <linearGradient
+       y2="52.510574"
+       x2="14"
+       y1="15.291994"
+       x1="15.089521"
+       gradientTransform="translate(133,70.99999)"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient2797"
+       xlink:href="#linearGradient3081"
+       inkscape:collect="always" />
+    <linearGradient
+       y2="93.204849"
+       x2="169"
+       y1="110.33805"
+       x1="169"
+       gradientTransform="translate(-12,0)"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient2795"
+       xlink:href="#linearGradient2697"
+       inkscape:collect="always" />
+    <linearGradient
+       y2="93.204849"
+       x2="169"
+       y1="110.33805"
+       x1="169"
+       gradientTransform="translate(-12,0)"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient2793"
+       xlink:href="#linearGradient2697"
+       inkscape:collect="always" />
+    <radialGradient
+       r="11"
+       fy="100.20107"
+       fx="169.77171"
+       cy="100.20107"
+       cx="169.77171"
+       gradientTransform="matrix(3.562309e-6,-1.07205,1.992104,-1.250658e-6,-42.61165,283.7891)"
+       gradientUnits="userSpaceOnUse"
+       id="radialGradient2791"
+       xlink:href="#linearGradient2679"
+       inkscape:collect="always" />
+    <linearGradient
+       y2="52.510574"
+       x2="14"
+       y1="15.291994"
+       x1="15.089521"
+       gradientTransform="translate(133,70.99999)"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient2753"
+       xlink:href="#linearGradient3081"
+       inkscape:collect="always" />
+    <linearGradient
+       y2="93.204849"
+       x2="169"
+       y1="110.33805"
+       x1="169"
+       gradientTransform="translate(-12,0)"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient2751"
+       xlink:href="#linearGradient2697"
+       inkscape:collect="always" />
+    <radialGradient
+       r="11"
+       fy="100.20107"
+       fx="169.77171"
+       cy="100.20107"
+       cx="169.77171"
+       gradientTransform="matrix(3.562309e-6,-1.07205,1.992104,-1.250658e-6,-42.61165,283.7891)"
+       gradientUnits="userSpaceOnUse"
+       id="radialGradient2749"
+       xlink:href="#linearGradient2679"
+       inkscape:collect="always" />
+    <radialGradient
+       r="15.644737"
+       fy="36.421127"
+       fx="24.837126"
+       cy="36.421127"
+       cx="24.837126"
+       gradientTransform="matrix(1,0,0,0.536723,-1.44832e-12,16.87306)"
+       gradientUnits="userSpaceOnUse"
+       id="radialGradient2747"
+       xlink:href="#linearGradient8662"
+       inkscape:collect="always" />
+    <radialGradient
+       r="15.644737"
+       fy="36.421127"
+       fx="24.837126"
+       cy="36.421127"
+       cx="24.837126"
+       gradientTransform="matrix(1,0,0,0.536723,4.579205e-13,16.87306)"
+       gradientUnits="userSpaceOnUse"
+       id="radialGradient2745"
+       xlink:href="#linearGradient8662"
+       inkscape:collect="always" />
+    <linearGradient
+       y2="52.510574"
+       x2="14"
+       y1="15.291994"
+       x1="15.089521"
+       gradientTransform="translate(133,70.99999)"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient2733"
+       xlink:href="#linearGradient3081"
+       inkscape:collect="always" />
+    <linearGradient
+       y2="93.204849"
+       x2="169"
+       y1="110.33805"
+       x1="169"
+       gradientTransform="translate(-12,0)"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient2731"
+       xlink:href="#linearGradient2697"
+       inkscape:collect="always" />
+    <radialGradient
+       r="11"
+       fy="100.20107"
+       fx="169.77171"
+       cy="100.20107"
+       cx="169.77171"
+       gradientTransform="matrix(3.562309e-6,-1.07205,1.992104,-1.250658e-6,-42.61165,283.7891)"
+       gradientUnits="userSpaceOnUse"
+       id="radialGradient2729"
+       xlink:href="#linearGradient2679"
+       inkscape:collect="always" />
+    <radialGradient
+       r="15.644737"
+       fy="36.421127"
+       fx="24.837126"
+       cy="36.421127"
+       cx="24.837126"
+       gradientTransform="matrix(1,0,0,0.536723,-1.432388e-12,16.87306)"
+       gradientUnits="userSpaceOnUse"
+       id="radialGradient2727"
+       xlink:href="#linearGradient8662"
+       inkscape:collect="always" />
+    <radialGradient
+       r="15.644737"
+       fy="36.421127"
+       fx="24.837126"
+       cy="36.421127"
+       cx="24.837126"
+       gradientTransform="matrix(1,0,0,0.536723,4.526469e-13,16.87306)"
+       gradientUnits="userSpaceOnUse"
+       id="radialGradient2725"
+       xlink:href="#linearGradient8662"
+       inkscape:collect="always" />
+    <radialGradient
+       r="15.644737"
+       fy="36.421127"
+       fx="24.837126"
+       cy="36.421127"
+       cx="24.837126"
+       gradientTransform="matrix(1,0,0,0.536723,-1.416456e-12,16.87306)"
+       gradientUnits="userSpaceOnUse"
+       id="radialGradient2139"
+       xlink:href="#linearGradient8662"
+       inkscape:collect="always" />
+    <radialGradient
+       r="15.644737"
+       fy="36.421127"
+       fx="24.837126"
+       cy="36.421127"
+       cx="24.837126"
+       gradientTransform="matrix(1,0,0,0.536723,4.473733e-13,16.87306)"
+       gradientUnits="userSpaceOnUse"
+       id="radialGradient2137"
+       xlink:href="#linearGradient8662"
+       inkscape:collect="always" />
+    <linearGradient
+       y2="52.510574"
+       x2="14"
+       y1="15.291994"
+       x1="15.089521"
+       gradientTransform="translate(133,70.99999)"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient2124"
+       xlink:href="#linearGradient3081"
+       inkscape:collect="always" />
+    <linearGradient
+       y2="93.204849"
+       x2="169"
+       y1="110.33805"
+       x1="169"
+       gradientTransform="translate(-12,0)"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient2122"
+       xlink:href="#linearGradient2697"
+       inkscape:collect="always" />
+    <radialGradient
+       r="11"
+       fy="100.20107"
+       fx="169.77171"
+       cy="100.20107"
+       cx="169.77171"
+       gradientTransform="matrix(3.562309e-6,-1.07205,1.992104,-1.250658e-6,-42.61165,283.7891)"
+       gradientUnits="userSpaceOnUse"
+       id="radialGradient2112"
+       xlink:href="#linearGradient2679"
+       inkscape:collect="always" />
+    <linearGradient
+       id="linearGradient8662"
+       inkscape:collect="always">
+      <stop
+         id="stop8664"
+         offset="0"
+         style="stop-color:#000000;stop-opacity:1;" />
+      <stop
+         id="stop8666"
+         offset="1"
+         style="stop-color:#000000;stop-opacity:0;" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3081"
+       inkscape:collect="always">
+      <stop
+         id="stop3083"
+         offset="0"
+         style="stop-color:#ffffff;stop-opacity:1;" />
+      <stop
+         id="stop3085"
+         offset="1"
+         style="stop-color:#ffffff;stop-opacity:0;" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient2679">
+      <stop
+         style="stop-color:#f7f7f7;stop-opacity:1"
+         offset="0"
+         id="stop2681" />
+      <stop
+         style="stop-color:#ccd0c7;stop-opacity:1"
+         offset="1"
+         id="stop2683" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient2697">
+      <stop
+         style="stop-color:#babdb6"
+         offset="0"
+         id="stop2699" />
+      <stop
+         style="stop-color:#555753"
+         offset="1"
+         id="stop2701" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient2584-8">
+      <stop
+         id="stop2586-4"
+         offset="0"
+         style="stop-color:#000000;stop-opacity:1;" />
+      <stop
+         id="stop2588-8"
+         offset="1"
+         style="stop-color:#ffffff;stop-opacity:0;" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient2817">
+      <stop
+         id="stop2819"
+         offset="0"
+         style="stop-color:#000000;stop-opacity:1;" />
+      <stop
+         id="stop2821"
+         offset="1"
+         style="stop-color:#ffffff;stop-opacity:0.48453608;" />
+    </linearGradient>
+  </defs>
+  <sodipodi:namedview
+     stroke="#3465a4"
+     inkscape:window-y="48"
+     inkscape:window-x="130"
+     inkscape:window-height="1752"
+     inkscape:window-width="3070"
+     inkscape:showpageshadow="false"
+     inkscape:document-units="px"
+     inkscape:grid-bbox="true"
+     showgrid="false"
+     inkscape:current-layer="layer1"
+     inkscape:cy="24.580209"
+     inkscape:cx="-23.904288"
+     inkscape:zoom="11.313708"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     borderopacity="0.25490196"
+     bordercolor="#666666"
+     pagecolor="#ffffff"
+     id="base"
+     fill="#729fcf"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:creator>
+          <cc:Agent>
+            <dc:title>Jakub Steiner</dc:title>
+          </cc:Agent>
+        </dc:creator>
+        <dc:source>http://jimmac.musichall.cz</dc:source>
+        <cc:license
+           rdf:resource="http://creativecommons.org/licenses/by-sa/2.0/" />
+      </cc:Work>
+      <cc:License
+         rdf:about="http://creativecommons.org/licenses/by-sa/2.0/">
+        <cc:permits
+           rdf:resource="http://web.resource.org/cc/Reproduction" />
+        <cc:permits
+           rdf:resource="http://web.resource.org/cc/Distribution" />
+        <cc:requires
+           rdf:resource="http://web.resource.org/cc/Notice" />
+        <cc:requires
+           rdf:resource="http://web.resource.org/cc/Attribution" />
+        <cc:permits
+           rdf:resource="http://web.resource.org/cc/DerivativeWorks" />
+        <cc:requires
+           rdf:resource="http://web.resource.org/cc/ShareAlike" />
+      </cc:License>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:groupmode="layer"
+     inkscape:label="Layer 1"
+     id="layer1">
+    <g
+       transform="matrix(0.04112758,0,0,0.04208992,87.449849,49.200049)"
+       id="g6-3"
+       style="opacity:0.4;fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:1">
+      <g
+         id="g8-6"
+         style="fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:1">
+        <path
+           inkscape:connector-curvature="0"
+           d="m -1627.0838,-595.53083 c 10.4,11.3 16.1,26 16.1,41.3 l 0,449.7 c 0,27.099997 32.7,40.799997 52,21.799997 l 125.5,-143.799997 c 16.8,-20.1 26,-30.1 26,-50.1 l 0,-277.4 c 0,-15.3 5.8,-30 16.1,-41.3 l 360,-390.6 c 27,-29.29997 6.2,-76.79997 -33.7,-76.79997 l -888.3,0 c -39.9,-0.1 -60.7,47.3 -33.7,76.69997 l 360,390.5 z"
+           id="path10-7"
+           style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:82.35282898;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      </g>
+      <g
+         id="g12-5"
+         style="fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
+      <g
+         id="g14-3"
+         style="fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
+      <g
+         id="g16-5"
+         style="fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
+      <g
+         id="g18-6"
+         style="fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
+      <g
+         id="g20-2"
+         style="fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
+      <g
+         id="g22-9"
+         style="fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
+      <g
+         id="g24-1"
+         style="fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
+      <g
+         id="g26-2"
+         style="fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
+      <g
+         id="g28-7"
+         style="fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
+      <g
+         id="g30-0"
+         style="fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
+      <g
+         id="g32-9"
+         style="fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
+      <g
+         id="g34-3"
+         style="fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
+      <g
+         id="g36-6"
+         style="fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
+      <g
+         id="g38-0"
+         style="fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
+      <g
+         id="g40-6"
+         style="fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
+    </g>
+    <g
+       transform="matrix(0.04245758,0,0,0.04262509,87.080268,48.585402)"
+       id="g6"
+       style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:70.51978539;stroke-miterlimit:4;stroke-dasharray:none">
+      <g
+         id="g8"
+         style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:70.51978539;stroke-miterlimit:4;stroke-dasharray:none">
+        <path
+           inkscape:connector-curvature="0"
+           d="m -1627.0838,-595.53083 c 10.4,11.3 16.1,26 16.1,41.3 l 0,449.7 c 0,27.099997 32.7,40.799997 52,21.799997 l 125.5,-143.799997 c 16.8,-20.1 26,-30.1 26,-50.1 l 0,-277.4 c 0,-15.3 5.8,-30 16.1,-41.3 l 360,-390.6 c 27,-29.29997 6.2,-76.79997 -33.7,-76.79997 l -888.3,0 c -39.9,-0.1 -60.7,47.3 -33.7,76.69997 l 360,390.5 z"
+           id="path10"
+           style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-width:70.51978539;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      </g>
+      <g
+         id="g12"
+         style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:70.51978539;stroke-miterlimit:4;stroke-dasharray:none" />
+      <g
+         id="g14"
+         style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:70.51978539;stroke-miterlimit:4;stroke-dasharray:none" />
+      <g
+         id="g16"
+         style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:70.51978539;stroke-miterlimit:4;stroke-dasharray:none" />
+      <g
+         id="g18"
+         style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:70.51978539;stroke-miterlimit:4;stroke-dasharray:none" />
+      <g
+         id="g20"
+         style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:70.51978539;stroke-miterlimit:4;stroke-dasharray:none" />
+      <g
+         id="g22"
+         style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:70.51978539;stroke-miterlimit:4;stroke-dasharray:none" />
+      <g
+         id="g24"
+         style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:70.51978539;stroke-miterlimit:4;stroke-dasharray:none" />
+      <g
+         id="g26"
+         style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:70.51978539;stroke-miterlimit:4;stroke-dasharray:none" />
+      <g
+         id="g28"
+         style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:70.51978539;stroke-miterlimit:4;stroke-dasharray:none" />
+      <g
+         id="g30"
+         style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:70.51978539;stroke-miterlimit:4;stroke-dasharray:none" />
+      <g
+         id="g32"
+         style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:70.51978539;stroke-miterlimit:4;stroke-dasharray:none" />
+      <g
+         id="g34"
+         style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:70.51978539;stroke-miterlimit:4;stroke-dasharray:none" />
+      <g
+         id="g36"
+         style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:70.51978539;stroke-miterlimit:4;stroke-dasharray:none" />
+      <g
+         id="g38"
+         style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:70.51978539;stroke-miterlimit:4;stroke-dasharray:none" />
+      <g
+         id="g40"
+         style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:70.51978539;stroke-miterlimit:4;stroke-dasharray:none" />
+    </g>
+    <g
+       inkscape:r_cy="true"
+       inkscape:r_cx="true"
+       style="display:inline"
+       inkscape:label="Layer 1"
+       id="layer1-4"
+       transform="matrix(0.52129778,0,0,0.55541254,0.16640648,22.45761)" />
+  </g>
+</svg>
--- a/src/assets/resources/images/inspect.svg
+++ b/src/assets/resources/images/inspect.svg
@ -0,0 +1,312 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://web.resource.org/cc/"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://inkscape.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   sodipodi:docname="system-search.svg"
+   sodipodi:docbase="/home/tigert/cvs/freedesktop.org/tango-icon-theme/scalable/actions"
+   inkscape:version="0.43+devel"
+   sodipodi:version="0.32"
+   id="svg11300"
+   height="48px"
+   width="48px"
+   inkscape:output_extension="org.inkscape.output.svg.inkscape">
+  <defs
+     id="defs3">
+    <linearGradient
+       id="linearGradient2846">
+      <stop
+         id="stop2848"
+         offset="0.0000000"
+         style="stop-color:#8a8a8a;stop-opacity:1.0000000;" />
+      <stop
+         id="stop2850"
+         offset="1.0000000"
+         style="stop-color:#484848;stop-opacity:1.0000000;" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient2366">
+      <stop
+         id="stop2368"
+         offset="0"
+         style="stop-color:#ffffff;stop-opacity:1;" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0.21904762;"
+         offset="0.50000000"
+         id="stop2374" />
+      <stop
+         id="stop2370"
+         offset="1.0000000"
+         style="stop-color:#ffffff;stop-opacity:1.0000000;" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient4487">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0"
+         id="stop4489" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0;"
+         offset="1"
+         id="stop4491" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient4477">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop4479" />
+      <stop
+         style="stop-color:#000000;stop-opacity:0;"
+         offset="1"
+         id="stop4481" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient4467">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0"
+         id="stop4469" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0.24761905;"
+         offset="1.0000000"
+         id="stop4471" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient4454">
+      <stop
+         style="stop-color:#729fcf;stop-opacity:0.20784314;"
+         offset="0.0000000"
+         id="stop4456" />
+      <stop
+         style="stop-color:#729fcf;stop-opacity:0.67619050;"
+         offset="1.0000000"
+         id="stop4458" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient4440">
+      <stop
+         style="stop-color:#7d7d7d;stop-opacity:1;"
+         offset="0"
+         id="stop4442" />
+      <stop
+         id="stop4448"
+         offset="0.50000000"
+         style="stop-color:#b1b1b1;stop-opacity:1.0000000;" />
+      <stop
+         style="stop-color:#686868;stop-opacity:1.0000000;"
+         offset="1.0000000"
+         id="stop4444" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4440"
+       id="linearGradient4446"
+       x1="30.656250"
+       y1="34.000000"
+       x2="33.218750"
+       y2="31.062500"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1.334593,0.000000,0.000000,1.291292,-6.973842,-7.460658)" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4454"
+       id="radialGradient4460"
+       cx="18.240929"
+       cy="21.817987"
+       fx="18.240929"
+       fy="21.817987"
+       r="8.3085051"
+       gradientUnits="userSpaceOnUse" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4467"
+       id="radialGradient4473"
+       cx="15.414371"
+       cy="13.078408"
+       fx="15.414371"
+       fy="13.078408"
+       r="6.6562500"
+       gradientTransform="matrix(2.592963,-7.746900e-24,-5.714443e-24,2.252104,-25.05975,-18.94100)"
+       gradientUnits="userSpaceOnUse" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4487"
+       id="radialGradient4493"
+       cx="24.130018"
+       cy="37.967922"
+       fx="24.130018"
+       fy="37.967922"
+       r="16.528622"
+       gradientTransform="matrix(1.000000,0.000000,0.000000,0.237968,3.152859e-15,28.93278)"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       gradientUnits="userSpaceOnUse"
+       y2="25.743469"
+       x2="17.500893"
+       y1="13.602121"
+       x1="18.292673"
+       id="linearGradient2372"
+       xlink:href="#linearGradient2366"
+       inkscape:collect="always" />
+    <radialGradient
+       r="16.528622"
+       fy="37.967922"
+       fx="24.130018"
+       cy="37.967922"
+       cx="24.130018"
+       gradientTransform="matrix(1.000000,0.000000,0.000000,0.237968,-2.471981e-16,28.93278)"
+       gradientUnits="userSpaceOnUse"
+       id="radialGradient2842"
+       xlink:href="#linearGradient4477"
+       inkscape:collect="always" />
+    <linearGradient
+       gradientUnits="userSpaceOnUse"
+       y2="30.557772"
+       x2="31.335964"
+       y1="26.580296"
+       x1="27.366341"
+       id="linearGradient2852"
+       xlink:href="#linearGradient2846"
+       inkscape:collect="always" />
+  </defs>
+  <sodipodi:namedview
+     stroke="#3465a4"
+     inkscape:window-y="187"
+     inkscape:window-x="239"
+     inkscape:window-height="754"
+     inkscape:window-width="691"
+     inkscape:showpageshadow="false"
+     inkscape:document-units="px"
+     inkscape:grid-bbox="true"
+     showgrid="false"
+     inkscape:current-layer="layer1"
+     inkscape:cy="23.070520"
+     inkscape:cx="23.821561"
+     inkscape:zoom="11.313708"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     borderopacity="0.25490196"
+     bordercolor="#666666"
+     pagecolor="#ffffff"
+     id="base"
+     fill="#729fcf" />
+  <metadata
+     id="metadata4">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:creator>
+          <cc:Agent>
+            <dc:title>Jakub Steiner</dc:title>
+          </cc:Agent>
+        </dc:creator>
+        <dc:source>http://jimmac.musichall.cz</dc:source>
+        <cc:license
+           rdf:resource="http://creativecommons.org/licenses/by-sa/2.0/" />
+      </cc:Work>
+      <cc:License
+         rdf:about="http://creativecommons.org/licenses/by-sa/2.0/">
+        <cc:permits
+           rdf:resource="http://web.resource.org/cc/Reproduction" />
+        <cc:permits
+           rdf:resource="http://web.resource.org/cc/Distribution" />
+        <cc:requires
+           rdf:resource="http://web.resource.org/cc/Notice" />
+        <cc:requires
+           rdf:resource="http://web.resource.org/cc/Attribution" />
+        <cc:permits
+           rdf:resource="http://web.resource.org/cc/DerivativeWorks" />
+        <cc:requires
+           rdf:resource="http://web.resource.org/cc/ShareAlike" />
+      </cc:License>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:groupmode="layer"
+     inkscape:label="Layer 1"
+     id="layer1">
+    <g
+       id="g1772">
+      <path
+         sodipodi:type="arc"
+         style="opacity:0.17112298;color:#000000;fill:url(#radialGradient2842);fill-opacity:1.0000000;fill-rule:evenodd;stroke:none;stroke-width:1.0000000;stroke-linecap:round;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:10.000000;stroke-dasharray:none;stroke-dashoffset:0.0000000;stroke-opacity:1.0000000;visibility:visible;display:inline;overflow:visible;"
+         id="path4475"
+         sodipodi:cx="24.130018"
+         sodipodi:cy="37.967922"
+         sodipodi:rx="16.528622"
+         sodipodi:ry="3.9332814"
+         d="M 40.658640 37.967922 A 16.528622 3.9332814 0 1 1  7.6013966,37.967922 A 16.528622 3.9332814 0 1 1  40.658640 37.967922 z"
+         transform="matrix(1.446431,0.000000,0.000000,1.519990,-10.97453,-17.75168)" />
+      <path
+         sodipodi:nodetypes="csscccscccscczzzz"
+         id="path2844"
+         d="M 18.627569,3.1435548 C 10.488439,3.1435548 3.8827682,9.7492259 3.8827682,17.888356 C 3.8827682,26.027486 10.488439,32.633158 18.627569,32.633158 C 22.107124,32.633158 25.178570,31.248765 27.701292,29.230511 C 27.495915,30.237392 27.623257,31.265879 28.457436,31.990436 L 39.421520,41.517846 C 40.654936,42.589175 42.508982,42.448806 43.580310,41.215389 C 44.651638,39.981971 44.511269,38.127927 43.277853,37.056599 L 32.313769,27.529188 C 31.642242,26.945909 30.820891,26.773219 30.007531,26.886466 C 31.994231,24.374044 33.372370,21.337663 33.372370,17.888356 C 33.372370,9.7492259 26.766699,3.1435548 18.627569,3.1435548 z M 18.551954,4.3697381 C 26.191413,4.3697381 31.843729,9.1586886 31.843729,17.661513 C 31.843729,26.336626 26.027039,30.953288 18.551954,30.953288 C 11.249005,30.953288 5.2601806,25.475196 5.2601806,17.661513 C 5.2601806,9.6774061 11.084819,4.3697380 18.551954,4.3697381 z "
+         style="opacity:1.0000000;color:#000000;fill:#dcdcdc;fill-opacity:1.0000000;fill-rule:evenodd;stroke:url(#linearGradient2852);stroke-width:2.0000010;stroke-linecap:round;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:10.000000;stroke-dasharray:none;stroke-dashoffset:0.0000000;stroke-opacity:1.0000000;visibility:visible;display:inline;overflow:visible;" />
+      <path
+         style="opacity:1.0000000;color:#000000;fill:#dcdcdc;fill-opacity:1.0000000;fill-rule:evenodd;stroke:none;stroke-width:1.0000004;stroke-linecap:round;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:10.000000;stroke-dasharray:none;stroke-dashoffset:0.0000000;stroke-opacity:1.0000000;visibility:visible;display:inline;overflow:visible;"
+         d="M 18.602905,3.0803551 C 10.437465,3.0803551 3.8104408,9.7073791 3.8104408,17.872819 C 3.8104408,26.038259 10.437465,32.665283 18.602905,32.665283 C 22.093708,32.665283 25.175082,31.276416 27.705960,29.251638 C 27.499919,30.261774 27.627672,31.293585 28.464547,32.020484 L 39.464073,41.578691 C 40.701476,42.653483 42.561515,42.512661 43.636306,41.275256 C 44.711097,40.037852 44.570274,38.177814 43.332871,37.103023 L 32.333346,27.544815 C 31.659648,26.959651 30.835642,26.786402 30.019653,26.900016 C 32.012775,24.379472 33.395369,21.333276 33.395369,17.872819 C 33.395369,9.7073791 26.768345,3.0803551 18.602905,3.0803551 z M 18.527046,6.2664243 C 24.808154,6.2664245 29.905864,11.364135 29.905864,17.645243 C 29.905864,23.926351 24.808154,29.024061 18.527046,29.024061 C 12.245938,29.024061 7.1482276,23.926351 7.1482276,17.645243 C 7.1482278,11.364135 12.245938,6.2664243 18.527046,6.2664243 z "
+         id="path4430" />
+      <path
+         style="opacity:1.0000000;color:#000000;fill:url(#linearGradient4446);fill-opacity:1.0000000;fill-rule:evenodd;stroke:none;stroke-width:1.0000000;stroke-linecap:round;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:10.000000;stroke-dasharray:none;stroke-dashoffset:0.0000000;stroke-opacity:1.0000000;visibility:visible;display:inline;overflow:visible;"
+         d="M 39.507004,41.577690 C 39.028332,39.304503 40.904334,36.766268 43.091057,36.789315 C 43.091057,36.789315 32.330690,27.531204 32.330690,27.531204 C 29.385899,27.474498 28.061188,29.803820 28.553876,32.131126 L 39.507004,41.577690 z "
+         id="path4438"
+         sodipodi:nodetypes="ccccc" />
+      <path
+         sodipodi:type="arc"
+         style="opacity:1.0000000;color:#000000;fill:none;fill-opacity:1.0000000;fill-rule:evenodd;stroke:url(#linearGradient2372);stroke-width:0.80273360;stroke-linecap:round;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:10.000000;stroke-dasharray:none;stroke-dashoffset:0.0000000;stroke-opacity:1.0000000;visibility:visible;display:inline;overflow:visible;"
+         id="path4450"
+         sodipodi:cx="17.500893"
+         sodipodi:cy="18.920233"
+         sodipodi:rx="11.048544"
+         sodipodi:ry="11.048544"
+         d="M 28.549437 18.920233 A 11.048544 11.048544 0 1 1  6.4523487,18.920233 A 11.048544 11.048544 0 1 1  28.549437 18.920233 z"
+         transform="matrix(1.245743,0.000000,0.000000,1.245743,-3.425346,-6.177033)" />
+      <path
+         transform="matrix(0.497764,0.000000,0.000000,0.609621,8.973526,15.61929)"
+         d="M 40.658640 37.967922 A 16.528622 3.9332814 0 1 1  7.6013966,37.967922 A 16.528622 3.9332814 0 1 1  40.658640 37.967922 z"
+         sodipodi:ry="3.9332814"
+         sodipodi:rx="16.528622"
+         sodipodi:cy="37.967922"
+         sodipodi:cx="24.130018"
+         id="path4485"
+         style="opacity:1.0000000;color:#000000;fill:url(#radialGradient4493);fill-opacity:1.0000000;fill-rule:evenodd;stroke:none;stroke-width:1.0000000;stroke-linecap:round;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:10.000000;stroke-dasharray:none;stroke-dashoffset:0.0000000;stroke-opacity:1.0000000;visibility:visible;display:inline;overflow:visible;"
+         sodipodi:type="arc" />
+      <rect
+         style="opacity:0.43315509;color:#000000;fill:none;fill-opacity:1.0000000;fill-rule:evenodd;stroke:#ffffff;stroke-width:1.0000311;stroke-linecap:round;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:10.000000;stroke-dasharray:none;stroke-dashoffset:0.0000000;stroke-opacity:1.0000000;visibility:visible;display:inline;overflow:visible;"
+         id="rect4495"
+         width="19.048439"
+         height="4.4404783"
+         x="40.373337"
+         y="0.14086054"
+         rx="2.1366608"
+         ry="1.8879365"
+         transform="matrix(0.752986,0.658037,-0.648902,0.760872,0.000000,0.000000)" />
+      <path
+         sodipodi:type="arc"
+         style="color:#000000;fill:url(#radialGradient4460);fill-opacity:1.0000000;fill-rule:evenodd;stroke:#3063a3;stroke-width:0.71499395;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:10.000000;stroke-dashoffset:0.0000000;stroke-opacity:1.0000000;marker:none;marker-start:none;marker-mid:none;marker-end:none;visibility:visible;"
+         id="path4452"
+         sodipodi:cx="17.589281"
+         sodipodi:cy="18.478292"
+         sodipodi:rx="8.3085051"
+         sodipodi:ry="8.3085051"
+         d="M 25.897786 18.478292 A 8.3085051 8.3085051 0 1 1  9.2807760,18.478292 A 8.3085051 8.3085051 0 1 1  25.897786 18.478292 z"
+         transform="matrix(1.398614,0.000000,0.000000,1.398614,-6.224338,-8.298958)" />
+      <path
+         style="opacity:0.83422458;color:#000000;fill:url(#radialGradient4473);fill-opacity:1.0000000;fill-rule:evenodd;stroke:none;stroke-width:1.0000000;stroke-linecap:round;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:10.000000;stroke-dasharray:none;stroke-dashoffset:0.0000000;stroke-opacity:1.0000000;visibility:visible;display:inline;overflow:visible;"
+         d="M 18.156915,7.3966938 C 12.949325,7.3966938 8.7323681,11.613651 8.7323681,16.821241 C 8.7323681,18.325216 9.1526753,19.709014 9.7795400,20.971144 C 11.031920,21.432757 12.362297,21.746827 13.774307,21.746827 C 19.945262,21.746827 24.873589,16.885190 25.254413,10.809698 C 23.523449,8.7641668 21.044374,7.3966938 18.156915,7.3966938 z "
+         id="path4462" />
+    </g>
+  </g>
+</svg>