From 8908d4a09cc4c926b4cf8166f985faa244fa3009 Mon Sep 17 00:00:00 2001 From: joaoguilherme2003 Date: Wed, 20 Sep 2023 16:25:48 -0300 Subject: [PATCH] fix(orb-ui): Yaml as main and only sink config language --- .../app/pages/sinks/add/sink-add.component.ts | 48 +++++++---- .../pages/sinks/view/sink.view.component.ts | 64 +++++++-------- .../sink-config/sink-config.component.html | 11 ++- .../sink/sink-config/sink-config.component.ts | 82 ++++++++++--------- 4 files changed, 110 insertions(+), 95 deletions(-) diff --git a/ui/src/app/pages/sinks/add/sink-add.component.ts b/ui/src/app/pages/sinks/add/sink-add.component.ts index d368dd044..82c088f50 100644 --- a/ui/src/app/pages/sinks/add/sink-add.component.ts +++ b/ui/src/app/pages/sinks/add/sink-add.component.ts @@ -55,7 +55,13 @@ export class SinkAddComponent { return false; } - return !this.editor.checkEmpty(config.authentication) && !this.editor.checkEmpty(config.exporter) && detailsValid; + return !this.editor.checkEmpty(config.authentication) && !this.editor.checkEmpty(config.exporter) && detailsValid && !this.checkString(config); + } + checkString(config: any): boolean { + if (typeof config.authentication.password !== 'string' || typeof config.authentication.username !== 'string') { + return true; + } + return false; } createSink() { @@ -68,22 +74,30 @@ export class SinkAddComponent { let payload = {}; - if (this.editor.isJson(configSink)) { - const config = JSON.parse(configSink); - payload = { - ...details, - tags, - config, - } as Sink; - } - else { - payload = { - ...details, - tags, - format: 'yaml', - config_data: configSink, - } as Sink; - } + const config = YAML.parse(configSink); + + payload = { + ...details, + tags, + config, + } as Sink; + + // if (this.editor.isJson(configSink)) { + // const config = JSON.parse(configSink); + // payload = { + // ...details, + // tags, + // config, + // } as Sink; + // } + // else { + // payload = { + // ...details, + // tags, + // format: 'yaml', + // config_data: configSink, + // } as Sink; + // } this.sinksService.addSink(payload).subscribe(() => { this.notificationsService.success('Sink successfully created', ''); diff --git a/ui/src/app/pages/sinks/view/sink.view.component.ts b/ui/src/app/pages/sinks/view/sink.view.component.ts index b10cc1823..420bb7bf3 100644 --- a/ui/src/app/pages/sinks/view/sink.view.component.ts +++ b/ui/src/app/pages/sinks/view/sink.view.component.ts @@ -94,14 +94,22 @@ export class SinkViewComponent implements OnInit, OnChanges, OnDestroy { } else if (this.editor.isYaml(configSink)) { config = YAML.parse(configSink); } else { - return false; + return false; } + if (this.editMode.config) { - configValid = !this.editor.checkEmpty(config.authentication) && !this.editor.checkEmpty(config.exporter); + configValid = !this.editor.checkEmpty(config.authentication) && !this.editor.checkEmpty(config.exporter) && !this.checkString(config); } return detailsValid && configValid; } + checkString(config: any): boolean { + if (typeof config.authentication.password !== 'string' || typeof config.authentication.username !== 'string') { + return true; + } + return false; + } + discard() { this.editMode.details = false; this.editMode.config = false; @@ -113,40 +121,30 @@ export class SinkViewComponent implements OnInit, OnChanges, OnDestroy { const sinkDetails = this.detailsComponent.formGroup?.value; const tags = this.detailsComponent.selectedTags; const configSink = this.configComponent.code; - + const details = { ...sinkDetails, tags }; - const isJson = this.editor.isJson(configSink); - - let payload: Sink = { id, backend }; - - if (isJson) { - const config = JSON.parse(configSink); - - if (this.editMode.details && !this.editMode.config) { - payload = { ...payload, ...details }; - } else if (!this.editMode.details && this.editMode.config) { - payload = { ...payload, config }; - } else { - payload = { ...payload, ...details, config }; - } - } else { - if (this.editMode.details && !this.editMode.config) { + + let payload = { id, backend, config: {}}; + + try { + const config = YAML.parse(configSink); + payload.config = config; + + if (this.editMode.details) { payload = { ...payload, ...details }; - } else if (!this.editMode.details && this.editMode.config) { - payload = { ...payload, format: 'yaml', config_data: configSink }; - } else { - payload = { ...payload, ...details, format: 'yaml', config_data: configSink }; } - } - - try { - this.sinks.editSink(payload).subscribe((resp) => { - this.discard(); - this.sink = resp; - this.orb.refreshNow(); - this.notifications.success('Sink updated successfully', ''); - this.isRequesting = false; - }); + + this.sinks.editSink(payload as Sink).subscribe( + (resp) => { + this.discard(); + this.sink = resp; + this.orb.refreshNow(); + this.notifications.success('Sink updated successfully', ''); + this.isRequesting = false; + }, + (err) => { + this.isRequesting = false; + }); } catch (err) { this.notifications.error('Failed to edit Sink', 'Error: Invalid configuration'); } 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 index f700ca43c..479187616 100644 --- 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 @@ -18,31 +18,30 @@ style="color: #df316f !important;"> Discard - + -->
- - + --> + ngDefaultControl>
diff --git a/ui/src/app/shared/components/orb/sink/sink-config/sink-config.component.ts b/ui/src/app/shared/components/orb/sink/sink-config/sink-config.component.ts index 8bba77fce..b7d96cb18 100644 --- a/ui/src/app/shared/components/orb/sink/sink-config/sink-config.component.ts +++ b/ui/src/app/shared/components/orb/sink/sink-config/sink-config.component.ts @@ -78,7 +78,7 @@ export class SinkConfigComponent implements OnInit, OnChanges { private fb: FormBuilder, private orb: OrbService, ) { - this.isYaml = false; + this.isYaml = true; this.sink = {}; this.editMode = false; this.editModeChange = new EventEmitter(); @@ -111,28 +111,29 @@ export class SinkConfigComponent implements OnInit, OnChanges { ngOnInit(): void { if (this.createMode) { this.toggleEdit(true); - this.code = JSON.stringify(this.sinkConfigSchemaOtlp, null, 2); + this.code = YAML.stringify(this.sinkConfigSchemaOtlp); } else { - if (this.sink.config_data && this.sink.format === 'yaml') { - this.isYaml = true; - this.code = YAML.stringify(this.sink.config_data); - } - else if (this.isJson(JSON.stringify(this.sink.config))) { - this.isYaml = false; - this.code = JSON.stringify(this.sink.config, null, 2); - } + // if (this.sink.config_data && this.sink.format === 'yaml') { + // this.isYaml = true; + const parsedCode = YAML.parse(JSON.stringify(this.sink.config)); + this.code = YAML.stringify(parsedCode); + // } + // else if (this.isJson(JSON.stringify(this.sink.config))) { + // this.isYaml = false; + // this.code = JSON.stringify(this.sink.config, null, 2); + // } } } - isJson(str: string) { - try { - JSON.parse(str); - return true; - } catch { - return false; - } -} + // isJson(str: string) { + // try { + // JSON.parse(str); + // return true; + // } catch { + // return false; + // } + // } ngOnChanges(changes: SimpleChanges) { const { editMode, sinkBackend } = changes; if (editMode && !editMode.firstChange) { @@ -143,23 +144,26 @@ ngOnChanges(changes: SimpleChanges) { ? this.sinkConfigSchemaPrometheus : this.sinkConfigSchemaOtlp; - this.code = this.isYaml - ? YAML.stringify(sinkConfigSchema, null) - : JSON.stringify(sinkConfigSchema, null, 2); + // this.code = this.isYaml + // ? YAML.stringify(sinkConfigSchema, null) + // : JSON.stringify(sinkConfigSchema, null, 2); + this.code = YAML.stringify(sinkConfigSchema, null); } } updateForm() { - const configData = this.sink.config_data; - const isYamlFormat = this.sink.format === 'yaml'; + const configData = this.sink.config; + // const isYamlFormat = this.sink.format === 'yaml'; if (this.editMode) { - this.isYaml = isYamlFormat; - this.code = isYamlFormat ? YAML.stringify(configData) : JSON.stringify(this.sink.config, null, 2); + // this.isYaml = isYamlFormat; + // this.code = isYamlFormat ? YAML.stringify(configData) : JSON.stringify(this.sink.config, null, 2); + this.code = YAML.stringify(configData); } else { this.formControl = this.fb.control(null, [Validators.required]); - this.isYaml = isYamlFormat; - this.code = isYamlFormat ? YAML.stringify(configData) : JSON.stringify(this.sink.config, null, 2); + // this.isYaml = isYamlFormat; + // this.code = isYamlFormat ? YAML.stringify(configData) : JSON.stringify(this.sink.config, null, 2); + this.code = YAML.stringify(configData); } this.formControl = this.fb.control(this.code, [Validators.required]); @@ -173,21 +177,21 @@ updateForm() { else { this.orb.startPolling(); } - this.editorOptions = { ...this.editorOptions, readOnly: !edit }; + // this.editorOptions = { ...this.editorOptions, readOnly: !edit }; this.editorOptionsYaml = { ...this.editorOptionsYaml, readOnly: !edit }; this.updateForm(); !!notify && this.editModeChange.emit(this.editMode); } - toggleLanguage() { - this.isYaml = !this.isYaml; - if (this.isYaml) { - const parsedCode = YAML.parse(this.code); - this.code = YAML.stringify(parsedCode); - } - else { - const parsedConfig = YAML.parse(this.code); - this.code = JSON.stringify(parsedConfig, null, 2); - } - } + // toggleLanguage() { + // this.isYaml = !this.isYaml; + // if (this.isYaml) { + // const parsedCode = YAML.parse(this.code); + // this.code = YAML.stringify(parsedCode); + // } + // else { + // const parsedConfig = YAML.parse(this.code); + // this.code = JSON.stringify(parsedConfig, null, 2); + // } + // } }