opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-08-06 20:59:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

380
public/app/plugins/datasource/elasticsearch/partials/bucket_agg.html
View File

@ -1,169 +1,239 @@
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">
<span ng-show="isFirst">Group by</span>
<span ng-hide="isFirst">Then by</span>
</label>
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">
<span ng-show="isFirst">Group by</span>
<span ng-hide="isFirst">Then by</span>
</label>
<gf-form-dropdown model="agg.type"
lookup-text="true"
get-options="getBucketAggTypes()"
on-change="onTypeChanged()"
allow-custom="false"
label-mode="true"
css-class="width-10">
</gf-form-dropdown>
<gf-form-dropdown ng-if="agg.field"
model="agg.field"
get-options="getFieldsInternal()"
on-change="onChange()"
allow-custom="false"
label-mode="true"
css-class="width-12">
</gf-form-dropdown>
</div>
<gf-form-dropdown
model="agg.type"
lookup-text="true"
get-options="getBucketAggTypes()"
on-change="onTypeChanged()"
allow-custom="false"
label-mode="true"
css-class="width-10"
>
</gf-form-dropdown>
<gf-form-dropdown
ng-if="agg.field"
model="agg.field"
get-options="getFieldsInternal()"
on-change="onChange()"
allow-custom="false"
label-mode="true"
css-class="width-12"
>
</gf-form-dropdown>
</div>
<div class="gf-form gf-form--grow">
<label class="gf-form-label gf-form-label--grow">
<a ng-click="toggleOptions()">
<i class="fa fa-caret-down" ng-show="showOptions"></i>
<i class="fa fa-caret-right" ng-hide="showOptions"></i>
{{settingsLinkText}}
</a>
</label>
</div>
<div class="gf-form gf-form--grow">
<label class="gf-form-label gf-form-label--grow">
<a ng-click="toggleOptions()">
<icon name="'angle-down'" ng-show="showOptions"></icon>
<icon name="'angle-right'" ng-hide="showOptions"></icon>
{{settingsLinkText}}
</a>
</label>
</div>
<div class="gf-form">
<label class="gf-form-label" ng-if="isFirst">
<a class="pointer" ng-click="addBucketAgg()"><i class="fa fa-plus"></i></a>
</label>
<label class="gf-form-label" ng-if="bucketAggCount > 1">
<a class="pointer" ng-click="removeBucketAgg()"><i class="fa fa-minus"></i></a>
</label>
</div>
<div class="gf-form">
<label class="gf-form-label" ng-if="isFirst">
<a class="pointer" ng-click="addBucketAgg()"><icon name="'plus'"></icon></a>
</label>
<label class="gf-form-label" ng-if="bucketAggCount > 1">
<a class="pointer" ng-click="removeBucketAgg()"><icon name="'minus'"></icon></a>
</label>
</div>
</div>
<div class="gf-form-group" ng-if="showOptions">
<div ng-if="agg.type === 'date_histogram'">
<div class="gf-form offset-width-7">
<label class="gf-form-label width-10">Interval</label>
<gf-form-dropdown model="agg.settings.interval"
get-options="getIntervalOptions()"
on-change="onChangeInternal()"
allow-custom="true"
label-mode="true"
css-class="width-12">
</gf-form-dropdown>
</div>
<div ng-if="agg.type === 'date_histogram'">
<div class="gf-form offset-width-7">
<label class="gf-form-label width-10">Interval</label>
<gf-form-dropdown
model="agg.settings.interval"
get-options="getIntervalOptions()"
on-change="onChangeInternal()"
allow-custom="true"
label-mode="true"
css-class="width-12"
>
</gf-form-dropdown>
</div>
<div class="gf-form offset-width-7">
<label class="gf-form-label width-10">Min Doc Count</label>
<input type="number" class="gf-form-input max-width-12" ng-model="agg.settings.min_doc_count" ng-blur="onChangeInternal()">
</div>
<div class="gf-form offset-width-7">
<label class="gf-form-label width-10">Min Doc Count</label>
<input
type="number"
class="gf-form-input max-width-12"
ng-model="agg.settings.min_doc_count"
ng-blur="onChangeInternal()"
/>
</div>
<div class="gf-form offset-width-7">
<label class="gf-form-label width-10">
Trim edges
<info-popover mode="right-normal">
Trim the edges on the timeseries datapoints
</info-popover>
</label>
<input class="gf-form-input max-width-12" type="number" ng-model="agg.settings.trimEdges" ng-change="onChangeInternal()">
</div>
<div class="gf-form offset-width-7">
<label class="gf-form-label width-10">
Offset
<info-popover mode="right-normal">
Change the start value of each bucket by the specified positive (+) or negative offset (-) duration, such as 1h for an hour, or 1d for a day
</info-popover>
</label>
<input class="gf-form-input max-width-12" type="text" ng-model="agg.settings.offset" ng-change="onChangeInternal()">
</div>
<div class="gf-form offset-width-7">
<label class="gf-form-label width-10">
Trim edges
<info-popover mode="right-normal">
Trim the edges on the timeseries datapoints
</info-popover>
</label>
<input
class="gf-form-input max-width-12"
type="number"
ng-model="agg.settings.trimEdges"
ng-change="onChangeInternal()"
/>
</div>
<div class="gf-form offset-width-7">
<label class="gf-form-label width-10">
Offset
<info-popover mode="right-normal">
Change the start value of each bucket by the specified positive (+) or negative offset (-) duration, such as
1h for an hour, or 1d for a day
</info-popover>
</label>
<input
class="gf-form-input max-width-12"
type="text"
ng-model="agg.settings.offset"
ng-change="onChangeInternal()"
/>
</div>
</div>
</div>
<div ng-if="agg.type === 'histogram'">
<div class="gf-form offset-width-7">
<label class="gf-form-label width-10">Interval</label>
<input
type="number"
class="gf-form-input max-width-12"
ng-model="agg.settings.interval"
ng-blur="onChangeInternal()"
/>
</div>
<div class="gf-form offset-width-7">
<label class="gf-form-label width-10">Min Doc Count</label>
<input
type="number"
class="gf-form-input max-width-12"
ng-model="agg.settings.min_doc_count"
ng-blur="onChangeInternal()"
/>
</div>
</div>
<div ng-if="agg.type === 'histogram'">
<div class="gf-form offset-width-7">
<label class="gf-form-label width-10">Interval</label>
<input type="number" class="gf-form-input max-width-12" ng-model="agg.settings.interval" ng-blur="onChangeInternal()">
</div>
<div class="gf-form offset-width-7">
<label class="gf-form-label width-10">Min Doc Count</label>
<input type="number" class="gf-form-input max-width-12" ng-model="agg.settings.min_doc_count" ng-blur="onChangeInternal()">
</div>
</div>
<div ng-if="agg.type === 'terms'">
<div class="gf-form offset-width-7">
<label class="gf-form-label width-10">Order</label>
<gf-form-dropdown
model="agg.settings.order"
lookup-text="true"
get-options="getOrderOptions()"
on-change="onChangeInternal()"
label-mode="true"
css-class="width-12"
>
</gf-form-dropdown>
</div>
<div class="gf-form offset-width-7">
<label class="gf-form-label width-10">Size</label>
<gf-form-dropdown
model="agg.settings.size"
lookup-text="true"
get-options="getSizeOptions()"
on-change="onChangeInternal()"
label-mode="true"
allow-custom="true"
css-class="width-12"
>
</gf-form-dropdown>
</div>
<div class="gf-form offset-width-7">
<label class="gf-form-label width-10">Min Doc Count</label>
<input
type="number"
class="gf-form-input max-width-12"
ng-model="agg.settings.min_doc_count"
ng-blur="onChangeInternal()"
/>
</div>
<div class="gf-form offset-width-7">
<label class="gf-form-label width-10">Order By</label>
<gf-form-dropdown
model="agg.settings.orderBy"
lookup-text="true"
get-options="getOrderByOptions()"
on-change="onChangeInternal()"
label-mode="true"
css-class="width-12"
>
</gf-form-dropdown>
</div>
<div class="gf-form offset-width-7">
<label class="gf-form-label width-10">
Missing
<info-popover mode="right-normal">
The missing parameter defines how documents that are missing a value should be treated. By default they will
be ignored but it is also possible to treat them as if they had a value
</info-popover>
</label>
<input
type="text"
class="gf-form-input max-width-12"
empty-to-null
ng-model="agg.settings.missing"
ng-blur="onChangeInternal()"
spellcheck="false"
/>
</div>
</div>
<div ng-if="agg.type === 'terms'">
<div class="gf-form offset-width-7">
<label class="gf-form-label width-10">Order</label>
<gf-form-dropdown model="agg.settings.order"
lookup-text="true"
get-options="getOrderOptions()"
on-change="onChangeInternal()"
label-mode="true"
css-class="width-12">
</gf-form-dropdown>
</div>
<div class="gf-form offset-width-7">
<label class="gf-form-label width-10">Size</label>
<gf-form-dropdown model="agg.settings.size"
lookup-text="true"
get-options="getSizeOptions()"
on-change="onChangeInternal()"
label-mode="true"
allow-custom="true"
css-class="width-12">
</gf-form-dropdown>
</div>
<div class="gf-form offset-width-7">
<label class="gf-form-label width-10">Min Doc Count</label>
<input type="number" class="gf-form-input max-width-12" ng-model="agg.settings.min_doc_count" ng-blur="onChangeInternal()">
</div>
<div class="gf-form offset-width-7">
<label class="gf-form-label width-10">Order By</label>
<gf-form-dropdown model="agg.settings.orderBy"
lookup-text="true"
get-options="getOrderByOptions()"
on-change="onChangeInternal()"
label-mode="true"
css-class="width-12">
</gf-form-dropdown>
</div>
<div class="gf-form offset-width-7">
<label class="gf-form-label width-10">
Missing
<info-popover mode="right-normal">
The missing parameter defines how documents that are missing a value should be treated. By default they will be ignored but it is also possible to treat them as if they had a value
</info-popover>
</label>
<input type="text" class="gf-form-input max-width-12" empty-to-null ng-model="agg.settings.missing" ng-blur="onChangeInternal()" spellcheck='false'>
</div>
</div>
<div ng-if="agg.type === 'filters'">
<div class="gf-form-inline offset-width-7" ng-repeat="filter in agg.settings.filters">
<div class="gf-form">
<label class="gf-form-label width-10">Query {{$index + 1}}</label>
<input type="text" class="gf-form-input max-width-12" ng-model="filter.query" spellcheck='false' placeholder="Lucene query" ng-blur="onChangeInternal()">
<label class="gf-form-label width-10">Label {{$index + 1}}</label>
<input type="text" class="gf-form-input max-width-12" ng-model="filter.label" spellcheck='false' placeholder="Label" ng-blur="onChangeInternal()">
</div>
<div class="gf-form">
<label class="gf-form-label" ng-if="$first">
<a class="pointer" ng-click="addFiltersQuery()"><i class="fa fa-plus"></i></a>
</label>
<label class="gf-form-label" ng-if="!$first">
<a class="pointer" ng-click="removeFiltersQuery(filter)"><i class="fa fa-minus"></i></a>
</label>
</div>
</div>
</div>
<div ng-if="agg.type === 'geohash_grid'">
<div class="gf-form offset-width-7">
<label class="gf-form-label width-10">Precision</label>
<input type="number" class="gf-form-input max-width-12" ng-model="agg.settings.precision" spellcheck='false' placeholder="3" ng-blur="onChangeInternal()">
</div>
</div>
<div ng-if="agg.type === 'filters'">
<div class="gf-form-inline offset-width-7" ng-repeat="filter in agg.settings.filters">
<div class="gf-form">
<label class="gf-form-label width-10">Query {{$index + 1}}</label>
<input
type="text"
class="gf-form-input max-width-12"
ng-model="filter.query"
spellcheck="false"
placeholder="Lucene query"
ng-blur="onChangeInternal()"
/>
<label class="gf-form-label width-10">Label {{$index + 1}}</label>
<input
type="text"
class="gf-form-input max-width-12"
ng-model="filter.label"
spellcheck="false"
placeholder="Label"
ng-blur="onChangeInternal()"
/>
</div>
<div class="gf-form">
<label class="gf-form-label" ng-if="$first">
<a class="pointer" ng-click="addFiltersQuery()"><icon class="'plus-circle'"></icon></a>
</label>
<label class="gf-form-label" ng-if="!$first">
<a class="pointer" ng-click="removeFiltersQuery(filter)"><icon class="'minus-circle'"></icon></a>
</label>
</div>
</div>
</div>
<div ng-if="agg.type === 'geohash_grid'">
<div class="gf-form offset-width-7">
<label class="gf-form-label width-10">Precision</label>
<input
type="number"
class="gf-form-input max-width-12"
ng-model="agg.settings.precision"
spellcheck="false"
placeholder="3"
ng-blur="onChangeInternal()"
/>
</div>
</div>
</div>

18
public/app/plugins/datasource/elasticsearch/partials/metric_agg.html
View File

@ -3,9 +3,9 @@
<label class="gf-form-label query-keyword width-7">
Metric
&nbsp;
<a ng-click="toggleShowMetric()" bs-tooltip="'Click to toggle show / hide metric'">
<i class="fa fa-eye" ng-hide="agg.hide"></i>
<i class="fa fa-eye-slash" ng-show="agg.hide"></i>
<a ng-click="toggleShowMetric()" bs-tooltip="'Click to toggle show / hide metric'" style="margin-top: 2px;">
<icon name="'eye'" size="'sm'" ng-hide="agg.hide"></icon>
<icon name="'eye-slash'" size="'sm'" ng-show="agg.hide"></icon>
</a>
</label>
</div>
@ -19,8 +19,8 @@
<div class="gf-form gf-form--grow" ng-if="aggDef.isPipelineAgg && aggDef.supportsMultipleBucketPaths">
<label class="gf-form-label gf-form-label--grow">
<a ng-click="toggleVariables()">
<i class="fa fa-caret-down" ng-show="showVariables"></i>
<i class="fa fa-caret-right" ng-hide="showVariables"></i>
<icon name="'angle-down'" ng-show="showVariables"></icon>
<icon name="'angle-right'" ng-hide="showVariables"></icon>
{{variablesLinkText}}
</a>
</label>
@ -29,8 +29,8 @@
<div class="gf-form gf-form--grow">
<label class="gf-form-label gf-form-label--grow">
<a ng-click="toggleOptions()" ng-if="settingsLinkText">
<i class="fa fa-caret-down" ng-show="showOptions"></i>
<i class="fa fa-caret-right" ng-hide="showOptions"></i>
<icon name="'angle-down'" ng-show="showOptions"></icon>
<icon name="'angle-right'" ng-hide="showOptions"></icon>
{{settingsLinkText}}
</a>
</label>
@ -38,10 +38,10 @@
<div class="gf-form">
<label class="gf-form-label" ng-if="isFirst">
<a class="pointer" ng-click="addMetricAgg()"><i class="fa fa-plus"></i></a>
<a class="pointer" ng-click="addMetricAgg()"><icon name="'plus-circle'"></icon></a>
</label>
<label class="gf-form-label" ng-if="!isSingle">
<a class="pointer" ng-click="removeMetricAgg()"><i class="fa fa-minus"></i></a>
<a class="pointer" ng-click="removeMetricAgg()"><icon name="'minus-circle'"></icon></a>
</label>
</div>
</div>

40
public/app/plugins/datasource/elasticsearch/partials/pipeline_variables.html
View File

@ -1,20 +1,46 @@
<div ng-repeat="var in variables">
<div class="gf-form offset-width-7" ng-if="$index === 0">
<label class="gf-form-label width-10">Variables</label>
<input type="text" class="gf-form-input max-width-12" ng-model="var.name" placeholder="Variable name" ng-blur="onChangeInternal()" spellcheck='false'>
<metric-segment-model property="var.pipelineAgg" options="options" on-change="onChangeInternal()" custom="false" css-class="width-12"></metric-segment-model>
<input
type="text"
class="gf-form-input max-width-12"
ng-model="var.name"
placeholder="Variable name"
ng-blur="onChangeInternal()"
spellcheck="false"
/>
<metric-segment-model
property="var.pipelineAgg"
options="options"
on-change="onChangeInternal()"
custom="false"
css-class="width-12"
></metric-segment-model>
<label class="gf-form-label">
<a class="pointer" ng-click="remove($index)"><i class="fa fa-minus"></i></a>
<a class="pointer" ng-click="remove($index)"><icon name="'minus-circle'"></icon></a>
</label>
<label class="gf-form-label">
<a class="pointer" ng-click="add()"><i class="fa fa-plus"></i></a>
<a class="pointer" ng-click="add()"><icon name="'plus-circle'"></icon></a>
</label>
</div>
<div class="gf-form offset-width-17" ng-if="$index !== 0">
<input type="text" class="gf-form-input max-width-12" ng-model="var.name" placeholder="Variable name" ng-blur="onChangeInternal()" spellcheck='false'>
<metric-segment-model property="var.pipelineAgg" options="options" on-change="onChangeInternal()" custom="false" css-class="width-12"></metric-segment-model>
<input
type="text"
class="gf-form-input max-width-12"
ng-model="var.name"
placeholder="Variable name"
ng-blur="onChangeInternal()"
spellcheck="false"
/>
<metric-segment-model
property="var.pipelineAgg"
options="options"
on-change="onChangeInternal()"
custom="false"
css-class="width-12"
></metric-segment-model>
<label class="gf-form-label">
<a class="pointer" ng-click="remove($index)"><i class="fa fa-minus"></i></a>
<a class="pointer" ng-click="remove($index)"><icon name="'minus-circle'"></icon></a>
</label>
</div>
</div>