Re: Phoebus Olog and Web Client

["Dr. Simon Friederich via Tech-talk" <tech-talk at aps.anl.gov>]

Dear Lin,

Thanks to your CORS-hint adding my webclient to application-docker.properties, I was finally able to get the connection running: (Screenshot)

:-)

Still, I need to figure out how to properly get the REACT_APP_BASE_URL environment variable running. Without success I've tried:

1. using the .env file as written in the README
   
2. Writing "ENV REACT_BASE_APP_URL=" to the Dockerfile
   
3. using "environment: REACT_APP_BASE_URL: http://testmesaolog.mesa.kph:8080/Olog" in docker-compose
   

For now it only works if I run my container interactively, use "export REACT_APP_BASE_URL=.... && npm ci && npm start".

Follow-up question (sorry I am not familiar with npm): 

If I want a production environment, would you suggest to run  "npm run build" && "npm install -g serve" as the command line suggests after running "npm ci"?

Best regards
Simon

Am 08.10.2024 um 17:50 schrieb Wang, Lin:

Hello Simon,

According to the screenshot you attached, it is a CORS (Cross-Origin Resource Sharing) error which is restricted by web browsers for security reasons.

The curl commandline can get expected results because it does not have CORS restriction.

There is one place to configure CORS in the properties file of Olog service as follows,

Therefore, the solution should be adding the host and port of the machine on which the Olog web client is deployed to phoebus-olog/src/main/resources/application-docker.properties. For example,

cors.allowed.origins=http://localhost:3000,http://olog-web-client-deployment:port 

Please note that application-docker.properties is used for docker deployment instead of application.properties.

Regards,

Lin

-----原始邮件-----
发件人: "Dr. Simon Friederich" <s.friederich at uni-mainz.de>
发送时间: 2024-10-08 16:15:01 (星期二)
收件人: "Wang, Lin" <wanglin at ihep.ac.cn>
抄送: tech-talk at aps.anl.gov
主题: Re: Phoebus Olog and Web Client

Dear Lin,

Thank you very much for your replies (also in my other Phoebus question mail; here I am still investigating).

Your debug help was very helpful, because I figured out that in case of the unhandled error, instead of the REACT_APP_BASE_URL it used localhost:3000 (wrong host and wrong port). When I use

  export REACT_APP_BASE_URL=http://olog:8080/Olog

and run "npm ci" and "npm start" in an interactive docker container, the error changes to:

  Search Error
  Could not reach the logbook service

I attach a screenshot of the debugger. I'd be happy If you can spot an obvious error.

From the commandline inside the olog-web container I still get expected results when using curl, e.g.
  # curl http://olog:8080/Olog/logs/search?start=2024-09-10&end=now&from=0&size=30&sort=down

  # {"hitCount":3,"logs":[{"id":0,"owner":"user","source":"#First entry\nFirst entry\n","description":"#First entry\nFirst entry","title":"First   entry","level":"Urgent","state":"Active","createdDate":1727788595982,"modifyDate":null,"events":null,"logbooks":[{"name":"controls","owner":null,"state":"Active"}],"tags":[],"properties":[{"name":"resource","owner":null,"state":"Active","attributes":[{"name":"file","value":"","state":"Active"},{"name":"name","value":"","state":"Active"}]}],"attachments":[]},{"id":1,"owner":"user","source":"# Second Entry\n## This is a subheader\nSecond entry from user","description":"Second Entry\nThis is a subheader\nSecond entry from user","title":"Second Entry","level":"Info","state":"Active","createdDate":1727792498185,"modifyDate":null,"events":null,"logbooks":[{"name":"controls","owner":null,"state":"Active"}],"tags":[],"properties":[],"attachments":[]},{"id":2,"owner":"user","source":"# New changes to settings.ini\nSeems to not have worked","description":"New changes to settings.ini\nSeems to not have worked","title":"New changes to settings.ini","level":"Problem","state":"Active","createdDate":1727863879466,"modifyDate":null,"events":null,"logbooks":[{"name":"controls","owner":null,"state":"Active"}],"tags":[],"properties":[],"attachments":[]}]}curl http://olog:8080/Olog/logs/search?start=2024-09-10&end=now&from=0&size=30&sort=down

Best regards,
Simon

Am 03.10.2024 um 12:53 schrieb Wang, Lin:

Hello Simon,

Since my network connection to Docker Hub and NPM are very slow, I cannot do enough test regarding why your docker deployment does not work. 

But typically, the "Search Error, Could not reach the logbook service" error is because the configuration of REACT_APP_BASE_URL (which points to the Olog service) in phoebus-olog-web-client is incorrect or does not take effect.

I think there are several ways to configure REACT_APP_BASE_URL:
1. Set the OS environment variable REACT_APP_BASE_URL.
2. Create a .env file that includes the definition of REACT_APP_BASE_URL, which you already did.
3. Directly modify the following line in phoebus-olog-web-client/src/config/customization.js:
   APP_BASE_URL: process.env.REACT_APP_BASE_URL, // e.g. http://localhost:8080/Olog
   for example to
   APP_BASE_URL: 'http://olog-service-ip-address:8080/Olog', // e.g. http://localhost:8080/Olog

One debug method can be used to check whether the REACT_APP_BASE_URL is configured successfully, that is, 
press the F12 key on the web browser to open debug mode and navigate to "Network" tab, then check which URL has actually been sent. 
Attached is a screenshot in my environment.


Regards,
Lin

-----原始邮件-----
发件人: "Dr. Simon Friederich via Tech-talk" <tech-talk at aps.anl.gov>
发送时间:2024-10-03 03:59:21 (星期四)
收件人: tech-talk at aps.anl.gov
主题: [SPAM] Phoebus Olog and Web Client

Dear Kunal,
Dear George,
Dear Phoebus-Olog-Team,

Phoebus Olog:
I am currently testing olog as your modern alternative for elog.
Thanks to your example from the repository [1], I have now a running 
elasticsearch, mongo and olog service.
I can access it via Phoebus with the settings.ini:

     ################################
     # Package org.phoebus.olog.es.api
     #################################
     org.phoebus.logbook/logbook_factory=olog-es
     org.phoebus.olog.es.api/olog_url=https://urldefense.us/v3/__http://testmesaolog:8080/Olog__;!!G_uCfscf7eWS!dso4dmkrF-LWpZlpdNz3MRexqz8vRrLcyJnfweqt58VzNYt-zlwPQTyYVFpwEeDeXJQs8xSu-UMk4ZV4BLuBn_nBCHrJ8zzX$ 
     org.phoebus.olog.es.api/username=user
     org.phoebus.olog.es.api/password=userPass

But I have some further questions I was not able to figure out for myself:
- If I run the olog-docker I am in a demo mode with a user admin and user?
- How do I customize my olog? I have found a cuple of files in 
phoebus-olog/src/main/resources. You mention a special github repository 
where only application.properties is used for this [2].
- Can I change these properties any time? (e.g. I need more logbooks, 
different users or tags?)
- How do I add/remove users and/or groups? I do not quite understand the 
correct syntax in application.properties. Could you provide an example?
   E.g. I want admin, operator, rfeng, cryoeng. If it's not mandatory, I 
don't want to use the LDAP service, unless it makes everything easier.
- Where are the logbooks stored and how would you backup them?
- I have these two docker-managed volumes esdata and mongodata in the 
docker-compose.yml file. Are these important to backup?
- Can I use a mongo-GUI like mongodb compass to manage the logbook or is 
mongo only a backend? (Sorry for such questions, but I am not familiar 
with this yet)

Web client:
Then I need to access the logbooks via webbrowser. Hence, I've looked at 
your phoebus-olog-web-client [3].
Based on your Dockerfile I've set up a docker container in the same 
network "olognet" where elastic, monogo and olog reside (though the 
ports are published on localhost) with a docker-compose file:
Dockerfile:

     # Node 18
     FROM node:22-alpine
     # FROM node:18-alpine
     RUN apk update && apk add curl bash
     WORKDIR /app
     ENV PATH=/app/node_modules/.bin:$PATH
     COPY . ./
     RUN npm ci --silent \
         && npx update-browserslist-db@latest
         #  \
         # && npm run build \
         # && npm install -g serve

     # start app
     CMD ["npm", "start"]
     # CMD ["serve", "-s", "build"]

docker-compose.yml

     networks:
       olognet:
         external: true

     services:
       olog-web:
         container_name: "olog-web"
         build: .
         ports:
           - "3000:3000"
           # - "6006:6006" # storybook for testing
         environment:
           TZ: Europe/Berlin
           # REACT_APP_BASE_URL: https://urldefense.us/v3/__http://olog:8080/Olog__;!!G_uCfscf7eWS!dso4dmkrF-LWpZlpdNz3MRexqz8vRrLcyJnfweqt58VzNYt-zlwPQTyYVFpwEeDeXJQs8xSu-UMk4ZV4BLuBn_nBCK794Uuc$  # specified in 
.env file
         stdin_open: true # docker run -i, debug
         tty: true        # docker run -t, debug
         networks:
           - olognet
         # command: ["/bin/bash"] # debug


I've also copied .env.example to .env and adopted to 
REACT_APP_BASE_URL=https://urldefense.us/v3/__http://olog:8080/Olog__;!!G_uCfscf7eWS!dso4dmkrF-LWpZlpdNz3MRexqz8vRrLcyJnfweqt58VzNYt-zlwPQTyYVFpwEeDeXJQs8xSu-UMk4ZV4BLuBn_nBCK794Uuc$ .
 From within the olog-web-container I can ping the olog container and 
see the expected answer when running curl:
     21e0630b20ba:/app# curl https://urldefense.us/v3/__http://olog:8080/Olog__;!!G_uCfscf7eWS!dso4dmkrF-LWpZlpdNz3MRexqz8vRrLcyJnfweqt58VzNYt-zlwPQTyYVFpwEeDeXJQs8xSu-UMk4ZV4BLuBn_nBCK794Uuc$ 
     {
       "name" : "Olog Service",
       "version" : "5.0.0-SNAPSHOT",
       "elastic" : {
         "status" : "Connected",
         "clusterName" : "elasticsearch",
         "clusterUuid" : "h-dKVMuFTJSlXb0gxeFn2w",
         "version" : 
"co.elastic.clients.elasticsearch._types.ElasticsearchVersionInfo@78b8c4e7",
         "elasticHost" : "elastic",
         "elasticPort" : "9200"
       },
       "mongoDB" : "{type=STANDALONE, servers=[{address=mongo:27017, 
type=STANDALONE, roundTripTime=0.5 ms, state=CONNECTED}]",
       "serverConfig" : {
         "maxFileSize" : 50.0,
         "maxRequestSize" : 100.0
       }

Yet, if I access the web view on port 3000 it show the error message:
     Search Error
     Could not reach the logbook service

So my question is do you see my mistake or can you tell me how to debug 
my issue?

Thank you very much in advance
Best regards
Simon

[1] https://urldefense.us/v3/__https://github.com/Olog/phoebus-olog__;!!G_uCfscf7eWS!dso4dmkrF-LWpZlpdNz3MRexqz8vRrLcyJnfweqt58VzNYt-zlwPQTyYVFpwEeDeXJQs8xSu-UMk4ZV4BLuBn_nBCAMBxssS$ 
[2] https://urldefense.us/v3/__https://github.com/willrogers/olog-es-docker__;!!G_uCfscf7eWS!dso4dmkrF-LWpZlpdNz3MRexqz8vRrLcyJnfweqt58VzNYt-zlwPQTyYVFpwEeDeXJQs8xSu-UMk4ZV4BLuBn_nBCAEkg_SM$ 
[3] https://urldefense.us/v3/__https://github.com/Olog/phoebus-olog-web-client__;!!G_uCfscf7eWS!dso4dmkrF-LWpZlpdNz3MRexqz8vRrLcyJnfweqt58VzNYt-zlwPQTyYVFpwEeDeXJQs8xSu-UMk4ZV4BLuBn_nBCDdGhnsq$ 


-- 
Dr. Simon Friederich
Institute of Nuclear Physics
Collaboration B | MESA
Johannes Gutenberg-Universität Mainz
Johann-Joachim-Becherweg 45
55128 Mainz, Germany

phone: +49 (0)6131 39-23160
E-Mail: s.friederich at uni-mainz.de