fix alignment, move icon before fieldName

elastic · Apr 12, 2023 · a44cade · a44cade
1 parent ae6e32c
commit a44cade
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 27 deletions.
diff --git a/...gins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_analysis.tsx b/...gins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_analysis.tsx
@@ -284,7 +284,6 @@ export const ExplainLogRateSpikesAnalysis: FC<ExplainLogRateSpikesAnalysisProps>
           significantTerms={data.significantTerms}
           groupTableItems={groupTableItems}
           loading={isRunning}
-          dataViewId={dataView.id}
           dataView={dataView}
           timeRangeMs={timeRangeMs}
           searchQuery={searchQuery}
@@ -294,7 +293,6 @@ export const ExplainLogRateSpikesAnalysis: FC<ExplainLogRateSpikesAnalysisProps>
         <SpikeAnalysisTable
           significantTerms={data.significantTerms}
           loading={isRunning}
-          dataViewId={dataView.id}
           dataView={dataView}
           timeRangeMs={timeRangeMs}
           searchQuery={searchQuery}

diff --git a/x-pack/plugins/aiops/public/components/field_stats_popover/field_stats_popover.tsx b/x-pack/plugins/aiops/public/components/field_stats_popover/field_stats_popover.tsx
@@ -74,17 +74,15 @@ export function FieldStatsPopover({
       button={trigger}
       renderHeader={() => <FieldPopoverHeader field={fieldForStats} closePopover={closePopover} />}
       renderContent={() => (
-        <>
-          <FieldStatsContent
-            field={fieldForStats}
-            fieldName={fieldName}
-            fieldValue={fieldValue}
-            dataView={dataView}
-            fieldStatsServices={fieldStatsServices}
-            timeRangeMs={timeRangeMs}
-            dslQuery={dslQuery}
-          />
-        </>
+        <FieldStatsContent
+          field={fieldForStats}
+          fieldName={fieldName}
+          fieldValue={fieldValue}
+          dataView={dataView}
+          fieldStatsServices={fieldStatsServices}
+          timeRangeMs={timeRangeMs}
+          dslQuery={dslQuery}
+        />
       )}
     />
   );

diff --git a/x-pack/plugins/aiops/public/components/spike_analysis_table/spike_analysis_table.tsx b/x-pack/plugins/aiops/public/components/spike_analysis_table/spike_analysis_table.tsx
@@ -56,7 +56,6 @@ const viewInDiscoverMessage = i18n.translate(
 
 interface SpikeAnalysisTableProps {
   significantTerms: SignificantTerm[];
-  dataViewId?: string;
   dataView: DataView;
   loading: boolean;
   isExpandedRow?: boolean;
@@ -66,7 +65,6 @@ interface SpikeAnalysisTableProps {
 
 export const SpikeAnalysisTable: FC<SpikeAnalysisTableProps> = ({
   significantTerms,
-  dataViewId,
   dataView,
   loading,
   isExpandedRow,
@@ -75,6 +73,7 @@ export const SpikeAnalysisTable: FC<SpikeAnalysisTableProps> = ({
 }) => {
   const euiTheme = useEuiTheme();
   const primaryBackgroundColor = useEuiBackgroundColor('primary');
+  const dataViewId = dataView.id;
 
   const {
     pinnedSignificantTerm,
@@ -165,7 +164,6 @@ export const SpikeAnalysisTable: FC<SpikeAnalysisTableProps> = ({
       }),
       render: (_, { fieldName, fieldValue }) => (
         <>
-          {fieldName}
           <FieldStatsPopover
             dataView={dataView}
             fieldName={fieldName}
@@ -174,10 +172,11 @@ export const SpikeAnalysisTable: FC<SpikeAnalysisTableProps> = ({
             dslQuery={searchQuery}
             timeRangeMs={timeRangeMs}
           />
+          {fieldName}
         </>
       ),
       sortable: true,
-      valign: 'top',
+      valign: 'middle',
     },
     {
       'data-test-subj': 'aiopsSpikeAnalysisTableColumnFieldValue',
@@ -188,7 +187,7 @@ export const SpikeAnalysisTable: FC<SpikeAnalysisTableProps> = ({
       render: (_, { fieldValue }) => String(fieldValue),
       sortable: true,
       textOnly: true,
-      valign: 'top',
+      valign: 'middle',
     },
     {
       'data-test-subj': 'aiopsSpikeAnalysisTableColumnLogRate',
@@ -222,7 +221,7 @@ export const SpikeAnalysisTable: FC<SpikeAnalysisTableProps> = ({
         />
       ),
       sortable: false,
-      valign: 'top',
+      valign: 'middle',
     },
     {
       'data-test-subj': 'aiopsSpikeAnalysisTableColumnDocCount',
@@ -232,7 +231,7 @@ export const SpikeAnalysisTable: FC<SpikeAnalysisTableProps> = ({
         defaultMessage: 'Doc count',
       }),
       sortable: true,
-      valign: 'top',
+      valign: 'middle',
     },
     {
       'data-test-subj': 'aiopsSpikeAnalysisTableColumnPValue',
@@ -260,7 +259,7 @@ export const SpikeAnalysisTable: FC<SpikeAnalysisTableProps> = ({
       ),
       render: (pValue: number | null) => pValue?.toPrecision(3) ?? NOT_AVAILABLE,
       sortable: true,
-      valign: 'top',
+      valign: 'middle',
     },
     {
       'data-test-subj': 'aiopsSpikeAnalysisTableColumnImpact',
@@ -291,7 +290,7 @@ export const SpikeAnalysisTable: FC<SpikeAnalysisTableProps> = ({
         return label ? <EuiBadge color={label.color}>{label.impact}</EuiBadge> : null;
       },
       sortable: true,
-      valign: 'top',
+      valign: 'middle',
     },
     {
       'data-test-subj': 'aiOpsSpikeAnalysisTableColumnAction',
@@ -317,7 +316,7 @@ export const SpikeAnalysisTable: FC<SpikeAnalysisTableProps> = ({
         },
       ],
       width: ACTIONS_COLUMN_WIDTH,
-      valign: 'top',
+      valign: 'middle',
     },
   ];
 
@@ -345,7 +344,7 @@ export const SpikeAnalysisTable: FC<SpikeAnalysisTableProps> = ({
         return '';
       },
       sortable: false,
-      valign: 'top',
+      valign: 'middle',
     });
   }
 

diff --git a/x-pack/plugins/aiops/public/components/spike_analysis_table/spike_analysis_table_groups.tsx b/x-pack/plugins/aiops/public/components/spike_analysis_table/spike_analysis_table_groups.tsx
@@ -62,7 +62,6 @@ const viewInDiscoverMessage = i18n.translate(
 interface SpikeAnalysisTableProps {
   significantTerms: SignificantTerm[];
   groupTableItems: GroupTableItem[];
-  dataViewId?: string;
   loading: boolean;
   searchQuery: estypes.QueryDslQueryContainer;
   timeRangeMs: TimeRangeMs;
@@ -72,7 +71,6 @@ interface SpikeAnalysisTableProps {
 export const SpikeAnalysisGroupsTable: FC<SpikeAnalysisTableProps> = ({
   significantTerms,
   groupTableItems,
-  dataViewId,
   loading,
   dataView,
   timeRangeMs,
@@ -92,6 +90,7 @@ export const SpikeAnalysisGroupsTable: FC<SpikeAnalysisTableProps> = ({
 
   const { pinnedGroup, selectedGroup, setPinnedGroup, setSelectedGroup } =
     useSpikeAnalysisTableRowContext();
+  const dataViewId = dataView.id;
 
   const toggleDetails = (item: GroupTableItem) => {
     const itemIdToExpandedRowMapValues = { ...itemIdToExpandedRowMap };
@@ -118,7 +117,6 @@ export const SpikeAnalysisGroupsTable: FC<SpikeAnalysisTableProps> = ({
             []
           )}
           loading={loading}
-          dataViewId={dataViewId}
           isExpandedRow
           dataView={dataView}
           timeRangeMs={timeRangeMs}