Skip to content

Commit

Permalink
Add the ability to choose multiple tasks
Browse files Browse the repository at this point in the history
  • Loading branch information
@gafetinov
gafetinov committed Nov 24, 2023
1 parent 099dfe1 commit c251693
Show file tree
Hide file tree
Showing 5 changed files with 184 additions and 117 deletions.
10 changes: 8 additions & 2 deletions ...ndra-distributed-task-queue-ui/src/components/TaskTable/TaskDetails/TaskDetails.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,16 @@ export const jsStyles = {
`;
},

checkbox(): string {
return css`
margin-top: -4px;
`;
},

taskDetails(): string {
return css`
padding: 5px 5px 5px 7px;
border-radius: 2px;
padding: 8px;
border-radius: 16px;
`;
},

Expand Down
139 changes: 73 additions & 66 deletions cassandra-distributed-task-queue-ui/src/components/TaskTable/TaskDetails/TaskDetails.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { ArrowRoundTimeForwardIcon16Regular } from "@skbkontur/icons/ArrowRoundTimeForwardIcon16Regular";
import { XIcon16Regular } from "@skbkontur/icons/XIcon16Regular";
import { ColumnStack, Fill, Fit, RowStack } from "@skbkontur/react-stack-layout";
import { Link, ThemeContext } from "@skbkontur/react-ui";
import { Checkbox, Link, ThemeContext } from "@skbkontur/react-ui";
import React from "react";
import { Location } from "react-router-dom";

Expand All @@ -18,8 +18,10 @@ import { jsStyles } from "./TaskDetails.styles";
interface TaskDetailsProps {
taskInfo: RtqMonitoringTaskMeta;
allowRerunOrCancel: boolean;
isChecked: boolean;
onRerun: () => void;
onCancel: () => void;
onCheck: () => void;
getTaskLocation: (id: string) => string | Partial<Location>;
}

Expand All @@ -31,7 +33,7 @@ function dateFormatter(
}

export function TaskDetails(props: TaskDetailsProps): JSX.Element {
const { allowRerunOrCancel, taskInfo, onCancel, onRerun, getTaskLocation } = props;
const { allowRerunOrCancel, taskInfo, isChecked, onCancel, onRerun, onCheck, getTaskLocation } = props;
const theme = React.useContext(ThemeContext);

const renderTaskDate = (
Expand All @@ -48,72 +50,77 @@ export function TaskDetails(props: TaskDetailsProps): JSX.Element {
};

return (
<ColumnStack block gap={1} className={`${jsStyles.taskDetails()} ${jsStyles.state(theme, taskInfo.state)}`}>
<Fit className={jsStyles.name()}>
<RouterLink data-tid="Name" to={getTaskLocation(taskInfo.id)}>
{taskInfo.name}
</RouterLink>
</Fit>
<RowStack block className={`${jsStyles.taskDetails()} ${jsStyles.state(theme, taskInfo.state)}`} gap={2}>
<Fit>
<RowStack verticalAlign="stretch" block gap={2}>
<Fit tag={ColumnStack} className={jsStyles.infoBlock1()}>
<Fit className={jsStyles.id()}>
<AllowCopyToClipboard>
<span data-tid="TaskId">{taskInfo.id}</span>
</AllowCopyToClipboard>
</Fit>
<Fit>
<span className={jsStyles.stateName()} data-tid="State">
{TaskState[taskInfo.state]}
</span>
<span className={jsStyles.attempts()}>
Attempts: <span data-tid="Attempts">{taskInfo.attempts}</span>
</span>
</Fit>
<Fill className={jsStyles.parentTask()}>
<div>
Parent:{" "}
{taskInfo.parentTaskId ? (
<AllowCopyToClipboard>{taskInfo.parentTaskId}</AllowCopyToClipboard>
) : (
"-"
)}
</div>
</Fill>
{allowRerunOrCancel && (
<Checkbox className={jsStyles.checkbox()} onValueChange={onCheck} checked={isChecked} />
</Fit>
<ColumnStack block gap={1}>
<Fit className={jsStyles.name()}>
<RouterLink data-tid="Name" to={getTaskLocation(taskInfo.id)}>
{taskInfo.name}
</RouterLink>
</Fit>
<Fit>
<RowStack verticalAlign="stretch" block gap={2}>
<Fit tag={ColumnStack} className={jsStyles.infoBlock1()}>
<Fit className={jsStyles.id()}>
<AllowCopyToClipboard>
<span data-tid="TaskId">{taskInfo.id}</span>
</AllowCopyToClipboard>
</Fit>
<Fit>
<RowStack baseline block gap={2}>
<Fit>
<Link
data-tid="Cancel"
disabled={!cancelableStates.includes(taskInfo.state)}
onClick={onCancel}
icon={<XIcon16Regular />}>
Cancel
</Link>
</Fit>
<Fit>
<Link
data-tid="Rerun"
disabled={!rerunableStates.includes(taskInfo.state)}
onClick={onRerun}
icon={<ArrowRoundTimeForwardIcon16Regular />}>
Rerun
</Link>
</Fit>
</RowStack>
<span className={jsStyles.stateName()} data-tid="State">
{TaskState[taskInfo.state]}
</span>
<span className={jsStyles.attempts()}>
Attempts: <span data-tid="Attempts">{taskInfo.attempts}</span>
</span>
</Fit>
)}
</Fit>
<Fit className={jsStyles.dates()}>
{renderTaskDate(taskInfo, "Enqueued", x => x.ticks)}
{renderTaskDate(taskInfo, "Started", x => x.startExecutingTicks)}
{renderTaskDate(taskInfo, "Finished", x => x.finishExecutingTicks)}
{renderTaskDate(taskInfo, "StateTime", x => x.minimalStartTicks)}
{renderTaskDate(taskInfo, "Expiration", x => x.expirationTimestampTicks)}
</Fit>
</RowStack>
</Fit>
</ColumnStack>
<Fill className={jsStyles.parentTask()}>
<div>
Parent:{" "}
{taskInfo.parentTaskId ? (
<AllowCopyToClipboard>{taskInfo.parentTaskId}</AllowCopyToClipboard>
) : (
"-"
)}
</div>
</Fill>
{allowRerunOrCancel && (
<Fit>
<RowStack baseline block gap={2}>
<Fit>
<Link
data-tid="Cancel"
disabled={!cancelableStates.includes(taskInfo.state)}
onClick={onCancel}
icon={<XIcon16Regular />}>
Cancel
</Link>
</Fit>
<Fit>
<Link
data-tid="Rerun"
disabled={!rerunableStates.includes(taskInfo.state)}
onClick={onRerun}
icon={<ArrowRoundTimeForwardIcon16Regular />}>
Rerun
</Link>
</Fit>
</RowStack>
</Fit>
)}
</Fit>
<Fit className={jsStyles.dates()}>
{renderTaskDate(taskInfo, "Enqueued", x => x.ticks)}
{renderTaskDate(taskInfo, "Started", x => x.startExecutingTicks)}
{renderTaskDate(taskInfo, "Finished", x => x.finishExecutingTicks)}
{renderTaskDate(taskInfo, "StateTime", x => x.minimalStartTicks)}
{renderTaskDate(taskInfo, "Expiration", x => x.expirationTimestampTicks)}
</Fit>
</RowStack>
</Fit>
</ColumnStack>
</RowStack>
);
}
7 changes: 6 additions & 1 deletion cassandra-distributed-task-queue-ui/src/components/TaskTable/TaskTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,10 @@ import { jsStyles } from "./TaskTable.styles";
export interface TaskTableProps {
taskInfos: RtqMonitoringTaskMeta[];
allowRerunOrCancel: boolean;
chosenTasks: Set<string>;
onRerun: (x0: string) => void;
onCancel: (x0: string) => void;
onCheck: (taskId: string) => void;
getTaskLocation: (x0: string) => string | Partial<Location>;
}

Expand All @@ -35,6 +37,7 @@ export class TasksTable extends React.Component<TaskTableProps, TasksTableState>

public shouldComponentUpdate(nextProps: TaskTableProps, nextState: TasksTableState): boolean {
return (
this.props.chosenTasks.size !== nextProps.chosenTasks.size ||
!isEqual(this.props.taskInfos, nextProps.taskInfos) ||
!isEqual(this.props.allowRerunOrCancel, nextProps.allowRerunOrCancel) ||
!isEqual(this.state.openedModal, nextState.openedModal) ||
Expand Down Expand Up @@ -62,7 +65,7 @@ export class TasksTable extends React.Component<TaskTableProps, TasksTableState>
}

public renderRow(item: RtqMonitoringTaskMeta): JSX.Element {
const { allowRerunOrCancel, getTaskLocation } = this.props;
const { allowRerunOrCancel, chosenTasks, onCheck, getTaskLocation } = this.props;
return (
<div key={item.id} className={jsStyles.taskDetailsRow()}>
<TaskDetails
Expand All @@ -72,6 +75,8 @@ export class TasksTable extends React.Component<TaskTableProps, TasksTableState>
onRerun={() => this.rerun(item.id)}
taskInfo={item}
allowRerunOrCancel={allowRerunOrCancel}
isChecked={chosenTasks.has(item.id)}
onCheck={() => onCheck(item.id)}
/>
</div>
);
Expand Down
Loading

0 comments on commit c251693

Please sign in to comment.