[WEBUI] Migration to bootstrap 5

[nicolargo]

In the WebUI build:

bootstrap  3.1.1 - 3.4.1
Severity: moderate
Bootstrap Cross-Site Scripting (XSS) vulnerability - https://github.com/advisories/GHSA-9mvj-f7w8-pvh2
fix available via `npm audit fix --force`
Will install bootstrap@5.3.3, which is a breaking change
node_modules/bootstrap

A --force do not work. JS code should be refactor.

https://github.com/nicolargo/glances/security/dependabot/30

[nicolargo]

@fr4nc0is can you have a look ?

[github-actions[bot]]

This issue is available for anyone to work on. Make sure to reference this issue in your pull request. :sparkles: Thank you for your contribution ! :sparkles:

[nicolargo]

My assumption is that we need to migrate from LESS to SCSS because Bootstrap 5 do not include LESS anymore ?

[nicolargo]

@spike008t Can you help us on this task ?

[nicolargo]

When implemented, re-enable the audit fix in the CI: https://github.com/nicolargo/glances/blob/develop/.github/workflows/webui.yml#L26

[nicolargo]

On the issue2914 branch:

$ git checkout issue2914

$ make webui-audit-fix 
cd glances/outputs/static/ && npm audit fix && npm ci && npm run build

up to date, audited 501 packages in 1s

100 packages are looking for funding
  run `npm fund` for details

# npm audit report

bootstrap  3.1.1 - 3.4.1
Severity: moderate
Bootstrap Cross-Site Scripting (XSS) vulnerability - https://github.com/advisories/GHSA-9mvj-f7w8-pvh2
fix available via `npm audit fix --force`
Will install bootstrap@5.3.3, which is a breaking change
node_modules/bootstrap

1 moderate severity vulnerability

To address all issues (including breaking changes), run:
  npm audit fix --force
make: *** [Makefile:213 : webui-audit-fix] Erreur 1

Will install bootstrap@5.3.3, which is a breaking change...

Migration from 3 to 5 ? How to do it ?

Migrate from 3 to 4: https://getbootstrap.com/docs/4.0/migration/ (Moving from Beta 3 to our stable v4.0 release, there are no breaking changes, but there are some notable changes.) then 4 to 5: https://getbootstrap.com/docs/5.0/migration/ ???

Any advises @spike008t @notFloran @fr4nc0is ?

[nicolargo]

What i try:

➜ rm -rf node_modules/

➜ npm audit fix --force

➜ npm run build

> build
> webpack --progress --mode=production

assets by status 406 KiB [cached] 2 assets
orphan modules 560 KiB [orphan] 177 modules
runtime modules 1.29 KiB 7 modules
cacheable modules 1.47 MiB
  modules by path ./node_modules/ 946 KiB 69 modules
  modules by path ./css/ 4.34 KiB
    ./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./css/bootstrap.less 39 bytes [built] [code generated] [1 error]
    ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./css/style.scss 4.3 KiB [built] [code generated]
  ./js/app.js + 176 modules 560 KiB [built] [code generated]
  ./terminal-highlight (ignored) 15 bytes [built] [code generated]
  source-map-js (ignored) 15 bytes [built] [code generated]
  path (ignored) 15 bytes [built] [code generated]
  url (ignored) 15 bytes [built] [code generated]
  fs (ignored) 15 bytes [built] [code generated]

ERROR in ./css/bootstrap.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./css/bootstrap.less)
Module build failed (from ./node_modules/less-loader/dist/cjs.js):

@import "~bootstrap/less/variables.less";
^
Less resolver error:
'~bootstrap/less/variables.less' wasn't found. Tried - /home/nicolargo/dev/glances/glances/outputs/static/css/~bootstrap/less/variables.less,npm://~bootstrap/less/variables.less,~bootstrap/less/variables.less

Webpack resolver error details:
resolve '~bootstrap/less/variables.less' in '/home/nicolargo/dev/glances/glances/outputs/static/css'
  Parsed request is a module
  using description file: /home/nicolargo/dev/glances/glances/outputs/static/package.json (relative path: ./css)
    using description file: /home/nicolargo/dev/glances/glances/outputs/static/package.json (relative path: ./css/~bootstrap/less/variables.less)
      no extension
        /home/nicolargo/dev/glances/glances/outputs/static/css/~bootstrap/less/variables.less doesn't exist
      .less
        /home/nicolargo/dev/glances/glances/outputs/static/css/~bootstrap/less/variables.less.less doesn't exist
      .css
        /home/nicolargo/dev/glances/glances/outputs/static/css/~bootstrap/less/variables.less.css doesn't exist
      as directory
        /home/nicolargo/dev/glances/glances/outputs/static/css/~bootstrap/less/variables.less doesn't exist
    resolve as module
      /home/nicolargo/dev/glances/glances/outputs/static/css/node_modules doesn't exist or is not a directory
      looking for modules in /home/nicolargo/dev/glances/glances/outputs/static/node_modules
        /home/nicolargo/dev/glances/glances/outputs/static/node_modules/~bootstrap doesn't exist
      /home/nicolargo/dev/glances/glances/outputs/node_modules doesn't exist or is not a directory
      /home/nicolargo/dev/glances/glances/node_modules doesn't exist or is not a directory
      /home/nicolargo/dev/glances/node_modules doesn't exist or is not a directory
      /home/nicolargo/dev/node_modules doesn't exist or is not a directory
      /home/nicolargo/node_modules doesn't exist or is not a directory
      /home/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory

Webpack resolver error missing:
undefined

      Error in /home/nicolargo/dev/glances/glances/outputs/static/css/variables.less (line 2, column 0)
 @ ./css/bootstrap.less 8:6-144 22:17-24 26:0-114 26:0-114 27:22-29 27:33-47 27:50-64
 @ ./js/app.js 6:0-31

webpack 5.94.0 compiled with 1 error in 5251 ms

[nicolargo]

Ok, i successfully migrate to Bootstrap 5.

See result in the issue2914 branch.

Build is ok but...

The CSS style layout is broken:

[nicolargo]

Work in progress on the specific issue2914 branch.

[nicolargo]

Migration to Bootstrap 5 done and merged into the develop branch.