feat: add support for expanding dashboard visualizations (#2824)

* feat: add support for expanding dashboard visualizations

These changes implement support for expanding a dashboard visualization
into a larger modal dialog.

This is useful if you have a dashboard with lots of small widgets and
want to inspect one of the widgets more closely. In the past, this
would've required you to navigate to the query page to see a larger
version of the visualization. With these changes, visualizations can
be expanded right from the dashboard.

The implementation is simple as it just renders the visualization into
a modal dialog. Other parts of the widget (e.g. parameters) are not
included in this dialog.

* chore(widget-dialog): use query-link widget to render title

This reduces code duplication a bit. The link is made read-only
as navigation doesn't close the modal dialog.

* fix: make ui-select dropdown z-index > modal dialog z-index in dashboard page

Otherwise the dropdown renders behind the modal dialog if filter value
is changed from the modal view of a widget.

client/app/components/dashboards/widget-dialog.html

@@ -0,0 +1,12 @@
+<div class="modal-header">
+  <button type="button" class="close" aria-hidden="true" ng-click="$ctrl.dismiss()">&times;</button>
+  <div class="visualization-title">
+    <query-link query="$ctrl.widget.getQuery()" visualization="$ctrl.widget.visualization" readonly="true"></query-link>
+  </div>
+</div>
+<div class="modal-body">
+  <visualization-renderer visualization="$ctrl.widget.visualization" query-result="$ctrl.widget.getQueryResult()" class="t-body"></visualization-renderer>
+</div>
+<div class="modal-footer">
+  <button type="button" class="btn btn-default" ng-click="$ctrl.dismiss()">Close</button>
+</div>

client/app/components/dashboards/widget-dialog.less

@@ -0,0 +1,8 @@
+.visualization-title {
+    font-weight: 500;
+    font-size: 15px;
+}
+
+body.modal-open .dropdown.open {
+    z-index: 10000;
+}

client/app/components/dashboards/widget.html

@@ -59,6 +59,7 @@
       </span>
 
       <button class="btn btn-sm btn-default pull-right hidden-print btn-transparent btn__refresh" ng-click="$ctrl.refresh()" ng-if="!$ctrl.public"><i class="zmdi zmdi-refresh"></i></button>
+      <button class="btn btn-sm btn-default pull-right hidden-print btn-transparent btn__refresh" ng-click="$ctrl.expandVisualization()"><i class="zmdi zmdi-fullscreen"></i></button>
     </div>
   </div>
 

client/app/components/dashboards/widget.js

@@ -1,8 +1,22 @@
 import template from './widget.html';
 import editTextBoxTemplate from './edit-text-box.html';
+import widgetDialogTemplate from './widget-dialog.html';
 import './widget.less';
+import './widget-dialog.less';
 import './add-widget-dialog.less';
 
+const WidgetDialog = {
+  template: widgetDialogTemplate,
+  bindings: {
+    resolve: '<',
+    close: '&',
+    dismiss: '&',
+  },
+  controller() {
+    this.widget = this.resolve.widget;
+  },
+};
+
 const EditTextBoxComponent = {
   template: editTextBoxTemplate,
   bindings: {
@@ -51,6 +65,16 @@ function DashboardWidgetCtrl($location, $uibModal, $window, Events, currentUser)
     });
   };
 
+  this.expandVisualization = () => {
+    $uibModal.open({
+      component: 'widgetDialog',
+      resolve: {
+        widget: this.widget,
+      },
+      size: 'lg',
+    });
+  };
+
   this.localParametersDefs = () => {
     if (!this.localParameters) {
       this.localParameters = this.widget
@@ -99,6 +123,7 @@ function DashboardWidgetCtrl($location, $uibModal, $window, Events, currentUser)
 
 export default function init(ngModule) {
   ngModule.component('editTextBox', EditTextBoxComponent);
+  ngModule.component('widgetDialog', WidgetDialog);
   ngModule.component('dashboardWidget', {
     template,
     controller: DashboardWidgetCtrl,