feat: refactor layout and styling for active directory components

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

Author: mjabascal10

frontend/src/app/active-directory/active-directory.component.html

@@ -1,5 +1,5 @@
-<div style="height: 89vh;" class="vul-container container-fluid pr-3 pl-3 pt-2">
-  <div class="d-flex justify-content-between align-items-center mb-2 tab-header">
+<div class="vul-container d-flex flex-column pr-3 pl-3 pt-2 h-100">
+  <div class="d-flex justify-content-between align-items-center mb-2 tab-header py-1">
     <h5 class="card-title mb-0 text-uppercase label-header">
       Users with Activity
     </h5>

frontend/src/app/active-directory/active-directory.component.scss

@@ -2,6 +2,14 @@
 @import "../../assets/styles/var";
 @import "../../assets/styles/custom-elements";
 
+:host {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  height: 100%;
+}
+
 .vul-container {
   .tab-header {
     .nav {

frontend/src/app/active-directory/shared/components/active-directory-detail/active-directory-detail.component.html

@@ -1,4 +1,4 @@
-<div class="container-fluid pl-2 pt-0 h-100">
+<div class="d-flex flex-column pl-2 pt-0 h-100">
   <div *ngIf="!user"
        class="no-object-selected d-flex flex-column align-items-center justify-content-center">
     <app-no-data-found></app-no-data-found>

frontend/src/app/active-directory/shared/components/active-directory-detail/active-directory-detail.component.scss

@@ -1,3 +1,11 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  height: 100%;
+}
+
 .message-container {
 
 }

frontend/src/app/active-directory/shared/components/active-directory-event/active-directory-event.component.html

@@ -1,6 +1,6 @@
-<div class="container-fluid p-0 h-100">
+<div class="d-flex flex-column p-0 h-100">
   <div class="row h-100">
-    <div class="col-lg-7 col-md-12 col-sm-12 pl-2 pr-0">
+    <div class="d-flex h-100 m-h-0 col-lg-7 col-md-12 col-sm-12 pl-2 pr-0">
       <app-event-timeline (eventChange)="onEventChange($event)"
                           [events]="[]"
                           [time]=""></app-event-timeline>

frontend/src/app/active-directory/shared/components/active-directory-event/active-directory-event.component.scss

@@ -1,3 +1,12 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  height: 100%;
+}
+
+
 .message-container {
   overflow-y: auto;
   height: 70vh;

frontend/src/app/active-directory/shared/components/active-directory-event/active-directory-event.component.ts

@@ -1,8 +1,7 @@
 import {Component, Input, OnInit} from '@angular/core';
-import {Event} from "../../../../shared/types/event/event";
+import {Event} from '../../../../shared/types/event/event';
 import {TimeFilterType} from '../../../../shared/types/time-filter.type';
 import {TreeObjectBehavior} from '../../behavior/tree-object.behvior';
-import {WinlogbeatEventType} from '../../types/winlogbeat-event.type';
 
 @Component({
   selector: 'app-active-directory-event',

frontend/src/app/active-directory/shared/components/event-timeline/event-timeline.component.html

@@ -36,7 +36,7 @@ <h6 class="card-title font-weight-light pb-0 text-blue-800">Events timeline</h6>
           <span class="text-blue-800 mt-2">No more events</span>
         </div>
       </div>
-      <div *ngIf="items && items.length>0" class="mb-3 mt-1">
+      <div *ngIf="items && items.length>0" class="my-3 mt-1">
         <div class="row justify-content-center">
           <ngb-pagination (pageChange)="loadPage($event)"
                           [(page)]="page"

frontend/src/app/active-directory/shared/components/event-timeline/event-timeline.component.scss

@@ -1,19 +1,22 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  height: 100%;
+}
 
 .event-timeline-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
   height: 100%;
-  //max-height: 400px;
-  //min-height: 400px;
+  min-height: 0;
+  overflow: hidden;
   box-sizing: border-box;
-  display: block;
-  flex: none;
 }
 
 .main {
   width: 100%;
-  height: 70vh;
-  //max-height: 380px;
-  min-height: 370px;
-  box-sizing: border-box;
   overflow-y: scroll;
-  position: relative;
 }

frontend/src/app/active-directory/view/active-directory-view/active-directory-view.component.html

@@ -1,4 +1,4 @@
-<div class="d-flex active-directory-tree flex-nowrap">
+<div class="d-flex active-directory-tree flex-nowrap h-100 m-h-0 overflow-hidden pb-3">
   <div [ngStyle]="{'width':treeWidth}"
        mwlResizable
        [enableGhostResize]="true"
@@ -37,7 +37,7 @@ <h6 class="text-blue-800 font-weight-light">{{object.name}}</h6>
           </ul>
         </div>
       </div>
-      <div *ngIf="object" class="p-0 h-100">
+      <div *ngIf="object" class="d-flex flex-column p-0 h-100">
         <app-active-directory-detail *ngIf="view==='detail'"
                                      [user]="object"
                                      [adInfo]="object">