translations and code clean up

x-pack/plugins/ml/public/application/memory_usage/memory_item_colors.ts

@@ -12,7 +12,7 @@ import {
   euiPalettePositive,
   euiPaletteWarm,
 } from '@elastic/eui';
-import { MlSavedObjectType } from '../../../../common/types/saved_objects';
+import { MlSavedObjectType } from '../../../common/types/saved_objects';
 
 type MemoryItem = MlSavedObjectType | 'jvm-heap-size' | 'estimated-available-memory';
 

x-pack/plugins/ml/public/application/memory_usage/memory_tree_map/job_memory_tree_map.tsx

@@ -44,25 +44,30 @@ import {
   EuiFlexItem,
   EuiSpacer,
 } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import { JobMemorySize } from '../../../../common/types/trained_models';
 import { JobType, MlSavedObjectType } from '../../../../common/types/saved_objects';
 import { useTrainedModelsApiService } from '../../services/ml_api_service/trained_models';
 import { LoadingWrapper } from '../../jobs/new_job/pages/components/charts/loading_wrapper';
 import { useFieldFormatter } from '../../contexts/kibana';
-import { getMemoryItemColor } from '../nodes_overview/memory_item_colors';
+
 import { useRefresh } from '../../routing/use_refresh';
+import { getMemoryItemColor } from '../memory_item_colors';
 
 interface Props {
   node?: string;
   type?: MlSavedObjectType;
-  height: string;
+  height?: string;
 }
 
+const DEFAULT_CHART_HEIGHT = '400px';
+
 type TreeMapOptions = EuiComboBoxOptionOption & { objectType: MlSavedObjectType };
 
 export const JobMemoryTreeMap: FC<Props> = ({ node, type, height }) => {
   const bytesFormatter = useFieldFormatter(FIELD_FORMAT_IDS.BYTES);
   const refresh = useRefresh();
+  const chartHeight = height ?? DEFAULT_CHART_HEIGHT;
 
   const trainedModelsApiService = useTrainedModelsApiService();
   const [allData, setAllData] = useState<JobMemorySize[]>([]);
@@ -71,17 +76,23 @@ export const JobMemoryTreeMap: FC<Props> = ({ node, type, height }) => {
 
   const TYPE_OPTIONS: TreeMapOptions[] = [
     {
-      label: 'Anomaly detection jobs',
+      label: i18n.translate('xpack.ml.memoryUsage.treeMap.adLabel', {
+        defaultMessage: 'Anomaly detection jobs',
+      }),
       objectType: 'anomaly-detector',
       color: getMemoryItemColor('anomaly-detector'),
     },
     {
-      label: 'Data frame analytics jobs',
+      label: i18n.translate('xpack.ml.memoryUsage.treeMap.dfaLabel', {
+        defaultMessage: 'Data frame analytics jobs',
+      }),
       objectType: 'data-frame-analytics',
       color: getMemoryItemColor('data-frame-analytics'),
     },
     {
-      label: 'Trained models',
+      label: i18n.translate('xpack.ml.memoryUsage.treeMap.modelsLabel', {
+        defaultMessage: 'Trained models',
+      }),
       objectType: 'trained-model',
       color: getMemoryItemColor('trained-model'),
     },
@@ -124,16 +135,17 @@ export const JobMemoryTreeMap: FC<Props> = ({ node, type, height }) => {
   );
 
   return (
-    <div style={{ height }} data-test-subj={`mlJobTreeMap ${data.length ? 'withData' : 'empty'}`}>
+    <div
+      style={{ height: chartHeight }}
+      data-test-subj={`mlJobTreeMap ${data.length ? 'withData' : 'empty'}`}
+    >
       <EuiSpacer size="s" />
-      <LoadingWrapper height={height} hasData={data.length > 0} loading={loading}>
+      <LoadingWrapper height={chartHeight} hasData={data.length > 0} loading={loading}>
         <EuiFlexGroup>
           <EuiFlexItem />
           <EuiFlexItem>
             <EuiComboBox
               fullWidth
-              aria-label="Accessible screen reader label"
-              placeholder="Select or create options"
               options={TYPE_OPTIONS as EuiComboBoxOptionOption[]}
               selectedOptions={selectedOptions}
               onChange={onTypeChange}

x-pack/plugins/ml/public/application/memory_usage/memory_usage_page.tsx

@@ -13,7 +13,7 @@ import { isServerless } from '../../../common/util/serverless';
 import { NodesList } from '../trained_models/nodes_overview';
 import { MlPageHeader } from '../components/page_header';
 import { TechnicalPreviewBadge } from '../components/technical_preview_badge';
-import { JobMemoryTreeMap } from '../trained_models/memory_tree_map';
+import { JobMemoryTreeMap } from './memory_tree_map';
 
 enum TAB {
   NODES,
@@ -32,7 +32,7 @@ export const MemoryUsagePage: FC = () => {
         <EuiFlexGroup responsive={false} wrap={false} alignItems={'center'} gutterSize={'m'}>
           <EuiFlexItem grow={false}>
             <FormattedMessage
-              id="xpack.ml.modelManagement.memoryUsageHeader"
+              id="xpack.ml.memoryUsage.memoryUsageHeader"
               defaultMessage="Memory Usage"
             />
           </EuiFlexItem>
@@ -43,7 +43,7 @@ export const MemoryUsagePage: FC = () => {
       </MlPageHeader>
 
       {serverless ? (
-        <JobMemoryTreeMap height="400px" />
+        <JobMemoryTreeMap />
       ) : (
         <>
           <EuiTabs>
@@ -51,19 +51,16 @@ export const MemoryUsagePage: FC = () => {
               isSelected={selectedTab === TAB.NODES}
               onClick={() => setSelectedTab(TAB.NODES)}
             >
-              <FormattedMessage id="xpack.ml.modelManagement.nodesTab" defaultMessage="Nodes" />
+              <FormattedMessage id="xpack.ml.memoryUsage.nodesTab" defaultMessage="Nodes" />
             </EuiTab>
             <EuiTab
               isSelected={selectedTab === TAB.MEMORY_USAGE}
               onClick={() => setSelectedTab(TAB.MEMORY_USAGE)}
             >
-              <FormattedMessage
-                id="xpack.ml.modelManagement.memoryTab"
-                defaultMessage="Memory usage"
-              />
+              <FormattedMessage id="xpack.ml.memoryUsage.memoryTab" defaultMessage="Memory usage" />
             </EuiTab>
           </EuiTabs>
-          {selectedTab === TAB.NODES ? <NodesList /> : <JobMemoryTreeMap height="400px" />}
+          {selectedTab === TAB.NODES ? <NodesList /> : <JobMemoryTreeMap />}
         </>
       )}
     </>

x-pack/plugins/ml/public/application/trained_models/nodes_overview/expanded_row.tsx

@@ -24,15 +24,20 @@ import { NodeItem } from './nodes_list';
 import { useListItemsFormatter } from '../models_management/expanded_row';
 import { AllocatedModels } from './allocated_models';
 import { useFieldFormatter } from '../../contexts/kibana/use_field_formatter';
-import { JobMemoryTreeMap } from '../memory_tree_map';
+import { JobMemoryTreeMap } from '../../memory_usage/memory_tree_map';
 
 interface ExpandedRowProps {
   item: NodeItem;
 }
 
+enum TAB {
+  DETAILS,
+  MEMORY_USAGE,
+}
+
 export const ExpandedRow: FC<ExpandedRowProps> = ({ item }) => {
   const bytesFormatter = useFieldFormatter(FIELD_FORMAT_IDS.BYTES);
-  const [selectedTab, setSelectedTab] = useState<'details' | 'memory'>('details');
+  const [selectedTab, setSelectedTab] = useState<TAB>(TAB.DETAILS);
 
   const formatToListItems = useListItemsFormatter();
 
@@ -55,13 +60,19 @@ export const ExpandedRow: FC<ExpandedRowProps> = ({ item }) => {
       `}
     >
       <EuiTabs>
-        <EuiTab isSelected={selectedTab === 'details'} onClick={() => setSelectedTab('details')}>
+        <EuiTab
+          isSelected={selectedTab === TAB.DETAILS}
+          onClick={() => setSelectedTab(TAB.DETAILS)}
+        >
           <FormattedMessage
             id="xpack.ml.trainedModels.nodesList.expandedRow.detailsTabTitle"
             defaultMessage="Details"
           />
         </EuiTab>
-        <EuiTab isSelected={selectedTab === 'memory'} onClick={() => setSelectedTab('memory')}>
+        <EuiTab
+          isSelected={selectedTab === TAB.MEMORY_USAGE}
+          onClick={() => setSelectedTab(TAB.MEMORY_USAGE)}
+        >
           <FormattedMessage
             id="xpack.ml.trainedModels.nodesList.expandedRow.memoryTabTitle"
             defaultMessage="Memory usage"
@@ -69,7 +80,7 @@ export const ExpandedRow: FC<ExpandedRowProps> = ({ item }) => {
         </EuiTab>
       </EuiTabs>
 
-      {selectedTab === 'details' ? (
+      {selectedTab === TAB.DETAILS ? (
         <>
           <EuiSpacer size="s" />
           <EuiFlexGrid columns={2} gutterSize={'s'}>
@@ -132,7 +143,7 @@ export const ExpandedRow: FC<ExpandedRowProps> = ({ item }) => {
         </>
       ) : (
         <>
-          <JobMemoryTreeMap height="400px" node={item.name} />
+          <JobMemoryTreeMap node={item.name} />
         </>
       )}
     </div>

x-pack/plugins/ml/public/application/trained_models/nodes_overview/memory_preview_chart.tsx

@@ -22,7 +22,7 @@ import { EuiIcon } from '@elastic/eui';
 import { FIELD_FORMAT_IDS } from '@kbn/field-formats-plugin/common';
 import { NodeDeploymentStatsResponse } from '../../../../common/types/trained_models';
 import { useFieldFormatter } from '../../contexts/kibana/use_field_formatter';
-import { getMemoryItemColor } from './memory_item_colors';
+import { getMemoryItemColor } from '../../memory_usage/memory_item_colors';
 
 interface MemoryPreviewChartProps {
   memoryOverview: NodeDeploymentStatsResponse['memory_overview'];