Skip to content

Commit

Permalink
add highlight of cluster table row and cluster details menu to pop up…
Browse files Browse the repository at this point in the history 
… on selection. (#419)
  • Loading branch information
@D-B-Hawk
D-B-Hawk authored Dec 14, 2023
1 parent f202463 commit c304827
Show file tree
Hide file tree
Showing 3 changed files with 135 additions and 94 deletions.
203 changes: 119 additions & 84 deletions components/clusterTable/clusterTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,11 @@
import React, { useState, FunctionComponent, useMemo, ComponentPropsWithRef } from 'react';
import React, {
useState,
FunctionComponent,
useMemo,
ComponentPropsWithRef,
useCallback,
MouseEvent,
} from 'react';
import { ClickAwayListener } from '@mui/material';
import TableHead from '@mui/material/TableHead';
import IconButton from '@mui/material/IconButton';
Expand Down Expand Up @@ -71,6 +78,8 @@ type ClusterRowProps = {
showExpandButton?: boolean;
onExpanseClick?: () => void;
onDeleteCluster: (clusterName: string) => void;
onClusterRowSelected: (clusterName: string) => void;
selected?: boolean;
};

const ClusterRow: FunctionComponent<ClusterRowProps> = ({
Expand All @@ -79,6 +88,8 @@ const ClusterRow: FunctionComponent<ClusterRowProps> = ({
showExpandButton,
onExpanseClick = noop,
onDeleteCluster,
onClusterRowSelected,
selected,
}) => {
const { isOpen, close, toggle } = useToggle();

Expand All @@ -98,92 +109,108 @@ const ClusterRow: FunctionComponent<ClusterRowProps> = ({
const { iconLabel, iconType, bgColor } = CLUSTER_TAG_CONFIG[status ?? ClusterStatus.PROVISIONED];
const { nameLabel, typeLabel } = FORMATTED_CLUSTER_TYPE[type ?? ClusterType.MANAGEMENT];

const highlighted = useMemo(() => selected || isOpen, [selected, isOpen]);

const handleClick = useCallback(
(e: MouseEvent<HTMLButtonElement>) => {
e.stopPropagation();
toggle();
},
[toggle],
);

const handleListItemClick = useCallback(
(e: MouseEvent<HTMLDivElement>) => {
e.stopPropagation();
onDeleteCluster(clusterName);
},
[onDeleteCluster, clusterName],
);

return (
<>
<StyledTableRow selected={isOpen}>
<StyledTableCell align="right" style={{ width: '50px' }} selected={isOpen}>
{type === ClusterType.MANAGEMENT && showExpandButton && (
<StyledIconButton
aria-label="expand row"
size="small"
onClick={onExpanseClick}
expanded={expanded}
>
<KeyboardArrowDownIcon />
</StyledIconButton>
)}
</StyledTableCell>
<StyledTableCell scope="row" selected={isOpen}>
<StyledCellText variant="body2" style={{ fontWeight: 500 }}>
{clusterName}
</StyledCellText>
<StyledCellText variant="body2" style={{ color: DODGER_BLUE }}>
{nameLabel}
</StyledCellText>
</StyledTableCell>
<StyledTableCell selected={isOpen}>
<StyledCellText variant="body2">{typeLabel}</StyledCellText>
</StyledTableCell>
<StyledTableCell selected={isOpen}>
<StyledTableRow selected={highlighted} onClick={() => onClusterRowSelected(clusterName)}>
<StyledTableCell align="right" style={{ width: '50px' }} selected={highlighted}>
{type === ClusterType.MANAGEMENT && showExpandButton && (
<StyledIconButton
aria-label="expand row"
size="small"
onClick={onExpanseClick}
expanded={expanded}
>
<KeyboardArrowDownIcon />
</StyledIconButton>
)}
</StyledTableCell>
<StyledTableCell scope="row" selected={highlighted}>
<StyledCellText variant="body2" style={{ fontWeight: 500 }}>
{clusterName}
</StyledCellText>
<StyledCellText variant="body2" style={{ color: DODGER_BLUE }}>
{nameLabel}
</StyledCellText>
</StyledTableCell>
<StyledTableCell selected={highlighted}>
<StyledCellText variant="body2">{typeLabel}</StyledCellText>
</StyledTableCell>
<StyledTableCell selected={highlighted}>
<StyledCellText variant="body2">
{environment && <Tag text={environment.name ?? ''} bgColor={environment.color} />}
</StyledCellText>
</StyledTableCell>
<StyledTableCell align="left" selected={highlighted}>
<Image src={cloudLogoSrc} height={18} width={30} alt={cloudProvider ?? ''} />
</StyledTableCell>
<StyledTableCell selected={highlighted}>
<StyledCellText variant="body2">{cloudRegion}</StyledCellText>
</StyledTableCell>
<StyledTableCell align="center" selected={highlighted}>
{type !== ClusterType.WORKLOAD_V_CLUSTER && (
<StyledCellText variant="body2">{nodeCount}</StyledCellText>
)}
</StyledTableCell>
<StyledTableCell selected={highlighted}>
{creationDate && (
<StyledCellText variant="body2">
{environment && <Tag text={environment.name ?? ''} bgColor={environment.color} />}
{moment(+creationDate).format('DD MMM YYYY, HH:MM:SS')}
</StyledCellText>
</StyledTableCell>
<StyledTableCell align="left" selected={isOpen}>
<Image src={cloudLogoSrc} height={18} width={30} alt={cloudProvider ?? ''} />
</StyledTableCell>
<StyledTableCell selected={isOpen}>
<StyledCellText variant="body2">{cloudRegion}</StyledCellText>
</StyledTableCell>
<StyledTableCell align="center" selected={isOpen}>
{type !== ClusterType.WORKLOAD_V_CLUSTER && (
<StyledCellText variant="body2">{nodeCount}</StyledCellText>
)}
</StyledTableCell>
<StyledTableCell selected={isOpen}>
{creationDate && (
<StyledCellText variant="body2">
{moment(+creationDate).format('DD MMM YYYY, HH:MM:SS')}
</StyledCellText>
)}
</StyledTableCell>
<StyledTableCell selected={isOpen}>
<StyledCellText variant="body2">{gitUser}</StyledCellText>
</StyledTableCell>
<StyledTableCell selected={isOpen}>
<StyledTag
text={iconLabel}
bgColor={bgColor}
icon={iconType}
spinImage={status === ClusterStatus.PROVISIONING}
/>
</StyledTableCell>
<StyledTableCell style={{ position: 'relative' }} selected={isOpen}>
<IconButton
aria-label="more info"
onClick={toggle}
disabled={status === ClusterStatus.DELETED}
>
<MoreHorizIcon />
</IconButton>
{isOpen && (
<ClickAwayListener onClickAway={close}>
<Menu>
<List>
<ListItem disablePadding>
<ListItemButton onClick={() => onDeleteCluster(clusterName)}>
<Typography variant="body2" style={{ color: `${FIRE_BRICK}` }}>
Delete cluster
</Typography>
</ListItemButton>
</ListItem>
</List>
</Menu>
</ClickAwayListener>
)}
</StyledTableCell>
</StyledTableRow>
</>
)}
</StyledTableCell>
<StyledTableCell selected={highlighted}>
<StyledCellText variant="body2">{gitUser}</StyledCellText>
</StyledTableCell>
<StyledTableCell selected={highlighted}>
<StyledTag
text={iconLabel}
bgColor={bgColor}
icon={iconType}
spinImage={status === ClusterStatus.PROVISIONING}
/>
</StyledTableCell>
<StyledTableCell style={{ position: 'relative' }} selected={highlighted}>
<IconButton
aria-label="more info"
onClick={handleClick}
disabled={status === ClusterStatus.DELETED}
>
<MoreHorizIcon />
</IconButton>
{isOpen && (
<ClickAwayListener onClickAway={close}>
<Menu>
<List>
<ListItem disablePadding>
<ListItemButton onClick={handleListItemClick}>
<Typography variant="body2" style={{ color: `${FIRE_BRICK}` }}>
Delete cluster
</Typography>
</ListItemButton>
</ListItem>
</List>
</Menu>
</ClickAwayListener>
)}
</StyledTableCell>
</StyledTableRow>
);
};

Expand Down Expand Up @@ -265,12 +292,16 @@ interface ClusterTableProps extends Omit<ComponentPropsWithRef<'tbody'>, 'key'>
clusters: ClusterCache;
onDeleteCluster: (clusterName: string) => void;
customRef?: React.Ref<HTMLTableSectionElement>;
selectedClusterName?: string;
onClusterRowSelected: (clusterName: string) => void;
}

export const ClusterTable: FunctionComponent<ClusterTableProps> = ({
managementCluster,
clusters,
onDeleteCluster,
selectedClusterName,
onClusterRowSelected,
...rest
}) => {
const [expanded, setExpanded] = useState(true);
Expand Down Expand Up @@ -307,6 +338,8 @@ export const ClusterTable: FunctionComponent<ClusterTableProps> = ({
expanded={expanded}
showExpandButton={!!filteredWorkloadClusters.length}
onExpanseClick={() => setExpanded(!expanded)}
selected={selectedClusterName === managementCluster.clusterName}
onClusterRowSelected={onClusterRowSelected}
/>

{expanded &&
Expand All @@ -315,6 +348,8 @@ export const ClusterTable: FunctionComponent<ClusterTableProps> = ({
key={cluster.clusterName}
cluster={cluster}
onDeleteCluster={onDeleteCluster}
selected={selectedClusterName === cluster.clusterName}
onClusterRowSelected={onClusterRowSelected}
/>
))}
</StyledTableBody>
Expand Down
5 changes: 2 additions & 3 deletions components/flow/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import {
} from '../../redux/slices/reactFlow.slice';
import 'reactflow/dist/style.css';
import { generateNodesConfig } from '../../utils/reactFlow';
import { Cluster } from '../../types/provision';

import CustomReactFlowControls from './controls';

Expand All @@ -24,7 +23,7 @@ const nodeTypes: NodeTypes = {
};

interface GraphViewProps {
onNodeClick: (cluster: Cluster) => void;
onNodeClick: (clusterName: string) => void;
}

const GraphView: FunctionComponent<GraphViewProps> = ({ onNodeClick }) => {
Expand Down Expand Up @@ -77,7 +76,7 @@ const GraphView: FunctionComponent<GraphViewProps> = ({ onNodeClick }) => {
onNodesChange={(changes) => dispatch(onNodesChange(changes))}
onEdgesChange={(changes) => dispatch(onEdgesChange(changes))}
onConnect={(connection) => dispatch(onConnect(connection))}
onNodeClick={(_, node) => onNodeClick(node.data)}
onNodeClick={(_, node) => onNodeClick(node.data.clusterName)}
nodeTypes={nodeTypes}
fitView
>
Expand Down
21 changes: 14 additions & 7 deletions containers/clusterManagement/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,8 @@ const ClusterManagement: FunctionComponent = () => {
...featureFlags.flags,
}));

const dispatch = useAppDispatch();

const { hasPermissions } = usePhysicalClustersPermissions(managementCluster?.cloudProvider);

const defaultClusterType = useMemo(() => {
Expand Down Expand Up @@ -99,8 +101,6 @@ const ClusterManagement: FunctionComponent = () => {
closeModal: closeDeleteModal,
} = useModal();

const dispatch = useAppDispatch();

const handleMenuClose = useCallback(() => {
if (clusterCreationStep === ClusterCreationStep.CONFIG) {
dispatch(removeDraftCluster());
Expand Down Expand Up @@ -132,9 +132,9 @@ const ClusterManagement: FunctionComponent = () => {
[dispatch, presentedClusterName],
);

const handleNodeClick = useCallback(
(cluster: Cluster) => {
dispatch(setPresentedClusterName(cluster.clusterName));
const handleClusterSelect = useCallback(
(clusterName: string) => {
dispatch(setPresentedClusterName(clusterName));
dispatch(setClusterCreationStep(ClusterCreationStep.DETAILS));
openCreateClusterFlow();
},
Expand Down Expand Up @@ -191,6 +191,11 @@ const ClusterManagement: FunctionComponent = () => {
[dispatch, openDeleteModal],
);

const handleDeleteMenuClose = useCallback(() => {
dispatch(setPresentedClusterName(undefined));
closeDeleteModal();
}, [dispatch, closeDeleteModal]);

return (
<Container>
<Header>
Expand Down Expand Up @@ -231,11 +236,13 @@ const ClusterManagement: FunctionComponent = () => {
clusters={clusterMap}
managementCluster={managementCluster}
onDeleteCluster={handleDeleteMenuClick}
selectedClusterName={presentedCluster?.clusterName}
onClusterRowSelected={handleClusterSelect}
/>
)}
</TabPanel>
<TabPanel value={clusterManagementTab} index={ClusterManagementTab.GRAPH_VIEW}>
<Flow onNodeClick={handleNodeClick} />
<Flow onNodeClick={handleClusterSelect} />
</TabPanel>
</Content>
<StyledDrawer open={createClusterFlowOpen} onClose={handleMenuClose} anchor="right">
Expand All @@ -259,7 +266,7 @@ const ClusterManagement: FunctionComponent = () => {
{!!presentedCluster && (
<DeleteCluster
isOpen={isDeleteModalOpen}
onCloseModal={closeDeleteModal}
onCloseModal={handleDeleteMenuClose}
onDelete={handleDeleteCluster}
cluster={presentedCluster}
/>
Expand Down

0 comments on commit c304827

Please sign in to comment.