ButtonCascader: Fix error in Explore (#21585)

* Add children and remove nullified icon

* Revert data format with children

* Update test

* Revert styles

* Update types
This commit is contained in:
Tobias Skarhed
2020-01-17 18:07:40 +01:00
committed by GitHub
parent 59469e14cf
commit fef31acbf2
7 changed files with 32 additions and 28 deletions

View File

@@ -52,7 +52,7 @@ export function groupMetricsByPrefix(metrics: string[], metadata?: PromMetricsMe
const rulesOption = {
label: 'Recording rules',
value: RECORDING_RULES_GROUP,
items: ruleNames
children: ruleNames
.slice()
.sort()
.map(name => ({ label: name, value: name })),
@@ -69,7 +69,7 @@ export function groupMetricsByPrefix(metrics: string[], metadata?: PromMetricsMe
const prefixIsMetric = metricsForPrefix.length === 1 && metricsForPrefix[0] === prefix;
const children = prefixIsMetric ? [] : metricsForPrefix.sort().map(m => addMetricsMetadata(m, metadata));
return {
items: children,
children,
label: prefix,
value: prefix,
};
@@ -198,7 +198,7 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
onChangeMetrics = (values: string[], selectedOptions: CascaderOption[]) => {
let query;
if (selectedOptions.length === 1) {
if (selectedOptions[0].items.length === 0) {
if (selectedOptions[0].children.length === 0) {
query = selectedOptions[0].value;
} else {
// Ignore click on group
@@ -254,7 +254,10 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
const histogramOptions = histogramMetrics.map((hm: any) => ({ label: hm, value: hm }));
const metricsOptions =
histogramMetrics.length > 0
? [{ label: 'Histograms', value: HISTOGRAM_GROUP, items: histogramOptions, isLeaf: false }, ...metricsByPrefix]
? [
{ label: 'Histograms', value: HISTOGRAM_GROUP, children: histogramOptions, isLeaf: false },
...metricsByPrefix,
]
: metricsByPrefix;
// Hint for big disabled lookups
@@ -299,13 +302,9 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
<>
<div className="gf-form-inline gf-form-inline--nowrap flex-grow-1">
<div className="gf-form flex-shrink-0">
<ButtonCascader
options={metricsOptions}
buttonText={chooserText}
disabled={buttonDisabled}
onChange={this.onChangeMetrics}
expandIcon={null}
/>
<ButtonCascader options={metricsOptions} disabled={buttonDisabled} onChange={this.onChangeMetrics}>
{chooserText}
</ButtonCascader>
</div>
<div className="gf-form gf-form--grow flex-shrink-1">
<QueryField