{
const Editor = section.editor;
return (
-
+
{
x: 0,
y: 0,
w: 12,
- h: 2,
+ h: 3,
});
expect(getNewVizDimensions(samplePanelVisualizations1)).toStrictEqual(samplenewDimensions1);
diff --git a/public/components/metrics/helpers/layout_context.ts b/public/components/metrics/helpers/layout_context.ts
new file mode 100644
index 0000000000..a850c1690e
--- /dev/null
+++ b/public/components/metrics/helpers/layout_context.ts
@@ -0,0 +1,4 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
diff --git a/public/components/metrics/helpers/utils.tsx b/public/components/metrics/helpers/utils.tsx
index 96f7fe4772..b0fe06d539 100644
--- a/public/components/metrics/helpers/utils.tsx
+++ b/public/components/metrics/helpers/utils.tsx
@@ -30,14 +30,14 @@ export const onTimeChange = (
setStart: React.Dispatch>,
setEnd: React.Dispatch>
) => {
- const recentlyUsedRange = recentlyUsedRanges.filter((recentlyUsedRange) => {
+ const dedupedRanges = recentlyUsedRanges.filter((recentlyUsedRange) => {
const isDuplicate = recentlyUsedRange.start === start && recentlyUsedRange.end === end;
return !isDuplicate;
});
- recentlyUsedRange.unshift({ start, end });
+ dedupedRanges.unshift({ start, end });
setStart(start);
setEnd(end);
- setRecentlyUsedRanges(recentlyUsedRange.slice(0, 9));
+ setRecentlyUsedRanges(dedupedRanges.slice(0, 9));
};
// PPL Service requestor
@@ -58,21 +58,21 @@ export const getVisualizations = (http: CoreStart['http']) => {
});
};
-interface boxType {
+interface BoxType {
x1: number;
y1: number;
x2: number;
y2: number;
}
-const calculatOverlapArea = (bb1: boxType, bb2: boxType) => {
- const x_left = Math.max(bb1.x1, bb2.x1);
- const y_top = Math.max(bb1.y1, bb2.y1);
- const x_right = Math.min(bb1.x2, bb2.x2);
- const y_bottom = Math.min(bb1.y2, bb2.y2);
+const calculatOverlapArea = (bb1: BoxType, bb2: BoxType) => {
+ const xLeft = Math.max(bb1.x1, bb2.x1);
+ const yTop = Math.max(bb1.y1, bb2.y1);
+ const xRight = Math.min(bb1.x2, bb2.x2);
+ const yBottom = Math.min(bb1.y2, bb2.y2);
- if (x_right < x_left || y_bottom < y_top) return 0;
- return (x_right - x_left) * (y_bottom - y_top);
+ if (xRight < xLeft || yBottom < yTop) return 0;
+ return (xRight - xLeft) * (yBottom - yTop);
};
const getTotalOverlapArea = (panelVisualizations: MetricType[]) => {
@@ -149,7 +149,7 @@ export const mergeLayoutAndMetrics = (
for (let i = 0; i < newVisualizationList.length; i++) {
for (let j = 0; j < layout.length; j++) {
- if (newVisualizationList[i].id == layout[j].i) {
+ if (newVisualizationList[i].id === layout[j].i) {
newPanelVisualizations.push({
...newVisualizationList[i],
x: layout[j].x,
@@ -206,6 +206,6 @@ export const updateMetricsWithSelections = (
description: savedVisualization.description,
type: 'line',
subType: 'metric',
- userConfigs: JSON.stringify(savedVisualization.user_configs),
+ userConfigs: savedVisualization.user_configs,
};
};
diff --git a/public/components/metrics/index.tsx b/public/components/metrics/index.tsx
index ecac571428..4030cfcb1c 100644
--- a/public/components/metrics/index.tsx
+++ b/public/components/metrics/index.tsx
@@ -18,8 +18,10 @@ import React, { ReactChild, useEffect, useState } from 'react';
import { HashRouter, Route, RouteComponentProps } from 'react-router-dom';
import { StaticContext } from 'react-router-dom';
import { useSelector } from 'react-redux';
+import { createContext } from 'react';
+import { VisualizationType } from 'common/types/custom_panels';
import { ChromeBreadcrumb, Toast } from '../../../../../src/core/public';
-import { onTimeChange } from './helpers/utils';
+import { getNewVizDimensions, onTimeChange } from './helpers/utils';
import { Sidebar } from './sidebar/sidebar';
import { EmptyMetricsView } from './view/empty_view';
import PPLService from '../../services/requests/ppl';
@@ -27,7 +29,7 @@ import { TopMenu } from './top_menu/top_menu';
import { MetricType } from '../../../common/types/metrics';
import { MetricsGrid } from './view/metrics_grid';
import { metricsLayoutSelector, selectedMetricsSelector } from './redux/slices/metrics_slice';
-import { resolutionOptions } from '../../../common/constants/metrics';
+import { OBSERVABILITY_CUSTOM_METRIC, resolutionOptions } from '../../../common/constants/metrics';
import SavedObjects from '../../services/saved_objects/event_analytics/saved_objects';
import { observabilityLogsID } from '../../../common/constants/shared';
@@ -39,10 +41,54 @@ interface MetricsProps {
setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void;
}
+export const MetricsLayoutContext = createContext<{
+ layout: VisualizationType[];
+ addToLayout: (id: string) => void;
+}>({
+ layout: [],
+ addToLayout: () => {},
+});
+
+const MetricsLayoutProvider = ({ children }) => {
+ const [layout, setLayout] = useState([]);
+
+ const addToLayout = (id) => {
+ setLayout((prevLayout) => {
+ const newVisLayout = getNewVizDimensions(prevLayout);
+
+ const metricVisualization: MetricType = {
+ id,
+ savedVisualizationId: id,
+ x: newVisLayout.x,
+ y: newVisLayout.y,
+ h: newVisLayout.h,
+ w: newVisLayout.w,
+ query: {
+ type:
+ newVisLayout.catalog === OBSERVABILITY_CUSTOM_METRIC
+ ? 'savedCustomMetric'
+ : 'prometheusMetric',
+ catalog: newVisLayout.id,
+ aggregation: 'avg',
+ attributesGroupBy: [],
+ availableAttributes: [],
+ },
+ };
+ return [...prevLayout, metricVisualization];
+ });
+ };
+
+ return (
+
+ {children}
+
+ );
+};
+
export const Home = ({ chrome, parentBreadcrumb }: MetricsProps) => {
// Redux tools
const selectedMetrics = useSelector(selectedMetricsSelector);
- const metricsLayout = useSelector(metricsLayoutSelector);
+ const [metricsLayout, setMetricsLayout] = useSelector(metricsLayoutSelector);
// Date picker constants
const [recentlyUsedRanges, setRecentlyUsedRanges] = useState([]);
@@ -133,57 +179,49 @@ export const Home = ({ chrome, parentBreadcrumb }: MetricsProps) => {
-
-
-
- {(EuiResizablePanel, EuiResizableButton) => (
- <>
-
-
-
-
-
-
-
- {selectedMetrics.length > 0 ? (
-
- ) : (
-
- )}
-
-
- )}
-
-
+
+
+
+
+ {(EuiResizablePanel, EuiResizableButton) => (
+ <>
+
+
+
+
+
+
+
+ {selectedMetrics.length > 0 ? (
+
+ ) : (
+
+ )}
+
+
+ )}
+
+
+
diff --git a/public/components/metrics/redux/slices/metrics_slice.ts b/public/components/metrics/redux/slices/metrics_slice.ts
index e323ba628d..641d331d5b 100644
--- a/public/components/metrics/redux/slices/metrics_slice.ts
+++ b/public/components/metrics/redux/slices/metrics_slice.ts
@@ -4,23 +4,27 @@
*/
import { createSlice } from '@reduxjs/toolkit';
-import { sortBy } from 'lodash';
+import { keyBy, sortBy } from 'lodash';
import { ouiPaletteColorBlindBehindText } from '@elastic/eui';
import {
PPL_DATASOURCES_REQUEST,
REDUX_SLICE_METRICS,
SAVED_VISUALIZATION,
OBSERVABILITY_CUSTOM_METRIC,
+ DEFAULT_METRIC_WIDTH,
+ DEFAULT_METRIC_HEIGHT,
} from '../../../../../common/constants/metrics';
import { MetricType } from '../../../../../common/types/metrics';
import { SavedObjectsActions } from '../../../../services/saved_objects/saved_object_client/saved_objects_actions';
import { ObservabilitySavedVisualization } from '../../../../services/saved_objects/saved_object_client/types';
import { getNewVizDimensions, pplServiceRequestor, sortMetricLayout } from '../../helpers/utils';
import { coreRefs } from '../../../../framework/core_refs';
+import { useToast } from '../../../common/toast';
export interface IconAttributes {
color: string;
}
+
const coloredIconsFrom = (dataSources: string[]): { [dataSource: string]: IconAttributes } => {
const colorCycle = ouiPaletteColorBlindBehindText({ sortBy: 'natural' });
const keyedIcons = dataSources.map((dataSource, index) => {
@@ -36,9 +40,9 @@ const coloredIconsFrom = (dataSources: string[]): { [dataSource: string]: IconAt
};
const initialState = {
- metrics: [],
+ metrics: {},
selected: [],
- searched: [],
+ sortedIds: [],
search: '',
metricsLayout: [],
dataSources: [OBSERVABILITY_CUSTOM_METRIC],
@@ -59,8 +63,14 @@ export const loadMetrics = () => async (dispatch) => {
);
const remoteDataRequests = await fetchRemoteMetrics(remoteDataSources);
- const dataResponses = await Promise.all([customDataRequest, ...remoteDataRequests]);
- dispatch(setMetrics(dataResponses.flat()));
+ const metricsResultSet = await Promise.all([customDataRequest, ...remoteDataRequests]);
+ const metricsResult = metricsResultSet.flat();
+
+ const metricsMapByName = keyBy(metricsResult.flat(), 'id');
+ dispatch(setMetrics(metricsMapByName));
+
+ const sortedIds = sortBy(metricsResult, 'catalog', 'id').map((m) => m.id);
+ dispatch(setSortedIds(sortedIds));
};
const fetchCustomMetrics = async () => {
@@ -103,20 +113,29 @@ const fetchRemoteMetrics = async (remoteDataSources: string[]): Promise =>
);
};
-const updateLayoutBySelection = (state: any, newMetric: any) => {
- const newDimensions = getNewVizDimensions(state.metricsLayout);
-
- const metricVisualization: MetricType = {
- id: newMetric.id,
- savedVisualizationId: newMetric.id,
- x: newDimensions.x,
- y: newDimensions.y,
- h: newDimensions.h,
- w: newDimensions.w,
- metricType:
- newMetric.catalog === OBSERVABILITY_CUSTOM_METRIC ? 'savedCustomMetric' : 'prometheusMetric',
- };
- state.metricsLayout = [...state.metricsLayout, metricVisualization];
+export const getMetricVisDimensions = (index) => ({
+ x: 0,
+ y: DEFAULT_METRIC_HEIGHT * index,
+ w: DEFAULT_METRIC_WIDTH,
+ h: DEFAULT_METRIC_HEIGHT,
+});
+
+// const updateGridItemDimensions = (curLayout, index) => {
+// const newDimensions = getMetricVisDimensions(index);
+
+// return {
+// ...curLayout,
+// x: newDimensions.x,
+// y: newDimensions.y,
+// h: newDimensions.h,
+// w: newDimensions.w,
+// };
+// };
+
+const defaultMetricQuery = {
+ aggregation: 'avg',
+ attributesGroupBy: [],
+ availableAttributes: [],
};
const updateLayoutByDeSelection = (state: any, newMetric: any) => {
@@ -143,22 +162,45 @@ export const metricSlice = createSlice({
setMetrics: (state, { payload }) => {
state.metrics = payload;
},
- selectMetric: (state, { payload }) => {
- state.selected.push(payload.id);
- updateLayoutBySelection(state, payload);
+ setSortedIds: (state, { payload }) => {
+ state.sortedIds = payload;
+ },
+
+ selectMetric: (state, { payload: id }) => {
+ state.selected.push(id);
},
+
deSelectMetric: (state, { payload }) => {
- updateLayoutByDeSelection(state, payload);
state.selected = state.selected.filter((id) => id !== payload.id);
},
+
setSearch: (state, { payload }) => {
state.search = payload;
},
- updateMetricsLayout: (state, { payload }) => {
- state.metricsLayout = payload;
- state.selected = sortBy(payload, ['x', 'y']).map(({ id }) => id);
+ updateMetric: (state, { payload }) => {
+ const newMetricValue = payload;
+ state.metrics = state.metrics.map((metric) => {
+ if (metric.id === newMetricValue.id) {
+ return newMetricValue;
+ } else {
+ return metric;
+ }
+ });
+ },
+
+ updateMetric: (state, { payload: metric }) => {
+ state.metrics[metric.id] = metric;
+ },
+
+ setMetricSelectedAttributes: (state, { payload }) => {
+ const { visualizationId, attributesGroupBy } = payload;
+ const metric: MetricType = state.metricsLayout.find(
+ (layout) => layout.id === visualizationId
+ );
+ metric.query.attributesGroupBy = attributesGroupBy;
},
+
setDataSources: (state, { payload }) => {
state.dataSources = [OBSERVABILITY_CUSTOM_METRIC, ...payload];
},
@@ -172,26 +214,96 @@ export const metricSlice = createSlice({
});
export const {
- setMetrics,
deSelectMetric,
selectMetric,
- updateMetricsLayout,
setSearch,
setDataSources,
setDataSourceTitles,
setDataSourceIcons,
+ setMetricSelectedAttributes,
} = metricSlice.actions;
-export const availableMetricsSelector = (state) =>
- state.metrics.metrics
- .filter((metric) => !state.metrics.selected.includes(metric.id))
- .filter(
- (metric) =>
- state.metrics.search === '' || metric.name.match(new RegExp(state.metrics.search, 'i'))
- );
+// private redux actions
+const { updateMetric, setMetrics, setSortedIds } = metricSlice.actions;
+
+const getAvailableAttributes = async (metric) => {
+ const { pplService } = coreRefs;
+ // const { setToast } = useToast();
+
+ if (metric.catalog === OBSERVABILITY_CUSTOM_METRIC) return;
+ if (metric.query.availableAttributes.length > 0) return;
+
+ try {
+ const columnSchema = await pplService.fetch({
+ query: 'describe ' + metric.id + ' | fields COLUMN_NAME',
+ format: 'jdbc',
+ });
+ console.log('columnSchema', columnSchema);
+ const columns = columnSchema.datarows.flat().filter((col) => col[0] !== '@');
+
+ console.log('getAvailableAttributes', columns);
+ return columns;
+ } catch (e) {
+ // setToast(`An error occurred retrieving attributes for metric ${metric.id} `, 'danger');
+ console.error(`An error occurred retrieving attributes for metric ${metric.id} `, e);
+ }
+};
+
+const updateLayoutBySelection = (metric: any, gridLayoutLength: number) => {
+ metric.layout = getMetricVisDimensions(gridLayoutLength);
+};
+
+const initializeMetricQuery = async (metric) => {
+ if (metric.query) return;
+ metric.query = { ...defaultMetricQuery };
+ metric.query.availableAttributes = await getAvailableAttributes(metric);
+};
+
+export const addSelectedMetric = (id) => async (dispatch, getState) => {
+ const metric = { ...getState().metrics.metrics[id] };
+
+ await initializeMetricQuery(metric);
+ updateLayoutBySelection(metric, getState().metrics.selected.length);
+ console.log('addSelectedMetric', metric);
+ dispatch(updateMetric(metric));
+ dispatch(selectMetric(id));
+};
+
+export const updateMetricQuery = (visualizationId, { aggregation, attributesGroupBy }) => (
+ dispatch,
+ getState
+) => {
+ const state = getState();
+ const updatedLayout = state.metrics.metricsLayout.map((metricLayout) =>
+ metricLayout.id === visualizationId
+ ? {
+ ...metricLayout,
+ query: {
+ ...metricLayout.query,
+ aggregation: aggregation || metricLayout.query.aggregation,
+ attributesGroupBy: attributesGroupBy || metricLayout.query.attributesGroupBy,
+ },
+ }
+ : metricLayout
+ );
+ dispatch(updateMetricsLayout(updatedLayout));
+};
+
+export const searchOrTrue = (search, metric) => {
+ if (search === '') return true;
+ return metric.name.match(new RegExp(search, 'i'));
+};
+
+export const availableMetricsSelector = (state) => {
+ console.log('availableMetricsSelector', state.metrics.search);
+ return state.metrics.sortedIds
+ .filter((id) => !state.metrics.selected.includes(id))
+ .filter((id) => searchOrTrue(state.metrics.search, state.metrics.metrics[id]))
+ .map((id) => state.metrics.metrics[id]);
+};
export const selectedMetricsSelector = (state) =>
- state.metrics.selected.map((id) => state.metrics.metrics.find((metric) => metric.id === id));
+ state.metrics.selected.map((id) => state.metrics.metrics[id]);
export const searchSelector = (state) => state.metrics.search;
@@ -199,6 +311,13 @@ export const metricIconsSelector = (state) => state.metrics.dataSourceIcons;
export const metricsLayoutSelector = (state) => state.metrics.metricsLayout;
+export const metricQuerySelector = (id) => (state) =>
+ state.metrics.metricsLayout.find((layout) => layout.id === id)?.query || {
+ aggregation: '',
+ attributesGroupBy: [],
+ availableAttributes: [],
+ };
+
export const dataSourcesSelector = (state) => state.metrics.dataSources;
export const metricsReducers = metricSlice.reducer;
diff --git a/public/components/metrics/sidebar/metrics_edit_inline.tsx b/public/components/metrics/sidebar/metrics_edit_inline.tsx
new file mode 100644
index 0000000000..cb66309b20
--- /dev/null
+++ b/public/components/metrics/sidebar/metrics_edit_inline.tsx
@@ -0,0 +1,96 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useEffect, useState } from 'react';
+import {
+ EuiComboBox,
+ EuiFormControlLayout,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiFormLabel,
+ EuiSelect,
+} from '@elastic/eui';
+import { useDispatch, useSelector } from 'react-redux';
+import { AGGREGATION_OPTIONS } from '../../../../common/constants/metrics';
+import {
+ metricQuerySelector,
+ setMetricSelectedAttributes,
+ updateMetricQuery,
+} from '../redux/slices/metrics_slice';
+
+const useObservable = (observable, observer, deps) => {
+ // useEffect with empty deps will call this only once
+ useEffect(() => {
+ const sub = observable.subscribe(observer); // connect
+ return () => sub.unsubscribe(); // < unsub on unmount
+ }, deps);
+};
+
+export const MetricsEditInline = ({ visualizationId }: { visualizationId: string }) => {
+ const [aggregationIsOpen, setAggregationIsOpen] = useState(false);
+ const [attributesGroupByIsOpen, setAttributesGroupByIsOpen] = useState(false);
+
+ const dispatch = useDispatch();
+
+ const query = useSelector(metricQuerySelector(visualizationId));
+
+ const availableAttributesLabels = query.availableAttributes.map((attribute) => ({
+ label: attribute,
+ name: attribute,
+ }));
+
+ const onChangeAggregation = (e) => {
+ dispatch(updateMetricQuery(visualizationId, { aggregation: e.target.value }));
+ setAggregationIsOpen(false);
+ };
+
+ const onChangeAttributesGroupBy = async (selectedAttributes) => {
+ console.log('onChangeAttributes', selectedAttributes);
+ const attributesGroupBy = selectedAttributes.map(({ label }) => label);
+ dispatch(setMetricSelectedAttributes({ visualizationId, attributesGroupBy }));
+
+ setAttributesGroupByIsOpen(false);
+ };
+
+ const renderAggregationEditor = () => (
+
+
+
+
+
+ );
+
+ const renderAttributesGroupByEditor = () => (
+ ATTRIBUTES GROUP BY}
+ >
+ ({ label, value: label }))}
+ onChange={onChangeAttributesGroupBy}
+ options={availableAttributesLabels}
+ prepend={'ATTRIBUTES GROUP BY'}
+ />
+
+ );
+
+ return (
+
+ {renderAggregationEditor()}
+ {renderAttributesGroupByEditor()}
+
+ );
+};
diff --git a/public/components/metrics/sidebar/sidebar.tsx b/public/components/metrics/sidebar/sidebar.tsx
index 22bbbaadc0..275bee7825 100644
--- a/public/components/metrics/sidebar/sidebar.tsx
+++ b/public/components/metrics/sidebar/sidebar.tsx
@@ -5,7 +5,7 @@
import './sidebar.scss';
-import React, { useEffect } from 'react';
+import React, { useContext, useEffect } from 'react';
import { EuiSpacer } from '@elastic/eui';
import { I18nProvider } from '@osd/i18n/react';
import { batch, useDispatch, useSelector } from 'react-redux';
@@ -15,11 +15,13 @@ import {
selectMetric,
loadMetrics,
selectedMetricsSelector,
+ addSelectedMetric,
} from '../redux/slices/metrics_slice';
import { CoreStart } from '../../../../../../src/core/public';
import PPLService from '../../../services/requests/ppl';
import { MetricsAccordion } from './metrics_accordion';
import { SearchBar } from './search_bar';
+import { MetricsLayoutContext } from '../index';
export const Sidebar = () => {
const dispatch = useDispatch();
@@ -27,14 +29,18 @@ export const Sidebar = () => {
const availableMetrics = useSelector(availableMetricsSelector);
const selectedMetrics = useSelector(selectedMetricsSelector);
+ const { addToLayout } = useContext(MetricsLayoutContext);
+
useEffect(() => {
batch(() => {
dispatch(loadMetrics());
});
}, [dispatch]);
- const handleAddMetric = (metric: any) => dispatch(selectMetric(metric));
-
+ const handleAddMetric = (metric: any) => {
+ addToLayout(metric.id);
+ dispatch(addSelectedMetric(metric.id));
+ };
const handleRemoveMetric = (metric: any) => {
dispatch(deSelectMetric(metric));
};
diff --git a/public/components/metrics/top_menu/__tests__/__snapshots__/metrics_export_panel.test.tsx.snap b/public/components/metrics/top_menu/__tests__/__snapshots__/metrics_export_panel.test.tsx.snap
index ab196dcedb..b37e5a422a 100644
--- a/public/components/metrics/top_menu/__tests__/__snapshots__/metrics_export_panel.test.tsx.snap
+++ b/public/components/metrics/top_menu/__tests__/__snapshots__/metrics_export_panel.test.tsx.snap
@@ -22,7 +22,11 @@ exports[`Export Metrics Panel Component renders Export Metrics Panel Component 1
Object {
"h": 2,
"id": "Y4muP4QBiaYaSxpXk7r8",
- "metricType": "savedCustomMetric",
+ "query": Object {
+ "aggregation": "avg",
+ "attributesGroupBy": Array [],
+ "type": "savedCustomMetric",
+ },
"savedVisualizationId": "Y4muP4QBiaYaSxpXk7r8",
"w": 12,
"x": 0,
@@ -31,7 +35,11 @@ exports[`Export Metrics Panel Component renders Export Metrics Panel Component 1
Object {
"h": 2,
"id": "prometheus.process_resident_memory_bytes",
- "metricType": "prometheusMetric",
+ "query": Object {
+ "aggregation": "avg",
+ "attributesGroupBy": Array [],
+ "type": "prometheusMetric",
+ },
"savedVisualizationId": "prometheus.process_resident_memory_bytes",
"w": 12,
"x": 0,
diff --git a/public/components/metrics/view/metrics_grid.tsx b/public/components/metrics/view/metrics_grid.tsx
index edb68ba8b0..07f219b77d 100644
--- a/public/components/metrics/view/metrics_grid.tsx
+++ b/public/components/metrics/view/metrics_grid.tsx
@@ -3,50 +3,50 @@
* SPDX-License-Identifier: Apache-2.0
*/
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
import { Layout, Layouts, Responsive, WidthProvider } from 'react-grid-layout';
import { useObservable } from 'react-use';
import _ from 'lodash';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
import { CoreStart } from '../../../../../../src/core/public';
import { VisualizationContainer } from '../../custom_panels/panel_modules/visualization_container';
import { MetricType } from '../../../../common/types/metrics';
import { mergeLayoutAndVisualizations } from '../../custom_panels/helpers/utils';
-import { updateMetricsLayout, deSelectMetric } from '../redux/slices/metrics_slice';
+import {
+ updateMetricsLayout,
+ deSelectMetric,
+ selectedMetricsSelector,
+ getMetricVisDimensions,
+ metricIconsSelector,
+} from '../redux/slices/metrics_slice';
import { mergeLayoutAndMetrics } from '../helpers/utils';
import './metrics_grid.scss';
+import { coreRefs } from '../../../framework/core_refs';
+import { MetricsLayoutContext } from '../index';
+import { OBSERVABILITY_CUSTOM_METRIC } from '../../../../common/constants/metrics';
// HOC container to provide dynamic width for Grid layout
const ResponsiveGridLayout = WidthProvider(Responsive);
interface MetricsGridProps {
chrome: CoreStart['chrome'];
- panelVisualizations: MetricType[];
- setPanelVisualizations: React.Dispatch>;
- editMode: boolean;
startTime: string;
endTime: string;
moveToEvents: (savedVisualizationId: string) => any;
onRefresh: boolean;
- editActionType: string;
- setEditActionType: React.Dispatch>;
spanParam: string;
}
export const MetricsGrid = ({
chrome,
- panelVisualizations,
- setPanelVisualizations,
- editMode,
startTime,
endTime,
moveToEvents,
onRefresh,
- editActionType,
- setEditActionType,
spanParam,
}: MetricsGridProps) => {
+ const { http, pplService } = coreRefs;
// Redux tools
const dispatch = useDispatch();
const updateLayout = (metric: any) => dispatch(updateMetricsLayout(metric));
@@ -54,91 +54,117 @@ export const MetricsGrid = ({
dispatch(deSelectMetric(metric));
};
- const [currentLayout, setCurrentLayout] = useState([]);
- const [postEditLayout, setPostEditLayout] = useState([]);
- const [gridData, setGridData] = useState(panelVisualizations.map(() => <>));
- const [removeMetricsList, setRemoveMetricsList] = useState>([]);
+ const selectedMetrics = useSelector(selectedMetricsSelector);
+
+ // const { layout } = useContext(MetricsLayoutContext);
+
+ const [previousEditLayout, setPreviousEditLayout] = useState([]);
+
const isLocked = useObservable(chrome.getIsNavDrawerLocked$());
// Reset Size of Visualizations when layout is changed
const layoutChanged = (currLayouts: Layout[], allLayouts: Layouts) => {
window.dispatchEvent(new Event('resize'));
- setPostEditLayout(currLayouts);
+ // setPostEditLayout(currLayouts);
};
- const loadVizComponents = () => {
- const gridDataComps = panelVisualizations.map((panelVisualization: MetricType, index) => (
-
- ));
- setGridData(gridDataComps);
- };
+ const removeVisualization = () => {};
+
+ const visualizationComponents = useMemo(
+ () =>
+ selectedMetrics.map((metricPanel, index) => {
+ return (
+
+ );
+ }),
+ [selectedMetrics, onRefresh]
+ );
- // Reload the Layout
- const reloadLayout = () => {
- const tempLayout: Layout[] = panelVisualizations.map((panelVisualization) => {
- return {
- i: panelVisualization.id,
- x: panelVisualization.x,
- y: panelVisualization.y,
- w: panelVisualization.w,
- h: panelVisualization.h,
+ const layout = useMemo(
+ () =>
+ selectedMetrics.map((metric) => ({
+ ...metric.layout,
+ id: metric.id,
minW: 12, // restricting width of the metric visualization
maxW: 12,
- static: !editMode,
- } as Layout;
- });
- setCurrentLayout(tempLayout);
- };
-
- // remove visualization from panel in edit mode
- const removeVisualization = (visualizationId: string) => {
- const newVisualizationList = _.reject(panelVisualizations, {
- id: visualizationId,
- });
- setRemoveMetricsList([...removeMetricsList, { id: visualizationId }]);
- mergeLayoutAndVisualizations(postEditLayout, newVisualizationList, setPanelVisualizations);
- };
-
- // Update layout whenever user edit gets completed
+ static: true,
+ })),
+ [selectedMetrics]
+ );
useEffect(() => {
- if (editMode) {
- reloadLayout();
- loadVizComponents();
- }
- }, [editMode]);
+ console.log('MetricsGrid useEffect layout', { layout });
+ }, [layout]);
+
+ // // Reload the Layout
+ // const reloadLayout = () => {
+ // const tempLayout: Layout[] = panelVisualizations.map((panelVisualization) => {
+ // return {
+ // i: panelVisualization.id,
+ // x: panelVisualization.x,
+ // y: panelVisualization.y,
+ // w: panelVisualization.w,
+ // h: panelVisualization.h,
+ // minW: 12, // restricting width of the metric visualization
+ // maxW: 12,
+ // static: !editMode,
+ // } as Layout;
+ // });
+ // setCurrentLayout(tempLayout);
+ // };
- useEffect(() => {
- if (editActionType === 'cancel') {
- setRemoveMetricsList([]);
- }
- if (editActionType === 'save') {
- removeMetricsList.map((value) => handleRemoveMetric(value));
- updateLayout(mergeLayoutAndMetrics(postEditLayout, panelVisualizations));
- setEditActionType('');
- }
- }, [editActionType]);
-
- // Update layout whenever visualizations are updated
- useEffect(() => {
- reloadLayout();
- loadVizComponents();
- }, [panelVisualizations]);
+ // remove visualization from panel in edit mode
+ // const removeVisualization = (visualizationId: string) => {
+ // const newVisualizationList = _.reject(panelVisualizations, {
+ // id: visualizationId,
+ // });
+ // setRemoveMetricsList([...removeMetricsList, { id: visualizationId }]);
+ // mergeLayoutAndVisualizations(postEditLayout, newVisualizationList, setPanelVisualizations);
+ // };
+ //
+ // // Update layout whenever user edit gets completed
+ // useEffect(() => {
+ // if (editMode) {
+ // reloadLayout();
+ // loadVizComponents();
+ // }
+ // }, [editMode, reloadLayout, loadVizComponents]);
+ //
+ // useEffect(() => {
+ // if (editActionType === 'cancel') {
+ // setRemoveMetricsList([]);
+ // }
+ // if (editActionType === 'save') {
+ // removeMetricsList.map((value) => handleRemoveMetric(value));
+ // updateLayout(mergeLayoutAndMetrics(postEditLayout, panelVisualizations));
+ // setEditActionType('');
+ // }
+ // }, [
+ // editActionType,
+ // handleRemoveMetric,
+ // postEditLayout,
+ // removeMetricsList,
+ // panelVisualizations,
+ // setEditActionType,
+ // ]);
+ //
+ // // Update layout whenever visualizations are updated
+ // useEffect(() => {
+ // reloadLayout();
+ // loadVizComponents();
+ // }, [panelVisualizations, reloadLayout, loadVizComponents]);
// Reset Size of Panel Grid when Nav Dock is Locked
useEffect(() => {
@@ -147,25 +173,23 @@ export const MetricsGrid = ({
}, 300);
}, [isLocked]);
- useEffect(() => {
- loadVizComponents();
- }, [onRefresh]);
+ // useEffect(() => {
+ // loadVizComponents();
+ // }, [onRefresh]);
- useEffect(() => {
- loadVizComponents();
- }, []);
+ // useEffect(() => {
+ // loadVizComponents();
+ // }, []);
return (
- {panelVisualizations.map((panelVisualization: MetricType, index) => (
- {gridData[index]}
- ))}
+ {visualizationComponents}
);
};
diff --git a/public/components/notebooks/components/paragraph_components/para_output.tsx b/public/components/notebooks/components/paragraph_components/para_output.tsx
index d0d6f5ad1c..984062150f 100644
--- a/public/components/notebooks/components/paragraph_components/para_output.tsx
+++ b/public/components/notebooks/components/paragraph_components/para_output.tsx
@@ -153,6 +153,7 @@ export const ParaOutput = (props: {
onRefresh={false}
pplFilterValue={''}
usedInNotebooks={true}
+ contextMenuId="notebook"
/>
diff --git a/public/components/notebooks/components/paragraph_components/para_query_grid.tsx b/public/components/notebooks/components/paragraph_components/para_query_grid.tsx
index 8b8425278f..07b4e553a7 100644
--- a/public/components/notebooks/components/paragraph_components/para_query_grid.tsx
+++ b/public/components/notebooks/components/paragraph_components/para_query_grid.tsx
@@ -5,49 +5,41 @@
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import $ from 'jquery';
-import {
- EuiDataGrid,
- EuiLoadingSpinner,
- EuiSpacer
-} from '@elastic/eui';
+import { EuiDataGrid, EuiLoadingSpinner, EuiSpacer } from '@elastic/eui';
+import { Dispatch } from 'react';
+import { SetStateAction } from 'react';
-type QueryDataGridProps = {
- rowCount: number,
- queryColumns: Array
,
- visibleColumns: Array,
- setVisibleColumns: (visibleColumns: string[]) => void,
- dataValues: Array,
+interface QueryDataGridProps {
+ rowCount: number;
+ queryColumns: any[];
+ visibleColumns: any[];
+ setVisibleColumns: Dispatch>>;
+ dataValues: any[];
}
-type RenderCellValueProps = {
- rowIndex: number,
- columnId: string
+interface RenderCellValueProps {
+ rowIndex: number;
+ columnId: string;
}
function QueryDataGrid(props: QueryDataGridProps) {
- const {
- rowCount,
- queryColumns,
- visibleColumns,
- setVisibleColumns,
- dataValues,
- } = props;
+ const { rowCount, queryColumns, visibleColumns, setVisibleColumns, dataValues } = props;
const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
// ** Sorting config
const [sortingColumns, setSortingColumns] = useState([]);
const [isVisible, setIsVisible] = useState(false);
const onSort = useCallback(
- (sortingColumns) => {
- setSortingColumns(sortingColumns);
+ (newColumns) => {
+ setSortingColumns(newColumns);
},
[setSortingColumns]
);
const onChangeItemsPerPage = useCallback(
(pageSize) =>
- setPagination((pagination) => ({
- ...pagination,
+ setPagination((currentPagination) => ({
+ ...currentPagination,
pageSize,
pageIndex: 0,
})),
@@ -55,28 +47,24 @@ function QueryDataGrid(props: QueryDataGridProps) {
);
const onChangePage = useCallback(
- (pageIndex) =>
- setPagination((pagination) => ({ ...pagination, pageIndex })),
+ (pageIndex) => setPagination((currentPagination) => ({ ...currentPagination, pageIndex })),
[setPagination]
);
const renderCellValue = useMemo(() => {
return ({ rowIndex, columnId }: RenderCellValueProps) => {
- return dataValues.hasOwnProperty(rowIndex)
- ? dataValues[rowIndex][columnId]
- : null;
+ return dataValues.hasOwnProperty(rowIndex) ? dataValues[rowIndex][columnId] : null;
};
- }, []);
+ }, [dataValues]);
- const getUpdatedVisibleColumns = (queryColumns: Array