update legend css overrides

elastic · Nov 12, 2024 · 999a7c7 · 999a7c7
1 parent 2687d61
commit 999a7c7
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 28 deletions.
diff --git a/...lytics/pages/analytics_management/components/analytics_list/expanded_row_details_pane.tsx b/...lytics/pages/analytics_management/components/analytics_list/expanded_row_details_pane.tsx
@@ -42,7 +42,7 @@ export const OverallDetails: FC<{
 }> = ({ overallDetails }) => (
   <EuiFlexGroup alignItems="center" wrap data-test-subj={overallDetails.dataTestSubj}>
     {overallDetails.items.map((item) => {
-      const key = `${item.title}`;
+      const key = item.title;
       if (item.title === 'badge') {
         return (
           <EuiFlexItem grow={false} key={key}>

diff --git a/...ck/plugins/ml/public/application/data_frame_analytics/pages/job_map/components/legend.tsx b/...ck/plugins/ml/public/application/data_frame_analytics/pages/job_map/components/legend.tsx
@@ -49,6 +49,13 @@ export const JobMapLegend: FC<{ hasMissingJobNode: boolean; theme: EuiThemeType
     euiBorderWidthThick,
   } = theme;
 
+  const cssOverrideBase = {
+    height: euiSizeM,
+    width: euiSizeM,
+    backgroundColor: euiColorGhost,
+    display: 'inline-block',
+  };
+
   return (
     <EuiFlexGroup alignItems="center" data-test-subj="mlPageDataFrameAnalyticsMapLegend">
       <EuiFlexItem grow={false}>
@@ -57,12 +64,10 @@ export const JobMapLegend: FC<{ hasMissingJobNode: boolean; theme: EuiThemeType
             <span
               data-test-subj="mlJobMapLegend__sourceNode"
               css={{
-                height: `${euiSizeM}`,
-                width: `${euiSizeM}`,
-                backgroundColor: `${euiColorWarning}`,
-                border: `${euiBorderThin}`,
-                borderRadius: `${euiBorderRadius}`,
-                display: 'inline-block',
+                ...cssOverrideBase,
+                backgroundColor: euiColorWarning,
+                border: euiBorderThin,
+                borderRadius: euiBorderRadius,
               }}
             />
           </EuiFlexItem>
@@ -82,12 +87,9 @@ export const JobMapLegend: FC<{ hasMissingJobNode: boolean; theme: EuiThemeType
             <span
               data-test-subj="mlJobMapLegend__indexPattern"
               css={{
-                height: `${euiSizeM}`,
-                width: `${euiSizeM}`,
-                backgroundColor: `${euiColorGhost}`,
+                ...cssOverrideBase,
                 border: `${euiBorderWidthThick} solid ${theme.euiColorVis2}`,
                 transform: 'rotate(45deg)',
-                display: 'inline-block',
               }}
             />
           </EuiFlexItem>
@@ -107,12 +109,9 @@ export const JobMapLegend: FC<{ hasMissingJobNode: boolean; theme: EuiThemeType
             <span
               data-test-subj="mlJobMapLegend__ingestPipeline"
               css={{
-                height: `${euiSizeM}`,
-                width: `${euiSizeM}`,
-                backgroundColor: `${euiColorGhost}`,
+                ...cssOverrideBase,
                 border: `${euiBorderWidthThick} solid ${theme.euiColorVis7}`,
-                borderRadius: `${euiBorderRadiusSmall}`,
-                display: 'inline-block',
+                borderRadius: euiBorderRadiusSmall,
               }}
             />
           </EuiFlexItem>
@@ -132,11 +131,8 @@ export const JobMapLegend: FC<{ hasMissingJobNode: boolean; theme: EuiThemeType
             <span
               data-test-subj="mlJobMapLegend__transform"
               css={{
-                height: `${euiSizeM}`,
-                width: `${euiSizeM}`,
-                backgroundColor: `${euiColorGhost}`,
+                ...cssOverrideBase,
                 border: `${euiBorderWidthThick} solid ${theme.euiColorVis1}`,
-                display: 'inline-block',
               }}
             />
           </EuiFlexItem>
@@ -178,12 +174,9 @@ export const JobMapLegend: FC<{ hasMissingJobNode: boolean; theme: EuiThemeType
               <span
                 data-test-subj="mlJobMapLegend__analyticsMissing"
                 css={{
-                  height: `${euiSizeM}`,
-                  width: `${euiSizeM}`,
-                  backgroundColor: `${euiColorGhost}`,
+                  ...cssOverrideBase,
                   border: `${euiBorderWidthThick} solid ${theme.euiColorFullShade}`,
                   borderRadius: '50%',
-                  display: 'inline-block',
                 }}
               />
             </EuiFlexItem>
@@ -204,12 +197,9 @@ export const JobMapLegend: FC<{ hasMissingJobNode: boolean; theme: EuiThemeType
             <span
               data-test-subj="mlJobMapLegend__analytics"
               css={{
-                height: `${euiSizeM}`,
-                width: `${euiSizeM}`,
-                backgroundColor: `${euiColorGhost}`,
+                ...cssOverrideBase,
                 border: `${euiBorderWidthThick} solid ${theme.euiColorVis0}`,
                 borderRadius: '50%',
-                display: 'inline-block',
               }}
             />
           </EuiFlexItem>