apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge branch 'master' of github.com:grafana/grafana

Browse Source
pull/4119/head
Torkel Ödegaard 9 years ago
parent f375c3000d ea4ce0ce1f
commit 8c2f7ac083
10 changed files with 175 additions and 130 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      public/app/core/directives/misc.js
  2. 53
      public/app/features/annotations/partials/editor.html
  3. 43
      public/app/features/playlist/partials/playlist.html
  4. 2
      public/app/features/playlist/playlist_edit_ctrl.ts
  5. 51
      public/app/plugins/datasource/elasticsearch/partials/annotations.editor.html
  6. 19
      public/app/plugins/datasource/graphite/partials/annotations.editor.html
  7. 36
      public/app/plugins/datasource/influxdb/partials/annotations.editor.html
  8. 38
      public/app/plugins/datasource/prometheus/partials/annotations.editor.html
  9. 6
      public/sass/components/_dashboard.scss
  10. 35
      public/sass/pages/_playlist.scss

2
public/app/core/directives/misc.js
Unescape View File

@ -39,7 +39,7 @@ function (angular, coreModule, kbn) {
var tip = attrs.tip ? (' <tip>' + attrs.tip + '</tip>') : '';
var showIf = attrs.showIf ? (' ng-show="' + attrs.showIf + '" ') : '';
var template = '<div class="editor-option text-center"' + showIf + '>' +
var template = '<div class="editor-option gf-form-checkbox text-center"' + showIf + '>' +
' <label for="' + attrs.model + '" class="small">' +
attrs.text + tip + '</label>' +
'<input class="cr1" id="' + attrs.model + '" type="checkbox" ' +

53
public/app/features/annotations/partials/editor.html
Unescape View File

@ -34,8 +34,6 @@
</button>
</div>
<div class="gf-box-body">
<div class="editor-row row" ng-if="mode === 'list'">
<div class="span6">
<div ng-if="annotations.length === 0">
@ -66,28 +64,34 @@
</div>
</div>
<div ng-if="mode === 'edit' || mode === 'new'">
<div class="editor-row">
<div class="editor-option">
<label class="small">Name</label>
<input type="text" class="input-medium" ng-model='currentAnnotation.name' placeholder="name"></input>
</div>
<div class="editor-option">
<label class="small">Datasource</label>
<select ng-model="currentAnnotation.datasource" ng-options="f.name as f.name for f in datasources" ng-change="datasourceChanged()"></select>
</div>
<div class="editor-option text-center">
<label class="small">Icon color</label>
<div class="annotations-basic-settings" ng-if="mode === 'edit' || mode === 'new'">
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxl">
<span class="gf-form-label width-10">Name</span>
<input type="text" class="gf-form-input" ng-model='currentAnnotation.name' placeholder="name"></input>
</div>
<div class="gf-form">
<span class="gf-form-label max-width-10">Datasource</span>
<select class="gf-form-input gf-size-auto" ng-model="currentAnnotation.datasource" ng-options="f.name as f.name for f in datasources" ng-change="datasourceChanged()"></select>
</div>
</div>
<div class="gf-form-inline last-row">
<div class="gf-form gf-size-max-xl">
<span class="gf-form-label width-10">Icon size</span>
<select class="gf-form-input gf-size-md" ng-model="currentAnnotation.iconSize" ng-options="f for f in [7,8,9,10,13,15,17,20,25,30]"></select>
</div>
<div class="gf-form max-width-10">
<spectrum-picker ng-model="currentAnnotation.iconColor"></spectrum-picker>
<span class="checkbox-label">Icon color</span>
</div>
<div class="editor-option">
<label class="small">Icon size</label>
<select class="input-mini" ng-model="currentAnnotation.iconSize" ng-options="f for f in [7,8,9,10,13,15,17,20,25,30]"></select>
<div class="gf-form max-width-10">
<editor-checkbox text="Grid line" model="currentAnnotation.showLine"></editor-checkbox>
</div>
<editor-opt-bool text="Grid line" model="currentAnnotation.showLine"></editor-opt-bool>
<div class="editor-option text-center">
<label class="small">Line color</label>
<div class="gf-form max-width-10">
<spectrum-picker ng-model="currentAnnotation.lineColor"></spectrum-picker>
<span class="checkbox-label">Line color</span>
</div>
</div>
</div>
@ -96,11 +100,12 @@
</plugin-component>
</rebuild-on-change>
<br>
<button ng-show="mode === 'new'" type="button" class="btn btn-success" ng-click="add()">Add</button>
<div class="gf-form">
<div class="gf-form-button-row">
<button ng-show="mode === 'new'" type="button" class="btn gf-form-button btn-success" ng-click="add()">Add</button>
<button ng-show="mode === 'edit'" type="button" class="btn btn-success pull-left" ng-click="update();">Update</button>
<br>
<br>
</div>
</div>
</div>
</div>
</div>

43
public/app/features/playlist/partials/playlist.html
Unescape View File

@ -7,6 +7,8 @@
<h1 ng-show="!ctrl.isNew()">Edit Playlist</h1>
</div>
<p class="playlist-description">A playlist rotates through a pre-selected list of Dashboards. A Playlist can be a great way to build situational awareness, or just show off your metrics to your team or visitors.</p>
<div class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label width-7">Name</span>
@ -19,24 +21,28 @@
</div>
<div class="gf-form-group">
<div class="max-width-28">
<h5 class="page-headering">Add dashboards</h5>
<h3 class="page-headering">Dashboards</h3>
</div>
<div class="row">
<div class="col-md-6">
<div class="playlist-search-containerwrapper">
<div class="max-width-32">
<h5 class="page-headering playlist-column-header">Available</h5>
<div style="">
<playlist-search class="playlist-search-container" search-started="ctrl.searchStarted(promise)"></playlist-search>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h5>Search results ({{ctrl.filteredDashboards.length + ctrl.filteredTags.length}})</h5>
<div ng-if="ctrl.filteredDashboards.length > 0">
<table class="grafana-options-table">
<table class="grafana-options-table playlist-available-list">
<tr ng-repeat="playlistItem in ctrl.filteredDashboards">
<td style="white-space: nowrap;">
{{playlistItem.title}}
<td>
<i class="icon-gf icon-gf-dashboard"></i>&nbsp;&nbsp;{{playlistItem.title}}
</td>
<td style="text-align: center">
<td class="add-dashboard">
<button class="btn btn-inverse btn-mini pull-right" ng-click="ctrl.addPlaylistItem(playlistItem)">
<i class="fa fa-plus"></i>
Add to playlist
@ -46,7 +52,7 @@
</table>
</div>
<div class="playlist-search-results-container" ng-if="ctrl.filteredTags.length > 0;">
<div ng-repeat="tag in ctrl.filteredTags" class="pointer" style="width: 180px; float: left;"
<div ng-repeat="tag in ctrl.filteredTags" class="pointer tag-result-container"
ng-click="ctrl.addTagPlaylistItem(tag, $event)">
<a class="search-result-tag label label-tag" tag-color-from-name="tag.term">
<i class="fa fa-tag"></i>
@ -57,20 +63,20 @@
</div>
<div class="col-md-6">
<h5>Added dashboards</h5>
<table class="grafana-options-table">
<h5 class="page headering playlist-column-header">Selected</h5>
<table class="grafana-options-table playlist-available-list">
<tr ng-repeat="playlistItem in ctrl.playlistItems">
<td style="white-space: nowrap;" ng-if="playlistItem.type === 'dashboard_by_id'">
{{playlistItem.title}}
<td ng-if="playlistItem.type === 'dashboard_by_id'">
<i class="icon-gf icon-gf-dashboard"></i>&nbsp;&nbsp;{{playlistItem.title}}
</td>
<td style="white-space: nowrap;" ng-if="playlistItem.type === 'dashboard_by_tag'">
<td ng-if="playlistItem.type === 'dashboard_by_tag'">
<a class="search-result-tag label label-tag" tag-color-from-name="playlistItem.title">
<i class="fa fa-tag"></i>
<span>{{playlistItem.title}}</span>
</a>
</td>
<td style="text-align: right">
<td class="selected-playlistitem-settings">
<button class="btn btn-inverse btn-mini" ng-hide="$first" ng-click="ctrl.movePlaylistItemUp(playlistItem)">
<i class="fa fa-arrow-up"></i>
</button>
@ -89,7 +95,10 @@
<div class="clearfix"></div>
<div class="gf-form-button-row">
<a class="btn btn-success"
<a class="btn btn-success " ng-show="ctrl.isNew()"
ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()"
ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)"><i class="fa fa-plus"></i>&nbsp;Add</a>
<a class="btn btn-success" ng-show="!ctrl.isNew()"
ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()"
ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)">Save</a>
<a class="btn-text" ng-click="ctrl.backToList()">Cancel</a>

2
public/app/features/playlist/playlist_edit_ctrl.ts
Unescape View File

@ -11,7 +11,7 @@ export class PlaylistEditCtrl {
searchQuery: string = '';
loading: boolean = false;
playlist: any = {
interval: '10m',
interval: '5m',
};
playlistItems: any = [];
dashboardresult: any = [];

51
public/app/plugins/datasource/elasticsearch/partials/annotations.editor.html
Unescape View File

@ -1,39 +1,36 @@
<div class="editor-row">
<div class="section" ng-if="ctrl.annotation.index">
<h5>Index name</h5>
<div class="editor-option">
<input type="text" class="span4" ng-model='ctrl.annotation.index' placeholder="events-*"></input>
</div>
</div>
<div class="section">
<h5>Search query (lucene) <tip>Use [[filterName]] in query to replace part of the query with a filter value</tip></h5>
<div class="editor-option">
<input type="text" class="span6" ng-model='ctrl.annotation.query' placeholder="tags:deploy"></input>
<div class="gf-form-group">
<div class="gf-form" ng-if="ctrl.annotation.index">
<span class="gf-form-label width-14">Index name</span>
<input type="text" class="gf-form-input max-width-20" ng-model='ctrl.annotation.index' placeholder="events-*"></input>
</div>
<div class="gf-form">
<span class="gf-form-label width-14">Search query (lucene) <tip>Use [[filterName]] in query to replace part of the query with a filter value</tip></span>
<input type="text" class="gf-form-input max-width-20" ng-model='ctrl.annotation.query' placeholder="tags:deploy"></input>
</div>
</div>
<div class="editor-row">
<div class="section">
<h5>Field mappings</h5>
<div class="editor-option">
<label class="small">Time</label>
<input type="text" class="input-small" ng-model='ctrl.annotation.timeField' placeholder="@timestamp"></input>
<div class="gf-form-group">
<h6>Field mappings</h6>
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-10">Time</span>
<input type="text" class="gf-form-input max-width-16" ng-model='ctrl.annotation.timeField' placeholder="@timestamp"></input>
</div>
<div class="editor-option">
<label class="small">Title</label>
<input type="text" class="input-small" ng-model='ctrl.annotation.titleField' placeholder="desc"></input>
<div class="gf-form">
<span class="gf-form-label width-10">Title</span>
<input type="text" class="gf-form-input max-width-16" ng-model='ctrl.annotation.titleField' placeholder="desc"></input>
</div>
<div class="editor-option">
<label class="small">Tags</label>
<input type="text" class="input-small" ng-model='ctrl.annotation.tagsField' placeholder="tags"></input>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-10">Tags</span>
<input type="text" class="gf-form-input max-width-16" ng-model='ctrl.annotation.tagsField' placeholder="tags"></input>
</div>
<div class="editor-option">
<label class="small">Text</label>
<input type="text" class="input-small" ng-model='ctrl.annotation.textField' placeholder=""></input>
<div class="gf-form">
<span class="gf-form-label width-10">Text</span>
<input type="text" class="gf-form-input max-width-16" ng-model='ctrl.annotation.textField' placeholder=""></input>
</div>
</div>
</div>

19
public/app/plugins/datasource/graphite/partials/annotations.editor.html
Unescape View File

@ -1,15 +1,10 @@
<div class="editor-row">
<div class="editor-option">
<label class="small">Graphite target expression</label>
<input type="text" class="span10" ng-model='ctrl.annotation.target' placeholder=""></input>
<div class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label width-14">Graphite target expression</span>
<input type="text" class="gf-form-input max-width-20" ng-model='ctrl.annotation.target' placeholder=""></input>
</div>
<div class="gf-form">
<span class="gf-form-label width-14">Graphite event tags</span>
<input type="text" class="gf-form-input max-width-20" ng-model='ctrl.annotation.tags' placeholder=""></input>
</div>
<div class="editor-row">
<div class="editor-option">
<label class="small">Graphite event tags</label>
<input type="text" ng-model='ctrl.annotation.tags' placeholder=""></input>
</div>
</div>

36
public/app/plugins/datasource/influxdb/partials/annotations.editor.html
Unescape View File

@ -1,29 +1,27 @@
<div class="editor-row">
<div class="section">
<h5>InfluxDB Query <tip>Example: select text from events where $timeFilter</tip></h5>
<div class="editor-option">
<input type="text" class="span10" ng-model='ctrl.annotation.query' placeholder="select text from events where $timeFilter"></input>
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-14">InfluxDB Query <tip>Example: select text from events where $timeFilter</tip></span class="gf-form-label">
<input type="text" class="gf-form-input" ng-model='ctrl.annotation.query' placeholder="select text from events where $timeFilter"></input>
</div>
</div>
</div>
<div class="editor-row">
<div class="section">
<h5>Column mappings <tip>If your influxdb query returns more than one column you need to specify the column names below. An annotation event is composed of a title, tags, and an additional text field.</tip></h5>
<div class="editor-option">
<label class="small">Title</label>
<input type="text" class="input-small" ng-model='ctrl.annotation.titleColumn' placeholder=""></input>
<div class="gf-form-group">
<h6>Column mappings <tip>If your influxdb query returns more than one column you need to specify the column names below. An annotation event is composed of a title, tags, and an additional text field.</tip></h6>
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-10">Title</span>
<input type="text" class="gf-form-input" ng-model='ctrl.annotation.titleColumn' placeholder=""></input>
</div>
<div class="editor-option">
<label class="small">Tags</label>
<input type="text" class="input-small" ng-model='ctrl.annotation.tagsColumn' placeholder=""></input>
<div class="gf-form">
<span class="gf-form-label width-10">Tags</span>
<input type="text" class="gf-form-input" ng-model='ctrl.annotation.tagsColumn' placeholder=""></input>
</div>
<div class="editor-option">
<label class="small">Text</label>
<input type="text" class="input-small" ng-model='ctrl.annotation.textColumn' placeholder=""></input>
<div class="gf-form">
<span class="gf-form-label width-10">Text</span>
<input type="text" class="gf-form-input" ng-model='ctrl.annotation.textColumn' placeholder=""></input>
</div>
</div>
</div>

38
public/app/plugins/datasource/prometheus/partials/annotations.editor.html
Unescape View File

@ -1,28 +1,28 @@
<div class="editor-row">
<div class="section">
<h5>Search expression</h5>
<div class="editor-option">
<input type="text" class="span6" ng-model='ctrl.annotation.expr' placeholder="ALERTS"></input>
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-10">Search expression</span>
<input type="text" class="gf-form-input max-width-16" ng-model='ctrl.annotation.expr' placeholder="ALERTS"></input>
</div>
</div>
</div>
<div class="editor-row">
<div class="section">
<h5>Field formats</h5>
<div class="editor-option">
<label class="small">Title</label>
<input type="text" class="input-small" ng-model='ctrl.annotation.titleFormat' placeholder="alertname"></input>
<div class="gf-form-group">
<h6>Field formats</h6>
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-10">Title</span>
<input type="text" class="gf-form-input" ng-model='ctrl.annotation.titleFormat' placeholder="alertname"></input>
</div>
<div class="editor-option">
<label class="small">Tags</label>
<input type="text" class="input-small" ng-model='ctrl.annotation.tagKeys' placeholder="label1,label2"></input>
<div class="gf-form">
<span class="gf-form-label width-10">Tags</span>
<input type="text" class="gf-form-input" ng-model='ctrl.annotation.tagKeys' placeholder="label1,label2"></input>
</div>
<div class="editor-option">
<label class="small">Text</label>
<input type="text" class="input-small" ng-model='ctrl.annotation.textFormat' placeholder="instance"></input>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-10">Text</span>
<input type="text" class="gf-form-input" ng-model='ctrl.annotation.textFormat' placeholder="instance"></input>
</div>
</div>
</div>

6
public/sass/components/_dashboard.scss
Unescape View File

@ -285,3 +285,9 @@ div.flot-text {
padding: 1.2rem .5rem .4rem .5rem;
}
}
.annotations-basic-settings {
.last-row {
margin-bottom: 20px;
}
}

35
public/sass/pages/_playlist.scss
Unescape View File

@ -1,3 +1,8 @@
.playlist-description {
width: 555px;
margin-bottom: 20px;
}
.playlist-search-container {
z-index: 1000;
position: relative;
@ -18,6 +23,10 @@
right: 11px;
}
.playlist-search-containerwrapper {
margin-bottom: 15px;
}
.playlist-search-field-wrapper {
input {
width: 100%;
@ -90,3 +99,29 @@
padding-left: 20px;
}
}
.playlist-available-list {
td {
line-height: 2rem;
white-space: nowrap;
}
.add-dashboard {
text-align: center;
}
}
.playlist-column-header {
border-bottom: thin solid $gray-1;
padding-bottom: 10px;
margin-bottom: 15px;
}
.selected-playlistitem-settings {
text-align: right;
}
.tag-result-container {
width: 160px;
float: left;
}
Write Preview
Loading…
Cancel
Save