-
Notifications
You must be signed in to change notification settings - Fork 883
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Rollouts UI List View Refresh (#3118)
* feat: Rollouts UI Refresh Signed-off-by: Philip Clark <[email protected]> * add test for labels and annotations Signed-off-by: Philip Clark <[email protected]> * simplify regex Signed-off-by: Philip Clark <[email protected]> * make filters use OR logic Signed-off-by: Philip Clark <[email protected]> * add keyboard listener Signed-off-by: Philip Clark <[email protected]> * set default display mode to grid Signed-off-by: Philip Clark <[email protected]> * set strategy column to left justify Signed-off-by: Philip Clark <[email protected]> * add tooltips to view buttons Signed-off-by: Philip Clark <[email protected]> * consider unknown status rollouts as needing attention Signed-off-by: Philip Clark <[email protected]> * remove duplicate escape key listener Signed-off-by: Philip Clark <[email protected]> * group status filters together Signed-off-by: Philip Clark <[email protected]> * improve filter logic Signed-off-by: Philip Clark <[email protected]> * remove debug logging Signed-off-by: Philip Clark <[email protected]> * dont show help on escape Signed-off-by: Philip Clark <[email protected]> * properly remove url search params when disabled Signed-off-by: Philip Clark <[email protected]> * rename to RolloutGridWidget Signed-off-by: Philip Clark <[email protected]> * prevent help menu from loading while searching Signed-off-by: Philip Clark <[email protected]> --------- Signed-off-by: Philip Clark <[email protected]>
- Loading branch information
Showing
30 changed files
with
1,374 additions
and
293 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
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
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
134 changes: 134 additions & 0 deletions
134
ui/src/app/components/rollout-grid-widget/rollout-grid-widget.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,134 @@ | ||
import * as React from 'react'; | ||
import {Link} from 'react-router-dom'; | ||
|
||
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; | ||
import {faCircleNotch, faRedoAlt} from '@fortawesome/free-solid-svg-icons'; | ||
import {IconDefinition} from '@fortawesome/fontawesome-svg-core'; | ||
import {faStar as faStarSolid} from '@fortawesome/free-solid-svg-icons'; | ||
import {faStar as faStarOutline} from '@fortawesome/free-regular-svg-icons/faStar'; | ||
|
||
import {Tooltip} from 'antd'; | ||
|
||
import {ParsePodStatus, PodStatus, ReplicaSets} from '../pods/pods'; | ||
import {RolloutInfo} from '../../../models/rollout/rollout'; | ||
import {useWatchRollout} from '../../shared/services/rollout'; | ||
import {useClickOutside} from '../../shared/utils/utils'; | ||
import {InfoItemKind, InfoItemRow} from '../info-item/info-item'; | ||
import {RolloutAction, RolloutActionButton} from '../rollout-actions/rollout-actions'; | ||
import {RolloutStatus, StatusIcon} from '../status-icon/status-icon'; | ||
import './rollout-grid-widget.scss'; | ||
|
||
export const isInProgress = (rollout: RolloutInfo): boolean => { | ||
for (const rs of rollout.replicaSets || []) { | ||
for (const p of rs.pods || []) { | ||
const status = ParsePodStatus(p.status); | ||
if (status === PodStatus.Pending) { | ||
return true; | ||
} | ||
} | ||
} | ||
return false; | ||
}; | ||
|
||
export const RolloutGridWidget = (props: { | ||
rollout: RolloutInfo; | ||
deselect: () => void; | ||
selected?: boolean; | ||
isFavorite: boolean; | ||
onFavoriteChange: (rolloutName: string, isFavorite: boolean) => void; | ||
}) => { | ||
const [watching, subscribe] = React.useState(false); | ||
let rollout = props.rollout; | ||
useWatchRollout(props.rollout?.objectMeta?.name, watching, null, (r: RolloutInfo) => (rollout = r)); | ||
const ref = React.useRef(null); | ||
useClickOutside(ref, props.deselect); | ||
|
||
React.useEffect(() => { | ||
if (watching) { | ||
const to = setTimeout(() => { | ||
if (!isInProgress(rollout)) { | ||
subscribe(false); | ||
} | ||
}, 5000); | ||
return () => clearTimeout(to); | ||
} | ||
}, [watching, rollout]); | ||
|
||
return ( | ||
<Link | ||
to={`/rollout/${rollout.objectMeta?.namespace}/${rollout.objectMeta?.name}`} | ||
className={`rollouts-list__widget ${props.selected ? 'rollouts-list__widget--selected' : ''}`} | ||
ref={ref} | ||
> | ||
<WidgetHeader | ||
rollout={rollout} | ||
refresh={() => { | ||
subscribe(true); | ||
setTimeout(() => { | ||
subscribe(false); | ||
}, 1000); | ||
}} | ||
isFavorite={props.isFavorite} | ||
handleFavoriteChange={props.onFavoriteChange} | ||
/> | ||
<div className='rollouts-list__widget__body'> | ||
<InfoItemRow | ||
label={'Strategy'} | ||
items={{content: rollout.strategy, icon: rollout.strategy === 'BlueGreen' ? 'fa-palette' : 'fa-dove', kind: rollout.strategy.toLowerCase() as InfoItemKind}} | ||
/> | ||
{(rollout.strategy || '').toLocaleLowerCase() === 'canary' && <InfoItemRow label={'Weight'} items={{content: rollout.setWeight, icon: 'fa-weight'}} />} | ||
</div> | ||
<ReplicaSets replicaSets={rollout.replicaSets} showRevisions /> | ||
<div className='rollouts-list__widget__message'>{rollout.message !== 'CanaryPauseStep' && rollout.message}</div> | ||
<div className='rollouts-list__widget__actions'> | ||
<RolloutActionButton action={RolloutAction.Restart} rollout={rollout} callback={() => subscribe(true)} indicateLoading /> | ||
<RolloutActionButton action={RolloutAction.Promote} rollout={rollout} callback={() => subscribe(true)} indicateLoading /> | ||
</div> | ||
</Link> | ||
); | ||
}; | ||
|
||
const WidgetHeader = (props: {rollout: RolloutInfo; refresh: () => void; isFavorite: boolean; handleFavoriteChange: (rolloutName: string, isFavorite: boolean) => void}) => { | ||
const {rollout} = props; | ||
const [loading, setLoading] = React.useState(false); | ||
React.useEffect(() => { | ||
setTimeout(() => setLoading(false), 500); | ||
}, [loading]); | ||
|
||
const handleFavoriteClick = (e: React.MouseEvent<HTMLButtonElement>) => { | ||
e.stopPropagation(); | ||
e.preventDefault(); | ||
props.handleFavoriteChange(rollout.objectMeta?.name, !props.isFavorite); | ||
}; | ||
|
||
return ( | ||
<header> | ||
{props.isFavorite ? ( | ||
<button onClick={handleFavoriteClick} style={{cursor: 'pointer'}}> | ||
<FontAwesomeIcon icon={faStarSolid} size='lg' style={{marginRight: '10px'}} /> | ||
</button> | ||
) : ( | ||
<button onClick={handleFavoriteClick} style={{cursor: 'pointer'}}> | ||
<FontAwesomeIcon icon={faStarOutline as IconDefinition} size='lg' style={{marginRight: '10px'}} /> | ||
</button> | ||
)} | ||
{rollout.objectMeta?.name} | ||
<span style={{marginLeft: 'auto', display: 'flex', alignItems: 'center'}}> | ||
<Tooltip title='Refresh'> | ||
<FontAwesomeIcon | ||
icon={loading ? faCircleNotch : faRedoAlt} | ||
spin={loading} | ||
className={`rollouts-list__widget__refresh`} | ||
style={{marginRight: '10px', fontSize: '14px'}} | ||
onClick={(e) => { | ||
props.refresh(); | ||
setLoading(true); | ||
e.preventDefault(); | ||
}} | ||
/> | ||
</Tooltip> | ||
<StatusIcon status={rollout.status as RolloutStatus} /> | ||
</span> | ||
</header> | ||
); | ||
}; |
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
Oops, something went wrong.