-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
NETOBSERV-474 summary filters by source or dest
!QE NOTICE: graph node id generation changed! Allow to filter by source, dest or common via the summary panel filters This is also adding Owner as part of the information displayed per node. It modifies the whole topology node data so that the entire "TopologyMetricPeer" (returned from metrics) object is now part of it. It also makes metrics matching for groups simpler because the parent information is now contained in the id itself Also, some refactoring on element-panel to extract new components: element-field(s), peer-resource-link, summary-filter-button
- Loading branch information
Showing
16 changed files
with
612 additions
and
575 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import * as React from 'react'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import { OptionsMenu, OptionsMenuItem, OptionsMenuPosition, OptionsMenuToggle } from '@patternfly/react-core'; | ||
| import { FilterIcon } from '@patternfly/react-icons'; | ||
| import { Filter } from '../../model/filters'; | ||
| import { FilterDir, isElementFiltered, toggleElementFilter } from '../../model/topology'; | ||
| import { TopologyMetricPeer } from '../../api/loki'; | ||
| import { NodeType } from '../../model/flow-query'; | ||
|
|
||
| export interface SummaryFilterButtonProps { | ||
| id: string; | ||
| filterType: NodeType; | ||
| fields: Partial<TopologyMetricPeer>; | ||
| activeFilters: Filter[]; | ||
| setFilters: (filters: Filter[]) => void; | ||
| } | ||
|
|
||
| const srcFilter: FilterDir = 'src'; | ||
| const dstFilter: FilterDir = 'dst'; | ||
| const anyFilter: FilterDir = 'any'; | ||
|
|
||
| export const SummaryFilterButton: React.FC<SummaryFilterButtonProps> = ({ | ||
| id, | ||
| filterType, | ||
| fields, | ||
| activeFilters, | ||
| setFilters | ||
| }) => { | ||
| const { t } = useTranslation('plugin__netobserv-plugin'); | ||
| const [isOpen, setIsOpen] = React.useState(false); | ||
|
|
||
| const selected = [srcFilter, dstFilter, anyFilter].filter(dir => | ||
| isElementFiltered(filterType, fields, dir, activeFilters, t) | ||
| ); | ||
|
|
||
| const onSelect = (dir: FilterDir) => { | ||
| toggleElementFilter(filterType, fields, dir, selected.includes(dir), activeFilters, setFilters, t); | ||
| }; | ||
|
|
||
| const menuItem = (id: FilterDir, label: string) => ( | ||
| <OptionsMenuItem id={id} key={id} isSelected={selected.includes(id)} onSelect={() => onSelect(id)}> | ||
| {label} | ||
| </OptionsMenuItem> | ||
| ); | ||
|
|
||
| return ( | ||
| <OptionsMenu | ||
| id={id} | ||
| data-test={id} | ||
| toggle={<OptionsMenuToggle toggleTemplate={<FilterIcon />} onToggle={setIsOpen} hideCaret />} | ||
| menuItems={[menuItem('src', t('Source')), menuItem('dst', t('Destination')), menuItem('any', t('Common'))]} | ||
| isOpen={isOpen} | ||
| position={OptionsMenuPosition.right} | ||
| isPlain | ||
| /> | ||
| ); | ||
| }; |
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
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,37 @@ | ||
| import { Flex, FlexItem, Text, TextContent, TextVariants } from '@patternfly/react-core'; | ||
| import * as React from 'react'; | ||
| import { NodeType } from '../../model/flow-query'; | ||
| import { TopologyMetricPeer } from '../../api/loki'; | ||
| import { Filter } from '../../model/filters'; | ||
| import { SummaryFilterButton } from '../filters/summary-filter-button'; | ||
| import { PeerResourceLink } from './peer-resource-link'; | ||
|
|
||
| export const ElementField: React.FC<{ | ||
| id: string; | ||
| label: string; | ||
| filterType: NodeType; | ||
| forcedText?: string; | ||
| fields: Partial<TopologyMetricPeer>; | ||
| activeFilters: Filter[]; | ||
| setFilters: (filters: Filter[]) => void; | ||
| }> = ({ id, label, filterType, forcedText, fields, activeFilters, setFilters }) => { | ||
| return ( | ||
| <TextContent id={id} className="record-field-container"> | ||
| <Text component={TextVariants.h4}>{label}</Text> | ||
| <Flex> | ||
| <FlexItem flex={{ default: 'flex_1' }}> | ||
| {forcedText ? <Text>{forcedText}</Text> : <PeerResourceLink fields={fields} />} | ||
| </FlexItem> | ||
| <FlexItem> | ||
| <SummaryFilterButton | ||
| id={id + '-filter'} | ||
| activeFilters={activeFilters} | ||
| filterType={filterType} | ||
| fields={fields} | ||
| setFilters={setFilters} | ||
| /> | ||
| </FlexItem> | ||
| </Flex> | ||
| </TextContent> | ||
| ); | ||
| }; |
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,109 @@ | ||
| import * as React from 'react'; | ||
| import { Text, TextContent, TextVariants } from '@patternfly/react-core'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import { Filter } from '../../model/filters'; | ||
| import { NodeData } from '../../model/topology'; | ||
| import { ElementField } from './element-field'; | ||
|
|
||
| export const ElementFields: React.FC<{ | ||
| id: string; | ||
| data: NodeData; | ||
| forceFirstAsText?: boolean; | ||
| activeFilters: Filter[]; | ||
| setFilters: (filters: Filter[]) => void; | ||
| }> = ({ id, data, forceFirstAsText, activeFilters, setFilters }) => { | ||
| const { t } = useTranslation('plugin__netobserv-plugin'); | ||
|
|
||
| const fragments = []; | ||
| let forceAsText = forceFirstAsText; | ||
| let forceLabel = forceFirstAsText ? t('Name') : undefined; | ||
| if (data.peer.resource) { | ||
| fragments.push( | ||
| <ElementField | ||
| id={id + '-resource'} | ||
| key={id + '-resource'} | ||
| label={forceLabel || data.peer.resource.type} | ||
| forcedText={forceAsText ? data.peer.resource.name : undefined} | ||
| activeFilters={activeFilters} | ||
| filterType={'resource'} | ||
| fields={data.peer} | ||
| setFilters={setFilters} | ||
| /> | ||
| ); | ||
| forceLabel = forceAsText = undefined; | ||
| } | ||
| if (data.peer.owner && data.peer.owner.type !== data.peer.resource?.type) { | ||
| fragments.push( | ||
| <ElementField | ||
| id={id + '-owner'} | ||
| key={id + '-owner'} | ||
| label={forceLabel || data.peer.owner.type} | ||
| forcedText={forceAsText ? data.peer.owner.name : undefined} | ||
| activeFilters={activeFilters} | ||
| filterType={'owner'} | ||
| fields={{ owner: data.peer.owner, namespace: data.peer.namespace }} | ||
| setFilters={setFilters} | ||
| /> | ||
| ); | ||
| forceLabel = forceAsText = undefined; | ||
| } | ||
| if (data.peer.namespace) { | ||
| fragments.push( | ||
| <ElementField | ||
| id={id + '-namespace'} | ||
| key={id + '-namespace'} | ||
| label={forceLabel || t('Namespace')} | ||
| forcedText={forceAsText ? data.peer.namespace : undefined} | ||
| activeFilters={activeFilters} | ||
| filterType={'namespace'} | ||
| fields={{ namespace: data.peer.namespace }} | ||
| setFilters={setFilters} | ||
| /> | ||
| ); | ||
| forceLabel = forceAsText = undefined; | ||
| } | ||
| if (data.peer.hostName) { | ||
| fragments.push( | ||
| <ElementField | ||
| id={id + '-host'} | ||
| key={id + '-host'} | ||
| label={forceLabel || t('Node')} | ||
| forcedText={forceAsText ? data.peer.hostName : undefined} | ||
| activeFilters={activeFilters} | ||
| filterType={'host'} | ||
| fields={{ hostName: data.peer.hostName }} | ||
| setFilters={setFilters} | ||
| /> | ||
| ); | ||
| forceLabel = forceAsText = undefined; | ||
| } | ||
| if (data.peer.addr) { | ||
| fragments.push( | ||
| <ElementField | ||
| id={id + '-address'} | ||
| key={id + '-address'} | ||
| label={t('IP')} | ||
| activeFilters={activeFilters} | ||
| filterType={'resource'} | ||
| fields={{ addr: data.peer.addr }} | ||
| setFilters={setFilters} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| {fragments.length > 0 ? ( | ||
| fragments | ||
| ) : ( | ||
| <TextContent id={id + '-no-infos'} className="record-field-container"> | ||
| { | ||
| <Text component={TextVariants.p}> | ||
| {t('No information available for this content. Change scope to get more details.')} | ||
| </Text> | ||
| } | ||
| </TextContent> | ||
| )} | ||
| </> | ||
| ); | ||
| }; |
Oops, something went wrong.