[Synthetics] Show inspect configuration button always !! (#213619)

## Summary

Just like SLO https://github.com/elastic/kibana/pull/210734

Show inspect configuration button always, there is no point hiding it,
it adds value while debugging.

Also fixed the id being auto generated even for monitor being edited !!

<img width="1724" alt="image"
src="https://github.com/user-attachments/assets/31bd7a68-08d5-4a1e-a5c3-d52f58e793fd"
/>


Changed default format to YAML and added a switch to show as JSON 

<img width="1728" alt="image"
src="https://github.com/user-attachments/assets/7b4ef88e-5f9e-4ec2-a9da-9606c743f3af"
/>


### Testing 

Inspect configuration continue to work as expected.

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/common/components/monitor_inspect.tsx

@@ -6,10 +6,9 @@
  */
 
 import React, { useState } from 'react';
-import { useKibana } from '@kbn/kibana-react-plugin/public';
-import { enableInspectEsQueries } from '@kbn/observability-plugin/common';
 import { useFetcher } from '@kbn/observability-shared-plugin/public';
 import { i18n } from '@kbn/i18n';
+
 import {
   EuiFlyout,
   EuiButton,
@@ -22,9 +21,11 @@ import {
   EuiFlyoutBody,
   EuiToolTip,
   EuiSwitch,
+  EuiFlexGroup,
+  EuiFlexItem,
 } from '@elastic/eui';
 
-import { ClientPluginsStart } from '../../../../../plugin';
+import yaml from 'js-yaml';
 import { useSyntheticsSettingsContext } from '../../../contexts';
 import { LoadingState } from '../../monitors_page/overview/overview/monitor_detail_flyout';
 import { MonitorTypeEnum, SyntheticsMonitor } from '../../../../../../common/runtime_types';
@@ -34,22 +35,12 @@ interface InspectorProps {
   isValid: boolean;
   monitorFields: SyntheticsMonitor;
 }
-export const MonitorInspectWrapper = (props: InspectorProps) => {
-  const {
-    services: { uiSettings },
-  } = useKibana<ClientPluginsStart>();
 
-  const { isDev } = useSyntheticsSettingsContext();
-
-  const isInspectorEnabled = uiSettings?.get<boolean>(enableInspectEsQueries);
-
-  return isDev || isInspectorEnabled ? <MonitorInspect {...props} /> : null;
-};
-
-const MonitorInspect = ({ isValid, monitorFields }: InspectorProps) => {
+export const MonitorInspect = ({ isValid, monitorFields }: InspectorProps) => {
   const { isDev } = useSyntheticsSettingsContext();
 
   const [hideParams, setHideParams] = useState(() => !isDev);
+  const [asJson, setAsJson] = useState(false);
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
 
   const closeFlyout = () => {
@@ -86,22 +77,36 @@ const MonitorInspect = ({ isValid, monitorFields }: InspectorProps) => {
           </EuiTitle>
         </EuiFlyoutHeader>
         <EuiFlyoutBody>
-          <EuiSwitch
-            label={HIDE_PARAMS}
-            checked={hideParams}
-            onChange={(e) => setHideParams(e.target.checked)}
-          />
+          <EuiFlexGroup>
+            <EuiFlexItem>
+              <EuiSwitch
+                compressed
+                label={HIDE_PARAMS}
+                checked={hideParams}
+                onChange={(e) => setHideParams(e.target.checked)}
+              />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiSwitch
+                compressed
+                label={AS_JSON}
+                checked={asJson}
+                onChange={(e) => setAsJson(e.target.checked)}
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+
           <EuiSpacer size="m" />
           {!loading && data ? (
             <>
               <EuiCodeBlock
-                language="json"
+                language={asJson ? 'json' : 'yaml'}
                 fontSize="m"
                 paddingSize="m"
                 lineNumbers
                 isCopyable={true}
               >
-                {formatContent(data.result)}
+                {formatContent(data.result, asJson)}
               </EuiCodeBlock>
               {data.decodedCode && <MonitorCode code={data.decodedCode} />}
             </>
@@ -157,7 +162,7 @@ const MonitorCode = ({ code }: { code: string }) => (
   </>
 );
 
-const formatContent = (result: MonitorInspectResponse) => {
+const formatContent = (result: MonitorInspectResponse, asJson: boolean) => {
   const firstResult = result.publicConfigs?.[0]?.monitors?.[0];
 
   const currentInput = result.privateConfig?.inputs.find((input) => input.enabled);
@@ -165,11 +170,12 @@ const formatContent = (result: MonitorInspectResponse) => {
     Object.values(MonitorTypeEnum).includes(stream.data_stream.dataset as MonitorTypeEnum)
   )?.compiled_stream;
 
-  return JSON.stringify(
-    { publicConfig: firstResult ?? {}, privateConfig: compiledConfig ?? {} },
-    null,
-    2
-  );
+  const data = { publicConfig: firstResult ?? {}, privateConfig: compiledConfig ?? {} };
+  if (!asJson) {
+    return yaml.dump(data);
+  }
+
+  return JSON.stringify(data, null, 2);
 };
 
 const CONFIG_LABEL = i18n.translate('xpack.synthetics.monitorInspect.configLabel', {
@@ -207,3 +213,7 @@ export const INSPECT_MONITOR_LABEL = i18n.translate(
 const HIDE_PARAMS = i18n.translate('xpack.synthetics.monitorInspect.hideParams', {
   defaultMessage: 'Hide parameter values',
 });
+
+const AS_JSON = i18n.translate('xpack.synthetics.monitorInspect.asJson', {
+  defaultMessage: 'As JSON',
+});

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/steps/inspect_monitor_portal.tsx

@@ -8,7 +8,7 @@
 import React from 'react';
 import { InPortal } from 'react-reverse-portal';
 import { SyntheticsMonitor } from '../../../../../../common/runtime_types';
-import { MonitorInspectWrapper } from '../../common/components/monitor_inspect';
+import { MonitorInspect } from '../../common/components/monitor_inspect';
 import { InspectMonitorPortalNode } from '../portals';
 
 export const InspectMonitorPortal = ({
@@ -20,7 +20,7 @@ export const InspectMonitorPortal = ({
 }) => {
   return (
     <InPortal node={InspectMonitorPortalNode}>
-      <MonitorInspectWrapper isValid={isValid} monitorFields={monitorFields} />
+      <MonitorInspect isValid={isValid} monitorFields={monitorFields} />
     </InPortal>
   );
 };

x-pack/solutions/observability/plugins/synthetics/server/routes/monitor_cruds/inspect_monitor.ts

@@ -63,7 +63,7 @@ export const inspectSyntheticsMonitorRoute: SyntheticsRestApiRouteFactory = () =
       ) ?? false;
 
     try {
-      const newMonitorId = id ?? uuidV4();
+      const newMonitorId = id || normalizedMonitor.config_id || uuidV4();
 
       const addMonitorAPI = new AddEditMonitorAPI(routeContext);