From 56ef7c4a4ca6e073305c2a40d2914870285638eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 4 Feb 2021 11:12:20 +0100 Subject: [PATCH] DataSourceSettings: Adds info box and link to Grafana Cloud (#30891) * Updated * DataSourceSettings: Adds info box and link to Grafana Cloud * Updated wording * Less words * use variables * Fixing ts issues * fixed import --- packages/grafana-data/src/types/config.ts | 13 ++- .../src/components/InfoBox/FeatureInfoBox.tsx | 2 +- .../backends/sentry/SentryBackend.test.ts | 3 +- .../datasources/settings/CloudInfoBox.tsx | 78 +++++++++++++ .../settings/DataSourceSettingsPage.tsx | 3 + .../DataSourceSettingsPage.test.tsx.snap | 108 ++++++++++++++++++ 6 files changed, 203 insertions(+), 4 deletions(-) create mode 100644 public/app/features/datasources/settings/CloudInfoBox.tsx diff --git a/packages/grafana-data/src/types/config.ts b/packages/grafana-data/src/types/config.ts index 5eb221b30a7..43efe6b1786 100644 --- a/packages/grafana-data/src/types/config.ts +++ b/packages/grafana-data/src/types/config.ts @@ -18,12 +18,21 @@ export interface BuildInfo { */ isEnterprise: boolean; env: string; - edition: string; + edition: GrafanaEdition; latestVersion: string; hasUpdate: boolean; hideVersion: boolean; } +/** + * @internal + */ +export enum GrafanaEdition { + OpenSource = 'Open Source', + Pro = 'Pro', + Enterprise = 'Enterprise', +} + /** * Describes available feature toggles in Grafana. These can be configured via the * `conf/custom.ini` to enable features under development or not yet available in @@ -54,7 +63,7 @@ export interface LicenseInfo { licenseUrl: string; stateInfo: string; hasValidLicense: boolean; - edition: string; + edition: GrafanaEdition; } /** diff --git a/packages/grafana-ui/src/components/InfoBox/FeatureInfoBox.tsx b/packages/grafana-ui/src/components/InfoBox/FeatureInfoBox.tsx index f49df4d93d6..97b2e9410fd 100644 --- a/packages/grafana-ui/src/components/InfoBox/FeatureInfoBox.tsx +++ b/packages/grafana-ui/src/components/InfoBox/FeatureInfoBox.tsx @@ -5,7 +5,7 @@ import { stylesFactory, useStyles } from '../../themes'; import { Badge, BadgeProps } from '../Badge/Badge'; import { css } from 'emotion'; -export interface FeatureInfoBoxProps extends Omit { +export interface FeatureInfoBoxProps extends Omit { title: string; featureState?: FeatureState; } diff --git a/public/app/core/services/echo/backends/sentry/SentryBackend.test.ts b/public/app/core/services/echo/backends/sentry/SentryBackend.test.ts index e0f8441a688..26f302ff1f9 100644 --- a/public/app/core/services/echo/backends/sentry/SentryBackend.test.ts +++ b/public/app/core/services/echo/backends/sentry/SentryBackend.test.ts @@ -8,6 +8,7 @@ import { SentryEchoEvent } from './types'; import { EchoBackend, EchoEventType, EchoMeta, setEchoSrv } from '@grafana/runtime'; import { waitFor } from '@testing-library/react'; import { Echo } from '../../Echo'; +import { GrafanaEdition } from '@grafana/data/src/types/config'; jest.mock('@sentry/browser'); @@ -19,7 +20,7 @@ describe('SentryEchoBackend', () => { commit: 'abcd123', isEnterprise: false, env: 'production', - edition: "Director's cut", + edition: GrafanaEdition.OpenSource, latestVersion: 'ba', hasUpdate: false, hideVersion: false, diff --git a/public/app/features/datasources/settings/CloudInfoBox.tsx b/public/app/features/datasources/settings/CloudInfoBox.tsx new file mode 100644 index 00000000000..6a2107c4f3e --- /dev/null +++ b/public/app/features/datasources/settings/CloudInfoBox.tsx @@ -0,0 +1,78 @@ +import { DataSourceSettings, GrafanaTheme } from '@grafana/data'; +import { DismissableFeatureInfoBox, useStyles } from '@grafana/ui'; +import { css } from 'emotion'; +import React, { FC } from 'react'; +import { config } from 'app/core/config'; +import { GrafanaEdition } from '@grafana/data/src/types/config'; + +export interface Props { + dataSource: DataSourceSettings; +} + +export const CloudInfoBox: FC = ({ dataSource }) => { + const styles = useStyles(getStyles); + let mainDS = ''; + let extraDS = ''; + + // don't show for already configured data sources or provisioned data sources + if (dataSource.readOnly || (dataSource.version ?? 0) > 2) { + return null; + } + + // Skip showing this info box in some editions + if (config.buildInfo.edition !== GrafanaEdition.OpenSource) { + return null; + } + + switch (dataSource.type) { + case 'prometheus': + mainDS = 'Prometheus'; + extraDS = 'Loki'; + break; + case 'loki': + mainDS = 'Loki'; + extraDS = 'Prometheus'; + break; + default: + return null; + } + + return ( + +
+ Or skip the effort and get {mainDS} (and {extraDS}) as fully managed, scalable and hosted data sources from + Grafana Labs with the{' '} + + free-forever Grafana Cloud plan + + . +
+ + ); +}; + +const getStyles = (theme: GrafanaTheme) => { + return { + box: css` + margin: 0 0 ${theme.spacing.lg} 0; + `, + text: css` + color: ${theme.colors.textSemiWeak}; + padding: ${theme.spacing.sm} 0; + a { + text-decoration: underline; + } + `, + }; +}; diff --git a/public/app/features/datasources/settings/DataSourceSettingsPage.tsx b/public/app/features/datasources/settings/DataSourceSettingsPage.tsx index 834447bb885..4c09bce62f4 100644 --- a/public/app/features/datasources/settings/DataSourceSettingsPage.tsx +++ b/public/app/features/datasources/settings/DataSourceSettingsPage.tsx @@ -29,6 +29,7 @@ import PluginStateinfo from 'app/features/plugins/PluginStateInfo'; import { dataSourceLoaded, setDataSourceName, setIsDefault } from '../state/reducers'; import { connectWithCleanUp } from 'app/core/components/connectWithCleanUp'; import { selectors } from '@grafana/e2e-selectors'; +import { CloudInfoBox } from './CloudInfoBox'; export interface Props { navModel: NavModel; @@ -186,6 +187,8 @@ export class DataSourceSettingsPage extends PureComponent { )} + + + + + This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource. +