IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop-scrollable-panels' into develop

Browse Source
This commit is contained in:
Torkel Ödegaard
2017-11-23 11:13:21 +01:00
parent 41a3431c4e f18f1a1093
commit d9a913afe1
25 changed files with 351 additions and 317 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
package.json
View File

@@ -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"
}
}

16
public/app/core/components/scroll/scroll.ts
View File

@@ -1,22 +1,20 @@
///<reference path="../../../headers/common.d.ts" />
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);

81
public/app/core/components/search/search.html
View File

@@ -40,51 +40,49 @@
</div>
<div class="search-dropdown" ng-class="{'search-dropdown--fade-in': ctrl.openCompleted}">
<div gemini-scrollbar>
<div class="search-results-container" ng-if="ctrl.tagsMode">
<div ng-repeat="tag in ctrl.results" class="pointer" style="width: 180px; float: left;"
ng-class="{'selected': $index === ctrl.selectedIndex }"
ng-click="ctrl.filterByTag(tag.term, $event)">
<a class="search-result-tag label label-tag" tag-color-from-name="tag.term">
<i class="fa fa-tag"></i>
<span>{{tag.term}} &nbsp;({{tag.count}})</span>
</a>
</div>
<div class="search-results-container" ng-if="ctrl.tagsMode">
<div ng-repeat="tag in ctrl.results" class="pointer" style="width: 180px; float: left;"
ng-class="{'selected': $index === ctrl.selectedIndex }"
ng-click="ctrl.filterByTag(tag.term, $event)">
<a class="search-result-tag label label-tag" tag-color-from-name="tag.term">
<i class="fa fa-tag"></i>
<span>{{tag.term}} &nbsp;({{tag.count}})</span>
</a>
</div>
</div>
<div class="search-results-container" ng-if="!ctrl.tagsMode">
<h6 ng-hide="ctrl.results.length">No dashboards matching your query were found.</h6>
<div class="search-results-container" ng-if="!ctrl.tagsMode" grafana-scrollbar>
<h6 ng-hide="ctrl.results.length">No dashboards matching your query were found.</h6>
<div ng-repeat="section in ctrl.results" class="search-section">
<a class="search-section__header pointer" ng-hide="section.hideHeader" ng-click="ctrl.toggleFolder(section)">
<i class="search-section__header__icon" ng-class="section.icon"></i>
<span class="search-section__header__text">{{::section.title}}</span>
<i class="fa fa-minus search-section__header__toggle" ng-show="section.expanded"></i>
<i class="fa fa-plus search-section__header__toggle" ng-hide="section.expanded"></i>
<div ng-repeat="section in ctrl.results" class="search-section">
<a class="search-section__header pointer" ng-hide="section.hideHeader" ng-click="ctrl.toggleFolder(section)">
<i class="search-section__header__icon" ng-class="section.icon"></i>
<span class="search-section__header__text">{{::section.title}}</span>
<i class="fa fa-minus search-section__header__toggle" ng-show="section.expanded"></i>
<i class="fa fa-plus search-section__header__toggle" ng-hide="section.expanded"></i>
</a>
<div ng-if="section.expanded">
<a ng-repeat="item in section.items" class="search-item" ng-class="{'selected': item.selected}" ng-href="{{::item.url}}">
<span class="search-item__icon">
<i class="fa fa-th-large"></i>
</span>
<span class="search-item__body">
<div class="search-item__body-title">{{::item.title}}</div>
<div class="search-item__body-sub-title" ng-show="item.folderTitle && section.hideHeader">
<i class="fa fa-folder-o"></i>
{{::item.folderTitle}}
</div>
</span>
<span class="search-item__tags">
<span ng-click="ctrl.filterByTag(tag, $event)" ng-repeat="tag in item.tags" tag-color-from-name="tag" class="label label-tag">
{{tag}}
</span>
</span>
<span class="search-item__actions">
<i class="fa" ng-class="{'fa-star': item.isStarred, 'fa-star-o': !item.isStarred}"></i>
</span>
</a>
<div ng-if="section.expanded">
<a ng-repeat="item in section.items" class="search-item" ng-class="{'selected': item.selected}" ng-href="{{::item.url}}">
<span class="search-item__icon">
<i class="fa fa-th-large"></i>
</span>
<span class="search-item__body">
<div class="search-item__body-title">{{::item.title}}</div>
<div class="search-item__body-sub-title" ng-show="item.folderTitle && section.hideHeader">
<i class="fa fa-folder-o"></i>
{{::item.folderTitle}}
</div>
</span>
<span class="search-item__tags">
<span ng-click="ctrl.filterByTag(tag, $event)" ng-repeat="tag in item.tags" tag-color-from-name="tag" class="label label-tag">
{{tag}}
</span>
</span>
<span class="search-item__actions">
<i class="fa" ng-class="{'fa-star': item.isStarred, 'fa-star-o': !item.isStarred}"></i>
</span>
</a>
</div>
</div>
</div>
</div>
@@ -95,4 +93,5 @@
</a>
</div>
</div>
</div>

66
public/app/features/admin/partials/configuration_home.html
View File

@@ -1,35 +1,33 @@
<div class="scroll-canvas">
<div gemini-scrollbar>
<navbar model="ctrl.navModel"></navbar>
<div class="page-container">
<div class="page-header">
<page-h1 model="ctrl.navModel"></page-h1>
</div>
<div class="scroll-canvas" grafana-scrollbar>
<navbar model="ctrl.navModel"></navbar>
<div class="page-container">
<div class="page-header">
<page-h1 model="ctrl.navModel"></page-h1>
</div>
<section class="card-section card-list-layout-grid">
<ol class="card-list" >
<li class="card-item-wrapper" ng-repeat="navItem in ctrl.navModel.node.children">
<a class="card-item" ng-href="{{::navItem.url}}">
<div class="card-item-header">
<div class="card-item-type">
</div>
</div>
<div class="card-item-body">
<figure class="card-item-figure">
<i class="{{navItem.icon}}"></i>
</figure>
<div class="card-item-details">
<div class="card-item-name">
{{navItem.text}}
</div>
<div class="card-item-sub-name">
{{navItem.description}}
</div>
</div>
</div>
</a>
</li>
</ol>
</section>
</div>
</div>
<section class="card-section card-list-layout-grid">
<ol class="card-list" >
<li class="card-item-wrapper" ng-repeat="navItem in ctrl.navModel.node.children">
<a class="card-item" ng-href="{{::navItem.url}}">
<div class="card-item-header">
<div class="card-item-type">
</div>
</div>
<div class="card-item-body">
<figure class="card-item-figure">
<i class="{{navItem.icon}}"></i>
</figure>
<div class="card-item-details">
<div class="card-item-name">
{{navItem.text}}
</div>
<div class="card-item-sub-name">
{{navItem.description}}
</div>
</div>
</div>
</a>
</li>
</ol>
</section>
</div>

2
public/app/features/dashboard/dashgrid/DashboardPanel.tsx
View File

@@ -47,7 +47,7 @@ export class DashboardPanel extends React.Component<DashboardPanelProps, any> {
}
return (
<div ref={element => this.element = element} />
<div ref={element => this.element = element} className="panel-height-helper" />
);
}
}

2
public/app/features/dashboard/dashgrid/PanelLoader.ts
View File

@@ -12,7 +12,7 @@ export class PanelLoader {
}
load(elem, panel, dashboard): AttachedPanel {
var template = '<plugin-component type="panel"></plugin-component>';
var template = '<plugin-component type="panel" class="panel-height-helper"></plugin-component>';
var panelScope = this.$rootScope.$new();
panelScope.panel = panel;
panelScope.dashboard = dashboard;

16
public/app/features/panel/panel_ctrl.ts
View File

@@ -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?) {

42
public/app/features/panel/panel_directive.ts
View File

@@ -1,7 +1,6 @@
///<reference path="../../headers/common.d.ts" />
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: `
<span class="alert-error panel-error small pointer" ng-if="ctrl.error" ng-click="ctrl.openInspector()">
<span data-placement="top" bs-tooltip="ctrl.error">
<i class="fa fa-exclamation"></i><span class="panel-error-arrow"></span>
</span>
</span>
<span class="alert-error panel-error small pointer" ng-if="ctrl.error" ng-click="ctrl.openInspector()">
<span data-placement="top" bs-tooltip="ctrl.error">
<i class="fa fa-exclamation"></i><span class="panel-error-arrow"></span>
</span>
</span>
`,
link: function(scope, elem) {
}

150
public/app/features/plugins/partials/ds_edit.html
View File

@@ -1,90 +1,88 @@
<div class="scroll-canvas">
<div gemini-scrollbar>
<navbar model="ctrl.navModel"></navbar>
<div class="page-container">
<div class="page-header">
<page-h1 model="ctrl.navModel"></page-h1>
<div class="scroll-canvas" grafana-scrollbar>
<navbar model="ctrl.navModel"></navbar>
<div class="page-container">
<div class="page-header">
<page-h1 model="ctrl.navModel"></page-h1>
<div ng-if="ctrl.current.readOnly" class="grafana-info-box span8">Disclaimer. This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.</div>
<div ng-if="ctrl.current.readOnly" class="grafana-info-box span8">Disclaimer. This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.</div>
<div class="page-header-tabs" ng-show="ctrl.hasDashboards">
<ul class="gf-tabs">
<li class="gf-tabs-item">
<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 0" ng-class="{active: ctrl.tabIndex === 0}">
Config
</a>
</li>
<li class="gf-tabs-item">
<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 1" ng-class="{active: ctrl.tabIndex === 1}">
Dashboards
</a>
</li>
</ul>
<div class="page-header-tabs" ng-show="ctrl.hasDashboards">
<ul class="gf-tabs">
<li class="gf-tabs-item">
<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 0" ng-class="{active: ctrl.tabIndex === 0}">
Config
</a>
</li>
<li class="gf-tabs-item">
<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 1" ng-class="{active: ctrl.tabIndex === 1}">
Dashboards
</a>
</li>
</ul>
</div>
</div>
<div ng-if="ctrl.tabIndex === 0" class="tab-content">
<form name="ctrl.editForm" ng-if="ctrl.current">
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form max-width-30">
<span class="gf-form-label width-7">Name</span>
<input class="gf-form-input max-width-23" type="text" ng-model="ctrl.current.name" placeholder="name" required>
<info-popover offset="0px -135px" mode="right-absolute">
The name is used when you select the data source in panels.
The <em>Default</em> data source is preselected in new
panels.
</info-popover>
</div>
<gf-form-switch class="gf-form" label="Default" checked="ctrl.current.isDefault" switch-class="max-width-6"></gf-form-switch>
</div>
<div class="gf-form">
<span class="gf-form-label width-7">Type</span>
<div class="gf-form-select-wrapper max-width-23">
<select class="gf-form-input" ng-model="ctrl.current.type" ng-options="v.id as v.name for v in ctrl.types" ng-change="ctrl.userChangedType()"></select>
</div>
</div>
</div>
</div>
<div ng-if="ctrl.tabIndex === 0" class="tab-content">
<div class="alert alert-info gf-form-group" ng-if="ctrl.datasourceMeta.state === 'alpha'">
This plugin is marked as being in alpha state, which means it is in early development phase and
updates will include breaking changes.
</div>
<form name="ctrl.editForm" ng-if="ctrl.current">
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form max-width-30">
<span class="gf-form-label width-7">Name</span>
<input class="gf-form-input max-width-23" type="text" ng-model="ctrl.current.name" placeholder="name" required>
<info-popover offset="0px -135px" mode="right-absolute">
The name is used when you select the data source in panels.
The <em>Default</em> data source is preselected in new
panels.
</info-popover>
</div>
<gf-form-switch class="gf-form" label="Default" checked="ctrl.current.isDefault" switch-class="max-width-6"></gf-form-switch>
<rebuild-on-change property="ctrl.datasourceMeta.id">
<plugin-component type="datasource-config-ctrl">
</plugin-component>
</rebuild-on-change>
<div ng-if="ctrl.testing" class="gf-form-group section">
<h5 ng-show="!ctrl.testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>
<div class="alert-{{ctrl.testing.status}} alert" ng-show="ctrl.testing.done">
<div class="alert-icon">
<i class="fa fa-exclamation-triangle" ng-show="ctrl.testing.status === 'error'"></i>
<i class="fa fa-check" ng-show="ctrl.testing.status !== 'error'"></i>
</div>
<div class="gf-form">
<span class="gf-form-label width-7">Type</span>
<div class="gf-form-select-wrapper max-width-23">
<select class="gf-form-input" ng-model="ctrl.current.type" ng-options="v.id as v.name for v in ctrl.types" ng-change="ctrl.userChangedType()"></select>
</div>
<div class="alert-body">
<div class="alert-title">{{ctrl.testing.message}}</div>
</div>
</div>
</div>
<div class="alert alert-info gf-form-group" ng-if="ctrl.datasourceMeta.state === 'alpha'">
This plugin is marked as being in alpha state, which means it is in early development phase and
updates will include breaking changes.
</div>
<div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-disabled="ctrl.current.readOnly" ng-click="ctrl.saveChanges()">Save</button>
<button type="submit" class="btn btn-danger" ng-disabled="ctrl.current.readOnly" ng-show="!ctrl.isNew" ng-click="ctrl.delete()">
Delete
</button>
<a class="btn btn-link" href="datasources">Cancel</a>
</div>
<rebuild-on-change property="ctrl.datasourceMeta.id">
<plugin-component type="datasource-config-ctrl">
</plugin-component>
</rebuild-on-change>
<br />
<br />
<br />
<div ng-if="ctrl.testing" class="gf-form-group section">
<h5 ng-show="!ctrl.testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>
<div class="alert-{{ctrl.testing.status}} alert" ng-show="ctrl.testing.done">
<div class="alert-icon">
<i class="fa fa-exclamation-triangle" ng-show="ctrl.testing.status === 'error'"></i>
<i class="fa fa-check" ng-show="ctrl.testing.status !== 'error'"></i>
</div>
<div class="alert-body">
<div class="alert-title">{{ctrl.testing.message}}</div>
</div>
</div>
</div>
<div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-disabled="ctrl.current.readOnly" ng-click="ctrl.saveChanges()">Save</button>
<button type="submit" class="btn btn-danger" ng-disabled="ctrl.current.readOnly" ng-show="!ctrl.isNew" ng-click="ctrl.delete()">
Delete
</button>
<a class="btn btn-link" href="datasources">Cancel</a>
</div>
<br />
<br />
<br />
</form>
</div>
</form>
</div>
</div>
</div>

88
public/app/features/plugins/partials/ds_list.html
View File

@@ -1,51 +1,49 @@
<div class="scroll-canvas">
<div gemini-scrollbar>
<navbar model="ctrl.navModel"></navbar>
<div class="page-container">
<div class="page-header">
<page-h1 model="ctrl.navModel"></page-h1>
<div class="scroll-canvas" grafana-scrollbar>
<navbar model="ctrl.navModel"></navbar>
<div class="page-container">
<div class="page-header">
<page-h1 model="ctrl.navModel"></page-h1>
<a class="page-header__cta btn btn-success" href="datasources/new">
Add data source
</a>
</div>
<a class="page-header__cta btn btn-success" href="datasources/new">
Add data source
</a>
</div>
<section class="card-section" layout-mode>
<layout-selector></layout-selector>
<section class="card-section" layout-mode>
<layout-selector></layout-selector>
<ol class="card-list" >
<li class="card-item-wrapper" ng-repeat="ds in ctrl.datasources">
<a class="card-item" href="datasources/edit/{{ds.id}}/">
<div class="card-item-header">
<div class="card-item-type">
{{ds.type}}
</div>
</div>
<div class="card-item-body">
<figure class="card-item-figure">
<img ng-src="{{ds.typeLogoUrl}}">
</figure>
<div class="card-item-details">
<div class="card-item-name">
{{ds.name}}
<span ng-if="ds.isDefault">
<span class="btn btn-secondary btn-mini">default</span>
</span>
</div>
<div class="card-item-sub-name">
{{ds.url}}
</div>
</div>
</div>
</a>
</li>
</ol>
</section>
<ol class="card-list" >
<li class="card-item-wrapper" ng-repeat="ds in ctrl.datasources">
<a class="card-item" href="datasources/edit/{{ds.id}}/">
<div class="card-item-header">
<div class="card-item-type">
{{ds.type}}
</div>
</div>
<div class="card-item-body">
<figure class="card-item-figure">
<img ng-src="{{ds.typeLogoUrl}}">
</figure>
<div class="card-item-details">
<div class="card-item-name">
{{ds.name}}
<span ng-if="ds.isDefault">
<span class="btn btn-secondary btn-mini">default</span>
</span>
</div>
<div class="card-item-sub-name">
{{ds.url}}
</div>
</div>
</div>
</a>
</li>
</ol>
</section>
<div ng-if="ctrl.datasources.length === 0">
<em>No data sources defined</em>
</div>
</div>
</div>
<div ng-if="ctrl.datasources.length === 0">
<em>No data sources defined</em>
</div>
</div>
</div>

121
public/app/features/plugins/partials/plugin_list.html
View File

@@ -1,68 +1,65 @@
<div class="scroll-canvas">
<div gemini-scrollbar>
<div class="scroll-canvas" grafana-scrollbar>
<navbar model="ctrl.navModel"></navbar>
<navbar model="ctrl.navModel"></navbar>
<div class="page-container">
<div class="page-header">
<h1>
<i class="icon-gf icon-gf-apps"></i>
Plugins <span class="muted small">(currently installed)</span>
</h1>
<div class="page-container">
<div class="page-header">
<h1>
<i class="icon-gf icon-gf-apps"></i>
Plugins <span class="muted small">(currently installed)</span>
</h1>
<div class="page-header-tabs">
<ul class="gf-tabs">
<li class="gf-tabs-item">
<a class="gf-tabs-link" href="plugins?type=panel" ng-class="{active: ctrl.tabIndex === 0}">
Panels
</a>
</li>
<li class="gf-tabs-item">
<a class="gf-tabs-link" href="plugins?type=datasource" ng-class="{active: ctrl.tabIndex === 1}">
Data sources
</a>
</li>
<li class="gf-tabs-item">
<a class="gf-tabs-link" href="plugins?type=app" ng-class="{active: ctrl.tabIndex === 2}">
Apps
</a>
</li>
</ul>
<div class="page-header-tabs">
<ul class="gf-tabs">
<li class="gf-tabs-item">
<a class="gf-tabs-link" href="plugins?type=panel" ng-class="{active: ctrl.tabIndex === 0}">
Panels
</a>
</li>
<li class="gf-tabs-item">
<a class="gf-tabs-link" href="plugins?type=datasource" ng-class="{active: ctrl.tabIndex === 1}">
Data sources
</a>
</li>
<li class="gf-tabs-item">
<a class="gf-tabs-link" href="plugins?type=app" ng-class="{active: ctrl.tabIndex === 2}">
Apps
</a>
</li>
</ul>
<a class="get-more-plugins-link" href="https://grafana.com/plugins?utm_source=grafana_plugin_list" target="_blank">
Find more <img src="public/img/icn-plugins-tiny.svg" />plugins on Grafana.com
</a>
</div>
</div>
<a class="get-more-plugins-link" href="https://grafana.com/plugins?utm_source=grafana_plugin_list" target="_blank">
Find more <img src="public/img/icn-plugins-tiny.svg" />plugins on Grafana.com
</a>
</div>
</div>
<section class="card-section" layout-mode>
<layout-selector></layout-selector>
<section class="card-section" layout-mode>
<layout-selector></layout-selector>
<ol class="card-list" >
<li class="card-item-wrapper" ng-repeat="plugin in ctrl.plugins">
<a class="card-item" href="plugins/{{plugin.id}}/edit">
<div class="card-item-header">
<div class="card-item-type">
<i class="icon-gf icon-gf-{{plugin.type}}"></i>
{{plugin.type}}
</div>
<div class="card-item-notice" ng-show="plugin.hasUpdate">
<span bs-tooltip="plugin.latestVersion">Update available!</span>
</div>
</div>
<div class="card-item-body">
<figure class="card-item-figure">
<img ng-src="{{plugin.info.logos.small}}">
</figure>
<div class="card-item-details">
<div class="card-item-name">{{plugin.name}}</div>
<div class="card-item-sub-name">By {{plugin.info.author.name}}</div>
</div>
</div>
</a>
</li>
</ol>
</section>
</div>
</div>
<ol class="card-list" >
<li class="card-item-wrapper" ng-repeat="plugin in ctrl.plugins">
<a class="card-item" href="plugins/{{plugin.id}}/edit">
<div class="card-item-header">
<div class="card-item-type">
<i class="icon-gf icon-gf-{{plugin.type}}"></i>
{{plugin.type}}
</div>
<div class="card-item-notice" ng-show="plugin.hasUpdate">
<span bs-tooltip="plugin.latestVersion">Update available!</span>
</div>
</div>
<div class="card-item-body">
<figure class="card-item-figure">
<img ng-src="{{plugin.info.logos.small}}">
</figure>
<div class="card-item-details">
<div class="card-item-name">{{plugin.name}}</div>
<div class="card-item-sub-name">By {{plugin.info.author.name}}</div>
</div>
</div>
</a>
</li>
</ol>
</section>
</div>
</div>

5
public/app/features/plugins/plugin_component.ts
View File

@@ -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 = `<grafana-panel ctrl="ctrl">${template}</grafana-panel>`;
PanelCtrl.template = `<grafana-panel ctrl="ctrl" class="panel-height-helper">${template}</grafana-panel>`;
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');
});
});

16
public/app/partials/dashboard.html
View File

@@ -1,18 +1,16 @@
<div dash-class ng-if="ctrl.dashboard">
<dashnav dashboard="ctrl.dashboard"></dashnav>
<div class="scroll-canvas scroll-canvas--dashboard">
<div gemini-scrollbar>
<div dash-editor-view class="dash-edit-view"></div>
<div class="dashboard-container">
<div class="scroll-canvas scroll-canvas--dashboard" grafana-scrollbar>
<div dash-editor-view class="dash-edit-view"></div>
<div class="dashboard-container">
<dashboard-submenu ng-if="ctrl.dashboard.meta.submenuEnabled" dashboard="ctrl.dashboard">
</dashboard-submenu>
<dashboard-submenu ng-if="ctrl.dashboard.meta.submenuEnabled" dashboard="ctrl.dashboard">
</dashboard-submenu>
<dashboard-grid get-panel-container="ctrl.getPanelContainer">
</dashboard-grid>
<dashboard-grid get-panel-container="ctrl.getPanelContainer">
</dashboard-grid>
</div>
</div>
</div>
</div>

1
public/app/plugins/panel/alertlist/module.ts
View File

@@ -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' },

3
public/app/plugins/panel/dashlist/module.ts
View File

@@ -1,11 +1,10 @@
///<reference path="../../../headers/common.d.ts" />
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[];

4
public/app/plugins/panel/pluginlist/module.ts
View File

@@ -1,10 +1,9 @@
///<reference path="../../../headers/common.d.ts" />
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));

8
public/app/plugins/panel/singlestat/module.ts
View File

@@ -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) {

2
public/app/plugins/panel/text/module.ts
View File

@@ -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();

BIN
public/img/tgr288gear_line6.pdf Normal file
View File

Binary file not shown.

2
public/sass/components/_panel_dashlist.scss
View File

@@ -27,5 +27,3 @@
background-color: $tight-form-func-bg;
}
}

1
public/sass/components/_panel_singlestat.scss
View File

@@ -2,6 +2,7 @@
position: relative;
display: table;
width: 100%;
height: 100%;
}
.singlestat-panel-value-container {

20
public/sass/components/_scrollbar.scss
View File

@@ -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

1
public/sass/components/_search.scss
View File

@@ -79,6 +79,7 @@
height: 100%;
display: block;
padding: $spacer;
position: relative;
flex-grow: 10;
.selected {

9
public/sass/pages/_dashboard.scss
View File

@@ -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 {

4
yarn.lock
View File

@@ -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"