Skip to content

Commit

Permalink
[Fleet] Revamp integration detail page (#90887)
Browse files Browse the repository at this point in the history
* Extract integration detail page changes from POC

* Remove unneccessary link wrappers

* Remove unused import

* Fix method name

* Fix linting
  • Loading branch information
jen-huang authored Feb 10, 2021
1 parent f3debcd commit c2b41c4
Show file tree
Hide file tree
Showing 40 changed files with 900 additions and 758 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export interface HeaderProps {
leftColumn?: JSX.Element;
rightColumn?: JSX.Element;
rightColumnGrow?: EuiFlexItemProps['grow'];
tabs?: EuiTabProps[];
tabs?: Array<Omit<EuiTabProps, 'name'> & { name?: JSX.Element | string }>;
tabsClassName?: string;
'data-test-subj'?: string;
}
Expand Down Expand Up @@ -73,7 +73,7 @@ export const Header: React.FC<HeaderProps> = ({
<EuiSpacer size="s" />
<Tabs className={tabsClassName}>
{tabs.map((props) => (
<EuiTab {...props} key={props.id}>
<EuiTab {...(props as EuiTabProps)} key={props.id}>
{props.name}
</EuiTab>
))}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const TutorialModuleNotice: TutorialModuleNoticeComponent = memo(({ moduleName }
),
availableAsIntegrationLink: (
<EuiLink
href={getHref('integration_details', {
href={getHref('integration_details_overview', {
pkgkey: pkgKeyFromPackageInfo(pkgInfo),
})}
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,10 @@ export type StaticPage =
| 'data_streams';

export type DynamicPage =
| 'integration_details'
| 'integration_details_overview'
| 'integration_details_policies'
| 'integration_details_settings'
| 'integration_details_custom'
| 'integration_policy_edit'
| 'policy_details'
| 'add_integration_from_policy'
Expand All @@ -43,6 +46,10 @@ export const PAGE_ROUTING_PATHS = {
integrations_all: '/integrations',
integrations_installed: '/integrations/installed',
integration_details: '/integrations/detail/:pkgkey/:panel?',
integration_details_overview: '/integrations/detail/:pkgkey/overview',
integration_details_policies: '/integrations/detail/:pkgkey/policies',
integration_details_settings: '/integrations/detail/:pkgkey/settings',
integration_details_custom: '/integrations/detail/:pkgkey/custom',
integration_policy_edit: '/integrations/edit-integration/:packagePolicyId',
policies: '/policies',
policies_list: '/policies',
Expand Down Expand Up @@ -70,8 +77,10 @@ export const pagePathGetters: {
integrations: () => '/integrations',
integrations_all: () => '/integrations',
integrations_installed: () => '/integrations/installed',
integration_details: ({ pkgkey, panel }) =>
`/integrations/detail/${pkgkey}${panel ? `/${panel}` : ''}`,
integration_details_overview: ({ pkgkey }) => `/integrations/detail/${pkgkey}/overview`,
integration_details_policies: ({ pkgkey }) => `/integrations/detail/${pkgkey}/policies`,
integration_details_settings: ({ pkgkey }) => `/integrations/detail/${pkgkey}/settings`,
integration_details_custom: ({ pkgkey }) => `/integrations/detail/${pkgkey}/custom`,
integration_policy_edit: ({ packagePolicyId }) =>
`/integrations/edit-integration/${packagePolicyId}`,
policies: () => '/policies',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const BASE_BREADCRUMB: ChromeBreadcrumb = {
};

const breadcrumbGetters: {
[key in Page]: (values: DynamicPagePathValues) => ChromeBreadcrumb[];
[key in Page]?: (values: DynamicPagePathValues) => ChromeBreadcrumb[];
} = {
base: () => [BASE_BREADCRUMB],
overview: () => [
Expand Down Expand Up @@ -65,7 +65,7 @@ const breadcrumbGetters: {
}),
},
],
integration_details: ({ pkgTitle }) => [
integration_details_overview: ({ pkgTitle }) => [
BASE_BREADCRUMB,
{
href: pagePathGetters.integrations(),
Expand All @@ -84,7 +84,7 @@ const breadcrumbGetters: {
}),
},
{
href: pagePathGetters.integration_details({ pkgkey, panel: 'policies' }),
href: pagePathGetters.integration_details_policies({ pkgkey }),
text: pkgTitle,
},
{ text: policyName },
Expand Down Expand Up @@ -142,7 +142,7 @@ const breadcrumbGetters: {
}),
},
{
href: pagePathGetters.integration_details({ pkgkey }),
href: pagePathGetters.integration_details_overview({ pkgkey }),
text: pkgTitle,
},
{
Expand Down Expand Up @@ -221,10 +221,11 @@ const breadcrumbGetters: {

export function useBreadcrumbs(page: Page, values: DynamicPagePathValues = {}) {
const { chrome, http } = useStartServices();
const breadcrumbs: ChromeBreadcrumb[] = breadcrumbGetters[page](values).map((breadcrumb) => ({
...breadcrumb,
href: breadcrumb.href ? http.basePath.prepend(`${BASE_PATH}#${breadcrumb.href}`) : undefined,
}));
const breadcrumbs: ChromeBreadcrumb[] =
breadcrumbGetters[page]?.(values).map((breadcrumb) => ({
...breadcrumb,
href: breadcrumb.href ? http.basePath.prepend(`${BASE_PATH}#${breadcrumb.href}`) : undefined,
})) || [];
const docTitle: string[] = [...breadcrumbs]
.reverse()
.map((breadcrumb) => breadcrumb.text as string);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,7 @@ export const CreatePackagePolicyPage: React.FunctionComponent = () => {
}
return from === 'policy'
? getHref('policy_details', { policyId: agentPolicyId || policyId })
: getHref('integration_details', { pkgkey });
: getHref('integration_details_overview', { pkgkey });
}, [agentPolicyId, policyId, from, getHref, pkgkey, routeState]);

const cancelClickHandler: ReactEventHandler = useCallback(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -246,9 +246,8 @@ export const EditPackagePolicyForm = memo<{
const cancelUrl = useMemo((): string => {
if (packageInfo && policyId) {
return from === 'package-edit'
? getHref('integration_details', {
? getHref('integration_details_policies', {
pkgkey: pkgKeyFromPackageInfo(packageInfo!),
panel: 'policies',
})
: getHref('policy_details', { policyId });
}
Expand All @@ -258,9 +257,8 @@ export const EditPackagePolicyForm = memo<{
const successRedirectPath = useMemo(() => {
if (packageInfo && policyId) {
return from === 'package-edit'
? getPath('integration_details', {
? getPath('integration_details_policies', {
pkgkey: pkgKeyFromPackageInfo(packageInfo!),
panel: 'policies',
})
: getPath('policy_details', { policyId });
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export function PackageCard({
title={title || ''}
description={description}
icon={<PackageIcon icons={icons} packageName={name} version={version} size="xl" />}
href={getHref('integration_details', { pkgkey: `${name}-${urlVersion}` })}
href={getHref('integration_details_overview', { pkgkey: `${name}-${urlVersion}` })}
betaBadgeLabel={release && release !== 'ga' ? RELEASE_BADGE_LABEL[release] : undefined}
betaBadgeTooltipContent={
release && release !== 'ga' ? RELEASE_BADGE_DESCRIPTION[release] : undefined
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -90,9 +90,8 @@ function usePackageInstall({ notifications }: { notifications: NotificationsStar
} else {
setPackageInstallStatus({ name, status: InstallStatus.installed, version });
if (fromUpdate) {
const settingsPath = getPath('integration_details', {
const settingsPath = getPath('integration_details_settings', {
pkgkey: `${name}-${version}`,
panel: 'settings',
});
history.push(settingsPath);
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
/*
* 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 React from 'react';
import styled from 'styled-components';
import { EuiIcon, EuiPanel } from '@elastic/eui';
import { usePackageIconType, UsePackageIconType } from '../../../../../hooks';
import { Loading } from '../../../../../components';

const PanelWrapper = styled.div`
// NOTE: changes to the width here will impact navigation tabs page layout under integration package details
width: ${(props) =>
parseFloat(props.theme.eui.euiSize) * 6 + parseFloat(props.theme.eui.euiSizeXL) * 2}px;
height: 1px;
z-index: 1;
`;

const Panel = styled(EuiPanel)`
padding: ${(props) => props.theme.eui.spacerSizes.xl};
margin-bottom: -100%;
svg,
img {
height: ${(props) => parseFloat(props.theme.eui.euiSize) * 6}px;
width: ${(props) => parseFloat(props.theme.eui.euiSize) * 6}px;
}
.euiFlexItem {
height: ${(props) => parseFloat(props.theme.eui.euiSize) * 6}px;
justify-content: center;
}
`;

export function IconPanel({
packageName,
version,
icons,
}: Pick<UsePackageIconType, 'packageName' | 'version' | 'icons'>) {
const iconType = usePackageIconType({ packageName, version, icons });

return (
<PanelWrapper>
<Panel>
<EuiIcon type={iconType} size="original" />
</Panel>
</PanelWrapper>
);
}

export function LoadingIconPanel() {
return (
<PanelWrapper>
<Panel>
<Loading />
</Panel>
</PanelWrapper>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
/*
* 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 { UpdateIcon } from './update_icon';
export { IntegrationAgentPolicyCount } from './integration_agent_policy_count';
export { IconPanel, LoadingIconPanel } from './icon_panel';
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
*/

import React, { memo } from 'react';
import { useGetPackageStats } from '../../../../hooks';
import { useGetPackageStats } from '../../../../../hooks';

/**
* Displays a count of Agent Policies that are using the given integration
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
/*
* 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 React from 'react';
import { EuiIconTip, EuiIconProps } from '@elastic/eui';
import { i18n } from '@kbn/i18n';

export const UpdateIcon = ({ size = 'm' }: { size?: EuiIconProps['size'] }) => (
<EuiIconTip
aria-label={i18n.translate('xpack.fleet.epm.updateAvailableTooltip', {
defaultMessage: 'Update available',
})}
size={size}
type="alert"
color="warning"
content={i18n.translate('xpack.fleet.epm.updateAvailableTooltip', {
defaultMessage: 'Update available',
})}
/>
);

This file was deleted.

Loading

0 comments on commit c2b41c4

Please sign in to comment.