From 59c081e89697da576c339eed3fe4966be47c8b58 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 7 Apr 2019 14:32:41 +0200 Subject: [PATCH 01/59] BarGauge: Fixed minor margin issue (#16419) Fixed margin issue that was not accounted for in width calc (#16419) --- .../grafana-ui/src/components/BarGauge/BarGauge.tsx | 10 ++++++++-- .../BarGauge/__snapshots__/BarGauge.test.tsx.snap | 2 +- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx index 6622545229e98..ea73c74e1532c 100644 --- a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx +++ b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx @@ -286,7 +286,7 @@ export function getTitleStyles(props: Props): { wrapper: CSSProperties; title: C titleStyles.width = `${titleDim.width}px`; titleStyles.textAlign = 'right'; - titleStyles.marginRight = '10px'; + titleStyles.paddingRight = '10px'; } } @@ -344,6 +344,11 @@ function calculateBarAndValueDimensions(props: Props): BarAndValueDimensions { } } + // console.log('titleDim', titleDim); + // console.log('valueWidth', valueWidth); + // console.log('width', width); + // console.log('total', titleDim.width + maxBarWidth + valueWidth); + return { valueWidth, valueHeight, @@ -409,7 +414,8 @@ export function getBasicAndGradientStyles(props: Props): BasicAndGradientStyles barStyles.transition = 'width 1s'; barStyles.height = `${maxBarHeight}px`; barStyles.width = `${barWidth}px`; - barStyles.marginRight = '10px'; + + valueStyles.paddingLeft = '10px'; if (isBasic) { // Basic styles diff --git a/packages/grafana-ui/src/components/BarGauge/__snapshots__/BarGauge.test.tsx.snap b/packages/grafana-ui/src/components/BarGauge/__snapshots__/BarGauge.test.tsx.snap index 7a9fb4b468ba2..4bb9395dd96ed 100644 --- a/packages/grafana-ui/src/components/BarGauge/__snapshots__/BarGauge.test.tsx.snap +++ b/packages/grafana-ui/src/components/BarGauge/__snapshots__/BarGauge.test.tsx.snap @@ -20,6 +20,7 @@ exports[`BarGauge Render with basic options should render 1`] = ` "display": "flex", "fontSize": "27.27px", "height": "300px", + "paddingLeft": "10px", "width": "60px", } } @@ -33,7 +34,6 @@ exports[`BarGauge Render with basic options should render 1`] = ` "borderRadius": "3px", "borderRight": "2px solid #73BF69", "height": "300px", - "marginRight": "10px", "transition": "width 1s", "width": "60px", } From f120f5a737194c4674eecdf21a5f46993d914815 Mon Sep 17 00:00:00 2001 From: Reiner Gerecke Date: Sun, 7 Apr 2019 14:35:28 +0200 Subject: [PATCH 02/59] Docs: Remove broken youtube link in timerange reference (#16415) The video on youtube got removed. Fixes #16302 --- docs/sources/reference/timerange.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/sources/reference/timerange.md b/docs/sources/reference/timerange.md index 4121ed8793102..03fcdda570855 100644 --- a/docs/sources/reference/timerange.md +++ b/docs/sources/reference/timerange.md @@ -53,7 +53,7 @@ From Dashboard settings, click the Timepicker tab. From here you can specify the ### Defining Now -Users often ask, [when will then be now](https://www.youtube.com/watch?v=VeZ9HhHU86o)? Grafana offers the ability to override the `now` value on a per dashboard basis. Most commonly, this feature is used to accommodate known delays in data aggregation to avoid null values. +Grafana offers the ability to override the `now` value on a per dashboard basis. Most commonly, this feature is used to accommodate known delays in data aggregation to avoid null values. ## Panel time overrides & timeshift From 8a4a6b4dc147c7f5354c9e9a98991ef04b9a10ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 7 Apr 2019 14:42:42 +0200 Subject: [PATCH 03/59] Units: Correctly use the override decimals (#16413) Fixes bugs introduced in PR #14716 and #15146 also restores unit tests that where lost in the move from kbn units to @grafana/ui units Fixes #16068 Fixes #16373 --- packages/grafana-ui/src/types/displayValue.ts | 6 ++-- .../grafana-ui/src/utils/displayValue.test.ts | 7 +++++ packages/grafana-ui/src/utils/displayValue.ts | 31 ++++++++++--------- .../valueFormats/arithmeticFormatters.ts | 3 +- .../utils/valueFormats/dateTimeFormatters.ts | 3 +- .../utils/valueFormats/symbolFormatters.ts | 3 +- .../utils/valueFormats/valueFormats.test.ts | 29 +++++++++++++++++ .../src/utils/valueFormats/valueFormats.ts | 3 +- 8 files changed, 63 insertions(+), 22 deletions(-) create mode 100644 packages/grafana-ui/src/utils/valueFormats/valueFormats.test.ts diff --git a/packages/grafana-ui/src/types/displayValue.ts b/packages/grafana-ui/src/types/displayValue.ts index f1ca32c3c9cae..475465a30f1b3 100644 --- a/packages/grafana-ui/src/types/displayValue.ts +++ b/packages/grafana-ui/src/types/displayValue.ts @@ -6,7 +6,9 @@ export interface DisplayValue { fontSize?: string; } +export type DecimalCount = number | null | undefined; + export interface DecimalInfo { - decimals: number; - scaledDecimals: number; + decimals: DecimalCount; + scaledDecimals: DecimalCount; } diff --git a/packages/grafana-ui/src/utils/displayValue.test.ts b/packages/grafana-ui/src/utils/displayValue.test.ts index 1849daa76d732..16fc405cfa03f 100644 --- a/packages/grafana-ui/src/utils/displayValue.test.ts +++ b/packages/grafana-ui/src/utils/displayValue.test.ts @@ -158,6 +158,12 @@ describe('Format value', () => { expect(instance(value).text).toEqual('0.02'); }); + it('should use override decimals', () => { + const value = 100030303; + const instance = getDisplayProcessor({ decimals: 2, unit: 'bytes' }); + expect(instance(value).text).toEqual('95.40 MiB'); + }); + it('should return mapped value if there are matching value mappings', () => { const valueMappings: ValueMapping[] = [ { id: 0, operator: '', text: '1-20', type: MappingType.RangeToText, from: '1', to: '20' }, @@ -182,5 +188,6 @@ describe('getDecimalsForValue()', () => { expect(getDecimalsForValue(20000)).toEqual({ decimals: 0, scaledDecimals: -2 }); expect(getDecimalsForValue(200000)).toEqual({ decimals: 0, scaledDecimals: -3 }); expect(getDecimalsForValue(200000000)).toEqual({ decimals: 0, scaledDecimals: -6 }); + expect(getDecimalsForValue(100, 2)).toEqual({ decimals: 2, scaledDecimals: null }); }); }); diff --git a/packages/grafana-ui/src/utils/displayValue.ts b/packages/grafana-ui/src/utils/displayValue.ts index 87fd101d3a738..12208ce042920 100644 --- a/packages/grafana-ui/src/utils/displayValue.ts +++ b/packages/grafana-ui/src/utils/displayValue.ts @@ -8,8 +8,15 @@ import { getMappedValue } from './valueMappings'; import { getColorFromHexRgbOrName } from './namedColorsPalette'; // Types -import { Threshold, ValueMapping, DecimalInfo, DisplayValue, GrafanaTheme, GrafanaThemeType } from '../types'; -import { DecimalCount } from './valueFormats/valueFormats'; +import { + Threshold, + ValueMapping, + DecimalInfo, + DisplayValue, + GrafanaTheme, + GrafanaThemeType, + DecimalCount, +} from '../types'; export type DisplayProcessor = (value: any) => DisplayValue; @@ -69,18 +76,7 @@ export function getDisplayProcessor(options?: DisplayValueOptions): DisplayProce if (!isNaN(numeric)) { if (shouldFormat && !_.isBoolean(value)) { - let decimals; - let scaledDecimals = 0; - - if (!options.decimals) { - const decimalInfo = getDecimalsForValue(value); - - decimals = decimalInfo.decimals; - scaledDecimals = decimalInfo.scaledDecimals; - } else { - decimals = options.decimals; - } - + const { decimals, scaledDecimals } = getDecimalsForValue(value, options.decimals); text = formatFunc(numeric, decimals, scaledDecimals, options.isUtc); } if (thresholds && thresholds.length > 0) { @@ -159,7 +155,12 @@ export function getColorFromThreshold(value: number, thresholds: Threshold[], th return getColorFromHexRgbOrName(thresholds[0].color, themeType); } -export function getDecimalsForValue(value: number): DecimalInfo { +export function getDecimalsForValue(value: number, decimalOverride?: DecimalCount): DecimalInfo { + if (_.isNumber(decimalOverride)) { + // It's important that scaledDecimals is null here + return { decimals: decimalOverride, scaledDecimals: null }; + } + const delta = value / 2; let dec = -Math.floor(Math.log(delta) / Math.LN10); diff --git a/packages/grafana-ui/src/utils/valueFormats/arithmeticFormatters.ts b/packages/grafana-ui/src/utils/valueFormats/arithmeticFormatters.ts index 8ff5a1ff5e7e2..d7044782944bb 100644 --- a/packages/grafana-ui/src/utils/valueFormats/arithmeticFormatters.ts +++ b/packages/grafana-ui/src/utils/valueFormats/arithmeticFormatters.ts @@ -1,4 +1,5 @@ -import { toFixed, DecimalCount } from './valueFormats'; +import { toFixed } from './valueFormats'; +import { DecimalCount } from '../../types'; export function toPercent(size: number, decimals: DecimalCount) { if (size === null) { diff --git a/packages/grafana-ui/src/utils/valueFormats/dateTimeFormatters.ts b/packages/grafana-ui/src/utils/valueFormats/dateTimeFormatters.ts index 819b73586d52d..bad77191fb5e0 100644 --- a/packages/grafana-ui/src/utils/valueFormats/dateTimeFormatters.ts +++ b/packages/grafana-ui/src/utils/valueFormats/dateTimeFormatters.ts @@ -1,4 +1,5 @@ -import { toFixed, toFixedScaled, DecimalCount } from './valueFormats'; +import { toFixed, toFixedScaled } from './valueFormats'; +import { DecimalCount } from '../../types'; import moment from 'moment'; interface IntervalsInSeconds { diff --git a/packages/grafana-ui/src/utils/valueFormats/symbolFormatters.ts b/packages/grafana-ui/src/utils/valueFormats/symbolFormatters.ts index da8198daf5ae1..6c1a9682c74ad 100644 --- a/packages/grafana-ui/src/utils/valueFormats/symbolFormatters.ts +++ b/packages/grafana-ui/src/utils/valueFormats/symbolFormatters.ts @@ -1,4 +1,5 @@ -import { scaledUnits, DecimalCount } from './valueFormats'; +import { scaledUnits } from './valueFormats'; +import { DecimalCount } from '../../types'; export function currency(symbol: string) { const units = ['', 'K', 'M', 'B', 'T']; diff --git a/packages/grafana-ui/src/utils/valueFormats/valueFormats.test.ts b/packages/grafana-ui/src/utils/valueFormats/valueFormats.test.ts new file mode 100644 index 0000000000000..a7ab2b919b85d --- /dev/null +++ b/packages/grafana-ui/src/utils/valueFormats/valueFormats.test.ts @@ -0,0 +1,29 @@ +import { toFixed, getValueFormat } from './valueFormats'; + +describe('kbn.toFixed and negative decimals', () => { + it('should treat as zero decimals', () => { + const str = toFixed(186.123, -2); + expect(str).toBe('186'); + }); +}); + +describe('kbn ms format when scaled decimals is null do not use it', () => { + it('should use specified decimals', () => { + const str = getValueFormat('ms')(10000086.123, 1, null); + expect(str).toBe('2.8 hour'); + }); +}); + +describe('kbn kbytes format when scaled decimals is null do not use it', () => { + it('should use specified decimals', () => { + const str = getValueFormat('kbytes')(10000000, 3, null); + expect(str).toBe('9.537 GiB'); + }); +}); + +describe('kbn deckbytes format when scaled decimals is null do not use it', () => { + it('should use specified decimals', () => { + const str = getValueFormat('deckbytes')(10000000, 3, null); + expect(str).toBe('10.000 GB'); + }); +}); diff --git a/packages/grafana-ui/src/utils/valueFormats/valueFormats.ts b/packages/grafana-ui/src/utils/valueFormats/valueFormats.ts index d626a241a7985..25e8f0ce2ac6b 100644 --- a/packages/grafana-ui/src/utils/valueFormats/valueFormats.ts +++ b/packages/grafana-ui/src/utils/valueFormats/valueFormats.ts @@ -1,6 +1,5 @@ import { getCategories } from './categories'; - -export type DecimalCount = number | null | undefined; +import { DecimalCount } from '../../types'; export type ValueFormatter = ( value: number, From 6ef35f0a8ea1290d48f07df7b6b453fb9bb90b51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 7 Apr 2019 14:45:58 +0200 Subject: [PATCH 04/59] Graph: Allow override decimals to fully override (#16414) Override decimals did not fully override auto scaling logic Fixes #16068 --- public/vendor/flot/jquery.flot.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/public/vendor/flot/jquery.flot.js b/public/vendor/flot/jquery.flot.js index 25507d63089ac..15a6b06784640 100644 --- a/public/vendor/flot/jquery.flot.js +++ b/public/vendor/flot/jquery.flot.js @@ -1763,8 +1763,11 @@ Licensed under the MIT license. axis.delta = delta; axis.tickDecimals = Math.max(0, maxDec != null ? maxDec : dec); axis.tickSize = opts.tickSize || size; + // grafana addition - axis.scaledDecimals = axis.tickDecimals - Math.floor(Math.log(axis.tickSize) / Math.LN10); + if (opts.tickDecimals === null && opts.tickDecimals === undefined) { + axis.scaledDecimals = axis.tickDecimals - Math.floor(Math.log(axis.tickSize) / Math.LN10); + } // Time mode was moved to a plug-in in 0.8, and since so many people use it // we'll add an especially friendly reminder to make sure they included it. From 78ef1719e2320bf4d95d7e74fafa359405129e65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 7 Apr 2019 15:26:21 +0200 Subject: [PATCH 05/59] BarGauge: Round sizing to avoid float widths LED cell width needs to be integers --- packages/grafana-ui/src/components/BarGauge/BarGauge.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx index ea73c74e1532c..9c5bf65638203 100644 --- a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx +++ b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx @@ -136,8 +136,9 @@ export class BarGauge extends PureComponent { const valueRange = maxValue - minValue; const maxSize = isVert ? maxBarHeight : maxBarWidth; const cellSpacing = itemSpacing!; - const cellCount = maxSize / 20; - const cellSize = (maxSize - cellSpacing * cellCount) / cellCount; + const cellWidth = 12; + const cellCount = Math.floor(maxSize / cellWidth); + const cellSize = Math.floor((maxSize - cellSpacing * cellCount) / cellCount); const valueColor = getValueColor(this.props); const valueStyles = getValueStyles(value.text, valueColor, valueWidth, valueHeight); From 9b39dbc2fbf8f00d28800f5988db7f1da5c44484 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 7 Apr 2019 19:01:59 +0200 Subject: [PATCH 06/59] Graph: Fixed tooltip highlight on white theme (#16429) Fixes #16359 --- packages/grafana-ui/src/themes/light.ts | 2 +- public/sass/_variables.light.generated.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/grafana-ui/src/themes/light.ts b/packages/grafana-ui/src/themes/light.ts index a3994fc7458d4..0b36f5eca01af 100644 --- a/packages/grafana-ui/src/themes/light.ts +++ b/packages/grafana-ui/src/themes/light.ts @@ -65,7 +65,7 @@ const lightTheme: GrafanaTheme = { text: basicColors.gray1, textStrong: basicColors.dark2, textWeak: basicColors.gray2, - textEmphasis: basicColors.gray5, + textEmphasis: basicColors.dark5, textFaint: basicColors.dark4, link: basicColors.gray1, linkDisabled: new tinycolor(basicColors.gray1).lighten(30).toString(), diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss index 4d1dd96bccfeb..d8bd561a3fd64 100644 --- a/public/sass/_variables.light.generated.scss +++ b/public/sass/_variables.light.generated.scss @@ -76,7 +76,7 @@ $text-color: #52545c; $text-color-strong: #41444b; $text-color-weak: #767980; $text-color-faint: #35373f; -$text-color-emphasis: #dde4ed; +$text-color-emphasis: #41444b; $text-shadow-faint: none; From 128fb8fa7e506fb3656ef9d059cbdc0cc087781a Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Mon, 8 Apr 2019 09:48:15 +0200 Subject: [PATCH 07/59] Theme: Reworking button styling (#16362) * added new variables for height in theme, added height to gui button large, replaced add gicon with regular gicon, replaced + with gicon, changed button display to flex * set fixed height to large button, removed xlarge button and replaced with large button * removed button-mini and replaced with button-small, set fixed height to default button and button-small * fixed padding for default and large button, fixed height for navbar button, fixed snapshots * fixed padding and margin on navbar buttons * gave special height to login btn-primary * readded btn-mini class with same styling as btn-small and a deprecated notice * fixed add panel widget buttons --- .../src/components/Button/AbstractButton.tsx | 20 +++++------- .../src/components/Button/Button.story.tsx | 2 +- .../ThresholdsEditor.test.tsx.snap | 10 ++++++ .../src/themes/_variables.scss.tmpl.ts | 6 ++++ packages/grafana-ui/src/themes/default.ts | 5 +++ packages/grafana-ui/src/types/theme.ts | 5 +++ .../components/EmptyListCTA/EmptyListCTA.tsx | 6 ++-- public/app/core/components/org_switcher.ts | 4 +-- .../app/features/admin/partials/edit_org.html | 2 +- .../features/admin/partials/edit_user.html | 2 +- public/app/features/alerting/StateHistory.tsx | 2 +- .../alerting/partials/notifications_list.html | 2 +- .../features/annotations/partials/editor.html | 6 ++-- public/app/features/api-keys/ApiKeysPage.tsx | 2 +- .../__snapshots__/ApiKeysPage.test.tsx.snap | 2 +- .../AddPanelWidget/_AddPanelWidget.scss | 4 ++- .../components/DashLinks/editor.html | 6 ++-- .../datasources/DataSourcesListItem.tsx | 2 +- .../datasources/DataSourcesListPage.tsx | 2 +- .../explore/NoDataSourceCallToAction.tsx | 6 ++-- .../partials/snapshot_list.html | 4 +-- .../features/playlist/partials/playlist.html | 10 +++--- .../features/profile/partials/profile.html | 4 +-- public/app/features/teams/TeamGroupSync.tsx | 6 ++-- public/app/features/teams/TeamList.tsx | 26 +++++++-------- .../__snapshots__/TeamGroupSync.test.tsx.snap | 10 +++--- .../features/teams/partials/create_team.html | 4 +-- .../features/templating/partials/editor.html | 8 ++--- public/app/features/users/InviteeRow.tsx | 4 +-- public/app/features/users/UsersTable.tsx | 2 +- .../__snapshots__/UsersTable.test.tsx.snap | 12 +++---- public/sass/_variables.generated.scss | 6 ++++ public/sass/components/_buttons.scss | 32 ++++++++++--------- public/sass/components/_navbar.scss | 5 ++- public/sass/pages/_login.scss | 1 + 35 files changed, 130 insertions(+), 100 deletions(-) diff --git a/packages/grafana-ui/src/components/Button/AbstractButton.tsx b/packages/grafana-ui/src/components/Button/AbstractButton.tsx index 68dc303191b00..38f225273adb0 100644 --- a/packages/grafana-ui/src/components/Button/AbstractButton.tsx +++ b/packages/grafana-ui/src/components/Button/AbstractButton.tsx @@ -65,35 +65,28 @@ const getButtonStyles = (theme: GrafanaTheme, size: ButtonSize, variant: ButtonV background, fontSize, iconDistance, + height, fontWeight = theme.typography.weight.semibold; switch (size) { - case ButtonSize.ExtraSmall: - padding = `${theme.spacing.xs} ${theme.spacing.sm}`; - fontSize = theme.typography.size.xs; - iconDistance = theme.spacing.xs; - break; case ButtonSize.Small: padding = `${theme.spacing.xs} ${theme.spacing.sm}`; fontSize = theme.typography.size.sm; iconDistance = theme.spacing.xs; + height = theme.height.sm; break; case ButtonSize.Large: padding = `${theme.spacing.md} ${theme.spacing.lg}`; fontSize = theme.typography.size.lg; fontWeight = theme.typography.weight.regular; iconDistance = theme.spacing.sm; - break; - case ButtonSize.ExtraLarge: - padding = `${theme.spacing.md} ${theme.spacing.lg}`; - fontSize = theme.typography.size.lg; - fontWeight = theme.typography.weight.regular; - iconDistance = theme.spacing.sm; + height = theme.height.lg; break; default: padding = `${theme.spacing.sm} ${theme.spacing.md}`; iconDistance = theme.spacing.sm; fontSize = theme.typography.size.base; + height = theme.height.md; } switch (variant) { @@ -133,7 +126,8 @@ const getButtonStyles = (theme: GrafanaTheme, size: ButtonSize, variant: ButtonV return { button: css` label: button; - display: inline-block; + display: flex; + align-items: center; font-weight: ${fontWeight}; font-size: ${fontSize}; font-family: ${theme.typography.fontFamily.sansSerif}; @@ -143,6 +137,7 @@ const getButtonStyles = (theme: GrafanaTheme, size: ButtonSize, variant: ButtonV vertical-align: middle; cursor: pointer; border: none; + height: ${height}; border-radius: ${borderRadius}; ${background}; @@ -161,6 +156,7 @@ const getButtonStyles = (theme: GrafanaTheme, size: ButtonSize, variant: ButtonV icon: css` label: button-icon; margin-right: ${iconDistance}; + filter: brightness(100); `, }; }; diff --git a/packages/grafana-ui/src/components/Button/Button.story.tsx b/packages/grafana-ui/src/components/Button/Button.story.tsx index 5189db1e0ed57..0938c618d5fab 100644 --- a/packages/grafana-ui/src/components/Button/Button.story.tsx +++ b/packages/grafana-ui/src/components/Button/Button.story.tsx @@ -48,7 +48,7 @@ ButtonStories.add('with icon', () => { Plus: 'fa fa-plus', User: 'fa fa-user', Gear: 'fa fa-gear', - Annotation: 'gicon gicon-add-annotation', + Annotation: 'gicon gicon-annotation', }, 'fa fa-plus' ); diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap b/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap index c2feb5f35e7be..3b7efcb6e7cae 100644 --- a/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap +++ b/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap @@ -176,6 +176,11 @@ exports[`Render should render with base threshold 1`] = ` "white": "#ffffff", "yellow": "#ecbb13", }, + "height": Object { + "lg": "48px", + "md": "32px", + "sm": "24px", + }, "name": "Grafana Dark", "panelPadding": Object { "horizontal": 16, @@ -334,6 +339,11 @@ exports[`Render should render with base threshold 1`] = ` "white": "#ffffff", "yellow": "#ecbb13", }, + "height": Object { + "lg": "48px", + "md": "32px", + "sm": "24px", + }, "name": "Grafana Dark", "panelPadding": Object { "horizontal": 16, diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts index 97486cf3f4c7e..c46abb75850a9 100644 --- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts @@ -87,6 +87,12 @@ $container-max-widths: ( $grid-columns: 12 !default; $grid-gutter-width: ${theme.spacing.gutter} !default; +// Component heights +// ------------------------- +$height-sm: ${theme.height.sm}; +$height-md: ${theme.height.md}; +$height-lg: ${theme.height.lg}; + // Typography // ------------------------- diff --git a/packages/grafana-ui/src/themes/default.ts b/packages/grafana-ui/src/themes/default.ts index 3cdb5f45c8528..dadaa2769efbd 100644 --- a/packages/grafana-ui/src/themes/default.ts +++ b/packages/grafana-ui/src/themes/default.ts @@ -67,6 +67,11 @@ const theme: GrafanaThemeCommons = { sm: '1px', }, }, + height: { + sm: '24px', + md: '32px', + lg: '48px', + }, panelPadding: { horizontal: 16, vertical: 8, diff --git a/packages/grafana-ui/src/types/theme.ts b/packages/grafana-ui/src/types/theme.ts index 0510e45fcd5b8..2409a837ea982 100644 --- a/packages/grafana-ui/src/types/theme.ts +++ b/packages/grafana-ui/src/types/theme.ts @@ -72,6 +72,11 @@ export interface GrafanaThemeCommons { sm: string; }; }; + height: { + sm: string; + md: string; + lg: string; + }; panelPadding: { horizontal: number; vertical: number; diff --git a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx index d36eeaaf6ff2f..1a979bb08c821 100644 --- a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx +++ b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx @@ -1,5 +1,5 @@ import React, { useContext } from 'react'; -import { CallToActionCard, ExtraLargeLinkButton, ThemeContext } from '@grafana/ui'; +import { CallToActionCard, LargeLinkButton, ThemeContext } from '@grafana/ui'; import { css } from 'emotion'; export interface Props { model: any; @@ -37,9 +37,9 @@ const EmptyListCTA: React.FunctionComponent = props => { : ''; const ctaElement = ( - + {buttonTitle} - + ); return ; diff --git a/public/app/core/components/org_switcher.ts b/public/app/core/components/org_switcher.ts index f7b53fa3c814c..dc8f00f0fdb44 100644 --- a/public/app/core/components/org_switcher.ts +++ b/public/app/core/components/org_switcher.ts @@ -29,10 +29,10 @@ const template = ` {{org.name}} {{org.role}} - + Current - + Switch to diff --git a/public/app/features/admin/partials/edit_org.html b/public/app/features/admin/partials/edit_org.html index 911181ef999e9..0504cc29628a9 100644 --- a/public/app/features/admin/partials/edit_org.html +++ b/public/app/features/admin/partials/edit_org.html @@ -35,7 +35,7 @@

Organization Users

- + diff --git a/public/app/features/admin/partials/edit_user.html b/public/app/features/admin/partials/edit_user.html index 7e6457a8a76b6..1b6db6b24866c 100644 --- a/public/app/features/admin/partials/edit_user.html +++ b/public/app/features/admin/partials/edit_user.html @@ -91,7 +91,7 @@

Organizations

- + diff --git a/public/app/features/alerting/StateHistory.tsx b/public/app/features/alerting/StateHistory.tsx index be34552e50d02..3d092e7435a2d 100644 --- a/public/app/features/alerting/StateHistory.tsx +++ b/public/app/features/alerting/StateHistory.tsx @@ -72,7 +72,7 @@ class StateHistory extends PureComponent { {stateHistoryItems.length > 0 && (
Last 50 state changes -
diff --git a/public/app/features/alerting/partials/notifications_list.html b/public/app/features/alerting/partials/notifications_list.html index 66afa2513fa0b..8181060612309 100644 --- a/public/app/features/alerting/partials/notifications_list.html +++ b/public/app/features/alerting/partials/notifications_list.html @@ -47,7 +47,7 @@
- + @@ -48,8 +48,8 @@

There are no custom annotation queries added yet
- - + + Add Annotation Query
diff --git a/public/app/features/api-keys/ApiKeysPage.tsx b/public/app/features/api-keys/ApiKeysPage.tsx index 62500fb98c8d4..9748a5727cfa6 100644 --- a/public/app/features/api-keys/ApiKeysPage.tsx +++ b/public/app/features/api-keys/ApiKeysPage.tsx @@ -113,7 +113,7 @@ export class ApiKeysPage extends PureComponent {
There are no dashboard links added yet
- - + + Add Dashboard Link
@@ -61,7 +61,7 @@
What are Dashboard Links?
- + diff --git a/public/app/features/datasources/DataSourcesListItem.tsx b/public/app/features/datasources/DataSourcesListItem.tsx index d0ff69a66ee76..de3ac71f0b112 100644 --- a/public/app/features/datasources/DataSourcesListItem.tsx +++ b/public/app/features/datasources/DataSourcesListItem.tsx @@ -21,7 +21,7 @@ export class DataSourcesListItem extends PureComponent {
{dataSource.name} - {dataSource.isDefault && default} + {dataSource.isDefault && default}
{dataSource.url}
diff --git a/public/app/features/datasources/DataSourcesListPage.tsx b/public/app/features/datasources/DataSourcesListPage.tsx index 09442f5739c40..9f881446aeccc 100644 --- a/public/app/features/datasources/DataSourcesListPage.tsx +++ b/public/app/features/datasources/DataSourcesListPage.tsx @@ -39,7 +39,7 @@ export interface Props { const emptyListModel = { title: 'There are no data sources defined yet', - buttonIcon: 'gicon gicon-add-datasources', + buttonIcon: 'gicon gicon-datasources', buttonLink: 'datasources/new', buttonTitle: 'Add data source', proTip: 'You can also define data sources through configuration files.', diff --git a/public/app/features/explore/NoDataSourceCallToAction.tsx b/public/app/features/explore/NoDataSourceCallToAction.tsx index 12733c3265a1b..ba1d7a488e1d9 100644 --- a/public/app/features/explore/NoDataSourceCallToAction.tsx +++ b/public/app/features/explore/NoDataSourceCallToAction.tsx @@ -1,6 +1,6 @@ import React, { useContext } from 'react'; import { css } from 'emotion'; -import { ThemeContext, ExtraLargeLinkButton, CallToActionCard } from '@grafana/ui'; +import { ThemeContext, LargeLinkButton, CallToActionCard } from '@grafana/ui'; export const NoDataSourceCallToAction = () => { const theme = useContext(ThemeContext); @@ -22,9 +22,9 @@ export const NoDataSourceCallToAction = () => { ); const ctaElement = ( - + Add data source - + ); const cardClassName = css` diff --git a/public/app/features/manage-dashboards/partials/snapshot_list.html b/public/app/features/manage-dashboards/partials/snapshot_list.html index f646194088d3b..e7f88abf2645c 100644 --- a/public/app/features/manage-dashboards/partials/snapshot_list.html +++ b/public/app/features/manage-dashboards/partials/snapshot_list.html @@ -20,13 +20,13 @@ External - + View - + diff --git a/public/app/features/playlist/partials/playlist.html b/public/app/features/playlist/partials/playlist.html index f90c407ca4aab..6f4125c561997 100644 --- a/public/app/features/playlist/partials/playlist.html +++ b/public/app/features/playlist/partials/playlist.html @@ -34,13 +34,13 @@

Dashboards

- - - @@ -64,7 +64,7 @@

Add dashboards

- @@ -82,7 +82,7 @@

Add dashboards

- diff --git a/public/app/features/profile/partials/profile.html b/public/app/features/profile/partials/profile.html index 195364c557783..1cb800db6a5fe 100644 --- a/public/app/features/profile/partials/profile.html +++ b/public/app/features/profile/partials/profile.html @@ -63,10 +63,10 @@

Organizations

{{org.name}} {{org.role}} - + Current - + Select diff --git a/public/app/features/teams/TeamGroupSync.tsx b/public/app/features/teams/TeamGroupSync.tsx index ace8e9c856239..424d494c39ca9 100644 --- a/public/app/features/teams/TeamGroupSync.tsx +++ b/public/app/features/teams/TeamGroupSync.tsx @@ -63,7 +63,7 @@ export class TeamGroupSync extends PureComponent { {group.groupId} - this.onRemoveGroup(group)}> + this.onRemoveGroup(group)}> @@ -121,8 +121,8 @@ export class TeamGroupSync extends PureComponent { {groups.length === 0 && !isAdding && (
There are no external groups to sync with
-
diff --git a/public/app/features/teams/TeamList.tsx b/public/app/features/teams/TeamList.tsx index 5d3ef005c9e54..60d71e56f492e 100644 --- a/public/app/features/teams/TeamList.tsx +++ b/public/app/features/teams/TeamList.tsx @@ -73,20 +73,18 @@ export class TeamList extends PureComponent { renderEmptyList() { return ( -
- -
+ ); } diff --git a/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap b/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap index 03130b638bcac..5527479d1dcc7 100644 --- a/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap +++ b/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap @@ -81,11 +81,11 @@ exports[`Render should render component 1`] = ` There are no external groups to sync with
@@ -225,7 +225,7 @@ exports[`Render should render groups table 1`] = ` } > New Team

-
diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html index b34ef1f480798..b2f7312fe2749 100644 --- a/public/app/features/templating/partials/editor.html +++ b/public/app/features/templating/partials/editor.html @@ -11,8 +11,8 @@

There are no variables added yet
- - + + Add variable
@@ -58,12 +58,12 @@
What do variables do?
- + Duplicate - + diff --git a/public/app/features/users/InviteeRow.tsx b/public/app/features/users/InviteeRow.tsx index fd9ff32fbdd75..1e3d5017b0452 100644 --- a/public/app/features/users/InviteeRow.tsx +++ b/public/app/features/users/InviteeRow.tsx @@ -27,7 +27,7 @@ class InviteeRow extends PureComponent { {invitee.email} {invitee.name} -