Match core wizard design

dashboards-observability/common/types/explorer.ts

@@ -99,7 +99,7 @@ export interface ILogExplorerProps {
   ) => void;
   savedObjectId: string;
   getExistingEmptyTab: (params: EmptyTabParams) => string;
-  qm: QueryManager;
+  queryManager: QueryManager;
 }
 
 export interface IExplorerProps {
@@ -130,7 +130,7 @@ export interface IExplorerProps {
   appBaseQuery?: string;
   callback?: any;
   callbackInApp?: any;
-  qm: QueryManager;
+  queryManager: QueryManager;
 }
 
 export interface SavedQuery {
@@ -316,13 +316,13 @@ export interface EventAnalyticsProps {
   timestampUtils: TimestampUtils;
   http: HttpStart;
   notifications: NotificationsStart;
-  qm: QueryManager;
+  queryManager: QueryManager;
 }
 
 export interface DataConfigPanelProps {
   fieldOptionList: IField[];
   visualizations: IVisualizationContainerProps;
-  qm?: QueryManager;
+  queryManager?: QueryManager;
 }
 export interface GetTooltipHoverInfoType {
   tooltipMode: string;

dashboards-observability/public/components/app.tsx

@@ -25,7 +25,7 @@ interface ObservabilityAppDeps {
   dslService: any;
   savedObjects: any;
   timestampUtils: any;
-  qm: QueryManager;
+  queryManager: QueryManager;
 }
 
 // for cypress to test redux store
@@ -40,7 +40,7 @@ export const App = ({
   dslService,
   savedObjects,
   timestampUtils,
-  qm,
+  queryManager,
 }: ObservabilityAppDeps) => {
   const { chrome, http, notifications } = CoreStartProp;
   const parentBreadcrumb = {
@@ -133,7 +133,7 @@ export const App = ({
                       timestampUtils={timestampUtils}
                       http={http}
                       notifications={notifications}
-                      qm={qm}
+                      queryManager={queryManager}
                       {...props}
                     />
                   );

dashboards-observability/public/components/common/field_button/field_button.scss

@@ -78,3 +78,45 @@
     margin-right: $euiSizeXS;
   }
 }
+
+.shard__fieldSelectorField {
+  &:hover,
+  &:focus-within,
+  &[class*='-isActive'] {
+    .dscSidebarItem__action {
+      opacity: 1;
+    }
+  }
+
+  & > .osdFieldButton__button {
+    padding: 0;
+  }
+
+  & .osdFieldButton__name {
+    padding: $euiSizeS $euiSizeS $euiSizeS 0;
+  }
+
+  & > button {
+    align-items: stretch;
+  }
+
+  & .osdFieldIcon {
+    box-shadow: none;
+    height: 100%;
+    flex-shrink: 0;
+    line-height: 0;
+  }
+
+  & .osdFieldButton__fieldIcon {
+    box-shadow: none;
+    margin-right: 8px;
+  }
+}
+
+#vis__mainContent .explorer__fieldSelectorField {
+  @include euiBottomShadowSmall;
+
+  background-color: $euiColorEmptyShade;
+  border: $euiBorderThin;
+  margin-top: $euiSizeS;
+}

dashboards-observability/public/components/common/field_button/field_button.tsx

@@ -76,6 +76,7 @@ export function FieldButton({
   buttonProps,
   ...rest
 }: FieldButtonProps) {
+
   const classes = classNames(
     'osdFieldButton',
     size ? sizeToClassNameMap[size] : null,

dashboards-observability/public/components/common/field_icon/field_icon.tsx

@@ -26,7 +26,7 @@ export interface FieldIconProps extends Omit<EuiTokenProps, 'iconType'> {
 }
 
 // defaultIcon => a unknown datatype
-const defaultIcon = { iconType: 'questionInCircle', color: 'gray' };
+const defaultIcon = { iconType: 'tokenString' };
 
 export const typeToEuiIconMap: Partial<Record<string, EuiTokenProps>> = {
   boolean: { iconType: 'tokenBoolean' },
@@ -50,13 +50,12 @@ export const typeToEuiIconMap: Partial<Record<string, EuiTokenProps>> = {
 export function FieldIcon({
   type,
   label,
-  size = 's',
+  size = 'l',
   scripted,
   className,
   ...rest
 }: FieldIconProps) {
   const token = typeToEuiIconMap[type] || defaultIcon;
-
   return (
     <EuiToken
       {...token}

dashboards-observability/public/components/event_analytics/explorer/explorer.scss

@@ -3,15 +3,22 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
- .liveStream {
-    margin : 8px;
-    height: 40px;
-    align-items: center;
-    justify-content: center;
-    flex-direction: row;
-    display: flex;
-    flex-grow: 1;
-    vertical-align: baseline;
-  }
+#opensearch-dashboards-body {
+  overflow-y: hidden;
+}
 
+.liveStream {
+  margin : 8px;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  display: flex;
+  flex-grow: 1;
+  vertical-align: baseline;
+}
+
+.mainContentTabs .euiResizableContainer {
+  height: calc(100vh - 298px);
+}
 

dashboards-observability/public/components/event_analytics/explorer/explorer.tsx

@@ -110,7 +110,7 @@ export const Explorer = ({
   setEndTime,
   callback,
   callbackInApp,
-  qm,
+  queryManager,
 }: IExplorerProps) => {
   const dispatch = useDispatch();
   const requestParams = { tabId };
@@ -497,6 +497,7 @@ export const Explorer = ({
     handleQuerySearch(availability);
   };
 
+
   /**
    * Toggle fields between selected and unselected sets
    * @param field field to be toggled
@@ -585,7 +586,7 @@ export const Explorer = ({
             data-test-subj="eventExplorer__sidebar"
           >
             {!isSidebarClosed && (
-              <div className="dscFieldChooser">
+              <div className="explorerFieldSelector">
                 <Sidebar
                   query={query}
                   explorerFields={explorerFields}
@@ -768,7 +769,7 @@ export const Explorer = ({
         handleOverrideTimestamp={handleOverrideTimestamp}
         callback={callbackForConfig}
         changeIsValidConfigOptionState={changeIsValidConfigOptionState}
-        qm={qm}
+        queryManager={queryManager}
       />
     );
   };
@@ -925,8 +926,7 @@ export const Explorer = ({
 
       if (selectedContentTabId === TAB_CHART_ID) {
         // parse stats section on every search
-        const qm = new QueryManager();
-        const statsTokens = qm.queryParser().parse(tempQuery).getStats();
+        const statsTokens = queryManager.queryParser().parse(tempQuery).getStats();
 
         const updatedDataConfig = getUpdatedDataConfig(statsTokens);
         await dispatch(

dashboards-observability/public/components/event_analytics/explorer/log_explorer.scss

@@ -25,6 +25,10 @@
   }
 }
 
+// #queryTabs {
+//   height: calc(100vh - 98px);
+// }
+
 .tab-title {
   display: inline-block;
   margin-right: 5px;

dashboards-observability/public/components/event_analytics/explorer/log_explorer.tsx

@@ -49,7 +49,7 @@ export const LogExplorer = ({
   history,
   notifications,
   http,
-  qm,
+  queryManager,
 }: ILogExplorerProps) => {
   const dispatch = useDispatch();
   const tabIds = useSelector(selectQueryTabs).queryTabIds.filter(
@@ -185,7 +185,7 @@ export const LogExplorer = ({
             curSelectedTabId={curSelectedTabIdRef}
             http={http}
             searchBarConfigs={searchBarConfigs}
-            qm={qm}
+            queryManager={queryManager}
           />
         </>
       ),

dashboards-observability/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/field.test.tsx.snap

@@ -21,7 +21,7 @@ exports[`Field component Renders a sidebar field 1`] = `
     anchorPosition="rightUp"
     button={
       <FieldButton
-        className="dscSidebarItem"
+        className="shard__fieldSelectorField explorer__fieldSelectorField"
         dataTestSubj="field-agent-showDetails"
         fieldAction={
           <React.Fragment>
@@ -67,7 +67,7 @@ exports[`Field component Renders a sidebar field 1`] = `
         }
         isActive={false}
         onClick={[Function]}
-        size="s"
+        size="m"
       />
     }
     closePopover={[Function]}
@@ -85,7 +85,7 @@ exports[`Field component Renders a sidebar field 1`] = `
         className="euiPopover__anchor"
       >
         <FieldButton
-          className="dscSidebarItem"
+          className="shard__fieldSelectorField explorer__fieldSelectorField"
           dataTestSubj="field-agent-showDetails"
           fieldAction={
             <React.Fragment>
@@ -131,10 +131,10 @@ exports[`Field component Renders a sidebar field 1`] = `
           }
           isActive={false}
           onClick={[Function]}
-          size="s"
+          size="m"
         >
           <div
-            className="osdFieldButton osdFieldButton--small dscSidebarItem"
+            className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
           >
             <button
               className="osd-resetFocusState osdFieldButton__button"
@@ -151,23 +151,23 @@ exports[`Field component Renders a sidebar field 1`] = `
                     aria-label="string"
                     className="osdFieldIcon"
                     iconType="tokenString"
-                    size="s"
+                    size="l"
                     title="string"
                   >
                     <span
-                      className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon"
+                      className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
                       style={Object {}}
                     >
                       <EuiIcon
                         aria-label="string"
-                        size="m"
+                        size="l"
                         title="string"
                         type="tokenString"
                       >
                         <EuiIconEmpty
                           aria-hidden={true}
                           aria-label="string"
-                          className="euiIcon euiIcon--medium euiIcon-isLoading"
+                          className="euiIcon euiIcon--large euiIcon-isLoading"
                           focusable="false"
                           role="img"
                           style={null}
@@ -176,7 +176,7 @@ exports[`Field component Renders a sidebar field 1`] = `
                           <svg
                             aria-hidden={true}
                             aria-label="string"
-                            className="euiIcon euiIcon--medium euiIcon-isLoading"
+                            className="euiIcon euiIcon--large euiIcon-isLoading"
                             focusable="false"
                             height={16}
                             role="img"