Fit and Finish UX Fixes (opensearch-project#1174)

* add plus sign to create detector button Signed-off-by: Joanne Wang <jowg@amazon.com> * change getting started to get started Signed-off-by: Joanne Wang <jowg@amazon.com> * run yarn test:jest -u Signed-off-by: Joanne Wang <jowg@amazon.com> * move tabs to top Signed-off-by: Joanne Wang <jowg@amazon.com> * remove duplicate code Signed-off-by: Joanne Wang <jowg@amazon.com> * change total active alerts to total active threat alerts Signed-off-by: Joanne Wang <jowg@amazon.com> * Add period to end of correlate events content Signed-off-by: Joanne Wang <jowg@amazon.com> * fix spacing and padding Signed-off-by: Joanne Wang <jowg@amazon.com> * make search and filters compressed Signed-off-by: Joanne Wang <jowg@amazon.com> * make search and filter compressed pt 2 Signed-off-by: Joanne Wang <jowg@amazon.com> * move refresh and actions next to search bar Signed-off-by: Joanne Wang <jowg@amazon.com> * move bulk delete to left of search bar Signed-off-by: Joanne Wang <jowg@amazon.com> * fix spacing for detector details view Signed-off-by: Joanne Wang <jowg@amazon.com> * change content panel from h2 to h3 Signed-off-by: Joanne Wang <jowg@amazon.com> * remove empty hover state Signed-off-by: Joanne Wang <jowg@amazon.com> * fix sizing for empty widget Signed-off-by: Joanne Wang <jowg@amazon.com> * fix heading spacing Signed-off-by: Joanne Wang <jowg@amazon.com> * change getting started to get started pt2 Signed-off-by: Joanne Wang <jowg@amazon.com> * run yarn test:jest -u Signed-off-by: Joanne Wang <jowg@amazon.com> * add helper function for empty prompt and change to p instead of span Signed-off-by: Joanne Wang <jowg@amazon.com> --------- Signed-off-by: Joanne Wang <jowg@amazon.com>
amsiglan · Oct 3, 2024 · 9c0c2f4 · 9c0c2f4
1 parent 0ce91fb
commit 9c0c2f4
Show file tree

Hide file tree

Showing 36 changed files with 2,190 additions and 1,578 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/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>
     );
   }
 }