mirror of
https://github.com/grafana/grafana.git
synced 2025-09-22 11:13:07 +08:00
@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:
@ -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() -> 1494410783152415214
|
||||
- $__unixEpochNanoTo() -> 1494497183142514872
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -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
|
||||
<i class="fa fa-caret-down" ng-show="ctrl.showTimescaleDBHelp"></i>
|
||||
<i class="fa fa-caret-right" ng-hide="ctrl.showTimescaleDBHelp"> </i>
|
||||
<icon name="'angle-down'" ng-show="ctrl.showTimescaleDBHelp"></icon>
|
||||
<icon name="'angle-right'" ng-hide="ctrl.showTimescaleDBHelp"> </icon>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
@ -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">
|
||||
|
@ -197,7 +197,7 @@ export class PostgresQueryCtrl extends QueryCtrl {
|
||||
appEvents.emit(CoreEvents.showConfirmModal, {
|
||||
title: 'Warning',
|
||||
text2: 'Switching to query builder may overwrite your raw SQL.',
|
||||
icon: 'fa-exclamation',
|
||||
icon: 'exclamation-triangle',
|
||||
yesText: 'Switch',
|
||||
onConfirm: () => {
|
||||
this.target.rawQuery = !this.target.rawQuery;
|
||||
|
Reference in New Issue
Block a user