[Fleet] Bug fixes to Policies list under Integrations section (#86183)

* Fix table cell not having tooltips
* Show loading message while data is being retrieved
This commit is contained in:
Paul Tavares 2020-12-17 10:22:48 -05:00 committed by GitHub
parent d2a7c32025
commit f0234cbb9e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -13,7 +13,7 @@ import {
EuiTableFieldDataColumnType,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedRelative } from '@kbn/i18n/react';
import { FormattedRelative, FormattedMessage } from '@kbn/i18n/react';
import { useGetPackageInstallStatus } from '../../hooks';
import { InstallStatus } from '../../../../types';
import { useLink } from '../../../../hooks';
@ -37,6 +37,7 @@ const IntegrationDetailsLink = memo<{
<EuiLink
className="eui-textTruncate"
data-test-subj="integrationNameLink"
title={packagePolicy.name}
href={getHref('integration_policy_edit', {
packagePolicyId: packagePolicy.id,
})}
@ -90,7 +91,7 @@ export const PackagePoliciesPanel = ({ name, version }: PackagePoliciesPanelProp
const getPackageInstallStatus = useGetPackageInstallStatus();
const packageInstallStatus = getPackageInstallStatus(name);
const { pagination, pageSizeOptions, setPagination } = useUrlPagination();
const { data } = usePackagePoliciesWithAgentPolicy({
const { data, isLoading } = usePackagePoliciesWithAgentPolicy({
page: pagination.currentPage,
perPage: pagination.pageSize,
kuery: `${PACKAGE_POLICY_SAVED_OBJECT_TYPE}.package.name: ${name}`,
@ -123,6 +124,13 @@ export const PackagePoliciesPanel = ({ name, version }: PackagePoliciesPanelProp
defaultMessage: 'Description',
}),
truncateText: true,
render(description) {
return (
<span className="eui-textTruncate" title={description}>
{description}
</span>
);
},
},
{
field: 'packagePolicy.policy_id',
@ -172,7 +180,7 @@ export const PackagePoliciesPanel = ({ name, version }: PackagePoliciesPanelProp
truncateText: true,
render(updatedAt: PackagePolicyAndAgentPolicy['packagePolicy']['updated_at']) {
return (
<span className="eui-textTruncate">
<span className="eui-textTruncate" title={updatedAt}>
<FormattedRelative value={updatedAt} />
</span>
);
@ -182,6 +190,24 @@ export const PackagePoliciesPanel = ({ name, version }: PackagePoliciesPanelProp
[]
);
const noItemsMessage = useMemo(() => {
return isLoading ? (
<FormattedMessage
id="xpack.fleet.epm.packageDetails.integrationList.loadingPoliciesMessage"
defaultMessage="Loading integration policies…"
/>
) : undefined;
}, [isLoading]);
const tablePagination = useMemo(() => {
return {
pageIndex: pagination.currentPage - 1,
pageSize: pagination.pageSize,
totalItemCount: data?.total ?? 0,
pageSizeOptions,
};
}, [data?.total, pageSizeOptions, pagination.currentPage, pagination.pageSize]);
// if they arrive at this page and the package is not installed, send them to overview
// this happens if they arrive with a direct url or they uninstall while on this tab
if (packageInstallStatus.status !== InstallStatus.installed) {
@ -192,15 +218,11 @@ export const PackagePoliciesPanel = ({ name, version }: PackagePoliciesPanelProp
<EuiBasicTable
items={data?.items || []}
columns={columns}
loading={false}
loading={isLoading}
data-test-subj="integrationPolicyTable"
pagination={{
pageIndex: pagination.currentPage - 1,
pageSize: pagination.pageSize,
totalItemCount: data?.total ?? 0,
pageSizeOptions,
}}
pagination={tablePagination}
onChange={handleTableOnChange}
noItemsMessage={noItemsMessage}
/>
);
};