Implement Widget Editor. Dashboard page initial implementation.

@@ -47,6 +47,10 @@
               "node_modules/flot/src/plugins/jquery.flot.stack.js",
               "node_modules/flot.curvedlines/curvedLines.js",
               "node_modules/tinycolor2/dist/tinycolor-min.js",
+              "node_modules/split.js/dist/split.js",
+              "node_modules/js-beautify/js/lib/beautify.js",
+              "node_modules/js-beautify/js/lib/beautify-css.js",
+              "node_modules/js-beautify/js/lib/beautify-html.js",
               "node_modules/ace-builds/src-min/ace.js",
               "node_modules/ace-builds/src-min/ext-language_tools.js",
               "node_modules/ace-builds/src-min/ext-searchbox.js",

@@ -1170,12 +1170,23 @@
         "@types/sizzle": "*"
       }
     },
+    "@types/js-beautify": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/@types/js-beautify/-/js-beautify-1.8.1.tgz",
+      "integrity": "sha512-B1Br8yE27obcYvFx5ECZswT/947aAFNb9lHqnkUOhtOfvJqaa6Axibo4T+5G6iQlUfjgSd8am9R/9j9UBfRlrw==",
+      "dev": true
+    },
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
       "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==",
       "dev": true
     },
+    "@types/mousetrap": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/@types/mousetrap/-/mousetrap-1.6.3.tgz",
+      "integrity": "sha512-13gmo3M2qVvjQrWNseqM3+cR6S2Ss3grbR2NZltgMq94wOwqJYQdgn8qzwDshzgXqMlSUtyPZjysImmktu22ew=="
+    },
     "@types/node": {
       "version": "10.14.15",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-10.14.15.tgz",
@@ -1434,6 +1445,11 @@
         "through": ">=2.2.7 <3"
       }
     },
+    "abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
+    },
     "accepts": {
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
@@ -1523,6 +1539,15 @@
         "tslib": "^1.9.0"
       }
     },
+    "angular2-hotkeys": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/angular2-hotkeys/-/angular2-hotkeys-2.1.5.tgz",
+      "integrity": "sha512-HiAnK1pW7lns5LpxtRsdkRRb5iVa7fv8Cf69Jye6l9gI6/IyvaVDptRtsWmdIG7VAr2Ngz6Yeehkym39O/LdgA==",
+      "requires": {
+        "@types/mousetrap": "^1.6.0",
+        "mousetrap": "^1.6.0"
+      }
+    },
     "ansi-colors": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
@@ -1955,8 +1980,7 @@
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
-      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-      "dev": true
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
     },
     "base": {
       "version": "0.11.2",
@@ -2143,7 +2167,6 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
       "requires": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -2854,8 +2877,7 @@
     "commander": {
       "version": "2.20.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.0.tgz",
-      "integrity": "sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==",
-      "dev": true
+      "integrity": "sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ=="
     },
     "commondir": {
       "version": "1.0.1",
@@ -3107,8 +3129,7 @@
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-      "dev": true
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
     },
     "concat-stream": {
       "version": "1.6.2",
@@ -3122,6 +3143,15 @@
         "typedarray": "^0.0.6"
       }
     },
+    "config-chain": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.12.tgz",
+      "integrity": "sha512-a1eOIcu8+7lUInge4Rpf/n4Krkf3Dd9lqhljRzII1/Zno/kRtUWnznPO3jOKBmTEktkt3fkxisUcivoj0ebzoA==",
+      "requires": {
+        "ini": "^1.3.4",
+        "proto-list": "~1.2.1"
+      }
+    },
     "connect": {
       "version": "3.7.0",
       "resolved": "https://registry.npmjs.org/connect/-/connect-3.7.0.tgz",
@@ -3762,6 +3792,17 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "editorconfig": {
+      "version": "0.15.3",
+      "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz",
+      "integrity": "sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==",
+      "requires": {
+        "commander": "^2.19.0",
+        "lru-cache": "^4.1.5",
+        "semver": "^5.6.0",
+        "sigmund": "^1.0.1"
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -4574,8 +4615,7 @@
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
-      "dev": true
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
     },
     "fsevents": {
       "version": "1.2.9",
@@ -5183,7 +5223,6 @@
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
       "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==",
-      "dev": true,
       "requires": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -5709,7 +5748,6 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
-      "dev": true,
       "requires": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -5718,14 +5756,12 @@
     "inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "ini": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
-      "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
-      "dev": true
+      "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw=="
     },
     "inquirer": {
       "version": "6.5.0",
@@ -6444,6 +6480,18 @@
         }
       }
     },
+    "js-beautify": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.10.2.tgz",
+      "integrity": "sha512-ZtBYyNUYJIsBWERnQP0rPN9KjkrDfJcMjuVGcvXOUJrD1zmOGwhRwQ4msG+HJ+Ni/FA7+sRQEMYVzdTQDvnzvQ==",
+      "requires": {
+        "config-chain": "^1.1.12",
+        "editorconfig": "^0.15.3",
+        "glob": "^7.1.3",
+        "mkdirp": "~0.5.1",
+        "nopt": "~4.0.1"
+      }
+    },
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
@@ -6918,7 +6966,6 @@
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
       "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
-      "dev": true,
       "requires": {
         "pseudomap": "^1.0.2",
         "yallist": "^2.1.2"
@@ -7258,7 +7305,6 @@
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
       "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-      "dev": true,
       "requires": {
         "brace-expansion": "^1.1.7"
       }
@@ -7368,7 +7414,6 @@
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
       "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
-      "dev": true,
       "requires": {
         "minimist": "0.0.8"
       },
@@ -7376,8 +7421,7 @@
         "minimist": {
           "version": "0.0.8",
           "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-          "dev": true
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
         }
       }
     },
@@ -7386,6 +7430,11 @@
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
       "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
     },
+    "mousetrap": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/mousetrap/-/mousetrap-1.6.3.tgz",
+      "integrity": "sha512-bd+nzwhhs9ifsUrC2tWaSgm24/oo2c83zaRyZQF06hYA6sANfsXHtnZ19AbbbDXCDzeH5nZBSQ4NvCjgD62tJA=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -7563,6 +7612,15 @@
         "semver": "^5.3.0"
       }
     },
+    "nopt": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz",
+      "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
+      "requires": {
+        "abbrev": "1",
+        "osenv": "^0.1.4"
+      }
+    },
     "normalize-package-data": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
@@ -7801,7 +7859,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-      "dev": true,
       "requires": {
         "wrappy": "1"
       }
@@ -7877,8 +7934,7 @@
     "os-homedir": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
-      "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
-      "dev": true
+      "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M="
     },
     "os-locale": {
       "version": "3.1.0",
@@ -7894,14 +7950,12 @@
     "os-tmpdir": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
-      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
-      "dev": true
+      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ="
     },
     "osenv": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
       "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
-      "dev": true,
       "requires": {
         "os-homedir": "^1.0.0",
         "os-tmpdir": "^1.0.0"
@@ -8222,8 +8276,7 @@
     "path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
-      "dev": true
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
     },
     "path-is-inside": {
       "version": "1.0.2",
@@ -8465,6 +8518,11 @@
         "retry": "^0.10.0"
       }
     },
+    "proto-list": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
+      "integrity": "sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk="
+    },
     "protoduck": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/protoduck/-/protoduck-5.0.1.tgz",
@@ -8612,8 +8670,7 @@
     "pseudomap": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
-      "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=",
-      "dev": true
+      "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM="
     },
     "psl": {
       "version": "1.3.0",
@@ -9208,8 +9265,7 @@
     "semver": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.6.0.tgz",
-      "integrity": "sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg==",
-      "dev": true
+      "integrity": "sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg=="
     },
     "semver-dsl": {
       "version": "1.0.1",
@@ -9408,6 +9464,11 @@
       "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
       "dev": true
     },
+    "sigmund": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
+      "integrity": "sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA="
+    },
     "signal-exit": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
@@ -9920,6 +9981,11 @@
         "extend-shallow": "^3.0.0"
       }
     },
+    "split.js": {
+      "version": "1.5.11",
+      "resolved": "https://registry.npmjs.org/split.js/-/split.js-1.5.11.tgz",
+      "integrity": "sha512-ec0sAbWnaMGpNHWo1ZgIlF3Mx7GzSyaO0GlcEBZGIFZQwYPPkbDV6JRpDmpzIshVig7USREuEPudy0ygQaskXg=="
+    },
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -11121,8 +11187,7 @@
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-      "dev": true
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
     },
     "ws": {
       "version": "3.3.3",
@@ -11180,8 +11245,7 @@
     "yallist": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-      "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
-      "dev": true
+      "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
     },
     "yargs": {
       "version": "12.0.5",

@@ -33,6 +33,7 @@
     "@ngx-translate/http-loader": "^4.0.0",
     "ace-builds": "^1.4.5",
     "angular-gridster2": "^8.1.0",
+    "angular2-hotkeys": "^2.1.5",
     "base64-js": "^1.3.1",
     "compass-sass-mixins": "^0.12.7",
     "core-js": "^3.1.4",
@@ -44,6 +45,7 @@
     "javascript-detect-element-resize": "^0.5.3",
     "jquery": "^3.4.1",
     "jquery.terminal": "^2.8.0",
+    "js-beautify": "^1.10.2",
     "material-design-icons": "^3.0.1",
     "messageformat": "^2.3.0",
     "moment": "^2.24.0",
@@ -51,6 +53,7 @@
     "ngx-translate-messageformat-compiler": "^4.5.0",
     "rxjs": "~6.5.2",
     "screenfull": "^4.2.1",
+    "split.js": "^1.5.11",
     "tinycolor2": "^1.4.1",
     "tslib": "^1.10.0",
     "typeface-roboto": "^0.0.75",
@@ -66,6 +69,7 @@
     "@types/jasmine": "~3.4.0",
     "@types/jasminewd2": "~2.0.6",
     "@types/jquery": "^3.3.31",
+    "@types/js-beautify": "^1.8.1",
     "@types/node": "~10.14.15",
     "@types/tinycolor2": "^1.4.2",
     "codelyzer": "~5.1.0",

@@ -24,6 +24,7 @@ import { LoginModule } from './modules/login/login.module';
 import { HomeModule } from './modules/home/home.module';
 
 import { AppComponent } from './app.component';
+import { DashboardRoutingModule } from './modules/dashboard/dashboard-routing.module';
 
 @NgModule({
   declarations: [
@@ -35,7 +36,8 @@ import { AppComponent } from './app.component';
     AppRoutingModule,
     CoreModule,
     LoginModule,
-    HomeModule
+    HomeModule,
+    DashboardRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent]

@@ -14,19 +14,26 @@
 /// limitations under the License.
 ///
 
-import { IAliasController, AliasInfo } from '@core/api/widget-api.models';
+import { IAliasController, AliasInfo, IStateController } from '@core/api/widget-api.models';
 import { Observable, of, Subject } from 'rxjs';
 import { Datasource } from '@app/shared/models/widget.models';
 import { deepClone } from '@core/utils';
+import { EntityService } from '@core/http/entity.service';
+import { UtilsService } from '@core/services/utils.service';
+import { EntityAliases } from '@shared/models/alias.models';
+import { EntityInfo } from '@shared/models/entity.models';
+import * as equal from 'deep-equal';
 
 export class DummyAliasController implements IAliasController {
 
   entityAliasesChanged: Observable<Array<string>>;
+  entityAliasResolved: Observable<string>;
 
   [key: string]: any | null;
 
   constructor() {
     this.entityAliasesChanged = new Subject<Array<string>>().asObservable();
+    this.entityAliasResolved = new Subject<string>().asObservable();
   }
 
   getAliasInfo(aliasId): Observable<AliasInfo> {
@@ -36,4 +43,72 @@ export class DummyAliasController implements IAliasController {
   resolveDatasources(datasources: Array<Datasource>): Observable<Array<Datasource>> {
     return of(deepClone(datasources));
   }
+
+  getEntityAliases(): EntityAliases {
+    return undefined;
+  }
+
+  getInstantAliasInfo(aliasId: string): AliasInfo {
+    return undefined;
+  }
+
+  updateCurrentAliasEntity(aliasId: string, currentEntity: EntityInfo) {
+  }
+
+  updateEntityAliases(entityAliases: EntityAliases) {
+  }
+
+}
+
+export class AliasController implements IAliasController {
+
+  private entityAliasesChangedSubject = new Subject<Array<string>>();
+  entityAliasesChanged: Observable<Array<string>> = this.entityAliasesChangedSubject.asObservable();
+
+  private entityAliasResolvedSubject = new Subject<string>();
+  entityAliasResolved: Observable<string> = this.entityAliasResolvedSubject.asObservable();
+
+  entityAliases: EntityAliases;
+
+  resolvedAliases: {[aliasId: string]: AliasInfo} = {};
+
+  [key: string]: any | null;
+
+  constructor(private utils: UtilsService,
+              private entityService: EntityService,
+              private stateController: IStateController,
+              private origEntityAliases: EntityAliases) {
+    this.entityAliases = deepClone(this.origEntityAliases);
+  }
+
+  getAliasInfo(aliasId: string): Observable<AliasInfo> {
+    return of(null);
+  }
+
+  resolveDatasources(datasources: Array<Datasource>): Observable<Array<Datasource>> {
+    return of(deepClone(datasources));
+  }
+
+  getEntityAliases(): EntityAliases {
+    return this.entityAliases;
+  }
+
+  getInstantAliasInfo(aliasId: string): AliasInfo {
+    return this.resolvedAliases[aliasId];
+  }
+
+  updateCurrentAliasEntity(aliasId: string, currentEntity: EntityInfo) {
+    const aliasInfo = this.resolvedAliases[aliasId];
+    if (aliasInfo) {
+      const prevCurrentEntity = aliasInfo.currentEntity;
+      if (!equal(currentEntity, prevCurrentEntity)) {
+        aliasInfo.currentEntity = currentEntity;
+        this.entityAliasesChangedSubject.next([aliasId]);
+      }
+    }
+  }
+
+  updateEntityAliases(entityAliases: EntityAliases) {
+  }
+
 }

@@ -34,6 +34,8 @@ import { AlarmSearchStatus } from '@shared/models/alarm.models';
 import { HttpErrorResponse } from '@angular/common/http';
 import { DatasourceService } from '@core/api/datasource.service';
 import { RafService } from '@core/services/raf.service';
+import { EntityAliases } from '@shared/models/alias.models';
+import { EntityInfo } from '@app/shared/models/entity.models';
 
 export interface TimewindowFunctions {
   onUpdateTimewindow: (startTimeMs: number, endTimeMs: number, interval?: number) => void;
@@ -66,20 +68,24 @@ export interface WidgetActionsApi {
 }
 
 export interface AliasInfo {
+  alias?: string;
   stateEntity?: boolean;
-  currentEntity?: {
-    id: string;
-    entityType: EntityType;
-    name?: string;
-  };
+  currentEntity?: EntityInfo;
+  selectedId?: string;
+  resolvedEntities?: Array<EntityInfo>;
   [key: string]: any | null;
   // TODO:
 }
 
 export interface IAliasController {
   entityAliasesChanged: Observable<Array<string>>;
-  getAliasInfo(aliasId): Observable<AliasInfo>;
+  entityAliasResolved: Observable<string>;
+  getAliasInfo(aliasId: string): Observable<AliasInfo>;
+  getInstantAliasInfo(aliasId: string): AliasInfo;
   resolveDatasources(datasources: Array<Datasource>): Observable<Array<Datasource>>;
+  getEntityAliases(): EntityAliases;
+  updateCurrentAliasEntity(aliasId: string, currentEntity: EntityInfo);
+  updateEntityAliases(entityAliases: EntityAliases);
   [key: string]: any | null;
   // TODO:
 }
@@ -97,17 +103,14 @@ export interface StateParams {
 }
 
 export interface IStateController {
-  getStateParams: () => StateParams;
-  openState: (id: string, params?: StateParams, openRightLayout?: boolean) => void;
-  updateState: (id?: string, params?: StateParams, openRightLayout?: boolean) => void;
+  getStateParams?: () => StateParams;
+  openState?: (id: string, params?: StateParams, openRightLayout?: boolean) => void;
+  updateState?: (id?: string, params?: StateParams, openRightLayout?: boolean) => void;
+  openRightLayout: () => void;
+  preserveState?: () => void;
   // TODO:
 }
 
-export interface EntityInfo {
-  entityId: EntityId;
-  entityName: string;
-}
-
 export interface SubscriptionInfo {
   type: DatasourceType;
   name?: string;
@@ -171,6 +174,11 @@ export interface WidgetSubscriptionOptions {
   // TODO:
 }
 
+export interface SubscriptionEntityInfo {
+  entityId: EntityId;
+  entityName: string;
+}
+
 export interface IWidgetSubscription {
 
   id: string;
@@ -201,7 +209,7 @@ export interface IWidgetSubscription {
   rpcErrorText?: string;
   rpcRejection?: HttpErrorResponse;
 
-  getFirstEntityInfo(): EntityInfo;
+  getFirstEntityInfo(): SubscriptionEntityInfo;
 
   onAliasesChanged(aliasIds: Array<string>): boolean;
 

@@ -15,8 +15,7 @@
 ///
 
 import {
-  EntityInfo,
-  IWidgetSubscription,
+  IWidgetSubscription, SubscriptionEntityInfo,
   WidgetSubscriptionCallbacks,
   WidgetSubscriptionContext,
   WidgetSubscriptionOptions
@@ -339,7 +338,7 @@ export class WidgetSubscription implements IWidgetSubscription {
     this.onDataUpdated();
   }
 
-  getFirstEntityInfo(): EntityInfo {
+  getFirstEntityInfo(): SubscriptionEntityInfo {
     return undefined;
   }
 

@@ -42,6 +42,8 @@ import {TimeService} from '@core/services/time.service';
 })
 export class AuthService {
 
+  forceFullscreen = false; // TODO:
+
   constructor(
     private store: Store<AppState>,
     private http: HttpClient,

@@ -39,6 +39,7 @@ import { TranslateDefaultCompiler } from '@core/translate/translate-default-comp
 import { AlertDialogComponent } from '@core/services/dialog/alert-dialog.component';
 import { WINDOW_PROVIDERS } from '@core/services/window.service';
 import {TodoDialogComponent} from "@core/services/dialog/todo-dialog.component";
+import { HotkeyModule } from 'angular2-hotkeys';
 
 export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http, './assets/locale/locale.constant-', '.json');
@@ -79,6 +80,7 @@ export function HttpLoaderFactory(http: HttpClient) {
         useClass: TranslateDefaultCompiler
       }
     }),
+    HotkeyModule.forRoot(),
 
     // ngrx
     StoreModule.forRoot(reducers, { metaReducers }),

@@ -28,21 +28,26 @@ import { selectAuth } from '@core/auth/auth.selectors';
 import { take } from 'rxjs/operators';
 import { DialogService } from '@core/services/dialog.service';
 import { TranslateService } from '@ngx-translate/core';
+import { isDefined } from '../utils';
 
 export interface HasConfirmForm {
   confirmForm(): FormGroup;
 }
 
+export interface HasDirtyFlag {
+  isDirty: boolean;
+}
+
 @Injectable({
   providedIn: 'root'
 })
-export class ConfirmOnExitGuard implements CanDeactivate<HasConfirmForm> {
+export class ConfirmOnExitGuard implements CanDeactivate<HasConfirmForm & HasDirtyFlag> {
 
   constructor(private store: Store<AppState>,
               private dialogService: DialogService,
               private translate: TranslateService) { }
 
-  canDeactivate(component: HasConfirmForm,
+  canDeactivate(component: HasConfirmForm & HasDirtyFlag,
                 route: ActivatedRouteSnapshot,
                 state: RouterStateSnapshot) {
 
@@ -54,9 +59,17 @@ export class ConfirmOnExitGuard implements CanDeactivate<HasConfirmForm> {
       }
     );
 
-    if (component.confirmForm && auth && auth.isAuthenticated) {
-      const confirmForm = component.confirmForm();
-      if (confirmForm && confirmForm.dirty) {
+    if (auth && auth.isAuthenticated) {
+      let isDirty = false;
+      if (component.confirmForm) {
+        const confirmForm = component.confirmForm();
+        if (confirmForm) {
+          isDirty = confirmForm.dirty;
+        }
+      } else if (isDefined(component.isDirty)) {
+        isDirty = component.isDirty;
+      }
+      if (isDirty) {
         return this.dialogService.confirm(
           this.translate.instant('confirm-on-exit.title'),
           this.translate.instant('confirm-on-exit.html-message')

@@ -21,10 +21,12 @@ import { HttpClient } from '@angular/common/http';
 import { PageLink } from '@shared/models/page/page-link';
 import { PageData } from '@shared/models/page/page-data';
 import { WidgetsBundle } from '@shared/models/widgets-bundle.model';
-import { WidgetType } from '@shared/models/widget.models';
+import { WidgetType, widgetType, WidgetTypeData, widgetTypesData } from '@shared/models/widget.models';
 import { UtilsService } from '@core/services/utils.service';
 import { TranslateService } from '@ngx-translate/core';
 import { ResourcesService } from '../services/resources.service';
+import { toWidgetInfo, WidgetInfo } from '@app/modules/home/models/widget-component.models';
+import { map } from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root'
@@ -70,4 +72,23 @@ export class WidgetService {
     return this.http.get<WidgetType>(`/api/widgetType?isSystem=${isSystem}&bundleAlias=${bundleAlias}&alias=${widgetTypeAlias}`,
       defaultHttpOptions(ignoreLoading, ignoreErrors));
   }
+
+  public getWidgetTypeById(widgetTypeId: string,
+                           ignoreErrors: boolean = false, ignoreLoading: boolean = false): Observable<WidgetType> {
+    return this.http.get<WidgetType>(`/api/widgetType/${widgetTypeId}`,
+      defaultHttpOptions(ignoreLoading, ignoreErrors));
+  }
+
+  public getWidgetTemplate(widgetTypeParam: widgetType,
+                           ignoreErrors: boolean = false, ignoreLoading: boolean = false): Observable<WidgetInfo> {
+    const templateWidgetType = widgetTypesData.get(widgetTypeParam);
+    return this.getWidgetType(templateWidgetType.template.bundleAlias, templateWidgetType.template.alias, true,
+      ignoreErrors, ignoreLoading).pipe(
+        map((result) => {
+          const widgetInfo = toWidgetInfo(result);
+          widgetInfo.alias = undefined;
+          return widgetInfo;
+        })
+      );
+    }
 }

@@ -14,10 +14,13 @@
 /// limitations under the License.
 ///
 
-import { createFeatureSelector, createSelector } from '@ngrx/store';
+import { createFeatureSelector, createSelector, select, Store } from '@ngrx/store';
 
 import { AppState } from '../core.state';
 import { LoadState } from './load.models';
+import { AuthUser } from '@shared/models/user.model';
+import { take } from 'rxjs/operators';
+import { selectAuthUser } from '@core/auth/auth.selectors';
 
 export const selectLoadState = createFeatureSelector<AppState, LoadState>(
   'load'
@@ -32,3 +35,11 @@ export const selectIsLoading = createSelector(
   selectLoadState,
   (state: LoadState) => state.isLoading
 );
+
+export function getCurrentIsLoading(store: Store<AppState>): boolean {
+  let isLoading: boolean;
+  store.pipe(select(selectIsLoading), take(1)).subscribe(
+    val => isLoading = val
+  );
+  return isLoading;
+}

+///
+/// Copyright © 2016-2019 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Injectable } from '@angular/core';
+import { UtilsService } from '@core/services/utils.service';
+import { TimeService } from '@core/services/time.service';
+import {
+  Dashboard,
+  DashboardLayout,
+  DashboardStateLayouts,
+  DashboardState,
+  DashboardConfiguration
+} from '@shared/models/dashboard.models';
+import { isUndefined, isDefined, isString } from '@core/utils';
+import { DatasourceType, Widget, Datasource } from '@app/shared/models/widget.models';
+import { EntityType } from '@shared/models/entity-type.models';
+import { EntityAlias, AliasFilterType } from '@app/shared/models/alias.models';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DashboardUtilsService {
+
+  constructor(private utils: UtilsService,
+              private timeService: TimeService) {
+  }
+
+  public validateAndUpdateDashboard(dashboard: Dashboard): Dashboard {
+    if (!dashboard.configuration) {
+      dashboard.configuration = {};
+    }
+    if (isUndefined(dashboard.configuration.widgets)) {
+      dashboard.configuration.widgets = {};
+    } else if (Array.isArray(dashboard.configuration.widgets)) {
+      const widgetsMap: {[id: string]: Widget} = {};
+      dashboard.configuration.widgets.forEach((widget) => {
+        if (!widget.id) {
+          widget.id = this.utils.guid();
+        }
+        widgetsMap[widget.id] = widget;
+      });
+      dashboard.configuration.widgets = widgetsMap;
+    }
+    for (const id of Object.keys(dashboard.configuration.widgets)) {
+      const widget = dashboard.configuration.widgets[id];
+      dashboard.configuration.widgets[id] = this.validateAndUpdateWidget(widget);
+    }
+    if (isUndefined(dashboard.configuration.states)) {
+      dashboard.configuration.states = {
+        default: this.createDefaultState(dashboard.title, true)
+      };
+
+      const mainLayout = dashboard.configuration.states.default.layouts.main;
+      for (const id of Object.keys(dashboard.configuration.widgets)) {
+        const widget = dashboard.configuration.widgets[id];
+        mainLayout.widgets[id] = {
+          sizeX: widget.sizeX,
+          sizeY: widget.sizeY,
+          row: widget.row,
+          col: widget.col
+        };
+        if (isDefined(widget.config.mobileHeight)) {
+          mainLayout.widgets[id].mobileHeight = widget.config.mobileHeight;
+        }
+        if (isDefined(widget.config.mobileOrder)) {
+          mainLayout.widgets[id].mobileOrder = widget.config.mobileOrder;
+        }
+      }
+    } else {
+      const states = dashboard.configuration.states;
+      let rootFound = false;
+      for (const stateId of Object.keys(states)) {
+        const state = states[stateId];
+        if (isUndefined(state.root)) {
+          state.root = false;
+        } else if (state.root) {
+          rootFound = true;
+        }
+      }
+      if (!rootFound) {
+        const firstStateId = Object.keys(states)[0];
+        states[firstStateId].root = true;
+      }
+    }
+    const datasourcesByAliasId: {[aliasId: string]: Array<Datasource>} = {};
+    const targetDevicesByAliasId: {[aliasId: string]: Array<Array<string>>} = {};
+    for (const widgetId of Object.keys(dashboard.configuration.widgets)) {
+      const widget = dashboard.configuration.widgets[widgetId];
+      widget.config.datasources.forEach((datasource) => {
+        if (datasource.entityAliasId) {
+          const aliasId = datasource.entityAliasId;
+          let aliasDatasources = datasourcesByAliasId[aliasId];
+          if (!aliasDatasources) {
+            aliasDatasources = [];
+            datasourcesByAliasId[aliasId] = aliasDatasources;
+          }
+          aliasDatasources.push(datasource);
+        }
+      });
+      if (widget.config.targetDeviceAliasIds && widget.config.targetDeviceAliasIds.length) {
+        const aliasId = widget.config.targetDeviceAliasIds[0];
+        let targetDeviceAliasIdsList = targetDevicesByAliasId[aliasId];
+        if (!targetDeviceAliasIdsList) {
+          targetDeviceAliasIdsList = [];
+          targetDevicesByAliasId[aliasId] = targetDeviceAliasIdsList;
+        }
+        targetDeviceAliasIdsList.push(widget.config.targetDeviceAliasIds);
+      }
+    }
+
+    dashboard.configuration = this.validateAndUpdateEntityAliases(dashboard.configuration, datasourcesByAliasId, targetDevicesByAliasId);
+
+    if (isUndefined(dashboard.configuration.timewindow)) {
+      dashboard.configuration.timewindow = this.timeService.defaultTimewindow();
+    }
+    if (isUndefined(dashboard.configuration.settings)) {
+      dashboard.configuration.settings = {};
+      dashboard.configuration.settings.stateControllerId = 'entity';
+      dashboard.configuration.settings.showTitle = false;
+      dashboard.configuration.settings.showDashboardsSelect = true;
+      dashboard.configuration.settings.showEntitiesSelect = true;
+      dashboard.configuration.settings.showDashboardTimewindow = true;
+      dashboard.configuration.settings.showDashboardExport = true;
+      dashboard.configuration.settings.toolbarAlwaysOpen = true;
+    } else {
+      if (isUndefined(dashboard.configuration.settings.stateControllerId)) {
+        dashboard.configuration.settings.stateControllerId = 'entity';
+      }
+    }
+    if (isDefined(dashboard.configuration.gridSettings)) {
+      const gridSettings = dashboard.configuration.gridSettings;
+      if (isDefined(gridSettings.showTitle)) {
+        dashboard.configuration.settings.showTitle = gridSettings.showTitle;
+        delete gridSettings.showTitle;
+      }
+      if (isDefined(gridSettings.titleColor)) {
+        dashboard.configuration.settings.titleColor = gridSettings.titleColor;
+        delete gridSettings.titleColor;
+      }
+      if (isDefined(gridSettings.showDevicesSelect)) {
+        dashboard.configuration.settings.showEntitiesSelect = gridSettings.showDevicesSelect;
+        delete gridSettings.showDevicesSelect;
+      }
+      if (isDefined(gridSettings.showEntitiesSelect)) {
+        dashboard.configuration.settings.showEntitiesSelect = gridSettings.showEntitiesSelect;
+        delete gridSettings.showEntitiesSelect;
+      }
+      if (isDefined(gridSettings.showDashboardTimewindow)) {
+        dashboard.configuration.settings.showDashboardTimewindow = gridSettings.showDashboardTimewindow;
+        delete gridSettings.showDashboardTimewindow;
+      }
+      if (isDefined(gridSettings.showDashboardExport)) {
+        dashboard.configuration.settings.showDashboardExport = gridSettings.showDashboardExport;
+        delete gridSettings.showDashboardExport;
+      }
+      dashboard.configuration.states.default.layouts.main.gridSettings = gridSettings;
+      delete dashboard.configuration.gridSettings;
+    }
+    return dashboard;
+  }
+
+  public createSingleWidgetDashboard(widget: Widget): Dashboard {
+    if (!widget.id) {
+      widget.id = this.utils.guid();
+    }
+    let dashboard: Dashboard = {};
+    dashboard = this.validateAndUpdateDashboard(dashboard);
+    dashboard.configuration.widgets[widget.id] = widget;
+    dashboard.configuration.states.default.layouts.main.widgets[widget.id] = {
+      sizeX: widget.sizeX,
+      sizeY: widget.sizeY,
+      row: widget.row,
+      col: widget.col,
+    };
+    return dashboard;
+  }
+
+  public validateAndUpdateWidget(widget: Widget): Widget {
+    if (!widget.config) {
+      widget.config = {};
+    }
+    if (!widget.config.datasources) {
+      widget.config.datasources = [];
+    }
+    widget.config.datasources.forEach((datasource) => {
+      if (datasource.type === 'device') {
+        datasource.type = DatasourceType.entity;
+      }
+      if (datasource.deviceAliasId) {
+        datasource.entityAliasId = datasource.deviceAliasId;
+        delete datasource.deviceAliasId;
+      }
+    });
+    // TODO: Temp workaround
+    if (widget.isSystemType  && widget.bundleAlias === 'charts' && widget.typeAlias === 'timeseries') {
+      widget.typeAlias = 'basic_timeseries';
+    }
+    return widget;
+  }
+
+  public createDefaultLayoutData(): DashboardLayout {
+    return {
+      widgets: {},
+      gridSettings: {
+        backgroundColor: '#eeeeee',
+        color: 'rgba(0,0,0,0.870588)',
+        columns: 24,
+        margins: [10, 10],
+        backgroundSizeMode: '100%'
+      }
+    };
+  }
+
+  public createDefaultLayouts(): DashboardStateLayouts {
+    return {
+      main: this.createDefaultLayoutData()
+    };
+  }
+
+  public createDefaultState(name: string, root: boolean): DashboardState {
+    return {
+      name,
+      root,
+      layouts: this.createDefaultLayouts()
+    };
+  }
+
+  private validateAndUpdateEntityAliases(configuration: DashboardConfiguration,
+                                         datasourcesByAliasId: {[aliasId: string]: Array<Datasource>},
+                                         targetDevicesByAliasId: {[aliasId: string]: Array<Array<string>>}): DashboardConfiguration {
+    let entityAlias: EntityAlias;
+    if (isUndefined(configuration.entityAliases)) {
+      configuration.entityAliases = {};
+      if (configuration.deviceAliases) {
+        const deviceAliases = configuration.deviceAliases;
+        for (const aliasId of Object.keys(deviceAliases)) {
+          const deviceAlias = deviceAliases[aliasId];
+          entityAlias = this.validateAndUpdateDeviceAlias(aliasId, deviceAlias, datasourcesByAliasId, targetDevicesByAliasId);
+          configuration.entityAliases[entityAlias.id] = entityAlias;
+        }
+        delete configuration.deviceAliases;
+      }
+    } else {
+      const entityAliases = configuration.entityAliases;
+      for (const aliasId of Object.keys(entityAliases)) {
+        entityAlias = entityAliases[aliasId];
+        entityAlias = this.validateAndUpdateEntityAlias(aliasId, entityAlias, datasourcesByAliasId, targetDevicesByAliasId);
+        if (aliasId !== entityAlias.id) {
+          delete entityAliases[aliasId];
+        }
+        entityAliases[entityAlias.id] = entityAlias;
+      }
+    }
+    return configuration;
+  }
+
+  private validateAndUpdateDeviceAlias(aliasId: string,
+                                       deviceAlias: any,
+                                       datasourcesByAliasId: {[aliasId: string]: Array<Datasource>},
+                                       targetDevicesByAliasId: {[aliasId: string]: Array<Array<string>>}): EntityAlias {
+    aliasId = this.validateAliasId(aliasId, datasourcesByAliasId, targetDevicesByAliasId);
+    const alias = deviceAlias.alias;
+    const entityAlias: EntityAlias = {
+      id: aliasId,
+      alias,
+      filter: {
+        type: null,
+        entityType: EntityType.DEVICE,
+        resolveMultiple: false
+      },
+    };
+    if (deviceAlias.deviceFilter) {
+      entityAlias.filter.type =
+        deviceAlias.deviceFilter.useFilter ? AliasFilterType.entityName : AliasFilterType.entityList;
+      if (entityAlias.filter.type === AliasFilterType.entityList) {
+        entityAlias.filter.entityList = deviceAlias.deviceFilter.deviceList;
+      } else {
+        entityAlias.filter.entityNameFilter = deviceAlias.deviceFilter.deviceNameFilter;
+      }
+    } else {
+      entityAlias.filter.type = AliasFilterType.entityList;
+      entityAlias.filter.entityList = [deviceAlias.deviceId];
+    }
+    return entityAlias;
+  }
+
+  private validateAndUpdateEntityAlias(aliasId: string, entityAlias: EntityAlias,
+                                       datasourcesByAliasId: {[aliasId: string]: Array<Datasource>},
+                                       targetDevicesByAliasId: {[aliasId: string]: Array<Array<string>>}): EntityAlias {
+    entityAlias.id = this.validateAliasId(aliasId, datasourcesByAliasId, targetDevicesByAliasId);
+    if (!entityAlias.filter) {
+      entityAlias.filter = {
+        type: entityAlias.entityFilter.useFilter ? AliasFilterType.entityName : AliasFilterType.entityList,
+        entityType: entityAlias.entityType,
+        resolveMultiple: false
+      };
+      if (entityAlias.filter.type === AliasFilterType.entityList) {
+        entityAlias.filter.entityList = entityAlias.entityFilter.entityList;
+      } else {
+        entityAlias.filter.entityNameFilter = entityAlias.entityFilter.entityNameFilter;
+      }
+      delete entityAlias.entityType;
+      delete entityAlias.entityFilter;
+    }
+    return entityAlias;
+  }
+
+  private validateAliasId(aliasId: string,
+                          datasourcesByAliasId: {[aliasId: string]: Array<Datasource>},
+                          targetDevicesByAliasId: {[aliasId: string]: Array<Array<string>>}): string {
+    if (!aliasId || !isString(aliasId) || aliasId.length !== 36) {
+      const newAliasId = this.utils.guid();
+      const aliasDatasources = datasourcesByAliasId[aliasId];
+      if (aliasDatasources) {
+        aliasDatasources.forEach(
+          (datasource) => {
+            datasource.entityAliasId = newAliasId;
+          }
+        );
+      }
+      const targetDeviceAliasIdsList = targetDevicesByAliasId[aliasId];
+      if (targetDeviceAliasIdsList) {
+        targetDeviceAliasIdsList.forEach(
+          (targetDeviceAliasIds) => {
+            targetDeviceAliasIds[0] = newAliasId;
+          }
+        );
+      }
+      return newAliasId;
+    } else {
+      return aliasId;
+    }
+  }
+
+}

@@ -21,11 +21,12 @@ import { isUndefined, isDefined } from '@core/utils';
 import { WindowMessage } from '@shared/models/window-message.model';
 import { TranslateService } from '@ngx-translate/core';
 import { customTranslationsPrefix } from '@app/shared/models/constants';
-import { DataKey, Datasource, DatasourceType, KeyInfo } from '@shared/models/widget.models';
+import { DataKey, Datasource, DatasourceType, KeyInfo, Widget } from '@shared/models/widget.models';
 import { EntityType } from '@shared/models/entity-type.models';
 import { DataKeyType } from '@app/shared/models/telemetry/telemetry.models';
 import { alarmFields } from '@shared/models/alarm.models';
 import { materialColors } from '@app/shared/models/material.models';
+import { WidgetInfo } from '@home/models/widget-component.models';
 
 @Injectable({
   providedIn: 'root'
@@ -34,7 +35,7 @@ export class UtilsService {
 
   iframeMode = false;
   widgetEditMode = false;
-  editWidgetInfo: any = null;
+  editWidgetInfo: WidgetInfo = null;
 
   constructor(@Inject(WINDOW) private window: Window,
               private translate: TranslateService) {
@@ -87,7 +88,7 @@ export class UtilsService {
         type: 'widgetException',
         data
       };
-      this.window.parent.postMessage(message, '*');
+      this.window.parent.postMessage(JSON.stringify(message), '*');
     }
     return data;
   }

@@ -95,6 +95,10 @@ export function isNumber(value: any): boolean {
   return typeof value === 'number';
 }
 
+export function isString(value: any): boolean {
+  return typeof value === 'string';
+}
+
 export function objToBase64(obj: any): string {
   const json = JSON.stringify(obj);
   const encoded = utf8Encode(json);

+///
+/// Copyright © 2016-2019 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '@shared/shared.module';
+import { HomeComponentsModule } from '@modules/home/components/home-components.module';
+import { HomeDialogsModule } from '@app/modules/home/dialogs/home-dialogs.module';
+import { DashboardModule } from '@home/pages/dashboard/dashboard.module';
+import { DashboardPagesRoutingModule } from './dashboard-pages.routing.module';
+
+@NgModule({
+  entryComponents: [],
+  imports: [
+    CommonModule,
+    SharedModule,
+    HomeComponentsModule,
+    HomeDialogsModule,
+    DashboardModule,
+    DashboardPagesRoutingModule
+  ]
+})
+export class DashboardPagesModule { }

+///
+/// Copyright © 2016-2019 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Injectable, NgModule } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve, RouterModule, Routes } from '@angular/router';
+
+import {Authority} from '@shared/models/authority.enum';
+import { DashboardPageComponent } from '@home/pages/dashboard/dashboard-page.component';
+import { BreadCrumbConfig, BreadCrumbLabelFunction } from '@shared/components/breadcrumb';
+import { widgetTypesBreadcumbLabelFunction } from '@home/pages/widget/widget-library-routing.module';
+import { WidgetsBundle } from '@shared/models/widgets-bundle.model';
+import { WidgetService } from '@core/http/widget.service';
+import { Observable } from 'rxjs';
+import { Dashboard } from '@app/shared/models/dashboard.models';
+import { DashboardService } from '@core/http/dashboard.service';
+import { DashboardUtilsService } from '@core/services/dashboard-utils.service';
+import { map } from 'rxjs/operators';
+import { dashboardBreadcumbLabelFunction, DashboardResolver } from '@app/modules/home/pages/dashboard/dashboard-routing.module';
+import { UtilsService } from '@core/services/utils.service';
+import { Widget } from '@app/shared/models/widget.models';
+
+@Injectable()
+export class WidgetEditorDashboardResolver implements Resolve<Dashboard> {
+
+  constructor(private dashboardService: DashboardService,
+              private dashboardUtils: DashboardUtilsService,
+              private utils: UtilsService) {
+  }
+
+  resolve(route: ActivatedRouteSnapshot): Dashboard {
+    const editWidgetInfo = this.utils.editWidgetInfo;
+    const widget: Widget = {
+      isSystemType: true,
+      bundleAlias: 'customWidgetBundle',
+      typeAlias: 'customWidget',
+      type: editWidgetInfo.type,
+      title: 'My widget',
+      sizeX: editWidgetInfo.sizeX * 2,
+      sizeY: editWidgetInfo.sizeY * 2,
+      row: 2,
+      col: 4,
+      config: JSON.parse(editWidgetInfo.defaultConfig)
+    };
+    widget.config.title = widget.config.title || editWidgetInfo.widgetName;
+    return this.dashboardUtils.createSingleWidgetDashboard(widget);
+  }
+}
+
+const routes: Routes = [
+  {
+    path: 'dashboard/:dashboardId',
+    component: DashboardPageComponent,
+    data: {
+      breadcrumb: {
+        skip: true
+      },
+      auth: [Authority.TENANT_ADMIN, Authority.CUSTOMER_USER],
+      title: 'dashboard.dashboard',
+      widgetEditMode: false,
+      singlePageMode: true
+    },
+    resolve: {
+      dashboard: DashboardResolver
+    }
+  },
+  {
+    path: 'widget-editor',
+    component: DashboardPageComponent,
+    data: {
+      breadcrumb: {
+        skip: true
+      },
+      auth: [Authority.SYS_ADMIN, Authority.TENANT_ADMIN],
+      title: 'widget.editor',
+      widgetEditMode: true,
+      singlePageMode: true
+    },
+    resolve: {
+      dashboard: WidgetEditorDashboardResolver
+    }
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+  providers: [
+    WidgetEditorDashboardResolver
+  ]
+})
+export class DashboardPagesRoutingModule { }

+///
+/// Copyright © 2016-2019 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { AuthGuard } from '@core/guards/auth.guard';
+import { StoreModule } from '@ngrx/store';
+
+const routes: Routes = [
+  { path: '',
+    data: {
+      title: 'dashboard.dashboard',
+      breadcrumb: {
+        skip: true
+      }
+    },
+    canActivate: [AuthGuard],
+    canActivateChild: [AuthGuard],
+    loadChildren: './dashboard-pages.module#DashboardPagesModule'
+  }
+];
+
+@NgModule({
+  imports: [
+    StoreModule,
+    RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class DashboardRoutingModule { }

+<!--
+
+    Copyright © 2016-2019 The Thingsboard Authors
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<div fxLayout="column" class="mat-content mat-padding">
+  <div fxLayout="row" *ngFor="let alias of entityAliasesInfo | keyvalue">
+    <mat-form-field>
+      <mat-label>{{alias.value.alias}}</mat-label>
+      <mat-select matInput [(ngModel)]="alias.value.selectedId"
+                  (ngModelChange)="currentAliasEntityChanged(alias.key, alias.value.selectedId)">
+        <mat-option *ngFor="let resolvedEntity of alias.value.resolvedEntities" [value]="resolvedEntity.id">
+          {{resolvedEntity.name}}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+  </div>
+</div>

+/**
+ * Copyright © 2016-2019 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+:host {
+  min-width: 300px;
+  max-height: 150px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow:
+    0 7px 8px -4px rgba(0, 0, 0, .2),
+    0 13px 19px 2px rgba(0, 0, 0, .14),
+    0 5px 24px 4px rgba(0, 0, 0, .12);
+
+  @media (min-height: 350px) {
+    max-height: 250px;
+  }
+
+  .mat-content {
+    background-color: #fff;
+  }
+}

+///
+/// Copyright © 2016-2019 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Component, Inject, InjectionToken, OnInit } from '@angular/core';
+import { Timewindow } from '@shared/models/time/time.models';
+import { AliasInfo, IAliasController } from '@core/api/widget-api.models';
+import { PageComponent } from '@shared/components/page.component';
+import { TIMEWINDOW_PANEL_DATA, TimewindowPanelData } from '@shared/components/time/timewindow-panel.component';
+import { deepClone } from '@core/utils';
+
+export const ALIASES_ENTITY_SELECT_PANEL_DATA = new InjectionToken<any>('AliasesEntitySelectPanelData');
+
+export interface AliasesEntitySelectPanelData {
+  aliasController: IAliasController;
+}
+
+@Component({
+  selector: 'tb-aliases-entity-select-panel',
+  templateUrl: './aliases-entity-select-panel.component.html',
+  styleUrls: ['./aliases-entity-select-panel.component.scss']
+})
+export class AliasesEntitySelectPanelComponent {
+
+  entityAliasesInfo: {[aliasId: string]: AliasInfo} = {};
+
+  constructor(@Inject(ALIASES_ENTITY_SELECT_PANEL_DATA) public data: AliasesEntitySelectPanelData) {
+    const allEntityAliases = this.data.aliasController.getEntityAliases();
+    for (const aliasId of Object.keys(allEntityAliases)) {
+      const aliasInfo = this.data.aliasController.getInstantAliasInfo(aliasId);
+      if (aliasInfo && !aliasInfo.resolveMultiple && aliasInfo.currentEntity
+        && aliasInfo.resolvedEntities.length > 1) {
+        this.entityAliasesInfo[aliasId] = deepClone(aliasInfo);
+        this.entityAliasesInfo[aliasId].selectedId = aliasInfo.currentEntity.id;
+      }
+    }
+  }
+
+  public currentAliasEntityChanged(aliasId: string, selectedId: string) {
+    const resolvedEntities = this.entityAliasesInfo[aliasId].resolvedEntities;
+    const selected = resolvedEntities.find((entity) => entity.id === selectedId);
+    if (selected) {
+      this.data.aliasController.updateCurrentAliasEntity(aliasId, selected[0]);
+    }
+  }
+
+
+}

+<!--
+
+    Copyright © 2016-2019 The Thingsboard Authors
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<section class="tb-aliases-entity-select" fxLayout="row" fxLayoutAlign="start center">
+  <button mat-button mat-icon-button
+          cdkOverlayOrigin #aliasEntitySelectPanelOrigin="cdkOverlayOrigin"
+          (click)="openEditMode()"
+          matTooltip="{{ 'entity.select-entities' | translate }}"
+          [matTooltipPosition]="tooltipPosition">
+    <mat-icon class="material-icons">devices_other</mat-icon>
+  </button>
+  <span fxHide.xs fxHide.sm fxHide.md
+        (click)="openEditMode()"
+        matTooltip="{{ 'entity.select-entities' | translate }}"
+        [matTooltipPosition]="tooltipPosition">
+    {{displayValue}}
+  </span>
+</section>

+/**
+ * Copyright © 2016-2019 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@import "../../../../../scss/constants";
+
+:host {
+  min-width: 52px;
+
+  section.tb-aliases-entity-select {
+    min-height: 32px;
+    padding: 0 6px;
+
+    @media #{$mat-lt-md} {
+      padding: 0;
+    }
+
+    span {
+      max-width: 200px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}

+///
+/// Copyright © 2016-2019 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Component, Inject, Input, OnDestroy, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
+import { TooltipPosition } from '@angular/material';
+import { IAliasController } from '@core/api/widget-api.models';
+import { CdkOverlayOrigin, ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
+import { TranslateService } from '@ngx-translate/core';
+import { Subscription } from 'rxjs';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { DOCUMENT } from '@angular/common';
+import { WINDOW } from '@core/services/window.service';
+import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
+import {
+  ALIASES_ENTITY_SELECT_PANEL_DATA,
+  AliasesEntitySelectPanelComponent,
+  AliasesEntitySelectPanelData
+} from './aliases-entity-select-panel.component';
+
+@Component({
+  selector: 'tb-aliases-entity-select',
+  templateUrl: './aliases-entity-select.component.html',
+  styleUrls: ['./aliases-entity-select.component.scss']
+})
+export class AliasesEntitySelectComponent implements OnInit, OnDestroy {
+
+  @Input()
+  aliasController: IAliasController;
+
+  @Input()
+  tooltipPosition: TooltipPosition = 'above';
+
+  @Input() disabled: boolean;
+
+  @ViewChild('aliasEntitySelectPanelOrigin', {static: false}) aliasEntitySelectPanelOrigin: CdkOverlayOrigin;
+
+  displayValue: string;
+
+  private rxSubscriptions = new Array<Subscription>();
+
+  constructor(private translate: TranslateService,
+              private overlay: Overlay,
+              private breakpointObserver: BreakpointObserver,
+              private viewContainerRef: ViewContainerRef,
+              @Inject(DOCUMENT) private document: Document,
+              @Inject(WINDOW) private window: Window) {
+  }
+
+  ngOnInit(): void {
+    this.rxSubscriptions.push(this.aliasController.entityAliasesChanged.subscribe(
+      () => {
+        this.updateDisplayValue();
+      }
+    ));
+    this.rxSubscriptions.push(this.aliasController.entityAliasResolved.subscribe(
+      () => {
+        this.updateDisplayValue();
+      }
+    ));
+  }
+
+  ngOnDestroy(): void {
+    this.rxSubscriptions.forEach((subscription) => {
+      subscription.unsubscribe();
+    });
+    this.rxSubscriptions.length = 0;
+  }
+
+  openEditMode() {
+    if (this.disabled) {
+      return;
+    }
+    const panelHeight = this.breakpointObserver.isMatched('min-height: 350px') ? 250 : 150;
+    const panelWidth = 300;
+    const position = this.overlay.position();
+    const config = new OverlayConfig({
+      panelClass: 'tb-aliases-entity-select-panel',
+      backdropClass: 'cdk-overlay-transparent-backdrop',
+      hasBackdrop: true,
+    });
+    const el = this.aliasEntitySelectPanelOrigin.elementRef.nativeElement;
+    const offset = el.getBoundingClientRect();
+    const scrollTop = this.window.pageYOffset || this.document.documentElement.scrollTop || this.document.body.scrollTop || 0;
+    const scrollLeft = this.window.pageXOffset || this.document.documentElement.scrollLeft || this.document.body.scrollLeft || 0;
+    const bottomY = offset.bottom - scrollTop;
+    const leftX = offset.left - scrollLeft;
+    let originX;
+    let originY;
+    let overlayX;
+    let overlayY;
+    const wHeight = this.document.documentElement.clientHeight;
+    const wWidth = this.document.documentElement.clientWidth;
+    if (bottomY + panelHeight > wHeight) {
+      originY = 'top';
+      overlayY = 'bottom';
+    } else {
+      originY = 'bottom';
+      overlayY = 'top';
+    }
+    if (leftX + panelWidth > wWidth) {
+      originX = 'end';
+      overlayX = 'end';
+    } else {
+      originX = 'start';
+      overlayX = 'start';
+    }
+    const connectedPosition: ConnectedPosition = {
+      originX,
+      originY,
+      overlayX,
+      overlayY
+    };
+    config.positionStrategy = position.flexibleConnectedTo(this.aliasEntitySelectPanelOrigin.elementRef)
+      .withPositions([connectedPosition]);
+    const overlayRef = this.overlay.create(config);
+    overlayRef.backdropClick().subscribe(() => {
+      overlayRef.dispose();
+    });
+
+    const injector = this._createAliasesEntitySelectPanelInjector(
+      overlayRef,
+      {
+        aliasController: this.aliasController
+      }
+    );
+    overlayRef.attach(new ComponentPortal(AliasesEntitySelectPanelComponent, this.viewContainerRef, injector));
+  }
+
+  private _createAliasesEntitySelectPanelInjector(overlayRef: OverlayRef, data: AliasesEntitySelectPanelData): PortalInjector {
+    const injectionTokens = new WeakMap<any, any>([
+      [ALIASES_ENTITY_SELECT_PANEL_DATA, data],
+      [OverlayRef, overlayRef]
+    ]);
+    return new PortalInjector(this.viewContainerRef.injector, injectionTokens);
+  }
+
+  private updateDisplayValue() {
+    let displayValue;
+    let singleValue = true;
+    let currentAliasId;
+    const entityAliases = this.aliasController.getEntityAliases();
+    for (const aliasId of Object.keys(entityAliases)) {
+      const entityAlias = entityAliases[aliasId];
+      if (!entityAlias.filter.resolveMultiple) {
+        const resolvedAlias = this.aliasController.getInstantAliasInfo(aliasId);
+        if (resolvedAlias && resolvedAlias.currentEntity) {
+          if (!currentAliasId) {
+            currentAliasId = aliasId;
+          } else {
+            singleValue = false;
+            break;
+          }
+        }
+      }
+    }
+    if (singleValue && currentAliasId) {
+      const aliasInfo = this.aliasController.getInstantAliasInfo(currentAliasId);
+      displayValue = aliasInfo.currentEntity.name;
+    } else {
+      displayValue = this.translate.instant('entity.entities');
+    }
+    this.displayValue = displayValue;
+  }
+
+}

@@ -38,6 +38,8 @@ import { DashboardComponent } from '@home/components/dashboard/dashboard.compone
 import { WidgetComponent } from '@home/components/widget/widget.component';
 import { WidgetComponentService } from './widget/widget-component.service';
 import { LegendComponent } from '@home/components/widget/legend.component';
+import { AliasesEntitySelectPanelComponent } from '@home/components/alias/aliases-entity-select-panel.component';
+import { AliasesEntitySelectComponent } from '@home/components/alias/aliases-entity-select.component';
 
 @NgModule({
   entryComponents: [
@@ -48,7 +50,8 @@ import { LegendComponent } from '@home/components/widget/legend.component';
     AlarmTableHeaderComponent,
     AlarmDetailsDialogComponent,
     AddAttributeDialogComponent,
-    EditAttributeValuePanelComponent
+    EditAttributeValuePanelComponent,
+    AliasesEntitySelectPanelComponent
   ],
   declarations:
     [
@@ -69,6 +72,8 @@ import { LegendComponent } from '@home/components/widget/legend.component';
       AttributeTableComponent,
       AddAttributeDialogComponent,
       EditAttributeValuePanelComponent,
+      AliasesEntitySelectPanelComponent,
+      AliasesEntitySelectComponent,
       DashboardComponent,
       WidgetComponent,
       LegendComponent
@@ -89,6 +94,7 @@ import { LegendComponent } from '@home/components/widget/legend.component';
     AlarmTableComponent,
     AlarmDetailsDialogComponent,
     AttributeTableComponent,
+    AliasesEntitySelectComponent,
     DashboardComponent,
     WidgetComponent,
     LegendComponent

@@ -61,10 +61,9 @@ import {
   WidgetTypeInstance
 } from '@home/models/widget-component.models';
 import {
-  EntityInfo,
   IWidgetSubscription,
   StateObject,
-  StateParams,
+  StateParams, SubscriptionEntityInfo,
   SubscriptionInfo,
   WidgetSubscriptionContext,
   WidgetSubscriptionOptions
@@ -1065,7 +1064,7 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
     this.store.dispatch(new ActionNotificationShow({message: messageToShow, type: 'error'}));
   }
 
-  private getActiveEntityInfo(): EntityInfo {
+  private getActiveEntityInfo(): SubscriptionEntityInfo {
     let entityInfo = this.widgetContext.activeEntityInfo;
     if (!entityInfo) {
       for (const id of Object.keys(this.widgetContext.subscriptions)) {

@@ -38,7 +38,7 @@
         <button mat-button mat-icon-button id="main" fxHide.gt-sm (click)="sidenav.toggle()">
           <mat-icon class="material-icons">menu</mat-icon>
         </button>
-        <div fxFlex tb-breadcrumb class="mat-toolbar-tools">
+        <div fxFlex tb-breadcrumb [activeComponent]="activeComponent" class="mat-toolbar-tools">
         </div>
         <button *ngIf="fullscreenEnabled" mat-button mat-icon-button fxHide.xs fxHide.sm (click)="toggleFullscreen()">
           <mat-icon class="material-icons">{{ isFullscreen() ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
@@ -49,7 +49,7 @@
                         *ngIf="isLoading$ | async">
       </mat-progress-bar>
       <div fxFlex fxLayout="column" tb-toast class="tb-main-content">
-        <router-outlet></router-outlet>
+        <router-outlet (activate)="activeComponent = $event;"></router-outlet>
       </div>
     </div>
   </mat-sidenav-content>

@@ -40,6 +40,8 @@ import { MatSidenav } from '@angular/material';
 })
 export class HomeComponent extends PageComponent implements OnInit {
 
+  activeComponent: any;
+
   sidenavMode = 'side';
   sidenavOpened = true;
 

@@ -31,12 +31,11 @@ import {
 } from '@shared/models/widget.models';
 import { Timewindow, WidgetTimewindow } from '@shared/models/time/time.models';
 import {
-  EntityInfo,
   IAliasController,
   IStateController,
   IWidgetSubscription,
   IWidgetUtils,
-  RpcApi,
+  RpcApi, SubscriptionEntityInfo,
   TimewindowFunctions,
   WidgetActionsApi,
   WidgetSubscriptionApi
@@ -85,7 +84,7 @@ export interface WidgetContext {
   actionsApi?: WidgetActionsApi;
   stateController?: IStateController;
   aliasController?: IAliasController;
-  activeEntityInfo?: EntityInfo;
+  activeEntityInfo?: SubscriptionEntityInfo;
   widgetTitleTemplate?: string;
   widgetTitle?: string;
   customHeaderActions?: Array<WidgetHeaderAction>;

+<!--
+
+    Copyright © 2016-2019 The Thingsboard Authors
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<div class="tb-dashboard-page mat-content" style="padding-top: 150px;"
+     fxFlex tb-fullscreen [fullscreen]="widgetEditMode || iframeMode || forceFullscreen || isFullscreen">
+  <section class="tb-dashboard-toolbar"
+           [ngClass]="{ 'tb-dashboard-toolbar-opened': toolbarOpened, 'tb-dashboard-toolbar-closed': !toolbarOpened }">
+    <tb-dashboard-toolbar [fxShow]="!widgetEditMode" [forceFullscreen]="forceFullscreen"
+                          [toolbarOpened]="toolbarOpened" (triggerClick)="openToolbar()">
+      <div class="tb-dashboard-action-panels" fxLayout="column-reverse" fxLayout.gt-sm="row-reverse"
+           fxLayoutAlign="center stretch" fxLayoutAlign.gt-sm="space-between center">
+        <div class="tb-dashboard-action-panel" fxFlex.md="30" fxLayout="row-reverse"
+             fxLayoutAlign.gt-sm="start center" fxLayoutAlign="space-between center" fxLayoutGap="12px">
+          <button [fxShow]="showCloseToolbar()" mat-button mat-icon-button class="close-action"
+                  matTooltip="{{ 'dashboard.close-toolbar' | translate }}"
+                  matTooltipPosition="below"
+                  (click)="closeToolbar()">
+            <mat-icon>arrow_forward</mat-icon>
+          </button>
+          <tb-user-menu *ngIf="isPublicUser() && forceFullscreen" fxHide.xs fxHide.sm displayUserInfo="true">
+          </tb-user-menu>
+          <button [fxShow]="showRightLayoutSwitch()" mat-button mat-icon-button
+                  matTooltip="{{ (isRightLayoutOpened ? 'dashboard.hide-details' : 'dashboard.show-details') | translate }}"
+                  matTooltipPosition="below"
+                  (click)="toggleLayouts()">
+            <mat-icon>{{isRightLayoutOpened ? 'arrow_back' : 'menu'}}</mat-icon>
+          </button>
+          <button [fxShow]="!hideFullscreenButton()" mat-button mat-icon-button
+                  matTooltip="{{(isFullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
+                  matTooltipPosition="below"
+                  (click)="isFullscreen = !isFullscreen">
+            <mat-icon>{{ isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
+          </button>
+          <button [fxShow]="isEdit || displayExport()" mat-button mat-icon-button
+                  matTooltip="{{'dashboard.export' | translate}}"
+                  matTooltipPosition="below"
+                  (click)="exportDashboard($event)">
+            <mat-icon>file_download</mat-icon>
+          </button>
+          <tb-timewindow [fxShow]="isEdit || displayDashboardTimewindow()"
+                         isToolbar="true"
+                         direction="left"
+                         tooltipPosition="below"
+                         aggregation="true"
+                         [(ngModel)]="dashboardCtx.dashboardTimewindow">
+          </tb-timewindow>
+          <tb-aliases-entity-select [fxShow]="!isEdit && displayEntitiesSelect()"
+                                    tooltipPosition="below"
+                                    [aliasController]="dashboardCtx.aliasController">
+          </tb-aliases-entity-select>
+          <button [fxShow]="isEdit" mat-button mat-icon-button
+                  matTooltip="{{ 'entity.aliases' | translate }}"
+                  matTooltipPosition="below"
+                  (click)="openEntityAliases($event)">
+            <mat-icon>devices_other</mat-icon>
+          </button>
+          <button [fxShow]="isEdit" mat-button mat-icon-button
+                  matTooltip="{{ 'dashboard.settings' | translate }}"
+                  matTooltipPosition="below"
+                  (click)="openDashboardSettings($event)">
+            <mat-icon>settings</mat-icon>
+          </button>
+          <tb-dashboard-select [fxShow]="!isEdit && !widgetEditMode && displayDashboardsSelect()"
+                               [(ngModel)]="currentDashboardId"
+                               (ngModelChange)="currentDashboardIdChanged(currentDashboardId)"
+                               [customerId]="currentCustomerId"
+                               [dashboardsScope]="currentDashboardScope">
+          </tb-dashboard-select>
+        </div>
+        <div class="tb-dashboard-action-panel" fxFlex.md="70" fxLayout="row-reverse"
+             fxLayoutAlign.gt-sm="end center" fxLayoutAlign="space-between center" fxLayoutGap="12px">
+          <tb-user-menu *ngIf="!isPublicUser() && forceFullscreen" fxHide.gt-sm displayUserInfo="true">
+          </tb-user-menu>
+          <!-- TODO -->
+        </div>
+      </div>
+    </tb-dashboard-toolbar>
+  </section>
+  <section class="tb-dashboard-container tb-absolute-fill"
+           [ngClass]="{ 'is-fullscreen': forceFullscreen,
+           'tb-dashboard-toolbar-opened': toolbarOpened,
+           'tb-dashboard-toolbar-closed': !toolbarOpened }">
+    <section *ngIf="!widgetEditMode" class="tb-dashboard-title" fxLayout="row" fxLayoutAlign="center center"
+             [ngStyle]="{'color': dashboard.configuration.settings.titleColor}">
+      <h3 [fxShow]="!isEdit && displayTitle()">{{ dashboard.title }}</h3>
+      <mat-form-field [fxShow]="isEdit" class="mat-block" style="height: 30px;">
+        <mat-label translate [ngStyle]="{'color': dashboard.configuration.settings.titleColor}">dashboard.title</mat-label>
+        <input matInput class="tb-dashboard-title"
+               [ngStyle]="{'color': dashboard.configuration.settings.titleColor}"
+               required name="title" [(ngModel)]="dashboard.title">
+      </mat-form-field>
+    </section>
+    <div class="tb-absolute-fill tb-dashboard-layouts" fxLayout="{{forceDashboardMobileMode ? 'column' : 'row'}}"
+         [ngClass]="{ 'tb-padded' : !widgetEditMode && (isEdit || displayTitle()), 'tb-shrinked' : isEditingWidget }">
+      <div [fxShow]="layouts.main.show"
+           id="tb-main-layout"
+           [ngStyle]="{width: mainLayoutWidth(),
+                       height: mainLayoutHeight()}">
+        TODO: MAIN LAYOUT tb-dashboard-layout
+      </div>
+      <mat-sidenav-container *ngIf="layouts.right.show"
+                             id="tb-right-layout">
+        <mat-sidenav
+            [ngStyle]="{minWidth: rightLayoutWidth(),
+                        maxWidth: rightLayoutWidth(),
+                        height: rightLayoutHeight(),
+                        zIndex: 25}"
+            disableClose="true"
+            position="end"
+            [mode]="isMobile ? 'over' : 'side'"
+            [(opened)]="rightLayoutOpened">
+          TODO: RIGHT LAYOUT tb-dashboard-layout
+        </mat-sidenav>
+      </mat-sidenav-container>
+    </div>
+    <!--tb-details-sidenav TODO -->
+    <!--tb-details-sidenav TODO -->
+    <section fxLayout="row" class="layout-wrap tb-footer-buttons" fxLayoutAlign="start end">
+      <!--md-fab-speed-dial TODO -->
+      <button *ngIf="(isTenantAdmin() || isSystemAdmin()) && !forceFullscreen"
+              mat-fab color="accent" class="tb-btn-footer"
+              [ngClass]="{'tb-hide': !isEdit || isAddingWidget}"
+              [disabled]="isLoading$ | async"
+              (click)="saveDashboard()"
+              matTooltip="{{ 'action.apply-changes' | translate }}"
+              matTooltipPosition="above">
+        <mat-icon>done</mat-icon>
+      </button>
+      <button *ngIf="(isTenantAdmin() || isSystemAdmin()) && !forceFullscreen"
+              mat-fab color="accent" class="tb-btn-footer"
+              [ngClass]="{'tb-hide': isAddingWidget || (isLoading$ | async)}"
+              [disabled]="isLoading$ | async"
+              (click)="toggleDashboardEditMode()"
+              matTooltip="{{ (isEdit ? 'action.decline-changes': 'action.enter-edit-mode') | translate }}"
+              matTooltipPosition="above">
+        <mat-icon>{{ isEdit ? 'close' : 'edit' }}</mat-icon>
+      </button>
+    </section>
+  </section>
+  <section class="tb-powered-by-footer" [ngStyle]="{'color': dashboard.configuration.settings.titleColor}">
+    <span>Powered by <a href="https://thingsboard.io" target="_blank">Thingsboard v.{{ thingsboardVersion }}</a></span>
+  </section>
+</div>

+/**
+ * Copyright © 2016-2019 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import "../../../../../scss/constants";
+
+$toolbar-height: 50px !default;
+$fullscreen-toolbar-height: 64px !default;
+$mobile-toolbar-height: 84px !default;
+
+tb-dashboard-page {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+
+div.tb-dashboard-page {
+  &.mat-content {
+    background-color: #eee;
+  }
+  section.tb-dashboard-title {
+    position: absolute;
+    top: 0;
+    left: 20px;
+    mat-form-field {
+      .mat-form-field-infix {
+        width: 100%;
+      }
+    }
+    input.tb-dashboard-title {
+      height: 38px;
+      font-size: 2rem;
+      font-weight: 500;
+      letter-spacing: .005em;
+    }
+  }
+  div.tb-padded {
+    top: 60px;
+  }
+
+  section.tb-padded {
+    top: 60px;
+  }
+
+  div.tb-shrinked {
+    width: 40%;
+  }
+
+  section.tb-dashboard-toolbar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 13;
+    pointer-events: none;
+
+    &.tb-dashboard-toolbar-opened {
+      right: 0;
+      // transition: right .3s cubic-bezier(.55, 0, .55, .2);
+    }
+
+    &.tb-dashboard-toolbar-closed {
+      right: 18px;
+      transition: right .3s cubic-bezier(.55, 0, .55, .2) .2s;
+    }
+  }
+
+  .tb-dashboard-container {
+    &.tb-dashboard-toolbar-opened {
+      &.is-fullscreen {
+        margin-top: $mobile-toolbar-height;
+
+        @media #{$mat-gt-sm} {
+          margin-top: $fullscreen-toolbar-height;
+        }
+      }
+
+      &:not(.is-fullscreen) {
+        margin-top: $mobile-toolbar-height;
+
+        @media #{$mat-gt-sm} {
+          margin-top: $toolbar-height;
+        }
+
+        transition: margin-top .3s cubic-bezier(.55, 0, .55, .2);
+      }
+    }
+
+    &.tb-dashboard-toolbar-closed {
+      margin-top: 0;
+
+      transition: margin-top .3s cubic-bezier(.55, 0, .55, .2) .2s;
+    }
+
+    .tb-dashboard-layouts {
+      /*md-backdrop {
+        z-index: 1;
+      }*/
+      #tb-right-layout {
+        mat-sidenav {
+          z-index: 1;
+        }
+      }
+    }
+  }
+
+  section.tb-powered-by-footer {
+    position: absolute;
+    right: 25px;
+    bottom: 5px;
+    z-index: 30;
+    pointer-events: none;
+
+    span {
+      font-size: 12px;
+
+      a {
+        font-weight: 700;
+        text-decoration: none;
+        pointer-events: all;
+        border: none;
+      }
+    }
+  }
+
+}

+///
+/// Copyright © 2016-2019 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Component, Inject, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { PageComponent } from '@shared/components/page.component';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { ActivatedRoute, Router } from '@angular/router';
+import { UtilsService } from '@core/services/utils.service';
+import { AuthService } from '@core/auth/auth.service';
+import { Dashboard, DashboardConfiguration, WidgetLayout } from '@app/shared/models/dashboard.models';
+import { WINDOW } from '@core/services/window.service';
+import { WindowMessage } from '@shared/models/window-message.model';
+import { deepClone, isDefined } from '@app/core/utils';
+import {
+  DashboardContext,
+  DashboardPageLayoutContext,
+  DashboardPageLayouts,
+  DashboardPageScope
+} from './dashboard-page.models';
+import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
+import { MediaBreakpoints } from '@shared/models/constants';
+import { AuthUser } from '@shared/models/user.model';
+import { getCurrentAuthUser } from '@core/auth/auth.selectors';
+import { Widget } from '@app/shared/models/widget.models';
+import { environment as env } from '@env/environment';
+import { Authority } from '@shared/models/authority.enum';
+import { DialogService } from '@core/services/dialog.service';
+import { EntityService } from '@core/http/entity.service';
+import { AliasController } from '@core/api/alias-controller';
+import { Subscription } from 'rxjs';
+
+@Component({
+  selector: 'tb-dashboard-page',
+  templateUrl: './dashboard-page.component.html',
+  styleUrls: ['./dashboard-page.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class DashboardPageComponent extends PageComponent implements OnDestroy {
+
+  authUser: AuthUser = getCurrentAuthUser(this.store);
+
+  dashboard: Dashboard;
+  dashboardConfiguration: DashboardConfiguration;
+
+  prevDashboard: Dashboard;
+
+  iframeMode = this.utils.iframeMode;
+  widgetEditMode: boolean;
+  singlePageMode: boolean;
+  forceFullscreen = this.authService.forceFullscreen;
+
+  isFullscreen = false;
+  isEdit = false;
+  isEditingWidget = false;
+  isMobile = !this.breakpointObserver.isMatched(MediaBreakpoints['gt-sm']);
+  forceDashboardMobileMode = false;
+  isAddingWidget = false;
+
+  isToolbarOpened = false;
+  isRightLayoutOpened = false;
+
+  editingWidget: Widget = null;
+  editingWidgetLayout: WidgetLayout = null;
+  editingWidgetOriginal: Widget = null;
+  editingWidgetLayoutOriginal: WidgetLayout = null;
+  editingWidgetSubtitle: string = null;
+  editingLayoutCtx: DashboardPageLayoutContext = null;
+
+  thingsboardVersion: string = env.tbVersion;
+
+  currentDashboardId: string;
+  currentCustomerId: string;
+  currentDashboardScope: DashboardPageScope;
+
+  layouts: DashboardPageLayouts = {
+    main: {
+      show: false,
+      layoutCtx: {
+        id: 'main',
+        widgets: [],
+        widgetLayouts: {},
+        gridSettings: {},
+        ignoreLoading: false
+      }
+    },
+    right: {
+      show: false,
+      layoutCtx: {
+        id: 'right',
+        widgets: [],
+        widgetLayouts: {},
+        gridSettings: {},
+        ignoreLoading: false
+      }
+    }
+  };
+
+  dashboardCtx: DashboardContext = {
+    dashboard: null,
+    dashboardTimewindow: null,
+    state: null,
+    stateController: {
+      openRightLayout: this.openRightLayout.bind(this)
+    },
+    aliasController: null
+  };
+
+  private rxSubscriptions = new Array<Subscription>();
+
+  get toolbarOpened(): boolean {
+    return !this.widgetEditMode &&
+      (this.toolbarAlwaysOpen() || this.isToolbarOpened || this.isEdit || this.showRightLayoutSwitch());
+  }
+  set toolbarOpened(toolbarOpened: boolean) {
+  }
+
+  get rightLayoutOpened(): boolean {
+    return !this.isMobile || this.isRightLayoutOpened;
+  }
+  set rightLayoutOpened(rightLayoutOpened: boolean) {
+  }
+
+  constructor(protected store: Store<AppState>,
+              @Inject(WINDOW) private window: Window,
+              private breakpointObserver: BreakpointObserver,
+              private route: ActivatedRoute,
+              private router: Router,
+              private utils: UtilsService,
+              private authService: AuthService,
+              private entityService: EntityService,
+              private dialogService: DialogService) {
+    super(store);
+
+    this.rxSubscriptions.push(this.route.data.subscribe(
+      (data) => {
+        this.init(data);
+      }
+    ));
+
+    this.rxSubscriptions.push(this.breakpointObserver
+      .observe(MediaBreakpoints['gt-sm'])
+      .subscribe((state: BreakpointState) => {
+        this.isMobile = !state.matches;
+        }
+      ));
+  }
+
+  private init(data: any) {
+
+    this.reset();
+
+    this.currentDashboardId = this.route.snapshot.params.dashboardId;
+
+    if (this.route.snapshot.params.customerId) {
+      this.currentCustomerId = this.route.snapshot.params.customerId;
+      this.currentDashboardScope = 'customer';
+    } else {
+      this.currentDashboardScope = this.authUser.authority === Authority.TENANT_ADMIN ? 'tenant' : 'customer';
+      this.currentCustomerId = this.authUser.customerId;
+    }
+
+    this.dashboard = data.dashboard;
+    this.dashboardConfiguration = this.dashboard.configuration;
+    this.widgetEditMode = data.widgetEditMode;
+    this.singlePageMode = data.singlePageMode;
+
+    this.dashboardCtx.dashboard = this.dashboard;
+    this.dashboardCtx.dashboardTimewindow = this.dashboardConfiguration.timewindow;
+    this.dashboardCtx.aliasController = new AliasController(this.utils,
+      this.entityService,
+      this.dashboardCtx.stateController,
+      this.dashboardConfiguration.entityAliases);
+
+    if (this.widgetEditMode) {
+      const message: WindowMessage = {
+        type: 'widgetEditModeInited'
+      };
+      this.window.parent.postMessage(JSON.stringify(message), '*');
+    }
+  }
+
+  private reset() {
+    this.dashboard = null;
+    this.dashboardConfiguration = null;
+    this.prevDashboard = null;
+
+    this.widgetEditMode = false;
+    this.singlePageMode = false;
+
+    this.isFullscreen = false;
+    this.isEdit = false;
+    this.isEditingWidget = false;
+    this.forceDashboardMobileMode = false;
+    this.isAddingWidget = false;
+
+    this.isToolbarOpened = false;
+    this.isRightLayoutOpened = false;
+
+    this.editingWidget = null;
+    this.editingWidgetLayout = null;
+    this.editingWidgetOriginal = null;
+    this.editingWidgetLayoutOriginal = null;
+    this.editingWidgetSubtitle = null;
+    this.editingLayoutCtx = null;
+
+    this.currentDashboardId = null;
+    this.currentCustomerId = null;
+    this.currentDashboardScope = null;
+  }
+
+  ngOnDestroy(): void {
+    this.rxSubscriptions.forEach((subscription) => {
+      subscription.unsubscribe();
+    });
+    this.rxSubscriptions.length = 0;
+  }
+
+  public openToolbar() {
+    this.isToolbarOpened = true;
+  }
+
+  public closeToolbar() {
+    this.isToolbarOpened = false;
+  }
+
+  public showCloseToolbar() {
+    return !this.toolbarAlwaysOpen() && !this.isEdit && !this.showRightLayoutSwitch();
+  }
+
+  public hideFullscreenButton(): boolean {
+    return this.widgetEditMode || this.iframeMode || this.forceFullscreen || this.singlePageMode;
+  }
+
+  public toolbarAlwaysOpen(): boolean {
+    if (this.dashboard.configuration.settings &&
+      isDefined(this.dashboard.configuration.settings.toolbarAlwaysOpen)) {
+      return this.dashboard.configuration.settings.toolbarAlwaysOpen;
+    } else {
+      return true;
+    }
+  }
+
+  public displayTitle(): boolean {
+    if (this.dashboard.configuration.settings &&
+      isDefined(this.dashboard.configuration.settings.showTitle)) {
+      return this.dashboard.configuration.settings.showTitle;
+    } else {
+      return false;
+    }
+  }
+
+  public displayExport(): boolean {
+    if (this.dashboard.configuration.settings &&
+      isDefined(this.dashboard.configuration.settings.showDashboardExport)) {
+      return this.dashboard.configuration.settings.showDashboardExport;
+    } else {
+      return true;
+    }
+  }
+
+  public displayDashboardTimewindow(): boolean {
+    if (this.dashboard.configuration.settings &&
+      isDefined(this.dashboard.configuration.settings.showDashboardTimewindow)) {
+      return this.dashboard.configuration.settings.showDashboardTimewindow;
+    } else {
+      return true;
+    }
+  }
+
+  public displayDashboardsSelect(): boolean {
+    if (this.dashboard.configuration.settings &&
+      isDefined(this.dashboard.configuration.settings.showDashboardsSelect)) {
+      return this.dashboard.configuration.settings.showDashboardsSelect;
+    } else {
+      return true;
+    }
+  }
+
+  public displayEntitiesSelect(): boolean {
+    if (this.dashboard.configuration.settings &&
+      isDefined(this.dashboard.configuration.settings.showEntitiesSelect)) {
+      return this.dashboard.configuration.settings.showEntitiesSelect;
+    } else {
+      return true;
+    }
+  }
+
+  public showRightLayoutSwitch(): boolean {
+    return this.isMobile && this.layouts.right.show;
+  }
+
+  public toggleLayouts() {
+    this.isRightLayoutOpened = !this.isRightLayoutOpened;
+  }
+
+  public openRightLayout() {
+    this.isRightLayoutOpened = true;
+  }
+
+  public mainLayoutWidth(): string {
+    if (this.isEditingWidget && this.editingLayoutCtx.id === 'main') {
+      return '100%';
+    } else {
+      return this.layouts.right.show && !this.isMobile ? '50%' : '100%';
+    }
+  }
+
+  public mainLayoutHeight(): string {
+    if (!this.isEditingWidget || this.editingLayoutCtx.id === 'main') {
+      return '100%';
+    } else {
+      return '0px';
+    }
+  }
+
+  public rightLayoutWidth(): string {
+    if (this.isEditingWidget && this.editingLayoutCtx.id === 'right') {
+      return '100%';
+    } else {
+      return this.isMobile ? '100%' : '50%';
+    }
+  }
+
+  public rightLayoutHeight(): string {
+    if (!this.isEditingWidget || this.editingLayoutCtx.id === 'right') {
+      return '100%';
+    } else {
+      return '0px';
+    }
+  }
+
+  public isPublicUser(): boolean {
+    return this.authUser.isPublic;
+  }
+
+  public isTenantAdmin(): boolean {
+    return this.authUser.authority === Authority.TENANT_ADMIN;
+  }
+
+  public isSystemAdmin(): boolean {
+    return this.authUser.authority === Authority.SYS_ADMIN;
+  }
+
+  public exportDashboard($event: Event) {
+    if ($event) {
+      $event.stopPropagation();
+    }
+    // TODO:
+    this.dialogService.todo();
+  }
+
+  public openEntityAliases($event: Event) {
+    if ($event) {
+      $event.stopPropagation();
+    }
+    // TODO:
+    this.dialogService.todo();
+  }
+
+  public openDashboardSettings($event: Event) {
+    if ($event) {
+      $event.stopPropagation();
+    }
+    // TODO:
+    this.dialogService.todo();
+  }
+
+  public currentDashboardIdChanged(dashboardId: string) {
+    if (!this.widgetEditMode) {
+      if (this.currentDashboardScope === 'customer' && this.authUser.authority === Authority.TENANT_ADMIN) {
+        this.router.navigateByUrl(`customers/${this.currentCustomerId}/dashboards/${dashboardId}`);
+      } else {
+        if (this.singlePageMode) {
+          this.router.navigateByUrl(`dashboard/${dashboardId}`);
+        } else {
+          this.router.navigateByUrl(`dashboards/${dashboardId}`);
+        }
+      }
+    }
+  }
+
+  public toggleDashboardEditMode() {
+    this.setEditMode(!this.isEdit, true);
+  }
+
+  private setEditMode(isEdit: boolean, revert: boolean) {
+    this.isEdit = isEdit;
+    if (this.isEdit) {
+      // TODO:
+      // this.dashboardCtx.stateController.preserveState();
+      this.prevDashboard = deepClone(this.dashboard);
+    } else {
+      if (this.widgetEditMode) {
+        if (revert) {
+          this.dashboard = this.prevDashboard;
+        }
+      } else {
+        this.resetHighlight();
+        if (revert) {
+          this.dashboard = this.prevDashboard;
+          this.dashboardConfiguration = this.dashboard.configuration;
+          this.dashboardCtx.dashboardTimewindow = this.dashboardConfiguration.timewindow;
+          this.entityAliasesUpdated();
+        } else {
+          this.dashboard.configuration.timewindow = this.dashboardCtx.dashboardTimewindow;
+        }
+      }
+    }
+  }
+
+  private resetHighlight() {
+    for (const l of Object.keys(this.layouts)) {
+      if (this.layouts[l].layoutCtx) {
+        if (this.layouts[l].layoutCtx.ctrl) {
+          this.layouts[l].layoutCtx.ctrl.resetHighlight();
+        }
+      }
+    }
+  }
+
+  private entityAliasesUpdated() {
+    this.dashboardCtx.aliasController.updateEntityAliases(this.dashboard.configuration.entityAliases);
+  }
+}

+///
+/// Copyright © 2016-2019 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { DashboardLayoutId, GridSettings, WidgetLayout, Dashboard } from '@app/shared/models/dashboard.models';
+import { Widget } from '@app/shared/models/widget.models';
+import { Timewindow } from '@shared/models/time/time.models';
+import { IAliasController, IStateController } from '@core/api/widget-api.models';
+
+export declare type DashboardPageScope = 'tenant' | 'customer';
+
+export interface DashboardContext {
+  state: string;
+  dashboard: Dashboard;
+  dashboardTimewindow: Timewindow;
+  aliasController: IAliasController;
+  stateController: IStateController;
+}
+
+export interface DashboardPageLayoutContext {
+  id: DashboardLayoutId;
+  widgets: Array<Widget>;
+  widgetLayouts: {[id: string]: WidgetLayout};
+  gridSettings: GridSettings;
+  ignoreLoading: boolean;
+}
+
+export interface DashboardPageLayout {
+  show: boolean;
+  layoutCtx: DashboardPageLayoutContext;
+}
+
+export interface DashboardPageLayouts {
+  main: DashboardPageLayout;
+  right: DashboardPageLayout;
+}

@@ -14,12 +14,39 @@
 /// limitations under the License.
 ///
 
-import {NgModule} from '@angular/core';
-import {RouterModule, Routes} from '@angular/router';
+import { Injectable, NgModule } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve, RouterModule, Routes } from '@angular/router';
 
 import {EntitiesTableComponent} from '../../components/entity/entities-table.component';
 import {Authority} from '@shared/models/authority.enum';
 import {DashboardsTableConfigResolver} from './dashboards-table-config.resolver';
+import { DashboardPageComponent } from '@home/pages/dashboard/dashboard-page.component';
+import { BreadCrumbConfig, BreadCrumbLabelFunction } from '@shared/components/breadcrumb';
+import { widgetTypesBreadcumbLabelFunction } from '@home/pages/widget/widget-library-routing.module';
+import { WidgetsBundle } from '@shared/models/widgets-bundle.model';
+import { WidgetService } from '@core/http/widget.service';
+import { Observable } from 'rxjs';
+import { Dashboard } from '@app/shared/models/dashboard.models';
+import { DashboardService } from '@core/http/dashboard.service';
+import { DashboardUtilsService } from '@core/services/dashboard-utils.service';
+import { map } from 'rxjs/operators';
+
+@Injectable()
+export class DashboardResolver implements Resolve<Dashboard> {
+
+  constructor(private dashboardService: DashboardService,
+              private dashboardUtils: DashboardUtilsService) {
+  }
+
+  resolve(route: ActivatedRouteSnapshot): Observable<Dashboard> {
+    const dashboardId = route.params.dashboardId;
+    return this.dashboardService.getDashboard(dashboardId).pipe(
+      map((dashboard) => this.dashboardUtils.validateAndUpdateDashboard(dashboard))
+    );
+  }
+}
+
+export const dashboardBreadcumbLabelFunction: BreadCrumbLabelFunction = ((route, translate, component) => component.dashboard.title);
 
 const routes: Routes = [
   {
@@ -42,6 +69,22 @@ const routes: Routes = [
         resolve: {
           entitiesTableConfig: DashboardsTableConfigResolver
         }
+      },
+      {
+        path: ':dashboardId',
+        component: DashboardPageComponent,
+        data: {
+          breadcrumb: {
+            labelFunction: dashboardBreadcumbLabelFunction,
+            icon: 'dashboard'
+          } as BreadCrumbConfig,
+          auth: [Authority.TENANT_ADMIN, Authority.CUSTOMER_USER],
+          title: 'dashboard.dashboard',
+          widgetEditMode: false
+        },
+        resolve: {
+          dashboard: DashboardResolver
+        }
       }
     ]
   }
@@ -51,7 +94,8 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],
   providers: [
-    DashboardsTableConfigResolver
+    DashboardsTableConfigResolver,
+    DashboardResolver
   ]
 })
 export class DashboardRoutingModule { }

+<!--
+
+    Copyright © 2016-2019 The Thingsboard Authors
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<mat-fab-toolbar [isOpen]="toolbarOpened"
+                 color="primary"
+                 direction="left"
+                 [ngClass]="{'is-fullscreen': forceFullscreen, 'mat-elevation-z1': forceFullscreen && toolbarOpened }">
+  <mat-fab-trigger>
+    <button mat-button mat-icon-button mat-fab color="primary"
+            [matTooltip]="!toolbarOpened ? ('dashboard.open-toolbar' | translate) : ''"
+            matTooltipPosition="below"
+            (click)="onTriggerClick()">
+      <mat-icon>more_horiz</mat-icon>
+    </button>
+  </mat-fab-trigger>
+  <mat-toolbar color="primary">
+    <mat-fab-actions class="mat-toolbar-tools">
+      <ng-content></ng-content>
+    </mat-fab-actions>
+  </mat-toolbar>
+</mat-fab-toolbar>

+/**
+ * Copyright © 2016-2019 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@import "../../../../../scss/constants";
+
+$toolbar-height: 50px !default;
+$fullscreen-toolbar-height: 64px !default;
+$mobile-toolbar-height: 80px !default;
+$half-mobile-toolbar-height: 40px !default;
+$mobile-toolbar-height-total: 84px !default;
+
+tb-dashboard-toolbar {
+  mat-fab-toolbar {
+    mat-fab-trigger {
+      .mat-button {
+        &.mat-fab {
+          width: 36px;
+          height: 36px;
+          margin: 4px 0 0 4px;
+          line-height: 36px;
+          .mat-button-wrapper {
+            width: 36px;
+            height: 36px;
+            padding: 0 6px;
+            box-sizing: border-box;
+          }
+          mat-icon {
+            display: block;
+            position: absolute;
+            top: 25%;
+            width: 18px;
+            min-width: 18px;
+            height: 18px;
+            min-height: 18px;
+            margin: 0;
+            line-height: 18px;
+          }
+        }
+      }
+    }
+
+    &.is-fullscreen {
+
+      .mat-fab-toolbar-wrapper {
+        height: $mobile-toolbar-height-total;
+
+        @media #{$mat-gt-sm} {
+          height: $fullscreen-toolbar-height;
+        }
+
+        mat-toolbar {
+          height: $mobile-toolbar-height;
+          min-height: $mobile-toolbar-height;
+          .mat-toolbar-tools {
+            height: $mobile-toolbar-height;
+            min-height: $mobile-toolbar-height;
+          }
+          @media #{$mat-gt-sm} {
+            height: $fullscreen-toolbar-height;
+            min-height: $fullscreen-toolbar-height;
+            .mat-toolbar-tools {
+              height: $fullscreen-toolbar-height;
+              min-height: $fullscreen-toolbar-height;
+            }
+          }
+        }
+      }
+    }
+
+    .mat-fab-toolbar-wrapper {
+      height: $mobile-toolbar-height-total;
+
+      @media #{$mat-gt-sm} {
+        height: $toolbar-height;
+      }
+
+      mat-toolbar {
+        height: $mobile-toolbar-height;
+        min-height: $mobile-toolbar-height;
+        .mat-toolbar-tools {
+          height: $mobile-toolbar-height;
+          min-height: $mobile-toolbar-height;
+        }
+
+        @media #{$mat-gt-sm} {
+          height: $toolbar-height;
+          min-height: $toolbar-height;
+          .mat-toolbar-tools {
+            height: $toolbar-height;
+            min-height: $toolbar-height;
+          }
+        }
+
+        mat-fab-actions {
+          margin-top: 0;
+          font-size: 16px;
+
+          @media #{$mat-lt-md} {
+            height: $mobile-toolbar-height;
+            max-height: $mobile-toolbar-height;
+          }
+
+          .close-action {
+            margin-right: -18px;
+          }
+
+          .mat-fab-action-item {
+            width: 100%;
+            height: $mobile-toolbar-height;
+
+            @media #{$mat-gt-sm} {
+              height: 46px;
+            }
+
+            .tb-dashboard-action-panels {
+              height: $mobile-toolbar-height;
+
+              @media #{$mat-gt-sm} {
+                height: 46px;
+              }
+
+              .tb-dashboard-action-panel {
+                min-width: 0;
+                height: $half-mobile-toolbar-height;
+
+                @media #{$mat-lt-md} {
+                  mat-menu{
+                    margin: 0;
+                  }
+                }
+
+                @media #{$mat-gt-sm} {
+                  height: 46px;
+                }
+
+                > div {
+                  height: $half-mobile-toolbar-height;
+
+                  @media #{$mat-gt-sm} {
+                    height: 46px;
+                  }
+                }
+
+                mat-select {
+                  margin: 0;
+                  pointer-events: all;
+                }
+
+                tb-states-component {
+                  pointer-events: all;
+                }
+
+                button.mat-icon-button:not(.tb-mat-32) {
+                  min-width: 40px;
+
+                  @media #{$mat-lt-md} {
+                    min-width: 28px;
+                    padding: 2px;
+                    margin: 0;
+                    .mat-button-wrapper {
+                      display: block;
+                      line-height: 24px;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

+///
+/// Copyright © 2016-2019 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Component, OnDestroy, OnInit, ViewEncapsulation, Input, Output, EventEmitter } from '@angular/core';
+import { PageComponent } from '@shared/components/page.component';
+
+@Component({
+  selector: 'tb-dashboard-toolbar',
+  templateUrl: './dashboard-toolbar.component.html',
+  styleUrls: ['./dashboard-toolbar.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class DashboardToolbarComponent implements OnInit {
+
+  @Input()
+  toolbarOpened: boolean;
+
+  @Input()
+  forceFullscreen: boolean;
+
+  @Output()
+  triggerClick = new EventEmitter<void>();
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+  }
+
+  onTriggerClick() {
+    this.triggerClick.emit();
+  }
+
+}

@@ -14,16 +14,18 @@
 /// limitations under the License.
 ///
 
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {SharedModule} from '@shared/shared.module';
-import {HomeDialogsModule} from '../../dialogs/home-dialogs.module';
-import {DashboardFormComponent} from '@modules/home/pages/dashboard/dashboard-form.component';
-import {ManageDashboardCustomersDialogComponent} from '@modules/home/pages/dashboard/manage-dashboard-customers-dialog.component';
-import {DashboardRoutingModule} from './dashboard-routing.module';
-import {MakeDashboardPublicDialogComponent} from '@modules/home/pages/dashboard/make-dashboard-public-dialog.component';
-import {HomeComponentsModule} from '@modules/home/components/home-components.module';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '@shared/shared.module';
+import { HomeDialogsModule } from '../../dialogs/home-dialogs.module';
+import { DashboardFormComponent } from '@modules/home/pages/dashboard/dashboard-form.component';
+import { ManageDashboardCustomersDialogComponent } from '@modules/home/pages/dashboard/manage-dashboard-customers-dialog.component';
+import { DashboardRoutingModule } from './dashboard-routing.module';
+import { MakeDashboardPublicDialogComponent } from '@modules/home/pages/dashboard/make-dashboard-public-dialog.component';
+import { HomeComponentsModule } from '@modules/home/components/home-components.module';
 import { DashboardTabsComponent } from '@home/pages/dashboard/dashboard-tabs.component';
+import { DashboardPageComponent } from '@home/pages/dashboard/dashboard-page.component';
+import { DashboardToolbarComponent } from './dashboard-toolbar.component';
 
 @NgModule({
   entryComponents: [
@@ -36,7 +38,9 @@ import { DashboardTabsComponent } from '@home/pages/dashboard/dashboard-tabs.com
     DashboardFormComponent,
     DashboardTabsComponent,
     ManageDashboardCustomersDialogComponent,
-    MakeDashboardPublicDialogComponent
+    MakeDashboardPublicDialogComponent,
+    DashboardToolbarComponent,
+    DashboardPageComponent
   ],
   imports: [
     CommonModule,

@@ -303,9 +303,11 @@ export class DashboardsTableConfigResolver implements Resolve<EntityTableConfig<
     if ($event) {
       $event.stopPropagation();
     }
-    // TODO:
-    // this.router.navigateByUrl(`customers/${customer.id.id}/users`);
-    this.dialogService.todo();
+    if (this.config.componentsData.dashboardScope === 'customer') {
+      this.router.navigateByUrl(`customers/${this.config.componentsData.customerId}/dashboards/${dashboard.id.id}`);
+    } else {
+      this.router.navigateByUrl(`dashboards/${dashboard.id.id}`);
+    }
   }
 
   importDashboard($event: Event) {

+<!--
+
+    Copyright © 2016-2019 The Thingsboard Authors
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<form style="width: 800px;">
+  <mat-toolbar fxLayout="row" color="primary">
+    <h2 translate>widget.select-widget-type</h2>
+    <span fxFlex></span>
+    <button mat-button mat-icon-button
+            (click)="cancel()"
+            type="button">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  </mat-toolbar>
+  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
+  </mat-progress-bar>
+  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  <div mat-dialog-content>
+    <fieldset [disabled]="(isLoading$ | async)">
+      <div fxLayout="column" fxLayoutGap="16px" fxLayout.gt-sm="row" fxLayoutAlign="center center">
+        <button *ngFor="let type of allWidgetTypes;" class="tb-card-button" mat-button mat-raised-button color="primary"
+                type="button"
+                (click)="typeSelected(type)">
+          <mat-icon *ngIf="!widgetTypesDataMap.get(type).isMdiIcon; else mdiIconBlock" class="tb-mat-96">
+            {{ widgetTypesDataMap.get(type).icon }}
+          </mat-icon>
+          <ng-template #mdiIconBlock>
+            <mat-icon class="tb-mat-96" [svgIcon]="widgetTypesDataMap.get(type).icon">
+            </mat-icon>
+          </ng-template>
+          <span translate>{{ widgetTypesDataMap.get(type).name }}</span>
+        </button>
+      </div>
+    </fieldset>
+  </div>
+  <div mat-dialog-actions fxLayout="row">
+    <span fxFlex></span>
+    <button mat-button color="primary"
+            style="margin-right: 20px;"
+            type="button"
+            [disabled]="(isLoading$ | async)"
+            (click)="cancel()" cdkFocusInitial>
+      {{ 'action.cancel' | translate }}
+    </button>
+  </div>
+</form>

+/**
+ * Copyright © 2016-2019 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+:host ::ng-deep {
+  button.tb-card-button {
+    width: 100%;
+    height: 100%;
+    max-width: 240px;
+    .mat-button-wrapper {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      mat-icon {
+        margin: auto;
+      }
+      span {
+        height: 18px;
+        min-height: 18px;
+        max-height: 18px;
+        padding: 0 0 20px 0;
+        margin: auto;
+        font-size: 18px;
+        font-weight: 400;
+        line-height: 18px;
+        white-space: normal;
+      }
+    }
+    &.mat-raised-button.mat-primary {
+      .mat-ripple-element {
+        opacity: 0.3;
+        background-color: rgba(255, 255, 255, 0.3);
+      }
+    }
+  }
+}

+///
+/// Copyright © 2016-2019 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Component } from '@angular/core';
+import { MatDialogRef } from '@angular/material';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { DialogComponent } from '@shared/components/dialog.component';
+import { Router } from '@angular/router';
+import { widgetType, widgetTypesData } from '@shared/models/widget.models';
+
+@Component({
+  selector: 'tb-select-widget-type-dialog',
+  templateUrl: './select-widget-type-dialog.component.html',
+  styleUrls: ['./select-widget-type-dialog.component.scss']
+})
+export class SelectWidgetTypeDialogComponent extends
+  DialogComponent<SelectWidgetTypeDialogComponent, widgetType> {
+
+  widgetTypes = widgetType;
+
+  allWidgetTypes = Object.keys(widgetType);
+
+  widgetTypesDataMap = widgetTypesData;
+
+  constructor(protected store: Store<AppState>,
+              protected router: Router,
+              public dialogRef: MatDialogRef<SelectWidgetTypeDialogComponent, widgetType>) {
+    super(store, router, dialogRef);
+  }
+
+  cancel(): void {
+    this.dialogRef.close(null);
+  }
+
+  typeSelected(type: widgetType) {
+    this.dialogRef.close(type);
+  }
+}

+<!--
+
+    Copyright © 2016-2019 The Thingsboard Authors
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<hotkeys-cheatsheet></hotkeys-cheatsheet>
+<div fxFlex fxLayout="column">
+  <div fxFlex fxLayout="column" tb-fullscreen [fullscreen]="fullscreen">
+    <mat-toolbar class="mat-elevation-z1 tb-edit-toolbar mat-hue-3" fxLayoutGap="16px">
+      <mat-form-field floatLabel="always" class="tb-widget-title">
+        <mat-label></mat-label>
+        <input [disabled]="isReadOnly" matInput [(ngModel)]="widget.widgetName" (ngModelChange)="isDirty = true"
+               placeholder="{{ 'widget.title' | translate }}"/>
+      </mat-form-field>
+      <mat-form-field>
+        <mat-select [disabled]="isReadOnly" matInput placeholder="{{ 'widget.type' | translate }}"
+                    [(ngModel)]="widget.type" (ngModelChange)="widetTypeChanged()">
+          <mat-option *ngFor="let type of allWidgetTypes" [value]="type">
+            {{ widgetTypesDataMap.get(type).name | translate }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+      <span fxFlex></span>
+      <button mat-button fxHide.xs fxHide.sm [disabled]="!iframeWidgetEditModeInited"
+              (click)="applyWidgetScript()"
+              matTooltip="{{ 'widget.run' | translate }} (CTRL + Return)"
+              matTooltipPosition="below">
+        <mat-icon>play_arrow</mat-icon>
+        <span translate>action.run</span>
+      </button>
+      <button mat-button mat-raised-button
+              fxHide.xs fxHide.sm [disabled]="(isLoading$ | async) || undoDisabled()"
+              (click)="undoWidget()"
+              matTooltip="{{ 'widget.undo' | translate }} (CTRL + Q)"
+              matTooltipPosition="below">
+        <mat-icon>undo</mat-icon>
+        <span translate>action.undo</span>
+      </button>
+      <button *ngIf="!isReadOnly" mat-button mat-raised-button
+              fxHide.xs fxHide.sm [disabled]="(isLoading$ | async) || saveDisabled()"
+              (click)="saveWidget()"
+              [tb-circular-progress]="saveWidgetPending"
+              matTooltip="{{ 'widget.save' | translate }} (CTRL + S)"
+              matTooltipPosition="below">
+        <mat-icon>save</mat-icon>
+        <span translate>action.save</span>
+      </button>
+      <button mat-button mat-raised-button
+              fxHide.xs fxHide.sm [disabled]="(isLoading$ | async) || saveAsDisabled()"
+              (click)="saveWidgetAs()"
+              [tb-circular-progress]="saveWidgetAsPending"
+              matTooltip="{{ 'widget.saveAs' | translate }} (Shift + CTRL + S)"
+              matTooltipPosition="below">
+        <mat-icon>save</mat-icon>
+        <span translate>action.saveAs</span>
+      </button>
+      <button mat-button
+              fxHide.xs fxHide.sm
+              (click)="fullscreen = !fullscreen"
+              matTooltip="{{ 'widget.toggle-fullscreen' | translate }} (Shift + CTRL + F)"
+              matTooltipPosition="below">
+        <mat-icon>{{ fullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
+        <span translate>widget.toggle-fullscreen</span>
+      </button>
+      <button mat-button mat-icon-button fxHide.gt-sm
+              [matMenuTriggerFor]="widgetEditMenu">
+        <mat-icon>more_vert</mat-icon>
+      </button>
+      <mat-menu #widgetEditMenu="matMenu" xPosition="before">
+        <button mat-menu-item
+                [disabled]="!iframeWidgetEditModeInited"
+                (click)="applyWidgetScript()">
+          <mat-icon>play_arrow</mat-icon>
+          <span translate>action.run</span>
+        </button>
+        <button mat-menu-item
+                [disabled]="(isLoading$ | async) || undoDisabled()"
+                (click)="undoWidget()">
+          <mat-icon>undo</mat-icon>
+          <span translate>action.undo</span>
+        </button>
+        <button *ngIf="!isReadOnly" mat-menu-item
+                [disabled]="(isLoading$ | async) || saveDisabled()"
+                (click)="saveWidget()">
+          <mat-icon>save</mat-icon>
+          <span translate>action.save</span>
+        </button>
+        <button mat-menu-item
+                [disabled]="(isLoading$ | async) || saveAsDisabled()"
+                (click)="saveWidgetAs()">
+          <mat-icon>save</mat-icon>
+          <span translate>action.saveAs</span>
+        </button>
+      </mat-menu>
+    </mat-toolbar>
+    <div fxFlex style="position: relative;">
+      <div class="tb-editor tb-absolute-fill">
+        <div #topPanel class="tb-split tb-split-vertical">
+          <div #topLeftPanel class="tb-split tb-content">
+            <mat-tab-group selectedIndex="1" dynamicHeight="true" style="width: 100%; height: 100%;">
+              <mat-tab label="{{ 'widget.resources' | translate }}" style="width: 100%; height: 100%;">
+                <div class="tb-resize-container" style="background-color: #fff;">
+                  <div class="mat-padding">
+                    <div fxFlex fxLayout="row" style="max-height: 40px;"
+                         fxLayoutAlign="start center"
+                         *ngFor="let resource of widget.resources; let i = index" >
+                      <mat-form-field fxFlex class="mat-block resource-field" floatLabel="never"
+                                      style="margin: 10px 0px 0px 0px; max-height: 40px;">
+                        <input required matInput [(ngModel)]="resource.url"
+                               (ngModelChange)="isDirty = true"
+                               placeholder="{{ 'widget.resource-url' | translate }}"/>
+                      </mat-form-field>
+                      <button mat-button mat-icon-button color="primary"
+                              [disabled]="isLoading$ | async"
+                              (click)="removeResource(i)"
+                              matTooltip="{{'widget.remove-resource' | translate}}"
+                              matTooltipPosition="above">
+                        <mat-icon>close</mat-icon>
+                      </button>
+                    </div>
+                    <div style="margin-top: 6px;">
+                      <button mat-button mat-raised-button color="primary"
+                              [disabled]="isLoading$ | async"
+                              (click)="addResource()"
+                              matTooltip="{{'widget.add-resource' | translate}}"
+                              matTooltipPosition="above">
+                        <span translate>action.add</span>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </mat-tab>
+              <mat-tab label="{{ 'widget.html' | translate }}" style="width: 100%; height: 100%;">
+                <div class="tb-resize-container" tb-fullscreen [fullscreen]="htmlFullscreen">
+                  <div class="tb-editor-area-title-panel">
+                    <button mat-button (click)="beautifyHtml()">
+                      {{ 'widget.tidy' | translate }}
+                    </button>
+                    <button mat-button mat-icon-button class="tb-mat-32"
+                            (click)="htmlFullscreen = !htmlFullscreen"
+                            matTooltip="{{(htmlFullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
+                            matTooltipPosition="above">
+                      <mat-icon>{{ htmlFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
+                    </button>
+                  </div>
+                  <div #htmlInput></div>
+                </div>
+              </mat-tab>
+              <mat-tab label="{{ 'widget.css' | translate }}" style="width: 100%; height: 100%;">
+                <div class="tb-resize-container" tb-fullscreen [fullscreen]="cssFullscreen">
+                  <div class="tb-editor-area-title-panel">
+                    <button mat-button (click)="beautifyCss()">
+                      {{ 'widget.tidy' | translate }}
+                    </button>
+                    <button mat-button mat-icon-button class="tb-mat-32"
+                            (click)="cssFullscreen = !cssFullscreen"
+                            matTooltip="{{(cssFullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
+                            matTooltipPosition="above">
+                      <mat-icon>{{ cssFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
+                    </button>
+                  </div>
+                  <div #cssInput></div>
+                </div>
+              </mat-tab>
+            </mat-tab-group>
+          </div>
+          <div #topRightPanel class="tb-split tb-content">
+            <mat-tab-group dynamicHeight="true" style="width: 100%; height: 100%;">
+              <mat-tab label="{{ 'widget.settings-schema' | translate }}" style="width: 100%; height: 100%;">
+                <div class="tb-resize-container" tb-fullscreen [fullscreen]="jsonSettingsFullscreen">
+                  <div class="tb-editor-area-title-panel">
+                    <button mat-button (click)="beautifyJson()">
+                      {{ 'widget.tidy' | translate }}
+                    </button>
+                    <button mat-button mat-icon-button class="tb-mat-32"
+                            (click)="jsonSettingsFullscreen = !jsonSettingsFullscreen"
+                            matTooltip="{{(jsonSettingsFullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
+                            matTooltipPosition="above">
+                      <mat-icon>{{ jsonSettingsFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
+                    </button>
+                  </div>
+                  <div #settingsJsonInput></div>
+                </div>
+              </mat-tab>
+              <mat-tab label="{{ 'widget.datakey-settings-schema' | translate }}" style="width: 100%; height: 100%;">
+                <div class="tb-resize-container" tb-fullscreen [fullscreen]="jsonDataKeySettingsFullscreen">
+                  <div class="tb-editor-area-title-panel">
+                    <button mat-button (click)="beautifyDataKeyJson()">
+                      {{ 'widget.tidy' | translate }}
+                    </button>
+                    <button mat-button mat-icon-button class="tb-mat-32"
+                            (click)="jsonDataKeySettingsFullscreen = !jsonDataKeySettingsFullscreen"
+                            matTooltip="{{(jsonDataKeySettingsFullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
+                            matTooltipPosition="above">
+                      <mat-icon>{{ jsonDataKeySettingsFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
+                    </button>
+                  </div>
+                  <div #dataKeySettingsJsonInput></div>
+                </div>
+              </mat-tab>
+            </mat-tab-group>
+          </div>
+        </div>
+        <div #bottomPanel class="tb-split tb-split-vertical">
+          <div #javascriptPanel class="tb-split tb-content" tb-toast toastTarget="javascriptPanel">
+            <div class="tb-resize-container" tb-fullscreen [fullscreen]="javascriptFullscreen">
+              <div class="tb-editor-area-title-panel">
+                <label translate>widget.javascript</label>
+                <button mat-button (click)="beautifyJs()">
+                  {{ 'widget.tidy' | translate }}
+                </button>
+                <button mat-button mat-icon-button class="tb-mat-32"
+                        (click)="javascriptFullscreen = !javascriptFullscreen"
+                        matTooltip="{{(javascriptFullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
+                        matTooltipPosition="above">
+                  <mat-icon>{{ javascriptFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
+                </button>
+              </div>
+              <div #javascriptInput></div>
+            </div>
+          </div>
+          <div #framePanel class="tb-split tb-content" style="overflow-y: hidden; position: relative;">
+            <div class="mat-content tb-progress-cover" fxFlex fxLayout="column" fxLayoutAlign="center center"
+                 *ngIf="!iframeWidgetEditModeInited">
+              <mat-spinner diameter="100" mode="indeterminate" color="warn"></mat-spinner>
+            </div>
+            <div tb-fullscreen [fullscreen]="iFrameFullscreen" style="width: 100%; height: 100%;">
+              <iframe #widgetIFrame frameborder="0" height="100%" width="100%"></iframe>
+              <button mat-button mat-icon-button
+                      class="tb-fullscreen-button-style"
+                      style="position: absolute; top: 10px; left: 10px; bottom: initial;"
+                      (click)="iFrameFullscreen = !iFrameFullscreen"
+                      matTooltip="{{(iFrameFullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
+                      matTooltipPosition="above">
+                <mat-icon>{{ iFrameFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

+/**
+ * Copyright © 2016-2019 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+$edit-toolbar-height: 40px !default;
+
+tb-widget-editor {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+
+.tb-editor {
+  .tb-split {
+    box-sizing: border-box;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  mat-form-field.resource-field {
+    max-height: 40px;
+    margin: 10px 0px 0px 0px;
+    .mat-form-field-wrapper {
+      padding-bottom: 0;
+      .mat-form-field-flex {
+        max-height: 40px;
+        .mat-form-field-infix {
+          border: 0;
+        }
+      }
+      .mat-form-field-underline {
+        bottom: 0;
+      }
+    }
+  }
+
+  .ace_editor {
+    font-size: 14px !important;
+  }
+
+  .tb-content {
+    border: 1px solid #c0c0c0;
+  }
+
+  .gutter {
+    background-color: transparent;
+
+    background-repeat: no-repeat;
+    background-position: 50%;
+
+    &.gutter-horizontal {
+      cursor: col-resize;
+      background-image: url("../../../../../assets/split.js/grips/vertical.png");
+    }
+
+    &.gutter-vertical {
+      cursor: row-resize;
+      background-image: url("../../../../../assets/split.js/grips/horizontal.png");
+    }
+  }
+
+  .tb-split.tb-split-horizontal,
+  .gutter.gutter-horizontal {
+    float: left;
+    height: 100%;
+  }
+
+  .tb-split.tb-split-vertical {
+    display: flex;
+
+    .tb-split.tb-content {
+      height: 100%;
+    }
+  }
+}
+
+.tb-split-vertical {
+  mat-tab-group {
+    .mat-tab-body-wrapper {
+      height: calc(100% - 49px);
+
+      mat-tab-body {
+        height: 100%;
+
+        & > div {
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+
+div.tb-editor-area-title-panel {
+  position: absolute;
+  top: 5px;
+  right: 20px;
+  z-index: 5;
+  font-size: .8rem;
+  font-weight: 500;
+
+  label {
+    padding: 4px;
+    color: #00acc1;
+    text-transform: uppercase;
+    background: rgba(220, 220, 220, .35);
+    border-radius: 5px;
+    &:not(:last-child) {
+      margin-right: 4px;
+    }
+  }
+
+  button.mat-button, button.mat-icon-button, button.mat-icon-button.tb-mat-32 {
+    align-items: center;
+    vertical-align: middle;
+    min-width: 32px;
+    min-height: 15px;
+    padding: 4px;
+    margin: 0;
+    font-size: .8rem;
+    line-height: 15px;
+    color: #7b7b7b;
+    background: rgba(220, 220, 220, .35);
+    &:not(:last-child) {
+      margin-right: 4px;
+    }
+  }
+}
+
+.tb-resize-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+
+  .ace_editor {
+    height: 100%;
+  }
+}
+
+mat-toolbar.tb-edit-toolbar {
+
+  min-height: $edit-toolbar-height !important;
+  max-height: $edit-toolbar-height !important;
+
+  button.mat-button {
+    min-width: 65px;
+    min-height: 30px;
+    font-size: 12px;
+    line-height: 30px;
+
+    mat-icon {
+      font-size: 20px;
+    }
+
+    span {
+      padding-right: 6px;
+    }
+  }
+
+  mat-form-field {
+    input {
+      font-size: 1.2rem;
+      font-weight: 400;
+      letter-spacing: .005em;
+    }
+    div.mat-form-field-infix {
+      padding-bottom: 5px;
+    }
+    &.tb-widget-title {
+      min-width: 250px;
+    }
+  }
+}

+///
+/// Copyright © 2016-2019 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { PageComponent } from '@shared/components/page.component';
+import { Component, ElementRef, Inject, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { WidgetsBundle } from '@shared/models/widgets-bundle.model';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { WidgetService } from '@core/http/widget.service';
+import { WidgetInfo } from '@home/models/widget-component.models';
+import { WidgetConfig, widgetType, WidgetType, widgetTypesData, Widget } from '@shared/models/widget.models';
+import { ActivatedRoute } from '@angular/router';
+import { deepClone } from '@core/utils';
+import { HasDirtyFlag } from '@core/guards/confirm-on-exit.guard';
+import { AuthUser } from '@shared/models/user.model';
+import { getCurrentAuthUser } from '@core/auth/auth.selectors';
+import { Authority } from '@shared/models/authority.enum';
+import { NULL_UUID } from '@shared/models/id/has-uuid';
+import { Hotkey, HotkeysService } from 'angular2-hotkeys';
+import { TranslateService } from '@ngx-translate/core';
+import { getCurrentIsLoading } from '@app/core/interceptors/load.selectors';
+import * as ace from 'ace-builds';
+import { css_beautify, html_beautify } from 'js-beautify';
+import { CancelAnimationFrame, RafService } from '@core/services/raf.service';
+import { WINDOW } from '@core/services/window.service';
+import { WindowMessage } from '@shared/models/window-message.model';
+import { ExceptionData } from '@shared/models/error.models';
+import Timeout = NodeJS.Timeout;
+import { ActionNotificationHide, ActionNotificationShow } from '@core/notification/notification.actions';
+
+@Component({
+  selector: 'tb-widget-editor',
+  templateUrl: './widget-editor.component.html',
+  styleUrls: ['./widget-editor.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class WidgetEditorComponent extends PageComponent implements OnInit, OnDestroy, HasDirtyFlag {
+
+  @ViewChild('topPanel', {static: true})
+  topPanelElmRef: ElementRef;
+
+  @ViewChild('topLeftPanel', {static: true})
+  topLeftPanelElmRef: ElementRef;
+
+  @ViewChild('topRightPanel', {static: true})
+  topRightPanelElmRef: ElementRef;
+
+  @ViewChild('bottomPanel', {static: true})
+  bottomPanelElmRef: ElementRef;
+
+  @ViewChild('javascriptPanel', {static: true})
+  javascriptPanelElmRef: ElementRef;
+
+  @ViewChild('framePanel', {static: true})
+  framePanelElmRef: ElementRef;
+
+  @ViewChild('htmlInput', {static: true})
+  htmlInputElmRef: ElementRef;
+
+  @ViewChild('cssInput', {static: true})
+  cssInputElmRef: ElementRef;
+
+  @ViewChild('settingsJsonInput', {static: true})
+  settingsJsonInputElmRef: ElementRef;
+
+  @ViewChild('dataKeySettingsJsonInput', {static: true})
+  dataKeySettingsJsonInputElmRef: ElementRef;
+
+  @ViewChild('javascriptInput', {static: true})
+  javascriptInputElmRef: ElementRef;
+
+  @ViewChild('widgetIFrame', {static: true})
+  widgetIFrameElmRef: ElementRef<HTMLIFrameElement>;
+
+  iframe: JQuery<HTMLIFrameElement>;
+
+  widgetTypes = widgetType;
+  allWidgetTypes = Object.keys(widgetType);
+  widgetTypesDataMap = widgetTypesData;
+
+  authUser: AuthUser;
+
+  isReadOnly: boolean;
+
+  widgetsBundle: WidgetsBundle;
+  widgetType: WidgetType;
+  widget: WidgetInfo;
+  origWidget: WidgetInfo;
+
+  isDirty = false;
+
+  fullscreen = false;
+  htmlFullscreen = false;
+  cssFullscreen = false;
+  jsonSettingsFullscreen = false;
+  jsonDataKeySettingsFullscreen = false;
+  javascriptFullscreen = false;
+  iFrameFullscreen = false;
+
+  aceEditors: ace.Ace.Editor[] = [];
+  editorsResizeCafs: {[editorId: string]: CancelAnimationFrame} = {};
+  htmlEditor: ace.Ace.Editor;
+  cssEditor: ace.Ace.Editor;
+  jsonSettingsEditor: ace.Ace.Editor;
+  dataKeyJsonSettingsEditor: ace.Ace.Editor;
+  jsEditor: ace.Ace.Editor;
+  aceResizeListeners: { element: any, resizeListener: any }[] = [];
+
+  onWindowMessageListener = this.onWindowMessage.bind(this);
+
+  iframeWidgetEditModeInited = false;
+  saveWidgetPending = false;
+  saveWidgetAsPending = false;
+
+  gotError = false;
+  errorMarkers: number[] = [];
+  errorAnnotationId = -1;
+
+  saveWidgetTimeout: Timeout;
+
+  constructor(protected store: Store<AppState>,
+              @Inject(WINDOW) private window: Window,
+              private route: ActivatedRoute,
+              private widgetService: WidgetService,
+              private hotkeysService: HotkeysService,
+              private translate: TranslateService,
+              private raf: RafService) {
+    super(store);
+
+    this.authUser = getCurrentAuthUser(store);
+
+    this.widgetsBundle = this.route.snapshot.data.widgetsBundle;
+    if (this.authUser.authority === Authority.TENANT_ADMIN) {
+      this.isReadOnly = !this.widgetsBundle || this.widgetsBundle.tenantId.id === NULL_UUID;
+    } else {
+      this.isReadOnly = this.authUser.authority !== Authority.SYS_ADMIN;
+    }
+    this.widgetType = this.route.snapshot.data.widgetEditorData.widgetType;
+    this.widget = this.route.snapshot.data.widgetEditorData.widget;
+    if (this.widgetType) {
+      const config = JSON.parse(this.widget.defaultConfig);
+      this.widget.defaultConfig = JSON.stringify(config);
+    }
+    this.origWidget = deepClone(this.widget);
+    if (!this.widgetType) {
+      this.isDirty = true;
+    }
+  }
+
+  ngOnInit(): void {
+    this.initHotKeys();
+    this.initSplitLayout();
+    this.initAceEditors();
+    this.iframe = $(this.widgetIFrameElmRef.nativeElement);
+    this.window.addEventListener('message', this.onWindowMessageListener);
+    this.iframe.attr('data-widget', JSON.stringify(this.widget));
+    this.iframe.attr('src', '/widget-editor');
+  }
+
+  ngOnDestroy(): void {
+    this.window.removeEventListener('message', this.onWindowMessageListener);
+    this.aceResizeListeners.forEach((resizeListener) => {
+      // @ts-ignore
+      removeResizeListener(resizeListener.element, resizeListener.resizeListener);
+    });
+  }
+
+  private initHotKeys(): void {
+    this.hotkeysService.add(
+      new Hotkey('ctrl+q', (event: KeyboardEvent) => {
+        if (!getCurrentIsLoading(this.store) && !this.undoDisabled()) {
+          event.preventDefault();
+          this.undoWidget();
+        }
+        return false;
+      }, ['INPUT', 'SELECT', 'TEXTAREA'],
+        this.translate.instant('widget.undo'))
+    );
+    this.hotkeysService.add(
+      new Hotkey('ctrl+s', (event: KeyboardEvent) => {
+          if (!getCurrentIsLoading(this.store) && !this.saveDisabled()) {
+            event.preventDefault();
+            this.saveWidget();
+          }
+          return false;
+        }, ['INPUT', 'SELECT', 'TEXTAREA'],
+        this.translate.instant('widget.save'))
+    );
+    this.hotkeysService.add(
+      new Hotkey('shift+ctrl+s', (event: KeyboardEvent) => {
+          if (!getCurrentIsLoading(this.store) && !this.saveAsDisabled()) {
+            event.preventDefault();
+            this.saveWidgetAs();
+          }
+          return false;
+        }, ['INPUT', 'SELECT', 'TEXTAREA'],
+        this.translate.instant('widget.saveAs'))
+    );
+    this.hotkeysService.add(
+      new Hotkey('shift+ctrl+f', (event: KeyboardEvent) => {
+          event.preventDefault();
+          this.fullscreen = !this.fullscreen;
+          return false;
+        }, ['INPUT', 'SELECT', 'TEXTAREA'],
+        this.translate.instant('widget.toggle-fullscreen'))
+    );
+    this.hotkeysService.add(
+      new Hotkey('ctrl+enter', (event: KeyboardEvent) => {
+          event.preventDefault();
+          this.applyWidgetScript();
+          return false;
+        }, ['INPUT', 'SELECT', 'TEXTAREA'],
+        this.translate.instant('widget.run'))
+    );
+  }
+
+  private initSplitLayout() {
+    Split([this.topPanelElmRef.nativeElement, this.bottomPanelElmRef.nativeElement], {
+      sizes: [35, 65],
+      gutterSize: 8,
+      cursor: 'row-resize',
+      direction: 'vertical'
+    });
+    Split([this.topLeftPanelElmRef.nativeElement, this.topRightPanelElmRef.nativeElement], {
+      sizes: [50, 50],
+      gutterSize: 8,
+      cursor: 'col-resize'
+    });
+    Split([this.javascriptPanelElmRef.nativeElement, this.framePanelElmRef.nativeElement], {
+      sizes: [50, 50],
+      gutterSize: 8,
+      cursor: 'col-resize'
+    });
+  }
+
+  private initAceEditors() {
+    this.htmlEditor = this.createAceEditor(this.htmlInputElmRef, 'html');
+    this.htmlEditor.on('input', () => {
+      const editorValue = this.htmlEditor.getValue();
+      if (this.widget.templateHtml !== editorValue) {
+        this.widget.templateHtml = editorValue;
+        this.isDirty = true;
+      }
+    });
+    this.cssEditor = this.createAceEditor(this.cssInputElmRef, 'css');
+    this.cssEditor.on('input', () => {
+      const editorValue = this.cssEditor.getValue();
+      if (this.widget.templateCss !== editorValue) {
+        this.widget.templateCss = editorValue;
+        this.isDirty = true;
+      }
+    });
+    this.jsonSettingsEditor = this.createAceEditor(this.settingsJsonInputElmRef, 'json');
+    this.jsonSettingsEditor.on('input', () => {
+      const editorValue = this.jsonSettingsEditor.getValue();
+      if (this.widget.settingsSchema !== editorValue) {
+        this.widget.settingsSchema = editorValue;
+        this.isDirty = true;
+      }
+    });
+    this.dataKeyJsonSettingsEditor = this.createAceEditor(this.dataKeySettingsJsonInputElmRef, 'json');
+    this.dataKeyJsonSettingsEditor.on('input', () => {
+      const editorValue = this.dataKeyJsonSettingsEditor.getValue();
+      if (this.widget.dataKeySettingsSchema !== editorValue) {
+        this.widget.dataKeySettingsSchema = editorValue;
+        this.isDirty = true;
+      }
+    });
+    this.jsEditor = this.createAceEditor(this.javascriptInputElmRef, 'javascript');
+    this.jsEditor.on('input', () => {
+      const editorValue = this.jsEditor.getValue();
+      if (this.widget.controllerScript !== editorValue) {
+        this.widget.controllerScript = editorValue;
+        this.isDirty = true;
+      }
+    });
+    this.jsEditor.on('change', () => {
+      this.cleanupJsErrors();
+    });
+    this.setAceEditorValues();
+  }
+
+  private setAceEditorValues() {
+    this.htmlEditor.setValue(this.widget.templateHtml ? this.widget.templateHtml : '', -1);
+    this.cssEditor.setValue(this.widget.templateCss ? this.widget.templateCss : '', -1);
+    this.jsonSettingsEditor.setValue(this.widget.settingsSchema ? this.widget.settingsSchema : '', -1);
+    this.dataKeyJsonSettingsEditor.setValue(this.widget.dataKeySettingsSchema ? this.widget.dataKeySettingsSchema : '', -1);
+    this.jsEditor.setValue(this.widget.controllerScript ? this.widget.controllerScript : '', -1);
+  }
+
+  private createAceEditor(editorElementRef: ElementRef, mode: string): ace.Ace.Editor {
+    const editorElement = editorElementRef.nativeElement;
+    let editorOptions: Partial<ace.Ace.EditorOptions> = {
+      mode: `ace/mode/${mode}`,
+      showGutter: true,
+      showPrintMargin: true
+    };
+    const advancedOptions = {
+      enableSnippets: true,
+      enableBasicAutocompletion: true,
+      enableLiveAutocompletion: true
+    };
+    editorOptions = {...editorOptions, ...advancedOptions};
+    const aceEditor = ace.edit(editorElement, editorOptions);
+    aceEditor.session.setUseWrapMode(true);
+    this.aceEditors.push(aceEditor);
+
+    const resizeListener = this.onAceEditorResize.bind(this, aceEditor);
+
+    // @ts-ignore
+    addResizeListener(editorElement, resizeListener);
+    this.aceResizeListeners.push({element: editorElement, resizeListener});
+    return aceEditor;
+  }
+
+  private onAceEditorResize(aceEditor: ace.Ace.Editor) {
+    if (this.editorsResizeCafs[aceEditor.id]) {
+      this.editorsResizeCafs[aceEditor.id]();
+      delete this.editorsResizeCafs[aceEditor.id];
+    }
+    this.editorsResizeCafs[aceEditor.id] = this.raf.raf(() => {
+      aceEditor.resize();
+      aceEditor.renderer.updateFull();
+    });
+  }
+
+  private onWindowMessage(event: MessageEvent) {
+    let message: WindowMessage;
+    if (event.data) {
+      try {
+        message = JSON.parse(event.data);
+      } catch (e) {}
+    }
+    if (message) {
+      switch (message.type) {
+        case 'widgetException':
+          this.onWidgetException(message.data);
+          break;
+        case 'widgetEditModeInited':
+          this.onWidgetEditModeInited();
+          break;
+        case 'widgetEditUpdated':
+          this.onWidgetEditUpdated(message.data);
+          break;
+      }
+    }
+  }
+
+  private onWidgetEditModeInited() {
+    this.iframeWidgetEditModeInited = true;
+    if (this.saveWidgetPending || this.saveWidgetAsPending) {
+      if (!this.saveWidgetTimeout) {
+        this.saveWidgetTimeout = setTimeout(() => {
+          if (!this.gotError) {
+            if (this.saveWidgetPending) {
+              this.commitSaveWidget();
+            } else if (this.saveWidgetAsPending) {
+              this.commitSaveWidgetAs();
+            }
+          } else {
+            this.store.dispatch(new ActionNotificationShow(
+              {message: this.translate.instant('widget.unable-to-save-widget-error'), type: 'error'}));
+            this.saveWidgetPending = false;
+            this.saveWidgetAsPending = false;
+          }
+          this.saveWidgetTimeout = undefined;
+        }, 1500);
+      }
+    }
+  }
+
+  private onWidgetEditUpdated(widget: Widget) {
+    this.widget.sizeX = widget.sizeX / 2;
+    this.widget.sizeY = widget.sizeY / 2;
+    this.widget.defaultConfig = JSON.stringify(widget.config);
+    this.iframe.attr('data-widget', JSON.stringify(this.widget));
+    this.isDirty = true;
+  }
+
+  private onWidgetException(details: ExceptionData) {
+    if (!this.gotError) {
+      this.gotError = true;
+      let errorInfo = 'Error:';
+      if (details.name) {
+        errorInfo += ' ' + details.name + ':';
+      }
+      if (details.message) {
+        errorInfo += ' ' + details.message;
+      }
+      if (details.lineNumber) {
+        errorInfo += '<br>Line ' + details.lineNumber;
+        if (details.columnNumber) {
+          errorInfo += ' column ' + details.columnNumber;
+        }
+        errorInfo += ' of script.';
+      }
+      if (!this.saveWidgetPending && !this.saveWidgetAsPending) {
+        this.store.dispatch(new ActionNotificationShow(
+          {message: errorInfo, type: 'error', target: 'javascriptPanel'}));
+      }
+      if (details.lineNumber) {
+        const line = details.lineNumber - 1;
+        let column = 0;
+        if (details.columnNumber) {
+          column = details.columnNumber;
+        }
+        const errorMarkerId = this.jsEditor.session.addMarker(new ace.Range(line, 0, line, Infinity),
+          'ace_active-line', 'screenLine');
+        this.errorMarkers.push(errorMarkerId);
+        const annotations = this.jsEditor.session.getAnnotations();
+        const errorAnnotation: ace.Ace.Annotation = {
+          row: line,
+          column,
+          text: details.message,
+          type: 'error'
+        };
+        this.errorAnnotationId = annotations.push(errorAnnotation) - 1;
+        this.jsEditor.session.setAnnotations(annotations);
+      }
+    }
+  }
+
+  private cleanupJsErrors() {
+    this.store.dispatch(new ActionNotificationHide({}));
+    this.errorMarkers.forEach((errorMarker) => {
+      this.jsEditor.session.removeMarker(errorMarker);
+    });
+    this.errorMarkers.length = 0;
+    if (this.errorAnnotationId > -1) {
+      const annotations = this.jsEditor.session.getAnnotations();
+      annotations.splice(this.errorAnnotationId, 1);
+      this.jsEditor.session.setAnnotations(annotations);
+      this.errorAnnotationId = -1;
+    }
+  }
+
+  private commitSaveWidget() {
+    // TODO:
+    this.saveWidgetPending = false;
+  }
+
+  private commitSaveWidgetAs() {
+    // TODO:
+    this.saveWidgetAsPending = false;
+  }
+
+  applyWidgetScript(): void {
+    this.cleanupJsErrors();
+    this.gotError = false;
+    this.iframeWidgetEditModeInited = false;
+    const config: WidgetConfig = JSON.parse(this.widget.defaultConfig);
+    config.title = this.widget.widgetName;
+    this.widget.defaultConfig = JSON.stringify(config);
+    this.iframe.attr('data-widget', JSON.stringify(this.widget));
+    this.iframe[0].contentWindow.location.reload(true);
+  }
+
+  undoWidget(): void {
+    this.widget = deepClone(this.origWidget);
+    this.setAceEditorValues();
+    this.isDirty = false;
+    this.applyWidgetScript();
+  }
+
+  saveWidget(): void {
+    if (!this.widget.widgetName) {
+      this.store.dispatch(new ActionNotificationShow(
+        {message: this.translate.instant('widget.missing-widget-title-error'), type: 'error'}));
+    } else {
+      this.saveWidgetPending = true;
+      this.applyWidgetScript();
+    }
+  }
+
+  saveWidgetAs(): void {
+    this.saveWidgetAsPending = true;
+    this.applyWidgetScript();
+  }
+
+  undoDisabled(): boolean {
+    return !this.isDirty
+    || !this.iframeWidgetEditModeInited
+    || this.saveWidgetPending
+    || this.saveWidgetAsPending;
+  }
+
+  saveDisabled(): boolean {
+    return this.isReadOnly
+      || !this.isDirty
+      || !this.iframeWidgetEditModeInited
+      || this.saveWidgetPending
+      || this.saveWidgetAsPending;
+  }
+
+  saveAsDisabled(): boolean {
+    return !this.iframeWidgetEditModeInited
+      || this.saveWidgetPending
+      || this.saveWidgetAsPending;
+  }
+
+  beautifyCss(): void {
+    const res = css_beautify(this.widget.templateCss, {indent_size: 4});
+    if (this.widget.templateCss !== res) {
+      this.isDirty = true;
+      this.widget.templateCss = res;
+      this.cssEditor.setValue(this.widget.templateCss ? this.widget.templateCss : '', -1);
+    }
+  }
+
+  beautifyHtml(): void {
+    const res = html_beautify(this.widget.templateHtml, {indent_size: 4, wrap_line_length: 60});
+    if (this.widget.templateHtml !== res) {
+      this.isDirty = true;
+      this.widget.templateHtml = res;
+      this.htmlEditor.setValue(this.widget.templateHtml ? this.widget.templateHtml : '', -1);
+    }
+  }
+
+  beautifyJson(): void {
+    const res = js_beautify(this.widget.settingsSchema, {indent_size: 4});
+    if (this.widget.settingsSchema !== res) {
+      this.isDirty = true;
+      this.widget.settingsSchema = res;
+      this.jsonSettingsEditor.setValue(this.widget.settingsSchema ? this.widget.settingsSchema : '', -1);
+    }
+  }
+
+  beautifyDataKeyJson(): void {
+    const res = js_beautify(this.widget.dataKeySettingsSchema, {indent_size: 4});
+    if (this.widget.dataKeySettingsSchema !== res) {
+      this.isDirty = true;
+      this.widget.dataKeySettingsSchema = res;
+      this.dataKeyJsonSettingsEditor.setValue(this.widget.dataKeySettingsSchema ? this.widget.dataKeySettingsSchema : '', -1);
+    }
+  }
+
+  beautifyJs(): void {
+    const res = js_beautify(this.widget.controllerScript, {indent_size: 4, wrap_line_length: 60});
+    if (this.widget.controllerScript !== res) {
+      this.isDirty = true;
+      this.widget.controllerScript = res;
+      this.jsEditor.setValue(this.widget.controllerScript ? this.widget.controllerScript : '', -1);
+    }
+  }
+
+  removeResource(index: number) {
+    if (index > -1) {
+      if (this.widget.resources.splice(index, 1).length > 0) {
+        this.isDirty = true;
+      }
+    }
+  }
+
+  addResource() {
+    this.widget.resources.push({url: ''});
+    this.isDirty = true;
+  }
+
+  widetTypeChanged() {
+    const config: WidgetConfig = JSON.parse(this.widget.defaultConfig);
+    if (this.widget.type !== widgetType.rpc &&
+        this.widget.type !== widgetType.alarm) {
+      if (config.targetDeviceAliases) {
+        delete config.targetDeviceAliases;
+      }
+      if (config.alarmSource) {
+        delete config.alarmSource;
+      }
+      if (!config.datasources) {
+        config.datasources = [];
+      }
+      if (!config.timewindow) {
+        config.timewindow = {
+          realtime: {
+            timewindowMs: 60000
+          }
+        };
+      }
+    } else if (this.widget.type === widgetType.rpc) {
+      if (config.datasources) {
+        delete config.datasources;
+      }
+      if (config.alarmSource) {
+        delete config.alarmSource;
+      }
+      if (config.timewindow) {
+        delete config.timewindow;
+      }
+      if (!config.targetDeviceAliases) {
+        config.targetDeviceAliases = [];
+      }
+    } else { // alarm
+      if (config.datasources) {
+        delete config.datasources;
+      }
+      if (config.targetDeviceAliases) {
+        delete config.targetDeviceAliases;
+      }
+      if (!config.alarmSource) {
+        config.alarmSource = {};
+      }
+      if (!config.timewindow) {
+        config.timewindow = {
+          realtime: {
+            timewindowMs: 24 * 60 * 60 * 1000
+          }
+        };
+      }
+    }
+    this.widget.defaultConfig = JSON.stringify(config);
+    this.isDirty = true;
+  }
+}

@@ -17,20 +17,24 @@
 import { Injectable, NgModule } from '@angular/core';
 import { ActivatedRouteSnapshot, Resolve, RouterModule, Routes } from '@angular/router';
 
-import {EntitiesTableComponent} from '../../components/entity/entities-table.component';
-import {Authority} from '@shared/models/authority.enum';
-import {RuleChainsTableConfigResolver} from '@modules/home/pages/rulechain/rulechains-table-config.resolver';
-import {WidgetsBundlesTableConfigResolver} from '@modules/home/pages/widget/widgets-bundles-table-config.resolver';
+import { EntitiesTableComponent } from '../../components/entity/entities-table.component';
+import { Authority } from '@shared/models/authority.enum';
+import { WidgetsBundlesTableConfigResolver } from '@modules/home/pages/widget/widgets-bundles-table-config.resolver';
 import { WidgetLibraryComponent } from '@home/pages/widget/widget-library.component';
 import { BreadCrumbConfig, BreadCrumbLabelFunction } from '@shared/components/breadcrumb';
-import { User } from '@shared/models/user.model';
-import { Store } from '@ngrx/store';
-import { AppState } from '@core/core.state';
-import { UserService } from '@core/http/user.service';
 import { Observable } from 'rxjs';
-import { getCurrentAuthUser } from '@core/auth/auth.selectors';
 import { WidgetsBundle } from '@shared/models/widgets-bundle.model';
 import { WidgetService } from '@core/http/widget.service';
+import { WidgetEditorComponent } from '@home/pages/widget/widget-editor.component';
+import { map } from 'rxjs/operators';
+import { toWidgetInfo, WidgetInfo } from '@home/models/widget-component.models';
+import { widgetType, WidgetType } from '@app/shared/models/widget.models';
+import { ConfirmOnExitGuard } from '@core/guards/confirm-on-exit.guard';
+
+export interface WidgetEditorData {
+  widgetType: WidgetType;
+  widget: WidgetInfo;
+}
 
 @Injectable()
 export class WidgetsBundleResolver implements Resolve<WidgetsBundle> {
@@ -39,13 +43,61 @@ export class WidgetsBundleResolver implements Resolve<WidgetsBundle> {
   }
 
   resolve(route: ActivatedRouteSnapshot): Observable<WidgetsBundle> {
-    const widgetsBundleId = route.params.widgetsBundleId;
+    let widgetsBundleId = route.params.widgetsBundleId;
+    if (!widgetsBundleId) {
+      widgetsBundleId = route.parent.params.widgetsBundleId;
+    }
     return this.widgetsService.getWidgetsBundle(widgetsBundleId);
   }
 }
 
+@Injectable()
+export class WidgetEditorDataResolver implements Resolve<WidgetEditorData> {
+
+  constructor(private widgetsService: WidgetService) {
+  }
+
+  resolve(route: ActivatedRouteSnapshot): Observable<WidgetEditorData> {
+    const widgetTypeId = route.params.widgetTypeId;
+    return this.widgetsService.getWidgetTypeById(widgetTypeId).pipe(
+      map((result) => {
+        return {
+          widgetType: result,
+          widget: toWidgetInfo(result)
+        };
+      })
+    );
+  }
+}
+
+@Injectable()
+export class WidgetEditorAddDataResolver implements Resolve<WidgetEditorData> {
+
+  constructor(private widgetsService: WidgetService) {
+  }
+
+  resolve(route: ActivatedRouteSnapshot): Observable<WidgetEditorData> {
+    let widgetTypeParam = route.params.widgetType as widgetType;
+    if (!widgetTypeParam) {
+      widgetTypeParam = widgetType.timeseries;
+    }
+    return this.widgetsService.getWidgetTemplate(widgetTypeParam).pipe(
+      map((widget) => {
+        widget.widgetName = null;
+        return {
+          widgetType: null,
+          widget
+        };
+      })
+    );
+  }
+}
+
 export const widgetTypesBreadcumbLabelFunction: BreadCrumbLabelFunction = ((route, translate) => route.data.widgetsBundle.title);
 
+export const widgetEditorBreadcumbLabelFunction: BreadCrumbLabelFunction =
+  ((route, translate, component) => component ? (component as WidgetEditorComponent).widget.widgetName : '');
+
 export const routes: Routes = [
   {
     path: 'widgets-bundles',
@@ -69,10 +121,7 @@ export const routes: Routes = [
       },
       {
         path: ':widgetsBundleId/widgetTypes',
-        component: WidgetLibraryComponent,
         data: {
-          auth: [Authority.SYS_ADMIN, Authority.TENANT_ADMIN],
-          title: 'widget.widget-library',
           breadcrumb: {
             labelFunction: widgetTypesBreadcumbLabelFunction,
             icon: 'now_widgets'
@@ -80,7 +129,49 @@ export const routes: Routes = [
         },
         resolve: {
           widgetsBundle: WidgetsBundleResolver
-        }
+        },
+        children: [
+          {
+            path: '',
+            component: WidgetLibraryComponent,
+            data: {
+              auth: [Authority.SYS_ADMIN, Authority.TENANT_ADMIN],
+              title: 'widget.widget-library'
+            }
+          },
+          {
+            path: ':widgetTypeId',
+            component: WidgetEditorComponent,
+            canDeactivate: [ConfirmOnExitGuard],
+            data: {
+              auth: [Authority.SYS_ADMIN, Authority.TENANT_ADMIN],
+              title: 'widget.editor',
+              breadcrumb: {
+                labelFunction: widgetEditorBreadcumbLabelFunction,
+                icon: 'insert_chart'
+              } as BreadCrumbConfig
+            },
+            resolve: {
+              widgetEditorData: WidgetEditorDataResolver
+            }
+          },
+          {
+            path: 'add/:widgetType',
+            component: WidgetEditorComponent,
+            canDeactivate: [ConfirmOnExitGuard],
+            data: {
+              auth: [Authority.SYS_ADMIN, Authority.TENANT_ADMIN],
+              title: 'widget.editor',
+              breadcrumb: {
+                labelFunction: widgetEditorBreadcumbLabelFunction,
+                icon: 'insert_chart'
+              } as BreadCrumbConfig
+            },
+            resolve: {
+              widgetEditorData: WidgetEditorAddDataResolver
+            }
+          }
+        ]
       }
     ]
   }
@@ -91,7 +182,9 @@ export const routes: Routes = [
   exports: [RouterModule],
   providers: [
     WidgetsBundlesTableConfigResolver,
-    WidgetsBundleResolver
+    WidgetsBundleResolver,
+    WidgetEditorDataResolver,
+    WidgetEditorAddDataResolver
   ]
 })
 export class WidgetLibraryRoutingModule { }

@@ -21,7 +21,7 @@ import { PageComponent } from '@shared/components/page.component';
 import { AuthUser } from '@shared/models/user.model';
 import { getCurrentAuthUser } from '@core/auth/auth.selectors';
 import { WidgetsBundle } from '@shared/models/widgets-bundle.model';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { Authority } from '@shared/models/authority.enum';
 import { NULL_UUID } from '@shared/models/id/has-uuid';
 import { Observable } from 'rxjs';
@@ -34,6 +34,13 @@ import { DashboardCallbacks, WidgetsData } from '@home/models/dashboard-componen
 import { IAliasController } from '@app/core/api/widget-api.models';
 import { toWidgetInfo } from '@home/models/widget-component.models';
 import { DummyAliasController } from '@core/api/alias-controller';
+import {
+  DeviceCredentialsDialogComponent,
+  DeviceCredentialsDialogData
+} from '@home/pages/device/device-credentials-dialog.component';
+import { DeviceCredentials } from '@shared/models/device.models';
+import { MatDialog } from '@angular/material/dialog';
+import { SelectWidgetTypeDialogComponent } from '@home/pages/widget/select-widget-type-dialog.component';
 
 @Component({
   selector: 'tb-widget-library',
@@ -83,8 +90,10 @@ export class WidgetLibraryComponent extends PageComponent implements OnInit {
 
   constructor(protected store: Store<AppState>,
               private route: ActivatedRoute,
+              private router: Router,
               private widgetService: WidgetService,
-              private dialogService: DialogService) {
+              private dialogService: DialogService,
+              private dialog: MatDialog) {
     super(store);
 
     this.authUser = getCurrentAuthUser(store);
@@ -163,33 +172,43 @@ export class WidgetLibraryComponent extends PageComponent implements OnInit {
   }
 
   importWidgetType($event: Event): void {
-    if (event) {
-      event.stopPropagation();
+    if ($event) {
+      $event.stopPropagation();
     }
     this.dialogService.todo();
   }
 
   openWidgetType($event: Event, widget?: Widget): void {
-    if (event) {
-      event.stopPropagation();
+    if ($event) {
+      $event.stopPropagation();
     }
     if (widget) {
-      this.dialogService.todo();
+      this.router.navigate([widget.typeId.id], {relativeTo: this.route});
     } else {
-      this.dialogService.todo();
+      this.dialog.open<SelectWidgetTypeDialogComponent, any,
+        widgetType>(SelectWidgetTypeDialogComponent, {
+        disableClose: true,
+        panelClass: ['tb-dialog', 'tb-fullscreen-dialog']
+      }).afterClosed().subscribe(
+        (type) => {
+          if (type) {
+            this.router.navigate(['add', type], {relativeTo: this.route});
+          }
+        }
+      );
     }
   }
 
   exportWidgetType($event: Event, widget: Widget): void {
-    if (event) {
-      event.stopPropagation();
+    if ($event) {
+      $event.stopPropagation();
     }
     this.dialogService.todo();
   }
 
   removeWidgetType($event: Event, widget: Widget): void {
-    if (event) {
-      event.stopPropagation();
+    if ($event) {
+      $event.stopPropagation();
     }
     this.dialogService.todo();
   }

@@ -21,14 +21,19 @@ import {WidgetsBundleComponent} from '@modules/home/pages/widget/widgets-bundle.
 import {WidgetLibraryRoutingModule} from '@modules/home/pages/widget/widget-library-routing.module';
 import {HomeComponentsModule} from '@modules/home/components/home-components.module';
 import { WidgetLibraryComponent } from './widget-library.component';
+import { WidgetEditorComponent } from '@home/pages/widget/widget-editor.component';
+import { SelectWidgetTypeDialogComponent } from '@home/pages/widget/select-widget-type-dialog.component';
 
 @NgModule({
   entryComponents: [
-    WidgetsBundleComponent
+    WidgetsBundleComponent,
+    SelectWidgetTypeDialogComponent
   ],
   declarations: [
     WidgetsBundleComponent,
-    WidgetLibraryComponent
+    WidgetLibraryComponent,
+    WidgetEditorComponent,
+    SelectWidgetTypeDialogComponent
   ],
   imports: [
     CommonModule,

@@ -17,7 +17,7 @@
 -->
 <div fxFlex class="tb-breadcrumb" fxLayout="row">
   <h1 fxFlex fxHide.gt-sm *ngIf="lastBreadcrumb$ | async; let breadcrumb">
-    {{ breadcrumb.ignoreTranslate ? breadcrumb.label : (breadcrumb.label | translate) }}
+    {{ breadcrumb.ignoreTranslate ? (breadcrumb.labelFunction ? breadcrumb.labelFunction() : breadcrumb.label) : (breadcrumb.label | translate) }}
   </h1>
   <span fxHide.xs fxHide.sm *ngFor="let breadcrumb of breadcrumbs$ | async; last as isLast;" [ngSwitch]="isLast">
 	    <a *ngSwitchCase="false" [routerLink]="breadcrumb.link" [queryParams]="breadcrumb.queryParams">
@@ -26,7 +26,7 @@
         <mat-icon *ngIf="!breadcrumb.isMdiIcon" class="material-icons">
           {{ breadcrumb.icon }}
         </mat-icon>
-          {{ breadcrumb.ignoreTranslate ? breadcrumb.label : (breadcrumb.label | translate) }}
+        {{ breadcrumb.ignoreTranslate ? (breadcrumb.labelFunction ? breadcrumb.labelFunction() : breadcrumb.label) : (breadcrumb.label | translate) }}
 	    </a>
 	    <span *ngSwitchCase="true">
         <mat-icon *ngIf="breadcrumb.isMdiIcon" [svgIcon]="breadcrumb.icon">
@@ -34,7 +34,7 @@
 	    	<mat-icon *ngIf="!breadcrumb.isMdiIcon" class="material-icons">
 	    	  {{ breadcrumb.icon }}
 	    	</mat-icon>
-          {{ breadcrumb.ignoreTranslate ? breadcrumb.label : (breadcrumb.label | translate) }}
+        {{ breadcrumb.ignoreTranslate ? (breadcrumb.labelFunction ? breadcrumb.labelFunction() : breadcrumb.label) : (breadcrumb.label | translate) }}
       </span>
 	    <span class="divider" [fxHide]="isLast"> > </span>
 	</span>

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { BreadCrumb, BreadCrumbConfig } from './breadcrumb';
 import { ActivatedRoute, ActivatedRouteSnapshot, NavigationEnd, Router } from '@angular/router';
@@ -28,6 +28,13 @@ import { TranslateService } from '@ngx-translate/core';
 })
 export class BreadcrumbComponent implements OnInit, OnDestroy {
 
+  activeComponentValue: any;
+
+  @Input()
+  set activeComponent(activeComponent: any) {
+    this.activeComponentValue = activeComponent;
+  }
+
   breadcrumbs$: Subject<Array<BreadCrumb>> = new BehaviorSubject<Array<BreadCrumb>>(this.buildBreadCrumbs(this.activatedRoute.snapshot));
 
   routerEventsSubscription = this.router.events.pipe(
@@ -61,9 +68,12 @@ export class BreadcrumbComponent implements OnInit, OnDestroy {
       const breadcrumbConfig = route.routeConfig.data.breadcrumb as BreadCrumbConfig;
       if (breadcrumbConfig && !breadcrumbConfig.skip) {
         let label;
+        let labelFunction;
         let ignoreTranslate;
         if (breadcrumbConfig.labelFunction) {
-          label = breadcrumbConfig.labelFunction(route, this.translate);
+          labelFunction = () => {
+            return breadcrumbConfig.labelFunction(route, this.translate, this.activeComponentValue);
+          };
           ignoreTranslate = true;
         } else {
           label = breadcrumbConfig.label || 'home.home';
@@ -71,10 +81,11 @@ export class BreadcrumbComponent implements OnInit, OnDestroy {
         }
         const icon = breadcrumbConfig.icon || 'home';
         const isMdiIcon = icon.startsWith('mdi:');
-        const link = [ '/' + route.url.join('') ];
+        const link = [ route.pathFromRoot.map(v => v.url.map(segment => segment.toString()).join('/')).join('/') ];
         const queryParams = route.queryParams;
         const breadcrumb = {
           label,
+          labelFunction,
           ignoreTranslate,
           icon,
           isMdiIcon,
@@ -89,5 +100,4 @@ export class BreadcrumbComponent implements OnInit, OnDestroy {
     }
     return newBreadcrumbs;
   }
-
 }

@@ -19,6 +19,7 @@ import { TranslateService } from '@ngx-translate/core';
 
 export interface BreadCrumb {
   label: string;
+  labelFunction?: () => string;
   ignoreTranslate: boolean;
   icon: string;
   isMdiIcon: boolean;
@@ -26,7 +27,7 @@ export interface BreadCrumb {
   queryParams: Params;
 }
 
-export type BreadCrumbLabelFunction = (route: ActivatedRouteSnapshot, translate: TranslateService) => string;
+export type BreadCrumbLabelFunction = (route: ActivatedRouteSnapshot, translate: TranslateService, component: any) => string;
 
 export interface BreadCrumbConfig {
   labelFunction: BreadCrumbLabelFunction;

+///
+/// Copyright © 2016-2019 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Directive, ElementRef, ViewContainerRef, ComponentFactoryResolver, ComponentRef, Input } from '@angular/core';
+import { Overlay } from '@angular/cdk/overlay';
+import { MatProgressBar, MatSpinner } from '@angular/material';
+
+@Directive({
+  selector: '[tb-circular-progress]'
+})
+export class CircularProgressDirective {
+
+  showProgressValue = false;
+
+  children: JQuery<any>;
+
+  cssWidth: any;
+
+  @Input('tb-circular-progress')
+  set showProgress(showProgress: boolean) {
+    if (this.showProgressValue !== showProgress) {
+      const element = this.elementRef.nativeElement;
+      this.showProgressValue = showProgress;
+      this.spinnerRef.instance._elementRef.nativeElement.style.display = showProgress ? 'block' : 'none';
+      if (showProgress) {
+        this.cssWidth = $(element).prop('style').width;
+        if (!this.cssWidth) {
+          $(element).css('width', '');
+          const width = $(element).prop('offsetWidth');
+          $(element).css('width', width + 'px');
+        }
+        this.children = $(element).children();
+        $(element).empty();
+        $(element).append($(this.spinnerRef.instance._elementRef.nativeElement));
+      } else {
+        $(element).empty();
+        $(element).append(this.children);
+        if (this.cssWidth) {
+          $(element).css('width', this.cssWidth);
+        } else {
+          $(element).css('width', '');
+        }
+      }
+    }
+  }
+
+  spinnerRef: ComponentRef<MatSpinner>;
+
+  constructor(private elementRef: ElementRef,
+              private componentFactoryResolver: ComponentFactoryResolver,
+              private viewContainerRef: ViewContainerRef) {
+    this.createCircularProgress();
+  }
+
+  createCircularProgress() {
+    this.elementRef.nativeElement.style.position = 'relative';
+    const factory = this.componentFactoryResolver.resolveComponentFactory(MatSpinner);
+    this.spinnerRef = this.viewContainerRef.createComponent(factory, 0);
+    this.spinnerRef.instance.mode = 'indeterminate';
+    this.spinnerRef.instance.diameter = 20;
+    const el = this.spinnerRef.instance._elementRef.nativeElement;
+    el.style.margin = 'auto';
+    el.style.position = 'absolute';
+    el.style.left = '0';
+    el.style.right = '0';
+    el.style.top = '0';
+    el.style.bottom = '0';
+    el.style.display = 'none';
+  }
+}

+<!--
+
+    Copyright © 2016-2019 The Thingsboard Authors
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<div fxLayout="column" class="mat-content mat-padding">
+  <mat-form-field>
+    <mat-label>{{'dashboard.select-dashboard' | translate}}</mat-label>
+    <mat-select matInput [(ngModel)]="dashboardId"
+                (ngModelChange)="dashboardSelected(dashboardId)">
+      <mat-option *ngFor="let dashboard of dashboards$ | async" [value]="dashboard.id.id">
+        {{dashboard.title}}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+</div>

+/**
+ * Copyright © 2016-2019 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@import "../../../scss/constants";
+
+:host {
+  min-width: 300px;
+  max-width: 320px;
+  max-height: 150px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow:
+    0 7px 8px -4px rgba(0, 0, 0, .2),
+    0 13px 19px 2px rgba(0, 0, 0, .14),
+    0 5px 24px 4px rgba(0, 0, 0, .12);
+
+  @media (min-height: 350px) {
+    max-height: 250px;
+  }
+
+  @media #{$mat-gt-xs} {
+    max-width: 100%;
+  }
+
+  .mat-content {
+    background-color: #fff;
+  }
+}
+
+:host ::ng-deep {
+  mat-form-field {
+    .mat-form-field-infix {
+      width: 100%;
+      mat-select {
+        .mat-select-value {
+          max-width: 100%;
+        }
+      }
+    }
+  }
+}

+///
+/// Copyright © 2016-2019 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Component, Inject, InjectionToken } from '@angular/core';
+import { Observable } from 'rxjs';
+import { DashboardInfo } from '../models/dashboard.models';
+
+export const DASHBOARD_SELECT_PANEL_DATA = new InjectionToken<any>('DashboardSelectPanelData');
+
+export interface DashboardSelectPanelData {
+  dashboards$: Observable<Array<DashboardInfo>>;
+  dashboardId: string;
+  onDashboardSelected: (dashboardId: string) => void;
+}
+
+@Component({
+  selector: 'tb-dashboard-select-panel',
+  templateUrl: './dashboard-select-panel.component.html',
+  styleUrls: ['./dashboard-select-panel.component.scss']
+})
+export class DashboardSelectPanelComponent {
+
+  dashboards$: Observable<Array<DashboardInfo>>;
+  dashboardId: string;
+
+  constructor(@Inject(DASHBOARD_SELECT_PANEL_DATA)
+              private data: DashboardSelectPanelData) {
+    this.dashboards$ = this.data.dashboards$;
+    this.dashboardId = this.data.dashboardId;
+  }
+
+  public dashboardSelected(dashboardId: string) {
+    this.data.onDashboardSelected(dashboardId);
+  }
+}