diff --git a/x-pack/plugins/infra/common/inventory_models/shared/components/metrics_and_groupby_toolbar_items.tsx b/x-pack/plugins/infra/common/inventory_models/shared/components/metrics_and_groupby_toolbar_items.tsx
index bf37828ed085..4a4accc6edfe 100644
--- a/x-pack/plugins/infra/common/inventory_models/shared/components/metrics_and_groupby_toolbar_items.tsx
+++ b/x-pack/plugins/infra/common/inventory_models/shared/components/metrics_and_groupby_toolbar_items.tsx
@@ -7,6 +7,7 @@
import React, { useMemo } from 'react';
import { EuiFlexItem } from '@elastic/eui';
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { WaffleSortControls } from '../../../../public/pages/metrics/inventory_view/components/waffle/waffle_sort_controls';
import { ToolbarProps } from '../../../../public/pages/metrics/inventory_view/components/toolbars/toolbar';
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
import { WaffleMetricControls } from '../../../../public/pages/metrics/inventory_view/components/waffle/metric_control';
@@ -58,6 +59,11 @@ export const MetricsAndGroupByToolbarItems = (props: Props) => {
customOptions={props.customOptions}
/>
+ {props.view === 'map' && (
+
+
+
+ )}
>
);
};
diff --git a/x-pack/plugins/infra/common/saved_objects/inventory_view.ts b/x-pack/plugins/infra/common/saved_objects/inventory_view.ts
index c14b75efc688..15874f2eee34 100644
--- a/x-pack/plugins/infra/common/saved_objects/inventory_view.ts
+++ b/x-pack/plugins/infra/common/saved_objects/inventory_view.ts
@@ -21,6 +21,16 @@ export const inventoryViewSavedObjectType: SavedObjectsType = {
name: {
type: 'keyword',
},
+ sort: {
+ properties: {
+ by: {
+ type: 'keyword',
+ },
+ direction: {
+ type: 'keyword',
+ },
+ },
+ },
metric: {
properties: {
type: {
diff --git a/x-pack/plugins/infra/public/lib/lib.ts b/x-pack/plugins/infra/public/lib/lib.ts
index 9043b4d9f697..6bd4c10c881e 100644
--- a/x-pack/plugins/infra/public/lib/lib.ts
+++ b/x-pack/plugins/infra/public/lib/lib.ts
@@ -18,6 +18,7 @@ import {
SnapshotNodeMetric,
SnapshotNodePath,
} from '../../common/http_api/snapshot_api';
+import { WaffleSortOption } from '../pages/metrics/inventory_view/hooks/use_waffle_options';
export interface InfraFrontendLibs {
apolloClient: InfraApolloClient;
@@ -163,6 +164,7 @@ export interface InfraWaffleMapOptions {
metric: SnapshotMetricInput;
groupBy: SnapshotGroupBy;
legend: InfraWaffleMapLegend;
+ sort: WaffleSortOption;
}
export interface InfraOptions {
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/layout.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/layout.tsx
index a71e43874b48..32f8e47fe9b7 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/layout.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/layout.tsx
@@ -32,6 +32,7 @@ export const Layout = () => {
const {
metric,
groupBy,
+ sort,
nodeType,
accountId,
region,
@@ -64,6 +65,7 @@ export const Layout = () => {
],
} as InfraWaffleMapGradientLegend,
metric,
+ sort,
fields: source?.configuration?.fields,
groupBy,
};
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/toolbars/toolbar.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/toolbars/toolbar.tsx
index e8485fb81258..6a68599aee38 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/toolbars/toolbar.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/toolbars/toolbar.tsx
@@ -19,17 +19,17 @@ import { ToolbarWrapper } from './toolbar_wrapper';
import { InfraGroupByOptions } from '../../../../../lib/lib';
import { IIndexPattern } from '../../../../../../../../../src/plugins/data/public';
import { InventoryItemType } from '../../../../../../common/inventory_models/types';
-import { WaffleOptionsState } from '../../hooks/use_waffle_options';
+import { WaffleOptionsState, WaffleSortOption } from '../../hooks/use_waffle_options';
import { useInventoryMeta } from '../../hooks/use_inventory_meta';
-export interface ToolbarProps
- extends Omit {
+export interface ToolbarProps extends Omit {
createDerivedIndexPattern: (type: 'logs' | 'metrics' | 'both') => IIndexPattern;
changeMetric: (payload: SnapshotMetricInput) => void;
changeGroupBy: (payload: SnapshotGroupBy) => void;
changeCustomOptions: (payload: InfraGroupByOptions[]) => void;
changeAccount: (id: string) => void;
changeRegion: (name: string) => void;
+ changeSort: (sort: WaffleSortOption) => void;
accounts: InventoryCloudAccount[];
regions: string[];
changeCustomMetrics: (payload: SnapshotCustomMetricInput[]) => void;
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/toolbars/toolbar_wrapper.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/toolbars/toolbar_wrapper.tsx
index ea5312298416..3606bcc6944d 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/toolbars/toolbar_wrapper.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/toolbars/toolbar_wrapper.tsx
@@ -25,12 +25,15 @@ export const ToolbarWrapper = (props: Props) => {
changeCustomOptions,
changeAccount,
changeRegion,
+ changeSort,
customOptions,
groupBy,
metric,
nodeType,
accountId,
+ view,
region,
+ sort,
customMetrics,
changeCustomMetrics,
} = useWaffleOptionsContext();
@@ -47,8 +50,11 @@ export const ToolbarWrapper = (props: Props) => {
changeAccount,
changeRegion,
changeCustomOptions,
+ changeSort,
customOptions,
groupBy,
+ sort,
+ view,
metric,
nodeType,
region,
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/map.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/map.tsx
index b1f816fb46d2..eee8c69091ef 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/map.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/map.tsx
@@ -15,6 +15,7 @@ import { GroupOfNodes } from './group_of_nodes';
import { applyWaffleMapLayout } from '../../lib/apply_wafflemap_layout';
import { SnapshotNode } from '../../../../../../common/http_api/snapshot_api';
import { InventoryItemType } from '../../../../../../common/inventory_models/types';
+import { sortNodes } from '../../lib/sort_nodes';
interface Props {
nodes: SnapshotNode[];
@@ -37,7 +38,8 @@ export const Map: React.FC = ({
nodeType,
dataBounds,
}) => {
- const map = nodesToWaffleMap(nodes);
+ const sortedNodes = sortNodes(options.sort, nodes);
+ const map = nodesToWaffleMap(sortedNodes);
return (
{({ measureRef, content: { width = 0, height = 0 } }) => {
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/metric_control/index.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/metric_control/index.tsx
index f91e9a4034bc..0cf1faec06c1 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/metric_control/index.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/metric_control/index.tsx
@@ -132,7 +132,10 @@ export const WaffleMetricControls = ({
}
const button = (
-
+
{currentLabel}
);
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_accounts_controls.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_accounts_controls.tsx
index 3e4ff1de8291..5ac632051025 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_accounts_controls.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_accounts_controls.tsx
@@ -58,7 +58,10 @@ export const WaffleAccountsControls = (props: Props) => {
);
const button = (
-
+
{currentLabel
? currentLabel.name
: i18n.translate('xpack.infra.waffle.accountAllTitle', {
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_group_by_controls.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_group_by_controls.tsx
index c1f406f31e85..cc09ce226b2f 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_group_by_controls.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_group_by_controls.tsx
@@ -130,7 +130,10 @@ export const WaffleGroupByControls = class extends React.PureComponent
+
{buttonBody}
);
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_inventory_switcher.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_inventory_switcher.tsx
index e534c97eda09..c31b7e0a3e6f 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_inventory_switcher.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_inventory_switcher.tsx
@@ -7,6 +7,7 @@
import { EuiPopover, EuiContextMenu, EuiContextMenuPanelDescriptor } from '@elastic/eui';
import React, { useCallback, useState, useMemo } from 'react';
+import { i18n } from '@kbn/i18n';
import { findInventoryModel } from '../../../../../../common/inventory_models';
import { InventoryItemType } from '../../../../../../common/inventory_models/types';
import { useWaffleOptionsContext } from '../../hooks/use_waffle_options';
@@ -115,7 +116,10 @@ export const WaffleInventorySwitcher: React.FC = () => {
}, [nodeType]);
const button = (
-
+
{selectedText}
);
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_region_controls.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_region_controls.tsx
index 9d759424cdc9..9c28f0798b51 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_region_controls.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_region_controls.tsx
@@ -57,7 +57,10 @@ export const WaffleRegionControls = (props: Props) => {
);
const button = (
-
+
{currentLabel ||
i18n.translate('xpack.infra.waffle.region', {
defaultMessage: 'All',
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_sort_controls.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_sort_controls.tsx
new file mode 100644
index 000000000000..b5e6aacd0e6f
--- /dev/null
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_sort_controls.tsx
@@ -0,0 +1,125 @@
+/*
+ * 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, { useCallback, useMemo, useState, ReactNode } from 'react';
+import { EuiSwitch, EuiContextMenuPanelDescriptor, EuiPopover, EuiContextMenu } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { EuiTheme, withTheme } from '../../../../../../../observability/public';
+import { WaffleSortOption } from '../../hooks/use_waffle_options';
+import { DropdownButton } from '../dropdown_button';
+
+interface Props {
+ sort: WaffleSortOption;
+ onChange: (sort: WaffleSortOption) => void;
+}
+
+const LABELS = {
+ name: i18n.translate('xpack.infra.waffle.sortNameLabel', { defaultMessage: 'Name' }),
+ value: i18n.translate('xpack.infra.waffle.sort.valueLabel', { defaultMessage: 'Metric value' }),
+};
+
+export const WaffleSortControls = ({ sort, onChange }: Props) => {
+ const [isOpen, setIsOpen] = useState(false);
+
+ const showPopover = useCallback(() => {
+ setIsOpen(true);
+ }, [setIsOpen]);
+
+ const closePopover = useCallback(() => {
+ setIsOpen(false);
+ }, [setIsOpen]);
+
+ const label = LABELS[sort.by];
+
+ const button = (
+
+ {label}
+
+ );
+
+ const selectName = useCallback(() => {
+ onChange({ ...sort, by: 'name' });
+ closePopover();
+ }, [closePopover, onChange, sort]);
+
+ const selectValue = useCallback(() => {
+ onChange({ ...sort, by: 'value' });
+ closePopover();
+ }, [closePopover, onChange, sort]);
+
+ const toggleSort = useCallback(() => {
+ onChange({
+ ...sort,
+ direction: sort.direction === 'asc' ? 'desc' : 'asc',
+ });
+ }, [sort, onChange]);
+
+ const panels = useMemo(
+ () => [
+ {
+ id: 0,
+ title: '',
+ items: [
+ {
+ name: LABELS.name,
+ icon: sort.by === 'name' ? 'check' : 'empty',
+ onClick: selectName,
+ },
+ {
+ name: LABELS.value,
+ icon: sort.by === 'value' ? 'check' : 'empty',
+ onClick: selectValue,
+ },
+ ],
+ },
+ ],
+ [sort.by, selectName, selectValue]
+ );
+
+ return (
+
+
+
+
+
+
+ );
+};
+
+interface SwitchContainerProps {
+ theme: EuiTheme;
+ children: ReactNode;
+}
+
+const SwitchContainer = withTheme(({ children, theme }: SwitchContainerProps) => {
+ return (
+
+ {children}
+
+ );
+});
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/hooks/use_waffle_options.ts b/x-pack/plugins/infra/public/pages/metrics/inventory_view/hooks/use_waffle_options.ts
index 32bfe6e085b4..92f9ee4897f2 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/hooks/use_waffle_options.ts
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/hooks/use_waffle_options.ts
@@ -32,6 +32,7 @@ export const DEFAULT_WAFFLE_OPTIONS_STATE: WaffleOptionsState = {
accountId: '',
region: '',
customMetrics: [],
+ sort: { by: 'name', direction: 'desc' },
};
export const useWaffleOptions = () => {
@@ -99,7 +100,15 @@ export const useWaffleOptions = () => {
[setState]
);
+ const changeSort = useCallback(
+ (sort: WaffleSortOption) => {
+ setState(previous => ({ ...previous, sort }));
+ },
+ [setState]
+ );
+
return {
+ ...DEFAULT_WAFFLE_OPTIONS_STATE,
...state,
changeMetric,
changeGroupBy,
@@ -111,10 +120,16 @@ export const useWaffleOptions = () => {
changeAccount,
changeRegion,
changeCustomMetrics,
+ changeSort,
setWaffleOptionsState: setState,
};
};
+export const WaffleSortOptionRT = rt.type({
+ by: rt.keyof({ name: null, value: null }),
+ direction: rt.keyof({ asc: null, desc: null }),
+});
+
export const WaffleOptionsStateRT = rt.type({
metric: SnapshotMetricInputRT,
groupBy: SnapshotGroupByRT,
@@ -134,8 +149,10 @@ export const WaffleOptionsStateRT = rt.type({
accountId: rt.string,
region: rt.string,
customMetrics: rt.array(SnapshotCustomMetricInputRT),
+ sort: WaffleSortOptionRT,
});
+export type WaffleSortOption = rt.TypeOf;
export type WaffleOptionsState = rt.TypeOf;
const encodeUrlState = (state: WaffleOptionsState) => {
return WaffleOptionsStateRT.encode(state);
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/hooks/use_waffle_view_state.ts b/x-pack/plugins/infra/public/pages/metrics/inventory_view/hooks/use_waffle_view_state.ts
index 869560b2b870..306c30228596 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/hooks/use_waffle_view_state.ts
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/hooks/use_waffle_view_state.ts
@@ -28,6 +28,7 @@ export const useWaffleViewState = () => {
autoBounds,
accountId,
region,
+ sort,
setWaffleOptionsState,
} = useWaffleOptionsContext();
const { currentTime, isAutoReloading, setWaffleTimeState } = useWaffleTimeContext();
@@ -35,6 +36,7 @@ export const useWaffleViewState = () => {
const viewState: WaffleViewState = {
metric,
+ sort,
groupBy,
nodeType,
view,
@@ -59,6 +61,7 @@ export const useWaffleViewState = () => {
const onViewChange = useCallback(
(newState: WaffleViewState) => {
setWaffleOptionsState({
+ sort: newState.sort,
metric: newState.metric,
groupBy: newState.groupBy,
nodeType: newState.nodeType,
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/lib/create_uptime_link.test.ts b/x-pack/plugins/infra/public/pages/metrics/inventory_view/lib/create_uptime_link.test.ts
index 5f760cf2f591..fe9b2aebe27f 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/lib/create_uptime_link.test.ts
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/lib/create_uptime_link.test.ts
@@ -21,6 +21,7 @@ const options: InfraWaffleMapOptions = {
formatTemplate: '{{value}}',
metric: { type: 'cpu' },
groupBy: [],
+ sort: { by: 'name', direction: 'asc' },
legend: {
type: 'gradient',
rules: [],
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/lib/sort_nodes.ts b/x-pack/plugins/infra/public/pages/metrics/inventory_view/lib/sort_nodes.ts
new file mode 100644
index 000000000000..e676fb3e09c2
--- /dev/null
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/lib/sort_nodes.ts
@@ -0,0 +1,23 @@
+/*
+ * 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 { sortBy, last } from 'lodash';
+import { SnapshotNode } from '../../../../../common/http_api/snapshot_api';
+import { WaffleSortOption } from '../hooks/use_waffle_options';
+
+const SORT_PATHS = {
+ name: (node: SnapshotNode) => last(node.path),
+ value: 'metric.value',
+};
+
+export const sortNodes = (sort: WaffleSortOption, nodes: SnapshotNode[]) => {
+ const sortPath = SORT_PATHS[sort.by];
+ const sortedNodes = sortBy(nodes, sortPath);
+ if (sort.direction === 'desc') {
+ return sortedNodes.reverse();
+ }
+ return sortedNodes;
+};