From 3e5ed774700336657f25e8f0aef10e3bf17a93a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patryk=20Kopyci=C5=84ski?= Date: Mon, 12 Jul 2021 18:55:06 +0300 Subject: [PATCH 01/52] [Osquery] Fix 7.14 live query history view (#105211) --- .../action_results/action_results_summary.tsx | 22 +------ .../osquery/public/actions/actions_table.tsx | 19 ++++++ .../public/agents/agent_id_to_name.tsx | 37 ++++++++++++ .../osquery/public/agents/agents_table.tsx | 24 ++++++-- .../public/agents/use_agent_details.ts | 36 +++++++++++ .../osquery/public/agents/use_all_agents.ts | 2 +- .../public/live_queries/form/index.tsx | 2 +- .../public/routes/live_queries/new/index.tsx | 10 +++- .../routes/saved_queries/list/index.tsx | 60 ++++++++++--------- .../saved_queries/saved_queries_dropdown.tsx | 41 +++++++++---- .../scheduled_query_group_queries_table.tsx | 2 +- .../actions/all/query.all_actions.dsl.ts | 23 +++++-- 12 files changed, 207 insertions(+), 71 deletions(-) create mode 100644 x-pack/plugins/osquery/public/agents/agent_id_to_name.tsx create mode 100644 x-pack/plugins/osquery/public/agents/use_agent_details.ts diff --git a/x-pack/plugins/osquery/public/action_results/action_results_summary.tsx b/x-pack/plugins/osquery/public/action_results/action_results_summary.tsx index d3b0e38a5e033..bf4c97d63d74c 100644 --- a/x-pack/plugins/osquery/public/action_results/action_results_summary.tsx +++ b/x-pack/plugins/osquery/public/action_results/action_results_summary.tsx @@ -8,15 +8,13 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ import { i18n } from '@kbn/i18n'; -import { EuiLink, EuiInMemoryTable, EuiCodeBlock } from '@elastic/eui'; +import { EuiInMemoryTable, EuiCodeBlock } from '@elastic/eui'; import React, { useCallback, useEffect, useMemo, useState } from 'react'; -import { PLUGIN_ID } from '../../../fleet/common'; -import { pagePathGetters } from '../../../fleet/public'; +import { AgentIdToName } from '../agents/agent_id_to_name'; import { useActionResults } from './use_action_results'; import { useAllResults } from '../results/use_all_results'; import { Direction } from '../../common/search_strategy'; -import { useKibana } from '../common/lib/kibana'; interface ActionResultsSummaryProps { actionId: string; @@ -35,7 +33,6 @@ const ActionResultsSummaryComponent: React.FC = ({ expirationDate, agentIds, }) => { - const getUrlForApp = useKibana().services.application.getUrlForApp; // @ts-expect-error update types const [pageIndex, setPageIndex] = useState(0); // @ts-expect-error update types @@ -70,20 +67,7 @@ const ActionResultsSummaryComponent: React.FC = ({ isLive, }); - const renderAgentIdColumn = useCallback( - (agentId) => ( - - {agentId} - - ), - [getUrlForApp] - ); + const renderAgentIdColumn = useCallback((agentId) => , []); const renderRowsColumn = useCallback( (_, item) => { diff --git a/x-pack/plugins/osquery/public/actions/actions_table.tsx b/x-pack/plugins/osquery/public/actions/actions_table.tsx index 0ee928ad8aa14..045c1f67b070d 100644 --- a/x-pack/plugins/osquery/public/actions/actions_table.tsx +++ b/x-pack/plugins/osquery/public/actions/actions_table.tsx @@ -9,6 +9,7 @@ import { isArray } from 'lodash'; import { i18n } from '@kbn/i18n'; import { EuiBasicTable, EuiButtonIcon, EuiCodeBlock, formatDate } from '@elastic/eui'; import React, { useState, useCallback, useMemo } from 'react'; +import { useHistory } from 'react-router-dom'; import { useAllActions } from './use_all_actions'; import { Direction } from '../../common/search_strategy'; @@ -27,6 +28,7 @@ const ActionTableResultsButton = React.memo(({ ac ActionTableResultsButton.displayName = 'ActionTableResultsButton'; const ActionsTableComponent = () => { + const { push } = useHistory(); const [pageIndex, setPageIndex] = useState(0); const [pageSize, setPageSize] = useState(20); @@ -67,6 +69,16 @@ const ActionsTableComponent = () => { [] ); + const handlePlayClick = useCallback( + (item) => + push('/live_queries/new', { + form: { + query: item._source?.data?.query, + }, + }), + [push] + ); + const columns = useMemo( () => [ { @@ -106,6 +118,11 @@ const ActionsTableComponent = () => { defaultMessage: 'View details', }), actions: [ + { + type: 'icon', + icon: 'play', + onClick: handlePlayClick, + }, { render: renderActionsColumn, }, @@ -113,6 +130,7 @@ const ActionsTableComponent = () => { }, ], [ + handlePlayClick, renderActionsColumn, renderAgentsColumn, renderCreatedByColumn, @@ -135,6 +153,7 @@ const ActionsTableComponent = () => { = ({ agentId }) => { + const getUrlForApp = useKibana().services.application.getUrlForApp; + const { data } = useAgentDetails({ agentId }); + + return ( + + {data?.item.local_metadata.host.name ?? agentId} + + ); +}; + +export const AgentIdToName = React.memo(AgentIdToNameComponent); diff --git a/x-pack/plugins/osquery/public/agents/agents_table.tsx b/x-pack/plugins/osquery/public/agents/agents_table.tsx index 7e8f49c051614..53e2ce1d53420 100644 --- a/x-pack/plugins/osquery/public/agents/agents_table.tsx +++ b/x-pack/plugins/osquery/public/agents/agents_table.tsx @@ -21,7 +21,12 @@ import { generateAgentSelection, } from './helpers'; -import { SELECT_AGENT_LABEL, generateSelectedAgentsMessage } from './translations'; +import { + SELECT_AGENT_LABEL, + generateSelectedAgentsMessage, + ALL_AGENTS_LABEL, + AGENT_POLICY_LABEL, +} from './translations'; import { AGENT_GROUP_KEY, @@ -72,8 +77,17 @@ const AgentsTableComponent: React.FC = ({ agentSelection, onCh useEffect(() => { if (agentSelection && !defaultValueInitialized.current && options.length) { - if (agentSelection.policiesSelected) { - const policyOptions = find(['label', 'Policy'], options); + if (agentSelection.allAgentsSelected) { + const allAgentsOptions = find(['label', ALL_AGENTS_LABEL], options); + + if (allAgentsOptions?.options) { + setSelectedOptions(allAgentsOptions.options); + defaultValueInitialized.current = true; + } + } + + if (agentSelection.policiesSelected.length) { + const policyOptions = find(['label', AGENT_POLICY_LABEL], options); if (policyOptions) { const defaultOptions = policyOptions.options?.filter((option) => @@ -82,12 +96,12 @@ const AgentsTableComponent: React.FC = ({ agentSelection, onCh if (defaultOptions?.length) { setSelectedOptions(defaultOptions); + defaultValueInitialized.current = true; } - defaultValueInitialized.current = true; } } } - }, [agentSelection, options]); + }, [agentSelection, options, selectedOptions]); useEffect(() => { // update the groups when groups or agents have changed diff --git a/x-pack/plugins/osquery/public/agents/use_agent_details.ts b/x-pack/plugins/osquery/public/agents/use_agent_details.ts new file mode 100644 index 0000000000000..1a0663812dec3 --- /dev/null +++ b/x-pack/plugins/osquery/public/agents/use_agent_details.ts @@ -0,0 +1,36 @@ +/* + * 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. + */ + +import { i18n } from '@kbn/i18n'; +import { useQuery } from 'react-query'; + +import { GetOneAgentResponse, agentRouteService } from '../../../fleet/common'; +import { useErrorToast } from '../common/hooks/use_error_toast'; +import { useKibana } from '../common/lib/kibana'; + +interface UseAgentDetails { + agentId: string; +} + +export const useAgentDetails = ({ agentId }: UseAgentDetails) => { + const { http } = useKibana().services; + const setErrorToast = useErrorToast(); + return useQuery( + ['agentDetails', agentId], + () => http.get(agentRouteService.getInfoPath(agentId)), + { + enabled: agentId.length > 0, + onSuccess: () => setErrorToast(), + onError: (error) => + setErrorToast(error as Error, { + title: i18n.translate('xpack.osquery.agentDetails.fetchError', { + defaultMessage: 'Error while fetching agent details', + }), + }), + } + ); +}; diff --git a/x-pack/plugins/osquery/public/agents/use_all_agents.ts b/x-pack/plugins/osquery/public/agents/use_all_agents.ts index 30ba4d2f57907..cda15cc805437 100644 --- a/x-pack/plugins/osquery/public/agents/use_all_agents.ts +++ b/x-pack/plugins/osquery/public/agents/use_all_agents.ts @@ -38,7 +38,7 @@ export const useAllAgents = ( let kuery = `last_checkin_status: online and (${policyFragment})`; if (searchValue) { - kuery += `and (local_metadata.host.hostname:*${searchValue}* or local_metadata.elastic.agent.id:*${searchValue}*)`; + kuery += ` and (local_metadata.host.hostname:*${searchValue}* or local_metadata.elastic.agent.id:*${searchValue}*)`; } return http.get(agentRouteService.getListPath(), { diff --git a/x-pack/plugins/osquery/public/live_queries/form/index.tsx b/x-pack/plugins/osquery/public/live_queries/form/index.tsx index 8654a74fecfb4..658280042696e 100644 --- a/x-pack/plugins/osquery/public/live_queries/form/index.tsx +++ b/x-pack/plugins/osquery/public/live_queries/form/index.tsx @@ -110,7 +110,7 @@ const LiveQueryFormComponent: React.FC = ({ { agentSelection: { agents: [], - allAgentsSelected: false, + allAgentsSelected: true, platformsSelected: [], policiesSelected: [], }, diff --git a/x-pack/plugins/osquery/public/routes/live_queries/new/index.tsx b/x-pack/plugins/osquery/public/routes/live_queries/new/index.tsx index 9967eb97cddf2..40614c1f3e1b8 100644 --- a/x-pack/plugins/osquery/public/routes/live_queries/new/index.tsx +++ b/x-pack/plugins/osquery/public/routes/live_queries/new/index.tsx @@ -8,7 +8,7 @@ import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; import React, { useMemo } from 'react'; -import { useLocation } from 'react-router-dom'; +import { useHistory, useLocation } from 'react-router-dom'; import qs from 'query-string'; import { WithHeaderLayout } from '../../../components/layouts'; @@ -19,12 +19,18 @@ import { BetaBadge, BetaBadgeRowWrapper } from '../../../components/beta_badge'; const NewLiveQueryPageComponent = () => { useBreadcrumbs('live_query_new'); + const { replace } = useHistory(); const location = useLocation(); const liveQueryListProps = useRouterNavigate('live_queries'); const formDefaultValue = useMemo(() => { const queryParams = qs.parse(location.search); + if (location.state?.form.query) { + replace({ state: null }); + return { query: location.state?.form.query }; + } + if (queryParams?.agentPolicyId) { return { agentSelection: { @@ -37,7 +43,7 @@ const NewLiveQueryPageComponent = () => { } return undefined; - }, [location.search]); + }, [location.search, location.state, replace]); const LeftColumn = useMemo( () => ( diff --git a/x-pack/plugins/osquery/public/routes/saved_queries/list/index.tsx b/x-pack/plugins/osquery/public/routes/saved_queries/list/index.tsx index 7e8e8e543dfab..8738c06d06597 100644 --- a/x-pack/plugins/osquery/public/routes/saved_queries/list/index.tsx +++ b/x-pack/plugins/osquery/public/routes/saved_queries/list/index.tsx @@ -16,6 +16,7 @@ import { import React, { useCallback, useMemo, useState } from 'react'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; +import { useHistory } from 'react-router-dom'; import { SavedObject } from 'kibana/public'; import { WithHeaderLayout } from '../../../components/layouts'; @@ -51,6 +52,7 @@ const EditButton = React.memo(EditButtonComponent); const SavedQueriesPageComponent = () => { useBreadcrumbs('saved_queries'); + const { push } = useHistory(); const newQueryLinkProps = useRouterNavigate('saved_queries/new'); const [pageIndex, setPageIndex] = useState(0); const [pageSize, setPageSize] = useState(10); @@ -59,21 +61,15 @@ const SavedQueriesPageComponent = () => { const { data } = useSavedQueries({ isLive: true }); - // const handlePlayClick = useCallback( - // (item) => - // push({ - // search: qs.stringify({ - // tab: 'live_query', - // }), - // state: { - // query: { - // id: item.id, - // query: item.attributes.query, - // }, - // }, - // }), - // [push] - // ); + const handlePlayClick = useCallback( + (item) => + push('/live_queries/new', { + form: { + savedQueryId: item.id, + }, + }), + [push] + ); const renderEditAction = useCallback( (item: SavedObject<{ name: string }>) => ( @@ -96,45 +92,53 @@ const SavedQueriesPageComponent = () => { () => [ { field: 'attributes.id', - name: 'Query ID', + name: i18n.translate('xpack.osquery.savedQueries.table.queryIdColumnTitle', { + defaultMessage: 'Query ID', + }), sortable: true, truncateText: true, }, { field: 'attributes.description', - name: 'Description', + name: i18n.translate('xpack.osquery.savedQueries.table.descriptionColumnTitle', { + defaultMessage: 'Description', + }), sortable: true, truncateText: true, }, { field: 'attributes.created_by', - name: 'Created by', + name: i18n.translate('xpack.osquery.savedQueries.table.createdByColumnTitle', { + defaultMessage: 'Created by', + }), sortable: true, truncateText: true, }, { field: 'attributes.updated_at', - name: 'Last updated at', + name: i18n.translate('xpack.osquery.savedQueries.table.updatedAtColumnTitle', { + defaultMessage: 'Last updated at', + }), sortable: (item: SavedObject<{ updated_at: string }>) => item.attributes.updated_at ? Date.parse(item.attributes.updated_at) : 0, truncateText: true, render: renderUpdatedAt, }, { - name: 'Actions', + name: i18n.translate('xpack.osquery.savedQueries.table.actionsColumnTitle', { + defaultMessage: 'Actions', + }), actions: [ - // { - // name: 'Live query', - // description: 'Run live query', - // type: 'icon', - // icon: 'play', - // onClick: handlePlayClick, - // }, + { + type: 'icon', + icon: 'play', + onClick: handlePlayClick, + }, { render: renderEditAction }, ], }, ], - [renderEditAction, renderUpdatedAt] + [handlePlayClick, renderEditAction, renderUpdatedAt] ); const onTableChange = useCallback(({ page = {}, sort = {} }) => { diff --git a/x-pack/plugins/osquery/public/saved_queries/saved_queries_dropdown.tsx b/x-pack/plugins/osquery/public/saved_queries/saved_queries_dropdown.tsx index e30954a695b2d..073b56bfd1d4c 100644 --- a/x-pack/plugins/osquery/public/saved_queries/saved_queries_dropdown.tsx +++ b/x-pack/plugins/osquery/public/saved_queries/saved_queries_dropdown.tsx @@ -7,10 +7,11 @@ import { find } from 'lodash/fp'; import { EuiCodeBlock, EuiFormRow, EuiComboBox, EuiText } from '@elastic/eui'; -import React, { useCallback, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { SimpleSavedObject } from 'kibana/public'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; +import { useHistory, useLocation } from 'react-router-dom'; import { useSavedQueries } from './use_saved_queries'; @@ -29,19 +30,25 @@ const SavedQueriesDropdownComponent: React.FC = ({ disabled, onChange, }) => { + const { replace } = useHistory(); + const location = useLocation(); const [selectedOptions, setSelectedOptions] = useState([]); const { data } = useSavedQueries({}); - const queryOptions = - data?.savedObjects?.map((savedQuery) => ({ - label: savedQuery.attributes.id ?? '', - value: { - id: savedQuery.attributes.id, - description: savedQuery.attributes.description, - query: savedQuery.attributes.query, - }, - })) ?? []; + const queryOptions = useMemo( + () => + data?.savedObjects?.map((savedQuery) => ({ + label: savedQuery.attributes.id ?? '', + value: { + savedObjectId: savedQuery.id, + id: savedQuery.attributes.id, + description: savedQuery.attributes.description, + query: savedQuery.attributes.query, + }, + })) ?? [], + [data?.savedObjects] + ); const handleSavedQueryChange = useCallback( (newSelectedOptions) => { @@ -73,6 +80,20 @@ const SavedQueriesDropdownComponent: React.FC = ({ [] ); + useEffect(() => { + const savedQueryId = location.state?.form?.savedQueryId; + + if (savedQueryId) { + const savedQueryOption = find(['value.savedObjectId', savedQueryId], queryOptions); + + if (savedQueryOption) { + handleSavedQueryChange([savedQueryOption]); + } + + replace({ state: null }); + } + }, [handleSavedQueryChange, replace, location.state, queryOptions]); + return ( Date: Mon, 12 Jul 2021 11:56:43 -0400 Subject: [PATCH 02/52] [Fleet] Fix enrollment flyout with fleet server from policy page (#104542) * [Fleet] Fix enrollment flyout with fleet server from policy page * Fix tests * Show enrollment instructions for add agent from fleet server policy * Fix conditions to show fleet server setup in flyout Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- .../agent_enrollment_flyout.test.mocks.ts | 1 + .../agent_enrollment_flyout.test.tsx | 6 ++- .../agent_enrollment_flyout/index.tsx | 39 ++++++++++++-- .../managed_instructions.tsx | 54 ++++++++++++------- .../agent_enrollment_flyout/steps.tsx | 22 ++------ .../agent_enrollment_flyout/types.ts | 8 ++- x-pack/plugins/fleet/public/types/index.ts | 1 + 7 files changed, 87 insertions(+), 44 deletions(-) diff --git a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/agent_enrollment_flyout.test.mocks.ts b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/agent_enrollment_flyout.test.mocks.ts index d2e7c4089e88b..5c292187982dc 100644 --- a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/agent_enrollment_flyout.test.mocks.ts +++ b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/agent_enrollment_flyout.test.mocks.ts @@ -11,6 +11,7 @@ jest.mock('../../hooks/use_request', () => { ...module, useGetSettings: jest.fn(), sendGetFleetStatus: jest.fn(), + sendGetOneAgentPolicy: jest.fn(), }; }); diff --git a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/agent_enrollment_flyout.test.tsx b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/agent_enrollment_flyout.test.tsx index f68b1b878c51c..18296134ee1a7 100644 --- a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/agent_enrollment_flyout.test.tsx +++ b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/agent_enrollment_flyout.test.tsx @@ -16,7 +16,7 @@ import { coreMock } from 'src/core/public/mocks'; import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public'; import type { AgentPolicy } from '../../../common'; -import { useGetSettings, sendGetFleetStatus } from '../../hooks/use_request'; +import { useGetSettings, sendGetFleetStatus, sendGetOneAgentPolicy } from '../../hooks/use_request'; import { FleetStatusProvider, ConfigContext } from '../../hooks'; import { useFleetServerInstructions } from '../../applications/fleet/sections/agents/agent_requirements_page/components'; @@ -79,6 +79,10 @@ describe('', () => { data: { isReady: true }, }); + (sendGetOneAgentPolicy as jest.Mock).mockResolvedValue({ + data: { item: { package_policies: [] } }, + }); + (useFleetServerInstructions as jest.Mock).mockReturnValue({ serviceToken: 'test', getServiceToken: jest.fn(), diff --git a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/index.tsx b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/index.tsx index 9b82b2a80b5e1..87911e5d6c2c7 100644 --- a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/index.tsx +++ b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/index.tsx @@ -22,7 +22,9 @@ import { } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; -import { useGetSettings, useUrlModal } from '../../hooks'; +import { useGetSettings, useUrlModal, sendGetOneAgentPolicy, useFleetStatus } from '../../hooks'; +import { FLEET_SERVER_PACKAGE } from '../../constants'; +import type { PackagePolicy } from '../../types'; import { ManagedInstructions } from './managed_instructions'; import { StandaloneInstructions } from './standalone_instructions'; @@ -63,6 +65,30 @@ export const AgentEnrollmentFlyout: React.FunctionComponent = ({ } }, [modal, lastModal, settings]); + const fleetStatus = useFleetStatus(); + const [policyId, setSelectedPolicyId] = useState(agentPolicy?.id); + const [isFleetServerPolicySelected, setIsFleetServerPolicySelected] = useState(false); + + useEffect(() => { + async function checkPolicyIsFleetServer() { + if (policyId && setIsFleetServerPolicySelected) { + const agentPolicyRequest = await sendGetOneAgentPolicy(policyId); + if ( + agentPolicyRequest.data?.item && + (agentPolicyRequest.data.item.package_policies as PackagePolicy[]).some( + (packagePolicy) => packagePolicy.package?.name === FLEET_SERVER_PACKAGE + ) + ) { + setIsFleetServerPolicySelected(true); + } else { + setIsFleetServerPolicySelected(false); + } + } + } + + checkPolicyIsFleetServer(); + }, [policyId]); + const isLoadingInitialRequest = settings.isLoading && settings.isInitialRequest; return ( @@ -110,16 +136,23 @@ export const AgentEnrollmentFlyout: React.FunctionComponent = ({ ) : undefined } > - {fleetServerHosts.length === 0 && mode === 'managed' ? null : mode === 'managed' ? ( + {mode === 'managed' ? ( ) : ( diff --git a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/managed_instructions.tsx b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/managed_instructions.tsx index 61f86335cd7f9..8054c48fbbaa8 100644 --- a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/managed_instructions.tsx +++ b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/managed_instructions.tsx @@ -11,7 +11,7 @@ import type { EuiContainedStepProps } from '@elastic/eui/src/components/steps/st import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; -import { useGetOneEnrollmentAPIKey, useGetSettings, useLink, useFleetStatus } from '../../hooks'; +import { useGetOneEnrollmentAPIKey, useLink, useFleetStatus } from '../../hooks'; import { ManualInstructions } from '../../components/enrollment_instructions'; import { @@ -56,14 +56,19 @@ const FleetServerMissingRequirements = () => { }; export const ManagedInstructions = React.memo( - ({ agentPolicy, agentPolicies, viewDataStep }) => { + ({ + agentPolicy, + agentPolicies, + viewDataStep, + setSelectedPolicyId, + isFleetServerPolicySelected, + settings, + }) => { const fleetStatus = useFleetStatus(); const [selectedApiKeyId, setSelectedAPIKeyId] = useState(); - const [isFleetServerPolicySelected, setIsFleetServerPolicySelected] = useState(false); const apiKey = useGetOneEnrollmentAPIKey(selectedApiKeyId); - const settings = useGetSettings(); const fleetServerInstructions = useFleetServerInstructions(apiKey?.data?.item?.policy_id); const fleetServerSteps = useMemo(() => { @@ -88,7 +93,7 @@ export const ManagedInstructions = React.memo( }, [fleetServerInstructions]); const steps = useMemo(() => { - const fleetServerHosts = settings.data?.item?.fleet_server_hosts || []; + const fleetServerHosts = settings?.fleet_server_hosts || []; const baseSteps: EuiContainedStepProps[] = [ DownloadStep(), !agentPolicy @@ -96,7 +101,7 @@ export const ManagedInstructions = React.memo( agentPolicies, selectedApiKeyId, setSelectedAPIKeyId, - setIsFleetServerPolicySelected, + setSelectedPolicyId, }) : AgentEnrollmentKeySelectionStep({ agentPolicy, selectedApiKeyId, setSelectedAPIKeyId }), ]; @@ -121,30 +126,39 @@ export const ManagedInstructions = React.memo( }, [ agentPolicy, selectedApiKeyId, + setSelectedPolicyId, setSelectedAPIKeyId, agentPolicies, apiKey.data, fleetServerSteps, isFleetServerPolicySelected, - settings.data?.item?.fleet_server_hosts, + settings?.fleet_server_hosts, viewDataStep, ]); + if (fleetStatus.isReady && settings?.fleet_server_hosts.length === 0) { + return null; + } + + if (fleetStatus.isReady) { + return ( + <> + + + + + + + ); + } + return ( <> - {fleetStatus.isReady ? ( - <> - - - - - - - ) : fleetStatus.missingRequirements?.length === 1 && - fleetStatus.missingRequirements[0] === 'fleet_server' ? ( + {fleetStatus.missingRequirements?.length === 1 && + fleetStatus.missingRequirements[0] === 'fleet_server' ? ( ) : ( diff --git a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/steps.tsx b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/steps.tsx index 6cffa39628d92..1cfdc45fb7dba 100644 --- a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/steps.tsx +++ b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/steps.tsx @@ -11,9 +11,8 @@ import { FormattedMessage } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; import semver from 'semver'; -import type { AgentPolicy, PackagePolicy } from '../../types'; -import { sendGetOneAgentPolicy, useKibanaVersion } from '../../hooks'; -import { FLEET_SERVER_PACKAGE } from '../../constants'; +import type { AgentPolicy } from '../../types'; +import { useKibanaVersion } from '../../hooks'; import { EnrollmentStepAgentPolicy } from './agent_policy_selection'; import { AdvancedAgentAuthenticationSettings } from './advanced_agent_authentication_settings'; @@ -69,13 +68,11 @@ export const AgentPolicySelectionStep = ({ selectedApiKeyId, setSelectedAPIKeyId, excludeFleetServer, - setIsFleetServerPolicySelected, }: { agentPolicies?: AgentPolicy[]; setSelectedPolicyId?: (policyId?: string) => void; selectedApiKeyId?: string; setSelectedAPIKeyId?: (key?: string) => void; - setIsFleetServerPolicySelected?: (selected: boolean) => void; excludeFleetServer?: boolean; }) => { const regularAgentPolicies = useMemo(() => { @@ -92,21 +89,8 @@ export const AgentPolicySelectionStep = ({ if (setSelectedPolicyId) { setSelectedPolicyId(policyId); } - if (policyId && setIsFleetServerPolicySelected) { - const agentPolicyRequest = await sendGetOneAgentPolicy(policyId); - if ( - agentPolicyRequest.data?.item && - (agentPolicyRequest.data.item.package_policies as PackagePolicy[]).some( - (packagePolicy) => packagePolicy.package?.name === FLEET_SERVER_PACKAGE - ) - ) { - setIsFleetServerPolicySelected(true); - } else { - setIsFleetServerPolicySelected(false); - } - } }, - [setIsFleetServerPolicySelected, setSelectedPolicyId] + [setSelectedPolicyId] ); return { diff --git a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/types.ts b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/types.ts index 9ee514c634655..282a5b243caed 100644 --- a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/types.ts +++ b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/types.ts @@ -7,7 +7,7 @@ import type { EuiStepProps } from '@elastic/eui'; -import type { AgentPolicy } from '../../types'; +import type { AgentPolicy, Settings } from '../../types'; export interface BaseProps { /** @@ -27,4 +27,10 @@ export interface BaseProps { * in some way. This is an area for consumers to render a button and text explaining how data can be viewed. */ viewDataStep?: EuiStepProps; + + settings?: Settings; + + setSelectedPolicyId?: (policyId?: string) => void; + + isFleetServerPolicySelected?: boolean; } diff --git a/x-pack/plugins/fleet/public/types/index.ts b/x-pack/plugins/fleet/public/types/index.ts index f21552d68e77b..c91ec42d3e527 100644 --- a/x-pack/plugins/fleet/public/types/index.ts +++ b/x-pack/plugins/fleet/public/types/index.ts @@ -27,6 +27,7 @@ export { PackagePolicyPackage, Output, DataStream, + Settings, // API schema - misc setup, status GetFleetStatusResponse, // API schemas - Agent policy From 42c743be8848e08761f76903c4aa1f0b5f8e899a Mon Sep 17 00:00:00 2001 From: Caroline Horn <549577+cchaos@users.noreply.github.com> Date: Mon, 12 Jul 2021 12:50:41 -0400 Subject: [PATCH 03/52] [Top Menu] Increase size of top menu links to `s` (#103144) * Increased non-emphasized header links size from `xs` to `s` * [Observability] Updating header links to use EuiHeaderLink * [Spaces Menu] Larger spinner * [Help Menu] Increase size of links * [Canvas] Increase size to `s` --- .../chrome/ui/header/header_help_menu.tsx | 12 +-- .../data/public/ui/filter_bar/filter_bar.tsx | 2 +- .../index_pattern_table.tsx | 2 +- .../public/top_nav_menu/top_nav_menu_item.tsx | 2 +- .../app/RumDashboard/ActionMenu/index.tsx | 60 ++++++-------- .../alerting_popover_flyout.tsx | 1 - .../anomaly_detection_setup_link.tsx | 1 - .../shared/apm_header_action_menu/index.tsx | 2 +- .../function_reference_generator.tsx | 2 +- .../public/components/help_menu/help_menu.tsx | 4 +- .../__snapshots__/edit_menu.stories.storyshot | 12 +-- .../edit_menu/edit_menu.component.tsx | 2 +- .../share_menu.stories.storyshot | 4 +- .../share_menu/share_menu.component.tsx | 2 +- .../__snapshots__/view_menu.stories.storyshot | 8 +- .../view_menu/view_menu.component.tsx | 2 +- .../file_error_callouts.tsx | 2 +- .../components/metrics_alert_dropdown.tsx | 7 +- .../components/alert_dropdown.tsx | 7 +- .../infra/public/pages/logs/page_content.tsx | 37 ++++----- .../infra/public/pages/metrics/index.tsx | 43 ++++------ .../anomaly_detection_flyout.tsx | 7 +- .../nav_control/nav_control_popover.tsx | 2 +- .../common/header/action_menu_content.tsx | 82 +++++++++---------- .../alerts/toggle_alert_flyout_button.tsx | 7 +- .../overview/synthetics_callout.test.tsx | 6 -- .../overview/synthetics_callout.tsx | 10 +-- 27 files changed, 134 insertions(+), 194 deletions(-) diff --git a/src/core/public/chrome/ui/header/header_help_menu.tsx b/src/core/public/chrome/ui/header/header_help_menu.tsx index c6a09c1177a5e..cbf89bba2ca44 100644 --- a/src/core/public/chrome/ui/header/header_help_menu.tsx +++ b/src/core/public/chrome/ui/header/header_help_menu.tsx @@ -211,7 +211,7 @@ export class HeaderHelpMenu extends Component { return ( - + { - + { - + { @@ -330,7 +330,7 @@ export class HeaderHelpMenu extends Component { {customLinks} {content && ( <> - {customLinks && } + {customLinks && } )} @@ -383,7 +383,7 @@ const createCustomLink = ( ) => { return ( - + {text} {addSpacer && } diff --git a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx index 4655bbf8e91a5..cc796ad749f0b 100644 --- a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx +++ b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx @@ -77,7 +77,7 @@ function FilterBarUI(props: Props) { const button = ( setIsAddFilterPopoverOpen(true)} data-test-subj="addFilter" className="globalFilterBar__addButton" diff --git a/src/plugins/index_pattern_management/public/components/index_pattern_table/index_pattern_table.tsx b/src/plugins/index_pattern_management/public/components/index_pattern_table/index_pattern_table.tsx index 6bd06528084ce..6405a81282471 100644 --- a/src/plugins/index_pattern_management/public/components/index_pattern_table/index_pattern_table.tsx +++ b/src/plugins/index_pattern_management/public/components/index_pattern_table/index_pattern_table.tsx @@ -132,7 +132,7 @@ export const IndexPatternTable = ({ canSave, history }: Props) => { } ) => ( <> - + {name}   diff --git a/src/plugins/navigation/public/top_nav_menu/top_nav_menu_item.tsx b/src/plugins/navigation/public/top_nav_menu/top_nav_menu_item.tsx index 523bf07f828c9..f4ca53a9a974e 100644 --- a/src/plugins/navigation/public/top_nav_menu/top_nav_menu_item.tsx +++ b/src/plugins/navigation/public/top_nav_menu/top_nav_menu_item.tsx @@ -42,7 +42,7 @@ export function TopNavMenuItem(props: TopNavMenuData) { {upperFirst(props.label || props.id!)} ) : ( - + {upperFirst(props.label || props.id!)} ); diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/ActionMenu/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/ActionMenu/index.tsx index 63ba7047696ca..4e6544a20f301 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/ActionMenu/index.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/ActionMenu/index.tsx @@ -6,12 +6,7 @@ */ import React from 'react'; -import { - EuiButtonEmpty, - EuiFlexGroup, - EuiFlexItem, - EuiToolTip, -} from '@elastic/eui'; +import { EuiHeaderLinks, EuiHeaderLink, EuiToolTip } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { createExploratoryViewUrl, @@ -62,38 +57,29 @@ export function UXActionMenu({ - - - {ANALYZE_MESSAGE}

}> - - {ANALYZE_DATA} - -
-
- - + {ANALYZE_MESSAGE}

}> + - {i18n.translate('xpack.apm.addDataButtonLabel', { - defaultMessage: 'Add data', - })} -
-
-
+ {ANALYZE_DATA} +
+ + + {i18n.translate('xpack.apm.addDataButtonLabel', { + defaultMessage: 'Add data', + })} + + ); } diff --git a/x-pack/plugins/apm/public/components/shared/apm_header_action_menu/alerting_popover_flyout.tsx b/x-pack/plugins/apm/public/components/shared/apm_header_action_menu/alerting_popover_flyout.tsx index ca73f6ddd05b3..4abd36a277311 100644 --- a/x-pack/plugins/apm/public/components/shared/apm_header_action_menu/alerting_popover_flyout.tsx +++ b/x-pack/plugins/apm/public/components/shared/apm_header_action_menu/alerting_popover_flyout.tsx @@ -66,7 +66,6 @@ export function AlertingPopoverAndFlyout({ const button = ( - + {i18n.translate('xpack.apm.settingsLinkLabel', { defaultMessage: 'Settings', })} diff --git a/x-pack/plugins/canvas/public/components/function_reference_generator/function_reference_generator.tsx b/x-pack/plugins/canvas/public/components/function_reference_generator/function_reference_generator.tsx index 81532816d9c83..eb394801f549c 100644 --- a/x-pack/plugins/canvas/public/components/function_reference_generator/function_reference_generator.tsx +++ b/x-pack/plugins/canvas/public/components/function_reference_generator/function_reference_generator.tsx @@ -29,7 +29,7 @@ export const FunctionReferenceGenerator: FC = ({ functionRegistry }) => { }; return ( - + Generate function reference ); diff --git a/x-pack/plugins/canvas/public/components/help_menu/help_menu.tsx b/x-pack/plugins/canvas/public/components/help_menu/help_menu.tsx index 2877ccf41056d..af1850beb5290 100644 --- a/x-pack/plugins/canvas/public/components/help_menu/help_menu.tsx +++ b/x-pack/plugins/canvas/public/components/help_menu/help_menu.tsx @@ -46,13 +46,13 @@ export const HelpMenu: FC = ({ functionRegistry }) => { return ( <> - + {strings.getKeyboardShortcutsLinkLabel()} {FunctionReferenceGenerator ? ( - + ) : null} diff --git a/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/__stories__/__snapshots__/edit_menu.stories.storyshot b/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/__stories__/__snapshots__/edit_menu.stories.storyshot index cc33ae3526c0c..f2bc9c57cbcc6 100644 --- a/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/__stories__/__snapshots__/edit_menu.stories.storyshot +++ b/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/__stories__/__snapshots__/edit_menu.stories.storyshot @@ -9,7 +9,7 @@ exports[`Storyshots components/WorkpadHeader/EditMenu 2 elements selected 1`] = >