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: changes to azureMonitorExperimentalUI after feedback (#50455)

Browse Source 
* AzureMonitor: tweak experimental-ui after UX discussions.
- move metrics up to resource row
- allow resources field to take an inlineField prop and a labelWidth prop. Eventually once the feature toggle is removed
the inlineField prop will be the only code branch in Field.tsx.

* AzureMonitor: remove devmode req for azureMonitorExperimentalUI flag

* refactor: consolidate logic branch for inline Field
This commit is contained in:
Adam Simpson 2022-06-09 18:24:48 +00:00 committed by GitHub
parent 7e2870b7bb
commit 5df694b924
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 19 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
pkg/services/featuremgmt/registry.go
View File

@ -201,7 +201,6 @@ var (
Name: "azureMonitorExperimentalUI",
Description: "Use grafana-experimental UI in Azure Monitor",
State: FeatureStateAlpha,
RequiresDevMode: true,
FrontendOnly: true,
},
{

11
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/Field.tsx
View File

@ -7,13 +7,18 @@ import { Props as InlineFieldProps } from '@grafana/ui/src/components/Forms/Inli
interface Props extends InlineFieldProps {
label: string;
inlineField?: boolean;
labelWidth?: number;
}
const DEFAULT_LABEL_WIDTH = 18;
export const Field = (props: Props) => {
if (config.featureToggles.azureMonitorExperimentalUI) {
return <EditorField width={DEFAULT_LABEL_WIDTH} {...props} />;
const { labelWidth, inlineField, ...remainingProps } = props;
if (config.featureToggles.azureMonitorExperimentalUI && !inlineField) {
return <EditorField width={labelWidth || DEFAULT_LABEL_WIDTH} {...remainingProps} />;
} else {
return <InlineField labelWidth={labelWidth || DEFAULT_LABEL_WIDTH} {...remainingProps} />;
}
return <InlineField labelWidth={DEFAULT_LABEL_WIDTH} {...props} />;
};

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

@ -44,6 +44,8 @@ const LogsQueryEditor: React.FC<LogsQueryEditorProps> = ({
<ResourceField
query={query}
datasource={datasource}
inlineField={true}
labelWidth={10}
subscriptionId={subscriptionId}
variableOptionGroup={variableOptionGroup}
onQueryChange={onChange}

5
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricsQueryEditor.tsx
View File

@ -60,11 +60,6 @@ const MetricsQueryEditor: React.FC<MetricsQueryEditorProps> = ({
setResource={setResource}
resourceUri={query.azureMonitor?.resourceUri}
/>
</EditorFieldGroup>
</EditorRow>
<EditorRow>
<EditorFieldGroup>
<MetricNamespaceField
metricNamespaces={metricNamespaces}
query={query}

7
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ResourceField/ResourceField.tsx
View File

@ -29,6 +29,8 @@ interface ResourceFieldProps extends AzureQueryEditorFieldProps {
setResource: (query: AzureMonitorQuery, resourceURI?: string) => AzureMonitorQuery;
selectableEntryTypes: ResourceRowType[];
resourceUri?: string;
inlineField?: boolean;
labelWidth?: number;
}
const ResourceField: React.FC<ResourceFieldProps> = ({
@ -38,6 +40,8 @@ const ResourceField: React.FC<ResourceFieldProps> = ({
setResource,
selectableEntryTypes,
resourceUri,
inlineField,
labelWidth,
}) => {
const styles = useStyles2(getStyles);
const [pickerIsOpen, setPickerIsOpen] = useState(false);
@ -77,8 +81,7 @@ const ResourceField: React.FC<ResourceFieldProps> = ({
selectableEntryTypes={selectableEntryTypes}
/>
</Modal>
<Field label="Resource">
<Field label="Resource" inlineField={inlineField} labelWidth={labelWidth}>
<Button className={styles.resourceFieldButton} variant="secondary" onClick={handleOpenPicker} type="button">
<ResourceLabel resource={resourceUri} datasource={datasource} />
</Button>