IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-16 11:42:35 -06:00
Code Issues Packages Projects Releases Wiki Activity

Began work on dashboard links and nav feature, #1944

Browse Source
This commit is contained in:
Torkel Ödegaard 2015-05-05 19:56:49 +02:00
parent d4c0d5d81b
commit 1e196fc091
16 changed files with 204 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/app/directives/dashEditLink.js
View File

@ -6,9 +6,9 @@ function (angular, $) {
'use strict';
var editViewMap = {
'settings': { src: 'app/partials/dasheditor.html', title: "Settings" },
'settings': { src: 'app/features/dashboard/partials/settings.html', title: "Settings" },
'annotations': { src: 'app/features/annotations/partials/editor.html', title: "Annotations" },
'templating': { src: 'app/partials/templating_editor.html', title: "Templating" }
'templating': { src: 'app/features/templating/partials/editor.html', title: "Templating" }
};
angular

3
public/app/features/all.js
View File

@ -1,5 +1,6 @@
define([
'./panellinkeditor/module',
'./panellinks/module',
'./dashlinks/module',
'./annotations/annotationsSrv',
'./templating/templateSrv',
'./dashboard/all',

1
public/app/features/dashboard/dashboardSrv.js
View File

@ -39,6 +39,7 @@ function (angular, $, kbn, _, moment) {
this.snapshot = data.snapshot;
this.schemaVersion = data.schemaVersion || 0;
this.version = data.version || 0;
this.links = data.links || [];
if (this.nav.length === 0) {
this.nav.push({ type: 'timepicker' });

62
public/app/features/dashboard/partials/linksEditor.html Normal file
View File

@ -0,0 +1,62 @@
<div ng-controller="DashLinksController">
<div class="editor-row">
<div class="tight-form-section">
<h5>Links and Dash Navigation</h5>
<div ng-repeat="link in panel.links">
<div class="tight-form" >
<ul class="tight-form-list">
<li class="tight-form-item">
<i class="fa fa-remove pointer" ng-click="deleteLink(link)"></i>
</li>
<li class="tight-form-item" style="width: 80px;">Link title</li>
<li>
<input type="text" ng-model="link.title" class="input-medium tight-form-input">
</li>
<li class="tight-form-item">Type</li>
<li>
<select class="input-medium tight-form-input" style="width: 101px;" ng-model="link.type" ng-options="f for f in ['dashboard','absolute']"></select>
</li>
<li class="tight-form-item" ng-show="link.type === 'dashboard'">Dashboard</li>
<li ng-show="link.type === 'dashboard'">
<input type="text"
ng-model="link.dashboard"
bs-typeahead="searchDashboards"
class="input-large tight-form-input">
</li>
<li class="tight-form-item" ng-show="link.type === 'absolute'">Url</li>
<li ng-show="link.type === 'absolute'">
<input type="text" ng-model="link.url" class="input-xlarge tight-form-input">
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list" role="menu">
<li class="tight-form-item">
<i class="fa fa-remove invisible"></i>
</li>
<li class="tight-form-item" style="width: 80px;">
Params
<tip>Use var-variableName=value to pass templating variables.</tip>
</li>
<li>
<input type="text" ng-model="link.params" class="input-xxlarge tight-form-input">
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<div class="editor-row">
<br>
<button class="btn btn-inverse" ng-click="addLink()"><i class="fa fa-plus"></i> Add link</button>
</div>
</div>

13
public/app/partials/dasheditor.html → public/app/features/dashboard/partials/settings.html
View File

@ -105,18 +105,7 @@
</div>
<div ng-if="editor.index == 2">
<div class="editor-row">
<div class="tight-form-section">
<h5>Links and Navigation Options<h5>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 90px">
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
<dash-links-editor dashboard="dashboard"></dash-links-editor>
</div>
<div ng-repeat="pulldown in dashboard.nav" ng-controller="SubmenuCtrl" ng-show="editor.index == 3+$index">

59
public/app/features/dashlinks/editor.html Normal file
View File

@ -0,0 +1,59 @@
<div class="editor-row">
<div class="tight-form-section">
<h5>Links and Dash Navigation</h5>
<div class="tight-form" ng-repeat="link in dashboard.links">
<ul class="tight-form-list">
<li class="tight-form-item">
<i class="fa fa-remove pointer" ng-click="deleteLink(link)"></i>
</li>
<li class="tight-form-item" style="width: 80px;">Type</li>
<li>
<select class="input-medium tight-form-input" style="width: 101px;" ng-model="link.type" ng-options="f for f in ['dashboard','absolute']"></select>
</li>
<li class="tight-form-item" ng-show="link.type === 'dashboard'">Dashboard</li>
<li ng-show="link.type === 'dashboard'">
<input type="text"
ng-model="link.dashboard"
bs-typeahead="searchDashboards"
class="input-large tight-form-input">
</li>
<li class="tight-form-item" ng-show="link.type === 'absolute'">Url</li>
<li ng-show="link.type === 'absolute'">
<input type="text" ng-model="link.url" class="input-xlarge tight-form-input">
</li>
<li class="tight-form-item">Title</li>
<li>
<input type="text" ng-model="link.title" class="input-medium tight-form-input">
</li>
</ul>
<div class="clearfix"></div>
</div>
<!-- <div class="tight&#45;form"> -->
<!-- <ul class="tight&#45;form&#45;list" role="menu"> -->
<!-- <li class="tight&#45;form&#45;item"> -->
<!-- <i class="fa fa&#45;remove invisible"></i> -->
<!-- </li> -->
<!-- <li class="tight&#45;form&#45;item" style="width: 80px;"> -->
<!-- Params -->
<!-- <tip>Use var&#45;variableName=value to pass templating variables.</tip> -->
<!-- </li> -->
<!-- <li> -->
<!-- <input type="text" ng&#45;model="link.params" class="input&#45;xxlarge tight&#45;form&#45;input"> -->
<!-- </li> -->
<!-- </ul> -->
<!-- <div class="clearfix"></div> -->
<!-- </div> -->
</div>
</div>
</div>
<div class="editor-row">
<br>
<button class="btn btn-inverse" ng-click="addLink()"><i class="fa fa-plus"></i> Add link</button>
</div>

1
public/app/features/dashlinks/module.html Normal file
View File

@ -0,0 +1 @@
<h5>dash links</h5>

60
public/app/features/dashlinks/module.js Normal file
View File

@ -0,0 +1,60 @@
define([
'angular',
'lodash',
],
function (angular, _) {
'use strict';
angular
.module('grafana.directives')
.directive('dashLinksEditor', function() {
return {
scope: {
dashboard: "="
},
restrict: 'E',
controller: 'DashLinkCtrl',
templateUrl: 'app/features/dashlinks/editor.html',
link: function() {
}
};
}).directive('dashLinks', function() {
return {
scope: {
dashboard: "="
},
restrict: 'E',
controller: 'DashLinkCtrl',
templateUrl: 'app/features/dashlinks/module.html',
link: function() {
}
};
}).controller('DashLinkCtrl', function($scope, backendSrv) {
$scope.dashboard.links = $scope.dashboard.links || [];
$scope.addLink = function() {
$scope.dashboard.links.push({
type: 'dashboard',
name: 'Related dashboard'
});
};
$scope.searchDashboards = function(queryStr, callback) {
var query = {query: queryStr};
backendSrv.search(query).then(function(result) {
var dashboards = _.map(result.dashboards, function(dash) {
return dash.title;
});
callback(dashboards);
});
};
$scope.deleteLink = function(link) {
$scope.dashboard.links = _.without($scope.dashboard.links, link);
};
});
});

0
public/app/features/panellinkeditor/linkSrv.js → public/app/features/panellinks/linkSrv.js
View File

0
public/app/features/panellinkeditor/module.html → public/app/features/panellinks/module.html
View File

6
public/app/features/panellinkeditor/module.js → public/app/features/panellinks/module.js
View File

@ -8,18 +8,18 @@ function (angular, _) {
angular
.module('grafana.directives')
.directive('panelLinkEditor', function() {
.directive('panelLinksEditor', function() {
return {
scope: {
panel: "="
},
restrict: 'E',
controller: 'PanelLinkEditorCtrl',
controller: 'PanelLinksEditorCtrl',
templateUrl: 'app/features/panellinkeditor/module.html',
link: function() {
}
};
}).controller('PanelLinkEditorCtrl', function($scope, backendSrv) {
}).controller('PanelLinksEditorCtrl', function($scope, backendSrv) {
$scope.panel.links = $scope.panel.links || [];

0
public/app/partials/templating_editor.html → public/app/features/templating/partials/editor.html
View File

2
public/app/partials/panelgeneral.html
View File

@ -48,6 +48,6 @@
</div>
</div>
<panel-link-editor panel="panel"></panel-link-editor>
<panel-links-editor panel="panel"></panel-links-editor>

27
public/app/partials/submenu.html
View File

@ -5,24 +5,6 @@
<li ng-repeat="variable in variables" class="tight-form-item template-param-name dropdown">
<variable-value-select variable="variable" on-updated="variableUpdated(variable)"></variable-value-select>
</li>
<!-- <li class="dropdown" ng&#45;repeat&#45;end> -->
<!-- <a class="tight&#45;form&#45;item" tabindex="1" data&#45;toggle="dropdown">{{variable.current.text}} <i class="fa fa&#45;caret&#45;down"></i></a> -->
<!-- <div class="dropdown&#45;menu variable&#45;values&#45;dropdown"> -->
<!-- <input type="text" class="fluid&#45;width"> -->
<!-- <div class="variable&#45;values&#45;list"> -->
<!-- <div class="variable&#45;values&#45;list&#45;item" ng&#45;repeat="option in variable.options"> -->
<!-- <editor&#45;checkbox text="{{option.text}}" model="asd" change="buildUrl()"></editor&#45;checkbox> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- </li> -->
<!-- -->
<!--
<li ng-repeat-end template-param-selector>
</li>
-->
</ul>
<ul class="tight-form-list" ng-if="dashboard.annotations.list.length > 0">
@ -36,6 +18,15 @@
</li>
</ul>
<ul class="tight-form-list pull-right" ng-if="dashboard.links.length > 0">
<li ng-repeat="link in dashboard.links" class="tight-form-item">
<a class="pointer">
<i class="fa fa-th-large"></i>
{{link.title}}
</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>

2
public/css/less/submenu.less
View File

@ -5,7 +5,7 @@
}
.submenu-controls {
margin: 10px 10px 0 5px;
margin: 10px 29px 1px 0px;
font-size: 16px;
}

4
public/css/less/variables.dark.less
View File

@ -213,8 +213,8 @@
@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
@navbarHeight: 52px;
@navbarBackgroundHighlight: @grayDarker;
@navbarBackground: @grayDarker;
@navbarBackgroundHighlight: @bodyBackground;
@navbarBackground: @bodyBackground;
@navbarBorder: none;
@navbarText: @grayLight;