IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06: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

4
public/app/plugins/datasource/cloudwatch/components/Dimensions.test.tsx
View File

@@ -27,7 +27,7 @@ describe('Dimensions', () => {
);
expect(wrapper.html()).toEqual(
`<div class="gf-form"><a class="gf-form-label query-part"><i class="fa fa-plus"></i></a></div>`
`<div class=\"gf-form\"><a class=\"gf-form-label query-part\"><div class=\"css-1cvxpvr\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"css-sr6nr\"><path d=\"M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Zm4-9H13V8a1,1,0,0,0-2,0v3H8a1,1,0,0,0,0,2h3v3a1,1,0,0,0,2,0V13h3a1,1,0,0,0,0-2Z\"></path></svg></div></a></div>`
);
});
});
@@ -43,7 +43,7 @@ describe('Dimensions', () => {
/>
);
expect(wrapper.html()).toEqual(
`<div class="gf-form"><a class="gf-form-label query-part">somekey</a></div><label class="gf-form-label query-segment-operator">=</label><div class="gf-form"><a class="gf-form-label query-part">somevalue</a></div><div class="gf-form"><a class="gf-form-label query-part"><i class="fa fa-plus"></i></a></div>`
`<div class=\"gf-form\"><a class=\"gf-form-label query-part\">somekey</a></div><label class=\"gf-form-label query-segment-operator\">=</label><div class=\"gf-form\"><a class=\"gf-form-label query-part\">somevalue</a></div><div class=\"gf-form\"><a class=\"gf-form-label query-part\"><div class=\"css-1cvxpvr\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"css-sr6nr\"><path d=\"M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Zm4-9H13V8a1,1,0,0,0-2,0v3H8a1,1,0,0,0,0,2h3v3a1,1,0,0,0,2,0V13h3a1,1,0,0,0,0-2Z\"></path></svg></div></a></div>`
);
});
});

4
public/app/plugins/datasource/cloudwatch/components/Dimensions.tsx
View File

@@ -1,7 +1,7 @@
import React, { FunctionComponent, Fragment, useState, useEffect } from 'react';
import isEqual from 'lodash/isEqual';
import { SelectableValue } from '@grafana/data';
import { SegmentAsync } from '@grafana/ui';
import { SegmentAsync, Icon } from '@grafana/ui';
import { SelectableStrings } from '../types';
export interface Props {
@@ -69,7 +69,7 @@ export const Dimensions: FunctionComponent<Props> = ({ dimensions, loadValues, l
allowCustomValue
Component={
<a className="gf-form-label query-part">
<i className="fa fa-plus" />
<Icon name="plus-circle" />
</a>
}
loadOptions={() => loadKeys().then(excludeUsedKeys)}

5
public/app/plugins/datasource/cloudwatch/components/QueryEditor.tsx
View File

@@ -1,6 +1,6 @@
import React, { PureComponent, ChangeEvent } from 'react';
import { ExploreQueryFieldProps } from '@grafana/data';
import { LegacyForms, ValidationEvents, EventsWithValidation } from '@grafana/ui';
import { LegacyForms, ValidationEvents, EventsWithValidation, Icon } from '@grafana/ui';
const { Input, Switch } = LegacyForms;
import isEmpty from 'lodash/isEmpty';
import { CloudWatchQuery } from '../types';
@@ -139,8 +139,7 @@ export class QueryEditor extends PureComponent<Props, State> {
})
}
>
<i className={`fa fa-caret-${showMeta ? 'down' : 'right'}`} /> {showMeta ? 'Hide' : 'Show'} Query
Preview
<Icon name={showMeta ? 'angle-down' : 'angle-right'} /> {showMeta ? 'Hide' : 'Show'} Query Preview
</a>
</label>
</div>

4
public/app/plugins/datasource/cloudwatch/components/Stats.tsx
View File

@@ -1,7 +1,7 @@
import React, { FunctionComponent } from 'react';
import { SelectableStrings } from '../types';
import { SelectableValue } from '@grafana/data';
import { Segment } from '@grafana/ui';
import { Segment, Icon } from '@grafana/ui';
export interface Props {
values: string[];
@@ -34,7 +34,7 @@ export const Stats: FunctionComponent<Props> = ({ stats, values, onChange, varia
<Segment
Component={
<a className="gf-form-label query-part">
<i className="fa fa-plus" />
<Icon name="plus-circle" />
</a>
}
allowCustomValue

19
public/app/plugins/datasource/cloudwatch/components/__snapshots__/Stats.test.tsx.snap
View File

@@ -29,9 +29,22 @@ Array [
<a
className="gf-form-label query-part"
>
<i
className="fa fa-plus"
/>
<div
className="css-1cvxpvr"
>
<svg
className="css-sr6nr"
fill="currentColor"
height={16}
viewBox="0 0 24 24"
width={16}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Zm4-9H13V8a1,1,0,0,0-2,0v3H8a1,1,0,0,0,0,2h3v3a1,1,0,0,0,2,0V13h3a1,1,0,0,0,0-2Z"
/>
</svg>
</div>
</a>
</div>,
]

4
public/app/plugins/datasource/dashboard/DashboardQueryEditor.tsx
View File

@@ -2,7 +2,7 @@
import React, { PureComponent } from 'react';
// Types
import { LegacyForms } from '@grafana/ui';
import { LegacyForms, Icon } from '@grafana/ui';
import { DataQuery, DataQueryError, PanelData, DataFrame, SelectableValue } from '@grafana/data';
import { DashboardQuery } from './types';
import config from 'app/core/config';
@@ -118,7 +118,7 @@ export class DashboardQueryEditor extends PureComponent<Props, State> {
<a href={editURL}>
{target.query}
&nbsp;
<i className="fa fa-external-link" />
<Icon name="external-link-alt" />
</a>
</div>
</div>

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>

40
public/app/plugins/datasource/grafana-azure-monitor-datasource/partials/annotations.editor.html
View File

@@ -2,13 +2,22 @@
<div class="gf-form">
<label class="gf-form-label query-keyword width-9">Service</label>
<div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
<select class="gf-form-input service-dropdown" ng-model="ctrl.annotation.queryType" ng-options="f as f for f in ['Application Insights', 'Azure Monitor', 'Azure Log Analytics']"></select>
<select
class="gf-form-input service-dropdown"
ng-model="ctrl.annotation.queryType"
ng-options="f as f for f in ['Application Insights', 'Azure Monitor', 'Azure Log Analytics']"
></select>
</div>
</div>
<div class="gf-form" ng-show="ctrl.annotation.queryType === 'Azure Log Analytics'">
<label class="gf-form-label query-keyword width-9">Subscription</label>
<div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
<select class="gf-form-input service-dropdown" ng-model="ctrl.annotation.subscription" ng-options="f.value as f.text for f in ctrl.subscriptions" ng-change="ctrl.onSubscriptionChange()"></select>
<select
class="gf-form-input service-dropdown"
ng-model="ctrl.annotation.subscription"
ng-options="f.value as f.text for f in ctrl.subscriptions"
ng-change="ctrl.onSubscriptionChange()"
></select>
</div>
</div>
<div ng-show="ctrl.annotation.queryType === 'Azure Log Analytics'">
@@ -16,7 +25,11 @@
<div class="gf-form">
<label class="gf-form-label query-keyword width-9">Workspace</label>
<div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
<select class="gf-form-input min-width-12" ng-model="ctrl.annotation.workspace" ng-options="f.value as f.text for f in ctrl.workspaces"></select>
<select
class="gf-form-input min-width-12"
ng-model="ctrl.annotation.workspace"
ng-options="f.value as f.text for f in ctrl.workspaces"
></select>
</div>
</div>
<div class="gf-form">
@@ -30,12 +43,12 @@
</div>
</div>
<kusto-editor
class="gf-form gf-form--grow"
query="ctrl.annotation.rawQuery"
variables="ctrl.templateVariables"
change="ctrl.onLogAnalyticsQueryChange"
getSchema="ctrl.getAzureLogAnalyticsSchema"
/>
class="gf-form gf-form--grow"
query="ctrl.annotation.rawQuery"
variables="ctrl.templateVariables"
change="ctrl.onLogAnalyticsQueryChange"
getSchema="ctrl.getAzureLogAnalyticsSchema"
/>
</div>
<div class="gf-form-inline" ng-show="ctrl.annotation.queryType !== 'Azure Log Analytics'">
@@ -48,14 +61,17 @@
<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 class="gf-form" ng-show="ctrl.showHelp">
<pre class="gf-form-pre alert alert-info" ng-show="ctrl.annotation.queryType === 'Azure Log Analytics'"><h6>Annotation Query Format</h6>
<pre
class="gf-form-pre alert alert-info"
ng-show="ctrl.annotation.queryType === 'Azure Log Analytics'"
><h6>Annotation Query Format</h6>
An annotation is an event that is overlaid on top of graphs. The query can have up to three columns per row, the datetime column is mandatory. Annotation rendering is expensive so it is important to limit the number of rows returned.
- column with the datetime type.

8
public/app/plugins/datasource/grafana-azure-monitor-datasource/partials/query.editor.html
View File

@@ -244,15 +244,15 @@
<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 class="gf-form" ng-show="ctrl.lastQuery">
<label class="gf-form-label query-keyword" ng-click="ctrl.showLastQuery = !ctrl.showLastQuery">
Raw Query
<i class="fa fa-caret-down" ng-show="ctrl.showLastQuery"></i>
<i class="fa fa-caret-right" ng-hide="ctrl.showLastQuery"></i>
<icon name="'angle-down'" ng-show="ctrl.showLastQuery"></icon>
<icon name="'angle-right'" ng-hide="ctrl.showLastQuery"></icon>
</label>
</div>
<div class="gf-form gf-form--grow">

2
public/app/plugins/datasource/graphite/FunctionEditorControls.tsx
View File

@@ -54,7 +54,7 @@ export const FunctionEditorControls = (
justifyContent: 'space-between',
}}
>
<span className="pointer fa fa-arrow-left" onClick={() => onMoveLeft(func)} />
<Icon name="arrow-left" onClick={() => onMoveLeft(func)} />
<FunctionHelpButton
name={func.def.name}
description={func.def.description}

2
public/app/plugins/datasource/graphite/add_graphite_func.ts
View File

@@ -13,7 +13,7 @@ export function graphiteAddFunc($compile: any) {
const buttonTemplate =
'<a class="gf-form-label query-part dropdown-toggle"' +
' tabindex="1" gf-dropdown="functionMenu" data-toggle="dropdown">' +
'<i class="fa fa-plus"></i></a>';
'<icon name="fa fa-plus"></i></a>';
return {
link: function($scope: any, elem: JQuery) {

2
public/app/plugins/datasource/graphite/partials/query.editor.html
View File

@@ -51,7 +51,7 @@
</div>
<div ng-if="ctrl.paused" class="gf-form">
<a ng-click="ctrl.unpause()" class="gf-form-label query-part"><i class="fa fa-play"></i></a>
<a ng-click="ctrl.unpause()" class="gf-form-label query-part"><icon name="'play'"></icon></a>
</div>
<div class="gf-form gf-form--grow">

2
public/app/plugins/datasource/influxdb/partials/query.editor.html
View File

@@ -135,7 +135,7 @@
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">ORDER BY</label>
<label class="gf-form-label pointer" ng-click="ctrl.removeOrderByTime()"
>time <span class="query-keyword">DESC</span> <icon name="'times'"></icon
>time <span class="query-keyword">DESC</span> <icon name="'times'" style="margin-bottom: 0;"></icon
></label>
</div>
<div class="gf-form gf-form--grow">

31
public/app/plugins/datasource/mssql/partials/annotations.editor.html
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 <b>time</b> 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>

8
public/app/plugins/datasource/mssql/partials/query.editor.html
View File

@@ -16,15 +16,15 @@
<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 class="gf-form" ng-show="ctrl.lastQueryMeta">
<label class="gf-form-label query-keyword" 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-down'" ng-show="ctrl.showLastQuerySQL"></icon>
<icon name="'angle-right'" ng-hide="ctrl.showLastQuerySQL"></icon>
</label>
</div>
<div class="gf-form gf-form--grow">

31
public/app/plugins/datasource/mysql/partials/annotations.editor.html
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 <i>time</i> or <i>time_sec</i> column is mandatory. Annotation rendering is expensive so it is important to limit the number of rows returned.
- column with alias: <b>time</b> or <i>time_sec</i> 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>

8
public/app/plugins/datasource/mysql/partials/query.editor.html
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-down'" ng-show="ctrl.showHelp"></icon>
<icon name="'angle-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-down'" ng-show="ctrl.showLastQuerySQL"></icon>
<icon name="'angle-right'" ng-hide="ctrl.showLastQuerySQL"></icon>
</label>
</div>
<div class="gf-form gf-form--grow">

2
public/app/plugins/datasource/mysql/query_ctrl.ts
View File

@@ -166,7 +166,7 @@ export class MysqlQueryCtrl 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;

16
public/app/plugins/datasource/opentsdb/partials/query.editor.html
View File

@@ -4,7 +4,7 @@
<label class="gf-form-label query-keyword width-8">
Metric
<label class="gf-form-label" bs-tooltip="ctrl.errors.metric" style="color: rgb(229, 189, 28)" ng-show="ctrl.errors.metric">
<i class="fa fa-warning"></i>
<icon name="'exclamation-triangle'"></icon>
</label>
</label>
<input type="text" class="gf-form-input" ng-model="ctrl.target.metric"
@@ -16,7 +16,7 @@
<label class="gf-form-label query-keyword">
Aggregator
<a bs-tooltip="ctrl.errors.aggregator" style="color: rgb(229, 189, 28)" ng-show="ctrl.errors.aggregator">
<i class="fa fa-warning"></i>
<icon name="'exclamation-triangle'"></icon>
</a>
</label>
<div class="gf-form-select-wrapper max-width-15">
@@ -104,7 +104,7 @@
<div ng-repeat="fil in ctrl.target.filters track by $index" class="gf-form-label">
{{fil.tagk}}&nbsp;=&nbsp;{{fil.type}}&#40;{{fil.filter}}&#41;&nbsp;&#44&nbsp;groupBy&nbsp;=&nbsp;{{fil.groupBy}}
<a ng-click="ctrl.editFilter(fil, $index)">
<i class="fa fa-pencil"></i>
<icon name="'pen'"></icon>
</a>
<a ng-click="ctrl.removeFilter($index)">
<icon name="'times'"></icon>
@@ -112,7 +112,7 @@
</div>
<label class="gf-form-label query-keyword" ng-hide="ctrl.addFilterMode">
<a ng-click="ctrl.addFilter()">
<i class="fa fa-plus"></i>
<icon name="'plus-circle'"></icon>
</a>
</label>
</div>
@@ -148,7 +148,7 @@
<div class="gf-form" ng-show="ctrl.addFilterMode">
<label class="gf-form-label" ng-show="ctrl.errors.filters">
<a bs-tooltip="ctrl.errors.filters" style="color: rgb(229, 189, 28)" >
<i class="fa fa-warning"></i>
<icon name="'exclamation-triangle'"></icon>
</a>
</label>
<label class="gf-form-label">
@@ -180,7 +180,7 @@
<label class="gf-form-label">
{{key}}&nbsp;=&nbsp;{{value}}
<a ng-click="ctrl.editTag(key, value)">
<i class="fa fa-pencil"></i>
<icon name="'pen'"></icon>
</a>
<a ng-click="ctrl.removeTag(key)">
<icon name="'times'"></icon>
@@ -190,7 +190,7 @@
<div class="gf-form" ng-hide="ctrl.addTagMode">
<label class="gf-form-label query-keyword">
<a ng-click="ctrl.addTag()"><i class="fa fa-plus"></i></a>
<a ng-click="ctrl.addTag()"><icon name="'plus-circle'"></icon></a>
</label>
</div>
@@ -208,7 +208,7 @@
<label class="gf-form-label" ng-show="ctrl.errors.tags">
<a bs-tooltip="ctrl.errors.tags" style="color: rgb(229, 189, 28)" >
<i class="fa fa-warning"></i>
<icon name="'exclamation-triangle'"></icon>
</a>
</label>
<label class="gf-form-label" >

31
public/app/plugins/datasource/postgres/partials/annotations.editor.html
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>

4
public/app/plugins/datasource/postgres/partials/config.html
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>

8
public/app/plugins/datasource/postgres/partials/query.editor.html
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">

2
public/app/plugins/datasource/postgres/query_ctrl.ts
View File

@@ -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;

3
public/app/plugins/datasource/prometheus/components/PromLink.tsx
View File

@@ -4,6 +4,7 @@ import React, { Component } from 'react';
import { PrometheusDatasource } from '../datasource';
import { PromQuery } from '../types';
import { DataQueryRequest, PanelData } from '@grafana/data';
import { Icon } from '@grafana/ui';
import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
interface Props {
@@ -61,7 +62,7 @@ export default class PromLink extends Component<Props, State> {
const { href } = this.state;
return (
<a href={href} target="_blank" rel="noopener">
<i className="fa fa-share-square-o" /> Prometheus
<Icon name="share-alt" /> Prometheus
</a>
);
}

4
public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
View File

@@ -2,7 +2,7 @@ import React from 'react';
import _ from 'lodash';
import { SelectableValue } from '@grafana/data';
import { Segment } from '@grafana/ui';
import { Segment, Icon } from '@grafana/ui';
import { getAggregationOptionsByMetric } from '../functions';
import { ValueTypes, MetricKind } from '../constants';
@@ -85,7 +85,7 @@ export class Aggregations extends React.Component<Props, State> {
<label className="gf-form-label gf-form-label--grow">
<a onClick={this.onToggleDisplayAdvanced}>
<>
<i className={`fa fa-caret-${displayAdvancedOptions ? 'down' : 'right'}`} /> Advanced Options
<Icon name={displayAdvancedOptions ? 'angle-down' : 'angle-right'} /> Advanced Options
</>
</a>
</label>

4
public/app/plugins/datasource/stackdriver/components/GroupBys.tsx
View File

@@ -1,6 +1,6 @@
import React, { FunctionComponent } from 'react';
import { SelectableValue } from '@grafana/data';
import { Segment } from '@grafana/ui';
import { Segment, Icon } from '@grafana/ui';
import { labelsToGroupedOptions } from '../functions';
import { systemLabels } from '../constants';
@@ -39,7 +39,7 @@ export const GroupBys: FunctionComponent<Props> = ({ groupBys = [], values = [],
<Segment
Component={
<a className="gf-form-label query-part">
<i className="fa fa-plus" />
<Icon name="plus-circle" />
</a>
}
allowCustomValue

5
public/app/plugins/datasource/stackdriver/components/Help.tsx
View File

@@ -1,5 +1,6 @@
import React from 'react';
import { MetricDescriptor } from '../types';
import { Icon } from '@grafana/ui';
export interface Props {
rawQuery: string;
@@ -39,14 +40,14 @@ export class Help extends React.Component<Props, State> {
<div className="gf-form-inline">
<div className="gf-form" onClick={this.onHelpClicked}>
<label className="gf-form-label query-keyword pointer">
Show Help <i className={`fa fa-caret-${displayHelp ? 'down' : 'right'}`} />
Show Help <Icon name={displayHelp ? 'angle-down' : 'angle-right'} />
</label>
</div>
{rawQuery && (
<div className="gf-form" onClick={this.onRawQueryClicked}>
<label className="gf-form-label query-keyword">
Raw Query <i className={`fa fa-caret-${displaRawQuery ? 'down' : 'right'}`} ng-show="ctrl.showHelp" />
Raw Query <Icon name={displaRawQuery ? 'angle-down' : 'angle-right'} ng-show="ctrl.showHelp" />
</label>
</div>
)}

4
public/app/plugins/datasource/stackdriver/components/LabelFilter.tsx
View File

@@ -1,7 +1,7 @@
import React, { FunctionComponent, Fragment } from 'react';
import _ from 'lodash';
import { SelectableValue } from '@grafana/data';
import { Segment } from '@grafana/ui';
import { Segment, Icon } from '@grafana/ui';
import { labelsToGroupedOptions, filtersToStringArray, stringArrayToFilters, toOption } from '../functions';
import { Filter } from '../types';
@@ -76,7 +76,7 @@ export const LabelFilter: FunctionComponent<Props> = ({
allowCustomValue
Component={
<a className="gf-form-label query-part">
<i className="fa fa-plus" />
<Icon name="plus-circle" />
</a>
}
options={[variableOptionGroup, ...labelsToGroupedOptions(Object.keys(labels))]}

19
public/app/plugins/datasource/stackdriver/components/__snapshots__/Aggregations.test.tsx.snap
View File

@@ -29,9 +29,22 @@ Array [
<a
onClick={[Function]}
>
<i
className="fa fa-caret-right"
/>
<div
className="css-1cvxpvr"
>
<svg
className="css-sr6nr"
fill="currentColor"
height={16}
viewBox="0 0 24 24"
width={16}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.83,11.29,10.59,7.05a1,1,0,0,0-1.42,0,1,1,0,0,0,0,1.41L12.71,12,9.17,15.54a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.29,1,1,0,0,0,.71-.29l4.24-4.24A1,1,0,0,0,14.83,11.29Z"
/>
</svg>
</div>
Advanced Options
</a>
</label>

6
public/app/plugins/datasource/stackdriver/partials/config.html
View File

@@ -86,7 +86,7 @@
></textarea>
</div>
<div ng-repeat="valError in ctrl.validationErrors" class="text-error p-l-1">
<i class="fa fa-warning"></i>
<icon name="'exclamation-triangle'"></icon>
{{valError}}
</div>
</div>
@@ -130,7 +130,7 @@
class="gf-form-label"
ng-hide="ctrl.current.secureJsonFields.privateKey || ctrl.current.jsonData.authenticationType !== ctrl.defaultAuthenticationType"
>
<i class="fa fa-save"></i> Do not forget to save your changes after uploading a file.
<icon name="'save'"></icon> Do not forget to save your changes after uploading a file.
</p>
<div class="gf-form" ng-if="ctrl.gceError">
@@ -138,5 +138,5 @@
</div>
<p class="gf-form-label" ng-show="ctrl.current.jsonData.authenticationType !== ctrl.defaultAuthenticationType">
<i class="fa fa-save"></i> Verify GCE default service account by clicking Save & Test
<icon name="'save'"></icon> Verify GCE default service account by clicking Save & Test
</p>

2
public/app/plugins/datasource/testdata/module.tsx vendored
View File

@@ -16,7 +16,7 @@ export const plugin = new DataSourcePlugin(TestDataDataSource)
.setAnnotationQueryCtrl(TestDataAnnotationsQueryCtrl)
.addConfigPage({
title: 'Setup',
icon: 'fa fa-list-alt',
icon: 'list-ul',
body: TestInfoTab,
id: 'setup',
});

2
public/app/plugins/panel/alertlist/module.html
View File

@@ -30,7 +30,7 @@
<ol class="alert-rule-list">
<li class="alert-rule-item" ng-repeat="al in ctrl.alertHistory">
<div class="alert-rule-item__icon {{al.stateModel.stateClass}}">
<i class="{{al.stateModel.iconClass}}"></i>
<icon name="'{{al.stateModel.iconClass}}'" size="'xl'"></icon>
</div>
<div class="alert-rule-item__body">
<div class="alert-rule-item__header">

4
public/app/plugins/panel/graph/Legend/Legend.tsx
View File

@@ -1,7 +1,7 @@
import _ from 'lodash';
import React, { PureComponent } from 'react';
import { TimeSeries } from 'app/core/core';
import { CustomScrollbar } from '@grafana/ui';
import { CustomScrollbar, Icon } from '@grafana/ui';
import { LegendItem, LEGEND_STATS } from './LegendSeriesItem';
type Sort = 'min' | 'max' | 'avg' | 'current' | 'total';
@@ -303,7 +303,7 @@ class LegendTableHeaderItem extends PureComponent<LegendTableHeaderProps & Legen
return (
<th className="pointer" onClick={this.onClick}>
{statName}
{sort === statName && <span className={sortDesc ? 'fa fa-caret-down' : 'fa fa-caret-up'} />}
{sort === statName && <Icon name={sortDesc ? 'angle-down' : 'angle-up'} />}
</th>
);
}

4
public/app/plugins/panel/graph/Legend/LegendSeriesItem.tsx
View File

@@ -1,7 +1,7 @@
import React, { PureComponent } from 'react';
import classNames from 'classnames';
import { TimeSeries } from 'app/core/core';
import { SeriesColorPicker } from '@grafana/ui';
import { SeriesColorPicker, Icon } from '@grafana/ui';
export const LEGEND_STATS = ['min', 'max', 'avg', 'current', 'total'];
@@ -156,7 +156,7 @@ interface LegendSeriesIconState {
}
function SeriesIcon({ color }: { color: string }) {
return <i className="fa fa-minus pointer" style={{ color }} />;
return <Icon name="minus" style={{ color }} />;
}
class LegendSeriesIcon extends PureComponent<LegendSeriesIconProps, LegendSeriesIconState> {

4
public/app/plugins/panel/graph/graph.ts
View File

@@ -200,7 +200,7 @@ class GraphElement {
items: [
{
label: 'Add annotation',
icon: 'gicon gicon-annotation',
icon: 'comment-alt',
onClick: () => this.eventManager.updateTime({ from: flotPosition.x, to: null }),
},
],
@@ -218,7 +218,7 @@ class GraphElement {
label: link.title,
url: link.href,
target: link.target,
icon: `fa ${link.target === '_self' ? 'fa-link' : 'fa-external-link'}`,
icon: `${link.target === '_self' ? 'link' : 'external-link-alt'}`,
onClick: link.onClick,
};
}),

8
public/app/plugins/panel/graph/tab_display.html
View File

@@ -169,9 +169,9 @@
</div>
<div class="gf-form" ng-repeat="option in currentOverrides">
<label class="gf-form-label">
<i class="pointer fa fa-remove" ng-click="removeOverride(option)"></i>
<icon name="'times'" size="'sm'" ng-click="removeOverride(option)" style="margin-right: 4px;"></icon>
<span ng-show="option.propertyName === 'color'">
Color: <i class="fa fa-circle" ng-style="{color:option.value}"></i>
Color: <icon name="'circle'" type="'mono'" ng-style="{color:option.value}"></icon>
</span>
<span ng-show="option.propertyName !== 'color'"> {{ option.name }}: {{ option.value }} </span>
</label>
@@ -193,13 +193,13 @@
<div class="gf-form">
<label class="gf-form-label">
<i class="fa fa-trash pointer" ng-click="ctrl.removeSeriesOverride(override)"></i>
<icon name="'trash-alt'" ng-click="ctrl.removeSeriesOverride(override)"></icon>
</label>
</div>
</div>
<div class="gf-form-button-row">
<button class="btn btn-inverse" ng-click="ctrl.addSeriesOverride()">
<i class="fa fa-plus"></i>&nbsp;Add series override<tip>Regex match example: /server[0-3]/i </tip>
<icon name="'plus-circle'"></icon>&nbsp;Add series override<tip>Regex match example: /server[0-3]/i </tip>
</button>
</div>
</div>

64
public/app/plugins/panel/graph/thresholds_form.html
View File

@@ -1,7 +1,6 @@
<div class="gf-form-group">
<p class="muted" ng-show="ctrl.disabled">
Visual thresholds options <strong>disabled.</strong>
Visit the Alert tab to update your thresholds.<br>
Visual thresholds options <strong>disabled.</strong> Visit the Alert tab to update your thresholds.<br />
To re-enable thresholds, the alert rule must be deleted from this panel.
</p>
<div ng-class="{'thresholds-form-disabled': ctrl.disabled}">
@@ -12,24 +11,45 @@
<div class="gf-form">
<div class="gf-form-select-wrapper">
<select class="gf-form-input" ng-model="threshold.op"
ng-options="f for f in ['gt', 'lt']" ng-change="ctrl.render()" ng-disabled="ctrl.disabled"></select>
<select
class="gf-form-input"
ng-model="threshold.op"
ng-options="f for f in ['gt', 'lt']"
ng-change="ctrl.render()"
ng-disabled="ctrl.disabled"
></select>
</div>
<input type="number" ng-model="threshold.value" class="gf-form-input width-8"
ng-change="ctrl.render()" placeholder="value" ng-disabled="ctrl.disabled">
<input
type="number"
ng-model="threshold.value"
class="gf-form-input width-8"
ng-change="ctrl.render()"
placeholder="value"
ng-disabled="ctrl.disabled"
/>
</div>
<div class="gf-form">
<label class="gf-form-label">Color</label>
<div class="gf-form-select-wrapper">
<select class="gf-form-input" ng-model="threshold.colorMode"
ng-options="f for f in ['custom', 'critical', 'warning', 'ok']" ng-change="ctrl.onThresholdTypeChange($index)" ng-disabled="ctrl.disabled">
<select
class="gf-form-input"
ng-model="threshold.colorMode"
ng-options="f for f in ['custom', 'critical', 'warning', 'ok']"
ng-change="ctrl.onThresholdTypeChange($index)"
ng-disabled="ctrl.disabled"
>
</select>
</div>
</div>
<gf-form-switch class="gf-form" label="Fill" checked="threshold.fill"
on-change="ctrl.render()" ng-disabled="ctrl.disabled"></gf-form-switch>
<gf-form-switch
class="gf-form"
label="Fill"
checked="threshold.fill"
on-change="ctrl.render()"
ng-disabled="ctrl.disabled"
></gf-form-switch>
<div class="gf-form" ng-if="threshold.fill && threshold.colorMode === 'custom'">
<label class="gf-form-label">Fill color</label>
@@ -38,8 +58,13 @@
</span>
</div>
<gf-form-switch class="gf-form" label="Line" checked="threshold.line"
on-change="ctrl.render()" ng-disabled="ctrl.disabled"></gf-form-switch>
<gf-form-switch
class="gf-form"
label="Line"
checked="threshold.line"
on-change="ctrl.render()"
ng-disabled="ctrl.disabled"
></gf-form-switch>
<div class="gf-form" ng-if="threshold.line && threshold.colorMode === 'custom'">
<label class="gf-form-label">Line color</label>
@@ -51,9 +76,14 @@
<div class="gf-form">
<label class="gf-form-label">Y-Axis</label>
<div class="gf-form-select-wrapper">
<select class="gf-form-input" ng-model="threshold.yaxis"
ng-init="threshold.yaxis = threshold.yaxis === 'left' || threshold.yaxis === 'right' ? threshold.yaxis : 'left'"
ng-options="f for f in ['left', 'right']" ng-change="ctrl.render()" ng-disabled="ctrl.disabled">
<select
class="gf-form-input"
ng-model="threshold.yaxis"
ng-init="threshold.yaxis = threshold.yaxis === 'left' || threshold.yaxis === 'right' ? threshold.yaxis : 'left'"
ng-options="f for f in ['left', 'right']"
ng-change="ctrl.render()"
ng-disabled="ctrl.disabled"
>
</select>
</div>
</div>
@@ -61,7 +91,7 @@
<div class="gf-form">
<label class="gf-form-label">
<a class="pointer" ng-click="ctrl.removeThreshold($index)" ng-disabled="ctrl.disabled">
<i class="fa fa-trash"></i>
<icon name="'trash-alt'"></icon>
</a>
</label>
</div>
@@ -69,7 +99,7 @@
<div class="gf-form-button-row">
<button class="btn btn-inverse" ng-click="ctrl.addThreshold()" ng-disabled="ctrl.disabled">
<i class="fa fa-plus"></i>&nbsp;Add Threshold
<icon name="'plus-circle'"></icon>&nbsp;Add Threshold
</button>
</div>
</div>

48
public/app/plugins/panel/graph/time_regions_form.html
View File

@@ -7,23 +7,49 @@
<div class="gf-form">
<label class="gf-form-label">From</label>
<div class="gf-form-select-wrapper">
<select class="gf-form-input width-6" ng-model="timeRegion.fromDayOfWeek" ng-options="f.d as f.value for f in [{d: undefined, value: 'Any'}, {d:1, value: 'Mon'}, {d:2, value: 'Tue'}, {d:3, value: 'Wed'}, {d:4, value: 'Thu'}, {d:5, value: 'Fri'}, {d:6, value: 'Sat'}, {d:7, value: 'Sun'}]"
ng-change="ctrl.render()"></select>
<select
class="gf-form-input width-6"
ng-model="timeRegion.fromDayOfWeek"
ng-options="f.d as f.value for f in [{d: undefined, value: 'Any'}, {d:1, value: 'Mon'}, {d:2, value: 'Tue'}, {d:3, value: 'Wed'}, {d:4, value: 'Thu'}, {d:5, value: 'Fri'}, {d:6, value: 'Sat'}, {d:7, value: 'Sun'}]"
ng-change="ctrl.render()"
></select>
</div>
<input type="text" ng-maxlength="5" ng-model="timeRegion.from" class="gf-form-input width-5" ng-change="ctrl.render()" placeholder="hh:mm">
<input
type="text"
ng-maxlength="5"
ng-model="timeRegion.from"
class="gf-form-input width-5"
ng-change="ctrl.render()"
placeholder="hh:mm"
/>
<label class="gf-form-label">To</label>
<div class="gf-form-select-wrapper">
<select class="gf-form-input width-6" ng-model="timeRegion.toDayOfWeek" ng-options="f.d as f.value for f in [{d: undefined, value: 'Any'}, {d:1, value: 'Mon'}, {d:2, value: 'Tue'}, {d:3, value: 'Wed'}, {d:4, value: 'Thu'}, {d:5, value: 'Fri'}, {d:6, value: 'Sat'}, {d:7, value: 'Sun'}]"
ng-change="ctrl.render()"></select>
<select
class="gf-form-input width-6"
ng-model="timeRegion.toDayOfWeek"
ng-options="f.d as f.value for f in [{d: undefined, value: 'Any'}, {d:1, value: 'Mon'}, {d:2, value: 'Tue'}, {d:3, value: 'Wed'}, {d:4, value: 'Thu'}, {d:5, value: 'Fri'}, {d:6, value: 'Sat'}, {d:7, value: 'Sun'}]"
ng-change="ctrl.render()"
></select>
</div>
<input type="text" ng-maxlength="5" ng-model="timeRegion.to" class="gf-form-input width-5" ng-change="ctrl.render()" placeholder="hh:mm"
>
<input
type="text"
ng-maxlength="5"
ng-model="timeRegion.to"
class="gf-form-input width-5"
ng-change="ctrl.render()"
placeholder="hh:mm"
/>
</div>
<div class="gf-form">
<label class="gf-form-label">Color</label>
<div class="gf-form-select-wrapper">
<select class="gf-form-input" ng-model="timeRegion.colorMode" ng-options="f.key as f.value for f in ctrl.colorModes" ng-change="ctrl.render()">
<select
class="gf-form-input"
ng-model="timeRegion.colorMode"
ng-options="f.key as f.value for f in ctrl.colorModes"
ng-change="ctrl.render()"
>
</select>
</div>
</div>
@@ -49,7 +75,7 @@
<div class="gf-form">
<label class="gf-form-label">
<a class="pointer" ng-click="ctrl.removeTimeRegion($index)">
<i class="fa fa-trash"></i>
<icon name="'trash-alt"></icon>
</a>
</label>
</div>
@@ -57,7 +83,7 @@
<div class="gf-form-button-row">
<button class="btn btn-inverse" ng-click="ctrl.addTimeRegion()">
<i class="fa fa-plus"></i>&nbsp;Add time region<tip>All configured time regions refers to UTC time</tip>
<icon name="'plus-circle'"></icon>&nbsp;Add time region<tip>All configured time regions refers to UTC time</tip>
</button>
</div>
</div>
</div>

4
public/app/plugins/panel/pluginlist/editor.html
View File

@@ -8,12 +8,12 @@
</div>
<div class="gf-form" ng-show="ctrl.panel.mode === 'recently viewed'">
<span class="gf-form-label">
<i class="grafana-tip fa fa-question-circle ng-scope" bs-tooltip="'WARNING: This list will be cleared when clearing browser cache'" data-original-title="" title=""></i>
<icon class="grafana-tip ng-scope" name="'question-circle'" bs-tooltip="'WARNING: This list will be cleared when clearing browser cache'" data-original-title="" title=""></icon>
</span>
</div>
</div>
<div class="gf-form-inline" ng-if="ctrl.panel.mode === 'search'">
<div class="gf-form-inline" ng-if="ctrl.panel.mode === 'search'"></div>
<div class="gf-form">
<span class="gf-form-label width-10">Search options</span>
<span class="gf-form-label">Query</span>

2
public/app/plugins/panel/singlestat/editor.html
View File

@@ -163,7 +163,7 @@
<label class="gf-form-label width-10">Min</label>
<input type="number" class="gf-form-input width-6" placeholder="0" data-placement="right" ng-model="ctrl.panel.gauge.minValue" ng-change="ctrl.refresh()" ng-model-onblur>
<label class="gf-form-label alert-state-critical" ng-show="ctrl.invalidGaugeRange">
&nbsp; <i class="fa fa-warning"></i>
&nbsp; <icon name="'exclamation-triangle'"></icon>
Min value is bigger than max.
</label>
</div>

4
public/app/plugins/panel/singlestat/mappings.html
View File

@@ -43,7 +43,7 @@
<div class="gf-form-button-row">
<button class="btn btn-inverse" ng-click="ctrl.addValueMap();">
<i class="fa fa-plus"></i>
<icon name="'plus-circle'"></icon>
Add a value mapping
</button>
</div>
@@ -66,7 +66,7 @@
<div class="gf-form-button-row">
<button class="btn btn-inverse" ng-click="ctrl.addRangeMap()">
<i class="fa fa-plus"></i>
<icon name="'plus-circle'"></icon>
Add a range mapping
</button>
</div>

6
public/app/plugins/panel/table/column_options.html
View File

@@ -164,7 +164,7 @@
</div>
<div class="gf-form">
<label class="gf-form-label">
<a class="pointer" ng-click="editor.addValueMap(style)"><i class="fa fa-plus"></i></a>
<a class="pointer" ng-click="editor.addValueMap(style)"><icon name="'plus-circle'"></icon></a>
</label>
</div>
</div>
@@ -293,7 +293,7 @@
<div class="clearfix"></div>
<div class="gf-form-group">
<button class="btn btn-danger btn-small" ng-click="editor.removeColumnStyle(style)">
<i class="fa fa-trash"></i> Remove Rule
<icon name="'trash-alt'"></icon> Remove Rule
</button>
</div>
@@ -302,6 +302,6 @@
<div class="gf-form-button-row">
<button class="btn btn-inverse" ng-click="editor.addColumnStyle()">
<i class="fa fa-plus"></i>&nbsp;Add column style
<icon name="'plus-circle'"></icon>&nbsp;Add column style
</button>
</div>

47
public/app/plugins/panel/table/module.html
View File

@@ -1,30 +1,25 @@
<div class="table-panel-container">
<div class="table-panel-header-bg" ng-show="ctrl.table.rows.length"></div>
<div class="table-panel-scroll" ng-show="ctrl.table.rows.length">
<table class="table-panel-table">
<thead>
<tr>
<th ng-repeat="col in ctrl.table.columns" ng-if="!col.hidden">
<div class="table-panel-table-header-inner pointer" ng-click="ctrl.toggleColumnSort(col, $index)">
{{col.title}}
<span class="table-panel-table-header-controls" ng-if="col.sort">
<i class="fa fa-caret-down" ng-show="col.desc"></i>
<i class="fa fa-caret-up" ng-hide="col.desc"></i>
</span>
</div>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="table-panel-header-bg" ng-show="ctrl.table.rows.length"></div>
<div class="table-panel-scroll" ng-show="ctrl.table.rows.length">
<table class="table-panel-table">
<thead>
<tr>
<th ng-repeat="col in ctrl.table.columns" ng-if="!col.hidden">
<div class="table-panel-table-header-inner pointer" ng-click="ctrl.toggleColumnSort(col, $index)">
{{col.title}}
<span class="table-panel-table-header-controls" ng-if="col.sort">
<icon name="'angle-down'" ng-show="col.desc"></icon>
<icon name="'angle-up'" ng-hide="col.desc"></icon>
</span>
</div>
</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<div class="datapoints-warning" ng-show="ctrl.table.rows.length===0">
<span class="small" >
No data to show <tip>Nothing returned by data query</tip>
</span>
</div>
<div class="table-panel-footer">
<span class="small"> No data to show <tip>Nothing returned by data query</tip> </span>
</div>
<div class="table-panel-footer"></div>