From 3256f7dd0c169e97f63f7a59449d93555b98434f Mon Sep 17 00:00:00 2001
From: Andreas Christou <andreas.christou@grafana.com>
Date: Tue, 22 Aug 2023 12:51:04 +0100
Subject: [PATCH] CloudMonitoring: `ConfigEditor` updates (#73561)

Update GCM config
---
 .../components/ConfigEditor/ConfigEditor.tsx  | 21 +++++++++++++++++--
 .../cloud-monitoring/types/types.ts           |  1 +
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/public/app/plugins/datasource/cloud-monitoring/components/ConfigEditor/ConfigEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/ConfigEditor/ConfigEditor.tsx
index e7312c31a9f..7b17200f75e 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/ConfigEditor/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/ConfigEditor/ConfigEditor.tsx
@@ -1,9 +1,10 @@
 import React, { PureComponent } from 'react';
 
 import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
+import { ConfigSection, DataSourceDescription } from '@grafana/experimental';
 import { ConnectionConfig } from '@grafana/google-sdk';
 import { reportInteraction } from '@grafana/runtime';
-import { SecureSocksProxySettings } from '@grafana/ui';
+import { Divider, SecureSocksProxySettings } from '@grafana/ui';
 import { config } from 'app/core/config';
 
 import { CloudMonitoringOptions, CloudMonitoringSecureJsonData } from '../../types/types';
@@ -26,9 +27,25 @@ export class ConfigEditor extends PureComponent<Props> {
     const { options, onOptionsChange } = this.props;
     return (
       <>
+        <DataSourceDescription
+          dataSourceName="Google Cloud Monitoring"
+          docsLink="https://grafana.com/docs/grafana/latest/datasources/google-cloud-monitoring/"
+          hasRequiredFields
+        />
+        <Divider />
         <ConnectionConfig {...this.props} onOptionsChange={this.handleOnOptionsChange}></ConnectionConfig>
         {config.secureSocksDSProxyEnabled && (
-          <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
+          <>
+            <Divider />
+            <ConfigSection
+              title="Additional settings"
+              description="Additional settings are optional settings that can be configured for more control over your data source. This includes Secure Socks Proxy."
+              isCollapsible={true}
+              isInitiallyOpen={options.jsonData.enableSecureSocksProxy !== undefined}
+            >
+              <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
+            </ConfigSection>
+          </>
         )}
       </>
     );
diff --git a/public/app/plugins/datasource/cloud-monitoring/types/types.ts b/public/app/plugins/datasource/cloud-monitoring/types/types.ts
index 390b0d0b8b9..a97a1f91352 100644
--- a/public/app/plugins/datasource/cloud-monitoring/types/types.ts
+++ b/public/app/plugins/datasource/cloud-monitoring/types/types.ts
@@ -37,6 +37,7 @@ export interface Aggregation {
 
 export interface CloudMonitoringOptions extends DataSourceOptions {
   gceDefaultProject?: string;
+  enableSecureSocksProxy?: boolean;
 }
 
 export interface CloudMonitoringSecureJsonData extends DataSourceSecureJsonData {}