[Backport 2.17] Backport missing commits to 2.17 for bug fixes

public/components/ContentPanel/ContentPanel.tsx

@@ -48,15 +48,12 @@ const ContentPanel = ({
   hideHeaderBorder = false,
   className = '',
 }: ContentPanelProps): JSX.Element => (
-  <EuiPanel
-    style={{ paddingLeft: '0px', paddingRight: '0px', ...panelStyles }}
-    className={className}
-  >
+  <EuiPanel style={{ padding: '16px', ...panelStyles }} className={className}>
     <EuiFlexGroup style={{ padding: '0px 10px' }} justifyContent="spaceBetween" alignItems="center">
       <EuiFlexItem>
         {typeof title === 'string' ? (
           <EuiText size={titleSize}>
-            <h2>{title}</h2>
+            <h3>{title}</h3>
           </EuiText>
         ) : (
           title

public/components/ContentPanel/__snapshots__/ContentPanel.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`<ContentPanel /> spec renders the component 1`] = `
 <div
   class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-  style="padding-left: 0px; padding-right: 0px;"
+  style="padding: 16px;"
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -15,9 +15,9 @@ exports[`<ContentPanel /> spec renders the component 1`] = `
       <div
         class="euiText euiText--small"
       >
-        <h2>
+        <h3>
           Testing
-        </h2>
+        </h3>
       </div>
     </div>
     <div

public/components/DataSourceThreatAlertsCard/DataSourceThreatAlertsCard.tsx

@@ -55,15 +55,12 @@ export const DataSourceThreatAlertsCard: React.FC<DataSourceAlertsCardProps> = (
   }, [getDataSourceMenu]);
   const notifications = getNotifications();
   const [loading, setLoading] = useState(false);
-  const [dataSource, setDataSource] = useState<DataSourceOption>({
-    label: 'Local cluster',
-    id: '',
-  });
+  const [dataSource, setDataSource] = useState<DataSourceOption>();
   const [alerts, setAlerts] = useState<any[]>([]);
 
   const getAlerts = async () => {
     try {
-      const detectorsRes = await detectorService.getDetectors();
+      const detectorsRes = await detectorService.getDetectors(dataSource);
       if (detectorsRes.ok) {
         const detectors: any = {};
         const detectorIds = detectorsRes.response.hits.hits.map((hit: any) => {
@@ -72,16 +69,15 @@ export const DataSourceThreatAlertsCard: React.FC<DataSourceAlertsCardProps> = (
         });
 
         let alerts: any[] = [];
-        const abortController = new AbortController();
 
         for (let id of detectorIds) {
-          const alertsRes = await DataStore.alerts.getAlertsByDetector(
+          const alertsRes = await DataStore.alerts.getAlertsForThreatAlertsCard(
             id,
             detectors[id].name,
-            abortController.signal,
             undefined,
             undefined,
-            25
+            25,
+            dataSource
           );
           alerts = alerts.concat(alertsRes);
         }
@@ -106,7 +102,7 @@ export const DataSourceThreatAlertsCard: React.FC<DataSourceAlertsCardProps> = (
 
   const onDataSourceSelected = useCallback(
     (options: any[]) => {
-      if (dataSource?.id !== undefined && dataSource?.id !== options[0]?.id) {
+      if (dataSource?.id === undefined || dataSource?.id !== options[0]?.id) {
         setDataSource(options[0]);
       }
     },

public/pages/Alerts/components/ThreatIntelAlertsTable/ThreatIntelAlertsTable.tsx

@@ -126,14 +126,20 @@ export const ThreatIntelAlertsTable: React.FC<ThreatIntelAlertsTableProps> = ({
     },
   ];
 
+  const search = {
+    box: {
+      compressed: true,
+    },
+  };
+
   return (
     <>
       <EuiInMemoryTable
         columns={columns}
         items={alerts}
         itemId={(item) => `${item.id}`}
         pagination
-        search
+        search={search}
         selection={itemSelection}
         isSelectable={true}
       />

public/pages/Alerts/containers/Alerts/Alerts.tsx

@@ -938,12 +938,14 @@ export class Alerts extends Component<AlertsProps, AlertsState> {
       box: {
         placeholder: 'Search alerts',
         schema: true,
+        compressed: true,
       },
       filters: [
         {
           type: 'field_value_selection',
           field: 'severity',
           name: 'Alert severity',
+          compressed: true,
           options: Array.from(severities).map((severity) => ({
             value: severity,
             name: parseAlertSeverityToOption(severity)?.label || severity,
@@ -954,6 +956,7 @@ export class Alerts extends Component<AlertsProps, AlertsState> {
           type: 'field_value_selection',
           field: 'state',
           name: 'Status',
+          compressed: true,
           options: Array.from(statuses).map((status) => ({
             value: status,
             name: capitalizeFirstLetter(status) || status,
@@ -967,12 +970,14 @@ export class Alerts extends Component<AlertsProps, AlertsState> {
       box: {
         placeholder: 'Search alerts',
         schema: true,
+        compressed: true,
       },
       filters: [
         {
           type: 'field_value_selection',
           field: 'severity',
           name: 'Alert severity',
+          compressed: true,
           options: Array.from(corrSeverities).map((severity) => ({
             value: severity,
             name: parseAlertSeverityToOption(severity)?.label || severity,
@@ -983,6 +988,7 @@ export class Alerts extends Component<AlertsProps, AlertsState> {
           type: 'field_value_selection',
           field: 'state',
           name: 'Status',
+          compressed: true,
           options: Array.from(corrStatuses).map((status) => ({
             value: status,
             name: capitalizeFirstLetter(status) || status,
@@ -1018,18 +1024,22 @@ export class Alerts extends Component<AlertsProps, AlertsState> {
         content: (
           <>
             <EuiSpacer size="m" />
-            <EuiInMemoryTable
-              columns={this.getColumns()}
-              items={alertsFiltered ? filteredDetectionRuleAlerts : detectionRuleAlerts}
-              itemId={(item) => `${item.id}`}
-              isSelectable={true}
-              pagination
-              search={search}
-              sorting={sorting}
-              selection={selection}
-              loading={loading}
-              message={widgetEmptyMessage}
-            />
+            {this.getAlertsGraph(alerts, loading)}
+            <EuiSpacer size="m" />
+            <ContentPanel title={'Alerts'} actions={[this.getContelPanelActions()]}>
+              <EuiInMemoryTable
+                columns={this.getColumns()}
+                items={alertsFiltered ? filteredDetectionRuleAlerts : detectionRuleAlerts}
+                itemId={(item) => `${item.id}`}
+                isSelectable={true}
+                pagination
+                search={search}
+                sorting={sorting}
+                selection={selection}
+                loading={loading}
+                message={widgetEmptyMessage}
+              />
+            </ContentPanel>
           </>
         ),
       },
@@ -1039,11 +1049,15 @@ export class Alerts extends Component<AlertsProps, AlertsState> {
         content: (
           <>
             <EuiSpacer size="m" />
-            <ThreatIntelAlertsTable
-              alerts={alertsFiltered ? filteredThreatIntelAlerts : threatIntelAlerts}
-              onAlertStateChange={this.onThreatIntelAlertStateChange}
-              onSelectionChange={this.onThreatIntelAlertSelectionChange}
-            />
+            {this.getAlertsGraph(alerts, loading)}
+            <EuiSpacer size="m" />
+            <ContentPanel title={'Alerts'} actions={[this.getContelPanelActions()]}>
+              <ThreatIntelAlertsTable
+                alerts={alertsFiltered ? filteredThreatIntelAlerts : threatIntelAlerts}
+                onAlertStateChange={this.onThreatIntelAlertStateChange}
+                onSelectionChange={this.onThreatIntelAlertSelectionChange}
+              />
+            </ContentPanel>
           </>
         ),
       },
@@ -1060,18 +1074,22 @@ export class Alerts extends Component<AlertsProps, AlertsState> {
         content: (
           <>
             <EuiSpacer size="m" />
-            <EuiInMemoryTable
-              columns={this.getCorrelationColumns()}
-              items={alertsFiltered ? filteredCorrelationAlerts : correlationAlerts}
-              itemId={(item) => `${item.id}`}
-              isSelectable={true}
-              pagination
-              search={correlationSearch}
-              sorting={sorting}
-              selection={correlationSelection}
-              loading={loading}
-              message={widgetEmptyCorrelationMessage}
-            />
+            {this.getAlertsGraph(alerts, loading)}
+            <EuiSpacer size="m" />
+            <ContentPanel title={'Alerts'} actions={[this.getContelPanelActions()]}>
+              <EuiInMemoryTable
+                columns={this.getCorrelationColumns()}
+                items={alertsFiltered ? filteredCorrelationAlerts : correlationAlerts}
+                itemId={(item) => `${item.id}`}
+                isSelectable={true}
+                pagination
+                search={correlationSearch}
+                sorting={sorting}
+                selection={correlationSelection}
+                loading={loading}
+                message={widgetEmptyCorrelationMessage}
+              />
+            </ContentPanel>
           </>
         ),
       },
@@ -1109,7 +1127,7 @@ export class Alerts extends Component<AlertsProps, AlertsState> {
             onAcknowledge={this.onAcknowledgeCorrelationAlert}
           />
         )}
-        <EuiFlexGroup direction="column">
+        <EuiFlexGroup direction="column" gutterSize={'m'}>
           <PageHeader
             appRightControls={[
               {
@@ -1126,50 +1144,51 @@ export class Alerts extends Component<AlertsProps, AlertsState> {
                 </EuiFlexItem>
                 <EuiFlexItem grow={false}>{datePicker}</EuiFlexItem>
               </EuiFlexGroup>
-              <EuiSpacer size={'m'} />
             </EuiFlexItem>
           </PageHeader>
 
           <EuiFlexItem>
-            <EuiPanel>
-              <EuiFlexGroup direction="column">
-                <EuiFlexItem style={{ alignSelf: 'flex-end' }}>
-                  {this.createGroupByControl()}
-                </EuiFlexItem>
-                <EuiFlexItem>
-                  {!alerts || alerts.length === 0 ? (
-                    <EuiEmptyPrompt
-                      title={<EuiText size="s"><h2>No alerts</h2></EuiText>}
-                      body={
-                        <p>
-                          <EuiText size="s">
-                            Adjust the time range to see more results or create alert triggers in your{' '}
-                            <EuiLink href={`${location.pathname}#/detectors`}>detectors</EuiLink> to
-                            generate alerts.
-                          </EuiText>
-                        </p>
-                      }
-                    />
-                  ) : (
-                    <ChartContainer chartViewId={'alerts-view'} loading={loading} />
-                  )}
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiPanel>
-            <EuiSpacer size="xxl" />
+            <EuiTabbedContent
+              tabs={tabs}
+              size="s"
+              onTabClick={({ id }) => this.setState({ selectedTabId: id as AlertTabId })}
+              initialSelectedTab={tabs.find(({ id }) => id === selectedTabId) ?? tabs[0]}
+            />
           </EuiFlexItem>
+        </EuiFlexGroup>
+      </>
+    );
+  }
+
+  private getAlertsGraph(alerts: any[], loading: boolean) {
+    return (
+      <EuiPanel>
+        <EuiFlexGroup direction="column">
+          <EuiFlexItem style={{ alignSelf: 'flex-end' }}>{this.createGroupByControl()}</EuiFlexItem>
           <EuiFlexItem>
-            <ContentPanel title={'Alerts'} actions={[this.getContelPanelActions()]}>
-              <EuiTabbedContent
-                tabs={tabs}
-                size="s"
-                onTabClick={({ id }) => this.setState({ selectedTabId: id as AlertTabId })}
-                initialSelectedTab={tabs.find(({ id }) => id === selectedTabId) ?? tabs[0]}
+            {!alerts || alerts.length === 0 ? (
+              <EuiEmptyPrompt
+                title={
+                  <EuiText size="s">
+                    <h2>No alerts</h2>
+                  </EuiText>
+                }
+                body={
+                  <p>
+                    <EuiText size="s">
+                      Adjust the time range to see more results or create alert triggers in your{' '}
+                      <EuiLink href={`${location.pathname}#/detectors`}>detectors</EuiLink> to
+                      generate alerts.
+                    </EuiText>
+                  </p>
+                }
               />
-            </ContentPanel>
+            ) : (
+              <ChartContainer chartViewId={'alerts-view'} loading={loading} />
+            )}
           </EuiFlexItem>
         </EuiFlexGroup>
-      </>
+      </EuiPanel>
     );
   }
 }