From b80ce5f4786971c66db219e0731c043d4b6238d7 Mon Sep 17 00:00:00 2001 From: Gareth Dawson Date: Tue, 17 Oct 2023 11:50:30 +0100 Subject: [PATCH 1/2] update config page --- src/components/ConfigEditor.tsx | 60 +++++--------- src/components/ConfigurationHelp.tsx | 114 +++++++++++---------------- 2 files changed, 66 insertions(+), 108 deletions(-) diff --git a/src/components/ConfigEditor.tsx b/src/components/ConfigEditor.tsx index 5737f3ba..726aec81 100644 --- a/src/components/ConfigEditor.tsx +++ b/src/components/ConfigEditor.tsx @@ -1,37 +1,38 @@ -import { css } from '@emotion/css'; -import { - DataSourcePluginOptionsEditorProps, - onUpdateDatasourceJsonDataOptionChecked, - onUpdateDatasourceJsonDataOptionSelect, -} from '@grafana/data'; +import { DataSourcePluginOptionsEditorProps, onUpdateDatasourceJsonDataOptionSelect } from '@grafana/data'; import { AuthConfig, GOOGLE_AUTH_TYPE_OPTIONS } from '@grafana/google-sdk'; import { config } from '@grafana/runtime'; -import { Field, FieldSet, InlineField, Select, Switch } from '@grafana/ui'; +import { Divider, Field, SecureSocksProxySettings, Select } from '@grafana/ui'; import React from 'react'; import { PROCESSING_LOCATIONS } from '../constants'; import { BigQueryOptions, BigQuerySecureJsonData } from '../types'; import { ConfigurationHelp } from './/ConfigurationHelp'; - -const styles = { - toggle: css` - margin-top: 7px; - margin-left: 5px; - `, -}; +import { ConfigSection, DataSourceDescription } from '@grafana/experimental'; export type BigQueryConfigEditorProps = DataSourcePluginOptionsEditorProps; export const BigQueryConfigEditor: React.FC = (props) => { - const { options } = props; + const { options, onOptionsChange } = props; const { jsonData } = options; return ( <> + + + + + + -
+ + + = (props) {config.secureSocksDSProxyEnabled && ( - <> - - Enable proxying the datasource connection through the secure socks proxy to a different network. See{' '} - - Configure a datasource connection proxy. - - - } - > -
- -
- - + )} -
+ ); }; diff --git a/src/components/ConfigurationHelp.tsx b/src/components/ConfigurationHelp.tsx index 4636bf06..5eb0cde3 100644 --- a/src/components/ConfigurationHelp.tsx +++ b/src/components/ConfigurationHelp.tsx @@ -1,74 +1,54 @@ import React from 'react'; -import { Alert } from '@grafana/ui'; -import { TEST_IDS } from 'utils/testIds'; +import { Collapse } from '@grafana/ui'; export const ConfigurationHelp = () => { + const [isOpen, setIsOpen] = React.useState(true); + return ( - setIsOpen((x) => !x)} > -
-

There are two ways to authenticate the BigQuery plugin:

-
    -
  • By uploading Google Service Account key
    • -
  • - By automatically retrieving credentials from the Google metadata server{' '} - (only available when running Grafana on a GCE virtual machine) -
    • -
-
-
Uploading Google Service Account key
-

- - Create a Google Cloud Platform (GCP) Service Account - {' '} - or the Project you want to show data. The BigQuery Data Viewer role and the{' '} - Job User role provide all the permissions that Grafana needs.{' '} - - BigQuery API - {' '} - has to be enabled on GCP for the data source to work. -
- Find instructions on how to create a Service Account{' '} - - here - - . -

-
-
Using GCE Default Service Account
-

- When Grafana is running on a Google Compute Engine (GCE) virtual machine, it is possible for Grafana to - automatically retrieve the default project id and authentication token from the metadata server. For this to - work, you need to make sure that you have a service account that is setup as the default account for the - virtual machine and that the service account has been given read access to the BigQuery API. -

-
-

- - Note that, Grafana data source integrates with a single GCP project. If you need to visualize data from - multiple GCP projects, create one data source per GCP project. - -

-
- +
Uploading Google Service Account key
+

+ Create a{' '} + + Google Cloud Platform (GCP) Service Account + {' '} + on the project you want to show data. The BigQuery Data Viewer role and the{' '} + Job User role provide all the permissions that Grafana needs. The{' '} + + BigQuery API + {' '} + has to be enabled on GCP for the data source to work. +

+ +
Using GCE Default Service Account
+

+ When Grafana is running on a Google Compute Engine (GCE) virtual machine, it is possible for Grafana to + automatically retrieve the default project id and authentication token from the metadata server. For this to + work, you need to make sure that you have a service account that is setup as the default account for the virtual + machine and that the service account has been given read access to the BigQuery API. +

+ +

+ + Note that, Grafana data source integrates with a single GCP project. If you need to visualize data from + multiple GCP projects, create one data source per GCP project. + +

+ ); }; From 6937e70470224c138ef7049537e6b266127de9a8 Mon Sep 17 00:00:00 2001 From: Gareth Dawson Date: Mon, 23 Oct 2023 12:13:53 +0100 Subject: [PATCH 2/2] fix backwards compatibility with grafana < 10.1 --- src/components/ConfigEditor.tsx | 3 ++- src/components/Divider.tsx | 21 +++++++++++++++++++++ 2 files changed, 23 insertions(+), 1 deletion(-) create mode 100644 src/components/Divider.tsx diff --git a/src/components/ConfigEditor.tsx b/src/components/ConfigEditor.tsx index 726aec81..3e576cbe 100644 --- a/src/components/ConfigEditor.tsx +++ b/src/components/ConfigEditor.tsx @@ -1,12 +1,13 @@ import { DataSourcePluginOptionsEditorProps, onUpdateDatasourceJsonDataOptionSelect } from '@grafana/data'; import { AuthConfig, GOOGLE_AUTH_TYPE_OPTIONS } from '@grafana/google-sdk'; import { config } from '@grafana/runtime'; -import { Divider, Field, SecureSocksProxySettings, Select } from '@grafana/ui'; +import { Field, SecureSocksProxySettings, Select } from '@grafana/ui'; import React from 'react'; import { PROCESSING_LOCATIONS } from '../constants'; import { BigQueryOptions, BigQuerySecureJsonData } from '../types'; import { ConfigurationHelp } from './/ConfigurationHelp'; import { ConfigSection, DataSourceDescription } from '@grafana/experimental'; +import { Divider } from './Divider'; export type BigQueryConfigEditorProps = DataSourcePluginOptionsEditorProps; diff --git a/src/components/Divider.tsx b/src/components/Divider.tsx new file mode 100644 index 00000000..c6582eb7 --- /dev/null +++ b/src/components/Divider.tsx @@ -0,0 +1,21 @@ +import { css } from '@emotion/css'; +import React from 'react'; + +import { GrafanaTheme2 } from '@grafana/data'; +import { useStyles2 } from '@grafana/ui'; + +// this custom component is necessary because the Grafana UI component is not backwards compatible with Grafana < 10.1.0 +export const Divider = () => { + const styles = useStyles2(getStyles); + return
; +}; + +const getStyles = (theme: GrafanaTheme2) => { + return { + horizontalDivider: css({ + borderTop: `1px solid ${theme.colors.border.weak}`, + margin: theme.spacing(2, 0), + width: '100%', + }), + }; +};