styles(ui): scss and ts linting errors fixed

ui/.stylelintrc.json

@@ -1,4 +1,5 @@
 {
+  "defaultSeverity": "warning",
   "rules": {
     "color-hex-case": "lower",
     "color-no-invalid-hex": true,

ui/package.json

@@ -20,10 +20,10 @@
     "build:prod:beta": "npm run config:env && npm run build -- --configuration beta --aot",
     "test": "ng test",
     "test:coverage": "rimraf coverage && npm run test -- --code-coverage",
-    "lint": "ng lint",
+    "lint": "tslint -c ./tslint.json 'src/**/*{.ts,.tsx}'",
     "lint:fix": "tslint --fix -c ./tslint.json 'src/**/*{.ts,.tsx}'",
-    "lint:styles": "stylelint ./src/**/*.scss",
-    "lint:styles:fix": "stylelint ./src/**/*.scss --fix",
+    "lint:styles": "npx stylelint './src/**/*.{css,scss}'",
+    "lint:styles:fix": "npx stylelint './src/**/*.{css,scss}' --fix",
     "lint:ci": "npm run lint && npm run lint:styles",
     "pree2e": "webdriver-manager update --standalone false --gecko false",
     "e2e": "ng e2e",

ui/src/app/auth/pages/register/register.component.scss

@@ -1,10 +1,10 @@
 @import '../login/login.component';
 
-.accept-group-display{
+.accept-group-display {
   display: inline-flex;
   margin-top: 0.5rem;
   align-items: stretch;
   .label {
     margin-top: 0.9rem;
   }
-}
+}

ui/src/app/common/services/filter.service.ts

@@ -34,9 +34,9 @@ export class FilterService {
     const storedFiltersList = JSON.parse(storedFilters);
     let found = false;
 
-    storedFiltersList.map((filter) => {
-      if (filter.name === 'Name' && filter.prop === 'name') {
-        this.searchName = filter.param;
+    storedFiltersList.map((f) => {
+      if (f.name === 'Name' && f.prop === 'name') {
+        this.searchName = f.param;
         found = true;
       }
     });
@@ -98,8 +98,8 @@ export class FilterService {
   }
 
   getMultiAppliedParams(filterName: string) {
-    const filter = this._filters.find((f) => f.name === filterName);
-    return filter?.param ? filter.param : [];
+    const _filter = this._filters.find((f) => f.name === filterName);
+    return _filter?.param ? _filter.param : [];
   }
 
   // make a decorator out of this?

ui/src/app/common/services/http-codes.ts

@@ -2,4 +2,4 @@ import { StatusCodes } from 'http-status-codes';
 
 export function getStatusCodeText(statusCode: number): string {
     return StatusCodes[statusCode];
-};
+}

ui/src/app/pages/datasets/policies.agent/add/agent.policy.add.component.ts

@@ -3,12 +3,22 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { NotificationsService } from 'app/common/services/notifications/notifications.service';
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { AgentPolicy, AgentPolicyBackend } from 'app/common/interfaces/orb/agent.policy.interface';
+import {
+  AgentPolicy,
+  AgentPolicyBackend,
+} from 'app/common/interfaces/orb/agent.policy.interface';
 import { AgentPoliciesService } from 'app/common/services/agents/agent.policies.service';
 import { STRINGS } from '../../../../../assets/text/strings';
 import { Tags } from 'app/common/interfaces/orb/tag';
 import { CodeEditorService } from 'app/common/services/code.editor.service';
-import { POLICY_DIODE_CONFIG_JSON, POLICY_DIODE_CONFIG_YAML, POLICY_OTEL_CONFIG_JSON, POLICY_OTEL_CONFIG_YAML, POLICY_PKTVISOR_CONFIG_JSON, POLICY_PKTVISOR_CONFIG_YAML } from 'app/shared/configurations/configurations_schemas';
+import {
+  POLICY_DIODE_CONFIG_JSON,
+  POLICY_DIODE_CONFIG_YAML,
+  POLICY_OTEL_CONFIG_JSON,
+  POLICY_OTEL_CONFIG_YAML,
+  POLICY_PKTVISOR_CONFIG_JSON,
+  POLICY_PKTVISOR_CONFIG_YAML,
+} from 'app/shared/configurations/configurations_schemas';
 const CONFIG = {
   TAPS: 'TAPS',
   BACKEND: 'BACKEND',
@@ -37,9 +47,9 @@ export class AgentPolicyAddComponent implements OnInit {
   // hold info retrieved
   availableBackends: {
     [propName: string]: {
-      backend: string,
-      description: string,
-    },
+      backend: string;
+      description: string;
+    };
   };
 
   agentPolicy: AgentPolicy;
@@ -105,11 +115,10 @@ export class AgentPolicyAddComponent implements OnInit {
   format = 'yaml';
 
   // #load controls
-  isLoading = Object.entries(CONFIG)
-    .reduce((acc, [value]) => {
-      acc[value] = false;
-      return acc;
-    }, {}) as { [propName: string]: boolean };
+  isLoading = Object.entries(CONFIG).reduce((acc, [value]) => {
+    acc[value] = false;
+    return acc;
+  }, {}) as { [propName: string]: boolean };
 
   selectedTags: Tags;
 
@@ -137,9 +146,14 @@ export class AgentPolicyAddComponent implements OnInit {
     Promise.all([
       this.isEdit ? this.retrieveAgentPolicy() : Promise.resolve(),
       this.getBackendsList(),
-    ]).catch(reason => console.warn(`Couldn't fetch data. Reason: ${reason}`))
+    ])
+      .catch((reason) => console.warn(`Couldn't fetch data. Reason: ${reason}`))
       .then(() => this.updateForms())
-      .catch((reason) => console.warn(`Couldn't fetch ${this.agentPolicy?.backend} data. Reason: ${reason}`));
+      .catch((reason) =>
+        console.warn(
+          `Couldn't fetch ${this.agentPolicy?.backend} data. Reason: ${reason}`,
+        ),
+      );
   }
   ngOnInit() {
     this.selectedTags = this.agentPolicy?.tags || {};
@@ -175,29 +189,35 @@ export class AgentPolicyAddComponent implements OnInit {
   }
 
   retrieveAgentPolicy() {
-    return new Promise(resolve => {
-      this.agentPoliciesService.getAgentPolicyById(this.agentPolicyID).subscribe(policy => {
-        this.agentPolicy = policy;
-        this.isLoading[CONFIG.AGENT_POLICY] = false;
-        resolve(policy);
-      });
+    return new Promise((resolve) => {
+      this.agentPoliciesService
+        .getAgentPolicyById(this.agentPolicyID)
+        .subscribe((policy) => {
+          this.agentPolicy = policy;
+          this.isLoading[CONFIG.AGENT_POLICY] = false;
+          resolve(policy);
+        });
     });
   }
 
   isLoadComplete() {
-    return !Object.values(this.isLoading).reduce((prev, curr) => prev || curr, false);
+    return !Object.values(this.isLoading).reduce(
+      (prev, curr) => prev || curr,
+      false,
+    );
   }
 
   readyForms() {
     this.detailsFG = this._formBuilder.group({
-      name: [name, [
+      name: [
+        name,
+        [
           Validators.required,
           Validators.pattern('^[a-zA-Z_][a-zA-Z0-9_-]*$'),
           Validators.maxLength(64),
-      ]],
-      description: [[
-        Validators.maxLength(64),
-      ]],
+        ],
+      ],
+      description: [[Validators.maxLength(64)]],
       backend: [[Validators.required]],
     });
   }
@@ -209,9 +229,7 @@ export class AgentPolicyAddComponent implements OnInit {
       backend,
       format,
       policy_data,
-      policy: {
-        handlers,
-      },
+      policy: { handlers },
     } = this.agentPolicy;
 
     const wizard = format !== this.format;
@@ -224,18 +242,22 @@ export class AgentPolicyAddComponent implements OnInit {
     this.detailsFG.patchValue({ name, description, backend });
 
     if (wizard) {
-      this.onBackendSelected(backend).catch(reason => console.warn(`${reason}`));
+      this.onBackendSelected(backend).catch((reason) =>
+        console.warn(`${reason}`),
+      );
     }
   }
 
   getBackendsList() {
     return new Promise((resolve) => {
       this.isLoading[CONFIG.BACKEND] = true;
-      this.agentPoliciesService.getAvailableBackends().subscribe(backends => {
-        this.availableBackends = !!backends && backends.reduce((acc, curr) => {
-          acc[curr.backend] = curr;
-          return acc;
-        }, {});
+      this.agentPoliciesService.getAvailableBackends().subscribe((backends) => {
+        this.availableBackends =
+          !!backends &&
+          backends.reduce((acc, curr) => {
+            acc[curr.backend] = curr;
+            return acc;
+          }, {});
 
         this.isLoading[CONFIG.BACKEND] = false;
 
@@ -263,7 +285,7 @@ export class AgentPolicyAddComponent implements OnInit {
     const reader: FileReader = new FileReader();
 
     reader.onload = (e: any) => {
-    const fileContent = e.target.result;
+      const fileContent = e.target.result;
       if (this.isJsonMode) {
         this.codejson = fileContent;
       } else {
@@ -283,7 +305,11 @@ export class AgentPolicyAddComponent implements OnInit {
         description: this.detailsFG.controls.description.value,
         backend: this.detailsFG.controls.backend.value,
         policy: policy,
-        version: !!this.isEdit && !!this.agentPolicy.version && this.agentPolicy.version || 1,
+        version:
+          (!!this.isEdit &&
+            !!this.agentPolicy.version &&
+            this.agentPolicy.version) ||
+          1,
         tags: this.selectedTags,
       };
     } else {
@@ -293,7 +319,11 @@ export class AgentPolicyAddComponent implements OnInit {
         backend: this.detailsFG.controls.backend.value,
         format: this.format,
         policy_data: this.codeyaml,
-        version: !!this.isEdit && !!this.agentPolicy.version && this.agentPolicy.version || 1,
+        version:
+          (!!this.isEdit &&
+            !!this.agentPolicy.version &&
+            this.agentPolicy.version) ||
+          1,
         tags: this.selectedTags,
       };
     }
@@ -303,7 +333,10 @@ export class AgentPolicyAddComponent implements OnInit {
   submit(payload) {
     this.agentPoliciesService.addAgentPolicy(payload).subscribe(
       (next) => {
-        this.notificationsService.success('Agent Policy successfully created', '');
+        this.notificationsService.success(
+          'Agent Policy successfully created',
+          '',
+        );
         this.viewPolicy(next.id);
       },
       (error) => {
@@ -321,21 +354,29 @@ export class AgentPolicyAddComponent implements OnInit {
         this.errorConfigMessage = '';
         return true;
       } else {
-        this.errorConfigMessage = 'Invalid JSON configuration, check syntax errors.';
+        this.errorConfigMessage =
+          'Invalid JSON configuration, check syntax errors.';
         return false;
       }
     } else {
-      if (this.editor.isYaml(this.codeyaml) && !this.editor.isJson(this.codeyaml)) {
+      if (
+        this.editor.isYaml(this.codeyaml) &&
+        !this.editor.isJson(this.codeyaml)
+      ) {
         this.errorConfigMessage = '';
         return true;
       } else {
-        this.errorConfigMessage = 'Invalid YAML configuration, check syntax errors.';
+        this.errorConfigMessage =
+          'Invalid YAML configuration, check syntax errors.';
         return false;
       }
     }
   }
   refreshEditor() {
-    this.editorVisible = false; setTimeout(() => { this.editorVisible = true; }, 0);
+    this.editorVisible = false;
+    setTimeout(() => {
+      this.editorVisible = true;
+    }, 0);
   }
   defineDefaultConfig() {
     if (this.backendName === AgentPolicyBackend.otel) {
@@ -344,8 +385,7 @@ export class AgentPolicyAddComponent implements OnInit {
     } else if (this.backendName === AgentPolicyBackend.pktvisor) {
       this.codeyaml = POLICY_PKTVISOR_CONFIG_YAML;
       this.codejson = POLICY_PKTVISOR_CONFIG_JSON;
-    }
-    else {
+    } else {
       this.codeyaml = POLICY_DIODE_CONFIG_YAML;
       this.codejson = POLICY_DIODE_CONFIG_JSON;
     }

ui/src/app/pages/datasets/policies.agent/view/agent.policy.view.component.scss

@@ -265,13 +265,12 @@ header {
   background-color: transparent;
   border: none;
   outline: none;
-  font-family: Open Sans,sans-serif;
-  font-size: .875rem;
+  font-family: Open Sans, sans-serif;
+  font-size: 0.875rem;
   font-weight: 700;
   line-height: 1rem;
   text-transform: uppercase;
   color: #969fb9;
-  border: none;
   border-bottom: solid 2px transparent;
   &:hover {
     color: #5aa1ff;

ui/src/app/pages/fleet/agents/key/agent.key.component.scss

@@ -50,7 +50,7 @@ nb-card {
         border: 0 transparent;
         color: #969fb9;
         position: relative;
-        top: -0.10rem;
+        top: -0.1rem;
         right: -0.15rem;
         outline: none;
         max-height: 28px !important;
@@ -104,13 +104,13 @@ a {
   fill: #3089fc !important;
 }
 .command-card {
-  margin: 1.5rem 0 !important; 
+  margin: 1.5rem 0 !important;
   background-color: #1c2339 !important;
   padding: 0 !important;
   border: transparent;
   nb-card-header {
     border: none !important;
-    border-radius: 0px !important;
+    border-radius: 0 !important;
   }
   nb-card-body {
     margin: 0 !important;

ui/src/app/pages/fleet/agents/list/agent.list.component.scss

@@ -182,10 +182,10 @@ input[type=checkbox] {
   margin-left: 10px;
 }
 .selected-buttons {
-  width: 270px; 
-  display: flex; 
-  align-self: flex-end; 
-  gap: 5px; 
+  width: 270px;
+  display: flex;
+  align-self: flex-end;
+  gap: 5px;
 }
 .agent-reset {
   color: #fff !important;