All files / src/components/Playbooks Timeline.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { useGetPlaybookExecutionQuery } from "../../store/features/playbook/api/index.ts";
import { useDispatch } from "react-redux";
import { showTaskConfig } from "../../store/features/playbook/playbookSlice.ts";
import Loading from "../common/Loading/index.tsx";
import ExecutingStep from "./timeline/ExecutingStep.js";
import StepConfig from "./timeline/StepConfig.tsx";
import ExecuteNextStep from "./timeline/ExecuteNextStep.tsx";
import ExecutionNavigateButtons from "./timeline/ExecutionNavigateButtons.js";
import useExecutionStack from "../../hooks/playbooks/useExecutionStack.ts";
 
function Timeline() {
  const { isLoading, refetch } = useGetPlaybookExecutionQuery();
  const dispatch = useDispatch();
  const { steps, nextStep, executingStep } = useExecutionStack();
  const showNextStepExecution = Object.keys(nextStep ?? {}).length > 0;
 
  const handleShowConfig = (stepId) => {
    const index = steps.findIndex((step) => step.id === stepId);
    dispatch(showTaskConfig(index));
  };
 
  Iif (isLoading) {
    return <Loading title="Your timeline is loading..." />;
  }
 
  return (
    <main className="p-1 min-h-screen mb-16">
      <div className="border-b p-1 sticky top-0 mb-2 bg-white z-10">
        <h1 className="font-bold text-xl">Timeline</h1>
      </div>
 
      {steps?.length === 0 && <p>No steps executed in the playbook yet</p>}
 
      <div className="flex flex-col gap-8 overflow-scroll">
        {steps?.map((step, index) => (
          <StepConfig key={index} step={step} index={index} />
        ))}
      </div>
 
      <ExecutingStep />
 
      {showNextStepExecution && !executingStep && (
        <ExecuteNextStep stepId={nextStep?.id} refetch={refetch} />
      )}
 
      <ExecutionNavigateButtons steps={steps} />
    </main>
  );
}
 
export default Timeline;