Fixed Incident-response-trigger-select-cause-modal-scroll (#402) (#412)

Author: mjabascal10

frontend/src/app/incident-response/shared/component/ir-create-rule/ir-create-rule.component.html

@@ -42,9 +42,9 @@
           <span class="text-blue-800 font-weight-bold step-title">
           Summary
         </span>
-        <div [ngClass]="isCompleted(4)?'step-success':step===3?'step-active':'step-inactive'"
+        <div [ngClass]="isCompleted(4) ? 'step-success':step === 4 ?'step-active' : 'step-inactive'"
              class="round-indicator">
-          <i class="step-icon"  [ngClass]="isCompleted(4)?'icon-checkmark3':'icon-eye'"></i>
+          <i class="step-icon"  [ngClass]="isCompleted(4) ? 'icon-checkmark3' : 'icon-eye'"></i>
         </div>
       </div>
     </div>
@@ -126,7 +126,7 @@
                        [loading]="loadingData(condition.get('field').value)"
                        [multiple]="false"
                        [searchable]="true"
-                       class="flex-grow-1"
+                       class="flex-grow-1 w-30"
                        formControlName="value"
                        id="values">
             </ng-select>
@@ -149,7 +149,7 @@
         </div>
       </div>
       <div class="d-flex mt-3 flex-column">
-        <div class="col-12 p-0">
+        <div class="col-6 p-0">
           <label class="pb-1" for="exclude">Agent platform is</label>
           <ng-select [clearable]="false"
                      [items]="platforms"
@@ -179,13 +179,15 @@
         </div>-->
       </div>
       <div class="d-flex mt-3 flex-column">
-        <div class="col-12">
           <app-utm-toggle (toggleChange)="formRule.get('agentType').setValue($event)"
                           [active]="formRule.get('agentType').value"
                           [emitAtStart]="false"
                           [customClass]="'pl-3'"
-                          [label]="'Select the agent handling strategy for the automation. By default, commands won\'t run on specified agents, even if the trigger conditions match. Alternatively, choose a default agent to run the automation if no other agent matches the criteria.'" class="mb-3"></app-utm-toggle>
-        </div>
+                          [label]="'Agent handling strategy for the automation'"></app-utm-toggle>
+            <div class="alert alert-info alert-styled-right mt-1 info-dismissible">
+              <span class="font-weight-semibold">Info! </span>
+              <span>Select the agent handling strategy for the automation. By default, commands won't run on specified agents, even if the trigger conditions match. Alternatively, choose a default agent to run the automation if no other agent matches the criteria.</span>
+            </div>
       </div>
       <div *ngIf="formRule.get('agentType').value" class="d-flex mt-3 flex-column">
         <div class="col-12 p-0">
@@ -294,7 +296,6 @@
 
     <button (click)="createRule()"
             *ngIf="step===4"
-            [disabled]="!command || command === ''"
             class="btn utm-button utm-button-primary ml-2">
       <i [ngClass]="creating?'icon-spinner2 spinner':'icon-terminal'"></i>
       {{rule ? 'Edit' : 'Create'}} automation&nbsp;

frontend/src/app/incident-response/shared/component/ir-create-rule/ir-create-rule.component.ts

@@ -215,7 +215,7 @@ export class IrCreateRuleComponent implements OnInit {
     this.formRule.get('name').setValue(this.rulePrefix + this.formRule.get('name').value);
   }
 
- clearAgentTypeSelection(){
+ clearAgentTypeSelection() {
    if (!this.formRule.get('agentType').value) {
      this.formRule.get('excludedAgents').setValue([]);
    } else {
@@ -247,11 +247,13 @@ export class IrCreateRuleComponent implements OnInit {
   }
 
   isDisable(step: number) {
+    console.log((!this.formRule.get('agentType').value && this.formRule.get('defaultAgent').value === ''));
     switch (step) {
       case 1:
         return !this.formRule.get('name').valid || !this.formRule.get('description').valid || this.exist;
       case 2:
-        return !this.formRule.get('agentPlatform').valid || this.ruleConditions.length === 0;
+        return !this.formRule.get('agentPlatform').valid || this.ruleConditions.length === 0
+            || (!this.formRule.get('agentType').value && !this.formRule.get('defaultAgent').value);
       case 3:
         return !this.command || this.command === '';
     }

frontend/src/app/incident-response/shared/component/ir-summary/ir-summary.component.html

@@ -6,12 +6,13 @@
       It will evaluate the following conditions:
     </p>
 
-    <div class="alert-details mb-1 mt-1"
-         *ngFor="let condition of conditions">
-      <span class="text-blue-800 font-weight-light has-minimum-width">{{getFieldName(condition.field)}}</span>&nbsp;
-      <span class="font-weight-light  font-weight-semibold">{{getFilterName(condition.operator)}}</span>&nbsp;
-      <span class="">{{condition.value}}</span>&nbsp;
-    </div>
+    <ul class="mb-1 mt-1">
+      <li class="ml-2"  *ngFor="let condition of conditions">
+        <span class="text-blue-800 font-weight-light has-minimum-width">{{'- ' + getFieldName(condition.field)}}</span>&nbsp;
+        <span class="font-weight-light  font-weight-semibold">{{getFilterName(condition.operator)}}</span>&nbsp;
+        <span class="">{{condition.value}}</span>&nbsp;
+      </li>
+    </ul>
 
     <span>
       On agents operating on the <strong>{{ platform | capitalize }}</strong> platform.