[SLO] adjust burn rate rule number selector for budget consumed and b…

…urn rate threshold (#172526)

## Summary

Resolves #172400

Adjusts the burn rate rule budget consumed and burn rate threshold text
box to format only on blur.

Removes the dependency on numeral in favor of using `toFixed`.

### Testing

In order to test, you'll need to create a SLO burn rate rule. 

If you currently have SLOs set up, you can either do so by going to the
observability rules management page and selecting the SLO burn rate
rule.

If you do not have SLOs set up, you can go to the SLO page, create an
SLI and make sure the `create burn rate rule` checkbox is checked. The
rule creation flyout will then appear.

In the burn rate windows, ensure that you are able to change the burn
rate threshold or budget consumed easily. When the field is blurred, the
value should be formatted.

Co-authored-by: Shahzad <[email protected]>

x-pack/plugins/observability/public/components/burn_rate_rule_editor/budget_consumed.tsx

@@ -8,7 +8,6 @@
 import { EuiFieldNumber, EuiFormRow, EuiIconTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { ChangeEvent, useState } from 'react';
-import numeral from '@elastic/numeral';
 
 interface Props {
   initialBurnRate?: number;
@@ -28,6 +27,7 @@ export function BudgetConsumed({
   const [budgetConsumed, setBudgetConsumed] = useState<number>(
     ((initialBurnRate * longLookbackWindowInHours) / sloTimeWindowInHours) * 100
   );
+  const [formattedValue, setFormattedValue] = useState<string>(budgetConsumed.toFixed(2));
   const hasError = errors !== undefined && errors.length > 0;
 
   const onBudgetConsumedChanged = (event: ChangeEvent<HTMLInputElement>) => {
@@ -60,8 +60,15 @@ export function BudgetConsumed({
         step={0.01}
         min={0.01}
         max={100}
-        value={numeral(budgetConsumed).format('0[.0]')}
-        onChange={(event) => onBudgetConsumedChanged(event)}
+        value={formattedValue}
+        onChange={(event) => {
+          onBudgetConsumedChanged(event);
+          setFormattedValue(event.target.value);
+        }}
+        onBlur={(event) => {
+          const value = event.target.value;
+          setFormattedValue(Number(value).toFixed(2));
+        }}
         data-test-subj="budgetConsumed"
       />
     </EuiFormRow>

x-pack/plugins/observability/public/components/burn_rate_rule_editor/burn_rate.tsx

@@ -8,7 +8,6 @@
 import { EuiFieldNumber, EuiFormRow, EuiIconTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { ChangeEvent, useState } from 'react';
-import numeral from '@elastic/numeral';
 
 interface Props {
   initialBurnRate?: number;
@@ -20,6 +19,7 @@ interface Props {
 export function BurnRate({ onChange, initialBurnRate = 1, maxBurnRate, errors }: Props) {
   const [burnRate, setBurnRate] = useState<number>(initialBurnRate);
   const hasError = errors !== undefined && errors.length > 0;
+  const [formattedValue, setFormattedValue] = useState<string>(burnRate.toFixed(2));
 
   const onBurnRateChange = (event: ChangeEvent<HTMLInputElement>) => {
     const value = Number(event.target.value);
@@ -51,8 +51,15 @@ export function BurnRate({ onChange, initialBurnRate = 1, maxBurnRate, errors }:
         step={0.01}
         min={0.01}
         max={maxBurnRate}
-        value={numeral(burnRate).format('0[.0]')}
-        onChange={(event) => onBurnRateChange(event)}
+        value={formattedValue}
+        onChange={(event) => {
+          onBurnRateChange(event);
+          setFormattedValue(event.target.value);
+        }}
+        onBlur={(event) => {
+          const value = event.target.value;
+          setFormattedValue(Number(value).toFixed(2));
+        }}
         data-test-subj="burnRate"
       />
     </EuiFormRow>