All files / src/components/DynamicAlerts/create ConditionRuleSet.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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { useDispatch, useSelector } from "react-redux";
import { additionalStateSelector } from "../../../store/features/drawers/selectors";
import useEdgeConditions from "../../../hooks/playbooks/useEdgeConditions";
import CustomInput from "../../Inputs/CustomInput";
import { InputTypes, StepRuleTypes } from "../../../types";
import { functionOptions } from "../../../utils/conditionals/functionOptions";
import { ResultTypeTypes } from "../../../utils/conditionals/resultTypeOptions";
import { RuleType } from "../../common/Conditions/types";
import { operationOptions } from "../../../utils/conditionals/operationOptions";
import CustomButton from "../../common/CustomButton";
import { DeleteRounded } from "@mui/icons-material";
import { removeStepRuleSetForDynamicAlert } from "../../../store/features/playbook/playbookSlice";
 
type ConditionRuleSetProps = {
  ruleSetIndex: number;
  relationId: string;
};
 
const RULE_INDEX = 0;
const RULE_KEY = "timeseries";
const STEP_RULE_KEY = StepRuleTypes.COMPARE_TIME_WITH_CRON.toLowerCase();
 
function ConditionRuleSet({ ruleSetIndex, relationId }: ConditionRuleSetProps) {
  const dispatch = useDispatch();
  const { rules, step_rules, handleRule } = useEdgeConditions(relationId);
  const rule = rules?.[RULE_INDEX]?.[RULE_KEY];
  const stepRule = step_rules?.[RULE_INDEX]?.[STEP_RULE_KEY];
 
  const handleRuleChange = (val: any, key: string) => {
    handleRule(`${RULE_KEY}.${key}`, val, RULE_INDEX, RuleType.RULE);
  };
 
  const handleStepRuleChange = (val: any, key: string) => {
    handleRule(`${STEP_RULE_KEY}.${key}`, val, RULE_INDEX, RuleType.STEP_RULE);
  };
 
  const handleDeleteRuleSet = () => {
    dispatch(removeStepRuleSetForDynamicAlert(relationId));
  };
 
  Iif (!rule || !stepRule) return;
 
  return (
    <div className="flex flex-wrap gap-2 border-b py-1 items-center">
      <CustomInput
        inputType={InputTypes.DROPDOWN}
        options={functionOptions(ResultTypeTypes.TIMESERIES)}
        value={rule.function}
        placeholder={`Function`}
        handleChange={(id: string) => handleRuleChange(id, `function`)}
      />
 
      <CustomInput
        inputType={InputTypes.DROPDOWN}
        options={operationOptions}
        value={rule.operator}
        placeholder={`Operator`}
        handleChange={(id: string) => handleRuleChange(id, `operator`)}
      />
 
      <CustomInput
        inputType={InputTypes.TEXT}
        handleChange={(val: string) => handleRuleChange(val, `threshold`)}
        value={rule.threshold}
        placeholder={"Threshold"}
        className="!w-[200px]"
      />
 
      <CustomInput
        inputType={InputTypes.CRON}
        error={undefined}
        options={operationOptions}
        value={stepRule.rule}
        placeholder={`Time Schedule (UTC)`}
        handleChange={(id: string) => handleStepRuleChange(id, `rule`)}
      />
 
      {ruleSetIndex > 0 && (
        <CustomButton className="w-fit" onClick={handleDeleteRuleSet}>
          <DeleteRounded fontSize="small" />
        </CustomButton>
      )}
    </div>
  );
}
 
export default ConditionRuleSet;