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] Add one-way cursor sync from Anomaly detection swimlane to other charts (#136775)

Browse source 
* [ML] Add one-way cursor sync from heatmap to other charts

* [ML] Fix types
This commit is contained in:
Quynh Nguyen 2022-07-21 14:00:56 -05:00 • committed by GitHub
parent 08ddf55670
commit 3a1c23e5f3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 28 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

2
x-pack/plugins/ml/kibana.json
View file

@ -8,6 +8,7 @@
],
"requiredPlugins": [
"aiops",
"charts",
"cloud",
"data",
"dataViews",
@ -25,7 +26,6 @@
],
"optionalPlugins": [
"alerting",
"charts",
"dashboard",
"home",
"lens",

2
x-pack/plugins/ml/public/application/contexts/kibana/kibana_context.ts
View file

@ -38,7 +38,7 @@ interface StartPlugins {
fieldFormats: FieldFormatsRegistry;
dashboard: DashboardSetup;
spacesApi: SpacesPluginStart;
charts?: ChartsPluginStart;
charts: ChartsPluginStart;
}
export type StartServices = CoreStart &
StartPlugins & {

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

@ -60,6 +60,7 @@ export const AnomalyTimeline: FC<AnomalyTimelineProps> = React.memo(
const {
services: {
application: { capabilities },
charts: chartsService,
},
} = useMlKibana();
@ -349,6 +350,7 @@ export const AnomalyTimeline: FC<AnomalyTimelineProps> = React.memo(
showTimeline={false}
showLegend={false}
yAxisWidth={Y_AXIS_LABEL_WIDTH}
chartsService={chartsService}
/>
<EuiSpacer size="m" />
@ -367,6 +369,7 @@ export const AnomalyTimeline: FC<AnomalyTimelineProps> = React.memo(
fromPage={viewByFromPage}
perPage={viewByPerPage}
swimlaneLimit={swimlaneLimit}
chartsService={chartsService}
onPaginationChange={({ perPage: perPageUpdate, fromPage: fromPageUpdate }) => {
if (perPageUpdate) {
anomalyTimelineStateService.setSwimLanePagination({

12
x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx
View file

@ -34,6 +34,7 @@ import {
import moment from 'moment';
import { i18n } from '@kbn/i18n';
import { ChartsPluginStart, useActiveCursor } from '@kbn/charts-plugin/public';
import { SwimLanePagination } from './swimlane_pagination';
import { AppStateSelectedCells, OverallSwimlaneData, ViewBySwimLaneData } from './explorer_utils';
import { ANOMALY_THRESHOLD, SEVERITY_COLORS } from '../../../common';
@ -157,6 +158,7 @@ export interface SwimlaneProps {
showTimeline?: boolean;
showYAxis?: boolean;
yAxisWidth?: HeatmapStyle['yAxisLabel']['width'];
chartsService: ChartsPluginStart;
}
/**
@ -178,6 +180,7 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
selection,
onCellsSelection,
timeBuckets,
chartsService,
showTimeline = true,
showYAxis = true,
showLegend = true,
@ -336,6 +339,12 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
onCellsSelection,
]);
const chartRef = useRef(null);
const handleCursorUpdate = useActiveCursor(chartsService.activeCursor, chartRef, {
isDateHistogram: true,
});
const onElementClick = useCallback(
(e: HeatmapElementEvent[]) => {
if (!onCellsSelection) return;
@ -416,11 +425,12 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
hidden={noSwimLaneData}
>
{showSwimlane && !isLoading && (
<Chart className={'mlSwimLaneContainer'}>
<Chart className={'mlSwimLaneContainer'} ref={chartRef}>
<Settings
// TODO use the EUI charts theme see src/plugins/charts/public/services/theme/README.md
theme={themeOverrides}
onElementClick={onElementClick}
onPointerUpdate={handleCursorUpdate}
showLegend={showLegend}
legendPosition={Position.Top}
xDomain={xDomain}

7
x-pack/plugins/ml/public/application/overview/components/anomaly_detection_panel/anomaly_detection_panel.tsx
View file

@ -47,6 +47,7 @@ export const AnomalyDetectionPanel: FC<Props> = ({ jobCreationDisabled, setLazyJ
services: {
uiSettings,
mlServices: { mlApiServices },
charts: chartsService,
},
} = useMlKibana();
@ -167,7 +168,11 @@ export const AnomalyDetectionPanel: FC<Props> = ({ jobCreationDisabled, setLazyJ
{isLoading && <EuiLoadingSpinner className="mlOverviewPanel__spinner" size="xl" />}
{isLoading === false && typeof errorMessage === 'undefined' && groupsCount > 0 ? (
<AnomalyDetectionTable items={groups} statsBarData={statsBarData!} />
<AnomalyDetectionTable
items={groups}
statsBarData={statsBarData!}
chartsService={chartsService}
/>
) : null}
</EuiPanel>
);

5
x-pack/plugins/ml/public/application/overview/components/anomaly_detection_panel/table.tsx
View file

@ -20,6 +20,7 @@ import {
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';
import { ChartsPluginStart } from '@kbn/charts-plugin/public';
import { formatHumanReadableDateTime } from '../../../../../common/util/date_utils';
import { useGroupActions } from './actions';
import { Group, GroupsDictionary } from './anomaly_detection_panel';
@ -44,9 +45,10 @@ export enum AnomalyDetectionListColumns {
interface Props {
items: GroupsDictionary;
statsBarData: JobStatsBarStats;
chartsService: ChartsPluginStart;
}
export const AnomalyDetectionTable: FC<Props> = ({ items, statsBarData }) => {
export const AnomalyDetectionTable: FC<Props> = ({ items, statsBarData, chartsService }) => {
const groupsList = Object.values(items);
const [pageIndex, setPageIndex] = useState(0);
const [pageSize, setPageSize] = useState(10);
@ -117,6 +119,7 @@ export const AnomalyDetectionTable: FC<Props> = ({ items, statsBarData }) => {
showYAxis={false}
showLegend={false}
noDataWarning={noDatWarning}
chartsService={chartsService}
/>
);
},

3
x-pack/plugins/ml/public/embeddables/anomaly_swimlane/embeddable_swim_lane_container.tsx
View file

@ -66,7 +66,7 @@ export const EmbeddableSwimLaneContainer: FC<ExplorerSwimlaneContainerProps> = (
const [fromPage, setFromPage] = useState<number>(1);
const [{}, { uiActions }] = services;
const [{}, { uiActions, charts: chartsService }] = services;
const [selectedCells, setSelectedCells] = useState<AppStateSelectedCells | undefined>();
@ -164,6 +164,7 @@ export const EmbeddableSwimLaneContainer: FC<ExplorerSwimlaneContainerProps> = (
}
/>
}
chartsService={chartsService}
/>
</div>
);