diff --git a/jest.config.js b/jest.config.js index 6bac8515183..4b2c97b20ed 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,8 +1,12 @@ +const esModule = '@iconscout/react-unicons'; + module.exports = { verbose: false, transform: { '^.+\\.(ts|tsx|js|jsx)$': 'ts-jest', + [`(${esModule}).+\\.js$`]: 'babel-jest', }, + transformIgnorePatterns: [`/node_modules/(?!${esModule})`], moduleDirectories: ['node_modules', 'public'], roots: ['/public/app', '/public/test', '/packages', '/scripts'], testRegex: '(\\.|/)(test)\\.(jsx?|tsx?)$', diff --git a/packages/grafana-ui/src/components/Alert/Alert.tsx b/packages/grafana-ui/src/components/Alert/Alert.tsx index c218a89b7e7..aabeb8619c5 100644 --- a/packages/grafana-ui/src/components/Alert/Alert.tsx +++ b/packages/grafana-ui/src/components/Alert/Alert.tsx @@ -1,4 +1,5 @@ import React, { FC, ReactNode } from 'react'; +import { Icon, IconName } from '@grafana/ui'; import classNames from 'classnames'; export type AlertVariant = 'success' | 'warning' | 'error' | 'info'; @@ -15,16 +16,16 @@ interface AlertProps { function getIconFromSeverity(severity: AlertVariant): string { switch (severity) { case 'error': { - return 'fa fa-exclamation-triangle'; + return 'exclamation-triangle'; } case 'warning': { - return 'fa fa-exclamation-triangle'; + return 'exclamation-triangle'; } case 'info': { - return 'fa fa-info-circle'; + return 'info-circle'; } case 'success': { - return 'fa fa-check'; + return 'check'; } default: return ''; @@ -37,7 +38,7 @@ export const Alert: FC = ({ title, buttonText, onButtonClick, onRemo
- +
{title}
@@ -46,7 +47,7 @@ export const Alert: FC = ({ title, buttonText, onButtonClick, onRemo {/* If onRemove is specified , giving preference to onRemove */} {onRemove && ( )} {onButtonClick && ( diff --git a/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.story.tsx b/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.story.tsx index e2672caac6c..4927b3e6868 100644 --- a/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.story.tsx +++ b/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.story.tsx @@ -12,7 +12,7 @@ CallToActionCardStories.add('default', () => { const ctaElements: { [key: string]: JSX.Element } = { custom:

This is just H1 tag, you can any component as CTA element

, button: ( - ), diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinksEditor.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinksEditor.tsx index dfbfdda6644..73b6a6a1007 100644 --- a/packages/grafana-ui/src/components/DataLinks/DataLinksEditor.tsx +++ b/packages/grafana-ui/src/components/DataLinks/DataLinksEditor.tsx @@ -73,7 +73,7 @@ export const DataLinksEditor: FC = React.memo( )} {(!value || (value && value.length < (maxLinks || Infinity))) && ( - )} diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx index d595eda6086..47825e9c53c 100644 --- a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx +++ b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx @@ -100,7 +100,7 @@ export const DataLinksInlineEditor: React.FC = ({ li )} - diff --git a/packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx index 6112c866a8e..dd1620e2023 100644 --- a/packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx +++ b/packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { KeyValue } from '@grafana/data'; import { css, cx } from 'emotion'; import { Tooltip } from '../Tooltip/Tooltip'; +import { Icon } from '../Icon/Icon'; import { CertificationKey } from './CertificationKey'; import { HttpSettingsBaseProps } from './types'; @@ -47,7 +48,7 @@ export const TLSAuthSettings: React.FC = ({ dataSourceCon theme="info" >
- +
diff --git a/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx b/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx index 17cab6b33b1..ca3fd9bf4f5 100644 --- a/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx +++ b/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx @@ -34,7 +34,7 @@ export const FormLabel: FunctionComponent = ({ {tooltip && (
- +
)} diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Select/_Select.scss b/packages/grafana-ui/src/components/Forms/Legacy/Select/_Select.scss index 07ebc4a71e6..1033a5ff007 100644 --- a/packages/grafana-ui/src/components/Forms/Legacy/Select/_Select.scss +++ b/packages/grafana-ui/src/components/Forms/Legacy/Select/_Select.scss @@ -136,7 +136,6 @@ $select-input-bg-disabled: $input-bg-disabled; height: 100%; right: 8px; top: 1px; - margin-top: -1px; display: inline-block; text-align: right; } diff --git a/packages/grafana-ui/src/components/Icon/Icon.tsx b/packages/grafana-ui/src/components/Icon/Icon.tsx index bcba07515fc..868a2f337d9 100644 --- a/packages/grafana-ui/src/components/Icon/Icon.tsx +++ b/packages/grafana-ui/src/components/Icon/Icon.tsx @@ -39,7 +39,7 @@ const getIconStyles = stylesFactory((theme: GrafanaTheme, type: IconType) => { }); export const Icon = React.forwardRef( - ({ size = 'md', type = 'default', title, name, className, style, ...divElementProps }, ref) => { + ({ size = 'md', type = 'default', name, className, style, ...divElementProps }, ref) => { const theme = useTheme(); const styles = getIconStyles(theme, type); const svgSize = getSvgSize(size, theme); diff --git a/packages/grafana-ui/src/components/Icon/assets/Bell.tsx b/packages/grafana-ui/src/components/Icon/assets/Bell.tsx index 73a984432a7..906034a1621 100644 --- a/packages/grafana-ui/src/components/Icon/assets/Bell.tsx +++ b/packages/grafana-ui/src/components/Icon/assets/Bell.tsx @@ -5,7 +5,7 @@ export const Bell: FunctionComponent = ({ size, ...rest }) => { return ( = ({ size, ...rest }) => { return ( = ({ size, ...rest }) => { return ( = ({ size, ...rest }) => { return ( { describe('when labels are present', () => { it('should render heading', () => { const wrapper = setup(undefined, { labels: { key1: 'label1', key2: 'label2' } }); - expect(wrapper.find({ 'aria-label': 'Log Labels' })).toHaveLength(1); + expect(wrapper.find({ 'aria-label': 'Log Labels' }).hostNodes()).toHaveLength(1); }); it('should render labels', () => { const wrapper = setup(undefined, { labels: { key1: 'label1', key2: 'label2' } }); @@ -47,7 +47,7 @@ describe('LogDetails', () => { describe('when row entry has parsable fields', () => { it('should render heading ', () => { const wrapper = setup(undefined, { entry: 'test=successful' }); - expect(wrapper.find({ title: 'Ad-hoc statistics' })).toHaveLength(1); + expect(wrapper.find({ title: 'Ad-hoc statistics' }).hostNodes()).toHaveLength(1); }); it('should render parsed fields', () => { const wrapper = setup(undefined, { entry: 'test=successful' }); @@ -116,7 +116,7 @@ describe('LogDetails', () => { expect(wrapper.find(LogDetailsRow).length).toBe(3); const traceIdRow = wrapper.find(LogDetailsRow).filter({ parsedKey: 'traceId' }); expect(traceIdRow.length).toBe(1); - expect(traceIdRow.find('a').length).toBe(1); + expect(traceIdRow.find('a').hostNodes().length).toBe(1); expect((traceIdRow.find('a').getDOMNode() as HTMLAnchorElement).href).toBe('localhost:3210/1234'); }); }); diff --git a/packages/grafana-ui/src/components/Logs/LogDetailsRow.test.tsx b/packages/grafana-ui/src/components/Logs/LogDetailsRow.test.tsx index 2d1e19f6d1a..efc5a994ffa 100644 --- a/packages/grafana-ui/src/components/Logs/LogDetailsRow.test.tsx +++ b/packages/grafana-ui/src/components/Logs/LogDetailsRow.test.tsx @@ -32,16 +32,16 @@ describe('LogDetailsRow', () => { }); it('should render metrics button', () => { const wrapper = setup(); - expect(wrapper.find('i.fa-signal')).toHaveLength(1); + expect(wrapper.find({ title: 'Ad-hoc statistics' }).hostNodes()).toHaveLength(1); }); describe('if props is a label', () => { it('should render filter label button', () => { const wrapper = setup(); - expect(wrapper.find('i.fa-search-plus')).toHaveLength(1); + expect(wrapper.find({ title: 'Filter for value' }).hostNodes()).toHaveLength(1); }); it('should render filter out label button', () => { const wrapper = setup(); - expect(wrapper.find('i.fa-search-minus')).toHaveLength(1); + expect(wrapper.find({ title: 'Filter out value' }).hostNodes()).toHaveLength(1); }); }); @@ -66,7 +66,10 @@ describe('LogDetailsRow', () => { }); expect(wrapper.find(LogLabelStats).length).toBe(0); - wrapper.find({ title: 'Ad-hoc statistics' }).simulate('click'); + wrapper + .find({ title: 'Ad-hoc statistics' }) + .hostNodes() + .simulate('click'); expect(wrapper.find(LogLabelStats).length).toBe(1); expect(wrapper.find(LogLabelStats).contains('another value')).toBeTruthy(); }); diff --git a/packages/grafana-ui/src/components/Logs/LogDetailsRow.tsx b/packages/grafana-ui/src/components/Logs/LogDetailsRow.tsx index e90f1415650..1d9b267bed0 100644 --- a/packages/grafana-ui/src/components/Logs/LogDetailsRow.tsx +++ b/packages/grafana-ui/src/components/Logs/LogDetailsRow.tsx @@ -10,6 +10,7 @@ import { stylesFactory } from '../../themes/stylesFactory'; //Components import { LogLabelStats } from './LogLabelStats'; import { LinkButton } from '../Button/Button'; +import { Icon } from '../Icon/Icon'; export interface Props extends Themeable { parsedValue: string; @@ -94,24 +95,16 @@ class UnThemedLogDetailsRow extends PureComponent {
{/* Action buttons - show stats/filter results */} -
+ {isLabel && ( <> - + - + )} diff --git a/packages/grafana-ui/src/components/Logs/LogRow.tsx b/packages/grafana-ui/src/components/Logs/LogRow.tsx index 504b5b03f9b..6cc8a4e27ee 100644 --- a/packages/grafana-ui/src/components/Logs/LogRow.tsx +++ b/packages/grafana-ui/src/components/Logs/LogRow.tsx @@ -1,5 +1,6 @@ import React, { PureComponent } from 'react'; import { Field, LinkModel, LogRowModel, TimeZone, DataQueryResponse, GrafanaTheme } from '@grafana/data'; +import { Icon } from '@grafana/ui'; import { cx, css } from 'emotion'; import { @@ -48,6 +49,8 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { topVerticalAlign: css` label: topVerticalAlign; vertical-align: top; + margin-top: -${theme.spacing.xs}; + margin-left: -${theme.spacing.xxs}; `, hoverBackground: css` label: hoverBackground; @@ -129,9 +132,6 @@ class UnThemedLogRow extends PureComponent { const style = getLogRowStyles(theme, row.logLevel); const styles = getStyles(theme); const showUtc = timeZone === 'utc'; - const showDetailsClassName = showDetails - ? cx(['fa fa-chevron-down', styles.topVerticalAlign]) - : cx(['fa fa-chevron-right', styles.topVerticalAlign]); const hoverBackground = cx(style.logsRow, { [styles.hoverBackground]: hasHoverBackground }); return ( @@ -150,7 +150,7 @@ class UnThemedLogRow extends PureComponent { {!allowDetails && ( - + )} {showTime && showUtc && ( diff --git a/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts b/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts index aaa1b1b1055..0978b4fbbb2 100644 --- a/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts +++ b/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts @@ -158,8 +158,10 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo logsDetailsIcon: css` label: logs-row-details__icon; position: relative; - padding-right: ${theme.spacing.md}; color: ${theme.colors.gray3}; + svg { + margin-right: ${theme.spacing.md}; + } `, logDetailsLabel: css` label: logs-row-details__label; diff --git a/packages/grafana-ui/src/components/Modal/Modal.tsx b/packages/grafana-ui/src/components/Modal/Modal.tsx index 5d36e7fae2c..e0e956a36b7 100644 --- a/packages/grafana-ui/src/components/Modal/Modal.tsx +++ b/packages/grafana-ui/src/components/Modal/Modal.tsx @@ -6,6 +6,7 @@ import { IconName } from '../../types'; import { Themeable } from '../../types'; import { getModalStyles } from './getModalStyles'; import { ModalHeader } from './ModalHeader'; +import { Icon } from '../Icon/Icon'; interface Props extends Themeable { icon?: IconName; @@ -50,7 +51,7 @@ export class UnthemedModal extends React.PureComponent {
{typeof title === 'string' ? this.renderDefaultHeader(title) : title} - +
{this.props.children}
diff --git a/packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx b/packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx index fb641cd1dcb..22758f10c56 100644 --- a/packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx +++ b/packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx @@ -1,5 +1,6 @@ // Libraries import React, { FunctionComponent } from 'react'; +import { Icon } from '@grafana/ui'; interface Props { title?: string | JSX.Element; @@ -26,7 +27,7 @@ export const PanelOptionsGroup: FunctionComponent = props => { {props.title} {props.onClose && ( )}
diff --git a/packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.tsx b/packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.tsx index cfdd755ac57..355e6c4863f 100644 --- a/packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.tsx +++ b/packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.tsx @@ -200,7 +200,7 @@ export class ThresholdsEditor extends PureComponent { return (
- diff --git a/packages/grafana-ui/src/components/TransformersUI/TransformationsEditor.tsx b/packages/grafana-ui/src/components/TransformersUI/TransformationsEditor.tsx index 66c3f97b78c..f37bddb19ff 100644 --- a/packages/grafana-ui/src/components/TransformersUI/TransformationsEditor.tsx +++ b/packages/grafana-ui/src/components/TransformersUI/TransformationsEditor.tsx @@ -118,7 +118,7 @@ export class TransformationsEditor extends React.PureComponent {this.renderTransformationEditors()} - diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/LegacyValueMappingsEditor.tsx b/packages/grafana-ui/src/components/ValueMappingsEditor/LegacyValueMappingsEditor.tsx index 71d77b52e00..632585c6ee8 100644 --- a/packages/grafana-ui/src/components/ValueMappingsEditor/LegacyValueMappingsEditor.tsx +++ b/packages/grafana-ui/src/components/ValueMappingsEditor/LegacyValueMappingsEditor.tsx @@ -98,7 +98,7 @@ export class LegacyValueMappingsEditor extends PureComponent { removeValueMapping={() => this.onRemoveMapping(valueMapping.id)} /> ))} -
diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx index a29aa5815db..c8265cc4b3d 100644 --- a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx +++ b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx @@ -68,7 +68,7 @@ export const ValueMappingsEditor: React.FC = ({ valueMappings, onChange, diff --git a/packages/grafana-ui/src/types/icon.ts b/packages/grafana-ui/src/types/icon.ts index 49ec6808e19..95d86f6cd4b 100644 --- a/packages/grafana-ui/src/types/icon.ts +++ b/packages/grafana-ui/src/types/icon.ts @@ -3,10 +3,12 @@ export type IconType = 'mono' | 'default'; export type IconName = | 'fa fa-fw fa-unlock' | 'fa fa-envelope' + | 'fa fa-spinner' | 'question-circle' - | 'plus' | 'angle-up' + | 'history' | 'angle-down' + | 'filter' | 'angle-left' | 'angle-right' | 'pen' @@ -34,6 +36,8 @@ export type IconName = | 'panel-add' | 'arrow-random' | 'arrow-down' + | 'comment-alt' + | 'arrow-right' | 'arrow-up' | 'arrow-from-right' | 'keyboard' @@ -50,9 +54,12 @@ export type IconName = | 'folder-plus' | 'link' | 'upload' + | 'columns' | 'home-alt' | 'channel-add' | 'calendar-alt' + | 'play' + | 'pause' | 'calculator-alt' | 'compass' | 'sliders-v-alt' @@ -77,12 +84,20 @@ export type IconName = | 'edit' | 'shield' | 'eye' + | 'eye-slash' | 'filter' | 'monitor' | 'plus-circle' | 'arrow-left' | 'repeat' | 'external-link-alt' + | 'minus' + | 'signal' + | 'search-plus' + | 'search-minus' + | 'table' + | 'plus' + | 'heart' | 'favorite'; export const getAvailableIcons = (): IconName[] => [ @@ -102,6 +117,8 @@ export const getAvailableIcons = (): IconName[] => [ 'repeat', 'external-link-alt', 'power', + 'play', + 'pause', 'trash-alt', 'exclamation-triangle', 'times', @@ -152,8 +169,10 @@ export const getAvailableIcons = (): IconName[] => [ 'info-circle', 'bug', 'cube', + 'history', 'star', 'edit', + 'columns', 'eye', 'channel-add', 'monitor', @@ -164,6 +183,7 @@ export const getAvailableIcons = (): IconName[] => [ 'folder-open', 'file-copy-alt', 'arrow-down', + 'filter', 'arrow-up', 'exchange-alt', ]; diff --git a/public/app/core/components/LayoutSelector/LayoutSelector.tsx b/public/app/core/components/LayoutSelector/LayoutSelector.tsx index 3afa1f931f2..d12f5d539af 100644 --- a/public/app/core/components/LayoutSelector/LayoutSelector.tsx +++ b/public/app/core/components/LayoutSelector/LayoutSelector.tsx @@ -1,4 +1,5 @@ import React, { FC } from 'react'; +import { Icon } from '@grafana/ui'; export type LayoutMode = LayoutModes.Grid | LayoutModes.List; @@ -22,7 +23,7 @@ const LayoutSelector: FC = props => { }} className={mode === LayoutModes.List ? 'active' : ''} > - +
); diff --git a/public/app/core/components/PermissionList/AddPermission.tsx b/public/app/core/components/PermissionList/AddPermission.tsx index 99733d4373a..faeed7c22b1 100644 --- a/public/app/core/components/PermissionList/AddPermission.tsx +++ b/public/app/core/components/PermissionList/AddPermission.tsx @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import { UserPicker } from 'app/core/components/Select/UserPicker'; import { TeamPicker, Team } from 'app/core/components/Select/TeamPicker'; -import { LegacyForms } from '@grafana/ui'; +import { LegacyForms, Icon } from '@grafana/ui'; import { SelectableValue } from '@grafana/data'; import { User } from 'app/types'; import { @@ -91,7 +91,7 @@ class AddPermissions extends Component { return (
Add Permission For
diff --git a/public/app/core/components/TagFilter/TagBadge.tsx b/public/app/core/components/TagFilter/TagBadge.tsx index 5897947331f..6b07285acef 100644 --- a/public/app/core/components/TagFilter/TagBadge.tsx +++ b/public/app/core/components/TagFilter/TagBadge.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { getTagColorsFromName } from '@grafana/ui'; +import { getTagColorsFromName, Icon } from '@grafana/ui'; export interface Props { label: string; @@ -24,7 +24,7 @@ export class TagBadge extends React.Component { return ( - {removeIcon && } + {removeIcon && } {label} {countLabel} ); diff --git a/public/app/core/components/help/HelpModal.tsx b/public/app/core/components/help/HelpModal.tsx index 1c8bc30d2e9..552f19e9ae1 100644 --- a/public/app/core/components/help/HelpModal.tsx +++ b/public/app/core/components/help/HelpModal.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { appEvents } from 'app/core/core'; +import { Icon } from '@grafana/ui'; export class HelpModal extends React.PureComponent { static tabIndex = 0; @@ -52,11 +53,11 @@ export class HelpModal extends React.PureComponent {

- + Shortcuts

- +
diff --git a/public/app/core/components/layout_selector/layout_selector.ts b/public/app/core/components/layout_selector/layout_selector.ts index 26988228df4..6782b846c9f 100644 --- a/public/app/core/components/layout_selector/layout_selector.ts +++ b/public/app/core/components/layout_selector/layout_selector.ts @@ -9,7 +9,7 @@ const template = `
`; diff --git a/public/app/core/components/search/search.html b/public/app/core/components/search/search.html index d53ab9089fb..42202647307 100644 --- a/public/app/core/components/search/search.html +++ b/public/app/core/components/search/search.html @@ -38,24 +38,25 @@
- New dashboard + New dashboard - New folder + New folder - Import dashboard + Import dashboard - Find dashboards on Grafana.com + Find dashboards on + Grafana.com
diff --git a/public/app/features/admin/UserListAdminPage.tsx b/public/app/features/admin/UserListAdminPage.tsx index ec1bfc18b1f..96c62e33034 100644 --- a/public/app/features/admin/UserListAdminPage.tsx +++ b/public/app/features/admin/UserListAdminPage.tsx @@ -70,7 +70,7 @@ const UserListAdminPageUnConnected: React.FC = props => { Seen  - + @@ -113,7 +113,7 @@ const renderUser = (user: UserDTO) => { {user.isAdmin && ( - + )} diff --git a/public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap b/public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap index efbd8262933..1c8ace0e59d 100644 --- a/public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap +++ b/public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap @@ -52,7 +52,11 @@ exports[`ServerStats Should render table with stats 1`] = ` > + > + +
@@ -99,6 +103,7 @@ exports[`ServerStats Should render table with stats 1`] = ` className="css-vohy86" onClick={[Function]} > +
Admin diff --git a/public/app/features/admin/partials/edit_org.html b/public/app/features/admin/partials/edit_org.html index 356fbaf14ab..6b053b1f4e7 100644 --- a/public/app/features/admin/partials/edit_org.html +++ b/public/app/features/admin/partials/edit_org.html @@ -1,46 +1,52 @@
-

Edit Organization

+

Edit Organization

- -
- Name - -
+ +
+ Name + +
-
- -
- +
+ +
+ -

Organization Users

+

Organization Users

- - - - - - - - - - - + + +
UsernameEmailRole
{{orgUser.login}}{{orgUser.email}} + + + + + + + + + + + - - -
UsernameEmailRole
{{orgUser.login}}{{orgUser.email}}
- +
- 		- - - -
+ 		+ + + +
diff --git a/public/app/features/admin/partials/edit_user.html b/public/app/features/admin/partials/edit_user.html index a60ae98de6d..598267f3c7c 100644 --- a/public/app/features/admin/partials/edit_user.html +++ b/public/app/features/admin/partials/edit_user.html @@ -108,7 +108,7 @@ - + @@ -138,7 +138,7 @@ {{session.browser}} on {{session.os}} {{session.osVersion}} @@ -152,7 +152,6 @@
-

User status

@@ -177,7 +176,9 @@ > Enable - +
diff --git a/public/app/features/admin/partials/orgs.html b/public/app/features/admin/partials/orgs.html index a79e7812195..0fdd925b7c0 100644 --- a/public/app/features/admin/partials/orgs.html +++ b/public/app/features/admin/partials/orgs.html @@ -30,7 +30,7 @@ - + diff --git a/public/app/features/alerting/AlertRuleItem.tsx b/public/app/features/alerting/AlertRuleItem.tsx index e630b921237..66f761d2b51 100644 --- a/public/app/features/alerting/AlertRuleItem.tsx +++ b/public/app/features/alerting/AlertRuleItem.tsx @@ -1,8 +1,8 @@ import React, { PureComponent } from 'react'; // @ts-ignore import Highlighter from 'react-highlight-words'; -import classNames from 'classnames'; import { AlertRule } from '../../types'; +import { Icon, IconName } from '@grafana/ui'; export interface Props { rule: AlertRule; @@ -24,19 +24,11 @@ class AlertRuleItem extends PureComponent { render() { const { rule, onTogglePause } = this.props; - const iconClassName = classNames({ - fa: true, - 'fa-play': rule.state === 'paused', - 'fa-pause': rule.state !== 'paused', - }); - const ruleUrl = `${rule.url}?panelId=${rule.panelId}&fullscreen&edit&tab=alert`; return (
  • - - - +
    @@ -56,10 +48,10 @@ class AlertRuleItem extends PureComponent { title="Pausing an alert rule prevents it from executing" onClick={onTogglePause} > - + - +
    • diff --git a/public/app/features/alerting/__snapshots__/AlertRuleItem.test.tsx.snap b/public/app/features/alerting/__snapshots__/AlertRuleItem.test.tsx.snap index 3d5a61a3262..ef50083269d 100644 --- a/public/app/features/alerting/__snapshots__/AlertRuleItem.test.tsx.snap +++ b/public/app/features/alerting/__snapshots__/AlertRuleItem.test.tsx.snap @@ -4,13 +4,11 @@ exports[`Render should render component 1`] = `
  • - - - + name="icon" + size="xl" + />
    @@ -67,8 +65,8 @@ exports[`Render should render component 1`] = ` onClick={[MockFunction]} title="Pausing an alert rule prevents it from executing" > - -
    diff --git a/public/app/features/alerting/partials/alert_howto.html b/public/app/features/alerting/partials/alert_howto.html index 42de93e921f..65c0514ddbd 100644 --- a/public/app/features/alerting/partials/alert_howto.html +++ b/public/app/features/alerting/partials/alert_howto.html @@ -6,7 +6,7 @@ - + diff --git a/public/app/features/alerting/partials/alert_tab.html b/public/app/features/alerting/partials/alert_tab.html index 5dddf12e41b..7576a4f570a 100644 --- a/public/app/features/alerting/partials/alert_tab.html +++ b/public/app/features/alerting/partials/alert_tab.html @@ -1,7 +1,5 @@
    -
    - {{ctrl.error}} -
    +
    {{ctrl.error}}
    @@ -9,33 +7,35 @@
    Name - +
    Evaluate every - +
    - + - If an alert rule has a configured For and the query violates the configured - threshold it - will first go from OK to Pending. - Going from OK to Pending Grafana will not send any notifications. Once the alert - rule - has - been firing for more than For duration, it will change to Alerting and send alert - notifications. + If an alert rule has a configured For and the query violates the configured threshold it will first go + from OK to Pending. Going from OK to Pending Grafana will not send any notifications. Once the alert rule + has been firing for more than For duration, it will change to Alerting and send alert notifications.
    - +
    @@ -43,37 +43,57 @@

    Conditions

    - + WHEN
    - + OF
    - +
    - - - - + + + +
    - +
    Message - +
    Tags
    - +
    )} @@ -48,14 +49,14 @@ export function QueryRowActions(props: Props) { disabled={isNotStarted} className="gf-form-label gf-form-label--btn" onClick={onClickToggleDisabled} - title="Disable/enable query" + title={isDisabled ? 'Enable query' : 'Disable query'} > - +
    diff --git a/public/app/features/explore/ResponsiveButton.tsx b/public/app/features/explore/ResponsiveButton.tsx index 6821a163cf2..091cc983d6e 100644 --- a/public/app/features/explore/ResponsiveButton.tsx +++ b/public/app/features/explore/ResponsiveButton.tsx @@ -1,4 +1,5 @@ import React, { forwardRef } from 'react'; +import { IconName, Icon } from '@grafana/ui'; export enum IconSide { left = 'left', @@ -10,6 +11,7 @@ interface Props extends React.HTMLAttributes { title: string; onClick: () => void; buttonClassName?: string; + icon?: IconName; iconClassName?: string; iconSide?: IconSide; disabled?: boolean; @@ -25,7 +27,17 @@ export const ResponsiveButton = forwardRef((props, ref) = }; props = { ...defaultProps, ...props }; - const { title, onClick, buttonClassName, iconClassName, splitted, iconSide, disabled, ...divElementProps } = props; + const { + title, + onClick, + buttonClassName, + icon, + iconClassName, + splitted, + iconSide, + disabled, + ...divElementProps + } = props; return (
    @@ -34,9 +46,9 @@ export const ResponsiveButton = forwardRef((props, ref) = onClick={onClick} disabled={disabled || false} > - {iconClassName && iconSide === IconSide.left ? : null} + {icon && iconSide === IconSide.left ? : null} {!splitted ? formatBtnTitle(title, iconSide) : ''} - {iconClassName && iconSide === IconSide.right ? : null} + {icon && iconSide === IconSide.right ? : null}
    ); diff --git a/public/app/features/explore/RichHistory/RichHistory.tsx b/public/app/features/explore/RichHistory/RichHistory.tsx index 9d368938328..63dcf12b66c 100644 --- a/public/app/features/explore/RichHistory/RichHistory.tsx +++ b/public/app/features/explore/RichHistory/RichHistory.tsx @@ -10,7 +10,7 @@ import { stylesFactory, withTheme } from '@grafana/ui'; //Types import { RichHistoryQuery, ExploreId } from 'app/types/explore'; import { SelectableValue, GrafanaTheme } from '@grafana/data'; -import { TabsBar, Tab, TabContent, Themeable, CustomScrollbar, IconName } from '@grafana/ui'; +import { TabsBar, Tab, TabContent, Themeable, CustomScrollbar, IconName, Icon } from '@grafana/ui'; //Components import { RichHistorySettings } from './RichHistorySettings'; @@ -169,7 +169,7 @@ class UnThemedRichHistory extends PureComponent ), - icon: 'fa fa-history', + icon: 'history', }; const StarredTab = { @@ -186,7 +186,7 @@ class UnThemedRichHistory extends PureComponent ), - icon: 'fa fa-star', + icon: 'star', }; const SettingsTab = { @@ -203,7 +203,7 @@ class UnThemedRichHistory extends PureComponent ), - icon: 'gicon gicon-preferences', + icon: 'sliders-v-alt', }; let tabs = [QueriesTab, StarredTab, SettingsTab]; @@ -220,7 +220,7 @@ class UnThemedRichHistory extends PureComponent ))}
    - +
    { describe('commenting', () => { it('should render comment, if comment present', () => { const wrapper = setup({ query: starredQueryWithComment }); - expect(wrapper.find({ 'aria-label': 'Query comment' })).toHaveLength(1); + expect(wrapper.find({ 'aria-label': 'Query comment' }).hostNodes()).toHaveLength(1); expect(wrapper.find({ 'aria-label': 'Query comment' }).text()).toEqual('test comment'); }); it('should have title "Edit comment" at comment icon, if comment present', () => { const wrapper = setup({ query: starredQueryWithComment }); - expect(wrapper.find({ title: 'Edit comment' })).toHaveLength(1); - expect(wrapper.find({ title: 'Add comment' })).toHaveLength(0); + expect(wrapper.find({ title: 'Edit comment' }).hostNodes()).toHaveLength(1); + expect(wrapper.find({ title: 'Add comment' }).hostNodes()).toHaveLength(0); }); it('should have title "Add comment" at comment icon, if no comment present', () => { const wrapper = setup(); - expect(wrapper.find({ title: 'Add comment' })).toHaveLength(1); - expect(wrapper.find({ title: 'Edit comment' })).toHaveLength(0); + expect(wrapper.find({ title: 'Add comment' }).hostNodes()).toHaveLength(1); + expect(wrapper.find({ title: 'Edit comment' }).hostNodes()).toHaveLength(0); }); }); describe('starring', () => { it('should have title "Star query", if not starred', () => { const wrapper = setup(); - expect(wrapper.find({ title: 'Star query' })).toHaveLength(1); - }); - it('should render fa-star-o icon, if not starred', () => { - const wrapper = setup(); - expect(wrapper.find({ title: 'Star query' }).hasClass('fa-star-o')).toBe(true); + expect(wrapper.find({ title: 'Star query' }).hostNodes()).toHaveLength(1); }); it('should have title "Unstar query", if not starred', () => { const wrapper = setup({ query: starredQueryWithComment }); - expect(wrapper.find({ title: 'Unstar query' })).toHaveLength(1); - }); - it('should have fa-star icon, if not starred', () => { - const wrapper = setup({ query: starredQueryWithComment }); - expect(wrapper.find({ title: 'Unstar query' }).hasClass('fa-star')).toBe(true); + expect(wrapper.find({ title: 'Unstar query' }).hostNodes()).toHaveLength(1); }); }); }); diff --git a/public/app/features/explore/RichHistory/RichHistoryCard.tsx b/public/app/features/explore/RichHistory/RichHistoryCard.tsx index 0f0f86cbe78..373030d0ed7 100644 --- a/public/app/features/explore/RichHistory/RichHistoryCard.tsx +++ b/public/app/features/explore/RichHistory/RichHistoryCard.tsx @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import { connect } from 'react-redux'; import { hot } from 'react-hot-loader'; import { css, cx } from 'emotion'; -import { stylesFactory, useTheme, Forms, Button } from '@grafana/ui'; +import { stylesFactory, useTheme, Forms, Button, Icon } from '@grafana/ui'; import { GrafanaTheme, AppEvents, DataSourceApi } from '@grafana/data'; import { RichHistoryQuery, ExploreId } from 'app/types/explore'; import { copyStringToClipboard, createUrlFromRichHistory, createDataQuery } from 'app/core/utils/richHistory'; @@ -76,9 +76,8 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => { display: flex; justify-content: flex-end; font-size: ${theme.typography.size.base}; - i { - margin: ${theme.spacing.xs}; - cursor: pointer; + svg { + margin-left: ${theme.spacing.sm}; } `, queryContainer: css` @@ -212,19 +211,20 @@ export function RichHistoryCard(props: Props) { const queryActionButtons = (
    - 0 ? 'Edit comment' : 'Add comment'} - > - - {!isRemoved && } - - + + {!isRemoved && } + + + />
    ); diff --git a/public/app/features/explore/RunButton.tsx b/public/app/features/explore/RunButton.tsx index 861e3efd9e1..33fa1982b60 100644 --- a/public/app/features/explore/RunButton.tsx +++ b/public/app/features/explore/RunButton.tsx @@ -40,7 +40,8 @@ export function RunButton(props: Props) { 'navbar-button--danger': loading, 'btn--radius-right-0': showDropdown, })} - iconClassName={loading ? 'fa fa-spinner fa-fw fa-spin run-icon' : 'fa fa-refresh fa-fw'} + icon={loading ? 'fa fa-spinner' : 'sync'} + iconClassName={loading && ' fa-spin run-icon'} /> ); diff --git a/public/app/features/explore/__snapshots__/QueryRowActions.test.tsx.snap b/public/app/features/explore/__snapshots__/QueryRowActions.test.tsx.snap index d077fbc5194..4f044cccaee 100644 --- a/public/app/features/explore/__snapshots__/QueryRowActions.test.tsx.snap +++ b/public/app/features/explore/__snapshots__/QueryRowActions.test.tsx.snap @@ -12,8 +12,8 @@ exports[`QueryRowActions should render component 1`] = ` className="gf-form-label gf-form-label--btn" onClick={[Function]} > -
    @@ -35,10 +35,10 @@ exports[`QueryRowActions should render component 1`] = ` className="gf-form-label gf-form-label--btn" disabled={true} onClick={[Function]} - title="Disable/enable query" + title="Disable query" > -
    @@ -50,8 +50,8 @@ exports[`QueryRowActions should render component 1`] = ` onClick={[Function]} title="Remove query" > -
    diff --git a/public/app/features/manage-dashboards/components/MoveToFolderModal/template.html b/public/app/features/manage-dashboards/components/MoveToFolderModal/template.html index fb5730b0477..48fcbbc9115 100644 --- a/public/app/features/manage-dashboards/components/MoveToFolderModal/template.html +++ b/public/app/features/manage-dashboards/components/MoveToFolderModal/template.html @@ -6,7 +6,7 @@ - + diff --git a/public/app/features/playlist/partials/playlist_search.html b/public/app/features/playlist/partials/playlist_search.html index 3a97c8f7931..f1fcad8f63a 100644 --- a/public/app/features/playlist/partials/playlist_search.html +++ b/public/app/features/playlist/partials/playlist_search.html @@ -2,7 +2,7 @@ - + diff --git a/public/app/features/plugins/partials/update_instructions.html b/public/app/features/plugins/partials/update_instructions.html index b4164d6e65c..5a94e687c44 100644 --- a/public/app/features/plugins/partials/update_instructions.html +++ b/public/app/features/plugins/partials/update_instructions.html @@ -6,7 +6,7 @@ - + diff --git a/public/app/features/profile/partials/profile.html b/public/app/features/profile/partials/profile.html index c0450877a36..08e3ffdb68b 100644 --- a/public/app/features/profile/partials/profile.html +++ b/public/app/features/profile/partials/profile.html @@ -24,7 +24,7 @@ {{ session.browser }} on {{ session.os }} {{ session.osVersion }} diff --git a/public/app/features/teams/TeamGroupSync.tsx b/public/app/features/teams/TeamGroupSync.tsx index 9f9c124e176..fdbba5b3536 100644 --- a/public/app/features/teams/TeamGroupSync.tsx +++ b/public/app/features/teams/TeamGroupSync.tsx @@ -66,7 +66,7 @@ export class TeamGroupSync extends PureComponent { {group.groupId} this.onRemoveGroup(group)}> - + @@ -95,7 +95,7 @@ export class TeamGroupSync extends PureComponent {
    Add External Group
    diff --git a/public/app/features/teams/TeamMembers.tsx b/public/app/features/teams/TeamMembers.tsx index ebbeb3a71cd..45348c71cf7 100644 --- a/public/app/features/teams/TeamMembers.tsx +++ b/public/app/features/teams/TeamMembers.tsx @@ -1,5 +1,6 @@ import React, { PureComponent } from 'react'; import { connect } from 'react-redux'; +import { Icon } from '@grafana/ui'; import { SlideDown } from 'app/core/components/Animations/SlideDown'; import { UserPicker } from 'app/core/components/Select/UserPicker'; import { TagBadge } from 'app/core/components/TagFilter/TagBadge'; @@ -97,7 +98,7 @@ export class TeamMembers extends PureComponent {
    Add team member
    diff --git a/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap b/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap index 4da1e5313cd..df52c9ed59e 100644 --- a/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap +++ b/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap @@ -33,8 +33,8 @@ exports[`Render should render component 1`] = ` className="cta-form__close btn btn-transparent" onClick={[Function]} > -
    @@ -124,8 +124,8 @@ exports[`Render should render groups table 1`] = ` className="cta-form__close btn btn-transparent" onClick={[Function]} > -
    @@ -198,8 +198,8 @@ exports[`Render should render groups table 1`] = ` className="btn btn-danger btn-small" onClick={[Function]} > - @@ -221,8 +221,8 @@ exports[`Render should render groups table 1`] = ` className="btn btn-danger btn-small" onClick={[Function]} > - @@ -244,8 +244,8 @@ exports[`Render should render groups table 1`] = ` className="btn btn-danger btn-small" onClick={[Function]} > - diff --git a/public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap b/public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap index 9d500d9a79f..18263d5f116 100644 --- a/public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap +++ b/public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap @@ -37,8 +37,8 @@ exports[`Render should render component 1`] = ` className="cta-form__close btn btn-transparent" onClick={[Function]} > -
    @@ -131,8 +131,8 @@ exports[`Render should render team members 1`] = ` className="cta-form__close btn btn-transparent" onClick={[Function]} > -
    diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html index 8f4398b0183..d2a2bad6841 100644 --- a/public/app/features/templating/partials/editor.html +++ b/public/app/features/templating/partials/editor.html @@ -94,7 +94,7 @@ class="btn btn-danger btn-small" aria-label="{{::selectors.tableRowRemoveButtons(variable.name)}}" > - + diff --git a/public/app/features/users/InviteeRow.tsx b/public/app/features/users/InviteeRow.tsx index e75138cb700..c2d1d9ca498 100644 --- a/public/app/features/users/InviteeRow.tsx +++ b/public/app/features/users/InviteeRow.tsx @@ -2,6 +2,7 @@ import React, { createRef, PureComponent } from 'react'; import { connect } from 'react-redux'; import { Invitee } from 'app/types'; import { revokeInvite } from './state/actions'; +import { Icon } from '@grafana/ui'; export interface Props { invitee: Invitee; @@ -40,7 +41,7 @@ class InviteeRow extends PureComponent { diff --git a/public/app/features/users/UsersTable.tsx b/public/app/features/users/UsersTable.tsx index e393ad0260a..514aaaeaf13 100644 --- a/public/app/features/users/UsersTable.tsx +++ b/public/app/features/users/UsersTable.tsx @@ -1,5 +1,6 @@ import React, { FC } from 'react'; import { OrgUser } from 'app/types'; +import { Icon } from '@grafana/ui'; export interface Props { users: OrgUser[]; @@ -55,7 +56,7 @@ const UsersTable: FC = props => {
    onRemoveUser(user)} className="btn btn-danger btn-small"> - +
    diff --git a/public/app/features/users/__snapshots__/UsersTable.test.tsx.snap b/public/app/features/users/__snapshots__/UsersTable.test.tsx.snap index 8a3da3cc22b..5fbfb0104a9 100644 --- a/public/app/features/users/__snapshots__/UsersTable.test.tsx.snap +++ b/public/app/features/users/__snapshots__/UsersTable.test.tsx.snap @@ -127,8 +127,8 @@ exports[`Render should render users table 1`] = ` className="btn btn-danger btn-small" onClick={[Function]} > -
    @@ -193,8 +193,8 @@ exports[`Render should render users table 1`] = ` className="btn btn-danger btn-small" onClick={[Function]} > -
    @@ -259,8 +259,8 @@ exports[`Render should render users table 1`] = ` className="btn btn-danger btn-small" onClick={[Function]} > -
    @@ -325,8 +325,8 @@ exports[`Render should render users table 1`] = ` className="btn btn-danger btn-small" onClick={[Function]} > - @@ -391,8 +391,8 @@ exports[`Render should render users table 1`] = ` className="btn btn-danger btn-small" onClick={[Function]} > - @@ -457,8 +457,8 @@ exports[`Render should render users table 1`] = ` className="btn btn-danger btn-small" onClick={[Function]} > - diff --git a/public/app/features/variables/editor/VariableEditorList.tsx b/public/app/features/variables/editor/VariableEditorList.tsx index f351030caae..3ae1e835e48 100644 --- a/public/app/features/variables/editor/VariableEditorList.tsx +++ b/public/app/features/variables/editor/VariableEditorList.tsx @@ -3,6 +3,7 @@ import { e2e } from '@grafana/e2e'; import EmptyListCTA from '../../../core/components/EmptyListCTA/EmptyListCTA'; import { QueryVariableModel, VariableModel } from '../../templating/types'; import { toVariableIdentifier, VariableIdentifier } from '../state/types'; +import { Icon } from '@grafana/ui'; export interface Props { variables: VariableModel[]; @@ -148,7 +149,7 @@ export class VariableEditorList extends PureComponent { variable.name )} > - + diff --git a/public/app/partials/confirm_modal.html b/public/app/partials/confirm_modal.html index 62fb1bc54c9..940eae3bbe8 100644 --- a/public/app/partials/confirm_modal.html +++ b/public/app/partials/confirm_modal.html @@ -1,34 +1,51 @@
    -
    -

    - - - {{title}} - -

    +
    +

    + + + {{title}} + +

    - - - -
    + + + +
    -
    - -
    - {{text}} -
    +
    +
    + {{text}} +
    {{text2}}
    -
    +
    -
    - -
    - -
    - - - -
    -
    +
    + +
    +
    + + + +
    +
    diff --git a/public/app/partials/edit_json.html b/public/app/partials/edit_json.html index 5f06606cd6c..03a2ade6537 100644 --- a/public/app/partials/edit_json.html +++ b/public/app/partials/edit_json.html @@ -5,7 +5,7 @@ diff --git a/public/app/plugins/datasource/elasticsearch/configuration/DataLinks.tsx b/public/app/plugins/datasource/elasticsearch/configuration/DataLinks.tsx index 06d09451577..0702531a6ce 100644 --- a/public/app/plugins/datasource/elasticsearch/configuration/DataLinks.tsx +++ b/public/app/plugins/datasource/elasticsearch/configuration/DataLinks.tsx @@ -67,7 +67,7 @@ export const DataLinks = (props: Props) => { className={css` margin-right: 10px; `} - icon="plus" + icon="plus-circle" onClick={event => { event.preventDefault(); const newDataLinks = [...(value || []), { field: '', url: '' }]; diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/partials/query.editor.html b/public/app/plugins/datasource/grafana-azure-monitor-datasource/partials/query.editor.html index f7e4e310f8b..0ed8408d6a4 100644 --- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/partials/query.editor.html +++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/partials/query.editor.html @@ -1,16 +1,33 @@ - +
    - +
    -
    +
    - +
    @@ -21,20 +38,38 @@
    - +
    - +
    - +
    @@ -44,21 +79,37 @@
    - +
    - +
    - +
    @@ -66,8 +117,12 @@
    - +
    @@ -82,19 +137,35 @@
    - +
    - +
    - +
    @@ -103,8 +174,14 @@
    - +
    @@ -117,8 +194,14 @@
    - +
    @@ -150,8 +233,12 @@
    - +
    @@ -211,7 +298,6 @@ - | summarize count() by Category, bin(TimeGenerated, $__interval)
    -
    @@ -219,16 +305,25 @@
    - +
    - +
    @@ -238,20 +333,35 @@
    - + -
    - +
    @@ -262,22 +372,42 @@
    - +
    -
    - +
    +
    -
    -
    - -
    +
    +
    +
    +
    - +
    @@ -287,8 +417,14 @@
    - +
    @@ -314,14 +450,25 @@
    - +
    - +
    @@ -331,8 +478,13 @@
    - +
    diff --git a/public/app/plugins/datasource/graphite/FunctionEditorControls.tsx b/public/app/plugins/datasource/graphite/FunctionEditorControls.tsx index 9862cc4f038..618e0fac2de 100644 --- a/public/app/plugins/datasource/graphite/FunctionEditorControls.tsx +++ b/public/app/plugins/datasource/graphite/FunctionEditorControls.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Icon } from '@grafana/ui'; export interface FunctionDescriptor { text: string; @@ -21,12 +22,13 @@ export interface FunctionEditorControlsProps { const FunctionHelpButton = (props: { description: string; name: string; onDescriptionShow: () => void }) => { if (props.description) { - return ; + return ; } return ( - { window.open( 'http://graphite.readthedocs.org/en/latest/functions.html#graphite.render.functions.' + props.name, @@ -58,8 +60,8 @@ export const FunctionEditorControls = ( description={func.def.description} onDescriptionShow={onDescriptionShow} /> - onRemove(func)} /> - onMoveRight(func)} /> + onRemove(func)} /> + onMoveRight(func)} />
    ); }; diff --git a/public/app/plugins/datasource/influxdb/partials/query.editor.html b/public/app/plugins/datasource/influxdb/partials/query.editor.html index ba99b396e6e..0d09141cfd3 100644 --- a/public/app/plugins/datasource/influxdb/partials/query.editor.html +++ b/public/app/plugins/datasource/influxdb/partials/query.editor.html @@ -135,7 +135,7 @@
    diff --git a/public/app/plugins/datasource/loki/configuration/DerivedFields.tsx b/public/app/plugins/datasource/loki/configuration/DerivedFields.tsx index 4a2e9ea7f2f..fcb080a70a4 100644 --- a/public/app/plugins/datasource/loki/configuration/DerivedFields.tsx +++ b/public/app/plugins/datasource/loki/configuration/DerivedFields.tsx @@ -70,7 +70,7 @@ export const DerivedFields = (props: Props) => { className={css` margin-right: 10px; `} - icon="plus" + icon="plus-circle" onClick={event => { event.preventDefault(); const newDerivedFields = [...(value || []), { name: '', matcherRegex: '' }]; diff --git a/public/app/plugins/datasource/opentsdb/partials/query.editor.html b/public/app/plugins/datasource/opentsdb/partials/query.editor.html index 44ee8ebb57f..5418e420b20 100644 --- a/public/app/plugins/datasource/opentsdb/partials/query.editor.html +++ b/public/app/plugins/datasource/opentsdb/partials/query.editor.html @@ -107,7 +107,7 @@ - +
    @@ -183,7 +183,7 @@ - +
    @@ -213,7 +213,7 @@
    diff --git a/public/app/plugins/datasource/stackdriver/components/LabelFilter.tsx b/public/app/plugins/datasource/stackdriver/components/LabelFilter.tsx index e185a4e9aa5..2f77318980e 100644 --- a/public/app/plugins/datasource/stackdriver/components/LabelFilter.tsx +++ b/public/app/plugins/datasource/stackdriver/components/LabelFilter.tsx @@ -13,7 +13,7 @@ export interface Props { } const removeText = '-- remove filter --'; -const removeOption: SelectableValue = { label: removeText, value: removeText, icon: 'fa fa-remove' }; +const removeOption: SelectableValue = { label: removeText, value: removeText, icon: 'times' }; const operators = ['=', '!=', '=~', '!=~']; export const LabelFilter: FunctionComponent = ({ diff --git a/public/app/plugins/panel/gettingstarted/GettingStarted.tsx b/public/app/plugins/panel/gettingstarted/GettingStarted.tsx index a5f96f56c6d..0933f798730 100644 --- a/public/app/plugins/panel/gettingstarted/GettingStarted.tsx +++ b/public/app/plugins/panel/gettingstarted/GettingStarted.tsx @@ -2,6 +2,7 @@ import React, { PureComponent } from 'react'; import { PanelProps } from '@grafana/data'; +import { Icon } from '@grafana/ui'; import { getDatasourceSrv } from 'app/features/plugins/datasource_srv'; import { backendSrv } from 'app/core/services/backend_srv'; import { contextSrv } from 'app/core/core'; @@ -144,7 +145,7 @@ export class GettingStarted extends PureComponent { return (
    {this.steps.map((step, index) => { diff --git a/public/app/plugins/panel/singlestat/mappings.html b/public/app/plugins/panel/singlestat/mappings.html index 2f65efe78e2..027c77e6903 100644 --- a/public/app/plugins/panel/singlestat/mappings.html +++ b/public/app/plugins/panel/singlestat/mappings.html @@ -1,13 +1,17 @@
    - - Type - -
    - -
    + + Type + +
    + +
    @@ -16,13 +20,25 @@
    - + - + - + - +
    @@ -37,15 +53,15 @@
    Set range mappings
    - - - - From - - To - - Text - + + + + From + + To + + Text +
    diff --git a/public/app/plugins/panel/table/column_options.html b/public/app/plugins/panel/table/column_options.html index 05e6c3e07d7..51a355b1871 100644 --- a/public/app/plugins/panel/table/column_options.html +++ b/public/app/plugins/panel/table/column_options.html @@ -4,16 +4,39 @@
    - +
    - +
    - +
    @@ -22,37 +45,62 @@
    - +
    - +
    - +
    - +
    - +
    @@ -62,8 +110,14 @@
    - +
    @@ -77,20 +131,36 @@ Type
    - +
    - + - + - +
    -
    +
    @@ -204,4 +305,3 @@  Add column style
    - diff --git a/public/app/plugins/panel/table/editor.html b/public/app/plugins/panel/table/editor.html index 47874439713..52ade842f3e 100644 --- a/public/app/plugins/panel/table/editor.html +++ b/public/app/plugins/panel/table/editor.html @@ -18,7 +18,7 @@
    diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index 4b6ebfa3f26..a451adf43c3 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -40,8 +40,7 @@ $input-border: 1px solid $input-border-color; .gf-form-input-icon { position: absolute; - top: 50%; - margin-top: -8px; + top: 10px; font-size: $font-size-lg; left: 10px; color: $input-color-placeholder; @@ -370,7 +369,6 @@ $input-border: 1px solid $input-border-color; .gf-form-help-icon { flex-grow: 0; - padding-left: $spacer; color: $text-color-weak; &--bold { diff --git a/public/sass/pages/_alerting.scss b/public/sass/pages/_alerting.scss index 3d031b7f308..23505d4d4e1 100644 --- a/public/sass/pages/_alerting.scss +++ b/public/sass/pages/_alerting.scss @@ -101,6 +101,7 @@ .alert-rule-item { display: flex; + align-items: center; width: 100%; height: 100%; background: $card-background; diff --git a/public/test/jest-setup.ts b/public/test/jest-setup.ts index fdcc0361906..da9b22ad119 100644 --- a/public/test/jest-setup.ts +++ b/public/test/jest-setup.ts @@ -23,15 +23,6 @@ angular.module('grafana.routes', ['ngRoute']); jest.mock('app/core/core', () => ({})); jest.mock('app/features/plugins/plugin_loader', () => ({})); -/* Temporary solution as Jest can't parse Unicons imports. - * Therefore we are mocking in for all tests. Needs to be fixed before merging to master. - */ -jest.mock('@grafana/ui/src/components/Icon/Icon', () => { - return { - Icon: () => null as any, - }; -}); - configure({ adapter: new Adapter() }); const localStorageMock = (() => {