diff --git a/package.json b/package.json index 8488f7b1b0b..e96f9bd78a5 100644 --- a/package.json +++ b/package.json @@ -117,14 +117,16 @@ "brace": "^0.10.0", "classnames": "^2.2.5", "clipboard": "^1.7.1", + "d3": "^4.11.0", + "d3-scale-chromatic": "^1.1.1", "eventemitter3": "^2.0.2", "file-saver": "^1.3.3", - "gemini-scrollbar": "https://github.com/grafana/gemini-scrollbar#grafana", "jquery": "^3.2.1", "lodash": "^4.17.4", "moment": "^2.18.1", "mousetrap": "^1.6.0", "ngreact": "^0.4.1", + "perfect-scrollbar": "^1.2.0", "prop-types": "^15.6.0", "react": "^16.0.0", "react-dom": "^16.0.0", @@ -134,8 +136,6 @@ "rxjs": "^5.4.3", "tether": "^1.4.0", "tether-drop": "https://github.com/torkelo/drop", - "tinycolor2": "^1.4.1", - "d3": "^4.11.0", - "d3-scale-chromatic": "^1.1.1" + "tinycolor2": "^1.4.1" } } diff --git a/public/app/core/components/scroll/scroll.ts b/public/app/core/components/scroll/scroll.ts index 02e43bc76d9..a43ef59ec84 100644 --- a/public/app/core/components/scroll/scroll.ts +++ b/public/app/core/components/scroll/scroll.ts @@ -1,22 +1,20 @@ -/// - -import GeminiScrollbar from 'gemini-scrollbar'; +import PerfectScrollbar from 'perfect-scrollbar'; import coreModule from 'app/core/core_module'; export function geminiScrollbar() { return { restrict: 'A', link: function(scope, elem, attrs) { - var myScrollbar = new GeminiScrollbar({ - autoshow: false, - element: elem[0] - }).create(); + + let scrollbar = new PerfectScrollbar(elem[0]); + console.log('scrllbar!'); scope.$on('$destroy', () => { - myScrollbar.destroy(); + scrollbar.destroy(); }); + } }; } -coreModule.directive('geminiScrollbar', geminiScrollbar); +coreModule.directive('grafanaScrollbar', geminiScrollbar); diff --git a/public/app/core/components/search/search.html b/public/app/core/components/search/search.html index 7cd7628282f..cbdd3a94b1b 100644 --- a/public/app/core/components/search/search.html +++ b/public/app/core/components/search/search.html @@ -40,51 +40,49 @@
-
-
-
- - - {{tag.term}}  ({{tag.count}}) - -
+
+
+ + + {{tag.term}}  ({{tag.count}}) +
+
-
-
No dashboards matching your query were found.
+
+
No dashboards matching your query were found.
-
- - - {{::section.title}} - - +
+ + + {{::section.title}} + + + + +
@@ -95,4 +93,5 @@
+
diff --git a/public/app/features/admin/partials/configuration_home.html b/public/app/features/admin/partials/configuration_home.html index 0d56497cdde..19f6cae770f 100644 --- a/public/app/features/admin/partials/configuration_home.html +++ b/public/app/features/admin/partials/configuration_home.html @@ -1,35 +1,33 @@ -
-
- -
-
- -
+
+ +
+
+ +
-
-
    -
  1. - -
    -
    -
    -
    -
    -
    - -
    -
    -
    - {{navItem.text}} -
    -
    - {{navItem.description}} -
    -
    -
    -     -
    2. -
-
-
-
+
+
    +
  1. + +
    +
    +
    +
    +
    +
    + +
    +
    +
    + {{navItem.text}} +
    +
    + {{navItem.description}} +
    +
    +
    +     +
    2. +
+
+
diff --git a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx index 18c124d63e2..27fe64d4660 100644 --- a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx +++ b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx @@ -47,7 +47,7 @@ export class DashboardPanel extends React.Component { } return ( -
this.element = element} /> +
this.element = element} className="panel-height-helper" /> ); } } diff --git a/public/app/features/dashboard/dashgrid/PanelLoader.ts b/public/app/features/dashboard/dashgrid/PanelLoader.ts index 2e9302537af..567043584a5 100644 --- a/public/app/features/dashboard/dashgrid/PanelLoader.ts +++ b/public/app/features/dashboard/dashgrid/PanelLoader.ts @@ -12,7 +12,7 @@ export class PanelLoader { } load(elem, panel, dashboard): AttachedPanel { - var template = ''; + var template = ''; var panelScope = this.$rootScope.$new(); panelScope.panel = panel; panelScope.dashboard = dashboard; diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts index a81b8d56faa..b6cae5c7ece 100644 --- a/public/app/features/panel/panel_ctrl.ts +++ b/public/app/features/panel/panel_ctrl.ts @@ -5,9 +5,7 @@ import {appEvents, profiler} from 'app/core/core'; import Remarkable from 'remarkable'; import {GRID_CELL_HEIGHT, GRID_CELL_VMARGIN} from 'app/core/constants'; -const TITLE_HEIGHT = 25; -const EMPTY_TITLE_HEIGHT = 9; -const PANEL_PADDING = 5; +const TITLE_HEIGHT = 27; const PANEL_BORDER = 2; import {Emitter} from 'app/core/core'; @@ -48,16 +46,24 @@ export class PanelCtrl { } $scope.$on("refresh", () => this.refresh()); + $scope.$on("component-did-mount", () => this.panelDidMount()); + $scope.$on("$destroy", () => { this.events.emit('panel-teardown'); this.events.removeAllListeners(); }); + + this.calculatePanelHeight(); } init() { this.events.on('panel-size-changed', this.onSizeChanged.bind(this)); - this.publishAppEvent('panel-initialized', {scope: this.$scope}); this.events.emit('panel-initialized'); + this.publishAppEvent('panel-initialized', {scope: this.$scope}); + } + + panelDidMount() { + this.events.emit('component-did-mount'); } renderingCompleted() { @@ -166,7 +172,7 @@ export class PanelCtrl { this.containerHeight = this.panel.gridPos.h * GRID_CELL_HEIGHT + ((this.panel.gridPos.h-1) * GRID_CELL_VMARGIN); } - this.height = this.containerHeight - (PANEL_BORDER + PANEL_PADDING + (this.panel.title ? TITLE_HEIGHT : EMPTY_TITLE_HEIGHT)); + this.height = this.containerHeight - (PANEL_BORDER + TITLE_HEIGHT); } render(payload?) { diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts index f1ffff2e6d4..2e183e70b4a 100644 --- a/public/app/features/panel/panel_directive.ts +++ b/public/app/features/panel/panel_directive.ts @@ -1,7 +1,6 @@ -/// - import angular from 'angular'; import Drop from 'tether-drop'; +import PerfectScrollbar from 'perfect-scrollbar'; var module = angular.module('grafana.directives'); @@ -62,9 +61,11 @@ module.directive('grafanaPanel', function($rootScope, $document) { scope: { ctrl: "=" }, link: function(scope, elem) { var panelContainer = elem.find('.panel-container'); + var panelContent = elem.find('.panel-content'); var cornerInfoElem = elem.find('.panel-info-corner'); var ctrl = scope.ctrl; var infoDrop; + var panelScrollbar; // the reason for handling these classes this way is for performance // limit the watchers on panels etc @@ -84,11 +85,12 @@ module.directive('grafanaPanel', function($rootScope, $document) { ctrl.dashboard.setPanelFocus(0); } - // set initial height - if (!ctrl.containerHeight) { - ctrl.calculatePanelHeight(); - panelContainer.css({minHeight: ctrl.containerHeight}); - lastHeight = ctrl.containerHeight; + function panelHeightUpdated() { + panelContent.height(ctrl.height); + if (panelScrollbar) { + panelScrollbar.update(); + } + lastHeight = ctrl.height; } // set initial transparency @@ -97,10 +99,16 @@ module.directive('grafanaPanel', function($rootScope, $document) { panelContainer.addClass('panel-transparent', true); } + // update scrollbar after mounting + ctrl.events.on('component-did-mount', () => { + if (ctrl.__proto__.constructor.scrollable) { + panelScrollbar = new PerfectScrollbar(panelContent[0]); + } + }); + ctrl.events.on('render', () => { - if (lastHeight !== ctrl.containerHeight) { - panelContainer.css({minHeight: ctrl.containerHeight}); - lastHeight = ctrl.containerHeight; + if (lastHeight !== ctrl.height) { + panelHeightUpdated(); } if (transparentLastState !== ctrl.panel.transparent) { @@ -181,6 +189,10 @@ module.directive('grafanaPanel', function($rootScope, $document) { if (infoDrop) { infoDrop.destroy(); } + + if (panelScrollbar) { + panelScrollbar.update(); + } }); } }; @@ -190,11 +202,11 @@ module.directive('panelHelpCorner', function($rootScope) { return { restrict: 'E', template: ` - - - - - + + + + + `, link: function(scope, elem) { } diff --git a/public/app/features/plugins/partials/ds_edit.html b/public/app/features/plugins/partials/ds_edit.html index e039fbd83ae..58396e816b3 100644 --- a/public/app/features/plugins/partials/ds_edit.html +++ b/public/app/features/plugins/partials/ds_edit.html @@ -1,90 +1,88 @@ -
-
- -
-
- +
+ +
+
+ -
Disclaimer. This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.
+
Disclaimer. This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.
-
- +
+ +
+
+ +
+ +
+
+
+
+ Name + + + The name is used when you select the data source in panels. + The Default data source is preselected in new + panels. + +
+ +
+ +
+ Type +
+ +
+
-
-
+
+ This plugin is marked as being in alpha state, which means it is in early development phase and + updates will include breaking changes. +
- -
-
-
- Name - - - The name is used when you select the data source in panels. - The Default data source is preselected in new - panels. - -
- + + + + + +
+
Testing....
+
+
+ +
- -
- Type -
- -
+
+
{{ctrl.testing.message}}
+
-
- This plugin is marked as being in alpha state, which means it is in early development phase and - updates will include breaking changes. -
+
+ + + Cancel +
- - - - +
+
+
-
-
Testing....
-
-
- - -
-
-
{{ctrl.testing.message}}
-
-
-
- -
- - - Cancel -
- -
-
-
- - -
+
diff --git a/public/app/features/plugins/partials/ds_list.html b/public/app/features/plugins/partials/ds_list.html index b5e01e101b4..aaa2c536d88 100644 --- a/public/app/features/plugins/partials/ds_list.html +++ b/public/app/features/plugins/partials/ds_list.html @@ -1,51 +1,49 @@ -
- diff --git a/public/app/features/plugins/partials/plugin_list.html b/public/app/features/plugins/partials/plugin_list.html index a81c9931228..6d75fe9cc30 100644 --- a/public/app/features/plugins/partials/plugin_list.html +++ b/public/app/features/plugins/partials/plugin_list.html @@ -1,68 +1,65 @@ -
- diff --git a/public/app/features/plugins/plugin_component.ts b/public/app/features/plugins/plugin_component.ts index d162c0794db..f94708bfab4 100644 --- a/public/app/features/plugins/plugin_component.ts +++ b/public/app/features/plugins/plugin_component.ts @@ -68,7 +68,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $ var componentInfo: any = { name: 'panel-plugin-' + scope.panel.type, bindings: {dashboard: "=", panel: "=", row: "="}, - attrs: {dashboard: "dashboard", panel: "panel"}, + attrs: {dashboard: "dashboard", panel: "panel", class: "panel-height-helper"}, }; let panelInfo = config.panels[scope.panel.type]; @@ -98,7 +98,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $ PanelCtrl.templatePromise = getTemplate(PanelCtrl).then(template => { PanelCtrl.templateUrl = null; - PanelCtrl.template = `${template}`; + PanelCtrl.template = `${template}`; return componentInfo; }); @@ -221,6 +221,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $ setTimeout(function() { elem.append(child); scope.$applyAsync(function() { + scope.$broadcast('component-did-mount'); scope.$broadcast('refresh'); }); }); diff --git a/public/app/partials/dashboard.html b/public/app/partials/dashboard.html index 58fea114aeb..855237cb557 100644 --- a/public/app/partials/dashboard.html +++ b/public/app/partials/dashboard.html @@ -1,18 +1,16 @@
-
-
-
-
+
+
+
- - + + - - + + -
diff --git a/public/app/plugins/panel/alertlist/module.ts b/public/app/plugins/panel/alertlist/module.ts index 7aeb99c9918..6c380af37a2 100644 --- a/public/app/plugins/panel/alertlist/module.ts +++ b/public/app/plugins/panel/alertlist/module.ts @@ -9,6 +9,7 @@ import * as dateMath from 'app/core/utils/datemath'; class AlertListPanel extends PanelCtrl { static templateUrl = 'module.html'; + static scrollable = true; showOptions = [ { text: 'Current state', value: 'current' }, diff --git a/public/app/plugins/panel/dashlist/module.ts b/public/app/plugins/panel/dashlist/module.ts index 94be5ec780a..2b1630760ed 100644 --- a/public/app/plugins/panel/dashlist/module.ts +++ b/public/app/plugins/panel/dashlist/module.ts @@ -1,11 +1,10 @@ -/// - import _ from 'lodash'; import {PanelCtrl} from 'app/plugins/sdk'; import {impressions} from 'app/features/dashboard/impression_store'; class DashListCtrl extends PanelCtrl { static templateUrl = 'module.html'; + static scrollable = true; groups: any[]; modes: any[]; diff --git a/public/app/plugins/panel/pluginlist/module.ts b/public/app/plugins/panel/pluginlist/module.ts index 6c67a66302b..15043e3efc7 100644 --- a/public/app/plugins/panel/pluginlist/module.ts +++ b/public/app/plugins/panel/pluginlist/module.ts @@ -1,10 +1,9 @@ -/// - import _ from 'lodash'; import {PanelCtrl} from '../../../features/panel/panel_ctrl'; class PluginListCtrl extends PanelCtrl { static templateUrl = 'module.html'; + static scrollable = true; pluginList: any[]; viewModel: any; @@ -15,6 +14,7 @@ class PluginListCtrl extends PanelCtrl { /** @ngInject */ constructor($scope, $injector, private backendSrv, private $location) { super($scope, $injector); + _.defaults(this.panel, this.panelDefaults); this.events.on('init-edit-mode', this.onInitEditMode.bind(this)); diff --git a/public/app/plugins/panel/singlestat/module.ts b/public/app/plugins/panel/singlestat/module.ts index cd1e35039dc..5f2b0a7cec6 100644 --- a/public/app/plugins/panel/singlestat/module.ts +++ b/public/app/plugins/panel/singlestat/module.ts @@ -396,10 +396,6 @@ class SingleStatCtrl extends MetricsPanelCtrl { var $panelContainer = elem.find('.panel-container'); elem = elem.find('.singlestat-panel'); - function setElementHeight() { - elem.css('height', ctrl.height + 'px'); - } - function applyColoringThresholds(value, valueString) { if (!panel.colorValue) { return valueString; @@ -596,14 +592,14 @@ class SingleStatCtrl extends MetricsPanelCtrl { if (!ctrl.data) { return; } data = ctrl.data; + console.log('singlestat', elem.html()); + // get thresholds data.thresholds = panel.thresholds.split(',').map(function(strVale) { return Number(strVale.trim()); }); data.colorMap = panel.colors; - setElementHeight(); - var body = panel.gauge.show ? '' : getBigValueHtml(); if (panel.colorBackground) { diff --git a/public/app/plugins/panel/text/module.ts b/public/app/plugins/panel/text/module.ts index a3a58e968fc..c16379aef13 100644 --- a/public/app/plugins/panel/text/module.ts +++ b/public/app/plugins/panel/text/module.ts @@ -5,6 +5,7 @@ import {PanelCtrl} from 'app/plugins/sdk'; export class TextPanelCtrl extends PanelCtrl { static templateUrl = `public/app/plugins/panel/text/module.html`; + static scrollable = true; remarkable: any; content: string; @@ -23,6 +24,7 @@ export class TextPanelCtrl extends PanelCtrl { this.events.on('init-edit-mode', this.onInitEditMode.bind(this)); this.events.on('refresh', this.onRefresh.bind(this)); this.events.on('render', this.onRender.bind(this)); + $scope.$watch('ctrl.panel.content', _.throttle(() => { this.render(); diff --git a/public/img/tgr288gear_line6.pdf b/public/img/tgr288gear_line6.pdf new file mode 100644 index 00000000000..21cc75e1e33 Binary files /dev/null and b/public/img/tgr288gear_line6.pdf differ diff --git a/public/sass/components/_panel_dashlist.scss b/public/sass/components/_panel_dashlist.scss index 267d7b79dc0..3c643fdd945 100644 --- a/public/sass/components/_panel_dashlist.scss +++ b/public/sass/components/_panel_dashlist.scss @@ -27,5 +27,3 @@ background-color: $tight-form-func-bg; } } - - diff --git a/public/sass/components/_panel_singlestat.scss b/public/sass/components/_panel_singlestat.scss index 48d0a29f4b8..41d746e583a 100644 --- a/public/sass/components/_panel_singlestat.scss +++ b/public/sass/components/_panel_singlestat.scss @@ -2,6 +2,7 @@ position: relative; display: table; width: 100%; + height: 100%; } .singlestat-panel-value-container { diff --git a/public/sass/components/_scrollbar.scss b/public/sass/components/_scrollbar.scss index ba59d66fa49..03b5fb5eed9 100644 --- a/public/sass/components/_scrollbar.scss +++ b/public/sass/components/_scrollbar.scss @@ -1,3 +1,23 @@ +@import "~perfect-scrollbar/css/perfect-scrollbar.css"; + +.ps__rail-x:hover, +.ps__rail-y:hover, +.ps__rail-x:focus, +.ps__rail-y:focus { + background-color: transparent; + opacity: 0.9; +} + +.ps__thumb-y { + @include gradient-vertical($blue, lighten($blue, 20%)); +} + +.ps__rail-y:hover > .ps__thumb-y, +.ps__rail-y:focus > .ps__thumb-y { + background-color: #999; + width: 6px; +} + /** * gemini-scrollbar * @version 1.5.2 diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss index 9fad62ef60c..cd7ac6d24b9 100644 --- a/public/sass/components/_search.scss +++ b/public/sass/components/_search.scss @@ -79,6 +79,7 @@ height: 100%; display: block; padding: $spacer; + position: relative; flex-grow: 10; .selected { diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index 8d4e82af6b0..766a900ae31 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -23,6 +23,11 @@ div.flot-text { } } +.panel-height-helper { + display: block; + height: 100%; +} + .panel-container { background-color: $panel-bg; border: $panel-border; @@ -38,7 +43,9 @@ div.flot-text { .panel-content { padding: 0px 10px 5px 10px; - height: 100%; + height: calc(100% - 27px); + position: relative; + overflow: hidden; } .panel-title-container { diff --git a/yarn.lock b/yarn.lock index 662152a2271..45af6e014bb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6955,6 +6955,10 @@ pend@~1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50" +perfect-scrollbar@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/perfect-scrollbar/-/perfect-scrollbar-1.2.0.tgz#ad23a2529c17f4535f21d1486f8bc3046e31a9d2" + performance-now@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"