Skip to content

N
nexpie-grafana-theme
Commit 8c2f7ac0 by Torkel Ödegaard
Options

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

parents f375c300 ea4ce0ce
Showing with 178 additions and 130 deletions
public/app/core/directives/misc.js
......@@ -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" ' +
......
public/app/features/annotations/partials/editor.html
......@@ -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>
<spectrum-picker ng-model="currentAnnotation.iconColor"></spectrum-picker>
<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="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>
<editor-opt-bool text="Grid line" model="currentAnnotation.showLine"></editor-opt-bool>
<div class="editor-option text-center">
<label class="small">Line color</label>
<spectrum-picker ng-model="currentAnnotation.lineColor"></spectrum-picker>
<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="gf-form max-width-10">
<editor-checkbox text="Grid line" model="currentAnnotation.showLine"></editor-checkbox>
</div>
<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>
<button ng-show="mode === 'edit'" type="button" class="btn btn-success pull-left" ng-click="update();">Update</button>
<br>
<br>
<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>
</div>
</div>
</div>
</div>
</div>
public/app/features/playlist/partials/playlist.html
......@@ -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>
<div style="">
<playlist-search class="playlist-search-container" search-started="ctrl.searchStarted(promise)"></playlist-search>
</div>
</div>
<h3 class="page-headering">Dashboards</h3>
</div>
<div class="row">
<div class="col-md-6">
<h5>Search results ({{ctrl.filteredDashboards.length + ctrl.filteredTags.length}})</h5>
<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 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>
......
public/app/features/playlist/playlist_edit_ctrl.ts
......@@ -11,7 +11,7 @@ export class PlaylistEditCtrl {
searchQuery: string = '';
loading: boolean = false;
playlist: any = {
interval: '10m',
interval: '5m',
};
playlistItems: any = [];
dashboardresult: any = [];
......
public/app/plugins/datasource/elasticsearch/partials/annotations.editor.html
<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 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="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>
<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>
</div>
\ No newline at end of file
public/app/plugins/datasource/graphite/partials/annotations.editor.html
<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>
</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>
<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>
\ No newline at end of file
public/app/plugins/datasource/influxdb/partials/annotations.editor.html
<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>
public/app/plugins/datasource/prometheus/partials/annotations.editor.html
<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>
public/sass/components/_dashboard.scss
......@@ -285,3 +285,9 @@ div.flot-text {
padding: 1.2rem .5rem .4rem .5rem;
}
}
.annotations-basic-settings {
.last-row {
margin-bottom: 20px;
}
}
public/sass/pages/_playlist.scss
.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;
}
\ No newline at end of file
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