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

Dashboard: Migration - EditVariable Settings: Implement Interval Variable (#81259)

Browse Source 
* Extract logic from core IntervalEditor and create a new Form to be shared between scenes and core
* Implement IntervalVariableEditor and refactor some utils functions
* Add unit test
This commit is contained in:
Alexa V
2024-01-29 16:53:09 +01:00
committed by GitHub
parent da1538ba82
commit e3a648e107
8 changed files with 278 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
public/app/features/variables/interval/IntervalVariableEditor.tsx
View File

@@ -1,21 +1,10 @@
import { css } from '@emotion/css';
import React, { ChangeEvent, FormEvent } from 'react';
import { GrafanaTheme2, IntervalVariableModel, SelectableValue } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { useStyles2 } from '@grafana/ui';
import { IntervalVariableModel, SelectableValue } from '@grafana/data';
import { IntervalVariableForm } from 'app/features/dashboard-scene/settings/variables/components/IntervalVariableForm';
import { VariableCheckboxField } from '../../dashboard-scene/settings/variables/components/VariableCheckboxField';
import { VariableLegend } from '../../dashboard-scene/settings/variables/components/VariableLegend';
import { VariableSelectField } from '../../dashboard-scene/settings/variables/components/VariableSelectField';
import { VariableTextField } from '../../dashboard-scene/settings/variables/components/VariableTextField';
import { VariableEditorProps } from '../editor/types';
const STEP_OPTIONS = [1, 2, 3, 4, 5, 10, 20, 30, 40, 50, 100, 200, 300, 400, 500].map((count) => ({
label: `${count}`,
value: count,
}));
export interface Props extends VariableEditorProps<IntervalVariableModel> {}
export const IntervalVariableEditor = React.memo(({ onPropChange, variable }: Props) => {
@@ -27,13 +16,6 @@ export const IntervalVariableEditor = React.memo(({ onPropChange, variable }: Pr
});
};
const onQueryChanged = (event: FormEvent<HTMLInputElement>) => {
onPropChange({
propName: 'query',
propValue: event.currentTarget.value,
});
};
const onQueryBlur = (event: FormEvent<HTMLInputElement>) => {
onPropChange({
propName: 'query',
@@ -58,62 +40,18 @@ export const IntervalVariableEditor = React.memo(({ onPropChange, variable }: Pr
});
};
const stepValue = STEP_OPTIONS.find((o) => o.value === variable.auto_count) ?? STEP_OPTIONS[0];
const styles = useStyles2(getStyles);
return (
<>
<VariableLegend>Interval options</VariableLegend>
<VariableTextField
value={variable.query}
name="Values"
placeholder="1m,10m,1h,6h,1d,7d"
onChange={onQueryChanged}
onBlur={onQueryBlur}
testId={selectors.pages.Dashboard.Settings.Variables.Edit.IntervalVariable.intervalsValueInput}
width={32}
required
/>
<VariableCheckboxField
value={variable.auto}
name="Auto option"
description="Dynamically calculates interval by dividing time range by the count specified"
onChange={onAutoChange}
/>
{variable.auto && (
<div className={styles.autoFields}>
<VariableSelectField
name="Step count"
description="How many times the current time range should be divided to calculate the value"
value={stepValue}
options={STEP_OPTIONS}
onChange={onAutoCountChanged}
width={9}
/>
<VariableTextField
value={variable.auto_min}
name="Min interval"
description="The calculated value will not go below this threshold"
placeholder="10s"
onChange={onAutoMinChanged}
width={11}
/>
</div>
)}
</>
<IntervalVariableForm
intervals={variable.query}
autoStepCount={variable.auto_count}
autoEnabled={variable.auto}
onAutoCountChanged={onAutoCountChanged}
onIntervalsChange={onQueryBlur}
onAutoEnabledChange={onAutoChange}
onAutoMinIntervalChanged={onAutoMinChanged}
autoMinInterval={variable.auto_min}
/>
);
});
IntervalVariableEditor.displayName = 'IntervalVariableEditor';
function getStyles(theme: GrafanaTheme2) {
return {
autoFields: css({
marginTop: theme.spacing(2),
display: 'flex',
flexDirection: 'column',
}),
};
}