CloudMonitoring: use @grafana/google-sdk (#44398)

package.json

@@ -235,6 +235,7 @@
     "@grafana/data": "workspace:*",
     "@grafana/e2e-selectors": "workspace:*",
     "@grafana/experimental": "0.0.2-canary.11",
+    "@grafana/google-sdk": "0.0.2",
     "@grafana/runtime": "workspace:*",
     "@grafana/schema": "workspace:*",
     "@grafana/slate-react": "0.22.10-grafana",

public/app/plugins/datasource/cloud-monitoring/components/ConfigEditor/ConfigEditor.tsx

@@ -1,75 +1,15 @@
-import { DataSourcePluginOptionsEditorProps, onUpdateDatasourceJsonDataOptionSelect } from '@grafana/data';
-import { Alert, InlineField, Select } from '@grafana/ui';
 import React, { PureComponent } from 'react';
-
-import { AuthType, authTypes, CloudMonitoringOptions, CloudMonitoringSecureJsonData } from '../../types';
-import { JWTConfig } from './JWTConfig';
+import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
+import { CloudMonitoringOptions, CloudMonitoringSecureJsonData } from '../../types';
+import { ConnectionConfig } from '@grafana/google-sdk';
 
 export type Props = DataSourcePluginOptionsEditorProps<CloudMonitoringOptions, CloudMonitoringSecureJsonData>;
 
 export class ConfigEditor extends PureComponent<Props> {
   render() {
-    const { options, onOptionsChange } = this.props;
-    const { secureJsonFields, jsonData } = options;
-
-    if (!jsonData.hasOwnProperty('authenticationType')) {
-      jsonData.authenticationType = AuthType.JWT;
-    }
-
     return (
       <>
-        <h3 className="page-heading">Authentication</h3>
-        <div>
-          <InlineField label="Type" labelWidth={20} htmlFor="cloud-monitoring-type">
-            <Select
-              inputId="cloud-monitoring-type"
-              menuShouldPortal
-              width={40}
-              value={authTypes.find((x) => x.value === jsonData.authenticationType) || authTypes[0]}
-              options={authTypes}
-              defaultValue={jsonData.authenticationType}
-              onChange={onUpdateDatasourceJsonDataOptionSelect(this.props, 'authenticationType')}
-            />
-          </InlineField>
-          {jsonData.authenticationType === AuthType.JWT && (
-            <JWTConfig
-              isConfigured={secureJsonFields && !!secureJsonFields.jwt}
-              onChange={({ private_key, client_email, project_id, token_uri }) => {
-                onOptionsChange({
-                  ...options,
-                  secureJsonData: {
-                    ...options.secureJsonData,
-                    privateKey: private_key,
-                  },
-                  jsonData: {
-                    ...options.jsonData,
-                    defaultProject: project_id,
-                    clientEmail: client_email,
-                    tokenUri: token_uri,
-                  },
-                });
-              }}
-            ></JWTConfig>
-          )}
-          <div className="grafana-info-box" style={{ marginTop: '16px' }}>
-            <p>
-              Don’t know how to get a service account key file or create a service account? Read more{' '}
-              <a
-                className="external-link"
-                target="_blank"
-                rel="noopener noreferrer"
-                href="https://grafana.com/docs/grafana/latest/datasources/google-cloud-monitoring/"
-              >
-                in the documentation.
-              </a>
-            </p>
-          </div>
-        </div>
-        {jsonData.authenticationType === AuthType.GCE && (
-          <Alert title="" severity="info">
-            Verify GCE default service account by clicking Save & Test
-          </Alert>
-        )}
+        <ConnectionConfig {...this.props}></ConnectionConfig>
       </>
     );
   }

public/app/plugins/datasource/cloud-monitoring/components/ConfigEditor/JWTConfig.tsx

@@ -1,82 +0,0 @@
-import React, { FormEvent, useState } from 'react';
-import { startCase } from 'lodash';
-import { Button, FileUpload, InlineField, Input, useStyles, Alert } from '@grafana/ui';
-import { css, cx } from '@emotion/css';
-import { GrafanaTheme } from '@grafana/data';
-
-const configKeys = ['project_id', 'private_key', 'client_email', 'token_uri'];
-
-export interface JWT {
-  token_uri: string;
-  client_email: string;
-  private_key: string;
-  project_id: string;
-}
-
-export interface Props {
-  onChange: (jwt: JWT) => void;
-  isConfigured: boolean;
-}
-
-const validateJson = (json: JWT): json is JWT => {
-  return !!json.token_uri && !!json.client_email && !!json.project_id && !!json.project_id;
-};
-
-export function JWTConfig({ onChange, isConfigured }: Props) {
-  const styles = useStyles(getStyles);
-  const [enableUpload, setEnableUpload] = useState<boolean>(!isConfigured);
-  const [error, setError] = useState<string | null>(null);
-
-  return enableUpload ? (
-    <>
-      <FileUpload
-        className={styles}
-        accept="application/json"
-        onFileUpload={(event: FormEvent<HTMLInputElement>) => {
-          if (event?.currentTarget?.files?.length === 1) {
-            setError(null);
-            const reader = new FileReader();
-            const readerOnLoad = () => {
-              return (e: any) => {
-                const json = JSON.parse(e.target.result);
-                if (validateJson(json)) {
-                  onChange(json);
-                  setEnableUpload(false);
-                } else {
-                  setError('Invalid JWT file');
-                }
-              };
-            };
-            reader.onload = readerOnLoad();
-            reader.readAsText(event.currentTarget.files[0]);
-          } else {
-            setError('You can only upload one file');
-          }
-        }}
-      >
-        Upload service account key file
-      </FileUpload>
-
-      {error && <p className={cx(styles, 'alert')}>{error}</p>}
-    </>
-  ) : (
-    <>
-      {configKeys.map((key, i) => (
-        <InlineField label={startCase(key)} key={i} labelWidth={20} disabled>
-          <Input width={40} placeholder="configured" />
-        </InlineField>
-      ))}
-      <Button variant="secondary" onClick={() => setEnableUpload(true)} className={styles}>
-        Upload another JWT file
-      </Button>
-
-      <Alert title="" className={styles} severity="info">
-        Do not forget to save your changes after uploading a file
-      </Alert>
-    </>
-  );
-}
-
-export const getStyles = (theme: GrafanaTheme) => css`
-  margin: ${theme.spacing.md} 0 0;
-`;

public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx

@@ -5,12 +5,12 @@ import React, { PureComponent } from 'react';
 
 import { QUERY_TYPES, SELECT_WIDTH } from '../constants';
 import CloudMonitoringDatasource from '../datasource';
-import { CloudMonitoringQuery, EditorMode, MetricQuery, QueryType, SLOQuery } from '../types';
+import { CloudMonitoringQuery, EditorMode, MetricQuery, QueryType, SLOQuery, CloudMonitoringOptions } from '../types';
 import { MetricQueryEditor, QueryEditorRow, SLOQueryEditor } from './';
 import { defaultQuery } from './MetricQueryEditor';
 import { defaultQuery as defaultSLOQuery } from './SLO/SLOQueryEditor';
 
-export type Props = QueryEditorProps<CloudMonitoringDatasource, CloudMonitoringQuery>;
+export type Props = QueryEditorProps<CloudMonitoringDatasource, CloudMonitoringQuery, CloudMonitoringOptions>;
 
 export class QueryEditor extends PureComponent<Props> {
   async UNSAFE_componentWillMount() {

public/app/plugins/datasource/cloud-monitoring/constants.ts

@@ -1,4 +1,5 @@
-import { AuthType, MetricKind, QueryType, ValueTypes } from './types';
+import { MetricKind, QueryType, ValueTypes } from './types';
+import { GoogleAuthType } from '@grafana/google-sdk';
 
 // not super excited about using uneven numbers, but this makes it align perfectly with rows that has two fields
 export const INPUT_WIDTH = 71;
@@ -6,8 +7,8 @@ export const LABEL_WIDTH = 19;
 export const INNER_LABEL_WIDTH = 14;
 export const SELECT_WIDTH = 28;
 export const AUTH_TYPES = [
-  { value: 'Google JWT File', key: AuthType.JWT },
-  { value: 'GCE Default Service Account', key: AuthType.GCE },
+  { value: 'Google JWT File', key: GoogleAuthType.JWT },
+  { value: 'GCE Default Service Account', key: GoogleAuthType.GCE },
 ];
 
 export const ALIGNMENTS = [

public/app/plugins/datasource/cloud-monitoring/types.ts

@@ -1,13 +1,9 @@
 import { DataQuery, DataSourceJsonData, SelectableValue } from '@grafana/data';
-
-export enum AuthType {
-  JWT = 'jwt',
-  GCE = 'gce',
-}
+import { GoogleAuthType } from '@grafana/google-sdk';
 
 export const authTypes: Array<SelectableValue<string>> = [
-  { label: 'Google JWT File', value: AuthType.JWT },
-  { label: 'GCE Default Service Account', value: AuthType.GCE },
+  { label: 'Google JWT File', value: GoogleAuthType.JWT },
+  { label: 'GCE Default Service Account', value: GoogleAuthType.GCE },
 ];
 
 export enum MetricFindQueryTypes {
@@ -153,7 +149,7 @@ export interface CloudMonitoringQuery extends DataQuery {
 export interface CloudMonitoringOptions extends DataSourceJsonData {
   defaultProject?: string;
   gceDefaultProject?: string;
-  authenticationType?: string;
+  authenticationType: GoogleAuthType;
   clientEmail?: string;
   tokenUri?: string;
 }

yarn.lock

@@ -3846,6 +3846,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@grafana/google-sdk@npm:0.0.2":
+  version: 0.0.2
+  resolution: "@grafana/google-sdk@npm:0.0.2"
+  checksum: a4dfe7a31a9fd8aabe8daf997d43a034226a2e366e23257080c6a2c5980f8e57e7bec74ba508ac2d860e247ea7734d91bcd6b71ca5a61fa6277344778640532f
+  languageName: node
+  linkType: hard
+
 "@grafana/runtime@workspace:*, @grafana/runtime@workspace:packages/grafana-runtime":
   version: 0.0.0-use.local
   resolution: "@grafana/runtime@workspace:packages/grafana-runtime"
@@ -19761,6 +19768,7 @@ __metadata:
     "@grafana/e2e-selectors": "workspace:*"
     "@grafana/eslint-config": 2.5.1
     "@grafana/experimental": 0.0.2-canary.11
+    "@grafana/google-sdk": 0.0.2
     "@grafana/runtime": "workspace:*"
     "@grafana/schema": "workspace:*"
     "@grafana/slate-react": 0.22.10-grafana