Skip to content

N
nexpie-grafana-theme
Commit 2098b9eb by Shavonn Brown Committed by GitHub
Options

Azure Monitor: Standardize Config Editor Implementation (#20455) 

* initial changes - removal from state, remove anon functions, reset secrets empty

* post testing cleanup

* init promise cancellation, other cleanup

* workspaces response parser, remove version incrementing

* update datasource funcs - DRYer

* remove prop mutation

* func to modify root config opt

* fix version issue

* update snapshot
parent 5f72bfe6
Showing with 244 additions and 365 deletions
packages/grafana-data/src/types/datasource.ts
...@@ -272,6 +272,64 @@ export abstract class DataSourceApi< ...@@ -272,6 +272,64 @@ export abstract class DataSourceApi<
interpolateVariablesInQueries?(queries: TQuery[]): TQuery[]; interpolateVariablesInQueries?(queries: TQuery[]): TQuery[];
} }
export function updateDatasourcePluginOption(props: DataSourcePluginOptionsEditorProps, key: string, val: any) {
let config = props.options;
config = {
...config,
[key]: val,
};
props.onOptionsChange(config);
}
export function updateDatasourcePluginJsonDataOption(
props: DataSourcePluginOptionsEditorProps,
key: string,
val: any,
secure: boolean
) {
let config = props.options;
if (secure) {
config = {
...config,
secureJsonData: {
...config.secureJsonData,
[key]: val,
},
};
} else {
config = {
...config,
jsonData: {
...config.jsonData,
[key]: val,
},
};
}
props.onOptionsChange(config);
}
export function updateDatasourcePluginResetKeyOption(props: DataSourcePluginOptionsEditorProps, key: string) {
let config = props.options;
config = {
...config,
secureJsonData: {
...config.secureJsonData,
[key]: '',
},
secureJsonFields: {
...config.secureJsonFields,
[key]: false,
},
};
props.onOptionsChange(config);
}
export interface QueryEditorProps< export interface QueryEditorProps<
DSType extends DataSourceApi<TQuery, TOptions>, DSType extends DataSourceApi<TQuery, TOptions>,
TQuery extends DataQuery = DataQuery, TQuery extends DataQuery = DataQuery,
......
public/app/plugins/datasource/grafana-azure-monitor-datasource/azure_monitor/response_parser.ts
...@@ -149,4 +149,25 @@ export default class ResponseParser { ...@@ -149,4 +149,25 @@ export default class ResponseParser {
return list; return list;
} }
static parseWorkspacesForSelect(result: any): Array<{ label: string; value: string }> {
const list: Array<{ label: string; value: string }> = [];
if (!result) {
return list;
}
const valueFieldName = 'customerId';
const textFieldName = 'name';
for (let i = 0; i < result.data.value.length; i++) {
if (!_.find(list, ['value', _.get(result.data.value[i].properties, valueFieldName)])) {
list.push({
label: _.get(result.data.value[i], textFieldName),
value: _.get(result.data.value[i].properties, valueFieldName),
});
}
}
return list;
}
} }
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AnalyticsConfig.test.tsx
...@@ -4,7 +4,7 @@ import AnalyticsConfig, { Props } from './AnalyticsConfig'; ...@@ -4,7 +4,7 @@ import AnalyticsConfig, { Props } from './AnalyticsConfig';
const setup = (propOverrides?: object) => { const setup = (propOverrides?: object) => {
const props: Props = { const props: Props = {
datasourceConfig: { options: {
id: 21, id: 21,
orgId: 1, orgId: 1,
name: 'Azure Monitor-10-10', name: 'Azure Monitor-10-10',
...@@ -24,9 +24,10 @@ const setup = (propOverrides?: object) => { ...@@ -24,9 +24,10 @@ const setup = (propOverrides?: object) => {
logAnalyticsClientSecret: false, logAnalyticsClientSecret: false,
}, },
jsonData: { jsonData: {
cloudName: '',
subscriptionId: '',
azureLogAnalyticsSameAs: false, azureLogAnalyticsSameAs: false,
logAnalyticsDefaultWorkspace: '', logAnalyticsDefaultWorkspace: '',
logAnalyticsClientSecret: '',
logAnalyticsTenantId: '', logAnalyticsTenantId: '',
}, },
secureJsonData: { secureJsonData: {
...@@ -35,9 +36,10 @@ const setup = (propOverrides?: object) => { ...@@ -35,9 +36,10 @@ const setup = (propOverrides?: object) => {
version: 1, version: 1,
readOnly: false, readOnly: false,
}, },
logAnalyticsSubscriptions: [], subscriptions: [],
logAnalyticsWorkspaces: [], workspaces: [],
onDatasourceUpdate: jest.fn(), onUpdateOption: jest.fn(),
onResetOptionKey: jest.fn(),
onLoadSubscriptions: jest.fn(), onLoadSubscriptions: jest.fn(),
onLoadWorkspaces: jest.fn(), onLoadWorkspaces: jest.fn(),
}; };
......
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AnalyticsConfig.tsx
import React, { PureComponent } from 'react'; import React, { PureComponent, ChangeEvent } from 'react';
import { SelectableValue } from '@grafana/data'; import { SelectableValue } from '@grafana/data';
import { AzureCredentialsForm } from './AzureCredentialsForm'; import { AzureCredentialsForm } from './AzureCredentialsForm';
import { Switch, FormLabel, Select, Button } from '@grafana/ui'; import { Switch, FormLabel, Select, Button } from '@grafana/ui';
import { AzureDataSourceSettings } from '../types';
export interface Props { export interface Props {
datasourceConfig: any; options: AzureDataSourceSettings;
logAnalyticsSubscriptions: SelectableValue[]; subscriptions: SelectableValue[];
logAnalyticsWorkspaces: SelectableValue[]; workspaces: SelectableValue[];
onDatasourceUpdate: (config: any) => void; onUpdateOption: (key: string, val: any, secure: boolean) => void;
onResetOptionKey: (key: string) => void;
onLoadSubscriptions: (type?: string) => void; onLoadSubscriptions: (type?: string) => void;
onLoadWorkspaces: (type?: string) => void; onLoadWorkspaces: (type?: string) => void;
} }
export class AnalyticsConfig extends PureComponent<Props> {
export interface State { onLogAnalyticsTenantIdChange = (event: ChangeEvent<HTMLInputElement>) => {
config: any; this.props.onUpdateOption('logAnalyticsTenantId', event.target.value, false);
logAnalyticsSubscriptions: SelectableValue[];
logAnalyticsWorkspaces: SelectableValue[];
}
export class AnalyticsConfig extends PureComponent<Props, State> {
constructor(props: Props) {
super(props);
const { datasourceConfig } = this.props;
this.state = {
config: datasourceConfig,
logAnalyticsSubscriptions: [],
logAnalyticsWorkspaces: [],
};
}
static getDerivedStateFromProps(props: Props, state: State) {
return {
...state,
config: props.datasourceConfig,
logAnalyticsSubscriptions: props.logAnalyticsSubscriptions,
logAnalyticsWorkspaces: props.logAnalyticsWorkspaces,
};
}
onLogAnalyticsTenantIdChange = (logAnalyticsTenantId: string) => {
this.props.onDatasourceUpdate({
...this.state.config,
jsonData: {
...this.state.config.jsonData,
logAnalyticsTenantId,
},
});
}; };
onLogAnalyticsClientIdChange = (logAnalyticsClientId: string) => { onLogAnalyticsClientIdChange = (event: ChangeEvent<HTMLInputElement>) => {
this.props.onDatasourceUpdate({ this.props.onUpdateOption('logAnalyticsClientId', event.target.value, false);
...this.state.config,
jsonData: {
...this.state.config.jsonData,
logAnalyticsClientId,
},
});
}; };
onLogAnalyticsClientSecretChange = (logAnalyticsClientSecret: string) => { onLogAnalyticsClientSecretChange = (event: ChangeEvent<HTMLInputElement>) => {
this.props.onDatasourceUpdate({ this.props.onUpdateOption('logAnalyticsClientSecret', event.target.value, true);
...this.state.config,
secureJsonData: {
...this.state.config.secureJsonData,
logAnalyticsClientSecret,
},
});
};
onLogAnalyticsResetClientSecret = () => {
this.props.onDatasourceUpdate({
...this.state.config,
version: this.state.config.version + 1,
secureJsonFields: { ...this.state.config.secureJsonFields, logAnalyticsClientSecret: false },
});
}; };
onLogAnalyticsSubscriptionSelect = (logAnalyticsSubscription: SelectableValue<string>) => { onLogAnalyticsSubscriptionSelect = (logAnalyticsSubscription: SelectableValue<string>) => {
this.props.onDatasourceUpdate({ this.props.onUpdateOption('logAnalyticsSubscriptionId', logAnalyticsSubscription.value, false);
...this.state.config,
jsonData: {
...this.state.config.jsonData,
logAnalyticsSubscriptionId: logAnalyticsSubscription.value,
},
});
}; };
onWorkspaceSelectChange = (logAnalyticsDefaultWorkspace: SelectableValue<string>) => { onWorkspaceSelectChange = (logAnalyticsDefaultWorkspace: SelectableValue<string>) => {
this.props.onDatasourceUpdate({ this.props.onUpdateOption('logAnalyticsDefaultWorkspace', logAnalyticsDefaultWorkspace.value, false);
...this.state.config,
jsonData: {
...this.state.config.jsonData,
logAnalyticsDefaultWorkspace: logAnalyticsDefaultWorkspace.value,
},
});
}; };
onAzureLogAnalyticsSameAsChange = (azureLogAnalyticsSameAs: boolean) => { onAzureLogAnalyticsSameAsChange = () => {
this.props.onDatasourceUpdate({ const { options } = this.props;
...this.state.config, this.props.onUpdateOption('azureLogAnalyticsSameAs', !options.jsonData.azureLogAnalyticsSameAs, false);
jsonData: { };
...this.state.config.jsonData,
azureLogAnalyticsSameAs, onLogAnalyticsResetClientSecret = () => {
}, this.props.onResetOptionKey('logAnalyticsClientSecret');
});
}; };
hasWorkspaceRequiredFields = () => { hasWorkspaceRequiredFields = () => {
const { const {
config: { jsonData, secureJsonData, secureJsonFields }, options: { jsonData, secureJsonData, secureJsonFields },
} = this.state; } = this.props;
if (jsonData.azureLogAnalyticsSameAs) { if (jsonData.azureLogAnalyticsSameAs) {
return ( return (
...@@ -134,10 +69,14 @@ export class AnalyticsConfig extends PureComponent<Props, State> { ...@@ -134,10 +69,14 @@ export class AnalyticsConfig extends PureComponent<Props, State> {
render() { render() {
const { const {
config: { jsonData, secureJsonData, secureJsonFields }, options: { jsonData, secureJsonData, secureJsonFields },
logAnalyticsSubscriptions, subscriptions,
logAnalyticsWorkspaces, workspaces,
} = this.state; } = this.props;
if (!jsonData.hasOwnProperty('azureLogAnalyticsSameAs')) {
jsonData.azureLogAnalyticsSameAs = true;
}
const addtlAttrs = { const addtlAttrs = {
...(jsonData.azureLogAnalyticsSameAs && { ...(jsonData.azureLogAnalyticsSameAs && {
...@@ -150,12 +89,12 @@ export class AnalyticsConfig extends PureComponent<Props, State> { ...@@ -150,12 +89,12 @@ export class AnalyticsConfig extends PureComponent<Props, State> {
<Switch <Switch
label="Same details as Azure Monitor API" label="Same details as Azure Monitor API"
checked={jsonData.azureLogAnalyticsSameAs} checked={jsonData.azureLogAnalyticsSameAs}
onChange={event => this.onAzureLogAnalyticsSameAsChange(!jsonData.azureLogAnalyticsSameAs)} onChange={this.onAzureLogAnalyticsSameAsChange}
{...addtlAttrs} {...addtlAttrs}
/> />
{!jsonData.azureLogAnalyticsSameAs && ( {!jsonData.azureLogAnalyticsSameAs && (
<AzureCredentialsForm <AzureCredentialsForm
subscriptionOptions={logAnalyticsSubscriptions} subscriptionOptions={subscriptions}
selectedSubscription={jsonData.logAnalyticsSubscriptionId} selectedSubscription={jsonData.logAnalyticsSubscriptionId}
tenantId={jsonData.logAnalyticsTenantId} tenantId={jsonData.logAnalyticsTenantId}
clientId={jsonData.logAnalyticsClientId} clientId={jsonData.logAnalyticsClientId}
...@@ -180,10 +119,8 @@ export class AnalyticsConfig extends PureComponent<Props, State> { ...@@ -180,10 +119,8 @@ export class AnalyticsConfig extends PureComponent<Props, State> {
</FormLabel> </FormLabel>
<div className="width-25"> <div className="width-25">
<Select <Select
value={logAnalyticsWorkspaces.find( value={workspaces.find(workspace => workspace.value === jsonData.logAnalyticsDefaultWorkspace)}
workspace => workspace.value === jsonData.logAnalyticsDefaultWorkspace options={workspaces}
)}
options={logAnalyticsWorkspaces}
defaultValue={jsonData.logAnalyticsDefaultWorkspace} defaultValue={jsonData.logAnalyticsDefaultWorkspace}
onChange={this.onWorkspaceSelectChange} onChange={this.onWorkspaceSelectChange}
/> />
......
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AzureCredentialsForm.test.tsx
...@@ -5,15 +5,15 @@ import AzureCredentialsForm, { Props } from './AzureCredentialsForm'; ...@@ -5,15 +5,15 @@ import AzureCredentialsForm, { Props } from './AzureCredentialsForm';
const setup = (propOverrides?: object) => { const setup = (propOverrides?: object) => {
const props: Props = { const props: Props = {
selectedAzureCloud: 'azuremonitor', selectedAzureCloud: 'azuremonitor',
selectedSubscription: '44693801-6ee6-49de-9b2d-9106972f9572', selectedSubscription: '44987801-6nn6-49he-9b2d-9106972f9789',
azureCloudOptions: [ azureCloudOptions: [
{ value: 'azuremonitor', label: 'Azure' }, { value: 'azuremonitor', label: 'Azure' },
{ value: 'govazuremonitor', label: 'Azure US Government' }, { value: 'govazuremonitor', label: 'Azure US Government' },
{ value: 'germanyazuremonitor', label: 'Azure Germany' }, { value: 'germanyazuremonitor', label: 'Azure Germany' },
{ value: 'chinaazuremonitor', label: 'Azure China' }, { value: 'chinaazuremonitor', label: 'Azure China' },
], ],
tenantId: 'e7f3f661-a933-4b3f-8176-51c4f982ec48', tenantId: 'e7f3f661-a933-3h3f-0294-31c4f962ec48',
clientId: '77409fad-c0a9-45df-9e25-f1ff95af6554', clientId: '34509fad-c0r9-45df-9e25-f1ee34af6900',
clientSecret: '', clientSecret: '',
clientSecretConfigured: false, clientSecretConfigured: false,
subscriptionOptions: [], subscriptionOptions: [],
......
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AzureCredentialsForm.tsx
...@@ -13,26 +13,15 @@ export interface Props { ...@@ -13,26 +13,15 @@ export interface Props {
subscriptionOptions?: SelectableValue[]; subscriptionOptions?: SelectableValue[];
onAzureCloudChange?: (value: SelectableValue<string>) => void; onAzureCloudChange?: (value: SelectableValue<string>) => void;
onSubscriptionSelectChange?: (value: SelectableValue<string>) => void; onSubscriptionSelectChange?: (value: SelectableValue<string>) => void;
onTenantIdChange: (tenantId: string) => void; onTenantIdChange: (event: ChangeEvent<HTMLInputElement>) => void;
onClientIdChange: (clientId: string) => void; onClientIdChange: (event: ChangeEvent<HTMLInputElement>) => void;
onClientSecretChange: (clientSecret: string) => void; onClientSecretChange: (event: ChangeEvent<HTMLInputElement>) => void;
onResetClientSecret: () => void; onResetClientSecret: () => void;
onLoadSubscriptions?: () => void; onLoadSubscriptions?: () => void;
} }
export interface State { export class AzureCredentialsForm extends PureComponent<Props> {
selectedAzureCloud?: string; render() {
selectedSubscription: string;
tenantId: string;
clientId: string;
clientSecret: string;
clientSecretConfigured: boolean;
}
export class AzureCredentialsForm extends PureComponent<Props, State> {
constructor(props: Props) {
super(props);
const { const {
selectedAzureCloud, selectedAzureCloud,
selectedSubscription, selectedSubscription,
...@@ -40,31 +29,6 @@ export class AzureCredentialsForm extends PureComponent<Props, State> { ...@@ -40,31 +29,6 @@ export class AzureCredentialsForm extends PureComponent<Props, State> {
clientId, clientId,
clientSecret, clientSecret,
clientSecretConfigured, clientSecretConfigured,
} = this.props;
this.state = {
selectedAzureCloud,
selectedSubscription,
tenantId,
clientId,
clientSecret,
clientSecretConfigured,
};
}
static getDerivedStateFromProps(nextProps: Props, prevState: Props) {
const { selectedAzureCloud, tenantId, clientId, clientSecret, clientSecretConfigured } = nextProps;
return {
selectedAzureCloud,
tenantId,
clientId,
clientSecret,
clientSecretConfigured,
};
}
render() {
const {
azureCloudOptions, azureCloudOptions,
subscriptionOptions, subscriptionOptions,
onAzureCloudChange, onAzureCloudChange,
...@@ -75,16 +39,9 @@ export class AzureCredentialsForm extends PureComponent<Props, State> { ...@@ -75,16 +39,9 @@ export class AzureCredentialsForm extends PureComponent<Props, State> {
onResetClientSecret, onResetClientSecret,
onLoadSubscriptions, onLoadSubscriptions,
} = this.props; } = this.props;
const {
selectedAzureCloud,
selectedSubscription,
tenantId,
clientId,
clientSecret,
clientSecretConfigured,
} = this.state;
const hasRequiredFields = tenantId && clientId && (clientSecret || clientSecretConfigured); const hasRequiredFields = tenantId && clientId && (clientSecret || clientSecretConfigured);
const hasSubscriptions = onLoadSubscriptions && subscriptionOptions; const hasSubscriptions = onLoadSubscriptions && subscriptionOptions;
return ( return (
<> <>
<div className="gf-form-group"> <div className="gf-form-group">
...@@ -112,7 +69,7 @@ export class AzureCredentialsForm extends PureComponent<Props, State> { ...@@ -112,7 +69,7 @@ export class AzureCredentialsForm extends PureComponent<Props, State> {
className="width-30" className="width-30"
placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
value={tenantId || ''} value={tenantId || ''}
onChange={(event: ChangeEvent<HTMLInputElement>) => onTenantIdChange(event.target.value)} onChange={onTenantIdChange}
/> />
</div> </div>
</div> </div>
...@@ -125,7 +82,7 @@ export class AzureCredentialsForm extends PureComponent<Props, State> { ...@@ -125,7 +82,7 @@ export class AzureCredentialsForm extends PureComponent<Props, State> {
className="width-30" className="width-30"
placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
value={clientId || ''} value={clientId || ''}
onChange={(event: ChangeEvent<HTMLInputElement>) => onClientIdChange(event.target.value)} onChange={onClientIdChange}
/> />
</div> </div>
</div> </div>
...@@ -153,7 +110,7 @@ export class AzureCredentialsForm extends PureComponent<Props, State> { ...@@ -153,7 +110,7 @@ export class AzureCredentialsForm extends PureComponent<Props, State> {
className="width-30" className="width-30"
placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
value={clientSecret || ''} value={clientSecret || ''}
onChange={(event: ChangeEvent<HTMLInputElement>) => onClientSecretChange(event.target.value)} onChange={onClientSecretChange}
/> />
</div> </div>
</div> </div>
......
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ConfigEditor.test.tsx
...@@ -21,7 +21,7 @@ const setup = () => { ...@@ -21,7 +21,7 @@ const setup = () => {
withCredentials: false, withCredentials: false,
isDefault: false, isDefault: false,
jsonData: { jsonData: {
subscriptionId: '', subscriptionId: '44987801-6nn6-49he-9b2d-9106972f9789',
azureLogAnalyticsSameAs: true, azureLogAnalyticsSameAs: true,
cloudName: 'azuremonitor', cloudName: 'azuremonitor',
}, },
......
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/InsightsConfig.test.tsx
...@@ -4,7 +4,7 @@ import InsightsConfig, { Props } from './InsightsConfig'; ...@@ -4,7 +4,7 @@ import InsightsConfig, { Props } from './InsightsConfig';
const setup = (propOverrides?: object) => { const setup = (propOverrides?: object) => {
const props: Props = { const props: Props = {
datasourceConfig: { options: {
id: 21, id: 21,
orgId: 1, orgId: 1,
name: 'Azure Monitor-10-10', name: 'Azure Monitor-10-10',
...@@ -24,15 +24,18 @@ const setup = (propOverrides?: object) => { ...@@ -24,15 +24,18 @@ const setup = (propOverrides?: object) => {
appInsightsApiKey: false, appInsightsApiKey: false,
}, },
jsonData: { jsonData: {
appInsightsAppId: 'cddcc020-2c94-460a-a3d0-df3147ffa792', cloudName: '',
subscriptionId: '',
appInsightsAppId: 'cvvcc020-2cpo-123a-a3d0-df6547fki792',
}, },
secureJsonData: { secureJsonData: {
appInsightsApiKey: 'e7f3f661-a933-4b3f-8176-51c4f982ec48', appInsightsApiKey: 'e7f3f775-a987-4b3f-3835-51c4f982kl48',
}, },
version: 1, version: 1,
readOnly: false, readOnly: false,
}, },
onDatasourceUpdate: jest.fn(), onUpdateOption: jest.fn(),
onResetOptionKey: jest.fn(),
}; };
Object.assign(props, propOverrides); Object.assign(props, propOverrides);
......
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/InsightsConfig.tsx
import React, { PureComponent } from 'react'; import React, { PureComponent, ChangeEvent } from 'react';
import { FormLabel, Button, Input } from '@grafana/ui'; import { FormLabel, Button, Input } from '@grafana/ui';
import { AzureDataSourceSettings } from '../types';
export interface Props { export interface Props {
datasourceConfig: any; options: AzureDataSourceSettings;
onDatasourceUpdate: (config: any) => void; onUpdateOption: (key: string, val: any, secure: boolean) => void;
onResetOptionKey: (key: string) => void;
} }
export class InsightsConfig extends PureComponent<Props> {
export interface State { onAppInsightsAppIdChange = (event: ChangeEvent<HTMLInputElement>) => {
config: any; this.props.onUpdateOption('appInsightsAppId', event.target.value, false);
}
export class InsightsConfig extends PureComponent<Props, State> {
constructor(props: Props) {
super(props);
const { datasourceConfig } = this.props;
this.state = {
config: datasourceConfig,
};
}
static getDerivedStateFromProps(props: Props, state: State) {
return {
...state,
config: props.datasourceConfig,
};
}
onAppInsightsAppIdChange = (appInsightsAppId: string) => {
this.props.onDatasourceUpdate({
...this.state.config,
jsonData: {
...this.state.config.jsonData,
appInsightsAppId,
},
});
}; };
onAppInsightsApiKeyChange = (appInsightsApiKey: string) => { onAppInsightsApiKeyChange = (event: ChangeEvent<HTMLInputElement>) => {
this.props.onDatasourceUpdate({ this.props.onUpdateOption('appInsightsApiKey', event.target.value, true);
...this.state.config,
secureJsonData: {
...this.state.config.secureJsonData,
appInsightsApiKey,
},
});
}; };
onAppInsightsResetApiKey = () => { onAppInsightsResetApiKey = () => {
this.props.onDatasourceUpdate({ this.props.onResetOptionKey('appInsightsApiKey');
...this.state.config,
version: this.state.config.version + 1,
secureJsonFields: {
...this.state.config.secureJsonFields,
appInsightsApiKey: false,
},
});
}; };
render() { render() {
const { config } = this.state; const { options } = this.props;
return ( return (
<> <>
<h3 className="page-heading">Application Insights Details</h3> <h3 className="page-heading">Application Insights Details</h3>
<div className="gf-form-group"> <div className="gf-form-group">
{config.secureJsonFields.appInsightsApiKey ? ( {options.secureJsonFields.appInsightsApiKey ? (
<div className="gf-form-inline"> <div className="gf-form-inline">
<div className="gf-form"> <div className="gf-form">
<FormLabel className="width-12">API Key</FormLabel> <FormLabel className="width-12">API Key</FormLabel>
...@@ -87,8 +48,8 @@ export class InsightsConfig extends PureComponent<Props, State> { ...@@ -87,8 +48,8 @@ export class InsightsConfig extends PureComponent<Props, State> {
<Input <Input
className="width-30" className="width-30"
placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
value={config.secureJsonData.appInsightsApiKey || ''} value={options.secureJsonData.appInsightsApiKey || ''}
onChange={event => this.onAppInsightsApiKeyChange(event.target.value)} onChange={this.onAppInsightsApiKeyChange}
/> />
</div> </div>
</div> </div>
...@@ -100,8 +61,8 @@ export class InsightsConfig extends PureComponent<Props, State> { ...@@ -100,8 +61,8 @@ export class InsightsConfig extends PureComponent<Props, State> {
<div className="width-15"> <div className="width-15">
<Input <Input
className="width-30" className="width-30"
value={config.jsonData.appInsightsAppId || ''} value={options.jsonData.appInsightsAppId || ''}
onChange={event => this.onAppInsightsAppIdChange(event.target.value)} onChange={this.onAppInsightsAppIdChange}
/> />
</div> </div>
</div> </div>
......
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MonitorConfig.tsx
import React, { PureComponent } from 'react'; import React, { PureComponent, ChangeEvent } from 'react';
import { SelectableValue } from '@grafana/data'; import { SelectableValue } from '@grafana/data';
import { AzureCredentialsForm } from './AzureCredentialsForm'; import { AzureCredentialsForm } from './AzureCredentialsForm';
import { AzureDataSourceSettings } from '../types';
const azureClouds = [
{ value: 'azuremonitor', label: 'Azure' },
{ value: 'govazuremonitor', label: 'Azure US Government' },
{ value: 'germanyazuremonitor', label: 'Azure Germany' },
{ value: 'chinaazuremonitor', label: 'Azure China' },
] as SelectableValue[];
export interface Props { export interface Props {
datasourceConfig: any; options: AzureDataSourceSettings;
subscriptions: SelectableValue[]; subscriptions: SelectableValue[];
onDatasourceUpdate: (config: any) => void; onUpdateOption: (key: string, val: any, secure: boolean) => void;
onResetOptionKey: (key: string) => void;
onLoadSubscriptions: () => void; onLoadSubscriptions: () => void;
} }
export interface State { export class MonitorConfig extends PureComponent<Props> {
config: any;
azureClouds: SelectableValue[];
subscriptions: SelectableValue[];
}
export class MonitorConfig extends PureComponent<Props, State> {
constructor(props: Props) {
super(props);
const { datasourceConfig } = this.props;
this.state = {
config: datasourceConfig,
azureClouds: [
{ value: 'azuremonitor', label: 'Azure' },
{ value: 'govazuremonitor', label: 'Azure US Government' },
{ value: 'germanyazuremonitor', label: 'Azure Germany' },
{ value: 'chinaazuremonitor', label: 'Azure China' },
],
subscriptions: [],
};
}
static getDerivedStateFromProps(props: Props, state: State) {
return {
...state,
config: props.datasourceConfig,
subscriptions: props.subscriptions,
};
}
onAzureCloudSelect = (cloudName: SelectableValue<string>) => { onAzureCloudSelect = (cloudName: SelectableValue<string>) => {
this.props.onDatasourceUpdate({ this.props.onUpdateOption('cloudName', cloudName.value, false);
...this.state.config,
jsonData: {
...this.state.config.jsonData,
cloudName: cloudName.value,
},
});
}; };
onTenantIdChange = (tenantId: string) => { onTenantIdChange = (event: ChangeEvent<HTMLInputElement>) => {
this.props.onDatasourceUpdate({ this.props.onUpdateOption('tenantId', event.target.value, false);
...this.state.config,
jsonData: {
...this.state.config.jsonData,
tenantId,
},
});
}; };
onClientIdChange = (clientId: string) => { onClientIdChange = (event: ChangeEvent<HTMLInputElement>) => {
this.props.onDatasourceUpdate({ this.props.onUpdateOption('clientId', event.target.value, false);
...this.state.config,
jsonData: {
...this.state.config.jsonData,
clientId,
},
});
}; };
onClientSecretChange = (clientSecret: string) => { onClientSecretChange = (event: ChangeEvent<HTMLInputElement>) => {
this.props.onDatasourceUpdate({ this.props.onUpdateOption('clientSecret', event.target.value, true);
...this.state.config,
secureJsonData: {
...this.state.config.secureJsonData,
clientSecret,
},
});
}; };
onResetClientSecret = () => { onResetClientSecret = () => {
this.props.onDatasourceUpdate({ this.props.onResetOptionKey('clientSecret');
...this.state.config,
version: this.state.config.version + 1,
secureJsonFields: {
...this.state.config.secureJsonFields,
clientSecret: false,
},
});
}; };
onSubscriptionSelect = (subscription: SelectableValue<string>) => { onSubscriptionSelect = (subscription: SelectableValue<string>) => {
this.props.onDatasourceUpdate({ this.props.onUpdateOption('subscriptionId', subscription.value, false);
...this.state.config,
jsonData: {
...this.state.config.jsonData,
subscriptionId: subscription.value,
},
});
}; };
render() { render() {
const { azureClouds, config, subscriptions } = this.state; const { options, subscriptions } = this.props;
return ( return (
<> <>
<h3 className="page-heading">Azure Monitor Details</h3> <h3 className="page-heading">Azure Monitor Details</h3>
<AzureCredentialsForm <AzureCredentialsForm
selectedAzureCloud={config.jsonData.cloudName} selectedAzureCloud={options.jsonData.cloudName || 'azuremonitor'}
azureCloudOptions={azureClouds} azureCloudOptions={azureClouds}
subscriptionOptions={subscriptions} subscriptionOptions={subscriptions}
selectedSubscription={config.jsonData.subscriptionId} selectedSubscription={options.jsonData.subscriptionId}
tenantId={config.jsonData.tenantId} tenantId={options.jsonData.tenantId}
clientId={config.jsonData.clientId} clientId={options.jsonData.clientId}
clientSecret={config.secureJsonData.clientSecret} clientSecret={options.secureJsonData.clientSecret}
clientSecretConfigured={config.secureJsonFields.clientSecret} clientSecretConfigured={options.secureJsonFields.clientSecret}
onAzureCloudChange={this.onAzureCloudSelect} onAzureCloudChange={this.onAzureCloudSelect}
onSubscriptionSelectChange={this.onSubscriptionSelect} onSubscriptionSelectChange={this.onSubscriptionSelect}
onTenantIdChange={this.onTenantIdChange} onTenantIdChange={this.onTenantIdChange}
......
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/__snapshots__/AzureCredentialsForm.test.tsx.snap
...@@ -86,9 +86,9 @@ exports[`Render should disable azure monitor secret input 1`] = ` ...@@ -86,9 +86,9 @@ exports[`Render should disable azure monitor secret input 1`] = `
> >
<Input <Input
className="width-30" className="width-30"
onChange={[Function]} onChange={[MockFunction]}
placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
value="e7f3f661-a933-4b3f-8176-51c4f982ec48" value="e7f3f661-a933-3h3f-0294-31c4f962ec48"
/> />
</div> </div>
</div> </div>
...@@ -109,9 +109,9 @@ exports[`Render should disable azure monitor secret input 1`] = ` ...@@ -109,9 +109,9 @@ exports[`Render should disable azure monitor secret input 1`] = `
> >
<Input <Input
className="width-30" className="width-30"
onChange={[Function]} onChange={[MockFunction]}
placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
value="77409fad-c0a9-45df-9e25-f1ff95af6554" value="34509fad-c0r9-45df-9e25-f1ee34af6900"
/> />
</div> </div>
</div> </div>
...@@ -177,7 +177,7 @@ exports[`Render should disable azure monitor secret input 1`] = ` ...@@ -177,7 +177,7 @@ exports[`Render should disable azure monitor secret input 1`] = `
"SingleValue": [Function], "SingleValue": [Function],
} }
} }
defaultValue="44693801-6ee6-49de-9b2d-9106972f9572" defaultValue="44987801-6nn6-49he-9b2d-9106972f9789"
isClearable={false} isClearable={false}
isDisabled={false} isDisabled={false}
isLoading={false} isLoading={false}
...@@ -303,9 +303,9 @@ exports[`Render should enable azure monitor load subscriptions button 1`] = ` ...@@ -303,9 +303,9 @@ exports[`Render should enable azure monitor load subscriptions button 1`] = `
> >
<Input <Input
className="width-30" className="width-30"
onChange={[Function]} onChange={[MockFunction]}
placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
value="e7f3f661-a933-4b3f-8176-51c4f982ec48" value="e7f3f661-a933-3h3f-0294-31c4f962ec48"
/> />
</div> </div>
</div> </div>
...@@ -326,9 +326,9 @@ exports[`Render should enable azure monitor load subscriptions button 1`] = ` ...@@ -326,9 +326,9 @@ exports[`Render should enable azure monitor load subscriptions button 1`] = `
> >
<Input <Input
className="width-30" className="width-30"
onChange={[Function]} onChange={[MockFunction]}
placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
value="77409fad-c0a9-45df-9e25-f1ff95af6554" value="34509fad-c0r9-45df-9e25-f1ee34af6900"
/> />
</div> </div>
</div> </div>
...@@ -349,7 +349,7 @@ exports[`Render should enable azure monitor load subscriptions button 1`] = ` ...@@ -349,7 +349,7 @@ exports[`Render should enable azure monitor load subscriptions button 1`] = `
> >
<Input <Input
className="width-30" className="width-30"
onChange={[Function]} onChange={[MockFunction]}
placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
value="e7f3f661-a933-4b3f-8176-51c4f982ec48" value="e7f3f661-a933-4b3f-8176-51c4f982ec48"
/> />
...@@ -384,7 +384,7 @@ exports[`Render should enable azure monitor load subscriptions button 1`] = ` ...@@ -384,7 +384,7 @@ exports[`Render should enable azure monitor load subscriptions button 1`] = `
"SingleValue": [Function], "SingleValue": [Function],
} }
} }
defaultValue="44693801-6ee6-49de-9b2d-9106972f9572" defaultValue="44987801-6nn6-49he-9b2d-9106972f9789"
isClearable={false} isClearable={false}
isDisabled={false} isDisabled={false}
isLoading={false} isLoading={false}
...@@ -510,9 +510,9 @@ exports[`Render should render component 1`] = ` ...@@ -510,9 +510,9 @@ exports[`Render should render component 1`] = `
> >
<Input <Input
className="width-30" className="width-30"
onChange={[Function]} onChange={[MockFunction]}
placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
value="e7f3f661-a933-4b3f-8176-51c4f982ec48" value="e7f3f661-a933-3h3f-0294-31c4f962ec48"
/> />
</div> </div>
</div> </div>
...@@ -533,9 +533,9 @@ exports[`Render should render component 1`] = ` ...@@ -533,9 +533,9 @@ exports[`Render should render component 1`] = `
> >
<Input <Input
className="width-30" className="width-30"
onChange={[Function]} onChange={[MockFunction]}
placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
value="77409fad-c0a9-45df-9e25-f1ff95af6554" value="34509fad-c0r9-45df-9e25-f1ee34af6900"
/> />
</div> </div>
</div> </div>
...@@ -556,7 +556,7 @@ exports[`Render should render component 1`] = ` ...@@ -556,7 +556,7 @@ exports[`Render should render component 1`] = `
> >
<Input <Input
className="width-30" className="width-30"
onChange={[Function]} onChange={[MockFunction]}
placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
value="" value=""
/> />
...@@ -591,7 +591,7 @@ exports[`Render should render component 1`] = ` ...@@ -591,7 +591,7 @@ exports[`Render should render component 1`] = `
"SingleValue": [Function], "SingleValue": [Function],
} }
} }
defaultValue="44693801-6ee6-49de-9b2d-9106972f9572" defaultValue="44987801-6nn6-49he-9b2d-9106972f9789"
isClearable={false} isClearable={false}
isDisabled={false} isDisabled={false}
isLoading={false} isLoading={false}
......
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/__snapshots__/ConfigEditor.test.tsx.snap
...@@ -3,7 +3,10 @@ ...@@ -3,7 +3,10 @@
exports[`Render should render component 1`] = ` exports[`Render should render component 1`] = `
<Fragment> <Fragment>
<MonitorConfig <MonitorConfig
datasourceConfig={ onLoadSubscriptions={[Function]}
onResetOptionKey={[Function]}
onUpdateOption={[Function]}
options={
Object { Object {
"access": "proxy", "access": "proxy",
"basicAuth": false, "basicAuth": false,
...@@ -15,6 +18,7 @@ exports[`Render should render component 1`] = ` ...@@ -15,6 +18,7 @@ exports[`Render should render component 1`] = `
"jsonData": Object { "jsonData": Object {
"azureLogAnalyticsSameAs": true, "azureLogAnalyticsSameAs": true,
"cloudName": "azuremonitor", "cloudName": "azuremonitor",
"subscriptionId": "44987801-6nn6-49he-9b2d-9106972f9789",
}, },
"name": "Azure Monitor-10-10", "name": "Azure Monitor-10-10",
"orgId": 1, "orgId": 1,
...@@ -24,18 +28,20 @@ exports[`Render should render component 1`] = ` ...@@ -24,18 +28,20 @@ exports[`Render should render component 1`] = `
"secureJsonFields": Object {}, "secureJsonFields": Object {},
"type": "grafana-azure-monitor-datasource", "type": "grafana-azure-monitor-datasource",
"typeLogoUrl": "", "typeLogoUrl": "",
"url": "/api/datasources/proxy/21", "url": "",
"user": "", "user": "",
"version": 1, "version": 1,
"withCredentials": false, "withCredentials": false,
} }
} }
onDatasourceUpdate={[Function]}
onLoadSubscriptions={[Function]}
subscriptions={Array []} subscriptions={Array []}
/> />
<AnalyticsConfig <AnalyticsConfig
datasourceConfig={ onLoadSubscriptions={[Function]}
onLoadWorkspaces={[Function]}
onResetOptionKey={[Function]}
onUpdateOption={[Function]}
options={
Object { Object {
"access": "proxy", "access": "proxy",
"basicAuth": false, "basicAuth": false,
...@@ -47,6 +53,7 @@ exports[`Render should render component 1`] = ` ...@@ -47,6 +53,7 @@ exports[`Render should render component 1`] = `
"jsonData": Object { "jsonData": Object {
"azureLogAnalyticsSameAs": true, "azureLogAnalyticsSameAs": true,
"cloudName": "azuremonitor", "cloudName": "azuremonitor",
"subscriptionId": "44987801-6nn6-49he-9b2d-9106972f9789",
}, },
"name": "Azure Monitor-10-10", "name": "Azure Monitor-10-10",
"orgId": 1, "orgId": 1,
...@@ -56,20 +63,19 @@ exports[`Render should render component 1`] = ` ...@@ -56,20 +63,19 @@ exports[`Render should render component 1`] = `
"secureJsonFields": Object {}, "secureJsonFields": Object {},
"type": "grafana-azure-monitor-datasource", "type": "grafana-azure-monitor-datasource",
"typeLogoUrl": "", "typeLogoUrl": "",
"url": "/api/datasources/proxy/21", "url": "",
"user": "", "user": "",
"version": 1, "version": 1,
"withCredentials": false, "withCredentials": false,
} }
} }
logAnalyticsSubscriptions={Array []} subscriptions={Array []}
logAnalyticsWorkspaces={Array []} workspaces={Array []}
onDatasourceUpdate={[Function]}
onLoadSubscriptions={[Function]}
onLoadWorkspaces={[Function]}
/> />
<InsightsConfig <InsightsConfig
datasourceConfig={ onResetOptionKey={[Function]}
onUpdateOption={[Function]}
options={
Object { Object {
"access": "proxy", "access": "proxy",
"basicAuth": false, "basicAuth": false,
...@@ -81,6 +87,7 @@ exports[`Render should render component 1`] = ` ...@@ -81,6 +87,7 @@ exports[`Render should render component 1`] = `
"jsonData": Object { "jsonData": Object {
"azureLogAnalyticsSameAs": true, "azureLogAnalyticsSameAs": true,
"cloudName": "azuremonitor", "cloudName": "azuremonitor",
"subscriptionId": "44987801-6nn6-49he-9b2d-9106972f9789",
}, },
"name": "Azure Monitor-10-10", "name": "Azure Monitor-10-10",
"orgId": 1, "orgId": 1,
...@@ -90,13 +97,12 @@ exports[`Render should render component 1`] = ` ...@@ -90,13 +97,12 @@ exports[`Render should render component 1`] = `
"secureJsonFields": Object {}, "secureJsonFields": Object {},
"type": "grafana-azure-monitor-datasource", "type": "grafana-azure-monitor-datasource",
"typeLogoUrl": "", "typeLogoUrl": "",
"url": "/api/datasources/proxy/21", "url": "",
"user": "", "user": "",
"version": 1, "version": 1,
"withCredentials": false, "withCredentials": false,
} }
} }
onDatasourceUpdate={[Function]}
/> />
</Fragment> </Fragment>
`; `;
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/__snapshots__/InsightsConfig.test.tsx.snap
...@@ -21,25 +21,15 @@ exports[`Render should disable insights api key input 1`] = ` ...@@ -21,25 +21,15 @@ exports[`Render should disable insights api key input 1`] = `
> >
API Key API Key
</Component> </Component>
<Input
className="width-25"
disabled={true}
placeholder="configured"
/>
</div>
<div
className="gf-form"
>
<div <div
className="max-width-30 gf-form-inline" className="width-15"
> >
<Button <Input
onClick={[Function]} className="width-30"
type="button" onChange={[Function]}
variant="secondary" placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
> value="e7f3f775-a987-4b3f-3835-51c4f982kl48"
reset />
</Button>
</div> </div>
</div> </div>
</div> </div>
...@@ -60,7 +50,7 @@ exports[`Render should disable insights api key input 1`] = ` ...@@ -60,7 +50,7 @@ exports[`Render should disable insights api key input 1`] = `
<Input <Input
className="width-30" className="width-30"
onChange={[Function]} onChange={[Function]}
value="cddcc020-2c94-460a-a3d0-df3147ffa792" value="cvvcc020-2cpo-123a-a3d0-df6547fki792"
/> />
</div> </div>
</div> </div>
...@@ -97,7 +87,7 @@ exports[`Render should enable insights api key input 1`] = ` ...@@ -97,7 +87,7 @@ exports[`Render should enable insights api key input 1`] = `
className="width-30" className="width-30"
onChange={[Function]} onChange={[Function]}
placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
value="e7f3f661-a933-4b3f-8176-51c4f982ec48" value="e7f3f775-a987-4b3f-3835-51c4f982kl48"
/> />
</div> </div>
</div> </div>
...@@ -119,7 +109,7 @@ exports[`Render should enable insights api key input 1`] = ` ...@@ -119,7 +109,7 @@ exports[`Render should enable insights api key input 1`] = `
<Input <Input
className="width-30" className="width-30"
onChange={[Function]} onChange={[Function]}
value="cddcc020-2c94-460a-a3d0-df3147ffa792" value="cvvcc020-2cpo-123a-a3d0-df6547fki792"
/> />
</div> </div>
</div> </div>
...@@ -156,7 +146,7 @@ exports[`Render should render component 1`] = ` ...@@ -156,7 +146,7 @@ exports[`Render should render component 1`] = `
className="width-30" className="width-30"
onChange={[Function]} onChange={[Function]}
placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
value="e7f3f661-a933-4b3f-8176-51c4f982ec48" value="e7f3f775-a987-4b3f-3835-51c4f982kl48"
/> />
</div> </div>
</div> </div>
...@@ -178,7 +168,7 @@ exports[`Render should render component 1`] = ` ...@@ -178,7 +168,7 @@ exports[`Render should render component 1`] = `
<Input <Input
className="width-30" className="width-30"
onChange={[Function]} onChange={[Function]}
value="cddcc020-2c94-460a-a3d0-df3147ffa792" value="cvvcc020-2cpo-123a-a3d0-df6547fki792"
/> />
</div> </div>
</div> </div>
......
public/app/plugins/datasource/grafana-azure-monitor-datasource/types.ts
import { DataQuery, DataSourceJsonData } from '@grafana/data'; import { DataQuery, DataSourceJsonData, DataSourceSettings } from '@grafana/data';
export type AzureDataSourceSettings = DataSourceSettings<AzureDataSourceJsonData, AzureDataSourceSecureJsonData>;
export interface AzureMonitorQuery extends DataQuery { export interface AzureMonitorQuery extends DataQuery {
refId: string; refId: string;
...@@ -29,8 +31,9 @@ export interface AzureDataSourceJsonData extends DataSourceJsonData { ...@@ -29,8 +31,9 @@ export interface AzureDataSourceJsonData extends DataSourceJsonData {
} }
export interface AzureDataSourceSecureJsonData { export interface AzureDataSourceSecureJsonData {
clientSecret: string; clientSecret?: string;
logAnalyticsClientSecret: string; logAnalyticsClientSecret?: string;
appInsightsApiKey?: string;
} }
export interface AzureMetricQuery { export interface AzureMetricQuery {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment