feat(orb-ui): #26 Policy View Tabs

orb-community · Sep 26, 2023 · 5d7e750 · 5d7e750
1 parent 98d328b
commit 5d7e750
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 45 deletions.
diff --git a/ui/src/app/pages/datasets/policies.agent/view/agent.policy.view.component.html b/ui/src/app/pages/datasets/policies.agent/view/agent.policy.view.component.html
@@ -34,25 +34,39 @@ <h4>Policy View</h4>
   <div class="loading-spinner"></div>
 </div>
 
-<div *ngIf="!isLoading" class="row" #content>
-  <div class="card-col col-4" style="padding-right: 10px !important;">
-    <ngx-policy-details
-      [(editMode)]="editMode.details"
-      [policy]="policy"
-      [interfaceEditMode]="editMode.interface"
-    ></ngx-policy-details>
-    <ngx-policy-groups [groups]="policy.groups" [policy]="policy"></ngx-policy-groups>
-  </div>
-  <div class="card-col col-8"  style="padding-left: 10px !important;">
-    <ngx-policy-interface
-      [(editMode)]="editMode.interface"
-      [policy]="policy"
-      [detailsEditMode]="editMode.details"
-    ></ngx-policy-interface>
-    <ngx-policy-datasets
-      (refreshPolicy)="retrievePolicy()"
-      [datasets]="datasets"
-      [policy]="policy"
-    ></ngx-policy-datasets>
-  </div>
+<div *ngIf="!isLoading" #content>
+  <nb-tabset>
+    <nb-tab tabTitle="Details & Configuration">
+      <div class="row">
+        <div class="col-4">
+          <ngx-policy-details
+            [(editMode)]="editMode.details"
+            [policy]="policy"
+            [interfaceEditMode]="editMode.interface"
+          ></ngx-policy-details>
+        </div>
+        <div class="col-8" style="padding-left: 0 !important;">
+          <ngx-policy-interface
+            [(editMode)]="editMode.interface"
+            [policy]="policy"
+            [detailsEditMode]="editMode.details"
+          ></ngx-policy-interface>
+        </div>
+      </div>
+    </nb-tab>
+    <nb-tab tabTitle="Datasets">
+      <div class="row">
+        <div class="col-8">
+          <ngx-policy-datasets
+            (refreshPolicy)="retrievePolicy()"
+            [datasets]="datasets"
+            [policy]="policy"
+          ></ngx-policy-datasets>
+        </div>
+        <div class="col-4" style="padding-left: 0 !important;">
+          <ngx-policy-groups [groups]="policy.groups" [policy]="policy"></ngx-policy-groups>
+        </div>
+      </div>
+    </nb-tab>
+  </nb-tabset>
 </div>
diff --git a/ui/src/app/pages/datasets/policies.agent/view/agent.policy.view.component.scss b/ui/src/app/pages/datasets/policies.agent/view/agent.policy.view.component.scss
@@ -6,6 +6,14 @@ h4 {
   line-height: 2rem;
   margin-bottom: 1.5rem;
 }
+.row {
+  display: flex;
+
+}
+nb-tab {
+  padding: 0 !important;
+  overflow: hidden !important;
+}
 
 nb-card {
   border: transparent;

diff --git a/ui/src/app/pages/sinks/details/sink.details.component.html b/ui/src/app/pages/sinks/details/sink.details.component.html
@@ -18,7 +18,7 @@
       <div class="col-6 d-flex flex-column align-items-start" *ngIf="!sink.description">
         <p class="detail-title">{{strings.propNames.description}}</p>
         <p>{{ sink.description }}</p>
-        <p *ngIf="!sink.description">No Description Added</p>
+        <p *ngIf="!sink.description" style="font-style: italic; font-size: 14px;">No Description Added</p>
       </div>
     </div>
     <div class="row">

diff --git a/ui/src/app/shared/components/orb/policy/policy-datasets/policy-datasets.component.ts b/ui/src/app/shared/components/orb/policy/policy-datasets/policy-datasets.component.ts
@@ -100,15 +100,15 @@ export class PolicyDatasetsComponent
         prop: 'agent_group',
         name: 'Agent Group',
         resizeable: true,
-        canAutoResize: true,
+        canAutoResize: false,
         width: 250,
         cellTemplate: this.groupTemplateCell,
       },
       {
         prop: 'valid',
         name: 'Valid',
         resizeable: true,
-        canAutoResize: true,
+        canAutoResize: false,
         minWidth: 80,        
         width: 80,
         cellTemplate: this.validTemplateCell,
@@ -117,7 +117,7 @@ export class PolicyDatasetsComponent
         prop: 'sinks',
         name: 'Sinks',
         resizeable: true,
-        canAutoResize: true,
+        canAutoResize: false,
         width: 450,
         cellTemplate: this.sinksTemplateCell,
       },

diff --git a/ui/src/app/shared/components/orb/policy/policy-interface/policy-interface.component.html b/ui/src/app/shared/components/orb/policy/policy-interface/policy-interface.component.html
@@ -20,15 +20,14 @@
   </nb-card-header>
   <nb-card-body>
     <!--    <div *ngIf="editMode; then updateView else readView"></div>-->
-    <div class="code-editor-wrapper">
-      <ngx-monaco-editor
-          #editorComponent
-          [(ngModel)]="code"
-          [options]="editorOptions"
-          class="code-editor"
-          ngDefaultControl>
-      </ngx-monaco-editor>
-    </div>
+    <ngx-monaco-editor
+      [style.height.px]="getCodeLineCount() * 21.6"
+      #editorComponent
+      [(ngModel)]="code"
+      [options]="editorOptions"
+      class="code-editor"
+      ngDefaultControl>
+    </ngx-monaco-editor>
   </nb-card-body>
 </nb-card>
 

diff --git a/ui/src/app/shared/components/orb/policy/policy-interface/policy-interface.component.scss b/ui/src/app/shared/components/orb/policy/policy-interface/policy-interface.component.scss
@@ -62,15 +62,8 @@ nb-card {
 }
 
 .code-editor {
-  height: calc(100%);
   width: calc(100%);
   padding: calc(1rem);
-}
-
-.code-editor-wrapper {
-  min-height: 350px;
-  min-width: 200px;
-  height: 367px;
-  width: calc(100%);
-  display: block;
+  min-height: 367px;
+  max-height: 55vh;
 }
diff --git a/ui/src/app/shared/components/orb/policy/policy-interface/policy-interface.component.ts b/ui/src/app/shared/components/orb/policy/policy-interface/policy-interface.component.ts
@@ -8,11 +8,14 @@ import {
   Output,
   SimpleChanges,
   ViewChild,
+  Renderer2,
 } from '@angular/core';
 import { AgentPolicy } from 'app/common/interfaces/orb/agent.policy.interface';
 import { FormBuilder, FormControl, Validators } from '@angular/forms';
 import IStandaloneEditorConstructionOptions = monaco.editor.IStandaloneEditorConstructionOptions;
 import { OrbService } from 'app/common/services/orb.service';
+import { EditorComponent } from 'ngx-monaco-editor';
+
 
 @Component({
   selector: 'ngx-policy-interface',
@@ -32,8 +35,8 @@ export class PolicyInterfaceComponent implements OnInit, AfterViewInit, OnChange
   @Input()
   detailsEditMode: boolean;
 
-  @ViewChild('editorComponent')
-  editor;
+  @ViewChild(EditorComponent, { static: true })
+  editorComponent: EditorComponent;
 
   editorOptions: IStandaloneEditorConstructionOptions = {
     theme: 'vs-dark',
@@ -63,6 +66,7 @@ export class PolicyInterfaceComponent implements OnInit, AfterViewInit, OnChange
   constructor(
     private fb: FormBuilder,
     private orb: OrbService,
+    private renderer: Renderer2,
   ) {
     this.policy = {};
     this.code = '';
@@ -72,6 +76,17 @@ export class PolicyInterfaceComponent implements OnInit, AfterViewInit, OnChange
     this.detailsEditMode = false;
   }
 
+  getCodeLineCount() {
+    const editorInstance = this.editorComponent['_editor'];
+    if (editorInstance) {
+      const model = editorInstance.getModel();
+      editorInstance.layout();
+      return model ? model.getLineCount() : 0;
+
+    }
+    return 0;
+  }
+
   ngOnInit(): void {
     this.code = this.policy.policy_data || JSON.stringify(this.policy.policy, null, 2);
   }