[Exploratory View] Audit new EUI Borealis theme

x-pack/solutions/observability/plugins/exploratory_view/public/application/index.tsx

@@ -10,7 +10,6 @@ import ReactDOM from 'react-dom';
 import { i18n } from '@kbn/i18n';
 import { Router, Routes, Route } from '@kbn/shared-ux-router';
 import { AppMountParameters, APP_WRAPPER_CLASS, CoreStart } from '@kbn/core/public';
-import { EuiThemeProvider } from '@elastic/eui';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
@@ -84,17 +83,15 @@ export const renderApp = ({
             }}
           >
             <Router history={history}>
-              <EuiThemeProvider>
-                <div className={APP_WRAPPER_CLASS} data-test-subj="exploratoryViewMainContainer">
-                  <RedirectAppLinks
-                    coreStart={{
-                      application: core.application,
-                    }}
-                  >
-                    <App startServices={core} />
-                  </RedirectAppLinks>
-                </div>
-              </EuiThemeProvider>
+              <div className={APP_WRAPPER_CLASS} data-test-subj="exploratoryViewMainContainer">
+                <RedirectAppLinks
+                  coreStart={{
+                    application: core.application,
+                  }}
+                >
+                  <App startServices={core} />
+                </RedirectAppLinks>
+              </div>
             </Router>
           </PluginContext.Provider>
         </KibanaContextProvider>

x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/index.tsx

@@ -7,7 +7,6 @@
 
 import React, { useCallback, useMemo, useState, useEffect } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
-import { EuiThemeProvider } from '@elastic/eui';
 import type { AnalyticsServiceSetup, CoreStart } from '@kbn/core/public';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { EuiErrorBoundary } from '@elastic/eui';
@@ -130,21 +129,19 @@ export function getExploratoryViewEmbeddable(
 
     return (
       <EuiErrorBoundary>
-        <EuiThemeProvider>
-          <KibanaContextProvider services={services}>
-            <Wrapper customHeight={props.customHeight} data-test-subj={props.dataTestSubj}>
-              <ExploratoryViewEmbeddable
-                {...embedProps}
-                dataViewState={dataViews}
-                lens={lens}
-                lensFormulaHelper={lensHelper?.formula}
-                searchSessionId={services.data.search.session.getSessionId()}
-                onLoad={onLensLoaded}
-                analytics={analytics}
-              />
-            </Wrapper>
-          </KibanaContextProvider>
-        </EuiThemeProvider>
+        <KibanaContextProvider services={services}>
+          <Wrapper customHeight={props.customHeight} data-test-subj={props.dataTestSubj}>
+            <ExploratoryViewEmbeddable
+              {...embedProps}
+              dataViewState={dataViews}
+              lens={lens}
+              lensFormulaHelper={lensHelper?.formula}
+              searchSessionId={services.data.search.session.getSessionId()}
+              onLoad={onLensLoaded}
+              analytics={analytics}
+            />
+          </Wrapper>
+        </KibanaContextProvider>
       </EuiErrorBoundary>
     );
   };

x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/header/last_updated.tsx

@@ -7,9 +7,9 @@
 
 import React, { useEffect, useState } from 'react';
 import moment from 'moment';
-import styled from '@emotion/styled';
-import { EuiIcon, EuiText, EuiToolTip } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText, EuiToolTip } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { useSeriesStorage } from '../hooks/use_series_storage';
 import { ChartCreationInfo } from './chart_creation_info';
 
 export interface ChartTimeRange {
@@ -18,12 +18,10 @@ export interface ChartTimeRange {
   from?: number;
 }
 
-interface Props {
-  chartTimeRange?: ChartTimeRange;
-}
+export function LastUpdated() {
+  const { chartTimeRangeContext } = useSeriesStorage();
 
-export function LastUpdated({ chartTimeRange }: Props) {
-  const { lastUpdated } = chartTimeRange || {};
+  const { lastUpdated } = chartTimeRangeContext || {};
   const [refresh, setRefresh] = useState(() => Date.now());
 
   useEffect(() => {
@@ -48,24 +46,23 @@ export function LastUpdated({ chartTimeRange }: Props) {
   const isDanger = moment().diff(moment(lastUpdated), 'minute') > 10;
 
   return (
-    <EuiText color={isDanger ? 'danger' : isWarning ? 'warning' : 'subdued'} size="s">
-      <EuiToolTip position="top" content={<ChartCreationInfo {...chartTimeRange} />}>
-        <IconWrapper>
+    <EuiFlexGroup alignItems="center" gutterSize="m">
+      <EuiFlexItem grow={false}>
+        <EuiToolTip position="top" content={<ChartCreationInfo {...chartTimeRangeContext} />}>
           <EuiIcon type="iInCircle" />
-        </IconWrapper>
-      </EuiToolTip>{' '}
-      <FormattedMessage
-        id="xpack.exploratoryView.expView.lastUpdated.label"
-        defaultMessage="Last Updated: {updatedDate}"
-        values={{
-          updatedDate: moment(lastUpdated).from(refresh),
-        }}
-      />
-    </EuiText>
+        </EuiToolTip>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiText color={isDanger ? 'danger' : isWarning ? 'warning' : 'subdued'} size="s">
+          <FormattedMessage
+            id="xpack.exploratoryView.expView.lastUpdated.label"
+            defaultMessage="Last Updated: {updatedDate}"
+            values={{
+              updatedDate: moment(lastUpdated).from(refresh),
+            }}
+          />
+        </EuiText>
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 }
-
-const IconWrapper = styled.div`
-  display: inline-block;
-  min-width: 30vw;
-`;

x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/header/refresh_button.tsx

@@ -7,28 +7,20 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { LastUpdated } from './last_updated';
+import { EuiButton } from '@elastic/eui';
 import { useSeriesStorage } from '../hooks/use_series_storage';
 
 export function RefreshButton() {
-  const { setLastRefresh, chartTimeRangeContext } = useSeriesStorage();
+  const { setLastRefresh } = useSeriesStorage();
 
   return (
-    <EuiFlexGroup alignItems="center" gutterSize="m">
-      <EuiFlexItem style={{ textAlign: 'right', minWidth: 280 }}>
-        <LastUpdated chartTimeRange={chartTimeRangeContext} />
-      </EuiFlexItem>
-      <EuiFlexItem style={{ textAlign: 'right' }}>
-        <EuiButton
-          data-test-subj="o11yRefreshButtonButton"
-          iconType="refresh"
-          onClick={() => setLastRefresh(Date.now())}
-        >
-          {REFRESH_LABEL}
-        </EuiButton>
-      </EuiFlexItem>
-    </EuiFlexGroup>
+    <EuiButton
+      data-test-subj="o11yRefreshButtonButton"
+      iconType="refresh"
+      onClick={() => setLastRefresh(Date.now())}
+    >
+      {REFRESH_LABEL}
+    </EuiButton>
   );
 }
 

x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/index.tsx

@@ -16,6 +16,7 @@ import {
 } from '@kbn/kibana-utils-plugin/public';
 import { TypedLensByValueInput } from '@kbn/lens-plugin/public';
 import { useBreadcrumbs, useTrackPageview } from '@kbn/observability-shared-plugin/public';
+import { LastUpdated } from './header/last_updated';
 import { ExploratoryView } from './exploratory_view';
 import { useKibana } from './hooks/use_kibana';
 import { DataViewContextProvider } from './hooks/use_app_data_view';
@@ -76,7 +77,7 @@ export function ExploratoryViewPage({
       <ObservabilityPageTemplate
         pageHeader={{
           pageTitle: PAGE_TITLE,
-          rightSideItems: [<RefreshButton />],
+          rightSideItems: [<RefreshButton />, <LastUpdated />],
         }}
       >
         <DataViewContextProvider>