@grafana/ui: Replace various icons using Icon component (#23442)

* Replace icons in dashboard and settings

* Replace icons in alerting

* Update batch of icons

* Implement icons accross various files

* Style updates

* Search: Fix recent and starred icons

* Update styling and details

* Replace new icon created by unicons

* Fix e2e test, styling

* Minor styling updates

Co-authored-by: Clarity-89 <homes89@ukr.net>
This commit is contained in:
Ivana Huckova
2020-04-12 22:20:02 +02:00
committed by GitHub
parent 0aa95d97c8
commit 1c58202b26
193 changed files with 1256 additions and 824 deletions

View File

@ -1,23 +1,32 @@
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form gf-form--grow">
<textarea rows="10" class="gf-form-input" ng-model="ctrl.annotation.rawQuery" spellcheck="false" placeholder="query expression" data-min-length=0 data-items=100 ng-model-onblur ng-change="ctrl.panelCtrl.refresh()"></textarea>
</div>
</div>
<div class="gf-form gf-form--grow">
<textarea
rows="10"
class="gf-form-input"
ng-model="ctrl.annotation.rawQuery"
spellcheck="false"
placeholder="query expression"
data-min-length="0"
data-items="100"
ng-model-onblur
ng-change="ctrl.panelCtrl.refresh()"
></textarea>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
Show Help
<i class="fa fa-caret-down" ng-show="ctrl.showHelp"></i>
<i class="fa fa-caret-right" ng-hide="ctrl.showHelp"></i>
<icon name="'angle-down'" ng-show="ctrl.showHelp"></icon>
<icon name="'angle-right'" ng-hide="ctrl.showHelp"></icon>
</label>
</div>
</div>
</div>
<div class="gf-form" ng-show="ctrl.showHelp">
<pre class="gf-form-pre alert alert-info"><h6>Annotation Query Format</h6>
<div class="gf-form" ng-show="ctrl.showHelp">
<pre class="gf-form-pre alert alert-info"><h6>Annotation Query Format</h6>
An annotation is an event that is overlaid on top of graphs. The query can have up to four columns per row, the time column is mandatory. Annotation rendering is expensive so it is important to limit the number of rows returned.
- column with alias: <b>time</b> for the annotation event time. Use epoch time or any native date data type.
@ -41,5 +50,5 @@ Or build your own conditionals using these macros which just return the values:
- $__unixEpochNanoFrom() -&gt; 1494410783152415214
- $__unixEpochNanoTo() -&gt; 1494497183142514872
</pre>
</div>
</div>
</div>

View File

@ -111,8 +111,8 @@
<gf-form-switch class="gf-form" label="TimescaleDB" label-class="width-9" checked="ctrl.current.jsonData.timescaledb" switch-class="max-width-6"></gf-form-switch>
<label class="gf-form-label query-keyword pointer" ng-click="ctrl.toggleTimescaleDBHelp()">
Help&nbsp;
<i class="fa fa-caret-down" ng-show="ctrl.showTimescaleDBHelp"></i>
<i class="fa fa-caret-right" ng-hide="ctrl.showTimescaleDBHelp">&nbsp;</i>
<icon name="'angle-down'" ng-show="ctrl.showTimescaleDBHelp"></icon>
<icon name="'angle-right'" ng-hide="ctrl.showTimescaleDBHelp">&nbsp;</icon>
</label>
</div>

View File

@ -116,15 +116,15 @@
<div class="gf-form">
<label class="gf-form-label query-keyword pointer" ng-click="ctrl.showHelp = !ctrl.showHelp">
Show Help
<i class="fa fa-caret-down" ng-show="ctrl.showHelp"></i>
<i class="fa fa-caret-right" ng-hide="ctrl.showHelp"></i>
<icon name="'angle-caret-down'" ng-show="ctrl.showHelp"></icon>
<icon name="'angle-caret-right'" ng-hide="ctrl.showHelp"></icon>
</label>
</div>
<div class="gf-form" ng-show="ctrl.lastQueryMeta">
<label class="gf-form-label query-keyword pointer" ng-click="ctrl.showLastQuerySQL = !ctrl.showLastQuerySQL">
Generated SQL
<i class="fa fa-caret-down" ng-show="ctrl.showLastQuerySQL"></i>
<i class="fa fa-caret-right" ng-hide="ctrl.showLastQuerySQL"></i>
<icon name="'angle-caret-down'" ng-show="ctrl.showLastQuerySQL"></icon>
<icon name="'angle-caret-right'" ng-hide="ctrl.showLastQuerySQL"></icon>
</label>
</div>
<div class="gf-form gf-form--grow">