Bugfix/10.6.2/update sophos integration guide

frontend/src/app/app-module/guides/guide-sophos/guide-sophos.component.html

@@ -14,62 +14,42 @@ <h6 class="font-weight-semibold mt-3 mb-3">
       How to send alert and event data to UTMStack:
     </h6>
     <ol class="setup_list">
-      <li>
-        <p class="step-guide">
-          <span class="step_number">1</span>
-          You require a token to access event data via the API. In Sophos Central Admin, go to <strong>Global&nbsp;Settings</strong>
-          &gt; <strong>API Token Management</strong>.
-        </p>
-      </li>
-      <li>
-        <p class="step-guide">
-          <span class="step_number">2</span>
-          To create a new token, click <strong>Add token</strong> from the top-right corner of the screen.
-        </p>
-      </li>
-      <li>
-        <p class="step-guide">
-          <span class="step_number">3</span>
-          Select a <strong>token name</strong> and click <strong>Save</strong>. The <strong>API Token Summary</strong>
-          for this token is displayed.
-        </p>
-      </li>
-      <li>
-        <p class="step-guide">
-          <span class="step_number">4</span>
-          Click ont the <strong>Copy</strong> button to copy your <strong>API Access URL + Headers</strong> from the <strong>API Token
-          Summary</strong> section into your clipboard.
-          <img alt=""
-               class="step-img"
-               src="../../../../assets/img/guides/sophos/sophos-step-5.png"
-               style="height: 400px!important; width: auto">
-        </p>
-      </li>
-      <li>
-        <p class="step-guide">
-          <span class="step_number">5</span>
-          Insert information in the following inputs.You can add more than one Sophos
-          configuration by clicking on Add tenant button.
-        </p>
-        <div class="row mt-3">
-          <div class="col-lg-12 col-md-12 col-sm-12">
-            <app-int-generic-group-config [moduleId]="integrationId"
-                                          (configValidChange)="configValidChange($event)"
-                                          [serverId]="serverId"></app-int-generic-group-config>
-          </div>
-        </div>
-      </li>
-      <li>
-        <p class="step-guide mb-3">
-          <span class="step_number">6</span>
-          Click on the button shown below, to activate the UTMStack features related to this integration
-        </p>
-        <app-app-module-activate-button [module]="module.SOPHOS" [type]="'integration'"
-                                        [disabled]="configValidity"
-                                        [serverId]="serverId"
-                                        class="mt-3">
-        </app-app-module-activate-button>
-      </li>
+      <app-utm-list [items]="steps">
+        <ng-template stepTemplateRef let-step>
+          <li>
+            <app-step>
+              <span stepNumber>{{step.id}}</span>
+              <div [innerHtml]="step.name"></div>
+              <ng-container *ngIf="step.content">
+
+                <ng-template [ngIf]="step.content['images']">
+                  <app-utm-list [items]="step.content['images']">
+                    <ng-template stepTemplateRef let-image>
+                      <img [alt]="image.alt" class="step-img" [src]="image.src">
+                    </ng-template>
+                  </app-utm-list>
+                </ng-template>
+
+                <ng-template [ngIf]="step.content.id === 'stepContent5'">
+                  <app-int-generic-group-config [moduleId]="integrationId"
+                                                (configValidChange)="configValidChange($event)"
+                                                [serverId]="serverId"></app-int-generic-group-config>
+                </ng-template>
+
+                <ng-template [ngIf]="step.content.id === 'stepContent6'">
+                  <div  class="mt-3">
+                    <app-app-module-activate-button [module]="module.SOPHOS" [type]="'integration'"
+                                                    [disabled]="configValidity"
+                                                    [serverId]="serverId">
+                    </app-app-module-activate-button>
+                  </div>
+                </ng-template>
+
+              </ng-container>
+            </app-step>
+          </li>
+        </ng-template>
+      </app-utm-list>
     </ol>
   </div>
 </div>

frontend/src/app/app-module/guides/guide-sophos/guide-sophos.component.ts

@@ -1,5 +1,9 @@
 import {Component, Input, OnInit} from '@angular/core';
 import {UtmModulesEnum} from '../../shared/enum/utm-module.enum';
+import {AS400STEPS} from "../guide-as400/as400.steps";
+import {ACTIONS, PLATFORM} from "../guide-as400/constants";
+import {Step} from "../shared/step";
+import {SOPHOS_STEPS} from "./sophos.steps";
 
 @Component({
   selector: 'app-guide-sophos',
@@ -11,6 +15,9 @@ export class GuideSophosComponent implements OnInit {
   @Input() serverId: number;
   module = UtmModulesEnum;
   configValidity: boolean;
+  steps = SOPHOS_STEPS;
+  platforms = PLATFORM;
+  actions = ACTIONS;
 
   constructor() {
   }
@@ -21,5 +28,4 @@ export class GuideSophosComponent implements OnInit {
   configValidChange($event: boolean) {
     this.configValidity = !$event;
   }
-
 }

frontend/src/app/app-module/guides/guide-sophos/sophos.steps.ts

@@ -0,0 +1,31 @@
+import {Step} from '../shared/step';
+
+export const SOPHOS_STEPS: Step[] = [
+  {id: '1', name: 'You require a Client ID and Client Secret to access event data via the API. ' +
+                  'In Sophos Central Admin, go to <strong> Global Settings > API Credentials Management </strong>. <br>',
+  },
+  {id: '2', name: 'To create a new credential, click Add Credential from the top-right corner of the screen'},
+  {id: '3', name: 'Enter a name and description for the credential, then select the role you want to assign and click Add.'},
+  {id: '4', name: 'Click Show Client Secret to view the Client ID and Client Secret, then click Copy to store them securely. <br>' +
+                  '<div class="w-100 alert alert-info alert-styled-right mb-3 alert-dismissible">' +
+                    'The Client Secret is only visible once. Ensure you copy and save it securely</div>',
+    content: {
+      id: 'stepContent4',
+      images: [{
+        alt: 'Client Secrets',
+        src: '../../../../assets/img/guides/sophos/sophos-step-4.png',
+      }]
+    }
+  },
+  {id: '5', name: 'Insert information in the following inputs.You can add more than one Sophos configuration ' +
+                  'by clicking on Add tenant button.',
+    content: {
+      id: 'stepContent5'
+    }
+  },
+  {id: '6', name: 'Click on the button shown below, to activate the UTMStack features related to this integration',
+    content: {
+      id: 'stepContent6'
+    }
+  }
+];

frontend/src/app/data-management/alert-management/alert-view/alert-view.component.ts

@@ -1,6 +1,6 @@
 import {HttpResponse} from '@angular/common/http';
 import { Component, OnDestroy, OnInit} from '@angular/core';
-import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
+import {ActivatedRoute, Router} from '@angular/router';
 import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
 import {TranslateService} from '@ngx-translate/core';
 import {ResizeEvent} from 'angular-resizable-element';
@@ -47,16 +47,14 @@ import {SaveAlertReportComponent} from '../alert-reports/shared/components/save-
 import {AlertDataTypeBehavior} from '../shared/behavior/alert-data-type.behavior';
 import {AlertFiltersBehavior} from '../shared/behavior/alert-filters.behavior';
 import {AlertStatusBehavior} from '../shared/behavior/alert-status.behavior';
-import {AlertUpdateTagBehavior} from '../shared/behavior/alert-update-tag.behavior';
 import {RowToFiltersComponent} from '../shared/components/filters/row-to-filter/row-to-filters.component';
 import {EventDataTypeEnum} from '../shared/enums/event-data-type.enum';
-import {AlertManagementService} from '../shared/services/alert-management.service';
 import {AlertTagService} from '../shared/services/alert-tag.service';
 import {getCurrentAlertStatus, getStatusName} from '../shared/util/alert-util-function';
 import {CheckEmailConfigService, ParamShortType} from '../../../shared/services/util/check-email-config.service';
-import {Subject} from "rxjs";
-import {takeUntil} from "rxjs/operators";
-import {ElasticDataTypesEnum} from "../../../shared/enums/elastic-data-types.enum";
+import {Subject} from 'rxjs';
+import {takeUntil} from 'rxjs/operators';
+import {ElasticDataTypesEnum} from '../../../shared/enums/elastic-data-types.enum';
 
 @Component({
   selector: 'app-alert-view',