mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
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
This commit is contained in:
Torkel Ödegaard
GitHub
parent
b335a59d6d
commit
56ef7c4a4c
@ -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;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -5,7 +5,7 @@ import { stylesFactory, useStyles } from '../../themes';
|
||||
import { Badge, BadgeProps } from '../Badge/Badge';
|
||||
import { css } from 'emotion';
|
||||
|
||||
export interface FeatureInfoBoxProps extends Omit<InfoBoxProps, 'branded' | 'title' | 'urlTitle'> {
|
||||
export interface FeatureInfoBoxProps extends Omit<InfoBoxProps, 'title' | 'urlTitle'> {
|
||||
title: string;
|
||||
featureState?: FeatureState;
|
||||
}
|
||||
|
||||
@ -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,
|
||||
|
||||
78
public/app/features/datasources/settings/CloudInfoBox.tsx
Normal file
78
public/app/features/datasources/settings/CloudInfoBox.tsx
Normal file
@ -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<Props> = ({ 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 (
|
||||
<DismissableFeatureInfoBox
|
||||
title={`Configure your ${mainDS} data source below`}
|
||||
persistenceId="data-source-settings-cloud-info-box"
|
||||
className={styles.box}
|
||||
branded={false}
|
||||
>
|
||||
<div className={styles.text}>
|
||||
Or skip the effort and get {mainDS} (and {extraDS}) as fully managed, scalable and hosted data sources from
|
||||
Grafana Labs with the{' '}
|
||||
<a
|
||||
className="external-link"
|
||||
href={`https://grafana.com/signup/cloud/connect-account?src=grafana-oss&cnt=${dataSource.type}-settings`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
title="The free plan includes 10k active metrics and 50gb storage."
|
||||
>
|
||||
free-forever Grafana Cloud plan
|
||||
</a>
|
||||
.
|
||||
</div>
|
||||
</DismissableFeatureInfoBox>
|
||||
);
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
`,
|
||||
};
|
||||
};
|
||||
@ -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<Props> {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<CloudInfoBox dataSource={dataSource} />
|
||||
|
||||
<BasicSettings
|
||||
dataSourceName={dataSource.name}
|
||||
isDefault={dataSource.isDefault}
|
||||
|
||||
@ -27,6 +27,33 @@ exports[`Render should render alpha info text 1`] = `
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<CloudInfoBox
|
||||
dataSource={
|
||||
Object {
|
||||
"access": "",
|
||||
"basicAuth": false,
|
||||
"basicAuthPassword": "",
|
||||
"basicAuthUser": "",
|
||||
"database": "",
|
||||
"id": 13,
|
||||
"isDefault": false,
|
||||
"jsonData": Object {
|
||||
"authType": "credentials",
|
||||
"defaultRegion": "eu-west-2",
|
||||
},
|
||||
"name": "gdev-cloudwatch",
|
||||
"orgId": 1,
|
||||
"password": "",
|
||||
"readOnly": false,
|
||||
"secureJsonFields": Object {},
|
||||
"type": "cloudwatch",
|
||||
"typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png",
|
||||
"url": "",
|
||||
"user": "",
|
||||
"withCredentials": false,
|
||||
}
|
||||
}
|
||||
/>
|
||||
<BasicSettings
|
||||
dataSourceName="gdev-cloudwatch"
|
||||
isDefault={false}
|
||||
@ -150,6 +177,33 @@ exports[`Render should render beta info text 1`] = `
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<CloudInfoBox
|
||||
dataSource={
|
||||
Object {
|
||||
"access": "",
|
||||
"basicAuth": false,
|
||||
"basicAuthPassword": "",
|
||||
"basicAuthUser": "",
|
||||
"database": "",
|
||||
"id": 13,
|
||||
"isDefault": false,
|
||||
"jsonData": Object {
|
||||
"authType": "credentials",
|
||||
"defaultRegion": "eu-west-2",
|
||||
},
|
||||
"name": "gdev-cloudwatch",
|
||||
"orgId": 1,
|
||||
"password": "",
|
||||
"readOnly": false,
|
||||
"secureJsonFields": Object {},
|
||||
"type": "cloudwatch",
|
||||
"typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png",
|
||||
"url": "",
|
||||
"user": "",
|
||||
"withCredentials": false,
|
||||
}
|
||||
}
|
||||
/>
|
||||
<BasicSettings
|
||||
dataSourceName="gdev-cloudwatch"
|
||||
isDefault={false}
|
||||
@ -182,6 +236,33 @@ exports[`Render should render component 1`] = `
|
||||
<form
|
||||
onSubmit={[Function]}
|
||||
>
|
||||
<CloudInfoBox
|
||||
dataSource={
|
||||
Object {
|
||||
"access": "",
|
||||
"basicAuth": false,
|
||||
"basicAuthPassword": "",
|
||||
"basicAuthUser": "",
|
||||
"database": "",
|
||||
"id": 13,
|
||||
"isDefault": false,
|
||||
"jsonData": Object {
|
||||
"authType": "credentials",
|
||||
"defaultRegion": "eu-west-2",
|
||||
},
|
||||
"name": "gdev-cloudwatch",
|
||||
"orgId": 1,
|
||||
"password": "",
|
||||
"readOnly": false,
|
||||
"secureJsonFields": Object {},
|
||||
"type": "cloudwatch",
|
||||
"typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png",
|
||||
"url": "",
|
||||
"user": "",
|
||||
"withCredentials": false,
|
||||
}
|
||||
}
|
||||
/>
|
||||
<BasicSettings
|
||||
dataSourceName="gdev-cloudwatch"
|
||||
isDefault={false}
|
||||
@ -219,6 +300,33 @@ exports[`Render should render is ready only message 1`] = `
|
||||
>
|
||||
This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.
|
||||
</div>
|
||||
<CloudInfoBox
|
||||
dataSource={
|
||||
Object {
|
||||
"access": "",
|
||||
"basicAuth": false,
|
||||
"basicAuthPassword": "",
|
||||
"basicAuthUser": "",
|
||||
"database": "",
|
||||
"id": 13,
|
||||
"isDefault": false,
|
||||
"jsonData": Object {
|
||||
"authType": "credentials",
|
||||
"defaultRegion": "eu-west-2",
|
||||
},
|
||||
"name": "gdev-cloudwatch",
|
||||
"orgId": 1,
|
||||
"password": "",
|
||||
"readOnly": true,
|
||||
"secureJsonFields": Object {},
|
||||
"type": "cloudwatch",
|
||||
"typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png",
|
||||
"url": "",
|
||||
"user": "",
|
||||
"withCredentials": false,
|
||||
}
|
||||
}
|
||||
/>
|
||||
<BasicSettings
|
||||
dataSourceName="gdev-cloudwatch"
|
||||
isDefault={false}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user