Skip to content

Commit

Permalink
Update Metric layout metadata to include query info
Browse files Browse the repository at this point in the history
Update CSS to allow metric-grid to accomodate inline-edit form

Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com>
  • Loading branch information
pjfitzgibbons committed Aug 7, 2023
1 parent 7f11d0e commit 6565805
Show file tree
Hide file tree
Showing 4 changed files with 19 additions and 20 deletions.
11 changes: 5 additions & 6 deletions public/components/custom_panels/helpers/utils.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -381,8 +381,7 @@ export const renderCatalogVisualization = async ({
setIsLoading,
setIsError,
spanResolution,
metricMetaData,
setMetricMetaData,
queryMetaData,
}: {
http: CoreStart['http'];
pplService: PPLService;
Expand All @@ -398,8 +397,7 @@ export const renderCatalogVisualization = async ({
setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
setIsError: React.Dispatch<React.SetStateAction<VizContainerError>>;
spanResolution?: string;
metricMetaData?: MetricType;
setMetricMetaData?: React.Dispatch<React.SetStateAction<MetricType>>;
queryMetaData?: MetricType;
}) => {
setIsLoading(true);
setIsError({} as VizContainerError);
Expand All @@ -415,8 +413,8 @@ export const renderCatalogVisualization = async ({
const visualizationQuery = updateCatalogVisualizationQuery({
catalogSourceName,
catalogTableName,
aggregation: metricMetaData?.query?.aggregation || defaultAggregation,
attributesGroupBy: metricMetaData?.query?.attributesGroupBy || [],
aggregation: queryMetaData.aggregation,
attributesGroupBy: queryMetaData.attributesGroupBy,
startTime,
endTime,
spanParam,
Expand All @@ -434,6 +432,7 @@ export const renderCatalogVisualization = async ({

setVisualizationMetaData({ ...visualizationMetaData, query: visualizationQuery });

console.log('getqueryResponse', visualizationQuery);
getQueryResponse(
pplService,
visualizationQuery,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -56,12 +56,6 @@
}
}

.visualization-div.metricVis {
height: calc(100% - 85px) !important;

}


%center-div {
top: 50%;
left: 50%;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import {
EuiText,
EuiToolTip,
EuiContextMenu,
EuiCode,
} from '@elastic/eui';
import React, { useEffect, useMemo, useState } from 'react';
import _ from 'lodash';
Expand Down Expand Up @@ -311,12 +312,9 @@ export const VisualizationContainer = ({
);
};

const metricVisCss = metricMetaData ? 'metricVis' : '';

const memoisedVisualizationBox = useMemo(
() => (
<div>
<div className={`visualization-div ${metricVisCss}`}>
{isLoading ? (
<EuiLoadingChart size="xl" mono className="visualization-loading-chart" />
) : !_.isEmpty(isError) ? (
Expand Down
18 changes: 13 additions & 5 deletions public/components/metrics/sidebar/metrics_edit_inline.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -75,14 +75,22 @@ export const MetricsEditInline = ({ visualizationId }: { visualizationId: string
);

const renderAttributesGroupByEditor = () => (
<div>
<EuiPopoverTitle>Group By Attributes</EuiPopoverTitle>
<EuiFormControlLayout
readOnly
compressed
fullWidth
prepend={<EuiFormLabel htmlFor="attributeGroupBy">ATTRIBUTES GROUP BY</EuiFormLabel>}
>
<EuiComboBox
className={'attributesGroupBy'}
compressed
onChange={onChangeAggregation}
options={[{ label: 'host' }]}
fullWidth
selectedOptions={query.attributesGroupBy.map((label) => ({ label, value: label }))}
onChange={onChangeAttributesGroupBy}
options={availableAttributesLabels}
prepend={'ATTRIBUTES GROUP BY'}
/>
</div>
</EuiFormControlLayout>
);

return (
Expand Down

0 comments on commit 6565805

Please sign in to comment.