From 1bb8e6b612373c2575c48977e0e21beb2208811f Mon Sep 17 00:00:00 2001 From: zwiterrion Date: Fri, 17 Jan 2025 11:47:57 +0100 Subject: [PATCH] wip --- otoroshi/app/next/models/Api.scala | 4 +- .../javascript/src/components/inputs/Table.js | 8 +- .../nginputs/LocalChangesRenderer.js | 2 +- .../src/components/nginputs/components.js | 2 - .../javascript/src/pages/ApiEditor/index.js | 246 ++++++++++++------ .../src/pages/RouteDesigner/Designer.js | 23 +- .../src/style/layout/_pagecontent.scss | 2 +- 7 files changed, 189 insertions(+), 98 deletions(-) diff --git a/otoroshi/app/next/models/Api.scala b/otoroshi/app/next/models/Api.scala index 33e2c3320..d713a9643 100644 --- a/otoroshi/app/next/models/Api.scala +++ b/otoroshi/app/next/models/Api.scala @@ -486,7 +486,7 @@ object ApiBackend { val _fmt: Format[ApiBackend] = new Format[ApiBackend] { override def reads(json: JsValue): JsResult[ApiBackend] = Try { - json.select("ref").asOpt[String] match { + json.asOpt[String] match { case Some(ref) => ApiBackendRef(ref) case None => ApiBackendInline( id = json.select("id").as[String], @@ -503,7 +503,7 @@ object ApiBackend { override def writes(o: ApiBackend): JsValue = { o match { - case ApiBackendRef(ref) => Json.obj("ref" -> ref) + case ApiBackendRef(ref) => JsString(ref) case ApiBackendInline(id, name, backend) => Json.obj( "id" -> id, "name" -> name, diff --git a/otoroshi/javascript/src/components/inputs/Table.js b/otoroshi/javascript/src/components/inputs/Table.js index 3f1559b2d..830e59a00 100644 --- a/otoroshi/javascript/src/components/inputs/Table.js +++ b/otoroshi/javascript/src/components/inputs/Table.js @@ -870,7 +870,13 @@ class TableComponent extends Component {
} -function RouteDesigner() { - return

Route designer

+function RouteDesigner(props) { + const params = useParams() + const history = useHistory() + + const [schema, setSchema] = useState() + const [route, setRoute] = useState({}) + + const rawAPI = useQuery(["getAPI", params.apiId], + () => nextClient.forEntityNext(nextClient.ENTITIES.APIS).findById(params.apiId), { + retry: 0, + onSuccess: data => { + setRoute(data.routes.find(route => route.id === params.routeId)) + setSchema({ + name: { + type: 'string', + label: 'Route name', + placeholder: 'My users route' + }, + frontend: { + type: 'form', + label: 'Frontend', + schema: NgFrontend.schema, + props: { + v2: { + folded: ['domains', 'methods'], + flow: NgFrontend.flow, + } + } + // flow: NgFrontend.flow, + }, + flow_ref: { + type: 'select', + label: 'Flow ID', + props: { + options: data.flows, + optionsTransformer: { + label: 'name', + value: 'id', + } + }, + }, + backend: { + type: 'form', + label: 'Backend', + schema: NgBackend.schema, + flow: NgBackend.flow + } + }) + } + }) + + const flow = [ + { + type: 'group', + name: 'Domains information', + collapsable: true, + fields: ['frontend'] + }, + { + type: 'group', + collapsable: true, + collapsed: true, + name: 'Selected flow', + fields: ['flow_ref'], + }, + { + type: 'group', + collapsable: true, + collapsed: true, + name: 'Backend configuration', + fields: ['backend'], + }, + { + type: 'group', + collapsable: true, + collapsed: true, + name: 'Additional informations', + fields: ['name'], + } + ] + + const updateRoute = () => { + return nextClient + .forEntityNext(nextClient.ENTITIES.APIS) + .update({ + ...rawAPI.data, + routes: rawAPI.data.routes.map(item => { + if (item.id === route.id) + return route + return item + }) + }) + .then(() => history.push(`/apis/${params.apiId}/routes`)) + } + + return + + + + +
+ setRoute(newValue)} /> +
+ } function NewRoute(props) { @@ -71,9 +186,19 @@ function NewRoute(props) { const [schema, setSchema] = useState() + const [backends, setBackends] = useState([]) + + const backendsQuery = useQuery(['getBackends'], + () => nextClient.forEntityNext(nextClient.ENTITIES.BACKENDS).findAll(), + { + enabled: backends.length <= 0, + onSuccess: setBackends + }) + const rawAPI = useQuery(["getAPI", params.apiId], () => nextClient.forEntityNext(nextClient.ENTITIES.APIS).findById(params.apiId), { retry: 0, + enabled: backendsQuery.data !== undefined, onSuccess: data => { setSchema({ name: { @@ -105,10 +230,31 @@ function NewRoute(props) { }, }, backend: { - type: 'form', - label: 'Backend', - schema: NgBackend.schema, - flow: NgBackend.flow + // type: 'form', + // label: 'Backend', + renderer: props => { + return { + props.rootOnChange({ + ...props.rootValue, + usingExistingBackend: e + }) + }} + onChange={backend_ref => { + props.rootOnChange({ + ...props.rootValue, + usingExistingBackend: true, + backend: backend_ref + }) + }} + usingExistingBackend={props.rootValue.usingExistingBackend} + route={props.rootValue} + /> + } + // schema: NgBackend.schema, + // flow: NgBackend.flow } }) } @@ -175,14 +321,16 @@ function NewRoute(props) { }) .then(r => r.json()) ]), { - onSuccess: ([backendTemplate, frontendTemplate]) => { - setRoute({ - ...route, - frontend: frontendTemplate, - backend: backendTemplate, - }) - } - }) + retry: 0, + onSuccess: ([backendTemplate, frontendTemplate]) => { + setRoute({ + ...route, + frontend: frontendTemplate, + backend: backendTemplate, + usingExistingBackend: false + }) + } + }) return @@ -218,7 +366,7 @@ function Routes(props) { filterId: 'name', content: (item) => item.name, }, - { title: 'Description', filterId: 'description', content: (item) => item.description }, + { title: 'Domains', filterId: 'frontend.domains', content: (item) => item.description }, ]; const rawAPI = useQuery(["getAPI", params.apiId], @@ -239,6 +387,7 @@ function Routes(props) { ...api, routes: api.routes.filter(f => f.id !== item.id) }) + .then(() => window.location.reload()) const fields = [] @@ -470,71 +619,6 @@ function NewBackend(props) { } -// function BackendSelector() { -// return <> -//

Select a backend template

-//
-// {[ -// { -// kind: 'empty', -// title: 'BLANK ROUTE', -// text: 'From scratch, no plugin added', -// }, -// { -// kind: 'api', -// title: 'REST API', -// text: 'Already setup secured rest api with api management', -// }, -// { -// kind: 'webapp', -// title: 'WEBAPP', -// text: 'Already setup web application with authentication', -// }, -// { -// kind: 'graphql-proxy', -// title: 'GRAPHQL API', -// text: 'Already setup grapqhl api with api management and validation', -// }, -// { -// kind: 'mock', -// title: 'QUICKSTART REST API', -// text: 'Already setup rest api with extended mocking capabilities', -// }, -// { -// kind: 'graphql', -// title: 'GRAPHQL COMPOSER API', -// text: 'Create a graphql api from scratch from existing sources', -// }, -// ].map(({ kind, title, text }) => ( -// -// ))} -//
-// -// } - function EditBackend() { } diff --git a/otoroshi/javascript/src/pages/RouteDesigner/Designer.js b/otoroshi/javascript/src/pages/RouteDesigner/Designer.js index 6c91209a3..a079e2c9a 100644 --- a/otoroshi/javascript/src/pages/RouteDesigner/Designer.js +++ b/otoroshi/javascript/src/pages/RouteDesigner/Designer.js @@ -2456,7 +2456,12 @@ class EditView extends React.Component { usingExistingBackend: e, }); }} - setRoute={setRoute} + onChange={backend_ref => + setRoute({ + ...route, + backend_ref, + }) + } usingExistingBackend={usingExistingBackend} route={route} /> @@ -2552,14 +2557,17 @@ const Actions = ({ selectedNode, onRemove }) => (
); -const BackendSelector = ({ +export const BackendSelector = ({ enabled, setUsingExistingBackend, - setRoute, + onChange, usingExistingBackend, route, backends, }) => { + + if (!enabled) + return null return ( enabled && (
@@ -2575,19 +2583,14 @@ const BackendSelector = ({
- setRoute({ - ...route, - backend_ref, - }) - } + onChange={onChange} options={backends} optionsTransformer={(arr) => arr.map((item) => ({ label: item.name, value: item.id })) diff --git a/otoroshi/javascript/src/style/layout/_pagecontent.scss b/otoroshi/javascript/src/style/layout/_pagecontent.scss index 31f0c1970..df0f17e28 100644 --- a/otoroshi/javascript/src/style/layout/_pagecontent.scss +++ b/otoroshi/javascript/src/style/layout/_pagecontent.scss @@ -55,7 +55,7 @@ } .page-header_title { - margin-top: 32px; + margin-top: 1rem; // margin-left: 25px; padding-bottom: 9px; border-bottom: 1px solid var(--color-primary);