github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

Introduce expanded dashboard panel mode (#9706)

Browse source 
Backports PR #9666

**Commit 1:**
Introduce expanded dashboard panel mode

* Original sha: 9200cb1f3b
* Authored by Stacey Gammon <gammon@elastic.co> on 2016-12-28T17:02:17Z

**Commit 2:**
address code review comments

* Original sha: e3a8caecaa
* Authored by Stacey Gammon <gammon@elastic.co> on 2017-01-03T16:06:18Z
This commit is contained in:
jasper 2017-01-03 14:45:53 -05:00 • committed by Stacey Gammon
parent 82f883a70e
commit 85b603f472
6 changed files with 136 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/core_plugins/kibana/public/dashboard/components/panel/panel.html
View file

@ -4,13 +4,16 @@
{{::savedObj.title}}
</span>
<div class="btn-group">
<a aria-label="Expand" ng-click="toggleExpand()">
<span class="fa" ng-class="{'fa-expand': !isExpanded, 'fa-compress': isExpanded}"></span>
</a>
<a aria-label="Edit" ng-show="!isFullScreenMode && editUrl" ng-href="{{::editUrl}}">
<i aria-hidden="true" class="fa fa-pencil"></i>
</a>
<a aria-label="Move" ng-show="!isFullScreenMode" class="panel-move">
<a aria-label="Move" ng-show="!isExpanded && !isFullScreenMode" class="panel-move">
<i aria-hidden="true" class="fa fa-arrows"></i>
</a>
<a aria-label="Remove" ng-show="!isFullScreenMode" ng-click="remove()">
<a aria-label="Remove" ng-show="!isExpanded && !isFullScreenMode" ng-click="remove()">
<i aria-hidden="true" class="fa fa-times"></i>
</a>
</div>

12
src/core_plugins/kibana/public/dashboard/directives/dashboard_panel.js
View file

@ -59,7 +59,17 @@ uiModules
* as saved searches. We need to remove reliance there before we can break it out here.
* See https://github.com/elastic/kibana/issues/9558 for more information.
*/
state: '='
state: '=',
/**
* Expand or collapse the current panel, so it either takes up the whole screen or goes back to its
* natural size.
* @type {function}
*/
toggleExpand: '&',
/**
* @type {boolean}
*/
isExpanded: '='
},
link: function ($scope, element) {
if (!$scope.panel.id || !$scope.panel.type) return;

13
src/core_plugins/kibana/public/dashboard/directives/grid.js
View file

@ -162,11 +162,14 @@ app.directive('dashboardGrid', function ($compile, Notifier) {
const panelHtml = `
<li>
<dashboard-panel remove="removePanelFromState(${panel.panelIndex})"
panel="getPanelByPanelIndex(${panel.panelIndex})"
is-full-screen-mode="!chrome.getVisible()"
state="state"
parent-ui-state="uiState">
<dashboard-panel
remove="removePanelFromState(${panel.panelIndex})"
panel="getPanelByPanelIndex(${panel.panelIndex})"
is-full-screen-mode="!chrome.getVisible()"
state="state"
is-expanded="false"
toggle-expand="toggleExpandPanel(${panel.panelIndex})"
parent-ui-state="uiState">
</li>`;
panel.$el = $compile(panelHtml)($scope);

10
src/core_plugins/kibana/public/dashboard/index.html
View file

@ -59,5 +59,13 @@
<p>Click the <a class="btn btn-xs navbtn-inverse" ng-click="kbnTopNav.open('add'); toggleAddVisualization = !toggleAddVisualization" aria-label="Add visualization">Add</a> button in the menu bar above to add a visualization to the dashboard. <br/>If you haven't setup a visualization yet visit the <a href="#/visualize" title="Visualize">"Visualize"</a> tab to create your first visualization.</p>
</div>
<dashboard-grid></dashboard-grid>
<dashboard-grid ng-if="!hasExpandedPanel()"></dashboard-grid>
<dashboard-panel ng-if="hasExpandedPanel()"
panel="expandedPanel"
is-full-screen-mode="!chrome.getVisible()"
state="state"
is-expanded="true"
toggle-expand="toggleExpandPanel(expandedPanel.panelIndex)"
parent-ui-state="uiState">
</dashboard-app>

11
src/core_plugins/kibana/public/dashboard/index.js
View file

@ -208,6 +208,17 @@ app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter,
chrome.addApplicationClass(theme);
}
$scope.expandedPanel = null;
$scope.hasExpandedPanel = () => $scope.expandedPanel !== null;
$scope.toggleExpandPanel = (panelIndex) => {
if ($scope.expandedPanel && $scope.expandedPanel.panelIndex === panelIndex) {
$scope.expandedPanel = null;
} else {
$scope.expandedPanel =
$scope.state.panels.find((panel) => panel.panelIndex === panelIndex);
}
};
// update root source when filters update
$scope.$listen(queryFilter, 'update', function () {
updateQueryOnRootSource();

171
src/core_plugins/kibana/public/dashboard/styles/main.less
View file

@ -36,6 +36,10 @@ dashboard-grid {
.gs-w {
border: 2px dashed transparent;
.panel .panel-heading .btn-group {
display: none;
}
&:hover {
border-color: @kibanaGray4;
@ -54,101 +58,110 @@ dashboard-grid {
i.remove {
cursor: pointer;
}
}
dashboard-panel {
display: block;
.dashboard-container {
flex: 1;
display: flex;
flex-direction: column;
}
dashboard-panel {
flex: 1;
display: flex;
flex-direction: column;
height: 100%;
background: @dashboard-panel-bg;
color: @dashboard-panel-color;
padding: 0;
overflow: hidden;
position: relative;
.panel {
margin: 0;
// maintain the 100% height of the panel
height: 100%;
background: @dashboard-panel-bg;
color: @dashboard-panel-color;
padding: 0;
overflow: hidden;
position: relative;
flex: 1;
.panel {
margin: 0;
// maintain the 100% height of the panel
height: 100%;
// flex layout allows us to define the visualize element as "fill available space"
display: flex;
flex-direction: column;
justify-content: flex-start;
border: 0 solid transparent;
// flex layout allows us to define the visualize element as "fill available space"
.panel-heading {
padding: 0px 0px 0px 5px;
flex: 0 0 auto;
white-space: nowrap;
display: flex;
flex-direction: column;
justify-content: flex-start;
border: 0 solid transparent;
.panel-heading {
padding: 0px 0px 0px 5px;
flex: 0 0 auto;
white-space: nowrap;
display: flex;
border-top-right-radius: 0;
border-top-left-radius: 0;
background-color: @white;
border: none;
.btn-group {
a {
color: inherit;
}
display: none;
white-space: nowrap;
flex: 0 0 auto;
}
.panel-title {
font-size: inherit;
// flexbox fix for IE10
// http://stackoverflow.com/questions/22008135/internet-explorer-10-does-not-apply-flexbox-on-inline-elements
display: inline-block;
.ellipsis();
flex: 1 1 auto;
i {
opacity: 0.3;
font-size: 1.2em;
margin-right: 4px;
}
}
.panel-move:hover {
cursor: move;
}
border-top-right-radius: 0;
border-top-left-radius: 0;
background-color: @white;
border: none;
.btn-group {
a {
color: @dashboard-panel-heading-link-color;
border: none;
background: none;
padding: 0px 3px;
&:hover {
color: @dashboard-panel-heading-link-hover-color;
}
color: inherit;
}
white-space: nowrap;
flex: 0 0 auto;
}
.panel-title {
font-size: inherit;
// flexbox fix for IE10
// http://stackoverflow.com/questions/22008135/internet-explorer-10-does-not-apply-flexbox-on-inline-elements
display: inline-block;
.ellipsis();
flex: 1 1 auto;
i {
opacity: 0.3;
font-size: 1.2em;
margin-right: 4px;
}
}
.visualize-show-spy {
visibility: hidden;
.panel-move:hover {
cursor: move;
}
.load-error {
text-align: center;
font-size: 1em;
display: flex;
flex: 1 0 auto;
justify-content: center;
flex-direction: column;
.fa-exclamation-triangle {
font-size: 2em;
color: @dashboard-panel-load-error-color;
a {
color: @dashboard-panel-heading-link-color;
border: none;
background: none;
padding: 0px 3px;
&:hover {
color: @dashboard-panel-heading-link-hover-color;
}
}
}
.panel-content {
display: flex;
flex: 1 1 100%;
height: auto;
.visualize-show-spy {
visibility: hidden;
}
.load-error {
text-align: center;
font-size: 1em;
display: flex;
flex: 1 0 auto;
justify-content: center;
flex-direction: column;
.fa-exclamation-triangle {
font-size: 2em;
color: @dashboard-panel-load-error-color;
}
}
.panel-content {
display: flex;
flex: 1 1 100%;
height: auto;
}
}
}