IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

AzureMonitor: migrate Logs+Arg QueryEditor to @grafana/experimental (#48978)

Browse Source 
* AzureMonitor: use @grafana/experimental for LogsQueryEditor

ref #48711

* AzureMonitor: migrate ArgQueryEditor to @grafana/experimental.

Change CodeEditor to 100% instead of 1000px to match LogsQueryEditor.

ref #48713
This commit is contained in:
Adam Simpson 2022-05-30 10:10:34 -04:00 committed by GitHub
parent b8563958bd
commit 6554bbd70f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 140 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ArgQueryEditor/ArgQueryEditor.tsx
View File

@ -1,5 +1,7 @@
import React, { useEffect, useState, useRef } from 'react';
import { EditorRows, EditorRow, EditorFieldGroup } from '@grafana/experimental';
import { config } from '@grafana/runtime';
import { InlineFieldRow } from '@grafana/ui';
import Datasource from '../../datasource';
@ -8,7 +10,7 @@ import SubscriptionField from '../SubscriptionField';
import QueryField from './QueryField';
interface LogsQueryEditorProps {
interface ArgQueryEditorProps {
query: AzureMonitorQuery;
datasource: Datasource;
subscriptionId?: string;
@ -18,7 +20,7 @@ interface LogsQueryEditorProps {
}
const ERROR_SOURCE = 'arg-subscriptions';
const ArgQueryEditor: React.FC<LogsQueryEditorProps> = ({
const ArgQueryEditor: React.FC<ArgQueryEditorProps> = ({
query,
datasource,
subscriptionId,
@ -52,12 +54,26 @@ const ArgQueryEditor: React.FC<LogsQueryEditorProps> = ({
.catch((err) => setError(ERROR_SOURCE, err));
}, [datasource, onChange, query, setError]);
return (
<div data-testid="azure-monitor-logs-query-editor">
<InlineFieldRow>
<SubscriptionField
multiSelect
subscriptions={subscriptions}
if (config.featureToggles.azureMonitorExperimentalUI) {
return (
<span data-testid="azure-monitor-arg-query-editor-with-experimental-ui">
<EditorRows>
<EditorRow>
<EditorFieldGroup>
<SubscriptionField
multiSelect
subscriptions={subscriptions}
query={query}
datasource={datasource}
subscriptionId={subscriptionId}
variableOptionGroup={variableOptionGroup}
onQueryChange={onChange}
setError={setError}
/>
</EditorFieldGroup>
</EditorRow>
</EditorRows>
<QueryField
query={query}
datasource={datasource}
subscriptionId={subscriptionId}
@ -65,18 +81,35 @@ const ArgQueryEditor: React.FC<LogsQueryEditorProps> = ({
onQueryChange={onChange}
setError={setError}
/>
</InlineFieldRow>
</span>
);
} else {
return (
<div data-testid="azure-monitor-arg-query-editor">
<InlineFieldRow>
<SubscriptionField
multiSelect
subscriptions={subscriptions}
query={query}
datasource={datasource}
subscriptionId={subscriptionId}
variableOptionGroup={variableOptionGroup}
onQueryChange={onChange}
setError={setError}
/>
</InlineFieldRow>
<QueryField
query={query}
datasource={datasource}
subscriptionId={subscriptionId}
variableOptionGroup={variableOptionGroup}
onQueryChange={onChange}
setError={setError}
/>
</div>
);
<QueryField
query={query}
datasource={datasource}
subscriptionId={subscriptionId}
variableOptionGroup={variableOptionGroup}
onQueryChange={onChange}
setError={setError}
/>
</div>
);
}
};
export default ArgQueryEditor;

2
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ArgQueryEditor/QueryField.tsx
View File

@ -23,7 +23,7 @@ const QueryField: React.FC<AzureQueryEditorFieldProps> = ({ query, onQueryChange
value={query.azureResourceGraph?.query ?? ''}
language="kusto"
height={200}
width={1000}
width="100%"
showMiniMap={false}
onBlur={onChange}
onSave={onChange}

119
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/LogsQueryEditor/LogsQueryEditor.tsx
View File

@ -1,5 +1,7 @@
import React from 'react';
import { EditorRows, EditorRow, EditorFieldGroup } from '@grafana/experimental';
import { config } from '@grafana/runtime';
import { Alert } from '@grafana/ui';
import Datasource from '../../datasource';
@ -33,36 +35,78 @@ const LogsQueryEditor: React.FC<LogsQueryEditorProps> = ({
}) => {
const migrationError = useMigrations(datasource, query, onChange);
return (
<div data-testid="azure-monitor-logs-query-editor">
<ResourceField
query={query}
datasource={datasource}
subscriptionId={subscriptionId}
variableOptionGroup={variableOptionGroup}
onQueryChange={onChange}
setError={setError}
selectableEntryTypes={[
ResourceRowType.Subscription,
ResourceRowType.ResourceGroup,
ResourceRowType.Resource,
ResourceRowType.Variable,
]}
setResource={setResource}
resourceUri={query.azureLogAnalytics?.resource}
/>
if (config.featureToggles.azureMonitorExperimentalUI) {
return (
<span data-testid="azure-monitor-logs-query-editor-with-experimental-ui">
<EditorRows>
<EditorRow>
<EditorFieldGroup>
<ResourceField
query={query}
datasource={datasource}
subscriptionId={subscriptionId}
variableOptionGroup={variableOptionGroup}
onQueryChange={onChange}
setError={setError}
selectableEntryTypes={[
ResourceRowType.Subscription,
ResourceRowType.ResourceGroup,
ResourceRowType.Resource,
ResourceRowType.Variable,
]}
setResource={setResource}
resourceUri={query.azureLogAnalytics?.resource}
/>
</EditorFieldGroup>
</EditorRow>
<QueryField
query={query}
datasource={datasource}
subscriptionId={subscriptionId}
variableOptionGroup={variableOptionGroup}
onQueryChange={onChange}
setError={setError}
/>
<EditorRow>
<EditorFieldGroup>
{!hideFormatAs && (
<FormatAsField
query={query}
datasource={datasource}
subscriptionId={subscriptionId}
variableOptionGroup={variableOptionGroup}
onQueryChange={onChange}
setError={setError}
/>
)}
<QueryField
query={query}
datasource={datasource}
subscriptionId={subscriptionId}
variableOptionGroup={variableOptionGroup}
onQueryChange={onChange}
setError={setError}
/>
{migrationError && <Alert title={migrationError.title}>{migrationError.message}</Alert>}
</EditorFieldGroup>
</EditorRow>
</EditorRows>
</span>
);
} else {
return (
<div data-testid="azure-monitor-logs-query-editor">
<ResourceField
query={query}
datasource={datasource}
subscriptionId={subscriptionId}
variableOptionGroup={variableOptionGroup}
onQueryChange={onChange}
setError={setError}
selectableEntryTypes={[
ResourceRowType.Subscription,
ResourceRowType.ResourceGroup,
ResourceRowType.Resource,
ResourceRowType.Variable,
]}
setResource={setResource}
resourceUri={query.azureLogAnalytics?.resource}
/>
{!hideFormatAs && (
<FormatAsField
<QueryField
query={query}
datasource={datasource}
subscriptionId={subscriptionId}
@ -70,11 +114,22 @@ const LogsQueryEditor: React.FC<LogsQueryEditorProps> = ({
onQueryChange={onChange}
setError={setError}
/>
)}
{migrationError && <Alert title={migrationError.title}>{migrationError.message}</Alert>}
</div>
);
{!hideFormatAs && (
<FormatAsField
query={query}
datasource={datasource}
subscriptionId={subscriptionId}
variableOptionGroup={variableOptionGroup}
onQueryChange={onChange}
setError={setError}
/>
)}
{migrationError && <Alert title={migrationError.title}>{migrationError.message}</Alert>}
</div>
);
}
};
export default LogsQueryEditor;