[RAM] Fixing run history height issue (#135077)

* Initial attempt at fixing run history height issue

* Move initialized check to parent component

* Address feedback and fix test

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_details.tsx

@@ -70,6 +70,10 @@ export type RuleDetailsProps = {
   refreshToken?: number;
 } & Pick<BulkOperationsComponentOpts, 'disableRule' | 'enableRule' | 'snoozeRule' | 'unsnoozeRule'>;
 
+const ruleDetailStyle = {
+  minWidth: 0,
+};
+
 export const RuleDetails: React.FunctionComponent<RuleDetailsProps> = ({
   rule,
   ruleType,
@@ -507,7 +511,7 @@ export const RuleDetails: React.FunctionComponent<RuleDetailsProps> = ({
           </EuiFlexGroup>
         )}
         <EuiFlexGroup>
-          <EuiFlexItem>
+          <EuiFlexItem style={ruleDetailStyle}>
             <RuleRouteWithApi
               requestRefresh={requestRefresh}
               refreshToken={refreshToken}

x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_event_log_list.test.tsx

@@ -167,20 +167,17 @@ describe('rule_event_log_list', () => {
     // Loading
     expect(wrapper.find(EuiSuperDatePicker).props().isLoading).toBeTruthy();
 
-    // Verify the initial columns are rendered
-    RULE_EXECUTION_DEFAULT_INITIAL_VISIBLE_COLUMNS.forEach((column) => {
-      expect(wrapper.find(`[data-test-subj="dataGridHeaderCell-${column}"]`).exists()).toBeTruthy();
-    });
-
-    // No data initially
-    expect(wrapper.find('[data-gridcell-column-id="timestamp"]').length).toEqual(1);
-
     // Let the load resolve
     await act(async () => {
       await nextTick();
       wrapper.update();
     });
 
+    // Verify the initial columns are rendered
+    RULE_EXECUTION_DEFAULT_INITIAL_VISIBLE_COLUMNS.forEach((column) => {
+      expect(wrapper.find(`[data-test-subj="dataGridHeaderCell-${column}"]`).exists()).toBeTruthy();
+    });
+
     expect(wrapper.find(EuiSuperDatePicker).props().isLoading).toBeFalsy();
 
     expect(wrapper.find(RuleEventLogListStatusFilter).exists()).toBeTruthy();

x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_event_log_list.tsx

@@ -23,6 +23,7 @@ import { useKibana } from '../../../../common/lib/kibana';
 import { RULE_EXECUTION_DEFAULT_INITIAL_VISIBLE_COLUMNS } from '../../../constants';
 import { RuleEventLogListStatusFilter } from './rule_event_log_list_status_filter';
 import { RuleEventLogDataGrid } from './rule_event_log_data_grid';
+import { CenterJustifiedSpinner } from '../../../components/center_justified_spinner';
 
 import { RefineSearchPrompt } from '../refine_search_prompt';
 import { LoadExecutionLogAggregationsProps } from '../../../lib/rule_api';
@@ -55,6 +56,8 @@ const updateButtonProps = {
 
 const MAX_RESULTS = 1000;
 
+const ruleEventListContainerStyle = { minHeight: 400 };
+
 export type RuleEventLogListProps = {
   rule: Rule;
   localStorageKey?: string;
@@ -72,7 +75,7 @@ export const RuleEventLogList = (props: RuleEventLogListProps) => {
   const { uiSettings, notifications } = useKibana().services;
 
   // Data grid states
-  const [logs, setLogs] = useState<IExecutionLog[]>([]);
+  const [logs, setLogs] = useState<IExecutionLog[]>();
   const [visibleColumns, setVisibleColumns] = useState<string[]>(() => {
     return (
       JSON.parse(localStorage.getItem(localStorageKey) ?? 'null') ||
@@ -195,6 +198,30 @@ export const RuleEventLogList = (props: RuleEventLogListProps) => {
     [setPagination, setFilter]
   );
 
+  const renderList = () => {
+    if (!logs) {
+      return <CenterJustifiedSpinner />;
+    }
+    return (
+      <>
+        {isLoading && (
+          <EuiProgress size="xs" color="accent" data-test-subj="ruleEventLogListProgressBar" />
+        )}
+        <RuleEventLogDataGrid
+          logs={logs}
+          pagination={pagination}
+          sortingColumns={sortingColumns}
+          visibleColumns={visibleColumns}
+          dateFormat={dateFormat}
+          onChangeItemsPerPage={onChangeItemsPerPage}
+          onChangePage={onChangePage}
+          setVisibleColumns={setVisibleColumns}
+          setSortingColumns={setSortingColumns}
+        />
+      </>
+    );
+  };
+
   useEffect(() => {
     loadEventLogs();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -213,7 +240,7 @@ export const RuleEventLogList = (props: RuleEventLogListProps) => {
   }, [localStorageKey, visibleColumns]);
 
   return (
-    <div>
+    <div style={ruleEventListContainerStyle}>
       <EuiSpacer />
       <EuiFlexGroup>
         <EuiFlexItem grow={false}>
@@ -235,20 +262,7 @@ export const RuleEventLogList = (props: RuleEventLogListProps) => {
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer />
-      {isLoading && (
-        <EuiProgress size="xs" color="accent" data-test-subj="ruleEventLogListProgressBar" />
-      )}
-      <RuleEventLogDataGrid
-        logs={logs}
-        pagination={pagination}
-        sortingColumns={sortingColumns}
-        visibleColumns={visibleColumns}
-        dateFormat={dateFormat}
-        onChangeItemsPerPage={onChangeItemsPerPage}
-        onChangePage={onChangePage}
-        setVisibleColumns={setVisibleColumns}
-        setSortingColumns={setSortingColumns}
-      />
+      {renderList()}
       {isOnLastPage && (
         <RefineSearchPrompt
           documentSize={actualTotalItemCount}