refactor(rule-view): move and rename rule-view component files

Signed-off-by: Manuel Abascal <mjabascal10@gmail.com>

Author: mjabascal10

frontend/src/app/rule-management/app-rule/components/rule-list/rule-list.component.ts

@@ -18,7 +18,7 @@ import {FilterService} from '../../../services/filter.service';
 import {RuleService} from '../../../services/rule.service';
 import {AddRuleComponent} from '../add-rule/add-rule.component';
 import {ImportRuleComponent} from '../import-rules/import-rule.component';
-import {RuleViewComponent} from '../see-rule/rule-view.component';
+import {RuleViewComponent} from '../rule-view/rule-view.component';
 
 
 @Component({

…onents/see-rule/rule-view.component.html …nents/rule-view/rule-view.component.htmlfrontend/src/app/rule-management/app-rule/components/see-rule/rule-view.component.html renamed to frontend/src/app/rule-management/app-rule/components/rule-view/rule-view.component.html frontend/src/app/rule-management/app-rule/components/see-rule/rule-view.component.html renamed to frontend/src/app/rule-management/app-rule/components/rule-view/rule-view.component.html

@@ -3,9 +3,6 @@ app-utm-modal-header {
   top: 0;
   z-index: 10;
 }
-.rule-view-container {
-  max-height: 650px;
-}
 .copy-btn {
   border: none;
   background: transparent;
@@ -91,7 +88,7 @@ app-utm-modal-header {
   border: 1px solid #d9d9d9;
   border-radius: 4px;
   overflow: hidden;
-  height: 600px;
+  height: 650px;
   width: 100%;
   flex: 1;
 
@@ -108,11 +105,32 @@ app-utm-modal-header {
     .overflow-guard {
       width: 100% !important;
       height: 100% !important;
+      overflow: hidden !important;
     }
 
     .monaco-scrollable-element {
       width: 100% !important;
       height: 100% !important;
+      overflow-y: auto !important;
+      overflow-x: hidden !important;
+    }
+
+    .monaco-scrollable-element.vertical {
+      overflow-y: auto !important;
+    }
+
+
+    .scrollbar {
+      &.vertical {
+        .slider {
+          background: rgba(0, 0, 0, 0.2) !important;
+          border-radius: 4px !important;
+
+          &:hover {
+            background: rgba(0, 0, 0, 0.4) !important;
+          }
+        }
+      }
     }
 
     .monaco-editor.readonly {

…onents/see-rule/rule-view.component.scss …nents/rule-view/rule-view.component.scssfrontend/src/app/rule-management/app-rule/components/see-rule/rule-view.component.scss renamed to frontend/src/app/rule-management/app-rule/components/rule-view/rule-view.component.scss frontend/src/app/rule-management/app-rule/components/see-rule/rule-view.component.scss renamed to frontend/src/app/rule-management/app-rule/components/rule-view/rule-view.component.scss

@@ -1,4 +1,4 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, Input} from '@angular/core';
 import * as yaml from 'js-yaml';
 import {mapRuleToYaml} from '../../../../shared/components/utm/util/utm-file-upload/shared/rule-yaml.mapper';
 import {Rule} from '../../../models/rule.model';
@@ -27,7 +27,14 @@ export class RuleViewComponent {
     formatOnType: true,
     tabSize: 2,
     insertSpaces: true,
-    readOnly: true
+    readOnly: true,
+    scrollbar: {
+      vertical: 'auto',
+      horizontal: 'hidden',
+      useShadows: true,
+      verticalSliderSize: 12,
+      horizontalSliderSize: 0
+    }
   };
 
   get yamlString(): string {

…mponents/see-rule/rule-view.component.ts …ponents/rule-view/rule-view.component.tsfrontend/src/app/rule-management/app-rule/components/see-rule/rule-view.component.ts renamed to frontend/src/app/rule-management/app-rule/components/rule-view/rule-view.component.ts frontend/src/app/rule-management/app-rule/components/see-rule/rule-view.component.ts renamed to frontend/src/app/rule-management/app-rule/components/rule-view/rule-view.component.ts

@@ -37,7 +37,7 @@ import {AddReferenceComponent} from './app-rule/components/reference/add-referen
 import {RuleGenericFilterComponent} from './app-rule/components/rule-generic-filter/rule-generic-filter.component';
 import {RuleFieldComponent} from './app-rule/components/rule-list/components/rule-field/rule-field.component';
 import {RuleListComponent} from './app-rule/components/rule-list/rule-list.component';
-import {RuleViewComponent} from './app-rule/components/see-rule/rule-view.component'
+import {RuleViewComponent} from './app-rule/components/rule-view/rule-view.component'
 import {RuleManagementRoutingModule} from './rule-management.routing.module';
 import { DataTypeService } from './services/data-type.service';
 import {FilterService} from './services/filter.service';