github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[ML] Fix missing selected-interval styling for Explorer anomaly charts and mismatched scheduled markers styling (#100272)

Browse source 
* [ML] Fix missing selected-interval sass

* [ML] Only show interval box in explorer page and not in dashboard

* [ML] Remove console

* [ML] Move showSelectedInterval up

* [ML] Update snapshot

* [ML] Update styling of scheduled events to match and to be visible

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Quynh Nguyen 2021-05-24 11:56:09 -05:00 • committed by GitHub
parent bb6c2ef3d0
commit 9793a8fefb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 25 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

11
x-pack/plugins/ml/public/application/explorer/explorer_charts/_explorer_chart.scss
View file

@ -12,10 +12,17 @@
opacity: 1;
}
rect.selected-interval {
fill: rgba(200, 200, 200, .1);
stroke: $euiColorDarkShade;
stroke-width: $euiSizeXS / 2;
stroke-opacity: .8;
}
rect.scheduled-event-marker {
stroke-width: 1px;
stroke: $euiColorLightShade;
fill: $euiColorLightestShade;
stroke: $euiColorDarkShade;
fill: $euiColorLightShade;
pointer-events: none;
}
}

3
x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_anomalies_container.tsx
View file

@ -31,6 +31,7 @@ interface ExplorerAnomaliesContainerProps {
timeBuckets: TimeBuckets;
timefilter: TimefilterContract;
onSelectEntity: (fieldName: string, fieldValue: string, operation: EntityFieldOperation) => void;
showSelectedInterval?: boolean;
}
const tooManyBucketsCalloutMsg = i18n.translate(
@ -51,6 +52,7 @@ export const ExplorerAnomaliesContainer: FC<ExplorerAnomaliesContainerProps> = (
timeBuckets,
timefilter,
onSelectEntity,
showSelectedInterval,
}) => {
return (
<>
@ -96,6 +98,7 @@ export const ExplorerAnomaliesContainer: FC<ExplorerAnomaliesContainerProps> = (
timefilter,
onSelectEntity,
tooManyBucketsCalloutMsg,
showSelectedInterval,
}}
/>
)}

3
x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.js
View file

@ -62,7 +62,7 @@ export class ExplorerChartDistribution extends React.Component {
}
renderChart() {
const { tooManyBuckets, tooltipService, timeBuckets } = this.props;
const { tooManyBuckets, tooltipService, timeBuckets, showSelectedInterval } = this.props;
const element = this.rootNode;
const config = this.props.seriesConfig;
@ -357,6 +357,7 @@ export class ExplorerChartDistribution extends React.Component {
}
function drawRareChartHighlightedSpan() {
if (showSelectedInterval === false) return;
// Draws a rectangle which highlights the time span that has been selected for view.
// Note depending on the overall time range and the bucket span, the selected time
// span may be longer than the range actually being plotted.

4
x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.js
View file

@ -61,7 +61,7 @@ export class ExplorerChartSingleMetric extends React.Component {
}
renderChart() {
const { tooManyBuckets, tooltipService, timeBuckets } = this.props;
const { tooManyBuckets, tooltipService, timeBuckets, showSelectedInterval } = this.props;
const element = this.rootNode;
const config = this.props.seriesConfig;
@ -249,6 +249,8 @@ export class ExplorerChartSingleMetric extends React.Component {
}
function drawLineChartHighlightedSpan() {
if (showSelectedInterval === false) return;
// Draws a rectangle which highlights the time span that has been selected for view.
// Note depending on the overall time range and the bucket span, the selected time
// span may be longer than the range actually being plotted.

5
x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js
View file

@ -72,6 +72,7 @@ function ExplorerChartContainer({
onSelectEntity,
recentlyAccessed,
tooManyBucketsCalloutMsg,
showSelectedInterval,
}) {
const [explorerSeriesLink, setExplorerSeriesLink] = useState('');
@ -199,6 +200,7 @@ function ExplorerChartContainer({
seriesConfig={series}
severity={severity}
tooltipService={tooltipService}
showSelectedInterval={showSelectedInterval}
/>
)}
</MlTooltipComponent>
@ -214,6 +216,7 @@ function ExplorerChartContainer({
seriesConfig={series}
severity={severity}
tooltipService={tooltipService}
showSelectedInterval={showSelectedInterval}
/>
)}
</MlTooltipComponent>
@ -237,6 +240,7 @@ export const ExplorerChartsContainerUI = ({
timefilter,
onSelectEntity,
tooManyBucketsCalloutMsg,
showSelectedInterval,
}) => {
const {
services: {
@ -296,6 +300,7 @@ export const ExplorerChartsContainerUI = ({
onSelectEntity={onSelectEntity}
recentlyAccessed={recentlyAccessed}
tooManyBucketsCalloutMsg={tooManyBucketsCalloutMsg}
showSelectedInterval={showSelectedInterval}
/>
</EuiFlexItem>
))}

2
x-pack/plugins/ml/public/application/timeseriesexplorer/_timeseriesexplorer.scss
View file

@ -133,7 +133,7 @@
rect.scheduled-event-marker {
stroke-width: 1px;
stroke: $euiColorMediumShade;
stroke: $euiColorDarkShade;
fill: $euiColorLightShade;
pointer-events: none;
}

1
x-pack/plugins/ml/public/embeddables/anomaly_charts/__snapshots__/embeddable_anomaly_charts_container.test.tsx.snap generated
View file

@ -19,6 +19,7 @@ Object {
"val": 75,
},
"showCharts": true,
"showSelectedInterval": false,
"timeBuckets": TimeBuckets {
"_timeBucketsConfig": Object {
"dateFormat": undefined,

1
x-pack/plugins/ml/public/embeddables/anomaly_charts/embeddable_anomaly_charts_container.tsx
View file

@ -181,6 +181,7 @@ export const EmbeddableAnomalyChartsContainer: FC<EmbeddableAnomalyChartsContain
timeBuckets={timeBuckets}
timefilter={timefilter}
onSelectEntity={addEntityFieldFilter}
showSelectedInterval={false}
/>
)}
</div>