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
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}
|
||||
|
||||
Reference in New Issue
Block a user