AzureMonitor: ConfigEditor updates (#73402)

Update config editor

- Use Field instead of InlineField
- Make use of new ConfigSection structural components
- Add DataSourceDescription component
- Add secureSocksProxy to types

public/app/plugins/datasource/azuremonitor/components/AzureCredentialsForm.tsx

@@ -1,13 +1,12 @@
 import React, { ChangeEvent } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { LegacyForms, Button, Select, InlineField } from '@grafana/ui';
+import { ConfigSection } from '@grafana/experimental';
+import { Button, Select, Field, Input } from '@grafana/ui';
 
 import { selectors } from '../e2e/selectors';
 import { AzureAuthType, AzureCredentials } from '../types';
 
-const { Input } = LegacyForms;
-
 export interface Props {
   managedIdentityEnabled: boolean;
   credentials: AzureCredentials;
@@ -28,8 +27,6 @@ const authTypeOptions: Array<SelectableValue<AzureAuthType>> = [
   },
 ];
 
-const LABEL_WIDTH = 18;
-
 export const AzureCredentialsForm = (props: Props) => {
   const { credentials, azureCloudOptions, onCredentialsChange, disabled, managedIdentityEnabled } = props;
 
@@ -94,12 +91,11 @@ export const AzureCredentialsForm = (props: Props) => {
   };
 
   return (
-    <div className="gf-form-group">
+    <ConfigSection title="Authentication">
       {managedIdentityEnabled && (
-        <InlineField
+        <Field
           label="Authentication"
-          labelWidth={LABEL_WIDTH}
-          tooltip="Choose the type of authentication to Azure services"
+          description="Choose the type of authentication to Azure services"
           data-testid={selectors.components.configEditor.authType.select}
           htmlFor="authentication-type"
         >
@@ -110,15 +106,13 @@ export const AzureCredentialsForm = (props: Props) => {
             onChange={onAuthTypeChange}
             disabled={disabled}
           />
-        </InlineField>
+        </Field>
       )}
       {credentials.authType === 'clientsecret' && (
         <>
           {azureCloudOptions && (
-            <InlineField
+            <Field
               label="Azure Cloud"
-              labelWidth={LABEL_WIDTH}
-              tooltip="Choose an Azure Cloud"
               data-testid={selectors.components.configEditor.azureCloud.input}
               htmlFor="azure-cloud-type"
               disabled={disabled}
@@ -131,45 +125,45 @@ export const AzureCredentialsForm = (props: Props) => {
                 options={azureCloudOptions}
                 onChange={onAzureCloudChange}
               />
-            </InlineField>
+            </Field>
           )}
-          <InlineField
+          <Field
             label="Directory (tenant) ID"
-            labelWidth={LABEL_WIDTH}
+            required
             data-testid={selectors.components.configEditor.tenantID.input}
             htmlFor="tenant-id"
+            invalid={!credentials.tenantId}
+            error={'Tenant ID is required'}
           >
-            <div className="width-15">
-              <Input
-                aria-label="Tenant ID"
-                className="width-30"
-                placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
-                value={credentials.tenantId || ''}
-                onChange={onTenantIdChange}
-                disabled={disabled}
-              />
-            </div>
-          </InlineField>
-          <InlineField
+            <Input
+              aria-label="Tenant ID"
+              className="width-30"
+              placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
+              value={credentials.tenantId || ''}
+              onChange={onTenantIdChange}
+              disabled={disabled}
+            />
+          </Field>
+          <Field
             label="Application (client) ID"
-            labelWidth={LABEL_WIDTH}
+            required
             data-testid={selectors.components.configEditor.clientID.input}
-            htmlFor="tenant-id"
+            htmlFor="client-id"
+            invalid={!credentials.clientId}
+            error={'Client ID is required'}
           >
-            <div className="width-15">
-              <Input
-                className="width-30"
-                aria-label="Client ID"
-                placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
-                value={credentials.clientId || ''}
-                onChange={onClientIdChange}
-                disabled={disabled}
-              />
-            </div>
-          </InlineField>
+            <Input
+              className="width-30"
+              aria-label="Client ID"
+              placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
+              value={credentials.clientId || ''}
+              onChange={onClientIdChange}
+              disabled={disabled}
+            />
+          </Field>
           {!disabled &&
             (typeof credentials.clientSecret === 'symbol' ? (
-              <InlineField label="Client Secret" labelWidth={LABEL_WIDTH} htmlFor="client-secret">
+              <Field label="Client Secret" htmlFor="client-secret" required>
                 <div className="width-30" style={{ display: 'flex', gap: '4px' }}>
                   <Input
                     aria-label="Client Secret"
@@ -181,13 +175,15 @@ export const AzureCredentialsForm = (props: Props) => {
                     Reset
                   </Button>
                 </div>
-              </InlineField>
+              </Field>
             ) : (
-              <InlineField
+              <Field
                 label="Client Secret"
-                labelWidth={LABEL_WIDTH}
                 data-testid={selectors.components.configEditor.clientSecret.input}
+                required
                 htmlFor="client-secret"
+                invalid={!credentials.clientSecret}
+                error={'Client secret is required'}
               >
                 <Input
                   className="width-30"
@@ -198,12 +194,12 @@ export const AzureCredentialsForm = (props: Props) => {
                   id="client-secret"
                   disabled={disabled}
                 />
-              </InlineField>
+              </Field>
             ))}
         </>
       )}
       {props.children}
-    </div>
+    </ConfigSection>
   );
 };
 

public/app/plugins/datasource/azuremonitor/components/ConfigEditor.tsx

@@ -1,8 +1,9 @@
 import React, { PureComponent } from 'react';
 
 import { DataSourcePluginOptionsEditorProps, SelectableValue, updateDatasourcePluginOption } from '@grafana/data';
+import { ConfigSection, DataSourceDescription } from '@grafana/experimental';
 import { getBackendSrv, getTemplateSrv, isFetchError, TemplateSrv } from '@grafana/runtime';
-import { Alert, SecureSocksProxySettings } from '@grafana/ui';
+import { Alert, Divider, SecureSocksProxySettings } from '@grafana/ui';
 import { config } from 'app/core/config';
 
 import ResponseParser from '../azure_monitor/response_parser';
@@ -96,6 +97,12 @@ export class ConfigEditor extends PureComponent<Props, State> {
 
     return (
       <>
+        <DataSourceDescription
+          dataSourceName="Azure Monitor"
+          docsLink="https://grafana.com/docs/grafana/latest/datasources/azure-monitor/"
+          hasRequiredFields
+        />
+        <Divider />
         <MonitorConfig options={options} updateOptions={this.updateOptions} getSubscriptions={this.getSubscriptions} />
         {error && (
           <Alert severity="error" title={error.title}>
@@ -104,7 +111,17 @@ export class ConfigEditor extends PureComponent<Props, State> {
           </Alert>
         )}
         {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>
+          </>
         )}
       </>
     );

public/app/plugins/datasource/azuremonitor/components/DefaultSubscription.tsx

@@ -1,14 +1,12 @@
 import React, { useEffect, useReducer } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { InlineField, Select, Button } from '@grafana/ui';
+import { Select, Button, Field } from '@grafana/ui';
 
 import { isCredentialsComplete } from '../credentials';
 import { selectors } from '../e2e/selectors';
 import { AzureCredentials, AzureDataSourceJsonData } from '../types';
 
-const LABEL_WIDTH = 18;
-
 export interface Props {
   options: AzureDataSourceJsonData;
   credentials: AzureCredentials;
@@ -70,9 +68,8 @@ export const DefaultSubscription = (props: Props) => {
 
   return (
     <>
-      <InlineField
+      <Field
         label="Default Subscription"
-        labelWidth={LABEL_WIDTH}
         data-testid={selectors.components.configEditor.defaultSubscription.input}
         htmlFor="default-subscription"
       >
@@ -97,7 +94,7 @@ export const DefaultSubscription = (props: Props) => {
             Load Subscriptions
           </Button>
         </div>
-      </InlineField>
+      </Field>
     </>
   );
 };

public/app/plugins/datasource/azuremonitor/components/MonitorConfig.tsx

@@ -43,7 +43,6 @@ export const MonitorConfig = (props: Props) => {
 
   return (
     <>
-      <h3 className="page-heading">Authentication</h3>
       <AzureCredentialsForm
         managedIdentityEnabled={config.azure.managedIdentityEnabled}
         credentials={credentials}

public/app/plugins/datasource/azuremonitor/types/types.ts

@@ -74,6 +74,8 @@ export interface AzureDataSourceJsonData extends DataSourceJsonData {
 
   // App Insights
   appInsightsAppId?: string;
+
+  enableSecureSocksProxy?: boolean;
 }
 
 export interface AzureDataSourceSecureJsonData {