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

More work on new grap axis & grid edit tab, #1331

Browse Source
pull/1341/head
Torkel Ödegaard 11 years ago
parent a1e39ce24d
commit d6f9ff34ce
4 changed files with 129 additions and 89 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. 4
      src/app/features/annotations/partials/editor.html
  2. 98
      src/app/features/graphite/partials/query.editor.html
  3. 109
      src/app/panels/graph/axisEditor.html
  4. 7
      src/css/less/grafana.less

4
src/app/features/annotations/partials/editor.html
Unescape View File

@ -53,7 +53,7 @@
<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">
<div class="editor-option text-center">
<label class="small">Icon color</label>
<spectrum-picker ng-model="currentAnnotation.iconColor"></spectrum-picker>
</div>
@ -62,7 +62,7 @@
<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">
<div class="editor-option text-center">
<label class="small">Line color</label>
<spectrum-picker ng-model="currentAnnotation.lineColor"></spectrum-picker>
</div>

98
src/app/features/graphite/partials/query.editor.html
Unescape View File

@ -7,66 +7,68 @@
ng-init="init()">
<div class="grafana-target-inner">
<ul class="grafana-target-controls">
<li ng-show="parserError">
<ul class="grafana-segment-list pull-right">
<li ng-show="parserError" class="grafana-target-segment">
<a bs-tooltip="parserError" style="color: rgb(229, 189, 28)" role="menuitem">
<i class="fa fa-warning"></i>
</a>
</li>
<li>
<li class="grafana-target-segment">
<a class="pointer" tabindex="1" ng-click="showTextEditor = !showTextEditor">
<i class="fa fa-pencil"></i>
</a>
</li>
<li class="dropdown">
<a class="pointer dropdown-toggle"
data-toggle="dropdown"
tabindex="1">
<i class="fa fa-bars"></i>
</a>
<ul class="dropdown-menu pull-right" role="menu">
<li role="menuitem">
<a tabindex="1"
ng-click="duplicate()">
Duplicate
</a>
</li>
<li role="menuitem">
<a tabindex="1"
ng-click="moveMetricQuery($index, $index-1)">
Move up
</a>
</li>
<li role="menuitem">
<a tabindex="1"
ng-click="moveMetricQuery($index, $index+1)">
Move down
</a>
</li>
</ul>
</li>
<li>
<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
<i class="fa fa-remove"></i>
</a>
</li>
</ul>
<li class="grafana-target-segment">
<div class="dropdown">
<a class="pointer dropdown-toggle"
data-toggle="dropdown"
tabindex="1">
<i class="fa fa-bars"></i>
</a>
<ul class="dropdown-menu pull-right" role="menu">
<li role="menuitem">
<a tabindex="1"
ng-click="duplicate()">
Duplicate
</a>
</li>
<li role="menuitem">
<a tabindex="1"
ng-click="moveMetricQuery($index, $index-1)">
Move up
</a>
</li>
<li role="menuitem">
<a tabindex="1"
ng-click="moveMetricQuery($index, $index+1)">
Move down
</a>
</li>
</ul>
</div>
</li>
<li class="grafana-target-segment last">
<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
<i class="fa fa-remove"></i>
</a>
</li>
</ul>
<ul class="grafana-segment-list">
<ul class="grafana-segment-list">
<li class="grafana-target-segment" style="min-width: 15px; text-align: center">
{{targetLetters[$index]}}
</li>
<li>
<a class="grafana-target-segment"
ng-click="target.hide = !target.hide; get_data();"
role="menuitem">
<i class="fa fa-eye"></i>
</a>
</li>
</ul>
</li>
<li>
<a class="grafana-target-segment"
ng-click="target.hide = !target.hide; get_data();"
role="menuitem">
<i class="fa fa-eye"></i>
</a>
</li>
</ul>
<input type="text"
class="grafana-target-text-input span10"
<input type="text"
class="grafana-target-text-input span10"
ng-model="target.target"
focus-me="showTextEditor"
spellcheck='false'

109
src/app/panels/graph/axisEditor.html
Unescape View File

@ -1,10 +1,10 @@
<div class="editor-row">
<div class="section">
<div class="section" style="margin-bottom: 20px">
<div class="grafana-target">
<div class="grafana-target-inner">
<ul class="grafana-segment-list">
<li class="grafana-target-segment" style="width: 90px">
<li class="grafana-target-segment" style="width: 100px">
<strong>Left Y</strong>
</li>
<li class="grafana-target-segment">
@ -19,7 +19,7 @@
&nbsp;&nbsp; Grid Max
</li>
<li>
<input type="text" class="input-small grafana-target-segment-input" placeholder="auto"
<input type="number" class="input-small grafana-target-segment-input" placeholder="auto"
empty-to-null ng-model="panel.grid.leftMax"
ng-change="render()" ng-model-onblur>
</li>
@ -27,7 +27,7 @@
Min
</li>
<li>
<input type="text" class="input-small grafana-target-segment-input" placeholder="auto"
<input type="number" class="input-small grafana-target-segment-input" placeholder="auto"
empty-to-null ng-model="panel.grid.leftMin"
ng-change="render()" ng-model-onblur>
</li>
@ -35,7 +35,7 @@
Label
</li>
<li>
<input type="text" class="input-small grafana-target-segment-input" placeholder="auto"
<input type="text" class="input-small grafana-target-segment-input"
ng-model="panel.leftYAxisLabel" ng-change="render()" ng-model-onblur>
</li>
</ul>
@ -43,7 +43,7 @@
</div>
<div class="grafana-target-inner">
<ul class="grafana-segment-list">
<li class="grafana-target-segment" style="width: 90px">
<li class="grafana-target-segment" style="width: 100px">
<strong>Right Y</strong>
</li>
<li class="grafana-target-segment">
@ -58,7 +58,7 @@
&nbsp;&nbsp; Grid Max
</li>
<li>
<input type="text" class="input-small grafana-target-segment-input" placeholder="auto"
<input type="number" class="input-small grafana-target-segment-input" placeholder="auto"
empty-to-null ng-model="panel.grid.rightMax"
ng-change="render()" ng-model-onblur>
</li>
@ -66,7 +66,7 @@
Min
</li>
<li>
<input type="text" class="input-small grafana-target-segment-input" placeholder="auto"
<input type="number" class="input-small grafana-target-segment-input" placeholder="auto"
empty-to-null ng-model="panel.grid.rightMin"
ng-change="render()" ng-model-onblur>
</li>
@ -74,15 +74,20 @@
Label
</li>
<li>
<input type="text" class="input-small grafana-target-segment-input" placeholder="auto"
<input type="text" class="input-small grafana-target-segment-input"
ng-model="panel.rightYAxisLabel" ng-change="render()" ng-model-onblur>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="grafana-target-inner">
<ul class="grafana-segment-list">
<li class="grafana-target-segment" style="width: 90px">
</div>
</div>
<div class="section" style="margin-bottom: 20px">
<div class="grafana-target">
<div class="grafana-target-inner">
<ul class="grafana-segment-list">
<li class="grafana-target-segment" style="width: 100px">
<strong>Show Axis</strong>
</li>
<li class="grafana-target-segment">
@ -100,24 +105,17 @@
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<div class="editor-row" style="margin-top: 20px">
<div class="section">
<div class="grafana-target">
<div class="grafana-target-inner">
<ul class="grafana-segment-list">
<li class="grafana-target-segment" style="width: 90px">
<li class="grafana-target-segment" style="width: 100px">
<strong>Thresholds</strong>
</li>
<li class="grafana-target-segment">
Level 1
</li>
<li>
<input type="text" class="input-small grafana-target-segment-input">
<input type="number" class="input-small grafana-target-segment-input"
ng-model="panel.grid.threshold1" ng-change="render()" ng-model-onblur>
</li>
<li class="grafana-target-segment">
<spectrum-picker ng-model="panel.grid.threshold1Color" ng-change="render()" ></spectrum-picker>
@ -126,56 +124,93 @@
Level 2
</li>
<li>
<input type="text" class="input-small grafana-target-segment-input">
<input type="number" class="input-small grafana-target-segment-input"
ng-model="panel.grid.threshold2" ng-change="render()" ng-model-onblur>
</li>
<li class="grafana-target-segment">
<spectrum-picker ng-model="panel.grid.threshold2Color" ng-change="render()" ></spectrum-picker>
</li>
<li class="grafana-target-segment">
Line mode
Line mode&nbsp;
<input class="cr1" id="panel.grid.thresholdLine" type="checkbox"
ng-model="panel.grid.thresholdLine" ng-checked="panel.grid.thresholdLine" ng-change="render()">
<label for="panel.grid.thresholdLine" class="cr1"></label>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<div class="editor-row" style="margin-top: 20px">
<div class="editor-row">
<div class="section">
<div class="grafana-target">
<div class="grafana-target-inner">
<ul class="grafana-segment-list">
<li class="grafana-target-segment" style="width: 90px">
<li class="grafana-target-segment" style="width: 100px">
<strong>Legend</strong>
</li>
<li class="grafana-target-segment">
Show: <input type="checkbox">
Show&nbsp;
<input class="cr1" id="panel.legend.show" type="checkbox"
ng-model="panel.legend.show" ng-checked="panel.legend.show" ng-change="render()">
<label for="panel.legend.show" class="cr1"></label>
</li>
<li class="grafana-target-segment">
Table: <input type="checkbox">
Table&nbsp;
<input class="cr1" id="panel.legend.alignAsTable" type="checkbox"
ng-model="panel.legend.alignAsTable" ng-checked="panel.legend.alignAsTable" ng-change="render()">
<label for="panel.legend.alignAsTable" class="cr1"></label>
</li>
<li class="grafana-target-segment">
Right side: <input type="checkbox">
Right side&nbsp;
<input class="cr1" id="panel.legend.rightSide" type="checkbox"
ng-model="panel.legend.rightSide" ng-checked="panel.legend.rightSide" ng-change="render()">
<label for="panel.legend.rightSide" class="cr1"></label>
</li>
<li class="grafana-target-segment">
Hide empty: <input type="checkbox">
Hide empty&nbsp;
<input class="cr1" id="panel.legend.hideEmpty" type="checkbox"
ng-model="panel.legend.hideEmpty" ng-checked="panel.legend.hideEmpty" ng-change="render()">
<label for="panel.legend.hideEmpty" class="cr1"></label>
</li>
<li class="grafana-target-segment">
Min: <input type="checkbox">
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="section">
<div class="grafana-target">
<div class="grafana-target-inner">
<ul class="grafana-segment-list">
<li class="grafana-target-segment" style="width: 100px">
<strong>Legend values</strong>
</li>
<li class="grafana-target-segment">
Max: <input type="checkbox">
Min&nbsp;
<input class="cr1" id="panel.legend.min" type="checkbox"
ng-model="panel.legend.min" ng-checked="panel.legend.min" ng-change="render()">
<label for="panel.legend.min" class="cr1"></label>
</li>
<li class="grafana-target-segment">
Avg: <input type="checkbox">
Max&nbsp;
<input class="cr1" id="panel.legend.max" type="checkbox"
ng-model="panel.legend.max" ng-checked="panel.legend.max" ng-change="render()">
<label for="panel.legend.max" class="cr1"></label>
</li>
<li class="grafana-target-segment">
Total: <input type="checkbox">
Avg&nbsp;
<input class="cr1" id="panel.legend.avg" type="checkbox"
ng-model="panel.legend.avg" ng-checked="panel.legend.avg" ng-change="render()">
<label for="panel.legend.avg" class="cr1"></label>
</li>
<li class="grafana-target-segment">
Current: <input type="checkbox">
Current&nbsp;
<input class="cr1" id="panel.legend.current" type="checkbox"
ng-model="panel.legend.current" ng-checked="panel.legend.current" ng-change="render()">
<label for="panel.legend.total" class="cr1"></label>
</li>
</ul>
<div class="clearfix"></div>

7
src/css/less/grafana.less
Unescape View File

@ -122,7 +122,6 @@
.grafana-segment-list {
list-style: none;
margin: 0;
margin-right: 90px;
>li {
float: left;
}
@ -168,6 +167,9 @@
padding: 8px 15px;
}
&.last {
border-right: none;
}
}
.grafana-target-segment-icon {
@ -243,7 +245,7 @@ input[type=text].grafana-target-text-input {
border-right: 1px solid @grafanaTargetSegmentBorder;
}
input[type=text].grafana-target-segment-input {
[type=text].grafana-target-segment-input, [type=number].grafana-target-segment-input {
border: none;
border-right: 1px solid @grafanaTargetSegmentBorder;
margin: 0px;
@ -347,6 +349,7 @@ select.grafana-target-segment-input {
background: inherit;
border: none;
color: inherit;
padding: 0;
}
.sp-replacer:hover, .sp-replacer.sp-active {

Write Preview
Loading…
Cancel
Save