Skip to content

Commit

Permalink
Bulk operations for connectors
Browse files Browse the repository at this point in the history 
Also:
- Added Pause button to the ActionsCell (before you could only Resume)
- chevronDownIcon color was fixed
  • Loading branch information
@Nilumilak
Nilumilak committed May 1, 2024
1 parent 02877a4 commit ff797ae
Show file tree
Hide file tree
Showing 10 changed files with 439 additions and 89 deletions.
43 changes: 25 additions & 18 deletions frontend/src/components/Connect/Details/Actions/Actions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const Actions: React.FC = () => {
const { data: connector } = useConnector(routerProps);
const confirm = useConfirm();

const deleteConnectorMutation = useDeleteConnector(routerProps);
const deleteConnectorMutation = useDeleteConnector(routerProps.clusterName);
const deleteConnectorHandler = () =>
confirm(
<>
Expand All @@ -42,25 +42,28 @@ const Actions: React.FC = () => {
</>,
async () => {
try {
await deleteConnectorMutation.mutateAsync();
await deleteConnectorMutation.mutateAsync({
props: routerProps,
});
navigate(clusterConnectorsPath(routerProps.clusterName));
} catch {
// do not redirect
}
}
);

const stateMutation = useUpdateConnectorState(routerProps);
const restartConnectorHandler = () =>
stateMutation.mutateAsync(ConnectorAction.RESTART);
const restartAllTasksHandler = () =>
stateMutation.mutateAsync(ConnectorAction.RESTART_ALL_TASKS);
const restartFailedTasksHandler = () =>
stateMutation.mutateAsync(ConnectorAction.RESTART_FAILED_TASKS);
const pauseConnectorHandler = () =>
stateMutation.mutateAsync(ConnectorAction.PAUSE);
const resumeConnectorHandler = () =>
stateMutation.mutateAsync(ConnectorAction.RESUME);
const stateMutation = useUpdateConnectorState(routerProps.clusterName);
const performConnectorAction = (action: ConnectorAction) => {
stateMutation.mutateAsync({
props: {
clusterName: routerProps.clusterName,
connectName: routerProps.connectName,
connectorName: routerProps.connectorName,
},
action,
});
};

return (
<S.ConnectorActionsWrapperStyled>
<Dropdown
Expand All @@ -73,7 +76,7 @@ const Actions: React.FC = () => {
>
{connector?.status.state === ConnectorState.RUNNING && (
<ActionDropdownItem
onClick={pauseConnectorHandler}
onClick={() => performConnectorAction(ConnectorAction.PAUSE)}
disabled={isMutating}
permission={{
resource: ResourceType.CONNECT,
Expand All @@ -86,7 +89,7 @@ const Actions: React.FC = () => {
)}
{connector?.status.state === ConnectorState.PAUSED && (
<ActionDropdownItem
onClick={resumeConnectorHandler}
onClick={() => performConnectorAction(ConnectorAction.RESUME)}
disabled={isMutating}
permission={{
resource: ResourceType.CONNECT,
Expand All @@ -98,7 +101,7 @@ const Actions: React.FC = () => {
</ActionDropdownItem>
)}
<ActionDropdownItem
onClick={restartConnectorHandler}
onClick={() => performConnectorAction(ConnectorAction.RESTART)}
disabled={isMutating}
permission={{
resource: ResourceType.CONNECT,
Expand All @@ -109,7 +112,9 @@ const Actions: React.FC = () => {
Restart Connector
</ActionDropdownItem>
<ActionDropdownItem
onClick={restartAllTasksHandler}
onClick={() =>
performConnectorAction(ConnectorAction.RESTART_ALL_TASKS)
}
disabled={isMutating}
permission={{
resource: ResourceType.CONNECT,
Expand All @@ -120,7 +125,9 @@ const Actions: React.FC = () => {
Restart All Tasks
</ActionDropdownItem>
<ActionDropdownItem
onClick={restartFailedTasksHandler}
onClick={() =>
performConnectorAction(ConnectorAction.RESTART_FAILED_TASKS)
}
disabled={isMutating}
permission={{
resource: ResourceType.CONNECT,
Expand Down
40 changes: 28 additions & 12 deletions frontend/src/components/Connect/Details/Actions/__tests__/Actions.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,11 +58,16 @@ describe('Actions', () => {
});

describe('view', () => {
const connectorProps = {
clusterName: 'myCluster',
connectName: 'myConnect',
connectorName: 'myConnector',
};
const route = clusterConnectConnectorPath();
const path = clusterConnectConnectorPath(
'myCluster',
'myConnect',
'myConnector'
connectorProps.clusterName,
connectorProps.connectName,
connectorProps.connectorName
);

const renderComponent = () =>
Expand Down Expand Up @@ -147,7 +152,10 @@ describe('Actions', () => {
await userEvent.click(
screen.getByRole('menuitem', { name: 'Restart Connector' })
);
expect(restartConnector).toHaveBeenCalledWith(ConnectorAction.RESTART);
expect(restartConnector).toHaveBeenCalledWith({
props: connectorProps,
action: ConnectorAction.RESTART,
});
});

it('calls restartAllTasks', async () => {
Expand All @@ -160,9 +168,10 @@ describe('Actions', () => {
await userEvent.click(
screen.getByRole('menuitem', { name: 'Restart All Tasks' })
);
expect(restartAllTasks).toHaveBeenCalledWith(
ConnectorAction.RESTART_ALL_TASKS
);
expect(restartAllTasks).toHaveBeenCalledWith({
props: connectorProps,
action: ConnectorAction.RESTART_ALL_TASKS,
});
});

it('calls restartFailedTasks', async () => {
Expand All @@ -175,9 +184,10 @@ describe('Actions', () => {
await userEvent.click(
screen.getByRole('menuitem', { name: 'Restart Failed Tasks' })
);
expect(restartFailedTasks).toHaveBeenCalledWith(
ConnectorAction.RESTART_FAILED_TASKS
);
expect(restartFailedTasks).toHaveBeenCalledWith({
props: connectorProps,
action: ConnectorAction.RESTART_FAILED_TASKS,
});
});

it('calls pauseConnector when pause button clicked', async () => {
Expand All @@ -188,7 +198,10 @@ describe('Actions', () => {
renderComponent();
await afterClickRestartButton();
await userEvent.click(screen.getByRole('menuitem', { name: 'Pause' }));
expect(pauseConnector).toHaveBeenCalledWith(ConnectorAction.PAUSE);
expect(pauseConnector).toHaveBeenCalledWith({
props: connectorProps,
action: ConnectorAction.PAUSE,
});
});

it('calls resumeConnector when resume button clicked', async () => {
Expand All @@ -202,7 +215,10 @@ describe('Actions', () => {
renderComponent();
await afterClickRestartButton();
await userEvent.click(screen.getByRole('menuitem', { name: 'Resume' }));
expect(resumeConnector).toHaveBeenCalledWith(ConnectorAction.RESUME);
expect(resumeConnector).toHaveBeenCalledWith({
props: connectorProps,
action: ConnectorAction.RESUME,
});
});
});
});
Expand Down
66 changes: 40 additions & 26 deletions frontend/src/components/Connect/List/ActionsCell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,43 +26,41 @@ const ActionsCell: React.FC<CellContext<FullConnectorInfo, unknown>> = ({
const mutationsNumber = useIsMutating();
const isMutating = mutationsNumber > 0;
const confirm = useConfirm();
const deleteMutation = useDeleteConnector({
clusterName,
connectName: connect,
connectorName: name,
});
const stateMutation = useUpdateConnectorState({
clusterName,
connectName: connect,
connectorName: name,
});
const deleteMutation = useDeleteConnector(clusterName);
const stateMutation = useUpdateConnectorState(clusterName);
const handleDelete = () => {
confirm(
<>
Are you sure want to remove <b>{name}</b> connector?
</>,
async () => {
await deleteMutation.mutateAsync();
await deleteMutation.mutateAsync({
props: {
clusterName,
connectName: connect,
connectorName: name,
},
});
}
);
};
// const stateMutation = useUpdateConnectorState(routerProps);
const resumeConnectorHandler = () =>
stateMutation.mutateAsync(ConnectorAction.RESUME);
const restartConnectorHandler = () =>
stateMutation.mutateAsync(ConnectorAction.RESTART);

const restartAllTasksHandler = () =>
stateMutation.mutateAsync(ConnectorAction.RESTART_ALL_TASKS);

const restartFailedTasksHandler = () =>
stateMutation.mutateAsync(ConnectorAction.RESTART_FAILED_TASKS);
const performConnectorAction = (action: ConnectorAction) => {
stateMutation.mutateAsync({
props: {
clusterName,
connectName: connect,
connectorName: name,
},
action,
});
};

return (
<Dropdown>
{status.state === ConnectorState.PAUSED && (
{status.state === ConnectorState.PAUSED ? (
<ActionDropdownItem
onClick={resumeConnectorHandler}
onClick={() => performConnectorAction(ConnectorAction.RESUME)}
disabled={isMutating}
permission={{
resource: ResourceType.CONNECT,
Expand All @@ -72,9 +70,21 @@ const ActionsCell: React.FC<CellContext<FullConnectorInfo, unknown>> = ({
>
Resume
</ActionDropdownItem>
) : (
<ActionDropdownItem
onClick={() => performConnectorAction(ConnectorAction.PAUSE)}
disabled={isMutating}
permission={{
resource: ResourceType.CONNECT,
action: Action.EDIT,
value: name,
}}
>
Pause
</ActionDropdownItem>
)}
<ActionDropdownItem
onClick={restartConnectorHandler}
onClick={() => performConnectorAction(ConnectorAction.RESTART)}
disabled={isMutating}
permission={{
resource: ResourceType.CONNECT,
Expand All @@ -85,7 +95,9 @@ const ActionsCell: React.FC<CellContext<FullConnectorInfo, unknown>> = ({
Restart Connector
</ActionDropdownItem>
<ActionDropdownItem
onClick={restartAllTasksHandler}
onClick={() =>
performConnectorAction(ConnectorAction.RESTART_ALL_TASKS)
}
disabled={isMutating}
permission={{
resource: ResourceType.CONNECT,
Expand All @@ -96,7 +108,9 @@ const ActionsCell: React.FC<CellContext<FullConnectorInfo, unknown>> = ({
Restart All Tasks
</ActionDropdownItem>
<ActionDropdownItem
onClick={restartFailedTasksHandler}
onClick={() =>
performConnectorAction(ConnectorAction.RESTART_FAILED_TASKS)
}
disabled={isMutating}
permission={{
resource: ResourceType.CONNECT,
Expand Down
Loading

0 comments on commit ff797ae

Please sign in to comment.