Fit and Finish Changes

Signed-off-by: Dan Dong <danieldong51@gmail.com>
opensearch-project · Sep 6, 2024 · 1da3b94 · 1da3b94
1 parent 04182c0
commit 1da3b94
Show file tree

Hide file tree

Showing 32 changed files with 192 additions and 168 deletions.
diff --git a/public/components/ContentPanel/ContentPanel.tsx b/public/components/ContentPanel/ContentPanel.tsx
@@ -9,14 +9,13 @@ import {
   EuiFlexItem,
   EuiHorizontalRule,
   EuiPanel,
-  EuiTitle,
   EuiText,
   EuiSpacer,
 } from '@elastic/eui';
 
 interface ContentPanelProps {
   title?: string | JSX.Element;
-  titleSize?: 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l';
+  titleSize?: 'xs' | 's' | 'm';
   subTitleText?: string | JSX.Element;
   bodyStyles?: object;
   panelStyles?: object;
@@ -56,9 +55,9 @@ const ContentPanel = ({
     <EuiFlexGroup style={{ padding: '0px 10px' }} justifyContent="spaceBetween" alignItems="center">
       <EuiFlexItem>
         {typeof title === 'string' ? (
-          <EuiTitle size={titleSize}>
-            <h3>{title}</h3>
-          </EuiTitle>
+          <EuiText size={titleSize}>
+            <h2>{title}</h2>
+          </EuiText>
         ) : (
           title
         )}

diff --git a/public/components/DeleteModal/DeleteModal.tsx b/public/components/DeleteModal/DeleteModal.tsx
@@ -11,6 +11,7 @@ import {
   EuiCompressedFormRow,
   EuiOverlayMask,
   EuiSpacer,
+  EuiText,
 } from '@elastic/eui';
 
 interface DeleteModalProps {
@@ -57,7 +58,7 @@ export default class DeleteModal extends Component<DeleteModalProps, DeleteModal
     return (
       <EuiOverlayMask>
         <EuiConfirmModal
-          title={`Delete ${type}`}
+          title={<EuiText size="s"><h2>`Delete ${type}`</h2></EuiText>}
           onCancel={closeDeleteModal}
           onConfirm={() => {
             onClickDelete();

diff --git a/public/pages/Alerts/components/AlertFlyout/AlertFlyout.tsx b/public/pages/Alerts/components/AlertFlyout/AlertFlyout.tsx
@@ -16,7 +16,7 @@ import {
   EuiFlyoutHeader,
   EuiLink,
   EuiSpacer,
-  EuiTitle,
+  EuiText,
 } from '@elastic/eui';
 import { RuleSource } from '../../../../../server/models/interfaces';
 import React from 'react';
@@ -203,9 +203,9 @@ export class AlertFlyout extends React.Component<AlertFlyoutProps, AlertFlyoutSt
         <EuiFlyoutHeader hasBorder={true}>
           <EuiFlexGroup justifyContent="spaceBetween">
             <EuiFlexItem grow={2}>
-              <EuiTitle size={'m'}>
-                <h3>Alert details</h3>
-              </EuiTitle>
+              <EuiText size='s'>
+                <h2>Alert details</h2>
+              </EuiText>
             </EuiFlexItem>
             <EuiFlexItem grow={8}>
               <EuiFlexGroup justifyContent="flexEnd" alignItems="center">

diff --git a/public/pages/Alerts/components/CorrelationAlertFlyout/CorrelationAlertFlyout.tsx b/public/pages/Alerts/components/CorrelationAlertFlyout/CorrelationAlertFlyout.tsx
@@ -17,7 +17,7 @@ import {
     EuiFlyoutHeader,
     EuiLink,
     EuiSpacer,
-    EuiTitle,
+    EuiText,
   } from '@elastic/eui';
   import { RuleSource } from '../../../../../server/models/interfaces';
   import React from 'react';
@@ -206,9 +206,9 @@ import {
           <EuiFlyoutHeader hasBorder={true}>
             <EuiFlexGroup justifyContent="spaceBetween">
               <EuiFlexItem grow={2}>
-                <EuiTitle size={'m'}>
-                  <h3>Alert details</h3>
-                </EuiTitle>
+                <EuiText size='s'>
+                  <h2>Alert details</h2>
+                </EuiText>
               </EuiFlexItem>
               <EuiFlexItem grow={8}>
                 <EuiFlexGroup justifyContent="flexEnd" alignItems="center">

diff --git a/public/pages/Alerts/components/ThreatIntelAlertFlyout/ThreatIntelAlertFlyout.tsx b/public/pages/Alerts/components/ThreatIntelAlertFlyout/ThreatIntelAlertFlyout.tsx
@@ -18,7 +18,6 @@ import {
   EuiLink,
   EuiSpacer,
   EuiText,
-  EuiTitle,
 } from '@elastic/eui';
 import React, { useEffect, useState } from 'react';
 import { ThreatIntelAlert, ThreatIntelFinding } from '../../../../../types';
@@ -124,9 +123,9 @@ export const ThreatIntelAlertFlyout: React.FC<ThreatIntelAlertFlyoutProps> = ({
       <EuiFlyoutHeader hasBorder={true}>
         <EuiFlexGroup justifyContent="spaceBetween">
           <EuiFlexItem grow={2}>
-            <EuiTitle size={'m'}>
-              <h3>Alert details</h3>
-            </EuiTitle>
+            <EuiText size='s'>
+              <h2>Alert details</h2>
+            </EuiText>
           </EuiFlexItem>
           <EuiFlexItem grow={8}>
             <EuiFlexGroup justifyContent="flexEnd" alignItems="center">

diff --git a/public/pages/Correlations/components/DeleteModal.tsx b/public/pages/Correlations/components/DeleteModal.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiConfirmModal } from '@elastic/eui';
+import { EuiConfirmModal, EuiText } from '@elastic/eui';
 import React from 'react';
 
 export interface DeleteRuleModalProps {
@@ -19,15 +19,15 @@ export const DeleteCorrelationRuleModal: React.FC<DeleteRuleModalProps> = ({
 }) => {
   return (
     <EuiConfirmModal
-      title={`Delete ${title}?`}
+      title={<EuiText size="s"><h2>Delete {title}?</h2></EuiText>}
       onCancel={onCancel}
       onConfirm={onConfirm}
       cancelButtonText="Cancel"
       confirmButtonText="Delete"
       buttonColor="danger"
       defaultFocusedButton="confirm"
     >
-      <p>Delete the correlation rule permanently? This action cannot be undone.</p>
+      <EuiText size="s">Delete the correlation rule permanently? This action cannot be undone.</EuiText>
     </EuiConfirmModal>
   );
 };
diff --git a/public/pages/Correlations/components/FilterGroup.tsx b/public/pages/Correlations/components/FilterGroup.tsx
@@ -10,7 +10,7 @@ import {
   EuiFilterSelectItem,
   EuiPopover,
   EuiPopoverTitle,
-  EuiFieldSearch,
+  EuiCompressedFieldSearch,
   FilterChecked,
   EuiPopoverFooter,
   EuiButtonGroup,
@@ -182,7 +182,7 @@ export const FilterGroup: React.FC<LogTypeFilterGroupProps> = ({
         panelPaddingSize="none"
       >
         <EuiPopoverTitle paddingSize="s">
-          <EuiFieldSearch compressed onSearch={search} isClearable={true} />
+          <EuiCompressedFieldSearch onSearch={search} isClearable={true} />
         </EuiPopoverTitle>
         <div
           className="ouiFilterSelect__items"

diff --git a/public/pages/Correlations/containers/CorrelationRules.tsx b/public/pages/Correlations/containers/CorrelationRules.tsx
@@ -8,7 +8,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiSpacer,
-  EuiTitle,
+  EuiText,
   EuiPanel,
   EuiSmallButton,
   EuiInMemoryTable,
@@ -114,9 +114,9 @@ export const CorrelationRules: React.FC<CorrelationRulesProps> = (props: Correla
           <EuiFlexItem>
             <EuiFlexGroup gutterSize={'s'} justifyContent={'spaceBetween'}>
               <EuiFlexItem>
-                <EuiTitle size="m">
+                <EuiText size="s">
                   <h1>Correlation rules</h1>
-                </EuiTitle>
+                </EuiText>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>{createRuleAction}</EuiFlexItem>
             </EuiFlexGroup>
@@ -139,15 +139,17 @@ export const CorrelationRules: React.FC<CorrelationRulesProps> = (props: Correla
             ) : (
               <EuiEmptyPrompt
                 title={
-                  <EuiTitle>
-                    <h1>No correlation rules found</h1>
-                  </EuiTitle>
+                  <EuiText size="s">
+                    <h2>No correlation rules found</h2>
+                  </EuiText>
                 }
                 body={
-                  <p>
-                    Create a correlation rule based on specified fields to generate correlations
-                    across all findings between different log types.
-                  </p>
+                  <EuiText size="s">
+                    <p>
+                      Create a correlation rule based on specified fields to generate correlations
+                      across all findings between different log types.
+                    </p>
+                  </EuiText>
                 }
                 actions={[
                   <EuiSmallButton

diff --git a/public/pages/Correlations/containers/CorrelationsContainer.tsx b/public/pages/Correlations/containers/CorrelationsContainer.tsx
@@ -26,7 +26,7 @@ import {
   EuiFlexItem,
   EuiTitle,
   EuiPanel,
-  EuiSuperDatePicker,
+  EuiCompressedSuperDatePicker,
   EuiSpacer,
   EuiSmallButtonEmpty,
   EuiFlyout,
@@ -450,11 +450,11 @@ export class Correlations extends React.Component<CorrelationsProps, Correlation
     ) : (
       <EuiEmptyPrompt
         title={
-          <EuiTitle>
-            <h1>No correlations found</h1>
-          </EuiTitle>
+          <EuiText size="s">
+            <h2>No correlations found</h2>
+          </EuiText>
         }
-        body={<p>There are no correlated findings in the system.</p>}
+        body={<EuiText size="s"><p>There are no correlated findings in the system.</p></EuiText>}
         actions={[
           <EuiSmallButton fill={true} color="primary" href={`#${ROUTES.CORRELATION_RULE_CREATE}`}>
             Create correlation rule
@@ -467,7 +467,7 @@ export class Correlations extends React.Component<CorrelationsProps, Correlation
   render() {
     const findingCardsData = this.state.specificFindingInfo;
     const datePicker = (
-      <EuiSuperDatePicker
+      <EuiCompressedSuperDatePicker
         start={this.startTime}
         end={this.endTime}
         recentlyUsedRanges={this.state.recentlyUsedRanges}
@@ -491,9 +491,9 @@ export class Correlations extends React.Component<CorrelationsProps, Correlation
             <EuiFlyoutHeader>
               <EuiFlexGroup>
                 <EuiFlexItem>
-                  <EuiTitle size="m">
-                    <h1>Correlation</h1>
-                  </EuiTitle>
+                  <EuiText size="s">
+                    <h2>Correlation</h2>
+                  </EuiText>
                 </EuiFlexItem>
                 <EuiFlexItem grow={false}>
                   <EuiSmallButtonIcon
@@ -559,9 +559,9 @@ export class Correlations extends React.Component<CorrelationsProps, Correlation
             <EuiFlexItem>
               <EuiFlexGroup>
                 <EuiFlexItem>
-                  <EuiTitle size="m">
+                  <EuiText size="s">
                     <h1>Correlations</h1>
-                  </EuiTitle>
+                  </EuiText>
                 </EuiFlexItem>
                 <EuiFlexItem grow={false}>{datePicker}</EuiFlexItem>
               </EuiFlexGroup>
@@ -598,13 +598,13 @@ export class Correlations extends React.Component<CorrelationsProps, Correlation
                 alignItems="center"
               >
                 <EuiFlexItem grow={false}>
-                  <EuiText>
+                  <EuiText size="s">
                     <strong>Severity:</strong>
                   </EuiText>
                 </EuiFlexItem>
                 {ruleSeverity.map((sev, idx) => (
                   <EuiFlexItem grow={false} key={idx}>
-                    <EuiText>
+                    <EuiText size="s">
                       <EuiIcon type="dot" color={sev.color.background} /> {sev.value}
                     </EuiText>
                   </EuiFlexItem>

diff --git a/public/pages/Correlations/containers/CreateCorrelationRule.tsx b/public/pages/Correlations/containers/CreateCorrelationRule.tsx
@@ -455,9 +455,9 @@ export const CreateCorrelationRule: React.FC<CreateCorrelationRuleProps> = (
   ) => {
     return (
       <>
-        <EuiTitle size="s">
-          <h5>Query type</h5>
-        </EuiTitle>
+        <EuiText size="s">
+          <h3>Query type</h3>
+        </EuiText>
         <EuiSpacer size="s" />
         <EuiFlexGroup>
           <EuiFlexItem style={{ maxWidth: 400 }}>
@@ -466,9 +466,9 @@ export const CreateCorrelationRule: React.FC<CreateCorrelationRuleProps> = (
               id={htmlIdGenerator('corr-rule-filter')()}
               label={
                 <>
-                  <EuiTitle size="s">
+                  <EuiText size="s">
                     <h4>Data filter</h4>
-                  </EuiTitle>
+                  </EuiText>
                   <EuiText size="s">
                     <p>
                       A correlation will be created for the matching findings narrowed down with
@@ -490,9 +490,9 @@ export const CreateCorrelationRule: React.FC<CreateCorrelationRuleProps> = (
               id={htmlIdGenerator('corr-rule-group-by')()}
               label={
                 <>
-                  <EuiTitle size="s">
+                  <EuiText size="s">
                     <h4>Group by field values</h4>
-                  </EuiTitle>
+                  </EuiText>
                   <EuiText size="s">
                     <p>
                       A correlation will be created when the values for the field values for each
@@ -855,9 +855,9 @@ export const CreateCorrelationRule: React.FC<CreateCorrelationRuleProps> = (
           },
         ]}
       >
-        <EuiTitle>
+        <EuiText size="s">
           <h1>{`${action} correlation rule`}</h1>
-        </EuiTitle>
+        </EuiText>
         <EuiText size="s" color="subdued">
           {description}
         </EuiText>
@@ -1005,11 +1005,11 @@ export const CreateCorrelationRule: React.FC<CreateCorrelationRuleProps> = (
               <EuiSpacer size="l" />
               <ContentPanel panelStyles={{ paddingLeft: 10, paddingRight: 10 }} hideHeaderBorder>
                 <ExperimentalBanner />
-                <EuiTitle size="m">
+                <EuiText size="s">
                   <h2>Alert Trigger </h2>
-                </EuiTitle>
+                </EuiText>
                 <EuiSpacer size="s" />
-                <EuiText>
+                <EuiText size="s">
                   <p>Get an alert on the correlation between the findings.</p>
                 </EuiText>
                 <EuiSpacer size="m" />

diff --git a/public/pages/CreateDetector/components/ConfigureAlerts/containers/ConfigureAlerts.tsx b/public/pages/CreateDetector/components/ConfigureAlerts/containers/ConfigureAlerts.tsx
@@ -200,9 +200,9 @@ export default class ConfigureAlerts extends Component<ConfigureAlertsProps, Con
               <EuiAccordion
                 id={`alert-condition-${index}`}
                 buttonContent={
-                  <EuiTitle>
-                    <h4>{alertCondition.name}</h4>
-                  </EuiTitle>
+                  <EuiText size="s">
+                    <h3>{alertCondition.name}</h3>
+                  </EuiText>
                 }
                 paddingSize={'none'}
                 initialIsOpen={true}

diff --git a/...r/components/ConfigureFieldMapping/components/RequiredFieldMapping/FieldMappingsTable.tsx b/...r/components/ConfigureFieldMapping/components/RequiredFieldMapping/FieldMappingsTable.tsx
@@ -171,7 +171,7 @@ export default class FieldMappingsTable<T extends MappingViewType> extends Compo
           <EuiEmptyPrompt
             style={{ maxWidth: '45em' }}
             body={
-              <EuiText>
+              <EuiText size="s">
                 <p>There are no field mappings.</p>
               </EuiText>
             }

diff --git a/...ages/CreateDetector/components/ConfigureFieldMapping/containers/ConfigureFieldMapping.tsx b/...ages/CreateDetector/components/ConfigureFieldMapping/containers/ConfigureFieldMapping.tsx
@@ -352,6 +352,7 @@ export default class ConfigureFieldMapping extends Component<
         key={index}
         onClick={() => this.setState({ selectedTabId: tab.id, selectedTabContent: tab.content })}
         isSelected={this.state.selectedTabId === tab.id}
+        size="s"
       >
         {tab.name}
       </EuiTab>
@@ -392,11 +393,13 @@ export default class ConfigureFieldMapping extends Component<
               </EuiTitle>
             }
             body={
-              <p>
-                Automatically mapped fields and additional fields that may
-                <br /> require manual mapping will be shown here. Select log type
-                <br /> for your data source.
-              </p>
+              <EuiText size="s">
+                <p>
+                  Automatically mapped fields and additional fields that may
+                  <br /> require manual mapping will be shown here. Select log type
+                  <br /> for your data source.
+                </p>
+              </EuiText>
             }
           />
         ) : (