[Backport 2.17] Backport missing commits to 2.17 for bug fixes (#1242)

* feat: update category (#1169) (#1170) (cherry picked from commit 8865ff1) Signed-off-by: SuZhou-Joe <suzhou@amazon.com> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * Bug fixes for threat intel, duplicate findings, and breadcrumbs path (#1176) (#1177) * fix spacing for threat intel * fix alienvault source details page crash * fix threat intel findings widget view view all url crash * fix security analtyics breadcrumbs link path crash * fix duplicate findings --------- (cherry picked from commit 0ce91fb) Signed-off-by: Joanne Wang <jowg@amazon.com> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * Fit and Finish UX Fixes (#1174) (#1178) * add plus sign to create detector button * change getting started to get started * run yarn test:jest -u * move tabs to top * remove duplicate code * change total active alerts to total active threat alerts * Add period to end of correlate events content * fix spacing and padding * make search and filters compressed * make search and filter compressed pt 2 * move refresh and actions next to search bar * move bulk delete to left of search bar * fix spacing for detector details view * change content panel from h2 to h3 * remove empty hover state * fix sizing for empty widget * fix heading spacing * change getting started to get started pt2 * run yarn test:jest -u * add helper function for empty prompt and change to p instead of span --------- (cherry picked from commit 9c0c2f4) Signed-off-by: Joanne Wang <jowg@amazon.com> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * [Fit&Finish] Security analytics overview page (#1175) (#1179) * fit&finish * add width for recent threat alerts card * fix typo --------- (cherry picked from commit 076d1ef) Signed-off-by: Hailong Cui <ihailong@amazon.com> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * avoid showing unuseful error toast when ds is not yet selected (#1186) (#1187) (cherry picked from commit e4fdd25) Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * fix: Update getting started cards content and visual design (#1188) (#1189) (cherry picked from commit 2b33ca2) Signed-off-by: Viraj Sanghvi <virajs@amazon.com> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * testing default ds switch changes (#1199) (#1201) (cherry picked from commit 5d3801a) Signed-off-by: Riya Saxena <riysaxen@amazon.com> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * make dataSource default cluster for threat alerts card (#1200) (#1203) (cherry picked from commit 48669ca) Signed-off-by: Joanne Wang <jowg@amazon.com> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * Fix data source picker for threat alerts card (#1206) (#1207) * Fix data source picker for threat alerts card * remove unused import * fix get alerts loop --------- (cherry picked from commit b2eb62c) Signed-off-by: Joanne Wang <jowg@amazon.com> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * do not decode ds id from url; update global state on ds change (#1216) (#1217) (cherry picked from commit ad76b7b) Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> --------- Signed-off-by: SuZhou-Joe <suzhou@amazon.com> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Signed-off-by: Joanne Wang <jowg@amazon.com> Signed-off-by: Hailong Cui <ihailong@amazon.com> Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> Signed-off-by: Viraj Sanghvi <virajs@amazon.com> Signed-off-by: Riya Saxena <riysaxen@amazon.com> Co-authored-by: opensearch-trigger-bot[bot] <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
opensearch-project · Jan 10, 2025 · f1f804f · f1f804f
1 parent 0d2c0c1
commit f1f804f
Show file tree

Hide file tree

Showing 48 changed files with 2,520 additions and 1,820 deletions.
diff --git a/public/components/ContentPanel/ContentPanel.tsx b/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

diff --git a/public/components/ContentPanel/__snapshots__/ContentPanel.test.tsx.snap b/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

diff --git a/public/components/DataSourceThreatAlertsCard/DataSourceThreatAlertsCard.tsx b/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]);
       }
     },

diff --git a/public/pages/Alerts/components/ThreatIntelAlertsTable/ThreatIntelAlertsTable.tsx b/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}
       />

diff --git a/public/pages/Alerts/containers/Alerts/Alerts.tsx b/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>
     );
   }
 }