added code for the change of design of the sidebar, fixed overriding …

…spinner bug, changed font size Signed-off-by: sumukhswamy <[email protected]>
opensearch-project · Aug 16, 2023 · 4787fc9 · 4787fc9
1 parent e947d4b
commit 4787fc9
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 8 deletions.
diff --git a/public/components/event_analytics/explorer/explorer.tsx b/public/components/event_analytics/explorer/explorer.tsx
@@ -642,6 +642,7 @@ export const Explorer = ({
     isOverridingTimestamp,
     query,
     isLiveTailOnRef.current,
+    isOverridingPattern,
   ]);
 
   const visualizations: IVisualizationContainerProps = useMemo(() => {

diff --git a/public/components/event_analytics/explorer/sidebar/field.tsx b/public/components/event_analytics/explorer/sidebar/field.tsx
@@ -83,7 +83,7 @@ export const Field = (props: IFieldProps) => {
                   Default Pattern
                 </EuiMark>
               ) : isOverridingPattern ? (
-                <EuiLoadingSpinner className="override_pattern_loading" size="m" />
+                <EuiLoadingSpinner className="override_pattern_loading" size="s" />
               ) : (
                 <EuiButtonIcon
                   aria-labelledby="override_pattern"
@@ -108,7 +108,7 @@ export const Field = (props: IFieldProps) => {
                   Default Timestamp
                 </EuiMark>
               ) : isOverridingTimestamp ? (
-                <EuiLoadingSpinner className="override_timestamp_loading" size="m" />
+                <EuiLoadingSpinner className="override_timestamp_loading" size="s" />
               ) : (
                 <EuiButtonIcon
                   aria-labelledby="override_timestamp"
@@ -179,8 +179,8 @@ export const Field = (props: IFieldProps) => {
       panelClassName="dscSidebarItem__fieldPopoverPanel"
       button={
         <FieldButton
-          size="m"
-          className="shard__fieldSelectorField explorer__fieldSelectorField"
+          size="s"
+          className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
           isActive={isFieldDetailsOpen}
           dataTestSubj={`field-${field.name}-showDetails`}
           fieldIcon={<FieldIcon type={isEqual(field.type, 'timestamp') ? 'date' : field.type} />}

diff --git a/public/components/event_analytics/explorer/sidebar/sidebar.scss b/public/components/event_analytics/explorer/sidebar/sidebar.scss
@@ -124,3 +124,7 @@
 .ws__configPanel--right{
   overflow-y: unset;
 }
+
+.dscSidebar__item{
+  white-space: nowrap;
+}
diff --git a/public/components/event_analytics/explorer/sidebar/sidebar.tsx b/public/components/event_analytics/explorer/sidebar/sidebar.tsx
@@ -6,7 +6,7 @@
 import React, { useState, useCallback, useContext } from 'react';
 import { batch, useDispatch } from 'react-redux';
 import { isEmpty } from 'lodash';
-import { EuiTitle, EuiSpacer, EuiFieldSearch, EuiAccordion } from '@elastic/eui';
+import { EuiTitle, EuiSpacer, EuiFieldSearch, EuiAccordion, EuiHorizontalRule } from '@elastic/eui';
 import { I18nProvider } from '@osd/i18n/react';
 import { Field } from './field';
 import { ExplorerFields, IExplorerFields, IField } from '../../../../../common/types/explorer';
@@ -108,6 +108,7 @@ export const Sidebar = (props: ISidebarProps) => {
     },
     [explorerFields, tabId]
   );
+  console.log('sidebar ',isOverridingPattern)
 
   return (
     <I18nProvider>
@@ -134,12 +135,13 @@ export const Sidebar = (props: ISidebarProps) => {
                   initialIsOpen
                   id="fieldSelector__queriedFields"
                   buttonContent={
-                    <EuiTitle size="xxxs">
+                    <EuiTitle size="xxs">
                       <span>Query fields</span>
                     </EuiTitle>
                   }
                   paddingSize="xs"
                 >
+                <EuiHorizontalRule margin ='xs' />
                   <ul
                     className="dscSidebarList dscFieldList--selected"
                     aria-labelledby="queried_fields"
@@ -178,12 +180,13 @@ export const Sidebar = (props: ISidebarProps) => {
                 initialIsOpen
                 id="fieldSelector__selectedFields"
                 buttonContent={
-                  <EuiTitle size="xxxs">
+                  <EuiTitle size="xxs">
                     <span>Selected Fields</span>
                   </EuiTitle>
                 }
                 paddingSize="xs"
               >
+                <EuiHorizontalRule margin ='xs' />
                 <ul
                   className="dscSidebarList dscFieldList--selected"
                   aria-labelledby="selected_fields"
@@ -223,12 +226,13 @@ export const Sidebar = (props: ISidebarProps) => {
                 initialIsOpen
                 id="fieldSelector__availableFields"
                 buttonContent={
-                  <EuiTitle size="xxxs">
+                  <EuiTitle size="xxs">
                     <span>Available Fields</span>
                   </EuiTitle>
                 }
                 paddingSize="xs"
               >
+                <EuiHorizontalRule margin ='xs' />
                 <ul
                   className={`dscFieldList dscFieldList--unpopular ${
                     !showFields ? 'hidden-sm hidden-xs' : ''