mirror of https://github.com/grafana/grafana
Torkel Ödegaard
8 years ago
commit
d9a913afe1
@ -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); |
||||
|
||||
@ -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> |
||||
|
||||
@ -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> |
||||
<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"> |
||||
<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> |
||||
<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 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 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="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> |
||||
|
||||
<rebuild-on-change property="ctrl.datasourceMeta.id"> |
||||
<plugin-component type="datasource-config-ctrl"> |
||||
</plugin-component> |
||||
</rebuild-on-change> |
||||
<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="alert-body"> |
||||
<div class="alert-title">{{ctrl.testing.message}}</div> |
||||
</div> |
||||
<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> |
||||
<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 /> |
||||
<br /> |
||||
<br /> |
||||
<br /> |
||||
|
||||
</form> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
@ -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> |
||||
|
||||
|
||||
@ -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> |
||||
|
||||
@ -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> |
||||
|
||||
Binary file not shown.
Loading…
Reference in new issue