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

* feat(orb-ui): #26 Policy View Tabs * fix: datset table * Remove comments and unnused imports
orb-community · Sep 26, 2023 · 1c0e960 · 1c0e960
1 parent 7fa7ad8
commit 1c0e960
Show file tree

Hide file tree

Showing 11 changed files with 85 additions and 52 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/pages/sinks/view/sink.view.component.html b/ui/src/app/pages/sinks/view/sink.view.component.html
@@ -70,7 +70,7 @@ <h4>{{ strings.sink.view.header }}</h4>
     <ngx-sink-details [(editMode)]="editMode.details" [sink]="sink" [configEditMode]="editMode.config">
     </ngx-sink-details>
   </div>
-  <div class="card-col col-8">
+  <div class="card-col col-8" style="padding-left: 0;">
     <ngx-sink-config [(editMode)]="editMode.config" [sink]="sink" [detailsEditMode]="editMode.details">
     </ngx-sink-config>
   </div>

diff --git a/ui/src/app/shared/components/orb/policy/policy-datasets/policy-datasets.component.html b/ui/src/app/shared/components/orb/policy/policy-datasets/policy-datasets.component.html
@@ -13,7 +13,7 @@
             <div #tableWrapper class="tableWrapper">
                 <ngx-datatable
                     #table
-                    [columnMode]="columnMode.force"
+                    [columnMode]="'flex'"
                     [columns]="columns"
                     [footerHeight]="0"
                     [headerHeight]="50"

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
@@ -101,32 +101,32 @@ export class PolicyDatasetsComponent
         name: 'Agent Group',
         resizeable: true,
         canAutoResize: true,
-        width: 250,
+        flexGrow: 3,
         cellTemplate: this.groupTemplateCell,
       },
       {
         prop: 'valid',
         name: 'Valid',
         resizeable: true,
         canAutoResize: true,
-        minWidth: 80,        
-        width: 80,
+        flexGrow: 1,
         cellTemplate: this.validTemplateCell,
       },
       {
         prop: 'sinks',
         name: 'Sinks',
         resizeable: true,
         canAutoResize: true,
-        width: 450,
+        flexGrow: 3,
         cellTemplate: this.sinksTemplateCell,
       },
       {
         name: '',
         prop: 'actions',
         resizeable: true,
         sortable: false,
-        width: 200,
+        canAutoResize: true,
+        flexGrow: 3,
         cellTemplate: this.actionsTemplateCell,
       },
     ];

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
@@ -13,6 +13,8 @@ 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 +34,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',
@@ -72,6 +74,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);
   }

diff --git a/ui/src/app/shared/components/orb/sink/sink-details/sink-details.component.html b/ui/src/app/shared/components/orb/sink/sink-details/sink-details.component.html
@@ -30,9 +30,10 @@
             <label class="summary-accent">Name</label>
             <p>{{ sink?.name }}</p>
           </div>
-          <div class="flex-row" *ngIf="sink?.description">
+          <div class="flex-row" >
             <label class="summary-accent">Description</label>
-            <p>{{ sink?.description }}</p>
+            <p *ngIf="sink?.description">{{ sink?.description }}</p>
+            <p *ngIf="!sink?.description" class="italic">No description provided</p>
           </div>
           <div class="flex-row">
             <label class="summary-accent">Backend</label>

diff --git a/ui/src/app/shared/components/orb/sink/sink-details/sink-details.component.scss b/ui/src/app/shared/components/orb/sink/sink-details/sink-details.component.scss
@@ -52,4 +52,9 @@ nb-card {
       text-align: end;
     }
   }
-}
+}
+.italic {
+  font-style: italic; 
+  font-size: 0.9rem; 
+  color: #d9deee;
+}