Added dashboard logo checkbox

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html

@@ -46,16 +46,26 @@
               <mat-icon>view_compact</mat-icon>
             </button>
           </div>
-          <tb-states-component fxFlex.lt-md
-                               [statesControllerId]="isEdit ? 'default' : dashboardConfiguration.settings.stateControllerId"
-                               [dashboardCtrl]="this"
-                               [dashboardId]="(!embedded && dashboard.id) ? dashboard.id.id : ''"
-                               [isMobile]="isMobile"
-                               [state]="dashboardCtx.state"
-                               [currentState]="currentState"
-                               [syncStateWithQueryParam]="syncStateWithQueryParam"
-                               [states]="dashboardConfiguration.states">
-          </tb-states-component>
+
+          <div fxFlex.lt-md fxLayout="row"
+               fxLayoutAlign.gt-sm="start center"
+               fxLayoutAlign="end center" fxLayoutGap="12px" class="db-logo-and-title" >
+
+            <img [fxShow]="showDashboardLogo()" [src]="dashboard_logo"
+                 aria-label="white_label_logo" class="whitelabel-logo-db"/>
+
+            <tb-states-component fxFlex.lt-md
+                                 [statesControllerId]="isEdit ? 'default' : dashboardConfiguration.settings.stateControllerId"
+                                 [dashboardCtrl]="this"
+                                 [dashboardId]="(!embedded && dashboard.id) ? dashboard.id.id : ''"
+                                 [isMobile]="isMobile"
+                                 [state]="dashboardCtx.state"
+                                 [currentState]="currentState"
+                                 [syncStateWithQueryParam]="syncStateWithQueryParam"
+                                 [states]="dashboardConfiguration.states">
+            </tb-states-component>
+
+          </div>
         </div>
         <div class="tb-dashboard-action-panel" fxFlex="1 0 auto" fxLayout="row-reverse"
              fxLayoutAlign.gt-sm="start center" fxLayoutAlign="space-between center" fxLayoutGap="12px">
@@ -286,4 +296,4 @@
       </mat-drawer>
     </mat-drawer-container>
   </section>
-</div>
+</div>

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.scss

@@ -54,6 +54,14 @@ div.tb-dashboard-page {
     z-index: 13;
     pointer-events: none;
 
+    .db-logo-and-title {
+      height: $toolbar-height;
+      .whitelabel-logo-db{
+        height: 100%;
+        width: auto;
+      }
+    }
+
     &.tb-dashboard-toolbar-opened {
       right: 0;
       // transition: right .3s cubic-bezier(.55, 0, .55, .2);
@@ -63,8 +71,9 @@ div.tb-dashboard-page {
       right: 18px;
       transition: right .3s cubic-bezier(.55, 0, .55, .2) .2s;
     }
-  }
+  
 
+    }
   .tb-dashboard-container {
     &.tb-dashboard-toolbar-opened {
       &.is-fullscreen {

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts

@@ -189,6 +189,8 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
   currentDashboardScope: DashboardPageScope;
 
   addingLayoutCtx: DashboardPageLayoutContext;
+  
+  dashboard_logo = 'assets/example_logo.png';
 
 
   dashboardCtx: DashboardContext = {
@@ -480,6 +482,15 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
     }
   }
 
+  public showDashboardLogo(): boolean {
+    if (this.dashboard.configuration.settings &&
+      isDefined(this.dashboard.configuration.settings.showDashboardLogo)) {
+      return this.dashboard.configuration.settings.showDashboardLogo;
+    } else {
+      return true;
+    }
+  }
+  
   public showRightLayoutSwitch(): boolean {
     return this.isMobile && this.layouts.right.show;
   }

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html

@@ -53,6 +53,9 @@
           </tb-color-input>
         </div>
         <div fxLayout="row" fxLayoutAlign="start center" fxLayout.lt-md="column" fxLayoutAlign.lt-md  fxLayoutGap="8px">
+          <mat-checkbox fxFlex formControlName="showDashboardLogo">
+            {{ 'dashboard.display-dashboard-showDashboardLogo' | translate }}
+          </mat-checkbox>
           <mat-checkbox fxFlex formControlName="showDashboardsSelect">
             {{ 'dashboard.display-dashboards-selection' | translate }}
           </mat-checkbox>

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.ts

@@ -79,6 +79,7 @@ export class DashboardSettingsDialogComponent extends DialogComponent<DashboardS
         showDashboardsSelect: [isUndefined(this.settings.showDashboardsSelect) ? true : this.settings.showDashboardsSelect, []],
         showEntitiesSelect: [isUndefined(this.settings.showEntitiesSelect) ? true : this.settings.showEntitiesSelect, []],
         showFilters: [isUndefined(this.settings.showFilters) ? true : this.settings.showFilters, []],
+        showDashboardLogo: [isUndefined(this.settings.showDashboardLogo) ? true : this.settings.showDashboardLogo, []],
         showDashboardTimewindow: [isUndefined(this.settings.showDashboardTimewindow) ? true : this.settings.showDashboardTimewindow, []],
         showDashboardExport: [isUndefined(this.settings.showDashboardExport) ? true : this.settings.showDashboardExport, []]
       });

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-toolbar.component.html

@@ -26,10 +26,6 @@
     </button>
   </mat-fab-trigger>
   <mat-toolbar color="primary">
-    <div fxFlex="auto" fxLayout="row">
-      <img [src]="white_label_logo"
-           aria-label="white_label_logo" class="whitelabel-logo-db"/>
-    </div>
     <mat-fab-actions class="mat-toolbar-tools">
       <ng-content></ng-content>
     </mat-fab-actions>

ui-ngx/src/app/modules/home/pages/api-usage/api_usage_json.raw

@@ -4413,7 +4413,8 @@
       "showDashboardExport": false,
       "toolbarAlwaysOpen": true,
       "titleColor": "rgba(0,0,0,0.870588)",
-      "showFilters": false
+      "showFilters": false,
+      "showDashboardLogo": false
     }
   },
   "name": "Api Usage"

ui-ngx/src/app/shared/models/dashboard.models.ts

@@ -86,6 +86,7 @@ export interface DashboardSettings {
   showDashboardsSelect?: boolean;
   showEntitiesSelect?: boolean;
   showFilters?: boolean;
+  showDashboardLogo?: boolean; 
   showDashboardTimewindow?: boolean;
   showDashboardExport?: boolean;
   toolbarAlwaysOpen?: boolean;

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -725,6 +725,7 @@
         "display-filters": "Display filters",
         "display-dashboard-timewindow": "Display timewindow",
         "display-dashboard-export": "Display export",
+        "display-dashboard-showDashboardLogo": "Display dashboard logo", 
         "import": "Import dashboard",
         "export": "Export dashboard",
         "export-failed-error": "Unable to export dashboard: {{error}}",