OntimizeWeb / ontimize-web-ngx

Web application framework based on Angular technology and standards for building web apps.
https://ontimizeweb.github.io/docs/
Apache License 2.0
40 stars 16 forks source link

Installation fails on Mac M2 using Python 3.11 #1458

Closed tylerm007 closed 8 months ago

tylerm007 commented 8 months ago

npm install failed (version conflicts & looking for python2 ) InstallErrors.txt $python --version Python 3.11.6

$npm start

ontimize-web-ngx-quickstart@8.4.0 start ng serve --port 4800

Workspace extension with invalid name (defaultProject) found. Node packages may not be installed. Try installing with 'npm install'. Error: Could not find the '@angular-devkit/build-angular:dev-server' builder's node package.

daniel-grana commented 8 months ago

Hi @tylerm007, the problem is derived from third party libraries of node-sass (utility for building different scss application themes). There is no other way making it works that using Python 2, sorry for the inconvenience.

There is an alternative that is to use 'ontimize-web-ngx-quickstart' based on Angular 15 that does not requires node-sass dependency anymore. You can checkout form branch [main.15x](https://github.com/OntimizeWeb/ontimize-web-ngx-quickstart/tree/main.15.x). You can also check minimum requirements for making it work here

cheers

tylerm007 commented 8 months ago

Daniel Thank you for the response - I am working on a project to link your front-end tool with ApiLogicServer (a Python open source API microservice)

On Tue, Jan 30, 2024 at 3:34 AM Daniel Graña Cousido < @.***> wrote:

Hi @tylerm007 https://github.com/tylerm007, the problem is derived from third party libraries of node-sass (utility for building different scss application themes). There is no other way making it works that using Python 2, sorry for the inconvenience.

There is an alternative that is to use 'ontimize-web-ngx-quickstart' based on Angular 15 that does not requires node-sass dependency anymore. You can checkout form branch main.15x. You can also check minimum requirements for making it work here https://ontimizeweb.github.io/docs/v15/guide/prerequisites/

cheers

— Reply to this email directly, view it on GitHub https://github.com/OntimizeWeb/ontimize-web-ngx/issues/1458#issuecomment-1916319608, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABV34VURG2RCM3GK4O2IBRLYRCWAVAVCNFSM6AAAAABCPQ4YEOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMJWGMYTSNRQHA . You are receiving this because you were mentioned.Message ID: @.***>

tylerm007 commented 8 months ago

Daniel I am giving a demo to Fernando and the Ontimize team on Thursday. I have 15.x.x running locally - however, I wanted to connect to my own server. I see that the login does a POST to /login (not sure how the username and password are passed) but I can return the X-Auth-Token JWT in the header. However, I am not able to get past the login page - can you point me in the right direction? Thank you Tyler Band

On Tue, Jan 30, 2024 at 3:34 AM Daniel Graña Cousido < @.***> wrote:

Hi @tylerm007 https://github.com/tylerm007, the problem is derived from third party libraries of node-sass (utility for building different scss application themes). There is no other way making it works that using Python 2, sorry for the inconvenience.

There is an alternative that is to use 'ontimize-web-ngx-quickstart' based on Angular 15 that does not requires node-sass dependency anymore. You can checkout form branch main.15x. You can also check minimum requirements for making it work here https://ontimizeweb.github.io/docs/v15/guide/prerequisites/

cheers

— Reply to this email directly, view it on GitHub https://github.com/OntimizeWeb/ontimize-web-ngx/issues/1458#issuecomment-1916319608, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABV34VURG2RCM3GK4O2IBRLYRCWAVAVCNFSM6AAAAABCPQ4YEOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMJWGMYTSNRQHA . You are receiving this because you were mentioned.Message ID: @.***>

daniel-grana commented 8 months ago

Hi Tyler, first of all check what kind of service type is using your app (into src/app/app.config.ts) image Probably, you are using OntimizeEE service type.

So, in this case, you can see how credentials are sent to backend here. When login is correct, the token is extracted form header 'X-Auth-Token' and it is stored into localstorage as seen here for being used into following service callings. The mechanism is to inject the 'Authorization' header as you can (see here)

You have multiple choices to customize:

So, with this info I think you will be able to work perfectly. Cheers.

tylerm007 commented 8 months ago

Daniel Thank you - that did the trick - I can now login to Ontimize 15.x.x and connect to my server. Tyler

On Wed, Feb 21, 2024 at 5:08 AM Daniel Graña Cousido < @.***> wrote:

Hi Tyler, first of all check what kind of service type is using your app (into src/app/app.config.ts) image.png (view on web) https://github.com/OntimizeWeb/ontimize-web-ngx/assets/21100553/6305bb8d-7e7c-4ac6-94a1-dfdbbc3d2e44 Probably, you are using OntimizeEE service type.

So, in this case, you can see how credentials are sent to backend here. https://github.com/OntimizeWeb/ontimize-web-ngx/blob/4287e205e61c446cde8640d3b96eee2f93c2cf8f/projects/ontimize-web-ngx/src/lib/services/ontimize/ontimize-ee.service.ts#L23 When login is correct, the token is extracted form header 'X-Auth-Token' and it is stored into localstorage as seen here https://github.com/OntimizeWeb/ontimize-web-ngx/blob/4287e205e61c446cde8640d3b96eee2f93c2cf8f/projects/ontimize-web-ngx/src/lib/services/o-auth.service.ts#L86 for being used into following service callings. The mechanism is to inject the 'Authorization' header as you can (see here https://github.com/OntimizeWeb/ontimize-web-ngx/blob/4287e205e61c446cde8640d3b96eee2f93c2cf8f/projects/ontimize-web-ngx/src/lib/services/ontimize/ontimize-ee.service.ts#L169 )

You have multiple choices to customize:

  • overriding ontimize-ee.service.ts class to perform your buildHeaders method with your authorization headers
  • Also, you can customize your auth service, by declaring it into your app.module.ts

// Defining custom providers (if needed)... export const customProviders: any = [ { provide: O_AUTH_SERVICE, useValue: YourCustomAuthService } ];

So, with this info I think you will be able to work perfectly. Cheers.

— Reply to this email directly, view it on GitHub https://github.com/OntimizeWeb/ontimize-web-ngx/issues/1458#issuecomment-1956302340, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABV34VVGXUXODAYAMLRSUHLYUXBQVAVCNFSM6AAAAABCPQ4YEOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNJWGMYDEMZUGA . You are receiving this because you were mentioned.Message ID: @.***>

tylerm007 commented 6 months ago

I am trying to design a split panel - tree on the left and link to edit data on the right - I cannot find a good example in the documentation. I have attached my customer-tree example. Any suggestions?

BTW: I am working with Imatia to generate Ontimize web applications.

Tyler Band

daniel-grana commented 6 months ago

Hi @tylerm007, yes there is a default layout that allows to you to configure the split-pane mode. In the left pane you can place any of 'service data components' (table, list, grid or tree), and in the right pane you can see detail data. You can find more info about split-pane mode here. In addition, there is also an example in our playground of tree with your requirements but without split pane. You can see it here When you click in a tree node, a form for editing data shows in the right side.

tylerm007 commented 5 months ago

Dan; I have written an Ontimize application to edit our yaml file (this is used to generate Ontimize applications - see doc https://docs.google.com/document/d/1fDJZWa0-CYuigq-h_7jaNr9eW-h3-bC-24hVwPrivRc/edit)

Thanks for your help

Tyler M. Band - CEO AI Microservice Consulting AIMicroservice.org https://sites.google.com/view/aimicroservice/home C: 407-506-7094 LinkedIn: https://www.linkedin.com/in/tylerband/

"Connect, Automate, Extend"

tylerm007 commented 2 months ago

Daniel I have been trying to get an answer to why I cannot get my Docker version of Ontimize to talk to my Docker version of ApiLogicServer. I can connect using a curl command in the Ontimize container so I know the server name and url are correct. Somehow Ontimize is throwing a CORS error. I am pretty new to Ontimize (although I have built several Ontimize applications) - but this is critical to our releasing this software in the future. Thanks in advance for your help Tyler Band

---------- Forwarded message --------- From: Tyler Band @.> Date: Wed, Jul 24, 2024 at 1:51 PM Subject: Otnimze Docker with NGINX To: Alejandro Ricart @.>, Patricia Martínez Tilve @.>, Val Huber @.>

All I have spent over a week trying to get Ontimize Docker to talk to ApiLogicServer Docker.

http://ec2-3-94-186-7.compute-1.amazonaws.com/yaml-editor/main/home

I have built a production Ontimize Docker container (npm run production) and the app comes up but I cannot login from the Login page. The error is confusing -

[Error] XMLHttpRequest cannot load http://apilogicserver:5655/ontimizeweb/services/rest/users/login due to access control checks.

However, I can bash into the Ontimize Docker container and do the same POST (and it works). docker exec -it {container} /bin/bash curl -X POST http://apilogicserver:5655/ontimizeweb/services/rest/users/login -H 'Authorization: Basic YWRtaW46cA=='

Not sure if this is an NGINX issue or an Ontimize CORS issue?

I have attached the docker compose file - docker compose -f docker-compose-yaml.yml up -d

You can see the Ontimize source here: git clone https://github.com/tylerm007/ontimize_yaml_view.git cd ontimize_yaml_view

The Ontimize App is located here: cd ui/yaml nginx/nginx.conf (attached) Dockerfile (attached) package.json (attached)

FROM YOUR DESKTOP This is ApiLogicServer React (user: admin password: p) http://127.0.0.1:5655/admin-app/index.html http://127.0.0.1:5655/admin-app/index.html

TO run Ontimize yaml editor http://127.0.0.1 http://127.0.0.1

Is there any help or information that can help resolve this issue?

Tyler M. Band - CEO AI Microservice Consulting AIMicroservice.org https://sites.google.com/view/aimicroservice/home C: 407-506-7094 LinkedIn: https://www.linkedin.com/in/tylerband/

"Connect, Automate, Extend"

-- Tyler M. Band - CEO AI Microservice Consulting AIMicroservice.org https://sites.google.com/view/aimicroservice/home C: 407-506-7094 LinkedIn: https://www.linkedin.com/in/tylerband/

"Connect, Automate, Extend"