[Metrics UI] Converting legend key to optional (elastic#83495) (elast…

…ic#83649)

* [Metrics UI] Converting legend key to optional

* Adding check and default to legend component

x-pack/plugins/infra/public/pages/metrics/inventory_view/components/layout.tsx

@@ -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';
@@ -61,10 +61,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,

x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/legend.tsx

@@ -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}

x-pack/plugins/infra/public/pages/metrics/inventory_view/hooks/use_waffle_options.ts

@@ -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>;