[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:
Chris Cowan 2020-11-18 08:28:16 -07:00 committed by GitHub
parent 69e3ceb474
commit cc0d6c1b1f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 20 additions and 11 deletions

View file

@ -16,7 +16,7 @@ import { PageContent } from '../../../../components/page';
import { useSnapshot } from '../hooks/use_snaphot';
import { useWaffleTimeContext } from '../hooks/use_waffle_time';
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 { InfraFormatterType } from '../../../../lib/lib';
import { euiStyled } from '../../../../../../observability/public';
@ -62,10 +62,14 @@ export const Layout = () => {
false
);
const legendPalette = legend?.palette ?? DEFAULT_LEGEND.palette;
const legendSteps = legend?.steps ?? DEFAULT_LEGEND.steps;
const legendReverseColors = legend?.reverseColors ?? DEFAULT_LEGEND.reverseColors;
const options = {
formatter: InfraFormatterType.percent,
formatTemplate: '{{value}}',
legend: createLegend(legend.palette, legend.steps, legend.reverseColors),
legend: createLegend(legendPalette, legendSteps, legendReverseColors),
metric,
sort,
fields: source?.configuration?.fields,

View file

@ -17,7 +17,11 @@ import {
import { GradientLegend } from './gradient_legend';
import { LegendControls } from './legend_controls';
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';
interface Props {
legend: InfraWaffleMapLegend;
@ -52,7 +56,7 @@ export const Legend: React.FC<Props> = ({ dataBounds, legend, bounds, formatter
return (
<LegendContainer>
<LegendControls
options={legendOptions}
options={legendOptions != null ? legendOptions : DEFAULT_LEGEND}
dataBounds={dataBounds}
bounds={bounds}
autoBounds={autoBounds}

View file

@ -23,6 +23,12 @@ import {
import { useUrlState } from '../../../../utils/use_url_state';
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 = {
metric: { type: 'cpu' },
groupBy: [],
@ -34,11 +40,7 @@ export const DEFAULT_WAFFLE_OPTIONS_STATE: WaffleOptionsState = {
accountId: '',
region: '',
customMetrics: [],
legend: {
palette: 'cool',
steps: 10,
reverseColors: false,
},
legend: DEFAULT_LEGEND,
source: 'default',
sort: { by: 'name', direction: 'desc' },
};
@ -183,10 +185,9 @@ export const WaffleOptionsStateRT = rt.intersection([
accountId: rt.string,
region: rt.string,
customMetrics: rt.array(SnapshotCustomMetricInputRT),
legend: WaffleLegendOptionsRT,
sort: WaffleSortOptionRT,
}),
rt.partial({ source: rt.string }),
rt.partial({ source: rt.string, legend: WaffleLegendOptionsRT }),
]);
export type WaffleSortOption = rt.TypeOf<typeof WaffleSortOptionRT>;