fix(webui): make metric SQLs readable with syntax highlighting

[Mohamed-Elfardy]

Fixes #1241

The SQL queries displayed in the web ui were unreadable
so i
Added react-syntax-highlighter for dependency.
Replaced plain text rendering with SyntaxHighlighter component.
Used Light build to minimize bundle size.
Added wrapLongLines for better readability.

before:

after :

[pashagolub]

thanks for woking on this. Should it follow the color palette? It's kind of weird to have black theme for SQL surrounded by white theme

[Mohamed-Elfardy]

It's kind of weird to have black theme for SQL surrounded by white theme

I wanted to make the queries more clear.

i think this is more suitable than the dark theme

[0xgouda]

duplicate of: #1280

plus why didn't you include the AI policy fields?

[Mohamed-Elfardy]

duplicate of: #1280

i didn't duplicate anything from this pr even didn't see the changes on code he had done.

plus why didn't you include the AI policy fields?

i will make sure from now to make the PRs include it.

[0xgouda]

i didn't duplicate anything from this pr even didn't see the changes on code he had done.

I didn't mean that you toke from him, but given that both of you didn't ask to work on it and that he sent his PR earlier, he has a higher priority.