= props => {
/>
-
-
-
+ {canAddConditions && (
+
+
+
+ )}
-
-
-
-
-
-
{alertsContext.metadata && (
-
-
-
+ <>
+
+
+
+
+
+
+
+
+
)}
);
@@ -308,6 +347,7 @@ export const Expressions: React.FC = props => {
interface ExpressionRowProps {
fields: IFieldType[];
+ canEditAggField: boolean;
expressionId: number;
expression: MetricExpression;
errors: IErrorObject;
@@ -378,17 +418,20 @@ export const ExpressionRow: React.FC = props => {
{aggType !== 'count' && (
- ({
- normalizedType: f.type,
- name: f.name,
- }))}
- aggType={aggType}
- errors={errors}
- onChangeSelectedAggField={updateMetric}
- />
+ {!props.canEditAggField && }
+ {props.canEditAggField && (
+ ({
+ normalizedType: f.type,
+ name: f.name,
+ }))}
+ aggType={aggType}
+ errors={errors}
+ onChangeSelectedAggField={updateMetric}
+ />
+ )}
)}
@@ -420,6 +463,19 @@ export const ExpressionRow: React.FC = props => {
);
};
+export const DisabledAggField = ({ text }: { text: string }) => {
+ return (
+
+ );
+};
+
export const aggregationType: { [key: string]: any } = {
avg: {
text: i18n.translate('xpack.infra.metrics.alertFlyout.aggregationText.avg', {
diff --git a/x-pack/plugins/infra/public/components/inventory/layout.tsx b/x-pack/plugins/infra/public/components/inventory/layout.tsx
index 4dd9803c7bfce0..3c91f9fa5946fc 100644
--- a/x-pack/plugins/infra/public/components/inventory/layout.tsx
+++ b/x-pack/plugins/infra/public/components/inventory/layout.tsx
@@ -5,64 +5,89 @@
*/
import React from 'react';
-import { InfraWaffleMapOptions, InfraWaffleMapBounds } from '../../lib/lib';
-import { KueryFilterQuery } from '../../store/local/waffle_filter';
+import { useInterval } from 'react-use';
+import { euiPaletteColorBlind } from '@elastic/eui';
import { NodesOverview } from '../nodes_overview';
import { Toolbar } from './toolbars/toolbar';
import { PageContent } from '../page';
import { useSnapshot } from '../../containers/waffle/use_snaphot';
import { useInventoryMeta } from '../../containers/inventory_metadata/use_inventory_meta';
-import { SnapshotMetricInput, SnapshotGroupBy } from '../../../common/http_api/snapshot_api';
-import { InventoryItemType } from '../../../common/inventory_models/types';
+import { useWaffleTimeContext } from '../../pages/inventory_view/hooks/use_waffle_time';
+import { useWaffleFiltersContext } from '../../pages/inventory_view/hooks/use_waffle_filters';
+import { useWaffleOptionsContext } from '../../pages/inventory_view/hooks/use_waffle_options';
+import { useSourceContext } from '../../containers/source';
+import { InfraFormatterType, InfraWaffleMapGradientLegend } from '../../lib/lib';
-export interface LayoutProps {
- options: InfraWaffleMapOptions;
- nodeType: InventoryItemType;
- onDrilldown: (filter: KueryFilterQuery) => void;
- currentTime: number;
- onViewChange: (view: string) => void;
- view: string;
- boundsOverride: InfraWaffleMapBounds;
- autoBounds: boolean;
+const euiVisColorPalette = euiPaletteColorBlind();
- filterQuery: string | null | undefined;
- metric: SnapshotMetricInput;
- groupBy: SnapshotGroupBy;
- sourceId: string;
- accountId: string;
- region: string;
-}
-
-export const Layout = (props: LayoutProps) => {
- const { accounts, regions } = useInventoryMeta(props.sourceId, props.nodeType);
+export const Layout = () => {
+ const { sourceId, source } = useSourceContext();
+ const {
+ metric,
+ groupBy,
+ nodeType,
+ accountId,
+ region,
+ changeView,
+ view,
+ autoBounds,
+ boundsOverride,
+ } = useWaffleOptionsContext();
+ const { accounts, regions } = useInventoryMeta(sourceId, nodeType);
+ const { currentTime, jumpToTime, isAutoReloading } = useWaffleTimeContext();
+ const { filterQueryAsJson, applyFilterQuery } = useWaffleFiltersContext();
const { loading, nodes, reload, interval } = useSnapshot(
- props.filterQuery,
- props.metric,
- props.groupBy,
- props.nodeType,
- props.sourceId,
- props.currentTime,
- props.accountId,
- props.region
+ filterQueryAsJson,
+ metric,
+ groupBy,
+ nodeType,
+ sourceId,
+ currentTime,
+ accountId,
+ region
+ );
+
+ const options = {
+ formatter: InfraFormatterType.percent,
+ formatTemplate: '{{value}}',
+ legend: {
+ type: 'gradient',
+ rules: [
+ { value: 0, color: '#D3DAE6' },
+ { value: 1, color: euiVisColorPalette[1] },
+ ],
+ } as InfraWaffleMapGradientLegend,
+ metric,
+ fields: source?.configuration?.fields,
+ groupBy,
+ };
+
+ useInterval(
+ () => {
+ if (!loading) {
+ jumpToTime(Date.now());
+ }
+ },
+ isAutoReloading ? 5000 : null
);
return (
<>
-
+
diff --git a/x-pack/plugins/infra/public/components/inventory/toolbars/save_views.tsx b/x-pack/plugins/infra/public/components/inventory/toolbars/save_views.tsx
new file mode 100644
index 00000000000000..cb315d3e17b032
--- /dev/null
+++ b/x-pack/plugins/infra/public/components/inventory/toolbars/save_views.tsx
@@ -0,0 +1,21 @@
+/*
+ * 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 from 'react';
+import { SavedViewsToolbarControls } from '../../saved_views/toolbar_control';
+import { inventoryViewSavedObjectType } from '../../../../common/saved_objects/inventory_view';
+import { useWaffleViewState } from '../../../pages/inventory_view/hooks/use_waffle_view_state';
+
+export const SavedViews = () => {
+ const { viewState, defaultViewState, onViewChange } = useWaffleViewState();
+ return (
+
+ );
+};
diff --git a/x-pack/plugins/infra/public/components/inventory/toolbars/toolbar.tsx b/x-pack/plugins/infra/public/components/inventory/toolbars/toolbar.tsx
index c59ab994a018ce..63ab6d2f4465a4 100644
--- a/x-pack/plugins/infra/public/components/inventory/toolbars/toolbar.tsx
+++ b/x-pack/plugins/infra/public/components/inventory/toolbars/toolbar.tsx
@@ -5,7 +5,6 @@
*/
import React, { FunctionComponent } from 'react';
-import { Action } from 'typescript-fsa';
import { EuiFlexItem } from '@elastic/eui';
import {
SnapshotMetricInput,
@@ -16,33 +15,23 @@ import { InventoryCloudAccount } from '../../../../common/http_api/inventory_met
import { findToolbar } from '../../../../common/inventory_models/toolbars';
import { ToolbarWrapper } from './toolbar_wrapper';
-import { waffleOptionsSelectors } from '../../../store';
import { InfraGroupByOptions } from '../../../lib/lib';
-import { WithWaffleViewState } from '../../../containers/waffle/with_waffle_view_state';
-import { SavedViewsToolbarControls } from '../../saved_views/toolbar_control';
-import { inventoryViewSavedObjectType } from '../../../../common/saved_objects/inventory_view';
import { IIndexPattern } from '../../../../../../../src/plugins/data/public';
import { InventoryItemType } from '../../../../common/inventory_models/types';
+import { WaffleOptionsState } from '../../../pages/inventory_view/hooks/use_waffle_options';
+import { SavedViews } from './save_views';
-export interface ToolbarProps {
+export interface ToolbarProps
+ extends Omit {
createDerivedIndexPattern: (type: 'logs' | 'metrics' | 'both') => IIndexPattern;
- changeMetric: (payload: SnapshotMetricInput) => Action;
- changeGroupBy: (payload: SnapshotGroupBy) => Action;
- changeCustomOptions: (payload: InfraGroupByOptions[]) => Action;
- changeAccount: (id: string) => Action;
- changeRegion: (name: string) => Action;
- customOptions: ReturnType;
- groupBy: ReturnType;
- metric: ReturnType;
- nodeType: ReturnType;
- accountId: ReturnType;
- region: ReturnType;
+ changeMetric: (payload: SnapshotMetricInput) => void;
+ changeGroupBy: (payload: SnapshotGroupBy) => void;
+ changeCustomOptions: (payload: InfraGroupByOptions[]) => void;
+ changeAccount: (id: string) => void;
+ changeRegion: (name: string) => void;
accounts: InventoryCloudAccount[];
regions: string[];
- customMetrics: ReturnType;
- changeCustomMetrics: (
- payload: SnapshotCustomMetricInput[]
- ) => Action;
+ changeCustomMetrics: (payload: SnapshotCustomMetricInput[]) => void;
}
const wrapToolbarItems = (
@@ -57,16 +46,7 @@ const wrapToolbarItems = (
-
- {({ defaultViewState, viewState, onViewChange }) => (
-
- )}
-
+
)}
diff --git a/x-pack/plugins/infra/public/components/inventory/toolbars/toolbar_wrapper.tsx b/x-pack/plugins/infra/public/components/inventory/toolbars/toolbar_wrapper.tsx
index 735539d063b01c..fefda94372cfb4 100644
--- a/x-pack/plugins/infra/public/components/inventory/toolbars/toolbar_wrapper.tsx
+++ b/x-pack/plugins/infra/public/components/inventory/toolbars/toolbar_wrapper.tsx
@@ -8,58 +8,52 @@ import React from 'react';
import { EuiFlexGroup } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { SnapshotMetricType } from '../../../../common/inventory_models/types';
-import { WithSource } from '../../../containers/with_source';
-import { WithWaffleOptions } from '../../../containers/waffle/with_waffle_options';
import { Toolbar } from '../../eui/toolbar';
import { ToolbarProps } from './toolbar';
import { fieldToName } from '../../waffle/lib/field_to_display_name';
+import { useSourceContext } from '../../../containers/source';
+import { useWaffleOptionsContext } from '../../../pages/inventory_view/hooks/use_waffle_options';
interface Props {
children: (props: Omit) => React.ReactElement;
}
export const ToolbarWrapper = (props: Props) => {
+ const {
+ changeMetric,
+ changeGroupBy,
+ changeCustomOptions,
+ changeAccount,
+ changeRegion,
+ customOptions,
+ groupBy,
+ metric,
+ nodeType,
+ accountId,
+ region,
+ customMetrics,
+ changeCustomMetrics,
+ } = useWaffleOptionsContext();
+ const { createDerivedIndexPattern } = useSourceContext();
return (
-
- {({ createDerivedIndexPattern }) => (
-
- {({
- changeMetric,
- changeGroupBy,
- changeCustomOptions,
- changeAccount,
- changeRegion,
- customOptions,
- groupBy,
- metric,
- nodeType,
- accountId,
- region,
- customMetrics,
- changeCustomMetrics,
- }) =>
- props.children({
- createDerivedIndexPattern,
- changeMetric,
- changeGroupBy,
- changeAccount,
- changeRegion,
- changeCustomOptions,
- customOptions,
- groupBy,
- metric,
- nodeType,
- region,
- accountId,
- customMetrics,
- changeCustomMetrics,
- })
- }
-
- )}
-
+ {props.children({
+ createDerivedIndexPattern,
+ changeMetric,
+ changeGroupBy,
+ changeAccount,
+ changeRegion,
+ changeCustomOptions,
+ customOptions,
+ groupBy,
+ metric,
+ nodeType,
+ region,
+ accountId,
+ customMetrics,
+ changeCustomMetrics,
+ })}
);
diff --git a/x-pack/plugins/infra/public/components/nodes_overview/index.tsx b/x-pack/plugins/infra/public/components/nodes_overview/index.tsx
index 4d61568a63b9ff..ef22e0486f8921 100644
--- a/x-pack/plugins/infra/public/components/nodes_overview/index.tsx
+++ b/x-pack/plugins/infra/public/components/nodes_overview/index.tsx
@@ -12,7 +12,6 @@ import React from 'react';
import { euiStyled } from '../../../../observability/public';
import { InfraFormatterType, InfraWaffleMapBounds, InfraWaffleMapOptions } from '../../lib/lib';
-import { KueryFilterQuery } from '../../store/local/waffle_filter';
import { createFormatter } from '../../utils/formatters';
import { NoData } from '../empty_states';
import { InfraLoadingPanel } from '../loading';
@@ -24,6 +23,11 @@ import { convertIntervalToString } from '../../utils/convert_interval_to_string'
import { InventoryItemType } from '../../../common/inventory_models/types';
import { createFormatterForMetric } from '../metrics_explorer/helpers/create_formatter_for_metric';
+export interface KueryFilterQuery {
+ kind: 'kuery';
+ expression: string;
+}
+
interface Props {
options: InfraWaffleMapOptions;
nodeType: InventoryItemType;
diff --git a/x-pack/plugins/infra/public/components/waffle/legend.tsx b/x-pack/plugins/infra/public/components/waffle/legend.tsx
index de070efb35a1f7..13e533b225d4df 100644
--- a/x-pack/plugins/infra/public/components/waffle/legend.tsx
+++ b/x-pack/plugins/infra/public/components/waffle/legend.tsx
@@ -6,12 +6,12 @@
import React from 'react';
import { euiStyled } from '../../../../observability/public';
-import { WithWaffleOptions } from '../../containers/waffle/with_waffle_options';
import { InfraFormatter, InfraWaffleMapBounds, InfraWaffleMapLegend } from '../../lib/lib';
import { GradientLegend } from './gradient_legend';
import { LegendControls } from './legend_controls';
import { isInfraWaffleMapGradientLegend, isInfraWaffleMapStepLegend } from './lib/type_guards';
import { StepLegend } from './steps_legend';
+import { useWaffleOptionsContext } from '../../pages/inventory_view/hooks/use_waffle_options';
interface Props {
legend: InfraWaffleMapLegend;
bounds: InfraWaffleMapBounds;
@@ -25,22 +25,24 @@ interface LegendControlOptions {
}
export const Legend: React.FC = ({ dataBounds, legend, bounds, formatter }) => {
+ const {
+ changeBoundsOverride,
+ changeAutoBounds,
+ autoBounds,
+ boundsOverride,
+ } = useWaffleOptionsContext();
return (
-
- {({ changeBoundsOverride, changeAutoBounds, autoBounds, boundsOverride }) => (
- {
- changeBoundsOverride(options.bounds);
- changeAutoBounds(options.auto);
- }}
- />
- )}
-
+ {
+ changeBoundsOverride(options.bounds);
+ changeAutoBounds(options.auto);
+ }}
+ />
{isInfraWaffleMapGradientLegend(legend) && (
)}
diff --git a/x-pack/plugins/infra/public/components/waffle/lib/create_uptime_link.test.ts b/x-pack/plugins/infra/public/components/waffle/lib/create_uptime_link.test.ts
index 18e5838a15b563..902969c83ba393 100644
--- a/x-pack/plugins/infra/public/components/waffle/lib/create_uptime_link.test.ts
+++ b/x-pack/plugins/infra/public/components/waffle/lib/create_uptime_link.test.ts
@@ -5,11 +5,7 @@
*/
import { createUptimeLink } from './create_uptime_link';
-import {
- InfraWaffleMapOptions,
- InfraWaffleMapLegendMode,
- InfraFormatterType,
-} from '../../../lib/lib';
+import { InfraWaffleMapOptions, InfraFormatterType } from '../../../lib/lib';
import { SnapshotMetricType } from '../../../../common/inventory_models/types';
const options: InfraWaffleMapOptions = {
@@ -26,7 +22,7 @@ const options: InfraWaffleMapOptions = {
metric: { type: 'cpu' },
groupBy: [],
legend: {
- type: InfraWaffleMapLegendMode.gradient,
+ type: 'gradient',
rules: [],
},
};
diff --git a/x-pack/plugins/infra/public/components/waffle/lib/type_guards.ts b/x-pack/plugins/infra/public/components/waffle/lib/type_guards.ts
index aff16374ae2626..f793afee1b948b 100644
--- a/x-pack/plugins/infra/public/components/waffle/lib/type_guards.ts
+++ b/x-pack/plugins/infra/public/components/waffle/lib/type_guards.ts
@@ -4,16 +4,14 @@
* you may not use this file except in compliance with the Elastic License.
*/
-import {
- InfraWaffleMapGradientLegend,
- InfraWaffleMapLegendMode,
- InfraWaffleMapStepLegend,
-} from '../../../lib/lib';
+import { InfraWaffleMapGradientLegend, InfraWaffleMapStepLegend } from '../../../lib/lib';
+
export function isInfraWaffleMapStepLegend(subject: any): subject is InfraWaffleMapStepLegend {
- return subject.type && subject.type === InfraWaffleMapLegendMode.step;
+ return subject.type && subject.type === 'step';
}
+
export function isInfraWaffleMapGradientLegend(
subject: any
): subject is InfraWaffleMapGradientLegend {
- return subject.type && subject.type === InfraWaffleMapLegendMode.gradient;
+ return subject.type && subject.type === 'gradient';
}
diff --git a/x-pack/plugins/infra/public/components/waffle/waffle_inventory_switcher.tsx b/x-pack/plugins/infra/public/components/waffle/waffle_inventory_switcher.tsx
index d265b418f010df..21da10a0a76502 100644
--- a/x-pack/plugins/infra/public/components/waffle/waffle_inventory_switcher.tsx
+++ b/x-pack/plugins/infra/public/components/waffle/waffle_inventory_switcher.tsx
@@ -16,36 +16,23 @@ import React, { useCallback, useState, useMemo } from 'react';
import { FormattedMessage } from '@kbn/i18n/react';
import { findInventoryModel } from '../../../common/inventory_models';
import { InventoryItemType } from '../../../common/inventory_models/types';
-import {
- SnapshotMetricInput,
- SnapshotGroupBy,
- SnapshotCustomMetricInput,
-} from '../../../common/http_api/snapshot_api';
-
-interface WaffleInventorySwitcherProps {
- nodeType: InventoryItemType;
- changeNodeType: (nodeType: InventoryItemType) => void;
- changeGroupBy: (groupBy: SnapshotGroupBy) => void;
- changeMetric: (metric: SnapshotMetricInput) => void;
- changeCustomMetrics: (metrics: SnapshotCustomMetricInput[]) => void;
- changeAccount: (id: string) => void;
- changeRegion: (name: string) => void;
-}
+import { useWaffleOptionsContext } from '../../pages/inventory_view/hooks/use_waffle_options';
const getDisplayNameForType = (type: InventoryItemType) => {
const inventoryModel = findInventoryModel(type);
return inventoryModel.displayName;
};
-export const WaffleInventorySwitcher: React.FC = ({
- changeNodeType,
- changeGroupBy,
- changeMetric,
- changeAccount,
- changeRegion,
- changeCustomMetrics,
- nodeType,
-}) => {
+export const WaffleInventorySwitcher: React.FC = () => {
+ const {
+ changeNodeType,
+ changeGroupBy,
+ changeMetric,
+ changeAccount,
+ changeRegion,
+ changeCustomMetrics,
+ nodeType,
+ } = useWaffleOptionsContext();
const [isOpen, setIsOpen] = useState(false);
const closePopover = useCallback(() => setIsOpen(false), []);
const openPopover = useCallback(() => setIsOpen(true), []);
diff --git a/x-pack/plugins/infra/public/components/waffle/waffle_time_controls.tsx b/x-pack/plugins/infra/public/components/waffle/waffle_time_controls.tsx
index 4f840336de8c34..458bb674afadef 100644
--- a/x-pack/plugins/infra/public/components/waffle/waffle_time_controls.tsx
+++ b/x-pack/plugins/infra/public/components/waffle/waffle_time_controls.tsx
@@ -7,84 +7,60 @@
import { EuiButtonEmpty, EuiDatePicker, EuiFormControlLayout } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import moment, { Moment } from 'moment';
-import React from 'react';
-import { Action } from 'typescript-fsa';
+import React, { useCallback } from 'react';
+import { useWaffleTimeContext } from '../../pages/inventory_view/hooks/use_waffle_time';
-interface WaffleTimeControlsProps {
- currentTime: number;
- isLiveStreaming?: boolean;
- onChangeTime?: (time: number) => void;
- startLiveStreaming?: (payload: void) => Action