[Look&Feel] Consistency and density improvements (#836)

* Changed context menus to be small Signed-off-by: Dan Dong <[email protected]> * Updated tabs to be small Signed-off-by: Dan Dong <[email protected]> * Updated paragraph text to be EuiText size="s" Signed-off-by: Dan Dong <[email protected]> * Updated semantic headers Signed-off-by: Dan Dong <[email protected]> * Updated primary buttons Signed-off-by: Dan Dong <[email protected]> * Reverted unintended changes Signed-off-by: Dan Dong <[email protected]> * Updated snapshot testing Signed-off-by: Dan Dong <[email protected]> * Fixed merge conflict Signed-off-by: Dan Dong <[email protected]> * Updated snapshot tests --------- Signed-off-by: Dan Dong <[email protected]>
opensearch-project · Aug 21, 2024 · 07908a0 · 07908a0
1 parent 356d8c7
commit 07908a0
Show file tree

Hide file tree

Showing 44 changed files with 451 additions and 315 deletions.
diff --git a/public/components/CodeModal/CodeModal.tsx b/public/components/CodeModal/CodeModal.tsx
@@ -17,6 +17,7 @@ import {
   EuiModalHeaderTitle,
   EuiOverlayMask,
   EuiCodeBlock,
+  EuiText,
 } from '@elastic/eui';
 
 interface CodeModalProps {
@@ -33,7 +34,9 @@ export const CodeModal = (props: CodeModalProps) => {
         <EuiModalHeader>
           <EuiModalHeaderTitle>
             <div>
-              <p>{props.title}</p>
+              <EuiText size="s">
+                <h2>{props.title}</h2>
+              </EuiText>
               {props.subtitle ? (
                 <p className="modelSubtitle">{props.subtitle}</p>
               ) : (

diff --git a/.../AssociatedDetectors/components/ConfirmUnlinkDetectorModal/ConfirmUnlinkDetectorModal.tsx b/.../AssociatedDetectors/components/ConfirmUnlinkDetectorModal/ConfirmUnlinkDetectorModal.tsx
@@ -39,10 +39,16 @@ export const ConfirmUnlinkDetectorModal = (
         maxWidth={450}
       >
         <EuiModalHeader>
-          <EuiModalHeaderTitle>{'Remove association?'}</EuiModalHeaderTitle>
+          <EuiModalHeaderTitle>
+            <EuiText size="s">
+              <h2>
+                {'Remove association?'}
+              </h2>
+            </EuiText>
+          </EuiModalHeaderTitle>
         </EuiModalHeader>
         <EuiModalBody>
-          <EuiText>
+          <EuiText size="s">
             Removing association unlinks {props.detector.name} detector from the
             visualization but does not delete it. The detector association can
             be restored.

diff --git a/...tedDetectors/components/EmptyAssociatedDetectorMessage/EmptyAssociatedDetectorMessage.tsx b/...tedDetectors/components/EmptyAssociatedDetectorMessage/EmptyAssociatedDetectorMessage.tsx
@@ -20,7 +20,7 @@ export const EmptyAssociatedDetectorMessage = (props: EmptyDetectorProps) => (
     data-test-subj="emptyAssociatedDetectorFlyoutMessage"
     style={{ maxWidth: '45em' }}
     body={
-      <EuiText>
+      <EuiText size="s">
         <p>
           {props.isFilterApplied
             ? FILTER_TEXT

diff --git a/...Detectors/components/__tests__/__snapshots__/EmptyAssociatedDetectorMessage.test.tsx.snap b/...Detectors/components/__tests__/__snapshots__/EmptyAssociatedDetectorMessage.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`ConfirmUnlinkDetectorModal spec renders the component with filter appli
         class="euiText euiText--medium"
       >
         <div
-          class="euiText euiText--medium"
+          class="euiText euiText--small"
         >
           <p>
             There are no detectors matching your search
@@ -56,7 +56,7 @@ exports[`ConfirmUnlinkDetectorModal spec renders the component with filter appli
         class="euiText euiText--medium"
       >
         <div
-          class="euiText euiText--medium"
+          class="euiText euiText--small"
         >
           <p>
             There are no anomaly detectors associated with test-title visualization.

diff --git a/...ponents/FeatureAnywhereContextMenu/AssociatedDetectors/containers/AssociatedDetectors.tsx b/...ponents/FeatureAnywhereContextMenu/AssociatedDetectors/containers/AssociatedDetectors.tsx
@@ -15,6 +15,7 @@ import {
   EuiFlexItem,
   EuiFlexGroup,
   EuiCallOut,
+  EuiText,
 } from '@elastic/eui';
 import { get, isEmpty } from 'lodash';
 import '../styles.scss';
@@ -85,7 +86,7 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) {
       const indexPattern = await getSavedObjectsClient().get('index-pattern', indexPatternId);
       const refs = indexPattern.references as References[];
       const foundDataSourceId = refs.find(ref => ref.type === 'data-source')?.id;
-      setDataSourceId(foundDataSourceId);
+      setDataSourceId(foundDataSourceId); 
     } catch (error) {
       console.error("Error fetching index pattern:", error);
     }
@@ -270,7 +271,7 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) {
       getDetectorList(
         getAllDetectorsQueryParamsWithDataSourceId(dataSourceId)
       )
-    );
+    );  
   };
 
   const handleUnlinkDetectorAction = (detector: DetectorListItem) => {
@@ -334,11 +335,11 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) {
         onClose={closeFlyout}
       >
         <EuiFlyoutHeader hasBorder>
-          <EuiTitle>
+          <EuiText size="s">
             <h2 id="associated-detectors__title">
               Associated anomaly detectors
             </h2>
-          </EuiTitle>
+          </EuiText>
         </EuiFlyoutHeader>
         {associationLimitReached ? (
           <EuiCallOut

diff --git a/public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/AddAnomalyDetector.tsx b/public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/AddAnomalyDetector.tsx
@@ -141,7 +141,7 @@ function AddAnomalyDetector({
       const indexPattern = await getSavedObjectsClient().get('index-pattern', indexPatternId);
       const refs = indexPattern.references as References[];
       const foundDataSourceId = refs.find(ref => ref.type === 'data-source')?.id;
-      setDataSourceId(foundDataSourceId);
+      setDataSourceId(foundDataSourceId); 
     } catch (error) {
       console.error("Error fetching index pattern:", error);
     }
@@ -167,7 +167,7 @@ function AddAnomalyDetector({
     }
     fetchData();
     createEmbeddable();
-  }, [dataSourceId]);
+  }, [dataSourceId]); 
 
   const [isShowVis, setIsShowVis] = useState(false);
   const [accordionsOpen, setAccordionsOpen] = useState({ modelFeatures: true });
@@ -465,7 +465,7 @@ function AddAnomalyDetector({
 
   const getEverythingSuccessfulButton = (detectorId, shingleSize) => {
     return (
-      <EuiText>
+      <EuiText size="s">
         <p>
           Attempting to initialize the detector with historical data. This
           initializing process takes approximately 1 minute if you have data in
@@ -586,9 +586,9 @@ function AddAnomalyDetector({
         {(formikProps) => (
           <>
             <EuiFlyoutHeader hasBorder>
-              <EuiTitle>
+              <EuiText size="s">
                 <h2 id="add-anomaly-detector__title">Add anomaly detector</h2>
-              </EuiTitle>
+              </EuiText>
             </EuiFlyoutHeader>
             <EuiFlyoutBody>
               {associationLimitReached ? (
@@ -669,7 +669,7 @@ function AddAnomalyDetector({
                         isOpen={accordionsOpen.detectorDetails}
                         onToggle={() => onAccordionToggle('detectorDetails')}
                         subTitle={
-                          <EuiText size="m">
+                          <EuiText size="s">
                             <p>
                               Detector interval: {intervalValue} minute(s);
                               Window delay: {delayValue} minute(s)

diff --git a/public/pages/ConfigureModel/containers/ConfigureModel.tsx b/public/pages/ConfigureModel/containers/ConfigureModel.tsx
@@ -17,7 +17,6 @@ import {
   EuiFlexGroup,
   EuiPage,
   EuiSmallButton,
-  EuiTitle,
   EuiSmallButtonEmpty,
   EuiSpacer,
   EuiText,
@@ -298,19 +297,19 @@ export function ConfigureModel(props: ConfigureModelProps) {
             <EuiPageBody>
               <EuiPageHeader>
                 <EuiPageHeaderSection>
-                  <EuiTitle
-                    size="l"
+                  <EuiText
+                    size="s"
                     data-test-subj="configureOrEditModelConfigurationTitle"
                   >
                     <h1>
                       {props.isEdit
                         ? 'Edit model configuration'
                         : 'Configure model'}{' '}
                     </h1>
-                  </EuiTitle>
+                  </EuiText>
                   <Fragment>
                     <EuiSpacer size="s" />
-                    <EuiText>
+                    <EuiText size="s">
                       Set the index fields that you want to find anomalies for
                       by defining the model features. You can also set other
                       model parameters such as category field and shingle size

diff --git a/public/pages/ConfigureModel/containers/SampleAnomalies.tsx b/public/pages/ConfigureModel/containers/SampleAnomalies.tsx
@@ -205,7 +205,7 @@ export function SampleAnomalies(props: SampleAnomaliesProps) {
       >
         <EuiFlexGroup>
           <EuiFlexItem>
-            <EuiText>
+            <EuiText size="s">
               {firstPreview
                 ? 'You can preview how your anomalies may look like from sample feature output and adjust the feature settings as needed.'
                 : 'Use the sample data as a reference to fine tune settings. To see the latest preview with your adjustments, click "Refresh preview". Once you are done with your edits, save your changes and run the detector to see real time anomalies for the new data set.'}{' '}
@@ -231,7 +231,6 @@ export function SampleAnomalies(props: SampleAnomaliesProps) {
                   getSampleAnomalies();
                 }
               }}
-              fill={!firstPreview}
               isLoading={isLoading}
             >
               {firstPreview ? 'Preview anomalies' : 'Refresh preview'}

diff --git a/public/pages/ConfigureModel/containers/__tests__/__snapshots__/ConfigureModel.test.tsx.snap b/public/pages/ConfigureModel/containers/__tests__/__snapshots__/ConfigureModel.test.tsx.snap
@@ -14,18 +14,20 @@ exports[`<ConfigureModel /> spec creating model configuration renders the compon
       <div
         class="euiPageHeaderSection"
       >
-        <h1
-          class="euiTitle euiTitle--large"
+        <div
+          class="euiText euiText--small"
           data-test-subj="configureOrEditModelConfigurationTitle"
         >
-          Configure model
-           
-        </h1>
+          <h1>
+            Configure model
+             
+          </h1>
+        </div>
         <div
           class="euiSpacer euiSpacer--s"
         />
         <div
-          class="euiText euiText--medium"
+          class="euiText euiText--small"
         >
           Set the index fields that you want to find anomalies for by defining the model features. You can also set other model parameters such as category field and shingle size for more granular views. After you set the model features and other optional parameters, you can preview your anomalies from a sample feature output.
            
@@ -910,7 +912,7 @@ exports[`<ConfigureModel /> spec creating model configuration renders the compon
                     class="euiFlexItem"
                   >
                     <div
-                      class="euiText euiText--medium"
+                      class="euiText euiText--small"
                     >
                       You can preview how your anomalies may look like from sample feature output and adjust the feature settings as needed.
                        
@@ -995,18 +997,20 @@ exports[`<ConfigureModel /> spec editing model configuration renders the compone
       <div
         class="euiPageHeaderSection"
       >
-        <h1
-          class="euiTitle euiTitle--large"
+        <div
+          class="euiText euiText--small"
           data-test-subj="configureOrEditModelConfigurationTitle"
         >
-          Edit model configuration
-           
-        </h1>
+          <h1>
+            Edit model configuration
+             
+          </h1>
+        </div>
         <div
           class="euiSpacer euiSpacer--s"
         />
         <div
-          class="euiText euiText--medium"
+          class="euiText euiText--small"
         >
           Set the index fields that you want to find anomalies for by defining the model features. You can also set other model parameters such as category field and shingle size for more granular views. After you set the model features and other optional parameters, you can preview your anomalies from a sample feature output.
            

diff --git a/public/pages/Dashboard/Components/AnomaliesLiveChart.tsx b/public/pages/Dashboard/Components/AnomaliesLiveChart.tsx
@@ -237,9 +237,9 @@ export const AnomaliesLiveChart = (props: AnomaliesLiveChartProps) => {
           </h3>
         </EuiTitle>
       }
-      subTitle={`Live anomaly results across detectors for the last 30 minutes.
-                'The results refresh every 1 minute.
-                'For each detector, if an anomaly occurrence is detected at the end of the detector interval,
+      subTitle={`Live anomaly results across detectors for the last 30 minutes. 
+                'The results refresh every 1 minute. 
+                'For each detector, if an anomaly occurrence is detected at the end of the detector interval, 
                 'you will see a bar representing its anomaly grade.`}
       actions={[fullScreenButton()]}
       contentPanelClassName={isFullScreen ? 'full-screen' : undefined}
@@ -255,6 +255,7 @@ export const AnomaliesLiveChart = (props: AnomaliesLiveChartProps) => {
         </EuiFlexGroup>
       ) : !hasLatestAnomalyResult ? (
         <EuiText
+          size="s"
           style={{
             color: '#666666',
             paddingTop: '12px',

diff --git a/public/pages/Dashboard/Components/EmptyDashboard/EmptyDashboard.tsx b/public/pages/Dashboard/Components/EmptyDashboard/EmptyDashboard.tsx
@@ -9,7 +9,7 @@
  * GitHub history for details.
  */
 
-import { EuiEmptyPrompt, EuiLink, EuiIcon } from '@elastic/eui';
+import { EuiEmptyPrompt, EuiLink, EuiIcon, EuiText } from '@elastic/eui';
 import React, { Component, Fragment } from 'react';
 import { CreateDetectorButtons } from '../../../../components/CreateDetectorButtons/CreateDetectorButtons';
 import { BASE_DOCS_LINK } from '../../../../utils/constants';
@@ -22,17 +22,19 @@ export class EmptyDashboard extends Component<{}, {}> {
         title={<h2>You have no detectors</h2>}
         body={
           <Fragment>
-            <p>Create detector first to detect anomalies in your data.</p>
-            <p>
-              Dashboard will generate insights on the anomalies across all of
-              your detectors.
-            </p>
-            <p>
-              Read about{' '}
-              <EuiLink href={`${BASE_DOCS_LINK}/ad`} target="_blank">
-                Get started with Anomaly detection
-              </EuiLink>{' '}
-            </p>
+            <EuiText size="s">
+              <p>Create detector first to detect anomalies in your data.</p>
+              <p>
+                Dashboard will generate insights on the anomalies across all of
+                your detectors.
+              </p>
+              <p>
+                Read about{' '}
+                <EuiLink href={`${BASE_DOCS_LINK}/ad`} target="_blank">
+                  Get started with Anomaly detection
+                </EuiLink>{' '}
+              </p>
+            </EuiText>
           </Fragment>
         }
         actions={<CreateDetectorButtons />}