workflows

DrDroidLab · Apr 24, 2024 · 9148748 · 9148748
1 parent 2881bcc
commit 9148748
Show file tree

Hide file tree

Showing 11 changed files with 553 additions and 0 deletions.
diff --git a/web/src/components/Playbooks/workflows/BasicDetails.jsx b/web/src/components/Playbooks/workflows/BasicDetails.jsx
@@ -0,0 +1,110 @@
+import React from "react";
+import ValueComponent from "../../ValueComponent";
+import SelectComponent from "../../SelectComponent";
+import { RefreshRounded } from "@mui/icons-material";
+import { CircularProgress } from "@mui/material";
+import { useGetPlaybooksQuery } from "../../../store/features/playbook/api/index.ts";
+import { useSelector } from "react-redux";
+import { currentWorkflowSelector } from "../../../store/features/workflow/workflowSlice.ts";
+import SlackTriggerForm from "./triggers/SlackTriggerForm.jsx";
+import { triggerTypes } from "../../../utils/workflow/triggerTypes.ts";
+import { handleInput, handleSelect } from "./utils/handleInputs.ts";
+
+function BasicDetails() {
+  const {
+    data,
+    isFetching: playbooksLoading,
+    refetch,
+  } = useGetPlaybooksQuery({});
+  const currentWorkflow = useSelector(currentWorkflowSelector);
+
+  return (
+    <>
+      <div className="flex gap-4">
+        <div className="space-y-2">
+          <label
+            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            htmlFor="playbook">
+            Workflow Name
+          </label>
+          <ValueComponent
+            valueType={"STRING"}
+            placeHolder={"Enter workflow name"}
+            value={currentWorkflow.name}
+            onValueChange={(val) => handleInput("name", val)}
+          />
+        </div>
+        <div className="space-y-2">
+          <label
+            className="flex gap-2 items-center text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            htmlFor="playbook">
+            Select Playbook
+            <a
+              href="/playbooks/create"
+              rel="noreferrer"
+              target="_blank"
+              className="border border-violet-500 p-1 rounded text-violet-500 hover:bg-violet-500 hover:text-white transition-all text-xs">
+              + Create New
+            </a>
+          </label>
+          <div className="flex gap-2 items-center">
+            <SelectComponent
+              data={data?.playbooks?.map((e) => {
+                return {
+                  id: e.id,
+                  label: e.name,
+                  playbook: e,
+                };
+              })}
+              placeholder={`Select Playbook`}
+              onSelectionChange={(_, val) => {
+                handleSelect("playbookId", val);
+              }}
+              selected={currentWorkflow?.playbookId}
+              searchable={true}
+            />
+            {playbooksLoading && <CircularProgress size={20} />}
+            <button onClick={refetch}>
+              <RefreshRounded
+                className={`text-gray-400 hover:text-gray-600 transition-all`}
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-col gap-4">
+        <div className="space-y-2">
+          <label
+            className="flex gap-2 items-center text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            htmlFor="playbook">
+            Trigger Type
+          </label>
+          <div className="flex gap-2 items-center">
+            <SelectComponent
+              data={triggerTypes?.map((e) => {
+                return {
+                  id: e.id,
+                  label: e.label,
+                };
+              })}
+              placeholder={`Select Workflow Type`}
+              onSelectionChange={(_, val) => {
+                handleSelect("workflowType", val);
+              }}
+              selected={currentWorkflow?.workflowType}
+              searchable={true}
+            />
+          </div>
+        </div>
+        {currentWorkflow.workflowType === "slack" && (
+          <SlackTriggerForm
+            handleInput={handleInput}
+            handleSelect={handleSelect}
+          />
+        )}
+      </div>
+    </>
+  );
+}
+
+export default BasicDetails;
diff --git a/web/src/components/Playbooks/workflows/CreateWorkflow.jsx b/web/src/components/Playbooks/workflows/CreateWorkflow.jsx
@@ -0,0 +1,29 @@
+import React from "react";
+import Heading from "../../Heading.js";
+import BasicDetails from "./BasicDetails.jsx";
+import ScheduleDetails from "./ScheduleDetails.jsx";
+import NotificationDetails from "./NotificationDetails.jsx";
+
+function CreateTrigger() {
+  return (
+    <div>
+      <Heading heading={"Create Workflow"} />
+      <div className="p-6 flex flex-col gap-6 bg-white border rounded m-2">
+        <BasicDetails />
+        <hr />
+        <ScheduleDetails />
+        <hr />
+        <NotificationDetails />
+        <div className="flex items-center">
+          <button
+            className="text-sm bg-transparent hover:bg-violet-500 p-2 border-violet-500 border hover:text-white text-violet-500 rounded transition-all"
+            type="submit">
+            Save
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default CreateTrigger;
diff --git a/web/src/components/Playbooks/workflows/NotificationDetails.jsx b/web/src/components/Playbooks/workflows/NotificationDetails.jsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { notificationOptions } from "../../../utils/workflow/notificationOptions.ts";
+import { HandleInputRender } from "../../common/HandleInputRender/HandleInputRender.jsx";
+
+function NotificationDetails() {
+  return (
+    <div>
+      <label className="text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 block font-medium">
+        Notifications
+      </label>
+
+      {notificationOptions.map((option) => (
+        <HandleInputRender key={option.id} option={option} />
+      ))}
+    </div>
+  );
+}
+
+export default NotificationDetails;
diff --git a/web/src/components/Playbooks/workflows/ScheduleDetails.jsx b/web/src/components/Playbooks/workflows/ScheduleDetails.jsx
@@ -0,0 +1,53 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import { currentWorkflowSelector } from "../../../store/features/workflow/workflowSlice.ts";
+import { scheduleOptions } from "../../../utils/workflow/scheduleOptions.tsx";
+import { HandleInputRender } from "../../common/HandleInputRender/HandleInputRender.jsx";
+import { handleSelect } from "./utils/handleInputs.ts";
+
+function ScheduleDetails() {
+  const currentWorkflow = useSelector(currentWorkflowSelector);
+
+  return (
+    <div>
+      <label className="text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 block font-medium">
+        What happens when the workflow is triggered?
+        <p className="text-gray-500 text-xs italic">Select one of these</p>
+      </label>
+      <div className="flex items-center mt-2 overflow-hidden w-fit">
+        {scheduleOptions.map((option) => (
+          <button
+            key={option.id}
+            data-type="schedule"
+            onClick={(e) => handleSelect(e, option)}
+            className={`${
+              currentWorkflow.schedule === option.id
+                ? "!bg-white !text-violet-500 border-violet-500"
+                : "text-gray-500 bg-gray-50 border-gray-200"
+            } p-2 text-sm hover:bg-gray-100 cursor-pointer transition-all rounded border`}>
+            {option.label}
+          </button>
+        ))}
+      </div>
+      <div className="mt-4">
+        {scheduleOptions
+          .find((e) => e.id === currentWorkflow.schedule)
+          ?.options.map((option) => (
+            <HandleInputRender key={option.id} option={option} />
+          ))}
+      </div>
+      {(currentWorkflow["cron-schedule"] ||
+        (currentWorkflow.interval && currentWorkflow.duration)) && (
+        <p className="mt-4 text-xs p-1 bg-gray-50 rounded italic">{`This configuration means that this workflow will run ${
+          currentWorkflow["cron-schedule"]
+            ? `as per {${currentWorkflow["cron-schedule"]}} schedule`
+            : ""
+        } for the next ${currentWorkflow.duration} ${
+          currentWorkflow.interval
+        }`}</p>
+      )}
+    </div>
+  );
+}
+
+export default ScheduleDetails;
diff --git a/web/src/components/Playbooks/workflows/triggers/AlertsTable.jsx b/web/src/components/Playbooks/workflows/triggers/AlertsTable.jsx
@@ -0,0 +1,81 @@
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+} from "@mui/material";
+import NoExistingTrigger from "./NoExistingTrigger";
+import { renderTimestamp } from "../../../../utils/DateUtils";
+import { ExpandMore } from "@mui/icons-material";
+
+const AlertsTable = ({ data }) => {
+  return (
+    <>
+      <p
+        className="font-bold mb-2"
+        style={{ paddingLeft: "1rem", paddingTop: "10px" }}>
+        Alerts matching the search criteria
+      </p>
+      <Table stickyHeader>
+        <TableHead>
+          <TableRow>
+            <TableCell>Title</TableCell>
+            <TableCell>Timestamp</TableCell>
+            <TableCell>Alert Tags</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {data?.map((item, index) => (
+            <TableRow
+              key={index}
+              sx={{
+                "&:last-child td, &:last-child th": { border: 0 },
+              }}>
+              <TableCell component="td" scope="row">
+                {item.alert_title}
+              </TableCell>
+              <TableCell component="td" scope="row">
+                {renderTimestamp(item.alert_timestamp)}
+              </TableCell>
+              <TableCell component="td" scope="row">
+                <Accordion>
+                  <AccordionSummary
+                    expandIcon={<ExpandMore />}
+                    aria-controls="panel1a-content"
+                    id="panel1a-header">
+                    Details
+                  </AccordionSummary>
+                  <AccordionDetails>
+                    <Table>
+                      <TableHead>
+                        <TableRow>
+                          <TableCell>Key</TableCell>
+                          <TableCell>Value</TableCell>
+                        </TableRow>
+                      </TableHead>
+                      <TableBody>
+                        {item.alert_tags.map((tag, index) => (
+                          <TableRow key={index}>
+                            <TableCell>{tag.key}</TableCell>
+                            <TableCell>{tag.value}</TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </AccordionDetails>
+                </Accordion>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+      {!data?.length ? <NoExistingTrigger /> : null}
+    </>
+  );
+};
+
+export default AlertsTable;
diff --git a/web/src/components/Playbooks/workflows/triggers/NoExistingTrigger.jsx b/web/src/components/Playbooks/workflows/triggers/NoExistingTrigger.jsx
@@ -0,0 +1,25 @@
+import { Link } from "react-router-dom";
+
+const NoExistingTrigger = () => {
+  return (
+    <>
+      <div className="justify-center w-full items-center flex flex-col py-8">
+        <img src="/logo.png" alt="logo" className="h-20 mb-4 " />
+        <div className="text-sm text-gray-500 mb-2 text-center">
+          No Alerts found
+        </div>
+        <div>
+          <Link to="https://docs.drdroid.io" target="_blank">
+            <div
+              variant="contained"
+              className="text-sm rounded-lg py-2 px-2 cursor-pointer border-violet-600 text-violet-600 dura hover:text-violet-700 underline flex">
+              Check Documentation
+            </div>
+          </Link>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default NoExistingTrigger;