-
Notifications
You must be signed in to change notification settings - Fork 25
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: Updates Discover component to support previous / next buttons (#496
) * Discover.tsx * Move loading-panel into its own component DiscoverLoadingPanel * Puts the pods into tabs based on the projects/namespaces * New DiscoverProjectContent for each project * DiscoverProjectContent * Lists the limited selection of pods from management-service * When next button is clicked, the signal is sent to the management-service to fetch the 'next' selection of pods for the given namespace * DiscoverToolbar * Sorts the tab order since they are the namespaces * Sorts the pods in each namespace tab * Filters applied in line with patternfly guidelines * Filters of same attribute applied as OR * Filters of different attributes applied as AND * Filters are first concatenated together before being applied * HeaderMenuDropDown * Reimplemented with flyout sub-menus for the pods separated by namespace * context * Replacement of groupds / pods with projects * Addition of refreshing flag to indicate when pods are being refreshed awaiting a management update from prev/next buttons * discover-service split with new discover-project class that encapsulates the discover-projects and pods received from management
- Loading branch information
1 parent
a9710b5
commit 7cb599c
Showing
13 changed files
with
585 additions
and
289 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
25 changes: 25 additions & 0 deletions
25
packages/online-shell/src/discover/DiscoverLoadingPanel.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,25 @@ | ||
| import React from 'react' | ||
| import { Panel, PanelHeader, PanelMain, PanelMainBody } from '@patternfly/react-core' | ||
| import { HawtioLoadingCard } from '@hawtio/react' | ||
|
|
||
| interface DiscoverLoadingPanelProps { | ||
| compact?: boolean | ||
| } | ||
|
|
||
| export const DiscoverLoadingPanel: React.FunctionComponent<DiscoverLoadingPanelProps> = ( | ||
| props: DiscoverLoadingPanelProps, | ||
| ) => { | ||
| let classNames = 'discover-loading' | ||
| if (props.compact) classNames = classNames + ' discover-loading-compact' | ||
|
|
||
| return ( | ||
| <Panel className={classNames}> | ||
| <PanelHeader>Waiting for Hawtio Containers ...</PanelHeader> | ||
| <PanelMain> | ||
| <PanelMainBody> | ||
| <HawtioLoadingCard /> | ||
| </PanelMainBody> | ||
| </PanelMain> | ||
| </Panel> | ||
| ) | ||
| } |
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
94 changes: 94 additions & 0 deletions
94
packages/online-shell/src/discover/DiscoverProjectContent.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,94 @@ | ||
| import React, { useContext } from 'react' | ||
| import { | ||
| Button, | ||
| List, | ||
| Panel, | ||
| PanelHeader, | ||
| PanelMain, | ||
| PanelMainBody, | ||
| Toolbar, | ||
| ToolbarContent, | ||
| ToolbarGroup, | ||
| ToolbarItem, | ||
| } from '@patternfly/react-core' | ||
| import { DiscoverProject } from './discover-project' | ||
| import { DiscoverGroupList } from './DiscoverGroupList' | ||
| import { DiscoverPodItem } from './DiscoverPodItem' | ||
| import { mgmtService } from '@hawtio/online-management-api' | ||
| import { DiscoverLoadingPanel } from './DiscoverLoadingPanel' | ||
| import { DiscoverContext } from './context' | ||
|
|
||
| interface DiscoverProjectCntProps { | ||
| project: DiscoverProject | ||
| } | ||
|
|
||
| export const DiscoverProjectContent: React.FunctionComponent<DiscoverProjectCntProps> = ( | ||
| props: DiscoverProjectCntProps, | ||
| ) => { | ||
| const { refreshing, setRefreshing } = useContext(DiscoverContext) | ||
|
|
||
| const hasPrevPods = (): boolean => { | ||
| return mgmtService.hasPrevious(props.project.name) | ||
| } | ||
|
|
||
| const prevPods = () => { | ||
| setRefreshing(true) | ||
| mgmtService.previous(props.project.name) | ||
| } | ||
|
|
||
| const hasNextPods = (): boolean => { | ||
| return mgmtService.hasNext(props.project.name) | ||
| } | ||
|
|
||
| const nextPods = () => { | ||
| setRefreshing(true) | ||
| mgmtService.next(props.project.name) | ||
| } | ||
|
|
||
| return ( | ||
| <Panel> | ||
| <PanelHeader> | ||
| <Toolbar id='pagination-toolbar-items' className='paginated-pods-toolbar-content' isSticky> | ||
| <ToolbarContent> | ||
| <ToolbarGroup variant='button-group' align={{ default: 'alignLeft' }}> | ||
| <ToolbarItem> | ||
| <Button variant='control' onClick={() => prevPods()} isDisabled={!hasPrevPods()}> | ||
| << Previous | ||
| </Button> | ||
| </ToolbarItem> | ||
| </ToolbarGroup> | ||
|
|
||
| {refreshing && ( | ||
| <ToolbarGroup isOverflowContainer> | ||
| <ToolbarItem widths={{ default: '100%' }}> | ||
| <DiscoverLoadingPanel compact={true} /> | ||
| </ToolbarItem> | ||
| </ToolbarGroup> | ||
| )} | ||
|
|
||
| <ToolbarGroup variant='button-group' align={{ default: 'alignRight' }}> | ||
| <ToolbarItem> | ||
| <Button variant='control' onClick={() => nextPods()} isDisabled={!hasNextPods()}> | ||
| Next >> | ||
| </Button> | ||
| </ToolbarItem> | ||
| </ToolbarGroup> | ||
| </ToolbarContent> | ||
| </Toolbar> | ||
| </PanelHeader> | ||
| <PanelMain> | ||
| <PanelMainBody> | ||
| {props.project.groups.length > 0 && <DiscoverGroupList groups={props.project.groups} />} | ||
|
|
||
| {props.project.pods.length > 0 && ( | ||
| <List isBordered={true} iconSize='large'> | ||
| {props.project.pods.map(pod => { | ||
| return <DiscoverPodItem pod={pod} key={pod.uid} /> | ||
| })} | ||
| </List> | ||
| )} | ||
| </PanelMainBody> | ||
| </PanelMain> | ||
| </Panel> | ||
| ) | ||
| } |
Oops, something went wrong.