mirror of https://github.com/grafana/grafana
Torkel Ödegaard
8 years ago
parent
8354c64ff5
commit
05ec7541c8
@ -1,147 +1,113 @@ |
||||
<h3 class="dashboard-settings__header">Annotations</h3> |
||||
|
||||
<div ng-controller="AnnotationsEditorCtrl"> |
||||
<h3 class="dashboard-settings__header"> |
||||
<a ng-click="ctrl.setMode('list')">Annotations</a> |
||||
<span ng-show="ctrl.mode === 'new'">> New</span> |
||||
<span ng-show="ctrl.mode === 'edit'">> Edit</span> |
||||
</h3> |
||||
|
||||
<!-- <div class="tabbed-view-header"> --> |
||||
<!-- <h2 class="tabbed-view-title"> --> |
||||
<!-- Annotations --> |
||||
<!-- </h2> --> |
||||
<!-- --> |
||||
<!-- <ul class="gf-tabs"> --> |
||||
<!-- <li class="gf-tabs-item" > --> |
||||
<!-- <a class="gf-tabs-link" ng-click="ctrl.mode = 'list';" ng-class="{active: ctrl.mode === 'list'}"> --> |
||||
<!-- Queries --> |
||||
<!-- </a> --> |
||||
<!-- </li> --> |
||||
<!-- <li class="gf-tabs-item" ng-show="ctrl.mode === 'edit'"> --> |
||||
<!-- <a class="gf-tabs-link" ng-class="{active: ctrl.mode === 'edit'}"> --> |
||||
<!-- Edit Query --> |
||||
<!-- </a> --> |
||||
<!-- </li> --> |
||||
<!-- <li class="gf-tabs-item" ng-show="ctrl.mode === 'new'"> --> |
||||
<!-- <span class="active gf-tabs-link">New Query</span> --> |
||||
<!-- </li> --> |
||||
<!-- --> |
||||
<!-- <li class="gf-tabs-item" > --> |
||||
<!-- <a class="gf-tabs-link" ng-click="ctrl.mode = 'help';" ng-class="{active: ctrl.mode === 'help'}"> --> |
||||
<!-- Help --> |
||||
<!-- </a> --> |
||||
<!-- </li> --> |
||||
<!-- </ul> --> |
||||
<!-- --> |
||||
<!-- <button class="tabbed-view-close-btn" ng-click="dismiss();"> --> |
||||
<!-- <i class="fa fa-remove"></i> --> |
||||
<!-- </button> --> |
||||
<!-- </div> --> |
||||
|
||||
<!-- <div ng-show="ctrl.mode === 'help'"> --> |
||||
<!-- <div class="grafana-info-box col-lg-8"> --> |
||||
<!-- <h5>What are Annotations?</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 title, tags, and text information for the event. --> |
||||
<!-- In the <i>Queries</i> tab you can add queries that return annotation events. --> |
||||
<!-- </p> --> |
||||
<!-- <p> --> |
||||
<!-- You can add annotations 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 class="editor-row row"> |
||||
<div ng-if="ctrl.annotations.length === 0"> |
||||
<em>No annotation queries defined</em> |
||||
<div ng-if="ctrl.mode === 'list'"> |
||||
<!-- empty list cta, there is always one built in query --> |
||||
<div ng-if="ctrl.annotations.length === 1"> |
||||
<div class="empty-list-cta"> |
||||
<div class="empty-list-cta__title">There are no custom annotation queries added yet</div> |
||||
<a ng-click="ctrl.setupNew()" class="empty-list-cta__button btn btn-xlarge btn-success"> |
||||
<i class="gicon gicon-dashboard-new"></i> |
||||
Add Annotation Query |
||||
</a> |
||||
<div class="grafana-info-box"> |
||||
<h5>What are Annotations?</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="page-action-bar" ng-if="ctrl.annotations.length > 1"> |
||||
<div class="page-action-bar__spacer"></div> |
||||
<a type="button" class="btn btn-success" ng-click="ctrl.setupNew();"><i class="fa fa-plus" ></i> New</a> |
||||
</div> |
||||
|
||||
<table class="grafana-options-table"> |
||||
<table class="filter-table"> |
||||
<thead> |
||||
<tr> |
||||
<th>Query name</th> |
||||
<th>Data source</th> |
||||
<th colspan="3"></th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<tr ng-repeat="annotation in ctrl.annotations"> |
||||
<td style="width:90%" ng-hide="annotation.builtIn"> |
||||
<td style="width:90%" ng-hide="annotation.builtIn" class="pointer" ng-click="ctrl.edit(annotation)"> |
||||
<i class="fa fa-comment" style="color:{{annotation.iconColor}}"></i> |
||||
{{annotation.name}} |
||||
</td> |
||||
<td style="width:90%" ng-show="annotation.builtIn"> |
||||
<td style="width:90%" ng-show="annotation.builtIn" class="pointer" ng-click="ctrl.edit(annotation)"> |
||||
<i class="fa fa-comment"></i> |
||||
<em class="muted">{{annotation.name}} (Built-in)</em> |
||||
</td> |
||||
<td class="pointer" ng-click="ctrl.edit(annotation)"> |
||||
{{annotation.datasource || 'Default'}} |
||||
</td> |
||||
<td style="width: 1%"><i ng-click="_.move(ctrl.annotations,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td> |
||||
<td style="width: 1%"><i ng-click="_.move(ctrl.annotations,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td> |
||||
<td style="width: 1%"> |
||||
<a ng-click="ctrl.edit(annotation)" class="btn btn-inverse btn-mini"> |
||||
<i class="fa fa-edit"></i> |
||||
Edit |
||||
</a> |
||||
</td> |
||||
<td style="width: 1%"> |
||||
<a ng-click="ctrl.removeAnnotation(annotation)" class="btn btn-danger btn-mini" ng-hide="annotation.builtIn"> |
||||
<i class="fa fa-remove"></i> |
||||
</a> |
||||
</td> |
||||
</tr> |
||||
</table> |
||||
</tbody> |
||||
</table> |
||||
</div> |
||||
|
||||
<div class="annotations-basic-settings" ng-if="ctrl.mode === 'edit' || ctrl.mode === 'new'"> |
||||
<div class="gf-form-group"> |
||||
<h5 class="section-heading">General</h5> |
||||
<div class="gf-form-inline"> |
||||
<div class="gf-form"> |
||||
<span class="gf-form-label width-7">Name</span> |
||||
<input type="text" class="gf-form-input width-20" ng-model='ctrl.currentAnnotation.name' placeholder="name"></input> |
||||
</div> |
||||
<div class="gf-form"> |
||||
<span class="gf-form-label width-7">Data source</span> |
||||
<div class="gf-form-select-wrapper"> |
||||
<select class="gf-form-input" ng-model="ctrl.currentAnnotation.datasource" ng-options="f.name as f.name for f in ctrl.datasources" ng-change="ctrl.datasourceChanged()"></select> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="gf-form"> |
||||
<div class="gf-form-button-row"> |
||||
<a type="button" class="btn gf-form-button btn-success" ng-click="ctrl.setupNew()"><i class="fa fa-plus" ></i> New</a> |
||||
<div class="gf-form-group"> |
||||
<div class="gf-form-inline"> |
||||
<gf-form-switch class="gf-form" label="Enabled" checked="ctrl.currentAnnotation.enable" label-class="width-7"> |
||||
</gf-form-switch> |
||||
<gf-form-switch class="gf-form" label="Hidden" tooltip="Hides the annotation query toggle from showing at the top of the dashboard" checked="ctrl.currentAnnotation.hide" label-class="width-7"> |
||||
</gf-form-switch> |
||||
<div class="gf-form"> |
||||
<label class="gf-form-label width-9">Color</label> |
||||
<span class="gf-form-label"> |
||||
<color-picker color="ctrl.currentAnnotation.iconColor" onChange="ctrl.onColorChange"></color-picker> |
||||
</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- <div class="annotations-basic-settings" ng-if="ctrl.mode === 'edit' || ctrl.mode === 'new'"> --> |
||||
<!-- <div> --> |
||||
<!-- <div class="gf-form-group"> --> |
||||
<!-- <h5 class="section-heading">General</h5> --> |
||||
<!-- <div class="gf-form-inline"> --> |
||||
<!-- <div class="gf-form"> --> |
||||
<!-- <span class="gf-form-label width-7">Name</span> --> |
||||
<!-- <input type="text" class="gf-form-input width-20" ng-model='ctrl.currentAnnotation.name' placeholder="name"></input> --> |
||||
<!-- </div> --> |
||||
<!-- <div class="gf-form"> --> |
||||
<!-- <span class="gf-form-label width-7">Data source</span> --> |
||||
<!-- <div class="gf-form-select-wrapper"> --> |
||||
<!-- <select class="gf-form-input" ng-model="ctrl.currentAnnotation.datasource" ng-options="f.name as f.name for f in ctrl.datasources" ng-change="ctrl.datasourceChanged()"></select> --> |
||||
<!-- </div> --> |
||||
<!-- </div> --> |
||||
<!-- </div> --> |
||||
<!-- </div> --> |
||||
<!-- --> |
||||
<!-- <div class="gf-form-group"> --> |
||||
<!-- <div class="gf-form-inline"> --> |
||||
<!-- <gf-form-switch class="gf-form" --> |
||||
<!-- label="Enabled" --> |
||||
<!-- checked="ctrl.currentAnnotation.enable" --> |
||||
<!-- on-change="ctrl.annotationEnabledChange()" --> |
||||
<!-- label-class="width-7"> --> |
||||
<!-- </gf-form-switch> --> |
||||
<!-- <gf-form-switch class="gf-form" --> |
||||
<!-- label="Hidden" --> |
||||
<!-- tooltip="Hides the annotation query toggle from showing at the top of the dashboard" --> |
||||
<!-- checked="ctrl.currentAnnotation.hide" --> |
||||
<!-- on-change="ctrl.annotationHiddenChanged()" --> |
||||
<!-- label-class="width-7"> --> |
||||
<!-- </gf-form-switch> --> |
||||
<!-- <div class="gf-form"> --> |
||||
<!-- <label class="gf-form-label width-9">Color</label> --> |
||||
<!-- <span class="gf-form-label"> --> |
||||
<!-- <color-picker color="ctrl.currentAnnotation.iconColor" onChange="ctrl.onColorChange"></color-picker> --> |
||||
<!-- </span> --> |
||||
<!-- </div> --> |
||||
<!-- </div> --> |
||||
<!-- </div> --> |
||||
<!-- </div> --> |
||||
<!-- --> |
||||
<!-- <h5 class="section-heading">Query</h5> --> |
||||
<!-- <rebuild-on-change property="ctrl.currentDatasource"> --> |
||||
<!-- <plugin-component type="annotations-query-ctrl"> --> |
||||
<!-- </plugin-component> --> |
||||
<!-- </rebuild-on-change> --> |
||||
<!-- --> |
||||
<!-- <div class="gf-form"> --> |
||||
<!-- <div class="gf-form-button-row p-y-0"> --> |
||||
<!-- <button ng-show="ctrl.mode === 'new'" type="button" class="btn gf-form-button btn-success" ng-click="ctrl.add()">Add</button> --> |
||||
<!-- <button ng-show="ctrl.mode === 'edit'" type="button" class="btn btn-success pull-left" ng-click="ctrl.update()">Update</button> --> |
||||
<!-- </div> --> |
||||
<!-- </div> --> |
||||
<!-- </div> --> |
||||
<!-- </div> --> |
||||
<!-- </div> --> |
||||
<h5 class="section-heading">Query</h5> |
||||
<rebuild-on-change property="ctrl.currentDatasource"> |
||||
<plugin-component type="annotations-query-ctrl"> |
||||
</plugin-component> |
||||
</rebuild-on-change> |
||||
|
||||
<div class="gf-form"> |
||||
<div class="gf-form-button-row p-y-0"> |
||||
<button ng-show="ctrl.mode === 'new'" type="button" class="btn gf-form-button btn-success" ng-click="ctrl.add()">Add</button> |
||||
<button ng-show="ctrl.mode === 'edit'" type="button" class="btn btn-success pull-left" ng-click="ctrl.update()">Update</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
Loading…
Reference in new issue