Skip to content

N
nexpie-grafana-theme
Commit d6f9ff34 by Torkel Ödegaard
Options

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

parent a1e39ce2
Showing with 129 additions and 89 deletions
src/app/features/annotations/partials/editor.html
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
<label class="small">Datasource</label> <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> <select 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"> <div class="editor-option text-center">
<label class="small">Icon color</label> <label class="small">Icon color</label>
<spectrum-picker ng-model="currentAnnotation.iconColor"></spectrum-picker> <spectrum-picker ng-model="currentAnnotation.iconColor"></spectrum-picker>
</div> </div>
...@@ -62,7 +62,7 @@ ...@@ -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> <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> </div>
<editor-opt-bool text="Grid line" model="currentAnnotation.showLine"></editor-opt-bool> <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> <label class="small">Line color</label>
<spectrum-picker ng-model="currentAnnotation.lineColor"></spectrum-picker> <spectrum-picker ng-model="currentAnnotation.lineColor"></spectrum-picker>
</div> </div>
......
src/app/features/graphite/partials/query.editor.html
...@@ -7,66 +7,68 @@ ...@@ -7,66 +7,68 @@
ng-init="init()"> ng-init="init()">
<div class="grafana-target-inner"> <div class="grafana-target-inner">
<ul class="grafana-target-controls"> <ul class="grafana-segment-list pull-right">
<li ng-show="parserError"> <li ng-show="parserError" class="grafana-target-segment">
<a bs-tooltip="parserError" style="color: rgb(229, 189, 28)" role="menuitem"> <a bs-tooltip="parserError" style="color: rgb(229, 189, 28)" role="menuitem">
<i class="fa fa-warning"></i> <i class="fa fa-warning"></i>
</a> </a>
</li> </li>
<li> <li class="grafana-target-segment">
<a class="pointer" tabindex="1" ng-click="showTextEditor = !showTextEditor"> <a class="pointer" tabindex="1" ng-click="showTextEditor = !showTextEditor">
<i class="fa fa-pencil"></i> <i class="fa fa-pencil"></i>
</a> </a>
</li> </li>
<li class="dropdown"> <li class="grafana-target-segment">
<a class="pointer dropdown-toggle" <div class="dropdown">
data-toggle="dropdown" <a class="pointer dropdown-toggle"
tabindex="1"> data-toggle="dropdown"
<i class="fa fa-bars"></i> tabindex="1">
</a> <i class="fa fa-bars"></i>
<ul class="dropdown-menu pull-right" role="menu"> </a>
<li role="menuitem"> <ul class="dropdown-menu pull-right" role="menu">
<a tabindex="1" <li role="menuitem">
ng-click="duplicate()"> <a tabindex="1"
Duplicate ng-click="duplicate()">
</a> Duplicate
</li> </a>
<li role="menuitem"> </li>
<a tabindex="1" <li role="menuitem">
ng-click="moveMetricQuery($index, $index-1)"> <a tabindex="1"
Move up ng-click="moveMetricQuery($index, $index-1)">
</a> Move up
</li> </a>
<li role="menuitem"> </li>
<a tabindex="1" <li role="menuitem">
ng-click="moveMetricQuery($index, $index+1)"> <a tabindex="1"
Move down ng-click="moveMetricQuery($index, $index+1)">
</a> Move down
</li> </a>
</ul> </li>
</li> </ul>
<li> </div>
<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)"> </li>
<i class="fa fa-remove"></i> <li class="grafana-target-segment last">
</a> <a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
</li> <i class="fa fa-remove"></i>
</ul> </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"> <li class="grafana-target-segment" style="min-width: 15px; text-align: center">
{{targetLetters[$index]}} {{targetLetters[$index]}}
</li> </li>
<li> <li>
<a class="grafana-target-segment" <a class="grafana-target-segment"
ng-click="target.hide = !target.hide; get_data();" ng-click="target.hide = !target.hide; get_data();"
role="menuitem"> role="menuitem">
<i class="fa fa-eye"></i> <i class="fa fa-eye"></i>
</a> </a>
</li> </li>
</ul> </ul>
<input type="text" <input type="text"
class="grafana-target-text-input span10" class="grafana-target-text-input span10"
ng-model="target.target" ng-model="target.target"
focus-me="showTextEditor" focus-me="showTextEditor"
spellcheck='false' spellcheck='false'
......
src/app/panels/graph/axisEditor.html
<div class="editor-row"> <div class="editor-row">
<div class="section"> <div class="section" style="margin-bottom: 20px">
<div class="grafana-target"> <div class="grafana-target">
<div class="grafana-target-inner"> <div class="grafana-target-inner">
<ul class="grafana-segment-list"> <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> <strong>Left Y</strong>
</li> </li>
<li class="grafana-target-segment"> <li class="grafana-target-segment">
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
&nbsp;&nbsp; Grid Max &nbsp;&nbsp; Grid Max
</li> </li>
<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" empty-to-null ng-model="panel.grid.leftMax"
ng-change="render()" ng-model-onblur> ng-change="render()" ng-model-onblur>
</li> </li>
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
Min Min
</li> </li>
<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" empty-to-null ng-model="panel.grid.leftMin"
ng-change="render()" ng-model-onblur> ng-change="render()" ng-model-onblur>
</li> </li>
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
Label Label
</li> </li>
<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> ng-model="panel.leftYAxisLabel" ng-change="render()" ng-model-onblur>
</li> </li>
</ul> </ul>
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
</div> </div>
<div class="grafana-target-inner"> <div class="grafana-target-inner">
<ul class="grafana-segment-list"> <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> <strong>Right Y</strong>
</li> </li>
<li class="grafana-target-segment"> <li class="grafana-target-segment">
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
&nbsp;&nbsp; Grid Max &nbsp;&nbsp; Grid Max
</li> </li>
<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" empty-to-null ng-model="panel.grid.rightMax"
ng-change="render()" ng-model-onblur> ng-change="render()" ng-model-onblur>
</li> </li>
...@@ -66,7 +66,7 @@ ...@@ -66,7 +66,7 @@
Min Min
</li> </li>
<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" empty-to-null ng-model="panel.grid.rightMin"
ng-change="render()" ng-model-onblur> ng-change="render()" ng-model-onblur>
</li> </li>
...@@ -74,15 +74,20 @@ ...@@ -74,15 +74,20 @@
Label Label
</li> </li>
<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> ng-model="panel.rightYAxisLabel" ng-change="render()" ng-model-onblur>
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="grafana-target-inner"> </div>
<ul class="grafana-segment-list"> </div>
<li class="grafana-target-segment" style="width: 90px">
<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> <strong>Show Axis</strong>
</li> </li>
<li class="grafana-target-segment"> <li class="grafana-target-segment">
...@@ -100,24 +105,17 @@ ...@@ -100,24 +105,17 @@
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</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"> <div class="grafana-target-inner">
<ul class="grafana-segment-list"> <ul class="grafana-segment-list">
<li class="grafana-target-segment" style="width: 90px"> <li class="grafana-target-segment" style="width: 100px">
<strong>Thresholds</strong> <strong>Thresholds</strong>
</li> </li>
<li class="grafana-target-segment"> <li class="grafana-target-segment">
Level 1 Level 1
</li> </li>
<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>
<li class="grafana-target-segment"> <li class="grafana-target-segment">
<spectrum-picker ng-model="panel.grid.threshold1Color" ng-change="render()" ></spectrum-picker> <spectrum-picker ng-model="panel.grid.threshold1Color" ng-change="render()" ></spectrum-picker>
...@@ -126,56 +124,93 @@ ...@@ -126,56 +124,93 @@
Level 2 Level 2
</li> </li>
<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>
<li class="grafana-target-segment"> <li class="grafana-target-segment">
<spectrum-picker ng-model="panel.grid.threshold2Color" ng-change="render()" ></spectrum-picker> <spectrum-picker ng-model="panel.grid.threshold2Color" ng-change="render()" ></spectrum-picker>
</li> </li>
<li class="grafana-target-segment"> <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> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="editor-row" style="margin-top: 20px"> <div class="editor-row">
<div class="section"> <div class="section">
<div class="grafana-target"> <div class="grafana-target">
<div class="grafana-target-inner"> <div class="grafana-target-inner">
<ul class="grafana-segment-list"> <ul class="grafana-segment-list">
<li class="grafana-target-segment" style="width: 90px"> <li class="grafana-target-segment" style="width: 100px">
<strong>Legend</strong> <strong>Legend</strong>
</li> </li>
<li class="grafana-target-segment"> <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>
<li class="grafana-target-segment"> <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>
<li class="grafana-target-segment"> <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>
<li class="grafana-target-segment"> <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>
<li class="grafana-target-segment"> </ul>
Min: <input type="checkbox"> <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>
<li class="grafana-target-segment"> <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>
<li class="grafana-target-segment"> <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>
<li class="grafana-target-segment"> <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>
<li class="grafana-target-segment"> <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> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
......
src/css/less/grafana.less
...@@ -122,7 +122,6 @@ ...@@ -122,7 +122,6 @@
.grafana-segment-list { .grafana-segment-list {
list-style: none; list-style: none;
margin: 0; margin: 0;
margin-right: 90px;
>li { >li {
float: left; float: left;
} }
...@@ -168,6 +167,9 @@ ...@@ -168,6 +167,9 @@
padding: 8px 15px; padding: 8px 15px;
} }
&.last {
border-right: none;
}
} }
.grafana-target-segment-icon { .grafana-target-segment-icon {
...@@ -243,7 +245,7 @@ input[type=text].grafana-target-text-input { ...@@ -243,7 +245,7 @@ input[type=text].grafana-target-text-input {
border-right: 1px solid @grafanaTargetSegmentBorder; 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: none;
border-right: 1px solid @grafanaTargetSegmentBorder; border-right: 1px solid @grafanaTargetSegmentBorder;
margin: 0px; margin: 0px;
...@@ -347,6 +349,7 @@ select.grafana-target-segment-input { ...@@ -347,6 +349,7 @@ select.grafana-target-segment-input {
background: inherit; background: inherit;
border: none; border: none;
color: inherit; color: inherit;
padding: 0;
} }
.sp-replacer:hover, .sp-replacer.sp-active { .sp-replacer:hover, .sp-replacer.sp-active {
......
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