Merge branch 'main' into 136182-ml-query-utils

elastic · Jan 23, 2023 · 9aa65d1 · 9aa65d1
2 parents 88c81dc + 2a57862
commit 9aa65d1
Show file tree

Hide file tree

Showing 61 changed files with 1,361 additions and 284 deletions.
diff --git a/package.json b/package.json
@@ -669,7 +669,7 @@
     "remark-gfm": "1.0.0",
     "remark-parse": "^8.0.3",
     "remark-stringify": "^8.0.3",
-    "require-in-the-middle": "^5.2.0",
+    "require-in-the-middle": "^6.0.0",
     "reselect": "^4.1.6",
     "resize-observer-polyfill": "^1.5.1",
     "rison-node": "1.0.2",

diff --git a/x-pack/packages/ml/date_picker/src/components/date_picker_wrapper.tsx b/x-pack/packages/ml/date_picker/src/components/date_picker_wrapper.tsx
@@ -5,18 +5,17 @@
  * 2.0.
  */
 
-import { css } from '@emotion/react';
 import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { Subscription } from 'rxjs';
 import { debounce } from 'lodash';
 
 import {
-  useEuiBreakpoint,
   useIsWithinMaxBreakpoint,
   EuiButton,
   EuiFlexGroup,
   EuiFlexItem,
   EuiSuperDatePicker,
+  type EuiSuperDatePickerProps,
   OnRefreshProps,
   OnTimeChangeProps,
 } from '@elastic/eui';
@@ -32,7 +31,6 @@ import { useDatePickerContext } from '../hooks/use_date_picker_context';
 import { mlTimefilterRefresh$ } from '../services/timefilter_refresh_service';
 
 const DEFAULT_REFRESH_INTERVAL_MS = 5000;
-const DATE_PICKER_MAX_WIDTH = '540px';
 
 interface TimePickerQuickRange {
   from: string;
@@ -83,6 +81,14 @@ interface DatePickerWrapperProps {
    * Boolean flag to enforce showing/hiding the refresh button.
    */
   showRefresh?: boolean;
+  /**
+   * Width setting to be passed on to `EuiSuperDatePicker`
+   */
+  width?: EuiSuperDatePickerProps['width'];
+  /**
+   * Boolean flag to set use of flex group wrapper
+   */
+  flexGroup?: boolean;
 }
 
 /**
@@ -93,7 +99,7 @@ interface DatePickerWrapperProps {
  * @returns {React.ReactElement} The DatePickerWrapper component.
  */
 export const DatePickerWrapper: FC<DatePickerWrapperProps> = (props) => {
-  const { isAutoRefreshOnly, isLoading = false, showRefresh } = props;
+  const { isAutoRefreshOnly, isLoading = false, showRefresh, width, flexGroup = true } = props;
   const {
     data,
     notifications: { toasts },
@@ -274,15 +280,9 @@ export const DatePickerWrapper: FC<DatePickerWrapperProps> = (props) => {
     setRefreshInterval({ pause, value });
   }
 
-  const datePickerWidth = css({
-    [useEuiBreakpoint(['xs', 's', 'm', 'l'])]: {
-      maxWidth: DATE_PICKER_MAX_WIDTH,
-    },
-  });
-
-  return isAutoRefreshSelectorEnabled || isTimeRangeSelectorEnabled ? (
-    <EuiFlexGroup gutterSize="s" alignItems="center">
-      <EuiFlexItem grow={false} css={datePickerWidth}>
+  const flexItems = (
+    <>
+      <EuiFlexItem>
         <EuiSuperDatePicker
           isLoading={isLoading}
           start={time.from}
@@ -296,14 +296,14 @@ export const DatePickerWrapper: FC<DatePickerWrapperProps> = (props) => {
           recentlyUsedRanges={recentlyUsedRanges}
           dateFormat={dateFormat}
           commonlyUsedRanges={commonlyUsedRanges}
-          updateButtonProps={{ iconOnly: isWithinLBreakpoint }}
+          updateButtonProps={{ iconOnly: isWithinLBreakpoint, fill: false }}
+          width={width}
         />
       </EuiFlexItem>
-
       {showRefresh === true || !isTimeRangeSelectorEnabled ? (
         <EuiFlexItem grow={false}>
           <EuiButton
-            fill
+            fill={false}
             color="primary"
             iconType={'refresh'}
             onClick={() => updateLastRefresh()}
@@ -314,6 +314,16 @@ export const DatePickerWrapper: FC<DatePickerWrapperProps> = (props) => {
           </EuiButton>
         </EuiFlexItem>
       ) : null}
+    </>
+  );
+
+  const wrapped = flexGroup ? (
+    <EuiFlexGroup gutterSize="s" alignItems="center">
+      {flexItems}
     </EuiFlexGroup>
-  ) : null;
+  ) : (
+    flexItems
+  );
+
+  return isAutoRefreshSelectorEnabled || isTimeRangeSelectorEnabled ? wrapped : null;
 };
diff --git a/x-pack/packages/ml/date_picker/src/components/full_time_range_selector.tsx b/x-pack/packages/ml/date_picker/src/components/full_time_range_selector.tsx
@@ -191,7 +191,7 @@ export const FullTimeRangeSelector: FC<FullTimeRangeSelectorProps> = (props) =>
   );
 
   return (
-    <EuiFlexGroup responsive={false} gutterSize="xs" alignItems="center">
+    <EuiFlexGroup responsive={false} gutterSize="xs">
       <EuiToolTip content={buttonTooltip}>
         <EuiButton
           isDisabled={disabled}

diff --git a/.../plugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_page.tsx b/.../plugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_page.tsx
@@ -11,10 +11,10 @@ import {
   EuiEmptyPrompt,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiHorizontalRule,
   EuiPageBody,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
+  EuiPageSection,
   EuiPanel,
+  EuiSpacer,
 } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
@@ -170,8 +170,8 @@ export const ExplainLogRateSpikesPage: FC = () => {
   return (
     <EuiPageBody data-test-subj="aiopsExplainLogRateSpikesPage" paddingSize="none" panelled={false}>
       <PageHeader />
-      <EuiHorizontalRule />
-      <EuiPageContentBody>
+      <EuiSpacer size="m" />
+      <EuiPageSection paddingSize="none">
         <EuiFlexGroup gutterSize="m" direction="column">
           <EuiFlexItem>
             <SearchPanel
@@ -236,7 +236,7 @@ export const ExplainLogRateSpikesPage: FC = () => {
             </EuiPanel>
           </EuiFlexItem>
         </EuiFlexGroup>
-      </EuiPageContentBody>
+      </EuiPageSection>
     </EuiPageBody>
   );
 };
diff --git a/x-pack/plugins/aiops/public/components/page_header/page_header.tsx b/x-pack/plugins/aiops/public/components/page_header/page_header.tsx
@@ -5,17 +5,10 @@
  * 2.0.
  */
 
+import { css } from '@emotion/react';
 import React, { FC, useCallback, useMemo } from 'react';
 
-import {
-  useIsWithinMaxBreakpoint,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSpacer,
-  EuiTitle,
-  EuiPageContentHeader_Deprecated as EuiPageContentHeader,
-  EuiPageContentHeaderSection_Deprecated as EuiPageContentHeaderSection,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiPageHeader } from '@elastic/eui';
 
 import { useUrlState } from '@kbn/ml-url-state';
 import { useStorage } from '@kbn/ml-local-storage';
@@ -27,17 +20,18 @@ import {
   FROZEN_TIER_PREFERENCE,
 } from '@kbn/ml-date-picker';
 
-import { useCss } from '../../hooks/use_css';
 import { useDataSource } from '../../hooks/use_data_source';
 import {
   AIOPS_FROZEN_TIER_PREFERENCE,
   type AiOpsKey,
   type AiOpsStorageMapped,
 } from '../../types/storage';
 
-export const PageHeader: FC = () => {
-  const { aiopsPageHeader, dataViewTitleHeader } = useCss();
+const dataViewTitleHeader = css({
+  minWidth: '300px',
+});
 
+export const PageHeader: FC = () => {
   const [, setGlobalState] = useUrlState('_g');
   const { dataView } = useDataSource();
 
@@ -67,49 +61,32 @@ export const PageHeader: FC = () => {
     [dataView.timeFieldName]
   );
 
-  const isWithinLBreakpoint = useIsWithinMaxBreakpoint('l');
-
   return (
-    <EuiFlexGroup gutterSize="none">
-      <EuiFlexItem>
-        <EuiPageContentHeader css={aiopsPageHeader}>
-          <EuiPageContentHeaderSection>
-            <div css={dataViewTitleHeader}>
-              <EuiTitle size="s">
-                <h2>{dataView.getName()}</h2>
-              </EuiTitle>
-            </div>
-          </EuiPageContentHeaderSection>
-
-          {isWithinLBreakpoint ? <EuiSpacer size="m" /> : null}
-          <EuiFlexGroup
-            alignItems="center"
-            justifyContent="flexEnd"
-            gutterSize="s"
-            data-test-subj="aiopsTimeRangeSelectorSection"
-          >
-            {hasValidTimeField ? (
-              <EuiFlexItem grow={false}>
-                <FullTimeRangeSelector
-                  frozenDataPreference={frozenDataPreference}
-                  setFrozenDataPreference={setFrozenDataPreference}
-                  dataView={dataView}
-                  query={undefined}
-                  disabled={false}
-                  timefilter={timefilter}
-                  callback={updateTimeState}
-                />
-              </EuiFlexItem>
-            ) : null}
+    <EuiPageHeader
+      pageTitle={<div css={dataViewTitleHeader}>{dataView.getName()}</div>}
+      rightSideItems={[
+        <EuiFlexGroup gutterSize="s" data-test-subj="aiopsTimeRangeSelectorSection">
+          {hasValidTimeField ? (
             <EuiFlexItem grow={false}>
-              <DatePickerWrapper
-                isAutoRefreshOnly={!hasValidTimeField}
-                showRefresh={!hasValidTimeField}
+              <FullTimeRangeSelector
+                frozenDataPreference={frozenDataPreference}
+                setFrozenDataPreference={setFrozenDataPreference}
+                dataView={dataView}
+                query={undefined}
+                disabled={false}
+                timefilter={timefilter}
+                callback={updateTimeState}
               />
             </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiPageContentHeader>
-      </EuiFlexItem>
-    </EuiFlexGroup>
+          ) : null}
+          <DatePickerWrapper
+            isAutoRefreshOnly={!hasValidTimeField}
+            showRefresh={!hasValidTimeField}
+            width="full"
+            flexGroup={false}
+          />
+        </EuiFlexGroup>,
+      ]}
+    />
   );
 };
diff --git a/x-pack/plugins/aiops/public/components/search_panel/search_panel.tsx b/x-pack/plugins/aiops/public/components/search_panel/search_panel.tsx
@@ -93,13 +93,8 @@ export const SearchPanel: FC<Props> = ({
   };
 
   return (
-    <EuiFlexGroup
-      gutterSize="s"
-      data-test-subj="aiopsSearchPanel"
-      className={'aiopsSearchPanel__container'}
-      responsive={false}
-    >
-      <EuiFlexItem grow={9} className={'aiopsSearchBar'}>
+    <EuiFlexGroup gutterSize="s" data-test-subj="aiopsSearchPanel" responsive={false}>
+      <EuiFlexItem grow={9}>
         <SearchBar
           dataTestSubj="aiopsQueryInput"
           appName={'aiops'}
@@ -116,7 +111,7 @@ export const SearchPanel: FC<Props> = ({
           })}
           displayStyle={'inPage'}
           isClearable={true}
-          customSubmitButton={<div />}
+          showSubmitButton={false}
           onFiltersUpdated={(filters: Filter[]) => searchHandler({ filters })}
         />
       </EuiFlexItem>

diff --git a/x-pack/plugins/aiops/public/hooks/use_css.ts b/x-pack/plugins/aiops/public/hooks/use_css.ts
diff --git a/...ndex_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_view.tsx b/...ndex_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_view.tsx
@@ -528,6 +528,7 @@ export const IndexDataVisualizerView: FC<IndexDataVisualizerViewProps> = (dataVi
                 <DatePickerWrapper
                   isAutoRefreshOnly={!hasValidTimeField}
                   showRefresh={!hasValidTimeField}
+                  width="full"
                 />
               </EuiFlexItem>
             </EuiFlexGroup>

diff --git a/x-pack/plugins/fleet/common/experimental_features.ts b/x-pack/plugins/fleet/common/experimental_features.ts
@@ -17,6 +17,7 @@ export const allowedExperimentalValues = Object.freeze({
   showDevtoolsRequest: true,
   diagnosticFileUploadEnabled: false,
   experimentalDataStreamSettings: false,
+  displayAgentMetrics: true,
   showIntegrationsSubcategories: false,
 });
 

diff --git a/x-pack/plugins/fleet/common/types/models/agent.ts b/x-pack/plugins/fleet/common/types/models/agent.ts
@@ -99,6 +99,11 @@ interface AgentBase {
   components?: FleetServerAgentComponent[];
 }
 
+export interface AgentMetrics {
+  cpu_avg?: number;
+  memory_size_byte_avg?: number;
+}
+
 export interface Agent extends AgentBase {
   id: string;
   access_api_key?: string;
@@ -114,6 +119,7 @@ export interface Agent extends AgentBase {
   status?: AgentStatus;
   packages: string[];
   sort?: Array<number | string | null>;
+  metrics?: AgentMetrics;
 }
 
 export interface AgentSOAttributes extends AgentBase {

diff --git a/x-pack/plugins/fleet/common/types/rest_spec/agent.ts b/x-pack/plugins/fleet/common/types/rest_spec/agent.ts
@@ -22,6 +22,7 @@ export interface GetAgentsRequest {
   query: ListWithKuery & {
     showInactive: boolean;
     showUpgradeable?: boolean;
+    withMetrics?: boolean;
   };
 }
 
@@ -39,6 +40,9 @@ export interface GetOneAgentRequest {
   params: {
     agentId: string;
   };
+  query: {
+    withMetrics?: boolean;
+  };
 }
 
 export interface GetOneAgentResponse {