Skip to content

N
nexpie-grafana-theme
Commit 1e196fc0 by Torkel Ödegaard
Options

Began work on dashboard links and nav feature, #1944

parent d4c0d5d8
Showing with 204 additions and 40 deletions
public/app/directives/dashEditLink.js
...@@ -6,9 +6,9 @@ function (angular, $) { ...@@ -6,9 +6,9 @@ function (angular, $) {
'use strict'; 'use strict';
var editViewMap = { 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" }, '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 angular
......
public/app/features/all.js
define([ define([
'./panellinkeditor/module', './panellinks/module',
'./dashlinks/module',
'./annotations/annotationsSrv', './annotations/annotationsSrv',
'./templating/templateSrv', './templating/templateSrv',
'./dashboard/all', './dashboard/all',
......
public/app/features/dashboard/dashboardSrv.js
...@@ -39,6 +39,7 @@ function (angular, $, kbn, _, moment) { ...@@ -39,6 +39,7 @@ function (angular, $, kbn, _, moment) {
this.snapshot = data.snapshot; this.snapshot = data.snapshot;
this.schemaVersion = data.schemaVersion || 0; this.schemaVersion = data.schemaVersion || 0;
this.version = data.version || 0; this.version = data.version || 0;
this.links = data.links || [];
if (this.nav.length === 0) { if (this.nav.length === 0) {
this.nav.push({ type: 'timepicker' }); this.nav.push({ type: 'timepicker' });
......
public/app/features/dashboard/partials/linksEditor.html 0 → 100644
<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>
public/app/partials/dasheditor.html → public/app/features/dashboard/partials/settings.html
...@@ -105,18 +105,7 @@ ...@@ -105,18 +105,7 @@
</div> </div>
<div ng-if="editor.index == 2"> <div ng-if="editor.index == 2">
<div class="editor-row"> <dash-links-editor dashboard="dashboard"></dash-links-editor>
<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>
</div> </div>
<div ng-repeat="pulldown in dashboard.nav" ng-controller="SubmenuCtrl" ng-show="editor.index == 3+$index"> <div ng-repeat="pulldown in dashboard.nav" ng-controller="SubmenuCtrl" ng-show="editor.index == 3+$index">
......
public/app/features/dashlinks/editor.html 0 → 100644
<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>
public/app/features/dashlinks/module.js 0 → 100644
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);
};
});
});
public/app/features/panellinkeditor/module.js → public/app/features/panellinks/module.js
...@@ -8,18 +8,18 @@ function (angular, _) { ...@@ -8,18 +8,18 @@ function (angular, _) {
angular angular
.module('grafana.directives') .module('grafana.directives')
.directive('panelLinkEditor', function() { .directive('panelLinksEditor', function() {
return { return {
scope: { scope: {
panel: "=" panel: "="
}, },
restrict: 'E', restrict: 'E',
controller: 'PanelLinkEditorCtrl', controller: 'PanelLinksEditorCtrl',
templateUrl: 'app/features/panellinkeditor/module.html', templateUrl: 'app/features/panellinkeditor/module.html',
link: function() { link: function() {
} }
}; };
}).controller('PanelLinkEditorCtrl', function($scope, backendSrv) { }).controller('PanelLinksEditorCtrl', function($scope, backendSrv) {
$scope.panel.links = $scope.panel.links || []; $scope.panel.links = $scope.panel.links || [];
......
public/app/partials/panelgeneral.html
...@@ -48,6 +48,6 @@ ...@@ -48,6 +48,6 @@
</div> </div>
</div> </div>
<panel-link-editor panel="panel"></panel-link-editor> <panel-links-editor panel="panel"></panel-links-editor>
public/app/partials/submenu.html
...@@ -5,24 +5,6 @@ ...@@ -5,24 +5,6 @@
<li ng-repeat="variable in variables" class="tight-form-item template-param-name dropdown"> <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> <variable-value-select variable="variable" on-updated="variableUpdated(variable)"></variable-value-select>
</li> </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>
<ul class="tight-form-list" ng-if="dashboard.annotations.list.length > 0"> <ul class="tight-form-list" ng-if="dashboard.annotations.list.length > 0">
...@@ -36,6 +18,15 @@ ...@@ -36,6 +18,15 @@
</li> </li>
</ul> </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 class="clearfix"></div>
</div> </div>
</div> </div>
public/css/less/submenu.less
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
} }
.submenu-controls { .submenu-controls {
margin: 10px 10px 0 5px; margin: 10px 29px 1px 0px;
font-size: 16px; font-size: 16px;
} }
......
public/css/less/variables.dark.less
...@@ -213,8 +213,8 @@ ...@@ -213,8 +213,8 @@
@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1; @navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
@navbarHeight: 52px; @navbarHeight: 52px;
@navbarBackgroundHighlight: @grayDarker; @navbarBackgroundHighlight: @bodyBackground;
@navbarBackground: @grayDarker; @navbarBackground: @bodyBackground;
@navbarBorder: none; @navbarBorder: none;
@navbarText: @grayLight; @navbarText: @grayLight;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment