Skip to content

Commit

Permalink
[APM] Fixes navigation bugs in APM tutorial/onboarding (#119249)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ogupte
ogupte authored Nov 22, 2021
1 parent 43f7fc0 commit 38e0cb9
Show file tree
Hide file tree
Showing 8 changed files with 197 additions and 135 deletions.
5 changes: 4 additions & 1 deletion src/plugins/home/public/application/components/tutorial/instruction_set.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ class InstructionSetUi extends React.Component {
return {
id: variant.id,
name: getDisplayText(variant.id),
initialSelected: variant.initialSelected,
};
});

Expand All @@ -45,7 +46,8 @@ class InstructionSetUi extends React.Component {
};

if (this.tabs.length > 0) {
this.state.selectedTabId = this.tabs[0].id;
this.state.selectedTabId =
this.tabs.find(({ initialSelected }) => initialSelected)?.id ?? this.tabs[0].id;
}
}

Expand Down Expand Up @@ -298,6 +300,7 @@ const instructionShape = PropTypes.shape({
const instructionVariantShape = PropTypes.shape({
id: PropTypes.string.isRequired,
instructions: PropTypes.arrayOf(instructionShape).isRequired,
initialSelected: PropTypes.bool,
});

const statusCheckConfigShape = PropTypes.shape({
Expand Down
1 change: 1 addition & 0 deletions src/plugins/home/server/services/tutorials/lib/tutorial_schema.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ export type Instruction = TypeOf<typeof instructionSchema>;
const instructionVariantSchema = schema.object({
id: schema.string(),
instructions: schema.arrayOf(instructionSchema),
initialSelected: schema.maybe(schema.boolean()),
});

export type InstructionVariant = TypeOf<typeof instructionVariantSchema>;
Expand Down
30 changes: 25 additions & 5 deletions x-pack/plugins/apm/public/tutorial/tutorial_fleet_instructions/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const CentralizedContainer = styled.div`
align-items: center;
`;

type APIResponseType = APIReturnType<'GET /internal/apm/fleet/has_data'>;
type APIResponseType = APIReturnType<'GET /internal/apm/fleet/migration_check'>;

function TutorialFleetInstructions({ http, basePath, isDarkTheme }: Props) {
const [data, setData] = useState<APIResponseType | undefined>();
Expand All @@ -44,7 +44,7 @@ function TutorialFleetInstructions({ http, basePath, isDarkTheme }: Props) {
async function fetchData() {
setIsLoading(true);
try {
const response = await http.get('/internal/apm/fleet/has_data');
const response = await http.get('/internal/apm/fleet/migration_check');
setData(response as APIResponseType);
} catch (e) {
setIsLoading(false);
Expand All @@ -55,6 +55,22 @@ function TutorialFleetInstructions({ http, basePath, isDarkTheme }: Props) {
fetchData();
}, [http]);

const hasApmIntegrations = !!data?.has_apm_integrations;
const cloudApmMigrationEnabled = !!data?.cloud_apm_migration_enabled;
const hasCloudAgentPolicy = !!data?.has_cloud_agent_policy;
const cloudApmPackagePolicy = data?.cloud_apm_package_policy;
const hasCloudApmPackagePolicy = !!cloudApmPackagePolicy;
const hasRequiredRole = !!data?.has_required_role;
const shouldLinkToMigration =
cloudApmMigrationEnabled &&
hasCloudAgentPolicy &&
!hasCloudApmPackagePolicy &&
hasRequiredRole;

const apmIntegrationHref = shouldLinkToMigration
? `${basePath}/app/apm/settings/schema`
: `${basePath}/app/integrations/detail/apm-${SUPPORTED_APM_PACKAGE_VERSION}/overview`;

if (isLoading) {
return (
<CentralizedContainer>
Expand All @@ -64,9 +80,13 @@ function TutorialFleetInstructions({ http, basePath, isDarkTheme }: Props) {
}

// When APM integration is enable in Fleet
if (data?.hasData) {
if (hasApmIntegrations) {
return (
<EuiButton iconType="gear" fill href={`${basePath}/app/fleet#/policies`}>
<EuiButton
iconType="gear"
fill
href={`${basePath}/app/integrations/detail/apm-${SUPPORTED_APM_PACKAGE_VERSION}/policies`}
>
{i18n.translate(
'xpack.apm.tutorial.apmServer.fleet.manageApmIntegration.button',
{
Expand Down Expand Up @@ -99,7 +119,7 @@ function TutorialFleetInstructions({ http, basePath, isDarkTheme }: Props) {
<EuiButton
iconType="analyzeEvent"
color="success"
href={`${basePath}/app/integrations#/detail/apm-${SUPPORTED_APM_PACKAGE_VERSION}/overview`}
href={apmIntegrationHref}
>
{i18n.translate(
'xpack.apm.tutorial.apmServer.fleet.apmIntegration.button',
Expand Down
13 changes: 10 additions & 3 deletions x-pack/plugins/apm/server/routes/fleet/route.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,14 +128,16 @@ const getMigrationCheckRoute = createApmServerRoute({
endpoint: 'GET /internal/apm/fleet/migration_check',
options: { tags: ['access:apm'] },
handler: async (resources) => {
const { plugins, context, config, request } = resources;
const { core, plugins, context, config, request } = resources;
const cloudApmMigrationEnabled = config.agent.migrations.enabled;
if (!plugins.fleet || !plugins.security) {
throw Boom.internal(FLEET_SECURITY_REQUIRED_MESSAGE);
}
const savedObjectsClient = context.core.savedObjects.client;
const fleetPluginStart = await plugins.fleet.start();
const securityPluginStart = await plugins.security.start();
const [fleetPluginStart, securityPluginStart] = await Promise.all([
plugins.fleet.start(),
plugins.security.start(),
]);
const hasRequiredRole = isSuperuser({ securityPluginStart, request });
const cloudAgentPolicy = hasRequiredRole
? await getCloudAgentPolicy({
Expand All @@ -144,12 +146,17 @@ const getMigrationCheckRoute = createApmServerRoute({
})
: undefined;
const apmPackagePolicy = getApmPackagePolicy(cloudAgentPolicy);
const packagePolicies = await getApmPackgePolicies({
core,
fleetPluginStart,
});
return {
has_cloud_agent_policy: !!cloudAgentPolicy,
has_cloud_apm_package_policy: !!apmPackagePolicy,
cloud_apm_migration_enabled: cloudApmMigrationEnabled,
has_required_role: hasRequiredRole,
cloud_apm_package_policy: apmPackagePolicy,
has_apm_integrations: packagePolicies.total > 0,
};
},
});
Expand Down
17 changes: 14 additions & 3 deletions x-pack/plugins/apm/server/tutorial/envs/elastic_cloud.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,17 +25,28 @@ import {
createPhpAgentInstructions,
} from '../../../common/tutorial/instructions/apm_agent_instructions';
import { CloudSetup } from '../../../../cloud/server';
import { APMConfig } from '../..';
import { getOnPremApmServerInstructionSet } from './on_prem_apm_server_instruction_set';

export function createElasticCloudInstructions(
cloudSetup?: CloudSetup
): TutorialSchema['elasticCloud'] {
export function createElasticCloudInstructions({
cloudSetup,
apmConfig,
isFleetPluginEnabled,
}: {
cloudSetup?: CloudSetup;
apmConfig: APMConfig;
isFleetPluginEnabled: boolean;
}): TutorialSchema['elasticCloud'] {
const apmServerUrl = cloudSetup?.apm.url;
const instructionSets = [];

if (!apmServerUrl) {
instructionSets.push(getApmServerInstructionSet(cloudSetup));
}

instructionSets.push(
getOnPremApmServerInstructionSet({ apmConfig, isFleetPluginEnabled })
);
instructionSets.push(getApmAgentInstructionSet(cloudSetup));

return {
Expand Down
124 changes: 2 additions & 122 deletions x-pack/plugins/apm/server/tutorial/envs/on_prem.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,7 @@ import {
createRackAgentInstructions,
createRailsAgentInstructions,
} from '../../../common/tutorial/instructions/apm_agent_instructions';
import {
createDownloadServerDeb,
createDownloadServerOsx,
createDownloadServerRpm,
createEditConfig,
createStartServerUnix,
createStartServerUnixSysv,
createWindowsServerInstructions,
} from '../../../common/tutorial/instructions/apm_server_instructions';
import { getOnPremApmServerInstructionSet } from './on_prem_apm_server_instruction_set';

export function onPremInstructions({
apmConfig,
Expand All @@ -40,121 +32,9 @@ export function onPremInstructions({
apmConfig: APMConfig;
isFleetPluginEnabled: boolean;
}): InstructionsSchema {
const EDIT_CONFIG = createEditConfig();
const START_SERVER_UNIX = createStartServerUnix();
const START_SERVER_UNIX_SYSV = createStartServerUnixSysv();

return {
instructionSets: [
{
title: i18n.translate('xpack.apm.tutorial.apmServer.title', {
defaultMessage: 'APM Server',
}),
callOut: {
title: i18n.translate('xpack.apm.tutorial.apmServer.callOut.title', {
defaultMessage: 'Important: Updating to 7.0 or higher',
}),
message: i18n.translate(
'xpack.apm.tutorial.apmServer.callOut.message',
{
defaultMessage: `Please make sure your APM Server is updated to 7.0 or higher. \
You can also migrate your 6.x data with the migration assistant found in Kibana's management section.`,
}
),
iconType: 'alert',
},
instructionVariants: [
{
id: INSTRUCTION_VARIANT.DEB,
instructions: [
createDownloadServerDeb(),
EDIT_CONFIG,
START_SERVER_UNIX_SYSV,
],
},
{
id: INSTRUCTION_VARIANT.RPM,
instructions: [
createDownloadServerRpm(),
EDIT_CONFIG,
START_SERVER_UNIX_SYSV,
],
},
{
id: INSTRUCTION_VARIANT.OSX,
instructions: [
createDownloadServerOsx(),
EDIT_CONFIG,
START_SERVER_UNIX,
],
},
{
id: INSTRUCTION_VARIANT.WINDOWS,
instructions: createWindowsServerInstructions(),
},
// hides fleet section when plugin is disabled
...(isFleetPluginEnabled
? [
{
id: INSTRUCTION_VARIANT.FLEET,
instructions: [
{
title: i18n.translate('xpack.apm.tutorial.fleet.title', {
defaultMessage: 'Fleet',
}),
customComponentName: 'TutorialFleetInstructions',
},
],
},
]
: []),
],
statusCheck: {
title: i18n.translate(
'xpack.apm.tutorial.apmServer.statusCheck.title',
{
defaultMessage: 'APM Server status',
}
),
text: i18n.translate(
'xpack.apm.tutorial.apmServer.statusCheck.text',
{
defaultMessage:
'Make sure APM Server is running before you start implementing the APM agents.',
}
),
btnLabel: i18n.translate(
'xpack.apm.tutorial.apmServer.statusCheck.btnLabel',
{
defaultMessage: 'Check APM Server status',
}
),
success: i18n.translate(
'xpack.apm.tutorial.apmServer.statusCheck.successMessage',
{
defaultMessage: 'You have correctly setup APM Server',
}
),
error: i18n.translate(
'xpack.apm.tutorial.apmServer.statusCheck.errorMessage',
{
defaultMessage:
'No APM Server detected. Please make sure it is running and you have updated to 7.0 or higher.',
}
),
esHitsCheck: {
index: apmConfig.indices.onboarding,
query: {
bool: {
filter: [
{ term: { 'processor.event': 'onboarding' } },
{ range: { 'observer.version_major': { gte: 7 } } },
],
},
},
},
},
},
getOnPremApmServerInstructionSet({ apmConfig, isFleetPluginEnabled }),
{
title: i18n.translate('xpack.apm.tutorial.apmAgents.title', {
defaultMessage: 'APM Agents',
Expand Down
Loading

0 comments on commit 38e0cb9

Please sign in to comment.