Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ML] Adding loading indicators to all wizard charts #43382

Merged
merged 1 commit into from
Aug 19, 2019
Merged

[ML] Adding loading indicators to all wizard charts #43382

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 14 additions & 13 deletions ...lugins/ml/public/jobs/new_job_new/pages/components/charts/anomaly_chart/anomaly_chart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { Scatter } from './scatter';
import { Axes } from '../common/axes';
import { getXRange } from '../common/utils';
import { LineChartPoint } from '../../../../common/chart_loader';
import { LoadingWrapper } from '../loading_wrapper';

export enum CHART_TYPE {
LINE,
Expand All @@ -27,32 +28,32 @@ interface Props {
anomalyData: Anomaly[];
height: string;
width: string;
loading?: boolean;
}

export const AnomalyChart: FC<Props> = ({
chartType,
chartData,
chartData = [],
modelData,
anomalyData,
height,
width,
loading = false,
}) => {
const data = chartType === CHART_TYPE.SCATTER ? flattenData(chartData) : chartData;
if (data.length === 0) {
return null;
}

const xDomain = getXRange(data);
return (
<div style={{ width, height }} data-test-subj="mlAnomalyChart">
<Chart>
<Settings xDomain={xDomain} tooltip={TooltipType.None} />
<Axes chartData={data} />
<Anomalies anomalyData={anomalyData} />
<ModelBounds modelData={modelData} />
{chartType === CHART_TYPE.LINE && <Line chartData={data} />}
{chartType === CHART_TYPE.SCATTER && <Scatter chartData={data} />}
</Chart>
<LoadingWrapper height={height} hasData={data.length > 0} loading={loading}>
<Chart>
<Settings xDomain={xDomain} tooltip={TooltipType.None} />
<Axes chartData={data} />
<Anomalies anomalyData={anomalyData} />
<ModelBounds modelData={modelData} />
{chartType === CHART_TYPE.LINE && <Line chartData={data} />}
{chartType === CHART_TYPE.SCATTER && <Scatter chartData={data} />}
</Chart>
</LoadingWrapper>
</div>
);
};
Expand Down
11 changes: 9 additions & 2 deletions x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/charts/common/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,11 @@ export function getCustomColor(specId: string, color: string): CustomSeriesColor
return new Map([[lineDataSeriesColorValues, color]]);
}

export function getYRange(chartData: any) {
export function getYRange(chartData: any[]) {
if (chartData.length === 0) {
return { min: 0, max: 0 };
}

let max: number = Number.MIN_VALUE;
let min: number = Number.MAX_VALUE;
chartData.forEach((r: any) => {
Expand All @@ -32,7 +36,10 @@ export function getYRange(chartData: any) {
};
}

export function getXRange(lineChartData: any) {
export function getXRange(lineChartData: any[]) {
if (lineChartData.length === 0) {
return { min: 0, max: 0 };
}
return {
min: lineChartData[0].time,
max: lineChartData[lineChartData.length - 1].time,
Expand Down
38 changes: 24 additions & 14 deletions .../ml/public/jobs/new_job_new/pages/components/charts/event_rate_chart/event_rate_chart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,33 +10,43 @@ import { Axes } from '../common/axes';
import { getCustomColor } from '../common/utils';
import { LineChartPoint } from '../../../../common/chart_loader';
import { EVENT_RATE_COLOR } from '../common/settings';
import { LoadingWrapper } from '../loading_wrapper';

interface Props {
eventRateChartData: LineChartPoint[];
height: string;
width: string;
showAxis?: boolean;
loading?: boolean;
}

const SPEC_ID = 'event_rate';

export const EventRateChart: FC<Props> = ({ eventRateChartData, height, width, showAxis }) => {
export const EventRateChart: FC<Props> = ({
eventRateChartData,
height,
width,
showAxis,
loading = false,
}) => {
return (
<div style={{ width, height }} data-test-subj="mlEventRateChart">
<Chart>
{showAxis === true && <Axes />}
<LoadingWrapper height={height} hasData={eventRateChartData.length > 0} loading={loading}>
<Chart>
{showAxis === true && <Axes />}

<Settings tooltip={TooltipType.None} />
<BarSeries
id={getSpecId('event_rate')}
xScaleType={ScaleType.Time}
yScaleType={ScaleType.Linear}
xAccessor={'time'}
yAccessors={['value']}
data={eventRateChartData}
customSeriesColors={getCustomColor(SPEC_ID, EVENT_RATE_COLOR)}
/>
</Chart>
<Settings tooltip={TooltipType.None} />
<BarSeries
id={getSpecId('event_rate')}
xScaleType={ScaleType.Time}
yScaleType={ScaleType.Linear}
xAccessor={'time'}
yAccessors={['value']}
data={eventRateChartData}
customSeriesColors={getCustomColor(SPEC_ID, EVENT_RATE_COLOR)}
/>
</Chart>
</LoadingWrapper>
</div>
);
};
6 changes: 6 additions & 0 deletions ...egacy/plugins/ml/public/jobs/new_job_new/pages/components/charts/loading_wrapper/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
export { LoadingWrapper } from './loading_wrapper';
43 changes: 43 additions & 0 deletions ...ns/ml/public/jobs/new_job_new/pages/components/charts/loading_wrapper/loading_wrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import React, { FC, Fragment } from 'react';
import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';

interface Props {
hasData: boolean;
height: string;
loading?: boolean;
}

export const LoadingWrapper: FC<Props> = ({ hasData, loading = false, height, children }) => {
const opacity = loading === true ? (hasData === true ? 0.3 : 0) : 1;

return (
<Fragment>
<div
style={{
jgowdyelastic marked this conversation as resolved.
Show resolved Hide resolved
height: '100%',
opacity,
transition: 'opacity 0.2s',
}}
>
{children}
</div>
{loading === true && (
<EuiFlexGroup
justifyContent="spaceAround"
alignItems="center"
style={{ height, marginTop: `-${height}` }}
>
<EuiFlexItem grow={false}>
<EuiLoadingSpinner size="xl" />
</EuiFlexItem>
</EuiFlexGroup>
)}
</Fragment>
);
};
39 changes: 20 additions & 19 deletions ...new_job_new/pages/components/pick_fields_step/components/multi_metric_view/chart_grid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ interface ChartGridProps {
deleteDetector?: (index: number) => void;
jobType: JOB_TYPE;
animate?: boolean;
loading?: boolean;
}

export const ChartGrid: FC<ChartGridProps> = ({
Expand All @@ -39,6 +40,7 @@ export const ChartGrid: FC<ChartGridProps> = ({
anomalyData,
deleteDetector,
jobType,
loading = false,
}) => {
const animateSplit = useAnimateSplit();

Expand All @@ -53,25 +55,24 @@ export const ChartGrid: FC<ChartGridProps> = ({
<EuiFlexGrid columns={chartSettings.cols}>
{aggFieldPairList.map((af, i) => (
<EuiFlexItem key={i}>
{lineChartsData[i] !== undefined && (
<Fragment>
<DetectorTitle
index={i}
agg={aggFieldPairList[i].agg}
field={aggFieldPairList[i].field}
splitField={splitField}
deleteDetector={deleteDetector}
/>
<AnomalyChart
chartType={CHART_TYPE.LINE}
chartData={lineChartsData[i]}
modelData={modelData[i]}
anomalyData={anomalyData[i]}
height={chartSettings.height}
width={chartSettings.width}
/>
</Fragment>
)}
<Fragment>
<DetectorTitle
index={i}
agg={aggFieldPairList[i].agg}
field={aggFieldPairList[i].field}
splitField={splitField}
deleteDetector={deleteDetector}
/>
<AnomalyChart
chartType={CHART_TYPE.LINE}
chartData={lineChartsData[i]}
modelData={modelData[i]}
anomalyData={anomalyData[i]}
height={chartSettings.height}
width={chartSettings.width}
loading={loading}
/>
</Fragment>
</EuiFlexItem>
))}
</EuiFlexGrid>
Expand Down
29 changes: 16 additions & 13 deletions ...b_new/pages/components/pick_fields_step/components/multi_metric_view/metric_selection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export const MultiMetricDetectors: FC<Props> = ({ isActive, setIsValid }) => {
jobCreator.aggFieldPairs
);
const [lineChartsData, setLineChartsData] = useState<LineChartData>({});
const [loadingData, setLoadingData] = useState(false);
const [modelData, setModelData] = useState<Record<number, ModelItem[]>>([]);
const [anomalyData, setAnomalyData] = useState<Record<number, Anomaly[]>>([]);
const [start, setStart] = useState(jobCreator.start);
Expand Down Expand Up @@ -152,6 +153,7 @@ export const MultiMetricDetectors: FC<Props> = ({ isActive, setIsValid }) => {
setChartSettings(cs);

if (aggFieldPairList.length > 0) {
setLoadingData(true);
const resp: LineChartData = await chartLoader.loadLineCharts(
jobCreator.start,
jobCreator.end,
Expand All @@ -162,24 +164,25 @@ export const MultiMetricDetectors: FC<Props> = ({ isActive, setIsValid }) => {
);

setLineChartsData(resp);
setLoadingData(false);
}
}

return (
<Fragment>
{lineChartsData && (
<ChartGrid
aggFieldPairList={aggFieldPairList}
chartSettings={chartSettings}
splitField={splitField}
fieldValues={fieldValues}
lineChartsData={lineChartsData}
modelData={modelData}
anomalyData={anomalyData}
deleteDetector={isActive ? deleteDetector : undefined}
jobType={jobCreator.type}
/>
)}
<ChartGrid
aggFieldPairList={aggFieldPairList}
chartSettings={chartSettings}
splitField={splitField}
fieldValues={fieldValues}
lineChartsData={lineChartsData}
modelData={modelData}
anomalyData={anomalyData}
deleteDetector={isActive ? deleteDetector : undefined}
jobType={jobCreator.type}
loading={loadingData}
/>

{isActive && (
<MetricSelector
fields={fields}
Expand Down
67 changes: 34 additions & 33 deletions ...s/new_job_new/pages/components/pick_fields_step/components/population_view/chart_grid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ interface ChartGridProps {
deleteDetector?: (index: number) => void;
jobType: JOB_TYPE;
fieldValuesPerDetector: DetectorFieldValues;
loading?: boolean;
}

export const ChartGrid: FC<ChartGridProps> = ({
Expand All @@ -41,47 +42,47 @@ export const ChartGrid: FC<ChartGridProps> = ({
deleteDetector,
jobType,
fieldValuesPerDetector,
loading = false,
}) => {
const animateSplit = useAnimateSplit();

return (
<EuiFlexGrid columns={chartSettings.cols}>
{aggFieldPairList.map((af, i) => (
<EuiFlexItem key={i}>
{lineChartsData[i] !== undefined && (
<Fragment>
<EuiFlexGroup>
<EuiFlexItem>
<DetectorTitle
index={i}
agg={aggFieldPairList[i].agg}
field={aggFieldPairList[i].field}
splitField={splitField}
deleteDetector={deleteDetector}
/>
</EuiFlexItem>
<EuiFlexItem>
{deleteDetector !== undefined && <ByFieldSelector detectorIndex={i} />}
</EuiFlexItem>
</EuiFlexGroup>
<SplitCards
fieldValues={fieldValuesPerDetector[i] || []}
splitField={splitField}
numberOfDetectors={aggFieldPairList.length}
jobType={jobType}
animate={animateSplit}
>
<AnomalyChart
chartType={CHART_TYPE.SCATTER}
chartData={lineChartsData[i]}
modelData={modelData[i]}
anomalyData={anomalyData[i]}
height={chartSettings.height}
width={chartSettings.width}
<Fragment>
<EuiFlexGroup>
<EuiFlexItem>
<DetectorTitle
index={i}
agg={aggFieldPairList[i].agg}
field={aggFieldPairList[i].field}
splitField={splitField}
deleteDetector={deleteDetector}
/>
</SplitCards>
</Fragment>
)}
</EuiFlexItem>
<EuiFlexItem>
{deleteDetector !== undefined && <ByFieldSelector detectorIndex={i} />}
</EuiFlexItem>
</EuiFlexGroup>
<SplitCards
fieldValues={fieldValuesPerDetector[i] || []}
splitField={splitField}
numberOfDetectors={aggFieldPairList.length}
jobType={jobType}
animate={animateSplit}
>
<AnomalyChart
chartType={CHART_TYPE.SCATTER}
chartData={lineChartsData[i]}
modelData={modelData[i]}
anomalyData={anomalyData[i]}
height={chartSettings.height}
width={chartSettings.width}
loading={loading}
/>
</SplitCards>
</Fragment>
</EuiFlexItem>
))}
</EuiFlexGrid>
Expand Down
Loading