-
Notifications
You must be signed in to change notification settings - Fork 8.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Infrastructure UI] Asset Details: Add pins to the metadata table (#1…
…61074) Closes #155190 ## Summary This PR adds the possibility to pin different rows inside the metadata table in asset details embeddable. The pins are persisted in the local storage and should be available after refreshing/reopening the host flyout. The order and sorting are explained in [this comment](#155190 (comment)), so basically we keep the original sorting order of the table (`host`, `cloud`, `agent`) also for the pins. ## Testing - Go to hosts view and open a single host flyout (metadata tab) - Try to add / remove pins - Check if the pins are persisted after a page refresh https://github.com/elastic/kibana/assets/14139027/62873e7e-b5f0-444c-94ff-5e19f2f46f58
- Loading branch information
1 parent
8afb9b0
commit b641a22
Showing
5 changed files
with
166 additions
and
14 deletions.
There are no files selected for viewing
75 changes: 75 additions & 0 deletions
75
x-pack/plugins/infra/public/components/asset_details/tabs/metadata/add_pin_to_row.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,75 @@ | ||
/* | ||
* 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, { Dispatch } from 'react'; | ||
import { i18n } from '@kbn/i18n'; | ||
import { EuiToolTip, EuiButtonIcon } from '@elastic/eui'; | ||
import type { Field } from './utils'; | ||
|
||
interface AddMetadataPinToRowProps { | ||
fieldName: Field['name']; | ||
pinnedItems: Array<Field['name']>; | ||
onPinned: Dispatch<React.SetStateAction<Array<Field['name']> | undefined>>; | ||
} | ||
|
||
const PIN_FIELD = i18n.translate('xpack.infra.metadataEmbeddable.pinField', { | ||
defaultMessage: 'Pin Field', | ||
}); | ||
|
||
export const AddMetadataPinToRow = ({ | ||
fieldName, | ||
pinnedItems, | ||
onPinned, | ||
}: AddMetadataPinToRowProps) => { | ||
const handleAddPin = () => { | ||
onPinned([...pinnedItems, fieldName]); | ||
}; | ||
|
||
const handleRemovePin = () => { | ||
if (pinnedItems && pinnedItems.includes(fieldName)) { | ||
onPinned((pinnedItems ?? []).filter((pinName: string) => fieldName !== pinName)); | ||
} | ||
}; | ||
|
||
if (pinnedItems?.includes(fieldName)) { | ||
return ( | ||
<span> | ||
<EuiToolTip | ||
content={i18n.translate('xpack.infra.metadataEmbeddable.unpinField', { | ||
defaultMessage: 'Unpin field', | ||
})} | ||
> | ||
<EuiButtonIcon | ||
size="s" | ||
color="primary" | ||
iconType="pinFilled" | ||
data-test-subj="infraMetadataEmbeddableRemovePin" | ||
aria-label={i18n.translate('xpack.infra.metadataEmbeddable.pinAriaLabel', { | ||
defaultMessage: 'Pinned field', | ||
})} | ||
onClick={handleRemovePin} | ||
/> | ||
</EuiToolTip> | ||
</span> | ||
); | ||
} | ||
|
||
return ( | ||
<span className="euiTableCellContent__hoverItem expandedItemActions__completelyHide"> | ||
<EuiToolTip content={PIN_FIELD}> | ||
<EuiButtonIcon | ||
color="primary" | ||
size="s" | ||
iconType="pin" | ||
data-test-subj="infraMetadataEmbeddableAddPin" | ||
aria-label={PIN_FIELD} | ||
onClick={handleAddPin} | ||
/> | ||
</EuiToolTip> | ||
</span> | ||
); | ||
}; |
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