Release v3.0.0rc2

# Conflicts:
#	package.json
#	src/app/models/templates/docker-template.ts
#	src/app/services/template-mocks.service.ts
#	yarn.lock

.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

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+# yarn test

.nvmrc

@@ -0,0 +1 @@
+v16.14.0

angular.json

@@ -31,7 +31,8 @@
                             "spark-md5",
                             "xterm",
                             "xterm-addon-attach",
-                            "xterm-addon-fit"
+                            "xterm-addon-fit",
+                            "ipaddr.js"
                         ],
                         "outputPath": "dist",
                         "index": "src/index.html",

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

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>

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>

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>

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>

dist/runtime.24fa95b7061d7056.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].call(t.exports,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 l=!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):(l=!1,a<r&&(r=a));if(l){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,l;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||(l=!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 d=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(d.bind(null,void 0,{type:"timeout",target:r}),12e4);r.onerror=d.bind(null,r.onerror),r.onload=d.bind(null,r.onload),l&&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,d){i=e[o]=[c,d]});a.push(i[2]=r);var l=n.p+n.u(o),f=new Error;n.l(l,function(c){if(n.o(e,o)&&(0!==(i=e[o])&&(e[o]=void 0),i)){var d=c&&("load"===c.type?"missing":c.type),p=c&&c.target&&c.target.src;f.message="Loading chunk "+o+" failed.\n("+d+": "+p+")",f.name="ChunkLoadError",f.type=d,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],l=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(l)var d=l(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(d)},t=self.webpackChunkgns3_web_ui=self.webpackChunkgns3_web_ui||[];t.forEach(u.bind(null,0)),t.push=u.bind(null,t.push.bind(t))}()}();

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gns3-web-ui",
-  "version": "3.0.0.dev7",
+  "version": "3.0.0rc2",
   "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": {
@@ -69,6 +69,7 @@
     "eev": "^0.1.5",
     "ini": "^3.0.0",
     "marked": "^4.0.14",
+    "ipaddr.js": "^2.1.0",
     "material-design-icons": "^3.0.1",
     "mousetrap": "^1.6.5",
     "ng-circle-progress": "^1.6.0",
@@ -108,6 +109,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 +139,4 @@
     ]
   },
   "snyk": true
-}
+}

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"

scripts/requirements.txt

@@ -1,6 +1,6 @@
-setuptools==65.5.1
+setuptools==71.1.0
 cx_Freeze==5.1.1
-requests==2.31.0
+requests==2.32.3
 packaging==20.9
 appdirs==1.4.4
 psutil==5.8.0

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
-        }
-      }
     ],
   },
   {

src/app/app.component.html

@@ -1,4 +1,4 @@
 <div [ngClass]="{ dark: darkThemeEnabled, light: !darkThemeEnabled }">
   <router-outlet></router-outlet>
-  <app-adbutler></app-adbutler>
+  <!-- <app-adbutler></app-adbutler> -->
 </div>

src/app/app.module.ts

@@ -217,6 +217,7 @@ import { DefaultLayoutComponent } from './layouts/default-layout/default-layout.
 import { MATERIAL_IMPORTS } from './material.imports';
 import { ControllerResolve } from './resolvers/controller-resolve';
 import { ApplianceService } from './services/appliances.service';
+import { ProtocolHandlerService } from './services/protocol-handler.service';
 import { BuiltInTemplatesConfigurationService } from './services/built-in-templates-configuration.service';
 import { BuiltInTemplatesService } from './services/built-in-templates.service';
 import { ComputeService } from './services/compute.service';
@@ -295,25 +296,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 +310,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 +535,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 +548,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 +586,8 @@ import { ProjectMapLockConfirmationDialogComponent } from './components/project-
         MatSlideToggleModule,
         MatCheckboxModule,
         MatAutocompleteModule,
+        CdkAccordionModule,
+        CdkTreeModule,
     ],
     providers: [
         SettingsService,
@@ -652,6 +652,7 @@ import { ProjectMapLockConfirmationDialogComponent } from './components/project-
         InfoService,
         ComputeService,
         PacketCaptureService,
+        ProtocolHandlerService,
         NotificationService,
         ThemeService,
         GoogleAnalyticsService,

src/app/cartography/models/node.ts

@@ -14,6 +14,8 @@ export class Properties {
   headless: boolean;
   linked_clone: boolean;
   on_close: string;
+  aux_type: boolean;
+  aux: number;
   ram: number;
   nvram: number;
   usage: string;

src/app/cartography/widgets/interface-status.ts

@@ -90,7 +90,7 @@ export class InterfaceStatusWidget implements Widget {
           .merge(status_started_enter)
           .attr('class', 'status_started')
           .attr('width', (ls: LinkStatus) => {
-            return ls.port.length * 8 + 10;
+            return ls.port.length * 10 + 5;
           })
           .attr('height', 20)
           .attr('x', (ls: LinkStatus) => ls.x - 30)
@@ -122,7 +122,7 @@ export class InterfaceStatusWidget implements Widget {
           .merge(status_stopped_enter)
           .attr('class', 'status_stopped')
           .attr('width', (ls: LinkStatus) => {
-            return ls.port.length * 8 + 10;
+            return ls.port.length * 10 + 5;
           })
           .attr('height', 20)
           .attr('x', (ls: LinkStatus) => ls.x - 30)
@@ -154,7 +154,7 @@ export class InterfaceStatusWidget implements Widget {
           .merge(status_suspended_enter)
           .attr('class', 'status_suspended')
           .attr('width', (ls: LinkStatus) => {
-            return ls.port.length * 8 + 10;
+            return ls.port.length * 10 + 5;
           })
           .attr('height', 20)
           .attr('x', (ls: LinkStatus) => ls.x - 30)

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>

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;
+}

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();
+  });
+});

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 ''
+  }
+}

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);
+  })
+})

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
+  }
+}

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>

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
+}

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();
+  });
+});

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;
+
+
+}

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>

src/app/components/acl-management/add-ace-dialog/autocomplete/autocomplete.component.scss

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