@red-hat-developer-hub/plugin-cost-management 2.2.2 → 2.4.0

package/dist/pages/optimizations-breakdown/OptimizationsBreakdownPage.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"OptimizationsBreakdownPage.esm.js","sources":["../../../src/pages/optimizations-breakdown/OptimizationsBreakdownPage.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { useLocation, useNavigate, useParams } from 'react-router-dom';\nimport useAsync from 'react-use/esm/useAsync';\nimport {\n  TabbedLayout,\n  Progress,\n  ResponseErrorPanel,\n} from '@backstage/core-components';\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\nimport type { RecommendationBoxPlots } from '@red-hat-developer-hub/plugin-cost-management-common/models';\nimport type { WorkflowUnavailableReason } from '@red-hat-developer-hub/plugin-cost-management-common/clients';\nimport { getTimeFromNow } from '../../utils/dates';\nimport { BasePage } from '../../components/BasePage';\nimport { type Interval, OptimizationType } from './models/ChartEnums';\nimport { OptimizationEngineTab } from './components/optimization-engine-tab/OptimizationEngineTab';\nimport {\n  getCurrentYAMLCodeData,\n  getRecommendedYAMLCodeData,\n} from './models/YamlCodeData';\nimport { optimizationsApiRef, orchestratorSlimApiRef } from '../../apis';\nimport type { WorkflowInputDataSchema } from './models/WorkflowInputDataSchema';\n\nconst getContainerData = (value: RecommendationBoxPlots) => [\n  { key: 'Cluster', value: value?.clusterAlias },\n  { key: 'Project', value: value?.project },\n  { key: 'Workload', value: value?.workload },\n  { key: 'Type', value: value?.workloadType },\n  {\n    key: 'Last reported',\n    value: getTimeFromNow(value?.lastReported?.toString()),\n  },\n];\n\n/**\n * Adapts recommendation data into the input schema required for the optimization workflow.\n *\n * This function extracts and transforms resource recommendations (CPU/memory, limits/requests)\n * from the provided `RecommendationBoxPlots` data structure, mapping them into a\n * `WorkflowInputDataSchema` object suitable for workflow consumption.\n *\n * - Converts memory values from mebibytes to bytes where necessary.\n * - Populates cluster, namespace, workload, and container information if available.\n * - Handles both `limits` and `requests` for CPU and memory resources.\n *\n * @param recommendationData - The recommendation data containing resource suggestions and metadata.\n * @param timeRange - The interval term for which recommendations are being adapted.\n * @param optimizationType - The type of optimization engine to use for extracting recommendations.\n * @param type - Specifies the 'limits' or 'requests' resource values.\n * @param resource - Specifies the resource type, either 'cpu' or 'memory'.\n * @returns A `WorkflowInputDataSchema` object populated with the adapted recommendation data.\n */\nconst adaptRecommendationsDataToWorkflowInputData = (\n  recommendationData: RecommendationBoxPlots,\n  timeRange: Interval,\n  optimizationType: OptimizationType,\n): WorkflowInputDataSchema => {\n  if (\n    !recommendationData.clusterAlias ||\n    !recommendationData.project ||\n    !recommendationData.workloadType ||\n    !recommendationData.workload ||\n    !recommendationData.container\n  ) {\n    throw new Error('Invalid recommendation data');\n  }\n\n  const workflowInputData: WorkflowInputDataSchema = {\n    clusterName: recommendationData.clusterAlias,\n    resourceType: recommendationData.workloadType.toLocaleLowerCase(\n      'en-US',\n    ) as WorkflowInputDataSchema['resourceType'],\n    resourceNamespace: recommendationData.project,\n    resourceName: recommendationData.workload,\n    containerName: recommendationData.container,\n    containerResources: {},\n  };\n\n  const config =\n    recommendationData.recommendations?.recommendationTerms?.[timeRange]\n      ?.recommendationEngines?.[optimizationType]?.config;\n\n  if (config && config.limits) {\n    workflowInputData.containerResources.limits = {};\n    if (config.limits.cpu) {\n      workflowInputData.containerResources.limits.cpu =\n        config.limits.cpu.amount;\n    }\n\n    if (\n      config.limits.memory &&\n      typeof config.limits.memory.amount === 'number'\n    ) {\n      workflowInputData.containerResources.limits.memory = Math.round(\n        config.limits.memory.amount * 1024 * 1024,\n      );\n    }\n  }\n\n  if (config && config.requests) {\n    workflowInputData.containerResources.requests = {};\n    if (config.requests.cpu) {\n      workflowInputData.containerResources.requests.cpu =\n        config.requests.cpu.amount;\n    }\n\n    if (\n      config.requests.memory &&\n      typeof config.requests.memory.amount === 'number'\n    ) {\n      workflowInputData.containerResources.requests.memory = Math.round(\n        config.requests.memory.amount * 1024 * 1024,\n      );\n    }\n  }\n\n  return workflowInputData;\n};\n\nexport const OptimizationsBreakdownPage = () => {\n  const [recommendationTerm, setRecommendationTerm] =\n    useState<Interval>('shortTerm');\n  const location = useLocation();\n  const navigate = useNavigate();\n  const { id } = useParams();\n  const configApi = useApi(configApiRef);\n  const workflowIdRef = useRef<string>(\n    configApi.getOptionalString('costManagement.optimizationWorkflowId') ?? '',\n  );\n  const workflowUnavailableReasonRef = useRef<\n    WorkflowUnavailableReason | undefined\n  >(undefined);\n  const workflowErrorMessageRef = useRef<string | undefined>(undefined);\n  const orchestratorSlimApi = useApi(orchestratorSlimApiRef);\n  const optimizationsApi = useApi(optimizationsApiRef);\n  const {\n    value: recommendationsData,\n    loading,\n    error,\n  } = useAsync(async () => {\n    const availabilityResult =\n      await orchestratorSlimApi.checkWorkflowAvailability(\n        workflowIdRef.current,\n      );\n    if (availabilityResult.available) {\n      workflowUnavailableReasonRef.current = undefined;\n      workflowErrorMessageRef.current = undefined;\n    } else {\n      workflowIdRef.current = '';\n      workflowUnavailableReasonRef.current = availabilityResult.reason;\n      workflowErrorMessageRef.current = availabilityResult.errorMessage;\n    }\n\n    const apiQuery = {\n      path: {\n        recommendationId: id!,\n      },\n      query: {},\n    };\n\n    const response = await optimizationsApi.getRecommendationById(apiQuery);\n    return await response.json();\n  }, []);\n\n  const optimizationType = useMemo(() => {\n    return location.pathname.endsWith('performance')\n      ? OptimizationType.performance\n      : OptimizationType.cost;\n  }, [location.pathname]);\n\n  const recommendedConfiguration = useMemo(\n    () =>\n      getRecommendedYAMLCodeData(\n        recommendationsData!,\n        recommendationTerm,\n        optimizationType,\n      ),\n    [recommendationsData, recommendationTerm, optimizationType],\n  );\n\n  const currentConfiguration = useMemo(\n    () => getCurrentYAMLCodeData(recommendationsData!),\n    [recommendationsData],\n  );\n\n  const [applyError, setApplyError] = useState<Error | undefined>(undefined);\n\n  const handleApplyRecommendation = useCallback(() => {\n    if (!recommendationsData) {\n      return;\n    }\n\n    setApplyError(undefined);\n    try {\n      const workflowId = workflowIdRef.current;\n      const data = adaptRecommendationsDataToWorkflowInputData(\n        recommendationsData,\n        recommendationTerm,\n        optimizationType,\n      );\n      orchestratorSlimApi\n        .executeWorkflow(workflowId, { inputData: data })\n        .then(response => {\n          navigate(`/orchestrator/instances/${response.id}`);\n        })\n        .catch(err => {\n          setApplyError(err instanceof Error ? err : new Error(String(err)));\n        });\n    } catch {\n      return;\n    }\n  }, [\n    navigate,\n    optimizationType,\n    orchestratorSlimApi,\n    recommendationTerm,\n    recommendationsData,\n  ]);\n\n  const handleRecommendationTermChange = useCallback(\n    (\n      event: React.ChangeEvent<{\n        name?: string;\n        value: unknown;\n      }>,\n    ) => {\n      setRecommendationTerm(event.target.value as Interval);\n    },\n    [],\n  );\n\n  const containerData = useMemo(\n    () => getContainerData(recommendationsData!),\n    [recommendationsData],\n  );\n\n  if (loading) {\n    return <Progress />;\n  }\n\n  if (error) {\n    return <ResponseErrorPanel error={error} />;\n  }\n\n  return (\n    <BasePage\n      pageThemeId=\"tool\"\n      pageTitle={recommendationsData!.container!}\n      pageType=\"Optimizations\"\n      pageTypeLink=\"/cost-management/optimizations\"\n    >\n      {applyError && <ResponseErrorPanel error={applyError} />}\n      <TabbedLayout>\n        <TabbedLayout.Route path=\"/cost?\" title=\"Cost optimizations\">\n          <OptimizationEngineTab\n            optimizationType={OptimizationType.cost}\n            chartData={recommendationsData!}\n            containerData={containerData}\n            recommendationTerm={recommendationTerm}\n            currentConfiguration={currentConfiguration}\n            recommendedConfiguration={recommendedConfiguration}\n            onRecommendationTermChange={handleRecommendationTermChange}\n            onApplyRecommendation={handleApplyRecommendation}\n            workflowId={workflowIdRef.current}\n            workflowUnavailableReason={workflowUnavailableReasonRef.current}\n            workflowErrorMessage={workflowErrorMessageRef.current}\n          />\n        </TabbedLayout.Route>\n\n        <TabbedLayout.Route\n          path=\"/performance\"\n          title=\"Performance optimizations\"\n        >\n          <OptimizationEngineTab\n            optimizationType={OptimizationType.performance}\n            chartData={recommendationsData!}\n            containerData={containerData}\n            recommendationTerm={recommendationTerm}\n            currentConfiguration={currentConfiguration}\n            recommendedConfiguration={recommendedConfiguration}\n            onRecommendationTermChange={handleRecommendationTermChange}\n            onApplyRecommendation={handleApplyRecommendation}\n            workflowId={workflowIdRef.current}\n            workflowUnavailableReason={workflowUnavailableReasonRef.current}\n            workflowErrorMessage={workflowErrorMessageRef.current}\n          />\n        </TabbedLayout.Route>\n      </TabbedLayout>\n    </BasePage>\n  );\n};\nOptimizationsBreakdownPage.displayName = 'OptimizationsBreakdownPage';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"OptimizationsBreakdownPage.esm.js","sources":["../../../src/pages/optimizations-breakdown/OptimizationsBreakdownPage.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  default as React,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useLocation, useNavigate, useParams } from 'react-router-dom';\nimport useAsync from 'react-use/esm/useAsync';\nimport {\n  TabbedLayout,\n  Progress,\n  ResponseErrorPanel,\n} from '@backstage/core-components';\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\nimport type { RecommendationBoxPlots } from '@red-hat-developer-hub/plugin-cost-management-common/models';\nimport type { WorkflowUnavailableReason } from '@red-hat-developer-hub/plugin-cost-management-common/clients';\nimport { getTimeFromNow } from '../../utils/dates';\nimport { BasePage } from '../../components/BasePage';\nimport { type Interval, OptimizationType } from './models/ChartEnums';\nimport { OptimizationEngineTab } from './components/optimization-engine-tab/OptimizationEngineTab';\nimport {\n  getCurrentYAMLCodeData,\n  getRecommendedYAMLCodeData,\n} from './models/YamlCodeData';\nimport { optimizationsApiRef, orchestratorSlimApiRef } from '../../apis';\nimport type { WorkflowInputDataSchema } from './models/WorkflowInputDataSchema';\n\nconst getContainerData = (value: RecommendationBoxPlots) => [\n  { key: 'Cluster', value: value?.clusterAlias },\n  { key: 'Project', value: value?.project },\n  { key: 'Workload', value: value?.workload },\n  { key: 'Type', value: value?.workloadType },\n  {\n    key: 'Last reported',\n    value: getTimeFromNow(value?.lastReported?.toString()),\n  },\n];\n\n/**\n * Adapts recommendation data into the input schema required for the optimization workflow.\n *\n * This function extracts and transforms resource recommendations (CPU/memory, limits/requests)\n * from the provided `RecommendationBoxPlots` data structure, mapping them into a\n * `WorkflowInputDataSchema` object suitable for workflow consumption.\n *\n * - Converts memory values from mebibytes to bytes where necessary.\n * - Populates cluster, namespace, workload, and container information if available.\n * - Handles both `limits` and `requests` for CPU and memory resources.\n *\n * @param recommendationData - The recommendation data containing resource suggestions and metadata.\n * @param timeRange - The interval term for which recommendations are being adapted.\n * @param optimizationType - The type of optimization engine to use for extracting recommendations.\n * @param type - Specifies the 'limits' or 'requests' resource values.\n * @param resource - Specifies the resource type, either 'cpu' or 'memory'.\n * @returns A `WorkflowInputDataSchema` object populated with the adapted recommendation data.\n */\nconst adaptRecommendationsDataToWorkflowInputData = (\n  recommendationData: RecommendationBoxPlots,\n  timeRange: Interval,\n  optimizationType: OptimizationType,\n): WorkflowInputDataSchema => {\n  if (\n    !recommendationData.clusterAlias ||\n    !recommendationData.project ||\n    !recommendationData.workloadType ||\n    !recommendationData.workload ||\n    !recommendationData.container\n  ) {\n    throw new Error('Invalid recommendation data');\n  }\n\n  const workflowInputData: WorkflowInputDataSchema = {\n    clusterName: recommendationData.clusterAlias,\n    resourceType: recommendationData.workloadType.toLocaleLowerCase(\n      'en-US',\n    ) as WorkflowInputDataSchema['resourceType'],\n    resourceNamespace: recommendationData.project,\n    resourceName: recommendationData.workload,\n    containerName: recommendationData.container,\n    containerResources: {},\n  };\n\n  const config =\n    recommendationData.recommendations?.recommendationTerms?.[timeRange]\n      ?.recommendationEngines?.[optimizationType]?.config;\n\n  if (config && config.limits) {\n    workflowInputData.containerResources.limits = {};\n    if (config.limits.cpu) {\n      workflowInputData.containerResources.limits.cpu =\n        config.limits.cpu.amount;\n    }\n\n    if (\n      config.limits.memory &&\n      typeof config.limits.memory.amount === 'number'\n    ) {\n      workflowInputData.containerResources.limits.memory = Math.round(\n        config.limits.memory.amount * 1024 * 1024,\n      );\n    }\n  }\n\n  if (config && config.requests) {\n    workflowInputData.containerResources.requests = {};\n    if (config.requests.cpu) {\n      workflowInputData.containerResources.requests.cpu =\n        config.requests.cpu.amount;\n    }\n\n    if (\n      config.requests.memory &&\n      typeof config.requests.memory.amount === 'number'\n    ) {\n      workflowInputData.containerResources.requests.memory = Math.round(\n        config.requests.memory.amount * 1024 * 1024,\n      );\n    }\n  }\n\n  return workflowInputData;\n};\n\nexport const OptimizationsBreakdownPage = () => {\n  const [recommendationTerm, setRecommendationTerm] =\n    useState<Interval>('shortTerm');\n  const location = useLocation();\n  const navigate = useNavigate();\n  const { id } = useParams();\n  const configApi = useApi(configApiRef);\n  const workflowIdRef = useRef<string>(\n    configApi.getOptionalString('costManagement.optimizationWorkflowId') ?? '',\n  );\n  const workflowUnavailableReasonRef = useRef<\n    WorkflowUnavailableReason | undefined\n  >(undefined);\n  const workflowErrorMessageRef = useRef<string | undefined>(undefined);\n  const orchestratorSlimApi = useApi(orchestratorSlimApiRef);\n  const optimizationsApi = useApi(optimizationsApiRef);\n  const {\n    value: recommendationsData,\n    loading,\n    error,\n  } = useAsync(async () => {\n    const availabilityResult =\n      await orchestratorSlimApi.checkWorkflowAvailability(\n        workflowIdRef.current,\n      );\n    if (availabilityResult.available) {\n      workflowUnavailableReasonRef.current = undefined;\n      workflowErrorMessageRef.current = undefined;\n    } else {\n      workflowIdRef.current = '';\n      workflowUnavailableReasonRef.current = availabilityResult.reason;\n      workflowErrorMessageRef.current = availabilityResult.errorMessage;\n    }\n\n    const apiQuery = {\n      path: {\n        recommendationId: id!,\n      },\n      query: {},\n    };\n\n    const response = await optimizationsApi.getRecommendationById(apiQuery);\n    return await response.json();\n  }, []);\n\n  const optimizationType = useMemo(() => {\n    return location.pathname.endsWith('performance')\n      ? OptimizationType.performance\n      : OptimizationType.cost;\n  }, [location.pathname]);\n\n  const recommendedConfiguration = useMemo(\n    () =>\n      getRecommendedYAMLCodeData(\n        recommendationsData!,\n        recommendationTerm,\n        optimizationType,\n      ),\n    [recommendationsData, recommendationTerm, optimizationType],\n  );\n\n  const currentConfiguration = useMemo(\n    () => getCurrentYAMLCodeData(recommendationsData!),\n    [recommendationsData],\n  );\n\n  const [applyError, setApplyError] = useState<Error | undefined>(undefined);\n\n  const handleApplyRecommendation = useCallback(() => {\n    if (!recommendationsData) {\n      return;\n    }\n\n    setApplyError(undefined);\n    try {\n      const workflowId = workflowIdRef.current;\n      const data = adaptRecommendationsDataToWorkflowInputData(\n        recommendationsData,\n        recommendationTerm,\n        optimizationType,\n      );\n      orchestratorSlimApi\n        .executeWorkflow(workflowId, { inputData: data })\n        .then(response => {\n          navigate(`/orchestrator/instances/${response.id}`);\n        })\n        .catch(err => {\n          setApplyError(err instanceof Error ? err : new Error(String(err)));\n        });\n    } catch {\n      return;\n    }\n  }, [\n    navigate,\n    optimizationType,\n    orchestratorSlimApi,\n    recommendationTerm,\n    recommendationsData,\n  ]);\n\n  const handleRecommendationTermChange = useCallback(\n    (\n      event: React.ChangeEvent<{\n        name?: string;\n        value: unknown;\n      }>,\n    ) => {\n      setRecommendationTerm(event.target.value as Interval);\n    },\n    [],\n  );\n\n  const containerData = useMemo(\n    () => getContainerData(recommendationsData!),\n    [recommendationsData],\n  );\n\n  if (loading) {\n    return <Progress />;\n  }\n\n  if (error) {\n    return <ResponseErrorPanel error={error} />;\n  }\n\n  return (\n    <BasePage\n      pageThemeId=\"tool\"\n      pageTitle={recommendationsData!.container!}\n      pageType=\"Optimizations\"\n      pageTypeLink=\"/cost-management/optimizations\"\n    >\n      {applyError && <ResponseErrorPanel error={applyError} />}\n      <TabbedLayout>\n        <TabbedLayout.Route path=\"/cost?\" title=\"Cost optimizations\">\n          <OptimizationEngineTab\n            optimizationType={OptimizationType.cost}\n            chartData={recommendationsData!}\n            containerData={containerData}\n            recommendationTerm={recommendationTerm}\n            currentConfiguration={currentConfiguration}\n            recommendedConfiguration={recommendedConfiguration}\n            onRecommendationTermChange={handleRecommendationTermChange}\n            onApplyRecommendation={handleApplyRecommendation}\n            workflowId={workflowIdRef.current}\n            workflowUnavailableReason={workflowUnavailableReasonRef.current}\n            workflowErrorMessage={workflowErrorMessageRef.current}\n          />\n        </TabbedLayout.Route>\n\n        <TabbedLayout.Route\n          path=\"/performance\"\n          title=\"Performance optimizations\"\n        >\n          <OptimizationEngineTab\n            optimizationType={OptimizationType.performance}\n            chartData={recommendationsData!}\n            containerData={containerData}\n            recommendationTerm={recommendationTerm}\n            currentConfiguration={currentConfiguration}\n            recommendedConfiguration={recommendedConfiguration}\n            onRecommendationTermChange={handleRecommendationTermChange}\n            onApplyRecommendation={handleApplyRecommendation}\n            workflowId={workflowIdRef.current}\n            workflowUnavailableReason={workflowUnavailableReasonRef.current}\n            workflowErrorMessage={workflowErrorMessageRef.current}\n          />\n        </TabbedLayout.Route>\n      </TabbedLayout>\n    </BasePage>\n  );\n};\nOptimizationsBreakdownPage.displayName = 'OptimizationsBreakdownPage';\n"],"names":[],"mappings":"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"}

package/dist/pages/optimizations-breakdown/components/optimization-engine-tab/OptimizationEngineTab.esm.js

@@ -1,4 +1,5 @@
-import React, { useState, useMemo, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useMemo, useCallback } from 'react';
 import { Grid, Tooltip, Box, Button, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions } from '@material-ui/core';
 import { usePermission } from '@backstage/plugin-permission-react';
 import { rosApplyPermission } from '@red-hat-developer-hub/plugin-cost-management-common/permissions';
@@ -59,72 +60,86 @@ const OptimizationEngineTab = ({
     },
     [onApplyRecommendation]
   );
-  return /* @__PURE__ */ React.createElement(Grid, { container: true }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(
-    ContainerInfoCard,
-    {
-      containerData: restProps.containerData,
-      recommendationTerm: restProps.recommendationTerm,
-      onRecommendationTermChange: restProps.onRecommendationTermChange
-    }
-  )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React.createElement(
-    CodeInfoCard,
-    {
-      cardTitle: "Current configuration",
-      yamlCodeData: restProps.currentConfiguration
-    }
-  )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React.createElement(
-    CodeInfoCard,
-    {
-      cardTitle: "Recommended configuration",
-      showCopyCodeButton: true,
-      yamlCodeData: restProps.recommendedConfiguration,
-      action: /* @__PURE__ */ React.createElement(
-        Tooltip,
-        {
-          title: tooltipMessage,
-          disableHoverListener: !isButtonDisabled,
-          disableFocusListener: !isButtonDisabled,
-          disableTouchListener: !isButtonDisabled
-        },
-        /* @__PURE__ */ React.createElement(Box, { component: "span", display: "inline-block" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(Grid, { container: true, children: [
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(
+      ContainerInfoCard,
+      {
+        containerData: restProps.containerData,
+        recommendationTerm: restProps.recommendationTerm,
+        onRecommendationTermChange: restProps.onRecommendationTermChange
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, children: /* @__PURE__ */ jsx(
+      CodeInfoCard,
+      {
+        cardTitle: "Current configuration",
+        yamlCodeData: restProps.currentConfiguration
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, children: /* @__PURE__ */ jsx(
+      CodeInfoCard,
+      {
+        cardTitle: "Recommended configuration",
+        showCopyCodeButton: true,
+        yamlCodeData: restProps.recommendedConfiguration,
+        action: /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            title: tooltipMessage,
+            disableHoverListener: !isButtonDisabled,
+            disableFocusListener: !isButtonDisabled,
+            disableTouchListener: !isButtonDisabled,
+            children: /* @__PURE__ */ jsx(Box, { component: "span", display: "inline-block", children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "contained",
+                color: "primary",
+                onClick: handleApplyClick,
+                disabled: isButtonDisabled,
+                children: "Apply recommendation"
+              }
+            ) })
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, children: /* @__PURE__ */ jsx(
+      ChartInfoCard,
+      {
+        title: "CPU utilization",
+        chartData: restProps.chartData,
+        recommendationTerm: restProps.recommendationTerm,
+        optimizationType: restProps.optimizationType,
+        resourceType: RecommendationType.cpu
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, children: /* @__PURE__ */ jsx(
+      ChartInfoCard,
+      {
+        title: "Memory utilization",
+        chartData: restProps.chartData,
+        recommendationTerm: restProps.recommendationTerm,
+        optimizationType: restProps.optimizationType,
+        resourceType: RecommendationType.memory
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(Dialog, { open: confirmOpen, onClose: handleConfirmCancel, children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: "Apply recommendation?" }),
+      /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(DialogContentText, { children: "This will execute a workflow to modify the resource configuration on the target cluster. This action cannot be easily undone. Are you sure you want to proceed?" }) }),
+      /* @__PURE__ */ jsxs(DialogActions, { children: [
+        /* @__PURE__ */ jsx(Button, { onClick: handleConfirmCancel, color: "default", children: "Cancel" }),
+        /* @__PURE__ */ jsx(
           Button,
           {
-            variant: "contained",
+            onClick: handleConfirmApply,
             color: "primary",
-            onClick: handleApplyClick,
-            disabled: isButtonDisabled
-          },
-          "Apply recommendation"
-        ))
-      )
-    }
-  )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React.createElement(
-    ChartInfoCard,
-    {
-      title: "CPU utilization",
-      chartData: restProps.chartData,
-      recommendationTerm: restProps.recommendationTerm,
-      optimizationType: restProps.optimizationType,
-      resourceType: RecommendationType.cpu
-    }
-  )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React.createElement(
-    ChartInfoCard,
-    {
-      title: "Memory utilization",
-      chartData: restProps.chartData,
-      recommendationTerm: restProps.recommendationTerm,
-      optimizationType: restProps.optimizationType,
-      resourceType: RecommendationType.memory
-    }
-  )), /* @__PURE__ */ React.createElement(Dialog, { open: confirmOpen, onClose: handleConfirmCancel }, /* @__PURE__ */ React.createElement(DialogTitle, null, "Apply recommendation?"), /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(DialogContentText, null, "This will execute a workflow to modify the resource configuration on the target cluster. This action cannot be easily undone. Are you sure you want to proceed?")), /* @__PURE__ */ React.createElement(DialogActions, null, /* @__PURE__ */ React.createElement(Button, { onClick: handleConfirmCancel, color: "default" }, "Cancel"), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      onClick: handleConfirmApply,
-      color: "primary",
-      variant: "contained"
-    },
-    "Apply"
-  ))));
+            variant: "contained",
+            children: "Apply"
+          }
+        )
+      ] })
+    ] })
+  ] });
 };
 OptimizationEngineTab.displayName = "OptimizationEngineTab";
 

package/dist/pages/optimizations-breakdown/components/optimization-engine-tab/OptimizationEngineTab.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"OptimizationEngineTab.esm.js","sources":["../../../../../src/pages/optimizations-breakdown/components/optimization-engine-tab/OptimizationEngineTab.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useCallback, useMemo, useState } from 'react';\nimport {\n  Box,\n  Button,\n  Dialog,\n  DialogActions,\n  DialogContent,\n  DialogContentText,\n  DialogTitle,\n  Grid,\n  Tooltip,\n} from '@material-ui/core';\nimport { usePermission } from '@backstage/plugin-permission-react';\nimport { rosApplyPermission } from '@red-hat-developer-hub/plugin-cost-management-common/permissions';\nimport type { WorkflowUnavailableReason } from '@red-hat-developer-hub/plugin-cost-management-common/clients';\nimport { RecommendationType } from '../../models/ChartEnums';\nimport { ChartInfoCard } from './components/chart-info-card/ChartInfoCard';\nimport { CodeInfoCard } from './components/CodeInfoCard';\nimport { ContainerInfoCard } from './components/ContainerInfoCard';\n\ntype ContainerInfoCardProps = Parameters<typeof ContainerInfoCard>[0];\ntype CodeInfoCardProps = Parameters<typeof CodeInfoCard>[0];\ntype ChartInfoCardProps = Parameters<typeof ChartInfoCard>[0];\n\nconst DEFAULT_WORKFLOW_MESSAGES: Record<WorkflowUnavailableReason, string> = {\n  not_configured: 'No workflow configured to apply recommendations',\n  not_found: 'Workflow not found',\n  access_denied: 'You do not have permission to access this workflow',\n  service_unavailable: 'Workflow service is currently unavailable',\n};\n\ninterface OptimizationEngineTabProps extends ContainerInfoCardProps {\n  currentConfiguration: CodeInfoCardProps['yamlCodeData'];\n  recommendedConfiguration: CodeInfoCardProps['yamlCodeData'];\n  chartData: ChartInfoCardProps['chartData'];\n  optimizationType: ChartInfoCardProps['optimizationType'];\n  onApplyRecommendation?: React.MouseEventHandler<HTMLButtonElement>;\n  workflowId?: string;\n  workflowUnavailableReason?: WorkflowUnavailableReason;\n  workflowErrorMessage?: string;\n}\n\nexport const OptimizationEngineTab = ({\n  workflowId,\n  workflowErrorMessage,\n  workflowUnavailableReason,\n  onApplyRecommendation,\n  ...restProps\n}: OptimizationEngineTabProps) => {\n  const isWorkflowAvailable = !!workflowId;\n  const [confirmOpen, setConfirmOpen] = useState(false);\n\n  const { loading: permLoading, allowed: canApply } = usePermission({\n    permission: rosApplyPermission,\n  });\n\n  const isButtonDisabled =\n    !isWorkflowAvailable || permLoading || canApply === false;\n\n  const tooltipMessage = useMemo(() => {\n    if (canApply === false) {\n      return 'You do not have permission to apply recommendations';\n    }\n    if (isWorkflowAvailable) {\n      return '';\n    }\n    if (workflowErrorMessage) {\n      return workflowErrorMessage;\n    }\n    if (workflowUnavailableReason) {\n      return DEFAULT_WORKFLOW_MESSAGES[workflowUnavailableReason];\n    }\n    return DEFAULT_WORKFLOW_MESSAGES.not_configured;\n  }, [\n    canApply,\n    isWorkflowAvailable,\n    workflowErrorMessage,\n    workflowUnavailableReason,\n  ]);\n\n  const handleApplyClick = useCallback(() => {\n    setConfirmOpen(true);\n  }, []);\n\n  const handleConfirmCancel = useCallback(() => {\n    setConfirmOpen(false);\n  }, []);\n\n  const handleConfirmApply = useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      setConfirmOpen(false);\n      onApplyRecommendation?.(event);\n    },\n    [onApplyRecommendation],\n  );\n\n  return (\n    <Grid container>\n      <Grid item xs={12}>\n        <ContainerInfoCard\n          containerData={restProps.containerData}\n          recommendationTerm={restProps.recommendationTerm}\n          onRecommendationTermChange={restProps.onRecommendationTermChange}\n        />\n      </Grid>\n\n      <Grid item xs={6}>\n        <CodeInfoCard\n          cardTitle=\"Current configuration\"\n          yamlCodeData={restProps.currentConfiguration}\n        />\n      </Grid>\n      <Grid item xs={6}>\n        <CodeInfoCard\n          cardTitle=\"Recommended configuration\"\n          showCopyCodeButton\n          yamlCodeData={restProps.recommendedConfiguration}\n          action={\n            <Tooltip\n              title={tooltipMessage}\n              disableHoverListener={!isButtonDisabled}\n              disableFocusListener={!isButtonDisabled}\n              disableTouchListener={!isButtonDisabled}\n            >\n              <Box component=\"span\" display=\"inline-block\">\n                <Button\n                  variant=\"contained\"\n                  color=\"primary\"\n                  onClick={handleApplyClick}\n                  disabled={isButtonDisabled}\n                >\n                  Apply recommendation\n                </Button>\n              </Box>\n            </Tooltip>\n          }\n        />\n      </Grid>\n\n      <Grid item xs={6}>\n        <ChartInfoCard\n          title=\"CPU utilization\"\n          chartData={restProps.chartData}\n          recommendationTerm={restProps.recommendationTerm}\n          optimizationType={restProps.optimizationType}\n          resourceType={RecommendationType.cpu}\n        />\n      </Grid>\n      <Grid item xs={6}>\n        <ChartInfoCard\n          title=\"Memory utilization\"\n          chartData={restProps.chartData}\n          recommendationTerm={restProps.recommendationTerm}\n          optimizationType={restProps.optimizationType}\n          resourceType={RecommendationType.memory}\n        />\n      </Grid>\n\n      <Dialog open={confirmOpen} onClose={handleConfirmCancel}>\n        <DialogTitle>Apply recommendation?</DialogTitle>\n        <DialogContent>\n          <DialogContentText>\n            This will execute a workflow to modify the resource configuration on\n            the target cluster. This action cannot be easily undone. Are you\n            sure you want to proceed?\n          </DialogContentText>\n        </DialogContent>\n        <DialogActions>\n          <Button onClick={handleConfirmCancel} color=\"default\">\n            Cancel\n          </Button>\n          <Button\n            onClick={handleConfirmApply}\n            color=\"primary\"\n            variant=\"contained\"\n          >\n            Apply\n          </Button>\n        </DialogActions>\n      </Dialog>\n    </Grid>\n  );\n};\nOptimizationEngineTab.displayName = 'OptimizationEngineTab';\n"],"names":[],"mappings":";;;;;;;;;AAwCA,MAAM,yBAAA,GAAuE;AAAA,EAC3E,cAAA,EAAgB,iDAAA;AAAA,EAChB,SAAA,EAAW,oBAAA;AAAA,EACX,aAAA,EAAe,oDAAA;AAAA,EACf,mBAAA,EAAqB;AACvB,CAAA;AAaO,MAAM,wBAAwB,CAAC;AAAA,EACpC,UAAA;AAAA,EACA,oBAAA;AAAA,EACA,yBAAA;AAAA,EACA,qBAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAkC;AAChC,EAAA,MAAM,mBAAA,GAAsB,CAAC,CAAC,UAAA;AAC9B,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,KAAK,CAAA;AAEpD,EAAA,MAAM,EAAE,OAAA,EAAS,WAAA,EAAa,OAAA,EAAS,QAAA,KAAa,aAAA,CAAc;AAAA,IAChE,UAAA,EAAY;AAAA,GACb,CAAA;AAED,EAAA,MAAM,gBAAA,GACJ,CAAC,mBAAA,IAAuB,WAAA,IAAe,QAAA,KAAa,KAAA;AAEtD,EAAA,MAAM,cAAA,GAAiB,QAAQ,MAAM;AACnC,IAAA,IAAI,aAAa,KAAA,EAAO;AACtB,MAAA,OAAO,qDAAA;AAAA,IACT;AACA,IAAA,IAAI,mBAAA,EAAqB;AACvB,MAAA,OAAO,EAAA;AAAA,IACT;AACA,IAAA,IAAI,oBAAA,EAAsB;AACxB,MAAA,OAAO,oBAAA;AAAA,IACT;AACA,IAAA,IAAI,yBAAA,EAA2B;AAC7B,MAAA,OAAO,0BAA0B,yBAAyB,CAAA;AAAA,IAC5D;AACA,IAAA,OAAO,yBAAA,CAA0B,cAAA;AAAA,EACnC,CAAA,EAAG;AAAA,IACD,QAAA;AAAA,IACA,mBAAA;AAAA,IACA,oBAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,gBAAA,GAAmB,YAAY,MAAM;AACzC,IAAA,cAAA,CAAe,IAAI,CAAA;AAAA,EACrB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,mBAAA,GAAsB,YAAY,MAAM;AAC5C,IAAA,cAAA,CAAe,KAAK,CAAA;AAAA,EACtB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,kBAAA,GAAqB,WAAA;AAAA,IACzB,CAAC,KAAA,KAA+C;AAC9C,MAAA,cAAA,CAAe,KAAK,CAAA;AACpB,MAAA,qBAAA,GAAwB,KAAK,CAAA;AAAA,IAC/B,CAAA;AAAA,IACA,CAAC,qBAAqB;AAAA,GACxB;AAEA,EAAA,uBACE,KAAA,CAAA,aAAA,CAAC,QAAK,SAAA,EAAS,IAAA,EAAA,sCACZ,IAAA,EAAA,EAAK,IAAA,EAAI,IAAA,EAAC,EAAA,EAAI,EAAA,EAAA,kBACb,KAAA,CAAA,aAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,eAAe,SAAA,CAAU,aAAA;AAAA,MACzB,oBAAoB,SAAA,CAAU,kBAAA;AAAA,MAC9B,4BAA4B,SAAA,CAAU;AAAA;AAAA,GAE1C,CAAA,kBAEA,KAAA,CAAA,aAAA,CAAC,QAAK,IAAA,EAAI,IAAA,EAAC,IAAI,CAAA,EAAA,kBACb,KAAA,CAAA,aAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,uBAAA;AAAA,MACV,cAAc,SAAA,CAAU;AAAA;AAAA,GAE5B,CAAA,kBACA,KAAA,CAAA,aAAA,CAAC,QAAK,IAAA,EAAI,IAAA,EAAC,IAAI,CAAA,EAAA,kBACb,KAAA,CAAA,aAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,2BAAA;AAAA,MACV,kBAAA,EAAkB,IAAA;AAAA,MAClB,cAAc,SAAA,CAAU,wBAAA;AAAA,MACxB,MAAA,kBACE,KAAA,CAAA,aAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAO,cAAA;AAAA,UACP,sBAAsB,CAAC,gBAAA;AAAA,UACvB,sBAAsB,CAAC,gBAAA;AAAA,UACvB,sBAAsB,CAAC;AAAA,SAAA;AAAA,wBAEvB,KAAA,CAAA,aAAA,CAAC,GAAA,EAAA,EAAI,SAAA,EAAU,MAAA,EAAO,SAAQ,cAAA,EAAA,kBAC5B,KAAA,CAAA,aAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAQ,WAAA;AAAA,YACR,KAAA,EAAM,SAAA;AAAA,YACN,OAAA,EAAS,gBAAA;AAAA,YACT,QAAA,EAAU;AAAA,WAAA;AAAA,UACX;AAAA,SAGH;AAAA;AACF;AAAA,GAGN,CAAA,kBAEA,KAAA,CAAA,aAAA,CAAC,QAAK,IAAA,EAAI,IAAA,EAAC,IAAI,CAAA,EAAA,kBACb,KAAA,CAAA,aAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,iBAAA;AAAA,MACN,WAAW,SAAA,CAAU,SAAA;AAAA,MACrB,oBAAoB,SAAA,CAAU,kBAAA;AAAA,MAC9B,kBAAkB,SAAA,CAAU,gBAAA;AAAA,MAC5B,cAAc,kBAAA,CAAmB;AAAA;AAAA,GAErC,CAAA,kBACA,KAAA,CAAA,aAAA,CAAC,QAAK,IAAA,EAAI,IAAA,EAAC,IAAI,CAAA,EAAA,kBACb,KAAA,CAAA,aAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,oBAAA;AAAA,MACN,WAAW,SAAA,CAAU,SAAA;AAAA,MACrB,oBAAoB,SAAA,CAAU,kBAAA;AAAA,MAC9B,kBAAkB,SAAA,CAAU,gBAAA;AAAA,MAC5B,cAAc,kBAAA,CAAmB;AAAA;AAAA,GAErC,CAAA,kBAEA,KAAA,CAAA,aAAA,CAAC,MAAA,EAAA,EAAO,IAAA,EAAM,WAAA,EAAa,OAAA,EAAS,mBAAA,EAAA,kBAClC,KAAA,CAAA,aAAA,CAAC,WAAA,EAAA,IAAA,EAAY,uBAAqB,CAAA,kBAClC,KAAA,CAAA,aAAA,CAAC,aAAA,EAAA,IAAA,kBACC,KAAA,CAAA,aAAA,CAAC,iBAAA,EAAA,IAAA,EAAkB,iKAInB,CACF,CAAA,kBACA,KAAA,CAAA,aAAA,CAAC,aAAA,EAAA,IAAA,kBACC,KAAA,CAAA,aAAA,CAAC,MAAA,EAAA,EAAO,OAAA,EAAS,mBAAA,EAAqB,KAAA,EAAM,SAAA,EAAA,EAAU,QAEtD,CAAA,kBACA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAS,kBAAA;AAAA,MACT,KAAA,EAAM,SAAA;AAAA,MACN,OAAA,EAAQ;AAAA,KAAA;AAAA,IACT;AAAA,GAGH,CACF,CACF,CAAA;AAEJ;AACA,qBAAA,CAAsB,WAAA,GAAc,uBAAA;;;;"}
+{"version":3,"file":"OptimizationEngineTab.esm.js","sources":["../../../../../src/pages/optimizations-breakdown/components/optimization-engine-tab/OptimizationEngineTab.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { default as React, useCallback, useMemo, useState } from 'react';\nimport {\n  Box,\n  Button,\n  Dialog,\n  DialogActions,\n  DialogContent,\n  DialogContentText,\n  DialogTitle,\n  Grid,\n  Tooltip,\n} from '@material-ui/core';\nimport { usePermission } from '@backstage/plugin-permission-react';\nimport { rosApplyPermission } from '@red-hat-developer-hub/plugin-cost-management-common/permissions';\nimport type { WorkflowUnavailableReason } from '@red-hat-developer-hub/plugin-cost-management-common/clients';\nimport { RecommendationType } from '../../models/ChartEnums';\nimport { ChartInfoCard } from './components/chart-info-card/ChartInfoCard';\nimport { CodeInfoCard } from './components/CodeInfoCard';\nimport { ContainerInfoCard } from './components/ContainerInfoCard';\n\ntype ContainerInfoCardProps = Parameters<typeof ContainerInfoCard>[0];\ntype CodeInfoCardProps = Parameters<typeof CodeInfoCard>[0];\ntype ChartInfoCardProps = Parameters<typeof ChartInfoCard>[0];\n\nconst DEFAULT_WORKFLOW_MESSAGES: Record<WorkflowUnavailableReason, string> = {\n  not_configured: 'No workflow configured to apply recommendations',\n  not_found: 'Workflow not found',\n  access_denied: 'You do not have permission to access this workflow',\n  service_unavailable: 'Workflow service is currently unavailable',\n};\n\ninterface OptimizationEngineTabProps extends ContainerInfoCardProps {\n  currentConfiguration: CodeInfoCardProps['yamlCodeData'];\n  recommendedConfiguration: CodeInfoCardProps['yamlCodeData'];\n  chartData: ChartInfoCardProps['chartData'];\n  optimizationType: ChartInfoCardProps['optimizationType'];\n  onApplyRecommendation?: React.MouseEventHandler<HTMLButtonElement>;\n  workflowId?: string;\n  workflowUnavailableReason?: WorkflowUnavailableReason;\n  workflowErrorMessage?: string;\n}\n\nexport const OptimizationEngineTab = ({\n  workflowId,\n  workflowErrorMessage,\n  workflowUnavailableReason,\n  onApplyRecommendation,\n  ...restProps\n}: OptimizationEngineTabProps) => {\n  const isWorkflowAvailable = !!workflowId;\n  const [confirmOpen, setConfirmOpen] = useState(false);\n\n  const { loading: permLoading, allowed: canApply } = usePermission({\n    permission: rosApplyPermission,\n  });\n\n  const isButtonDisabled =\n    !isWorkflowAvailable || permLoading || canApply === false;\n\n  const tooltipMessage = useMemo(() => {\n    if (canApply === false) {\n      return 'You do not have permission to apply recommendations';\n    }\n    if (isWorkflowAvailable) {\n      return '';\n    }\n    if (workflowErrorMessage) {\n      return workflowErrorMessage;\n    }\n    if (workflowUnavailableReason) {\n      return DEFAULT_WORKFLOW_MESSAGES[workflowUnavailableReason];\n    }\n    return DEFAULT_WORKFLOW_MESSAGES.not_configured;\n  }, [\n    canApply,\n    isWorkflowAvailable,\n    workflowErrorMessage,\n    workflowUnavailableReason,\n  ]);\n\n  const handleApplyClick = useCallback(() => {\n    setConfirmOpen(true);\n  }, []);\n\n  const handleConfirmCancel = useCallback(() => {\n    setConfirmOpen(false);\n  }, []);\n\n  const handleConfirmApply = useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      setConfirmOpen(false);\n      onApplyRecommendation?.(event);\n    },\n    [onApplyRecommendation],\n  );\n\n  return (\n    <Grid container>\n      <Grid item xs={12}>\n        <ContainerInfoCard\n          containerData={restProps.containerData}\n          recommendationTerm={restProps.recommendationTerm}\n          onRecommendationTermChange={restProps.onRecommendationTermChange}\n        />\n      </Grid>\n\n      <Grid item xs={6}>\n        <CodeInfoCard\n          cardTitle=\"Current configuration\"\n          yamlCodeData={restProps.currentConfiguration}\n        />\n      </Grid>\n      <Grid item xs={6}>\n        <CodeInfoCard\n          cardTitle=\"Recommended configuration\"\n          showCopyCodeButton\n          yamlCodeData={restProps.recommendedConfiguration}\n          action={\n            <Tooltip\n              title={tooltipMessage}\n              disableHoverListener={!isButtonDisabled}\n              disableFocusListener={!isButtonDisabled}\n              disableTouchListener={!isButtonDisabled}\n            >\n              <Box component=\"span\" display=\"inline-block\">\n                <Button\n                  variant=\"contained\"\n                  color=\"primary\"\n                  onClick={handleApplyClick}\n                  disabled={isButtonDisabled}\n                >\n                  Apply recommendation\n                </Button>\n              </Box>\n            </Tooltip>\n          }\n        />\n      </Grid>\n\n      <Grid item xs={6}>\n        <ChartInfoCard\n          title=\"CPU utilization\"\n          chartData={restProps.chartData}\n          recommendationTerm={restProps.recommendationTerm}\n          optimizationType={restProps.optimizationType}\n          resourceType={RecommendationType.cpu}\n        />\n      </Grid>\n      <Grid item xs={6}>\n        <ChartInfoCard\n          title=\"Memory utilization\"\n          chartData={restProps.chartData}\n          recommendationTerm={restProps.recommendationTerm}\n          optimizationType={restProps.optimizationType}\n          resourceType={RecommendationType.memory}\n        />\n      </Grid>\n\n      <Dialog open={confirmOpen} onClose={handleConfirmCancel}>\n        <DialogTitle>Apply recommendation?</DialogTitle>\n        <DialogContent>\n          <DialogContentText>\n            This will execute a workflow to modify the resource configuration on\n            the target cluster. This action cannot be easily undone. Are you\n            sure you want to proceed?\n          </DialogContentText>\n        </DialogContent>\n        <DialogActions>\n          <Button onClick={handleConfirmCancel} color=\"default\">\n            Cancel\n          </Button>\n          <Button\n            onClick={handleConfirmApply}\n            color=\"primary\"\n            variant=\"contained\"\n          >\n            Apply\n          </Button>\n        </DialogActions>\n      </Dialog>\n    </Grid>\n  );\n};\nOptimizationEngineTab.displayName = 'OptimizationEngineTab';\n"],"names":[],"mappings":"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"}

package/dist/pages/optimizations-breakdown/components/optimization-engine-tab/components/CodeInfoCard.esm.js

@@ -1,4 +1,5 @@
-import React, { useMemo } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
 import YAML from 'yaml';
 import { InfoCard, CodeSnippet } from '@backstage/core-components';
 import { InfoCardTitle } from '../../../../../components/InfoCardTitle.esm.js';
@@ -23,14 +24,14 @@ const CodeInfoCard = (props) => {
     () => generateYAMLCode(yamlCodeData),
     [yamlCodeData]
   );
-  return /* @__PURE__ */ React.createElement(InfoCard, { title: /* @__PURE__ */ React.createElement(InfoCardTitle, { title: cardTitle }), action: props.action }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(InfoCard, { title: /* @__PURE__ */ jsx(InfoCardTitle, { title: cardTitle }), action: props.action, children: /* @__PURE__ */ jsx(
     CodeSnippet,
     {
       text: YAMLCode,
       language: "yaml",
       showCopyCodeButton
     }
-  ));
+  ) });
 };
 
 export { CodeInfoCard };

package/dist/pages/optimizations-breakdown/components/optimization-engine-tab/components/CodeInfoCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeInfoCard.esm.js","sources":["../../../../../../src/pages/optimizations-breakdown/components/optimization-engine-tab/components/CodeInfoCard.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useMemo } from 'react';\nimport YAML from 'yaml';\nimport { CodeSnippet, InfoCard } from '@backstage/core-components';\nimport { YamlCodeData } from '../../../models/YamlCodeData';\nimport { InfoCardTitle } from '../../../../../components/InfoCardTitle';\n\nconst generateYAMLCode = (yamlCodeData?: YamlCodeData) => {\n  const yamlCode = {\n    limits: {\n      cpu: yamlCodeData?.limits.cpu ?? '-',\n      memory: yamlCodeData?.limits.memory ?? '-',\n    },\n    requests: {\n      cpu: yamlCodeData?.requests.cpu ?? '-',\n      memory: yamlCodeData?.requests.memory ?? '-',\n    },\n  };\n\n  const yamlCodeString = YAML.stringify(yamlCode).replace(/\"/g, ''); // prettify;\n\n  return yamlCodeString;\n};\n\ntype InfoCardProps = Parameters<typeof InfoCard>[0];\n\ninterface CodeInfoCardProps {\n  cardTitle: string;\n  showCopyCodeButton?: boolean;\n  yamlCodeData?: YamlCodeData;\n  action?: InfoCardProps['action'];\n}\n\nexport const CodeInfoCard: React.FC<CodeInfoCardProps> = props => {\n  const { cardTitle, showCopyCodeButton = false, yamlCodeData } = props;\n\n  const YAMLCode = useMemo(\n    () => generateYAMLCode(yamlCodeData),\n    [yamlCodeData],\n  );\n\n  return (\n    <InfoCard title={<InfoCardTitle title={cardTitle} />} action={props.action}>\n      <CodeSnippet\n        text={YAMLCode}\n        language=\"yaml\"\n        showCopyCodeButton={showCopyCodeButton}\n      />\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":";;;;;AAsBA,MAAM,gBAAA,GAAmB,CAAC,YAAA,KAAgC;AACxD,EAAA,MAAM,QAAA,GAAW;AAAA,IACf,MAAA,EAAQ;AAAA,MACN,GAAA,EAAK,YAAA,EAAc,MAAA,CAAO,GAAA,IAAO,GAAA;AAAA,MACjC,MAAA,EAAQ,YAAA,EAAc,MAAA,CAAO,MAAA,IAAU;AAAA,KACzC;AAAA,IACA,QAAA,EAAU;AAAA,MACR,GAAA,EAAK,YAAA,EAAc,QAAA,CAAS,GAAA,IAAO,GAAA;AAAA,MACnC,MAAA,EAAQ,YAAA,EAAc,QAAA,CAAS,MAAA,IAAU;AAAA;AAC3C,GACF;AAEA,EAAA,MAAM,iBAAiB,IAAA,CAAK,SAAA,CAAU,QAAQ,CAAA,CAAE,OAAA,CAAQ,MAAM,EAAE,CAAA;AAEhE,EAAA,OAAO,cAAA;AACT,CAAA;AAWO,MAAM,eAA4C,CAAA,KAAA,KAAS;AAChE,EAAA,MAAM,EAAE,SAAA,EAAW,kBAAA,GAAqB,KAAA,EAAO,cAAa,GAAI,KAAA;AAEhE,EAAA,MAAM,QAAA,GAAW,OAAA;AAAA,IACf,MAAM,iBAAiB,YAAY,CAAA;AAAA,IACnC,CAAC,YAAY;AAAA,GACf;AAEA,EAAA,uBACE,KAAA,CAAA,aAAA,CAAC,QAAA,EAAA,EAAS,KAAA,kBAAO,KAAA,CAAA,aAAA,CAAC,aAAA,EAAA,EAAc,OAAO,SAAA,EAAW,CAAA,EAAI,MAAA,EAAQ,KAAA,CAAM,MAAA,EAAA,kBAClE,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAM,QAAA;AAAA,MACN,QAAA,EAAS,MAAA;AAAA,MACT;AAAA;AAAA,GAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CodeInfoCard.esm.js","sources":["../../../../../../src/pages/optimizations-breakdown/components/optimization-engine-tab/components/CodeInfoCard.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { default as React, useMemo } from 'react';\nimport YAML from 'yaml';\nimport { CodeSnippet, InfoCard } from '@backstage/core-components';\nimport { YamlCodeData } from '../../../models/YamlCodeData';\nimport { InfoCardTitle } from '../../../../../components/InfoCardTitle';\n\nconst generateYAMLCode = (yamlCodeData?: YamlCodeData) => {\n  const yamlCode = {\n    limits: {\n      cpu: yamlCodeData?.limits.cpu ?? '-',\n      memory: yamlCodeData?.limits.memory ?? '-',\n    },\n    requests: {\n      cpu: yamlCodeData?.requests.cpu ?? '-',\n      memory: yamlCodeData?.requests.memory ?? '-',\n    },\n  };\n\n  const yamlCodeString = YAML.stringify(yamlCode).replace(/\"/g, ''); // prettify;\n\n  return yamlCodeString;\n};\n\ntype InfoCardProps = Parameters<typeof InfoCard>[0];\n\ninterface CodeInfoCardProps {\n  cardTitle: string;\n  showCopyCodeButton?: boolean;\n  yamlCodeData?: YamlCodeData;\n  action?: InfoCardProps['action'];\n}\n\nexport const CodeInfoCard: React.FC<CodeInfoCardProps> = props => {\n  const { cardTitle, showCopyCodeButton = false, yamlCodeData } = props;\n\n  const YAMLCode = useMemo(\n    () => generateYAMLCode(yamlCodeData),\n    [yamlCodeData],\n  );\n\n  return (\n    <InfoCard title={<InfoCardTitle title={cardTitle} />} action={props.action}>\n      <CodeSnippet\n        text={YAMLCode}\n        language=\"yaml\"\n        showCopyCodeButton={showCopyCodeButton}\n      />\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAsBA,MAAM,gBAAA,GAAmB,CAAC,YAAA,KAAgC;AACxD,EAAA,MAAM,QAAA,GAAW;AAAA,IACf,MAAA,EAAQ;AAAA,MACN,GAAA,EAAK,YAAA,EAAc,MAAA,CAAO,GAAA,IAAO,GAAA;AAAA,MACjC,MAAA,EAAQ,YAAA,EAAc,MAAA,CAAO,MAAA,IAAU;AAAA,KACzC;AAAA,IACA,QAAA,EAAU;AAAA,MACR,GAAA,EAAK,YAAA,EAAc,QAAA,CAAS,GAAA,IAAO,GAAA;AAAA,MACnC,MAAA,EAAQ,YAAA,EAAc,QAAA,CAAS,MAAA,IAAU;AAAA;AAC3C,GACF;AAEA,EAAA,MAAM,iBAAiB,IAAA,CAAK,SAAA,CAAU,QAAQ,CAAA,CAAE,OAAA,CAAQ,MAAM,EAAE,CAAA;AAEhE,EAAA,OAAO,cAAA;AACT,CAAA;AAWO,MAAM,eAA4C,CAAA,KAAA,KAAS;AAChE,EAAA,MAAM,EAAE,SAAA,EAAW,kBAAA,GAAqB,KAAA,EAAO,cAAa,GAAI,KAAA;AAEhE,EAAA,MAAM,QAAA,GAAW,OAAA;AAAA,IACf,MAAM,iBAAiB,YAAY,CAAA;AAAA,IACnC,CAAC,YAAY;AAAA,GACf;AAEA,EAAA,uBACE,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,kBAAO,GAAA,CAAC,aAAA,EAAA,EAAc,OAAO,SAAA,EAAW,CAAA,EAAI,MAAA,EAAQ,KAAA,CAAM,MAAA,EAClE,QAAA,kBAAA,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAM,QAAA;AAAA,MACN,QAAA,EAAS,MAAA;AAAA,MACT;AAAA;AAAA,GACF,EACF,CAAA;AAEJ;;;;"}

package/dist/pages/optimizations-breakdown/components/optimization-engine-tab/components/ContainerInfoCard.esm.js

@@ -1,6 +1,6 @@
-import React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { InfoCard } from '@backstage/core-components';
-import { makeStyles, FormControl, InputLabel, Select, MenuItem, Grid, Typography } from '@material-ui/core';
+import { makeStyles, Grid, Typography, FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
 
 const useStyles = makeStyles((theme) => ({
   value: {
@@ -21,27 +21,35 @@ const useStyles = makeStyles((theme) => ({
 }));
 const ContainerInfoCard = (props) => {
   const classes = useStyles();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     InfoCard,
     {
       title: "Details",
-      action: /* @__PURE__ */ React.createElement(FormControl, { variant: "outlined", style: { top: "0.4rem" } }, /* @__PURE__ */ React.createElement(InputLabel, { id: "term-label" }, "Term"), /* @__PURE__ */ React.createElement(
-        Select,
-        {
-          labelId: "term-label",
-          id: "term",
-          value: props.recommendationTerm,
-          onChange: props.onRecommendationTermChange,
-          label: "Term"
-        },
-        /* @__PURE__ */ React.createElement(MenuItem, { value: "shortTerm" }, "Last 24 hrs"),
-        /* @__PURE__ */ React.createElement(MenuItem, { value: "mediumTerm" }, "Last 7 days"),
-        /* @__PURE__ */ React.createElement(MenuItem, { value: "longTerm" }, "Last 15 days")
-      ))
-    },
-    /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 2 }, props.containerData.map((item) => [
-      /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 2, key: item.key }, /* @__PURE__ */ React.createElement(Typography, { variant: "h2", className: classes.label }, item.key), /* @__PURE__ */ React.createElement(Typography, { variant: "body1", className: classes.value }, item.value))
-    ]))
+      action: /* @__PURE__ */ jsxs(FormControl, { variant: "outlined", style: { top: "0.4rem" }, children: [
+        /* @__PURE__ */ jsx(InputLabel, { id: "term-label", children: "Term" }),
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            labelId: "term-label",
+            id: "term",
+            value: props.recommendationTerm,
+            onChange: props.onRecommendationTermChange,
+            label: "Term",
+            children: [
+              /* @__PURE__ */ jsx(MenuItem, { value: "shortTerm", children: "Last 24 hrs" }),
+              /* @__PURE__ */ jsx(MenuItem, { value: "mediumTerm", children: "Last 7 days" }),
+              /* @__PURE__ */ jsx(MenuItem, { value: "longTerm", children: "Last 15 days" })
+            ]
+          }
+        )
+      ] }),
+      children: /* @__PURE__ */ jsx(Grid, { container: true, spacing: 2, children: props.containerData.map((item) => [
+        /* @__PURE__ */ jsxs(Grid, { item: true, xs: 2, children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "h2", className: classes.label, children: item.key }),
+          /* @__PURE__ */ jsx(Typography, { variant: "body1", className: classes.value, children: item.value })
+        ] }, item.key)
+      ]) })
+    }
   );
 };
 ContainerInfoCard.displayName = "ContainerInfoCard";

package/dist/pages/optimizations-breakdown/components/optimization-engine-tab/components/ContainerInfoCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContainerInfoCard.esm.js","sources":["../../../../../../src/pages/optimizations-breakdown/components/optimization-engine-tab/components/ContainerInfoCard.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport { InfoCard } from '@backstage/core-components';\nimport {\n  Grid,\n  Typography,\n  FormControl,\n  Select,\n  MenuItem,\n  InputLabel,\n  makeStyles,\n} from '@material-ui/core';\nimport { Interval } from '../../../models/ChartEnums';\n\nconst useStyles = makeStyles(theme => ({\n  value: {\n    fontWeight: 'bold',\n    overflow: 'hidden',\n    lineHeight: '24px',\n    wordBreak: 'break-word',\n  },\n  label: {\n    color: theme.palette.text.secondary,\n    textTransform: 'uppercase',\n    fontSize: '10px',\n    fontWeight: 'bold',\n    letterSpacing: 0.5,\n    overflow: 'hidden',\n    whiteSpace: 'nowrap',\n  },\n}));\n\ninterface ContainerInfoCardProps {\n  containerData: Array<{ key: string; value?: string }>;\n  onRecommendationTermChange: (\n    event: React.ChangeEvent<{\n      name?: string;\n      value: unknown;\n    }>,\n    child: React.ReactNode,\n  ) => void;\n  recommendationTerm: Interval;\n}\n\nexport const ContainerInfoCard = (props: ContainerInfoCardProps) => {\n  const classes = useStyles();\n\n  return (\n    <InfoCard\n      title=\"Details\"\n      action={\n        <FormControl variant=\"outlined\" style={{ top: '0.4rem' }}>\n          <InputLabel id=\"term-label\">Term</InputLabel>\n          <Select\n            labelId=\"term-label\"\n            id=\"term\"\n            value={props.recommendationTerm}\n            onChange={props.onRecommendationTermChange}\n            label=\"Term\"\n          >\n            <MenuItem value=\"shortTerm\">Last 24 hrs</MenuItem>\n            <MenuItem value=\"mediumTerm\">Last 7 days</MenuItem>\n            <MenuItem value=\"longTerm\">Last 15 days</MenuItem>\n          </Select>\n        </FormControl>\n      }\n    >\n      <Grid container spacing={2}>\n        {props.containerData.map(item => [\n          <Grid item xs={2} key={item.key}>\n            <Typography variant=\"h2\" className={classes.label}>\n              {item.key}\n            </Typography>\n            <Typography variant=\"body1\" className={classes.value}>\n              {item.value}\n            </Typography>\n          </Grid>,\n        ])}\n      </Grid>\n    </InfoCard>\n  );\n};\nContainerInfoCard.displayName = 'ContainerInfoCard';\n"],"names":[],"mappings":";;;;AA6BA,MAAM,SAAA,GAAY,WAAW,CAAA,KAAA,MAAU;AAAA,EACrC,KAAA,EAAO;AAAA,IACL,UAAA,EAAY,MAAA;AAAA,IACZ,QAAA,EAAU,QAAA;AAAA,IACV,UAAA,EAAY,MAAA;AAAA,IACZ,SAAA,EAAW;AAAA,GACb;AAAA,EACA,KAAA,EAAO;AAAA,IACL,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,IAAA,CAAK,SAAA;AAAA,IAC1B,aAAA,EAAe,WAAA;AAAA,IACf,QAAA,EAAU,MAAA;AAAA,IACV,UAAA,EAAY,MAAA;AAAA,IACZ,aAAA,EAAe,GAAA;AAAA,IACf,QAAA,EAAU,QAAA;AAAA,IACV,UAAA,EAAY;AAAA;AAEhB,CAAA,CAAE,CAAA;AAcK,MAAM,iBAAA,GAAoB,CAAC,KAAA,KAAkC;AAClE,EAAA,MAAM,UAAU,SAAA,EAAU;AAE1B,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,SAAA;AAAA,MACN,MAAA,kBACE,KAAA,CAAA,aAAA,CAAC,WAAA,EAAA,EAAY,OAAA,EAAQ,YAAW,KAAA,EAAO,EAAE,GAAA,EAAK,QAAA,sBAC5C,KAAA,CAAA,aAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,YAAA,EAAA,EAAa,MAAI,CAAA,kBAChC,KAAA,CAAA,aAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAQ,YAAA;AAAA,UACR,EAAA,EAAG,MAAA;AAAA,UACH,OAAO,KAAA,CAAM,kBAAA;AAAA,UACb,UAAU,KAAA,CAAM,0BAAA;AAAA,UAChB,KAAA,EAAM;AAAA,SAAA;AAAA,wBAEN,KAAA,CAAA,aAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAM,WAAA,EAAA,EAAY,aAAW,CAAA;AAAA,wBACvC,KAAA,CAAA,aAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAM,YAAA,EAAA,EAAa,aAAW,CAAA;AAAA,wBACxC,KAAA,CAAA,aAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAM,UAAA,EAAA,EAAW,cAAY;AAAA,OAE3C;AAAA,KAAA;AAAA,oBAGF,KAAA,CAAA,aAAA,CAAC,QAAK,SAAA,EAAS,IAAA,EAAC,SAAS,CAAA,EAAA,EACtB,KAAA,CAAM,aAAA,CAAc,GAAA,CAAI,CAAA,IAAA,KAAQ;AAAA,sBAC/B,KAAA,CAAA,aAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAI,IAAA,EAAC,EAAA,EAAI,CAAA,EAAG,GAAA,EAAK,IAAA,CAAK,GAAA,EAAA,kBAC1B,KAAA,CAAA,aAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,IAAA,EAAK,SAAA,EAAW,OAAA,CAAQ,KAAA,EAAA,EACzC,IAAA,CAAK,GACR,CAAA,kBACA,KAAA,CAAA,aAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EAAQ,SAAA,EAAW,OAAA,CAAQ,KAAA,EAAA,EAC5C,IAAA,CAAK,KACR,CACF;AAAA,KACD,CACH;AAAA,GACF;AAEJ;AACA,iBAAA,CAAkB,WAAA,GAAc,mBAAA;;;;"}
+{"version":3,"file":"ContainerInfoCard.esm.js","sources":["../../../../../../src/pages/optimizations-breakdown/components/optimization-engine-tab/components/ContainerInfoCard.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { default as React } from 'react';\nimport { InfoCard } from '@backstage/core-components';\nimport {\n  Grid,\n  Typography,\n  FormControl,\n  Select,\n  MenuItem,\n  InputLabel,\n  makeStyles,\n} from '@material-ui/core';\nimport { Interval } from '../../../models/ChartEnums';\n\nconst useStyles = makeStyles(theme => ({\n  value: {\n    fontWeight: 'bold',\n    overflow: 'hidden',\n    lineHeight: '24px',\n    wordBreak: 'break-word',\n  },\n  label: {\n    color: theme.palette.text.secondary,\n    textTransform: 'uppercase',\n    fontSize: '10px',\n    fontWeight: 'bold',\n    letterSpacing: 0.5,\n    overflow: 'hidden',\n    whiteSpace: 'nowrap',\n  },\n}));\n\ninterface ContainerInfoCardProps {\n  containerData: Array<{ key: string; value?: string }>;\n  onRecommendationTermChange: (\n    event: React.ChangeEvent<{\n      name?: string;\n      value: unknown;\n    }>,\n    child: React.ReactNode,\n  ) => void;\n  recommendationTerm: Interval;\n}\n\nexport const ContainerInfoCard = (props: ContainerInfoCardProps) => {\n  const classes = useStyles();\n\n  return (\n    <InfoCard\n      title=\"Details\"\n      action={\n        <FormControl variant=\"outlined\" style={{ top: '0.4rem' }}>\n          <InputLabel id=\"term-label\">Term</InputLabel>\n          <Select\n            labelId=\"term-label\"\n            id=\"term\"\n            value={props.recommendationTerm}\n            onChange={props.onRecommendationTermChange}\n            label=\"Term\"\n          >\n            <MenuItem value=\"shortTerm\">Last 24 hrs</MenuItem>\n            <MenuItem value=\"mediumTerm\">Last 7 days</MenuItem>\n            <MenuItem value=\"longTerm\">Last 15 days</MenuItem>\n          </Select>\n        </FormControl>\n      }\n    >\n      <Grid container spacing={2}>\n        {props.containerData.map(item => [\n          <Grid item xs={2} key={item.key}>\n            <Typography variant=\"h2\" className={classes.label}>\n              {item.key}\n            </Typography>\n            <Typography variant=\"body1\" className={classes.value}>\n              {item.value}\n            </Typography>\n          </Grid>,\n        ])}\n      </Grid>\n    </InfoCard>\n  );\n};\nContainerInfoCard.displayName = 'ContainerInfoCard';\n"],"names":[],"mappings":";;;;AA6BA,MAAM,SAAA,GAAY,WAAW,CAAA,KAAA,MAAU;AAAA,EACrC,KAAA,EAAO;AAAA,IACL,UAAA,EAAY,MAAA;AAAA,IACZ,QAAA,EAAU,QAAA;AAAA,IACV,UAAA,EAAY,MAAA;AAAA,IACZ,SAAA,EAAW;AAAA,GACb;AAAA,EACA,KAAA,EAAO;AAAA,IACL,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,IAAA,CAAK,SAAA;AAAA,IAC1B,aAAA,EAAe,WAAA;AAAA,IACf,QAAA,EAAU,MAAA;AAAA,IACV,UAAA,EAAY,MAAA;AAAA,IACZ,aAAA,EAAe,GAAA;AAAA,IACf,QAAA,EAAU,QAAA;AAAA,IACV,UAAA,EAAY;AAAA;AAEhB,CAAA,CAAE,CAAA;AAcK,MAAM,iBAAA,GAAoB,CAAC,KAAA,KAAkC;AAClE,EAAA,MAAM,UAAU,SAAA,EAAU;AAE1B,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,SAAA;AAAA,MACN,MAAA,uBACG,WAAA,EAAA,EAAY,OAAA,EAAQ,YAAW,KAAA,EAAO,EAAE,GAAA,EAAK,QAAA,EAAS,EACrD,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,YAAA,EAAa,QAAA,EAAA,MAAA,EAAI,CAAA;AAAA,wBAChC,IAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAQ,YAAA;AAAA,YACR,EAAA,EAAG,MAAA;AAAA,YACH,OAAO,KAAA,CAAM,kBAAA;AAAA,YACb,UAAU,KAAA,CAAM,0BAAA;AAAA,YAChB,KAAA,EAAM,MAAA;AAAA,YAEN,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAM,WAAA,EAAY,QAAA,EAAA,aAAA,EAAW,CAAA;AAAA,8BACvC,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAM,YAAA,EAAa,QAAA,EAAA,aAAA,EAAW,CAAA;AAAA,8BACxC,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAM,UAAA,EAAW,QAAA,EAAA,cAAA,EAAY;AAAA;AAAA;AAAA;AACzC,OAAA,EACF,CAAA;AAAA,MAGF,QAAA,kBAAA,GAAA,CAAC,QAAK,SAAA,EAAS,IAAA,EAAC,SAAS,CAAA,EACtB,QAAA,EAAA,KAAA,CAAM,aAAA,CAAc,GAAA,CAAI,CAAA,IAAA,KAAQ;AAAA,wBAC/B,IAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAI,IAAA,EAAC,IAAI,CAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,cAAW,OAAA,EAAQ,IAAA,EAAK,WAAW,OAAA,CAAQ,KAAA,EACzC,eAAK,GAAA,EACR,CAAA;AAAA,0BACA,GAAA,CAAC,cAAW,OAAA,EAAQ,OAAA,EAAQ,WAAW,OAAA,CAAQ,KAAA,EAC5C,eAAK,KAAA,EACR;AAAA,SAAA,EAAA,EANqB,KAAK,GAO5B;AAAA,OACD,CAAA,EACH;AAAA;AAAA,GACF;AAEJ;AACA,iBAAA,CAAkB,WAAA,GAAc,mBAAA;;;;"}

package/dist/pages/optimizations-breakdown/components/optimization-engine-tab/components/chart-info-card/ChartInfoCard.esm.js

@@ -1,4 +1,5 @@
-import React, { useMemo } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
 import { InfoCard } from '@backstage/core-components';
 import { UsageType } from '../../../../models/ChartEnums.esm.js';
 import { InfoCardTitle } from '../../../../../../components/InfoCardTitle.esm.js';
@@ -9,7 +10,7 @@ const ChartInfoCard = (props) => {
     () => props.resourceType === "cpu" ? UsageType.cpuUsage : UsageType.memoryUsage,
     [props.resourceType]
   );
-  return /* @__PURE__ */ React.createElement(InfoCard, { title: /* @__PURE__ */ React.createElement(InfoCardTitle, { title: props.title }) }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(InfoCard, { title: /* @__PURE__ */ jsx(InfoCardTitle, { title: props.title }), children: /* @__PURE__ */ jsx(
     IntlBreakdownChart,
     {
       recommendationTerm: props.recommendationTerm,
@@ -18,7 +19,7 @@ const ChartInfoCard = (props) => {
       recommendationType: props.resourceType,
       optimizationType: props.optimizationType
     }
-  ));
+  ) });
 };
 ChartInfoCard.displayName = "ChartInfoCard";
 

package/dist/pages/optimizations-breakdown/components/optimization-engine-tab/components/chart-info-card/ChartInfoCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChartInfoCard.esm.js","sources":["../../../../../../../src/pages/optimizations-breakdown/components/optimization-engine-tab/components/chart-info-card/ChartInfoCard.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useMemo } from 'react';\nimport { InfoCard } from '@backstage/core-components';\nimport type { RecommendationBoxPlots } from '@red-hat-developer-hub/plugin-cost-management-common/models';\nimport {\n  UsageType,\n  RecommendationType,\n  OptimizationType,\n  Interval,\n} from '../../../../models/ChartEnums';\nimport { InfoCardTitle } from '../../../../../../components/InfoCardTitle';\nimport { IntlBreakdownChart } from './components/IntlBreakdownChart';\n\ninterface ChartInfoCardProps {\n  title: React.ReactNode;\n  recommendationTerm: Interval;\n  chartData: RecommendationBoxPlots;\n  resourceType: RecommendationType;\n  optimizationType: OptimizationType;\n}\n\nexport const ChartInfoCard = (props: ChartInfoCardProps) => {\n  const usageType = useMemo(\n    () =>\n      props.resourceType === 'cpu' ? UsageType.cpuUsage : UsageType.memoryUsage,\n    [props.resourceType],\n  );\n\n  return (\n    <InfoCard title={<InfoCardTitle title={props.title} />}>\n      <IntlBreakdownChart\n        recommendationTerm={props.recommendationTerm}\n        value={props.chartData}\n        usageType={usageType}\n        recommendationType={props.resourceType}\n        optimizationType={props.optimizationType}\n      />\n    </InfoCard>\n  );\n};\nChartInfoCard.displayName = 'ChartInfoCard';\n"],"names":[],"mappings":";;;;;;AAoCO,MAAM,aAAA,GAAgB,CAAC,KAAA,KAA8B;AAC1D,EAAA,MAAM,SAAA,GAAY,OAAA;AAAA,IAChB,MACE,KAAA,CAAM,YAAA,KAAiB,KAAA,GAAQ,SAAA,CAAU,WAAW,SAAA,CAAU,WAAA;AAAA,IAChE,CAAC,MAAM,YAAY;AAAA,GACrB;AAEA,EAAA,uBACE,KAAA,CAAA,aAAA,CAAC,YAAS,KAAA,kBAAO,KAAA,CAAA,aAAA,CAAC,iBAAc,KAAA,EAAO,KAAA,CAAM,OAAO,CAAA,EAAA,kBAClD,KAAA,CAAA,aAAA;AAAA,IAAC,kBAAA;AAAA,IAAA;AAAA,MACC,oBAAoB,KAAA,CAAM,kBAAA;AAAA,MAC1B,OAAO,KAAA,CAAM,SAAA;AAAA,MACb,SAAA;AAAA,MACA,oBAAoB,KAAA,CAAM,YAAA;AAAA,MAC1B,kBAAkB,KAAA,CAAM;AAAA;AAAA,GAE5B,CAAA;AAEJ;AACA,aAAA,CAAc,WAAA,GAAc,eAAA;;;;"}
+{"version":3,"file":"ChartInfoCard.esm.js","sources":["../../../../../../../src/pages/optimizations-breakdown/components/optimization-engine-tab/components/chart-info-card/ChartInfoCard.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { default as React, useMemo } from 'react';\nimport { InfoCard } from '@backstage/core-components';\nimport type { RecommendationBoxPlots } from '@red-hat-developer-hub/plugin-cost-management-common/models';\nimport {\n  UsageType,\n  RecommendationType,\n  OptimizationType,\n  Interval,\n} from '../../../../models/ChartEnums';\nimport { InfoCardTitle } from '../../../../../../components/InfoCardTitle';\nimport { IntlBreakdownChart } from './components/IntlBreakdownChart';\n\ninterface ChartInfoCardProps {\n  title: React.ReactNode;\n  recommendationTerm: Interval;\n  chartData: RecommendationBoxPlots;\n  resourceType: RecommendationType;\n  optimizationType: OptimizationType;\n}\n\nexport const ChartInfoCard = (props: ChartInfoCardProps) => {\n  const usageType = useMemo(\n    () =>\n      props.resourceType === 'cpu' ? UsageType.cpuUsage : UsageType.memoryUsage,\n    [props.resourceType],\n  );\n\n  return (\n    <InfoCard title={<InfoCardTitle title={props.title} />}>\n      <IntlBreakdownChart\n        recommendationTerm={props.recommendationTerm}\n        value={props.chartData}\n        usageType={usageType}\n        recommendationType={props.resourceType}\n        optimizationType={props.optimizationType}\n      />\n    </InfoCard>\n  );\n};\nChartInfoCard.displayName = 'ChartInfoCard';\n"],"names":[],"mappings":";;;;;;;AAoCO,MAAM,aAAA,GAAgB,CAAC,KAAA,KAA8B;AAC1D,EAAA,MAAM,SAAA,GAAY,OAAA;AAAA,IAChB,MACE,KAAA,CAAM,YAAA,KAAiB,KAAA,GAAQ,SAAA,CAAU,WAAW,SAAA,CAAU,WAAA;AAAA,IAChE,CAAC,MAAM,YAAY;AAAA,GACrB;AAEA,EAAA,uBACE,GAAA,CAAC,YAAS,KAAA,kBAAO,GAAA,CAAC,iBAAc,KAAA,EAAO,KAAA,CAAM,OAAO,CAAA,EAClD,QAAA,kBAAA,GAAA;AAAA,IAAC,kBAAA;AAAA,IAAA;AAAA,MACC,oBAAoB,KAAA,CAAM,kBAAA;AAAA,MAC1B,OAAO,KAAA,CAAM,SAAA;AAAA,MACb,SAAA;AAAA,MACA,oBAAoB,KAAA,CAAM,YAAA;AAAA,MAC1B,kBAAkB,KAAA,CAAM;AAAA;AAAA,GAC1B,EACF,CAAA;AAEJ;AACA,aAAA,CAAc,WAAA,GAAc,eAAA;;;;"}

package/dist/pages/optimizations-breakdown/components/optimization-engine-tab/components/chart-info-card/components/IntlBreakdownChart.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { IntlProvider } from 'react-intl';
 import { ResourceType } from '../../../../../models/ChartEnums.esm.js';
 import { createUsageDatum, createRecommendationDatum } from './intl-breakdown-chart/components/optimizations-breakdown-chart/components/optimizations-breakdown-chart/utils/chart-data-format.esm.js';
@@ -34,7 +34,7 @@ const IntlBreakdownChart = (props) => {
     optimizationType,
     value.recommendations
   );
-  return /* @__PURE__ */ React.createElement(IntlProvider, { locale: "en", messages: messagesData.en }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(IntlProvider, { locale: "en", messages: messagesData.en, children: /* @__PURE__ */ jsx(
     OptimizationsBreakdownChart,
     {
       baseHeight: 350,
@@ -43,7 +43,7 @@ const IntlBreakdownChart = (props) => {
       requestData: requestDatum,
       usageData: usageDatum
     }
-  ));
+  ) });
 };
 IntlBreakdownChart.displayName = "IntlBreakdownChart";
 

package/dist/pages/optimizations-breakdown/components/optimization-engine-tab/components/chart-info-card/components/IntlBreakdownChart.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"IntlBreakdownChart.esm.js","sources":["../../../../../../../../src/pages/optimizations-breakdown/components/optimization-engine-tab/components/chart-info-card/components/IntlBreakdownChart.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport { IntlProvider } from 'react-intl';\nimport { RecommendationBoxPlots } from '@red-hat-developer-hub/plugin-cost-management-common/models';\nimport {\n  Interval,\n  OptimizationType,\n  RecommendationType,\n  ResourceType,\n  UsageType,\n} from '../../../../../models/ChartEnums';\nimport {\n  createRecommendationDatum,\n  createUsageDatum,\n} from './intl-breakdown-chart/components/optimizations-breakdown-chart/components/optimizations-breakdown-chart/utils/chart-data-format';\nimport { OptimizationsBreakdownChart } from './intl-breakdown-chart/components/optimizations-breakdown-chart/components/optimizations-breakdown-chart/OptimizationsBreakdownChart';\nimport messagesData from './intl-breakdown-chart/components/optimizations-breakdown-chart/components/optimizations-breakdown-chart/i18n/data.json';\n\nexport const IntlBreakdownChart = (props: {\n  usageType: UsageType;\n  recommendationType: RecommendationType;\n  optimizationType: OptimizationType;\n  recommendationTerm: Interval;\n  value: RecommendationBoxPlots;\n}) => {\n  const {\n    usageType,\n    recommendationType,\n    optimizationType,\n    recommendationTerm,\n    value,\n  } = props;\n\n  const usageDatum = createUsageDatum(\n    usageType,\n    recommendationTerm,\n    value.recommendations,\n  );\n\n  const limitDatum = createRecommendationDatum(\n    recommendationTerm,\n    usageDatum,\n    recommendationType,\n    ResourceType.limits,\n    optimizationType,\n    value.recommendations,\n  );\n\n  const requestDatum = createRecommendationDatum(\n    recommendationTerm,\n    usageDatum,\n    recommendationType,\n    ResourceType.requests,\n    optimizationType,\n    value.recommendations,\n  );\n\n  return (\n    <IntlProvider locale=\"en\" messages={messagesData.en}>\n      <OptimizationsBreakdownChart\n        baseHeight={350}\n        name={`utilization-${usageType}`}\n        limitData={limitDatum}\n        requestData={requestDatum}\n        usageData={usageDatum}\n      />\n    </IntlProvider>\n  );\n};\nIntlBreakdownChart.displayName = 'IntlBreakdownChart';\n"],"names":[],"mappings":";;;;;;;AAiCO,MAAM,kBAAA,GAAqB,CAAC,KAAA,KAM7B;AACJ,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,kBAAA;AAAA,IACA,gBAAA;AAAA,IACA,kBAAA;AAAA,IACA;AAAA,GACF,GAAI,KAAA;AAEJ,EAAA,MAAM,UAAA,GAAa,gBAAA;AAAA,IACjB,SAAA;AAAA,IACA,kBAAA;AAAA,IACA,KAAA,CAAM;AAAA,GACR;AAEA,EAAA,MAAM,UAAA,GAAa,yBAAA;AAAA,IACjB,kBAAA;AAAA,IACA,UAAA;AAAA,IACA,kBAAA;AAAA,IACA,YAAA,CAAa,MAAA;AAAA,IACb,gBAAA;AAAA,IACA,KAAA,CAAM;AAAA,GACR;AAEA,EAAA,MAAM,YAAA,GAAe,yBAAA;AAAA,IACnB,kBAAA;AAAA,IACA,UAAA;AAAA,IACA,kBAAA;AAAA,IACA,YAAA,CAAa,QAAA;AAAA,IACb,gBAAA;AAAA,IACA,KAAA,CAAM;AAAA,GACR;AAEA,EAAA,2CACG,YAAA,EAAA,EAAa,MAAA,EAAO,IAAA,EAAK,QAAA,EAAU,aAAa,EAAA,EAAA,kBAC/C,KAAA,CAAA,aAAA;AAAA,IAAC,2BAAA;AAAA,IAAA;AAAA,MACC,UAAA,EAAY,GAAA;AAAA,MACZ,IAAA,EAAM,eAAe,SAAS,CAAA,CAAA;AAAA,MAC9B,SAAA,EAAW,UAAA;AAAA,MACX,WAAA,EAAa,YAAA;AAAA,MACb,SAAA,EAAW;AAAA;AAAA,GAEf,CAAA;AAEJ;AACA,kBAAA,CAAmB,WAAA,GAAc,oBAAA;;;;"}
+{"version":3,"file":"IntlBreakdownChart.esm.js","sources":["../../../../../../../../src/pages/optimizations-breakdown/components/optimization-engine-tab/components/chart-info-card/components/IntlBreakdownChart.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { IntlProvider } from 'react-intl';\nimport { RecommendationBoxPlots } from '@red-hat-developer-hub/plugin-cost-management-common/models';\nimport {\n  Interval,\n  OptimizationType,\n  RecommendationType,\n  ResourceType,\n  UsageType,\n} from '../../../../../models/ChartEnums';\nimport {\n  createRecommendationDatum,\n  createUsageDatum,\n} from './intl-breakdown-chart/components/optimizations-breakdown-chart/components/optimizations-breakdown-chart/utils/chart-data-format';\nimport { OptimizationsBreakdownChart } from './intl-breakdown-chart/components/optimizations-breakdown-chart/components/optimizations-breakdown-chart/OptimizationsBreakdownChart';\nimport messagesData from './intl-breakdown-chart/components/optimizations-breakdown-chart/components/optimizations-breakdown-chart/i18n/data.json';\n\nexport const IntlBreakdownChart = (props: {\n  usageType: UsageType;\n  recommendationType: RecommendationType;\n  optimizationType: OptimizationType;\n  recommendationTerm: Interval;\n  value: RecommendationBoxPlots;\n}) => {\n  const {\n    usageType,\n    recommendationType,\n    optimizationType,\n    recommendationTerm,\n    value,\n  } = props;\n\n  const usageDatum = createUsageDatum(\n    usageType,\n    recommendationTerm,\n    value.recommendations,\n  );\n\n  const limitDatum = createRecommendationDatum(\n    recommendationTerm,\n    usageDatum,\n    recommendationType,\n    ResourceType.limits,\n    optimizationType,\n    value.recommendations,\n  );\n\n  const requestDatum = createRecommendationDatum(\n    recommendationTerm,\n    usageDatum,\n    recommendationType,\n    ResourceType.requests,\n    optimizationType,\n    value.recommendations,\n  );\n\n  return (\n    <IntlProvider locale=\"en\" messages={messagesData.en}>\n      <OptimizationsBreakdownChart\n        baseHeight={350}\n        name={`utilization-${usageType}`}\n        limitData={limitDatum}\n        requestData={requestDatum}\n        usageData={usageDatum}\n      />\n    </IntlProvider>\n  );\n};\nIntlBreakdownChart.displayName = 'IntlBreakdownChart';\n"],"names":[],"mappings":";;;;;;;AAgCO,MAAM,kBAAA,GAAqB,CAAC,KAAA,KAM7B;AACJ,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,kBAAA;AAAA,IACA,gBAAA;AAAA,IACA,kBAAA;AAAA,IACA;AAAA,GACF,GAAI,KAAA;AAEJ,EAAA,MAAM,UAAA,GAAa,gBAAA;AAAA,IACjB,SAAA;AAAA,IACA,kBAAA;AAAA,IACA,KAAA,CAAM;AAAA,GACR;AAEA,EAAA,MAAM,UAAA,GAAa,yBAAA;AAAA,IACjB,kBAAA;AAAA,IACA,UAAA;AAAA,IACA,kBAAA;AAAA,IACA,YAAA,CAAa,MAAA;AAAA,IACb,gBAAA;AAAA,IACA,KAAA,CAAM;AAAA,GACR;AAEA,EAAA,MAAM,YAAA,GAAe,yBAAA;AAAA,IACnB,kBAAA;AAAA,IACA,UAAA;AAAA,IACA,kBAAA;AAAA,IACA,YAAA,CAAa,QAAA;AAAA,IACb,gBAAA;AAAA,IACA,KAAA,CAAM;AAAA,GACR;AAEA,EAAA,2BACG,YAAA,EAAA,EAAa,MAAA,EAAO,IAAA,EAAK,QAAA,EAAU,aAAa,EAAA,EAC/C,QAAA,kBAAA,GAAA;AAAA,IAAC,2BAAA;AAAA,IAAA;AAAA,MACC,UAAA,EAAY,GAAA;AAAA,MACZ,IAAA,EAAM,eAAe,SAAS,CAAA,CAAA;AAAA,MAC9B,SAAA,EAAW,UAAA;AAAA,MACX,WAAA,EAAa,YAAA;AAAA,MACb,SAAA,EAAW;AAAA;AAAA,GACb,EACF,CAAA;AAEJ;AACA,kBAAA,CAAmB,WAAA,GAAc,oBAAA;;;;"}