github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[UII] Make Fleet & Integrations layouts full width (#186056)

Browse source 
## Summary

Resolves https://github.com/elastic/ingest-dev/issues/2602.

This PR makes global changes to Fleet and Integrations:

1. Layout expands to 100% of available screen width when screen size is
< 1600px wide
2. Layout expands to 80% when screen size is >= 1600px
3. Sets all flyouts to `medium` size with a max width of 800px no matter
the screen size

Exceptions:
- Create/edit integration policy page is restricted to 1200px when
screen size is >= 1600px
- Agent policy settings page is restricted to 1200px no matter the
screen size

### Screenshots

<details>
<summary>On 1920px screen</summary>


![image](96198a5c-b247-4339-940b-134693fc7643)


![image](425e531f-6b02-4895-8478-ab42af6bd696)


![image](325b6dcf-f3e6-44a0-9baf-bfa9f4722b9b)


![image](cbab07a4-5bfe-480c-b8f9-0685615cf471)


![image](7c0852e6-ccd1-4b37-bb67-9e3d7a84941e)


![image](f16aa397-d695-4f86-b9e1-8fa1440ef5aa)
</details>

<details>
<summary>On smaller screen</summary>


![image](6d077af4-c792-4058-b957-9dbe425ba3dd)


![image](6ed144be-b410-4b26-ab6e-4aeb20bed038)


![image](673965b0-f46f-426b-ae95-6eb258f76ec4)


![image](2e0f5f23-29b0-4a90-a855-5e1767d93f7c)


![image](73c0a806-d0b1-40d3-aa99-a44e4fe9b4c0)


![image](fc3e15c8-4992-4808-8e15-4cf91acf5acc)
</details>

### Testing
Fire up the PR and click around everything :)
This commit is contained in:
Jen Huang 2024-06-13 15:34:20 -07:00 • committed by GitHub
parent ad71568273
commit 5000201d56
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
39 changed files with 189 additions and 140 deletions
Download patch file Download diff file Expand all files Collapse all files

27
x-pack/plugins/fleet/dev_docs/react_query.md
View file

@ -155,21 +155,18 @@ There's a bit of setup involved to actually get `react-query` up and running. Fi
```tsx
//...
<EuiThemeProvider darkMode={isDarkMode}>
<QueryClientProvider client={queryClient}>
<ReactQueryDevtools initialIsOpen={true} />
<UIExtensionsContext.Provider value={extensions}>
<FleetStatusProvider>
<Router history={history}>
<PackageInstallProvider notifications={startServices.notifications} theme$={theme$}>
<FlyoutContextProvider>{children}</FlyoutContextProvider>
</PackageInstallProvider>
</Router>
</FleetStatusProvider>
</UIExtensionsContext.Provider>
</QueryClientProvider>
</EuiThemeProvider>
<QueryClientProvider client={queryClient}>
<ReactQueryDevtools initialIsOpen={true} />
<UIExtensionsContext.Provider value={extensions}>
<FleetStatusProvider>
<Router history={history}>
<PackageInstallProvider notifications={startServices.notifications} theme$={theme$}>
<FlyoutContextProvider>{children}</FlyoutContextProvider>
</PackageInstallProvider>
</Router>
</FleetStatusProvider>
</UIExtensionsContext.Provider>
</QueryClientProvider>
```
We also set up `react-query`'s [dev tools](https://tanstack.com/query/v4/docs/react/devtools), which provide a useful developer console for debugging query and mutation state across the whole application.

15
x-pack/plugins/fleet/public/applications/fleet/app.tsx
View file

@ -18,9 +18,7 @@ import useObservable from 'react-use/lib/useObservable';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { css } from '@emotion/css';
import type { TopNavMenuData } from '@kbn/navigation-plugin/public';
import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
@ -186,11 +184,20 @@ export const FleetAppContext: React.FC<{
routerHistory: _routerHistory,
fleetStatus,
}) => {
const XXL_BREAKPOINT = 1600;
const darkModeObservable = useObservable(startServices.theme.theme$);
const isDarkMode = darkModeObservable && darkModeObservable.darkMode;
return (
<KibanaRenderContextProvider {...startServices}>
<KibanaRenderContextProvider
{...startServices}
theme={startServices.theme}
modify={{
breakpoint: {
xxl: XXL_BREAKPOINT,
},
}}
>
<RedirectAppLinks
coreStart={{
application: startServices.application,
@ -199,6 +206,8 @@ export const FleetAppContext: React.FC<{
<KibanaContextProvider services={{ ...startServices }}>
<ConfigContext.Provider value={config}>
<KibanaVersionContext.Provider value={kibanaVersion}>
{/* This should be removed since theme is passed to `KibanaRenderContextProvider`,
however, removing this breaks usages of `props.theme.eui` in styled components */}
<EuiThemeProvider darkMode={isDarkMode}>
<QueryClientProvider client={queryClient}>
<ReactQueryDevtools initialIsOpen={false} />

3
x-pack/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/index.tsx
View file

@ -23,6 +23,7 @@ import {
import { FormattedMessage } from '@kbn/i18n-react';
import styled from 'styled-components';
import { MAX_FLYOUT_WIDTH } from '../../constants';
import { useStartServices, useFlyoutContext, useCheckPermissions } from '../../hooks';
import { FleetServerMissingESPrivileges } from '../../sections/agents/components';
@ -133,7 +134,7 @@ export const FleetServerFlyout: React.FunctionComponent<Props> = ({ onClose }) =
}
return (
<EuiFlyout data-test-subj="fleetServerFlyout" onClose={onClose} size="m">
<EuiFlyout data-test-subj="fleetServerFlyout" onClose={onClose} maxWidth={MAX_FLYOUT_WIDTH}>
<EuiFlyoutHeader hasBorder aria-labelledby="FleetAddFleetServerFlyoutTitle">
<Header
tabs={tabs}

1
x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_advanced_fields/custom_fields/index.tsx
View file

@ -57,6 +57,7 @@ export const CustomFields: React.FunctionComponent<Props> = ({
return (
<EuiDescribedFormGroup
fullWidth
title={
<h3>
<FormattedMessage

11
x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_advanced_fields/index.tsx
View file

@ -118,6 +118,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
const AgentTamperProtectionSectionContent = useMemo(
() => (
<EuiDescribedFormGroup
fullWidth
title={
<h3>
<FormattedMessage
@ -210,6 +211,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
return (
<>
<EuiDescribedFormGroup
fullWidth
title={
<h3>
<FormattedMessage
@ -255,6 +257,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
</EuiFormRow>
</EuiDescribedFormGroup>
<EuiDescribedFormGroup
fullWidth
title={
<h3 data-test-subj="defaultNamespaceHeader">
<FormattedMessage
@ -307,6 +310,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
</EuiDescribedFormGroup>
<CustomFields updateAgentPolicy={updateAgentPolicy} agentPolicy={agentPolicy} />
<EuiDescribedFormGroup
fullWidth
title={
<h3>
<FormattedMessage
@ -405,6 +409,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
{AgentTamperProtectionSection}
<EuiDescribedFormGroup
fullWidth
title={
<h3>
<FormattedMessage
@ -466,6 +471,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
</EuiFormRow>
</EuiDescribedFormGroup>
<EuiDescribedFormGroup
fullWidth
title={
<h3>
<FormattedMessage
@ -506,6 +512,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
</EuiFormRow>
</EuiDescribedFormGroup>
<EuiDescribedFormGroup
fullWidth
title={
<h3>
<FormattedMessage
@ -546,6 +553,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
</EuiFormRow>
</EuiDescribedFormGroup>
<EuiDescribedFormGroup
fullWidth
title={
<h3>
<FormattedMessage
@ -586,6 +594,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
</EuiFormRow>
</EuiDescribedFormGroup>
<EuiDescribedFormGroup
fullWidth
title={
<h3>
<FormattedMessage
@ -628,6 +637,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
</EuiFormRow>
</EuiDescribedFormGroup>
<EuiDescribedFormGroup
fullWidth
title={
<h3>
<FormattedMessage
@ -712,6 +722,7 @@ export const AgentPolicyAdvancedOptionsContent: React.FunctionComponent<Props> =
</EuiFormRow>
</EuiDescribedFormGroup>
<EuiDescribedFormGroup
fullWidth
title={
<h3>
<FormattedMessage

5
x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_form.tsx
View file

@ -75,13 +75,14 @@ export const AgentPolicyForm: React.FunctionComponent<Props> = ({
const generalSettingsWrapper = (children: JSX.Element[]) => (
<EuiDescribedFormGroup
fullWidth
title={
<h4>
<h3>
<FormattedMessage
id="xpack.fleet.policyForm.generalSettingsGroupTitle"
defaultMessage="General settings"
/>
</h4>
</h3>
}
description={
<FormattedMessage

1
x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_integration.tsx
View file

@ -47,6 +47,7 @@ export const AgentPolicyIntegrationForm: React.FunctionComponent<Props> = ({
return (
<EuiForm>
<EuiDescribedFormGroup
fullWidth
title={
<h3>
<FormattedMessage

3
x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_yaml_flyout.tsx
View file

@ -24,6 +24,7 @@ import {
EuiSpacer,
} from '@elastic/eui';
import { MAX_FLYOUT_WIDTH } from '../../../constants';
import { useGetOneAgentPolicyFull, useGetOneAgentPolicy, useStartServices } from '../../../hooks';
import { Loading } from '../../../components';
import { fullAgentPolicyToYaml, agentPolicyRouteService } from '../../../services';
@ -71,7 +72,7 @@ export const AgentPolicyYamlFlyout = memo<{ policyId: string; onClose: () => voi
`?apiVersion=${API_VERSIONS.public.v1}`;
return (
<EuiFlyout onClose={onClose} size="l" maxWidth={640}>
<EuiFlyout onClose={onClose} maxWidth={MAX_FLYOUT_WIDTH}>
<EuiFlyoutHeader hasBorder aria-labelledby="IngestManagerAgentPolicyYamlFlyoutTitle">
<EuiTitle size="m">
<h2 id="IngestManagerAgentPolicyYamlFlyoutTitle">

6
x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_config.tsx
View file

@ -14,6 +14,7 @@ import {
EuiText,
EuiSpacer,
EuiButtonEmpty,
useIsWithinMinBreakpoint,
} from '@elastic/eui';
import type { NewPackagePolicyInput, RegistryVarsEntry } from '../../../../../../types';
@ -68,12 +69,15 @@ export const PackagePolicyInputConfig: React.FunctionComponent<{
[advancedVars, inputVarsValidationResults.vars]
);
const isBiggerScreen = useIsWithinMinBreakpoint('xxl');
const flexWidth = isBiggerScreen ? 7 : 5;
return (
<EuiFlexGrid columns={2}>
<EuiFlexItem>
<EuiFlexGroup gutterSize="none" alignItems="flexStart">
<EuiFlexItem grow={1} />
<EuiFlexItem grow={5}>
<EuiFlexItem grow={flexWidth}>
<EuiText>
<h4>
<FormattedMessage

6
x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_stream.tsx
View file

@ -18,6 +18,7 @@ import {
EuiText,
EuiSpacer,
EuiButtonEmpty,
useIsWithinMinBreakpoint,
} from '@elastic/eui';
import { useRouteMatch } from 'react-router-dom';
@ -163,6 +164,9 @@ export const PackagePolicyInputStreamConfig = memo<Props>(
showPipelinesAndMappings,
]);
const isBiggerScreen = useIsWithinMinBreakpoint('xxl');
const flexWidth = isBiggerScreen ? 7 : 5;
return (
<>
<EuiFlexGrid columns={2} data-test-subj="streamOptions.inputStreams">
@ -170,7 +174,7 @@ export const PackagePolicyInputStreamConfig = memo<Props>(
<EuiFlexItem>
<EuiFlexGroup gutterSize="none" alignItems="flexStart">
<EuiFlexItem grow={1} />
<EuiFlexItem grow={5}>
<EuiFlexItem grow={flexWidth}>
<EuiFlexGroup
gutterSize="none"
alignItems="flexStart"

5
x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/step_define_package_policy.tsx
View file

@ -105,6 +105,7 @@ export const StepDefinePackagePolicy: React.FunctionComponent<{
</>
)}
<FormGroupResponsiveFields
fullWidth
title={
<h3>
<FormattedMessage
@ -124,6 +125,7 @@ export const StepDefinePackagePolicy: React.FunctionComponent<{
{/* Name */}
<EuiFlexItem>
<EuiFormRow
fullWidth
isInvalid={!!validationResults.name}
error={validationResults.name}
label={
@ -134,6 +136,7 @@ export const StepDefinePackagePolicy: React.FunctionComponent<{
}
>
<EuiFieldText
fullWidth
readOnly={isManaged}
value={packagePolicy.name}
onChange={(e) =>
@ -149,6 +152,7 @@ export const StepDefinePackagePolicy: React.FunctionComponent<{
{/* Description */}
<EuiFlexItem>
<EuiFormRow
fullWidth
label={
<FormattedMessage
id="xpack.fleet.createPackagePolicy.stepConfigure.packagePolicyDescriptionInputLabel"
@ -167,6 +171,7 @@ export const StepDefinePackagePolicy: React.FunctionComponent<{
error={validationResults.description}
>
<EuiFieldText
fullWidth
readOnly={isManaged}
value={packagePolicy.description}
onChange={(e) =>

2
x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/step_select_agent_policy.tsx
View file

@ -369,7 +369,7 @@ export const StepSelectAgentPolicy: React.FunctionComponent<{
}
>
<AgentPolicyFormRow
fullWidth={true}
fullWidth
label={
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem>

4
x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/components/bottom_bar.tsx
View file

@ -16,7 +16,7 @@ import { FLEET_KUBERNETES_PACKAGE } from '../../../../../../../../common';
const CenteredRoundedBottomBar = styled(EuiBottomBar)`
max-width: 820px;
margin: 0 auto;
margin: 0 auto !important; /* !important is needed for serverless */
border-radius: 8px 8px 0px 0px;
`;
const NoAnimationCenteredRoundedBottomBar = styled(CenteredRoundedBottomBar)`
@ -50,7 +50,7 @@ export const CreatePackagePolicyBottomBar: React.FC<{
}) => {
const Bar = noAnimation ? NoAnimationCenteredRoundedBottomBar : CenteredRoundedBottomBar;
return (
<Bar position="sticky">
<Bar>
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
<EuiFlexItem grow={false}>
<EuiFlexItem grow={false}>

4
x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/components/layout.tsx
View file

@ -17,6 +17,7 @@ import {
EuiDescriptionListDescription,
EuiButtonEmpty,
EuiSpacer,
useIsWithinMinBreakpoint,
} from '@elastic/eui';
import { useAgentless } from '../hooks/setup_technology';
@ -251,7 +252,8 @@ export const CreatePackagePolicySinglePageLayout: React.FunctionComponent<{
</EuiDescriptionList>
) : undefined;
const maxWidth = 770;
const isBiggerScreen = useIsWithinMinBreakpoint('xxl');
const maxWidth = isBiggerScreen ? 1200 : 800;
return (
<WithHeaderLayout
restrictHeaderWidth={maxWidth}

2
x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/components/settings/index.tsx
View file

@ -57,7 +57,7 @@ const pickAgentPolicyKeysToSend = (agentPolicy: AgentPolicy) =>
]);
const FormWrapper = styled.div`
max-width: 800px;
max-width: 1200px;
margin-right: auto;
margin-left: auto;
`;

6
x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/edit_package_policy_page/components/upgrade.tsx
View file

@ -36,6 +36,7 @@ import type {
import type { UpgradePackagePolicyDryRunResponse } from '../../../../../../../common/types/rest_spec';
import { useStartServices } from '../../../../hooks';
import { MAX_FLYOUT_WIDTH } from '../../../../constants';
const FlyoutBody = styled(EuiFlyoutBody)`
.euiFlyoutBody__overflowContent {
@ -167,7 +168,10 @@ export const UpgradeStatusCallout: React.FunctionComponent<{
<>
{isPreviousVersionFlyoutOpen && currentPackagePolicy && (
<EuiPortal>
<EuiFlyout onClose={() => setIsPreviousVersionFlyoutOpen(false)} size="l" maxWidth={640}>
<EuiFlyout
onClose={() => setIsPreviousVersionFlyoutOpen(false)}
maxWidth={MAX_FLYOUT_WIDTH}
>
<EuiFlyoutHeader hasBorder>
<EuiTitle size="m">
<h2 id="FleetPackagePolicyPreviousVersionFlyoutTitle">

3
x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/list_page/components/create_agent_policy.tsx
View file

@ -25,6 +25,7 @@ import {
} from '@elastic/eui';
import type { NewAgentPolicy, AgentPolicy } from '../../../../types';
import { MAX_FLYOUT_WIDTH } from '../../../../constants';
import { useAuthz, useStartServices, sendCreateAgentPolicy } from '../../../../hooks';
import { AgentPolicyForm, agentPolicyFormValidation } from '../../components';
import { DevtoolsRequestFlyoutButton } from '../../../../components';
@ -191,7 +192,7 @@ export const CreateAgentPolicyFlyout: React.FunctionComponent<Props> = ({
);
return (
<FlyoutWithHigherZIndex onClose={() => onClose()} size="l" maxWidth={400} {...restOfProps}>
<FlyoutWithHigherZIndex onClose={() => onClose()} {...restOfProps} maxWidth={MAX_FLYOUT_WIDTH}>
{header}
{body}
{footer}

3
x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details_json_flyout.tsx
View file

@ -25,6 +25,7 @@ import {
import type { Agent } from '../../../../types';
import { useStartServices } from '../../../../hooks';
import { MAX_FLYOUT_WIDTH } from '../../../../constants';
export const AgentDetailsJsonFlyout = memo<{ agent: Agent; onClose: () => void }>(
({ agent, onClose }) => {
@ -44,7 +45,7 @@ export const AgentDetailsJsonFlyout = memo<{ agent: Agent; onClose: () => void }
const { docLinks } = useStartServices();
return (
<EuiFlyout onClose={onClose} size="l" maxWidth={640}>
<EuiFlyout onClose={onClose} maxWidth={MAX_FLYOUT_WIDTH}>
<EuiFlyoutHeader hasBorder>
<EuiTitle size="m">
<h2>

4
x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/agent_activity_flyout/index.tsx
View file

@ -28,7 +28,7 @@ import {
useStartServices,
sendPostRetrieveAgentsByActions,
} from '../../../../../hooks';
import { SO_SEARCH_LIMIT } from '../../../../../constants';
import { SO_SEARCH_LIMIT, MAX_FLYOUT_WIDTH } from '../../../../../constants';
import { getKuery } from '../../utils/get_kuery';
@ -129,8 +129,8 @@ export const AgentActivityFlyout: React.FunctionComponent<{
refreshAgentActivity = false;
onClose();
}}
size="m"
paddingSize="none"
maxWidth={MAX_FLYOUT_WIDTH}
>
<EuiFlyoutHeader aria-labelledby="FleetAgentActivityFlyoutTitle">
<EuiPanel borderRadius="none" hasShadow={false} hasBorder={true}>

4
x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/download_source_flyout/index.tsx
View file

@ -28,7 +28,7 @@ import {
import { i18n } from '@kbn/i18n';
import type { DownloadSource, FleetProxy } from '../../../../types';
import { FLYOUT_MAX_WIDTH } from '../../constants';
import { MAX_FLYOUT_WIDTH } from '../../../../constants';
import { useBreadcrumbs, useStartServices } from '../../../../hooks';
import { ProxyWarning } from '../fleet_proxies_table/proxy_warning';
@ -54,7 +54,7 @@ export const EditDownloadSourceFlyout: React.FunctionComponent<EditDownloadSourc
[proxies]
);
return (
<EuiFlyout maxWidth={FLYOUT_MAX_WIDTH} onClose={onClose}>
<EuiFlyout onClose={onClose} maxWidth={MAX_FLYOUT_WIDTH}>
<EuiFlyoutHeader hasBorder={true}>
<EuiTitle size="m">
<h2 id="FleetEditDownloadSourcesFlyoutTitle">

4
x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/edit_fleet_proxy_flyout/index.tsx
View file

@ -22,8 +22,8 @@ import {
EuiSpacer,
} from '@elastic/eui';
import { FLYOUT_MAX_WIDTH } from '../../constants';
import type { FleetProxy } from '../../../../types';
import { MAX_FLYOUT_WIDTH } from '../../../../constants';
import { TextInput, TextAreaInput } from '../form';
import { ProxyWarning } from '../fleet_proxies_table/proxy_warning';
@ -43,7 +43,7 @@ export const FleetProxyFlyout: React.FunctionComponent<FleetProxyFlyoutProps> =
const { inputs } = form;
return (
<EuiFlyout maxWidth={FLYOUT_MAX_WIDTH} onClose={onClose}>
<EuiFlyout onClose={onClose} maxWidth={MAX_FLYOUT_WIDTH}>
<EuiFlyoutHeader hasBorder={true}>
<EuiTitle size="m">
<h2>

6
x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/edit_output_flyout/index.tsx
View file

@ -45,8 +45,9 @@ import { ExperimentalFeaturesService } from '../../../../../../services';
import { outputType, RESERVED_CONFIG_YML_KEYS } from '../../../../../../../common/constants';
import { MAX_FLYOUT_WIDTH } from '../../../../constants';
import type { Output, FleetProxy } from '../../../../types';
import { FLYOUT_MAX_WIDTH } from '../../constants';
import { useBreadcrumbs, useFleetStatus, useStartServices } from '../../../../hooks';
@ -230,7 +231,7 @@ export const EditOutputFlyout: React.FunctionComponent<EditOutputFlyoutProps> =
};
return (
<EuiFlyout maxWidth={FLYOUT_MAX_WIDTH} onClose={onClose}>
<EuiFlyout onClose={onClose} maxWidth={MAX_FLYOUT_WIDTH}>
<EuiFlyoutHeader hasBorder={true}>
<EuiTitle size="m">
<h2 id="FleetEditOutputFlyoutTitle">
@ -437,6 +438,7 @@ export const EditOutputFlyout: React.FunctionComponent<EditOutputFlyoutProps> =
}
>
<EuiSelect
fullWidth
data-test-subj="settingsOutputsFlyout.presetInput"
{...inputs.presetInput.props}
onChange={(e) => inputs.presetInput.setValue(e.target.value)}

4
x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/fleet_server_hosts_flyout/index.tsx
View file

@ -29,8 +29,8 @@ import {
} from '@elastic/eui';
import { MultiRowInput } from '../multi_row_input';
import { MAX_FLYOUT_WIDTH } from '../../../../constants';
import { useStartServices } from '../../../../hooks';
import { FLYOUT_MAX_WIDTH } from '../../constants';
import type { FleetServerHost, FleetProxy } from '../../../../types';
import { TextInput } from '../form';
import { ProxyWarning } from '../fleet_proxies_table/proxy_warning';
@ -61,7 +61,7 @@ export const FleetServerHostsFlyout: React.FunctionComponent<FleetServerHostsFly
);
return (
<EuiFlyout maxWidth={FLYOUT_MAX_WIDTH} onClose={onClose}>
<EuiFlyout onClose={onClose} maxWidth={MAX_FLYOUT_WIDTH}>
<EuiFlyoutHeader hasBorder={true}>
<>
<EuiTitle size="m">

8
x-pack/plugins/fleet/public/applications/fleet/sections/settings/constants/index.tsx
View file

@ -1,8 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
export const FLYOUT_MAX_WIDTH = 670;

22
x-pack/plugins/fleet/public/applications/integrations/app.tsx
View file

@ -11,14 +11,13 @@ import { EuiPortal } from '@elastic/eui';
import type { History } from 'history';
import { Redirect } from 'react-router-dom';
import { Router, Routes, Route } from '@kbn/shared-ux-router';
import useObservable from 'react-use/lib/useObservable';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import useObservable from 'react-use/lib/useObservable';
import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
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';
import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
import type { FleetConfigType, FleetStartServices } from '../../plugin';
@ -73,13 +72,22 @@ export const IntegrationsAppContext: React.FC<{
setHeaderActionMenu,
fleetStatus,
}) => {
const theme = useObservable(startServices.theme.theme$);
const isDarkMode = theme && theme.darkMode;
const XXL_BREAKPOINT = 1600;
const darkModeObservable = useObservable(startServices.theme.theme$);
const isDarkMode = darkModeObservable && darkModeObservable.darkMode;
const CloudContext = startServices.cloud?.CloudContextProvider || EmptyContext;
return (
<KibanaRenderContextProvider {...startServices}>
<KibanaRenderContextProvider
{...startServices}
theme={startServices.theme}
modify={{
breakpoint: {
xxl: XXL_BREAKPOINT,
},
}}
>
<RedirectAppLinks
coreStart={{
application: startServices.application,
@ -88,6 +96,8 @@ export const IntegrationsAppContext: React.FC<{
<KibanaContextProvider services={{ ...startServices }}>
<ConfigContext.Provider value={config}>
<KibanaVersionContext.Provider value={kibanaVersion}>
{/* This should be removed since theme is passed to `KibanaRenderContextProvider`,
however, removing this breaks usages of `props.theme.eui` in styled components */}
<EuiThemeProvider darkMode={isDarkMode}>
<QueryClientProvider client={queryClient}>
<ReactQueryDevtools initialIsOpen={false} />

2
x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_list_grid/search_box.tsx
View file

@ -99,7 +99,7 @@ export const SearchBox: FunctionComponent<Props> = ({
onChange={(e) => onQueryChange(e)}
isClearable={true}
incremental={true}
fullWidth={true}
fullWidth
prepend={
selectedCategoryTitle ? (
<EuiText

2
x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/assets/assets.tsx
View file

@ -283,7 +283,7 @@ export const AssetsPage = ({ packageInfo, refetchPackageInfo }: AssetsPanelProps
return (
<EuiFlexGroup alignItems="flexStart">
<EuiFlexItem grow={1} />
<EuiFlexItem grow={6}>
<EuiFlexItem grow={7}>
{fetchError && (
<>
<Error

9
x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/configs/index.tsx
View file

@ -5,7 +5,6 @@
* 2.0.
*/
import React from 'react';
import styled from 'styled-components';
import {
EuiFlexGroup,
EuiFlexItem,
@ -28,10 +27,6 @@ import { PrereleaseCallout } from '../overview/overview';
import { isPackagePrerelease } from '../../../../../../../../common/services';
const FlexItemWithMaxWidth = styled(EuiFlexItem)`
max-width: 1000px;
`;
interface ConfigsProps {
packageInfo: PackageInfo;
}
@ -62,7 +57,7 @@ export const Configs: React.FC<ConfigsProps> = ({ packageInfo }) => {
return (
<EuiFlexGroup data-test-subj="epm.Configs" alignItems="flexStart">
<EuiFlexItem grow={1} />
<FlexItemWithMaxWidth grow={6}>
<EuiFlexItem grow={7}>
{isLoading && !configs ? (
<EuiSkeletonText lines={10} />
) : (
@ -122,7 +117,7 @@ export const Configs: React.FC<ConfigsProps> = ({ packageInfo }) => {
</EuiCodeBlock>
</>
)}
</FlexItemWithMaxWidth>
</EuiFlexItem>
</EuiFlexGroup>
);
};

2
x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/custom/custom.tsx
View file

@ -25,7 +25,7 @@ export const CustomViewPage: React.FC<Props> = memo(({ packageInfo }) => {
return customViewExtension ? (
<EuiFlexGroup alignItems="flexStart">
<EuiFlexItem grow={1} />
<EuiFlexItem grow={6}>
<EuiFlexItem grow={7}>
<ExtensionWrapper>
<customViewExtension.Component pkgkey={pkgkey} packageInfo={packageInfo} />
</ExtensionWrapper>

78
x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/documentation/index.tsx
View file

@ -68,52 +68,44 @@ export const DocumentationPage: React.FunctionComponent<Props> = ({ packageInfo,
const { docLinks } = useStartServices();
const showDocumentation = hasDocumentation({ packageInfo, integration });
const content = (
<>
<EuiFlexGroup gutterSize="m" justifyContent="spaceBetween">
<EuiFlexItem grow={6}>
<EuiText>
<FormattedMessage
id="xpack.fleet.epm.packageDetails.apiReference.description"
defaultMessage="This documents all the inputs, streams, and variables available to use this integration programmatically via the Fleet Kibana API. {learnMore}"
values={{
learnMore: (
<EuiLink href={docLinks.links.fleet.api} external={true}>
<FormattedMessage
id="xpack.fleet.epm.packageDetails.apiReference.learnMoreLink"
defaultMessage="Learn more"
/>
</EuiLink>
),
}}
/>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="m" />
{showDocumentation ? (
<>
<PackageVars vars={packageInfo.vars} />
<Inputs packageInfo={packageInfo} integration={integration} />
</>
) : (
<EuiCallOut
title={
<FormattedMessage
id="xpack.fleet.epm.packageDetails.apiReference.noDocumentationMessage"
defaultMessage="This integration has no references available."
/>
}
/>
)}
<EuiSpacer size="m" />
</>
);
return (
<EuiFlexGroup alignItems="flexStart">
<EuiFlexItem grow={1} />
<EuiFlexItem grow={6}>{content}</EuiFlexItem>
<EuiFlexItem grow={7}>
<EuiText>
<FormattedMessage
id="xpack.fleet.epm.packageDetails.apiReference.description"
defaultMessage="This documents all the inputs, streams, and variables available to use this integration programmatically via the Fleet Kibana API. {learnMore}"
values={{
learnMore: (
<EuiLink href={docLinks.links.fleet.api} external={true}>
<FormattedMessage
id="xpack.fleet.epm.packageDetails.apiReference.learnMoreLink"
defaultMessage="Learn more"
/>
</EuiLink>
),
}}
/>
</EuiText>
<EuiSpacer size="m" />
{showDocumentation ? (
<>
<PackageVars vars={packageInfo.vars} />
<Inputs packageInfo={packageInfo} integration={integration} />
</>
) : (
<EuiCallOut
title={
<FormattedMessage
id="xpack.fleet.epm.packageDetails.apiReference.noDocumentationMessage"
defaultMessage="This integration has no references available."
/>
}
/>
)}
<EuiSpacer size="m" />
</EuiFlexItem>
</EuiFlexGroup>
);
};

2
x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/package_policies.tsx
View file

@ -355,7 +355,7 @@ export const PackagePoliciesPage = ({ name, version }: PackagePoliciesPanelProps
<AgentPolicyRefreshContext.Provider value={{ refresh: refreshPolicies }}>
<EuiFlexGroup alignItems="flexStart">
<EuiFlexItem grow={1} />
<EuiFlexItem grow={6}>
<EuiFlexItem grow={7}>
<EuiBasicTable
items={packageAndAgentPolicies || []}
columns={columns}

2
x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/settings/settings.tsx
View file

@ -256,7 +256,7 @@ export const SettingsPage: React.FC<Props> = memo(({ packageInfo, startServices
<>
<EuiFlexGroup alignItems="flexStart">
<EuiFlexItem grow={1} />
<EuiFlexItem grow={6}>
<EuiFlexItem grow={7}>
<EuiText>
<EuiTitle>
<h3>

2
x-pack/plugins/fleet/public/components/agent_enrollment_flyout/agent_policy_selection.tsx
View file

@ -96,7 +96,7 @@ export const AgentPolicySelection: React.FC<Props> = (props) => {
</EuiText>
<EuiSpacer size="m" />
<AgentPolicyFormRow
fullWidth={true}
fullWidth
label={
authz.fleet.allAgentPolicies && (
<EuiFlexGroup justifyContent="flexEnd">

4
x-pack/plugins/fleet/public/components/agent_enrollment_flyout/index.tsx
View file

@ -29,7 +29,7 @@ import {
useAgentEnrollmentFlyoutData,
useFleetServerHostsForPolicy,
} from '../../hooks';
import { FLEET_SERVER_PACKAGE } from '../../constants';
import { FLEET_SERVER_PACKAGE, MAX_FLYOUT_WIDTH } from '../../constants';
import type { PackagePolicy, AgentPolicy } from '../../types';
import { Loading } from '..';
@ -106,7 +106,7 @@ export const AgentEnrollmentFlyout: React.FunctionComponent<FlyOutProps> = ({
const { cloudSecurityIntegration } = useCloudSecurityIntegration(selectedPolicy ?? undefined);
return (
<EuiFlyout data-test-subj="agentEnrollmentFlyout" onClose={onClose} size="m">
<EuiFlyout data-test-subj="agentEnrollmentFlyout" onClose={onClose} maxWidth={MAX_FLYOUT_WIDTH}>
<EuiFlyoutHeader hasBorder aria-labelledby="FleetAgentEnrollmentFlyoutTitle">
<EuiTitle size="m">
<h2 id="FleetAgentEnrollmentFlyoutTitle">

10
x-pack/plugins/fleet/public/components/header.tsx
View file

@ -22,8 +22,12 @@ const Container = styled.div`
}
`;
const Wrapper = styled.div<{ maxWidth?: number }>`
max-width: ${(props) => props.maxWidth || 1200}px;
const Wrapper = styled.div<{ maxWidth?: number | string }>`
max-width: ${(props) =>
typeof props.maxWidth === 'number'
? `${props.maxWidth || 1200}px` || props.maxWidth
: props.maxWidth};
margin-left: auto;
margin-right: auto;
padding-top: ${(props) => props.theme.eui.euiSizeXL};
@ -39,7 +43,7 @@ const Tabs = styled(EuiTabs)`
`;
export interface HeaderProps {
maxWidth?: number;
maxWidth?: number | string;
leftColumn?: JSX.Element;
rightColumn?: JSX.Element;
rightColumnGrow?: EuiFlexItemProps['grow'];

1
x-pack/plugins/fleet/public/components/index.ts
View file

@ -16,7 +16,6 @@ export { Header } from './header';
export { NewEnrollmentTokenModal } from './new_enrollment_key_modal';
export { AgentPolicyPackageBadge } from './agent_policy_package_badge';
export { AgentPolicyPackageBadges } from './agent_policy_package_badges';
export { DangerEuiContextMenuItem } from './danger_eui_context_menu_item';
export { PackagePolicyDeleteProvider } from './package_policy_delete_provider';
export { PackagePolicyActionsMenu } from './package_policy_actions_menu';
export { AddAgentHelpPopover } from './add_agent_help_popover';

7
x-pack/plugins/fleet/public/components/uninstall_command_flyout/uninstall_command_flyout.tsx
View file

@ -31,6 +31,7 @@ import {
useGetUninstallToken,
useGetUninstallTokens,
} from '../../hooks/use_request/uninstall_tokens';
import { MAX_FLYOUT_WIDTH } from '../../constants';
import { UninstallCommandsPerPlatform } from './uninstall_commands_per_platform';
import type { UninstallCommandTarget } from './types';
@ -185,7 +186,11 @@ export const UninstallCommandFlyout: React.FunctionComponent<UninstallCommandFly
target,
}) => {
return (
<EuiFlyout onClose={onClose} data-test-subj="uninstall-command-flyout">
<EuiFlyout
onClose={onClose}
data-test-subj="uninstall-command-flyout"
maxWidth={MAX_FLYOUT_WIDTH}
>
<EuiFlyoutHeader hasBorder>
<EuiTitle size="m">
<h2>

2
x-pack/plugins/fleet/public/constants/index.ts
View file

@ -60,3 +60,5 @@ export type TourKey = keyof typeof TOUR_STORAGE_KEYS;
export type TOUR_STORAGE_CONFIG = {
[k in TourKey]: TourConfig;
};
export const MAX_FLYOUT_WIDTH = 800;

47
x-pack/plugins/fleet/public/layouts/with_header.tsx
View file

@ -6,7 +6,7 @@
*/
import React from 'react';
import { EuiPageBody, EuiSpacer } from '@elastic/eui';
import { EuiPageBody, EuiSpacer, useIsWithinMinBreakpoint } from '@elastic/eui';
import type { HeaderProps } from '../components';
import { Header } from '../components';
@ -26,23 +26,28 @@ export const WithHeaderLayout: React.FC<WithHeaderLayoutProps> = ({
children,
'data-test-subj': dataTestSubj,
...rest
}) => (
<Wrapper>
<Header
maxWidth={restrictHeaderWidth}
data-test-subj={dataTestSubj ? `${dataTestSubj}_header` : undefined}
{...rest}
/>
<Page
restrictWidth={restrictWidth || 1200}
data-test-subj={dataTestSubj ? `${dataTestSubj}_page` : undefined}
>
<EuiPageBody>
<ContentWrapper>
<EuiSpacer size="m" />
{children}
</ContentWrapper>
</EuiPageBody>
</Page>
</Wrapper>
);
}) => {
const isBiggerScreen = useIsWithinMinBreakpoint('xxl');
const fullWidthSize = isBiggerScreen ? '80%' : '100%';
return (
<Wrapper>
<Header
maxWidth={restrictHeaderWidth || fullWidthSize}
data-test-subj={dataTestSubj ? `${dataTestSubj}_header` : undefined}
{...rest}
/>
<Page
restrictWidth={restrictWidth || fullWidthSize}
data-test-subj={dataTestSubj ? `${dataTestSubj}_page` : undefined}
>
<EuiPageBody>
<ContentWrapper>
<EuiSpacer size="m" />
{children}
</ContentWrapper>
</EuiPageBody>
</Page>
</Wrapper>
);
};