Make fields for incident age condition intuitive

Icinga · May 15, 2024 · ce7d233 · ce7d233
1 parent be66793
commit ce7d233
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 26 deletions.
diff --git a/application/forms/EventRuleConfigElements/EscalationCondition.php b/application/forms/EventRuleConfigElements/EscalationCondition.php
@@ -10,7 +10,6 @@
 use ipl\Html\FormElement\FieldsetElement;
 use ipl\Html\FormElement\SubmitButtonElement;
 use ipl\Stdlib\Filter;
-use ipl\Validator\CallbackValidator;
 use ipl\Web\Filter\QueryString;
 use ipl\Web\Widget\Icon;
 
@@ -111,6 +110,8 @@ protected function assemble(): void
             );
 
             $valName = 'val_' . $i;
+            $valUnit = null;
+            $this->clearPopulatedValue($valName);
             switch ($this->getPopulatedValue('column_' . $i)) {
                 case 'incident_severity':
                     $val = $this->createElement(
@@ -135,29 +136,23 @@ protected function assemble(): void
                     break;
                 case 'incident_age':
                     $val = $this->createElement(
-                        'text',
+                        'number',
                         $valName,
                         [
                             'required'   => true,
-                            'class'      => ['autosubmit', 'right-operand'],
-                            'validators' => [
-                                new CallbackValidator(function ($value, $validator) {
-                                    if (! preg_match('~^\d+(?:\.?\d*)?[hms]{1}$~', $value)) {
-                                        $validator->addMessage(
-                                            $this->translate(
-                                                'Only numbers with optional fractions (separated by a dot)'
-                                                . ' and one of these suffixes are allowed: h, m, s'
-                                            )
-                                        );
-
-                                        return false;
-                                    }
-
-                                    $validator->clearMessages();
-
-                                    return true;
-                                })
-                            ]
+                            'class'      => 'right-operand',
+                            'step'       => 0.5,
+                            'value'      => 1
+                        ]
+                    );
+
+                    $valUnit = $this->createElement(
+                        'select',
+                        'unit_' . $i,
+                        [
+                            'options' => ['m' => 'm', 'h' => 'h'],
+                            'class'   => ['autosubmit', 'unit'],
+                            'value'   => 'm'
                         ]
                     );
 
@@ -174,6 +169,14 @@ protected function assemble(): void
             $this->registerElement($op);
             $this->registerElement($val);
 
+            if ($valUnit) {
+                $this->registerElement($valUnit);
+                $unit = $valUnit->getValue();
+                $value = $val->getValue();
+                $val->getAttributes()->set('min', $unit === 'm' ? 1 : 0.5);
+                $val->getAttributes()->set('value', $unit === 'm' && (float) $value === 0.5 ? 1 : $value);
+            }
+
             $removeButton = null;
 
             if (($conditionCount > 1) || ($conditionCount === 1 && ! $configHasZeroConditionEscalation)) {
@@ -184,7 +187,7 @@ protected function assemble(): void
             }
 
             (new EventRuleDecorator())->decorate($val);
-            $this->conditions[$i] = new EscalationConditionListItem($i, $col, $op, $val, $removeButton);
+            $this->conditions[$i] = new EscalationConditionListItem($i, $col, $op, $val, $valUnit, $removeButton);
         }
 
         if ($removePosition) {
@@ -257,7 +260,8 @@ public function getCondition(): string
 
             $filterStr = $chosenType
                 . $this->getValue('operator_' . $count)
-                . ($this->getValue('val_' . $count) ?? ($chosenType === 'incident_severity' ? 'ok' : ''));
+                . ($this->getValue('val_' . $count) ?? ($chosenType === 'incident_severity' ? 'ok' : '1'))
+                . $this->getValue('unit_' . $count, '');
 
             $filter->add(QueryString::parse($filterStr));
         }

diff --git a/application/forms/EventRuleConfigForm.php b/application/forms/EventRuleConfigForm.php
@@ -285,16 +285,25 @@ public function populate($values): self
 
                 /** @var Condition $filter */
                 $filter = QueryString::parse($condition);
-                $conditionFormValues['column_' . $count] = $filter->getColumn() === 'placeholder'
+                $conditionCol = $filter->getColumn();
+                $conditionFormValues['column_' . $count] = $conditionCol === 'placeholder'
                     ? null
-                    : $filter->getColumn();
+                    : $conditionCol;
 
                 if ($conditionFormValues['column_' . $count]) {
                     $conditionFormValues['type_' . $count] = $conditionFormValues['column_' . $count];
                 }
 
                 $conditionFormValues['operator_' . $count] = QueryString::getRuleSymbol($filter);
-                $conditionFormValues['val_' . $count] = $filter->getValue();
+                $conditionValue = $filter->getValue();
+
+                if ($conditionCol === 'incident_age') {
+                    $age = str_split($conditionValue, strlen($conditionValue) - 1);
+                    $conditionFormValues['val_' . $count] = $age[0];
+                    $conditionFormValues['unit_' . $count] = $age[1];
+                } else {
+                    $conditionFormValues['val_' . $count] = $conditionValue;
+                }
             }
 
             $formValues['escalation-condition_' . bin2hex($position)] = $conditionFormValues;

diff --git a/library/Notifications/Widget/ItemList/EscalationConditionListItem.php b/library/Notifications/Widget/ItemList/EscalationConditionListItem.php
@@ -29,25 +29,31 @@ class EscalationConditionListItem extends BaseHtmlElement
     /** @var int */
     protected $position;
 
+    /** @var ?FormElement Unit of the condition value */
+    protected $conditionUnit;
+
     /**
      * Create the condition list item of the escalation
      *
      * @param FormElement $conditionType
      * @param FormElement $operator
      * @param FormElement $conditionVal
+     * @param ?FormElement $conditionUnit,
      * @param ?SubmitButtonElement $removeButton
      */
     public function __construct(
         int $position,
         FormElement $conditionType,
         FormElement $operator,
         FormElement $conditionVal,
+        ?FormElement $conditionUnit,
         ?SubmitButtonElement $removeButton
     ) {
         $this->position = $position;
         $this->conditionType = $conditionType;
         $this->operator = $operator;
         $this->conditionVal = $conditionVal;
+        $this->conditionUnit = $conditionUnit;
         $this->removeButton = $removeButton;
     }
 
@@ -89,6 +95,12 @@ protected function assemble(): void
         $this->conditionVal->setAttribute('name', 'val_' . $this->position);
 
         $this->addHtml($this->conditionType, $this->operator, $this->conditionVal);
+
+        if ($this->conditionUnit) {
+            $this->conditionUnit->setAttribute('name', 'unit_' . $this->position);
+            $this->addHtml($this->conditionUnit->setAttribute('name', 'unit_' . $this->position));
+        }
+
         if ($this->removeButton) {
             $this->removeButton->setSubmitValue((string) $this->position);
             $this->addHtml($this->removeButton);

diff --git a/public/css/event-rule-config.less b/public/css/event-rule-config.less
@@ -177,6 +177,12 @@
           margin: 0;
         }
 
+        .unit {
+          border-radius: 0 0.4em 0.4em 0;;
+          min-width: 3.5em;
+          margin-left: 1px;
+        }
+
         .errors + .remove-button {
           margin: 0;
         }
@@ -240,6 +246,12 @@
   margin-right: 1px;
 }
 
+// <(needed pixel size)/(font size)>em Readjust number type input element's minimum width in escalation condition
+.escalation-condition .options input[type='number'] {
+  border-radius: 0;
+  min-width: 77/12em;
+}
+
 .escalation-condition,
 .escalation-recipient {
   .options + .add-button,