[Metrics UI] Converting legend key to optional (#83495)
* [Metrics UI] Converting legend key to optional * Adding check and default to legend component
This commit is contained in:
parent
69e3ceb474
commit
cc0d6c1b1f
|
@ -16,7 +16,7 @@ import { PageContent } from '../../../../components/page';
|
||||||
import { useSnapshot } from '../hooks/use_snaphot';
|
import { useSnapshot } from '../hooks/use_snaphot';
|
||||||
import { useWaffleTimeContext } from '../hooks/use_waffle_time';
|
import { useWaffleTimeContext } from '../hooks/use_waffle_time';
|
||||||
import { useWaffleFiltersContext } from '../hooks/use_waffle_filters';
|
import { useWaffleFiltersContext } from '../hooks/use_waffle_filters';
|
||||||
import { useWaffleOptionsContext } from '../hooks/use_waffle_options';
|
import { DEFAULT_LEGEND, useWaffleOptionsContext } from '../hooks/use_waffle_options';
|
||||||
import { useSourceContext } from '../../../../containers/source';
|
import { useSourceContext } from '../../../../containers/source';
|
||||||
import { InfraFormatterType } from '../../../../lib/lib';
|
import { InfraFormatterType } from '../../../../lib/lib';
|
||||||
import { euiStyled } from '../../../../../../observability/public';
|
import { euiStyled } from '../../../../../../observability/public';
|
||||||
|
@ -62,10 +62,14 @@ export const Layout = () => {
|
||||||
false
|
false
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const legendPalette = legend?.palette ?? DEFAULT_LEGEND.palette;
|
||||||
|
const legendSteps = legend?.steps ?? DEFAULT_LEGEND.steps;
|
||||||
|
const legendReverseColors = legend?.reverseColors ?? DEFAULT_LEGEND.reverseColors;
|
||||||
|
|
||||||
const options = {
|
const options = {
|
||||||
formatter: InfraFormatterType.percent,
|
formatter: InfraFormatterType.percent,
|
||||||
formatTemplate: '{{value}}',
|
formatTemplate: '{{value}}',
|
||||||
legend: createLegend(legend.palette, legend.steps, legend.reverseColors),
|
legend: createLegend(legendPalette, legendSteps, legendReverseColors),
|
||||||
metric,
|
metric,
|
||||||
sort,
|
sort,
|
||||||
fields: source?.configuration?.fields,
|
fields: source?.configuration?.fields,
|
||||||
|
|
|
@ -17,7 +17,11 @@ import {
|
||||||
import { GradientLegend } from './gradient_legend';
|
import { GradientLegend } from './gradient_legend';
|
||||||
import { LegendControls } from './legend_controls';
|
import { LegendControls } from './legend_controls';
|
||||||
import { StepLegend } from './steps_legend';
|
import { StepLegend } from './steps_legend';
|
||||||
import { useWaffleOptionsContext, WaffleLegendOptions } from '../../hooks/use_waffle_options';
|
import {
|
||||||
|
DEFAULT_LEGEND,
|
||||||
|
useWaffleOptionsContext,
|
||||||
|
WaffleLegendOptions,
|
||||||
|
} from '../../hooks/use_waffle_options';
|
||||||
import { SteppedGradientLegend } from './stepped_gradient_legend';
|
import { SteppedGradientLegend } from './stepped_gradient_legend';
|
||||||
interface Props {
|
interface Props {
|
||||||
legend: InfraWaffleMapLegend;
|
legend: InfraWaffleMapLegend;
|
||||||
|
@ -52,7 +56,7 @@ export const Legend: React.FC<Props> = ({ dataBounds, legend, bounds, formatter
|
||||||
return (
|
return (
|
||||||
<LegendContainer>
|
<LegendContainer>
|
||||||
<LegendControls
|
<LegendControls
|
||||||
options={legendOptions}
|
options={legendOptions != null ? legendOptions : DEFAULT_LEGEND}
|
||||||
dataBounds={dataBounds}
|
dataBounds={dataBounds}
|
||||||
bounds={bounds}
|
bounds={bounds}
|
||||||
autoBounds={autoBounds}
|
autoBounds={autoBounds}
|
||||||
|
|
|
@ -23,6 +23,12 @@ import {
|
||||||
import { useUrlState } from '../../../../utils/use_url_state';
|
import { useUrlState } from '../../../../utils/use_url_state';
|
||||||
import { InventoryItemType, ItemTypeRT } from '../../../../../common/inventory_models/types';
|
import { InventoryItemType, ItemTypeRT } from '../../../../../common/inventory_models/types';
|
||||||
|
|
||||||
|
export const DEFAULT_LEGEND: WaffleLegendOptions = {
|
||||||
|
palette: 'cool',
|
||||||
|
steps: 10,
|
||||||
|
reverseColors: false,
|
||||||
|
};
|
||||||
|
|
||||||
export const DEFAULT_WAFFLE_OPTIONS_STATE: WaffleOptionsState = {
|
export const DEFAULT_WAFFLE_OPTIONS_STATE: WaffleOptionsState = {
|
||||||
metric: { type: 'cpu' },
|
metric: { type: 'cpu' },
|
||||||
groupBy: [],
|
groupBy: [],
|
||||||
|
@ -34,11 +40,7 @@ export const DEFAULT_WAFFLE_OPTIONS_STATE: WaffleOptionsState = {
|
||||||
accountId: '',
|
accountId: '',
|
||||||
region: '',
|
region: '',
|
||||||
customMetrics: [],
|
customMetrics: [],
|
||||||
legend: {
|
legend: DEFAULT_LEGEND,
|
||||||
palette: 'cool',
|
|
||||||
steps: 10,
|
|
||||||
reverseColors: false,
|
|
||||||
},
|
|
||||||
source: 'default',
|
source: 'default',
|
||||||
sort: { by: 'name', direction: 'desc' },
|
sort: { by: 'name', direction: 'desc' },
|
||||||
};
|
};
|
||||||
|
@ -183,10 +185,9 @@ export const WaffleOptionsStateRT = rt.intersection([
|
||||||
accountId: rt.string,
|
accountId: rt.string,
|
||||||
region: rt.string,
|
region: rt.string,
|
||||||
customMetrics: rt.array(SnapshotCustomMetricInputRT),
|
customMetrics: rt.array(SnapshotCustomMetricInputRT),
|
||||||
legend: WaffleLegendOptionsRT,
|
|
||||||
sort: WaffleSortOptionRT,
|
sort: WaffleSortOptionRT,
|
||||||
}),
|
}),
|
||||||
rt.partial({ source: rt.string }),
|
rt.partial({ source: rt.string, legend: WaffleLegendOptionsRT }),
|
||||||
]);
|
]);
|
||||||
|
|
||||||
export type WaffleSortOption = rt.TypeOf<typeof WaffleSortOptionRT>;
|
export type WaffleSortOption = rt.TypeOf<typeof WaffleSortOptionRT>;
|
||||||
|
|
Loading…
Reference in a new issue