[8.12] [SLO] adjust burn rate rule number selector for budget consume…

…d and burn rate threshold (#172526) (#173067)

# Backport

This will backport the following commits from `main` to `8.12`:
- [[SLO] adjust burn rate rule number selector for budget consumed and
burn rate threshold
(#172526)](#172526)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Dominique
Clarke","email":"[email protected]"},"sourceCommit":{"committedDate":"2023-12-11T14:12:14Z","message":"[SLO]
adjust burn rate rule number selector for budget consumed and burn rate
threshold (#172526)\n\n## Summary\r\n\r\nResolves
https://github.com/elastic/kibana/issues/172400\r\n\r\nAdjusts the burn
rate rule budget consumed and burn rate threshold text\r\nbox to format
only on blur.\r\n\r\nRemoves the dependency on numeral in favor of using
`toFixed`.\r\n\r\n### Testing\r\n\r\nIn order to test, you'll need to
create a SLO burn rate rule. \r\n\r\nIf you currently have SLOs set up,
you can either do so by going to the\r\nobservability rules management
page and selecting the SLO burn rate\r\nrule.\r\n\r\nIf you do not have
SLOs set up, you can go to the SLO page, create an\r\nSLI and make sure
the `create burn rate rule` checkbox is checked. The\r\nrule creation
flyout will then appear.\r\n\r\nIn the burn rate windows, ensure that
you are able to change the burn\r\nrate threshold or budget consumed
easily. When the field is blurred, the\r\nvalue should be
formatted.\r\n\r\nCo-authored-by: Shahzad
<[email protected]>","sha":"134012be32c2ede76ba700a089bee7a2b2afe0cb","branchLabelMapping":{"^v8.13.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:skip","Feature:SLO","v8.12.0","Team:obs-ux-management","v8.13.0"],"number":172526,"url":"https://github.com/elastic/kibana/pull/172526","mergeCommit":{"message":"[SLO]
adjust burn rate rule number selector for budget consumed and burn rate
threshold (#172526)\n\n## Summary\r\n\r\nResolves
https://github.com/elastic/kibana/issues/172400\r\n\r\nAdjusts the burn
rate rule budget consumed and burn rate threshold text\r\nbox to format
only on blur.\r\n\r\nRemoves the dependency on numeral in favor of using
`toFixed`.\r\n\r\n### Testing\r\n\r\nIn order to test, you'll need to
create a SLO burn rate rule. \r\n\r\nIf you currently have SLOs set up,
you can either do so by going to the\r\nobservability rules management
page and selecting the SLO burn rate\r\nrule.\r\n\r\nIf you do not have
SLOs set up, you can go to the SLO page, create an\r\nSLI and make sure
the `create burn rate rule` checkbox is checked. The\r\nrule creation
flyout will then appear.\r\n\r\nIn the burn rate windows, ensure that
you are able to change the burn\r\nrate threshold or budget consumed
easily. When the field is blurred, the\r\nvalue should be
formatted.\r\n\r\nCo-authored-by: Shahzad
<[email protected]>","sha":"134012be32c2ede76ba700a089bee7a2b2afe0cb"}},"sourceBranch":"main","suggestedTargetBranches":["8.12"],"targetPullRequestStates":[{"branch":"8.12","label":"v8.12.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.13.0","labelRegex":"^v8.13.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/172526","number":172526,"mergeCommit":{"message":"[SLO]
adjust burn rate rule number selector for budget consumed and burn rate
threshold (#172526)\n\n## Summary\r\n\r\nResolves
https://github.com/elastic/kibana/issues/172400\r\n\r\nAdjusts the burn
rate rule budget consumed and burn rate threshold text\r\nbox to format
only on blur.\r\n\r\nRemoves the dependency on numeral in favor of using
`toFixed`.\r\n\r\n### Testing\r\n\r\nIn order to test, you'll need to
create a SLO burn rate rule. \r\n\r\nIf you currently have SLOs set up,
you can either do so by going to the\r\nobservability rules management
page and selecting the SLO burn rate\r\nrule.\r\n\r\nIf you do not have
SLOs set up, you can go to the SLO page, create an\r\nSLI and make sure
the `create burn rate rule` checkbox is checked. The\r\nrule creation
flyout will then appear.\r\n\r\nIn the burn rate windows, ensure that
you are able to change the burn\r\nrate threshold or budget consumed
easily. When the field is blurred, the\r\nvalue should be
formatted.\r\n\r\nCo-authored-by: Shahzad
<[email protected]>","sha":"134012be32c2ede76ba700a089bee7a2b2afe0cb"}}]}]
BACKPORT-->

Co-authored-by: Dominique Clarke <[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>