fix(orb-ui) #1303 Code editors expose syntax errors (#2726)

* fix(orb-ui) #1303 Code editors expose syntax errors * lint fix * fix lint 2
orb-community · Oct 6, 2023 · 5a5e8d0 · 5a5e8d0
1 parent 6a73979
commit 5a5e8d0
Show file tree

Hide file tree

Showing 16 changed files with 111 additions and 41 deletions.
diff --git a/ui/src/app/pages/datasets/dataset-from/dataset-from.component.ts b/ui/src/app/pages/datasets/dataset-from/dataset-from.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, Input, OnChanges, OnInit, SimpleChange, SimpleChanges  } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnChanges, OnInit, SimpleChange, SimpleChanges } from '@angular/core';
 import {
   AbstractControl,
   FormBuilder,
@@ -182,8 +182,8 @@ export class DatasetFromComponent implements OnInit, OnChanges {
 
   onMatchingAgentsModal() {
     this.dialogService.open(AgentMatchComponent, {
-      context: { 
-        agentGroupId: this.form.controls.agent_group_id.value, 
+      context: {
+        agentGroupId: this.form.controls.agent_group_id.value,
         policy: this.policy,
       },
       autoFocus: true,
@@ -193,8 +193,7 @@ export class DatasetFromComponent implements OnInit, OnChanges {
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.agent_group_id.currentValue) {
       this.isGroupSelected = true;
-    }
-    else {
+    } else {
       this.isGroupSelected = false;
     }
   }

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
@@ -50,6 +50,7 @@ <h4>Policy View</h4>
             [(editMode)]="editMode.interface"
             [policy]="policy"
             [detailsEditMode]="editMode.details"
+            [errorConfigMessage]="errorConfigMessage"
           ></ngx-policy-interface>
         </div>
       </div>

diff --git a/ui/src/app/pages/datasets/policies.agent/view/agent.policy.view.component.ts b/ui/src/app/pages/datasets/policies.agent/view/agent.policy.view.component.ts
@@ -59,6 +59,8 @@ export class AgentPolicyViewComponent implements OnInit, OnDestroy {
 
   lastUpdate: Date | null = null;
 
+  errorConfigMessage: string;
+
   @ViewChild(PolicyDetailsComponent) detailsComponent: PolicyDetailsComponent;
 
   @ViewChild(PolicyInterfaceComponent)
@@ -75,6 +77,7 @@ export class AgentPolicyViewComponent implements OnInit, OnDestroy {
     private editor: CodeEditorService,
   ) {
     this.isRequesting = false;
+    this.errorConfigMessage = '';
   }
 
   ngOnInit() {
@@ -95,10 +98,14 @@ export class AgentPolicyViewComponent implements OnInit, OnDestroy {
 
 
   isEditMode() {
-    return Object.values(this.editMode).reduce(
+    const resp = Object.values(this.editMode).reduce(
       (prev, cur) => prev || cur,
       false,
     );
+    if (!resp) {
+      this.errorConfigMessage = '';
+    }
+    return resp;
   }
 
   canSave() {
@@ -109,10 +116,22 @@ export class AgentPolicyViewComponent implements OnInit, OnDestroy {
     const config = this.interfaceComponent?.code;
     let interfaceValid = false;
 
-    if (this.editor.isJson(config)) {
-      interfaceValid = true;
-    } else if (this.editor.isYaml(config)) {
-      interfaceValid = true;
+    if (this.policy.format === 'json') {
+      if (this.editor.isJson(config)) {
+        interfaceValid = true;
+        this.errorConfigMessage = '';
+      } else {
+        interfaceValid = false;
+        this.errorConfigMessage = 'Invalid JSON configuration, check syntax errors';
+      }
+    } else if (this.policy.format === 'yaml') {
+      if (this.editor.isYaml(config)) {
+        interfaceValid = true;
+        this.errorConfigMessage = '';
+      } else {
+        interfaceValid = false;
+        this.errorConfigMessage = 'Invalid YAML configuration, check syntax errors';
+      }
     }
     return detailsValid && interfaceValid;
   }
@@ -167,16 +186,16 @@ export class AgentPolicyViewComponent implements OnInit, OnDestroy {
 
       this.policiesService.editAgentPolicy(payload).subscribe(
         (resp) => {
-        this.notifications.success('Agent Policy updated successfully', '');
-        this.discard();
-        this.policy = resp;
-        this.orb.refreshNow();
-        this.isRequesting = false;
+          this.notifications.success('Agent Policy updated successfully', '');
+          this.discard();
+          this.policy = resp;
+          this.orb.refreshNow();
+          this.isRequesting = false;
         },
         (err) => {
           this.isRequesting = false;
         },
-        );
+      );
 
     } catch (err) {
       this.notifications.error(
@@ -214,17 +233,17 @@ export class AgentPolicyViewComponent implements OnInit, OnDestroy {
   }
   duplicatePolicy(agentPolicy: any) {
     this.policiesService
-    .duplicateAgentPolicy(agentPolicy.id)
-    .subscribe((newAgentPolicy) => {
-      if (newAgentPolicy?.id) {
-        this.notifications.success(
-          'Agent Policy Duplicated',
-          `New Agent Policy Name: ${newAgentPolicy?.name}`,
-        );
-        this.router.navigateByUrl(`/pages/datasets/policies/view/${newAgentPolicy?.id}`);
-        this.fetchData(newAgentPolicy.id);
-      }
-    });
+      .duplicateAgentPolicy(agentPolicy.id)
+      .subscribe((newAgentPolicy) => {
+        if (newAgentPolicy?.id) {
+          this.notifications.success(
+            'Agent Policy Duplicated',
+            `New Agent Policy Name: ${newAgentPolicy?.name}`,
+          );
+          this.router.navigateByUrl(`/pages/datasets/policies/view/${newAgentPolicy?.id}`);
+          this.fetchData(newAgentPolicy.id);
+        }
+      });
   }
 
   ngOnDestroy() {

diff --git a/ui/src/app/pages/fleet/agents/match/agent.match.component.ts b/ui/src/app/pages/fleet/agents/match/agent.match.component.ts
@@ -132,7 +132,7 @@ export class AgentMatchComponent implements OnInit, AfterViewInit {
   }
 
   onOpenView(agent: any) {
-    this.router.navigateByUrl(`pages/fleet/agents/view/${ agent.id }`);
+    this.router.navigateByUrl(`pages/fleet/agents/view/${agent.id}`);
     this.dialogRef.close();
   }
 
@@ -142,10 +142,9 @@ export class AgentMatchComponent implements OnInit, AfterViewInit {
         (resp) => {
           this.agentGroup = resp;
           this.getMatchingAgentsInfo();
-        }
-      )
-    }
-    else {
+        },
+      );
+    } else {
       this.getMatchingAgentsInfo();
     }
   }
@@ -157,15 +156,15 @@ export class AgentMatchComponent implements OnInit, AfterViewInit {
         if (!!this.policy) {
           this.specificPolicy = true;
           this.agents = resp.map((agent) => {
-            const {policy_state} = agent;
+            const { policy_state } = agent;
             const policy_agg_info = !!policy_state && policy_state[this.policy.id]?.state || AgentPolicyStates.failedToApply;
-            return {...agent, policy_agg_info };
+            return { ...agent, policy_agg_info };
           });
         } else {
           this.agents = resp;
         }
       },
-    ); 
+    );
   }
   onClose() {
     this.dialogRef.close(false);

diff --git a/ui/src/app/pages/sinks/add/sink-add.component.html b/ui/src/app/pages/sinks/add/sink-add.component.html
@@ -42,7 +42,7 @@ <h4>{{ strings.sink.add.header }}</h4>
     </ngx-sink-details>
   </div>
   <div class="card-col col-8" style="padding-left: 0;">
-    <ngx-sink-config [(createMode)]="createMode" [(sinkBackend)]="sinkBackend">
+    <ngx-sink-config [(createMode)]="createMode" [(sinkBackend)]="sinkBackend" [errorConfigMessage]="errorConfigMessage">
     </ngx-sink-config>
   </div>
 </div>
diff --git a/ui/src/app/pages/sinks/add/sink-add.component.ts b/ui/src/app/pages/sinks/add/sink-add.component.ts
@@ -29,6 +29,8 @@ export class SinkAddComponent {
 
     isRequesting: boolean;
 
+    errorConfigMessage: string;
+
     constructor(
         private sinksService: SinksService,
         private notificationsService: NotificationsService,
@@ -37,6 +39,7 @@ export class SinkAddComponent {
     ) {
         this.createMode = true;
         this.isRequesting = false;
+        this.errorConfigMessage = '';
     }
 
     canCreate() {
@@ -51,7 +54,9 @@ export class SinkAddComponent {
             config = JSON.parse(configSink);
         } else if (this.editor.isYaml(configSink)) {
             config = YAML.parse(configSink);
+            this.errorConfigMessage = '';
         } else {
+            this.errorConfigMessage = 'Invalid YAML configuration, check syntax errors';
             return false;
         }
 

diff --git a/ui/src/app/pages/sinks/view/sink.view.component.html b/ui/src/app/pages/sinks/view/sink.view.component.html
@@ -69,7 +69,7 @@ <h4>{{ strings.sink.view.header }}</h4>
     </ngx-sink-details>
   </div>
   <div class="card-col col-8" style="padding-left: 0;">
-    <ngx-sink-config [(editMode)]="editMode.config" [sink]="sink" [detailsEditMode]="editMode.details">
+    <ngx-sink-config [(editMode)]="editMode.config" [sink]="sink" [detailsEditMode]="editMode.details" [errorConfigMessage]="errorConfigMessage">
     </ngx-sink-config>
   </div>
 </div>
diff --git a/ui/src/app/pages/sinks/view/sink.view.component.ts b/ui/src/app/pages/sinks/view/sink.view.component.ts
@@ -41,6 +41,8 @@ export class SinkViewComponent implements OnInit, OnChanges, OnDestroy {
 
   isRequesting: boolean;
 
+  errorConfigMessage: string;
+
   @ViewChild(SinkDetailsComponent) detailsComponent: SinkDetailsComponent;
 
   @ViewChild(SinkConfigComponent)
@@ -56,6 +58,7 @@ export class SinkViewComponent implements OnInit, OnChanges, OnDestroy {
     private orb: OrbService,
     ) {
       this.isRequesting = false;
+      this.errorConfigMessage = '';
     }
 
   ngOnInit(): void {
@@ -74,10 +77,14 @@ export class SinkViewComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   isEditMode() {
-    return Object.values(this.editMode).reduce(
+    const resp = Object.values(this.editMode).reduce(
       (prev, cur) => prev || cur,
       false,
     );
+    if (!resp) {
+      this.errorConfigMessage = '';
+    }
+    return resp;
   }
 
   canSave() {
@@ -93,7 +100,9 @@ export class SinkViewComponent implements OnInit, OnChanges, OnDestroy {
       config = JSON.parse(configSink);
     } else if (this.editor.isYaml(configSink)) {
       config = YAML.parse(configSink);
+      this.errorConfigMessage = '';
     } else {
+        this.errorConfigMessage = 'Invalid YAML configuration, check syntax errors';
         return false;
     }
 

diff --git a/ui/src/app/shared/components/orb/policy/policy-details/policy-details.component.scss b/ui/src/app/shared/components/orb/policy/policy-details/policy-details.component.scss
@@ -13,6 +13,8 @@ nb-card {
 
   nb-card-body {
     padding-bottom: 0 !important;
+    margin: 0 !important;
+
     label {
       color: #969fb9;
     }

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
@@ -38,6 +38,7 @@
       class="code-editor"
       ngDefaultControl>
     </ngx-monaco-editor>
+    <span *ngIf="errorConfigMessage !== ''" class="errorMessage">{{ errorConfigMessage }} </span>
   </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
@@ -12,6 +12,7 @@ nb-card {
 
   nb-card-body {
     padding: 0.25rem !important;
+    margin: 0 !important;
 
     label {
       color: #969fb9;
@@ -84,3 +85,12 @@ nb-card {
 .upload-button:hover {
   background-color: #171c30 !important;
 }
+
+.errorMessage {
+  position: absolute;
+  color: #df316f;
+  font-weight: 600;
+  font-size: 13px;
+  left: 20px;
+  bottom: 3px;
+}
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
@@ -34,6 +34,9 @@ export class PolicyInterfaceComponent implements OnInit, AfterViewInit, OnChange
   @Input()
   detailsEditMode: boolean;
 
+  @Input()
+  errorConfigMessage: string;
+
   @ViewChild(EditorComponent, { static: true })
   editorComponent: EditorComponent;
 
@@ -44,10 +47,11 @@ export class PolicyInterfaceComponent implements OnInit, AfterViewInit, OnChange
     detectIndentation: true,
     tabSize: 2,
     autoIndent: 'full',
+    formatOnPaste: true,
     trimAutoWhitespace: true,
     formatOnType: true,
     matchBrackets: 'always',
-    language: 'yaml',
+    language: 'json',
     automaticLayout: true,
     glyphMargin: false,
     folding: true,
@@ -62,6 +66,8 @@ export class PolicyInterfaceComponent implements OnInit, AfterViewInit, OnChange
 
   formControl: FormControl;
 
+
+
   constructor(
     private fb: FormBuilder,
     private orb: OrbService,
@@ -72,6 +78,7 @@ export class PolicyInterfaceComponent implements OnInit, AfterViewInit, OnChange
     this.editModeChange = new EventEmitter<boolean>();
     this.updateForm();
     this.detailsEditMode = false;
+    this.errorConfigMessage = '';
   }
 
   getCodeLineCount() {
@@ -87,6 +94,9 @@ export class PolicyInterfaceComponent implements OnInit, AfterViewInit, OnChange
 
   ngOnInit(): void {
     this.code = this.policy.policy_data || JSON.stringify(this.policy.policy, null, 2);
+    if (this.policy.format === 'yaml') {
+      this.editorOptions = { ...this.editorOptions, language: 'yaml' };
+    }
   }
 
   ngAfterViewInit() {
@@ -126,8 +136,8 @@ export class PolicyInterfaceComponent implements OnInit, AfterViewInit, OnChange
     const reader: FileReader = new FileReader();
 
     reader.onload = (e: any) => {
-    const fileContent = e.target.result;
-    this.code = fileContent;
+      const fileContent = e.target.result;
+      this.code = fileContent;
     };
 
     reader.readAsText(file);

diff --git a/ui/src/app/shared/components/orb/sink/sink-config/sink-config.component.html b/ui/src/app/shared/components/orb/sink/sink-config/sink-config.component.html
@@ -43,6 +43,7 @@
           class="code-editor editor-height-{{createMode}}"
           ngDefaultControl>
         </ngx-monaco-editor>
+        <span *ngIf="errorConfigMessage !== ''" class="errorMessage">{{ errorConfigMessage }} </span>
       </div>
     </nb-card-body>
   </nb-card>