Skip to content

Commit

Permalink
fix(orb-ui): Yaml as main and only sink config language
Browse files Browse the repository at this point in the history
  • Loading branch information
@joao-mendonca-encora
joao-mendonca-encora committed Sep 20, 2023
1 parent f61aada commit 8908d4a
Show file tree
Hide file tree
Showing 4 changed files with 110 additions and 95 deletions.
48 changes: 31 additions & 17 deletions ui/src/app/pages/sinks/add/sink-add.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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', '');
Expand Down
64 changes: 31 additions & 33 deletions ui/src/app/pages/sinks/view/sink.view.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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');
}
Expand Down
11 changes: 5 additions & 6 deletions ui/src/app/shared/components/orb/sink/sink-config/sink-config.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,31 +18,30 @@
style="color: #df316f !important;">
Discard
</button>
<button
<!-- <button
(click)="toggleLanguage()"
class="switch-button"
*ngIf="editMode || createMode">
Switch to {{isJson(this.code) ? "YAML" : "JSON"}}
</button>
</button> -->
</div>
</nb-card-header>
<nb-card-body>
<!-- <div *ngIf="editMode; then updateView else readView"></div>-->
<div class="code-editor-wrapper">
<ngx-monaco-editor
<!-- <ngx-monaco-editor
#editorComponent
[(ngModel)]="code"
[options]="editorOptions"
class="code-editor"
ngDefaultControl
*ngIf="!isYaml">
</ngx-monaco-editor>
</ngx-monaco-editor> -->
<ngx-monaco-editor
[(ngModel)]="code"
[options]="editorOptionsYaml"
class="code-editor"
ngDefaultControl
*ngIf="isYaml">
ngDefaultControl>
</ngx-monaco-editor>
</div>
</nb-card-body>
Expand Down
82 changes: 43 additions & 39 deletions ui/src/app/shared/components/orb/sink/sink-config/sink-config.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<boolean>();
Expand Down Expand Up @@ -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) {
Expand All @@ -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]);
Expand All @@ -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);
// }
// }

}

0 comments on commit 8908d4a

Please sign in to comment.