mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
redesign dashlinks
This commit is contained in:
Patrick O'Carroll
parent
7f597283e8
commit
6ae94dda87
@ -64,5 +64,5 @@
|
||||
</div>
|
||||
|
||||
<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'links'" >
|
||||
<dash-links-editor></dash-links-editor>
|
||||
<dash-links-editor dashboard="ctrl.dashboard"></dash-links-editor>
|
||||
</div>
|
||||
|
||||
@ -1,77 +1,137 @@
|
||||
<h3 class="dashboard-settings__header">
|
||||
Dashboard Links
|
||||
<a ng-click="ctrl.backToList()">Dashboard Links</a>
|
||||
<span ng-show="ctrl.mode === 'new'">> New</span>
|
||||
<span ng-show="ctrl.mode === 'edit'">> Edit</span>
|
||||
</h3>
|
||||
|
||||
<div ng-repeat="link in dashboard.links">
|
||||
<div class="gf-form-group gf-form-inline">
|
||||
<div class="section">
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-8">Type</span>
|
||||
<div class="gf-form-select-wrapper width-10">
|
||||
<select class="gf-form-input" ng-model="link.type" ng-options="f for f in ['dashboards','link']" ng-change="updated()"></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gf-form" ng-show="link.type === 'dashboards'">
|
||||
<span class="gf-form-label width-8">With tags</span>
|
||||
<bootstrap-tagsinput ng-model="link.tags" tagclass="label label-tag" placeholder="add tags" style="margin-right: .25rem"></bootstrap-tagsinput>
|
||||
</div>
|
||||
<gf-form-switch ng-show="link.type === 'dashboards'" class="gf-form" label="As dropdown" checked="link.asDropdown" switch-class="max-width-4" label-class="width-8" on-change="updated()"></gf-form-switch>
|
||||
<div class="gf-form" ng-show="link.type === 'dashboards' && link.asDropdown">
|
||||
<span class="gf-form-label width-8">Title</span>
|
||||
<input type="text" ng-model="link.title" class="gf-form-input max-width-10" ng-model-onblur ng-change="updated()">
|
||||
</div>
|
||||
<div ng-show="link.type === 'link'">
|
||||
<div class="gf-form">
|
||||
<li class="gf-form-label width-8">Url</li>
|
||||
<input type="text" ng-model="link.url" class="gf-form-input width-20" ng-model-onblur ng-change="updated()">
|
||||
</div>
|
||||
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-8">Title</span>
|
||||
<input type="text" ng-model="link.title" class="gf-form-input width-20" ng-model-onblur ng-change="updated()">
|
||||
</div>
|
||||
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-8">Tooltip</span>
|
||||
<input type="text" ng-model="link.tooltip" class="gf-form-input width-20" placeholder="Open dashboard" ng-model-onblur ng-change="updated()">
|
||||
</div>
|
||||
<div ng-if="ctrl.mode == 'list'">
|
||||
<div ng-if="ctrl.dashboard.links.length === 0">
|
||||
<div class="empty-list-cta">
|
||||
<div class="empty-list-cta__title">
|
||||
There are no dashboard links added yet
|
||||
</div>
|
||||
<a ng-click="ctrl.addLinkMode()" class="empty-list-cta__button btn btn-xlarge btn-success">
|
||||
<i class="gicon gicon-dashboard-new"></i>
|
||||
Add Dashboard Link
|
||||
</a>
|
||||
<div class="grafana-info-box">
|
||||
<h5>What are Dashboard Links?</h5>
|
||||
<p>
|
||||
Annotations provide a way to integrate event data into your graphs. They are visualized as vertical lines and icons on all
|
||||
graph panels. When you hover over an annotation icon you can get event text & tags for the event. You can add
|
||||
annotation events directly from grafana by holding CTRL or CMD + click on graph (or drag region). These will be
|
||||
stored in Grafana's annotation database.
|
||||
</p>
|
||||
Checkout the
|
||||
<a class="external-link" target="_blank" href="http://docs.grafana.org/reference/annotations/">Annotations documentation</a> for more information.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-8">Icon</span>
|
||||
<div class="gf-form-select-wrapper width-20">
|
||||
<select class="gf-form-input" ng-model="link.icon" ng-options="k as k for (k, v) in iconMap" ng-change="updated()"></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section gf-form-inline" style="display: flex">
|
||||
<div>
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-6">Include</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<gf-form-switch class="gf-form" label="Time range" checked="link.keepTime" switch-class="max-width-6" label-class="width-9"></gf-form-switch>
|
||||
<gf-form-switch class="gf-form" label="Variable values" checked="link.includeVars" switch-class="max-width-6" label-class="width-9"></gf-form-switch>
|
||||
<gf-form-switch class="gf-form" label="Open in new tab" checked="link.targetBlank" switch-class="max-width-6" label-class="width-9"></gf-form-switch>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex; flex-direction:column; justify-content:flex-start">
|
||||
<div class="gf-form">
|
||||
<button class="btn btn-inverse gf-form-btn width-4" ng-click="deleteLink($index)">
|
||||
<i class="fa fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="gf-form">
|
||||
<button class="btn btn-inverse gf-form-btn width-4" ng-click="moveLink($index, -1)" ng-hide="$first"><i class="fa fa-arrow-up"></i></button>
|
||||
</div>
|
||||
<div class="gf-form">
|
||||
<button class="btn btn-inverse gf-form-btn width-4" ng-click="moveLink($index, 1)" ng-hide="$last"><i class="fa fa-arrow-down"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-if="ctrl.dashboard.links.length > 0">
|
||||
<div class="page-action-bar">
|
||||
<div class="page-action-bar__spacer"></div>
|
||||
<a type="button" class="btn btn-success" ng-click="ctrl.addLinkMode()">
|
||||
<i class="fa fa-plus"></i> New</a>
|
||||
</div>
|
||||
<table class="filter-table filter-table--hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Type</th>
|
||||
<th>Tags</th>
|
||||
<th colspan="3"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="link in ctrl.dashboard.links">
|
||||
<td style="width:90%" class="pointer" ng-click="ctrl.editLinkMode(link)">
|
||||
<i class="fa fa-fw fa-external-link"></i>
|
||||
{{link.type}}
|
||||
</td>
|
||||
<td class="pointer">
|
||||
{{link.tags}}
|
||||
</td>
|
||||
<td style="width: 1%">
|
||||
<i ng-click="ctrl.moveLink($index, -1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i>
|
||||
</td>
|
||||
<td style="width: 1%">
|
||||
<i ng-click="ctrl.moveLink($index, 1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i>
|
||||
</td>
|
||||
<td style="width: 1%">
|
||||
<a ng-click="ctrl.deleteLink($index)" class="btn btn-danger btn-mini" ng-hide="annotation.builtIn">
|
||||
<i class="fa fa-remove"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-inverse" ng-click="addLink()"><i class="fa fa-plus"></i> Add link</button>
|
||||
|
||||
<div ng-if="ctrl.mode == 'edit' || ctrl.mode == 'new'">
|
||||
<div class="gf-form-group gf-form-inline">
|
||||
<div class="section">
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-8">Type</span>
|
||||
<div class="gf-form-select-wrapper width-10">
|
||||
<select class="gf-form-input" ng-model="link.type" ng-options="f for f in ['dashboards','link']" ng-change="updated()"></select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gf-form" ng-show="link.type === 'dashboards'">
|
||||
<span class="gf-form-label width-8">With tags</span>
|
||||
<bootstrap-tagsinput ng-model="link.tags" tagclass="label label-tag" placeholder="add tags" style="margin-right: .25rem"></bootstrap-tagsinput>
|
||||
</div>
|
||||
|
||||
<gf-form-switch ng-show="link.type === 'dashboards'" class="gf-form" label="As dropdown" checked="link.asDropdown" switch-class="max-width-4"
|
||||
label-class="width-8" on-change="updated()"></gf-form-switch>
|
||||
<div class="gf-form" ng-show="link.type === 'dashboards' && link.asDropdown">
|
||||
<span class="gf-form-label width-8">Title</span>
|
||||
<input type="text" ng-model="link.title" class="gf-form-input max-width-10" ng-model-onblur ng-change="updated()">
|
||||
</div>
|
||||
<div ng-show="link.type === 'link'">
|
||||
<div class="gf-form">
|
||||
<li class="gf-form-label width-8">Url</li>
|
||||
<input type="text" ng-model="link.url" class="gf-form-input width-20" ng-model-onblur ng-change="updated()">
|
||||
</div>
|
||||
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-8">Title</span>
|
||||
<input type="text" ng-model="link.title" class="gf-form-input width-20" ng-model-onblur ng-change="updated()">
|
||||
</div>
|
||||
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-8">Tooltip</span>
|
||||
<input type="text" ng-model="link.tooltip" class="gf-form-input width-20" placeholder="Open dashboard" ng-model-onblur ng-change="updated()">
|
||||
</div>
|
||||
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-8">Icon</span>
|
||||
<div class="gf-form-select-wrapper width-20">
|
||||
<select class="gf-form-input" ng-model="link.icon" ng-options="k as k for (k, v) in iconMap" ng-change="updated()"></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section gf-form-inline" style="display: flex">
|
||||
<div>
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-6">Include</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<gf-form-switch class="gf-form" label="Time range" checked="link.keepTime" switch-class="max-width-6" label-class="width-9"></gf-form-switch>
|
||||
<gf-form-switch class="gf-form" label="Variable values" checked="link.includeVars" switch-class="max-width-6" label-class="width-9"></gf-form-switch>
|
||||
<gf-form-switch class="gf-form" label="Open in new tab" checked="link.targetBlank" switch-class="max-width-6" label-class="width-9"></gf-form-switch>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-success" ng-if="ctrl.mode == 'new'" ng-click="ctrl.addLink(link.type, link.tags, link.url, link.title)">
|
||||
<i class="fa fa-plus"></i> Add</button>
|
||||
<button class="btn btn-success" ng-if="ctrl.mode == 'edit'" ng-click="ctrl.editLink()">
|
||||
<i class="fa fa-plus"></i> Edit</button>
|
||||
</div>
|
||||
|
||||
82
public/app/features/dashlinks/editor.ts
Normal file
82
public/app/features/dashlinks/editor.ts
Normal file
@ -0,0 +1,82 @@
|
||||
import angular from 'angular';
|
||||
import _ from 'lodash';
|
||||
import appEvents from 'app/core/app_events';
|
||||
|
||||
export var iconMap = {
|
||||
"external link": "fa-external-link",
|
||||
"dashboard": "fa-th-large",
|
||||
"question": "fa-question",
|
||||
"info": "fa-info",
|
||||
"bolt": "fa-bolt",
|
||||
"doc": "fa-file-text-o",
|
||||
"cloud": "fa-cloud",
|
||||
};
|
||||
|
||||
export class DashLinkEditorCtrl {
|
||||
dashboard: any;
|
||||
iconMap: any;
|
||||
mode: any;
|
||||
link: any;
|
||||
currentLink: any;
|
||||
|
||||
/** @ngInject */
|
||||
constructor($scope, $rootScope) {
|
||||
this.iconMap = iconMap;
|
||||
this.dashboard.links = this.dashboard.links || [];
|
||||
this.mode = 'list';
|
||||
}
|
||||
|
||||
backToList() {
|
||||
this.mode = 'list';
|
||||
}
|
||||
|
||||
addLinkMode() {
|
||||
this.mode = 'new';
|
||||
}
|
||||
|
||||
editLinkMode(index) {
|
||||
this.currentLink = index;
|
||||
this.mode = 'edit';
|
||||
}
|
||||
|
||||
addLink(type, tags) {
|
||||
this.dashboard.links.push({ type: type, tags: tags, icon: 'external link' });
|
||||
this.dashboard.updateSubmenuVisibility();
|
||||
this.updated();
|
||||
this.mode = 'list';
|
||||
}
|
||||
|
||||
editLink(index) {
|
||||
|
||||
}
|
||||
|
||||
moveLink(index, dir) {
|
||||
_.move(this.dashboard.links, index, index+dir);
|
||||
this.updated();
|
||||
}
|
||||
|
||||
updated() {
|
||||
appEvents.emit('dash-links-updated');
|
||||
}
|
||||
|
||||
deleteLink(index) {
|
||||
this.dashboard.links.splice(index, 1);
|
||||
this.dashboard.updateSubmenuVisibility();
|
||||
this.updated();
|
||||
}
|
||||
}
|
||||
|
||||
function dashLinksEditor() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
controller: DashLinkEditorCtrl,
|
||||
templateUrl: 'public/app/features/dashlinks/editor.html',
|
||||
bindToController: true,
|
||||
controllerAs: 'ctrl',
|
||||
scope: {
|
||||
dashboard: "="
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
angular.module('grafana.directives').directive('dashLinksEditor', dashLinksEditor);
|
||||
@ -1,25 +1,6 @@
|
||||
import angular from 'angular';
|
||||
import _ from 'lodash';
|
||||
|
||||
var iconMap = {
|
||||
"external link": "fa-external-link",
|
||||
"dashboard": "fa-th-large",
|
||||
"question": "fa-question",
|
||||
"info": "fa-info",
|
||||
"bolt": "fa-bolt",
|
||||
"doc": "fa-file-text-o",
|
||||
"cloud": "fa-cloud",
|
||||
};
|
||||
|
||||
function dashLinksEditor() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
controller: 'DashLinkEditorCtrl',
|
||||
templateUrl: 'public/app/features/dashlinks/editor.html',
|
||||
link: function() {
|
||||
}
|
||||
};
|
||||
}
|
||||
import {iconMap} from './editor';
|
||||
|
||||
function dashLinksContainer() {
|
||||
return {
|
||||
@ -162,37 +143,6 @@ export class DashLinksContainerCtrl {
|
||||
}
|
||||
}
|
||||
|
||||
export class DashLinkEditorCtrl {
|
||||
/** @ngInject */
|
||||
constructor($scope, $rootScope) {
|
||||
$scope.iconMap = iconMap;
|
||||
$scope.dashboard.links = $scope.dashboard.links || [];
|
||||
|
||||
$scope.addLink = function() {
|
||||
$scope.dashboard.links.push({ type: 'dashboards', icon: 'external link' });
|
||||
$scope.dashboard.updateSubmenuVisibility();
|
||||
$scope.updated();
|
||||
};
|
||||
|
||||
$scope.moveLink = function(index, dir) {
|
||||
_.move($scope.dashboard.links, index, index+dir);
|
||||
$scope.updated();
|
||||
};
|
||||
|
||||
$scope.updated = function() {
|
||||
$rootScope.appEvent('dash-links-updated');
|
||||
};
|
||||
|
||||
$scope.deleteLink = function(index) {
|
||||
$scope.dashboard.links.splice(index, 1);
|
||||
$scope.dashboard.updateSubmenuVisibility();
|
||||
$scope.updated();
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
angular.module('grafana.directives').directive('dashLinksEditor', dashLinksEditor);
|
||||
angular.module('grafana.directives').directive('dashLinksContainer', dashLinksContainer);
|
||||
angular.module('grafana.directives').directive('dashLink', dashLink);
|
||||
angular.module('grafana.directives').controller("DashLinksContainerCtrl", DashLinksContainerCtrl);
|
||||
angular.module('grafana.directives').controller('DashLinkEditorCtrl', DashLinkEditorCtrl);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user