Release v3.0.0b1

Fix typos
Catch error if project cannot be created
2025-06-24 17:15:22 +00:00 · 2023-11-27 11:08:04 +10:00 · 2023-11-27 11:00:22 +10:00 · 2023-11-23 16:23:15 +10:00 · 2023-11-23 16:19:36 +10:00 · 2023-11-23 12:23:39 +10:00
263 changed files with 43186 additions and 3688 deletions
--- a/.gitignore
+++ b/.gitignore
@ -2,7 +2,6 @@

 # compiled output
 /.angular
-/dist
 /tmp
 /out-tsc
 /ng-dist
@ -59,4 +58,4 @@ licenses.csv
 .temp-var-file.ts

 # external software
-/external
+/external
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+# yarn test
--- a/.nvmrc
+++ b/.nvmrc
@ -0,0 +1 @@
+v16.14.0
--- a/dist/3rdpartylicenses.txt
+++ b/dist/3rdpartylicenses.txt
--- a/dist/465.92c7ab880f2504d3.js
+++ b/dist/465.92c7ab880f2504d3.js
--- a/dist/MaterialIcons-Regular.196fa4a92dd6fa73.ttf
+++ b/dist/MaterialIcons-Regular.196fa4a92dd6fa73.ttf
--- a/dist/MaterialIcons-Regular.1e50f5c2ffa6aba4.eot
+++ b/dist/MaterialIcons-Regular.1e50f5c2ffa6aba4.eot
--- a/dist/MaterialIcons-Regular.7ea2023eeca07427.woff2
+++ b/dist/MaterialIcons-Regular.7ea2023eeca07427.woff2
--- a/dist/MaterialIcons-Regular.db852539204b1a34.woff
+++ b/dist/MaterialIcons-Regular.db852539204b1a34.woff
--- a/dist/NotoSans-Bold.635e9291df1a5a00.woff2
+++ b/dist/NotoSans-Bold.635e9291df1a5a00.woff2
--- a/dist/NotoSans-Bold.885427cced6d8c94.woff
+++ b/dist/NotoSans-Bold.885427cced6d8c94.woff
--- a/dist/NotoSans-Bold.93203a43bc93ad9c.svg
+++ b/dist/NotoSans-Bold.93203a43bc93ad9c.svg
--- a/dist/NotoSans-Bold.a7ab189a45f553b4.eot
+++ b/dist/NotoSans-Bold.a7ab189a45f553b4.eot
--- a/dist/NotoSans-Bold.e989c11744b36f58.ttf
+++ b/dist/NotoSans-Bold.e989c11744b36f58.ttf
--- a/dist/NotoSans-BoldItalic.2baf33b639fc86a4.woff
+++ b/dist/NotoSans-BoldItalic.2baf33b639fc86a4.woff
--- a/dist/NotoSans-BoldItalic.2eea9ba02e25c1d3.ttf
+++ b/dist/NotoSans-BoldItalic.2eea9ba02e25c1d3.ttf
--- a/dist/NotoSans-BoldItalic.46a5eec91da0d900.svg
+++ b/dist/NotoSans-BoldItalic.46a5eec91da0d900.svg
--- a/dist/NotoSans-BoldItalic.7fdef73b477daa73.eot
+++ b/dist/NotoSans-BoldItalic.7fdef73b477daa73.eot
--- a/dist/NotoSans-BoldItalic.c62f70f121f271aa.woff2
+++ b/dist/NotoSans-BoldItalic.c62f70f121f271aa.woff2
--- a/dist/NotoSans-Italic.219ee88e5bc4e168.ttf
+++ b/dist/NotoSans-Italic.219ee88e5bc4e168.ttf
--- a/dist/NotoSans-Italic.3d6f7cf772169c8d.svg
+++ b/dist/NotoSans-Italic.3d6f7cf772169c8d.svg
--- a/dist/NotoSans-Italic.77cd3818b5a2cb97.woff
+++ b/dist/NotoSans-Italic.77cd3818b5a2cb97.woff
--- a/dist/NotoSans-Italic.85194585ae9d8c36.eot
+++ b/dist/NotoSans-Italic.85194585ae9d8c36.eot
--- a/dist/NotoSans-Italic.eee02500e81db981.woff2
+++ b/dist/NotoSans-Italic.eee02500e81db981.woff2
--- a/dist/NotoSans-Regular.156b7584192d70ed.eot
+++ b/dist/NotoSans-Regular.156b7584192d70ed.eot
--- a/dist/NotoSans-Regular.374d132a6803e279.woff2
+++ b/dist/NotoSans-Regular.374d132a6803e279.woff2
--- a/dist/NotoSans-Regular.595e3f5876719740.woff
+++ b/dist/NotoSans-Regular.595e3f5876719740.woff
--- a/dist/NotoSans-Regular.bb384defbe36eaec.svg
+++ b/dist/NotoSans-Regular.bb384defbe36eaec.svg
--- a/dist/NotoSans-Regular.e6139cb1663a1c57.ttf
+++ b/dist/NotoSans-Regular.e6139cb1663a1c57.ttf
--- a/dist/ReleaseNotes.txt
+++ b/dist/ReleaseNotes.txt
@ -0,0 +1,179 @@
+GNS3 WebUI is web implementation of user interface for GNS3 software.
+
+Current version: 2.2.24
+
+Bug Fixes & enhancements
+- security fixes
+
+Current version: 2020.4.0-beta.1
+
+Bug Fixes & enhancements
+- symbol is not properly selected in change symbol dialog
+- issue when using the scroll wheel on the web console
+- missing settings for Docker nodes
+- error on servers page
+
+What's new
+- double click nodes to open the console
+
+Current version: 2020.3.0-beta.3
+
+Bug Fixes & enhancements
+- direct download URL in template dialog
+- fix for issues with suspnded nodes
+- fix for bug with deleting templates
+- fix for importing images
+
+What's new
+- Option to resize console
+- Improvements in creating templates
+
+GNS3 Web UI 2020.3.0-beta.1
+
+Bug Fixes & enhancements
+- refreshing list of templates after adding new template from project map 
+- link to preferences from project page 
+- disallow user to create Qemu template when binary is not selected 
+- extending the time for notification to appear 
+- open first settings menu at start 
+- the menu for the map rearranged 
+- restyling SystemStatus page 
+- marking files which already exist in appliance wizard
+
+What's new
+- Option to import appliances
+
+GNS3 Web UI 2020.2.0-beta.5
+
+Bug Fixes
+
+- Bug in symbol selection
+- Same question is asked after going back to project
+- Cannot read property 'forEach' of undefined
+- Error when selecting existing Docker image
+- Invalid property when adding VMware VM template
+- Invalid type for adapters field when adding Docker template
+- Prevent user to move to another step when adding template
+- Web UI cannot set flag "Leave this project running in the background after closing"
+
+What's new
+- Default values in templates
+- New option for Qemu VMs
+- Ability to quickly change Hostname from right click
+- Progress bar for node creation
+
+GNS3 Web UI 2020.2.0-beta.4
+
+Bug Fixes
+- New port setting for GNS3 VM preferences
+- Option to auto-hide menu toolbar on the left side
+-Controller  type in template preferences
+- Error when selecting existing Docker image
+- Default values in templates
+- TypeError: Cannot read property 'message' of undefined
+- TypeError: e.error is undefined
+- TypeError: Cannot read property 'placements' of null
+- Creating IOS templates -> fix for platforms and network adapters
+
+GNS3 Web UI 2020.2.0-beta.2
+
+What's New
+- Drag & drop to add new nodes on topology
+- Option to minimize/maximize and hide console widget
+- Ability to add IOS templates
+- Node names in HTTP console tabs
+- Default settings for templates
+- Support for adding IOS images
+- Node dialog updated
+- Messages with description in toasts
+- Adding interfaces to cloud nodes
+- Changes in notification box mechanism (once per day option)
+- Additional tooltips added
+- Copy/paste options in console (only Chrome full support)
+- More details for server failed connections
+
+Bug Fixes
+- Fix for console icons
+- Fix for creating ethernet switches and hubs
+- Fix for opening console from context menu
+- Qemu configurator now works properly
+- Fixes in snap to grid option
+- Symbols preview now works correctly
+- Error messages in preferences should be displayed
+- Default values for New Ethernet devices in configurator
+- Fix for wrong adapter types in Qemu
+- Fix for fit in view option on Firefox
+- Fix for navigation errors
+
+GNS3 Web UI 2020.2.0-beta.1
+
+What's New
+- Support for suspended status added
+- Suport for 404 page
+- Actions for group of nodes added
+- Updating packages
+- Button to close project added
+- Opening ads in new window
+- New dialog for adding nodes
+- Option to import config
+- Support for light theme added
+
+Bug Fixes
+- Fix for navigating to project that doesn't exist
+- Fix for AdButler errors
+- Fix for screenshot issue
+- Proper centering of icons
+- Fix for adding custom symbols
+- Fix for return command in console
+- Fix for deleting links
+- Fix for duplicating any node type
+- Fix for console errors on servers page
+- Fix for console errors on projects page
+
+GNS3 Web UI 2019.2.0 v10
+
+What's New
+- Qemu image configurator
+- Custom console for particular node
+- Option to connect console to all nodes
+- Option to start Winpcap
+- Filtering devices with packet filters on topology summary
+- Filtering devices with captures on topology summary
+- View options taken from map configuration
+- Servers summary widget
+- Ability to lock single item on the map
+- Editing & import & export config files
+- Context menu for inserted drawings
+- Ability to drag topology summary & servers summary & console widgets
+- Ability to resize topology summary & servers summary & console widgets
+- Option to show the grid
+- Option to snap to grid
+- Usage instructions available from context menu
+- Errors & warnings visible as notifications
+- Fit in view options
+- Support for global variables
+- Support for layers
+- Extending template preferences
+
+Bug Fixes
+- Input validation in styles editor
+- Fix for saving map as image
+- Removing errors with uncorrect subscriptions
+
+GNS3 Web UI 2019.2.0 v9
+
+What's New
+- Editing interface labels on double click
+- Support for keyboard shortcuts
+- Menu extended with option to delete currently opened project, export & import project
+- Possibility to save current state of project
+- Ability to duplicate project from projects page
+- Node information dialog available from context menu
+- Topology summary widget on map view
+- Improvements in dialog styles
+
+Bug Fixes
+- Removing issues with opening console
+- Context menu now is correctly placed
+- Text validation in dialogs
+- Removing errors with creating WebSockets
--- a/dist/assets/favicon.ico
+++ b/dist/assets/favicon.ico
--- a/dist/assets/gns3_icon.svg
+++ b/dist/assets/gns3_icon.svg
--- a/dist/assets/gns3_icon_black.svg
+++ b/dist/assets/gns3_icon_black.svg
--- a/dist/assets/icons/mac/icon.icns
+++ b/dist/assets/icons/mac/icon.icns
--- a/dist/assets/icons/png/1024x1024.png
+++ b/dist/assets/icons/png/1024x1024.png
--- a/dist/assets/icons/png/128x128.png
+++ b/dist/assets/icons/png/128x128.png
--- a/dist/assets/icons/png/16x16.png
+++ b/dist/assets/icons/png/16x16.png
--- a/dist/assets/icons/png/24x24.png
+++ b/dist/assets/icons/png/24x24.png
--- a/dist/assets/icons/png/256x256.png
+++ b/dist/assets/icons/png/256x256.png
--- a/dist/assets/icons/png/32x32.png
+++ b/dist/assets/icons/png/32x32.png
--- a/dist/assets/icons/png/48x48.png
+++ b/dist/assets/icons/png/48x48.png
--- a/dist/assets/icons/png/512x512.png
+++ b/dist/assets/icons/png/512x512.png
--- a/dist/assets/icons/png/64x64.png
+++ b/dist/assets/icons/png/64x64.png
--- a/dist/assets/icons/win/icon.ico
+++ b/dist/assets/icons/win/icon.ico
--- a/dist/assets/logo-header.png
+++ b/dist/assets/logo-header.png
--- a/dist/assets/resources/images/filter-capture.svg
+++ b/dist/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/dist/assets/resources/images/filter.svg
+++ b/dist/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/dist/assets/resources/images/inspect.svg
+++ b/dist/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>
--- a/dist/assets/resources/images/pause.svg
+++ b/dist/assets/resources/images/pause.svg
@ -0,0 +1,752 @@
+<?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"
+   width="48px"
+   height="48px"
+   id="svg1307"
+   sodipodi:version="0.32"
+   inkscape:version="0.48.2 r9819"
+   sodipodi:docname="pause2-test.svg"
+   inkscape:export-filename="/home/lapo/Desktop/Grafica/Icone/media-actions-outlines.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90"
+   inkscape:output_extension="org.inkscape.output.svg.inkscape"
+   sodipodi:modified="true"
+   version="1.1">
+  <defs
+     id="defs1309">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient9487">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0"
+         id="stop9489" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0;"
+         offset="1"
+         id="stop9491" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient9476">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0"
+         id="stop9478" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0;"
+         offset="1"
+         id="stop9480" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient9466">
+      <stop
+         style="stop-color:#008080;stop-opacity:1;"
+         offset="0"
+         id="stop9468" />
+      <stop
+         style="stop-color:#000000;stop-opacity:1"
+         offset="1"
+         id="stop9470" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient9432">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0"
+         id="stop9434" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0;"
+         offset="1"
+         id="stop9436" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient2684">
+      <stop
+         id="stop2686"
+         offset="0"
+         style="stop-color:#ffffff;stop-opacity:1;" />
+      <stop
+         id="stop2688"
+         offset="1"
+         style="stop-color:#000000;stop-opacity:1;" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient2584">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop2586" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0;"
+         offset="1"
+         id="stop2588" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient5075">
+      <stop
+         style="stop-color:#adb0a8;stop-opacity:1;"
+         offset="0"
+         id="stop5077" />
+      <stop
+         style="stop-color:#464744;stop-opacity:1"
+         offset="1"
+         id="stop5079" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3340">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0"
+         id="stop3342" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0.62886596;"
+         offset="1"
+         id="stop3344" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient5075"
+       id="linearGradient2306"
+       gradientUnits="userSpaceOnUse"
+       x1="71.288956"
+       y1="124.11652"
+       x2="71.53405"
+       y2="78.206215"
+       gradientTransform="matrix(1.5770403,0,0,1.4373405,-85.325285,-112.88055)" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient2684"
+       id="linearGradient2690"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1.7791869,0,0,1.6215803,-99.507163,-130.51074)"
+       x1="70.049156"
+       y1="150.31598"
+       x2="70.951942"
+       y2="88.923729" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient9466"
+       id="radialGradient9472"
+       cx="15.733126"
+       cy="66.241669"
+       fx="15.733126"
+       fy="66.241669"
+       r="15.202796"
+       gradientTransform="matrix(0.30232561,1.0465118,-0.93837208,0.27108486,73.135931,31.962758)"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient9476"
+       id="linearGradient9482"
+       x1="27.147097"
+       y1="74.225502"
+       x2="27.300127"
+       y2="83.68985"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient9487"
+       id="linearGradient9493"
+       x1="21.213203"
+       y1="53.481934"
+       x2="21.213203"
+       y2="89.745346"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.76653669,0,0,0.56547618,-34.291922,62.481744)" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient2684"
+       id="linearGradient10063"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.65862368,0,0,0.65001423,-61.40613,49.04658)"
+       x1="70.049156"
+       y1="150.31598"
+       x2="70.951942"
+       y2="88.923729" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient5075"
+       id="linearGradient10065"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.58379256,0,0,0.57616129,-56.156247,56.113683)"
+       x1="71.288956"
+       y1="124.11652"
+       x2="71.53405"
+       y2="78.206215" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient2817"
+       id="linearGradient2858"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1.103262,0,0,1.054917,-163.1228,-76.31138)"
+       x1="174.83363"
+       y1="84.263489"
+       x2="174.74524"
+       y2="105.49083" />
+    <linearGradient
+       id="linearGradient2817">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop2819" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0.48453608;"
+         offset="1"
+         id="stop2821" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient2679"
+       inkscape:collect="always">
+      <stop
+         id="stop2681"
+         offset="0"
+         style="stop-color:#f7f7f7;stop-opacity:1" />
+      <stop
+         id="stop2683"
+         offset="1"
+         style="stop-color:#ccd0c7;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient2697"
+       id="linearGradient2862"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1,0,0,1.004384,-145.0004,-71.4625)"
+       x1="169"
+       y1="110.33805"
+       x2="169"
+       y2="93.204849" />
+    <linearGradient
+       id="linearGradient2697">
+      <stop
+         id="stop2699"
+         offset="0"
+         style="stop-color:#babdb6" />
+      <stop
+         id="stop2701"
+         offset="1"
+         style="stop-color:#555753" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3081"
+       id="linearGradient2864"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(-4e-4,-0.09426)"
+       x1="15.089521"
+       y1="15.291994"
+       x2="14"
+       y2="52.510574" />
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient3081">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0"
+         id="stop3083" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0;"
+         offset="1"
+         id="stop3085" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3081"
+       id="linearGradient2800"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1.5675917,0,0,1.9063787,-13.071975,-21.908765)"
+       x1="15.089521"
+       y1="15.291994"
+       x2="14"
+       y2="52.510574" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient2697"
+       id="linearGradient2803"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1.5675917,0,0,1.9147365,-240.37274,-157.96366)"
+       x1="169"
+       y1="110.33805"
+       x2="169"
+       y2="93.204849" />
+    <linearGradient
+       id="linearGradient13149">
+      <stop
+         id="stop13151"
+         offset="0"
+         style="stop-color:#babdb6" />
+      <stop
+         id="stop13153"
+         offset="1"
+         style="stop-color:#555753" />
+    </linearGradient>
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient2679"
+       id="radialGradient2809"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(5.5842451e-6,-2.0437337,3.1228051,-2.3842281e-6,-288.35934,383.74801)"
+       cx="169.77171"
+       cy="100.20107"
+       fx="169.77171"
+       fy="100.20107"
+       r="11" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient2817"
+       id="linearGradient2823"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.6933999,0,0,0.73552,-98.013543,-42.307321)"
+       x1="174.83363"
+       y1="84.263489"
+       x2="174.74524"
+       y2="105.49083" />
+    <linearGradient
+       id="linearGradient13163">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop13165" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0.48453608;"
+         offset="1"
+         id="stop13167" />
+    </linearGradient>
+    <linearGradient
+       y2="105.49083"
+       x2="174.74524"
+       y1="84.263489"
+       x1="174.83363"
+       gradientTransform="matrix(1.7294643,0,0,2.0110717,-268.78128,-167.20747)"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient13178"
+       xlink:href="#linearGradient2817"
+       inkscape:collect="always" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient2817"
+       id="linearGradient15748"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1.7294643,0,0,2.0110717,-212.21274,-161.55062)"
+       x1="174.83363"
+       y1="84.263489"
+       x2="174.74524"
+       y2="105.49083" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient2697"
+       id="linearGradient15752"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1.5675917,0,0,1.9147365,-183.8042,-152.30681)"
+       x1="169"
+       y1="110.33805"
+       x2="169"
+       y2="93.204849" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3081"
+       id="linearGradient15754"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1.5675917,0,0,1.9063787,43.496568,-16.251911)"
+       x1="15.089521"
+       y1="15.291994"
+       x2="14"
+       y2="52.510574" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient2817"
+       id="linearGradient15756"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1.103262,0,0,1.054917,-163.1228,-76.31138)"
+       x1="174.83363"
+       y1="84.263489"
+       x2="174.74524"
+       y2="105.49083" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient2697"
+       id="linearGradient15760"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1,0,0,1.004384,-145.0004,-71.4625)"
+       x1="169"
+       y1="110.33805"
+       x2="169"
+       y2="93.204849" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3081"
+       id="linearGradient15762"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(-4e-4,-0.09426)"
+       x1="15.089521"
+       y1="15.291994"
+       x2="14"
+       y2="52.510574" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient2817"
+       id="linearGradient15780"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1.7294643,0,0,2.0110717,-188.87822,-175.51598)"
+       x1="174.83363"
+       y1="84.263489"
+       x2="174.74524"
+       y2="105.49083" />
+    <filter
+       inkscape:collect="always"
+       id="filter15790"
+       x="-0.14901266"
+       width="1.2980253"
+       y="-0.047467741"
+       height="1.0949355">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="0.86708971"
+         id="feGaussianBlur15792" />
+    </filter>
+    <filter
+       color-interpolation-filters="sRGB"
+       inkscape:collect="always"
+       id="filter15790-7"
+       x="-0.14901266"
+       width="1.2980253"
+       y="-0.047467742"
+       height="1.0949355">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="0.86708971"
+         id="feGaussianBlur15792-7" />
+    </filter>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient9432"
+       id="linearGradient8781"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.95808383,0,0,0.97572816,4.2045332,1.2585858)"
+       x1="21.566757"
+       y1="-18.998367"
+       x2="21.213203"
+       y2="32.797203" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="0.19607843"
+     inkscape:pageopacity="0.0000000"
+     inkscape:pageshadow="2"
+     inkscape:zoom="8.5789558"
+     inkscape:cx="8.4708524"
+     inkscape:cy="23.599988"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:grid-bbox="true"
+     inkscape:document-units="px"
+     inkscape:grid-points="true"
+     fill="#555753"
+     showguides="false"
+     inkscape:guide-bbox="true"
+     guidetolerance="1px"
+     stroke="#555753"
+     inkscape:window-width="1440"
+     inkscape:window-height="848"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     showborder="true"
+     inkscape:showpageshadow="false"
+     inkscape:window-maximized="1">
+    <sodipodi:guide
+       orientation="horizontal"
+       position="38.996647"
+       id="guide2194" />
+    <sodipodi:guide
+       orientation="horizontal"
+       position="9.0140845"
+       id="guide2196" />
+    <sodipodi:guide
+       orientation="vertical"
+       position="9.0140845"
+       id="guide2198" />
+    <sodipodi:guide
+       orientation="vertical"
+       position="38.975184"
+       id="guide2200" />
+    <sodipodi:guide
+       orientation="horizontal"
+       position="22.988281"
+       id="guide2202" />
+    <sodipodi:guide
+       orientation="vertical"
+       position="23.908786"
+       id="guide2204" />
+    <sodipodi:guide
+       orientation="vertical"
+       position="157.99417"
+       id="guide4332" />
+    <sodipodi:guide
+       orientation="horizontal"
+       position="-36.062446"
+       id="guide4334" />
+    <sodipodi:guide
+       orientation="horizontal"
+       position="-58.02695"
+       id="guide4336" />
+    <sodipodi:guide
+       orientation="vertical"
+       position="180.00287"
+       id="guide4338" />
+    <sodipodi:guide
+       orientation="vertical"
+       position="107.92217"
+       id="guide4417" />
+    <sodipodi:guide
+       orientation="vertical"
+       position="129.93087"
+       id="guide4419" />
+    <sodipodi:guide
+       orientation="horizontal"
+       position="19.996875"
+       id="guide5106" />
+    <sodipodi:guide
+       orientation="horizontal"
+       position="63.039674"
+       id="guide5119" />
+    <sodipodi:guide
+       orientation="horizontal"
+       position="49.066305"
+       id="guide5121" />
+    <sodipodi:guide
+       orientation="horizontal"
+       position="-86.007168"
+       id="guide5307" />
+    <sodipodi:guide
+       orientation="horizontal"
+       position="-108.09009"
+       id="guide5309" />
+    <sodipodi:guide
+       orientation="horizontal"
+       position="-100.15429"
+       id="guide3111" />
+    <inkscape:grid
+       id="GridFromPre046Settings"
+       type="xygrid"
+       originx="0px"
+       originy="0px"
+       spacingx="0.5px"
+       spacingy="0.5px"
+       color="#0000ff"
+       empcolor="#0000ff"
+       opacity="0.2"
+       empopacity="0.4"
+       empspacing="2" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata1312">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+        <dc:creator>
+          <cc:Agent>
+            <dc:title>Lapo Calamandrei</dc:title>
+          </cc:Agent>
+        </dc:creator>
+        <cc:license
+           rdf:resource="http://creativecommons.org/licenses/by-sa/2.0/" />
+        <dc:subject>
+          <rdf:Bag>
+            <rdf:li>play</rdf:li>
+            <rdf:li>media</rdf:li>
+            <rdf:li>music</rdf:li>
+            <rdf:li>video</rdf:li>
+            <rdf:li>player</rdf:li>
+          </rdf:Bag>
+        </dc:subject>
+        <dc:contributor>
+          <cc:Agent>
+            <dc:title>Jakub Steiner</dc:title>
+          </cc:Agent>
+        </dc:contributor>
+      </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"
+     id="layer4"
+     inkscape:label="contorno"
+     style="display:inline" />
+  <g
+     id="layer1"
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     style="display:inline">
+    <rect
+       style="opacity:0.87000002;fill:#000000;fill-opacity:1;stroke:none;display:inline;filter:url(#filter15790-7)"
+       id="rect15782-1"
+       width="13.965359"
+       height="43.840622"
+       x="31.024309"
+       y="3.2754953"
+       ry="3.4330382" />
+    <rect
+       style="opacity:0.87000002;fill:#000000;fill-opacity:1;stroke:none;filter:url(#filter15790)"
+       id="rect15782"
+       width="13.965359"
+       height="43.840622"
+       x="11.490485"
+       y="3.4522724"
+       ry="3.4330382" />
+    <path
+       sodipodi:type="arc"
+       style="fill:#ffffff;fill-opacity:1"
+       id="path9440"
+       sodipodi:cx="11.667262"
+       sodipodi:cy="68.113136"
+       sodipodi:rx="5.6568542"
+       sodipodi:ry="9.1529827"
+       d="m 17.324116,68.113136 a 5.6568542,9.1529827 0 1 1 -11.3137081,0 5.6568542,9.1529827 0 1 1 11.3137081,0 z"
+       transform="translate(-39.244427,37.47666)" />
+    <path
+       sodipodi:type="arc"
+       style="fill:url(#radialGradient9472);fill-opacity:1;stroke:none"
+       id="path9446"
+       sodipodi:cx="21.213203"
+       sodipodi:cy="72.395187"
+       sodipodi:rx="15.202796"
+       sodipodi:ry="14.849242"
+       d="m 36.415999,72.395187 a 15.202796,14.849242 0 1 1 -30.4055916,0 15.202796,14.849242 0 1 1 30.4055916,0 z"
+       transform="translate(-39.244427,37.47666)" />
+    <path
+       inkscape:r_cy="true"
+       inkscape:r_cx="true"
+       style="opacity:0.15;color:#000000;fill:none;stroke:url(#linearGradient10063);stroke-width:1.15992785;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible"
+       d="m -22.879826,119.83382 0,-17.57292 15.2194595,8.53701 -15.2194595,9.03591 z"
+       id="path10055"
+       sodipodi:nodetypes="cccc"
+       inkscape:connector-curvature="0" />
+    <path
+       sodipodi:nodetypes="cccc"
+       id="path10057"
+       d="m -22.588246,118.86097 0,-16.02392 14.0713202,8.01196 -14.0713202,8.01196 z"
+       style="color:#000000;fill:#abc6e3;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.00000036;marker:none;visibility:visible;display:inline;overflow:visible"
+       inkscape:r_cx="true"
+       inkscape:r_cy="true"
+       inkscape:connector-curvature="0" />
+    <path
+       sodipodi:nodetypes="cccc"
+       id="path10059"
+       d="m -22.588246,118.86097 0,-16.02392 14.0713202,8.01196 -14.0713202,8.01196 z"
+       style="color:#000000;fill:none;stroke:url(#linearGradient10065);stroke-width:0.57996458;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible"
+       inkscape:r_cx="true"
+       inkscape:r_cy="true"
+       inkscape:connector-curvature="0" />
+    <path
+       sodipodi:nodetypes="cccccccc"
+       id="path10061"
+       d="m -22.29635,103.34091 0,15.01619 13.1900645,-7.50809 -13.1900645,-7.5081 z m 0.583793,1.00829 11.420442,6.49981 -11.420442,6.49983 0,-12.99964 z"
+       style="color:#000000;fill:#a6c1dd;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3;marker:none;visibility:visible;display:inline;overflow:visible"
+       inkscape:r_cx="true"
+       inkscape:r_cy="true"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:url(#linearGradient9493);fill-opacity:1;stroke:none"
+       d="m -6.3777226,103.4195 c 0,4.63747 -4.8638964,7.33623 -11.2999474,7.33623 -6.43605,0 -12.007054,-2.69876 -12.007054,-7.33623 0,-4.637478 5.21745,-8.396895 11.653501,-8.396895 6.436051,0 11.6535004,3.759417 11.6535004,8.396895 z"
+       id="path9484"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="sssss" />
+    <path
+       inkscape:connector-curvature="0"
+       inkscape:r_cy="true"
+       inkscape:r_cx="true"
+       id="path2815"
+       d="m 27.821733,2.7280617 0,42.2324963 13.835705,0 0,-42.2324963 -13.835705,0 z"
+       style="opacity:0.15;color:#000000;fill:none;stroke:url(#linearGradient13178);stroke-width:3.45741057;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path2827"
+       d="m 28.469206,3.8273677 0,40.0339553 12.540723,0 0,-40.0339553 -12.540723,0 z"
+       style="color:#000000;fill:url(#radialGradient2809);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible" />
+    <path
+       inkscape:connector-curvature="0"
+       style="color:#000000;fill:none;stroke:url(#linearGradient2803);stroke-width:1.72870588;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible"
+       d="m 28.469206,3.8315531 0,40.2094649 12.540723,0 0,-40.2094649 -12.540723,0 z"
+       id="path2762"
+       inkscape:r_cx="true"
+       inkscape:r_cy="true" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path2811"
+       d="m 30.036795,5.7337473 0,36.2211937 9.405555,0 0,-36.2211937 -9.405555,0 z"
+       style="color:#000000;fill:#ffff00;fill-opacity:1;fill-rule:evenodd;stroke:url(#linearGradient2800);stroke-width:1.72870529000000000;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible" />
+    <g
+       style="display:inline;fill:#ffff00"
+       id="use2844"
+       inkscape:r_cx="true"
+       inkscape:r_cy="true"
+       transform="matrix(1.5675916,0,0,1.9063788,-33.406597,-21.729071)">
+      <path
+         inkscape:connector-curvature="0"
+         style="opacity:0.14999999999999999;color:#000000;fill:#ffff00;stroke:url(#linearGradient2858);stroke-width:1.99999952000000000;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible"
+         d="m 26.086565,12.829103 0,22.153256 8.826093,0 0,-22.153256 -8.826093,0 z"
+         id="path2848"
+         inkscape:r_cx="true"
+         inkscape:r_cy="true" />
+      <path
+         inkscape:connector-curvature="0"
+         style="color:#000000;fill:#ffff00;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible"
+         d="m 26.4996,13.40575 0,21 8,0 0,-21 -8,0 z"
+         id="path2850"
+         inkscape:r_cx="true"
+         inkscape:r_cy="true" />
+      <path
+         inkscape:connector-curvature="0"
+         inkscape:r_cy="true"
+         inkscape:r_cx="true"
+         id="path2852"
+         d="m 26.4996,13.407946 0,21.092064 8,0 0,-21.092064 -8,0 z"
+         style="color:#000000;fill:#ffff00;stroke:url(#linearGradient2862);stroke-width:1.00000011999999990;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible" />
+      <path
+         inkscape:connector-curvature="0"
+         style="color:#000000;fill:#ffff00;fill-opacity:1;fill-rule:evenodd;stroke:url(#linearGradient2864);stroke-width:0.99999970000000005;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible"
+         d="m 27.4996,14.40575 0,19 6,0 0,-19 -6,0 z"
+         id="path2854"
+         inkscape:r_cx="true"
+         inkscape:r_cy="true" />
+    </g>
+    <path
+       style="fill:url(#linearGradient8781);fill-opacity:1"
+       d="M 5.84375 0.90625 L 5.84375 17.03125 C 11.031229 20.945225 18.82566 23.4375 27.5625 23.4375 C 34.627667 23.4375 41.067803 21.787366 46.03125 19.09375 L 46.03125 0.90625 L 5.84375 0.90625 z "
+       id="path9430" />
+  </g>
+</svg>
--- a/dist/favicon.ico
+++ b/dist/favicon.ico
--- a/dist/index.html
+++ b/dist/index.html
--- a/dist/main.0e3b19f809f31d26.js
+++ b/dist/main.0e3b19f809f31d26.js
--- a/dist/polyfills.319c79dd175e50d0.js
+++ b/dist/polyfills.319c79dd175e50d0.js
--- a/dist/roboto-latin-100.539f0a96b40596f7.woff2
+++ b/dist/roboto-latin-100.539f0a96b40596f7.woff2
--- a/dist/roboto-latin-100.5ba994dac3e79ea8.woff
+++ b/dist/roboto-latin-100.5ba994dac3e79ea8.woff
--- a/dist/roboto-latin-100italic.41ba64219cb743c9.woff2
+++ b/dist/roboto-latin-100italic.41ba64219cb743c9.woff2
--- a/dist/roboto-latin-100italic.d61e7e8b07c0638c.woff
+++ b/dist/roboto-latin-100italic.d61e7e8b07c0638c.woff
--- a/dist/roboto-latin-300.4d8f8086236bad80.woff2
+++ b/dist/roboto-latin-300.4d8f8086236bad80.woff2
--- a/dist/roboto-latin-300.6c1bc461047e61f5.woff
+++ b/dist/roboto-latin-300.6c1bc461047e61f5.woff
--- a/dist/roboto-latin-300italic.3a529751a590d3c1.woff
+++ b/dist/roboto-latin-300italic.3a529751a590d3c1.woff
--- a/dist/roboto-latin-300italic.45164643b3bd5824.woff2
+++ b/dist/roboto-latin-300italic.45164643b3bd5824.woff2
--- a/dist/roboto-latin-400.1e2d4d3a272629cd.woff2
+++ b/dist/roboto-latin-400.1e2d4d3a272629cd.woff2
--- a/dist/roboto-latin-400.7e4a045b9373d9c1.woff
+++ b/dist/roboto-latin-400.7e4a045b9373d9c1.woff
--- a/dist/roboto-latin-400italic.68431199e5b90ea8.woff
+++ b/dist/roboto-latin-400italic.68431199e5b90ea8.woff
--- a/dist/roboto-latin-400italic.bb3c6955c4334c8a.woff2
+++ b/dist/roboto-latin-400italic.bb3c6955c4334c8a.woff2
--- a/dist/roboto-latin-500.1dfbc3dbf815e3f3.woff2
+++ b/dist/roboto-latin-500.1dfbc3dbf815e3f3.woff2
--- a/dist/roboto-latin-500.e21fe97fd2329ff7.woff
+++ b/dist/roboto-latin-500.e21fe97fd2329ff7.woff
--- a/dist/roboto-latin-500italic.7543a42b12b1452f.woff2
+++ b/dist/roboto-latin-500italic.7543a42b12b1452f.woff2
--- a/dist/roboto-latin-500italic.aaff6867154023d3.woff
+++ b/dist/roboto-latin-500italic.aaff6867154023d3.woff
--- a/dist/roboto-latin-700.02633003129d1e63.woff
+++ b/dist/roboto-latin-700.02633003129d1e63.woff
--- a/dist/roboto-latin-700.12893bfc0762b0f3.woff2
+++ b/dist/roboto-latin-700.12893bfc0762b0f3.woff2
--- a/dist/roboto-latin-700italic.bc7179e004e40113.woff2
+++ b/dist/roboto-latin-700italic.bc7179e004e40113.woff2
--- a/dist/roboto-latin-700italic.e53062e27c63fafb.woff
+++ b/dist/roboto-latin-700italic.e53062e27c63fafb.woff
--- a/dist/roboto-latin-900.282ba77fda1349f3.woff2
+++ b/dist/roboto-latin-900.282ba77fda1349f3.woff2
--- a/dist/roboto-latin-900.4962e810cbb4d3e5.woff
+++ b/dist/roboto-latin-900.4962e810cbb4d3e5.woff
--- a/dist/roboto-latin-900italic.2394134a78bbaef8.woff
+++ b/dist/roboto-latin-900italic.2394134a78bbaef8.woff
--- a/dist/roboto-latin-900italic.9c1f80840351fa12.woff2
+++ b/dist/roboto-latin-900italic.9c1f80840351fa12.woff2
--- a/dist/runtime.53e0b4d68251ad21.js
+++ b/dist/runtime.53e0b4d68251ad21.js
@ -0,0 +1 @@
+!function(){"use strict";var e,v={},g={};function n(e){var u=g[e];if(void 0!==u)return u.exports;var t=g[e]={id:e,loaded:!1,exports:{}};return v[e](t,t.exports,n),t.loaded=!0,t.exports}n.m=v,e=[],n.O=function(u,t,o,a){if(!t){var r=1/0;for(i=0;i<e.length;i++){t=e[i][0],o=e[i][1],a=e[i][2];for(var d=!0,f=0;f<t.length;f++)(!1&a||r>=a)&&Object.keys(n.O).every(function(b){return n.O[b](t[f])})?t.splice(f--,1):(d=!1,a<r&&(r=a));if(d){e.splice(i--,1);var s=o();void 0!==s&&(u=s)}}return u}a=a||0;for(var i=e.length;i>0&&e[i-1][2]>a;i--)e[i]=e[i-1];e[i]=[t,o,a]},n.n=function(e){var u=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(u,{a:u}),u},n.d=function(e,u){for(var t in u)n.o(u,t)&&!n.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:u[t]})},n.f={},n.e=function(e){return Promise.all(Object.keys(n.f).reduce(function(u,t){return n.f[t](e,u),u},[]))},n.u=function(e){return e+".92c7ab880f2504d3.js"},n.miniCssF=function(e){},n.hmd=function(e){return(e=Object.create(e)).children||(e.children=[]),Object.defineProperty(e,"exports",{enumerable:!0,set:function(){throw new Error("ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: "+e.id)}}),e},n.o=function(e,u){return Object.prototype.hasOwnProperty.call(e,u)},function(){var e={},u="gns3-web-ui:";n.l=function(t,o,a,i){if(e[t])e[t].push(o);else{var r,d;if(void 0!==a)for(var f=document.getElementsByTagName("script"),s=0;s<f.length;s++){var c=f[s];if(c.getAttribute("src")==t||c.getAttribute("data-webpack")==u+a){r=c;break}}r||(d=!0,(r=document.createElement("script")).type="module",r.charset="utf-8",r.timeout=120,n.nc&&r.setAttribute("nonce",n.nc),r.setAttribute("data-webpack",u+a),r.src=n.tu(t)),e[t]=[o];var l=function(h,b){r.onerror=r.onload=null,clearTimeout(p);var _=e[t];if(delete e[t],r.parentNode&&r.parentNode.removeChild(r),_&&_.forEach(function(m){return m(b)}),h)return h(b)},p=setTimeout(l.bind(null,void 0,{type:"timeout",target:r}),12e4);r.onerror=l.bind(null,r.onerror),r.onload=l.bind(null,r.onload),d&&document.head.appendChild(r)}}}(),n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},function(){var e;n.tt=function(){return void 0===e&&(e={createScriptURL:function(u){return u}},"undefined"!=typeof trustedTypes&&trustedTypes.createPolicy&&(e=trustedTypes.createPolicy("angular#bundler",e))),e}}(),n.tu=function(e){return n.tt().createScriptURL(e)},n.p="",function(){var e={666:0};n.f.j=function(o,a){var i=n.o(e,o)?e[o]:void 0;if(0!==i)if(i)a.push(i[2]);else if(666!=o){var r=new Promise(function(c,l){i=e[o]=[c,l]});a.push(i[2]=r);var d=n.p+n.u(o),f=new Error;n.l(d,function(c){if(n.o(e,o)&&(0!==(i=e[o])&&(e[o]=void 0),i)){var l=c&&("load"===c.type?"missing":c.type),p=c&&c.target&&c.target.src;f.message="Loading chunk "+o+" failed.\n("+l+": "+p+")",f.name="ChunkLoadError",f.type=l,f.request=p,i[1](f)}},"chunk-"+o,o)}else e[o]=0},n.O.j=function(o){return 0===e[o]};var u=function(o,a){var f,s,i=a[0],r=a[1],d=a[2],c=0;if(i.some(function(p){return 0!==e[p]})){for(f in r)n.o(r,f)&&(n.m[f]=r[f]);if(d)var l=d(n)}for(o&&o(a);c<i.length;c++)s=i[c],n.o(e,s)&&e[s]&&e[s][0](),e[s]=0;return n.O(l)},t=self.webpackChunkgns3_web_ui=self.webpackChunkgns3_web_ui||[];t.forEach(u.bind(null,0)),t.push=u.bind(null,t.push.bind(t))}()}();
--- a/dist/styles.6e966072487df0b7.css
+++ b/dist/styles.6e966072487df0b7.css
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "gns3-web-ui",
-  "version": "3.0.0.dev7",
+  "version": "3.0.0b1",
  "author": {
    "name": "GNS3 Technology Inc.",
    "email": "developers@gns3.com"
@ -38,7 +38,7 @@
    "postbuildforelectron": "node set-variables-in-env.js --unset src/environments/environment.electron.prod.ts",
    "postinstall": "ngcc --properties es2020 browser module main --first-only --create-ivy-entry-points --tsconfig \"./src/tsconfig.app.json\" && ngcc --properties es2020 browser module main --first-only --create-ivy-entry-points --tsconfig \"./src/tsconfig.app.json\"",
    "snyk-protect": "snyk-protect",
-    "prepare": "yarn run snyk-protect"
+    "prepare": "husky install"
  },
  "private": true,
  "dependencies": {
@ -108,6 +108,7 @@
    "electron": "13.6.6",
    "electron-builder": "^23.0.3",
    "file-loader": "^6.2.0",
+    "husky": "^8.0.3",
    "jasmine-core": "^4.1.0",
    "jasmine-spec-reporter": "^7.0.0",
    "jquery": "^3.6.0",
@ -137,4 +138,4 @@
    ]
  },
  "snyk": true
-}
+}
--- a/scripts/push_dev_version.sh
+++ b/scripts/push_dev_version.sh
@ -0,0 +1,26 @@
+#!/bin/bash
+#
+# Copyright (C) 2023 GNS3 Technologies Inc.
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as published by
+# the Free Software Foundation, either version 3 of the License, or
+# (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+rm -rf node_modules dist
+
+yarn install
+
+# FIXME: remove --build-optimizer=false
+yarn ng build --source-map=false --build-optimizer=false --configuration=production --base-href /static/web-ui/
+
+git add dist/*
+git commit -m "Push development version of the Web UI"
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@ -60,20 +60,21 @@ import { ImageManagerComponent } from './components/image-manager/image-manager.
 import { UserDetailComponent } from "./components/user-management/user-detail/user-detail.component";
 import { UserDetailResolver } from "./resolvers/user-detail.resolver";
 import { ManagementComponent } from "./components/management/management.component";
-import { PermissionResolver } from "./resolvers/permission.resolver";
 import { UserGroupsResolver } from "./resolvers/user-groups.resolver";
-import { UserPermissionsResolver } from "./resolvers/user-permissions.resolver";
 import { GroupManagementComponent } from "./components/group-management/group-management.component";
 import { RoleManagementComponent } from "./components/role-management/role-management.component";
-import { PermissionsManagementComponent } from "./components/permissions-management/permissions-management.component";
 import { GroupDetailsComponent } from "./components/group-details/group-details.component";
 import { GroupMembersResolver } from "./resolvers/group-members.resolver";
 import { GroupResolver } from "./resolvers/group.resolver";
 import { GroupRoleResolver } from "./resolvers/group-role.resolver";
 import { RoleDetailComponent } from "./components/role-management/role-detail/role-detail.component";
 import { RoleDetailResolver } from "./resolvers/role-detail.resolver";
-import { RolePermissionsComponent } from "./components/role-management/role-detail/role-permissions/role-permissions.component";
-import { UserPermissionsComponent } from "./components/user-management/user-detail/user-permissions/user-permissions.component";
+import { AclManagementComponent } from "@components/acl-management/acl-management.component";
+import { ResourcePoolsManagementComponent } from "@components/resource-pools-management/resource-pools-management.component";
+import { ResourcePoolDetailsComponent } from "@components/resource-pool-details/resource-pool-details.component";
+import { ResourcePoolsResolver } from "@resolvers/resource-pools.resolver";
+import { GroupAcesResolver } from "@resolvers/group-ace.resolver.ts.resolver";
+import { UserAcesResolver } from "@resolvers/user-aces.resolver";

 const routes: Routes = [
  {
@ -85,7 +86,7 @@ const routes: Routes = [
      { path: 'bundled', component: BundledControllerFinderComponent },
      { path: 'controller/:controller_id/login', component: LoginComponent },
      { path: 'controller/:controller_id/loggeduser', component: LoggedUserComponent },
-      {path : 'controller/:controller_id/image-manager', component: ImageManagerComponent},
+      { path : 'controller/:controller_id/image-manager', component: ImageManagerComponent},
      {
        path: 'controller/:controller_id/projects',
        component: ProjectsComponent,
@ -102,9 +103,18 @@ const routes: Routes = [
        resolve: {
          user: UserDetailResolver,
          groups: UserGroupsResolver,
-          permissions: UserPermissionsResolver,
+          aces: UserAcesResolver,
          controller: ControllerResolve},
      },
+      {
+        path: 'controller/:controller_id/management/pools/:pool_id',
+        component: ResourcePoolDetailsComponent,
+        canActivate: [LoginGuard],
+        resolve: {
+          pool: ResourcePoolsResolver,
+          controller: ControllerResolve
+        }
+      },
      { path: 'installed-software', component: InstalledSoftwareComponent },
      { path: 'controller/:controller_id/systemstatus', component: SystemStatusComponent, canActivate: [LoginGuard] },

@ -239,8 +249,12 @@ const routes: Routes = [
            component: RoleManagementComponent
          },
          {
-            path: 'permissions',
-            component: PermissionsManagementComponent
+            path: "pools",
+            component: ResourcePoolsManagementComponent
+          },
+          {
+            path: 'ACL',
+            component: AclManagementComponent
          }
        ]
      },
@ -251,7 +265,7 @@ const routes: Routes = [
          members: GroupMembersResolver,
          controller: ControllerResolve,
          group: GroupResolver,
-          roles: GroupRoleResolver
+          aces: GroupAcesResolver
        }
      },
      {
@ -262,25 +276,6 @@ const routes: Routes = [
          controller: ControllerResolve
        }
      },
-      {
-        path: 'controller/:controller_id/management/roles/:role_id/permissions',
-        component: RolePermissionsComponent,
-        resolve: {
-          role: RoleDetailResolver,
-          controller: ControllerResolve,
-          permissions: PermissionResolver
-        }
-      },
-      {
-        path: 'controller/:controller_id/management/users/:user_id/permissions',
-        component: UserPermissionsComponent,
-        resolve: {
-          user: UserDetailResolver,
-          userPermissions: UserPermissionsResolver,
-          controller: ControllerResolve,
-          permissions: PermissionResolver
-        }
-      }
    ],
  },
  {
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@ -295,25 +295,10 @@ import { RoleFilterPipe } from './components/role-management/role-filter.pipe';
 import { AddRoleDialogComponent } from './components/role-management/add-role-dialog/add-role-dialog.component';
 import { DeleteRoleDialogComponent } from './components/role-management/delete-role-dialog/delete-role-dialog.component';
 import { RoleDetailComponent } from './components/role-management/role-detail/role-detail.component';
-import { PermissionEditorComponent } from './components/role-management/role-detail/permission-editor/permission-editor.component';
-import { EditablePermissionComponent } from './components/role-management/role-detail/permission-editor/editable-permission/editable-permission.component';
-import { PermissionEditorValidateDialogComponent } from './components/role-management/role-detail/permission-editor/permission-editor-validate-dialog/permission-editor-validate-dialog.component';
-import { PermissionsManagementComponent } from './components/permissions-management/permissions-management.component';
-import { PermissionEditLineComponent } from '@components/permissions-management/permission-edit-line/permission-edit-line.component';
 import {MatSlideToggleModule} from '@angular/material/slide-toggle';
-import { UserPermissionsComponent } from './components/user-management/user-detail/user-permissions/user-permissions.component';
-import {MatAutocompleteModule} from "@angular/material/autocomplete";
-import {PathAutoCompleteComponent} from './components/permissions-management/add-permission-line/path-auto-complete/path-auto-complete.component';
-import {FilterCompletePipe} from './components/permissions-management/add-permission-line/path-auto-complete/filter-complete.pipe';
-import { AddPermissionLineComponent } from './components/permissions-management/add-permission-line/add-permission-line.component';
-import { MethodButtonComponent } from './components/permissions-management/method-button/method-button.component';
-import { ActionButtonComponent } from './components/permissions-management/action-button/action-button.component';
-import { DeletePermissionDialogComponent } from './components/permissions-management/delete-permission-dialog/delete-permission-dialog.component';
+import {MatAutocompleteModule} from "@angular/material/autocomplete";;
 import { AddRoleToGroupComponent } from './components/group-details/add-role-to-group/add-role-to-group.component';
 import {MatFormFieldModule} from "@angular/material/form-field";
-import { PermissionsFilterPipe } from './components/permissions-management/permissions-filter.pipe';
-import { DisplayPathPipe } from './components/permissions-management/display-path.pipe';
-import {RolePermissionsComponent} from "@components/role-management/role-detail/role-permissions/role-permissions.component";
 import { ChangeUserPasswordComponent } from './components/user-management/user-detail/change-user-password/change-user-password.component';
 import {MatMenuModule} from "@angular/material/menu";
 import { ImageManagerComponent } from './components/image-manager/image-manager.component';
@ -324,6 +309,22 @@ import { ExportPortableProjectComponent } from './components/export-portable-pro
 import { NodesMenuConfirmationDialogComponent } from './components/project-map/nodes-menu/nodes-menu-confirmation-dialog/nodes-menu-confirmation-dialog.component';
 import { ConfirmationDeleteAllProjectsComponent } from './components/projects/confirmation-delete-all-projects/confirmation-delete-all-projects.component';
 import { ProjectMapLockConfirmationDialogComponent } from './components/project-map/project-map-menu/project-map-lock-confirmation-dialog/project-map-lock-confirmation-dialog.component';
+import { AclManagementComponent } from "@components/acl-management/acl-management.component";
+import { AddAceDialogComponent } from './components/acl-management/add-ace-dialog/add-ace-dialog.component';
+import { AutocompleteComponent } from './components/acl-management/add-ace-dialog/autocomplete/autocomplete.component';
+import { DeleteAceDialogComponent } from './components/acl-management/delete-ace-dialog/delete-ace-dialog.component';
+import { AceFilterPipe } from './filters/ace-filter.pipe';
+import { CdkAccordionModule } from "@angular/cdk/accordion";
+import { CdkTreeModule } from "@angular/cdk/tree";
+
+import { PrivilegeComponent } from './components/role-management/role-detail/privilege/privilege.component';
+import { GroupPrivilegesPipe } from './components/role-management/role-detail/privilege/group-privileges.pipe';
+import { ResourcePoolsManagementComponent } from './components/resource-pools-management/resource-pools-management.component';
+import { AddResourcePoolDialogComponent } from './components/resource-pools-management/add-resource-pool-dialog/add-resource-pool-dialog.component';
+import { DeleteResourcePoolComponent } from './components/resource-pools-management/delete-resource-pool/delete-resource-pool.component';
+import { ResourcePoolsFilterPipe } from './components/resource-pools-management/resource-pools-filter.pipe';
+import { ResourcePoolDetailsComponent } from './components/resource-pool-details/resource-pool-details.component';
+import { DeleteResourceConfirmationDialogComponent } from './components/resource-pool-details/delete-resource-confirmation-dialog/delete-resource-confirmation-dialog.component';

@NgModule({
    declarations: [
@ -533,26 +534,9 @@ import { ProjectMapLockConfirmationDialogComponent } from './components/project-
        AddRoleDialogComponent,
        DeleteRoleDialogComponent,
        RoleDetailComponent,
-        PermissionEditorComponent,
-        EditablePermissionComponent,
-        PermissionEditorValidateDialogComponent,
        RemoveToGroupDialogComponent,
-        PermissionsManagementComponent,
        AddRoleToGroupComponent,
-        PermissionEditLineComponent,
-        AddPermissionLineComponent,
-        MethodButtonComponent,
-        ActionButtonComponent,
-        DeletePermissionDialogComponent,
-        PathAutoCompleteComponent,
-        FilterCompletePipe,
-        UserPermissionsComponent,
-        PermissionsFilterPipe,
-        RolePermissionsComponent,
-        DisplayPathPipe,
        ChangeUserPasswordComponent,
-        FilterCompletePipe,
-        DisplayPathPipe,
        ChangeUserPasswordComponent,
        ProjectReadmeComponent,
        ImageManagerComponent,
@ -563,6 +547,19 @@ import { ProjectMapLockConfirmationDialogComponent } from './components/project-
        NodesMenuConfirmationDialogComponent,
        ConfirmationDeleteAllProjectsComponent,
        ProjectMapLockConfirmationDialogComponent,
+        AclManagementComponent,
+        AddAceDialogComponent,
+        AutocompleteComponent,
+        DeleteAceDialogComponent,
+        AceFilterPipe,
+        PrivilegeComponent,
+        GroupPrivilegesPipe,
+        ResourcePoolsManagementComponent,
+        AddResourcePoolDialogComponent,
+        DeleteResourcePoolComponent,
+        ResourcePoolsFilterPipe,
+        ResourcePoolDetailsComponent,
+        DeleteResourceConfirmationDialogComponent,
    ],
    imports: [
        BrowserModule,
@ -588,6 +585,8 @@ import { ProjectMapLockConfirmationDialogComponent } from './components/project-
        MatSlideToggleModule,
        MatCheckboxModule,
        MatAutocompleteModule,
+        CdkAccordionModule,
+        CdkTreeModule,
    ],
    providers: [
        SettingsService,
--- a/src/app/components/acl-management/acl-management.component.html
+++ b/src/app/components/acl-management/acl-management.component.html
@ -0,0 +1,98 @@
+<div class="content" *ngIf="isReady; else loading">
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">Access Control List (ACL)</h1>
+      <button class="col" mat-raised-button color="primary" (click)="deleteMultiple()" class="add-ace-button" [disabled]="selection.selected.length == 0">
+        Delete selected ACEs
+      </button>
+      <button class="col" mat-raised-button color="primary" (click)="addACE()" class="add-ace-button">
+        Add ACE
+      </button>
+    </div>
+  </div>
+
+  <form>
+    <mat-form-field class="full-width">
+      <input matInput placeholder="Search by path, user/group or role" [(ngModel)]="searchText"
+             [ngModelOptions]="{ standalone: true }"/>
+    </mat-form-field>
+  </form>
+
+  <div class="default-content">
+    <table mat-table [dataSource]="dataSource | aceFilter: searchText:endpoints " class="mat-elevation-z8" matSort #acesSort="matSort">
+
+      <ng-container matColumnDef="select" >
+        <th mat-header-cell *matHeaderCellDef class="small-col">
+          <mat-checkbox (change)="$event ? masterToggle() : null"
+                        [checked]="selection.hasValue() && isAllSelected()"
+                        [indeterminate]="selection.hasValue() && !isAllSelected()">
+          </mat-checkbox>
+        </th>
+        <td mat-cell *matCellDef="let row" class="small-col">
+          <mat-checkbox (click)="$event.stopPropagation()"
+                        (change)="$event ? selection.toggle(row) : null"
+                        [checked]="selection.isSelected(row)">
+          </mat-checkbox>
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="path">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Path</th>
+        <td mat-cell *matCellDef="let element"> {{getNameByUuidFromEndpoint(element.path)}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="user/group">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>User/Group</th>
+        <td mat-cell *matCellDef="let element">
+          <div *ngIf="element.ace_type === 'user' else groupId">{{getNameByUuidFromEndpoint(element.user_id)}}</div>
+          <ng-template #groupId>{{getNameByUuidFromEndpoint(element.group_id)}}</ng-template>
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="role">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Role</th>
+        <td mat-cell *matCellDef="let element"> {{getNameByUuidFromEndpoint(element.role_id)}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="propagate">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Propagate</th>
+        <td mat-cell *matCellDef="let element"> {{element.propagate}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="allowed">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Allowed</th>
+        <td mat-cell *matCellDef="let element"> {{element.allowed}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="created_at">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Created</th>
+        <td mat-cell *matCellDef="let element"> {{element.created_at}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="updated_at">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Last update</th>
+        <td mat-cell *matCellDef="let element"> {{element.updated_at}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="delete">
+        <th mat-header-cell *matHeaderCellDef> </th>
+        <td mat-cell *matCellDef="let element"><button mat-button (click)="onDelete(element)"><mat-icon>delete</mat-icon></button></td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+
+    </table>
+    <mat-paginator #acesPaginator="matPaginator"
+                   [pageSizeOptions]="[5, 10, 20]"
+                   showFirstLastButtons
+                   aria-label="Select page">
+    </mat-paginator>
+  </div>
+</div>
+<ng-template #loading>
+  <div>
+    <mat-spinner class="loader"></mat-spinner>
+  </div>
+</ng-template>
--- a/src/app/components/acl-management/acl-management.component.scss
+++ b/src/app/components/acl-management/acl-management.component.scss
@ -0,0 +1,26 @@
+table {
+  width: 100%;
+}
+
+.full-width {
+  width: 940px;
+  margin-left: -470px;
+  left: 50%;
+}
+
+.add-ace-button {
+  height: 40px;
+  width: 160px;
+  margin: 20px;
+}
+
+.loader {
+  position: absolute;
+  margin: auto;
+  height: 175px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+  width: 175px;
+}
--- a/src/app/components/acl-management/acl-management.component.spec.ts
+++ b/src/app/components/acl-management/acl-management.component.spec.ts
@ -0,0 +1,59 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AclManagementComponent } from './acl-management.component';
+import {ActivatedRoute} from "@angular/router";
+import {ToasterService} from "@services/toaster.service";
+import {MatDialog} from "@angular/material/dialog";
+import {AclService} from "@services/acl.service";
+import {of} from "rxjs";
+import {ControllerService} from "@services/controller.service";
+import {FatalLinkerError} from "@angular/compiler-cli/linker";
+
+class FakeToastService {
+
+}
+
+class FakeActivatedRoute {
+  data = of({controller: {}, pool: {}});
+}
+
+class FakeMatDialog {
+
+}
+
+class FakeAclService {
+
+}
+
+class FakeControllerService {
+
+}
+
+
+
+describe('AclManagementComponent', () => {
+  let component: AclManagementComponent;
+  let fixture: ComponentFixture<AclManagementComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AclManagementComponent ],
+      providers: [
+        {provide: ToasterService, useClass: FakeToastService},
+        {provide: ActivatedRoute, useClass: FakeActivatedRoute},
+        {provide: MatDialog, useClass: FakeMatDialog},
+        {provide: AclService, useClass: FakeAclService},
+        {provide: ControllerService, useClass: FakeControllerService}
+      ],
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AclManagementComponent);
+    component = fixture.componentInstance;
+    // fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/components/acl-management/acl-management.component.ts
+++ b/src/app/components/acl-management/acl-management.component.ts
@ -0,0 +1,171 @@
+/*
+* Software Name : GNS3 Web UI
+* Version: 3
+* SPDX-FileCopyrightText: Copyright (c) 2023 Orange Business Services
+* SPDX-License-Identifier: GPL-3.0-or-later
+*
+* This software is distributed under the GPL-3.0 or any later version,
+* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt
+* or see the "LICENSE" file for more details.
+*
+* Author: Sylvain MATHIEU, Elise LEBEAU
+*/
+
+import {Component, OnInit, QueryList, ViewChildren} from '@angular/core';
+import {Controller} from "@models/controller";
+import {SelectionModel} from "@angular/cdk/collections";
+import {MatTableDataSource} from "@angular/material/table";
+import {ACE} from "@models/api/ACE";
+import {ActivatedRoute} from "@angular/router";
+import {ControllerService} from "@services/controller.service";
+import {ToasterService} from "@services/toaster.service";
+import {MatDialog} from "@angular/material/dialog";
+import {AclService} from "@services/acl.service";
+import {MatPaginator} from "@angular/material/paginator";
+import {MatSort} from "@angular/material/sort";
+import {AddAceDialogComponent} from "@components/acl-management/add-ace-dialog/add-ace-dialog.component";
+import {DeleteAceDialogComponent} from "@components/acl-management/delete-ace-dialog/delete-ace-dialog.component";
+import {Endpoint} from "@models/api/endpoint";
+
+@Component({
+  selector: 'app-acl-management',
+  templateUrl: './acl-management.component.html',
+  styleUrls: ['./acl-management.component.scss']
+})
+export class AclManagementComponent implements OnInit {
+
+
+  @ViewChildren('acesPaginator') acesPaginator: QueryList<MatPaginator>;
+  @ViewChildren('acesSort') acesSort: QueryList<MatSort>;
+  controller: Controller;
+  public displayedColumns = ['select', 'path', 'user/group', 'role', 'propagate', 'allowed', 'updated_at', 'delete'];
+  selection = new SelectionModel<ACE>(true, []);
+  aces: ACE[];
+  dataSource = new MatTableDataSource<ACE>();
+  isReady = false;
+  searchText = '';
+  endpoints: Endpoint[];
+
+  constructor(private route: ActivatedRoute,
+              private controllerService: ControllerService,
+              private toasterService: ToasterService,
+              public aclService: AclService,
+              public dialog: MatDialog) { }
+
+  ngOnInit(): void {
+    const controllerId = this.route.parent.snapshot.paramMap.get('controller_id');
+    this.controllerService.get(+controllerId).then((controller: Controller) => {
+      this.controller = controller;
+      this.aclService.getEndpoints(this.controller)
+        .subscribe((endpoints: Endpoint[]) => {
+          this.endpoints = endpoints
+          this.refresh();
+        })
+    });
+
+
+  }
+
+  ngAfterViewInit() {
+    this.acesPaginator.changes.subscribe((comps: QueryList <MatPaginator>) =>
+    {
+      this.dataSource.paginator = comps.first;
+    });
+
+    this.acesSort.changes.subscribe((comps: QueryList<MatSort>) => {
+      this.dataSource.sort = comps.first;
+    })
+
+    this.dataSource.sortingDataAccessor = (item, property) => {
+      switch (property) {
+        case 'path':
+        case 'user/group':
+        case 'role':
+          return item[property] ? item[property].toLowerCase() : '';
+        default:
+          return item[property];
+      }
+    };
+  }
+
+  refresh() {
+    this.aclService.list(this.controller).subscribe((aces: ACE[]) => {
+      this.isReady = true;
+      this.aces = aces
+      this.dataSource.data = aces;
+      this.selection.clear();
+    });
+  }
+
+  addACE() {
+    const dialogRef = this.dialog.open(AddAceDialogComponent, {
+      width: '1200px',
+      height: '500px',
+      autoFocus: false,
+      disableClose: true,
+      data: {endpoints: this.endpoints}
+    });
+    let instance = dialogRef.componentInstance;
+    instance.controller = this.controller;
+    dialogRef.afterClosed().subscribe(() => this.refresh());
+  }
+
+
+  onDelete(ace: ACE) {
+    this.dialog
+      .open(DeleteAceDialogComponent, {width: '500px', data: {aces: [ace]}})
+      .afterClosed()
+      .subscribe((isDeletedConfirm) => {
+        if (isDeletedConfirm) {
+          this.aclService.delete(this.controller, ace.ace_id)
+            .subscribe(() => {
+              this.refresh()
+            }, (error) => {
+              this.toasterService.error(`An error occur while trying to delete ace ${ace.ace_id}`);
+            });
+        }
+      });
+  }
+
+  isAllSelected() {
+    const numSelected = this.selection.selected.length;
+    const numRows = this.aces.length;
+    return numSelected === numRows;
+  }
+
+  masterToggle() {
+    this.isAllSelected() ?
+      this.selection.clear() :
+      this.aces.forEach(row => this.selection.select(row));
+  }
+
+  deleteMultiple() {
+    this.dialog
+      .open(DeleteAceDialogComponent, {width: '500px', data: {aces: this.selection.selected}})
+      .afterClosed()
+      .subscribe((isDeletedConfirm) => {
+        if (isDeletedConfirm) {
+          this.selection.selected.forEach((ace: ACE) => {
+            this.aclService.delete(this.controller, ace.ace_id)
+              .subscribe(() => {
+                this.refresh()
+              }, (error) => {
+                this.toasterService.error(`An error occur while trying to delete ace ${ace.ace_id}`);
+              });
+          })
+          this.selection.clear();
+        }
+      });
+  }
+
+  getNameByUuidFromEndpoint(uuid: string): string {
+    if (this.endpoints) {
+      const elt = this.endpoints.filter((endpoint: Endpoint) => endpoint.endpoint.includes(uuid))
+      if (elt.length >= 1) {
+        return elt[0].name
+      }
+    }
+
+    return ''
+  }
+}
--- a/src/app/components/acl-management/add-ace-dialog/EndpointTreeAdapter.spec.ts
+++ b/src/app/components/acl-management/add-ace-dialog/EndpointTreeAdapter.spec.ts
@ -0,0 +1,71 @@
+import {EndpointTreeAdapter} from "@components/acl-management/add-ace-dialog/EndpointTreeAdapter";
+import {Endpoint, RessourceType} from "@models/api/endpoint";
+
+const endpoint1: Endpoint = {
+  endpoint: "/",
+  endpoint_type: RessourceType.image,
+  name: "Root"
+}
+
+const endpoint2: Endpoint = {
+  endpoint: "/projects",
+  endpoint_type: RessourceType.project,
+  name: "All projects"
+
+}
+
+const endpoint3: Endpoint = {
+  endpoint: "/images",
+  endpoint_type: RessourceType.image,
+  name: "All images"
+
+}
+
+const endpoint4: Endpoint = {
+  endpoint: "/projects/blabla",
+  endpoint_type: RessourceType.project,
+  name: "Project blabla"
+
+}
+
+const endpoint5 : Endpoint = {
+  endpoint: "/projects/blabla/nodes",
+  endpoint_type: RessourceType.node,
+  name: "All nodes for project blabla"
+}
+
+const endpoint6 : Endpoint = {
+  endpoint: "/images/blabla",
+  endpoint_type: RessourceType.image,
+  name: "Image blabla"
+}
+
+
+let endpoints: Endpoint[] = [endpoint1, endpoint2, endpoint3, endpoint4, endpoint5, endpoint6];
+
+describe('EndpointTreeAdapter', () => {
+
+  it('Should build endpointTree', () => {
+
+    const adapter = new EndpointTreeAdapter(endpoints);
+    const tree = adapter.buildTreeFromEndpoints()
+    expect(tree.length).toEqual(1);
+    expect(tree[0].children.length).toEqual(2);
+
+    const projectEndpoint = tree[0].children[0];
+
+    expect(projectEndpoint.children.length).toEqual(1);
+    expect(projectEndpoint.children[0].children.length).toEqual(1);
+
+    const imageEndpoint = tree[0].children[0];
+    expect(imageEndpoint.children.length).toEqual(1)
+    expect(imageEndpoint.children[0].children.length).toEqual(1);
+  });
+
+  it('Should build empty tree', () => {
+    const adapter = new EndpointTreeAdapter([]);
+    const tree = adapter.buildTreeFromEndpoints()
+
+    expect(tree.length).toEqual(1);
+  })
+})
--- a/src/app/components/acl-management/add-ace-dialog/EndpointTreeAdapter.ts
+++ b/src/app/components/acl-management/add-ace-dialog/EndpointTreeAdapter.ts
@ -0,0 +1,59 @@
+import {Endpoint, RessourceType} from "../../../models/api/endpoint";
+
+export interface EndpointNode {
+  endpoint: string;
+  name: string;
+  endpoint_type: RessourceType;
+  depth: number;
+  splitEndp: string[];
+  parent?: string[];
+  children?: EndpointNode[];
+}
+
+export class EndpointTreeAdapter {
+  private endpoints: Endpoint[]
+
+  constructor(endpoints: Endpoint[]) {
+    this.endpoints = endpoints
+  }
+
+  buildTreeFromEndpoints(): EndpointNode[] {
+    const parentNode: EndpointNode[] = []
+    let nodes = []
+    this.endpoints.forEach((endp: Endpoint) => {
+      const node = this.extractParent(endp)
+      nodes.push(node)
+    })
+
+    nodes.forEach((node: EndpointNode) => {
+        if(node.depth > 0) {
+          const parent = nodes.filter((n: EndpointNode) => n.splitEndp.join('/') == node.splitEndp.slice(0, node.depth-1).join('/'))[0]
+          parent.children.push(node)
+        }
+      })
+
+    parentNode.push(nodes.find((node: EndpointNode) => node.depth === 0))
+
+    return parentNode
+  }
+
+  private extractParent(endp: Endpoint): EndpointNode {
+
+    let splitEndp = endp.endpoint.split('/');
+    splitEndp = splitEndp.filter((value: string) => value !== '' && value !== 'access')
+    let parent = [];
+    if (splitEndp.length > 0) {
+      parent = splitEndp.slice(0,splitEndp.length - 1)
+    }
+    const node: EndpointNode = {
+      children: [],
+      depth: splitEndp.length,
+      splitEndp: splitEndp,
+      endpoint: endp.endpoint,
+      endpoint_type: endp.endpoint_type,
+      name: endp.name,
+      parent: parent
+    }
+    return node
+  }
+}
--- a/src/app/components/acl-management/add-ace-dialog/add-ace-dialog.component.html
+++ b/src/app/components/acl-management/add-ace-dialog/add-ace-dialog.component.html
@ -0,0 +1,108 @@
+<h1 mat-dialog-title>Create new ACE</h1>
+<form [formGroup]="addAceForm" class="input-field d-flex" style="height: 380px">
+  <div style="width: 75%; float: left; overflow-y: auto" class="d-inline-block">
+    <cdk-tree [dataSource]="treeDataSource" [treeControl]="treeControl">
+      <!-- This is the tree node template for leaf nodes -->
+      <cdk-nested-tree-node *cdkTreeNodeDef="let node" class="example-tree-node">
+        <!-- use a disabled button to provide padding for tree leaf -->
+        <div [class.selected]="selectedEndpoint && node.endpoint === selectedEndpoint.endpoint">
+          <button mat-icon-button disabled></button>
+          {{node.name}}
+          <button mat-icon-button (click)="endpointSelection(node)">
+            <div *ngIf="!selectedEndpoint || node.endpoint !== selectedEndpoint.endpoint">
+              <mat-icon class="align-middle" style="color: #696969">panorama_fish_eye</mat-icon>
+            </div>
+            <div *ngIf="selectedEndpoint && node.endpoint === selectedEndpoint.endpoint" >
+              <mat-icon class="align-middle">check_circle</mat-icon>
+            </div>
+          </button>
+        </div>
+      </cdk-nested-tree-node>
+      <!-- This is the tree node template for expandable nodes -->
+      <cdk-nested-tree-node *cdkTreeNodeDef="let node; when: hasChild" class="example-tree-node" >
+        <div [class.selected]="selectedEndpoint && node.endpoint === selectedEndpoint.endpoint">
+          <button mat-icon-button [attr.aria-label]="'Toggle ' + node.name" cdkTreeNodeToggle>
+            <mat-icon class="mat-icon-rtl-mirror">
+              {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
+            </mat-icon>
+          </button>
+          {{node.name}}
+          <button mat-icon-button (click)="endpointSelection(node)">
+            <div *ngIf="!selectedEndpoint || node.endpoint !== selectedEndpoint.endpoint">
+              <mat-icon class="align-middle" style="color: #696969">panorama_fish_eye</mat-icon>
+            </div>
+            <div *ngIf="selectedEndpoint && node.endpoint === selectedEndpoint.endpoint">
+              <mat-icon class="align-middle">check_circle</mat-icon>
+            </div>
+          </button>
+        </div>
+
+        <div [class.example-tree-invisible]="!treeControl.isExpanded(node)">
+          <ng-container cdkTreeNodeOutlet></ng-container>
+        </div>
+      </cdk-nested-tree-node>
+    </cdk-tree>
+  </div>
+  <mat-divider [vertical]="true"  style="height: auto;"></mat-divider>
+
+  <div class="form-div d-inline-block h-100">
+    <div>
+      <div class="typeSelect">
+        <mat-select placeholder="User/Group" formControlName="type">
+          <mat-option *ngFor="let t of types" [value]="t">{{t.charAt(0).toUpperCase() + t.slice(1)}}</mat-option>
+        </mat-select>
+      </div>
+
+      <app-autocomplete *ngIf="form.type.value === 'user'"
+                        [data]="users"
+                        [eltType]="'Users'"
+                        [displayFn]="displayFnUser"
+                        [filterFn]="_filterUser"
+                        (onSelection)="userSelection($event)">
+      </app-autocomplete>
+
+      <app-autocomplete *ngIf="form.type.value === 'group'"
+                        [data]="groups"
+                        [eltType]="'Groups'"
+                        [displayFn]="displayFn"
+                        [filterFn]="_filter"
+                        (onSelection)="groupSelection($event)">
+      </app-autocomplete>
+
+      <app-autocomplete
+        [data]="roles"
+        [eltType]="'Roles'"
+        [displayFn]="displayFn"
+        [filterFn]="_filter"
+        (onSelection)="roleSelection($event)">
+      </app-autocomplete>
+
+      <div class="d-flex justify-content-between">
+        <div class="d-inline-block" style="float:left;">
+          <mat-checkbox formControlName="propagate" >Propagate</mat-checkbox>
+        </div>
+        <mat-divider [vertical]="true"  style="height: auto;"></mat-divider>
+        <div class="d-inline-block" style="float: right">
+          <button *ngIf="allowed" class="allow "
+                  mat-button
+                  (click)="changeAllowed()">ALLOWED
+          </button>
+          <button *ngIf="!allowed" class="deny"
+                  mat-button
+                  (click)="changeAllowed()">DENY
+          </button>
+        </div>
+      </div>
+
+    </div>
+
+    <div mat-dialog-actions class="button-div">
+      <button mat-button (click)="onCancelClick()" color="accent">Cancel</button>
+      <button mat-button (click)="onAddClick()" tabindex="2" mat-raised-button color="primary"
+              [disabled]="!addAceForm.valid">
+        Add ACE
+      </button>
+    </div>
+  </div>
+
+</form>
--- a/src/app/components/acl-management/add-ace-dialog/add-ace-dialog.component.scss
+++ b/src/app/components/acl-management/add-ace-dialog/add-ace-dialog.component.scss
@ -0,0 +1,71 @@
+.input-field {
+  width: 100%;
+}
+
+.height-100 {
+  height: 100%;
+}
+
+.button-div {
+  float: right;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+}
+
+.allow {
+  background-color: green;
+}
+
+.deny {
+  background-color: darkred;
+}
+
+.typeSelect {
+  height: 25px;
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.groupList {
+  display: flex;
+  margin: 10px;
+  justify-content: space-between;
+  flex: 1 1 auto
+}
+
+.groups {
+  display: flex;
+  height: 180px;
+  overflow: auto;
+  flex-direction: column;
+}
+
+.example-tree-invisible {
+  display: none;
+}
+
+.example-tree ul,
+.example-tree li {
+  margin-top: 0;
+  margin-bottom: 0;
+  list-style-type: none;
+}
+.example-tree-node {
+  display: block;
+}
+
+.example-tree-node .example-tree-node {
+  padding-left: 40px;
+}
+
+.form-div {
+  position: relative;
+  width: 25%;
+  float:right;
+  margin-left: 20px;
+}
+
+.selected {
+  color: green
+}
--- a/src/app/components/acl-management/add-ace-dialog/add-ace-dialog.component.spec.ts
+++ b/src/app/components/acl-management/add-ace-dialog/add-ace-dialog.component.spec.ts
@ -0,0 +1,44 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddAceDialogComponent } from './add-ace-dialog.component';
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {AclService} from "@services/acl.service";
+import {UserService} from "@services/user.service";
+import {GroupService} from "@services/group.service";
+import {RoleService} from "@services/role.service";
+import {ToasterService} from "@services/toaster.service";
+
+class FakeMatDialogRef {}
+class FakeAclService {}
+class FakeUserService {}
+class FakeGroupService {}
+class FakeRoleService {}
+class FakeToasterService{}
+describe('AddAceDialogComponent', () => {
+  let component: AddAceDialogComponent;
+  let fixture: ComponentFixture<AddAceDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AddAceDialogComponent ],
+      providers: [
+        {provide: MatDialogRef, useClass: FakeMatDialogRef},
+        {provide: AclService, useClass: FakeAclService},
+        {provide: UserService, useClass: FakeUserService},
+        {provide: GroupService, useClass: FakeGroupService},
+        {provide: RoleService, useClass: FakeRoleService},
+        {provide: ToasterService, useClass: FakeToasterService},
+        {provide: MAT_DIALOG_DATA, useValue: {endpoints: []}}
+      ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AddAceDialogComponent);
+    component = fixture.componentInstance;
+    // fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/components/acl-management/add-ace-dialog/add-ace-dialog.component.ts
+++ b/src/app/components/acl-management/add-ace-dialog/add-ace-dialog.component.ts
@ -0,0 +1,191 @@
+/*
+* Software Name : GNS3 Web UI
+* Version: 3
+* SPDX-FileCopyrightText: Copyright (c) 2023 Orange Business Services
+* SPDX-License-Identifier: GPL-3.0-or-later
+*
+* This software is distributed under the GPL-3.0 or any later version,
+* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt
+* or see the "LICENSE" file for more details.
+*
+* Author: Sylvain MATHIEU, Elise LEBEAU
+*/
+
+import {Component, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {UserService} from "@services/user.service";
+import {ToasterService} from "@services/toaster.service";
+import {AclService} from "@services/acl.service";
+import {Controller} from "@models/controller";
+import {Endpoint, RessourceType} from "@models/api/endpoint";
+import {UntypedFormControl, UntypedFormGroup} from "@angular/forms";
+import {ACE, AceType} from "@models/api/ACE";
+import {Group} from "@models/groups/group";
+import {GroupService} from "@services/group.service";
+import {User} from "@models/users/user";
+import {Role} from "@models/api/role";
+import {RoleService} from "@services/role.service";
+import {NestedTreeControl} from "@angular/cdk/tree";
+import {ArrayDataSource} from "@angular/cdk/collections";
+import {EndpointNode, EndpointTreeAdapter} from "@components/acl-management/add-ace-dialog/EndpointTreeAdapter";
+
+
+
+@Component({
+  selector: 'app-add-ace-dialog',
+  templateUrl: './add-ace-dialog.component.html',
+  styleUrls: ['./add-ace-dialog.component.scss']
+})
+export class AddAceDialogComponent implements OnInit {
+  controller: Controller
+  addAceForm: UntypedFormGroup
+  allowed: boolean = true
+  types = Object.values(AceType);
+
+  endpoints: Endpoint[];
+  selectedEndpoint: Endpoint
+  filteredEndpoint: Endpoint[]
+  endpointTypes: string[]
+
+  groups: Group[];
+  selectedGroup: Group;
+
+  users: User[];
+  selectedUser: User;
+
+  roles: Role[];
+  selectedRole: Role;
+
+  TREE_DATA: EndpointNode[] = [];
+  treeControl = new NestedTreeControl<EndpointNode>(node => node.children);
+  treeDataSource: ArrayDataSource<EndpointNode> ;
+
+  constructor(public dialogRef: MatDialogRef<AddAceDialogComponent>,
+              public aclService: AclService,
+              public userService: UserService,
+              private groupService: GroupService,
+              private roleService: RoleService,
+              private toasterService: ToasterService,
+              @Inject(MAT_DIALOG_DATA) public data: { endpoints: Endpoint[] }) {
+    this.endpoints = data.endpoints
+    const treeAdapter = new EndpointTreeAdapter(this.endpoints)
+    const data_tree = treeAdapter.buildTreeFromEndpoints()
+    this.treeDataSource  = new ArrayDataSource(data_tree);
+    console.log(data_tree)
+  }
+
+  ngOnInit(): void {
+    this.addAceForm = new UntypedFormGroup({
+      type: new UntypedFormControl(AceType.user),
+      role_id: new UntypedFormControl(),
+      propagate: new UntypedFormControl(true)
+    });
+    this.groupService.getGroups(this.controller)
+      .subscribe((groups: Group[]) => {
+        this.groups = groups;
+      })
+    this.userService.list(this.controller)
+      .subscribe((users: User[]) => {
+        this.users = users;
+      })
+    this.roleService.get(this.controller)
+      .subscribe((roles: Role[]) => {
+        this.roles = roles;
+      })
+
+  }
+
+  get form() {
+    return this.addAceForm.controls;
+  }
+
+  onCancelClick() {
+    this.dialogRef.close();
+  }
+
+  onAddClick() {
+    const ACE = {
+      ace_type: this.form.type.value,
+      allowed: this.allowed,
+      group_id: this.form.type.value === AceType.group ? this.selectedGroup.user_group_id : null,
+      path: this.selectedEndpoint.endpoint,
+      propagate: this.form.propagate.value,
+      role_id: this.selectedRole.role_id,
+      user_id: this.form.type.value === AceType.user ? this.selectedUser.user_id : null,
+    }
+
+    if (ACE.path && ACE.role_id && (ACE.user_id || ACE.group_id)) {
+      this.aclService.add(this.controller, ACE)
+        .subscribe((ace: ACE) => {
+            this.toasterService.success(`ACE was added for path ${ACE.path}`);
+          },
+          (error) => {
+            this.toasterService.error(`Cannot create ACE: ${error.error.message}`)
+          })
+      this.dialogRef.close();
+    }
+  }
+
+  changeAllowed() {
+    this.allowed = !this.allowed
+  }
+
+  displayFn(value): string {
+    return value && value.name ? value.name : '';
+  }
+
+  displayFnUser(value): string {
+    return value && value.full_name && value.username ? value.username.concat(" - ", value.full_name) : '';
+  }
+
+  _filter(value: string, data: any): any {
+    if (typeof value === 'string' && data) {
+      const filterValue = value.toLowerCase();
+
+      return data.filter(option => option.name.toLowerCase().includes(filterValue));
+    }
+
+  }
+
+  _filterUser(value: string, users: User[]): User[] {
+    if (typeof value === 'string' && users) {
+      const filterValue = value.toLowerCase();
+
+      return users.filter(option => option.full_name.toLowerCase().includes(filterValue) || option.username.toLowerCase().includes(filterValue));
+    }
+
+  }
+
+  _filterRole(value: string, roles: Role[]) {
+    if (typeof value === 'string' && roles) {
+      const filterValue = value.toLowerCase();
+
+      return roles.filter(option => option.name.toLowerCase().includes(filterValue));
+    }
+  }
+
+  userSelection(value: any) {
+    this.selectedUser = value
+  }
+
+  groupSelection(value: any) {
+    this.selectedGroup = value
+  }
+
+  roleSelection(value: any) {
+    this.selectedRole = value;
+  }
+
+  endpointSelection(value: EndpointNode) {
+    const endp: Endpoint = {
+      endpoint: value.endpoint,
+      endpoint_type: value.endpoint_type,
+      name: value.name
+    }
+    this.selectedEndpoint = endp
+  }
+
+  hasChild = (_: number, node: EndpointNode) => !!node.children && node.children.length > 0;
+
+
+}
--- a/src/app/components/acl-management/add-ace-dialog/autocomplete/autocomplete.component.html
+++ b/src/app/components/acl-management/add-ace-dialog/autocomplete/autocomplete.component.html
@ -0,0 +1,12 @@
+<mat-form-field class="input-field">
+  <mat-label>{{eltType}}</mat-label>
+  <input type="text"
+         matInput
+         [matAutocomplete]="auto"
+         [formControl]="autocompleteControl">
+  <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" (optionSelected)='onSelection.emit($event.option.value)'>
+    <mat-option *ngFor="let elt of filteredData | async" [value]="elt" >
+      {{displayFn(elt)}}
+    </mat-option>
+  </mat-autocomplete>
+</mat-form-field>
--- a/src/app/components/acl-management/add-ace-dialog/autocomplete/autocomplete.component.scss
+++ b/src/app/components/acl-management/add-ace-dialog/autocomplete/autocomplete.component.scss
@ -0,0 +1,3 @@
+.input-field {
+  width: 100%;
+}
--- a/src/app/components/acl-management/add-ace-dialog/autocomplete/autocomplete.component.spec.ts
+++ b/src/app/components/acl-management/add-ace-dialog/autocomplete/autocomplete.component.spec.ts
@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AutocompleteComponent } from './autocomplete.component';
+import {MatAutocomplete} from "@angular/material/autocomplete";
+
+describe('AutocompleteComponent', () => {
+  let component: AutocompleteComponent<any>;
+  let fixture: ComponentFixture<AutocompleteComponent<any>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AutocompleteComponent, MatAutocomplete ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AutocompleteComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/components/acl-management/add-ace-dialog/autocomplete/autocomplete.component.ts
+++ b/src/app/components/acl-management/add-ace-dialog/autocomplete/autocomplete.component.ts
@ -0,0 +1,34 @@
+import {Component, EventEmitter, Input, OnChanges, OnInit, Output} from '@angular/core';
+import {Group} from "@models/groups/group";
+import {Observable} from "rxjs";
+import {UntypedFormControl} from "@angular/forms";
+import {map, startWith} from "rxjs/operators";
+import {data} from "autoprefixer";
+
+@Component({
+  selector: 'app-autocomplete',
+  templateUrl: './autocomplete.component.html',
+  styleUrls: ['./autocomplete.component.scss']
+})
+export class AutocompleteComponent<T> implements OnChanges {
+
+  @Input() data: T[];
+  filteredData: Observable<T[]>;
+  typeName: string
+  autocompleteControl = new UntypedFormControl();
+
+  @Input() eltType: string
+  @Input() displayFn: (value: T) => string
+  @Input() filterFn: (value: string, data: T[]) => T[]
+  @Output() onSelection: EventEmitter<T> = new EventEmitter<T>();
+
+  constructor() { }
+
+  ngOnChanges(): void {
+    this.filteredData = this.autocompleteControl.valueChanges.pipe(
+      startWith(''),
+      map(value => this.filterFn(value, this.data))
+    )
+  }
+
+}
--- a/src/app/components/acl-management/delete-ace-dialog/delete-ace-dialog.component.html
+++ b/src/app/components/acl-management/delete-ace-dialog/delete-ace-dialog.component.html
@ -0,0 +1,10 @@
+<h1 mat-dialog-title>Are you sure you want to delete the following ACEs ?</h1>
+<ul>
+  <li *ngFor="let ace of data.aces">{{ ace.path }} </li>
+</ul>
+<div mat-dialog-actions class="button-div">
+  <button mat-button (click)="onCancel()" color="accent">No, cancel</button>
+  <button mat-button (click)="onDelete()" tabindex="2" class="add-project-button" mat-raised-button color="primary">
+    Yes, delete!
+  </button>
+</div>
--- a/src/app/components/permissions-management/action-button/action-button.component.spec.ts
+++ b/src/app/components/permissions-management/action-button/action-button.component.spec.ts
--- a/src/app/components/acl-management/delete-ace-dialog/delete-ace-dialog.component.spec.ts
+++ b/src/app/components/acl-management/delete-ace-dialog/delete-ace-dialog.component.spec.ts
@ -0,0 +1,31 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeleteAceDialogComponent } from './delete-ace-dialog.component';
+import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from "@angular/material/dialog";
+
+class FakeMatDialogRef {
+
+}
+describe('DeleteAceDialogComponent', () => {
+  let component: DeleteAceDialogComponent;
+  let fixture: ComponentFixture<DeleteAceDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DeleteAceDialogComponent ],
+      providers: [
+        {provide: MatDialogRef, useClass: FakeMatDialogRef},
+        {provide: MAT_DIALOG_DATA, useValue: {}}
+      ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DeleteAceDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
grossmj	8cd821b9fe	Release v3.0.0b1	2023-11-27 11:08:04 +10:00
grossmj	6dfe28ec8f	Fix typos	2023-11-27 11:00:22 +10:00
grossmj	a465133ba3	Catch error if project cannot be created	2023-11-23 16:23:15 +10:00
grossmj	5a46911730	Push development version of the Web UI	2023-11-23 16:19:36 +10:00
grossmj	0a48b46754	Fix resource pool detail path.	2023-11-23 12:23:39 +10:00
grossmj	607c190a9a	Allow the API documentation to be accessed over HTTPS	2023-11-22 18:52:28 +10:00
grossmj	08161ce1fe	Release v3.0.0a6	2023-11-15 11:59:55 +10:00
grossmj	a6c220c2cf	Comment test in pre-commit	2023-11-15 11:45:10 +10:00
grossmj	e7a03c9913	Push development version of the Web UI	2023-11-10 15:39:44 +10:00
grossmj	9c1d576eb5	Bump to 3.0.0.dev11	2023-11-10 11:56:50 +10:00
grossmj	81efa0c6d6	Merge remote-tracking branch 'origin/master-3.0' into master-3.0	2023-11-09 15:44:47 +10:00
grossmj	63b8582982	Script to push dev version of the web-ui	2023-11-09 15:44:34 +10:00
grossmj	cb74260405	Push development version of the Web UI	2023-11-09 15:42:26 +10:00
Jeremy Grossmann	49f8f61962	Merge pull request #1479 from Orange-OpenSource/master-3.0 somes fixes :	2023-11-07 23:00:51 +10:00
Elise Lebeau	443e518740	fix update group name	2023-11-06 16:47:39 +01:00
Elise Lebeau	99e9257a13	cannot update builtin group : disable button	2023-11-06 16:47:39 +01:00
sylvain121	ea6309c615	fix role update infinte loop	2023-11-06 16:03:17 +01:00
sylvain121	be6da1d2e1	cannot update a buildin role: disable update button if role is build_in	2023-11-06 13:52:49 +01:00
sylvain121	349260d807	add pre hook commit to launch test	2023-11-06 13:39:56 +01:00
sylvain121	600d807af3	fix test for TemplateListdialogComponent	2023-11-06 13:33:44 +01:00
Sylvain MATHIEU	4378cce5e5	Merge branch 'GNS3:master-3.0' into master-3.0	2023-11-06 07:44:52 +01:00
grossmj	9547b88894	Merge branch '2.2' into master-3.0 # Conflicts: # package.json	2023-11-06 16:30:14 +10:00
grossmj	0ff4d534f4	Development on 2.2.45.dev1	2023-11-06 16:28:27 +10:00
grossmj	c96d66b34a	Release v2.2.44	2023-11-06 15:52:05 +10:00
grossmj	a234f62ae9	Fix after merge	2023-11-03 15:07:03 +10:00
grossmj	4b55e3f576	Merge branch '2.2' into master-3.0 # Conflicts: # src/app/services/packet-capture.service.ts	2023-11-03 14:49:23 +10:00
grossmj	896ca927f3	Add correct protocol when capturing with protocol handler	2023-11-03 14:44:41 +10:00
grossmj	8253f8da38	Add server protocol to gns3+pcap	2023-11-02 17:36:41 +10:00
Sylvain MATHIEU OBS	d1725e16f5	add nvmrc	2023-11-01 14:26:19 +01:00
grossmj	cbb1c9ecfc	Add project name in gns3+pcap protocol handler URL	2023-10-31 16:45:17 +10:00
grossmj	1e8b6261dc	Merge branch 'master' into 2.2	2023-10-31 16:16:22 +10:00
grossmj	b0bbf514b1	Merge branch 'master' into master-3.0	2023-10-29 15:53:03 +10:00
grossmj	d705d81cd0	Merge branch 'master' into master-3.0 # Conflicts: # yarn.lock	2023-10-29 15:52:13 +10:00
Jeremy Grossmann	f3b8a42d89	Merge pull request #1476 from GNS3/console-ipv6 Support IPv6 for external consoles	2023-10-29 15:50:45 +10:00
grossmj	7812ff38cc	Development on 3.0.0.dev10	2023-10-29 15:36:53 +10:00
grossmj	925920deef	Development on 3.0.0.dev10	2023-10-27 13:34:40 +10:00
grossmj	f076b5590f	Release v3.0.0a5	2023-10-27 13:29:47 +10:00
Jeremy Grossmann	aead5be762	Merge pull request #1475 from Orange-OpenSource/master-3.0 re enable configure dialog	2023-10-26 19:57:38 +10:00
Sylvain MATHIEU OBS	b6db926654	re enable configure dialog	2023-10-26 11:19:24 +02:00
Jeremy Grossmann	c9ac9f896f	Merge pull request #1474 from Orange-OpenSource/master-3.0 3.0 fix not working tests	2023-10-25 21:39:21 +10:00
Sylvain MATHIEU OBS	15e20263e5	fix somes tests	2023-10-25 11:06:15 +02:00
grossmj	3df22bd177	Merge branch '2.2' into master-3.0 # Conflicts: # package.json # src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts	2023-10-24 18:25:10 +10:00
grossmj	d725363fe5	Allow edit height and width for rectangles and ellipses	2023-10-24 18:23:55 +10:00
Jeremy Grossmann	58d42558f7	Merge pull request #1467 from GNS3/dependabot/npm_and_yarn/babel/traverse-7.23.2 Bump @babel/traverse from 7.16.0 to 7.23.2	2023-10-24 18:08:43 +10:00
Jeremy Grossmann	aecbe32c6c	Merge branch 'master' into dependabot/npm_and_yarn/babel/traverse-7.23.2	2023-10-24 17:47:26 +10:00
Jeremy Grossmann	35193043a2	Merge pull request #1469 from ventaquil/feature/add-qemu-igb-nic Add Qemu IGB network device	2023-10-24 17:13:59 +10:00
grossmj	dbcb8a88c8	Pass authentication token when opening ws console. Ref https://github.com/GNS3/gns3-web-ui/issues/1468	2023-10-22 15:50:05 +10:00
grossmj	76f2314e08	Development on 3.0.0.dev9	2023-10-20 15:52:29 +10:00
Konrad Goławski	7a229d8e3e	Add Qemu IGB network device	2023-10-19 11:23:55 +02:00
grossmj	97d054bb2b	Release v3.0.0a4	2023-10-18 17:41:43 +10:00
dependabot[bot]	ba1180786f	Bump @babel/traverse from 7.16.0 to 7.23.2 Bumps [@babel/traverse](https://github.com/babel/babel/tree/HEAD/packages/babel-traverse) from 7.16.0 to 7.23.2. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.23.2/packages/babel-traverse) --- updated-dependencies: - dependency-name: "@babel/traverse" dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>	2023-10-17 09:34:36 +00:00
Jeremy Grossmann	931b7b1109	Merge pull request #1465 from GNS3/rbac-tweaking Adjustments for RBAC system	2023-10-06 18:42:01 +10:00
grossmj	c7b5d0d2f8	Rename ACE management component to ACL	2023-10-06 18:02:57 +10:00
grossmj	a71014de81	Change titles for RBAC management	2023-10-06 17:27:00 +10:00
Jeremy Grossmann	73c9fd3181	Merge pull request #1464 from Orange-OpenSource/master-3.0 Master 3.0: Update group management	2023-09-29 23:23:16 +10:00
Sylvain MATHIEU	ff38d7abb7	Merge branch 'GNS3:master-3.0' into master-3.0	2023-09-29 14:11:29 +02:00
Elise Lebeau	db66a09e3b	add linked ACE to user and group detail page	2023-09-29 11:10:53 +02:00
Jeremy Grossmann	c517e98bb1	Merge pull request #1462 from Orange-OpenSource/master-3.0 PR: Add resources pools management + ACE/ACL management	2023-09-28 18:44:43 +10:00
Sylvain MATHIEU	ed4fd7c06a	Merge branch 'GNS3:master-3.0' into master-3.0	2023-09-26 11:07:18 +02:00
Elise Lebeau	4870e58977	ACE management	2023-09-26 11:02:33 +02:00
Sylvain MATHIEU OBS	6b5b784658	Add resources pools management interface	2023-09-25 15:03:07 +02:00
grossmj	963af81d30	Rename text "is build" to "is built-in"	2023-09-21 19:43:20 +10:00
Jeremy Grossmann	b106f31b36	Merge pull request #1460 from Orange-OpenSource/master-3.0 Master 3.0, add privileges to role management	2023-09-20 14:05:35 +07:00
Sylvain MATHIEU OBS	39401f3184	fix privilege component test	2023-09-19 11:52:07 +02:00
Sylvain MATHIEU OBS	55c993df71	updte role management: replace permissions by privileges	2023-09-19 11:43:46 +02:00
Sylvain MATHIEU OBS	2c0cd88ca6	create UI to manege privileges to a role	2023-09-18 14:22:41 +02:00
Sylvain MATHIEU OBS	9ca10d6d6a	update role api url	2023-09-12 15:53:08 +02:00
Elise Lebeau	7bad625fdd	suppression des permissions	2023-09-12 15:03:02 +02:00
grossmj	bae7bcdd8d	Update endpoint paths for user management	2023-09-07 14:46:23 +07:00
Jeremy Grossmann	535649f0a9	Merge pull request #1458 from GNS3/release-v2.2.42 Release v2.2.42	2023-08-09 22:18:36 +10:00
grossmj	a4f7db62ba	Development on v2.2.43.dev1	2023-08-09 22:14:16 +10:00
grossmj	662aba4ec8	Release v2.2.42	2023-08-09 20:55:57 +10:00
Jeremy Grossmann	de07558349	Merge pull request #1455 from GNS3/release-v2.2.41 Release v2.2.41	2023-07-12 17:10:55 +10:00
Jeremy Grossmann	b8253d365d	Merge pull request #1454 from GNS3/dependabot/npm_and_yarn/semver-5.7.2 Bump semver from 5.7.1 to 5.7.2	2023-07-11 11:09:22 +10:00
dependabot[bot]	05685af5c4	Bump semver from 5.7.1 to 5.7.2 Bumps [semver](https://github.com/npm/node-semver) from 5.7.1 to 5.7.2. - [Release notes](https://github.com/npm/node-semver/releases) - [Changelog](https://github.com/npm/node-semver/blob/v5.7.2/CHANGELOG.md) - [Commits](https://github.com/npm/node-semver/compare/v5.7.1...v5.7.2) --- updated-dependencies: - dependency-name: semver dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>	2023-07-10 23:33:31 +00:00
				`@ -0,0 +1 @@`
				!function(){"use strict";var e,v={},g={};function n(e){var u=g[e];if(void 0!==u)return u.exports;var t=g[e]={id:e,loaded:!1,exports:{}};return v[e](t,t.exports,n),t.loaded=!0,t.exports}n.m=v,e=[],n.O=function(u,t,o,a){if(!t){var r=1/0;for(i=0;i<e.length;i++){t=e[i][0],o=e[i][1],a=e[i][2];for(var d=!0,f=0;f<t.length;f++)(!1&a\|\|r>=a)&&Object.keys(n.O).every(function(b){return n.O[b](t[f])})?t.splice(f--,1):(d=!1,a<r&&(r=a));if(d){e.splice(i--,1);var s=o();void 0!==s&&(u=s)}}return u}a=a\|\|0;for(var i=e.length;i>0&&e[i-1][2]>a;i--)e[i]=e[i-1];e[i]=[t,o,a]},n.n=function(e){var u=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(u,{a:u}),u},n.d=function(e,u){for(var t in u)n.o(u,t)&&!n.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:u[t]})},n.f={},n.e=function(e){return Promise.all(Object.keys(n.f).reduce(function(u,t){return n.f[t](e,u),u},[]))},n.u=function(e){return e+".92c7ab880f2504d3.js"},n.miniCssF=function(e){},n.hmd=function(e){return(e=Object.create(e)).children\|\|(e.children=[]),Object.defineProperty(e,"exports",{enumerable:!0,set:function(){throw new Error("ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: "+e.id)}}),e},n.o=function(e,u){return Object.prototype.hasOwnProperty.call(e,u)},function(){var e={},u="gns3-web-ui:";n.l=function(t,o,a,i){if(e[t])e[t].push(o);else{var r,d;if(void 0!==a)for(var f=document.getElementsByTagName("script"),s=0;s<f.length;s++){var c=f[s];if(c.getAttribute("src")==t\|\|c.getAttribute("data-webpack")==u+a){r=c;break}}r\|\|(d=!0,(r=document.createElement("script")).type="module",r.charset="utf-8",r.timeout=120,n.nc&&r.setAttribute("nonce",n.nc),r.setAttribute("data-webpack",u+a),r.src=n.tu(t)),e[t]=[o];var l=function(h,b){r.onerror=r.onload=null,clearTimeout(p);var _=e[t];if(delete e[t],r.parentNode&&r.parentNode.removeChild(r),_&&_.forEach(function(m){return m(b)}),h)return h(b)},p=setTimeout(l.bind(null,void 0,{type:"timeout",target:r}),12e4);r.onerror=l.bind(null,r.onerror),r.onload=l.bind(null,r.onload),d&&document.head.appendChild(r)}}}(),n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},function(){var e;n.tt=function(){return void 0===e&&(e={createScriptURL:function(u){return u}},"undefined"!=typeof trustedTypes&&trustedTypes.createPolicy&&(e=trustedTypes.createPolicy("angular#bundler",e))),e}}(),n.tu=function(e){return n.tt().createScriptURL(e)},n.p="",function(){var e={666:0};n.f.j=function(o,a){var i=n.o(e,o)?e[o]:void 0;if(0!==i)if(i)a.push(i[2]);else if(666!=o){var r=new Promise(function(c,l){i=e[o]=[c,l]});a.push(i[2]=r);var d=n.p+n.u(o),f=new Error;n.l(d,function(c){if(n.o(e,o)&&(0!==(i=e[o])&&(e[o]=void 0),i)){var l=c&&("load"===c.type?"missing":c.type),p=c&&c.target&&c.target.src;f.message="Loading chunk "+o+" failed.\n("+l+": "+p+")",f.name="ChunkLoadError",f.type=l,f.request=p,i[1](f)}},"chunk-"+o,o)}else e[o]=0},n.O.j=function(o){return 0===e[o]};var u=function(o,a){var f,s,i=a[0],r=a[1],d=a[2],c=0;if(i.some(function(p){return 0!==e[p]})){for(f in r)n.o(r,f)&&(n.m[f]=r[f]);if(d)var l=d(n)}for(o&&o(a);c<i.length;c++)s=i[c],n.o(e,s)&&e[s]&&e[s][0](),e[s]=0;return n.O(l)},t=self.webpackChunkgns3_web_ui=self.webpackChunkgns3_web_ui\|\|[];t.forEach(u.bind(null,0)),t.push=u.bind(null,t.push.bind(t))}()}();