Remove dependency angular-datatables and datatables.net

[tenthe]

Body

Description

The following dependencies should be removed from the package.json file:

• angular-datatables
• datatables.net

Currently we use this dependency in the help.component of the preview dialog and in the main.scss file.
As described in PR #1090, these can be removed and replaced with internal CSS.

Maybe it is even possible to remove the datatables.net-dt dependency as well.

Remove dependency to library in the following components

• Remove dataTable from PipelineElementRuntimeInfoComponent #2583
• Remove dataTable from HelpComponent #2585
• Remove data table in PipelineElementPreviewComponent #2594

Mentoring

As this ticket is marked as good first issue: one of @dominikriemer or @tenthe are happy to provide help for getting started, just tag (one of) them if you want to start working on this issue and need some help.
If you are familiar with Angular, this is a good issue to get started with UI development in StreamPipes.

StreamPipes Committer

I acknowledge that I am a maintainer/committer of the Apache StreamPipes project.

[yash013]

Hey, @tenthe and @bossenti I'm interested in contributing to this issue. How can I get started with it?

[tenthe]

Hi @yash013 ,
a good first step is to setup a development environment.
A description how to do that can be found in [1].
Once you have the system up and running you can check where the dependencies are used and start to remove them.

Please let us know when you have any questions.

[1] https://cwiki.apache.org/confluence/display/STREAMPIPES/UI

[yash013]

getting this error while doing setup even if my docker is running
$ ./streampipes env --set UI Streampipes environment uses docker, and it isn't running - please start docker and try again!

[yash013]

I downloaded desktop docker service and installed Docker-Compose also

[tenthe]

Can you please check if your docker setup works as expected.
My suggestion would be that you start the latest StreamPipes release as described here [1].
The installation guide uses a docker compose file. This way we can make sure that everything works on your machine in docker and you can get familiar with the software and the UI.

Once this works you must stop the docker contaiers of the release version and try to start the development environment as before.
Let me know if you had any problems with the setup.

Cheers,
Philipp

[1] https://streampipes.apache.org/download

[yash013]

sure. I try and get back to you

[yash013]

after couple of reinstallation and bug fixing when I did npm start it is giving me this

but not happening anything after that

[yash013]

i am talking about this ui part

[yash013]

i restarted it and it worked see

[yash013]

what should i do now?

[tenthe]

Ah very cool!

First we want to get rid of the library datatables.net.
The CSS of this library is currently used in two components

• PipelineElementPreviewComponent
• HelpComponent

in the editor directory.

The CSS is imported in the file /scss/main.scss in line 22 (@import '~datatables.net-dt/css/jquery.dataTables.css';).

The HTML template of the HelpComponent uses the dataTable class to render a table.
You need to remove the library and provide some CSS to render the table properly.

To see the component in the software you need to add a new adapter (e.g. Machine Data Simulator) and then click on the ? in the pipeline editor to see the live data.

I hope this helps

[yash013]

this one right??

[yash013]

i am having difficulties in finding component for this table. where should we have to add CSS?

[tenthe]

Yes this is the component.
The component can be found in /src/app/editor/dialog/help/help.component.hmtl.

When you remove the class dataTable from the table in line 39 you should see that the styling in this component is gone.

[yash013]

done. please review the pull request