[ML] Single metric viewer: Fix detector/entity selection (#44772)
This fixes switching to another detector on single metric viewer. There is no longer a Refresh button next to the dropdowns, instead the charts will reload when one of the dropdowns (detector or entity selection) changes.
This commit is contained in:
parent
b14d17de15
commit
cf8dfbf7b7
3 changed files with 20 additions and 32 deletions
|
@ -22,7 +22,6 @@ import {
|
|||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiFormRow,
|
||||
EuiButton,
|
||||
EuiSelect,
|
||||
EuiSpacer,
|
||||
EuiText,
|
||||
|
@ -170,10 +169,14 @@ export class TimeSeriesExplorer extends React.Component {
|
|||
detectorIndexChangeHandler = (e) => {
|
||||
const id = e.target.value;
|
||||
if (id !== undefined) {
|
||||
this.setState({ detectorId: id });
|
||||
this.setState({ detectorId: id }, () => {
|
||||
this.updateControlsForDetector(
|
||||
() => this.loadEntityValues(
|
||||
() => this.saveSeriesPropertiesAndRefresh()
|
||||
)
|
||||
);
|
||||
});
|
||||
}
|
||||
this.updateControlsForDetector();
|
||||
this.loadEntityValues();
|
||||
};
|
||||
|
||||
toggleShowAnnotationsHandler = () => {
|
||||
|
@ -322,7 +325,7 @@ export class TimeSeriesExplorer extends React.Component {
|
|||
}
|
||||
return stateEntity;
|
||||
})
|
||||
}));
|
||||
}), () => this.saveSeriesPropertiesAndRefresh());
|
||||
};
|
||||
|
||||
loadAnomaliesTableData = (earliestMs, latestMs) => {
|
||||
|
@ -378,7 +381,7 @@ export class TimeSeriesExplorer extends React.Component {
|
|||
});
|
||||
}
|
||||
|
||||
loadEntityValues = () => {
|
||||
loadEntityValues = (callback = () => {}) => {
|
||||
const { timefilter } = this.props;
|
||||
const { detectorId, entities, selectedJob } = this.state;
|
||||
|
||||
|
@ -411,7 +414,7 @@ export class TimeSeriesExplorer extends React.Component {
|
|||
}
|
||||
return entity;
|
||||
})
|
||||
});
|
||||
}, callback);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
@ -653,7 +656,7 @@ export class TimeSeriesExplorer extends React.Component {
|
|||
});
|
||||
}
|
||||
|
||||
updateControlsForDetector = () => {
|
||||
updateControlsForDetector = (callback = () => {}) => {
|
||||
const { appStateHandler } = this.props;
|
||||
const { detectorId, selectedJob } = this.state;
|
||||
// Update the entity dropdown control(s) according to the partitioning fields for the selected detector.
|
||||
|
@ -684,7 +687,7 @@ export class TimeSeriesExplorer extends React.Component {
|
|||
entities.push({ fieldName: byFieldName, fieldValue: byFieldValue });
|
||||
}
|
||||
|
||||
this.setState({ entities });
|
||||
this.setState({ entities }, callback);
|
||||
}
|
||||
|
||||
loadForJobId(jobId, jobs) {
|
||||
|
@ -739,16 +742,16 @@ export class TimeSeriesExplorer extends React.Component {
|
|||
this.setState(
|
||||
{ detectorId, detectors, selectedJob },
|
||||
() => {
|
||||
this.updateControlsForDetector();
|
||||
|
||||
// Populate the map of jobs / detectors / field formatters for the selected IDs and refresh.
|
||||
mlFieldFormatService.populateFormats([jobId], getIndexPatterns())
|
||||
.catch((err) => { console.log('Error populating field formats:', err); })
|
||||
this.updateControlsForDetector(() => {
|
||||
// Populate the map of jobs / detectors / field formatters for the selected IDs and refresh.
|
||||
mlFieldFormatService.populateFormats([jobId], getIndexPatterns())
|
||||
.catch((err) => { console.log('Error populating field formats:', err); })
|
||||
// Load the data - if the FieldFormats failed to populate
|
||||
// the default formatting will be used for metric values.
|
||||
.then(() => {
|
||||
this.refresh();
|
||||
});
|
||||
.then(() => {
|
||||
this.refresh();
|
||||
});
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
|
@ -1024,19 +1027,6 @@ export class TimeSeriesExplorer extends React.Component {
|
|||
/>
|
||||
);
|
||||
})}
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiFormRow hasEmptyLabelSpace>
|
||||
<EuiButton
|
||||
fill
|
||||
iconType="refresh"
|
||||
onClick={this.saveSeriesPropertiesAndRefresh}
|
||||
>
|
||||
{i18n.translate('xpack.ml.timeSeriesExplorer.refreshButtonAriaLabel', {
|
||||
defaultMessage: 'Refresh'
|
||||
})}
|
||||
</EuiButton>
|
||||
</EuiFormRow>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem style={{ textAlign: 'right' }}>
|
||||
<EuiFormRow hasEmptyLabelSpace style={{ maxWidth: '100%' }}>
|
||||
<ForecastingModal
|
||||
|
|
|
@ -7183,7 +7183,6 @@
|
|||
"xpack.ml.timeSeriesExplorer.loadingLabel": "読み込み中",
|
||||
"xpack.ml.timeSeriesExplorer.noResultsFoundLabel": "結果が見つかりませんでした",
|
||||
"xpack.ml.timeSeriesExplorer.noSingleMetricJobsFoundLabel": "シングルメトリックジョブが見つかりませんでした",
|
||||
"xpack.ml.timeSeriesExplorer.refreshButtonAriaLabel": "更新",
|
||||
"xpack.ml.timeSeriesExplorer.requestedDetectorIndexNotValidWarningMessage": "リクエストされた検知器インデックス {detectorIndex} はジョブ {jobId} に有効ではありません",
|
||||
"xpack.ml.timeSeriesExplorer.runControls.durationLabel": "期間",
|
||||
"xpack.ml.timeSeriesExplorer.runControls.forecastMaximumLengthHelpText": "予想の長さで、最長 {maximumForecastDurationDays} 日です。秒には s、分には m、時間には h、日には d、週には w を使います。",
|
||||
|
|
|
@ -7325,7 +7325,6 @@
|
|||
"xpack.ml.timeSeriesExplorer.loadingLabel": "正在加载",
|
||||
"xpack.ml.timeSeriesExplorer.noResultsFoundLabel": "找不到结果",
|
||||
"xpack.ml.timeSeriesExplorer.noSingleMetricJobsFoundLabel": "未找到单指标作业",
|
||||
"xpack.ml.timeSeriesExplorer.refreshButtonAriaLabel": "刷新",
|
||||
"xpack.ml.timeSeriesExplorer.requestedDetectorIndexNotValidWarningMessage": "请求的检测工具索引 {detectorIndex} 对于作业 {jobId} 无效",
|
||||
"xpack.ml.timeSeriesExplorer.runControls.durationLabel": "持续时间",
|
||||
"xpack.ml.timeSeriesExplorer.runControls.forecastMaximumLengthHelpText": "预测时长,最多 {maximumForecastDurationDays} 天。使用 s 表示秒,m 表示分钟,h 表示小时,d 表示天,w 表示周。",
|
||||
|
|
Loading…
Reference in a new issue