UI: Refactor dashboard page. Add ability to open dashboard state in separate dialog.

@@ -53,6 +53,7 @@ import { EntityDataService } from '@core/api/entity-data.service';
 import { PageData } from '@shared/models/page/page-data';
 import { TranslateService } from '@ngx-translate/core';
 import { AlarmDataService } from '@core/api/alarm-data.service';
+import { IDashboardController } from '@home/components/dashboard-page/dashboard-page.models';
 
 export interface TimewindowFunctions {
   onUpdateTimewindow: (startTimeMs: number, endTimeMs: number, interval?: number) => void;
@@ -137,6 +138,7 @@ export interface StateParams {
 export type StateControllerHolder = () => IStateController;
 
 export interface IStateController {
+  dashboardCtrl: IDashboardController;
   getStateParams(): StateParams;
   getStateParamsByStateId(stateId: string): StateParams;
   openState(id: string, params?: StateParams, openRightLayout?: boolean): void;

@@ -19,7 +19,6 @@ 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({
@@ -28,7 +27,6 @@ import { DashboardPagesRoutingModule } from './dashboard-pages.routing.module';
     SharedModule,
     HomeComponentsModule,
     HomeDialogsModule,
-    DashboardModule,
     DashboardPagesRoutingModule
   ]
 })

@@ -18,7 +18,7 @@ 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 { DashboardPageComponent } from '@home/components/dashboard-page/dashboard-page.component';
 import { Dashboard } from '@app/shared/models/dashboard.models';
 import { DashboardService } from '@core/http/dashboard.service';
 import { DashboardUtilsService } from '@core/services/dashboard-utils.service';

@@ -21,7 +21,7 @@
   <section class="tb-dashboard-toolbar"
            [ngClass]="{ 'tb-dashboard-toolbar-opened': toolbarOpened,
                         'tb-dashboard-toolbar-closed': !toolbarOpened }">
-    <tb-dashboard-toolbar [fxShow]="!widgetEditMode" [forceFullscreen]="forceFullscreen"
+    <tb-dashboard-toolbar [fxShow]="!widgetEditMode && !hideToolbar" [forceFullscreen]="forceFullscreen"
                           [toolbarOpened]="toolbarOpened" (triggerClick)="openToolbar()">
       <div class="tb-dashboard-action-panels" fxLayout="column" fxLayout.gt-sm="row"
            fxLayoutAlign="center stretch" fxLayoutAlign.gt-sm="space-between center">
@@ -52,6 +52,7 @@
                                [dashboardId]="dashboard.id ? dashboard.id.id : ''"
                                [isMobile]="isMobile"
                                [state]="dashboardCtx.state"
+                               [currentState]="currentState"
                                [states]="dashboardConfiguration.states">
           </tb-states-component>
         </div>
@@ -183,11 +184,12 @@
           </mat-drawer-content>
         </mat-drawer-container>
         <section fxLayout="row" class="layout-wrap tb-footer-buttons" fxLayoutAlign="start end">
-          <tb-footer-fab-buttons [fxShow]="!isAddingWidget && isEdit && !widgetEditMode"
+          <tb-footer-fab-buttons *ngIf="!embedded"
+                                 [fxShow]="!isAddingWidget && isEdit && !widgetEditMode"
                                  relative
                                  [footerFabButtons]="addWidgetFabButtons">
           </tb-footer-fab-buttons>
-          <button *ngIf="(isTenantAdmin() || isSystemAdmin()) && !forceFullscreen"
+          <button *ngIf="(isTenantAdmin() || isSystemAdmin()) && !forceFullscreen && !embedded"
                   mat-fab color="accent" class="tb-btn-footer"
                   [ngClass]="{'tb-hide': !isEdit || isAddingWidget}"
                   [disabled]="isLoading$ | async"

@@ -78,23 +78,23 @@ import {
   EntityAliasesDialogData
 } from '@home/components/alias/entity-aliases-dialog.component';
 import { EntityAliases } from '@app/shared/models/alias.models';
-import { EditWidgetComponent } from '@home/pages/dashboard/edit-widget.component';
+import { EditWidgetComponent } from '@home/components/dashboard-page/edit-widget.component';
 import { WidgetsBundle } from '@shared/models/widgets-bundle.model';
-import { AddWidgetDialogComponent, AddWidgetDialogData } from '@home/pages/dashboard/add-widget-dialog.component';
+import { AddWidgetDialogComponent, AddWidgetDialogData } from '@home/components/dashboard-page/add-widget-dialog.component';
 import { TranslateService } from '@ngx-translate/core';
 import {
   ManageDashboardLayoutsDialogComponent,
   ManageDashboardLayoutsDialogData
-} from '@home/pages/dashboard/layout/manage-dashboard-layouts-dialog.component';
+} from '@home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component';
 import { SelectTargetLayoutDialogComponent } from '@home/components/dashboard/select-target-layout-dialog.component';
 import {
   DashboardSettingsDialogComponent,
   DashboardSettingsDialogData
-} from '@home/pages/dashboard/dashboard-settings-dialog.component';
+} from '@home/components/dashboard-page/dashboard-settings-dialog.component';
 import {
   ManageDashboardStatesDialogComponent,
   ManageDashboardStatesDialogData
-} from '@home/pages/dashboard/states/manage-dashboard-states-dialog.component';
+} from '@home/components/dashboard-page/states/manage-dashboard-states-dialog.component';
 import { ImportExportService } from '@home/components/import-export/import-export.service';
 import { AuthState } from '@app/core/auth/auth.models';
 import { FiltersDialogComponent, FiltersDialogData } from '@home/components/filter/filters-dialog.component';
@@ -118,6 +118,12 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
   embedded = false;
 
   @Input()
+  currentState: string;
+
+  @Input()
+  hideToolbar: boolean;
+
+  @Input()
   dashboard: Dashboard;
   dashboardConfiguration: DashboardConfiguration;
 
@@ -159,6 +165,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
 
 
   dashboardCtx: DashboardContext = {
+    instanceId: this.utils.guid(),
     getDashboard: () => this.dashboard,
     dashboardTimewindow: null,
     state: null,
@@ -218,7 +225,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
   private rxSubscriptions = new Array<Subscription>();
 
   get toolbarOpened(): boolean {
-    return !this.widgetEditMode &&
+    return !this.widgetEditMode && !this.hideToolbar &&
       (this.toolbarAlwaysOpen() || this.isToolbarOpened || this.isEdit || this.showRightLayoutSwitch());
   }
   set toolbarOpened(toolbarOpened: boolean) {

@@ -24,6 +24,7 @@ import { DashboardContextMenuItem, WidgetContextMenuItem } from '@home/models/da
 export declare type DashboardPageScope = 'tenant' | 'customer';
 
 export interface DashboardContext {
+  instanceId: string;
   state: string;
   getDashboard: () => Dashboard;
   dashboardTimewindow: Timewindow;

@@ -15,8 +15,8 @@
 ///
 
 import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { ILayoutController } from '@home/pages/dashboard/layout/layout.models';
-import { DashboardContext, DashboardPageLayoutContext } from '@home/pages/dashboard/dashboard-page.models';
+import { ILayoutController } from '@home/components/dashboard-page/layout/layout.models';
+import { DashboardContext, DashboardPageLayoutContext } from '@home/components/dashboard-page/dashboard-page.models';
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';

@@ -30,7 +30,7 @@ import { DashboardUtilsService } from '@core/services/dashboard-utils.service';
 import {
   DashboardSettingsDialogComponent,
   DashboardSettingsDialogData
-} from '@home/pages/dashboard/dashboard-settings-dialog.component';
+} from '@home/components/dashboard-page/dashboard-settings-dialog.component';
 
 export interface ManageDashboardLayoutsDialogData {
   layouts: DashboardStateLayouts;

@@ -31,7 +31,7 @@ import {
 import { Router } from '@angular/router';
 import { DialogComponent } from '@app/shared/components/dialog.component';
 import { DashboardState } from '@app/shared/models/dashboard.models';
-import { DashboardStateInfo } from '@home/pages/dashboard/states/manage-dashboard-states-dialog.component.models';
+import { DashboardStateInfo } from '@home/components/dashboard-page/states/manage-dashboard-states-dialog.component.models';
 import { TranslateService } from '@ngx-translate/core';
 import { DashboardUtilsService } from '@core/services/dashboard-utils.service';
 

@@ -20,7 +20,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { DashboardState } from '@shared/models/dashboard.models';
 import { StateControllerState } from './state-controller.models';
 import { StateControllerComponent } from './state-controller.component';
-import { StatesControllerService } from '@home/pages/dashboard/states/states-controller.service';
+import { StatesControllerService } from '@home/components/dashboard-page/states/states-controller.service';
 import { EntityId } from '@app/shared/models/id/entity-id';
 import { UtilsService } from '@core/services/utils.service';
 import { base64toObj, objToBase64URI } from '@app/core/utils';

@@ -20,7 +20,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { forkJoin, Observable, of } from 'rxjs';
 import { StateControllerState } from './state-controller.models';
 import { StateControllerComponent } from './state-controller.component';
-import { StatesControllerService } from '@home/pages/dashboard/states/states-controller.service';
+import { StatesControllerService } from '@home/components/dashboard-page/states/states-controller.service';
 import { EntityId } from '@app/shared/models/id/entity-id';
 import { UtilsService } from '@core/services/utils.service';
 import { base64toObj, insertVariable, isEmpty, objToBase64URI } from '@app/core/utils';

@@ -27,7 +27,7 @@ import { PageLink } from '@shared/models/page/page-link';
 import {
   DashboardStateInfo,
   DashboardStatesDatasource
-} from '@home/pages/dashboard/states/manage-dashboard-states-dialog.component.models';
+} from '@home/components/dashboard-page/states/manage-dashboard-states-dialog.component.models';
 import { Direction, SortOrder } from '@shared/models/page/sort-order';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
@@ -39,7 +39,7 @@ import { deepClone, isUndefined } from '@core/utils';
 import {
   DashboardStateDialogComponent,
   DashboardStateDialogData
-} from '@home/pages/dashboard/states/dashboard-state-dialog.component';
+} from '@home/components/dashboard-page/states/dashboard-state-dialog.component';
 
 export interface ManageDashboardStatesDialogData {
   states: {[id: string]: DashboardState };

@@ -14,13 +14,13 @@
 /// limitations under the License.
 ///
 
-import { IStateControllerComponent, StateControllerState } from '@home/pages/dashboard/states/state-controller.models';
+import { IStateControllerComponent, StateControllerState } from '@home/components/dashboard-page/states/state-controller.models';
 import { IDashboardController } from '../dashboard-page.models';
 import { DashboardState } from '@app/shared/models/dashboard.models';
 import { Subscription } from 'rxjs';
 import { NgZone, OnDestroy, OnInit, Directive } from '@angular/core';
 import { ActivatedRoute, Params, Router } from '@angular/router';
-import { StatesControllerService } from '@home/pages/dashboard/states/states-controller.service';
+import { StatesControllerService } from '@home/components/dashboard-page/states/states-controller.service';
 import { EntityId } from '@app/shared/models/id/entity-id';
 import { StateObject, StateParams } from '@app/core/api/widget-api.models';
 
@@ -31,6 +31,8 @@ export abstract class StateControllerComponent implements IStateControllerCompon
   dashboardCtrl: IDashboardController;
   preservedState: any;
 
+  stateControllerInstanceId: string;
+
   isMobileValue: boolean;
   set isMobile(val: boolean) {
     if (this.isMobileValue !== val) {
@@ -139,7 +141,7 @@ export abstract class StateControllerComponent implements IStateControllerCompon
   }
 
   public preserveState() {
-    this.statesControllerService.preserveStateControllerState(this.stateControllerId(), this.stateObject);
+    this.statesControllerService.preserveStateControllerState(this.stateControllerInstanceId, this.stateObject);
   }
 
   public cleanupPreservedStates() {

@@ -15,15 +15,16 @@
 ///
 
 import { IStateController, StateObject } from '@core/api/widget-api.models';
-import { IDashboardController } from '@home/pages/dashboard/dashboard-page.models';
+import { IDashboardController } from '@home/components/dashboard-page/dashboard-page.models';
 import { DashboardState } from '@shared/models/dashboard.models';
 
 export declare type StateControllerState = StateObject[];
 
 export interface IStateControllerComponent extends IStateController {
+  stateControllerInstanceId: string;
   state: string;
+  currentState: string;
   isMobile: boolean;
-  dashboardCtrl: IDashboardController;
   states: {[id: string]: DashboardState };
   dashboardId: string;
   preservedState: any;

@@ -25,9 +25,9 @@ import {
   ViewContainerRef
 } from '@angular/core';
 import { DashboardState } from '@shared/models/dashboard.models';
-import { IDashboardController } from '@home/pages/dashboard/dashboard-page.models';
-import { StatesControllerService } from '@home/pages/dashboard/states/states-controller.service';
-import { IStateControllerComponent } from '@home/pages/dashboard/states/state-controller.models';
+import { IDashboardController } from '@home/components/dashboard-page/dashboard-page.models';
+import { StatesControllerService } from '@home/components/dashboard-page/states/states-controller.service';
+import { IStateControllerComponent } from '@home/components/dashboard-page/states/state-controller.models';
 
 @Directive({
   // tslint:disable-next-line:directive-selector
@@ -51,6 +51,9 @@ export class StatesComponentDirective implements OnInit, OnDestroy, OnChanges {
   state: string;
 
   @Input()
+  currentState: string;
+
+  @Input()
   isMobile: boolean;
 
   stateControllerComponentRef: ComponentRef<IStateControllerComponent>;
@@ -84,6 +87,8 @@ export class StatesComponentDirective implements OnInit, OnDestroy, OnChanges {
           this.stateControllerComponent.isMobile = this.isMobile;
         } else if (propName === 'state') {
           this.stateControllerComponent.state = this.state;
+        } else if (propName === 'currentState') {
+          this.stateControllerComponent.currentState = this.currentState;
         }
       }
     }
@@ -103,14 +108,17 @@ export class StatesComponentDirective implements OnInit, OnDestroy, OnChanges {
     if (!stateControllerData) {
       stateControllerData = this.statesControllerService.getStateController('default');
     }
-    const preservedState = this.statesControllerService.withdrawStateControllerState(this.statesControllerId);
+    const stateControllerInstanceId = this.dashboardCtrl.dashboardCtx.instanceId + '_' +  this.statesControllerId;
+    const preservedState = this.statesControllerService.withdrawStateControllerState(stateControllerInstanceId);
     const stateControllerFactory = stateControllerData.factory;
     this.stateControllerComponentRef = this.viewContainerRef.createComponent(stateControllerFactory);
     this.stateControllerComponent = this.stateControllerComponentRef.instance;
     this.dashboardCtrl.dashboardCtx.stateController = this.stateControllerComponent;
     this.stateControllerComponent.preservedState = preservedState;
     this.stateControllerComponent.dashboardCtrl = this.dashboardCtrl;
+    this.stateControllerComponent.stateControllerInstanceId = stateControllerInstanceId;
     this.stateControllerComponent.state = this.state;
+    this.stateControllerComponent.currentState = this.currentState;
     this.stateControllerComponent.isMobile = this.isMobile;
     this.stateControllerComponent.states = this.states;
     this.stateControllerComponent.dashboardId = this.dashboardId;

@@ -17,12 +17,11 @@
 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 { StatesControllerService } from './states-controller.service';
 import { EntityStateControllerComponent } from './entity-state-controller.component';
 import { StatesComponentDirective } from './states-component.directive';
 import { HomeDialogsModule } from '@app/modules/home/dialogs/home-dialogs.module';
-import { DefaultStateControllerComponent } from '@home/pages/dashboard/states/default-state-controller.component';
+import { DefaultStateControllerComponent } from '@home/components/dashboard-page/states/default-state-controller.component';
 
 @NgModule({
   declarations: [
@@ -33,7 +32,6 @@ import { DefaultStateControllerComponent } from '@home/pages/dashboard/states/de
   imports: [
     CommonModule,
     SharedModule,
-    HomeComponentsModule,
     HomeDialogsModule
   ],
   exports: [

@@ -16,11 +16,10 @@
 
 import { ComponentFactory, ComponentFactoryResolver, Injectable, Type } from '@angular/core';
 import { deepClone } from '@core/utils';
-import { IStateControllerComponent } from '@home/pages/dashboard/states/state-controller.models';
+import { IStateControllerComponent } from '@home/components/dashboard-page/states/state-controller.models';
 
 export interface StateControllerData {
   factory: ComponentFactory<IStateControllerComponent>;
-  state?: any;
 }
 
 @Injectable()
@@ -28,6 +27,8 @@ export class StatesControllerService {
 
   statesControllers: {[stateControllerId: string]: StateControllerData} = {};
 
+  statesControllerStates: {[stateControllerInstanceId: string]: any} = {};
+
   constructor(private componentFactoryResolver: ComponentFactoryResolver) {
   }
 
@@ -46,19 +47,17 @@ export class StatesControllerService {
     return this.statesControllers[stateControllerId];
   }
 
-  public preserveStateControllerState(stateControllerId: string, state: any) {
-    this.statesControllers[stateControllerId].state = deepClone(state);
+  public preserveStateControllerState(stateControllerInstanceId: string, state: any) {
+    this.statesControllerStates[stateControllerInstanceId] = deepClone(state);
   }
 
-  public withdrawStateControllerState(stateControllerId: string): any {
-    const state = this.statesControllers[stateControllerId].state;
-    this.statesControllers[stateControllerId].state = null;
+  public withdrawStateControllerState(stateControllerInstanceId: string): any {
+    const state = this.statesControllerStates[stateControllerInstanceId];
+    delete this.statesControllerStates[stateControllerInstanceId];
     return state;
   }
 
   public cleanupPreservedStates() {
-    for (const stateControllerId of Object.keys(this.statesControllers)) {
-      this.statesControllers[stateControllerId].state = null;
-    }
+    this.statesControllerStates = {};
   }
 }

@@ -119,6 +119,19 @@ import { SmsProviderConfigurationComponent } from '@home/components/sms/sms-prov
 import { AwsSnsProviderConfigurationComponent } from '@home/components/sms/aws-sns-provider-configuration.component';
 import { TwilioSmsProviderConfigurationComponent } from '@home/components/sms/twilio-sms-provider-configuration.component';
 import { CopyDeviceCredentialsComponent } from '@home/components/device/copy-device-credentials.component';
+import { DashboardPageComponent } from '@home/components/dashboard-page/dashboard-page.component';
+import { DashboardToolbarComponent } from '@home/components/dashboard-page/dashboard-toolbar.component';
+import { StatesControllerModule } from '@home/components/dashboard-page/states/states-controller.module';
+import { DashboardLayoutComponent } from '@home/components/dashboard-page/layout/dashboard-layout.component';
+import { EditWidgetComponent } from '@home/components/dashboard-page/edit-widget.component';
+import { DashboardWidgetSelectComponent } from '@home/components/dashboard-page/dashboard-widget-select.component';
+import { AddWidgetDialogComponent } from '@home/components/dashboard-page/add-widget-dialog.component';
+import { ManageDashboardLayoutsDialogComponent } from '@home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component';
+import { DashboardSettingsDialogComponent } from '@home/components/dashboard-page/dashboard-settings-dialog.component';
+import { ManageDashboardStatesDialogComponent } from '@home/components/dashboard-page/states/manage-dashboard-states-dialog.component';
+import { DashboardStateDialogComponent } from '@home/components/dashboard-page/states/dashboard-state-dialog.component';
+import { EmbedDashboardDialogComponent } from '@home/components/widget/dialog/embed-dashboard-dialog.component';
+import { EMBED_DASHBOARD_DIALOG_TOKEN } from '@home/components/widget/dialog/embed-dashboard-dialog-token';
 
 @NgModule({
   declarations:
@@ -220,12 +233,24 @@ import { CopyDeviceCredentialsComponent } from '@home/components/device/copy-dev
       EditAlarmDetailsDialogComponent,
       SmsProviderConfigurationComponent,
       AwsSnsProviderConfigurationComponent,
-      TwilioSmsProviderConfigurationComponent
+      TwilioSmsProviderConfigurationComponent,
+      DashboardToolbarComponent,
+      DashboardPageComponent,
+      DashboardLayoutComponent,
+      EditWidgetComponent,
+      DashboardWidgetSelectComponent,
+      AddWidgetDialogComponent,
+      ManageDashboardLayoutsDialogComponent,
+      DashboardSettingsDialogComponent,
+      ManageDashboardStatesDialogComponent,
+      DashboardStateDialogComponent,
+      EmbedDashboardDialogComponent
     ],
   imports: [
     CommonModule,
     SharedModule,
-    SharedHomeComponentsModule
+    SharedHomeComponentsModule,
+    StatesControllerModule
   ],
   exports: [
     EntitiesTableComponent,
@@ -309,12 +334,24 @@ import { CopyDeviceCredentialsComponent } from '@home/components/device/copy-dev
     DeviceProfileProvisionConfigurationComponent,
     SmsProviderConfigurationComponent,
     AwsSnsProviderConfigurationComponent,
-    TwilioSmsProviderConfigurationComponent
+    TwilioSmsProviderConfigurationComponent,
+    DashboardToolbarComponent,
+    DashboardPageComponent,
+    DashboardLayoutComponent,
+    EditWidgetComponent,
+    DashboardWidgetSelectComponent,
+    AddWidgetDialogComponent,
+    ManageDashboardLayoutsDialogComponent,
+    DashboardSettingsDialogComponent,
+    ManageDashboardStatesDialogComponent,
+    DashboardStateDialogComponent,
+    EmbedDashboardDialogComponent
   ],
   providers: [
     WidgetComponentService,
     CustomDialogService,
-    ImportExportService
+    ImportExportService,
+    {provide: EMBED_DASHBOARD_DIALOG_TOKEN, useValue: EmbedDashboardDialogComponent}
   ]
 })
 export class HomeComponentsModule { }

@@ -136,6 +136,41 @@
             </mat-form-field>
           </div>
         </ng-template>
+        <ng-template [ngSwitchCase]="widgetActionFormGroup.get('type').value === widgetActionType.openDashboardState ?
+                                     widgetActionFormGroup.get('type').value : ''">
+          <mat-checkbox formControlName="openInSeparateDialog">
+            {{ 'widget-action.open-in-separate-dialog' | translate }}
+          </mat-checkbox>
+          <section fxLayout="column" *ngIf="actionTypeFormGroup.get('openInSeparateDialog').value">
+            <mat-form-field class="mat-block">
+              <mat-label translate>widget-action.dialog-title</mat-label>
+              <input matInput formControlName="dialogTitle">
+            </mat-form-field>
+            <mat-checkbox formControlName="dialogHideDashboardToolbar">
+              {{ 'widget-action.dialog-hide-dashboard-toolbar' | translate }}
+            </mat-checkbox>
+            <mat-form-field class="mat-block">
+              <mat-label translate>widget-action.dialog-width</mat-label>
+              <input type="number" min="1" max="100" step="1" matInput formControlName="dialogWidth">
+              <mat-error *ngIf="actionTypeFormGroup.get('dialogWidth').hasError('min')">
+                {{ 'widget-action.dialog-size-range-error' | translate }}
+              </mat-error>
+              <mat-error *ngIf="actionTypeFormGroup.get('dialogWidth').hasError('max')">
+                {{ 'widget-action.dialog-size-range-error' | translate }}
+              </mat-error>
+            </mat-form-field>
+            <mat-form-field class="mat-block">
+              <mat-label translate>widget-action.dialog-height</mat-label>
+              <input type="number" min="1" max="100" step="1" matInput formControlName="dialogHeight">
+              <mat-error *ngIf="actionTypeFormGroup.get('dialogHeight').hasError('min')">
+                {{ 'widget-action.dialog-size-range-error' | translate }}
+              </mat-error>
+              <mat-error *ngIf="actionTypeFormGroup.get('dialogHeight').hasError('max')">
+                {{ 'widget-action.dialog-size-range-error' | translate }}
+              </mat-error>
+            </mat-form-field>
+          </section>
+        </ng-template>
         <ng-template [ngSwitchCase]="widgetActionType.custom">
           <tb-js-func
             formControlName="customFunction"

@@ -44,6 +44,7 @@ import { DashboardService } from '@core/http/dashboard.service';
 import { Dashboard } from '@shared/models/dashboard.models';
 import { DashboardUtilsService } from '@core/services/dashboard-utils.service';
 import { CustomActionEditorCompleter } from '@home/components/widget/action/custom-action.models';
+import { isDefinedAndNotNull } from '@core/utils';
 
 export interface WidgetActionDialogData {
   isAdd: boolean;
@@ -155,6 +156,28 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
             );
             this.setupSelectedDashboardStateIds(action ? action.targetDashboardId : null);
           } else {
+            if (type === WidgetActionType.openDashboardState) {
+              this.actionTypeFormGroup.addControl(
+                'openInSeparateDialog',
+                this.fb.control(action ? action.openInSeparateDialog : false, [])
+              );
+              this.actionTypeFormGroup.addControl(
+                'dialogTitle',
+                this.fb.control(action ? action.dialogTitle : '', [])
+              );
+              this.actionTypeFormGroup.addControl(
+                'dialogHideDashboardToolbar',
+                this.fb.control(action && isDefinedAndNotNull(action.dialogHideDashboardToolbar) ? action.dialogHideDashboardToolbar : true, [])
+              );
+              this.actionTypeFormGroup.addControl(
+                'dialogWidth',
+                this.fb.control(action ? action.dialogWidth : null, [Validators.min(1), Validators.max(100)])
+              );
+              this.actionTypeFormGroup.addControl(
+                'dialogHeight',
+                this.fb.control(action ? action.dialogHeight : null, [Validators.min(1), Validators.max(100)])
+              );
+            }
             this.actionTypeFormGroup.addControl(
               'openRightLayout',
               this.fb.control(action ? action.openRightLayout : false, [])

+///
+/// Copyright © 2016-2021 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 { InjectionToken } from '@angular/core';
+import { ComponentType } from '@angular/cdk/portal';
+
+export const EMBED_DASHBOARD_DIALOG_TOKEN: InjectionToken<ComponentType<any>> =
+  new InjectionToken<ComponentType<any>>('EMBED_DASHBOARD_DIALOG_TOKEN');
+

+<!--
+
+    Copyright © 2016-2021 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="dashboard-state-dialog" [ngStyle]="dialogStyle" fxLayout="column">
+  <mat-toolbar color="primary">
+    <h2>{{title}}</h2>
+    <span fxFlex></span>
+    <button mat-icon-button (click)="close()" 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 class="dashboard-state-dialog-content" mat-dialog-content fxFlex fxLayout="column" style="padding: 8px;">
+    <tb-dashboard-page [embedded]="true" [hideToolbar]="hideToolbar" [currentState]="state" [dashboard]="dashboard" style="width: 100%; height: 100%;"></tb-dashboard-page>
+  </div>
+  <div mat-dialog-actions fxLayoutAlign="end center">
+    <button mat-button color="primary"
+            type="button"
+            [disabled]="(isLoading$ | async)"
+            (click)="close()" cdkFocusInitial>
+      Close
+    </button>
+  </div>
+</div>

+/**
+ * Copyright © 2016-2021 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 {
+  .dashboard-state-dialog {
+    .mat-dialog-content.dashboard-state-dialog-content {
+      max-height: 100%;
+    }
+
+    @media screen and (max-width: 599px) {
+      width: 100% !important;
+      height: 100% !important;
+    }
+
+    @media screen and (min-width: 600px) {
+      width: 480px;
+      height: 600px;
+    }
+
+    @media screen and (min-width: 960px) {
+      width: 768px;
+      height: 600px;
+    }
+
+    @media screen and (min-width: 1280px) {
+      width: 1000px;
+      height: 800px;
+    }
+  }
+}

+///
+/// Copyright © 2016-2021 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,
+  ComponentFactoryResolver,
+  Inject,
+  Injector,
+  OnInit,
+  ViewChild,
+  ViewContainerRef
+} from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { Router } from '@angular/router';
+import { DialogComponent } from '@shared/components/dialog.component';
+import { Dashboard } from '@shared/models/dashboard.models';
+
+export interface EmbedDashboardDialogData {
+  dashboard: Dashboard;
+  state: string;
+  title: string;
+  hideToolbar: boolean;
+  width?: number;
+  height?: number;
+}
+
+@Component({
+  selector: 'tb-embed-dashboard-dialog',
+  templateUrl: './embed-dashboard-dialog.component.html',
+  styleUrls: ['./embed-dashboard-dialog.component.scss']
+})
+export class EmbedDashboardDialogComponent extends DialogComponent<EmbedDashboardDialogComponent>
+  implements OnInit {
+
+  @ViewChild('dashboardContent', {read: ViewContainerRef, static: true}) dashboardContentContainer: ViewContainerRef;
+
+  dashboard = this.data.dashboard;
+  state = this.data.state;
+  title = this.data.title;
+  hideToolbar = this.data.hideToolbar;
+
+  dialogStyle: any = {};
+
+  constructor(protected store: Store<AppState>,
+              protected router: Router,
+              @Inject(MAT_DIALOG_DATA) public data: EmbedDashboardDialogData,
+              public dialogRef: MatDialogRef<EmbedDashboardDialogComponent>) {
+    super(store, router, dialogRef);
+    if (this.data.width) {
+      this.dialogStyle.width = this.data.width + 'vw';
+    }
+    if (this.data.height) {
+      this.dialogStyle.height = this.data.height + 'vh';
+    }
+  }
+
+  ngOnInit(): void {
+  }
+
+  close(): void {
+    this.dialogRef.close(null);
+  }
+
+}

@@ -22,6 +22,7 @@ import {
   ComponentFactoryResolver,
   ComponentRef,
   ElementRef,
+  Inject,
   Injector,
   Input,
   NgZone,
@@ -54,7 +55,7 @@ import { AppState } from '@core/core.state';
 import { WidgetService } from '@core/http/widget.service';
 import { UtilsService } from '@core/services/utils.service';
 import { forkJoin, Observable, of, ReplaySubject, Subscription, throwError } from 'rxjs';
-import { deepClone, isDefined, objToBase64URI } from '@core/utils';
+import { deepClone, insertVariable, isDefined, objToBase64, objToBase64URI } from '@core/utils';
 import {
   IDynamicWidgetComponent,
   WidgetContext,
@@ -93,6 +94,10 @@ import { EntityDataService } from '@core/api/entity-data.service';
 import { TranslateService } from '@ngx-translate/core';
 import { NotificationType } from '@core/notification/notification.models';
 import { AlarmDataService } from '@core/api/alarm-data.service';
+import { MatDialog } from '@angular/material/dialog';
+import { ComponentType } from '@angular/cdk/portal';
+import { EMBED_DASHBOARD_DIALOG_TOKEN } from '@home/components/widget/dialog/embed-dashboard-dialog-token';
+import { Dashboard } from '@shared/models/dashboard.models';
 
 @Component({
   selector: 'tb-widget',
@@ -161,6 +166,8 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
               private componentFactoryResolver: ComponentFactoryResolver,
               private elementRef: ElementRef,
               private injector: Injector,
+              private dialog: MatDialog,
+              @Inject(EMBED_DASHBOARD_DIALOG_TOKEN) private embedDashboardDialogComponent: ComponentType<any>,
               private widgetService: WidgetService,
               private resources: ResourcesService,
               private timeService: TimeService,
@@ -1007,7 +1014,11 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
         const params = deepClone(this.widgetContext.stateController.getStateParams());
         this.updateEntityParams(params, targetEntityParamName, targetEntityId, entityName, entityLabel);
         if (type === WidgetActionType.openDashboardState) {
-          this.widgetContext.stateController.openState(targetDashboardStateId, params, descriptor.openRightLayout);
+          if (descriptor.openInSeparateDialog) {
+            this.openDashboardStateInDialog(descriptor, entityId, entityName, additionalParams, entityLabel);
+          } else {
+            this.widgetContext.stateController.openState(targetDashboardStateId, params, descriptor.openRightLayout);
+          }
         } else {
           this.widgetContext.stateController.updateState(targetDashboardStateId, params, descriptor.openRightLayout);
         }
@@ -1083,6 +1094,61 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
     }
   }
 
+  private openDashboardStateInDialog(descriptor: WidgetActionDescriptor,
+                                     entityId?: EntityId, entityName?: string, additionalParams?: any, entityLabel?: string) {
+    const dashboard = deepClone(this.widgetContext.stateController.dashboardCtrl.dashboardCtx.getDashboard());
+    const stateObject: StateObject = {};
+    stateObject.params = {};
+    const targetEntityParamName = descriptor.stateEntityParamName;
+    const targetDashboardStateId = descriptor.targetDashboardStateId;
+    let targetEntityId: EntityId;
+    if (descriptor.setEntityId) {
+      targetEntityId = entityId;
+    }
+    this.updateEntityParams(stateObject.params, targetEntityParamName, targetEntityId, entityName, entityLabel);
+    if (targetDashboardStateId) {
+      stateObject.id = targetDashboardStateId;
+    }
+    let title = descriptor.dialogTitle;
+    if (!title) {
+      if (targetDashboardStateId && dashboard.configuration.states) {
+        const dashboardState = dashboard.configuration.states[targetDashboardStateId];
+        if (dashboardState) {
+          title = dashboardState.name;
+        }
+      }
+    }
+    if (!title) {
+      title = dashboard.title;
+    }
+    title = this.utils.customTranslation(title, title);
+    const params = stateObject.params;
+    const paramsEntityName = params && params.entityName ? params.entityName : '';
+    const paramsEntityLabel = params && params.entityLabel ? params.entityLabel : '';
+    title = insertVariable(title, 'entityName', paramsEntityName);
+    title = insertVariable(title, 'entityLabel', paramsEntityLabel);
+    for (const prop of Object.keys(params)) {
+      if (params[prop] && params[prop].entityName) {
+        title = insertVariable(title, prop + ':entityName', params[prop].entityName);
+      }
+      if (params[prop] && params[prop].entityLabel) {
+        title = insertVariable(title, prop + ':entityLabel', params[prop].entityLabel);
+      }
+    }
+    this.dialog.open(this.embedDashboardDialogComponent, {
+      disableClose: true,
+      panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
+      data: {
+        dashboard,
+        state: objToBase64([ stateObject ]),
+        title,
+        hideToolbar: descriptor.dialogHideDashboardToolbar,
+        width: descriptor.dialogWidth,
+        height: descriptor.dialogHeight
+      }
+    });
+  }
+
   private elementClick($event: Event) {
     const e = ($event.target || $event.srcElement) as Element;
     if (e.id) {

@@ -19,7 +19,6 @@ import { CommonModule } from '@angular/common';
 import { SharedModule } from '@app/shared/shared.module';
 import { HomeComponentsModule } from '@modules/home/components/home-components.module';
 import { ApiUsageComponent } from '@home/pages/api-usage/api-usage.component';
-import { DashboardModule } from '@home/pages/dashboard/dashboard.module';
 import { ApiUsageRoutingModule } from '@home/pages/api-usage/api-usage-routing.module';
 
 @NgModule({
@@ -31,7 +30,6 @@ import { ApiUsageRoutingModule } from '@home/pages/api-usage/api-usage-routing.m
     CommonModule,
     SharedModule,
     HomeComponentsModule,
-    DashboardModule,
     ApiUsageRoutingModule
   ]
 })

@@ -24,7 +24,7 @@ import { CustomersTableConfigResolver } from './customers-table-config.resolver'
 import { DevicesTableConfigResolver } from '@modules/home/pages/device/devices-table-config.resolver';
 import { AssetsTableConfigResolver } from '../asset/assets-table-config.resolver';
 import { DashboardsTableConfigResolver } from '@modules/home/pages/dashboard/dashboards-table-config.resolver';
-import { DashboardPageComponent } from '@home/pages/dashboard/dashboard-page.component';
+import { DashboardPageComponent } from '@home/components/dashboard-page/dashboard-page.component';
 import { BreadCrumbConfig } from '@shared/components/breadcrumb';
 import { dashboardBreadcumbLabelFunction, DashboardResolver } from '@home/pages/dashboard/dashboard-routing.module';
 

@@ -20,7 +20,7 @@ import { ActivatedRouteSnapshot, Resolve, RouterModule, Routes } from '@angular/
 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 { DashboardPageComponent } from '@home/components/dashboard-page/dashboard-page.component';
 import { BreadCrumbConfig, BreadCrumbLabelFunction } from '@shared/components/breadcrumb';
 import { Observable } from 'rxjs';
 import { Dashboard } from '@app/shared/models/dashboard.models';

@@ -24,44 +24,19 @@ 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';
-import { StatesControllerModule } from '@home/pages/dashboard/states/states-controller.module';
-import { DashboardLayoutComponent } from './layout/dashboard-layout.component';
-import { EditWidgetComponent } from './edit-widget.component';
-import { DashboardWidgetSelectComponent } from './dashboard-widget-select.component';
-import { AddWidgetDialogComponent } from './add-widget-dialog.component';
-import { ManageDashboardLayoutsDialogComponent } from './layout/manage-dashboard-layouts-dialog.component';
-import { DashboardSettingsDialogComponent } from './dashboard-settings-dialog.component';
-import { ManageDashboardStatesDialogComponent } from './states/manage-dashboard-states-dialog.component';
-import { DashboardStateDialogComponent } from './states/dashboard-state-dialog.component';
 
 @NgModule({
   declarations: [
     DashboardFormComponent,
     DashboardTabsComponent,
     ManageDashboardCustomersDialogComponent,
-    MakeDashboardPublicDialogComponent,
-    DashboardToolbarComponent,
-    DashboardPageComponent,
-    DashboardLayoutComponent,
-    EditWidgetComponent,
-    DashboardWidgetSelectComponent,
-    AddWidgetDialogComponent,
-    ManageDashboardLayoutsDialogComponent,
-    DashboardSettingsDialogComponent,
-    ManageDashboardStatesDialogComponent,
-    DashboardStateDialogComponent
-  ],
-  exports: [
-    DashboardPageComponent
+    MakeDashboardPublicDialogComponent
   ],
   imports: [
     CommonModule,
     SharedModule,
     HomeComponentsModule,
     HomeDialogsModule,
-    StatesControllerModule,
     DashboardRoutingModule
   ]
 })

@@ -345,6 +345,11 @@ export interface WidgetActionDescriptor extends CustomActionDescriptor {
   targetDashboardStateId?: string;
   openRightLayout?: boolean;
   openNewBrowserTab?: boolean;
+  openInSeparateDialog?: boolean;
+  dialogTitle?: string;
+  dialogHideDashboardToolbar?: boolean;
+  dialogWidth?: number;
+  dialogHeight?: number;
   setEntityId?: boolean;
   stateEntityParamName?: string;
 }

@@ -2258,6 +2258,12 @@
         "set-entity-from-widget": "Set entity from widget",
         "target-dashboard": "Target dashboard",
         "open-right-layout": "Open right dashboard layout (mobile view)",
+        "open-in-separate-dialog": "Open in separate dialog",
+        "dialog-title": "Dialog title",
+        "dialog-hide-dashboard-toolbar": "Hide dashboard toolbar in dialog",
+        "dialog-width": "Dialog width in percents relative to viewport width",
+        "dialog-height": "Dialog height in percents relative to viewport height",
+        "dialog-size-range-error": "Dialog size percent value should be in a range from 1 to 100.",
         "open-new-browser-tab": "Open in a new browser tab"
     },
     "widgets-bundle": {