[Fleet] Add package signatures documentation link (#137213)

* add package signatures doc link

* add link to single package view

* add link to installed packages callout

* add link to confirm modal

* fix types

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Mark Hopkin 2022-07-26 21:41:41 +01:00 committed by GitHub
parent 0fbfa50075
commit 30121495f4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 109 additions and 53 deletions

View file

@ -620,6 +620,7 @@ export const getDocLinks = ({ kibanaBranch }: GetDocLinkOptions): DocLinks => {
learnMoreBlog: `${ELASTIC_WEBSITE_URL}blog/elastic-agent-and-fleet-make-it-easier-to-integrate-your-systems-with-elastic`,
apiKeysLearnMore: `${KIBANA_DOCS}api-keys.html`,
onPremRegistry: `${FLEET_DOCS}air-gapped.html`,
packageSignatures: `${FLEET_DOCS}package-signatures.html`,
secureLogstash: `${FLEET_DOCS}secure-logstash-connections.html`,
agentPolicy: `${FLEET_DOCS}agent-policy.html`,
},

View file

@ -372,6 +372,7 @@ export interface DocLinks {
datastreamsNamingScheme: string;
installElasticAgent: string;
installElasticAgentStandalone: string;
packageSignatures: string;
upgradeElasticAgent: string;
learnMoreBlog: string;
apiKeysLearnMore: string;

View file

@ -5,7 +5,7 @@
* 2.0.
*/
import type { OverlayStart } from '@kbn/core/public';
import type { DocLinksStart, OverlayStart } from '@kbn/core/public';
import { toMountPoint } from '@kbn/kibana-react-plugin/public';
import React from 'react';
@ -16,9 +16,11 @@ import { ConfirmForceInstallModal } from '../components';
const confirmForceInstall = ({
pkg,
overlays,
docLinks,
}: {
pkg: { name: string; version: string };
overlays: OverlayStart;
docLinks: DocLinksStart;
}): Promise<boolean> =>
new Promise((resolve) => {
const session = overlays.openModal(
@ -33,13 +35,15 @@ const confirmForceInstall = ({
session.close();
resolve(false);
}}
docLinks={docLinks}
/>
)
);
});
export const useConfirmForceInstall = () => {
const { overlays } = useStartServices();
const { overlays, docLinks } = useStartServices();
return (pkg: { name: string; version: string }) => confirmForceInstall({ pkg, overlays });
return (pkg: { name: string; version: string }) =>
confirmForceInstall({ pkg, overlays, docLinks });
};

View file

@ -6,11 +6,11 @@
*/
import React, { memo, useMemo } from 'react';
import styled from 'styled-components';
import { EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
import { EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiLink } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';
import { useFleetStatus } from '../../../../../../../hooks';
import { useFleetStatus, useStartServices } from '../../../../../../../hooks';
import { isPackageUnverified } from '../../../../../../../services';
import type { PackageInfo, RegistryPolicyTemplate } from '../../../../../types';
@ -30,26 +30,39 @@ const LeftColumn = styled(EuiFlexItem)`
}
`;
const UnverifiedCallout = () => (
<>
<EuiCallOut
title={i18n.translate('xpack.fleet.epm.verificationWarningCalloutTitle', {
defaultMessage: 'Integration not verified',
})}
iconType="alert"
color="warning"
>
<p>
<FormattedMessage
id="xpack.fleet.epm.verificationWarningCalloutIntroText"
defaultMessage="This integration contains an unsigned package of unknown authenticity."
// TODO: add documentation link
/>
</p>
</EuiCallOut>
<EuiSpacer size="l" />
</>
);
const UnverifiedCallout: React.FC = () => {
const { docLinks } = useStartServices();
return (
<>
<EuiCallOut
title={i18n.translate('xpack.fleet.epm.verificationWarningCalloutTitle', {
defaultMessage: 'Integration not verified',
})}
iconType="alert"
color="warning"
>
<p>
<FormattedMessage
id="xpack.fleet.epm.verificationWarningCalloutIntroText"
defaultMessage="This integration contains an unsigned package of unknown authenticity. Learn more about {learnMoreLink}."
values={{
learnMoreLink: (
<EuiLink target="_blank" external href={docLinks.links.fleet.packageSignatures}>
<FormattedMessage
id="xpack.fleet.epm.verificationWarningCalloutLearnMoreLink"
defaultMessage="package signatures"
/>
</EuiLink>
),
}}
/>
</p>
</EuiCallOut>
<EuiSpacer size="l" />
</>
);
};
export const OverviewPage: React.FC<Props> = memo(({ packageInfo, integrationInfo }) => {
const screenshots = useMemo(

View file

@ -57,23 +57,36 @@ const InstalledIntegrationsInfoCallout = () => (
</EuiCallOut>
);
const VerificationWarningCallout = () => (
<EuiCallOut
title={i18n.translate('xpack.fleet.epmList.verificationWarningCalloutTitle', {
defaultMessage: 'Integrations not verified',
})}
iconType="alert"
color="warning"
>
<p>
<FormattedMessage
id="xpack.fleet.epmList.verificationWarningCalloutIntroText"
defaultMessage="One or more of the installed integrations contain an unsigned package of unknown authenticity."
// TODO: add documentation link
/>
</p>
</EuiCallOut>
);
const VerificationWarningCallout: React.FC = () => {
const { docLinks } = useStartServices();
return (
<EuiCallOut
title={i18n.translate('xpack.fleet.epmList.verificationWarningCalloutTitle', {
defaultMessage: 'Integrations not verified',
})}
iconType="alert"
color="warning"
>
<p>
<FormattedMessage
id="xpack.fleet.epmList.verificationWarningCalloutIntroText"
defaultMessage="One or more of the installed integrations contain an unsigned package of unknown authenticity. Learn more about {learnMoreLink}."
values={{
learnMoreLink: (
<EuiLink target="_blank" external href={docLinks.links.fleet.packageSignatures}>
<FormattedMessage
id="xpack.fleet.ConfirmForceInstallModal.learnMoreLink"
defaultMessage="package signatures"
/>
</EuiLink>
),
}}
/>
</p>
</EuiCallOut>
);
};
// TODO: clintandrewhall - this component is hard to test due to the hooks, particularly those that use `http`
// or `location` to load data. Ideally, we'll split this into "connected" and "pure" components.

View file

@ -4,6 +4,7 @@
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import type { DocLinksStart } from '@kbn/core/public';
import React from 'react';
import { ConfirmForceInstallModal } from './confirm_force_install_modal';
@ -44,12 +45,24 @@ const argTypes = {
},
};
export const UnverifiedIntegrationModal = ({ packageName, packageVersion }: Args) => (
<ConfirmForceInstallModal
onCancel={() => {}}
onConfirm={() => {}}
pkg={{ name: packageName, version: packageVersion }}
/>
);
export const UnverifiedIntegrationModal = ({ packageName, packageVersion }: Args) => {
const mockDocLinks: DocLinksStart = {
links: {
// @ts-ignore only defining what we need
fleet: {
packageSignatures: 'elastic.co',
},
},
};
return (
<ConfirmForceInstallModal
onCancel={() => {}}
onConfirm={() => {}}
pkg={{ name: packageName, version: packageVersion }}
docLinks={mockDocLinks}
/>
);
};
UnverifiedIntegrationModal.args = args;
UnverifiedIntegrationModal.argTypes = argTypes;

View file

@ -5,7 +5,8 @@
* 2.0.
*/
import { EuiConfirmModal, EuiCallOut } from '@elastic/eui';
import { EuiConfirmModal, EuiCallOut, EuiLink } from '@elastic/eui';
import type { DocLinksStart } from '@kbn/core/public';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';
@ -17,7 +18,8 @@ export const ConfirmForceInstallModal: React.FC<{
onCancel: () => void;
onConfirm: () => void;
pkg?: Pick<PackageInfo, 'name' | 'version'>;
}> = ({ onCancel, onConfirm, pkg }) => {
docLinks: DocLinksStart;
}> = ({ onCancel, onConfirm, pkg, docLinks }) => {
const title =
pkg && pkg.name && pkg.version
? i18n.translate('xpack.fleet.ConfirmForceInstallModal.calloutTitleWithPkg', {
@ -30,7 +32,6 @@ export const ConfirmForceInstallModal: React.FC<{
: i18n.translate('xpack.fleet.ConfirmForceInstallModal.calloutTitleNoPkg', {
defaultMessage: 'The integration has failed verification',
});
// TODO: add link to docs
return (
<EuiConfirmModal
title={
@ -64,7 +65,17 @@ export const ConfirmForceInstallModal: React.FC<{
children={
<FormattedMessage
id="xpack.fleet.ConfirmForceInstallModal.calloutBody"
defaultMessage="This integration contains an unsigned package of unknown authenticity and could contain malicious files. "
defaultMessage="This integration contains an unsigned package of unknown authenticity and could contain malicious files. Learn more about {learnMoreLink}."
values={{
learnMoreLink: (
<EuiLink target="_blank" external href={docLinks.links.fleet.packageSignatures}>
<FormattedMessage
id="xpack.fleet.ConfirmForceInstallModal.learnMoreLink"
defaultMessage="package signatures"
/>
</EuiLink>
),
}}
/>
}
/>