[Fleet] Integration Policies List view

x-pack/plugins/fleet/public/applications/fleet/components/index.ts

@@ -11,3 +11,4 @@ export { PackageIcon } from './package_icon';
 export { ContextMenuActions } from './context_menu_actions';
 export { SearchBar } from './search_bar';
 export * from './settings_flyout';
+export * from './link_and_revision';

x-pack/plugins/fleet/public/applications/fleet/components/link_and_revision.tsx

@@ -0,0 +1,45 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiText } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import React, { CSSProperties, memo } from 'react';
+import { EuiLinkProps } from '@elastic/eui/src/components/link/link';
+
+const MIN_WIDTH: CSSProperties = { minWidth: 0 };
+const NO_WRAP_WHITE_SPACE: CSSProperties = { whiteSpace: 'nowrap' };
+
+export type LinkAndRevisionProps = EuiLinkProps & {
+ revision?: string | number;
+};
+
+/**
+ * Components shows a link for a given value along with a revision number to its right. The display
+ * value is truncated if it is longer than the width of where it is displayed, while the revision
+ * always remain visible
+ */
+export const LinkAndRevision = memo<LinkAndRevisionProps>(
+ ({ revision, className, ...euiLinkProps }) => {
+ return (
+ <EuiFlexGroup gutterSize="s" alignItems="baseline" style={MIN_WIDTH} responsive={false}>
+ <EuiFlexItem grow={false} className="eui-textTruncate">
+ <EuiLink className={`eui-textTruncate ${className ?? ''}`} {...euiLinkProps} />
+ </EuiFlexItem>
+ {revision && (
+ <EuiFlexItem grow={true}>
+ <EuiText color="subdued" size="xs" style={NO_WRAP_WHITE_SPACE}>
+ <FormattedMessage
+ id="xpack.fleet.policyNameLink.revisionNumber"
+ defaultMessage="rev. {revNumber}"
+ values={{ revNumber: revision }}
+ />
+ </EuiText>
+ </EuiFlexItem>
+ )}
+ </EuiFlexGroup>
+ );
+ }
+);

x-pack/plugins/fleet/public/applications/fleet/hooks/index.ts

@@ -14,7 +14,8 @@ export { useBreadcrumbs } from './use_breadcrumbs';
 export { useLink } from './use_link';
 export { useKibanaLink } from './use_kibana_link';
 export { usePackageIconType, UsePackageIconType } from './use_package_icon_type';
-export { usePagination, Pagination } from './use_pagination';
+export { usePagination, Pagination, PAGE_SIZE_OPTIONS } from './use_pagination';
+export { useUrlPagination } from './use_url_pagination';
 export { useSorting } from './use_sorting';
 export { useDebounce } from './use_debounce';
 export * from './use_request';

x-pack/plugins/fleet/public/applications/fleet/hooks/use_pagination.tsx

@@ -4,22 +4,27 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
+
+export const PAGE_SIZE_OPTIONS: readonly number[] = [5, 20, 50];
 
 export interface Pagination {
  currentPage: number;
  pageSize: number;
 }
 
-export function usePagination() {
- const [pagination, setPagination] = useState<Pagination>({
+export function usePagination(
+ pageInfo: Pagination = {
  currentPage: 1,
  pageSize: 20,
- });
+ }
+) {
+ const [pagination, setPagination] = useState<Pagination>(pageInfo);
+ const pageSizeOptions = useMemo(() => [...PAGE_SIZE_OPTIONS], []);
 
  return {
  pagination,
  setPagination,
- pageSizeOptions: [5, 20, 50],
+ pageSizeOptions,
  };
 }

x-pack/plugins/fleet/public/applications/fleet/hooks/use_url_pagination.ts

@@ -0,0 +1,94 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { useCallback, useEffect, useMemo } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import { useUrlParams } from './use_url_params';
+import { PAGE_SIZE_OPTIONS, Pagination, usePagination } from './use_pagination';
+
+type SetUrlPagination = (pagination: Pagination) => void;
+interface UrlPagination {
+ pagination: Pagination;
+ setPagination: SetUrlPagination;
+ pageSizeOptions: number[];
+}
+
+type UrlPaginationParams = Partial<Pagination>;
+
+/**
+ * Uses URL params for pagination and also persists those to the URL as they are updated
+ */
+export const useUrlPagination = (): UrlPagination => {
+ const location = useLocation();
+ const history = useHistory();
+ const { urlParams, toUrlParams } = useUrlParams();
+ const urlPaginationParams = useMemo(() => {
+ return paginationFromUrlParams(urlParams);
+ }, [urlParams]);
+ const { pagination, pageSizeOptions, setPagination } = usePagination(urlPaginationParams);
+
+ const setUrlPagination = useCallback<SetUrlPagination>(
+ ({ pageSize, currentPage }) => {
+ history.push({
+ ...location,
+ search: toUrlParams({
+ ...urlParams,
+ currentPage,
+ pageSize,
+ }),
+ });
+ },
+ [history, location, toUrlParams, urlParams]
+ );
+
+ useEffect(() => {
+ setPagination((prevState) => {
+ return {
+ ...prevState,
+ ...paginationFromUrlParams(urlParams),
+ };
+ });
+ }, [setPagination, urlParams]);
+
+ return {
+ pagination,
+ setPagination: setUrlPagination,
+ pageSizeOptions,
+ };
+};
+
+const paginationFromUrlParams = (urlParams: UrlPaginationParams): Pagination => {
+ const pagination: Pagination = {
+ pageSize: 20,
+ currentPage: 1,
+ };
+
+ // Search params can appear multiple times in the URL, in which case the value for them,
+ // once parsed, would be an array. In these case, we take the last value defined
+ pagination.currentPage = Number(
+ (Array.isArray(urlParams.currentPage)
+ ? urlParams.currentPage[urlParams.currentPage.length - 1]
+ : urlParams.currentPage) ?? pagination.currentPage
+ );
+ pagination.pageSize =
+ Number(
+ (Array.isArray(urlParams.pageSize)
+ ? urlParams.pageSize[urlParams.pageSize.length - 1]
+ : urlParams.pageSize) ?? pagination.pageSize
+ ) ?? pagination.pageSize;
+
+ // If Current Page is not a valid positive integer, set it to 1
+ if (!Number.isFinite(pagination.currentPage) || pagination.currentPage < 1) {
+ pagination.currentPage = 1;
+ }
+
+ // if pageSize is not one of the expected page sizes, reset it to 20 (default)
+ if (!PAGE_SIZE_OPTIONS.includes(pagination.pageSize)) {
+ pagination.pageSize = 20;
+ }
+
+ return pagination;
+};

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/step_select_agent_policy.tsx

@@ -246,7 +246,7 @@ export const StepSelectAgentPolicy: React.FunctionComponent<{
  id="xpack.fleet.createPackagePolicy.StepSelectPolicy.agentPolicyAgentsDescriptionText"
  defaultMessage="{count, plural, one {# agent} other {# agents}} are enrolled with the selected agent policy."
  values={{
- count: agentPoliciesById[selectedPolicyId].agents || 0,
+ count: agentPoliciesById[selectedPolicyId]?.agents ?? 0,
  }}
  />
  ) : null
@@ -282,7 +282,7 @@ export const StepSelectAgentPolicy: React.FunctionComponent<{
  id="xpack.fleet.createPackagePolicy.StepSelectPolicy.agentPolicyAgentsCountText"
  defaultMessage="{count, plural, one {# agent} other {# agents}} enrolled"
  values={{
- count: agentPoliciesById[option.value!].agents || 0,
+ count: agentPoliciesById[option.value!]?.agents ?? 0,
  }}
  />
  </EuiTextColor>

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/list_page/index.tsx

@@ -34,7 +34,7 @@ import {
  useUrlParams,
  useBreadcrumbs,
 } from '../../../hooks';
-import { SearchBar } from '../../../components';
+import { LinkAndRevision, SearchBar } from '../../../components';
 import { LinkedAgentCount, AgentPolicyActionMenu } from '../components';
 import { CreateAgentPolicyFlyout } from './components';
 
@@ -129,26 +129,13 @@ export const AgentPolicyListPage: React.FunctionComponent<{}> = () => {
  }),
  width: '20%',
  render: (name: string, agentPolicy: AgentPolicy) => (
- <EuiFlexGroup gutterSize="s" alignItems="baseline" style={{ minWidth: 0 }}>
- <EuiFlexItem grow={false} className="eui-textTruncate">
- <EuiLink
- className="eui-textTruncate"
- href={getHref('policy_details', { policyId: agentPolicy.id })}
- title={name || agentPolicy.id}
- >
- {name || agentPolicy.id}
- </EuiLink>
- </EuiFlexItem>
- <EuiFlexItem grow={true}>
- <EuiText color="subdued" size="xs" style={{ whiteSpace: 'nowrap' }}>
- <FormattedMessage
- id="xpack.fleet.agentPolicyList.revisionNumber"
- defaultMessage="rev. {revNumber}"
- values={{ revNumber: agentPolicy.revision }}
- />
- </EuiText>
- </EuiFlexItem>
- </EuiFlexGroup>
+ <LinkAndRevision
+ href={getHref('policy_details', { policyId: agentPolicy.id })}
+ title={name || agentPolicy.id}
+ revision={agentPolicy.revision}
+ >
+ {name || agentPolicy.id}
+ </LinkAndRevision>
  ),
  },
  {

x-pack/plugins/fleet/public/applications/fleet/sections/epm/screens/detail/content.tsx

@@ -17,7 +17,7 @@ import { SettingsPanel } from './settings_panel';
 
 type ContentProps = PackageInfo & Pick<DetailParams, 'panel'>;
 
-const SideNavColumn = styled(LeftColumn)`
+const LeftSideColumn = styled(LeftColumn)`
  /* 🤢🤷 https://www.styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity */
  &&& {
  margin-top: 77px;
@@ -30,15 +30,18 @@ const ContentFlexGroup = styled(EuiFlexGroup)`
 `;
 
 export function Content(props: ContentProps) {
+ const showRightColumn = props.panel !== 'policies';
  return (
  <ContentFlexGroup>
- <SideNavColumn />
- <CenterColumn>
+ <LeftSideColumn {...(!showRightColumn ? { columnGrow: 1 } : undefined)} />
+ <CenterColumn {...(!showRightColumn ? { columnGrow: 6 } : undefined)}>
  <ContentPanel {...props} />
  </CenterColumn>
- <RightColumn>
- <RightColumnContent {...props} />
- </RightColumn>
+ {showRightColumn && (
+ <RightColumn>
+ <RightColumnContent {...props} />
+ </RightColumn>
+ )}
  </ContentFlexGroup>
  );
 }

x-pack/plugins/fleet/public/applications/fleet/sections/epm/screens/detail/index.tsx

@@ -247,8 +247,7 @@ export function Detail() {
  return (entries(PanelDisplayNames)
  .filter(([panelId]) => {
  return (
- panelId !== 'policies' ||
- (packageInfoData?.response.status === InstallStatus.installed && false) // Remove `false` when ready to implement policies tab
+ panelId !== 'policies' || packageInfoData?.response.status === InstallStatus.installed
  );
  })
  .map(([panelId, display]) => {

x-pack/plugins/fleet/public/applications/fleet/sections/epm/screens/detail/layout.tsx

@@ -6,31 +6,45 @@
 
 import { EuiFlexItem } from '@elastic/eui';
 import React, { FunctionComponent, ReactNode } from 'react';
+import { FlexItemGrowSize } from '@elastic/eui/src/components/flex/flex_item';
 
 interface ColumnProps {
  children?: ReactNode;
  className?: string;
+ columnGrow?: FlexItemGrowSize;
 }
 
-export const LeftColumn: FunctionComponent<ColumnProps> = ({ children, ...rest }) => {
+export const LeftColumn: FunctionComponent<ColumnProps> = ({
+ columnGrow = 2,
+ children,
+ ...rest
+}) => {
  return (
- <EuiFlexItem grow={2} {...rest}>
+ <EuiFlexItem grow={columnGrow} {...rest}>
  {children}
  </EuiFlexItem>
  );
 };
 
-export const CenterColumn: FunctionComponent<ColumnProps> = ({ children, ...rest }) => {
+export const CenterColumn: FunctionComponent<ColumnProps> = ({
+ columnGrow = 9,
+ children,
+ ...rest
+}) => {
  return (
- <EuiFlexItem grow={9} {...rest}>
+ <EuiFlexItem grow={columnGrow} {...rest}>
  {children}
  </EuiFlexItem>
  );
 };
 
-export const RightColumn: FunctionComponent<ColumnProps> = ({ children, ...rest }) => {
+export const RightColumn: FunctionComponent<ColumnProps> = ({
+ columnGrow = 3,
+ children,
+ ...rest
+}) => {
  return (
- <EuiFlexItem grow={3} {...rest}>
+ <EuiFlexItem grow={columnGrow} {...rest}>
  {children}
  </EuiFlexItem>
  );