[SOLVED] QC Custom GUI

O² O² FLP
1

For the Mch custom GUI (mchview, still in very early alpha stage), I wonder how to reuse parts of qcg, namely all the connectors (CCDB, Mysql…) that do the heavy works.

That’s most probably my lack of deep understanding of the javascript modules ecosystem, but if I want to use e.g. QCModel.js in my own code, how am I supposed to do it properly (both in dev. mode, and in production). Tried to play a bit with npm link but I’m quite confused by the whole process, so some guidance is certainly welcome :wink:

Thanks,

2

@awegrzyn

3

Hi,
If you’d like to use @aliceo2/qc (QCG) as your dependency this is not supported yet, but very simple to add. Could you just lemme know which functionality are you interested in? Do you want to just read objects from CCDB/MySQL or maybe also manage layouts? Do you also need “system discovery” that we use for online mode?
After this is done you’ll be able to do:

const {TObject2JsonClient} = require('@aliceo2/qc');
const tObject2JsonClient = new TObject2JsonClient(<conf>);
tObject2JsonClient.retrieve(<path>);
4

For the moment I’m interested in accessing the CCDB/MySQL objects, as I don’t see a need for the layouts in my UI, and I don’t know yet what online mode is :wink:

5

All right, so you just need to build qcg v1.5.1, then alienv enter ... and then use code below to get an object:

const {TObject2JsonClient} = require('@aliceo2/qc');
const config = {hostname: "<hostname>", port: <port>};
const client = new TObject2JsonClient("ccdb", config);
client.retrieve("<task_path>").then((result) => {
  console.log(result);
});

PS. Don’t add “@aliceo2/qc” to your package.json, it will be picked up from aliBuild.
PS2. The official docs will come.

6

Hi Adam,

Thanks. I’ve tried it but I guess I still miss something (obvious and easy to fix I hope). Now when I do a npm start on my project (or npm run build and use the bundled app with a non-dev server, for that matter) I get :

Error: Cannot open /Users/laurent/alice/qc/sw/osx_x86-64/qcg/v1.5.1-1/node_modules/@aliceo2/qc/tobject2json.node: TypeError: undefined is not an object (evaluating ‘global.process.dlopen’)

(I’m trying this on a Mac, with SIP enabled, but I guess that’s not relevant ? )

7

Not sure if I understand, in general you need to be all the time in aliBuild/alienv environment. Otherwise the node module won’t be found. Could you provide me with steps to reproduce that?

8

@awegrzyn I believe my issue is more of (very) basic understanding : so far my mchview pet project was only frontend, and is bundled with Webpack. It is served either by Webpack dev server (for dev) or by nginx or python http module for (fake so far) production mode.

As far as I understand the qcg on the contrary is more akin to a backend and is serving a frontend with its own HttpServer, right ?

All in all I guess I’m still not having a clear mind on where all the bits and pieces should go…

Anyway, if you want to have a look at my current dev branch :

git clone -b mchview-react-with-qcg-dep --single-branch GitHub - mrrtf/mchview
cd mchview
npm install
npm start

→ served on localhost:5678

where a basic connection to ccdb is expected when clicking on the “Data Source List” test button (see mchview/src/components/ui/DataSourceListButton.js at mchview-react-with-qcg-dep · mrrtf/mchview · GitHub)

9

All right, so without getting into details (yet).
QCG is based on our WebUI Framework (here are some docs: https://github.com/AliceO2Group/WebUi/tree/dev/Framework). It consists of backend (serves HTTP, WebSocket servers and manages database connections, either MySQL or CCDB) and frontend which is only the graphical interface and get all the data either via HTTP requests or over WebSocket.

Connection to the CCDB database is managed via QualityControl C++ code (Nodejs directly calls C++ functions: https://github.com/AliceO2Group/WebUi/blob/dev/QualityControl/tobject2json.cc that’s why you need to be within aliBuild environment when using QCG).

In order to get an object from CCDB database there are 2 ways:

  1. Nodejs class: use backend class TObject2JsonClient (that I mentioned in the previous post), this must be done from your backend, and you need to be within aliBuild environment)
  2. REST call: You can use (almost) the same REST call as QCG frontend is using, you can do it either from your frontend or backend. At first you need to run QCG standalone or use existing instance (qcg-test). There are 2 unprotected paths allowed:
  • https://YOUR_HOSTNAME/api/listObjects
  • https://YOUR_HOSTNAME/api/readObjectData?objectName=TASK_NAME

For example, the list of objects from qcg-test: https://qcg-test.cern.ch/api/listObjects
And random object: https://qcg-test.cern.ch/api/readObjectData?objectName=daqTask/IDs

Lemme know if this helps.

10

@awegrzyn Yes, it helps to clarify the picture.
I was indeed trying to use TObject2JsonClient from the frontend, which makes no sense.