@gravitee/ui-policy-studio-angular 16.2.1-apim-11674-edit-ps-flows-for-llm-proxy-778b797 → 16.2.1-apim-11833-llm-proxy-ui-does-not-match-designs-2eb195a
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -5,7 +5,7 @@ import { Subject, BehaviorSubject, of, EMPTY, timer } from 'rxjs';
|
|
|
5
5
|
import * as i5$1 from '@angular/common';
|
|
6
6
|
import { CommonModule } from '@angular/common';
|
|
7
7
|
import * as i7 from '@gravitee/ui-particles-angular';
|
|
8
|
-
import { GioFormSlideToggleModule, GioBannerModule, GioIconsModule, GioElAssistantComponent, GioFormTagsInputModule,
|
|
8
|
+
import { GioFormSlideToggleModule, GioBannerModule, GioIconsModule, GioElAssistantComponent, GioFormTagsInputModule, GIO_DIALOG_WIDTH, GioLoaderModule, GioFormJsonSchemaComponent, GioFormJsonSchemaModule, GioElPromptComponent, GioPopoverComponent, PopoverTriggerDirective, GioConfirmDialogComponent } from '@gravitee/ui-particles-angular';
|
|
9
9
|
import * as i2$1 from '@angular/material/tooltip';
|
|
10
10
|
import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
|
|
11
11
|
import * as i3 from '@angular/material/button';
|
|
@@ -790,16 +790,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
790
790
|
* See the License for the specific language governing permissions and
|
|
791
791
|
* limitations under the License.
|
|
792
792
|
*/
|
|
793
|
-
const METHODS_AUTOCOMPLETE = ['
|
|
794
|
-
const LLM_PATHS = ['/chat/completions', '/embeddings', '/models'];
|
|
793
|
+
const METHODS_AUTOCOMPLETE = ['ALL', ...HttpMethods];
|
|
795
794
|
class GioPolicyStudioFlowLlmFormDialogComponent {
|
|
796
795
|
constructor(dialogRef, flowDialogData) {
|
|
797
796
|
this.dialogRef = dialogRef;
|
|
798
797
|
this.mode = 'create';
|
|
799
798
|
this.methods = METHODS_AUTOCOMPLETE;
|
|
800
|
-
this.paths = LLM_PATHS;
|
|
801
|
-
this.availableMethods = ['POST', 'GET'];
|
|
802
799
|
this.existingFlow = cloneDeep(flowDialogData?.flow);
|
|
800
|
+
this.mode = this.existingFlow ? 'edit' : 'create';
|
|
803
801
|
const httpSelector = flowDialogData?.flow?.selectors?.find(s => s.type === 'HTTP');
|
|
804
802
|
const conditionSelector = flowDialogData?.flow?.selectors?.find(s => s.type === 'CONDITION');
|
|
805
803
|
this.flowFormGroup = new UntypedFormGroup({
|
|
@@ -809,49 +807,6 @@ class GioPolicyStudioFlowLlmFormDialogComponent {
|
|
|
809
807
|
methods: new UntypedFormControl(sanitizeMethodFormValue(httpSelector?.methods)),
|
|
810
808
|
condition: new UntypedFormControl(conditionSelector?.condition ?? ''),
|
|
811
809
|
});
|
|
812
|
-
// Subscribe to path changes to update methods
|
|
813
|
-
this.flowFormGroup.get('path')?.valueChanges.subscribe((path) => {
|
|
814
|
-
const fullPath = sanitizePath(path);
|
|
815
|
-
switch (fullPath) {
|
|
816
|
-
case '/chat/completions':
|
|
817
|
-
this.availableMethods = ['POST'];
|
|
818
|
-
break;
|
|
819
|
-
case '/embeddings':
|
|
820
|
-
this.availableMethods = ['POST'];
|
|
821
|
-
break;
|
|
822
|
-
case '/models':
|
|
823
|
-
this.availableMethods = ['GET'];
|
|
824
|
-
break;
|
|
825
|
-
default:
|
|
826
|
-
this.availableMethods = [];
|
|
827
|
-
break;
|
|
828
|
-
}
|
|
829
|
-
this.flowFormGroup?.get('methods')?.setValue([]);
|
|
830
|
-
});
|
|
831
|
-
const selectedPath = this.flowFormGroup.get('path')?.value;
|
|
832
|
-
switch (selectedPath) {
|
|
833
|
-
case '/chat/completions':
|
|
834
|
-
if (this.methods.includes('POST'))
|
|
835
|
-
this.availableMethods = [];
|
|
836
|
-
else
|
|
837
|
-
this.availableMethods = ['POST'];
|
|
838
|
-
break;
|
|
839
|
-
case '/embeddings':
|
|
840
|
-
if (this.methods.includes('POST'))
|
|
841
|
-
this.availableMethods = [];
|
|
842
|
-
else
|
|
843
|
-
this.availableMethods = ['POST'];
|
|
844
|
-
break;
|
|
845
|
-
case '/models':
|
|
846
|
-
if (this.methods.includes('GET'))
|
|
847
|
-
this.availableMethods = [];
|
|
848
|
-
else
|
|
849
|
-
this.availableMethods = ['GET'];
|
|
850
|
-
break;
|
|
851
|
-
default:
|
|
852
|
-
this.availableMethods = [];
|
|
853
|
-
break;
|
|
854
|
-
}
|
|
855
810
|
}
|
|
856
811
|
onSubmit() {
|
|
857
812
|
const httpSelectorToSave = {
|
|
@@ -887,7 +842,7 @@ class GioPolicyStudioFlowLlmFormDialogComponent {
|
|
|
887
842
|
validationCb(METHODS_AUTOCOMPLETE.map(m => `${m}`).includes(tag.toUpperCase()));
|
|
888
843
|
}
|
|
889
844
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: GioPolicyStudioFlowLlmFormDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
890
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: GioPolicyStudioFlowLlmFormDialogComponent, isStandalone: true, selector: "gio-ps-flow-llm-form-dialog", ngImport: i0, template: "<!--\n\n Copyright (C) 2025 The Gravitee team (http://gravitee.io)\n \n Licensed under the Apache License, Version 2.0 (the \"License\");\n you may not use this file except in compliance with the License.\n You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software\n distributed under the License is distributed on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n See the License for the specific language governing permissions and\n limitations under the License.\n\n-->\n<h2 mat-dialog-title class=\"title\">\n {{ mode === 'create' ? 'Create a new flow' : 'Edit flow' }}\n\n <button class=\"title__closeBtn\" mat-icon-button aria-label=\"Close dialog\" [mat-dialog-close]=\"false\">\n <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n </button>\n</h2>\n\n@if (flowFormGroup) {\n <mat-dialog-content class=\"content\" [formGroup]=\"flowFormGroup\">\n <p>\n Flows allow you to apply different policies per HTTP path and/or method. For example you can reroute calls based on the URL specified.\n </p>\n <div class=\"content__row\">\n <mat-form-field>\n <mat-label>Flow name</mat-label>\n <input matInput formControlName=\"name\" cdkFocusInitial />\n <mat-hint>Names will be automatically generated with path and method if left blank</mat-hint>\n </mat-form-field>\n </div>\n <div class=\"content__row\">\n <mat-form-field>\n <mat-label>Operator</mat-label>\n <mat-select formControlName=\"pathOperator\">\n <mat-option value=\"EQUALS\">Equals</mat-option>\n <mat-option value=\"STARTS_WITH\">Starts with</mat-option>\n </mat-select>\n <mat-hint>Path operator</mat-hint>\n </mat-form-field>\n <mat-form-field>\n <mat-label>Path</mat-label>\n <
|
|
845
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: GioPolicyStudioFlowLlmFormDialogComponent, isStandalone: true, selector: "gio-ps-flow-llm-form-dialog", ngImport: i0, template: "<!--\n\n Copyright (C) 2025 The Gravitee team (http://gravitee.io)\n \n Licensed under the Apache License, Version 2.0 (the \"License\");\n you may not use this file except in compliance with the License.\n You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software\n distributed under the License is distributed on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n See the License for the specific language governing permissions and\n limitations under the License.\n\n-->\n<h2 mat-dialog-title class=\"title\">\n {{ mode === 'create' ? 'Create a new flow' : 'Edit flow' }}\n\n <button class=\"title__closeBtn\" mat-icon-button aria-label=\"Close dialog\" [mat-dialog-close]=\"false\">\n <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n </button>\n</h2>\n\n@if (flowFormGroup) {\n <mat-dialog-content class=\"content\" [formGroup]=\"flowFormGroup\">\n <p>\n Flows allow you to apply different policies per HTTP path and/or method. For example you can reroute calls based on the URL specified.\n </p>\n <div class=\"content__row\">\n <mat-form-field>\n <mat-label>Flow name</mat-label>\n <input matInput formControlName=\"name\" cdkFocusInitial />\n <mat-hint>Names will be automatically generated with path and method if left blank</mat-hint>\n </mat-form-field>\n </div>\n <div class=\"content__row\">\n <mat-form-field>\n <mat-label>Operator</mat-label>\n <mat-select formControlName=\"pathOperator\">\n <mat-option value=\"EQUALS\">Equals</mat-option>\n <mat-option value=\"STARTS_WITH\">Starts with</mat-option>\n </mat-select>\n <mat-hint>Path operator</mat-hint>\n </mat-form-field>\n <mat-form-field>\n <mat-label>Path</mat-label>\n <span matTextPrefix>/ </span>\n <input matInput formControlName=\"path\" />\n <mat-hint>Path</mat-hint>\n </mat-form-field>\n </div>\n <div class=\"content__row\">\n <mat-form-field>\n <mat-label>Methods for your flow</mat-label>\n <gio-form-tags-input\n formControlName=\"methods\"\n [autocompleteOptions]=\"methods\"\n [tagValidationHook]=\"tagValidationHook\"\n ></gio-form-tags-input>\n </mat-form-field>\n </div>\n <div class=\"content__row\">\n <mat-form-field>\n <mat-label>Condition</mat-label>\n <input matInput formControlName=\"condition\" />\n <mat-hint>Condition to execute the flow, supports Expression Language</mat-hint>\n <gio-el-assistant matSuffix />\n </mat-form-field>\n </div>\n </mat-dialog-content>\n}\n\n<mat-dialog-actions class=\"actions\" align=\"end\">\n <button class=\"actions__cancelBtn\" mat-button [mat-dialog-close]=\"false\">Cancel</button>\n <button class=\"actions__saveBtn\" color=\"primary\" mat-flat-button role=\"dialog\" (click)=\"onSubmit()\">\n {{ mode === 'create' ? 'Create' : 'Save' }}\n </button>\n</mat-dialog-actions>\n", styles: [".title__closeBtn{top:0;right:-24px;float:right}.content__row{display:flex;align-items:flex-start;gap:16px}.content__row mat-form-field{flex:1 1 auto}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "ngmodule", type: GioFormSlideToggleModule }, { kind: "ngmodule", type: GioBannerModule }, { kind: "ngmodule", type: GioIconsModule }, { kind: "component", type: i7$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: GioFormTagsInputModule }, { kind: "component", type: i7.GioFormTagsInputComponent, selector: "gio-form-tags-input", inputs: ["aria-label", "addOnBlur", "tagValidationHook", "autocompleteOptions", "displayValueWith", "useAutocompleteOptionValueOnly", "placeholder", "required", "disabled"], outputs: ["tagClicked"] }, { kind: "component", type: GioElAssistantComponent, selector: "gio-el-assistant" }] }); }
|
|
891
846
|
}
|
|
892
847
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: GioPolicyStudioFlowLlmFormDialogComponent, decorators: [{
|
|
893
848
|
type: Component,
|
|
@@ -903,21 +858,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
903
858
|
GioBannerModule,
|
|
904
859
|
GioIconsModule,
|
|
905
860
|
GioFormTagsInputModule,
|
|
906
|
-
GioFormAutocompleteInputModule,
|
|
907
861
|
GioElAssistantComponent,
|
|
908
|
-
], selector: 'gio-ps-flow-llm-form-dialog', template: "<!--\n\n Copyright (C) 2025 The Gravitee team (http://gravitee.io)\n \n Licensed under the Apache License, Version 2.0 (the \"License\");\n you may not use this file except in compliance with the License.\n You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software\n distributed under the License is distributed on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n See the License for the specific language governing permissions and\n limitations under the License.\n\n-->\n<h2 mat-dialog-title class=\"title\">\n {{ mode === 'create' ? 'Create a new flow' : 'Edit flow' }}\n\n <button class=\"title__closeBtn\" mat-icon-button aria-label=\"Close dialog\" [mat-dialog-close]=\"false\">\n <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n </button>\n</h2>\n\n@if (flowFormGroup) {\n <mat-dialog-content class=\"content\" [formGroup]=\"flowFormGroup\">\n <p>\n Flows allow you to apply different policies per HTTP path and/or method. For example you can reroute calls based on the URL specified.\n </p>\n <div class=\"content__row\">\n <mat-form-field>\n <mat-label>Flow name</mat-label>\n <input matInput formControlName=\"name\" cdkFocusInitial />\n <mat-hint>Names will be automatically generated with path and method if left blank</mat-hint>\n </mat-form-field>\n </div>\n <div class=\"content__row\">\n <mat-form-field>\n <mat-label>Operator</mat-label>\n <mat-select formControlName=\"pathOperator\">\n <mat-option value=\"EQUALS\">Equals</mat-option>\n <mat-option value=\"STARTS_WITH\">Starts with</mat-option>\n </mat-select>\n <mat-hint>Path operator</mat-hint>\n </mat-form-field>\n <mat-form-field>\n <mat-label>Path</mat-label>\n <
|
|
862
|
+
], selector: 'gio-ps-flow-llm-form-dialog', template: "<!--\n\n Copyright (C) 2025 The Gravitee team (http://gravitee.io)\n \n Licensed under the Apache License, Version 2.0 (the \"License\");\n you may not use this file except in compliance with the License.\n You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software\n distributed under the License is distributed on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n See the License for the specific language governing permissions and\n limitations under the License.\n\n-->\n<h2 mat-dialog-title class=\"title\">\n {{ mode === 'create' ? 'Create a new flow' : 'Edit flow' }}\n\n <button class=\"title__closeBtn\" mat-icon-button aria-label=\"Close dialog\" [mat-dialog-close]=\"false\">\n <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n </button>\n</h2>\n\n@if (flowFormGroup) {\n <mat-dialog-content class=\"content\" [formGroup]=\"flowFormGroup\">\n <p>\n Flows allow you to apply different policies per HTTP path and/or method. For example you can reroute calls based on the URL specified.\n </p>\n <div class=\"content__row\">\n <mat-form-field>\n <mat-label>Flow name</mat-label>\n <input matInput formControlName=\"name\" cdkFocusInitial />\n <mat-hint>Names will be automatically generated with path and method if left blank</mat-hint>\n </mat-form-field>\n </div>\n <div class=\"content__row\">\n <mat-form-field>\n <mat-label>Operator</mat-label>\n <mat-select formControlName=\"pathOperator\">\n <mat-option value=\"EQUALS\">Equals</mat-option>\n <mat-option value=\"STARTS_WITH\">Starts with</mat-option>\n </mat-select>\n <mat-hint>Path operator</mat-hint>\n </mat-form-field>\n <mat-form-field>\n <mat-label>Path</mat-label>\n <span matTextPrefix>/ </span>\n <input matInput formControlName=\"path\" />\n <mat-hint>Path</mat-hint>\n </mat-form-field>\n </div>\n <div class=\"content__row\">\n <mat-form-field>\n <mat-label>Methods for your flow</mat-label>\n <gio-form-tags-input\n formControlName=\"methods\"\n [autocompleteOptions]=\"methods\"\n [tagValidationHook]=\"tagValidationHook\"\n ></gio-form-tags-input>\n </mat-form-field>\n </div>\n <div class=\"content__row\">\n <mat-form-field>\n <mat-label>Condition</mat-label>\n <input matInput formControlName=\"condition\" />\n <mat-hint>Condition to execute the flow, supports Expression Language</mat-hint>\n <gio-el-assistant matSuffix />\n </mat-form-field>\n </div>\n </mat-dialog-content>\n}\n\n<mat-dialog-actions class=\"actions\" align=\"end\">\n <button class=\"actions__cancelBtn\" mat-button [mat-dialog-close]=\"false\">Cancel</button>\n <button class=\"actions__saveBtn\" color=\"primary\" mat-flat-button role=\"dialog\" (click)=\"onSubmit()\">\n {{ mode === 'create' ? 'Create' : 'Save' }}\n </button>\n</mat-dialog-actions>\n", styles: [".title__closeBtn{top:0;right:-24px;float:right}.content__row{display:flex;align-items:flex-start;gap:16px}.content__row mat-form-field{flex:1 1 auto}\n"] }]
|
|
909
863
|
}], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
|
|
910
864
|
type: Inject,
|
|
911
865
|
args: [MAT_DIALOG_DATA]
|
|
912
866
|
}] }] });
|
|
913
867
|
const sanitizeMethods = (value) => {
|
|
914
|
-
if (!value)
|
|
868
|
+
if (!value || value.find(m => m === 'ALL'))
|
|
915
869
|
return [];
|
|
916
870
|
return value;
|
|
917
871
|
};
|
|
918
872
|
const sanitizeMethodFormValue = (methods) => {
|
|
919
873
|
if (!methods || methods.length === 0)
|
|
920
|
-
return [];
|
|
874
|
+
return ['ALL'];
|
|
921
875
|
return methods;
|
|
922
876
|
};
|
|
923
877
|
const sanitizePath = (path) => {
|