-
Notifications
You must be signed in to change notification settings - Fork 8.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* very wip * added new assets screen * added routes to new assets view on the package details view * Finished styling the assets page layout, need to work on adding links * rather use EuiHorizontalRule * only show the assets tab if installed * Added hacky version of linking to assets. * added comment about deprecation of current linking functionality * added an initial version of the success toast with a link to the agent flyout * First iteration of end-to-end UX working. Need to add a lot of tests! * fixed navigation bug and added a comment * added a lot more padding to bottom of form * restructured code for clarity, updated deprecation comments and moved relevant code closer together * added a longer form comment about the origin policyId * added logic for handling load error * refactor assets accordions out of assets page component * slightly larger text in badge * added some basic jest test for view data step in enrollment flyout * adjusted sizing of numbers in badges again, EuiText does not know about size="l" * updated size limits for fleet * updated styling and layout of assets accordion based on original designs * remove unused EuiTitle Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Jean-Louis Leysens <jloleysens@gmail.com>
- Loading branch information
1 parent
b911f5d
commit ba95a28
Showing
21 changed files
with
676 additions
and
125 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
138 changes: 138 additions & 0 deletions
138
...gins/fleet/public/applications/integrations/sections/epm/screens/detail/assets/assets.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,138 @@ | ||
| /* | ||
| * 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, { useEffect, useState } from 'react'; | ||
| import { Redirect } from 'react-router-dom'; | ||
| import { FormattedMessage } from '@kbn/i18n/react'; | ||
| import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiSpacer } from '@elastic/eui'; | ||
|
|
||
| import { Loading, Error } from '../../../../../components'; | ||
|
|
||
| import type { PackageInfo } from '../../../../../types'; | ||
| import { InstallStatus } from '../../../../../types'; | ||
|
|
||
| import { useGetPackageInstallStatus, useLink, useStartServices } from '../../../../../hooks'; | ||
|
|
||
| import type { AssetSavedObject } from './types'; | ||
| import { allowedAssetTypes } from './constants'; | ||
| import { AssetsAccordion } from './assets_accordion'; | ||
|
|
||
| interface AssetsPanelProps { | ||
| packageInfo: PackageInfo; | ||
| } | ||
|
|
||
| export const AssetsPage = ({ packageInfo }: AssetsPanelProps) => { | ||
| const { name, version } = packageInfo; | ||
| const { | ||
| savedObjects: { client: savedObjectsClient }, | ||
| } = useStartServices(); | ||
|
|
||
| const { getPath } = useLink(); | ||
| const getPackageInstallStatus = useGetPackageInstallStatus(); | ||
| const packageInstallStatus = getPackageInstallStatus(packageInfo.name); | ||
|
|
||
| const [assetSavedObjects, setAssetsSavedObjects] = useState<undefined | AssetSavedObject[]>(); | ||
| const [fetchError, setFetchError] = useState<undefined | Error>(); | ||
| const [isLoading, setIsLoading] = useState<boolean>(true); | ||
|
|
||
| useEffect(() => { | ||
| const fetchAssetSavedObjects = async () => { | ||
| if ('savedObject' in packageInfo) { | ||
| const { | ||
| savedObject: { attributes: packageAttributes }, | ||
| } = packageInfo; | ||
|
|
||
| if ( | ||
| !packageAttributes.installed_kibana || | ||
| packageAttributes.installed_kibana.length === 0 | ||
| ) { | ||
| setIsLoading(false); | ||
| return; | ||
| } | ||
|
|
||
| try { | ||
| const objectsToGet = packageAttributes.installed_kibana.map(({ id, type }) => ({ | ||
| id, | ||
| type, | ||
| })); | ||
| const { savedObjects } = await savedObjectsClient.bulkGet(objectsToGet); | ||
| setAssetsSavedObjects(savedObjects as AssetSavedObject[]); | ||
| } catch (e) { | ||
| setFetchError(e); | ||
| } finally { | ||
| setIsLoading(false); | ||
| } | ||
| } else { | ||
| setIsLoading(false); | ||
| } | ||
| }; | ||
| fetchAssetSavedObjects(); | ||
| }, [savedObjectsClient, packageInfo]); | ||
|
|
||
| // 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) { | ||
| return ( | ||
| <Redirect | ||
| to={getPath('integration_details_overview', { | ||
| pkgkey: `${name}-${version}`, | ||
| })} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| let content: JSX.Element | Array<JSX.Element | null>; | ||
|
|
||
| if (isLoading) { | ||
| content = <Loading />; | ||
| } else if (fetchError) { | ||
| content = ( | ||
| <Error | ||
| title={ | ||
| <FormattedMessage | ||
| id="xpack.fleet.epm.packageDetails.assets.fetchAssetsErrorTitle" | ||
| defaultMessage="Error loading assets" | ||
| /> | ||
| } | ||
| error={fetchError} | ||
| /> | ||
| ); | ||
| } else if (assetSavedObjects === undefined) { | ||
| content = ( | ||
| <EuiTitle> | ||
| <h2> | ||
| <FormattedMessage | ||
| id="xpack.fleet.epm.packageDetails.assets.noAssetsFoundLabel" | ||
| defaultMessage="No assets found" | ||
| /> | ||
| </h2> | ||
| </EuiTitle> | ||
| ); | ||
| } else { | ||
| content = allowedAssetTypes.map((assetType) => { | ||
| const sectionAssetSavedObjects = assetSavedObjects.filter((so) => so.type === assetType); | ||
|
|
||
| if (!sectionAssetSavedObjects.length) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <AssetsAccordion savedObjects={sectionAssetSavedObjects} type={assetType} /> | ||
| <EuiSpacer size="l" /> | ||
| </> | ||
| ); | ||
| }); | ||
| } | ||
|
|
||
| return ( | ||
| <EuiFlexGroup alignItems="flexStart"> | ||
| <EuiFlexItem grow={1} /> | ||
| <EuiFlexItem grow={6}>{content}</EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| ); | ||
| }; |
Oops, something went wrong.